main.js

来自「echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里」· JavaScript 代码 · 共 1,050 行 · 第 1/3 页

                }
            },
            children: [
                new DemoApp.HtmlLabel({
                    html: this._msg["DownloadWindow.Message"]
                })
            ]
        });
    }
});

/**
 * Window component used to display windowed demo screens. 
 */
DemoApp.ScreenWindow = Core.extend(Echo.WindowPane, {
    
    /** 
     * Creates a new ScreenWindow
     *
     * @param {DemoApp.Workspace.ScreenData} screen the screen data object
     */
    $construct: function(screen) {
        Echo.WindowPane.call(this, {
            icon: screen.icon16,
            iconInsets: "6px 10px",
            title: screen.title,
            styleName: DemoApp.pref.windowStyleName,
            width: 600,
            height: 500,
            maximizeEnabled: true,
            events: {
                close: function(e) {
                    e.source.parent.remove(e.source);
                }
            }
        });
    },
    
    /**
     * Sets the content of the window (invoked by the screen's launch function to configure the window).
     * 
     * @param {Echo.Component} content the component to display
     */
    setContent: function(content) {
        this.removeAll();
        this.add(content);
    }
});

/**
 * Workspace component: the primary user interface of the demo application.
 */ 
DemoApp.Workspace = Core.extend(Echo.ContentPane, {

    $static: {
    
        /**
         * Data object representing a section (collection of demo screens).
         */
        SectionData: Core.extend({
        
            /**
             * Section title.
             * @type String
             */
            title: null,
            
            /**
             * Array of DemoApp.WorkSpace.ScreenData objects contained in the section.
             */
            screens: null,

            /**
             * Creates a new section.
             * 
             * @param {String} title the section title
             * @param {Array} array of DemoApp.WorkSpace.ScreenData objects contained in the section
             */
            $construct: function(title, screens) {
                this.title = title;
                this.screens = screens;
            }
        }),

        /**
         * Data object representing a launchable demo screen.
         */
        ScreenData: Core.extend({
        
            /**
             * The screen title.
             * @type String
             */
            title: null,
            
            /** 
             * The 16x16 icon.
             * @type #ImageReference
             */
            icon16: null,

            /** 
             * The 64x64 icon.
             * @type #ImageReference
             */
            icon64: null,
            
            /**
             * Array of JavaScript module URLs which are required to display the screen.
             * @type Array
             */
            modules: null,
            
            /**
             * Function to be invoked to launch the module.
             * @type Function
             */
            launchFunction: null,
            
            /**
             * URL of module source (used by source viewer).
             * @type String
             */
            sourceUrl: null,

            /**
             * Creates a new screen.
             *
             * @param {String} title the screen title
             * @param {#ImageReference} icon16 the 16x16 icon
             * @param {#ImageReference} icon64 the 64x64 icon
             * @param {Array} modules array of JavaScript module URLs which are required to display the screen
             * @param {Function} function to be invoked to launch the module
             * @param {String} sourceUrl URL of module source (used by source viewer)
             */
            $construct: function(title, icon16, icon64, modules, launchFunction, sourceUrl) {
                this.id = Echo.Application.generateUid();
                this.title = title;
                this.icon16 = icon16;
                this.icon64 = icon64;
                this.modules = modules;
                this.launchFunction = launchFunction;
                this.sourceUrl = sourceUrl;
            }
        })
    },

    /**
     * Localized resource map.
     */
    _msg: null,
    
    /**
     * AccordionPane containing section columns.
     * @type Extras.AccordionPane
     */
    _launchPanel: null,
    
    /**
     * The main content area used to display demonstration screens.
     * @type Extras.TransitionPane
     */
    _contentArea: null,
    
    /**
     * Mapping between screen ids and DemoApp.Workspace.ScreenData instances.
     * Used for launching screens by id (e.g., as selected from menu).
     */
    _screenMap: null,
    
    /**
     * The currently displayed screen.
     * @type DemoApp.Workspace.ScreenData
     */
    _activeScreen: null,
    
    /**
     * Array of DemoApp.Workspace.SectionData instances which are available.
     * @type Array
     */
    _sections: null,
    
    /**
     * Launch button for currently active screen.
     * @type Echo.Button
     */
    _activeScreenLaunchButton: null,
    
    /**
     * Window displaying stop controls, displayed when automatic demo/performance test is active.
     * @type Echo.WindowPane
     */
    _stopWindow: null,
    
    /**
     * Label displaying current frames-per-second, used when performance test is active.
     * @type Echo.Label
     */
    fpsLabel: null,

    $construct: function(sections) {
        this._sections = sections;
        this._msg = DemoApp.getMessages();

        Echo.ContentPane.call(this, {
            children: [
                new Echo.SplitPane({
                    separatorWidth: 6,
                    separatorPosition: "18%",
                    resizable: true,
                    separatorHorizontalImage: "image/MainSeparator.png",
                    separatorHorizontalRolloverImage: "image/MainSeparatorRollover.png",
                    children: [
                        new Echo.SplitPane({
                            orientation: Echo.SplitPane.ORIENTATION_VERTICAL_TOP_BOTTOM,
                            separatorPosition: 52,
                            layoutData: {
                                minimumSize: "1em",
                                maximumSize: "33%"
                            },
                            children: [
                                new Echo.Label({
                                    icon: "image/Logo.png",
                                    layoutData: {
                                        overflow: Echo.SplitPane.OVERFLOW_HIDDEN,
                                        alignment: "center",
                                        backgroundImage: { url: "image/LogoBackground.png", repeat: "repeat-x" }
                                    }
                                }),
                                this._launchPanel = new Extras.AccordionPane({
                                    styleName: "Default",
                                    background: "#313131",
                                    foreground: "#ffffff",
                                    defaultContentInsets: "5px 10px"
                                })
                            ]
                        }),
                        new Echo.SplitPane({
                            orientation: Echo.SplitPane.ORIENTATION_VERTICAL_TOP_BOTTOM,
                            autoPositioned: true,
                            separatorHeight: 1,
                            separatorColor: "#000000",
                            children: [
                                this._menu = new Extras.MenuBarPane({
                                    styleName: "Default",
                                    model: this.createMenuModel(),
                                    events: {
                                        action: Core.method(this, this._processMenuAction)
                                    }
                                }),
                                new Echo.SplitPane({
                                    orientation: Echo.SplitPane.ORIENTATION_VERTICAL_BOTTOM_TOP,
                                    autoPositioned: true,
                                    separatorHeight: 1,
                                    separatorColor: "#000000",
                                    children: [
                                        new Echo.Row({
                                            insets: 8,
                                            alignment: "center",
                                            cellSpacing: 100,
                                            layoutData: {
                                                overflow: Echo.SplitPane.OVERFLOW_HIDDEN,
                                                backgroundImage: "image/NavigationBackground.png"
                                            },
                                            children: [
                                                new Echo.Button({
                                                    icon: "image/PreviousArrow.gif",
                                                    rolloverIcon: "image/PreviousArrowRollover.gif",
                                                    text: this._msg["Navigation.Previous"], 
                                                    foreground: "#ffffff",
                                                    rolloverForeground: "#c9fdd2",
                                                    font: { bold: true, italic: true },
                                                    iconTextMargin: 10,
                                                    textPosition: "left",
                                                    rolloverEnabled: true,
                                                    events: {
                                                        action: Core.method(this, this._processPrevious)
                                                    }
                                                }),
                                                new Echo.Button({
                                                    icon: "image/NextArrow.gif",
                                                    rolloverIcon: "image/NextArrowRollover.gif",
                                                    text: this._msg["Navigation.Next"], 
                                                    foreground: "#ffffff",
                                                    rolloverForeground: "#c9fdd2",
                                                    font: { bold: true, italic: true },
                                                    iconTextMargin: 10,
                                                    textPosition: "right",
                                                    rolloverEnabled: true,
                                                    events: {
                                                        action: Core.method(this, this._processNext)
                                                    }
                                                })
                                            ]
                                        }),
                                        this._contentArea = new Extras.TransitionPane({
                                        })
                                    ]
                                })
                            ]
                        })
                    ]
                })
            ],
            events: {
                init: Core.method(this, function() {
                    this.launchScreen(this.getNextScreen());
                })
            }
        });
                
        this._createLaunchPanel();
    },
    
    /**
     * Iterates sections/screens to create launch panel component and screen-id to screen mapping.
     */
    _createLaunchPanel: function() {
        this._screenMap = { };
        for (var i = 0; i < this._sections.length; ++i) {
            var column = new Echo.Column({
                styleName: "LaunchPanel",
                layoutData: {
                    title: this._sections[i].title
                }
            });
            this._launchPanel.add(column);
            for (var j = 0; j < this._sections[i].screens.length; ++j) {
                var screen = this._sections[i].screens[j];
                column.add(new Echo.Button({
                    id: screen.id,
                    styleName: "LaunchPanel",
                    icon: screen.icon64,
                    text: screen.title,
                    actionCommand: screen.id,
                    events: {
                        action: Core.method(this, this._processLauncherClick)
                    }
                }));
                this._screenMap[screen.id] = screen;
            }
        }
    },
    
    /**
     * Creates a main menu bar model.
     * This method is public because certain demonstration screens may use it for examples.
     *
     * @return the created menu bar model     
     * @type Extras.MenuModel