SYS-CON Media
 Register Now!
Save $200
Register before October 17th to SAVE! ... and also receive a FREE copy of the Best-Selling AJAX Book, a $119 Value!
Untitled Document
2008 East
Platinum Sponsor
Untitled Document
2008 East Gold Sponsors
Untitled Document
2008 East Exhibitors
Untitled Document
2008 East Media Sponsors
Untitled Document
2008 Association Sponsor
SYS-CON Media
2007 West Sponsors
Goingtomeet.com Conference Directory
SYS-CON Media
2007 East Sponsors
Untitled Document
2008 SYS-CON Events

Can't Miss RSS Feed
Subscribe to the AJAXWorld.com RSS Feed & Get All The Conference News As It Happens!

2008: Decision Year for RIAs - October 20-22, 2008 San Jose


Make Your Flash Forms More FLEXible
Like what you can do with Flash Forms? Wish you could do more?

Want to make your Flash forms more FLEXible? Well, now you can! But, is there any point, you say, now that Flex 2 is out and effectively free (if you can make do without FlexBuilder)? Well, if you can go with Flex 2 then do so, but maybe like me, it's currently off limits to you...

Since a bunch of the work I'm doing right now is for Sun Microsystems, it's vital that the application runs on Solaris, and for now there's no sign of FlashPlayer 9, which is required for Flex 2, being near to release. Same goes for Linux and just about every portable device out there.

Assuming that you're not taking the Flex 2 route, read on...

Why don't we start by whetting your appetite? Take a look at Figures 1-4 for some ideas of the additional features available that you can't access directly from Flash Forms.

To use these controls as well as pretty much anything else Flex (version 1.5) has to offer you really need to know about just one thing: the PopUpManager. In Flex it's used to open a new window dynamically on top of the calling application or window.

If you're not already familiar with Flex, I'd suggest you start by looking at Adobe's Flex 1.5 documentation at livedocs.macromedia.com/flex/15/.

Here's the ColdFusion code needed to load the Flex code:

<cfform format="Flash" height="600" width="800" onLoad="initApplication()">
   <cfformitem type="script">
     function initApplication()
     {
       mx.managers.PopUpManager.createPopUp(this, Demo1, false);
     }
   </cfformitem>
</cfform>

As you can see, it's somewhat minimal: Simply a <CFFORM> tag that defines the height and width of my application, and an "onLoad" attribute that calls an embedded function (initApplication) that has a single line of code - the call to the PopUpManager. And that is all! ColdFusion simply provides a wrapper. Everything else is now done in Flex (MXML) code.

The createPopUp function has the following parameters:

  • parent: Movie clip that will be the window's parent. Just use "this" to open as a child of the root flash form.
  • className: Classname of the object that will be created.
    modal: If true, then the user can no longer access any of the application outside of our window until it's closed. Useful, but not needed for our main window.
  • initObj: This lets us set parameters in our MXML file or pass data to it.
  • broadcastOutsideEvents: Boolean value that determines if flash should generate mouseDownOutside events if we click outside of the window. Again, not needed for our examples.
My example opens a non-modal window as a child of the flash form. And the interesting part: the second parameter tells it to load an MXML file: Demo1.mxml. Yes, it loads an MXML file! This is what opens up the world of Flex to us since you can write pretty much anything in the native MXML and simply use it in this manner.

As you can see below, the MXML code for these demos is also very simple. (Note: The code below is simplified; see Listings 1-4 for the full code).

Demo1.mxml (Figure 1)
<mx:Canvas>
<mx:HSlider/>
<mx:HSlider/>
<mx:VSlider/>
</mx:Canvas>

Demo2.mxml (Figure 2)
<mx:Canvas>
<mx:TitleWindow>
<mx:FormItem>
<mx:NumericStepper/>
</mx:FormItem>
<mx:ControlBar>
<mx:Button/>
<mx:Button/>
</mx:ControlBar>
</mx:TitleWindow>
</mx:Canvas>

Demo3.mxml (Figure 3)
<mx:Canvas>
<mx:MediaPlayback/>
<mx:MediaDisplay/>
<mx:MediaController/>
</mx:Canvas>

Okay, so these demos are interesting, but if you're happy with the controls provided by ColdFusion Flash Forms then why bother? Well, if you've ever tried to write anything larger than a few forms, then chances are you've run into the dreaded 32k or 64k limit error. Build your applications this way and I doubt you'll see one of those again. Instead of cramming all the different forms and their associated code into a single form, thus rapidly reaching the size limitation, you can put each form into a separate MXML file, each of which has its own size limits. You can effectively build an application as large as you want.

I've built a large application for Sun using this technique. It loads faster than a normal Flash Form, presumably because it doesn't have to process the form tags to build the MXML. It consists of a main page with a tab navigator. Each tab has multiple form elements, and each opens a whole range of different pop-ups, many of which open further pop-ups. I made extensive use of the modal attribute of the createPopUp function since this means I don't have to worry about the user accessing anything but the topmost window.

If you have access to FlexBuilder then you have the added benefit of being able to build your forms visually, which is a welcome relief after fiddling for hours with CF tags to get the layouts just right.

A word of warning: take small steps! The compiler will warn you about some errors, but mostly you'll just get a blank screen if you have something wrong. Check the logs and you're unlikely to find anything more useful than a Java null pointer error.

You'll want to edit the flex-config.xml file on your development machine to give you as much debugging information as possible (typically located at C:\CFusionMX7\wwwroot\WEB-INF\cfform\flex-config.xml). Locate and change the values listed below, then restart the ColdFusion service.

show-all-warnings : true
show-binding-warnings : true

While you're editing this file, two other items of interest are:

  • accessible: If set to true generates screen reader accessible flash forms. This adds about 64k to the size of the final generated SWF file.
  • global-css-url: Tells the compiler where to find the CSS file, which is used to determine how your forms will look. I set mine to "/global.css," which means it looks for a global.css file in the root of my Web server (thus allowing different CSS for each Web site on the server).
You can set default attributes for each of the controls and containers available to Flex, as well as setup styles that can be applied to individual controls via the "styleName" attribute present on all of these. See Listing 5 for a sample CSS file.

Hopefully simply discovering that you can use the PopUpManager to load native Flex has set your minds to thinking about all the things you can now achieve. I'm going to show you one more example showing a simple form with a modal pop-up. I'll show you how to pass a data structure back and forth, and also show you a way around a well-known Flex bug.

We start with a simple form that shows three fields and an edit button (note: The CSS file listed in Listing 5 has been used to style this form). Figure 5 shows our example page, and Figure 6 shows a popup form to edit the details.

As you can see in Listing 6, the three text fields are bound to values in userObj, the data that's initialized in the function initData() that's called when the form loads. When you click the edit button, this code is run:

mx.managers.PopUpManager.createPopUp(this, UserEditForm, true,{parentref:this,userobject:userObj});

This opens our pop-up form (userEditForm.mxml - see Figure 6 and Listing 7) as a modal window. It also passes two pieces of data to our new window: parentref, which allows the pop-up to communicate back to our main form, and userobject, the object containing our user data. Also note the function setUserData() that our pop-up window will use to send the edited data back to the main form. This is defined as a public function, not private like our other (internal) functions.

As with the main form, the TextInput controls' values are bound to the data object, this time to userobject, which was passed from the parent form:

<mx:TextInput id="namefield" text="{userobject.name}" />

Looking at the function saveUser you'll notice that we validate before saving (Figure 6 shows that our form input values are not validated!) by making this call:

if (mx.validators.Validator.isStructureValid(this,'userdata'))


About Ian Bale
Ian Bale is co-director of Celtic Internet ltd. (www.celticinternet.com), a UK-based software engineering and consultancy company. Ian has worked as a consultant since 1989 in both the telecom and Internet industries.

In order to post a comment you need to be registered and logged in.

Register | Sign-in

Reader Feedback: Page 1 of 1

I was wondering one thing, when you use flash forms and submit data to another cfm page, values are accessible as if they were normal forms (form.firstname, form.address ...), what happens in this case ? Would you have to use remoting to submit them ?
Regards,
Pim

Hi!
This article is really, really great! The possiblity of using MXML files in flash forms is unbelievable!
Why didn't you write this article one year earlier? :-) We could have used it really!

Thanks,
Fritz


Latest AJAXWorld RIA Stories
Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection between Coke and its customers. Digital signs pair software with high-resolution displays so that a message can be changed instantly based on what the operator wants to communicat...
In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and simple way to introduce Machine Leaning to anyone and everyone. He solved a machine learning problem and demonstrated an easy way to be able to do machine learning without even cod...
The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence. In her session at 21st Cloud Expo, Sangeeta...
Bert Loomis was a visionary. This general session will highlight how Bert Loomis and people like him inspire us to build great things with small inventions. In their general session at 19th Cloud Expo, Harold Hannon, Architect at IBM Bluemix, and Michael O'Neill, Strategic Busin...
DX World EXPO, LLC, a Lighthouse Point, Florida-based startup trade show producer and the creator of "DXWorldEXPO® - Digital Transformation Conference & Expo" has announced its executive management team. The team is headed by Levent Selamoglu, who has been named CEO. "Now is the ...
Untitled Document

Call 201 802-3020 or Click Here to Save $200!

Register Today and
Save $200

Your registrations includes: Golden Pass Delegates will receive full conference access on October 20-22, 2008 including: Lunch and Coffee Breaks, Collectible Bag and Archives of all sessions on DVD. Includes access to all Conference Sessions including the Technical Sessions, Exhibits, Keynotes, Vendor Technology Presentations, and Power Panels.


Sponsorship Opportunities

AJAXWorld offers the undisputed best platform to position your company as a leading vendor in the fast-emerging marketplace for AJAX and Enterprise Web 2.0.


Please call
(201)802-3020


Who Should Attend?

 CTOs & VPs of Engineering
 Directors of Technology
 Sr. User Interface Architects
 Front-End Engineers
 VCs & Industry Analysts
 Directors of Business Development
 Software Engineers
 Senior Architects
 Application Programmers & Software Developers
 Project Managers
 Web Programmers & Designers
 Companies & Organizations that need to stay in
  front of the latest Web technology

AJAXWorld Security Bootcamp

Introducing at AJAXWorld RIA Conference 2008 West the world's first-ever full, one-day immersive "AJAX Security Bootcamp" - led by one of the world's foremost AJAX security experts and teachers, HP's Billy Hoffman.

View the full one-day schedule



AJAXWorld 2008 West - Tracks

Track 01: Enterprise RIAs
Track 02: Frameworks & Toolkits
Track 03: Web 2.0 & Mashups
Track 04: Hot Topics
Track 05: The Future of the Web
Track 06: iPhone Developer Summit



Brought To You By:

AJAXWorld Magazine is the pre-eminent independent vendor-neutral resource for the fastest growing new segment of the software business: entirely Web-based applications and experiences.

Download the Latest Issue!

AJAXWorld Webcasts



SYS-CON EVENTS


AJAXWorld Keynotes & Power Panels

2008 SYS-CON TV Keynotes: Can We Fix the Web? By Douglas Crockford - by Douglas Crockford
2008 SYS-CON TV Keynotes: 2008: The Year of the RIA - by Anthony Franco
2008 SYS-CON TV Power Panel: The Business Value of RIAs
2008 SYS-CON TV Power Panel: What Lies Beyond AJAX
2007 SYS-CON TV Keynotes: Why Web 2.0 for the Enterprise Is Far More Than Just a Facelift - by Ted Farrell
2007 SYS-CON TV Keynotes: Fueling the Next Generation Web: A Peek Behind the Green Curtain - by Bob Brewin
2007 SYS-CON TV Keynotes: AJAX in the Balance - by Joe Stagner

AJAXWorld Sessions on SYS-CON.TV

· Bill Scott - Yahoo! UI Library
· David Heinemeier Hansson - AJAX on Rails
· Jesse James Garrett - Elements of User Experience
· Dion Hinchcliffe - Real World AJAX
· Eric Miraglia - Open Source AJAX Development
· Paul Rademacher - Mashing Up Your Web Application
· Adam Sah - Google Gadgets
· Doug Crockford - An Introduction to JavaScript
· David Linthicum - Enterprise Web 2.0
· Patrick Grady - The Imagination & Experience Web

AJAXWorld...All The AJAX Rock Stars in One Spot!


Past Events Archive

SOAWorld Conference & Expo 2008 East
soa2008east.sys-con.com
Virtualization Conference & Expo 2008 East
virt2008east.sys-con.com
AJAXWorld 2008 Conference & Expo East
ajaxmar08.sys-con.com
SOAWorld Conference & Expo 2007 West
www.soaworld2007.com
Virtualization Conference & Expo 2007 West
virt2007west.sys-con.com
AJAXWorld 2007 Conference & Expo West
ajaxoct07.sys-con.com
SOAWorld Conference & Expo 2007 East
soa2007east.sys-con.com
Virtualization Conference & Expo 2007 East
virt2007east.sys-con.com
AJAXWorld 2007 Conference & Expo East
ajaxmarch07.sys-con.com
Other SYS-CON Events
events.sys-con.com

Join Over 10,000 Early AJAX Adopters
Who Have Attended AJAXWorld
• A&R Edelman
• Academic Enterprise
• Accoona Corp [2 delegates]
• Acxiom
• Adams Capital Management
• Adaptive Edge
• Adaptive Path
• Adobe Systems Incorporated [21 delegates]
• Adobe Systems Romania
• Ajax13
• All Risks, Ltd.
• alliance
• Alliance For Community Care
• AlphaDetail Inc
• Altera Corporation
• Amazon.com [6 delegates]
• Appeon Corporation [2 delegates]
• Apple Computer [5 delegates]
• Apress [3 delegates]
• Arkivio
• ASA
• Astute Solutions
• Avaya Inc [2 delegates]
• Avenda Systems
• Avenue A | Razorfish [3 delegates]
• Axcella, LLC [2 delegates]
• Aximsoft
• Azimyth
• Backbase USA Inc. [4 delegates]
• BAE Systems [2 delegates]
• Bank of America [2 delegates]
• Barkley Evergreen & Partners Interactive
• Bayview Financial [2 delegates]
• BEA Systems [3 delegates]
• Billeo
• BMC Software, Inc. [2 delegates]
• Borland Software Corporation
• Bradford Technologies, Inc [2 delegates]
• Brilliance
• Brocade Communications Systems, Inc. [2 delegates]
• Brookside Capital LLC
• Brulant
• Bungee Labs, Inc [6 delegates]
• Bureau of Labor Statistics
• BUZ Interactive
• Cadena Software
• Calix Networks
• Callidus Software [2 delegates]
• Cambia Security
• Carnegie Mellon West
• Cautella, Inc.
• CBSA
• Celequest [3 delegates]
• Change Vision, Inc.
• Charles E. Kenney, CPA
• Charles Schwab & Co., Inc. [8 delegates]

   read more...


ADVERTISE   |   MAGAZINE SUBSCRIPTIONS   |   FREE BREAKING-NEWSLETTERS!   |   SYS-CON.TV   |   BLOG-N-PLAY!   |   WEBCAST   |   EDUCATION   |   RESEARCH

.NET Developer's Journal - .NETDJ   |   ColdFusion Developer's Journal - CFDJ   |   Eclipse Developer's Journal - EDJ   |   Enterprise Open Source Magazine - EOS
Open Web Developer's Journal - OPEN WEB   |   iPhone Developer's Journal - iPHONE   |   Virtualization - Virtualization   |   Java Developer's Journal - JDJ   |   Linux.SYS-CON.com
PowerBuilder Developer's Journal - PBDJ   |   SEO / SEM Journal - SJ   |   SOAWorld Magazine - SOAWM   |   IT Solutions Guide - ITSG   |   Symbian Developer's Journal - SDJ
WebLogic Developer's Journal - WLDJ   |   WebSphere Journal - WJ   |   Wireless Business & Technology - WBT   |   XML-Journal - XMLJ   |   Internet Video - iTV
Flex Developer's Journal - Flex   |   AJAXWorld Magazine - AWM   |   Silverlight Developer's Journal - SLDJ   |   PHP.SYS-CON.com   |   Web 2.0 Journal - WEB2

SYS-CON MEDIA:   ABOUT US   |   CONTACT US   |   COMPANY NEWS   |   CAREERS   |   SITE MAP
SYS-CON EVENTS  |  AJAXWorld Conference & Expo  |  iPhone Developer Summit  |  OpenWeb Developer Summit  |  SOA World Conference & Expo  |  Virtualization Conference & Expo
INTERNATIONAL SITES:   India  |  U.K.  |  Canada  |  Germany  |  France  |  Australia  |  Italy  |  Spain  |  Netherlands  |  Brazil  |  Belgium
 Terms of Use & Our Privacy Statement     About Newsfeeds / Video Feeds
Copyright ©1994-2008 SYS-CON Publications, Inc. All Rights Reserved. All marks are trademarks of SYS-CON Media.
Reproduction in whole or in part in any form or medium without express written permission of SYS-CON Publications, Inc. is prohibited.