The Dynamic SRC of IMG

Forta's post, Serving Images From Databases, about changing the SRC attribute on IMG dynamically to get image directly from database rather than a static SRC, has been quite active even though the post was dated on June 6, 2005. I'm still receiving comments from thread to date, this is probably the longest running post.

What intrigues me about the post is not about serving directly images from database, it's the use of dynamic SRC on IMG that I find fascinating. Recently, I need to integrates charting on project, and I wanted charting engine that's simple to setup and fast to render, OWTChart comes to my mind. I've used OWTChart prior to ColdFusion 5, I find OWTChart a superior CGI charting engine, and to set up and use the engine takes no more than 2 steps:
1. Dropping the OWTChart CGI program to CGI path of Web server
2. Pass an URL to OWTChart to get a streamed chart.

Combine OWTChart with dynamic SRC on IMG, you get an easy and yet powerful charting solution: no Applet, no Jar, no server-side coding, just plain Javascript to drive the charts. Here a sample usage to get a line chart:

<script>
var chartWidth = "600";
var chartHeight = "374";
var chartPath = "http://server/cgi-bin/owtchart.exe";

function getChartPath() {
    return chartPath;
}

// util functions for OWTChart
function getLineChart(chartType,chartWidth,chartHeight,values,labels) {
    return chartPath + "?Type=" + chartType + "&W=" + chartWidth + "&H=" + chartHeight +
                "&NumSets=1&NumPts=" + values.split(",").length + 
                "&Vals=" + getLineChartValues(values) + "&xlabels=" + getLineChartXLables(labels);
}

function getLineChartValues(values) {
    var aValues = values.split(",");
    var chartValues = "";
    for (var n = 0; n < aValues.length; n++) {
        chartValues += aValues[n];
        if (n < aValues.length - 1) {
            chartValues += "!";
        }  
    }     
    return chartValues;    
}

function getLineChartXLables(labels) {
    var aLabels = labels.split(",");
    var chartLabels = "";
    for (var n = 0; n < aLabels.length; n++) {
        chartLabels += aLabels[n];
        if (n < aLabels.length - 1) {
            chartLabels += "%3B";
        }  
    }     
    return chartLabels;    
}
// end util functions

function getChart() {
var chartType = "Line";//"3DLine";
var myChart = document.images["myChart"];
myChart.height = parseInt(chartHeight)+50;
myChart.width = parseInt(chartWidth)+30;
   myChart.src=getLineChart(chartType,chartWidth,chartHeight,
some_y_value_list,some_x_value_list);
        document.getElementById("chartArea").style.display = "block";
        scroll(0,parseInt(chartHeight)*1.5);
}
</script>

<div id="chartArea" style="display: none">
<img id="myChart" name="myChart" src=""/>
</div>

Now now that you need is to call getChart() to get a line chart from OWTChart, and the chart is rendered on myChart IMG. Simple as pie! 
¶ 10:25 AM comments(1)

Open source ColdFusion

Rinehart offers DHTML custom tags component, jComponents 1.0, for a fee. The component looks great but for a fee? I'm not sure about this, but I guess we all have different value system. You can get about the same set of custom tags plus the power of DHTML form client with qForms, all for zero fee. And it's absolutely free: Rich DHTML client.

I think ColdFusion communitity should start adopting the spirit of open source development before losing it all to open source projects like Spring and Mono. 
¶ 11:28 AM comments(3)

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
---------------------->

<content:markup>
<content:head>

<!--------------------------------------------------
Business model to client-side form model
---------------------------------------------------->

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

<!---// 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">
</form:controller>

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

<!--------------
Remoting
---------------->

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

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

</content:head>
<body>
<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:group>
<form:control name="action" type="submit" value="submit" id="action">
</form:submission>
<!---// end form controls ----------------------------------------->

</layout:box>

</body>
</content:markup>
<!---// 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.
 
¶ 9:58 PM comments(25)

cfspring, seriously

I really miss ColdFusion! After two months in between jobs and now I'm in a Java solution shop. How I wish the Java world could provide something close to ColdFusion on front-end development like Mach-II. Mach-II is still the best MVC framework that I've known of, especially the way it handles composite views by making one view as variable in the other. Tiles is still far behind in that sense.

I've come to know Spring in my new job here. It's a very powerful framework which consists of MVC, transaction management, ORM(object/relation mapping), and most of all, all the core components are loosely coupled, for example, you can switch MVC framework to Struts , even Java port of Mach-II(is it available now?), if you're more familiar with any of them than SpringMVC. You can do the same on persistence layer, i.e., switching between Hibernate, iBATIS, or any other ORM in the future. This is really cool! Any chance of seeing cfspring the road ahead?
 
¶ 12:33 AM comments(2)

Lords of the Blackstone

I had an entry entitled ColdFusion MX Blackstone Alpha posted on 2004/04/14. As the name suggests, it's about the next version of ColdFusion MX (7.0) code name Blackstone which is currently on alpha. Being a big fan of and a developer on ColdFusion platform, I do what most developers do: read the new features and install the distribution. And like what most developers will not do: read the use-of-software agreement. The latter caused me trouble a month later.

This next version of ColdFusion MX includes lots of great new features that I couldn't resist but to share my excitement on my blog. Exactly a month from my post (ya, I know, my blog is very little known) I received response from Macromedians stating the post is in violation of NDA (Non Disclosure Agreement) for the alpha distribution.

I must say I was both shocked and embarrassed by my seemimgly innocent act. A reader of the entry was quick to point out that the content of the post was indeed found in some other posts by Macromedians themselves including: Forta's and the new one, Buntel's . I merely repeated the new features and nothing "secret" was revealed as far as I'm concerned. Of course I was suggested to remove the entry and I did.

Now, I'm not denying the NDA violation but I think you have to be the Lords in order to talk about the Blackstone.
 
¶ 7:06 PM comments(0)