/ Published in: ActionScript 3
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="onCreationComplete(event)" height="250" width="250" accessibilityEnabled="false" xmlns:effects="com.topdata.effects.*"> <fx:Script> <![CDATA[ import mx.effects.easing.*; ]]> </fx:Script> <fx:Declarations> <effects:MySound id="mySoundEffect" target="{submit}" /> </fx:Declarations> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; #submit { skinClass: ClassReference("ButtonSubmitSkin"); } #clear { skinClass: ClassReference("ButtonClearSkin"); } s|ComboBox { skinClass: ClassReference("ComboboxSkin"); } </fx:Style> <fx:Script> <![CDATA[ // Loading import com.greensock.events.LoaderEvent; import com.greensock.loading.*; import com.greensock.loading.display.FlexContentDisplay; import com.rational.serialization.json.*; import flash.net.*; import flash.utils.ByteArray; // Display & Events import flash.display.Sprite; import flash.events.Event; import mx.effects.easing.*; import mx.events.FlexEvent; import spark.events.IndexChangeEvent; import mx.collections.SortField; import mx.collections.Sort; // Data Handling import mx.collections.ArrayCollection; import mx.collections.*; import mx.controls.*; import mx.core.FlexGlobals; import mx.utils.*; private var bannerContainer:FlexContentDisplay; private var queueManu:LoaderMax; private var queueModels:LoaderMax; private var queueSeriesUpdate:LoaderMax; private var manuId:int; private var seriesId:int; private var _manufacturerStartInput:String ="Gerätehersteller wählen ..."; private var _seriesStartInput:String ="Geräteserie wählen ..."; private var _modelsStartInput:String ="Gerätemodell wählen ..."; public var resultsListDeviceManufacturer:ArrayCollection; public var resultsListDeviceSeries:ArrayCollection; public var resultsListDevices:ArrayCollection /* Declare bindable properties in Application scope. */ [Bindable] public var cid:String; [Bindable] public var lang:String; [Bindable] public var submitURL:String; private var _deviceManufacturerURL:String; private var _deviceSeriesURL:String; private var _deviceURL:String; public var deviceSelected:String; // Needed Paramter Quotes for the URLs public var deviceManufacturerId:String = "&Lookup=DeviceManufacturerId"; public var deviceSeriesId:String="&Lookup=DeviceSeriesId"; public var deviceId:String="&Lookup=DeviceId"; private var manuParam:String = "&DeviceManufacturerId=" private var seriesParam:String = "&DeviceSeriesId=" public var cidParam:String ="cid="; public var langParam:String ="&lang="; public var startParams:String; // Languages private function onCreationComplete(e:Event):void { // Initializing FlashVars cid = FlexGlobals.topLevelApplication.parameters.cid; lang = FlexGlobals.topLevelApplication.parameters.lang; submitURL = FlexGlobals.topLevelApplication.parameters.submit; // Start Parameter for DeviceManufacturer URL startParams = cidParam + cid + langParam + lang; // URLS to load _deviceManufacturerURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceManufacturerId; _deviceSeriesURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceSeriesId; _deviceURL = "http://dev.ws.topdata.de/data/tdifdata.php?"+startParams+deviceId; // Tells LoaderMax that it will be working in Flex. LoaderMax.contentDisplayClass = FlexContentDisplay; // This statement allows LoaderMax to parse SWF URLs if you were to // attempt to use a generic loader component. Handy if you plan // on loading multiple types of objects dynamically through XML. LoaderMax.activate([DataLoader]); queueManu = new LoaderMax({name:"mainQueue",onProgress:progressHandlerManu,onComplete:completeHandlerManu,onError:errorHandlerManu}); // Append the DataLoader and several other loaders queueManu.append( new DataLoader(_deviceManufacturerURL, {name:"_dataManu" }) ); // Fire Loading queueManu.load(); } // Progress Handler for Manufacturer private function progressHandlerManu(event:LoaderEvent):void { trace("progress: " + event.target.progress); } // Complete Handler for Manufacturer private function completeHandlerManu(event:LoaderEvent):void { trace("Loading DeviceManufacturers Complete!"); // Creating Combobox DeviceManufacturer var decodedDataManu:* = JSON.decode(LoaderMax.getContent("_dataManu")); resultsListDeviceManufacturer = new ArrayCollection(); var resultManu:Object; for each (resultManu in decodedDataManu) { resultsListDeviceManufacturer.addItem(resultManu); } // Setting Input for DeviceManufacturer Combobox comboManu.dataProvider = resultsListDeviceManufacturer; comboManu.textInput.text = _manufacturerStartInput; } private function clearDevices():void { comboModels.enabled = false; comboModels.textInput.text = _modelsStartInput; } // Error Handler for DeviceManufacturer private function errorHandlerManu(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } // onChange Event Handler for DeviceManufacturer Combobox protected function comboManu_changeHandler(event:IndexChangeEvent):void { manuId = event.currentTarget.selectedItem.value; trace("DeviceManufacturer changed to: "+ manuId); comboSeries.enabled = true; comboSeries.textInput.text = _seriesStartInput; clearDevices(); queueSeriesUpdate = new LoaderMax({name:"mainQueue",onProgress:progressHandlerSeries,onComplete:completeHandlerSeries,onError:errorHandlerSeries}); queueSeriesUpdate.append( new DataLoader(_deviceSeriesURL + manuParam + manuId, {name:"_dataSeriesUpdate"}) ); queueSeriesUpdate.load(); } // Progress Handler for DeviceSeries private function progressHandlerSeries(event:LoaderEvent):void { trace("progress: " + event.target.progress); } private function completeHandlerSeries(event:LoaderEvent):void { // Creating Combobox Models var decodedDataSeries:* = JSON.decode(LoaderMax.getContent("_dataSeriesUpdate")); var resultsListSeries:ArrayCollection = new ArrayCollection(); var resultSeries:Object; for each (resultSeries in decodedDataSeries) { resultsListSeries.addItem(resultSeries); } comboSeries.dataProvider = resultsListSeries; } // Error Handler for DeviceSeries private function errorHandlerSeries(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } // onClick Handler for DeviceSeries protected function clear_clickHandler(event:MouseEvent):void { comboSeries.textInput.text = _seriesStartInput; comboManu.textInput.text = _manufacturerStartInput; comboModels.textInput.text = _modelsStartInput; } // onChange Handler for DeviceSeries protected function comboSeries_changeHandler(event:IndexChangeEvent):void { // TODO Auto-generated method stub comboModels.enabled = true; seriesId = event.currentTarget.selectedItem.value; trace("DeviceSeries changed to: "+seriesId); queueModels = new LoaderMax({name:"mainQueue",onProgress:progressHandlerModels,onComplete:completeHandlerModels,onError:errorHandlerModels}); queueModels.append( new DataLoader(_deviceURL + manuParam + manuId + seriesParam + seriesId, {name:"_dataModels"}) ); queueModels.load(); } // Progress Handler for Devices private function progressHandlerModels(event:LoaderEvent):void { trace("progress: " + event.target.progress); } // Progress Handler for Devices private function completeHandlerModels(event:LoaderEvent):void { // Creating Combobox for Devices var decodedDataModels:* = JSON.decode(LoaderMax.getContent("_dataModels")); resultsListDevices = new ArrayCollection(); var resultModels:Object; for each (resultModels in decodedDataModels) { resultsListDevices.addItem(resultModels); } // Setting Input for Devices Combobox comboModels.dataProvider = resultsListDevices; comboModels.textInput.text = _modelsStartInput; /* Create the SortField object for the "data" field in the ArrayCollection object, and make sure we do a numeric sort. */ var dataSortField:SortField = new SortField(); dataSortField.name = "key"; dataSortField.numeric; /* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */ var numericDataSort:Sort = new Sort(); numericDataSort.fields = [dataSortField]; /* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */ resultsListDevices.sort = numericDataSort; resultsListDevices.refresh(); } // onChange Handler for Devices protected function comboModels_changeHandler(event:IndexChangeEvent):void { deviceSelected = event.currentTarget.selectedItem.value; submit.enabled = true; } // Error Handler for Devices private function errorHandlerModels(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } // onClick Handler for Devices (if selected) protected function submit_clickHandler(event:MouseEvent):void { // TODO Auto-generated method stub trace("Redirecting to Shop for DeviceId: "+deviceSelected); getURL(submitURL + deviceSelected); } // Getter Function for Submit URL public static function getURL(url:String, window:String = null):void { var req:URLRequest = new URLRequest(url); trace("getURL", url); try { navigateToURL(req, window); } catch (e:Error) { trace("Navigate to the Shop failed", e.message); } } ]]> </fx:Script> <fx:Declarations> </fx:Declarations> <s:Group id="swfDisplayArea" useHandCursor="false" buttonMode="true" mouseChildren="true" width="250" height="250" y="0" x="0"> <s:BorderContainer width="250" height="250"> <s:Rect width="100%" height="100%"> <s:fill> <s:BitmapFill source="@Embed('assets/img/background.jpg')" alpha="1"/> </s:fill> </s:Rect> <s:Label x="10" y="14" text="Ihren Gerätehersteller 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"/> <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"/> <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"/> </s:BorderContainer> <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"/> <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"/> <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"/> <s:Button x="143" y="190" id="submit" enabled="false" rollOver="mySoundEffect.end();mySoundEffect.play();" click="submit_clickHandler(event)"/> <s:Button x="47" y="190" id="clear" rollOver="mySoundEffect.end();mySoundEffect.play();"/> </s:Group> </s:Application>