jsdevelopmentscreen.js

一个ajax富客户端的ajax类库

                                                    ]
                                                })
                                                
                                            ]
                                        })
                                    ]
                                })
                            ]
                        }),
                        new EchoApp.ContentPane({
                            background: "#0f0f1f",
                            layoutData: {
                                title: this._msg["JSDevelopmentScreen.Tab.HierarchalConstruction"]
                            },
                            children: [
                                new EchoApp.Column({
                                    insets: 20,
                                    cellSpacing: 10,
                                    children: [
                                        new EchoApp.Label({ 
                                            layoutData: {
                                                insets: "15px 15px",
                                                background: "#000000"
                                            },
                                            foreground: "#ffcf3f",
                                            font: {
                                                typeface: "Courier New, Courier, Monospace",
                                                size: 24,
                                                bold: true
                                            },
                                            text: this._msg["JSDevelopmentScreen.Hierarchal.0"]
                                        }),
                                        new DemoApp.HtmlLabel({ 
                                            layoutData: {
                                                insets: "0px 0px 0px 580px"
                                            },
                                            foreground: "#ffcf9f",
                                            html: this._msg["JSDevelopmentScreen.Hierarchal.1"]
                                        }),
                                        new DemoApp.HtmlLabel({ 
                                            layoutData: {
                                                insets: "0px 0px 0px 580px"
                                            },
                                            foreground: "#ffcf9f",
                                            html: this._msg["JSDevelopmentScreen.Hierarchal.2"]
                                        })
                                    ]
                                }),
                                new EchoApp.WindowPane({
                                    styleName: "GlassBlue",
                                    title: this._msg["JSDevelopmentScreen.Hierarchal.WindowTitle"],
                                    background: "#ffffff",
                                    positionX: 0,
                                    positionY: 86,
                                    width: 600,
                                    height: 450,
                                    closable: false,
                                    children: [
                                        new EchoApp.ContentPane({
                                            backgroundImage: {
                                                url: "image/LogoBackground.png",
                                                repeat: "repeat-x"
                                            },
                                            background: "#383838",
                                            children: [
                                                new ExtrasApp.TabPane({
                                                    tabActiveBackground: "#ffffff",
                                                    tabInactiveBackground: "#afafaf",
                                                    borderType: ExtrasApp.TabPane.BORDER_TYPE_SURROUND,
                                                    tabPosition: ExtrasApp.TabPane.TAB_POSITION_BOTTOM,
                                                    insets: 10,
                                                    tabInset: 30,
                                                    children: [
                                                        new EchoApp.ContentPane({
                                                            layoutData: {
                                                                title: this._msg["JSDevelopmentScreen.Tab.HierarchalCode"]
                                                            },
                                                            background: "#ffffff",
                                                            foreground: "#00006f",
                                                            children: [
                                                                new DemoApp.SourceView({
                                                                    code: DemoApp.JSDevelopmentScreen.HIERARCHAL_EXAMPLE
                                                                })
                                                            ]
                                                        }),
                                                        new EchoApp.ContentPane({
                                                            layoutData: {
                                                                title: this._msg["JSDevelopmentScreen.Tab.ComponentHierarchy"]
                                                            },
                                                            backgroundImage: {
                                                                x: "50%",
                                                                y: "50%",
                                                                repeat: "no-repeat",
                                                                url: "image/Hierarchy.png"
                                                            }
                                                            
                                                        }),
                                                        this._createHierarchalExample()
                                                    ]
                                                })
                                            ]
                                        })
                                    ]
                                })
                            ]
                        })
                    ]
                })
            ]
        });
    },
    
    _code: function(codeElements, comments) {
        var row = new EchoApp.Row();

        if (codeElements != null) {
            for (var i = 0; i < codeElements.length; ++i) {
                var codeElement = codeElements[i];
                var comment = comments ? (i < comments.length ? comments[i] : null) : null;
                
                var leadingSpaces = DemoApp.Util.countLeadingSpaces(codeElements[i]);
                var trailingSpaces = DemoApp.Util.countTrailingSpaces(codeElements[i]);
                var layoutData = {
                    insets: "0px " + trailingSpaces + "ex 0px " +  leadingSpaces + "ex"
                };

                var component;
                if (comment) {
                    row.add(new ExtrasApp.ToolTipContainer({
                        layoutData: layoutData,
                        width: 400,
                        children: [
                            new EchoApp.Button({
                                foreground: "#007f00",
                                font: { bold: true },
                                text: codeElement,
                                rolloverEnabled: true,
                                rolloverBackground: "#000000",
                                rolloverForeground: "#00ff00"
                            }),
                            new EchoApp.Row({
                                border: "1px outset #ffffaf",
                                background: "#ffffaf",
                                insets: "3px 8px",
                                children: [
                                    new EchoApp.Button({
                                        layoutData: {
                                            alignment: "top",
                                            insets: "5px 8px 0px 3px"
                                        },
                                        width: 6,
                                        height: 6,
                                        background: "#cf0000"
                                    }),
                                    new EchoApp.Label({
                                        text: comment
                                    })
                                ]
                            })
                        ]
                    }))
                } else {
                    row.add(new EchoApp.Label({
                        layoutData: layoutData,
                        text: codeElement
                    }));
                }
            }
        }
        
        if (codeElements == null) {
            row.set("layoutData", {
                insets: "1em 0px 0px 0px"
            });
        }

        return row;
    },
    
    _createHierarchalExample: function() {
        var label;
        var content = new EchoApp.ContentPane({
            children: [
                new EchoApp.SplitPane({ 
                    styleName: "DefaultResizableLarge",
                    orientation: EchoApp.SplitPane.ORIENTATION_HORIZONTAL,
                    children: [
                        new EchoApp.Column({
                            layoutData: {
                                background: "#4f4f5f",
                                insets: 5
                            },
                            children: [
                                new EchoApp.Button({
                                    styleName: "Default",
                                    text: "Alpha",
                                    events: {
                                        action: function(e) {
                                            label.set("text", "A");
                                        }
                                    }
                                }),
                                new EchoApp.Button({
                                    styleName: "Default",
                                    text: "Bravo",
                                    events: {
                                        action: function(e) {
                                            label.set("text", "B");
                                        }
                                    }
                                })
                            ]
                        }),
                        label = new EchoApp.Label({
                            layoutData: {
                                alignment: "center"
                            },
                            font: { size: 200 },
                            text: "?"
                        })
                    ]
                })
            ]
        });
        
        content.set("layoutData", {
            title: this._msg["JSDevelopmentScreen.Tab.RenderedComponents"]
        });
        
        return content;
    }
});