Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>Layout Demo</title>


        <script type="text/javascript" src="../../../dojo/dojo.js"
                djConfig="isDebug: true, parseOnLoad: true"></script>
        <script type="text/javascript" src="../_testCommon.js"></script>

        <script type="text/javascript">
                dojo.require("dijit.layout.LayoutContainer");
                dojo.require("dijit.layout.AccordionContainer");
                dojo.require("dijit.layout.ContentPane");
                dojo.require("dijit.layout.SplitContainer");
                dojo.require("dijit.layout.TabContainer");

                // Used in doc0.html
                dojo.require("dijit.form.ComboBox");
                dojo.require("dijit.form.Button");

                dojo.require("dojo.parser");    // scan page for widgets and instantiate them

                // Simple layout container layout
                var simpleLayout = {
                        widgetType: "LayoutContainer",
                        params: { id: "rootWidget" },
                        style: "border: 3px solid grey; width: 95%; height: 400px;",
                        children: [
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "left", layoutAlign: "left"},
                                        style: "width: 100px; background: #ffeeff;",
                                        innerHTML: "this is the left"
                                },
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "right", layoutAlign: "right"},
                                        style: "width: 100px; background: #ffeeff;",
                                        innerHTML: "this is the right"
                                },
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "top", layoutAlign: "top"},
                                        style: "height: 100px; background: #eeeeee;",
                                        innerHTML: "this is the top"
                                },
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "bottom", layoutAlign: "bottom"},
                                        style: "height: 100px; background: #eeeeee;",
                                        innerHTML: "this is the bottom"
                                },
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "client", layoutAlign: "client"},
                                        style: "height: 100px; background: #ffffee;",
                                        innerHTML: "this is the client"
                                }
                        ]
                };

                // split container layout
                var splitLayout = {
                        widgetType: "SplitContainer",
                        params: {id: "rootWidget", orientation: "horizontal"},
                        style: "border: 3px solid grey; width: 95%; height: 400px;",
                        children: [
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "left"},
                                        style: "background: #ffeeff;",
                                        innerHTML: "left pane of split container"
                                },
                                {
                                        widgetType: "SplitContainer",
                                        params: {
                                                id: "nested", orientation: "vertical"},
                                        children: [
                                                {
                                                        widgetType: "ContentPane",
                                                        params: {id: "top"},
                                                        style: "background: #eeffee;",
                                                        innerHTML: "center-top pane of nested split container"
                                                },
                                                {
                                                        widgetType: "ContentPane",
                                                        params: {id: "bottom"},
                                                        style: "background: #eeffee;",
                                                        innerHTML: "center-bottom pane of nested split container"
                                                }
                                        ]
                                },
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "right"},
                                        style: "background: #ffeeff;",
                                        innerHTML: "right pane of split container"
                                }
                        ]
                };

                // tab container layout
                var tabLayout = {
                        widgetType: "TabContainer",
                        params: {id: "rootWidget"},
                        style: "width: 95%; height: 400px;",
                        children: [
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "content", title: "Content tab", href: "doc0.html", executeScripts: true},
                                        style: "background: #ffeeff;"
                                },
                                {
                                        widgetType: "SplitContainer",
                                        params: {id: "nestedSplit", title: "Split pane tab", orientation: "vertical"},
                                        children: [
                                                {
                                                        widgetType: "ContentPane",
                                                        params: {id: "top"},
                                                        style: "background: #eeffee;",
                                                        innerHTML: "top pane of nested split container"
                                                },
                                                {
                                                        widgetType: "ContentPane",
                                                        params: {id: "bottom"},
                                                        style: "background: #eeffee;",
                                                        innerHTML: "bottom pane of nested split container"
                                                }
                                        ]
                                },
                                {
                                        widgetType: "TabContainer",
                                        params: {id: "nestedTab", title: "Nested tabs"},
                                        children: [
                                                {
                                                        widgetType: "ContentPane",
                                                        params: {id: "left", title: "Nested Tab #1"},
                                                        style: "background: #eeffee;",
                                                        innerHTML: "tab 1 of nested tabs"
                                                },
                                                {
                                                        widgetType: "ContentPane",
                                                        params: {
                                                                id: "right", title: "Nested Tab #2"},
                                                        style: "background: #eeffee;",
                                                        innerHTML: "tab 2 of nested tabs"
                                                }
                                        ]
                                }
                        ]
                };

/*
                // tab container layout
                var tabNoLayout = {
                        widgetType: "TabContainer",
                        params: {id: "rootWidget", doLayout: false},
                        children: [
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "doc0", title: "Doc 0", href: "doc0.html", executeScripts: true},
                                        style: "background: #ffeeff;"
                                },
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "doc1", title: "Doc 1", href: "doc1.html", executeScripts: true},
                                        style: "background: #eeffee;"
                                },
                                {
                                        widgetType: "ContentPane",
                                        params: {id: "doc2", title: "Doc 2", href: "doc2.html", executeScripts: true},
                                        style: "background: #ffffee;"
                                }
                        ]
                };
*/      

                // accordion container layout
                var accordionLayout = {
                        widgetType: "AccordionContainer",
                        params: {id: "rootWidget"},
                        style: "border: 3px solid grey; width: 95%; height: 400px;",
                        children: [
                                {
                                        widgetType: "AccordionPane",
                                        params: {id: "one", title: "Pane #1"},
                                        style: "background: #ffeeff;",
                                        innerHTML: "first pane contents"
                                },
                                {
                                        widgetType: "AccordionPane",
                                        params: {id: "two", title: "Pane #2"},
                                        style: "background: #ffeeff;",
                                        innerHTML: "second pane contents"
                                },
                                {
                                        widgetType: "AccordionPane",
                                        params: {id: "three", title: "Pane #3"},
                                        style: "background: #ffeeff;",
                                        innerHTML: "third pane contents"
                                }
                        ]
                };

                // Create a widget hierarchy from a JSON structure like
                // {widgetType: "LayoutContainer", params: { ... }, children: { ... } }
                function createWidgetHierarchy(widgetJson){
                        // setup input node
                        var node = document.createElement("div");
                        document.body.appendChild(node);        // necessary for tab contianer ???
                        if(widgetJson.style){
                                node.style.cssText = widgetJson.style;
                        }
                        if(widgetJson.innerHTML){
                                node.innerHTML=widgetJson.innerHTML;
                        }

                        // create the widget
                        var widget = new dijit.layout[widgetJson.widgetType](widgetJson.params, node);

                        // add its children (recursively)
                        if(widgetJson.children){
                                dojo.forEach(widgetJson.children,
                                        function(child){ widget.addChild(createWidgetHierarchy(child)); });
                        }
                        widget.startup(); //TODO: this is required now, right?

                        return widget;
                }

                // create the widgets specified in layout and add them to widget "rootWidget"
                function create(layout){

                        // erase old widget hierarchy (if it exists)
                        var rootWidget = dijit.byId("rootWidget");
                        if(rootWidget){
                                rootWidget.destroyRecursive();
                        }

                        // create new widget
                        rootWidget = createWidgetHierarchy(layout);

                        // and display it
                        var wrapper = dojo.byId("wrapper");
                        wrapper.innerHTML="";   // just to erase the initial HTML message
                        wrapper.appendChild(rootWidget.domNode);
        //              rootWidget.onResized();

                        // make/update the menu of operations on each widget
                        makeOperationTable();
                }

                // write out a menu of operations on each widget
                function makeOperationTable(){
                        var html = "<table border=1>";
                        dijit.registry.forEach(function(widget){
                                html += "<tr><td>" + widget.id + "</td><td>";
                                html += "<button onclick='removeFromParent(\"" + widget.id + "\");'> destroy </button> ";
                                if(/Container/.test(widget.declaredClass)){
                                        html += "<button onclick='addChild(\"" + widget.id + "\");'> add a child </button> ";
                                }
                                html += "</td></tr>";
                        });
                        html += "</table>";
                        dojo.byId("operations").innerHTML = html;
                }

                // remove a widget from it's parent and destroy it
                function removeFromParent(widget){
                        widget = dijit.byId(widget);
                        if(widget.parent){
                                widget.parent.removeChild(widget);
                        }
                        widget.destroy();

                        // reset the operation table so this widget is no longer shown
                        makeOperationTable();
                }

                // add a child to given widget
                function addChild(widget){
                        widget = dijit.byId(widget);

                        // setup input node
                        var node = document.createElement("div");
                        node.style.cssText = "height: 70px; width: 150px; overflow: auto; background: #cccccc; border: dotted black 2px;";      // necessary if parent is LayoutContainer
                        // create the widget
                        var alignments = ["top","bottom","left","right"];
                        var hrefs = ["doc0.html", "doc1.html", "doc2.html"];
                        var child = new dijit.layout.ContentPane(
                                {
                                        title: "Widget " + cnt, // necessary if parent is tab
                                        layoutAlign: alignments[cnt%4], // necessary if parent is LayoutContainer
                                        executeScripts: true,
                                        href: hrefs[cnt%3]
                                },
                                node);
                        cnt++;

                        if(/AccordionContainer/.test(widget.declaredClass)){
                                var pane = new dijit.layout.AccordionPane({
                                        title: "AccordionWidget " + cnt
                                });
                                pane.setContent(child);
                                child = pane;
                        }
                        // add it to the parent
                        widget.addChild(child);

                        // reset the operation table so the new widget is shown
                        makeOperationTable();
                }
                var cnt=1;

                // show a widget
                function show(widget){
                        widget = dijit.byId(widget);
                        widget.show();
                }

                // hide a widget
                function hide(widget){
                        widget = dijit.byId(widget);
                        widget.hide();
                }
        </script>
        <style type="text/css">
                @import "../../../dojo/resources/dojo.css";
                @import "css/dijitTests.css";

                html, body{     
                        width: 100%;    /* make the body expand to fill the visible window */
                        height: 100%;
                        overflow: hidden;       /* erase window level scrollbars */
                        padding: 0 0 0 0;
                        margin: 0 0 0 0;
                }
                .dijitSplitPane{
                        margin: 5px;
                }
                #rightPane {
                        margin: 0;
                }
                #creator, #current {
                        border: 3px solid blue;
                        padding: 10px;
                        margin: 10px;
                }
                #wrapper {
                        border: 3px solid green;
                        padding: 10px;
                        margin: 10px;
                }
        </style>
</head>
<body>
        <h1>Test of layout code programmatic creation</h1>
        <table width="100%">
                <tr>
                        <td id="creator" valign="top">
                                <h4>Creator</h4>
                                <p>Pressing a button will programatically add a hierarchy of widgets</p>
                                <button onClick="create(simpleLayout);">Simple Layout</button>
                                <button onClick="create(splitLayout);">Split Layout</button>
                                <button onClick="create(tabLayout);">Tab Layout</button>
<!--                            <button onClick="create(tabNoLayout);">Tab Non-Layout</button> -->
                                <button onClick="create(accordionLayout);">Accordion Layout</button>
                        </td>
                        <td id="current">
                                <h4>Current widgets</h4>
                                This pane will let you try certain operations on each of the widgets.
                                <div id="operations" style="height: 200px; overflow: auto;"></div>
                        </td>
                </tr>
        </table>
        <hr>
        <div id="wrapper">
                When you press a button, this will be filled in with the generated widgets
        </div>
</body>
</html>