Someone please help me out... Thanks
Regards, Jaga --- In [email protected], "Jaganathan.K" <[EMAIL PROTECTED]> wrote: > > 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 >
