Interview Questions

Creating your First Application in Flex Environment

We can utilize Flash Builder 4.5 to create Flex Applications. Here are simple steps to create myFirstApplication application using Adobe Flex,

Step 1 – Creating a new Project

In order to create a simple Flex Project using Flash Builder IDE. Launch project wizard using the option File > New > Flex Project. Now name your project as HelloWorld using the wizard window as follows:

Choose Application Type as The Web (runs in Adobe Flash Player) in case it is not selected and leave other default values as such and click Finish Button. Once your project is created successfully, you will have following content in your Project Explorer:

Here is brief description of all important folders:

Folder	Location
table table-bordered	Source code (MXML / as classes) files. We've created com/application/client folder structure containing the client-side specific java classes responsible for client UI display.
bin-debug	This is the output part, it represents the actually deployable web application. history folder contains support files for history management of Flex application. framework_xxx.swf, flex framework files to be used by flex application. HelloWorld.html, wrapper/host HTML File for flex application. HelloWorld.swf, our flex based application. playerProductInstall.swf, flash player express installer. spark_xxx.swf, a library for spark component support. swfobject.js, javascript responsible to load HelloWorld.swf in HelloWorld.html. It checks the flash player version and passes initialization parameter to HelloWorld.swf file. textLayout_xxx.swf, library for text component support.
HTML-template	This represents the configurable web application. Flash Builder compiles files from HTML-template to the bin-debug folder. history folder contains support files for history management of Flex application. index.template.html, wrapper/host HTML File for flex application having placeholders for Flash Builder specific configuration. Gets compiled to HelloWorld.html in the bin-debug folder during build. playerProductInstall.swf, flash player express installer.Gets copied to the bin-debug folder during build. swfobject.js, javascript responsible to load HelloWorld.swf in HelloWorld.html. It checks the flash player version and passes initialization parameter to HelloWorld.swf file.Gets copied to the bin-debug folder during build.

Step 2 - Create external CSS file

Create a CSS file styles.css for Wrapper HTML page in html-template folder.

html, body {

height:100%;

}

body {

margin:0;

padding:0;

overflow:auto;

text-align:center;

}

object:focus {

outline:none;

}

#flashContent {

display:none;

}

.pluginHeader {

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

color:#9b1204;

text-decoration:none;

font-weight:bold;

}

.pluginInstallText {

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#000000;

line-height:18px;

font-style:normal;

}

.pluginText {

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#000000;

line-height:18px;

font-style:normal;

}

Step 3 – Now you need to modify the Wrapper HTML page template

In order to modify, you need to edit the Wrapper HTML page template index.template.html in html-templatefolder. Now, the Flash Builder will create a default Wrapper HTML page template html-template/index.template.html, which will be compiled to HelloWorld.html. This file contains placeholders which Flash Builder replaces during compilation process for example flash player version, application name etc.

Perform the below modification to display custom messages if flash plugin is not installed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>${title}</title>

// For version detection, set to min. required Flash Player version,

//or 0 (or 0.0.0), for no version detection.

var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";

// To use express install, set to playerProductInstall.swf,

//otherwise the empty string.

var xiSwfUrlStr = "${expressInstallSwf}";

var flashvars = {};

var params = {};

params.quality = "high";

params.bgcolor = "${bgcolor}";

params.allowscriptaccess = "sameDomain";

params.allowfullscreen = "true";

var attributes = {};

attributes.id = "${application}";

attributes.name = "${application}";

attributes.align = "middle";

swfobject.embedSWF(

"${swf}.swf", "flashContent",

"${width}", "${height}",

swfVersionStr, xiSwfUrlStr,

flashvars, params, attributes);

// JavaScript enabled so display the flashContent div in case

//it is not replaced with a swf object.

swfobject.createCSS("#flashContent", "display:block;text-align:left;");

</script>

</head>

<body>

<tr><td class="pluginHeader">Flash Player Required</td></tr>

<tr><td class="pluginText">The Adobe Flash Player version

10.2.0 or greater is required.</td></tr>

<td>Click here to download and install Adobe Flash Player:</td>

var pageHost

=((document.location.protocol == "https:") ? "https://" : "http://");

document.write("<a target='_blank'"

+" href='http://get.adobe.com/flashplayer/'><"

+"img style='border-style: none' table table-bordered='"

+pageHost

+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"

+" alt='Get Adobe Flash player' /></a>" );

</script>

</td>

</tr>

</table>

</td>

</tr>

</table>

</p>

</div>

width="${width}" height="${height}" id="${application}">

width="${width}" height="${height}">

<p>

<tr><td class="pluginHeader">Flash Player Required</td></tr>

<tr><td class="pluginText">The Adobe Flash Player version

10.2.0 or greater is required.</td></tr>

<td>Click here to download and install Adobe Flash Player:</td>

var pageHost

= ((document.location.protocol == "https:") ? "https://" : "http://");

document.write("<a target='_blank'"

+" href='http://get.adobe.com/flashplayer/'><"

+"img style='border-style: none' table table-bordered='"

+pageHost

+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"

+" alt='Get Adobe Flash player' /></a>" );

</script>

</td>

</tr>

</table>

</td>

</tr>

</table>

</p>

<tr><td class="pluginHeader">Flash Player Required</td></tr>

<tr><td class="pluginText">The Adobe Flash Player version

10.2.0 or greater is required.</td></tr>

<td>Click here to download and install Adobe Flash Player:</td>

var pageHost

= ((document.location.protocol == "https:") ? "https://" : "http://");

document.write("<a target='_blank'"

+" href='http://get.adobe.com/flashplayer/'><"

+"img style='border-style: none' table table-bordered='"

+pageHost

+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"

+" alt='Get Adobe Flash player' /></a>" );

</script>

</td>

</tr>

</table>

</td>

</tr>

</table>

</p>

</object>

</object>

</noscript>

</body>

</html>

Step 4 – Next is to write codes and create an internal CSS file

Create a CSS file Style.css for HelloWorld.mxml in table table-bordered/com/tutorialspoint folder. Flex provides similar css styles for its UI Controls as there are css styles for HTML UI controls.

/* CSS file */

s "library://ns.adobe.com/flex/spark";

mx "library://ns.adobe.com/flex/mx";

.heading

{

fontFamily: Arial, Helvetica, sans-serif;

fontSize: 17px;

color: #9b1204;

textDecoration:none;

fontWeight:normal;

}

.button {

fontWeight: bold;

}

.container {

cornerRadius :10;

horizontalCenter :0;

borderColor: #777777;

verticalCenter:0;

backgroundColor: #efefef;

}

Step 5 - Modify Entry Level Class

Flash Builder will create a default mxml file table table-bordered/com.tutorialspoint/HelloWorld.mxml, which is having root tag <application> container for the application. Let us modify this file to display "Hello,World!":

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

width="100%" height="100%"

minWidth="500" minHeight="500"

initialize="application_initializeHandler(event)">

<fx:Style source="/com/tutorialspoint/client/Style.css"/>

<fx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.events.FlexEvent;

protected function btnClickMe_clickHandler(event:MouseEvent):void

{

Alert.show("Hello World!");

}

protected function application_initializeHandler(event:FlexEvent):void

{

lblHeader.text = "My Hello World Application";

}

]]>

</fx:Script>

<s:BorderContainer width="500" height="500" id="mainContainer"

styleName="container">

<s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center"

verticalAlign="middle">

<s:Label id="lblHeader" fontSize="40" color="0x777777"

styleName="heading"/>

<s:Button label="Click Me!" id="btnClickMe"

click="btnClickMe_clickHandler(event)" styleName="button" />

</s:VGroup>

</s:BorderContainer>

</s:Application>

You can create more mxml or actionscript files in the same source directory to define either new applications or to define helper routines.

Step 6 - Build Application

Flash Builder has Build Automatically by default checked. Just check theProblems View if there is any error. Once you are done with the changes, you will not see any errors.

Adobe Flex Tutorials

Interview Questions

Popular Tutorials

Creating your First Application in Flex Environment

Step 1 – Creating a new Project

Here is brief description of all important folders:

Step 2 - Create external CSS file

Step 3 – Now you need to modify the Wrapper HTML page template

Step 6 - Build Application

Step 7 - Run Application

Most students read these articles

Top instructors