ColdExt

PDF HTML FlashPaper

Getting Started Tutorial

Downloading and Extracting

To begin this tutorial you should download ColdExt from RIAForge and extract the contents of the zip to the web root of a new web site. You will end up with a directory structure that looks like this:

<wwwroot>/coldext - ColdExt tag library <wwwroot>/demos - ColdExt Demos <wwwroot>/dictionary - CFEclipse Dictionary XML for tag insight <wwwroot>/ext - ExtJS library files

The coldext and ext folders are both required for ColdExt to function.

The demos and dictionary folders do not need to be in the web root to develop with ColdExt but we will just leave them where they are for the purpose of this tutorial.

Tag insight in CFEclipse

Browse to the plugins\org.cfeclipse.cfml_1.3.1.5\dictionary directory inside CFEclipse (your CFEclipse plugin version number may vary) and insert a copy of the ColdExt dictionary/coldext.xml file. Make a backup of the dictionaryconfig.xml (just in case) and then open it to make the following modification, inserting a single line to include the coldext.xml file:

<version key="cf8" label="Coldfusion 8"> <grammar location="cf8.xml" /> <grammar location="user.xml" /> <grammar location="coldext.xml" /> </version>

Restart CFEclipse for the dictionary config changes to take effect.

Basic code structure

When developing with ColdExt there are 3 important pieces of ColdFusion code that are required, along with the use of the Application scope. View the small code skeleton below;

<cfimport prefix="ext" taglib="/coldext">   <html> <head> <title>Getting Started with ColdExt</title> </head>   <body> <div id="out"></div>   <ext:init>   <ext:onReady> <!--- ColdExt tags go here ---> </ext:onReady>   </body> </html>

1. To use the tag library it must be imported using cfimport with the ext prefix. The ext prefix is required for tag insight to work in CFEclipse.

2. The init tag initialises the library and makes the ExtJS JavaScript and CSS resources available by inserting them into the HTML head element. It should be specified anywhere after the cfimport tag, but before any onReady tag(s). The init tag can also be used to set some page-level config information - read more about this in another tutorial.

3. The onReady tag is the root tag which all other ColdExt tags will be nested inside of, and so it must be declared with an opening and closing tag. It is synonymous with the ExtJS practice of declaring a function inside the Ext.onReady() function.

Important Note: The final requirement for using ColdExt is that you have declared an Application Name so that ColdExt can make use of the Application scope. You can do this with either an Application.cfm or Application.cfc. See the /demos folder for a sample Application.cfc file.

Hello World (in a Panel)

Now for the obligatory Hello World app...

<cfimport prefix="ext" taglib="/coldext">   <html> <head> <title>ColdExt Hello World (in a Panel)</title> <style type="text/css"> body { padding: 20px !important; font: 13px Verdana, sans-serif; } </style> </head>   <body> <div id="out"></div>   <ext:init> <ext:onReady>   <ext:panel renderTo="out" title="Panel" padding="10"> Hello World! </ext:panel>   </ext:onReady>   </body> </html>

The main thing to note with this code is the id that is applied to the div, and the renderTo attribute that is applied to the panel tag. When rendering components using the ExtJS library (and in turn with ColdExt) you must tell the component where it needs to be rendered to, and the easiest way to do that is by element id. In this case we are rendering the panel to the element which has the id of out, which is our div. You also have the option of not rendering the component immediately, but that is for another tutorial!

The other attributes on the panel are just to pretty it up a bit with a title bar and some padding for the content. Any output within the body of the panel tag which is not a ColdExt tag will be simply rendered as the HTML content of the panel, such as our "Hello World!" text.

Where to next?

At this point I would recommend looking at the demos that are bundled with ColdExt to get a feel for some of the tags and keep checking this wiki for more tutorials and other documentation :)

If you have any questions feel free to either use the Contact Form or post to the ColdExt Forums on RIAForge.