[Commits] r933 - in apps/opengeo/geoexplorer/trunk: lib/GeoExplorer lib/GeoExplorer/Full theme

[commits at geoext.org]

Author: dwins
Date: 2009-06-01 23:39:11 +0200 (Mon, 01 Jun 2009)
New Revision: 933

Modified:
   apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full/Full.js
   apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Wizard.js
   apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css
Log:
Improve wizard to act more wizard-like (requiring the user to visit all panels before finishing, etc.)


Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full/Full.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full/Full.js	2009-06-01 21:11:14 UTC (rev 932)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full/Full.js	2009-06-01 21:39:11 UTC (rev 933)
@@ -68,6 +68,9 @@
             modal: true,
             title: "Export Map",
             pages: [{
+                title: 'Start',
+                panel: new Ext.Panel({html:"This is a dummy panel and should be removed before release."})
+            },{
                 title: 'Layers',
                 panel: layerSelection
             },{

Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Wizard.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Wizard.js	2009-06-01 21:11:14 UTC (rev 932)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Wizard.js	2009-06-01 21:39:11 UTC (rev 933)
@@ -31,24 +31,124 @@
         layout: 'card',
         activeItem: 0,
         tbar: [],
+        bbar: [],
         items: []
     });
 
     for (var i = 0, len = config.pages.length; i < len; i++) {
         if (i !== 0) config.tbar.push({text: '&rarr;', disabled: true});
-        config.tbar.push({
+
+        config.pages[i].panel.wizardNavButton = new Ext.Button({
             text: config.pages[i].title, 
+            disabled: i > 1,
             handler: function(x) {
                 return function() { this.layout.setActiveItem(x); this.doLayout(); };
             }(config.items.length),
             scope: this
         });
 
+        config.pages[i].panel.on("show", function(panel){
+            panel.wizardNavButton.addClass("gx-wizard-active");
+            this.updateNavButtons();
+        }, this);
+        config.pages[i].panel.on("hide", function() {
+            this.wizardNavButton.removeClass("gx-wizard-active");
+        });
+
+        config.tbar.push(config.pages[i].panel.wizardNavButton);
         config.items.push(config.pages[i].panel);
     }
 
+    config.bbar.push("->");
+
+    this.backButton = new Ext.Button({
+        text: 'Back',
+        handler: function() {
+            this.previousWizardPanel();
+        }, 
+        scope: this,
+        disabled: true
+    });
+
+    this.nextButton = new Ext.Button({
+        text: 'Next',
+        handler: function(button) {
+            this.nextWizardPanel();
+        }, 
+        scope: this,
+        disabled: (config.items.length <= 1)
+    })
+
+    config.bbar.push(this.backButton);
+    config.bbar.push(this.nextButton);
+
     GeoExplorer.Wizard.superclass.constructor.call(this, config);
 };
 
-Ext.extend(GeoExplorer.Wizard, Ext.Window);
+Ext.extend(GeoExplorer.Wizard, Ext.Window, {
 
+    /** private: property[backButton]
+     * A reference to the 'back' button on the toolbar
+     */
+    backButton: null,
+
+    /** private: property[nextButton]
+     * A reference to the 'next' button on the toolbar
+     */
+    nextButton: null,
+
+    /** api: method[previousWizardPanel] 
+     * Activate the previous panel in the wizard
+     */
+    previousWizardPanel: function() {
+        var activeIndex = this.items.findIndexBy(function(x){
+            return x === this.layout.activeItem;
+        }, this);
+
+        if (activeIndex > 0) {
+            this.layout.setActiveItem(activeIndex-1);
+            this.doLayout();
+            this.updateNavButtons();
+        }
+    },
+
+    /** api: method[nextWizardPanel] 
+     * Activate the next panel in the wizard
+     */
+    nextWizardPanel: function() {
+        var activeIndex = this.items.findIndexBy(function(x){
+            return x === this.layout.activeItem;
+        }, this);
+
+        if (activeIndex +1 < this.items.length) {
+            this.layout.setActiveItem(activeIndex+1);
+            this.doLayout();
+            this.updateNavButtons();
+        }
+    },
+
+    /** private: method[updateNavButtons] 
+     * Enable or disable navigation buttons based on the current active page.
+     */
+    updateNavButtons: function() {
+        var activeIndex = this.items.findIndexBy(function(x){
+            return x === this.layout.activeItem;
+        }, this);
+
+        if (activeIndex > 0) {
+            this.backButton.enable();
+        } else {
+            this.backButton.disable();
+        }
+
+        if (activeIndex < this.items.length - 1) {
+            this.nextButton.enable();
+        } else {
+            this.nextButton.disable();
+        }
+
+        var nextPanel = this.items.itemAt(activeIndex + 1);
+        if (nextPanel && nextPanel.wizardNavButton) nextPanel.wizardNavButton.enable();
+    }
+});
+

Modified: apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css
===================================================================
--- apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css	2009-06-01 21:11:14 UTC (rev 932)
+++ apps/opengeo/geoexplorer/trunk/theme/geoexplorer.css	2009-06-01 21:39:11 UTC (rev 933)
@@ -217,6 +217,10 @@
     background: blue;
 }
 
+.gx-wizard-active button {
+    font-weight: bold;
+}
+
 .gx-wizard-pane .x-panel-body {
     background: none;
 }