mostly busted custom version of 03d4

custom-03d4-tilelist/TileListExample.mxml

@@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <loc:TileListApp xmlns:mx="http://www.adobe.com/2006/mxml"
-    xmlns:loc="*"
-    backgroundColor="#FFFFFF"
-    backgroundAlpha="0"
-    horizontalAlign="left"
-    verticalGap="15" horizontalGap="15">
+    styleName="basic-app" xmlns:loc="*">
+    <mx:Style source="tilelist.css" />
 
     <!-- photo service -->
      <mx:HTTPService id="photoService"
@@ -13,35 +10,29 @@
 
     <!-- search -->
     <mx:Form>
-        <mx:FormItem label="Search Term"
-            direction="horizontal">
+        <mx:FormItem label="Search Term" direction="horizontal">
             <mx:TextInput id="searchTerms" />
-            <mx:Button label="Search"
-                click="requestPhotos()" />
+            <mx:Button label="Search" click="requestPhotos()" />
         </mx:FormItem>
     </mx:Form>
 
     <!-- result, data is passed to the itemRenderer by Flex
          through the data property -->
     <mx:TileList id="mylist"
+        styleName="basic-style-list"
         labelField="thumbnail"
         dataProvider="{photoFeed}"
-        width="600" height="200"
-        paddingTop="25" left="5"
         itemClick="showMessage(event)">
         <mx:itemRenderer>
             <mx:Component>
-                <mx:VBox width="125" height="125"
-                    paddingRight="5" paddingLeft="5"
-                    horizontalAlign="center">
-                    <mx:Image
-                        height="75" width="75"
+                <mx:VBox styleName="basic-vbox">
+                    <mx:Image styleName="basic-image"
                         source="{data.thumbnail.url}"/>
                 </mx:VBox>
             </mx:Component>
         </mx:itemRenderer>
     </mx:TileList>
 
-    <mx:Text id="textMessage" paddingTop="20" />
+    <mx:Text id="textMessage" styleName="basic-text" />
 
 </loc:TileListApp>

custom-03d4-tilelist/tilelist.css

@@ -0,0 +1,39 @@
+.basic-app {
+    backgroundColor: #ffffff;
+    backgroundAlpha: 0;
+    horizontalAlign: left;
+    verticalGap: 15;
+    horizontalGap: 15;
+}
+
+.basic-style-list {
+    width: 600;
+    height: 200;
+    paddingTop: 25;
+    left: 5;
+}
+
+
+.basic-form-item {
+    direction: horizontal;
+}
+
+
+.basic-vbox {
+    width: 125;
+    height: 125;
+    paddingRight: 5;
+    paddingLeft: 5;
+    horizontalAlign: center;
+}
+
+
+.basic-image {
+    height: 75;
+    width: 75;
+}
+
+
+.basic-text {
+    paddingTop: 20;
+}

targets.mk

@@ -147,3 +147,7 @@ custom-03d3-lists/ListControl.swf: custom-03d3-lists/ListControl.mxml custom-03d
 	$(MXMLC) custom-03d3-lists/ListControl.mxml -warnings -l+=custom-03d3-lists -output custom-03d3-lists/ListControl.swf
 
 
+custom-03d4-tilelist/TileListExample.swf: custom-03d4-tilelist/TileListExample.mxml custom-03d4-tilelist/tilelist.css custom-03d4-tilelist/TileListApp.as
+	$(MXMLC) custom-03d4-tilelist/TileListExample.mxml -warnings -l+=custom-03d4-tilelist -output custom-03d4-tilelist/TileListExample.swf
+
+