Scribd
Upload
165 views6 pages

Flex Builder 3 Tutorial

This document provides information on various Flex concepts including: 1. How to display HTML text in a Label, create a Label using ActionScript, and handle XML special characters. 2. How to set conditions in XML tags, use DataGrids, create bindable variables, define static properties, use constants, and handle events. 3. Details on mouse events, initializing UIComponent properties, highlighting text inputs, different button types like toggle buttons, checkboxes and radio buttons, working with images, using panels, alerts, fonts, pop-up menus, lists, and effects.

Uploaded by

edoovel
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
165 views6 pages

Flex Builder 3 Tutorial

This document provides information on various Flex concepts including: 1. How to display HTML text in a Label, create a Label using ActionScript, and handle XML special characters. 2. How to set conditions in XML tags, use DataGrids, create bindable variables, define static properties, use constants, and handle events. 3. Details on mouse events, initializing UIComponent properties, highlighting text inputs, different button types like toggle buttons, checkboxes and radio buttons, working with images, using panels, alerts, fonts, pop-up menus, lists, and effects.

Uploaded by

edoovel
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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();

You might also like