Changeset 263 for Dev/branches/rest-dojo-ui/client/rft

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/rft

Files:

• content.js (modified) (2 diffs)
• run.js (modified) (1 diff)
• ui/LoginDialog.html (modified) (1 diff)
• ui/LoginDialog.js (modified) (3 diffs)
• ui/TestPageController.js (copied) (copied from Dev/branches/rest-dojo-ui/client/rft/ui/Page.js) (1 diff)
• ui/_Page.js (moved) (moved from Dev/branches/rest-dojo-ui/client/rft/ui/Page.js) (1 diff)
• ui/_PageController.js (added)

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/connect','dojo/_base/xhr','dojo/dom-construct',
-    'dojo/dom-attr','dojo/_base/lang','dojo/_base/Deferred','dojo/hash',
-    'dojo/io-query','dojo/_base/json','dijit','rft/util'],
-    function(declare,connect,xhr,domConstruct,attr,lang,Deferred,hash,uriQuery,json,dijit,util){
+define(['dojo/_base/declare','dojo/_base/connect','dojo/_base/xhr',
+    'dojo/_base/lang','dojo/_base/Deferred','dojo/hash',
+    'dojo/io-query','dijit','rft/util','rft/ui/_Page'],
+    function(declare,connect,xhr,lang,Deferred,hash,uriQuery,dijit,util,_Page){
         return new (function() {
             var self = this;
-            var current = "";
+            var currentHash = "";
+            var currentPage = null;
             
             var HRI = declare(null,{
                 constructor: function() {
-                    this._path = '/';
+                    this._path = this._fixPath('/');
                     this._args = {};
                     if ( arguments.length == 1 ) {
@@ -54 +55 @@
             function _goTo(hri,replace) {
                 var contentPane = dijit.byId('content');
-                var d = new Deferred();
+                var dfd = new Deferred();
                 var newHash = hri.hash();
-                if ( current == newHash ) {
-                    d.resolve();
-                    return d.promise;
+                
+                // if already there, return
+                if ( currentHash === newHash ) {
+                    dfd.resolve();
+                    return dfd.promise;
                 }
-                current = newHash;
+                
+                // check if we can leave current page
+                if ( currentPage ) {
+                    if ( currentPage.onLeave() === false ) {
+                        dfd.reject();
+                        return dfd.promise;
+                    }
+                }
+                
+                // update hash
+                currentHash = newHash;
                 hash(newHash,replace);
+                
+                // load html
+                var pageUrl = 'pages'+hri.path()+'.html';
                 xhr.get({
-                    url: 'pages'+hri.path()+'.html',
+                    url: pageUrl,
                     failOk: true
                 })
+                
+                // initialize page or create error message
                 .then(function(html){
-                    var root = domConstruct.toDom(html)
-                    var props = json.toJson(hri.args());
-                    props = props.slice(1,props.length-2);
-                    if ( props )
-                        attr.set(root,'data-rft-props',props);
-                    contentPane.set('content',root);
-                    d.resolve();
+                    currentPage = new _Page({
+                        templateString: html,
+                        pageQuery: hri.args()
+                    });
+                    contentPane.set('content',currentPage);
+                    dfd.resolve();
                 },function(){
-                    contentPane.set('content',"Page "+hri.path()+" not found.");
-                    d.reject();
+                    currentPage = new _Page({
+                        templateString: "<div>Page "+hri.path()+" not found.</div>"
+                    });
+                    contentPane.set('content',currentPage);
+                    dfd.reject();
                 });
-                return d.promise;
+                return dfd.promise;
             }
 
             self.initial = function(path,args) {
-                if ( current ) {
+                if ( currentHash ) {
                     var dfd = new Deferred();
-                    dfd.resolved();
+                    dfd.resolve();
                     return dfd.promise;
                 }

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

@@ +1 @@
+require([
+    'dijit/form/Form',
+    'dojo/store/JsonRest',
+    'dojo/data/ObjectStore',
+    'dojox/grid/DataGrid',
+    'dijit/layout/ContentPane',
+    'dijit/layout/TabContainer',
+    'dijit/MenuBar',
+    'dijit/MenuBarItem',
+    'rft/ui/MenuBarLink',
+]);
+
 require(['dojo/_base/window','dojo/parser', 'rft/ui/LoginDialog', 
     'dojo/dom', 'dojo/_base/connect', 'rft/auth', 'rft/content',
-    'dojo/domReady!', 'dijit/layout/ContentPane', 'dijit/MenuBar',
-    'dijit/MenuBarItem', 'rft/ui/MenuBarLink', 'rft/ui/Page'],
+    'dojo/domReady!', ],
     function(win,parser,LoginDialog,dom,connect,auth,content) {
         parser.parse();
 
-        var login = new LoginDialog().placeAt(document.body);
+        var login = new LoginDialog().placeAt(win.body());
         login.startup();
 
         auth.restore()
-        .then(function(user){
+        .then(function(){
             content.initial();
         },function(){

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

@@ -14 +14 @@
                 <input data-dojo-type="dijit.form.TextBox" name="password" type="password" class="loginInput" />
             </fieldset>
+            <button type="submit" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onLogin">Login</button>
+            <button type="button" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCancel">Cancel</button>
         </form>
-        <button type="button" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onLogin">Login</button>
-        <button type="button" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:onCancel">Cancel</button>
         <div data-dojo-attach-point="loginErrors"></div>
     </div>

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/_base/lang','dijit/Dialog','dijit/_WidgetsInTemplateMixin',
-    '../auth', 'dojo/text!./LoginDialog.html','../content',
-    'dijit/form/Form','dijit/form/Button','dijit/form/TextBox'],
-    function (declare, lang, Dialog, _WidgetsInTemplateMixin, auth, template, content) {
+define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event','dijit/Dialog',
+    'dijit/_WidgetsInTemplateMixin','../auth', 'dojo/text!./LoginDialog.html',
+    '../content','dijit/form/Form','dijit/form/Button','dijit/form/TextBox'],
+    function (declare, lang, event, Dialog, _WidgetsInTemplateMixin, auth, template, content) {
         return declare([Dialog,_WidgetsInTemplateMixin], {
             templateString: template,
@@ -8 +8 @@
             title: "Login",
             baseClass: "rftLoginDialog",
+            startup: function() {
+                this.inherited(arguments);
+                this.loginForm.on('submit',lang.hitch(this,'onLogin'));
+            },
             show: function() {
                 this.loginErrors.innerHTML = '';
@@ -13 +17 @@
                 this.inherited(arguments);
             },
-            onLogin: function() {
+            onLogin: function(evt) {
                 this.loginErrors.innerHTML = '';
                 var data = this.loginForm.get('value');
-                var hide = lang.hitch(this,"hide");
                 auth.login(data.username,data.password)
-                .then(function() {
-                    hide();
+                .then(lang.hitch(this,function() {
+                    this.hide();
                     content.initial();
-                },function() {
+                }),lang.hitch(this,function() {
                     this.loginErrors.innerHTML = 'Login failed.';
-                })
+                }));
+                event.stop(evt);
                 return false;
             }

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/query','dojo/_base/json','dojo/dom-attr','dojo/_base/lang','dijit/registry','dijit/_WidgetBase','dijit/_Container'],
-    function(declare,query,json,attr,lang,registry,_WidgetBase,_Container){
-        return declare('rft.ui.Page',[_WidgetBase,_Container],{
-            postCreate: function() {
-                this.inherited(arguments);
-                this.args = {};
-                var props = attr.get(this.domNode,'data-rft-props');
-                if ( props ) {
-                    props = json.fromJson.call(this,'{'+props+'}');
-                    lang.mixin(this.args,props);
-                }
-            },
-            startup: function() {
-                this.inherited(arguments);
-                query('[data-rft-attach-point]').forEach(lang.hitch(this,function(node){
-                    var name = attr.get(node,'data-rft-attach-point');
-                    this[name] = registry.byNode(node) || node;
+define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/event','rft/content',
+    'dojo/store/JsonRest','dojo/data/ObjectStore','rft/ui/_PageController','dijit/registry'],
+    function(declare,lang,event,content,JsonRest,ObjectStore,_PageController,registry) {
+        return declare([_PageController],{
+            onVisit: function() {
+                this._store = new JsonRest({
+                    target:"../server/api.php/data/Session/",
+                    idProperty: 'uid'
+                });
+
+                function setEnabledRecursive(node,value) {
+                    registry.findWidgets(node).forEach(function(w){
+                        w.set('disabled',!value);
+                        setEnabledRecursive(w.domNode,value);
+                    });
+                };
+
+                setEnabledRecursive(this.form.domNode,false);
+
+                var refreshGrid = lang.hitch(this,function(){
+                    this.grid.setStore(ObjectStore({
+                        objectStore: this._store
+                    }),'');
+                });
+                refreshGrid();
+                
+                var getSelectedItem = lang.hitch(this,function(evt){
+                    var items = this.grid.selection.getSelected();
+                    if (items.length)
+                        return items[0];
+                    return null;
+                });
+                
+                this.grid.on('rowclick',lang.hitch(this,function(evt){
+                    var obj = getSelectedItem();
+                    if ( obj) {
+                        this.form.set('value', obj);
+                        setEnabledRecursive(this.form.domNode, true);
+                    } else {
+                        setEnabledRecursive(this.form.domNode, false);
+                        this.form.reset();
+                    }
                 }));
-                this.init();
-            },
-            init: function(){}
+
+                this.grid.on('rowdblclick',lang.hitch(this,function(evt){
+                    var obj = getSelectedItem();
+                    content.goTo('/session',{
+                        uid:obj.uid
+                    });
+                }));
+
+                var submitHandler = lang.hitch(this,function(evt){
+                    this.errors.innerHTML = '';
+                    var newObj = this.form.get('value');
+                    var obj = getSelectedItem();
+                    obj = lang.mixin(obj,newObj);
+                    //this._store.put(newObj,{id:obj.uid})
+                    this._store.put(obj,{
+                        overwrite:true
+                    })
+                    .then(lang.hitch(this,function(){
+                        refreshGrid();
+                    }),lang.hitch(this,function(e){
+                        this.errors.innerHTML = e.toString();
+                    }));
+                    event.stop(evt);
+                    return false;
+                });
+                
+                this.form.on('submit',submitHandler);
+            }
         });
     });

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

@@ -1 @@
-define(['dojo/_base/declare','dojo/query','dojo/_base/json','dojo/dom-attr','dojo/_base/lang','dijit/registry','dijit/_WidgetBase','dijit/_Container'],
-    function(declare,query,json,attr,lang,registry,_WidgetBase,_Container){
-        return declare('rft.ui.Page',[_WidgetBase,_Container],{
-            postCreate: function() {
+define(['dojo/_base/declare','dojo/_base/lang','dojo/_base/array','dojo/parser','dojo/query','dojo/_base/Deferred',
+    'dijit/_WidgetBase','dijit/_TemplatedMixin','dijit/_WidgetsInTemplateMixin','rft/ui/_PageController'],
+    function(declare,lang,array,parser,query,Deferred,_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_PageController){
+        return declare('rft.ui._Page',[_WidgetBase,_TemplatedMixin,_WidgetsInTemplateMixin,_PageController],{
+            _controllerLoaded: false,
+            _hasStarted: false,
+            _triggeredOnVisit: false,
+            pageController: null, /* class derived from rft.ui._PageController, mixed in at creation */
+            buildRendering: function() {
                 this.inherited(arguments);
-                this.args = {};
-                var props = attr.get(this.domNode,'data-rft-props');
-                if ( props ) {
-                    props = json.fromJson.call(this,'{'+props+'}');
-                    lang.mixin(this.args,props);
+                var dfd = new Deferred();
+                var mixinType = this.domNode.getAttribute("data-rft-mixin");
+                if ( mixinType ) {
+                    require([mixinType],lang.hitch(this,function(SomePageController){
+                        declare.safeMixin(this,new SomePageController());
+                        dfd.resolve();
+                    }));
+                } else {
+                    dfd.resolve();
                 }
+                dfd.then(lang.hitch(this,function(){
+                    var methods = query('> script[type^="rft/method"]',this.domNode).orphan();
+                    array.forEach(methods,lang.hitch(this,function(s){
+                        var method = s.getAttribute("data-rft-method");
+                        var func = parser._functionFromScript(s);
+                        this[method] = func;
+                    }));
+                    this._controllerLoaded = true;
+                    this._triggerOnVisit();
+                }));
             },
             startup: function() {
                 this.inherited(arguments);
-                query('[data-rft-attach-point]').forEach(lang.hitch(this,function(node){
-                    var name = attr.get(node,'data-rft-attach-point');
-                    this[name] = registry.byNode(node) || node;
-                }));
-                this.init();
+                this._hasStarted = true;
+                this._triggerOnVisit();
             },
-            init: function(){}
+            _triggerOnVisit: function() {
+                if ( this._controllerLoaded && this._hasStarted && !this._triggeredOnVisit ) {
+                    this._triggeredOnVisit = false;
+                    this.onVisit();
+                }
+            }
         });
     });