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.     :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.         "
  11.             showBusyCursor="true" resultFormat="e4x" result="onResult( event );" />
  12.  
  13.        
  14.            
  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
  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.        
  57.  
  58.  
  59.  
  60.  
  61.            
  62.  
  63.  
  64.            
  65.         " />   
  66.  
  67.         " horizontalAlign="left">
  68.                 " text="Feed/Source:" />
  69.                 " click="loadFeed('http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating');" />
  70.                 " click="loadFeed('http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=popular');" />   
  71.                 " click="loadFeed('http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=recent');" />    
  72.                 " enter="loadFeed('http://kuler.adobe.com/kuler/API/rss/search.cfm?searchQuery=tag:' + myTextInput.text );"/>
  73.                 " 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.        
  75.  
  76.  
  77.  
  78.  
  79.         
  80.  
  81.         " dataProvider="{myCollection}" width="100%" height="200"
  82.         >
  83.             
  84.  
  85.                 " headerText="ID" width="30"/>
  86.                 " headerText="Title" width="60"/>
  87.                 " headerText="hex0" width="30"/>
  88.                 " headerText="hex1" width="30"/>
  89.                 " headerText="hex2" width="30"/>
  90.                 " headerText="hex3" width="30"/>
  91.                 " headerText="hex4" width="30"/>
  92.                 " headerText="Preview" width="100">
  93.                     
  94.                    
  95.                                 {data.themeImage}" />
  96.                              
  97.                                            
  98.                 
  99.  
  100.             
  101.          
  102.  
  103.         
  104.  
  105.     " width="100%">
  106.         " width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor0)}" />
  107.         " width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor1)}" />
  108.         " width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor2)}" />
  109.         " width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor3)}" />
  110.         " width="20%" height="300" backgroundColor="{int('0x' + myDataGrid.selectedItem.swatchHexColor4)}" />
  111.    
  112.  
  113.  
  114.    

Link: kuler API Demonstration