Created & Styled FaceView custom view

apps/faces/resources/main_page.js

@@ -37,9 +37,11 @@ Faces.mainPage = SC.Page.design({
         layout: {top: 10, left: 10, right: 10, bottom: 10},
         rowHeight: 200,
         columnWidth: 200,
+        contentValueKey: 'name',        
+        classNames: ['face'],
         contentBinding: 'Faces.peopleController.arrangedObjects',
         selectionBinding: 'Faces.peopleController.selection',
-        contentValueKey: 'name'
+        exampleView: Faces.FaceView
       })
     })
 

apps/faces/resources/style.css

@@ -0,0 +1,58 @@
+.stretch {
+  width: 100%;
+  height: 100%;
+}
+
+div.face {
+  float: left;
+  margin-right: 5px;
+  cursor: pointer;
+  background: #fff static_url('brick.png') no-repeat;
+  z-index: 50;
+  padding: 4px;
+  color: #fff;
+  font: normal, Arial, Helvetica, sans-serif;
+  font-size: 13px;
+}
+
+div.face-name {
+  font-weight: bold;
+  margin: 0;
+  padding: 5px 10px 0 10px;
+  width: 175px;
+  height: 22px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: left;    
+	font-size: 15px;
+	line-height: 22px;
+	color: #fff;
+}
+
+div.face-company {
+  text-align: right;
+  color: #CCC;
+  font-weight: normal;
+  font-size: 12px;
+	width: 175px;
+	padding: 0 10px;
+}
+
+div.face-bottom-overlay {
+	background: transparent static_url('face_overlay_background.png');
+	height: 50px;
+	left: -4px;
+	position: relative;
+	top: 146px;
+	width: 199px;
+	z-index: -1;
+}
+
+div.face-background {
+  width: 195px;
+  height: 195px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: -10;
+}

apps/faces/tests/views/face.js

@@ -0,0 +1,15 @@
+// ==========================================================================
+// Project:   Faces.FaceView Unit Test
+// Copyright: ©2010 My Company, Inc.
+// ==========================================================================
+/*globals Faces module test ok equals same stop start */
+
+module("Faces.FaceView");
+
+// TODO: Replace with real unit test for Faces.FaceView
+test("test description", function() {
+  var expected = "test";
+  var result   = "test";
+  equals(result, expected, "test should equal test");
+});
+

apps/faces/views/face.js

@@ -0,0 +1,37 @@
+// ==========================================================================
+// Project:   Faces.FaceView
+// Copyright: ©2010 My Company, Inc.
+// ==========================================================================
+/*globals Faces */
+
+/** @class
+
+  (Document Your View Here)
+
+  @extends SC.View
+*/
+Faces.FaceView = SC.View.extend(
+/** @scope Faces.FaceView.prototype */ {
+
+  contentDisplayProperties: 'name company website picture'.w(),
+
+  render: function(context, firstTime) {
+    var content = this.get('content');
+    var name = content.get('name');
+    var company = content.get('company');
+    var website = content.get('website');
+    var picture = content.get('picture');
+
+    context = context.begin('div').addClass('face-bottom-overlay').push('');
+		context = context.begin('div').addClass('face-name').push(name).end();
+		context = context.begin('div').addClass('face-company').push(company).end();
+	  context = context.end();
+
+	  if (picture) {
+		  context = context.begin('div').addClass('face-background').push('<img src="' + picture + '" class="stretch" alt="" />').end();
+	  } 
+
+    sc_super();
+  }
+
+});