main.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

     */
    createMenuModel: function() {
        var launchMenu = new Extras.MenuModel(null, this._msg["Menu.LaunchMenu"], null);
        var windowedLaunchMenu = new Extras.MenuModel(null, this._msg["Menu.StartWindowedDemoMenu"], null);
        
        for (var i = 0; i < this._sections.length; ++i) {
            for (var j = 0; j < this._sections[i].screens.length; ++j) {
                var screen = this._sections[i].screens[j];
                launchMenu.addItem(new Extras.OptionModel("L:" + screen.id, screen.title, screen.icon16));
                windowedLaunchMenu.addItem(new Extras.OptionModel("W:" + screen.id, screen.title, screen.icon16));
            }
        }
        launchMenu.addItem(new Extras.SeparatorModel());
        launchMenu.addItem(windowedLaunchMenu);
        launchMenu.addItem(new Extras.SeparatorModel());
        launchMenu.addItem(new Extras.OptionModel("autodemo", this._msg["Menu.StartAutoDemo"], "image/Icon16Play.gif"));
        launchMenu.addItem(new Extras.OptionModel("perftest", this._msg["Menu.PerformanceTest"], "image/Icon16Performance.gif"));
    
        var menuModel = new Extras.MenuModel(null, null, null, [
            launchMenu,
            new Extras.MenuModel(null, this._msg["Menu.ToolsMenu"], null, [
                new Extras.OptionModel("viewsource", this._msg["Menu.ViewSource"], "image/Icon16JavaScript.gif"),
                new Extras.MenuModel(null, this._msg["Menu.ViewSourceMenu"], null, [
                    new Extras.OptionModel("viewsource.main", this._msg["Menu.ViewSourceMain"], null),
                    new Extras.OptionModel("viewsource.ss", this._msg["Menu.ViewSourceStyleSheet"], null),
                    new Extras.OptionModel("viewsource.msg", this._msg["Menu.ViewSourceMessages"], null),
                    new Extras.SeparatorModel(),
                    new Extras.OptionModel("viewsource.html", this._msg["Menu.ViewSourceHtml"], null)
                ]),
                new Extras.SeparatorModel(),
                new Extras.OptionModel("preferences", this._msg["Menu.Preferences"], "image/Icon16Preferences.gif"),
                new Extras.MenuModel(null, this._msg["Menu.Locale"], null, [
                    new Extras.OptionModel("locale.en", "English/US", null),
                    new Extras.OptionModel("locale.1337", "1337", null)
                ]),
                new Extras.SeparatorModel(),
                new Extras.OptionModel("download", this._msg["Menu.Download"], "image/Icon16Download.gif")
            ]),
            new Extras.MenuModel(null, this._msg["Menu.HelpMenu"], null, [
                new Extras.OptionModel("about", this._msg["Menu.About"], "image/Icon16Info.gif")
            ])
        ]);
        return menuModel;
    },
    
    /**
     * Determines which screen is sequentially after the current screen.
     *
     * @return the next screen
     * @type DemoApp.Workspace.ScreenData
     */
    getNextScreen: function() {
        var activeFound = this._activeScreen == null;
        for (var k = 0; k < 2; ++k) {
            for (var i = 0; i < this._sections.length; ++i) {
                for (var j = 0; j < this._sections[i].screens.length; ++j) {
                    var screen = this._sections[i].screens[j];
                    if (activeFound && screen.launchFunction) {
                        return screen;
                    }
                    if (this._activeScreen == screen) {
                        activeFound = true;
                    }
                }
            }
        }
    },
    
    /**
     * Determines which screen is sequentially before the current screen.
     *
     * @return the previous screen
     * @type DemoApp.Workspace.ScreenData
     */
    getPreviousScreen: function() {
        var activeFound = this._activeScreen == null;
        for (var k = 0; k < 2; ++k) {
            for (var i = this._sections.length - 1; i >= 0; --i) {
                for (var j = this._sections[i].screens.length - 1; j >= 0; --j) {
                    var screen = this._sections[i].screens[j];
                    if (activeFound && screen.launchFunction) {
                        return screen;
                    }
                    if (this._activeScreen == screen) {
                        activeFound = true;
                    }
                }
            }
        }
    },
    
    /**
     * Launches a demo screen in the main content area.
     *
     * @param {DemoApp.Workspace.ScreenData} screen the screen to launch
     * @param {Boolean} windowed flag indicating whether the screen should be launched in a window (true) or in the 
     *        main content area (false)
     */
    launchScreen: function(screen, windowed) {
        var screenWindow;
    
        if (windowed) {
            screenWindow = new DemoApp.ScreenWindow(screen);
            this.add(screenWindow);
        } else {
            if (this._activeScreenLaunchButton) {
                this._activeScreenLaunchButton.setStyleName("LaunchPanel");
                this._activeScreenLaunchButton = null;
            }

            this._activeScreen = screen;
        }
        
        this.application.client.exec(screen.modules, Core.method(this, function() {
            if (screen.launchFunction) {
                screen.launchFunction(windowed ? screenWindow : this);
            }
            if (!windowed) {
                this._setActiveTab(screen);
            }
        }));
    },
    
    /**
     * Processes a click on a demo launcher button.
     * 
     * @param e the action event recevied from the button
     */
    _processLauncherClick: function(e) {
        if (this._screenMap[e.actionCommand]) {
            this.setTransition(Extras.TransitionPane.TYPE_FADE);
            var screen = this._screenMap[e.actionCommand];
            this.launchScreen(screen);
        }
    },
    
    /**
     * Processes a menu item selection.
     * 
     * @param e the event
     */
    _processMenuAction: function(e) {
        switch (e.modelId) {
        case "about":
            // Display about dialog.
            this.application.client.exec(DemoApp.MODULE_ABOUT, Core.method(this, function() {
                this.add(new DemoApp.AboutDialog());
            }));
            break;
        case "autodemo":
            // Display automatic demo dialog.
            this.application.client.exec(DemoApp.MODULE_AUTOMATIC_DEMO, Core.method(this, function() {
                this.add(new DemoApp.AutomaticDemo.StartDialog(this));
            }));
            break;
        case "download":
            // Display download instructions dialog.
            this.add(new DemoApp.DownloadWindow());
            break;            
        case "perftest":
            // Display performance test dialog.
            this.application.client.exec(DemoApp.MODULE_AUTOMATIC_DEMO, Core.method(this, function() {
                this.add(new DemoApp.AutomaticDemo.PerformanceTestDialog(this));
            }));
            break;
        case "preferences":
            // Display preferences dialog.
            this.application.client.exec(DemoApp.MODULE_PREFERENCES, Core.method(this, function() {
                this.add(new DemoApp.PreferencesDialog(this.application));
            }));
            break;
        case "viewsource":
            // Display source of active screen.
            this.application.client.exec(DemoApp.MODULE_SOURCE_VIEW, Core.method(this, function() {
                this.add(new DemoApp.SourceWindow(this._activeScreen));
            }));
            break;
        case "viewsource.main":
            // Display source of Main.js.
            this.application.client.exec(DemoApp.MODULE_SOURCE_VIEW, Core.method(this, function() {
                this.add(new DemoApp.SourceWindow("app/Main.js"));
            }));
            break;
        case "viewsource.ss":
            // Display source of stylesheet.
            this.application.client.exec(DemoApp.MODULE_SOURCE_VIEW, Core.method(this, function() {
                this.add(new DemoApp.SourceWindow("app/Default.StyleSheet.js"));
            }));
            break;
        case "viewsource.msg":
            // Display source of main resource map.
            this.application.client.exec(DemoApp.MODULE_SOURCE_VIEW, Core.method(this, function() {
                this.add(new DemoApp.SourceWindow("app/Messages.js"));
            }));
            break;
        case "viewsource.html":
            // Display source of index.html.
            this.application.client.exec(DemoApp.MODULE_SOURCE_VIEW, Core.method(this, function() {
                this.add(new DemoApp.SourceWindow("index.html"));
            }));
            break;
        default:
            var screen;
            if (e.modelId.substring(0,2) == "L:") {
                // Launch a demo screen in the main content area.
                screen = this._screenMap[e.modelId.substring(2)];
                this.launchScreen(screen);
            } else if (e.modelId.substring(0,2) == "W:") {
                // Launch a demo screen in a popup window.
                screen = this._screenMap[e.modelId.substring(2)];
                this.launchScreen(screen, true);
            } else if (e.modelId.substring(0,7) == "locale.") {
                // Set the application locale.
                var locale = e.modelId.substring(7);
                this._setLocale(locale);
            }
            break;
        }
    },
    
    /**
     * Process a click event on the next screen button.
     *
     * @param e the event
     */
    _processNext: function(e) {
        this.setTransition(Extras.TransitionPane.TYPE_CAMERA_PAN_RIGHT);
        this.launchScreen(this.getNextScreen());
    },
    
    /**
     * Process a click event on the previous screen button.
     *
     * @param e the event
     */
    _processPrevious: function(e) {
        this.setTransition(Extras.TransitionPane.TYPE_CAMERA_PAN_LEFT);
        this.launchScreen(this.getPreviousScreen());
    },
    
    /**
     * Sets the active tab of the launch panel to contain the specified screen.
     * 
     * @param {DemoApp.Workspace.ScreenData} the screen 
     */
    _setActiveTab: function(screen) {
        for (var i = 0; i < this._launchPanel.children.length && !this._activeScreenLaunchButton; ++i) {
            var column = this._launchPanel.children[i];
            for (var j = 0; j < column.children.length && !this._activeScreenLaunchButton; ++j) {
                var launchButton = column.children[j];
                if (launchButton.get("id") == screen.id) {
                    this._activeScreenLaunchButton = launchButton;
                    this._activeScreenLaunchButton.setStyleName("LaunchPanel.Selected");
                    this._launchPanel.set("activeTab", column.renderId);
                }
            }
        }
        
    },
    
    /**
     * Sets the content of the main content area (invoked by the screen's launch function to configure the window).
     * 
     * @param {Echo.Component} content the component to display
     */
    setContent: function(content) {
        this._contentArea.removeAll();
        this._contentArea.add(content);
    },
    
    /**
     * Sets the locale of the application.
     *
     * @param locale the new locale
     */
    _setLocale: function(locale) {
        DemoApp.locale = locale;
        if (locale in DemoApp.LOCALE_MODULES) {
            this.application.client.exec(["app/Messages." + locale + ".js"], Core.method(this, function() {
                this.application.setLocale(locale);
                // FIXME. Recreate UI.
            }));
        }
    },
    
    /**
     * Sets the transition effect used by the main content area.
     *
     * @param {Number} type the transition type (use transition constants from Extras.TransitionPane)
     * @param {Boolean} overridePreferences flag indicating whether default user preferences should be overridden
     */
    setTransition: function(type, overridePreferences) {
        this._contentArea.set("type", overridePreferences || DemoApp.pref.transitionsEnabled ?
                type : Extras.TransitionPane.TYPE_IMMEDIATE);    
    },
    
    /**
     * Starts an automatic demo/performance test.
     *
     * @param {Boolean} performanceTest flag indicating whether the demo should be a performance test
     * @param {Number} interval delay in milliseconds between automatic progression of screens
     * @param {Boolean} randomOrder flag indicating whether screens should be navigated in sequential 
     *        (false) or random (true) order
     * @param {Array} transitionStyle array of transition styels which may be used
     */
    startAutomaticDemo: function(performanceTest, interval, randomOrder, transitionStyle) {
        if (performanceTest) {
            interval = 0;
            transitionStyle = "None";
        }
    
        if (interval === 0) {
            this._launchPanel.set("animationTime", 0);
        }
        
        this._stopWindow = new DemoApp.AutomaticDemo.StopDialog(performanceTest, interval === 0);
        this._stopWindow.addListener("stop", Core.method(this, function(e) {
            this.stopAutomaticDemo();
        }));
        
        this.add(this._stopWindow);
        
        this._autoDemoRunnable = new DemoApp.AutomaticDemo.Runnable(this, this._stopWindow, this._sections, 
                performanceTest, interval, randomOrder, transitionStyle);
        Core.Web.Scheduler.add(this._autoDemoRunnable);
    },
    
    /**
     * Stops the automatic demo/performance test.
     *
     * @param {Number} performanceTestFps optional value indicating the final measured frames per second of a performance test
     *        (if provided, a dialog will be displayed announcing this value to the user)
     */
    stopAutomaticDemo: function(performanceTestFps) {
        this.remove(this._stopWindow);
        this._stopWindow = null;
        this.fpsLabel = null;
        this._launchPanel.set("animationTime", null);

        Core.Web.Scheduler.remove(this._autoDemoRunnable);
        this._autoDemoRunnable = null;
        
        if (typeof(performanceTestFps) == "number") {
            this.add(new DemoApp.AutomaticDemo.PerformanceTestResultDialog(performanceTestFps));
        }
        
        this.launchScreen(this._sections[0].screens[0]);
    }
});