Sunday, December 7, 2008

Getting Started Project-GraniteDS with Spring,Hibernate and Cairngorm,part 3

Ok, finally i got to the third part of this series to create a flex client. So in this part we'll create a flex project in eclipse and run it inside the server that we created in the part2.

So in eclipse open the Flex Development Perspective and create a new Flex project as
Give the name GettingStarted_GDS_Client. And select the application server type as J2EE. Now the next step is to setup the J2EE server so below snapshot shows the three fields

1. Web Root : This is the folder inside your workspace .metadata folder where the eclipse put the server application. For example my workspace is in D:\blog. So if you have run your server successfully you can see GettingStarted_GDS folder inside so the Web Root for me would be
D:\blog\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps. Now set the Web Root to D:\blog\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\GettingStarted_GDS\WEB-INF
this is the location where it finds the configuration files from the server project.

2. Root URL : http://localhost:8080/GettingStarted_GDS
3. Output Folder: This is the location where the generated swf files are dumped so it should be the same folder D:\blog\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\GettingStarted_GDS

Now the next step is to use the libraries from graniteds there are few library swc files from from graniteds, Cairngorm etc.

Now the last step for project setup is to add few compiler arguments in flex project, right click the project and select Flex Compiler from the left panel and add these lines in the field Additional compiler arguments:
-locale en_US -services ../../GettingStarted_GDS/webapp/WEB-INF/flex/services-config.xml -include-libraries ../libs/granite.swc -include-libraries ../libs/granite-hibernate.swc

as shown
this is required otherwise the flex client won't be able to detect the destination defined in services-config.xml file of our server project. I bet the flex client won't be able to find the destination without this and i figured this out after quite a bit of research.

So we can write some code for simple ugly UI that just creates the contact and displays the contact in the grid using a Cairngorm framework.
So talking about Cairngorm it's an MVC based framework for the development of flex application. It is basically a blend of best practices that has been followed in J2EE applications over the years, to have the clear separation between model,view and the controller with events being the communicator between views and commands.

If i have to repeat the things here is what Caringorm framework provides.
1. Model represent data objects
2. Controller does the business logic.
3. Events triggers business logic in commands.

To achieve the above flow, the Cairngorm has 5 components so we create them in our code one by one
1. ModelLocator: Singleton class to hold the model objects

2.ServiceLocator:Also a singleton class, to locate the java service or remote objects. It's based on ServiceLocator pattern.We create a mxml file called Services.mxml and define all the remote objects.So whenever these backend java service has to be invoked by the client we use com.adobe.cairngorm.business.ServiceLocator singleton class and do a service lookup based on name.

Object contactService = ServiceLocator.getInstance().getService("contactServiceObject"); where "contactServiceObject" is the id of the RDS defined in Services.mxml file as



remember destination="contacts" should match the destination id="contacts" defined in services-config.xml file in our server.

so we invoke the service method as contactService.saveContact(contact);

3. Events: Cairngorm leverages the event delegation model of flex, so when the things happen in the view layer it can create and dispatch the events which is then delegated by the controller to its command or say business object to take the necessary action.

so we define an event called ContactEvent that extends com.adobe.cairngorm.control.CairngormEvent class
event should have id which is used to dispatch the event from the view.And also it wraps any model if associated with that event. In our case we give the id "saveContact" which is dispatched when we try to save contact and it wraps 'Contact.as' model.

so to dispatch the ContactEvent from the view we do it as

public function handleAdd(event:Event):void {
var contactEvent:ContactEvent = new ContactEvent();
var contact:Contact = new Contact();
contact.name = contactName.text;
contact.email = email.text;
contactEvent._contact = contact;
contactEvent.dispatch();
}


4. Commands: Commands contain all the business logic that is related to a particular event delegated to it. The command can update the models,perform necessary business logic and can also delegate the control to delgates for service method invocations if we want to that way but for this sample i will invoke the service method from command only.
the command implements com.adobe.cairngorm.commands.Command and implement execute() method

5. Controller: Last is the controller which extends FrontController from Cairngorm. Here we map the event to command as

addCommand(ContactEvent.EVENT_ID,ContactCommand);

Now we are ready to write the code to display a grid and simple form. The complete source can be found here. Now when you run the server as Run-> Run on Server. It should open up the browser with the page shown below.
checkout the source. Hope this is helpful to have a quickstart. Also can anyone please tell me how to include code in blog pots. nothing works for me.



Saturday, December 6, 2008

running eclipse with Java 6 on mac

mac book comes with Java 5 pre installed, so once you upgrade to Java 6 you will have trouble running eclipse since eclipse by default looks for Java 5. So to run eclipse with Java 6 you need to edit Info.plist file located somewhere around

/Applications/ganymede/Eclipse.app/Contents

so open Info.plist in your favourate editor and uncomment the line to enable eclipse to use Java 5 installation. See the snapshot