Posted in jQuery, ColdFusion | Posted on 12-15-2009 | 3,480 views
Last week I blogged my first set of examples from RIAUnleashed. Today I thought I'd share a few more. Specifically - these examples are both HTML/jQuery based and do not make use of Flex at all.
The first thing I thought I'd point out is that you don't need to use the CFaaS CFCs as webservices. The documentation seems to imply this. However, when I tested CFaaS with simple HTTP requests, everything worked fine. I guess I shouldn't be surprised but again, the docs had led me to believe otherwise. I worked up a few simple demos, but here is one that demonstrates one way you could use CFaaS in a non-Flex context.
2<cfset p = "password">
3
4<cfhttp method="post" url="http://127.0.0.1/CFIDE/services/upload.cfc?returnformat=json" result="result">
5 <cfhttpparam type="file" name="upload" file="/Users/ray/Documents/ColdFusion/ColdSpring_Reference.pdf">
6 <cfhttpparam type="formField" name="serviceusername" value="#u#">
7 <cfhttpparam type="formField" name="servicepassword" value="#p#">
8 <cfhttpparam type="formField" name="method" value="uploadForm">
9</cfhttp>
10<cfset res = deserializeJSON(result.filecontent)>
11<cfdump var="#res#">
12
13<cfhttp method="post" url="http://127.0.0.1/CFIDE/services/pdf.cfc?returnformat=json" result="result">
14 <cfhttpparam type="formField" name="serviceusername" value="#u#">
15 <cfhttpparam type="formField" name="servicepassword" value="#p#">
16 <cfhttpparam type="formField" name="method" value="extractImage">
17 <cfhttpparam type="formField" name="source" value="#res[1].value#">
18</cfhttp>
19<cfdump var="#deserializeJSON(result.filecontent)#">
This example begins by first uploading a PDF to the Upload CFC. This CFC provides support for uploading files to the CFaaS system. It stores it and returns a URL containing a dynamic link to your file. Here is the output of the first dump:
Now that we have a pointer to the file we can use it with the PDF service. In this case I run the extractImage method. The result is a list of image URLs for each and every image from the PDF:
Pretty simple, right? While I can't imagine why you would use ColdFusion to post to another ColdFusion server to use CFaaS, you could if you wanted to. Mainly I imagine this example being useful if translated to another language, like PHP. (Just take the number of lines of code above and multiple by 4.)
For my second example, I did something a bit fancier. I used Aptana Studio to create a new HTML-based AIR application. This example makes use of the Image service and converts an image (specified by a URL) to grayscale:
Ok, not exactly rocket science, but not something you can easily do in HTML (as far as I know - I do know that CSS does some cool filtering so it may actually support this!). The code behind this is relatively simple:
2
3<head>
4<script src="lib/jquery/jquery-1.3.2.js"></script>
5<script>
6$(document).ready(function() {
7
8 $("#doit").click(function() {
9
10 $("#result").html("Working...")
11 var source = $("#imageurl").val()
12 source = $.trim(source)
13
14 $.getJSON("http://127.0.0.1/CFIDE/services/image.cfc?returnformat=json",
15 {method:"grayscale",serviceusername:"cfremoteuser1",
16 servicepassword:"password", source:source},function(data,status) {
17 $("#result").html("<img src='"+data+"'>")
18 })
19
20 })
21})
22</script>
23<style>
24body {
25 padding: 5px;
26 background-color: #33ff33;
27 font-family:"MS Sans Serif", Geneva, sans-serif;
28}
29</style>
30</head>
31<body>
32
33<h1>jQuery CFaaS Demo</h1>
34
35<p>
36Enter an Image URL: <input type="text" id="imageurl"> <input type="button" id="doit" value="Make It Gray" >
37</p>
38
39<div id="result"></div>
40
41</body>
42</html>
As you can see, I simply bind to the doit button. When run, I execute a getJSON against a ColdFusion server, passing in all the information the method needs to work.
All in all - pretty fun to write. I'm still not sure where I'd use CFaaS yet in production, but the more I dig into it, the more impressed I get.
