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 [Link].*;
var myLabel:Label = new Label();
[Link] = “Hello world”;
[Link](myLabel);
XML reversed characters
& = & (ampersand)
< = < (less than)
>> = (greater than)
" = “ (double quote)
' = ‘ (apostrophe/single quote)
Set conditions in xml tags
- include brace brackets
- note the variable must be bindable
<mx:Button label=”Click Me” enabled=”{someValue < 3}”/>
Data Grid
if ([Link] != -1)
{
var myData:Object = [Link];
}
-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=”[Link]” 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
{
[Link]=”You clicked the button labeled “ +
[Link];
}
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: [Link]=”The “ + [Link] + “ event was dispatched by “ + [Link];
[Link]=”Alt key pressed: “ + [Link];
[Link]=”Ctrl key pressed: “ + [Link];
[Link]=”Shift key pressed: “ + [Link];
Mouse event name constant
- CLICK = “click”
- MOUSE_DOWN = “mouseDown”
- MOUSE_UP = “mouseUp”
- MOUSE_MOVE = “mouseMove”
- RIGHT_CLICK = “rightClick”
- MOUSE_WHEEL = “mouseWheel”
Eg: [Link]([Link], clickHandler);
Initializing the properties of a UIComponent
private function initText():void
{
[Link] = “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
{
[Link] = 0;
[Link] = [Link];
[Link]();
}
<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/[Link]”)]
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 ([Link]){
[Link]("You selected the CheckBox");
}
else{
[Link]("You didn’t select the CheckBox");
}
}
Radio Button
private function activateFunction():void{
[Link](“You have selected ” + [Link]());
}
<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/[Link]’)”/>
2. [Embed(source=”graphics/[Link]”)]
[Bindable]
public var flowerImage:Class;
<mx:Image source=”{flowerImage}”/>
Changing Image
[Embed(source=”graphics/[Link]”)]
[Bindable]
public var flowerImage1:Class;
[Embed(source=”graphics/[Link]”)]
[Bindable]
public var flowerImage2:Class;
<mx:Image id=”myImage” source=”{flowerImage1}”/>
<mx:Button label=”Change Image”click=”[Link]=flowerImage2”/>
-OR-
<mx:Image id=”myImage” source=”graphics/[Link]”/>
<mx:Button label=”Change Picture” click=”[Link](‘graphics/[Link]’)”/>
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 [Link];
private function onStart():void{
[Link]("Selected!", "", 3, null, activateAnother);
}
private function activateAnother(event:CloseEvent):void{
if ([Link] == [Link])
[Link]("Another function is called!");
}
Adding own string and button
[Link] = “Fer sure!!!”;
[Link] = “NO WAY!!”;
[Link] = 100;
[Link](“This is an Alert dialog box with custom buttons”, “Alert with Buttons”, ([Link] |
[Link]));
add an icon
[Embed(source=”assets/[Link]”)]
private var questionIcon:Class;
[Link](“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/[Link]”);
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 [Link];
import [Link];
public function itemClickHandler(event:MenuEvent):void {
[Link](“Menu label: “ + [Link].@label, “Menu value: “ + [Link].@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{
[Link]("You selected: " + [Link] + " with an index: " +
[Link]);
}
Effects in Flex
<mx:Image id="myButton" x="360" y="229" showEffect="Fade" hideEffect="Fade"
source="graphics/[Link]" width="131" height="100"/>
<mx:Button x="271" y="337" label="Show Image" click="[Link]=true"/>
<mx:Button x="376" y="337" label="Hide Image" click="[Link]=false"/>
(alternatively in mx:Script)
[Link](“showEffect”, new Fade());
[Link](“hideEffect”, new Fade());
(or)
var myFade:Fade = new Fade();
[Link] = myImage;
[Link] = 0; // from invisible
[Link] = 1; // to visible
[Link]();
