Changeset 347 for Dev/branches


Ignore:
Timestamp:
06/24/12 16:25:01 (13 years ago)
Author:
hendrikvanantwerpen
Message:

[Client] Merged mockup into pages/ folder.
[Client] Make client more robust when pages have empty lines or multiple root nodes.

Location:
Dev/branches/rest-dojo-ui/client
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/index.html

    r311 r347  
    1212        <script type="text/javascript" src="rft/run.js"></script>
    1313    </head>
    14     <body class="claro">
    15         <div id="header" class="mainHeader">
    16             <div id="menu" class="mainMenu"  data-dojo-type="rft.ui.MainMenu">
     14    <body class="dijitReset claro">
     15        <div class="page" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     16            <div class="topbar" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     17                <h1>ResearchTool</h1>
     18                <div data-dojo-type="rft.ui.MainMenu"></div>
     19                <div class="breadcrumbs">
     20                    <span class="breadcrumb">Some</span> &gt; <span class="breadcrumb">Sample</span> &gt; <span class="breadcrumbCurrent">Breadcrumb [visiting]</span>
     21                </div>
    1722            </div>
    18         </div>
    19         <div id="content" data-dojo-type="dijit.layout.ContentPane" style="width: 100%; height: 100%;">
     23            <div id="content" class="content" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     24            </div>
    2025        </div>
    2126        <div id="toaster" data-dojo-type="rft.ui.Notifications">

  • Dev/branches/rest-dojo-ui/client/rft/content.js

    r340 r347  
    9595                }
    9696               
     97                function getFirstNode(html) {
     98                    var nodeOrFragment = domConstruct.toDom(html);
     99                    if (nodeOrFragment instanceof Element) {
     100                        return nodeOrFragment;
     101                    }
     102                    if (nodeOrFragment instanceof DocumentFragment) {
     103                        console.warn("Fragment found, will only use first Element");
     104                        for (i in nodeOrFragment.childNodes) {
     105                            var node = nodeOrFragment.childNodes[i];
     106                            if (node instanceof Element) {
     107                                return node;
     108                            }
     109                        }
     110                    }
     111                    return domConstruct.toDom('<div>No Element found in template.</div>');
     112                }
     113
    97114                function mixinArgs(node) {
    98115                    var props = {};
    … …  
    118135                // initialize page or create error message
    119136                .then(function(html){
    120                     var rootNode = domConstruct.toDom(html);
     137                    var rootNode = getFirstNode(html);
    121138                    mixinArgs(rootNode);
    122139                    contentPane.set('content',rootNode);

  • Dev/branches/rest-dojo-ui/client/rft/pages/index.html

    r274 r347  
    11<div>
    2     <h1>Index pagina</h1>
     2    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 600px;">
     3        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     4            <h2>
     5                <span class="rftIcon rftIconUser"></span>
     6                <span class="headerText">Main Menu</span>
     7            </h2>
     8        </div>
     9
     10        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
     11
     12            <div class="rftIndexMenuBlock">
     13                <div class="rftIndexMenuMask">
     14                    <span class="rftIcon rftIconSession"></span><span class="label">Sessions</span>
     15                </div>
     16                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconPlus'" onClick="goToPage('mSessions');">Create and edit</button>
     17                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'green twoHeight', iconClass: 'rftIcon rftIconForward'" onClick="goToPage('mSessions');">Facilitate</button>
     18            </div>
     19
     20            <div class="rftIndexMenuBlock">
     21                <div class="rftIndexMenuMask">
     22                    <span class="rftIcon rftIconInspect"></span><span class="label">Content</span>
     23                </div>
     24                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue oneHeight', iconClass: 'rftIcon rftIconSurvey'" onClick="goToPage('mSurveys');">Surveys</button>
     25                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'orange oneHeight', iconClass: 'rftIcon rftIconQuestion'" onClick="goToPage('mQuestions');">Questions</button>
     26                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'purple oneHeight', iconClass: 'rftIcon rftIconApplication'" onClick="goToPage('mApplications');">Applications</button>
     27                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'red oneHeight', iconClass: 'rftIcon rftIconDashboard'" onClick="goToPage('mDashboards');">Dashboards</button>
     28
     29            </div>
     30
     31            <div class="rftIndexMenuBlock">
     32                <div data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftIndexMenuButton', class: 'blue fourHeight', iconClass: 'rftIcon rftIconGameData'" onClick="goToPage('mResults')">Results</div>
     33            </div>
     34        </div>
     35    </div>
    336</div>

  • Dev/branches/rest-dojo-ui/client/rft/pages/session.html

    r274 r347  
    11<div>
    2     <script type="dojo/method" data-dojo-event="onVisit">
    3         var that = this;
    4         debugger;
    5         require(['dojo/_base/json','dojo/dom','dojo/store/JsonRest','dojo/domReady!'],
    6             function(json,dom,JsonRest){
    7                 var store = new JsonRest({
    8                     target:"../server/api.php/data/Session/",
    9                     idProperty: 'uid'
    10                 });
    11                 store.get(that.args.uid).then(function(obj){
    12                     that.page_session_form.innerHTML = json.toJson(obj);
    13                 });
    14             });
    15     </script>
    16     <div class="largeFrame" style="width: 400px;">
    17         <div class="largeTitle">Session</div>
    18         <div class="content">
    19             <div data-rft-attach-point="page_session_form"></div>
     2    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
     3        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     4            <h2>
     5                <span class="rftIcon rftIconSurvey"></span>
     6                <span class="headerText">Teamup Session 15-5-2012 [editing]</span>
     7            </h2>
     8        </div>
     9        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     10            <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'">
     11                <div data-dojo-type="dijit.layout.ContentPane" title="Properties">
     12                    <!--PROPERTIES-->
     13                    <h3>Basic</h3>
     14                    <fieldset class="align">
     15                        <label for="titleInput">Title:</label>
     16                        <input type="text" id="titleInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder: 'Enter title here'" />
     17                        <br/>
     18                        <label for="descriptionInput">Description:</label>
     19                        <textarea id="descriptionInput" rows="3" cols="54" data-dojo-type="dijit.form.SimpleTextarea" data-dojo-props="selectOnClick: true">This is the description in the info popups!</textarea>
     20                        <br/>
     21                        <label for="dateInput">Planned date:</label>
     22                        <input type="text" id="dateInput" data-dojo-type="dijit.form.DateTextBox" required="true" />
     23                    </fieldset>
     24
     25                    <h3>Accounts</h3>
     26                    <fieldset class="align">
     27                        <label for="accountsInput">Add new</label>
     28                        <input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder: 'Enter email address here...'" />
     29                        <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftBlockButton', class: 'green', iconClass: 'rftIcon rftIconPlus'">Invite</button>
     30                        <br/><br/>
     31                        <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'" style="width: 500px;">
     32                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'a.bezuijen@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     33                            <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'i.mayer@tudelft.nl', modifiers: 'green', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     34                        </div>
     35                    </fieldset>
     36
     37                    <button id="btnPropertiesDiscard" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
     38                    <button id="btnPropertiesSave" data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save changes</button>
     39
     40
     41                </div>
     42                <div data-dojo-type="dijit.layout.ContentPane" title="Design">
     43                    <!--DESIGN-->
     44
     45                    <div class="rftSessionObject green">
     46                        <div class="rftIcon rftIconSurvey"></div>
     47                        <label>Survey name</label>
     48                    </div>
     49                    <div class="rftSessionObject green">
     50                        <div class="rftIcon rftIconSurvey"></div>
     51                        <label>Survey name, this one is really long.</label>
     52                    </div>
     53
     54                </div>
     55            </div>
    2056        </div>
    2157    </div>
    22 
    2358</div>

  • Dev/branches/rest-dojo-ui/client/rft/pages/sessions.html

    r303 r347  
    11<div>
    2     <script type="rft/method" data-rft-method="onVisit">
    3         var that = this;
    4         require(['dojo/_base/lang','dojo/_base/event','dojo/store/JsonRest','dojox/grid/DataGrid',
    5             'dojo/data/ObjectStore','rft/content','dojo/domReady!'],
    6         function(lang,event,JsonRest,DataGrid,ObjectStore,content){
    7             var store = new JsonRest({
    8                 target:"../server/api.php/data/Session/",
    9                 idProperty: 'uid'
     2    <script>
     3        function createNew(){
     4            var newBox = new rft.ui.ObjectBox({
     5                title: 'TeamUp Basic Template',
     6                subTitle: '',
     7                lowerTitle: '',
     8                objectType: 'SessionTemplate',
     9                actions: {
     10                    "edit": function() {},
     11                    "delete": function() {}
     12                }
    1013            });
     14            newBox.startup();
     15            newBox.placeAt("containerTemplates", "last");
     16        }
     17       
     18        function createInstance(args) {
     19            // Create a template instance in the "Sessions" tab
     20            var args;
     21            args.objectType = "Session";
     22            var d = new Date();
     23            var dateString = d.getDate()+"-"+d.getMonth()+"-"+d.getFullYear();
     24            var creator = "Igor Mayer"; // Use currently logged in profile instead!
     25            args.subTitle = "Created on "+dateString+" by "+creator;
     26       
     27            args.actions = {
     28                "edit": function() {},
     29                "delete": function() {}
     30            }
     31            var newBox = new rft.ui.ObjectBox(args);
     32            newBox.startup();
     33            newBox.placeAt("containerSessions", "last");
    1134
    12             that.grid.setStore(ObjectStore({objectStore: store}));
    13        
    14             that.grid.on('rowclick',lang.hitch(that,function(evt){
    15                 var obj = evt.grid.getItem(evt.rowIndex);
    16                 this.form.set('value', obj);
    17             }));
     35            // TODO: Then switch tabs to the Sessions tab!
     36            var sess = dijit.byId("dijit_layout_ContentPane_5");
     37            dijit.byId("tabs").selectChild(sess);
     38        }
     39    </script>
     40    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
     41        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     42            <h2>
     43                <span class="rftIcon rftIconSession"></span>
     44                <span class="headerText">Sessions</span>
     45            </h2>
     46        </div>
     47        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     48            <div data-dojo-type="dijit.layout.TabContainer" class="green" data-dojo-props="tabPosition:'left-h',region:'center'" id="tabs">
     49                <div data-dojo-type="dijit.layout.BorderContainer" title="Templates">
     50                    <div id="containerTemplates" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
     51                        <!--TODO: These don't allow for custom icon settings yet! -->
     52                        <div data-dojo-type="rft.ui.ObjectBox" data-dojo-props="actions: {'edit': function(){alert('Custom edit code');}, 'delete':function(){}, 'Custom function': function(){alert('newCommand');}, 'publish': createInstance}"></div>
     53                    </div>
     54                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
     55                        <div data-dojo-type="dijit.form.Button" data-dojo-props="region: 'bottom', baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSessionTemplate', onClick: createNew">Create new template</div>
     56                    </div>
     57                </div>
     58                <div data-dojo-type="dijit.layout.ContentPane" title="Sessions">
     59                    <div id="containerSessions" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
    1860
    19             that.grid.on('rowdblclick',lang.hitch(that,function(evt){
    20                 var obj = evt.grid.getItem(evt.rowIndex);
    21                 content.goTo('/session',{uid:obj.uid});
    22             }));
    23 
    24             var submitHandler = lang.hitch(that,function(evt){
    25                 var newObj = this.form.get('value');
    26                 // mixin newObj in obj.
    27                 // store.put(newObj);
    28                 event.stop(evt);
    29                 return false;
    30             });
    31             that.btnSave.on('click',submitHandler);
    32             that.form.on('submit',submitHandler);
    33        
    34         });
    35     </script>
    36     <div class="largeFrame" style="width: 400px;">
    37         <div class="largeTitle">Sessions</div>
    38         <div class="content">
    39             <div data-dojo-type="dojox.grid.DataGrid" data-dojo-props="autoWidth:true,autoHeight:true,structure:[{name:'Title',field:'title'}]" data-dojo-attach-point="grid"></div>
    40         </div>
    41 
    42     </div>
    43 
    44     <div class="largeFrame" style="width: 400px;">
    45         <div class="largeTitle">Details</div>
    46         <div>
    47             <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form">
    48                 <fieldset>
    49                     <label for="title" class="loginLabel">Title</label>
    50                     <input data-dojo-type="dijit.form.TextBox" name="title" type="text" class="loginInput" />
    51                 </fieldset>
    52                 <button type="submit" data-dojo-type="dijit.form.Button" data-dojo-attach-point="btnSave">Save</button>
    53             </form>
     61                    </div>
     62                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'" style="height: 40px;">
     63                        <!-- Buttons? -->
     64                    </div>
     65                </div>
     66            </div>
    5467        </div>
    5568    </div>
    56 
    5769</div>

  • Dev/branches/rest-dojo-ui/client/rft/pages/survey.html

    r316 r347  
    11<div data-dojo-type="rft.pages.survey">
    2     <h1 data-rft-attach-point="header">(default)</h1>
    3     <div>Created by <span data-rft-attach-point="creator"></span></div>
    4     <form data-dojo-type="dijit.form.Form" data-rft-attach-point="form" data-rft-attach-event="onSubmit:onSave">
    5         <div style="display: block; clear: both;">
    6             <button type="submit" data-dojo-type="dijit.form.Button">Save</button>
    7             <button type="button" data-dojo-type="dijit.form.Button" data-rft-attach-event="onClick:onReset">Reset</button>
     2    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'" style="height: 500px;">
     3        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     4            <h2>
     5                <span class="rftIcon rftIconSurvey"></span>
     6                <span class="headerText">Survey A [editing]</span>
     7            </h2>
    88        </div>
    9         <label for="title" class="loginLabel">Title</label>
    10         <input type="text" name="title" data-dojo-type="dijit.form.TextBox" class="loginInput"/>
    11         <label for="description" class="loginLabel">Description</label>
    12         <textarea name="description" data-dojo-type="dijit.form.SimpleTextarea" class="loginInput"></textarea>
    13         <div>
    14             <div style="width: 45%; float: left; clear: left;"><div data-rft-attach-point="allQuestions"></div></div>
    15             <div style="width: 45%; float: left;"><div data-rft-attach-point="surveyQuestions"></div></div>
     9        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center'">
     10            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
     11                Presets
     12            </div>
     13            <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
     14                <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
     15                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     16                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     17                </div>
     18                <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">
     19                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     20                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     21                </div>
     22                <div data-dojo-type="dijit.layout.ContentPane" title="Category Three">
     23                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     24                </div>
     25                <div data-dojo-type="dijit.layout.ContentPane" title="Category Four">
     26                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Green Question Subcat one'"></div>
     27                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     28                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
     29                </div>
     30                <div data-dojo-type="dijit.layout.ContentPane" title="Category Five">
     31                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
     32                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
     33                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat three'"></div>
     34                    <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat four'"></div>
     35                </div>
     36            </div>
    1637        </div>
    17     </form>
     38        <!-- "Shopping cart" -->
     39        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'right'" style="width: 300px">
     40            <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'">
     41                <h3>Included questions</h3>
     42            </div>
     43            <div data-dojo-type="rft.ui.List" data-dojo-props="region:'center'">
     44                <!-- These would have to be dynamically generated instead of declared here! -->
     45                <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question one', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     46                <div data-dojo-type="rft.ui.LineWithActionsWidgetThijs" data-dojo-props="title:'Question two', actions: {'Cancel':{callback: function(){}, properties: {blockButton: false, icon: 'Delete', modifiers:'white'}}}"></div>
     47            </div>
     48            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
     49                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconSettings'">Settings</button>
     50                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconAccept'">Save Changes</button>
     51                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconCancel'">Discard changes</button>
     52                <button data-dojo-type="dijit.form.Button" data-dojo-props="baseClass: 'rftLargeButton', iconClass: 'rftIcon rftIconPreview'">Preview</button>
     53            </div>
     54        </div>
     55    </div>
    1856</div>

  • Dev/branches/rest-dojo-ui/client/rft/run.js

    r311 r347  
    88    'dojo/data/ObjectStore',
    99    'dojo/store/JsonRest',
     10    'dijit/InlineEditBox',
    1011    'dijit/MenuBar',
    1112    'dijit/MenuBarItem',
    … …  
    1314    'dijit/DropDownMenu',
    1415    'dijit/TitlePane',
     16    'dijit/layout/BorderContainer',
    1517    'dijit/layout/ContentPane',
    1618    'dijit/layout/TabContainer',
    1719    'dijit/layout/AccordionContainer',
     20    'dijit/form/DateTextBox',
    1821    'dijit/form/Form',
    1922    'dijit/form/TextBox',
    … …  
    2528    'dojox/grid/DataGrid',
    2629    'dojox/widget/TitleGroup',
     30    'rft/ui/List',
    2731    'rft/ui/MainMenu',
    2832    'rft/ui/MenuBarLink',
    … …  
    3236    'rft/ui/QuestionWidget',
    3337    'rft/ui/TitleGroup',
     38   
     39    // Thijs mods, to be merged
     40    'rft/ui/SelectorThijs',
     41    'rft/ui/LineWithActionsWidgetThijs',
    3442   
    3543    // pages -> load dynamically?
    … …  
    5664
    5765    });
     66
     67function goToPage(page) {
     68    throw "Obsolete navigation to "+page;
     69}
Note: See TracChangeset for help on using the changeset viewer.