Product Listing Combobox Flex (not sorting)


/ Published in: ActionScript 3
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ -->
  3. <s:Application
  4. xmlns:fx="http://ns.adobe.com/mxml/2009"
  5. xmlns:s="library://ns.adobe.com/flex/spark"
  6. xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="onCreationComplete(event)" height="250" width="250" accessibilityEnabled="false"
  7. xmlns:effects="com.topdata.effects.*">
  8. <fx:Script>
  9. <![CDATA[
  10. import mx.effects.easing.*;
  11. ]]>
  12. </fx:Script>
  13.  
  14. <fx:Declarations>
  15. <effects:MySound id="mySoundEffect" target="{submit}" />
  16. </fx:Declarations>
  17.  
  18. <fx:Style>
  19. @namespace s "library://ns.adobe.com/flex/spark";
  20. @namespace mx "library://ns.adobe.com/flex/mx";
  21.  
  22. #submit {
  23. skinClass: ClassReference("ButtonSubmitSkin");
  24. }
  25. #clear {
  26. skinClass: ClassReference("ButtonClearSkin");
  27. }
  28. s|ComboBox {
  29. skinClass: ClassReference("ComboboxSkin");
  30.  
  31. }
  32.  
  33. </fx:Style>
  34. <fx:Script>
  35. <![CDATA[
  36.  
  37. // Loading
  38. import com.greensock.events.LoaderEvent;
  39. import com.greensock.loading.*;
  40. import com.greensock.loading.display.FlexContentDisplay;
  41. import com.rational.serialization.json.*;
  42. import flash.net.*;
  43. import flash.utils.ByteArray;
  44.  
  45. // Display & Events
  46. import flash.display.Sprite;
  47. import flash.events.Event;
  48. import mx.effects.easing.*;
  49. import mx.events.FlexEvent;
  50. import spark.events.IndexChangeEvent;
  51.  
  52. import mx.collections.SortField;
  53. import mx.collections.Sort;
  54.  
  55.  
  56. // Data Handling
  57. import mx.collections.ArrayCollection;
  58. import mx.collections.*;
  59. import mx.controls.*;
  60. import mx.core.FlexGlobals;
  61. import mx.utils.*;
  62.  
  63. private var bannerContainer:FlexContentDisplay;
  64.  
  65. private var queueManu:LoaderMax;
  66. private var queueModels:LoaderMax;
  67. private var queueSeriesUpdate:LoaderMax;
  68.  
  69. private var manuId:int;
  70. private var seriesId:int;
  71.  
  72. private var _manufacturerStartInput:String ="Gerätehersteller wählen ...";
  73. private var _seriesStartInput:String ="Geräteserie wählen ...";
  74. private var _modelsStartInput:String ="Gerätemodell wählen ...";
  75.  
  76. public var resultsListDeviceManufacturer:ArrayCollection;
  77. public var resultsListDeviceSeries:ArrayCollection;
  78. public var resultsListDevices:ArrayCollection
  79.  
  80. /* Declare bindable properties in Application scope. */
  81. [Bindable]
  82. public var cid:String;
  83.  
  84. [Bindable]
  85. public var lang:String;
  86.  
  87. [Bindable]
  88. public var submitURL:String;
  89.  
  90. private var _deviceManufacturerURL:String;
  91. private var _deviceSeriesURL:String;
  92. private var _deviceURL:String;
  93. public var deviceSelected:String;
  94.  
  95. // Needed Paramter Quotes for the URLs
  96. public var deviceManufacturerId:String = "&Lookup=DeviceManufacturerId";
  97. public var deviceSeriesId:String="&Lookup=DeviceSeriesId";
  98. public var deviceId:String="&Lookup=DeviceId";
  99. private var manuParam:String = "&DeviceManufacturerId="
  100. private var seriesParam:String = "&DeviceSeriesId="
  101. public var cidParam:String ="cid=";
  102. public var langParam:String ="&lang=";
  103. public var startParams:String;
  104.  
  105. // Languages
  106.  
  107. private function onCreationComplete(e:Event):void {
  108.  
  109. // Initializing FlashVars
  110.  
  111. cid = FlexGlobals.topLevelApplication.parameters.cid;
  112. lang = FlexGlobals.topLevelApplication.parameters.lang;
  113. submitURL = FlexGlobals.topLevelApplication.parameters.submit;
  114.  
  115. // Start Parameter for DeviceManufacturer URL
  116.  
  117. startParams = cidParam + cid + langParam + lang;
  118.  
  119. // URLS to load
  120. _deviceManufacturerURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceManufacturerId;
  121. _deviceSeriesURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceSeriesId;
  122. _deviceURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceId;
  123.  
  124. // Tells LoaderMax that it will be working in Flex.
  125. LoaderMax.contentDisplayClass = FlexContentDisplay;
  126.  
  127. // This statement allows LoaderMax to parse SWF URLs if you were to
  128. // attempt to use a generic loader component. Handy if you plan
  129. // on loading multiple types of objects dynamically through XML.
  130. LoaderMax.activate([DataLoader]);
  131.  
  132. queueManu = new LoaderMax({name:"mainQueue",onProgress:progressHandlerManu,onComplete:completeHandlerManu,onError:errorHandlerManu});
  133.  
  134. // Append the DataLoader and several other loaders
  135. queueManu.append( new DataLoader(_deviceManufacturerURL, {name:"_dataManu" }) );
  136.  
  137. // Fire Loading
  138. queueManu.load();
  139. }
  140.  
  141. // Progress Handler for Manufacturer
  142. private function progressHandlerManu(event:LoaderEvent):void
  143. {
  144. trace("progress: " + event.target.progress);
  145. }
  146.  
  147. // Complete Handler for Manufacturer
  148. private function completeHandlerManu(event:LoaderEvent):void
  149. {
  150.  
  151. trace("Loading DeviceManufacturers Complete!");
  152.  
  153. // Creating Combobox DeviceManufacturer
  154. var decodedDataManu:* = JSON.decode(LoaderMax.getContent("_dataManu"));
  155. resultsListDeviceManufacturer = new ArrayCollection();
  156. var resultManu:Object;
  157.  
  158. for each (resultManu in decodedDataManu)
  159. {
  160. resultsListDeviceManufacturer.addItem(resultManu);
  161.  
  162. }
  163.  
  164. // Setting Input for DeviceManufacturer Combobox
  165. comboManu.dataProvider = resultsListDeviceManufacturer;
  166. comboManu.textInput.text = _manufacturerStartInput;
  167.  
  168. }
  169.  
  170. private function clearDevices():void {
  171. comboModels.enabled = false;
  172. comboModels.textInput.text = _modelsStartInput;
  173. }
  174.  
  175. // Error Handler for DeviceManufacturer
  176. private function errorHandlerManu(event:LoaderEvent):void
  177. {
  178. trace("error occured with " + event.target + ": " + event.text);
  179. }
  180.  
  181. // onChange Event Handler for DeviceManufacturer Combobox
  182. protected function comboManu_changeHandler(event:IndexChangeEvent):void
  183. {
  184. manuId = event.currentTarget.selectedItem.value;
  185. trace("DeviceManufacturer changed to: "+ manuId);
  186. comboSeries.enabled = true;
  187. comboSeries.textInput.text = _seriesStartInput;
  188. clearDevices();
  189.  
  190. queueSeriesUpdate = new LoaderMax({name:"mainQueue",onProgress:progressHandlerSeries,onComplete:completeHandlerSeries,onError:errorHandlerSeries});
  191. queueSeriesUpdate.append( new DataLoader(_deviceSeriesURL + manuParam + manuId, {name:"_dataSeriesUpdate"}) );
  192. queueSeriesUpdate.load();
  193. }
  194.  
  195. // Progress Handler for DeviceSeries
  196. private function progressHandlerSeries(event:LoaderEvent):void
  197. {
  198. trace("progress: " + event.target.progress);
  199. }
  200.  
  201. private function completeHandlerSeries(event:LoaderEvent):void
  202. {
  203. // Creating Combobox Models
  204. var decodedDataSeries:* = JSON.decode(LoaderMax.getContent("_dataSeriesUpdate"));
  205. var resultsListSeries:ArrayCollection = new ArrayCollection();
  206. var resultSeries:Object;
  207.  
  208. for each (resultSeries in decodedDataSeries)
  209. {
  210. resultsListSeries.addItem(resultSeries);
  211. }
  212. comboSeries.dataProvider = resultsListSeries;
  213. }
  214.  
  215. // Error Handler for DeviceSeries
  216. private function errorHandlerSeries(event:LoaderEvent):void
  217. {
  218. trace("error occured with " + event.target + ": " + event.text);
  219. }
  220.  
  221. // onClick Handler for DeviceSeries
  222. protected function clear_clickHandler(event:MouseEvent):void
  223. {
  224. comboSeries.textInput.text = _seriesStartInput;
  225. comboManu.textInput.text = _manufacturerStartInput;
  226. comboModels.textInput.text = _modelsStartInput;
  227. }
  228.  
  229. // onChange Handler for DeviceSeries
  230. protected function comboSeries_changeHandler(event:IndexChangeEvent):void
  231. {
  232. // TODO Auto-generated method stub
  233. comboModels.enabled = true;
  234. seriesId = event.currentTarget.selectedItem.value;
  235.  
  236. trace("DeviceSeries changed to: "+seriesId);
  237.  
  238. queueModels = new LoaderMax({name:"mainQueue",onProgress:progressHandlerModels,onComplete:completeHandlerModels,onError:errorHandlerModels});
  239. queueModels.append( new DataLoader(_deviceURL + manuParam + manuId + seriesParam + seriesId, {name:"_dataModels"}) );
  240. queueModels.load();
  241.  
  242. }
  243. // Progress Handler for Devices
  244. private function progressHandlerModels(event:LoaderEvent):void
  245. {
  246. trace("progress: " + event.target.progress);
  247. }
  248.  
  249. // Progress Handler for Devices
  250. private function completeHandlerModels(event:LoaderEvent):void
  251. {
  252.  
  253. // Creating Combobox for Devices
  254. var decodedDataModels:* = JSON.decode(LoaderMax.getContent("_dataModels"));
  255. resultsListDevices = new ArrayCollection();
  256. var resultModels:Object;
  257.  
  258. for each (resultModels in decodedDataModels)
  259. {
  260. resultsListDevices.addItem(resultModels);
  261. }
  262.  
  263. // Setting Input for Devices Combobox
  264. comboModels.dataProvider = resultsListDevices;
  265. comboModels.textInput.text = _modelsStartInput;
  266.  
  267. /* Create the SortField object for the "data" field in the ArrayCollection object, and make sure we do a numeric sort. */
  268. var dataSortField:SortField = new SortField();
  269. dataSortField.name = "key";
  270. dataSortField.numeric;
  271.  
  272. /* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
  273. var numericDataSort:Sort = new Sort();
  274. numericDataSort.fields = [dataSortField];
  275.  
  276. /* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */
  277. resultsListDevices.sort = numericDataSort;
  278. resultsListDevices.refresh();
  279. }
  280.  
  281. // onChange Handler for Devices
  282. protected function comboModels_changeHandler(event:IndexChangeEvent):void
  283. {
  284. deviceSelected = event.currentTarget.selectedItem.value;
  285. submit.enabled = true;
  286. }
  287.  
  288. // Error Handler for Devices
  289. private function errorHandlerModels(event:LoaderEvent):void
  290. {
  291. trace("error occured with " + event.target + ": " + event.text);
  292. }
  293.  
  294. // onClick Handler for Devices (if selected)
  295. protected function submit_clickHandler(event:MouseEvent):void
  296. {
  297. // TODO Auto-generated method stub
  298. trace("Redirecting to Shop for DeviceId: "+deviceSelected);
  299. getURL(submitURL + deviceSelected);
  300. }
  301.  
  302. // Getter Function for Submit URL
  303. public static function getURL(url:String, window:String = null):void
  304. {
  305. var req:URLRequest = new URLRequest(url);
  306. trace("getURL", url);
  307. try
  308. {
  309. navigateToURL(req, window);
  310. }
  311. catch (e:Error)
  312. {
  313. trace("Navigate to the Shop failed", e.message);
  314. }
  315. }
  316. ]]>
  317. </fx:Script>
  318. <fx:Declarations>
  319. </fx:Declarations>
  320. <s:Group id="swfDisplayArea"
  321. useHandCursor="false"
  322. buttonMode="true"
  323. mouseChildren="true"
  324. width="250"
  325. height="250"
  326. y="0"
  327. x="0">
  328.  
  329. <s:BorderContainer width="250" height="250">
  330. <s:Rect width="100%" height="100%">
  331. <s:fill>
  332. <s:BitmapFill source="@Embed('assets/img/background.jpg')" alpha="1"/>
  333. </s:fill>
  334. </s:Rect>
  335. <s:Label x="10" y="14" text="Ihren Gerätehersteller wählen ...&#xd;" fontFamily="Helvetica" fontSize="14" fontStyle="normal" color="#F4F4F4" fontLookup="auto" kerning="auto" backgroundColor="#232323" backgroundAlpha="0.3" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5"/>
  336. <s:Label x="10" y="71" text="Geräte Serie wählen ..." fontFamily="Helvetica" fontSize="14" fontStyle="normal" color="#F4F4F4" fontLookup="auto" kerning="auto" backgroundColor="#232323" backgroundAlpha="0.3" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5"/>
  337. <s:Label x="10" y="129" text="Geräte Modell wählen ..." fontFamily="Helvetica" fontSize="14" fontStyle="normal" color="#F4F4F4" fontLookup="auto" kerning="auto" backgroundColor="#232323" backgroundAlpha="0.3" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5"/>
  338. </s:BorderContainer>
  339.  
  340. <s:ComboBox x="11" height="25" width="230" y="42" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboManu" toolTip="Bitte Hersteller wählen!" focusEnabled="false" hasFocusableChildren="false" labelField="key" change="comboManu_changeHandler(event)" cornerRadius="0" paddingLeft="2" paddingRight="2" paddingTop="2" paddingBottom="2" color="#606060"/>
  341. <s:ComboBox x="11" height="25" width="230" y="100" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboSeries" toolTip="Ihre Geräteserie auswählen" focusEnabled="false" hasFocusableChildren="false" labelField="key" enabled="false" change="comboSeries_changeHandler(event)" cornerRadius="0" paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2" color="#606060"/>
  342. <s:ComboBox x="11" height="25" width="230" y="156" fontFamily="Arial" fontSize="13" fontStyle="normal" textAlign="left" id="comboModels" toolTip="Zugehöriges Modell wählen" focusEnabled="false" hasFocusableChildren="false" labelField="key" enabled="false" cornerRadius="0" change="comboModels_changeHandler(event)" paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2" color="#606060"/>
  343. <s:Button x="143" y="190" id="submit" enabled="false" rollOver="mySoundEffect.end();mySoundEffect.play();" click="submit_clickHandler(event)"/>
  344. <s:Button x="47" y="190" id="clear" rollOver="mySoundEffect.end();mySoundEffect.play();"/>
  345. </s:Group>
  346. </s:Application>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.