Flex creates the application

May 25, 2021 Flex

1. Step 1 - Create a project

2. Step 2 - Create an external CSS file

3. Step 3 - Modify the wrapper HTML page template

4. Step 4 - Create an internal CSS file

5. Step 5 - Modify the entry-level class

6. Step 6 - Build the application

7. Step 7 - Run the application

We'll create a Flex application using Flash Builder 4.5. Let's start with a simple HelloWorld application:

Step 1 - Create a project

The first step is to create a simple Flex project using the Flash Builder IDE. /b10> Use the option File and New and Flex Project. Now use the wizard window to name your project HelloWorld, as follows:

If not, select the application type web (running in Adobe Flash Player) and leave the other default values, and then click the Finish button. After the project is created successfully, your project explorer will include the following:

Here's a brief description of all the important folders:

Clip	Position
Table border	Source code (mxml / as classes) file. We've created the com/tutorialspoint/client folder structure, which contains client-specific java classes that are responsible for client UI display.
bin-debug	This is the output section, which represents the actual deployable Web application. The history folder contains support files for the history management of Flex applications. framework_xxx.swf, flex applications use flex framework files. HelloWorld .html, a wrapper/host HTML file for flex applications. HelloWorld .swf, our flex-based app. PlayerProductInstall.swf, flash player express installer. spark_xxx.swf for libraries supported by spark components. The swfobject .js javascript is responsible for loading HelloWorld .html in the HelloWorld .swf. /b10> It checks the Flash Player version and passes the initialization parameters to helloworld.swf file. textLayout_xxx.swf, a library for text component support.
html-template	This represents a configurable Web application. /b10> Flash Builder compiles files from html-template to the bin-debug folder. The history folder contains support files for the history management of Flex applications. Index.template .html that wrapper/host is used for HTML files for flex applications with placeholders for flash Builder-specific configurations. /b10> Compiled as HelloWorld during compilation in the bin-debug folder.html. PlayerProductInstall.swf, flash player express installer. Copy to the bin-debug folder during construction. The swfobject .js javascript is responsible for loading HelloWorld .html in the HelloWorld .swf. /b10> It checks the flash player version and passes the initialization parameters to the HelloWorld .swf file. C opy to the bin-debug folder during construction.

Step 2 - Create an external CSS file

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

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 - Modify the wrapper HTML page template

Modify the encapsulated HTML page template index.template in the html-template .html. /b10>Flash Builder will create a default Wrapper HTML web template html-template / index.template .html, which will be compiled as HelloWorld .html. /b11> This file contains placeholders that Flash Builder replaces during compilation, such as the Flash Player version, application name, and so on.

Let's modify this file to display a custom message if the flash plug-in is not installed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:> 
<head>
<title>${title}</title>
<meta name="google" value="notranslate" />         
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css"></link>       
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" table table-bordered="history/history.js"></script>
<script type="text/javascript" table table-bordered="swfobject.js"></script>
<script type="text/javascript">
   // 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>        
<div id="flashContent">
   <p style="margin:100px;">
   <table  width="700" cellpadding="10" cellspacing="2" border="0">
      <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>			
      <tr><td class = "pluginInstallText" align="left">
         <table border="0" width="100%">
         <tr class = "pluginInstallText" >									
         <td>Click here to download and install Adobe Flash Player:</td>													
         <td> </td>
         <td align="right">	<script type="text/javascript"> 
         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>
<noscript>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
   width="${width}" height="${height}" id="${application}">
   <param name="movie" value="${swf}.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="allowFullScreen" value="true" />
   <!--[if !IE]>-->
   <object type="application/x-shockwave-flash" data="${swf}.swf" 
   width="${width}" height="${height}">
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="allowFullScreen" value="true" />
   <!--<![endif]-->
   <!--[if gte IE 6]>-->
   <p> 
      <p style="margin:100px;">
      <table  width="700" cellpadding="10" cellspacing="2" border="0">
      <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>			
      <tr><td class = "pluginInstallText" align="left">
         <table border="0" width="100%">
         <tr class = "pluginInstallText" >									
         <td>Click here to download and install Adobe Flash Player:</td>													
         <td> </td>
         <td align="right">	<script type="text/javascript"> 
         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>             
   </p>
   <!--<![endif]-->
     <p style="margin:100px;">
      <table  width="700" cellpadding="10" cellspacing="2" border="0">
      <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>			
      <tr><td class = "pluginInstallText" align="left">
         <table border="0" width="100%">
         <tr class = "pluginInstallText" >									
         <td>Click here to download and install Adobe Flash Player:</td>													
         <td> </td>
         <td align="right">	<script type="text/javascript"> 
         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>          
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
   </object>
</noscript>     
</body>
</html>

Step 4 - Create an internal CSS file

Create a CSS file style for HelloWorld.mxml in the table-table-bordered/com/tutorialspoint .css. /b10> Flex provides a similar CSS style for its UI controls because there are CSS styles for HTML UI controls.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace 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 the entry-level class

Flash Builder will create a default mxml file table-table-bordered / com.tutorialspoint / HelloWorld.mxml, which has the root tag of the application. /b11> Let's modify this file to show "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 new applications or define helpers.

Step 6 - Build the application

Flash Builder is selected auto-build by default. /b10> Just check the problem to see if there are any errors. /b11> When you're done with your changes, you won't see any errors.

Step 7 - Run the application

Now Flex creates the application click run the app menu and select the HelloWorld app to run the app.

If all goes well, you must see the browser pop up and the application up and running. If all goes well with your application, this will result in the following results:

Because you are running your application in the flash player, you need to install the Flash Player plug-in for your browser. /b10> Simply follow the on-screen instructions to install the plug-in. If you already have a Flash Player plug-in set up for your browser, you should see the following output:

Congratulations! /b10> You have implemented the first application using Flex.