Archive for May, 2009

17
May

Flex Validator example

Code below shows Flex validator component example. With these components different types of data are get validated with appropriate validators. The provided flex feature is mostly used in validating the user ids, email addresses and passwords.

In the example validator for email and phone numbers are made. When the user writes, data validator checks the syntax and type of data entered and if the data entered is found to be wrong, the corresponding validator generates error message in red text format.
Similarly many different types of validators can be created and that you will be going to learn soon.

validator.mxml


property = 'text'/>
property = 'text'/>

text = 'Your valid phone number.'/>
text = 'baadshah@newstrackindia.com'/>

17
May

Flex Alert Box example

Alert box is a dialog box that appears on window with some message and stays rigid until the event associated with it is not done. Alert Box is also referred to as pop-up window.

Among these two words Alert & box, Alert is a class defined inside the mx.controls package. The pop-up window appears when .show() method of Alert class is called. Programmer can write its message inside the method parenthesis, method displays programmers message as string on the opened pop-up window that contains a string title ‘Alert’.

alert.mxml


width = '100%' height = '100%'>


import mx.controls.Alert;
import mx.events.CloseEvent;


public function method1():void{
Alert.show(‘want to play’, ‘message’, 3, this, method2)
}

public function method2(event:CloseEvent):void{
if(event.detail == Alert.YES)
eve.text = “You answer is ‘yes’ so your player ID is: ” + event.detail;
else
eve.text = “You answer is ‘No’ but still if want to play then your player ID is: ”
+ event.detail;
}


17
May

Flex Combo Box example

In this tutorial page you will be taught to utilize ComboBox control inside your flex file. In the example you will learn to build two ComboBox controls. The Example below shows combo boxes with nicely formatted string data, so here you will be also taught to do the graphical works on flex visual component.

The following code demonstrates the ComboBox control working example. This control shows the drop-down list of data you passed as String inside it.

combo.mxml



height = '40%' color = '#FFFFCF'>
'100%' height = '100%'>




Neo/ Thomas Anderson

Trinity/ Carrie-Anne Moss

Eve/ Rachel Weisz






Snow White – Adriana Caselotti

Aurora – Mary Costa
Ariel – Jodi Benson



17
May

Compiling MXML application

In this tutorial you will be provided two ways to compile you flex source file. First one is very easy and in this you all have to just put or directly save your .mxml file in the bin directory of your flex folder. Here the bin directory is the place where the flex compiler is located.
Now open the command prompt switch to the flex bin directory and type mxmlc file-name.mxml. The output swf file will be generated in the same bin folder, where the flex compiler and your flex source file is located. Below i have described all these steps through the screen shots.

Here the name of my flex file is newbie.mxml.

Locating Flex newbie.mxml file
ow there is another way to do the above compiling job. This is done by apache’s ant technology, with which a build.xml file is created and is used to call the flex compiler and compile the flex .mxml file.
For beginners to Apache’s Ant and Flex, I’ve prepared an example of ant build.xml file as below -
You can download file in the end of this tutorila by clicking at the download link.
In this tutorial page you will be taught to deploy flex applications, along with this you will also get a brief introduction regarding flex components.
Here you just copy the code and save it with build.xml at place where you saved your .mxml file. In this case it is not necessary to save your file in flex bin directory, the place could be any other directory too.

build.xml




location = 'C:\flexsdk3.0.0.477\bin\mxmlc.exe'/>




Inside ‘ location’ attribute, relative path of Flex compiler is passed. From this path the ‘ant’ utility calls Flex compiler to compile the flex file. Flex file possess .mxml as its extension.
For calling the compiler code provided below is required.

'C:\Program Files\flexsdk3.0.0.477\bin\mxmlc.exe'/>
The table below shows that in your ant build.xml file you have to mention the file_name of your flex file that you want to compile. Here file name used is Tia.mxml.
Note :- A Flex developer has to update its flex file_name in the ant build.xml file every time with the new one with which the file has been saved.
Below table shows that the file .mxml when compiled into .swf is generated inside the ‘bin folder’ of our base directory. Base directory is the location where our build.xml and Tia.mxml file exist.



Below in the table is the code of Tia.mxml file shows an alert box whenever MOUSE_OVER event occurs.

Tia.mxml


initialize = 'createListener(event);'>


import mx.controls.Alert;

private function createListener(e:Event):void{
b1.addEventListener(
MouseEvent.MOUSE_OVER, myEventHandler);
b1.addEventListener(
MouseEvent.CLICK, myClickHandler);
}

private function myEventHandler(e:Event):void{
var result:Boolean = b1.dispatchEvent(
new MouseEvent(MouseEvent.CLICK,true,false));
}

private function myClickHandler(e:Event):void {
Alert.show(
“The event dispatched by the MOUSE_OVER was of type ‘”
+ e.type + “‘ .”);
}



Before running the ant file, the ant file build.xml and the flex file Tia.mxml should be placed in same location, here both have been saved in C:\baadshah directory. Now for compiling file Tia.mxml, open Command Prompt and type ant command as shown in image below.

BUILD SUCCESSFUL means our file Tia.mxml has been successfully compiled in to Tia.swf and is generated inside the bin folder. Now for running this Tia.swf file follow the steps as demonstrated below.

This should be your base directory:
Now open the bin folder.

17
May

Introducing Flex

Flex is a programming language developed on adobe technology to enhance the users capability in building rich internet applications. This latest adobe technology possesses all flash features. Flex is embedded with two languages MXML and Action Script respectively. Among all known scripting languages Action Script is one of them that comes along with Flex SDK(software development kit). MXML is a tag based language while Action Script is a flash language and developers pro to oop’s (object oriented programming) will face no problem with this flash language.

Server the compilation of flex source file is adobe’s Application server which is a J2EE application.
Flex coding is done with an XML based language known as MXML and like Flash applications, Flex codes too are compiled into a file having SWF format called ShockWave Flash files. These SWF files are executed with stand-alone Adobe’s Flash Players, and can also be directly executed in browsers that have Adobe Flash Player Plug-in installed.

For developing Flex applications, Adobe has launched Flex builder that works in Eclipse environment. Flex 3 builder is the latest and can be freely downloaded from Adobe’s official website. But building Flex applications on Flex builder in eclipse environment is a cumbersome job to perform, one reason is that using eclipse with flex builder plugin will make it very slow, also lot of time is been taken in compilation. To get rid of this problem there is another way to compile Flex application which works on Apache Ant technology. Apache’s this technology is used to make a build.xml file that will be used later to call the flex compiler in deploying the flex application. You will get more to know after going through the tutorials presented below.
Flex languages

Flex coding involves two different languages MXML and ActionScript respectively.

MXML is an extended form of XMLand is a tag based language, and therefore it is called an XML-based markup language. Program files coded with mxml language possess ‘.mxml’ extensions. MXML used along with ActionScript provide tags to devise GUI (graphical user interface) component and is also used to get access to data on servers. MXML facilitates its users with its data binding services. HTML and MXML both provide tags but the difference is that MXML consists of several new tags like TabNavigators and Accordions and many more that also enable users to get any web service connection. A MXML file is converted into a SWF file that runs on a Flash Player or on a browser which has Adobe Flash Player Plug-in installed in it.

ActionScript a flash language is an implementation of ECMAScript and is similar to OOP based JavaScript. In Adobe Flash Player this is the main programming tool. It consists of built-in objects and functions, and allows its users to build their own objects and functions. With this strong tool one can extend its competency in creating RIAs. Its coding is done inside the tag . We create ActionScript files and call them inside the main MXML file with either ‘source’ attribute of tag or with ‘include’ statement inside tag by passing the relative path names of ActionScript files in these attributes. Each and every ActionScript file should be saved with ‘.as’ extension.



Get Adobe Flash playerPlugin by wpburn.com wordpress themes