Adding stateManger, template and images.

joachimhs · Feb 5, 2012 · 9bdda10 · 9bdda10
1 parent e44d16f
commit 9bdda10
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 1 deletion.
diff --git a/src/main/webapp/app/app.js b/src/main/webapp/app/app.js
@@ -2,4 +2,6 @@ EME = Ember.Application.create({
     ready: function() {
         this._super();
     }
-});
+});
+
+EME.store = DS.Store.create();
diff --git a/src/main/webapp/app/fixtureData.js b/src/main/webapp/app/fixtureData.js
@@ -0,0 +1,12 @@
+EME.generateImages = function() {
+    EME.store.createRecord(EME.Photo,  { id: "1", imageTitle: 'Bird', imageUrl: 'img/bird.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "2", imageTitle: 'Dragonfly', imageUrl: 'img/dragonfly.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "3", imageTitle: 'Fly', imageUrl: 'img/fly.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "4", imageTitle: 'Frog', imageUrl: 'img/frog.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "5", imageTitle: 'Lizard', imageUrl: 'img/lizard.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "6", imageTitle: 'Mountain 1', imageUrl: 'img/mountain.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "7", imageTitle: 'Mountain 2', imageUrl: 'img/mountain2.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "8", imageTitle: 'Parnorama', imageUrl: 'img/panorama.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "9", imageTitle: 'Sheep', imageUrl: 'img/sheep.jpg'});
+    EME.store.createRecord(EME.Photo,  { id: "10", imageTitle: 'Waterfall', imageUrl: 'img/waterfall.jpg'});
+}
diff --git a/src/main/webapp/app/main.js b/src/main/webapp/app/main.js
@@ -0,0 +1,15 @@
+EME.Photo = DS.Model.extend({
+    primaryKey: 'id',
+    id: DS.attr('string'),
+    photoTitle: DS.attr('string'),
+    photoUrl: DS.attr('string')
+});
+
+EME.PhotoListController = Em.ArrayProxy.create({
+    content: [],
+    selected: null
+});
+
+EME.SelectedPhotoController = Em.Object.create({
+    contentBinding: 'EME.PhotoListController.selected'
+});
diff --git a/src/main/webapp/app/stateManager.js b/src/main/webapp/app/stateManager.js
@@ -0,0 +1,24 @@
+setTimeout(function() {
+    EME.generateImages();
+
+    EME.stateManager = Ember.StateManager.create({
+        rootElement: '#mainArea',
+        initialState: 'showPhotoView',
+
+        showPhotoView: Ember.ViewState.create({
+            enter: function(stateManager) {
+                this._super(stateManager);
+                EME.PhotoListController.set('content', EME.store.findAll(EME.Photo));
+            },
+
+            view: Em.ContainerView.create({
+                childViews: ['photoListView'],
+
+                photoListView: Em.View.extend({
+
+                })
+            })
+        })
+    });
+
+}, 50);
diff --git a/src/main/webapp/img/bird.jpg b/src/main/webapp/img/bird.jpg
diff --git a/src/main/webapp/img/dragonfly.jpg b/src/main/webapp/img/dragonfly.jpg
diff --git a/src/main/webapp/img/fly.jpg b/src/main/webapp/img/fly.jpg
diff --git a/src/main/webapp/img/frog.jpg b/src/main/webapp/img/frog.jpg
diff --git a/src/main/webapp/img/lizard.jpg b/src/main/webapp/img/lizard.jpg
diff --git a/src/main/webapp/img/mountain.jpg b/src/main/webapp/img/mountain.jpg
diff --git a/src/main/webapp/img/mountain2.jpg b/src/main/webapp/img/mountain2.jpg
diff --git a/src/main/webapp/img/panorama.jpg b/src/main/webapp/img/panorama.jpg
diff --git a/src/main/webapp/img/sheep.jpg b/src/main/webapp/img/sheep.jpg
diff --git a/src/main/webapp/img/waterfall.jpg b/src/main/webapp/img/waterfall.jpg
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -19,6 +19,13 @@
     <script src="app/fixtureData.js" type="text/javascript" charset="utf-8"></script>
     <script src="app/stateManager.js" type="text/javascript" charset="utf-8"></script>
 
+    <script type="text/x-handlebars" data-template-name="photo-view-list">
+        {{#each content}}
+            <div class="thumbnailItem">
+                <img {{bindAttr src="imageUrl"}} style="width: 100%; height: 100%;"/>
+            </div>
+        {{/each}}
+    </script>
 </head>
 <body bgcolor="#555154">
     <div id="mainArea">