Ignore:
Timestamp:
02/16/12 14:47:39 (13 years ago)
Author:
hendrikvanantwerpen
Message:
  • [Client] Finished page framework. See rft/ui/content.js or test files for details.
  • [Client] Allow login by pressing Enter.
  • [API] On exception include details in json response.
  • [Server Use Exceptions when save() fails, iso return values.
Location:
Dev/branches/rest-dojo-ui/client
Files:
5 added
8 edited
1 copied
1 moved

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/dojo

    • Property svn:ignore set to
      .swp

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

    r260 r263  
    1818                <span data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'surveys'">Surveys</span>
    1919                <span data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'results'">Results</span>
     20                <span data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'test1'">Test 1</span>
     21                <span data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'test2'">Test 2</span>
     22                <span data-dojo-type="rft.ui.MenuBarLink" data-dojo-props="pageId:'test3'">Test 3</span>
    2023            </div>
    2124            <div id="userinfo" class="mainUserInfo">Login</div>

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

    r260 r263  
    1 <div data-dojo-type="rft.ui.Page">
    2     <script type="dojo/method" data-dojo-event="init">
     1<div>
     2    <script type="dojo/method" data-dojo-event="onVisit">
    33        var that = this;
     4        debugger;
    45        require(['dojo/_base/json','dojo/dom','dojo/store/JsonRest','dojo/domReady!'],
    56            function(json,dom,JsonRest){

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

    r260 r263  
    1 <div data-dojo-type="rft.ui.Page">
    2     <script type="dojo/method" data-dojo-event="init">
     1<div>
     2    <script type="rft/method" data-rft-method="onVisit">
    33        var that = this;
    4         require(['dojo/store/JsonRest','dojox/grid/DataGrid',
    5                 'dojo/data/ObjectStore','dojo/domReady!'],
    6         function(JsonRest,DataGrid,ObjectStore){
     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){
    77            var store = new JsonRest({
    88                target:"../server/api.php/data/Session/",
    99                idProperty: 'uid'
    1010            });
    11             var grid = new DataGrid({
    12                 store: ObjectStore({objectStore: store}),
    13                 autoWidth: true,
    14                 autoHeight: true,
    15                 structure: [
    16                         {name:"Title", field:"title", width: "200px"}
    17                 ]
    18             }, that.page_sessions_grid);
    19             grid.startup();
     11
     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            }));
     18
     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                debugger;
     27                // mixin newObj in obj.
     28                // store.put(newObj);
     29                event.stop(evt);
     30                return false;
     31            });
     32            that.btnSave.on('click',submitHandler);
     33            that.form.on('submit',submitHandler);
     34       
    2035        });
    2136    </script>
    … …  
    2338        <div class="largeTitle">Sessions</div>
    2439        <div class="content">
    25             <div data-rft-attach-point="page_sessions_grid"></div>
     40            <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>
     41        </div>
     42
     43    </div>
     44
     45    <div class="largeFrame" style="width: 400px;">
     46        <div class="largeTitle">Details</div>
     47        <div>
     48            <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form">
     49                <fieldset>
     50                    <label for="title" class="loginLabel">Title</label>
     51                    <input data-dojo-type="dijit.form.TextBox" name="title" type="text" class="loginInput" />
     52                </fieldset>
     53                <button type="submit" data-dojo-type="dijit.form.Button" data-dojo-attach-point="btnSave">Save</button>
     54            </form>
    2655        </div>
    2756    </div>

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

    r260 r263  
    1 define(['dojo/_base/declare','dojo/_base/connect','dojo/_base/xhr','dojo/dom-construct',
    2     'dojo/dom-attr','dojo/_base/lang','dojo/_base/Deferred','dojo/hash',
    3     'dojo/io-query','dojo/_base/json','dijit','rft/util'],
    4     function(declare,connect,xhr,domConstruct,attr,lang,Deferred,hash,uriQuery,json,dijit,util){
     1define(['dojo/_base/declare','dojo/_base/connect','dojo/_base/xhr',
     2    'dojo/_base/lang','dojo/_base/Deferred','dojo/hash',
     3    'dojo/io-query','dijit','rft/util','rft/ui/_Page'],
     4    function(declare,connect,xhr,lang,Deferred,hash,uriQuery,dijit,util,_Page){
    55        return new (function() {
    66            var self = this;
    7             var current = "";
     7            var currentHash = "";
     8            var currentPage = null;
    89           
    910            var HRI = declare(null,{
    1011                constructor: function() {
    11                     this._path = '/';
     12                    this._path = this._fixPath('/');
    1213                    this._args = {};
    1314                    if ( arguments.length == 1 ) {
    … …  
    5455            function _goTo(hri,replace) {
    5556                var contentPane = dijit.byId('content');
    56                 var d = new Deferred();
     57                var dfd = new Deferred();
    5758                var newHash = hri.hash();
    58                 if ( current == newHash ) {
    59                     d.resolve();
    60                     return d.promise;
     59               
     60                // if already there, return
     61                if ( currentHash === newHash ) {
     62                    dfd.resolve();
     63                    return dfd.promise;
    6164                }
    62                 current = newHash;
     65               
     66                // check if we can leave current page
     67                if ( currentPage ) {
     68                    if ( currentPage.onLeave() === false ) {
     69                        dfd.reject();
     70                        return dfd.promise;
     71                    }
     72                }
     73               
     74                // update hash
     75                currentHash = newHash;
    6376                hash(newHash,replace);
     77               
     78                // load html
     79                var pageUrl = 'pages'+hri.path()+'.html';
    6480                xhr.get({
    65                     url: 'pages'+hri.path()+'.html',
     81                    url: pageUrl,
    6682                    failOk: true
    6783                })
     84               
     85                // initialize page or create error message
    6886                .then(function(html){
    69                     var root = domConstruct.toDom(html)
    70                     var props = json.toJson(hri.args());
    71                     props = props.slice(1,props.length-2);
    72                     if ( props )
    73                         attr.set(root,'data-rft-props',props);
    74                     contentPane.set('content',root);
    75                     d.resolve();
     87                    currentPage = new _Page({
     88                        templateString: html,
     89                        pageQuery: hri.args()
     90                    });
     91                    contentPane.set('content',currentPage);
     92                    dfd.resolve();
    7693                },function(){
    77                     contentPane.set('content',"Page "+hri.path()+" not found.");
    78                     d.reject();
     94                    currentPage = new _Page({
     95                        templateString: "<div>Page "+hri.path()+" not found.</div>"
     96                    });
     97                    contentPane.set('content',currentPage);
     98                    dfd.reject();
    7999                });
    80                 return d.promise;
     100                return dfd.promise;
    81101            }
    82102
    83103            self.initial = function(path,args) {
    84                 if ( current ) {
     104                if ( currentHash ) {
    85105                    var dfd = new Deferred();
    86                     dfd.resolved();
     106                    dfd.resolve();
    87107                    return dfd.promise;
    88108                }

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

    r260 r263  
     1require([
     2    'dijit/form/Form',
     3    'dojo/store/JsonRest',
     4    'dojo/data/ObjectStore',
     5    'dojox/grid/DataGrid',
     6    'dijit/layout/ContentPane',
     7    'dijit/layout/TabContainer',
     8    'dijit/MenuBar',
     9    'dijit/MenuBarItem',
     10    'rft/ui/MenuBarLink',
     11]);
     12
    113require(['dojo/_base/window','dojo/parser', 'rft/ui/LoginDialog',
    214    'dojo/dom', 'dojo/_base/connect', 'rft/auth', 'rft/content',
    3     'dojo/domReady!', 'dijit/layout/ContentPane', 'dijit/MenuBar',
    4     'dijit/MenuBarItem', 'rft/ui/MenuBarLink', 'rft/ui/Page'],
     15    'dojo/domReady!', ],
    516    function(win,parser,LoginDialog,dom,connect,auth,content) {
    617        parser.parse();
    718
    8         var login = new LoginDialog().placeAt(document.body);
     19        var login = new LoginDialog().placeAt(win.body());
    920        login.startup();
    1021
    1122        auth.restore()
    12         .then(function(user){
     23        .then(function(){
    1324            content.initial();
    1425        },function(){

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

    r260 r263  
    1414                <input data-dojo-type="dijit.form.TextBox" name="password" type="password" class="loginInput" />
    1515            </fieldset>
     16            <button type="submit" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onLogin">Login</button>
     17            <button type="button" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCancel">Cancel</button>
    1618        </form>
    17         <button type="button" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onLogin">Login</button>
    18         <button type="button" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCancel">Cancel</button>
    1919        <div data-dojo-attach-point="loginErrors"></div>
    2020    </div>

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

    r260 r263  
    1 define(['dojo/_base/declare','dojo/_base/lang','dijit/Dialog','dijit/_WidgetsInTemplateMixin',
    2     '../auth', 'dojo/text!./LoginDialog.html','../content',
    3     'dijit/form/Form','dijit/form/Button','dijit/form/TextBox'],
    4     function (declare, lang, Dialog, _WidgetsInTemplateMixin, auth, template, content) {
     1define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event','dijit/Dialog',
     2    'dijit/_WidgetsInTemplateMixin','../auth', 'dojo/text!./LoginDialog.html',
     3    '../content','dijit/form/Form','dijit/form/Button','dijit/form/TextBox'],
     4    function (declare, lang, event, Dialog, _WidgetsInTemplateMixin, auth, template, content) {
    55        return declare([Dialog,_WidgetsInTemplateMixin], {
    66            templateString: template,
    … …  
    88            title: "Login",
    99            baseClass: "rftLoginDialog",
     10            startup: function() {
     11                this.inherited(arguments);
     12                this.loginForm.on('submit',lang.hitch(this,'onLogin'));
     13            },
    1014            show: function() {
    1115                this.loginErrors.innerHTML = '';
    … …  
    1317                this.inherited(arguments);
    1418            },
    15             onLogin: function() {
     19            onLogin: function(evt) {
    1620                this.loginErrors.innerHTML = '';
    1721                var data = this.loginForm.get('value');
    18                 var hide = lang.hitch(this,"hide");
    1922                auth.login(data.username,data.password)
    20                 .then(function() {
    21                     hide();
     23                .then(lang.hitch(this,function() {
     24                    this.hide();
    2225                    content.initial();
    23                 },function() {
     26                }),lang.hitch(this,function() {
    2427                    this.loginErrors.innerHTML = 'Login failed.';
    25                 })
     28                }));
     29                event.stop(evt);
    2630                return false;
    2731            }

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

    r260 r263  
    1 define(['dojo/_base/declare','dojo/query','dojo/_base/json','dojo/dom-attr','dojo/_base/lang','dijit/registry','dijit/_WidgetBase','dijit/_Container'],
    2     function(declare,query,json,attr,lang,registry,_WidgetBase,_Container){
    3         return declare('rft.ui.Page',[_WidgetBase,_Container],{
    4             postCreate: function() {
    5                 this.inherited(arguments);
    6                 this.args = {};
    7                 var props = attr.get(this.domNode,'data-rft-props');
    8                 if ( props ) {
    9                     props = json.fromJson.call(this,'{'+props+'}');
    10                     lang.mixin(this.args,props);
    11                 }
    12             },
    13             startup: function() {
    14                 this.inherited(arguments);
    15                 query('[data-rft-attach-point]').forEach(lang.hitch(this,function(node){
    16                     var name = attr.get(node,'data-rft-attach-point');
    17                     this[name] = registry.byNode(node) || node;
     1define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event','rft/content',
     2    'dojo/store/JsonRest','dojo/data/ObjectStore','rft/ui/_PageController','dijit/registry'],
     3    function(declare,lang,event,content,JsonRest,ObjectStore,_PageController,registry) {
     4        return declare([_PageController],{
     5            onVisit: function() {
     6                this._store = new JsonRest({
     7                    target:"../server/api.php/data/Session/",
     8                    idProperty: 'uid'
     9                });
     10
     11                function setEnabledRecursive(node,value) {
     12                    registry.findWidgets(node).forEach(function(w){
     13                        w.set('disabled',!value);
     14                        setEnabledRecursive(w.domNode,value);
     15                    });
     16                };
     17
     18                setEnabledRecursive(this.form.domNode,false);
     19
     20                var refreshGrid = lang.hitch(this,function(){
     21                    this.grid.setStore(ObjectStore({
     22                        objectStore: this._store
     23                    }),'');
     24                });
     25                refreshGrid();
     26               
     27                var getSelectedItem = lang.hitch(this,function(evt){
     28                    var items = this.grid.selection.getSelected();
     29                    if (items.length)
     30                        return items[0];
     31                    return null;
     32                });
     33               
     34                this.grid.on('rowclick',lang.hitch(this,function(evt){
     35                    var obj = getSelectedItem();
     36                    if ( obj) {
     37                        this.form.set('value', obj);
     38                        setEnabledRecursive(this.form.domNode, true);
     39                    } else {
     40                        setEnabledRecursive(this.form.domNode, false);
     41                        this.form.reset();
     42                    }
    1843                }));
    19                 this.init();
    20             },
    21             init: function(){}
     44
     45                this.grid.on('rowdblclick',lang.hitch(this,function(evt){
     46                    var obj = getSelectedItem();
     47                    content.goTo('/session',{
     48                        uid:obj.uid
     49                    });
     50                }));
     51
     52                var submitHandler = lang.hitch(this,function(evt){
     53                    this.errors.innerHTML = '';
     54                    var newObj = this.form.get('value');
     55                    var obj = getSelectedItem();
     56                    obj = lang.mixin(obj,newObj);
     57                    //this._store.put(newObj,{id:obj.uid})
     58                    this._store.put(obj,{
     59                        overwrite:true
     60                    })
     61                    .then(lang.hitch(this,function(){
     62                        refreshGrid();
     63                    }),lang.hitch(this,function(e){
     64                        this.errors.innerHTML = e.toString();
     65                    }));
     66                    event.stop(evt);
     67                    return false;
     68                });
     69               
     70                this.form.on('submit',submitHandler);
     71            }
    2272        });
    2373    });

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

    r260 r263  
    1 define(['dojo/_base/declare','dojo/query','dojo/_base/json','dojo/dom-attr','dojo/_base/lang','dijit/registry','dijit/_WidgetBase','dijit/_Container'],
    2     function(declare,query,json,attr,lang,registry,_WidgetBase,_Container){
    3         return declare('rft.ui.Page',[_WidgetBase,_Container],{
    4             postCreate: function() {
     1define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/array','dojo/parser','dojo/query','dojo/_base/Deferred',
     2    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin','rft/ui/_PageController'],
     3    function(declare,lang,array,parser,query,Deferred,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_PageController){
     4        return declare('rft.ui._Page',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_PageController],{
     5            _controllerLoaded: false,
     6            _hasStarted: false,
     7            _triggeredOnVisit: false,
     8            pageController: null, /* class derived from rft.ui._PageController, mixed in at creation */
     9            buildRendering: function() {
    510                this.inherited(arguments);
    6                 this.args = {};
    7                 var props = attr.get(this.domNode,'data-rft-props');
    8                 if ( props ) {
    9                     props = json.fromJson.call(this,'{'+props+'}');
    10                     lang.mixin(this.args,props);
     11                var dfd = new Deferred();
     12                var mixinType = this.domNode.getAttribute("data-rft-mixin");
     13                if ( mixinType ) {
     14                    require([mixinType],lang.hitch(this,function(SomePageController){
     15                        declare.safeMixin(this,new SomePageController());
     16                        dfd.resolve();
     17                    }));
     18                } else {
     19                    dfd.resolve();
    1120                }
     21                dfd.then(lang.hitch(this,function(){
     22                    var methods = query('> script[type^="rft/method"]',this.domNode).orphan();
     23                    array.forEach(methods,lang.hitch(this,function(s){
     24                        var method = s.getAttribute("data-rft-method");
     25                        var func = parser._functionFromScript(s);
     26                        this[method] = func;
     27                    }));
     28                    this._controllerLoaded = true;
     29                    this._triggerOnVisit();
     30                }));
    1231            },
    1332            startup: function() {
    1433                this.inherited(arguments);
    15                 query('[data-rft-attach-point]').forEach(lang.hitch(this,function(node){
    16                     var name = attr.get(node,'data-rft-attach-point');
    17                     this[name] = registry.byNode(node) || node;
    18                 }));
    19                 this.init();
     34                this._hasStarted = true;
     35                this._triggerOnVisit();
    2036            },
    21             init: function(){}
     37            _triggerOnVisit: function() {
     38                if ( this._controllerLoaded && this._hasStarted && !this._triggeredOnVisit ) {
     39                    this._triggeredOnVisit = false;
     40                    this.onVisit();
     41                }
     42            }
    2243        });
    2344    });
Note: See TracChangeset for help on using the changeset viewer.