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 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 '' 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(); = contactName.text; = email.text;
contactEvent._contact = contact;

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


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.


Chandra said...

Hi Purna,

Thanks a lot for your help. It is working with small change
database name
you mentioned it as sample_graniteds in the first code.
But in the code you mention it as graniteds_sample .After changin it is working fine.

narup said...

glad it work!! thanks

Olive said...

What about the build.xml from the step 2? What to do with the as classes generated? I miss something here.

narup said...

build.xml is used to generate the action script model i have mentioned that somewhere u can just directly execute the target using eclipse and it models will be generated.

HighOnLife said...
This comment has been removed by the author.
HighOnLife said...

Hey Narup,

First of all thank you for coming up with this highly useful stack. GDS is pretty important because it allows Lazy Loading. From what I understand BlazeDS has another open source project that can be used with BlazeDS for lazy loading but it is extra work in my opinion.

Anyways, there were a few things I struggled with while working with your samples:

1. The Web Root needs to end with GettingStarted_GDS instead of WEB-INF. In your part III, page I think you point to WEB-INF.

2. The output folder needs to be the same directory as Web-Root.

3. Sometimes due to getting something incorrect, I will clean and publish via tomcat, and that will clean all the client files. To get the client files back, go to client project properties i.e. right click GettingStarted_GDS_Client project -> Properties -> Flex Server->Validate location and then click Ok. This will copy the client files needed into the output location provided at time of Client project creation. NOTE: The Context Root needs to be GettingStarted_Server.

If anyone else came across any gotchas, I would love to hear them.

It's possible that these gotchas I came across were just me, but I am posting just in case someone is struggling with similar issues.

Again, thank you for taking the initiative to provide a Flex-GraniteDS-Cairngorm-Spring-Hibernate sample project.

Radha Krishna said...

I am fairly new to graniteds + flex. The article suggests using two separate applications i.e., using mxml components and actionscripts in another project. I just could not build this project as the antscript needed something more.

< mxmlc....>

< source-path path-element="${basedir}/src " / >

< / mxmlc ..>

The source here is the actual java source code. Unless I had the two projects together, I could not build the swf files. However, once I convert this one application to a java project, as flex project does not recognize java source code, I can no longer debug my flex screens. Am I missing something here?


narup said...

Hi Radha,

ant script is just to generate the actionscript classes from the java models, instead of writing manually it will generate at once. And it does require you to have two separate projects for server which is java project and a client which is flex project. Debugging should be a separate issue, not sure but i remember i did debug it.

Ramón said...

Hi Puran,

The example of this serie is good.

Thank you!

Anonymous said...

thanks for the example but it doesn't work when i do Run As on server i show the interface but it doen't persist data in the table contact.
Please help me to solve the problm