Table of Contents

Hello World! - Your First Application in Grails and Flex




In this Chapter, you will learn how easy it is to build a flex application using a Grails backend.

Installation

Get The JDK

Grails requires that you have a version of the Java Development Kit installed. To see if you have java installed, open a command or terminal window and type java -version

If you see a message similar to the following, you have java installed correctly and should be able to proceed.

java version "1.5.0_16"
Java(TM) 2 Runtime Environment, Standard Edition (build 1.5.0_16-b06-284)
Java HotSpot(TM) Client VM (build 1.5.0_16-133, mixed mode, sharing)

If you do not see this message, you can download Java from the Sun Website. ( http://java.sun.com/javase/downloads/index.jsp )

Grails Installation

  1. If you have java installed, download and install grails onto your machine.  You can get the latest copy of grails from the Grails.org website, ( http://grails.org/Download ).
    Macports users can also install grails by invoking on a terminal window sudo port install grails.

  2. After you have downloaded the zip file, extract it to a directory of your choosing ( i.e. C:/grails or /Users/tomaslin/dev/grails ).

  3. You need to add two environment variables for Grails to run properly,

    On Windows, open Control Panels, Click on the Sytem icon and click on the Advanced pane. Click on the Environment Variables Button.
    1. set GRAILS_HOME=C:/grails
    2. change your PATH variable to contain C:/grails/bin

    On Mac and Unix, you would usually edit your .profile file by issuing a command like sudo nano .profile
    1. add the line export PATH=/Users/tomaslin/dev/grails/bin:$PATH
    2. add the line export GRAILS_HOME=/Users/tomaslin/dev/grails

  4. Verify your grails installation. Open a command or terminal window and type grails help

    You should see the following:
Welcome to Grails 1.1.1 - http://grails.org/
Licensed under Apache Standard License 2.0
Grails home is set to: /Users/tomaslin/dev/grails

Congratulations, you're ready to start developing in Grails.

Hold On! Don't I need a database server or to configure Apache?
One of the nice features of Grails is that it comes with an embedded database and web application server ready to use so you don't have to install them. The embedded database is an instance of IBM's HSQL database. The embedded web application server is Jetty.

Do I need to install Flex?
We will install the Flex SDK into our application via a plugin later on. Grails plugins are like Ruby Gems. External libraries like the Flex SDK and BlazeDS can be quickly added with this mechanism.

Code, Baby, Code

Create You Application

First, we will create an application in Grails. Open up a terminal window and call:

    grails create-app helloworld

The create-app command sets up all the directories and files we need to run a grails application called helloworld. If you look into your filesystem, you will see a brand new directory called helloworld. Look inside and you'll see the following folder structure.



Go into the helloworld directory via cd helloworld

Install Flex

Let us install BlazeDS, the Flex SDK and wire it all up together now. Issue the command:

    grails install-plugin flex

That's it! In one line of code, we accomplished about 100 pages of Spring on Flex! The install-plugin command gets the latest released copy of a plugin and wires it up to Grails. It's that easy!

Running Your Web Application

Let's run our application, call

    grails run-app

This command starts your jetty web application server locally on port 8080.

Hint: If you're stuck here because you have another program running on port 8080, you can always call grails run-app -Dserver.port=9090 to run in port 9090. Pick your favorite port number

Open your web browser and navigate to http://localhost:8080/helloworld/

You should see your first running Grails application.


Just Add Flex

Let us add our first Flex application. Open a text editor and type the following

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Label text="hello world"/>      
    </mx:Application>

Save it as hello.mxml under your helloworld's web-app directory, so that the final path is similar to /DevDirectory/helloworld/web-app/hello.mxml

Point your browser to http://localhost:8080/helloworld/hello.mxml

Your computer should wait a little while, and you should be able to see a screen like this ( assuming you have FlashPlayer installed ):


Hot Compilation, oh my!

Let's change our hello.mxml a little:
   
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Button label="click me" click="mylabel.visible=true"/>
        <mx:Label id="mylabel" text="hello world" visible="false"/>
    </mx:Application>

All I've done here is to hide our label on startup and added an extra button. Navigate to http://localhost:8080/helloworld/hello.mxml again.

You will see that our file has once again changed. Click on the 'click me' button, and you will see the label appear.



What did we just do here? The Flex plugin comes bundled with a version of the Open Source Flex SDK. It is configured so that whenever there is a file with an extension .mxml is called, it automatically launches the compiler and creates a .swf file that is used by the Flash Player. Think of it as a java class file.

If you think about what we've done, it's quite remarkable. By downloading a small library from the web and setting paths, we were able to set up an entire Web Development framework configured with Spring, Hibernate and a Sitemesh web layer. Then we were able to add the Flex SDK, BlazeDS and configure hot compilation of Flex files. All with three lines of code!

Handling Errors

Let's just break it and see what happens. Open the hello.mxml file again and add a non-sense tag at the end of the file

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Button label="click me" click="mylabel.visible=true"/>
        <mx:Label id="mylabel" text="hello world" visible="false"/>
        <mx:thisisnonsenseItellyou/>
    </mx:Application>

We go to http://localhost:8080/helloworld/hello.mxml and see that a helpful debugger screen has shown up.


That's a wrap! In this chapter, we learned how to install Grails and embed the Flex SDK into it via the Flex plugin. We also learned how to quickly add a flex view to our application that we can easily change or modify. I hope this chapter has showed you how easy it is to quickly get productive on Flex and Grails.