Extra learning on Flex 3

Showing HTML Text <mx:Label> <mx: htmlText> <![CDATA[ <b>This text is bold!</b> ]]> </mx:htmlText> </mx:Label> creating label using AS3 import mx.controls.*; var myLabel:Label = new Label(); myLabel.text = “Hello world”; this.addChild(myLabel); XML reversed characters &amp; = & (ampersand) &lt; = < (less than) &gt;> = (greater than) &quot; = “ (double quote) &apos; = ‘ (apostrophe/single quote) Set conditions in xml tags - include brace brackets - note the variable must be bindable <mx:Button label=”Click Me” enabled=”,someValue &lt; 3-”/> Data Grid if (myDataGrid.selectedIndex != -1) { var myData:Object = myDataGrid.selectedItem; } -1 means not found. This IF statement helps to evaluate whether a user has selected a row in a DataGrid or List control Bindable variable - able to keep track of the value of the variables as the program runs, eliminates the need of creating eventListener - the convention is as follow: <mx:Script> <![CDATA[ [Bindable] private var myVar:String ]]> </mx:Script> <mx:Binding source=”myInput.text” destination=”myVar”/> <mx:TextInput id=”myInput”/> <mx:Label text=”{myVar}”/>

by convention. .Static properties A static property is a value that’s the same for all instances of the component.altKey.stageY:int: The number of pixels from the top border where the user clicked the stage (Flash Player region). Mouse event name constant . . Eg: myLabel.localY:int: The number of pixels from the top border where the user clicked an object dispatching the event.localX:int: The number of pixels from the left border where the user clicked an object dispatching the event.buttonDown:Boolean: Set to true if the primary mouse button is pressed when the event is dispatched. . .text=”You clicked the button labeled “ + event.text=”Shift key pressed: “ + event.target. altLabel. otherwise false.ctrlKey. it is recommended to be uppercased. shiftLabel. . You make a property static by adding the static keyword after the access modifier: public static var myStaticVar:String.text=”The “ + event. Handling event .RIGHT_CLICK = “rightClick” .MOUSE_DOWN = “mouseDown” . otherwise false.CLICK.target.MOUSE_MOVE = “mouseMove” . . ctrlLabel. it also can be referred to by other parts of the application without having to instantiate the component at all. Always set to false on Windows.to know it’s target properties private function clickHandler(event:Event):void { myLabel.stageX:int: The number of pixels from the left border where the user clicked the stage (Flash Player region). Using constants A constant is a property whose value is set at the time of declaration and never changes private const ALLPRODUCTS:String=”All Products”.id. otherwise false.MOUSE_UP = “mouseUp” .CLICK = “click” . otherwise false.addEventListener(MouseEvent. .shiftKey. clickHandler).ctrlKey:Boolean: Set to true if the Ctrl key is held down when the event is dispatched.shiftKey:Boolean: Set to true if the Shift key is held down when the event is dispatched.MOUSE_WHEEL = “mouseWheel” Eg: myButton.text=”Ctrl key pressed: “ + event. . } Extended MouseEvent . .label.type + “ event was dispatched by “ + event.text=”Alt key pressed: “ + event.commandKey:Boolean: Set to true if the command key on the Mac is held down when the event is dispatched. otherwise false.altKey:Boolean: Set to true if the Alt key is held down when the event is dispatched.

left. bottom Check Box private function checkSelected():void{ if (myCheckBox.jpg’)”/> 2.Initializing the properties of a UIComponent private function initText():void { htmlLabel. *Embed(source=”graphics/flower1.show("You selected the CheckBox"). <mx:Button id=”deleteButton” label=”Delete” icon=”.htmlText = “This text <b>is bold</b>”.myDeleteIcon-” labelPlacement=”right”/> labelPlacement can be right. } You call the initialization function upon the component’s initialize event: <mx:Label id=”htmlLabel” initialize=”initText()”/> Highlight textInput box when clicked private function selectText():void { myInput. } } Radio Button private function activateFunction():void{ Alert. myInput.jpg”)+ . } else{ Alert.toString()).selectedValue. } <mx:TextInput id="myInput" x="270" y="163" text="soemthing here" click="selectText()"/> Buttons Toggle <mx:Button id="toggleButton" label="Toggle Button" toggle="true"/> Add icon to button [Bindable] [Embed(source=”graphics/deleteIcon. top.selected){ Alert.selectionEndIndex = myInput.length.selectionBeginIndex = 0.show("You didn’t select the CheckBox").text.setFocus().png”)+ public var myDeleteIcon:Class. } <mx:RadioButtonGroup id=”buttonGroup” change=”activateFunction()”/> <mx:RadioButton value=”Small” label=”Small” groupName=”buttonGroup” selected=”true”/> set one of them to true as default value <mx:RadioButton value=”Medium” label=”Medium” groupName=”buttonGroup”/> <mx:RadioButton value=”Large” label=”Large” groupName=”buttonGroup”/> Working with Images Embedding 1. <mx:Image source=”@Embed(‘graphics/flower1.show(“You have selected ” + buttonGroup. myInput.

jpg”)+ [Bindable] public var flowerImage1:Class. 3. private function onStart():void{ Alert.jpg”)+ [Bindable] public var flowerImage2:Class. null. null.flowerImage1-”/> <mx:Button label=”Change Image”click=”myImage. activateAnother). (Alert. Alert. Alert. } private function activateAnother(event:CloseEvent):void{ if (event.0" cornerRadius=”15”> adding control bar to panel.0" alpha="1. “Alert with Buttons”. questionIcon). } Adding own string and button Alert.events.YES) Alert. <mx:Image id=”myImage” source=”.show(“This is an Alert dialog box with custom buttons”.show("Selected!". Alert. "". null. <mx:Image source=”. including buttons and spacer <mx:ControlBar> <mx:Button label="Button"/> <mx:Spacer width=”100%”/> <mx:Button label="Button"/> </mx:ControlBar> Using Alert control add a function to it import mx.noLabel = “NO WAY!!”.yesLabel = “Fer sure!!!”.detail == Alert.YES | Alert.show("Another function is called!"). “Alert Event Handler”.jpg’)”/> Panel <mx:Panel id="myPanel" x="285" y="37" width="250" height="200" layout="absolute" title="Panel" status="status" roundedBottomCorners="true" borderAlpha="1. 0.[Bindable] public var flowerImage:Class. Changing Font using CSS <mx:Style> .buttonWidth = 100.flowerImage-”/> Changing Image *Embed(source=”graphics/flower1.png”)+ private var questionIcon:Class.CloseEvent.load(‘graphics/flower2. add an icon *Embed(source=”assets/questionicon.show(“An Alert dialog box with custom icon”.source=flowerImage2”/> -OR<mx:Image id=”myImage” source=”graphics/flower1.NO)). Alert.jpg”/> <mx:Button label=”Change Picture” click=”myImage. *Embed(source=”graphics/flower2.

controls.visible=false"/> .@value).@label.@font-face { src:url(“/fonts/GOUDOS.item. “Menu value: “ + event.show("You selected: " + effectList. font-family:”Garamond”.MenuEvent.selectedItem + " with an index: " + effectList.Alert.show(“Menu label: “ + event. public function itemClickHandler(event:MenuEvent):void { Alert. } ]]> </mx:Script> <mx:XMLList id=”xSizes”> <node label=”Small” value=”S”/> <node label=”Medium” value=”M”/> <node label=”Large” value=”L”/> </mx:XMLList> <mx:PopUpMenuButton id=”p2” dataProvider=”{xSizes}” labelField=”@label” itemClick=”itemClickHandler(event).jpg" width="131" height="100"/> <mx:Button x="271" y="337" label="Show Image" click="myButton.events. } Effects in Flex <mx:Image id="myButton" x="360" y="229" showEffect="Fade" hideEffect="Fade" source="graphics/Koala.item.selectedIndex). import mx.”/> Using Horizontal List <mx:HorizontalList id="effectList" change="changeEffect(event)" x="10" y="320" width="326" height="29" selectedIndex="0" columnCount="6" columnWidth="50"> <mx:dataProvider> <mx:String>1</mx:String> <mx:String>2</mx:String> <mx:String>3</mx:String> <mx:String>4</mx:String> <mx:String>5</mx:String> </mx:dataProvider> </mx:HorizontalList> private function changeEffect(event:Event):void{ Alert.visible=true"/> <mx:Button x="376" y="337" label="Hide Image" click="myButton.ttf”). } } </mx:Style> <mx:Label text=”Goudy Old Style 18” fontFamily=”Garamond” fontSize=”18”/> Using Pop-Up Menu Button <mx:Script> <![CDATA[ import mx.

play().alphaTo = 1. new Fade()).target = myImage.setStyle(“hideEffect”. // to visible myFade. (or) var myFade:Fade = new Fade().alphaFrom = 0. myImage. myFade.setStyle(“showEffect”.(alternatively in mx:Script) myImage. myFade. // from invisible myFade. . new Fade()).

Sign up to vote on this title
UsefulNot useful