Hi All, I need to create a slider control which should be controlled externally. I have the folowing code where i hardcoded all the values like the panel widths, slide range and combo box values. Please play around with the component and let me know how to componentize the same.
I need the following to be controlled externally: The number of griditems used depends upon the external value given. The panel's width needs to be determined by the combo box selection. The combo box values will be controlled externally. Please help me out in componentizing the below component. Any help would be greatly appreciated. Below is the code for the SliderControl Component. ------------------------------------------------------------- SliderControl.mxml ------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" height="134" width="374"> <mx:Panel x="10" y="10" width="354" height="112" layout="absolute" borderStyle="none"> <mx:Grid x="10" y="30" width="303"> <mx:GridRow width="100%" height="100%" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"> <mx:GridItem id="GridItem1" width="100%" height="100%" borderStyle="inset" borderColor="#808080"> </mx:GridItem> <mx:GridItem id="GridItem2" width="100%" height="100%" borderStyle="inset" borderColor="#808080"> </mx:GridItem> <mx:GridItem id="GridItem3" width="100%" height="100%" borderStyle="inset" borderColor="#808080"> </mx:GridItem> <mx:GridItem id="GridItem4" width="100%" height="100%" borderStyle="inset" borderColor="#808080"> </mx:GridItem> <mx:GridItem id="GridItem5" width="100%" height="100%" borderStyle="inset" borderColor="#808080"> </mx:GridItem> <mx:GridItem id="GridItem6" width="100%" height="100%" borderStyle="inset" borderColor="#808080"> </mx:GridItem> </mx:GridRow> </mx:Grid> <mx:Label x="10" y="35" text="0" height="18"/> <mx:Label x="50" y="35" text="50" height="18"/> <mx:Label x="97" y="35" text="100" height="18"/> <mx:Label x="148.5" y="35" text="150" height="18"/> <mx:Label x="201.5" y="35" text="200" height="18"/> <mx:Label x="253.5" y="35" text="250" height="18"/> <mx:Label x="300.5" y="35" text="300" height="18"/> <mx:ComboBox x="243" y="0" width="70" dataProvider="{DropDownValues}" close="selectedItem=ComboBox (event.target).selectedItem;setPanel();"></mx:ComboBox> <mx:Label x="163" y="2" text="Slider Width"/> <mx:Panel id="pnlSlider" mouseDown="MovePanel (event)" width="48" height="10" layout="absolute" backgroundColor="#8080ff" x="10" y="27" borderStyle="none" alpha="0.5"> </mx:Panel> <mx:Label x="10" y="2" text="Slider position" width="85"/> <mx:Label x="103" y="2" id="lblSliderPos" text="0"/> </mx:Panel> <mx:Script> <![CDATA[ import mx.controls.Alert; [Bindable] public var DropDownValues: Array = [ {label:"50", data:1}, {label:"100", data:2}, {label:"150", data:3} ]; [Bindable] public var selectedItem:Object; public var xDiff:Number; public var iPnlLen:Number=1; private function setPanel():void { iPnlLen = selectedItem.data; pnlSlider.width = 48 * selectedItem.data + (3* (selectedItem.data-1)); } private function stopDragging(event:MouseEvent):void { this.systemManager.removeEventListener (MouseEvent.MOUSE_MOVE, movePanelObj); this.systemManager.removeEventListener(MouseEvent.MOUSE_UP, stopDragging); if(pnlSlider.x < GridItem2.x) { pnlSlider.x = 10; lblSliderPos.text = "0"; } else if(pnlSlider.x >= GridItem2.x && pnlSlider.x < GridItem3.x) { pnlSlider.x = GridItem2.x + 6; lblSliderPos.text = "50"; } else if(pnlSlider.x >= GridItem3.x && pnlSlider.x < GridItem4.x) { pnlSlider.x = GridItem3.x + 8; lblSliderPos.text = "100"; } else if(pnlSlider.x >= GridItem4.x && pnlSlider.x < GridItem5.x) { pnlSlider.x = GridItem4.x + 8; lblSliderPos.text = "150"; } else if(pnlSlider.x >= GridItem5.x && pnlSlider.x < GridItem6.x) { pnlSlider.x = GridItem5.x + 9; lblSliderPos.text = "200"; } else if(pnlSlider.x >= GridItem5.x) { pnlSlider.x = GridItem6.x + 9; lblSliderPos.text = "250"; } } private function movePanelObj(event:MouseEvent):void { if((event.stageX - xDiff >=10) && (event.stageX - xDiff <= GridItem6.x + 7 - 48 * (iPnlLen -1))) { pnlSlider.x = event.stageX - xDiff; } } private function MovePanel(event:MouseEvent):void { this.systemManager.addEventListener (MouseEvent.MOUSE_MOVE, movePanelObj); this.systemManager.addEventListener (MouseEvent.MOUSE_UP, stopDragging); xDiff = event.stageX - pnlSlider.x; } ]]> </mx:Script> </mx:Application> -----------------------------End of the Code----------------------- Thanks Regards, Jaga
