Commits

berwin9 committed d691027

added code for Composite/Leaf appending on TreeView.

  • Participants
  • Parent commits 491155a

Comments (0)

Files changed (11)

 
 // Routes
 app.get('/', routes.index);
+app.get('/items', routes.items);
 
 app.listen(process.env.PORT || 5000);
 console.log("Express server listening on port %d in %s mode",

public/css/bootstrap/scaffolding.less

 
 .tree-panel {
   .clearfix();
-  border-radius: 0 0 3px 3px;
-  float: none;
+  border-radius: 3px 3px 3px 3px;
   display: block;
   border: 1px solid #ddd;
-  /*border: red 1px dashed;*/
+  width: 210px;
+  height: 310px;
+  overflow-y: scroll;
 }
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
   }
 }
 
+.centerize {
+  /*width: 50%;*/
+  /*margin: auto;*/
+width: 70%;
+    margin: 0 auto;
+}
+
 
 // BASE STYLES
 // -----------

public/js/collections/SegmentsCollection.js

 
     var SegmentsCollection = Backbone.Collection.extend({
         model: SegmentModel,
-        url: '/segments'
+        url: '/items'
     });
     return SegmentsCollection;
 });

public/js/main.js

 require.config({
     paths: {
         order: 'libs/require/order.min',
-        //jquery: 'libs/jquery/jquery-1.7.1.min',
+        jquery: 'libs/jquery/jquery-1.7.1.min',
         //: firebug causes firefox to hang when using local jquery.min
         //: use jquery cdn instead during development
-        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
+        //jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
         jqueryui: 'libs/jquery/jquery-ui-1.8.17.custom.min',
         underscore: 'libs/underscore/underscore.min',
         backbone: 'libs/backbone/backbone.min',

public/js/views/AbstractTreeViewComponent.js

+/**
+ * views/guicore/AbstractTreeViewComponent.js
+ * ~~~~~~~~~~~~~~~~~~~
+ * AbstractTreeViewComponent acts as an abstract class that cannot be
+ * instanciated directly but has a public getInstance method
+ * that can return instances of its subclasses(like a static factory method).
+ *
+ * @author erwin.mombay
+ */
+
+define(function(require) {
+    var $ = require('jquery');
+    var _ = require('underscore');
+    var Backbone = require('backbone');
+
+    var AbstractTreeViewComponent = Backbone.View.extend({
+
+        initialize: function() {
+            //throw Error('TreeViewComponent is non instantiable.');
+        }
+    });
+    return AbstractTreeViewComponent;
+});
+
+

public/js/views/AppView.js

     var Backbone = require('backbone');
 
     var SegmentModel = require('models/SegmentModel');
-    var TreeView = require('views/TreeView');
+    var EDITreeView = require('views/EDITreeView');
 
     var AppView = Backbone.View.extend({
 
             this.mainPanel = new Backbone.View({
                 tagName: 'div',
                 id: 'main-panel',
-                className: 'row span4 tree-view'
+                className: 'row centerize'
             }).render();
             this.itemTree = new EDITreeView({
-                tagName: 'ul',
-                id: 'item-tree-panel',
-                className: 'tree-panel'
-            }).render();
+                tagName: 'div',
+                id: 'item-tree',
+                className: 'tree-panel span4'
+            });
             this.shipTree = new EDITreeView({
                 tagName: 'div',
-                id: 'ship-tree-panel'
+                id: 'ship-tree',
+                className: 'tree-panel span4'
             }).render();
             $(this.itemTree.el).sortable();
+            this.itemTree.segments.fetch({
+                success: this.itemTree.render
+            });
         },
 
         render: function() {

public/js/views/EDITreeView.js

     var _ = require('underscore');
     var Backbone = require('backbone');
     
-    var TreeView = require('views/EDITreeView');
+    var TreeView = require('views/TreeView');
     var SegmentsCollection = require('collections/SegmentsCollection');
+    var TreeViewComposite = require('views/TreeViewComposite');
+    var TreeViewLeaf = require('views/TreeViewLeaf');
 
     var EDITreeView = TreeView.extend({
 
         initialize: function(options) {
-            _.bindAll(this, 'render', 'add', 'addAll');
-            this.segments = this.collection = options.collection || new SegmentsCollection(); 
+            _.bindAll(this, 'render', 'addOne', 'addAll');
+            this.segments = this.collection = options.collection || new SegmentsCollection();
+            this.segments.bind('add', this.addOne); 
         },
 
         render: function() {
+                console.log('doing leaf');
+            $(this.el).empty();
+            this.addAll();
             return this;
         },
 
-        add: function(model) {
+        addOne: function(model) {
             var view = null;
-            new TreeViewComponent();
-            if (model.blueprint.segments) {
-                view = TreeViewComponent.getInstance('composite', model);
+            if (model.blueprint && model.blueprint.segments) {
+                view = new TreeViewComposite({ model: model });
             } else {
-                view = TreeViewComponent.getInstance('leaf', model);
+                view = new TreeViewLeaf({ model: model });
             }
+            view.render();
+            $(this.el).append(view.el);
         },
 
         addAll: function () {
-            this.collection.each(this.add);
+            this.segments.each(this.addOne);
         }
     });
-    return TreeView;
+    return EDITreeView;
 });

public/js/views/TreeViewComponent.js

-/**
- * views/guicore/AbstractTreeViewComponent.js
- * ~~~~~~~~~~~~~~~~~~~
- * TreeViewComponent acts as an abstract class that cannot be
- * instanciated directly but has a public getInstance method
- * that can return instances of its subclasses(like a static factory method).
- *
- * @author erwin.mombay
- */
-
-define(function(require) {
-    var $ = require('jquery');
-    var _ = require('underscore');
-    var Backbone = require('backbone');
-
-    var TreeViewComposite = require('views/TreeViewComposite');
-    var TreeViewLeaf = require('views/TreeViewLeaf');
-    
-    var TreeViewComponent = Backbone.View.extend({
-
-        initialize: function() {
-            throw('TreeViewComponent is non instancable');
-        },
-
-        getInstance: function(type, model) {
-            switch(type) {
-                case 'composite':
-                    return model ? TreeViewComposite({ model: model }) : TreeViewComposite();
-                case 'leaf':
-                    return model ?  TreeViewLeaf({ model: model }) : TreeViewLeaf();
-                default:
-                    return;   
-            }
-        }
-    });
-    return TreeViewComponent;
-});
-
-

public/js/views/TreeViewComposite.js

     var _ = require('underscore');
     var Backbone = require('backbone');
 
-    var TreeViewComposite = Backbone.View.extend({
+    var AbstractTreeViewComponent = require('views/AbstractTreeViewComponent');
+
+    var TreeViewComposite = AbstractTreeViewComponent.extend({
 
         initialize: function() {
             _.bindAll(this, 'render');

public/js/views/TreeViewLeaf.js

     var _ = require('underscore');
     var Backbone = require('backbone');
 
-    var TreeViewLeaf = Backbone.View.extend({
+    var AbstractTreeViewComponent = require('views/AbstractTreeViewComponent');
 
-        initialize: function() {
+    var TreeViewLeaf = AbstractTreeViewComponent.extend({
+        tagName: 'li',
+
+        initialize: function(options) {
             _.bindAll(this, 'render');
+            $(this.el).attr('id', this.model.cid);
         },
 
         render: function() {
+            $(this.el).append(this.model.cid);
             return this;
         }
     });
     });
 };
 
-exports.segments = function(req, res) {
+exports.items = function(req, res) {
     res.contentType('json');
-    res.send(JSON.stringify({
-        'TABLE_2': [
-            { 'HL_LOOP': 
-                { 'HL': 'blah*blah' } 
-            }
-        ]
-    }));
+    res.send(JSON.stringify([{
+        'HL': 'blah*blah'
+    },
+    {
+        'HL': 'blah*blah'
+    },
+    {
+        'HL': 'blah*blah'
+    }]));
 };