Skip to main content

Adding jMaki wrapped Yahoo widgets to a GWT app

Posted by carlavmott on May 12, 2008 at 11:11 AM PDT

To prepare for our JavaOne session, GWT and jMaki: Expanding the GWT Universe, I decided I should add a jMaki Yahoo widget to a GWT application. Here is what I did.

I wanted to start with an existing application and I chose the Java PetStore demo application which Greg had rewritten using jMaki widgets and GWT. The code for that application is in the jmaki-store project along with a README.txt containing all the build and install instructions. First I checked out the jmaki-store workspace, built and deployed the application to make sure I had a working copy of the app. Follow the instructions in README.txt file to build and deploy but basically you need to go to the jmaki-store/code/gwt/webapp dir and type ant. There also is a target to deploy the application or you can copy the war file to the auto deploy directory. In my case I chose to deploy to GlassFish V3 and deployment was extremely fast.

I decided to add the Calendar Yahoo widget to the application because I thought it would be pretty straight forward. The following are steps needed to add the widget to the application. First, I had to add an additional class (Calendar, java) in jmaki-store/code/gwt/widgets/sc/java/jmaki/client. Calendar.java contains the following:

  
package jmaki.client;

import jmaki.client.JMakiWidget;

/**
* Calendar Widget.
*/
public class Calendar extends JMakiWidget {
  
  public Calendar(int width, int height) {
      super(width,height);  
  }    
   
  public String getWidgetName(){
      return "yahoo.calendar";
  }
   
}

This class extends JMakiWidget which is a wrapper for the jMaki widgets. The Calendar widget has 2 methods, a constructor and the getWidgetName method which returns the name of the widget. Following the jMaki convention the name of the widget is the toolkit name dot widget name.

Next I updated the Widgets.gwt.xml file to list all the dependencies for this widget. It turns out that the list is already in the widgets.json file as that information is needed by the jMaki plugins so I started there. I had to update the paths and reorder the list because here order matters. The Yahoo toolkit CSS files need to appear before jMaki CSS files then the Yahoo toolkit library dependencies and then the jmaki component.js file. jMaki framework will take care of this automatically but in GWT land the list needs to be specified in order. The Widgets.gwt.xml file looks like:

 <?xml version="1.0" encoding="UTF-8"?>
<module>
<inherits name="com.google.gwt.core.Core"/>
<source path="client"/>
<public path="public"/>
<script src="resources/jmaki.js"/>

<stylesheet src="resources/jmaki/ibrowser/component.css"/>
<script src="resources/jmaki/ibrowser/component.js"/>

<stylesheet src="resources/jmaki/resources/styles/themes/charcol/theme.css"/>
<stylesheet src="resources/jmaki/accordionMenu/component.css"/>
<script src="resources/jmaki/accordionMenu/component.js"/>

  <stylesheet src="resources/jmaki/cart/component.css"/>
<script src="resources/jmaki/cart/component.js"/>

<stylesheet src="resources/jmaki/feedreader/component.css"/>
<script src="resources/jmaki/feedreader/component.js"/>

<stylesheet src="resources/yahoo/resources/libs/yahoo/v2.5.1/calendar/assets/skins/sam/calendar.css"/>
<stylesheet src="resources/yahoo/calendar/component.css"/>
<script src="resources/yahoo/resources/libs/yahoo/v2.5.1/yahoo-dom-event/yahoo-dom-event.js"/>
<script src="resources/yahoo/resources/libs/yahoo/v2.5.1/element/element-beta-min.js"/>
<script src="resources/yahoo/resources/libs/yahoo/v2.5.1/container/container_core-min.js"/>
<script src="resources/yahoo/resources/libs/yahoo/v2.5.1/menu/menu-min.js"/>
<script src="resources/yahoo/resources/libs/yahoo/v2.5.1/button/button-min.js"/>
<script src="resources/yahoo/resources/libs/yahoo/v2.5.1/datasource/datasource-beta-min.js"/>
<script src="resources/yahoo/resources/libs/yahoo/v2.5.1/calendar/calendar-min.js"/>
<stylesheet src="resources/yahoo/resources/libs/yahoo/v2.5.1/menu/assets/skins/sam/menu.css"/>
<stylesheet src="resources/yahoo/resources/libs/yahoo/v2.5.1/button/assets/skins/sam/button.css"/>
  <script src="resources/yahoo/calendar/component.js"/>
</module>

So far I have listed the resources needed for the widget and now I need to copy those files into the web app. All the resources are in the jMaki bundle so I just need to get what is on the list and add it to my application. Here I cheated a little. I created a project using NetBeans and put a single widget (Yahoo calendar) in the page. Doing so copied in the appropriate resources and so I had the directory I needed to copy for my GWT app. The resources/yahoo/calendar/* directory under the new project was copied to the jmaki-store/code/shared/widgets/resource/yahoo directory in the jmaki-store project.

The last thing I need to do is to add the new widget to the Main window of my app. Edit jmaki-store/code/gwt/webapp/src/java/jmaki/store/client/MainEntryPoint.java to look as follows:

 
package jmaki.store.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.Widget;

import jmaki.client.IBrowse;
import jmaki.client.AccordionMenu;
import jmaki.client.Cart;
import jmaki.client.Calendar;


public class MainEntryPoint implements EntryPoint {
   
    /** Creates a new instance of MainEntryPoint */
    public MainEntryPoint() {
    }
   
    /**
     * The entry point method, called automatically by loading a module
     * that declares an implementing class as an entry-point
     */
    public void onModuleLoad() {
        DockPanel dp = new DockPanel();

        AccordionMenu am = new AccordionMenu("menu.json", 200,400);
         dp.add(am, DockPanel.WEST);
        
      
        IBrowse ib = new IBrowse(400,400);
        RootPanel.get().add(ib);
        dp.add(ib, DockPanel.CENTER);
   
        Cart cart = new Cart(250, 400);
        dp.add(cart, DockPanel.EAST);
      
        Calendar cal = new Calendar(150, 150);
        dp.add(cal, DockPanel.EAST);
      
        RootPanel.get().add(dp);
    }
   
}

Now when you build and deploy the app again you will see the calendar widget in the page. Note that you do not need to change the build files.

It really is pretty easy once you figure out the order that the JavaScript dependencies should be in. Using jMaki wrapped widgets means that 3rd party components can easily be added to GWT.

Related Topics >>