Nicozan-Blog

Knowledge Seeking

Drools and Gwt – Small Post, Big Issue May 11, 2011

Filed under: Drools,GWT — nicozan @ 3:47 pm
Tags: , , ,

Short Approach…

It’s an excellent idea to combine 2 two technologies such as Drools and GWT to build Intelligent Web Applications. But there is a little bit of a problem at the moment to integrate them. Because Drools and GWT include the org.eclipse.jdt classes but with different JDT version. And when you run your application (mvn gwt:run) you will have an error like this:

Unable to parse module: com.google.gwt.user.User
java.lang.NoSuchMethodError: org.eclipse.jdt.internal.compiler.CompilationResult.getErrors()
[Lorg/eclipse/jdt/core/compiler/IProblem;
at com.google.gwt.dev.jdt.AbstractCompiler$ICompilerRequestorImpl.
acceptResult(AbstractCompiler.java:213)
at org.eclipse.jdt.internal.compiler.Compiler.compile
(Compiler.java:417)
...

Solution…

So to solve this problem you need to add an exclusion to your dependecy (that has the Drools-Core dependency) added in your Maven Gwt Application pom.xml. The exclusion in your pom should look like this:

<dependencies>
    [...]
<dependency>
           <groupId>com.wordpress.nicozan</groupId>
           <artifactId>dependency-with-drools-core</artifactId>
           <version>1.0</version>
           <exclusions>
                   <exclusion>
                           <groupId>org.eclipse.jdt.core.compiler</groupId>
                           <artifactId>ecj</artifactId>
                   </exclusion>
           </exclusions>
</dependency>
    [...]
</dependencies>

Short but helpful 😉

 

GWT- Time to Refactor means Async Interfaces Issue April 7, 2011

Filed under: GWT,Java — nicozan @ 4:43 pm
Tags: , , , ,

Introduction

When you first create a GWT App, the project is divided ,usually, into three packages: client,shared and server. In this post we’ll consider the next packages names:
-com.wordpress.nicozan.client
-com.wordpress.nicozan.shared
-com.wordpress.nicozan.server

Refactoring Services

Let’s consider that in the package com.wordpress.nicozan.client we have the interface bankService and we have too the interface bankServiceAsync. This Async-interface help us to communicate with the server side of our application. The server side is in the package com.wordpress.nicozan.server and contains an implementation named bankServiceImpl.
Up to now everything seems nice and simple, but if your application starts to grow and improve, you’ll probably have many services. This means that your client package we’ll have several service interfaces mixed with your widgets and utility classes.
So to avoid having everything mixed up, you decide to create the next packages:
-com.wordpress.nicozan.client.util
-com.wordpress.nicozan.client.widgets
-com.wordpress.nicozan.client.services

This post will focus in the services package. Inside this package we’ll put the service interfaces that are related to the Async interfaces.
At the moment we compile (mvn clean install ), an error will appear. The error will say that the Async interfaces cannot be found. This problem is because by default the gwt-maven-plugin generates the Async interfaces from the service interfaces located in the client package, and it doesn’t look inside the client sub-packages. The way to solve this problem is by adding 2 tags to the plugin configuration inside the pom.xml:

...
<!-- GWT Maven Plugin -->
 <plugin>
       <groupId>org.codehaus.mojo</groupId>
       <artifactId>gwt-maven-plugin</artifactId>
       <version>2.1.0-1</version>
           <executions>
                 <execution>
                       <goals>
                             <goal>compile</goal>
                             <goal>test</goal>
                             <goal>i18n</goal>
                             <goal>generateAsync</goal>
                       </goals>
                 </execution>
           </executions>
       <!-- Plugin configuration. There are many available options, see
         gwt-maven-plugin documentation at codehaus.org -->
      <configuration>
         <runTarget>MyWebApp.html</runTarget>
         <hostedWebapp>${webappDirectory}</hostedWebapp>
          <i18nMessagesBundle>com.wordpress.nicozan.client.Messages</i18nMessagesBundle>  
         <servicePattern>**/client/services/*Service.java</servicePattern>
         <inplace>true</inplace>
       </configuration>
 </plugin>
...

In the code snippet above, the two important tags are servicePattern and inplace. In the first one, we specify a relative path to where service interfaces are. The second tag, specifies that the generated Async interface have to be located in the same package as its analog service interface.

 

GWT Visualization – Transform Data into Information March 30, 2011

Filed under: GWT,Java — nicozan @ 12:22 pm
Tags: , ,

Introduction

Beginning with the concept, that data it is not information. A table full of rows (i.e. 1000 rows) it can be consider data, and you’ll agree with me that trying to find meaningful data (Information) from the table it’s going to be a tedious task. At this point of the reasoning is when we use Charts (i.e. Line Charts, Pie Charts, Scatter Charts, etc) to summarize the data from the table and in that way we obtain information to make a decision. GWT Visualization will help us to add Charts to our GWT webapp, by using its simple API.

Using the GWT Visualization API

If you are not familiarized with the GWT Framework, you need to have a look at its documentation or my post. Considering that you are using the Maven GWT Plugin, all you have to do is define the next dependency in the projects pom.xml.

<dependency>
  <groupId>com.google.gwt.google-apis</groupId>
  <artifactId>gwt-visualization</artifactId>
  <version>1.0.2</version>
</dependency>

The next thing to do is define the module inheritance so the client side of the webapp can use it. In the “myWebApp”.gwt.xml you have to write:

<inherits name='com.google.gwt.visualization.Visualization'/>

Now that we have GWT Visualization ready to use, let’s see the elements that are part of a Chart:
-DataTable (Data Format that is going to be injected into the Chart so it can display information)
-Options (Set of characteristics of the Chart: width, height,background,color,etc. )

If you want to see a basic example working go to this page: GWT Visualization Example.

Short Tip:

If you want to draw a Line Chart and you have dots or coordinates best thing, you should use a Scatter Chart and set the option ScatterChart.Option.setLineSize(1); . The line size has to be 1 or greater than 1.

 

GWT – Adding Jar Dependency to our GWT project. (Maven-Gwt-Plugin) March 17, 2011

Filed under: GWT,Java — nicozan @ 4:16 pm

Introduction

You might be asking yourself, Why am I doing this post?, because you might think that adding a dependency in a GWT Project using the Maven-GWT-Plugin is just as simple as adding a dependency in a Regular Maven project. Sorry to disappoint but apart from that you have to do something else … 🙂

Concepts

Every gwt project has a gwt.xml file that represents the GWT-module. This file contains specific information related to the module, for example:
—Entry-point (The java class that represents the web page that is going to be displayed in the web browser)
—Inherits (External Modules that our GWT-Module uses)

These two elements shown above are represented by tags. These tags are child elements of the root element module . The next code snippet shows how the gwt.xml file is structured.
MyWebApp.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='MyWebApp'>
 <!-- Inherit the core Web Toolkit stuff.                        -->
 <inherits name='com.google.gwt.user.User'/>
 <!-- Inherit the default GWT style sheet.  You can change       -->
 <!-- the theme of your GWT application by uncommenting          -->
 <!-- any one of the following lines.                            -->
 <inherits name='com.google.gwt.user.theme.standard.Standard'/>
 <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
 <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

 <!-- Other module inherits                                      -->
 <inherits name='com.wordpress.nicozan.Model'/>

 <!-- Specify the app entry point class.                         -->
 <entry-point class='com.wordpress.nicozan.client.MyWebApp'/>

 <!-- Specify the paths for translatable code                    -->
 <source path='client'/>
 <source path='shared'/>
</module>

As you can see the name of the gwt.xml file is the same, and must be, as the Entry-point Java Class name. There are some modules that are standards and need to be inherited, (i.e : com.google.gwt.user.User)

Adding Jar Dependencies

Let’s consider the MyWebApp.gwt.xml shown before and that we have a project with two sub modules : webapp and model. The project has the next directory structure:

parent-project/                                    
|- pom.xml
|
|- model/                                      (External JAR module:)
|  |- pom.xml
|  \- src/main/java/
|     \- com/wordpress/nicozan/
|        |- Model.gwt.xml
|        \- model/utils/Element1.java
|
\- webapp/                                      (GWT-Module)
 |- pom.xml
 \- src/
    |- main/java/
    |  \ -com/wordpress/nicozan/
    |     |- MyWebApp.gwt.xml
    |     \- client/MyWebApp.java
    \- main/webapp/
       \- WEB-INF/web.xml

Take special attention to the model module. There is a gwt.xml file (Model.gwt.xml) that it’s in charge of specifying the source path from where the resources we’ll be built so the webapp module will then be able to use them. The Model.gwt.xml will look like this:

<module>
<inherits name="com.google.gwt.user.User"/>
<source path="model"/>
</module>

The Java classes are found recursively so you just need to specify the root directory.
The next thing to do is to generate this resources so the GWT webapp can use them. The pom.xml of the model module would look like this:

<project xmlns="http://maven.apache.org/POM/4.0.0"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>

<parent>
  <groupId>com.wordpress.nicozan</groupId>
  <artifactId>parent-project</artifactId>
  <version>1.0-SNAPSHOT</version>
</parent>

<artifactId>model</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>jar</packaging>

<build>    
  <resources>
    <resource>
      <directory>src/main/java</directory>
      <includes>
        <include>**/*.java</include>
        <include>**/*.gwt.xml</include>
      </includes>
    </resource>
  </resources>
  <plugins>
        <plugin>
      <groupId>org.codehaus.mojo</groupId>
      <artifactId>gwt-maven-plugin</artifactId>
      <executions>
        <execution>
          <goals>
            <goal>resources</goal>
          </goals>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>
</project>

Now, when you do mvn clean install of the parent-project, the resources will be generated and the GWT webapp can consume them. 🙂

TIPS/NOTES:
– Don’t forget to add all the dependencies as you usually do in your common maven projects.
– Remember to add the maven-gwt-plugin to the pom.xml of the resource you want generate.
– You don’t need to do all the steps explained above if you are adding dependencies that are going to use on the server-side. In that case just add the dependency to the pom as usual.

 

GWT – Asynchronous RPC January 14, 2011

Filed under: GWT,Java — nicozan @ 1:28 pm

Most semi-complex WebApps have a back-end server. GWT give us the possibility to interact with the server-side using RPC (Remote Procedures Call). I’ll explain how it works through an example:

On the client-side, we have 2 Interfaces that will be the key to our communication with the server-side.

BankClient.java

package com.wordpress.nicozan.client;
import com.google.gwt.user.client.rpc.RemoteService;
public interface BankClient extends RemoteService {
  public String askForLoan(String s);
}

BankClientAsync.java

package com.wordpress.nicozan.client;
public interface BankClientAsync {
   public void askForLoan(String s, AsyncCallback<String> callback);
}

The nature of asynchronous methods requires the caller to pass in a callback object that can be notified when an asynchronous call completes, since by definition the caller cannot be blocked until the call completes. For the same reason, asynchronous methods do not have return types; they generally return void. Should you wish to have more control over the state of a pending request, return Request instead. After an asynchronous call is made, all communication back to the caller is via the passed-in callback object.

On the server side we just have 1 class, that implements the methods of the BackClient interface.

Bank.java

package com.wordpress.nicozan.server;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.wordpress.nicozan.client.BankClient;
public class Bank extends RemoteServiceServlet implements
    BankClient {
  	public String askForLoan(String s) {
			if (Integer.parseInt(s) <= 1000){
				System.out.println("granted");
				return new String("Loan Granted");	
		 	}else{
		 		System.out.println("Deny");
		 		return new String("Loan Denied");
		 	}

        }
}

It is very important to take into consideration the suffix Async and argument referencing the AsyncCallback. The relationship between service interface and its asynchronous counterpart must follow certain naming standards. If the naming standards aren’t applied the GWT compiler won’t generate the proper code to implement RPC.
The service interface and the asynchronous interface must be in the same package. Each method in the asynchronous service interface must have a corresponding method in the asynchronous service interface with an extra AsyncCallback parameter as the last argument.

Up to now we have defined all the necessary elements, but how should we use them?. Usually in common WebApps we have to define and map our servlet in the web.xml file:

...
<servlet>
   <servlet-name>bankServlet</servlet-name>
   <servlet-class>com.wordpress.nicozan.server.Bank</servlet-class>
   <load-on-startup>1</load-on-startup>    
</servlet>
  
<servlet-mapping>
    <servlet-name>bankServlet</servlet-name>
    <url-pattern>/bankServlet</url-pattern>  	
</servlet-mapping>
  	
<servlet-mapping>
   <servlet-name>bankServlet</servlet-name>
   <url-pattern>/com.wordpress.nicozan.Application/bankServlet</url-pattern>
</servlet-mapping>  	
...

Please remember that one servlet can be mapped in more than one URL, no the other way around. GWT needs an other definition of the servlet in the Module Configuration File,”Application.gwt.xml” :

…      
<servlet path="/bankServlet" class="com.wordpress.nicozan.server.Bank"/> 
...

Nothing further to say, thanks for reading it. I hope it helps.. 😀

 

GWT (Google Web Toolkit) Framework – Basic Concepts to do things well. January 11, 2011

Filed under: GWT,Java — nicozan @ 3:04 pm

As you might know there are various frameworks that give us the chance to develop Web Applications using the Java language. For example Seam, Wicket or JSF. But today I’ll be showing the basic concepts of the Google’s framework to develop Web Applications, GWT.

MODULES and ENTRY POINTS

The GWT web apps are called MODULES. A module “myModule” is described by a configuration file “myModule.gwt.xml”. Each module can have one or more Entry point classes. An Entry Point class has the onModuleLoad() method that would be the main() method in analogy with a standard Java program.

Every single module is connected with a HTML page, which is called “host-page”. The code for a GWT web application executes within this HTML document. The UI components of the host-page can be placed into “div” containers. Other way of placing the UI components is by assigning them to the body of the HTML page. Some of the classes related to the placement of an UI component into the host-page are: VerticalPanel, HorizontalPanel and RootPanel (Body) amongst others.

Mostly, the web apps developed using GWT have ONLY ONE ENTRY-POINT and ONE HTML this is because one can changed the UI components dynamically by changing the WIDGETS and LAYOUTS.

WIDGETS and LAYOUTS

If you are not familiarized with the terms, here you have a simple definition of each one.

Layout: refers to the dimensioning of content in a device display. Layouts end up being visual content frameworks, that can be fixed, they can use relative measure units or they can provide fluid layout with proportional dimensions. The concept of the layout it’s a very wide and powerful one, because when we take the role of web designers we don’t know the size of the web browser window. The browser could be in a cellphone, Ipad, laptop amongst other devices. Thanks to layouts we don’t have to think for each case of window size.

Widget: is a stand-alone application. This Application can be embedded into third party sites by any user on a page in which they have authorship rights. For example, in personal blog you could a “Twitter Widget” to show all your tweets.

That would be all for the moment ;)…