Grails, Flex and MyEclipse

This is a small exercise that I undertook following documentation I found on grails website. Let's create small calculator application which adds two operands. The idea is to setup the flex plugin and see how it works.

I used following tools

• MyEclipse with flex builder
• Grails
• Groovy Eclipse plugin
• Grails Fex Plugin

Step 1: Install Groovy Eclipse plugin
MyEclipse 6.5 installation that I had did not came with groovy/grails plugin. One of the nice thing about MyEclipse is that it is eclipse with additional tools. Use the following plugin update URL to get groovy plugin.

Here is eclipse software update URL: http://dist.codehaus.org/groovy/distributions/update/.

This plugin is optional. You can use grails command line commands and that will work as well.

Step 2: Create Grails Project and Install Grails Flex Plugin
Next thing is to install Grails Flex plugin. This is still under development. The one I used is version 0.2.

Create Grails application using New --> Other... --> New Grails Project. This will create grails project.

Alternatively you an use grails command line to create app. Go to command line, change directory to project root folder in your workspace and type command:
              grails install-plugin flex.

This will install flex plugin for grails.

I was using MyEclipse with Flex Builder, it was easy to add flex nature to my project. To do that right click and add flex nature

Step 3: Create Calc UI
Now project is setup, we are ready to create calc.mxml. I created this under webapp folder so that it is visible.

Use following calc.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:RemoteObject id="ro" destination="calcService"/>
    <mx:Model id="myCalcData">
        <calc>
            <operand1>{number1.text}</operand1>
            <operand2>{number2.text}</operand2>
        </calc>
    </mx:Model>
    <mx:Panel>
        <mx:Form>
            <mx:FormItem label="Operand 1:">
                <mx:TextInput id="number1"/>
            </mx:FormItem>
            <mx:FormItem label="Operand 2:">
                <mx:TextInput id="number2"/>
            </mx:FormItem>
            <mx:Button label="Calculate" click="ro.calc(myCalcData.operand1,myCalcData.operand2)"/>
             <mx:Label text="Result: {ro.calc.lastResult} "  fontWeight="bold"/>
        </mx:Form>   
    </mx:Panel>       
</mx:Application>

Step 4: Create Grails HelloWorldService
Create grails new service from IDE. You can also create service by typing command
grails create-service HelloService

public class CalcService
{
  static expose = ['flex-remoting']
  def calc(int number1, int number2) { return number1 + number2 }
}

Step 5: Update configuration
Next step is to update configuration file, Config.groovy to enables web tier compiler for flex. Again, I am using similar file as in the example provided on grails website.

// enables the webtier compiler for all environments

Step 6: Run using command line

We are almost done, type in command line at project root to run the projectgrails run-app

Type in browser: http://localhost:8080/MyGrails/calc.mxml


You may need to change port, application context if you are using different configuration.