rave-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From zh...@apache.org
Subject svn commit: r1087520 [24/35] - in /incubator/rave/donations/ogce-gadget-container: ./ config/ config/shindig-1.1-BETA5/ config/shindig-2.0.0/ db-cleaner/ examples/ examples/src/ examples/src/main/ examples/src/main/java/ examples/src/main/java/cgl/ exa...
Date Fri, 01 Apr 2011 00:29:38 GMT
Added: incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/tree-layout.js
URL: http://svn.apache.org/viewvc/incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/tree-layout.js?rev=1087520&view=auto
==============================================================================
--- incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/tree-layout.js
(added)
+++ incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/tree-layout.js
Fri Apr  1 00:29:22 2011
@@ -0,0 +1,849 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+
+
+Ext.namespace('cgl.shindig.ui.layout.tree');
+
+cgl.shindig.ui.layout.tree.isinit = false;
+
+Ext.namespace('cgl.shindig.ui.layout.tree.leafnode');
+cgl.shindig.ui.layout.tree.leafnode.idsuffix = "_tree_node_";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.innernode');
+cgl.shindig.ui.layout.tree.innernode.idsuffix = "_tree_node_";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.rootnode');
+cgl.shindig.ui.layout.tree.rootnode.id = "dummy-tree-root";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyGadgetPanel');
+cgl.shindig.ui.layout.tree.bodyGadgetPanel.id = "bodyGadgetPanel";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyTreePanel');
+cgl.shindig.ui.layout.tree.bodyTreePanel.id = "treePanel";
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyTreePanelBorder');
+cgl.shindig.ui.layout.tree.bodyTreePanelBorder.id = 'bodyPanelWest';
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyCenterPanelBorder');
+cgl.shindig.ui.layout.tree.bodyCenterPanelBorder.id = 'bodyPanelCenter';
+
+Ext.namespace('cgl.shindig.ui.layout.tree.bodyGadgetPanelCard');
+cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id = 'bodyGadgetPanelCard';
+cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray = [];
+
+/**
+ * called after user data is loaded.
+ */
+function afterLoadData() {
+    var mainTreeLayoutPanel = createMainTreeLayoutPanel();
+
+    createUIFramework(mainTreeLayoutPanel, createAddTabButtonTree, 
+            createRemoveTabButtonTree, gadgetAddCallback);
+
+    /* add gadgets to the layout */
+    addInitialGadgets(mainTreeLayoutPanel);
+
+    /* set text of layout combobox */
+    setLayoutUIText();
+}
+
+
+function getGadgetIdFromNodeId(nodeid) {
+  return nodeid.substr(0, nodeid.length - cgl.shindig.ui.layout.tree.leafnode.idsuffix.length);
+}
+
+function getTabIdFromNodeId(nodeid) {
+    // alert(nodeid.length - cgl.shindig.ui.layout.tree.innernode.idsuffix.length);
+  return nodeid.substr(0, nodeid.length - cgl.shindig.ui.layout.tree.innernode.idsuffix.length);
+}
+
+/**
+ * Note: this function does not check whether duplicate nodes exist already.
+ */
+function add2TreeFromLayoutObj(layoutObj, node) {
+    var nodeid = node.id;
+    for (var i = 0; i < layoutObj.getTabCount(); ++i) {
+        var tabobj = layoutObj.getTabByIndex(i);
+        if (tabobj == null) continue;
+        // add an internal node
+        var tabname = tabobj.getTabName();
+        var tabnodeid = tabobj.getTabId() //example: _tab_0
+                + cgl.shindig.ui.layout.tree.innernode.idsuffix;
+
+        // check whether the node is involved
+        if (nodeid != cgl.shindig.ui.layout.tree.rootnode.id &&
+            nodeid != tabnodeid) 
+            continue;
+
+        var nodeData = {
+            text: tabname,
+            id: tabnodeid,
+            leaf: false
+        };
+
+        var tabNode = node;
+        // check whether this node has been added to the tree
+        if (nodeid == cgl.shindig.ui.layout.tree.rootnode.id)
+            tabNode = addSubNode(nodeData, node);
+        for (var j = 0 ; j < tabobj.getColumnCount(); ++j) {
+            var colobj = tabobj.getColumnByIndex(j);
+            for (var k = 0 ; k < colobj.getGadgetCount(); ++k) {
+                var gadget = colobj.getGadgetByIndex(k);
+                var gadgetName = gadget.getGadgetName();
+                //add a leaf node
+                var nodeData = {
+                    text: gadgetName,
+                    id: gadget.getGadgetId() //example: _tab_0_col_0_gadget_0
+                        + cgl.shindig.ui.layout.tree.leafnode.idsuffix,
+                    leaf: true
+                };
+                addSubNode(nodeData, tabNode);
+            }
+        }
+    }
+}
+
+
+/**
+ * add a node to a tree.
+ * @param nodeData data of the node
+ * @param node     the new node would be a child node of the node specified by
+ * this parameter.
+ */
+function addSubNode(nodeData, node) {
+    var treeLoader = node.getOwnerTree().getLoader();
+    var o = nodeData;
+    if( typeof json == 'string' )
+        o = eval("("+json+")");
+    if( ! (o instanceof Object ))
+        return;
+
+    node.beginUpdate();
+    var n = treeLoader.createNode(o);
+    if(n != null){
+        node.appendChild(n);
+    }
+    node.endUpdate();
+    return n;
+}
+
+
+/**
+ * This function is invoked after the gadget is added to the main panel.
+ * In Tree layout, a new node should be inserted to the tree.
+ */
+function gadgetAddCallback(gadgetId) {
+    var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+    var layout = cgl.shindig.ui.layout.layoutobj;
+    var gadget = layout.getGadgetById(gadgetId);
+    var nodeData = {
+        text: gadget.getGadgetName(),
+        id: gadgetId + cgl.shindig.ui.layout.tree.leafnode.idsuffix,
+        leaf: true
+    };
+
+    var idobj = getIdObjFromGId(gadgetId);
+    var tabNodeId = idobj.tabid + cgl.shindig.ui.layout.tree.innernode.idsuffix;
+    var tabNode = treePanel.getNodeById(tabNodeId);
+    addSubNode(nodeData, tabNode);
+    treePanel.expandPath(tabNode.getPath());
+    // tabNode.expand();
+}
+
+
+/**
+ * Add initial gadget to gadget panel.
+ */
+function addInitialGadgets (mainTreeLayoutPanel) {
+    var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+    var gadgetPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanel.id);
+    var cardLayoutPanel = new Ext.Panel({
+        // title: "card layout",
+        layout: "card",
+        layoutConfig: {
+            deferredRender: true,
+            renderHidden: true
+        },
+        id: cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id,
+        // height: '100%',
+        autoHeight: 'auto',
+        activeItem: 0,
+        // bodyStyle: 'padding: 15px;',
+        defaults: {
+            border: false
+        }
+    });
+
+    gadgetPanel.add(cardLayoutPanel);
+    gadgetPanel.show();
+
+    var layout = cgl.shindig.ui.layout.layoutobj;
+    var initTabIdx = -1; /* which tab to display */
+    for( var i = 0 ; i < layout.getTabCount(); ++i ){
+        var tab = layout.getTabByIndex(i);
+        if (tab == null) continue;
+        if (initTabIdx == -1) {
+            initTabIdx = i; //find the first meaningful tab.
+        }
+        var tabid = layout.makeTabId(i);
+        tab.currentid = tabid;
+        var html = TrimPath.processDOMTemplate('tab_template', tab);
+        var scripthtml = TrimPath.processDOMTemplate('tab_template_script', tab);
+        var cmp = cardLayoutPanel.add({
+            title: tab.getTabName(),
+            id:    tabid,
+            html:  html,
+            scripthtml: scripthtml,
+            autoHeight: 'auto',
+            listeners: { }
+        });
+
+        cmp.on("afterlayout", function(){
+            alert("after render");
+        });
+
+        cmp.on("show", function(cmp){ //triggered when a tab is shown
+            var tabid = this.getId(); //should be like '_tab_0'
+            var tabindex = layout.parseTabId(tabid)[0];
+            var tabobj = cgl.shindig.ui.layout.layoutobj.getTabByIndex(tabindex);
+            for( var i = 0 ; i < tabobj.getColumnCount() ; ++i ){
+                var colid = layout.makeColId(tabindex, i);
+                if( cgl.shindig.ui.layout.droptargetrenderedlist[colid] != null )
+                    // the column has been rendered before.
+                    continue;
+
+                var setDropTarget = function(colid) {
+                    if (Ext.get(colid) != null) {
+                        var dt = new cgl.shindig.ui.dnd.DropTarget(colid, {ddGroup: 'group'});
+                        cgl.shindig.ui.layout.droptargetrenderedlist[colid] = dt;
+                    } else { //it may take some time to add columns to the tab
+                        setTimeout(setDropTarget, 1000, colid);
+                    }
+                }
+                setDropTarget(colid);
+            }
+            // cgl.shindig.ui.layout.curactivetabidx = _tabindex_;
+            if (cgl.shindig.ui.layout.tree.isinit) {
+                tabSwitchCallback(tabindex);
+            }
+
+            // If some frames in this tab are marked as max
+            // pick the first one and maximize it
+            // var tabindex = cgl.shindig.ui.layout.layoutobj.parseTabId(tabid)[0];
+            var maxGadgetsId = //tabobj.findMaxGadgetsId();
+                cgl.shindig.ui.layout.layoutobj.getTabByIndex(tabindex).findMaxGadgetsId();
+            if (maxGadgetsId != null && maxGadgetsId.length > 0) {
+                // var maxcardid = maxGadgetsId[0] + "_max_";
+                var maxcardid = cgl.shindig.ui.layout.layoutobj.makeGadgetMaxId(maxGadgetsId[0]);
+                var maxcardidx = getCardIndex(maxcardid);
+                if ( maxcardidx == -1) {
+                    maximizeGadget(maxGadgetsId[0]);
+                } else {
+                    var cardLayout = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+                    // cardLayout.getLayout().setActiveItem(maxcardidx);
+                    cardLayout.getLayout().setActiveItem(maxcardid);
+                }
+            }
+
+            function tmpfunc2() {
+                adjustCurrentTabPanel();
+            }
+            tmpfunc2.defer(100, window, []);
+
+            function tmpfunc(cmp) {
+              eval(cmp);
+            }
+            tmpfunc.defer(100, cmp, [cmp.scripthtml]);
+        });
+        addCardId(tabid);
+    }
+
+    gadgetPanel.doLayout();
+
+    if (getCardCount() > 0) {
+        var activeTabIdxInCfg = layout.getActiveTabIdx();
+        if( activeTabIdxInCfg != -1) {
+            cgl.shindig.ui.layout.tree.isinit = true;
+            tabSwitchCallback(activeTabIdxInCfg);
+            cardLayoutPanel.getLayout().setActiveItem(layout.makeTabId(activeTabIdxInCfg));
+        } else {
+            if (initTabIdx != -1) {
+                cgl.shindig.ui.layout.tree.isinit = true;
+                tabSwitchCallback(initTabIdx);
+                cardLayoutPanel.getLayout().setActiveItem(layout.makeTabId(initTabIdx));
+            }
+        }
+        // cgl.shindig.ui.layout.curactivetabidx = initTabIdx;
+    } else {
+        // cgl.shindig.ui.layout.curactivetabidx = -1;
+        tabSwitchCallback(-1);
+    }
+    cgl.shindig.ui.layout.tree.isinit = true;
+}
+
+function removeTreeNodeById(nodeid, tree) {
+    var node = tree.getNodeById(nodeid);
+    node = node.remove();
+}
+
+function createRemoveTabButtonTree(bodypanel, combobox, tabliststore) {
+    var removetabbtn = new Ext.Toolbar.Button({
+        text: 'remove',
+        tooltip: 'remove the selected tab',
+        iconCls: 'blist',
+        handler: function(){
+            var tabid = combobox.getValue();
+            if( tabid != "" ){
+                // remove from internal data structure
+                cgl.shindig.ui.layout.layoutobj.removeTabById(tabid);
+
+                // remove from tree
+                var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+                removeTreeNodeById(tabid+cgl.shindig.ui.layout.tree.innernode.idsuffix, treePanel);
+
+                // adjust top combox
+                combobox.setValue("");
+                tabliststore.loadData(cgl.shindig.ui.layout.layoutobj.getTabNameIdList());
+
+                // remove related components in card layout
+                var cardLayoutPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+                var removedCardPanelIds = removeCardsWithPrefix(tabid);
+                for (var i = 0; i < removedCardPanelIds.length; ++i) {
+                    var id = removedCardPanelIds[i];
+                    var card = Ext.getCmp(id);
+                    if (card != null) {
+                        cardLayoutPanel.remove(card);
+                    }
+                }
+
+                // switch another tab display and select corresponding node in
+                // the tree
+                if (getCardCount() > 0) {
+                    cardLayoutPanel.getLayout().setActiveItem(0);
+                    var cardId = getCardIdByIndex(0);
+                    // this card should correspond to a tab instead of a
+                    // maximized gadget.
+                    if (!isTabId(cardId)) {
+                        alert("something impossible happened!");
+                    }
+                    var node = treePanel.getNodeById(cardId + cgl.shindig.ui.layout.tree.innernode.idsuffix);
+                    treePanel.selectPath(node.getPath());
+
+                    // cgl.shindig.ui.layout.curactivetabidx = getTabIdxFromTabId(cardId);
+                    // tabSwitchCallback(getTabIdxFromTabId(cardId));
+                } else {
+                    // cgl.shindig.ui.layout.curactivetabidx = -1;
+                    tabSwitchCallback(-1);
+                }
+                cgl.shindig.ui.layout.layoutobj.markDirty();
+                cgl.shindig.ops.syncLayoutData(false);
+            }
+        }
+    });
+    return removetabbtn;
+}
+
+function getTabIdxFromTabId(tabid){
+    // var tabidx = tabid.substr("_tab_".length);
+    // return parseInt(tabidx);
+    return cgl.shindig.ui.layout.layoutobj.parseTabId(tabid)[0];
+}
+
+/**
+ * Check whether the id is a tabid.
+ */
+function isTabId(tabid) {
+    var prefix = "_tab_";
+    var idxstr = tabid.substr(prefix.length);
+    var n = parseInt(idxstr);
+    if (isNaN(n))
+        return false;
+    var n2str = n + "";
+    if (n2str == idxstr)
+        return true;
+    else
+        return false;
+}
+
+/**
+ * Create the layout.
+ * On the left is a navigation tree and on the right is the gadget panel.
+ */
+function createMainTreeLayoutPanel() {
+
+    var treePanel = createGadgetTree(getLayoutDataObj);
+    var gadgetPanel =  createBodyGadgetPanel();
+
+    var mainpanel = new Ext.Panel({
+        // title: "User Management",
+        layout: "border",
+        height: 800,
+        width:  '100%',
+        border: false,
+        items: [{
+            title: 'tree',
+            region: 'west',
+            id: cgl.shindig.ui.layout.tree.bodyTreePanelBorder.id,
+            width: 250,
+            // height: '100%',
+            autoHeight: 'auto',
+            collapsible: true,
+            autoScroll: true,
+            items: [treePanel]
+        }, {
+            // title: 'gadgets',
+            id: cgl.shindig.ui.layout.tree.bodyCenterPanelBorder.id,
+            region:'center',
+            border: false,
+            autoHeight: 'auto',
+            margins: '0 20 0 0',
+            items: [gadgetPanel]
+        }]
+    });
+    return mainpanel;
+}
+
+function getLayoutDataObj() {
+    return cgl.shindig.ui.layout.layoutobj;
+}
+
+function maximizeGadget(gadgetid) {
+    getLayoutDataObj().getGadgetById(gadgetid).setGadgetStatus('max');
+
+    var cardLayoutPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+
+    // var maxgadgetid = gadgetid + "_max_";
+    var layoutobj = cgl.shindig.ui.layout.layoutobj;
+    var maxgadgetid = layoutobj.makeGadgetMaxId(gadgetid);
+    var cardidx = getCardIndex(maxgadgetid);
+    if (cardidx != -1) {
+        cardLayoutPanel.getLayout().setActiveItem(maxgadgetid);
+    } else {
+        var gadget = layoutobj.getGadgetById(gadgetid);
+        // var escapedGadgetsrc = gadget.getEscapedGadgetSpecSrc();
+        var renderUrl = cgl.shindig.gadget.rendering.ops.genFullGadgetCanvasRenderingURL(gadget);
+        var frameid = layoutobj.makeGadgetMaxIFrameId(gadgetid);
+
+        cardLayoutPanel.add({
+            // title: tab.getTabName() + "  >  " + gadget.getGadgetName(),
+            id:    maxgadgetid,
+            html:  '<center><iframe id="'+frameid+ 
+                '" style="height:' + 
+                cgl.shindig.ui.layout.maxiframe.height + 
+                ';width:100%;border:none;"  src="' + renderUrl+'"></iframe></center>',
+            tbar: createMaximizedGadgetToolbar(maxgadgetid, gadget)
+        });
+
+        function tmpfunc(frameid, maxgadgetid) {
+            adjustCurrentTabPanel(frameid, maxgadgetid);
+        }
+        tmpfunc.defer(100, window, [frameid, maxgadgetid]);
+
+        var cardCount = getCardCount();
+        // cardLayoutPanel.getLayout().setActiveItem(cardCount);
+        cardLayoutPanel.getLayout().setActiveItem(maxgadgetid);
+        addCardId(maxgadgetid);
+    }
+
+    // switch the selection to the corresponding node in the tree
+    treeNodeExpand(gadgetid);
+
+    var idobj = getIdObjFromGId(gadgetid);
+    tabSwitchCallback(idobj.tabidx);
+    // cgl.shindig.ui.layout.curactivetabidx = idobj.tabidx;
+}
+
+function treeNodeExpand(gadgetid) {
+    if (gadgetid == null)
+        return;
+
+    var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+    var gadgetNodeId = gadgetid + cgl.shindig.ui.layout.tree.leafnode.idsuffix;
+    var treeNode = treePanel.getNodeById(gadgetNodeId);
+    var path = treeNode.getPath();
+    treePanel.selectPath(path);
+    return;
+}
+
+function restoreGadget(maxgid) {
+    // var gid = maxgid.substr(0, maxgid.length - "_max_".length);
+    var gid = cgl.shindig.ui.layout.layoutobj.parseGadgetMaxId(maxgid);
+
+    getLayoutDataObj().getGadgetById(gid).setGadgetStatus('normal');
+
+    removeCardById(maxgid);
+    var bodyGadgetPanelCard = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+    var gadgetCmp = Ext.getCmp(maxgid);
+    bodyGadgetPanelCard.remove(gadgetCmp, true);
+
+    // switch to the tab panel
+    var idobj = getIdObjFromGId(gid);
+    var tabid = idobj.tabid;
+    var tabCardIdx = getCardIndex(tabid);
+    if (tabCardIdx != -1) {
+        // bodyGadgetPanelCard.getLayout().setActiveItem(tabCardIdx);
+        bodyGadgetPanelCard.getLayout().setActiveItem(tabid);
+    }
+
+    var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+    var gadgetNode = treePanel.getNodeById(gid+cgl.shindig.ui.layout.tree.leafnode.idsuffix);
+    var path = gadgetNode.parentNode.getPath();
+    treePanel.selectPath(path);
+
+    // cgl.shindig.ui.layout.curactivetabidx = idobj.tabidx;
+    tabSwitchCallback(idobj.tabidx);
+    adjustCurrentTabPanel();
+}
+
+function createMaximizedGadgetToolbar(maxgadgetid, gadget) {
+    var layoutobj = cgl.shindig.ui.layout.layoutobj;
+    var gadgetid = gadget.getGadgetId();
+    var idobj = getIdObjFromGId(gadgetid);
+    var tab = layoutobj.getTabByIndex(idobj.tabidx);
+
+    // var tbdivid = maxgadgetid + "_tb_";
+    var tbdivid = layoutobj.makeGadgetToolbarId(maxgadgetid);
+    var btname = new Ext.Toolbar.TextItem({ 
+        xtype: 'tbtext', 
+        text:  tab.getTabName() + "  >  " + gadget.getGadgetName()
+    });
+
+    var btrestore = new Ext.Toolbar.Button ({
+        xtype: 'tbbutton',
+        text:'restore',
+        tooltip: 'restore this gadget',
+        handler: function(){
+            restoreGadget(maxgadgetid);
+        }
+    });
+
+    var _tb_;
+    _tb_ = new Ext.Toolbar({ id: tbdivid, items:[btname, "->", btrestore] });
+    return _tb_;
+}
+
+function createGadgetTree(getLayoutDataObj, getMainpanel, getFormPanel){
+    var tree = new Ext.tree.TreePanel({
+        id: cgl.shindig.ui.layout.tree.bodyTreePanel.id,
+        useArrows:true,
+        autoScroll:true,
+        animate:true,
+        // height:200,
+        // width:200,
+        enableDD:true,
+        containerScroll: true,
+        rootVisible: false,
+        border: false,
+
+        root: {
+            nodeType:   'async',
+            text:       'dummy root',
+            draggable:  false,
+            id:         cgl.shindig.ui.layout.tree.rootnode.id
+        },
+            
+        loader: new Ext.tree.TreeLoader({
+            listeners:{
+                beforeload: function(This, node, callback){
+                    add2TreeFromLayoutObj( getLayoutDataObj(), node);
+                    return false; //bypass sending request to remote server
+                }
+            }, 
+            dataUrl:'xml-tree-data.xml'//dummy, but necessary
+        }),
+        
+        listeners: {
+            'render': function(tp){
+                tp.getSelectionModel().on('selectionchange', function(tree, node){
+                    if(node == null) return;
+                    var nodeid = node.id;
+                    if(node.leaf){
+                        var gadgetid = getGadgetIdFromNodeId(nodeid);
+                        maximizeGadget(gadgetid);
+                    }else{
+                        var tabid = getTabIdFromNodeId(nodeid);
+                        var cardLayout = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+                        var cardidx = getCardIndex(tabid);
+                        if (cardidx != -1) {
+                            // cardLayout.getLayout().setActiveItem(cardidx);
+                            cardLayout.getLayout().setActiveItem(tabid);
+                            // cgl.shindig.ui.layout.curactivetabidx = getTabIdxFromTabId(tabid);
+                            tabSwitchCallback(getTabIdxFromTabId(tabid));
+                        } 
+
+                        //el.update(detailsText);
+                    }
+                })
+            }
+        }
+    });
+    return tree;
+}
+
+function createBodyGadgetPanel () {
+    var panel = new Ext.Panel({
+        height: '100%',
+        width:  '100%',
+        id:     cgl.shindig.ui.layout.tree.bodyGadgetPanel.id
+    });
+    return panel;
+}
+
+/**
+ * Create button for "add a new tab"
+ * @param tabpanel
+ * @param tabliststore
+ */
+function createAddTabButtonTree(bodypanel, tabliststore) {
+    return new Ext.Toolbar.Button({
+        text: 'Add a tab',
+        tooltip: 'add a new tab',
+        handler: function(){
+            Ext.MessageBox.prompt('tab name', 'input the name of new tab',
+                function(btn, text){
+                    if( btn == 'ok' ){
+                        var newtabidx = cgl.shindig.ui.layout.layoutobj.getTabCount();
+                        var newtabid = cgl.shindig.ui.layout.layoutobj.makeTabId(newtabidx);
+                        
+                        /** add this tab to the underlying data structure */
+                        cgl.shindig.ui.layout.layoutobj.addNewTab(text, newtabid, newtabidx);
+                        
+                        /** add a gadget card panel */
+                        var newpanel = new Ext.Panel({
+                            title: text,
+                            id: newtabid,
+                            height: 1000,
+                            layout:'column',
+                            listeners:{
+                                show: function(){
+                                    var _id_ = this.getId(); //should be like '_tab_0'
+                                    var _tabindex_ = cgl.shindig.ui.layout.layoutobj.parseTabId(_id_)[0];
+                                    var _tabobj_ = cgl.shindig.ui.layout.layoutobj.getTabByIndex(_tabindex_);
+                                    
+                                    /**  setting drop target */
+                                    for( var i = 0 ; i < _tabobj_.getColumnCount() ; ++i
){
+                                        var _colid_ = _id_ + '_col_' + i;
+                                        
+                                        if( cgl.shindig.ui.layout.droptargetrenderedlist[_colid_]
!= null )
+                                            continue;
+
+                                        var setDropTarget = function(_colid_) {
+                                            if (Ext.get(_colid_) != null) {
+                                                var dt = new cgl.shindig.ui.dnd.DropTarget(_colid_,
{ddGroup: 'group'});
+                                                cgl.shindig.ui.layout.droptargetrenderedlist[_colid_]
= dt;
+                                            } else {
+                                                setTimeout(setDropTarget, 1000, _colid_);
+                                            }
+                                        }
+                                        setDropTarget(_colid_);
+                                    }
+                                    // cgl.shindig.ui.layout.curactivetabidx = _tabindex_;
+                                    tabSwitchCallback(_tabindex_);
+                                }
+                            }//, items:[]
+                        });
+                        
+                        /** add column to the new panel */
+                        var _tabobj2_ = cgl.shindig.ui.layout.layoutobj.getTabByIndex(newtabidx);
+                        for( var i = 0 ; i < _tabobj2_.getColumnCount() ; ++i ){
+                            var _colid_ = newtabid + '_col_' + i;
+                            newpanel.add({
+                                columnWidth: 0.33,
+                                height: 1000,
+                                // style: 'left:5%;',
+                                html: '<div id="'+_colid_+
+                                    '" style="border: 1px dashed silver;height:auto;"></div>'
+                            });
+                        }
+
+                        tabliststore.loadData(cgl.shindig.ui.layout.layoutobj.getTabNameIdList());
+
+                        // change card layout display
+                        addCardId(newtabid);
+                        var cardLayoutPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+                        cardLayoutPanel.add(newpanel);
+                        // cardLayoutPanel.getLayout().setActiveItem(getCardCount()-1);
+                        cardLayoutPanel.getLayout().setActiveItem(newtabid);
+                        cardLayoutPanel.doLayout();
+                        // cgl.shindig.ui.layout.curactivetabidx =
+                        //     cgl.shindig.ui.layout.layoutobj.getTabCount() - 1;
+                        tabSwitchCallback(cgl.shindig.ui.layout.layoutobj.getTabCount() -
1);
+
+                        /** add a node in the tree */
+                        var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+                        var nodeid = newtabid+cgl.shindig.ui.layout.tree.innernode.idsuffix;
+                        var nodeData = {
+                            text:   text,
+                            id:     nodeid,
+                            leaf:   false
+                        };
+                        addSubNode(nodeData, treePanel.getRootNode());
+                        treePanel.selectPath(treePanel.getNodeById(nodeid).getPath());
+
+                        adjustCurrentTabPanel();
+                        cgl.shindig.ui.layout.layoutobj.markDirty();
+                        cgl.shindig.ops.syncLayoutData(false);
+                    }
+                });
+        },
+        iconCls: 'blist'
+    });
+}
+
+
+Ext.namespace("cgl.shindig.ui.layout.gadget");
+cgl.shindig.ui.layout.gadget.removecallback = function(gadgetid) {
+    var treePanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyTreePanel.id);
+    // var maxGid = gadgetid + "_max_";
+    var maxGid = cgl.shindig.ui.layout.layoutobj.makeGadgetMaxId(gadgetid);
+    var maxGadgetPanel = Ext.getCmp(maxGid);
+    if (maxGadgetPanel != null) {
+        var cardLayoutPanel = Ext.getCmp(cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.id);
+        cardLayoutPanel.remove(maxGadgetPanel);
+        removeCardById(maxGid);
+    }
+    var treeNode = treePanel.getNodeById(gadgetid + cgl.shindig.ui.layout.tree.leafnode.idsuffix);
+    treeNode.remove();
+}
+
+// ****************************************************************************
+// ****                   Card Internal Data Structure                    *****
+// ****************************************************************************
+
+// Ids of all cards are stored in global variable
+//      cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray.
+// For tab, the id looks like: _tab_0
+// For maximized gadget, the id looks like: _tab_0_col_0_gadget_0_max_
+
+/**
+ * Add id of a new card.
+ * Note: this function does not check whether a card with that id has already
+ * existed.
+ *
+ * @param id
+ */
+function addCardId(id) {
+    var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+    idarray.push(id);
+}
+
+/**
+ * Remove ids that start with value of the parameter *idPrefix*.
+ *
+ * @param idPrefix
+ * @return an array that contains all removed card ids.
+ */
+function removeCardsWithPrefix(idPrefix) {
+    var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+    var removedIds = [];
+    for( var i = 0 ; i < idarray.length ; ++i ) {
+        var idinarray = idarray[i];
+        if(idinarray.indexOf(idPrefix) == 0) {
+            removedIds.push(idinarray);
+            idarray.splice(i, 1);
+            --i;
+            // if(idinarray.lastIndexOf(cgl.shindig.ui.layout.tree.innernode.idsuffix)
+            //    == idinarray.length - cgl.shindig.ui.layout.tree.innernode.idsuffix.length)
{
+            //     var cardId = idinarray.substr(0,
+            //             idinarray.length-cgl.shindig.ui.layout.tree.innernode.idsuffix.length);
+            //     removedIds.push(cardId);
+            //     idarray.splice(i, 1);
+            //     --i;
+            // } else if(idinarray.lastIndexOf(cgl.shindig.ui.layout.tree.leafnode.idsuffix)
+            //    == idinarray.length - cgl.shindig.ui.layout.tree.leafnode.idsuffix.length)
{
+            //     var cardId = idinarray.substr(0,
+            //             idinarray.length-cgl.shindig.ui.layout.tree.leafnode.idsuffix.length);
+            //     cardId = cardId + "_max_";
+            //     removedIds.push(cardId);
+            //     idarray.splice(i, 1);
+            //     --i;
+            // } else {
+                // should not go through here
+            // }
+        }
+    }
+    return removedIds;
+}
+
+/**
+ * Remove a specific id.
+ *
+ * @param id
+ */
+function removeCardById(id) {
+    var idx = getCardIndex(id);
+    if (idx != -1) {
+        var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+        idarray.splice(idx, 1);
+    }
+}
+
+function getCardIdByIndex(idx) {
+    var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+    if (idx > idarray.length -1)
+        return null;
+    return idarray[idx];
+}
+
+/**
+ * Get number of cards.
+ * @return
+ */
+function getCardCount() {
+    var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+    return idarray.length;
+}
+
+/**
+ * Get index of the card whose id is equal to value of parameter *id*.
+ * @param id
+ */
+function getCardIndex(id) {
+    var idarray = cgl.shindig.ui.layout.tree.bodyGadgetPanelCard.idarray;
+    for( var i = 0 ; i < idarray.length ; ++i ) {
+        var idinarray = idarray[i];
+        if (id == idinarray)
+            return i;
+    }
+    return -1;
+}
+
+/**
+ * Make tree panel and main gadget panel have equal height.
+ */
+function equalHeightAdjust() {
+    var centerid = cgl.shindig.ui.layout.tree.bodyCenterPanelBorder.id;
+    var westid = cgl.shindig.ui.layout.tree.bodyTreePanelBorder.id;
+    var height = Ext.get(centerid).getHeight();
+    var westEl = Ext.get(westid);
+    westEl.setHeight(height)
+}
+
+
+/* ugly workaround for IE which does not fire onload event for script element*/
+/**
+ * These are executed when this script is loaded.  gadget-layout.js modifies ishindig.html,
+ * causing this page to be loaded.
+ */
+
+afterLoadData();
+setLayoutUIText();
+setTheme();

Added: incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/user_settings.js
URL: http://svn.apache.org/viewvc/incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/user_settings.js?rev=1087520&view=auto
==============================================================================
--- incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/user_settings.js
(added)
+++ incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/user_settings.js
Fri Apr  1 00:29:22 2011
@@ -0,0 +1,182 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+
+Ext.namespace("cgl.shindig.ui");
+
+cgl.shindig.ui.userSettingsTpl = null;
+
+// Build a right SideBar with Settings:
+// Theme
+// -------------- Separator
+// Tab Layout     // Text
+// --------------
+// Tab 1          // Button
+// Tab 2
+// ....
+// ...
+
+// On the righ of each of these, build the layout options
+// Columns: 2 columns         3 Columns
+//          * Equal Size      * Equal Size
+//          * First Smaller   * First Smaller
+//
+//          Save      |  Cancel
+//
+
+function createTabLayoutForm(tabId) {
+
+  var tab = (tabId == null) ? getLayoutDataObj().getTabByIndex(0) : getLayoutDataObj().getTabById(tabId);
+   
+  var form = new Ext.form.FormPanel({
+    xtype: 'form',
+    margins:'10 10 10 10', 
+    id: 'userSettingsTabLayoutForm',
+    items: [
+      {
+        margins:'10 10 10 0', 
+        xtype: 'label',
+        cls : 'tableHeader',
+        text: tab.getTabName()
+      },
+      {
+        xtype: 'ux-radiogroup',
+        fieldLabel: '2 Columns',
+        name: 'tabLayout',
+        horizontal: false,
+        id: 'twoColumnsRadioGroup',
+        radios:[{
+            value:'50,50',
+            boxLabel: '<img src="images/2_50_50.gif" />',
+            checked: (tab.getRatios() == '50,50')
+          }, {
+            value:'25,75',
+            boxLabel: '<img src="images/2_25_75.gif" />',
+            checked: (tab.getRatios() == '25,75')
+          }]
+      },{
+        xtype: 'ux-radiogroup',
+        fieldLabel: '3 Columns',
+        name: 'tabLayout',
+        horizontal: false,
+        id: 'threeColumnsRadioGroup',
+        radios:[{
+            value:'33,34,33',
+            boxLabel: '<img src="images/3_33_33_33.gif" />',
+            checked: (tab.getRatios() == '33,34,33')
+          }, {
+            value:'25,50,25',
+            boxLabel: '<img src="images/3_25_50_25.gif" />',
+            checked: (tab.getRatios() == '25,50,25')
+          }]
+      },{
+        xtype: 'hidden',
+        value: tab.getTabId(),
+        name: 'userSettingsTabId'
+      },{
+        xtype: 'button',
+        text: 'Update',
+        handler: function() {
+          var cmp = Ext.getCmp("userSettingsTabLayoutForm");
+          var values = cmp.getForm().getValues();
+          getLayoutDataObj().updateTabLayout(values.userSettingsTabId, values.tabLayout.split(",").length,
values.tabLayout);
+          cgl.shindig.ops.syncLayoutData(true, function() {window.location.reload()});
+        }
+      }
+    ]
+  });
+  
+  return form;
+}
+
+function createUserSettingsWin() {
+    var tabLayoutForm = createTabLayoutForm(null);
+
+    // tabs for the center
+    var tabs = new Ext.Panel({
+        region: 'center',
+        margins:'3 3 3 0', 
+        id: 'userSettingsWinPanelCenter',
+        items: [tabLayoutForm]
+    });
+
+
+    var layoutTabs = [];
+    var tabIds = getLayoutDataObj().getTabNameIdList();
+    for(var i = 0; i < tabIds.length; i++) {
+      var atab = getLayoutDataObj().getTabById(tabIds[i][0]);
+      layoutTabs.push({
+          text: atab.getTabName(), 
+          leaf: true,
+          tabId: atab.getTabId()
+      });
+    }
+
+    // Panel for the west
+    var nav = new Ext.Panel({
+        region: 'west',
+        split: true,
+        width: 200,
+        collapsible: true,
+        margins:'3 0 3 3',
+        cmargins:'3 3 3 3',
+        id: 'userSettingsWinPanelWest',
+        items: [{
+            id: "userSettingsTabTreePanel",
+            collapsible: false,
+            title: 'Tabs',
+            xtype: 'treepanel',
+            width: 200,
+            autoScroll: true,
+            split: true,
+            loader: new Ext.tree.TreeLoader(),
+            root: new Ext.tree.AsyncTreeNode({
+                expanded: true,
+                children: layoutTabs
+            }),
+            rootVisible: false,
+            listeners: {
+                click: function(e) {
+        			var panel = Ext.getCmp("userSettingsWinPanelCenter");
+                    panel.remove("userSettingsTabLayoutForm");
+                    panel.add(createTabLayoutForm(e.attributes.tabId));
+                    panel.doLayout();
+                }
+            }
+        }]
+
+    });
+
+    var win = new Ext.Window({
+        title: 'User Settings',
+        closable:true,
+        width:600,
+        height:350,
+        //border:false,
+        plain:true,
+        layout: 'border',
+        id: 'userSettingsTabLayoutWin',
+
+        items: [nav, tabs]
+    });
+
+    return win;
+}
+

Added: incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/userinfoform.js
URL: http://svn.apache.org/viewvc/incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/userinfoform.js?rev=1087520&view=auto
==============================================================================
--- incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/userinfoform.js
(added)
+++ incubator/rave/donations/ogce-gadget-container/ishindig-webapp/src/main/webapp/www/js/userinfoform.js
Fri Apr  1 00:29:22 2011
@@ -0,0 +1,194 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+
+Ext.namespace("cgl.shindig.ui");
+
+cgl.shindig.ui.userinfotpl = null;
+
+function initUserInfoTpl(){
+    if( cgl.shindig.ui.userinfotpl != null )
+        return;
+    var sntpl = new Ext.Template('{screenname}');
+    sntpl.compile();
+    var dobyeartpl = new Ext.Template('{dobyear}');
+    dobyeartpl.compile();
+    var dobmonthtpl = new Ext.Template('{dobmonth}');
+    dobmonthtpl.compile();
+    var dobdaytpl = new Ext.Template('{dobday}');
+    dobdaytpl.compile();
+    var emailtpl = new Ext.Template('{email}');
+    emailtpl.compile();
+    var pwdtpl = new Ext.Template('{password}');
+    pwdtpl.compile();
+    var fntpl = new Ext.Template('{firstname}');
+    fntpl.compile();
+    var lntpl = new Ext.Template('{lastname}');
+    lntpl.compile();
+    var languagetpl = new Ext.Template('{language}');
+    languagetpl.compile();
+    var timezonetpl = new Ext.Template('{timezone}');
+    timezonetpl.compile();
+    var gendertpl = new Ext.Template('{gender}');
+    gendertpl.compile();
+    var zipcodetpl = new Ext.Template('{zipcode}');
+    zipcodetpl.compile();
+    var openidtpl = new Ext.Template('{openid}');
+    openidtpl.compile();
+    var layoutdatatpl = new Ext.Template('{layoutdata}');
+    layoutdatatpl.compile();
+
+    cgl.shindig.ui.userinfotpl = {
+        sntpl       : sntpl,
+        dobdaytpl   : dobdaytpl,
+        dobmonthtpl : dobmonthtpl,
+        dobyeartpl  : dobyeartpl,
+        emailtpl    : emailtpl,
+        pwdtpl      : pwdtpl,
+        fntpl       : fntpl,
+        lntpl       : lntpl,
+        languagetpl : languagetpl,
+        timezonetpl : timezonetpl,
+        gendertpl   : gendertpl,
+        zipcodetpl  : zipcodetpl,
+        openidtpl   : openidtpl,
+        layoutdatatpl   : layoutdatatpl
+    };
+}
+initUserInfoTpl();
+
+// *****************************************************************
+//  Create user info form panel
+// *****************************************************************
+function createUserInfoForm(){
+    return new Ext.form.FormPanel({
+        xtype: 'form',
+        bodyStyle: 'padding:5px 5px 0',
+        labelWidth: 100,
+        border: false,
+        frame: true,
+        defaults: { width: '90%' },  
+        onSubmit: Ext.emptyFn,
+        items: [{
+            xtype: 'field',
+            fieldLabel: 'Screen name',
+            name: 'screenname',
+            id: 'userinfo_sn'
+          },{ 
+            xtype: 'field',
+            fieldLabel: 'Password', 
+            name: 'password',
+            id: 'userinfo_pwd'
+          },createDOBCombos(), {
+            xtype: 'field',
+            fieldLabel: 'First Name',
+            name: 'firstname',
+            id: 'userinfo_fn'
+          },{
+            xtype: 'field',
+            fieldLabel: 'Last name',
+            name: 'lastname',
+            id: 'userinfo_ln'
+          }, createLangCombo(),
+            createTimeZoneCombo(),{
+            xtype: 'field',
+            fieldLabel: 'Email',
+            name: 'email',
+            id: 'userinfo_email'
+          },{
+            xtype: 'ux-radiogroup',
+            fieldLabel: 'Gender',
+            name: 'gender',
+            horizontal: true,
+            id: 'userinfo_gender',
+            radios:[{
+                value:'F',
+                boxLabel:'Female' //optional
+              }, {
+                value:'M',
+                boxLabel:'Male' //optional
+              }]
+          },{
+            xtype: 'field',
+            fieldLabel: 'Zip code',
+            name: 'zipcode',
+            id: 'userinfo_zipcode'
+          },{
+            xtype: 'field',
+            fieldLabel: 'Openid',
+            name: 'openid',
+            id: 'userinfo_openid'
+          },{
+            xtype: 'textarea',
+            fieldLabel: 'Layout data',
+            name: 'layoutdata',
+            grow: true,
+            id: 'userinfo_layoutdata',
+            listeners: {
+                afterrender: function(comp) {
+                    comp.getEl().dom.spellcheck=false;
+                    alert("ddd");
+                }
+            }
+          }
+        ]
+    });
+}
+
+/** 
+ * set the various fileds in the user info panel 
+ *  @param tpl  field value templates
+ *  @param userobj  an object which includes user information.
+ *  @param getFormPanel function which returns user info form panel.
+ *  @return none
+ */
+function setUserInfoFields(tpl, userobj, getFormPanel){
+    var formpanel = getFormPanel();
+    var el;
+    el = formpanel.findById('userinfo_sn');
+    el.setValue( tpl.sntpl.apply(userobj) );
+    el = formpanel.findById('userinfo_dob_year');
+    el.setValue( tpl.dobyeartpl.apply(userobj) );
+    el = formpanel.findById('userinfo_dob_month');
+    el.setValue( tpl.dobmonthtpl.apply(userobj) );
+    el = formpanel.findById('userinfo_dob_day');
+    el.setValue( tpl.dobdaytpl.apply(userobj) );
+    el = formpanel.findById('userinfo_email');
+    el.setValue( tpl.emailtpl.apply(userobj) );
+    el = formpanel.findById('userinfo_pwd');
+    el.setValue( tpl.pwdtpl.apply(userobj) );
+    el = formpanel.findById('userinfo_fn');
+    el.setValue( tpl.fntpl.apply(userobj) );
+    el = formpanel.findById('userinfo_ln');
+    el.setValue( tpl.lntpl.apply(userobj) );
+    el = formpanel.findById('userinfo_language');
+    el.setValue( tpl.languagetpl.apply(userobj) );
+    el = formpanel.findById('userinfo_timezone');
+    el.setValue( tpl.timezonetpl.apply(userobj) );
+    el = formpanel.findById('userinfo_zipcode');
+    el.setValue( tpl.zipcodetpl.apply(userobj) );
+    el = formpanel.findById('userinfo_gender');
+    el.setValue(tpl.gendertpl.apply(userobj) );
+    el = formpanel.findById('userinfo_openid');
+    el.setValue(tpl.openidtpl.apply(userobj) );
+    el = formpanel.findById('userinfo_layoutdata');
+    el.setValue(tpl.layoutdatatpl.apply(userobj));
+};
+



Mime
View raw message