Tuesday, August 10, 2004

Rich DHTML client

Recently, a lot of effort has been push on the so called Rich Client development which is either implemented as browser plugin like Flash MX, or as desktop application like Flex or Avalon. I wonder if DHTML client development would continue as a consequence. When I came to experiment on Mach-II, the "poor" View support on UI and, especially, form using DHTML really got me thinking. Shall I get into Rich Client development simply because of the View problem? The roadmap on XForms adoption seems like forever, XUL still seems too early to tell, and then I came across CFMX custom tags, cfimport and qForms. The combination leads me to the work of set of UI and form model tags. The result is shown in the code snippet below:

cfimport tag lib
<cfimport taglib="cftaglib/ui/form" prefix="form">
<cfimport taglib="cftaglib/gateway" prefix="gateway">
<!---// end cfimport ------------------->

the business model
<cfset user = request.event.getArg('user') />
<!---// end model -------------------------------------->

Prepare data for controller

<!--- setup validator --->
<cfset validator = StructNew()>
<cfset validator.usr_uid.validation = "LengthGT">
<cfset validator.usr_uid.condition = "5">
<!---// end validator --->
<!---// end controller data setup -------------------------------------------------->

Start of client code


Business model to client-side form model

<form:model name="form1">
<form:data objName="user" value="#user#">

<!---// end form model --->

Seting up for form controller

<form:controller wddxPacket="true">
<form:controlledItems validator="#validator#">
<form:controlledItem name="usr_hob" validation="NotEmpty" required="false" description="Hobbies">
<form:eventHandler type="onChange" handler="usr_uid" invoke="rmVerifyMemberId()">
<form:bind collectionList="user">

<!---// end setting up for controller ------------------------------------------------>


<gateway:client remoteHandler="mvcClientSample_wdxjs.cfm" onReceiveHandler="alertNonUniqueID">

<!--- // end remoting --------------------------------------------------->

<layout:box width="400px" type="blank">

Form controls UI
<form:submission action="#cgi.Script_name#?event=editUser">
<form:group name="User Profile">
<form:control type="hidden" name="usr_id">
<form:control label="User name" name="usr_name">
<form:control name="action" type="submit" value="submit" id="action">
<!---// end form controls ----------------------------------------->


<!---// end of client code -------------------------------------------------->

As you can see, DHTML is totally encapsulated with tags. Do you see any HTML or Javascript at all? I don't. You may download the set of custom tags and samples here. You may use it in anyway and anyform as you see fit. All the required files and libraries are included in the zip file. Simply extract to your webroot and browse to index.html and see how easy it is to develop Rich DHTML Client.
Software Culture
  03/01/2004 - 04/01/2004
  05/01/2004 - 06/01/2004
  07/01/2004 - 08/01/2004
  08/01/2004 - 09/01/2004
  09/01/2004 - 10/01/2004
  10/01/2005 - 11/01/2005
  Smart talk always right?
  Drools on AppFuse
  Braille, braille
  The Dynamic SRC of IMG
  Preferred Locale on AppFuse
  告訴你為什麼程式不 work
  絲綢之路 2000:致命病毒
  AJAX on AppFuse
  Meet Mr. Writely
  健檢, e檢
  Open source ColdFusion
  Rich DHTML client
  cfspring, seriously
  Where are they?
  An Architect's View
  Martin Fowler
  Loud Thinking
  Raible Designs   fullasagoog

Powered by Blogger