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}”/>
Static properties
A static property is a value that’s the same for all instances of the component; it also can be referred
to by other parts of the application without having to instantiate the component at all. You make a
property static by adding the static keyword after the access modifier:
public static var myStaticVar:String;

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”;
by convention, it is recommended to be uppercased.

Handling event
- to know it’s target properties
private function clickHandler(event:Event):void
{
myLabel.text=”You clicked the button labeled “ +
event.target.label;
}
Extended MouseEvent
- altKey:Boolean: Set to true if the Alt key is held down when the event is dispatched;
otherwise false.
- ctrlKey:Boolean: Set to true if the Ctrl key is held down when the event is dispatched;
otherwise false.
- shiftKey:Boolean: Set to true if the Shift key is held down when the event is dispatched;
otherwise false.
- commandKey:Boolean: Set to true if the command key on the Mac is held down when the
event is dispatched; otherwise false. Always set to false on Windows.
- localX:int: The number of pixels from the left border where the user clicked an object
dispatching the event.
- localY:int: The number of pixels from the top border where the user clicked an object
dispatching the event.
- stageX:int: The number of pixels from the left border where the user clicked the stage (Flash
Player region).
- stageY:int: The number of pixels from the top border where the user clicked the stage (Flash
Player region).
- buttonDown:Boolean: Set to true if the primary mouse button is pressed when the event is
dispatched; otherwise false.
Eg: myLabel.text=”The “ + event.type + “ event was dispatched by “ + event.target.id;
altLabel.text=”Alt key pressed: “ + event.altKey;
ctrlLabel.text=”Ctrl key pressed: “ + event.ctrlKey;
shiftLabel.text=”Shift key pressed: “ + event.shiftKey;

Mouse event name constant

- CLICK = “click”
- MOUSE_DOWN = “mouseDown”
- MOUSE_UP = “mouseUp”
- MOUSE_MOVE = “mouseMove”
- RIGHT_CLICK = “rightClick”
- MOUSE_WHEEL = “mouseWheel”
Eg: myButton.addEventListener(MouseEvent.CLICK, clickHandler);
Initializing the properties of a UIComponent
private function initText():void
{
htmlLabel.htmlText = “This text <b>is bold</b>”;
}
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.selectionBeginIndex = 0;
myInput.selectionEndIndex = myInput.text.length;
myInput.setFocus();
}
<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.png”)]
public var myDeleteIcon:Class;
<mx:Button id=”deleteButton” label=”Delete” icon=”{myDeleteIcon}” labelPlacement=”right”/>
labelPlacement can be right, left, top, bottom

Check Box
private function checkSelected():void{
if (myCheckBox.selected){
Alert.show("You selected the CheckBox");
}
else{
Alert.show("You didn’t select the CheckBox");
}
}

Radio Button
private function activateFunction():void{
Alert.show(“You have selected ” + buttonGroup.selectedValue.toString());
}
<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.jpg’)”/>
2. [Embed(source=”graphics/flower1.jpg”)]
 [Bindable]
public var flowerImage:Class;
<mx:Image source=”{flowerImage}”/>
Changing Image
[Embed(source=”graphics/flower1.jpg”)]
[Bindable]
public var flowerImage1:Class;
[Embed(source=”graphics/flower2.jpg”)]
[Bindable]
public var flowerImage2:Class;
<mx:Image id=”myImage” source=”{flowerImage1}”/>
<mx:Button label=”Change Image”click=”myImage.source=flowerImage2”/>
-OR-
<mx:Image id=”myImage” source=”graphics/flower1.jpg”/>
<mx:Button label=”Change Picture” click=”myImage.load(‘graphics/flower2.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" alpha="1.0" cornerRadius=”15”>
adding control bar to panel, 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.events.CloseEvent;
private function onStart():void{
Alert.show("Selected!", "", 3, null, activateAnother);
}
private function activateAnother(event:CloseEvent):void{
if (event.detail == Alert.YES)
Alert.show("Another function is called!");
}

Adding own string and button

Alert.yesLabel = “Fer sure!!!”;
Alert.noLabel = “NO WAY!!”;
Alert.buttonWidth = 100;
Alert.show(“This is an Alert dialog box with custom buttons”, “Alert with Buttons”, (Alert.YES |
Alert.NO));

add an icon
[Embed(source=”assets/questionicon.png”)]
private var questionIcon:Class;
Alert.show(“An Alert dialog box with custom icon”, “Alert Event Handler”, 0, null, null,
questionIcon);

Changing Font using CSS

<mx:Style>
@font-face {
src:url(“/fonts/GOUDOS.ttf”);
font-family:”Garamond”;
}
}
</mx:Style>
<mx:Label text=”Goudy Old Style 18” fontFamily=”Garamond” fontSize=”18”/>

Using Pop-Up Menu Button

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.MenuEvent;
public function itemClickHandler(event:MenuEvent):void {
Alert.show(“Menu label: “ + event.item.@label, “Menu value: “ + event.item.@value);
}
]]>
</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);”/>

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.show("You selected: " + effectList.selectedItem + " with an index: " +
effectList.selectedIndex);
}

Effects in Flex

<mx:Image id="myButton" x="360" y="229" showEffect="Fade" hideEffect="Fade"

source="graphics/Koala.jpg" width="131" height="100"/>
<mx:Button x="271" y="337" label="Show Image" click="myButton.visible=true"/>
<mx:Button x="376" y="337" label="Hide Image" click="myButton.visible=false"/>
(alternatively in mx:Script)
myImage.setStyle(“showEffect”, new Fade());
myImage.setStyle(“hideEffect”, new Fade());

(or)
var myFade:Fade = new Fade();
myFade.target = myImage;
myFade.alphaFrom = 0; // from invisible
myFade.alphaTo = 1; // to visible
myFade.play();