Wednesday, August 8, 2012

Revisiting: Ext JS, Spring MVC 3 and Hibernate 3.5: CRUD DataGrid Example

After hearing the buzz around Ext JS, I did a small research to find out how that framework is perceived between the top RIA candidates for developing web applications of all sorts. I found really shocking examples, so I started searching for tutorials. For an Ext JS overview, please check this presentation . Besides Ext JS is new for me, it has been around for a long time. The latest version is 4.1 and is available here

Suddenly, I found this 5-star blueprint:
Loiane Groner's "ExtJS, Spring MVC 3 and Hibernate 3.5: CRUD DataGrid Example".  As both Spring and Hibernate were mentioned upfront as the example's building blocks, Ext JS captured my attention.

By the way, Loiane's website is impressive. Every article in her blog shows a well-balanced dose between knowledge and technical details. I became a big fan of her. But as in many other blog articles, you learn the concepts with so many assumptions, so the burden of setting up things before you can get started is often hidden or even not described at all. This situation may jeopardize your adventure and if you are with little time, you may find yourself puzzled. Immediate help will not come to satisfy your curiosity demands. I will not blame on her because of the lack of setup/config stuff, instead, I am finding inspiration by the natural process of exploring, doing trial and error, and finally from the eternal search for completeness.

My post embodies a recipe: finding and setting up all pieces you need to put together into your development workstation in order to successfully run the DataGrid described in Loiane's article, in ten steps. Now, while you are reading my post, I am happily educating myself on Ext JS from a stable sandbox and Loiane's book.

Warning: If you are an experienced Java web application developer you may not find this post very useful, so don't waste your time and go browsing Loiane's blog. Otherwise, you will benefit from getting up to speed.

At this point I assume you read Loiane’s blueprint completely and now you have a general idea about what is coming next.


The screenshot below shows a picture about what you are going to see at the end, by following this 10-steps recipe.






Ext JS DataGrid setup in 10 steps.

Step 1. Prerequisites: Operating System, RAM and Java. 

Windows 7 or Windows XP SP 3 is required. My PC is loaded with 1GB RAM.
I used the Oracle Java 1.6 32 SDK distribution. The default installation folder is “C:\Program Files\Java\jdk1.6.0_32”. Set the JAVA_HOHE environment variable to point to that location and add “C:\Program Files\Java\jdk1.6.0_32\bin” to the system PATH.





 
  


The sandbox folder:  I am installing everything under a fresh new, top level “Lab” folder.

















Step 2. Eclipse IDE.

You may skip this step if you have Eclipse already installed. Either Eclipse Helios or Juno will work. I use Juno. Verify Eclipse can create a “Dynamic Web Project” (Menu File>New>Web>Select a Wizard>Dynamic Web Project”). If you don’t see that option, add the WTP plug-in from
here.
Note: When installing Eclipse for the first time, you will be required to define the “workspace” folder where your all project files will go. I defined the workspace under the sandbox “C: \Lab” folder.



Step 3. Apache Tomcat.

Tomcat 7.0.28 web server is used here. I installed Tomcat under “C: \Lab”. Make sure you set the CATALINA_HOME environment variable as the Tomcat home folder, as follows:




Tomcat listens the HTTP protocol on port 8080. To make sure Tomcat is operational, run bin/startup.bat under the Tomcat home folder. Point your Internet browser to http://localhost:8080/examples and you should see this…












 
Once you are done, run bin/shutdowm.bat.



Step 4. MySQL.


Download MySQL 5.5 database from
http://dev.mysql.com/downloads/ and follow the recommended install steps for the  "Server Only” install type. MySQL will be available a Windows Service and once the install process is complete will remain started. The default MySQL home folder is shown in the screenshot below.  MySQL comes preloaded with a test database. You can set the he root password during the install, I used “mysql”. To verify MySQL is up, run the command “mysql –u root –p”. Type in the root password. Next, type “use test” to select the test database, then type “exit”. You now have MySQL ready to run.


 









Step 5. Get the DataGrid project code from GitHub.
 
Get the project’s zip file from
http://github.com/loiane/extjs-crud-grid-spring-hibernate. Extract the project contents on a new folder under the Eclipse workspace.



 


















Step 6. Import the project into Eclipse.

Start Eclipse and select the menu option “File>Import>Existing Project into Workspace”.  Choose the folder from where you unzipped the project code.  Your Eclipse window layout will be seen like this:




 









Now you have all the project files and JAR libraries' dependencies into the Eclipse workspace and you are ready to update code and configuration files but yet not ready to run the DataGrid. This package delivery into GitHub is very kind from Loiane. I very appreciate she made available the code and libraries this way.



Step 7. Hibernate properties configuration.
 
Browse the project and find the “db-config.xml” file. You may use Eclipse menu option “Search>File..”. Change the contents as follows (changes highlighted in red):


<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName"><value>com.mysql.jdbc.Driver</value></property>
        <property name="url"><value>jdbc:mysql://localhost:3306/test</value></property>
        <property name="username"><value>root</value></property>
        <property name="password"><value>mysql</value></property>
</bean>


 
Here we are instructing Hibernate to select the “test” database behind the MySQL listener at port 3306 and using the "root" user and "mysql" password.
In the same file, configure Hibernate to log SQL output into the Eclipse console


   <prop key="hibernate.show_sql">true</prop> 


Make sure you save the updated XML file by pressing “Ctrl-S”.

 
Step 8. Create and pre-populate the CONTACT table.

Go to MySQL home folder, and under the bin subfolder, run the command “mysql –u root –p”. Type “mysql” as password. You are now into the MySQL command console. Choose the test database by typing in “use test”.

Create the CONTACT table by entering plain SQL:
 



CREATE TABLE  contact (
  CONTACT_ID int(11) NOT NULL AUTO_INCREMENT,
  CONTACT_EMAIL varchar(255) NOT NULL,
  CONTACT_NAME varchar(255) NOT NULL,
  CONTACT_PHONE varchar(255) NOT NULL,
  PRIMARY KEY (CONTACT_ID) ) 

Add some records….as many as you wish...
 
insert into CONTACT (CONTACT_NAME, CONTACT_PHONE, CONTACT_EMAIL) values ('Contact0','(000) 000-0000', 'contact0@loianetest.com'); 

To abandon MySQL command console, type “exit”.



Step 9. Define Tomcat as the home web server to run the DataGrid from inside Eclipse.

This step is not really required, but is very nice to have a quick way to test code additions or fixes using a fresh new web-server instance in a few clicks. To find this wizard, go to the menu  "File>New>Server>Server".














Step 10. Running the DataGrid

Choose the project “extls-crud-grid-spring-hibernate” on the Project Explorer pane, pressing right click to display the "Build Path" properties and make sure the "JRE System Libarry" is bound to "workspace JRE = jdk1.6.0_32", and then on the toolbar, press “1. Tomcat Server v7.0 at localhost” followed by “2. extjs-crud-grid-spting-hibernate”. Listen to the Console pane for Tomcat log output that will hopefully show SQL as you add rows or make changes to the grid contents.








The expected outcome should be like in the screenshot below:















I hope you enjoyed this post. I am interested in updating this recipe based on the feedback you may send via blog comments or direct e-mail. Follow me at @ccrosetti


8 comments:

  1. woow.....really cool

    is there any issue occured due to "back button issue in browser" for this application.?

    ReplyDelete
  2. amazing
    and thanks for giving information
    and i have some doubt in extjs so please help me

    ReplyDelete
  3. hi, i've the following error, can anyone kindly help me? i've just import the project without make any modify

    "dic 05, 2013 11:52:42 AM org.springframework.web.servlet.DispatcherServlet noHandlerFound
    WARNING: No mapping found for HTTP request with URI [/extjs-crud-grid-spring-hibernate/view.action] in DispatcherServlet with name 'extjs-crud-grid-spring-hibernate'"

    ReplyDelete
  4. what about hibernate relationships with extjs??? ... is ok to use "bean.property" on a store reader instead of only "property"? ... (btw i'm not an english speaker)

    ReplyDelete
  5. Hey, thanks for this post.. cool :) It's working fine.

    ReplyDelete
  6. Sachin, glad to hear this recipe worked for you, stick around, thanks, Carlos

    ReplyDelete