Flex Doc Team

I’m an Adobe writer assigned primarily to Flex Builder and the Flex SDK. I joined Adobe in October of 2007 and have spent the first few months learning and using Flex and Flex Builder.

I’ve recently completed my first Flex application, and am using this blog to write about my learning experience, and also to describe some of the concepts behind the application that make it work. Actually, these are two applications that work together, vRadio and RadioLoginDB.

These applications illustrate how to use Flex to create a master-detail application that accesses data from a PHP server, and also incorporates PHP sessions.

At the end of this posting is a list of documentation sources I used to learn how to create the applications. I also have links to the source files.

vRadio and RadioLoginDB applications

I have always been a fan of Community Radio, and in the past I’ve Googled “Community Radio” to find new stations to listen to over the web. I created the vRadio application to provide a Flex alternative that lists Community and Talk radio stations, providing details about each station including station name and location, station graphic, and clickable links to open the station. RadioLoginDB is a CRUD application to update the database of radio stations used by vRadio.

vRadio is a Master-Detail application, and corresponds to many type of applications that present stored data in a variety of presentation formats, and also provide forms for updating the data.

What is interesting about the the vRadio application is the way Flex handles XML data using the E4X format. By providing an XML feed into the vRadio application, the application displays the XML data in a tree view. When the user clicks a node in the tree, details are displayed.

The vRadio application stores the radio stations in a MySQL database, accessible from PHP calls on the web server.

Notice the link to Update Station List in vRadio. This link takes you to a log in page for the RadioLoginDB CRUD application. Upon successful login, you can update the MySQL database information inline in a Flex DataGrid, delete records from the DataGrid, or open a form to add new stations.

Using E4X to Access XML Data

The vRadio application implements an HTTPService that uses E4X to read XML generated by the php2xmlService.php on the server. php2XMLService reads a MySQL database containing details on radio stations. This allows the vRadio application to display the master-detail information about the radio stations.

To implement this feature, I first used a static XML file, radio_stations.xml, as the data source for the HTTPService. radio_stations.xml contained the information for a few radio stations, and allowed me to understand the structure of the XML document that was needed. I then put the radio station data into a MySQL database, and wrote the php2xmlService.php to echo the XML stream.

Flex Builder: Generating a CRUD Application from Database Wizard

Most of the working parts of the RadioLoginDB application are generated by the Create Application from Database Wizard, available in Flex Builder. The Database Wizard generates the CRUD application from the MySQL database of radio stations. This wizard generates the CRUD application in just a few mouse clicks, and is the starting point for the RadioLoginDB application, described below.

To run the wizard, first create a Flex project that access a PHP database. Then invoke the wizard in Flex Builder by selecting Data > Create Application from Database. The wizard guides you through creating the CRUD application. (Note: you can also use the Wizard for Flex projects that contain J2EE and ASP .NET database applications.)

The wizard generated the following files, which I subsequently modified:

• radio_stations.mxml


• radio_stationsScript.as


• Radio_stations.php

The wizard also generates the following files, which do not need customization for this application. However, to further refine this application, you might want to modify some of these generated files as well.

• Localhostconn.php


• XmlSerializer.class.php


• functions.inc.php

Customization of the Flex Application

The most significant part of customizing the application is providing a minimal level of security. I also customized the application to provide some ease of use features. Here are the customizations I made to the application:

• Added a Log In screen
  Access to the database is only allowed for authorized users.

• Implemented PHP sessions
  Prevent unauthorized access after a connection to the database has been made.

• Customized the DataGrid to make it more readable

• Customized the database update Form to enforce the correct entry of data into the database

Note: This example illustrates how to communicate between Flex and your PHP server. It does not illustrate a security model to use for your applications.

Implementing PHP Sessions

I want to take advantage of session support available with PHP to avoid unauthorized access to the database. Upon successful login with auth_login.php, a PHP session variable is set. I modified the generated Radio_stations.php to check for the session variable before allowing access to the database. If the session variable is not set, then the login screen from radio_stations.mxml appears.

Customizing the DataGrid

The generated DataGrid is a quite useful interface. It allows in place editing of database fields, allows you to delete entries, and opens a form for adding new entries. I made the following modifications to the DataGrid View:

• For each of the columns in the DataGrid, I customized the width of each columns. This improved the readability of the DataGrid
• I added a logout Button, to log out of the PHP session.

Customizing the Database Update Form

The database wizard generates a form to add new entries to the database. I modified this form to ensure that new entries are correctly formatted.

Here are the modifications I made:

• A dropdown list for the type of radio station (Community Radio, Talk Radio, etc.)


• A dropdown list for selecting the state (CA, MD, etc.)

I could also add validation to the URL fields and the fields for entering the height and width of the station graphic. I plan to implement this at a later date.

Documentation Links

Here are links to Flex documentation that I used to research creating this application:

Using an E4X Expression in a Data Binding Expression

Displaying XML-based DataGrids Using Dynamic E4X Expressions

PHP5 Quick Database E4X Queries
(I didn’t use this technique, but I think this article is useful.)

Creating Flex Projects
(For creating a Flex project that accesses PHP.)

Automatically Generating Database Applications

Getting Started Experience - ViewStack

ViewStack Navigator Container

Using HTTPService Components

Flex Quick Start Guide for PHP Developers

Source Files

• vRadio Application (vRadio.mxml )
• php2xmlService.php, server side application which accesses a MySQL database of radio stations, returning the contents encoded as XML. This service is used to populate Tree listing in the vRadio Radio Stations Pane
• auth_login.php, which authenticates users and sets a PHP SESSION Authentication variable upon successful login.
• RadioLoginDB Application, the CRUD application generated by the Flex Builder Create Application from DB wizard, and later modified to implement authenticated PHP sessions. Here are the files generated:
  • radio_stations.mxml
  • radio_stationsScript.as, which creates the gateway HTTPService that provides access to the MySQL database and contains various functions to perform the CRUD services. I modified this file to perform PHP SESSION authentication to the MySQL database
  • Radio_stations.php, generated by the Create Application from DB wizard to provide the PHP calls into the MySQL database.

Posted by Vince Genovese at 04:50 PM | Permalink | Comments (3)

Someone recently asked if there were any ways to fade text out in a Flex app without having to embed the font for that text. Currently, if you want to appkly the Fade effect to any controls that contain text in a Flex app, you have to embed the font so that Flash Player can do the fading properly.

This question led to an interesting thread that revealed a couple of alternatives to fading text without embedding the font. The result is that the SWF file size is smaller because it doesn't contain any font symbols.

First, here's code that embeds a font and defines a fadeIn and fadeOut effect:

[Embed("assets/MyriadWebPro.ttf", fontName="MyMyriad")]

public var myriad_font:Class;

...

<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>

<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>


<mx:Label id="label1" text="Hello World"  

            fontFamily="MyMyriad" fontSize="24"

            hideEffect="{fadeOut}" showEffect="{fadeIn}"/>

Here's the running example:

This app is 190K. It works very well because the Fade effect is applied directly to the control that uses an embedded font to render the text.

If you didn't embed the font, then the Fade effect would appear to fail: instead of a slow fade, you'd get a single instant where the text disappears. Non-embedded fonts don't include bitmap information for the Player to apply a Fade effect to.

Here's a running example that shows the failing fade on non-embedded text:

Now for the alternatives.

The first alternative is really clever: Apply the BlurFilter to the text before attempting to fade it in and out. When you apply a BlurFilter to text, Flash Player converts the text to a bitmap. Once the text is a bitmap, it can be faded in and out with the Fade effect. So instead of actually blurring the text with the BlurFilter, you just apply the BlurFilter with some dummy settings (0,0,0), and then you can fade the text with the Fade effect.

Here's the code that applies a BlurFilter to the text when the app initializes:

  private function addBlurFilter():void {

  var bf:BlurFilter = new BlurFilter(0,0,0);

  var myFilters:Array = new Array();

  myFilters.push(bf);

  label3.filters = myFilters;

}

When you toggle the checkbox, the Fade effect now appears to work seamlessly. Here's the running example:

The SWF file size is 165K. Adding the BlurFilter does not increase the SWF file size because you don't have to embed the font symbols. It might increase runtime memory usage because Flash Player now has to keep bitmap data in memory for that text, but it's still a damn clever trick, I think.

The second alternative is to use the Dissolve effect rather than the Fade effect. The Dissolve effect actually creates a rectangle over the target area, and applies a dissolve to the rectangle so that the underlying content appears to fade in and out.

Dissolve effects are set up and applied just like Fade effects:

<mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>

<mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>


<mx:Label id="label4" text="Hello World" fontSize="24" 

     hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>

Here's a running example:

As with the Blur effect, using the Dissolve effect does not increase the SWF file size because you don't have to embed the font symbols.

This ZIP file (2KB) contains the complete source MXML files for the three working examples in this blog entry.

Posted by Matthew J. Horn at 01:38 PM | Permalink | Comments (0)

The Adobe web team is rolling out new functionality to help Flex coders find the help resources they need.

Currently, the "Ion" project consists of a customized search engine that is populated with the best of the Flex-related resources on the web. You can access this new search feature directly at http://community.adobe.com/ion/. You can also search it by using the "Community-Powered Search" input on the Flex DevNet site.

Also part of Ion is the back end for commenting on Livedocs and DevNet articles. Prior to this, there was no commenting on DevNet articles, and the Livedocs commenting engine was much more restrictive.

This is just the beginning of the Ion project.

Posted by Matthew J. Horn at 01:24 PM | Permalink | Comments (1)

All users have access to the Flex 3 SDK source code. You can view the ActionScript source files for classes like Button and DataGrid. The source code is in the frameworks\projects\framework\src directory of your Flex installation. The source code for the data visualization projects does not come pre-installed, however. If you have a Flex Builder Professional license key, you can extract the data visualization source code, which include the charting controls, the AdvancedDataGrid classes, the OLAP classes, and the automation classes. To view your Flex Builder license key, select Manage Flex Licenses from the Help menu.

To extract the data visualization source code, you use the DMV-source.jar file. This file is located in the SDK's lib directory. If you are using Flex Builder, the lib directory is located at {Flex Builder 3}\sdks\3.0.0\lib.

The syntax to extract the data visualization source code is as follows:

> java -jar DMV-source.jar {license-file-location} {output-location}

The first argument is the location of the license.properties file. This file must contain a valid Flex Builder 3 Professional license key. The second parameter is the location that you want the data visualization source code to be extracted to.

If you installed Flex Builder 3 Professional, then the license.properties file is located at the following locations, depending on your operating system:

• Windows: C:\Documents and Settings\All Users\Application Data\Adobe\Flex\
• Mac OS: /Library/Application Support/Adobe/Flex/
• Linux: ~/.adobe/Flex/

The following example extracts the data visualization source code to the c:\temp\dataviz_source directory on Windows:

java -jar c:\Flex Builder 3\sdks\3.0.0\lib\DMV-source.jar 
     "C:\Documents and Settings\All Users\Application Data\Adobe\Flex\" 
     c:\temp\dataviz_source

If you have a valid Flex Builder 3 Professional license key but did not install Flex Builder, then you can create a license.properties file anywhere, and point to it when you use the DMV-source.jar file. The syntax of the license.properties file is as follows:

flexbuilder3={license_key}

Posted by Matthew J. Horn at 01:42 PM | Permalink | Comments (3)

Here's a new example in the charting doc. It shows how someone might use some or all of an HTML page they load via an HTTPService tag as a data provider for their charting component. It includes logic to extract just the data from the target page.

The benefit to this is that if you have a wiki or blog that you can edit via a browser, you can build and update a data page without having to hit a database. The code extracts specially-tagged data from the HTML page, so even if it's part of a larger block of HTML, you can still extract just the data.

One thing to note: The target domain in this example works because it has a crossdomain.xml file. If you want to load a page from your own target domain, you must be sure that your target domain has a crossdomain.xml file in place, and that that policy file lets the domain on which the Flex app is running request data from it.

Here's the running example:

Here's the data page that drives this chart:
http://examples.adobe.com/flex3/exchangingdata/html/dataPage.html

You can download the source MXML file here:
HTMLDataProvider.zip (1KB)

The exact location of the data page is passed into the application as a flashVars property. To change the data page, you only have to edit the HTML wrapper for the SWF file.

In the HTML wrapper, we pass the target HTML page as a param in the <object> tag:

<param name="flashVars" value="dataPage=http://examples.adobe.com/flex3/exchangingdata/html/dataPage.html" />

And again as an attribute of the <embed> tag:

flashVars="dataPage=http://www.shallowpondestates.com/misc/dataPage.html"

Note that you can view the source of this blog entry page to see the complete object/embed tags.

In the Flex app, the data page is read from the Application's application.parameters property:

dataPage = Application.application.parameters.dataPage;

To initially get the page's contents into the Flex app, we use an HTTPService object:

<mx:HTTPService id="serviceInput" 

        resultFormat="text" 

        url="{dataPage}"

    />

To get the HTML in a single string we get the lastResult property of the HTTPService in the ResultEvent handler:

var htmlBlob:String = serviceInput.lastResult.toString();

And to extract just the portion of the data page that we need (the part between the "data starts here" and "data ends here" comments), we use the slice() method:

htmlBlob = htmlBlob.slice( htmlBlob.indexOf("<!-- data starts here -->", 0) + 25, htmlBlob.length );

htmlBlob = htmlBlob.slice( 0, htmlBlob.indexOf("<!-- data ends here -->", 0) );

We then do a couple more passes on the remaining HTML string to replace HTML entities with angle brackets, so that we will end up with well-formed XML:

var tagPattern:RegExp = /<[^<>]*>/g;  

htmlBlob = htmlBlob.replace(tagPattern, "");

			

var ltPattern:RegExp = /&lt;/g;

htmlBlob = htmlBlob.replace(ltPattern, "<");

			

var gtPattern:RegExp = /&gt;/g;

htmlBlob = htmlBlob.replace(gtPattern, ">");

At this point, we just need to pass the XML to the XMLList constructor so that it can be used as a data provider in the chart:

chartData = new XMLList(htmlBlob);

That's it. If you compile and deploy this app, you can use the provided data page, or create your own. If your data page is on the same domain as the application, then you do not need a crossdomain.xml file.

Posted by Matthew J. Horn at 12:19 PM | Permalink | Comments (3)

Adobe LiveCycle Data Services ES Beta 2 applications consist of two parts: client-side code and server-side code. Client-side code is a Flex application written in MXML and ActionScript and deployed as a SWF file. Server-side code is written in Java and deployed as Java class files or Java Archive (JAR) files. You can develop Adobe LiveCycle Data Services ES applications in Flex Builder, or in your own IDE. This article describes how to set up your development environment to compile, debug, and deploy LiveCycle Data Services ES applications.

Download the PDF: Building and Deploying LiveCycle Data Services ES Applications

Posted by Stephen Gilson at 05:07 PM | Permalink | Comments (0)

I just wanted to let everyone know that on Saturday, April 12th, from noon to midnight PDT, our network team will be performing maintenance on the cluster that includes examples.adobe.com. Due to this work, applications running on the example cluster will experience 1-2 minute network outages throughout the service window.  

Posted by Randy Nielsen at 08:48 PM | Permalink | Comments (0)

We're currently seeing a caching corruption problem with LiveDocs in which random files display instead of the correct pages. You'll see a variety of symptoms:
* The wrong page displays
* Infinite loops in the TOC (this happens when LD loads a .js file instead of an HTML file)
* Bad formatting (when a CSS file doesn't load properly)

The good news is that our web team has identified the bug that causes this. The bad news is that they're still testing the fix and it won't get rolled out until April 17.

I've had fairly random results over the last few days. Sometimes changing browsers helps, sometimes it doesn't; sometimes clearing browser cache fixes it, sometimes it doesn't. One suggestion is to download the complete Flex doc zip file, which contains usage docs in PDF and the Language Reference in HTML and access the docs locally.
This is available at http://livedocs.adobe.com/flex/3/flex3_documentation.zip. Individual PDFs are available from the Flex Help Resource Center page: http://www.adobe.com/support/documentation/en/flex/

I sincerely apologize for the inconvenience this is causing.
Randy Nielsen
Flex Documentation Manager

Posted by Randy Nielsen at 05:53 PM | Permalink | Comments (1)

Many Flex, Adobe AIR, Adobe BlazeDS, and Adobe LiveCycle ES developers choose to use the Eclipse plug-in configuration of Flex Builder so that they can develop Java code in the same IDE that they use to develop the MXML and ActionScript code. While the standalone version of Flex Builder does not contain tools to edit Java code by default, you can install them as Eclipse plugins. That lets you use the standalone version of Flex Builder to edit Java code.

To install the Java development tools in the standalone version of Flex Builder:

1. Use the Help > Software Updates > Find and Install menu command to open the Install/Update dialog box

2. Select Search for new features to install.

3. Click Next.

4. In the results, choose Europa Discovery Site.

5. Click Finish.

6. Select the Java Development package to install.

7. Click Next.

8. Accept the license.

9. Click Finish.

Note: You might be prompted to install additional plugins required by the Java Development package.

To change perspective:

1. Use the Window > Perspective > Other to access all perspectives.

You can also click the Open Perspective button in the upper-right corner of the workbench window, then select a perspective from the pop-up menu.

2. Select Java from the list of perspectives.

Posted by Stephen Gilson at 10:24 AM | Permalink | Comments (2)