{"id":351,"date":"2011-01-14T00:35:00","date_gmt":"2011-01-14T00:35:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/advanced-smartgwt-tutorial-part-1.html"},"modified":"2012-10-21T19:33:23","modified_gmt":"2012-10-21T19:33:23","slug":"advanced-smartgwt-tutorial-part-1","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2011\/01\/advanced-smartgwt-tutorial-part-1.html","title":{"rendered":"Advanced SmartGWT Tutorial, Part 1"},"content":{"rendered":"

Justin, Pat and I have started working on a side project that requires a user interface for administration and management. After working for a while with SmartGWT<\/a> and GWT<\/a> in general, we decided to create the interface using SmartGWT<\/a>. We really liked the visual components (check out the SmartGWT showcase<\/a>) and the fact that it facilitates rapid development. <\/p>\n

In this tutorial I am going to show you how we created the prototype for our UI in just a few hours. The interface is heavily influenced by the Drools Guvnor<\/a> application. We use Drools in a lot of our projects and we have Guvnor for the business rules creation. We simply love the user interface, it is both visually beautiful and functionally practical. Check out some Guvnor screenshots<\/a>.<\/p>\n

Let’s get started. I assume you have already installed the GWT SDK<\/a> and the Google plugin for Eclipse<\/a>. SmartGWT is compatible with GWT 1.5.3 , GWT 1.6.4, GWT 1.7.x and GWT 2.0.x. Currently, I am using the GWT 2.1.0 SDK<\/a> and the SmartGWT 2.2<\/a> version. In essence, this is a somewhat more advanced tutorial regarding SmartGWT, thus you might have to check my introductory \u201cGetting Started with SmartGWT for awesome GWT interfaces\u201d<\/a> tutorial. Additionally, another helpful resource is the \u201cLayout the User Interface\u201d<\/a> tutorial which we used to kick-start the development of our own interface.<\/p>\n

First we create a new \u201cWeb Application Project\u201d in Eclipse. I chose \u201cAwesomeSmartGWTUIProject\u201d for the project name and \u201ccom.javacodegeeks.smartgwt.appui\u201d for the package name.<\/p>\n

\"\"<\/a><\/p>\n

Next, add the \u201csmartgwt.jar\u201d file from the extracted ZIP to the project’s classpath. Note that this file should also be added to the \u201cwar\/WEB-INF\/lib\u201d directory.<\/p>\n

\"\"<\/a><\/p>\n

Then edit the module xml file (named \u201cAwesomeSmartGWTUIProject.gwt.xml\u201d) and add the following line after the standard \u201cinherits\u201d declarations:<\/p>\n

<inherits name=\"com.smartgwt.SmartGwt\"\/><\/pre>\n
In addition, comment out the existing section that declares the usage of the GWT theme:<\/p>\n
<!--<inherits name='com.google.gwt.user.theme.standard.Standard'\/> --><\/pre>\n
This is what the module XML file should look like:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<module rename-to='awesomesmartgwtuiproject'>\r\n  <!-- Inherit the core Web Toolkit stuff.                        -->\r\n  <inherits name='com.google.gwt.user.User'\/>\r\n\r\n  <!-- Inherit the default GWT style sheet.  You can change       -->\r\n  <!-- the theme of your GWT application by uncommenting          -->\r\n  <!-- any one of the following lines.                            -->\r\n  \r\n  <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'\/>  -->\r\n  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'\/> -->\r\n  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'\/>     -->\r\n\r\n  <!-- Other module inherits                                      -->\r\n  <inherits name=\"com.smartgwt.SmartGwt\"\/>\r\n\r\n  <!-- Specify the app entry point class.                         -->\r\n  <entry-point class='com.javacodegeeks.smartgwt.appui.client.AwesomeSmartGWTUIProject'\/>\r\n\r\n  <!-- Specify the paths for translatable code                    -->\r\n  <source path='client'\/>\r\n  <source path='shared'\/>\r\n\r\n<\/module>\r\n<\/pre>\n
Next step is to erase some of the auto-generated code that exists in the \u201cAwesomeSmartGWTUIProject.html\u201d file and more specifically the H1 and Table tags. This is what you should be left with:<\/p>\n
<!doctype html>\r\n<!-- The DOCTYPE declaration above will set the    -->\r\n<!-- browser's rendering engine into               -->\r\n<!-- \"Standards Mode\". Replacing this declaration  -->\r\n<!-- with a \"Quirks Mode\" doctype may lead to some -->\r\n<!-- differences in layout.                        -->\r\n\r\n<html>\r\n  <head>\r\n    <meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\">\r\n\r\n    <!--                                                               -->\r\n    <!-- Consider inlining CSS to reduce the number of requested files -->\r\n    <!--                                                               -->\r\n    <link type=\"text\/css\" rel=\"stylesheet\" href=\"AwesomeSmartGWTUIProject.css\">\r\n\r\n    <!--                                           -->\r\n    <!-- Any title is fine                         -->\r\n    <!--                                           -->\r\n    <title>Web Application Starter Project<\/title>\r\n    \r\n    <!--                                           -->\r\n    <!-- This script loads your compiled module.   -->\r\n    <!-- If you add any GWT meta tags, they must   -->\r\n    <!-- be added before this line.                -->\r\n    <!--                                           -->\r\n    <script type=\"text\/javascript\" language=\"javascript\" src=\"awesomesmartgwtuiproject\/awesomesmartgwtuiproject.nocache.js\"><\/script>\r\n  <\/head>\r\n\r\n  <!--                                           -->\r\n  <!-- The body can have arbitrary html, or      -->\r\n  <!-- you can leave the body empty if you want  -->\r\n  <!-- to create a completely dynamic UI.        -->\r\n  <!--                                           -->\r\n  <body>\r\n\r\n    <!-- OPTIONAL: include this if you want history support -->\r\n    <iframe src=\"javascript:''\" id=\"__gwt_historyFrame\" tabIndex='-1' style=\"position:absolute;width:0;height:0;border:0\"><\/iframe>\r\n    \r\n    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->\r\n    <noscript>\r\n      <div style=\"width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif\">\r\n        Your web browser must have JavaScript enabled\r\n        in order for this application to display correctly.\r\n      <\/div>\r\n    <\/noscript>\r\n    \r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
Similarly, remove all the code existing in your EntryPoint<\/a> class, named \u201cAwesomeSmartGWTUIProject\u201d, and just leave an empty onModuleLoad<\/a> method like the following:
 
<\/div> <\/div><\/p>\n
package com.javacodegeeks.smartgwt.appui.client;\r\n\r\nimport com.google.gwt.core.client.EntryPoint;\r\n\r\npublic class AwesomeSmartGWTUIProject implements EntryPoint {\r\n    \r\n    public void onModuleLoad() {\r\n        \r\n    }\r\n    \r\n}\r\n<\/pre>\n
We are now ready to start writing SmartGWT code, so make sure you have the SmartGWT Javadocs<\/a> bookmarked. There are two very important classes that we will continually use while building the interface.<\/p>\n