MG:U series, interlude

I am planning out the next few steps in our ModelGlue:Unity series and would like to tally a vote. Currently our Contact-O-Matic is barebones. We went over how to use portions of ColdSpring to manage our service and to pass in configuration parameters. We also went over adding ModelGlue results to change the programmatic flow of the application. Following this pattern, you should have a good base on ModelGlue:Unity.

However, apart from the tabs, it has a plain-jane look and feel. Heck, it doesn't even save the contacts for very long ;). Before all is said and done, we will add in database persistance, security, the Transfer ORM and some Ajax.

We are going to need to put database persistance really soon as it is keeping us from our larger goals. After that, there are three different paths we can go.

In the spirit of Choose Your Own Adventure ( man, I loved those books ) which would you rather we tackle next? The choices once again:

  1. Easy MG:U Security
  2. MG:U scaffolding with Transfer ORM
  3. Ajax Enhancements

Also, if you are following along with the series, please leave a comment or send me an email with the database you use on your development server. I am going to make an effort to be as cross-DB as I can....

So you want to create a ModelGlue:Unity application? ( Part 5 )

Previously in this series, we installed the ModelGlue:Unity framework and the ColdSpring framework. We used the ModelGlueApplicationTemplate as the skeleton, added our basic flow and navigation. We can save and list contacts and our validation is working nicely,

In this section of our Contact-O-Matic, we will pull out the contact types values from coldspring and used them to add defined categories to our contacts. In a previous segment, we added the Contact Types as a 'map' in ColdSpring, now we will pull out the values and add them to our form.

[More]

ColdFusion list functions in Javascript?

How many times have you wished for that?

ColdFusion is tops at list parsing. I remember back in the day all my data structures were either lists or structs. With some combination of structs and lists, I could solve anything. Of course, that was before UDFs and Components and all that.

Anyways, Topper at cftopper has made available javascript functions that operate on lists. The wait is officially over. No more tossing about with ugly looking arrays.... ;)

Have a look

UPDATE: There are at least two three other CF/Javascript projects out there:

1. From Leftcorner JavaScript Library of ColdFusion Functions.

This is a JavaScript library that emulates many ColdFusion functions. It is useful for ColdFusion developers who are new to JavaScript or who want to maintain consistency in a ColdFusion and JavaScript mixed application. It is also useful for developers who prefer the ColdFusion (and Visual Basic) syntax of invoking functions.

2. From Shlomy Gantz CFMLjsLibrary

Basically it is a translation of ColdFusion functions to javascript.

3. For the JQuery fans from Christopher Jordan CFJS for jQuery is a set of ColdFusion functions written for JavaScript and can be accessed as $.funcName();

Customizing Flex Components at NYFLEX

On January 18th, Michael Labriola presented 'Customizing Flex Components' to the New York Flex user group. There was a bit of bad weather which kept roughly half of the 40 prospective attendees from making the meeting. Those of us who went were in for an excellent presentation from a man who really knows his Flex.

In Flex, components are essentially wrapped functionality, quite similar to custom tags in CFML. You can extend a particular component with ActionScript 3 to have custom appearance or behaviors or whatever else you can dream up. When complete, the result is a new tag to use in your flex code.

In addition to what was the most comprehensive overview of the Flex framework and the internal states, we were also shown the underlying ActionScript code of the Flex Framework. This is quite useful when extending components as it is easy to find out what behaviors and parameters are available to subclasses. Now, when I wonder why a particular component behaves in a certain way, or if I can pass it an ArrayCollection in place of an Array, I know where to find my answers. This has already saved me hours of scanning the web, the flexcoders list and the help files.

I am a big fan of the "Teach a man to Fish..." theory and appreciate knowing how to get myself out of those sticky Flex knots I seem to get myself into.

Shlomy Gantz the leader of the NYFLEX user group, consistantly puts together practical sessions from excellent members of the Flex community. If you happen to be in NYC when the NYFLEX group meets, definately stop in.

Michael Labriola, one of the authors of Adobe Flex 2: Training from the Source, is an engaging and entertaining speaker. He is also very generous with his time. Baz Karam and I bent his ear for a while after the meeting, peppering him with question after question. Michael answered all of our questions clearly, insightfully and patiently. I can't say enough good things about him.

Michael is a principal with www.digitalprimates.net so if your organization is in need of a top Flex consultant to train your team, I give him the highest recommendation.

3436 Views Print Print Comments (0) Flex

So you want to create a ModelGlue:Unity application? ( Part 4 )

Previously in this series, we installed the ModelGlue:Unity framework and the ColdSpring framework. We used the ModelGlueApplicationTemplate as the skeleton, added our basic flow and navigation. Finally we can save and list contacts Our Contact-O-Matic is moving right along.

In the last segment, we tested the 'failure' path and were routed back to the form. We also tested the 'success' path and were routed to the contact list. Open the ContactFormBean.cfc located in *ContactManagerMG/Model and edit the validate function (You did check the validate box in the rooibos generator like the last series said, didn't you ;) )

Our validate function should have the returntype of boolean. We will pass in a structure to hold any error messages and check the lengths of our two properties ContactName and ContactType. Your validate function should look like this:

[More]

So you want to create a ModelGlue:Unity application? ( Part 3 )

Previously in this series, we installed the ModelGlue:Unity framework and the ColdSpring framework. We used the ModelGlueApplicationTemplate as the skeleton then we added our basic flow and navigation. Our Contact-O-Matic is moving right along.

In this segment of our regularly scheduled programming, we look a bit deeper into ColdSpring, add the contact form and contact list.

[More]

Download Download

So you want to build a ModelGlue:Unity application (Part 2)

Previously in this series, we installed the ModelGlue:Unity framework and the ColdSpring framework. We used the ModelGlueApplicationTemplate as the skeleton for our new Contact-O-Matic 1.0 alpha (don't worry, we'll eventually make this a Web 2.0 application). We rejoiced when we ran our application and now will look at some essential information about our new set-up.

Let's begin with opening the Application.cfm file and giving our application a name. Set the name attribute of the application tag to 'ContactManagerMG'. If for some reason, you already have another application on your server with the name of ContactManagerMG, put another name here.

Next, as ModelGlue uses ColdSpring for configuration, let us look at some key sections of the framework config. Open the *ContactManagerMG/config/ColdSpring.xml file in your editor. There are two beans defined by default, one with the id of 'modelGlueConfiguration' and one with the id of 'reactorConfiguration'. The 'reactorConfiguration' bean is for yet another framework you could use with ModelGlue. We won't need the 'reactorConfiguration' for this series and you may delete that bean from your ColdSpring.xml file.

Ok, now look closer at the 'modelGlueConfiguration'. The property tags define how your application will behave.

[More]

So you want to create a ModelGlue:Unity application? ( Part 1 )

In this series, we will create a ModelGlue:Unity application. Our example application will manage contacts. We will start with a blank canvas and by the end of the series, have a functional application.

Lets begin:

Firstly, you should have the ModelGlue:Unity and Coldspring framework installed. If the framework is not installed, have a look at this post.

Our application will reside in a directory just under the webroot. We will access our application at http://LocalHost/ContactManagerMG. With that in mind, lets open the ModelGlueApplicationTemplate Directory.

This directory serves as an application skeleton for which to begin a new ModelGlue:Unity application.

There are two ways to get a new application up quickly. The first way is to copy the contents of the ModelGlueApplicationTemplate into a new directory just under your webroot called ContactManagerMG. Do a find and replace on 'modelglueapplicationtemplate' and change it to 'ContactManagerMG'.

The second way assumes you have cfeclipse or some other ANT environment. The directions below are specifically for cfeclipse.

Inside the ModelGlueApplicationTemplate directory is a file called build.xml. Build.xml is an ANT script. ANT scripts are sets of commands used to perform file and directory tasks. There are certain parts of the ModelGlueApplicationTemplate that need to be changed to our application name ( ContactManagerMG ).

We will now make the modifications to the build.xml file for the purpose of creating our new application.

Open the build.xml file. On a default install of ModelGlue:Unity the file will look like so:

view plain print about
1<project name="New Model-Glue Application" default="build">
2    <property name="source" value="c:\inetpub\wwwroot\modelglue\modelglueapplicationtemplate"/>
3    <property name="target" value="c:\inetpub\wwwroot\"/>
4
5    <target name="build">
6        <copy todir="${target}">
7            <fileset dir="${source}" />
8        </copy>
9    
10         <replace
11     dir="${target}"
12     token="modelglueapplicationtemplate"
13     value=""
14     />

15    </target>
16</project>

In plain English, the build.xml file will copy the contents from the 'source' directory and place them into the 'target' directory then replace each instance of the 'token' and replace it with 'value'.

Make the following changes to the file and then run it.

IIS

view plain print about
1<project name="New Model-Glue Application" default="build">
2    <property name="source" value="C:\inetpub\wwwroot\modelglueapplicationtemplate"/>
3    <property name="target" value="C:\inetpub\wwwroot\ContactManagerMG"/>
4
5    <target name="build">
6        <copy todir="${target}">
7            <fileset dir="${source}" />
8        </copy>
9    
10         <replace
11     dir="${target}"
12     token="modelglueapplicationtemplate"
13     value="ContactManagerMG"
14     />

15    </target>
16</project>

Apache

view plain print about
1<project name="New Model-Glue Application" default="build">
2    <property name="source" value="C:\httpd\Apache2\htdocs\modelglueapplicationtemplate"/>
3    <property name="target" value="C:\httpd\Apache2\htdocs\ContactManagerMG"/>
4
5    <target name="build">
6        <copy todir="${target}">
7            <fileset dir="${source}" />
8        </copy>
9    
10         <replace
11     dir="${target}"
12     token="modelglueapplicationtemplate"
13     value="ContactManagerMG"
14     />

15    </target>
16</project>

Once your edits are complete, save the file and locate it in the navigator. Right click on the file and choose Run As -> ANT Build. You can see the progress in the console. Assuming no errors, you now have a new ModelGlue application and can begin coding.

Via Find and ReplaceANT build, you now have a new directory called ContactManagerMG. Run this in your browser and you should get a page showing the following:

Model-Glue 2.0: Unity

Model-Glue is up and running!

Voila. A new ModelGlue:Unity application. In the next series, we will add some functionality to our application.

So you want to install ModelGlue:Unity

ModelGlue:Unity is a ColdFusion framework that comes with a lot of of functionality and power right out of the box. In this tutorial, we will download all of the files needed to install ModelGlue:Unity, set up the framework and test our configuration.

ModelGlue:Unity requires the ModelGlue framework as well as the ColdSpring framework. We begin by downloading each part then placing them under our webroot.

You can find the latest builds in zip file format at of ModelGlue:Unity at http://svn.model-glue.com/trunk/modelgluebuilds. Select the most recent build and save it in a folder.

Update: Make sure the version of the ModelGlue:Unity framework is at LEAST version 284.

You will run into errors if you use an earlier version of the ModelGlue:Unity framework.

You can find version 284 here. A complete list of builds is here. Note the builds are sorted alphabetically so if you want the most recent, pay attention to the LAST decimal number. I.E. modelglue_2.0.284.zip is a later version then modelglue_2.0.52.zip even though it appears above in the list.

Next, download Coldspring 1.0 into the same directory.

Update: These instructions assume you will have both frameworks in webroot.

Placing frameworks in webroot is standard and preferred practice. If for some reason you MUST place the frameworks in a directory apart from webroot, you will need ColdFusion mappings for ModelGlue and for ColdSpring. There are few good reasons to install the frameworks in a directory other than webroot. If you have a good reason to do this, then you know who you are and what to do about it.

Now, unzip the contents of modelglue_2.0.xxx.zip underneath your webroot. When complete, you should have 4 directories direct children of your webroot.

  1. documentation
  2. modelglue
  3. modelglueapplicationtemplate
  4. modelgluesamples

Next, unzip the contents of the coldspring.zip file underneath your webroot. When complete you should have a directory called ColdSpring as a direct child of your webroot.

Verify the directories were created properly then run http://localhost/modelglueapplicationtemplate

If everything has been installed correctly, you will see:

Model-Glue 2.0: Unity

Model-Glue is up and running! Now Rejoice and tune in to the next tutorial.

Script Tags and how not to use them

The script tag should not be used in short-tag form. I found this out while playing with JQuery.

JQuery has underwent a lot of changes to the API as of late. Lots of useful functionality,a much simpler API, Guaranteed to be 100 times more fun than your favorite javascript / ajax library or your money back. <cf_salespitch /> While adding some functionality and refactoring, I hit a snag. All of a sudden my JQuery code stopped working. I figured I'd called something incorrectly and went poking around in the docs.

Finding nothing amiss, I started placing alerts all through my code looking for some sign of life in my Javascript.

Nothing.

Eventually I got everything happy again. It turns out I was using the script tag incorrectly. The script tag should be only used in the long form. If the short form is used, it can cause other scripts on the page to fail.

Example 1

This is an example of the short form of the script tag. The code will not alert.

view plain print about
1<script type="text/javascript" src="js/jquery-1.1.js" />
2 <script>
3 alert( 'hi' );
4 </script>

Example 2

This is an example of the long form of the script tag. This code will alert.

view plain print about
1<script type="text/javascript" src="js/jquery-1.1.js"></script>
2<script>
3 alert( 'hi' );
4</script>

I am sure I've run across this before but I didn't think of it first off. Seems since the body of the tag is empty, it shouldn't matter which form of the script tag is used. Curious, I tried a few more tests:

Example 3

This code will alert: (Note the use of the short form in the first script tag. The second tag is in long form.

view plain print about
1<script type="text/javascript" src="js/jquery-1.1.js" />
2<script type="text/javascript" src="js/tablesort.js"></script>
3<script>
4 alert( 'hi' );
5</script>

Disclaimer: I tested this code on Firefox 1.5 and IE 6.