TechnoReaders.com

As a web developer you’ve often found yourself wishing there was a way to make web applications that weren’t limited to the heavy restrictions of HTML. You’ve used JavaScript to make your forms a little more intuitive with dynamic/context driven comboboxes, but to do anything more often requires heavy amounts of JavaScript and DHTML. Even if you are a pro at it, it’s extremely time consuming to make workflow interactive and user friendly. More importantly, why would you want to be spending so much time on core UI functionality when you’re getting paid to work on business logic and workflow.

Adobe/Macromedia Flex takes you to the next level of web application development with the concept of Rich Internet Applications (aka RIAs). You may have seen applications developed natively in Flash itself and realized that it offers a much more robust experience for the user where productivity is bolstered by ease of use, streamlined workflow, and real time interactivity that is impossible to accomplish in HTML itself. However developing rich applications in Flash for those who are core developers is daunting and unintuitive. The Flash development tool is geared for designers, and developing on a timeline is a strange concept. Flex removes that barrier to entry by providing a programmatic way for developing these RIAs.

Rich Internet Applications

What is an RIA anyways? Well HTML applications are state-less. Application servers maintain state by using cookies and session variables to keep track of users, but all the logic is on the server. So while a user is looking at a page in their browser, the application is unable to do anything until the user commits an action that sends data from the page back to the server for processing. The code processes the data, and generates resulting HTML that the browser loads back in.

A simple example would be a report or search tool that queries a sales/CRM database based on various criteria from the user such as deal time frame, product group, and sales executive. The user enters these values, clicks on a submit button, and the browser goes blank while it waits for a response from the server and loads the resulting HTML which would be a tabular list of records that match the criteria:

Time Frame From

To

Product Group

All Adapters Routers Hubs Switches

Sales Exec

All Jeff Smith Bob Gordon John Sykes

Deal Initiated	Product Group	Product	Sales Exec	Value ($)
04/03/2005	Adapters	ADPR2D2	Jeff Smith	100K
04/10/2005	Switches	SWC3PO	Bob Gordon	142K

Look familiar to anything you’ve done? Now if the user wants to change the parameters, or perhaps sort on a particular column, typically the page would need to be sent back to the server where it rebuilds an up to date report based on the new criteria. Pretty standard stuff for Coldfusion, JSP, PHP, ASP, or any other servlet language.

In the Flex world, your application wouldn’t need to post a request to the server every time the user made a change. Instead of the logic living purely on the server side, your presentation tier is all on the client. So imagine changing filters or criteria, and the table automatically updating as a result. Imagine clicking on a column title and the column automatically sorts without reloading the page. This saves hits to your web server, application server, database, and network. For one user this may not be a big deal, but what about 1000 users, or 10 000 users?

HTML based applications are a series of HTML web pages; Flex applications are LIVE applications. A simple analogy is imagine Word or Excel being an HTML web application; vs the real application itself. It could be done; but the real application is aware of your mouse movements, every key stroke, and provides much more feedback to the user by using sound, animation, and other visual queues.

Even better, with the Flash Player penetration near 99% (version 7 is at 83%) you can provide this real-time rich experience on Unix, Windows, and MAC. Alternatively any richness you try to accomplish in IE using DCOM, ActiveX, and DHTML locks you down to particular platforms.

Flex vs Coldfusion (and other servlets)

For CFMX developers, Flex doesn’t replace CF (or JSP/J2EE/PHP/ASP/etc…). It’s a companion to your existing technology by being at the presentation tier, while your other Application servers provide the middle/business tier. It lets you focus on the client workflow, and not waste time building HTML tables and endless cosmetic logic.

I put together a simple example that demonstrates this, which you can download here. The attached file provides a static XML file; but you easily hook it up to a CF template which queries a database based on the parameters passed in via the URL and return back the up to date HTML.

The first example which uses Coldfusion:

It does a CFHTTP to the XML provider by passing in the sort direction parameters based on what column a user clicked on. After parsing the XML, it loops through the XML array with some basic styling to do alternating row colors. It’s roughly 40 lines or so, depending on how compact or readable you want to make your code.

The second example which uses Flex:

Since my web hosting company doesn’t provide Flex hosting I can only provide screen captures. The Flex version retrieves the exact same XML content as the Coldfusion one would. However the key notes to make in the above example are:

The Flex version is 2 lines of code. The Flex version’s columns are sortable AND re-sizeable with no page refreshing required. No time is wasted building basic UI elements (that is tables).Another common scenario we’re all used to is list & edit. As demonstrated above, often you’ll use a table to list data, and then present the user with an edit icon which let’s you edit that record, which posts a URL to the server, where the browser loads in an edit page where you make the appropriate changes, then hit submit, the server processes the update and then sends back the resulting HTML. That’s a mouthful! Why not edit right in the table itself; much like you would with Excel?The folks at iteration:two in their Flex Blog demonstrate this capability. Click on any row and you’ll see how it’s immediately editable. Since the application is live you don’t need that common update/submit button to post that change; the application knows an update was made and can commit those changes on the backend if nescessary.

Original Author :Click Here

Related Posts

• Flex and PHP
• Zend Platform 5250 Bridge
• Cookies Vs Sessions
• Remote debugging for PHP using Zend
• Object Oriented Programming in PHP
• Yahoo Re-Launched IndexTools As Its Web Analytics
• Take Automated Screenshots of Web Pages from Command Line
• Visual Studio 2008 Professional vs. Standard edition. Just what are the differences? Is it Features?
• Cookies in PHP
• Add Yahoo Messenger to your Website & Chat With Visitors