Flex Test Drive in about an hour

According to the Flex Test Drive site, you can “Build an application in an hour”.  While that is definitely true for a simple application, I would say it takes a little bit longer in real life.  I started working through the Test Drive demo using the videos, which probably run less than an hour.  Since I am familiar with Flex/Flash Builder, it was easy enough for me to have the video running in the background while I built the application.  There were several times that I had to switch back to the video to get a better understanding of what needed to be done, but for the most part, I just listened and completed tasks.  I managed to complete the first module between last night’s post and about 9:45, which is around 2 hours.  However, I did have to upload the swf file to my website to see if it was working and my wife needed some attention on occasion.  Which means, I probably could have completed it in one hour, but I wasn’t timing myself.

The version of Test Drive I used required Flash Builder 4.5, which I was unable to upgrade to unless I buy an upgrade to the Master Collection suite. You save money by purchasing the suites, but in the long run, if you only need to update certain programs, it is a pain in the wallet.  Because I am on 4 and the demo was on 4.5, there were some small differences in the instructions.  When a search option is added, the search test field has a “prompt” option.  This is apparently a new feature with 4.5, because it is not available in 4.  Not a huge issue, but it will be interesting to see what else is new in 4.5 that will affect the Test Drive.

Overall, building this simple application was straight forward.  Creating stages was very simple in Display view.  Just create the stage, add components, create a new state and add different components.  Presto!  You now have to different stages.  Then it was as simple as adding a click option to a button to call each of the stages and then adding a very simple call.


currentStage = "stageIwantToPointTo";

The drag and dropping of data connectors was also very useful.  After you have your data connections working, you simply just drag and drop one onto a datagrid or form and do a few setup options and it is done.  Making a item detail view was also just as simple as a few drag and drops and some minor code.  The Test Drive so far could probably make anyone believe they could create awesome applications in no time at all.  However, you are just creating basic applications very quickly.  As noted in the last video of the first module, the instructor explains that doing a search to filter the employee table by calling the web service is not a smart thing to do.  Each time a search or refreshing to show all records was done, it did a call to the web service to get the data.  The instructor points out that it would be better to only call the data once and then use filters in the application to show what was needed.  It doesn’t look like Test Drive actually goes over this, so the newbie Flex/Flash Builder user will have to figure this out on their own or possibly through another set of tutorials.  For now, here is the result from last night’s work.

On a side note, apparently either Flex or Zend or something triggered a bunch of Twitter Spambots or something, because the Twitter widget on the Demo site is now filled with pointers to Zend post I created last night.  I guess it helps with search engine links or something, I don’t know.  I find it kind of funny.

Zend AMF and Flash Builder

While I was pondering creating the Flex/Flash test application for the Demo site, I ran across Flex Test Drive.  I remember reading it before and couldn’t remember why I didn’t go through with the example….then I tried connecting to the php web service.  The Flex Test Drive gives you three options for a server:  Java, PHP and ColdFusion.  I don’t have a ColdFusion or Java option on my hosted website, so PHP was the way to go.  I also didn’t want to bother installing a web server locally, because I want to post my examples on my site.  Because of this, installation is probably not as straight forward as I hoped it would be.

The first part of Flex Test Drive creates the starting application, which you choose the server backend.  Since I wanted to use my website as the server, I put in http://demo.deanlogic.com for the Root URL.  The example points to a local web server, so this is where I started to diverge from the game plan.  The next part was to create a database using MySQL server and then add some basic components to the application.  All of that went fine, after a few short hick-ups in the sql statement to populate the tables.  The next step is connecting to the database using the PHP remote connection and that’s where I got into trouble.

The PHP remote connection uses Zend AMF, which is part of the Zend Framework. Apparently in Flash Builder 4.5, the integration is even closer.  However, part of the setup of the PHP Zend AMF connection adds the Zend Framework to the application directory.  Once that is added, you have to updated the amf_config.ini file to point to the framework and library directories.  This is were it got a little confusing for me.  Since the initial directories are locally on my PC, I didn’t know which directories to use; UNIX or Windows.


[zend]
;set the absolute location path of webroot directory, example:
;Windows: C:\apache\www
;MAC/UNIX: /user/apache/www
webroot = /home/users/web/deanlogiccom

;set the absolute location path of zend installation directory, example:
;Windows: C:\apache\PHPFrameworks\ZendFramework\library
;MAC/UNIX: /user/apache/PHPFrameworks/ZendFramework/library
zend_path = ZendAMF/Zend/ZendFramework/library

[zendamf]
amf.production = false
amf.directories[]=services

My first attempt was to use the UNIX directories, but it would end up with not being able to find the include files.  I even downloaded the ZendFramework from the Zend site and loaded it up to my site.  Nothing seem to work.  I even tried altering the gateway.php file to point directly to the directories without using the check code included.  Going directly to the gateway.php on my website would show the same error I was getting when connecting.  So, I figured I could modify the init file until that error went away.  After several attempts at different directory options, I finally saw “Zend Amf Endpoint” on the gateway page.  Woo hoo!!

Unfortunately the PHP remote connection still wasn’t working, which is when I noticed that it said something about the release folder and the gateway file.  When I initially deployed the Flex application, it was under the bin-debug folder, while the ZendFramework was a few levels higher.

By moving all of the deploy files to the same level as the ZendFramework folder, I finally got the PHP Zend remote connection to work.  When the connection works, it uses the EmployeeService to get information from the database to be used in the rest of the Test Drive demonstration.

Hopefully later I get the directory setup so it is a little cleaner.  It seems that everything I add just drops into the main folder.  The Dreamweaver Widgets did this as did the CSS from the style sheet.  I prefer things to be much more organized.  But, for now, I’m glad the data connection is working so I can move on with the Test Drive.