jsdevelopmentscreen.js

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

                                            },
                                            children: [
                                                new Echo.Label({ 
                                                    layoutData: {
                                                        insets: 30,
                                                        background: "#000000"
                                                    },
                                                    foreground: "#af8fff",
                                                    font: {
                                                        typeface: "Courier New, Courier, Monospace",
                                                        size: 24,
                                                        bold: true
                                                    },
                                                    text: this._msg["JSDevelopmentScreen.LazyJS.0"]
                                                })
                                            ]
                                        }),
                                        new Echo.Column({
                                            insets: 40,
                                            cellSpacing: 20,
                                            children: [
                                                new DemoApp.HtmlLabel({ 
                                                    foreground: "#ffcf9f",
                                                    html: this._msg["JSDevelopmentScreen.LazyJS.1"]
                                                }),
                                                new DemoApp.HtmlLabel({ 
                                                    foreground: "#ffcf9f",
                                                    html: this._msg["JSDevelopmentScreen.LazyJS.2"]
                                                }),
                                                new DemoApp.HtmlLabel({ 
                                                    foreground: "#ffcf9f",
                                                    html: this._msg["JSDevelopmentScreen.LazyJS.3"]
                                                })
                                            ]
                                        })
                                    ]
                                }),
                                new Echo.WindowPane({
                                    styleName: "TransGreen",
                                    title: this._msg["JSDevelopmentScreen.LazyJS.WindowTitle"],
                                    background: "#00001f",
                                    foreground: "#afffff",
                                    positionX: "0%",
                                    positionY: "100%",
                                    width: "60%",
                                    height: "70%",
                                    insets: "10px 20px",
                                    font: {
                                        typeface: "Courier New, Courier, Monospace",
                                        size: "13pt"
                                    },
                                    closable: false,
                                    children: [
                                        new DemoApp.SourceView({
                                            lineCommentColor: "#3fff3f",
                                            code: DemoApp.JSDevelopmentScreen.LAZY_LOAD_EXAMPLE
                                        })
                                    ]
                                })
                            ]
                        })
                    ]
                })
            ]
        });
    },
    
    _code: function(codeElements, comments) {
        var row = new Echo.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 Extras.ToolTipContainer({
                        layoutData: layoutData,
                        width: 400,
                        children: [
                            new Echo.Button({
                                foreground: "#007f00",
                                font: { bold: true },
                                text: codeElement,
                                rolloverEnabled: true,
                                rolloverBackground: "#000000",
                                rolloverForeground: "#00ff00"
                            }),
                            new Echo.Row({
                                border: "1px outset #ffffaf",
                                background: "#ffffaf",
                                insets: "3px 8px",
                                children: [
                                    new Echo.Button({
                                        layoutData: {
                                            alignment: "top",
                                            insets: "5px 8px 0px 3px"
                                        },
                                        width: 6,
                                        height: 6,
                                        background: "#cf0000"
                                    }),
                                    new Echo.Label({
                                        text: comment
                                    })
                                ]
                            })
                        ]
                    }));
                } else {
                    row.add(new Echo.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 Echo.ContentPane({
            children: [
                new Echo.SplitPane({ 
                    styleName: "DefaultResizableLarge",
                    orientation: Echo.SplitPane.ORIENTATION_HORIZONTAL,
                    children: [
                        new Echo.Column({
                            layoutData: {
                                background: "#4f4f5f",
                                insets: 5
                            },
                            children: [
                                new Echo.Button({
                                    styleName: "Default",
                                    text: "Alpha",
                                    events: {
                                        action: function(e) {
                                            label.set("text", "A");
                                        }
                                    }
                                }),
                                new Echo.Button({
                                    styleName: "Default",
                                    text: "Bravo",
                                    events: {
                                        action: function(e) {
                                            label.set("text", "B");
                                        }
                                    }
                                })
                            ]
                        }),
                        label = new Echo.Label({
                            layoutData: {
                                alignment: "center"
                            },
                            font: { size: 200 },
                            text: "?"
                        })
                    ]
                })
            ]
        });
        
        content.set("layoutData", {
            title: this._msg["JSDevelopmentScreen.Tab.RenderedComponents"]
        });
        
        return content;
    }
});