Kulerdemo; height=

Diese Demonstration zeigt, wie man mit Flex die Feeds von kuler einlesen und darstellen kann. Über die Buttons oben kann man einige Standardfeeds auswählen (most popular, etc.). Um die Suchfunktion kurz aufzuzeigen, gibt es daneben ein Suchfeld. Dieses ist so konfiguriert, dass es nur in den Tags nach dem eingegebenen Suchbegriff sucht. Grundsätzlich ermöglicht es die API, in allen Kategorieren zu suchen (Name, Farbwerte, ...)

Hier der Quellcode der Anwendung, die mit dem Flex 3 SDK und ;em>Textmate erstellt wurde:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2.     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         width=;1000"
  5.         height="700"
  6.         backgroundColor="0x000000"
  7.         creationComplete="loadFeed('http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating');"
  8.         >
  9.  
  10.         <mx:HTTPService id="myFeed"
  11.             showBusyCursor="true" resultFormat="e4x" result="onResult( event );" />
  12.  
  13.         <mx:Script>
  14.             <![CDATA[
  15.  
  16.                 import mx.rpc.events.ResultEvent;
  17.                 import mx.collections.ArrayCollection;     
  18.  
  19.                 [Bindable]
  20.             public var myCollection:ArrayCollection = new ArrayCollection();         
  21.  
  22.  
  23.                 // Namespace definieren
  24.                 namespace kulerNS = "http://kuler.adobe.com/kuler/API/rss/";
  25.  
  26.                 private function loadFeed(feedurl:String):void {
  27.                  // Lade RSS Feed
  28.                     myFeed.url=feedurl;
  29.                  myFeed.send(); 
  30.               }
  31.  
  32.                 private function onResult( event:ResultEvent ):void {
  33.  
  34.                  var rss:XML = event.result as XML;
  35.                     var i:int;
  36.  
  37.                     myCollection = new ArrayCollection();
  38.  
  39.                     for (i=0; i <rss..kulerNS::themeID.length(); i++) {
  40.                         myCollection.addItem(
  41.                             {themeID: rss..kulerNS::themeID[i],
  42.                              themeTitle: rss..kulerNS::themeTitle[i],
  43.                              themeImage: rss..kulerNS::themeImage[i],
  44.                              swatchHexColor0: rss..kulerNS::swatchHexColor[i*5+0],   
  45.                              swatchHexColor1: rss..kulerNS::swatchHexColor[i*5+1],
  46.                              swatchHexColor2: rss..kulerNS::swatchHexColor[i*5+2],   
  47.                              swatchHexColor3: rss..kulerNS::swatchHexColor[i*5+3],
  48.                              swatchHexColor4: rss..kulerNS::swatchHexColor[i*5+4]                                                                                                                     
  49.                             });    
  50.                     }
  51.  
  52.               }
  53.  
  54.  
  55.             ]]>
  56.         </mx:Script>
  57.  
  58.  
  59.  
  60.  
  61.         <!-- ::::::::::::::::::::::::: Buttons ::::::::::::::::::::::::: -->   
  62.  
  63.  
  64.         <!-- ::::::::: kuler  ::::::: -->   
  65.         <mx:Image source="kuler-logo.gif" />   
  66.  
  67.         <mx:HBox id="hBoxButtons1" horizontalAlign="left">
  68.                 <mx:Label color="0xFFFFFF" text="Feed/Source:" />
  69.                 <mx:Button label="Highest-rated" click="loadFeed('http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating');" />
  70.                 <mx:Button label="Most popular" click="loadFeed('http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=popular');" />   
  71.                 <mx:Button label="Most recent" click="loadFeed('http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=recent');" />    
  72.                 <mx:TextInput id="myTextInput" enter="loadFeed('http://kuler.adobe.com/kuler/API/rss/search.cfm?searchQuery=tag:' + myTextInput.text );"/>
  73.                 <mx:Button label="Search Tag" click="loadFeed('http://kuler.adobe.com/kuler/API/rss/search.cfm?searchQuery=tag:' + myTextInput.text );" toolTip="Specify a simple term. The search looks for that term in tags."/>       
  74.         </mx:HBox>
  75.  
  76.  
  77.  
  78.  
  79.         <!-- ::::::::::::::::::::::::: Datagrid ::::::::::::::::::::::::: -->
  80.  
  81.         <mx:DataGrid id="myDataGrid" dataProvider="{myCollection}" width="100%" height="200"
  82.         >
  83.             <mx:columns>
  84.  
  85.                 <mx:DataGridColumn dataField="themeID" headerText="ID" width="30"/>
  86.                 <mx:DataGridColumn  dataField="themeTitle" headerText="Title" width="60"/>
  87.                 <mx:DataGridColumn  dataField="swatchHexColor0" headerText="hex0" width="30"/>
  88.                 <mx:DataGridColumn  dataField="swatchHexColor1" headerText="hex1" width="30"/>
  89.                 <mx:DataGridColumn  dataField="swatchHexColor2" headerText="hex2" width="30"/>
  90.                 <mx:DataGridColumn  dataField="swatchHexColor3" headerText="hex3" width="30"/>
  91.                 <mx:DataGridColumn  dataField="swatchHexColor4" headerText="hex4" width="30"/>
  92.                 <mx:DataGridColumn  dataField="themeImage" headerText="Preview" width="100">
  93.                     <mx:itemRenderer>
  94.                    <mx:Component>
  95.                                 <mx:Image source="{data.themeImage}" />
  96.                             </mx:Component> 
  97.                     </mx:itemRenderer>                       
  98.                 </mx:DataGridColumn>
  99.  
  100.             </mx:columns>
  101.         </mx:DataGrid> 
  102.  
  103.         <!-- ::::::::::::::::::::::::: Display ::::::::::::::::::::::::: -->
  104.  
  105.     <mx:HBox id="hbBox" width="100%">
  106.         <mx:Box id="box0" width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor0)}" />
  107.         <mx:Box id="box1" width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor1)}" />
  108.         <mx:Box id="box2" width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor2)}" />
  109.         <mx:Box id="box3" width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor3)}" />
  110.         <mx:Box id="box4" width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor4)}" />
  111.     </mx:HBox>
  112.  
  113.  
  114.     </mx:Application>

Link: kuler API Demonstration