Creating a simple Layar with ColdFusion: a step by step tutorial

I have been doing a lot of mobile development recently. The jqtouch plugin for jquery is awesome by the way! If you have not had the delight of developing with it yet I highly recommend the plugin for you next mobile project.

Anyhow back to Layar, I was asked to produce a simple Layar for one of our clients. Layar if you don't know is a cool augmented reality browser for the iPhone and Android. Other phone operating systems have been announced and its set to come pre-installed on most phones by 2012.

Augmented reality is exploding in Europe and I really think it's the next big thing. Creating a Layar is supper easy but no tutorial seemed to exist showing how to create POI in ColdFusion so I decided to write a quick post from an asp.NET Layar I did a few weeks back.

Before you start...

Requirements

  • Webserver with ColdFusion 8 or Above (JSON support needed)
  • Android or iPhone 3GS or above (needs GPS and compass)
  • Gmail Account

You should know that a Layers consist of two parts:

Layer definition: Created using a web form on the Layar Publishing site. I will show you how to do that.<.p>

Points of Interest within a layer: Fetched directly from the Layer Service Provider via the API. We will do this in CF. I will show you a quick example of this here also

[More]

ColdBox M5 and 2.6.4 Playing Together Continued

This morning I had sometime on my hands to revisit how I had setup ColdBox M5 using refactoring. Following a comment by Jason Dean, who suggested it would be much easier to use application specific mappings with CF8+. So I decided to give it another ago.

When I first tried this I got an error due to Application.cfc extending the framework. As another comment pointed out ColdBox apparently since version 2.6 comes with a no inheritance version that instead of extending the framework bootstraps it. This would allow me declare my mapping before the framework is initialised.

view plain print about
1<cfset this.mappings[ "/coldbox" ] = expandPath( "/coldbox" ) />

This is why I love the medium I choose to express myself in and the CF community, because they are so helpful.

ColdBox M5 and 2.6.4 Playing Together

To do this without refactoring see: http://www.cfcoffee.co.uk/index.cfm/2010/5/2/ColdBox-M5-and-264-Playing-Together-Continued

Have you downloaded the lasted update from Luis, ColdBox M5? No? Well you should download it right now! So many new goodies, however running CB release M5 alongside my stable version CB 2.6.4 took me a while to set-up in my environment. I have been playing with the new update for a week, but only locally. Now I wanted to actually do something I would need to run it in an environment with an older version.

I run IIS6 and have CB 2.6.4 mapped in my ColdFusion Administrator. Any reference to coldbox/system will use this release. I wanted to run both versions so that my old applications running 2.6.4 still work!

As I found out this can be done very easily following ColdBox Refactoring Guide found here and the Ant Script found in the download. I had a few issues with this tho, not many but here is what I did....

Your set-up many differ from this, this is just my experience!

I Downloaded M5 from the the ColdBox site and placed it on my desktop following the instructions in the refactoring guide. I used ColdFusion Builder to run the Ant script not Eclipse but it's the same.

My default path for my CFC's is coldbox.system, this is mapped in my ColdFusion Administrator to shared/frameworks/coldbox/system. Because my new version is going to run inside the same 'framework' folder I entered not the full path to the new location as the guide shows but the Logical Path. This is my case would be coldbox3.system.

[More]

Learning ColdBox: Coldbox Proxy How Cool is This!

I had some CFGRID code I needed to implement into an existing ColdBox application. The grid run out of the box without any intervention from the ColdBox Framework. However it would be necessary for the CFGRID to access my service layer and properties injected from ColdSpring if I wanted it to take full advantage of the CB Framework. I assumed this would be a nightmare, I mean how to I get my AJAX grid to use the same reusable ColdBox and model code?

With ColdBox Proxy of course! The ColdBox proxy enables remote calls like AJAX to communicate with ColdBox and take advantage of all the goodies it has to offer, thanks ColdBox!

So how easy was it to get working? Very, it only took a few extra lines of code to work, really!

First I told my CFGRID to access the proxy directly and not the CFC.

view plain print about
1bind="cfc:admin.coldboxproxy.getAllproducts({cfgridpage},
2 {cfgridpagesize},
3 {cfgridsortcolumn},
4 {cfgridsortdirection})"

Next using the ColdBox proxy template already provided (which extends coldbox.system.extras.ColdboxProxy) I created a new function that works the same was as handlers in ColdBox.

view plain print about
1<cffunction name="getAllproducts" output="false" access="remote" returntype="any" hint="Process a remote call and return data/objects back.">
2 <cfargument name="page" type="numeric" required="yes">
3 <cfargument name="pageSize" type="numeric" required="yes">
4 <cfargument name="gridsortcolumn" type="string" required="no" default="">
5 <cfargument name="gridsortdir" type="string" required="no" default="">
6
7 <cfset var results = "">
8 <cfset results = getBean("storeService").getAJAXProducts(page=#arguments.page#,                     pageSize=#arguments.pageSize#,
9            gridsortcolumn=#arguments.gridsortcolumn#,
10            gridsortdir=#arguments.gridsortdir#) /
>

11
12 <!--- Convert Query for Paging --->
13 <cfreturn QueryConvertForGrid(results,page,pageSize)>
14</cffunction>

getBean("storeService") interact directly with the service layer. Once this was done I could then take advantage of my dependency injection framework and ColdBox features. How cool is that!

Persisting Values in ColdBox

I have never found a way to validate data I feel is 100% right for me, but I think I am getting close, let me explain.

I have a simple ColdBox 'view' containing my user form. This form is used to both create and update user's credentials.

view plain print about
1user view
2
3<cfoutput>
4 <fieldset>
5 <div class="fm-req">
6 <label for="firstname">First Name</label>
7 <input id="firstname" name="firstname" type="text" class="text" value="#rc.bean.getfirstname()#" maxlength="15">
8 </div>
9 <div class="fm-req">
10 <label for="surname">Last Name</label>
11 <input id="surname" name="surname" type="text" class="text" maxlength="15" value="#rc.bean.getsurname()#">
12 </div>
13 <div class="fm-req">
14 <label for="email">Email Address</label>
15 <input id="email" name="email" type="text" class="text" maxlength="100" value="#rc.bean.getemail()#">
16 </div>
17 <div class="fm-req">
18 <label for="username">Username</label>
19 <input id="username" name="username" type="text" class="text" maxlength="12" value="#rc.bean.getusername()#">
20 </div>
21 <div class="fm-req">
22 <label for="password">Password</label>
23 <input id="password" name="password" type="password" class="text" maxlength="20" value="#variables.PasswordEncrypt#">
24 </div>
25 </fieldset>
26</cfoutput>
view plain print about
1example handler
2
3<!--- Edit User --->
4<cffunction name="editUser" access="public" returntype="void" output="false">
5<cfargument name="Event" type="coldbox.system.beans.requestContext">
6 <cfscript>
7     var rc = event.getCollection();// RC Reference
8
var userBean = variables.adminUsersService.createAdminUserBean(); //Create adminUserBean
9
     getPlugin('beanFactory').populateBean(userBean);//the magic bean machine
10
     variables.adminUsersService.getUserByID(userBean);
11     rc.bean = userBean;
12     event.setValue("pageTitle","Edit System User");//Form H1 Title
13
     event.setValue("formURL","/users/updateUser?adminId=#rc.adminId#");
14     event.setValue("buttonValue1","Update User");//H1 Title
15
     runEvent(event='users.createUserTabs',private=true); // Create User Tabs
16
     Event.setView("user/edit"); // Set the View To Display, after Logic
17
</cfscript>
18</cffunction>

I use one handler to create a new user and another to update, the only difference is the update handler pre populates the object from the database. So far simple stuff. Next I needed to validate my input. Again simple, I would submit to an intermediate handler that would validate my data against the object. However my dilemma is what to do if validation fails!

view plain print about
1<!--- Validation --->
2<cffunction name="validation" access="public" returntype="void" output="false">
3<cfargument name="Event" type="coldbox.system.beans.requestContext">
4 <cfscript>
5     var rc = event.getCollection();// RC Reference
6
var userBean = variables.adminUsersService.createAdminUserBean(); //Create adminUserBean
7
getPlugin('beanFactory').populateBean(userBean);//the magic bean machine
8
    
9     errors = userBean.validateUserALL();//Check For Validation Errors
10
    
11     if NOTT ArrayLen(errors)){//No Validation Errors
12
    
13         if ( variables.adminUsersService.updateUser(userBean)) {//Update Was OK
14
             getPlugin("messagebox").setMessage("info", "User was successfully updated.");
15         }
16         else {//Could Not Update User Show Error Message
17
             getPlugin("messagebox").setMessage("error", "Sorry, for some reason this user was not updated!");
18         }
19        
20     setNextEvent('users.overView'); // Set the Event To Run, After Logic
21
     }//End Of No Validation Errors
22
    
23     else {//We Have Validation Errors Show The User A Message
24
getPlugin("messagebox").setMessage("error", "<b>The Following Validation Errors Occurred:</b><br />",errors);
25        
26 ///what to do here?
27
        
28 }
29
</cfscript>
30</cffunction>

[More]

ColdBox and OO, Really?

Starting at the beginning I wanted push my knowledge a little more and continue with my venture into OO. Although I can recall most of the theory from my JAVA days at University, applying some of the concepts within ColdFusion does not seem to fit and in some instances proven difficult to get my head around.

I have come to the conclusion if I want to try and apply OO concepts to ColdFusion I must not think of OO and JAVA but an adaptation of the principles of OO reborn for ColdFusion (where did that come from? lol). Anyway with that said I had an eureka moment last night, ok, it came with help from the guys on the messages boards @ houseoffusion. I posted some code not fully understand the direction I needed to go in. Using ColdBox and ColdSpring I wanted to create a 'simple' example of a login which would help me better understand how to use objects containing 'getters' and 'setters'.

As it turns out its super easy in ColdBox, so easy infact I was looking for the hidden catch! Below is what I ended up with. It shows a function that is run in my handler to process a form post from a login page.

[More]

ColdBox - SagePay VSP Driect Plugin

Now I am getting more to grips with CB I have recreated an ecommerce site using the framework. I have also created a simple plugin for the Coldbox Framework that allows you to integrate SagePay VSP Direct payment system in your website. It seems to work very well the site I used it on has been running the new plugin for few days, taking transactions with no errors.

In case you don't know, SagePay VSP Direct is a method of processing a transaction through the Sage Pay gateway using server to server communication with the customer remaining on your website throughout the whole process.

This plugin will setup, send and handle the response from their gateway. You will need an understanding of Sagepay and a SSL cert to use this plugin. Sage Pay only support UK merchants at the moment!

I will be adding some example of the handler, checkout forms, and cart to a zip download soon at the moment all I have included the plugin CFC code below.

[More]

CFIMAGE WRITETOBROWSER no alt tag!

Just a quick post on using 'CFIMAGE' with the action 'WRITETOBROWSER'. I noticed something which is not documented in the livedocs. When using the above tag I viewed the sourced code it outputted to the browser and it gave a completely empty alt tag, not good for accessibility! So I looked in the livedocs to see it there was an attribute for missing 'alt', but nothing!

Just out of pure boredom I added alt="something" to the CFIMAGE tag and guess what? No errors, could it have worked? Yes it did! Infact any normal image attribute seemed to work on CFIMAGE such as border="0" etc.

OK, so this is weak attempt at a blog post but it has me thinking, do Adobe not document such things often or maybe just because its common sense. Well either way I like it when things just work.

ColdEXT Helps With Consistency!

This week I found a gem and cannot put it down, I want to tell everyone! Justin Carter just made my use of the EXTJS library a lot clearer with his ColdExt tags. Everyone else seems to know about this already, but I didn't and just wanted to sing its praises.

I have a current application that uses EXT 1 and over the next 2 months I will be making major updates using EXT 2.0+ and this will really come in handy.

You cannot do everything with these tags and I have hit a few limitations but from what I can tell it's still a work in progress and if something is missing, you can use script directly within the tags so it does not really matter.

For me ColdExt looks like it will help me keep consistency with EXT 2.0 a little better than before, keep up the great work Justin Carter and if you read this, thanks for sharing!

SalesMaxx v4 screen shots using a mix of ColdExt

CFGRID Custom Delete

I am using an example I customised from Dan Vega's Blog on CFGRID. I wanted to add my own delete function to the grid and not using the delete="yes". The function needed to pass the selected ID to a CFC delete function. I decided to use my new found love of cfajaxproxy, what I am not sure about is if I have gone about doing this in the best way. I could not find any examples and my solution does work well, but I cannot help feeling I have gone the long way around this? Without knowing where to look I cannot be sure.


Anyway here is what I did, right or wrong it works.

Created the CFC (with has my delete function) as a JavaScript object.

view plain print about
1<cfajaxproxy cfc="live.components.orders" jsclassname="callordersCFC"/>

Setup my grid and buttons, just the delete button in this example.

view plain print about
1<InvalidTag type="text/javascript">
2function init(){
3 grid = ColdFusion.Grid.getGridObject("ordersSearch");
4 var gridHead = grid.getView().getHeaderPanel(true);
5 var tbar = new Ext.Toolbar(gridHead);
6
7//delete order button
8     tbar.addButton({
9 text:"Delete Order",
10 cls:"x-btn-text-icon",
11 icon:"./images/icons/package_delete.png",
12 handler:onDeleteOrder
13 });
14 console.log(tbar);         
15 }

[More]

More Entries

 

About Me

Glyn Jackson, 28 years old, MD and senior developer of a development firm based in Staffordshire called Newebia Ltd. Academic background in BSc Information System & Internet Commerce. Online marketing expert (EE Ranked) and .NET developer. Has been developing with ColdFusion for 5 years and loves it. "I am not a veteran in ColdFusion but I do work on challenging projects which help me learn more about ColdFusion and if I can contribute to the community in anyway then, it's all good!"

Recommends

  • ColdFusion