Flex Create Application Adobe Flex

How to create a flex application?

Flex Applications can be created using Flash Builder 4.5. Let's begin with a simple HelloWorld application:

Step 1 - Create Project

First, create a simple Flex Project using Flash Builder IDE and launch the project wizard using option File > New > Flex Project. Name the project as HelloWorld using the wizard window as shown below:

flex

Select Application Type as Web (runs in Adobe Flash Player), else skip other default values and click on Finish Button. After creating the project successfully, you can see below content in your Project Explorer:

project structure

Below is the brief description of all important folders:

Folder

Location

table table-bordered

· Source code (mxml / as classes) files.

· We've created com/wisdomjobs/client folder structure containing the client-side specific java classes responsible for client UI display.

bin-debug

· This is the output and represents the actual deployable web application.

· History folder consists of 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, library for spark component support.

· swfobject.js, javascript are responsible to load HelloWorld.swf in HelloWorld.html. It checks flash player version and passes initialization parameter to HelloWorld.swf file.

· textLayout_xxx.swf, library for text component support.

html-template

· Html template represents the configurable web application. Flash Builder compiles files from html-template to bin-debug folder.

· History folder consists of support files for history management of Flex application.

· index.template.html, wrapper/host HTML File for flex application having place holders for Flash Builder specific configuration. Gets compiled to HelloWorld.html in bin-debug folder during build.

· playerProductInstall.swf, flash player express installer.Gets copied to bin-debug folder during build.

· swfobject.js, javascript are responsible to load HelloWorld.swf in HelloWorld.html. It checks flash player version and passes initialization parameter to HelloWorld.swf file. Gets copied to 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.

Step 3 - Modify Wrapper HTML page template

Wrapper HTML page index.template.html should be modified in html-template folder. Flash Builder creates a default Wrapper HTML page template html-template/index.template.html, which is again compiled to HelloWorld.html. This file contains placeholders which are replaced by Flash Builder during compilation process for example flash player version, application name etc.

Modify this file for displaying custom messages if flash plugin is not installed.

Step 4 - Create internal CSS file

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

Step 5 - Modify Entry Level Class

Flash Builder creates a default mxml file table

table-bordered/com.wisdomjobs/HelloWorld.mxml. This has a root tag <application> container for the application. Modify this file to display "Hello,World!":

User can create more mxml or actionscript files in the same source directory for defining either new applications or helper routines.

Step 6 - Build Application

Build Automatically is by default checked in Flash Builder. Just check the Problems View for any error. Once after the changes are done, there will be no errors.

Step 7 - Run Application

Now click on Run application menu and select HelloWorld application to run the application.

flex run

If everything works fine, then you will see browser pop up and application up and running and it will produce below output

As you are running your application in flash player, you have to install Flash Player plugin for your browser. Simply follow the instructions given onscreen for installing the plugin. If Flash Player plugin is already set for your browser, then you should see the output as shown below:

flex application

Congratulations! You have executed your first application using Flex.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Adobe Flex Topics