What is this tutorial?
"Flex development" refers to the use of the Adobe Flex to develop web applications that are deployed in the Adobe Flash runtime. The term "Enterprise" in the context of software development is usually used to indicate that something is large-scale, supports a large user base, and consists of many different systems or services. So I use the term "Flex Enterprise Development" to refer to large-scale flex web applications with emphasis on taking advantage of Flex features such as Data Binding and Web Services, and the use of architectures such as SOA, Three-Tier, and MVC. In particular Data Binding can be used to easily implement a MVC framework in an application with little to no extra code, and on a larger scale a combination of Three-Tier and SOA can be used to organize components and make a system easily scalable. This tutorial intends to explain how to setup a development environment, show the important features of the Flex language, and show how to organize and implement small to large-scale systems.
Setting up a Flex Development Environment
In terms of treating web systems as three-tier architectures, meaning that on a high level they can be divided into presentation, service, and data tiers, Flex applications reside in the presentation tier. This means that for servicing it is required that server side scripting languages are used. Flex is not dependent on a single server side scripting language though, since Flex provides the ability to work with data formats such as WSDL, SOAP, Remote Objects, and HTTP Services. I tend to prefer using HTTP Services since is is just plain XML that you can define yourself without headers or envelopes, and is not specific to scripting language remote object technologies.
Adobe provides a free SDK for Flex, but the Flex Builder development environment (http://www.adobe.com/products/flex/flexbuilder/) is a huge time saver since it allows you to rapidly develop GUIs by dragging and dropping pre-made components and editing them accordingly. The first step for setting up a development environment is therefore to download and install Flex Builder.
The next step is to install and configure some sort of web service so that you can develop web services using a server side scripting language. You should also be aware that this choice will also affect which database you can use if you choose to use one. You should take into account that if you intend to deploy your system on someone else's hardware, meaning a web hosting service, you want to setup a similar environment. You should also be aware that most hosting services such as GoDaddy.com provide two options: a Windows (IIS) hosting plan that includes ASP/.NET with MS SQL and MS Access, and a Linux (Apache) hosting plan that includes PHP with MySQL. If you want to use something else like J2EE or ColdFusion you will need use a less traditional web hosting service or use your own hardware.
Personally I run IIS on port 80, Apache on port 8000, and JAS (Java Application Server for J2EE) on port 8080 on my Windows XP MCE laptop. I would like to point out though that setting up IIS on Windows XP MCE was difficult because of a lot of missing components and other issues that can be found with a quick web search. Apache is both free and easy to install, and I actually pointed its PHP services to the same one that I use for IIS, but there is really no need to have more than one web service and server side scripting language unless you are using more than one.
If you want to use IIS you have to be running Windows XP Pro or MCE, and can get it by putting in the Windows Installation CD and choosing to add IIS as an additional component. If you want to use Apache you can download it from the Apache website at http://httpd.apache.org/. IIS comes .NET and ASP ready which cannot used at all on Apache, but both Apache and IIS can be configured to use PHP. PHP can be downloaded for both Windows and Linux at http://www.php.net/downloads.php, along with instructions for how to configure on both IIS and Apache. If you want to use Java you can ether download JAS from http://java.sun.com/ along with the NetBeans IDE, or you can download Tomcat from http://tomcat.apache.org/.
For PHP, Java, and JSP though I prefer to use the Eclipse IDE. The Eclipse IDE can be downloaded from http://www.eclipse.org/downloads/, and comes with the ability to do Java. If you want to do PHP you can download a free plug-in from http://www.zend.com/en/community/pdt, and if you want to do JSP I recommend paying for the MyEclipse plug-ins at http://www.myeclipseide.com/.
Once you have decided on web services and language you will end up with with two IDEs: FlexBuilder and one dedicated to your server side scripting language of choice.
Setting up a Project
You want to create a project directory (through FlexBuilder) in your web root directory. Your web root directory is the directory setup to run web services you your computer. If you are running IIS the default web root directory is C:\inetpub\wwwroot, on Apache Windows the default directory is C:\Program Files\Apache Software Foundation\Apache2.2\htdocs, and on Apache Linux the default directory is /var/www/html/. All of these locations correspond to http://localhost/ using the web service that you are running.
You want to layout your project directory as follows:
- <Project Directory>: HTML page and scripts that execute your Flash SWF. - src: Flex source code, MXML and AS - html-template: templates for generating the HTML page used to run the Flash - service: service side scripting used to represent web services - data: data structure representations used by the server side scripting - settings: miscellaneous files for static content, for example CSS, a web services list...
It should also be noted that for larger projects the web servicing (the server side scripting in the service and data directories) may be located on another machine. In order for your Flex application to access content in an external location on the web, the root web directory of the server
This can be initiated in Flex Builder by specifying your root web directory as the workspace and creating a new project there. Then in the "New Flex Project" window specify the main source folder as "src" and the output folder as blank.
Once the project is created you also have to make sure that the runtime settings point to the HTTP location of the SWF file instead of the File location. This is done by changing the "URL or path to launch" in the Run Dialog for the project.
Laying Out the GUI
Once the project is created there is a single MXML file in your "src" directory, which is the root of the application. From this point it is best to divide up your application into packages based on sub-systems, presentation tier components, and classes used to represents data. It should also be noted that for larger applications you may want to separately group classes related to HTTP and other web services. For example if you had an application with several detailed panels, you may want to break each detailed panel into a separate class. The following is an example directory structure a flex application that divides it components by the following groups: Core Components (core), User Management Components (user), and Example (example)
- src: This is the source code directory - core: custom components used by all packages * MyFancyButton.mxml - user: components related for managing user accounts - data: data structures related to user components * UserRecord.as - interfaces: interfaces used for communicating with the user components * LoginInterface.as * ManageAccountInterface.as * LoginPanel.mxml * ManageAccountPanel.mxml - example: general components used for demonstrating Flex abilities - data: data structures used for the example components * CDRecord.as * WelcomePanel.mxml * MyProject.mxml
For example consider layout our a basic application that will display only the welcome screen as a custom component. First you would layout the entire GUI minus the welcome panel, which may look something like the following:
Next make a simple component named "WelcomePanel.mxml" in the "example" directory that inherits from "Panel."
Using State Transitions
Now that the application is laid out and there is a custom component that can be used, a state transition can be used to add the custom component to the application. In the "MyProject.mxml" component there is a "States" box that has a single state listed, which is the base state.
If you right-click on the base state and select the option to create a "New State," you can create a state called "WelcomeState" which can be used to display the welcome panel.
With the "WelcomeState" selected you can then drag and drop the "WelcomePanel" onto the "MyProject" component:
If you then reselect the base state the welcome panel will disappear, because the application goes back to its original state. If in the base state you select the welcome button from the menu panel and specify the "click" attribute to be "currentState='WelcomeState", when the welcome button is pressed the application will move from the base state to the "WelcomeState."
