Tutorial MyGWT 100 – Creating your FIRST MyGWT application

Author Posted by marty Post Date 3 March, 2008 Comments (8) Comments

I was blown away by MyGWT ((was very shiny in Sept 2007)) after seeing what it can do on its demo. I quickly jumped on my squirtle and started to read the tutorial madly. But sadly the tutorial wasn’t really made for a dumb-ass like myself, so it took me painfully long hours just to run my mygwt hello world! If you look through the tutorial, it firstly doesn’t look like a ‘Creating your first MyGWT application’ type of thing. It was too ambitious trying to explain some concepts instead of focusing on getting something to work.

GWT hasn’t been there for a long time, so I think it will be good to have some reference to at least how to get GWT working (point them out to gwt site perhaps?). What about connecting your project to eclipse? There is a page on ‘Configuring Eclipse’, but again, wasn’t even referenced in 101.

So here it goes, hopefully you can follow this steps to make something work. I will assume that you are new to gwt and you are using eclipse, so I will start from Installing GWT and then MyGWT.

Download the source for this tutorial here. This is only for viewing purpose, don’t expect it to unzip it and work (because it is downloaded straight from my local directory). You will need to follow the tutorial.

Installing GWT

Download GWT from gwt site.

Unzip the folder in your workspace folder and treat it as an individual java project.

Add the unzipped folder to your environment variable PATH, so add something like ‘C:\Documents and Settings\Me\workspace\gwt-windows-1.4.61\’ if you are using Windows. Other OS shouldn’t be too different.

Lets call our application MyGWT100. Create another folder using that name in your workspace (case sensitive). From inside the folder, run ‘projectCreator -eclipse MyGWT100′ from the command line. You should be getting messages such as this:

Created directory C:\Documents and Settings\Marty\workspace\MyGWT100\src
Created directory C:\Documents and Settings\Marty\workspace\MyGWT100\test
Created file C:\Documents and Settings\Marty\workspace\MyGWT100\.project
Created file C:\Documents and Settings\Marty\workspace\MyGWT100\.classpath

The projectCreator that comes with the gwt version I am using is not smart enough to create the folder ‘MyGWT100′ on its own, therefore if you didn’t create the folder first before you run the projectCreator, you will end up with those 4 items scattered around.

Once that’s done, run ‘applicationCreator -eclipse MyGWT101 com.mycompany.client.MyGWT101′. Make sure that the final package is ‘client’, gwt should then spit out something like this:
Created directory C:\Documents and Settings\Marty\workspace\MyGWT100\src\com\mycompany
Created directory C:\Documents and Settings\Marty\workspace\MyGWT100\src\com\mycompany\client
Created directory C:\Documents and Settings\Marty\workspace\MyGWT100\src\com\mycompany\public
Created file C:\Documents and Settings\Marty\workspace\MyGWT100\src\com\mycompany\MyGWT100.gwt.xml
Created file C:\Documents and Settings\Marty\workspace\MyGWT100\src\com\mycompany\public\MyGWT100.html
Created file C:\Documents and Settings\Marty\workspace\MyGWT100\src\com\mycompany\client\MyGWT100.java
Created file C:\Documents and Settings\Marty\workspace\MyGWT100\MyGWT101.launch
Created file C:\Documents and Settings\Marty\workspace\MyGWT100\MyGWT101-shell.cmd
Created file C:\Documents and Settings\Marty\workspace\MyGWT100\MyGWT101-compile.cmd

When you run ‘MyGWT100-shell’, it should come up with gwt wrapper html

gwthelloworld.PNG

If you can see that, it is a good thing :)

Installing MyGWT

Download the zip file from here, and unzip them in your workspace folder just like you did with gwt.

Add your MyGWT100 as a java project in eclipse. Your package explorer view should look like this:

mygwt100peb.PNG

Right click on the project and choose ‘Build Path -> Configure Build Path’. Go to ‘Libraries’ tab and click on ‘Add External JARs’. Look for the unzipped folder of MyGWT that you previously downloaded. Directly in the folder, you should be able to find ‘mygwt.jar’. Your view should look like this now:

mygwt100lib.PNG

In MyGWT100.gwt.xml, add this line <inherits name=”net.mygwt.ui.MyGWT” /> underneath the line <inherits name=’com.google.gwt.user.User’/> that is already there.

In MyGWT100.html, empty the <body> area by removing the default example text from gwt. Your body area should just be <body></body>.

Now to the last utmost essential part, edit your ‘MyGWT100-shell.cmd’ and ‘MyGWT100-compile.cmd’ files. In both files, you should be able to see something like this: @java -cp “%~dp0\src;%~dp0\bin;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-user.jar;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-dev-windows.jar”

You will need to include mygwt.jar to it, so it becomes:

@java -cp “%~dp0\src;%~dp0\bin;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-user.jar;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-dev-windows.jar;C:/Documents and Settings/Marty/workspace/mygwt-0.4.44/mygwt.jar”

Double click on ‘MyGWT100-shell.cmd’ on the Package Explorer to run your code. This is what you should be able to see:

mygwt100end.PNG

Yay!

Note: I am using gwt-windows-1.4.61 and MyGWT0.4.44 for this tutorial.

You can leave a response, or trackback from your own site.

8 Responses to “Tutorial MyGWT 100 – Creating your FIRST MyGWT application”

  1. March 4th, 2008 at 10:28 am

    Chii says:

    heh, nice.

    myGWT lib seems a bit younger than GWT ext lib – try this with the GWT ext lib next time and see if its different.

  2. March 18th, 2008 at 9:59 pm

    lamdauf says:

    thx a lot.
    it works under Linux too.

  3. March 29th, 2008 at 3:02 am

    it's me says:

    thanks for the tutorial it was helpfull :)

    but what if we use maven we can’t see the files MyGWT100-shell.cmd’ and ‘MyGWT100-compile.cmd’ so how can we add MyGWT?

  4. March 29th, 2008 at 9:06 am

    marty says:

    Try have a look at http://thediscoblog.com/2007/04/28/3-steps-to-running-gwt-junit-tests-in-eclipse/
    to run gwt classes from the run dialog. Hope that helps :)

  5. April 1st, 2008 at 5:19 am

    practice says:

    I’m getting an error.
    Failed to load module com.test.MyGWT101
    Please see the log in the development shell for details.

  6. April 1st, 2008 at 7:52 am

    marty says:

    It ll be very helpful to paste the log. please do so.

  7. April 1st, 2008 at 10:36 am

    practice says:

    Source code:

    package com.synaps.client;

    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.ClickListener;
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;

    /**
    * Entry point classes define

    onModuleLoad()

    .
    */
    public class MyGWT101 implements EntryPoint {

    /**
    * This is the entry point method.
    */
    public void onModuleLoad() {
    final Button button = new Button(”Click me”);
    final Label label = new Label();

    button.addClickListener(new ClickListener() {
    public void onClick(Widget sender) {
    if (label.getText().equals(”"))
    label.setText(”Hello World!”);
    else
    label.setText(”");
    }
    });

    // Assume that the host HTML has elements defined whose
    // IDs are “slot1″, “slot2″. In a real app, you probably would not want
    // to hard-code IDs. Instead, you could, for example, search for all
    // elements with a particular CSS class and replace them with widgets.
    //
    RootPanel.get(”slot1″).add(button);
    RootPanel.get(”slot2″).add(label);
    }
    }

    Log:

    [ERROR] Unable to load module entry point class com.synaps.client.MyGWT101 (see associated exception for details)
    java.lang.NullPointerException: null
    at com.synaps.client.MyGWT101.onModuleLoad(MyGWT101.java:36)
    at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:342)
    at com.google.gwt.dev.shell.BrowserWidget.attachModuleSpace(BrowserWidget.java:326)
    at com.google.gwt.dev.shell.ie.BrowserWidgetIE6.access$200(BrowserWidgetIE6.java:36)
    at com.google.gwt.dev.shell.ie.BrowserWidgetIE6$External.gwtOnLoad(BrowserWidgetIE6.java:70)
    at com.google.gwt.dev.shell.ie.BrowserWidgetIE6$External.invoke(BrowserWidgetIE6.java:125)
    at com.google.gwt.dev.shell.ie.IDispatchImpl.Invoke(IDispatchImpl.java:293)
    at com.google.gwt.dev.shell.ie.IDispatchImpl.method6(IDispatchImpl.java:196)
    at org.eclipse.swt.internal.ole.win32.COMObject.callback6(COMObject.java:117)
    at org.eclipse.swt.internal.win32.OS.DispatchMessage(OS.java:1925)

    Thank you in advance

  8. April 15th, 2008 at 3:24 am

    Mike M says:

    1) The NullPointerException results from the code still trying to reference the “slot1″ and “slot2″ from the original HTML file, but since we’ve now removed that from the html body, it cannot find it.
    Change the code in the onModuleLoad() method in your java file to match Marty’s: 

          Viewport vp = new Viewport();
      ContentPanel cp = new ContentPanel(Style.HEADER | Style.COLLAPSE);
      cp.setWidth(400);
      cp.setText("HelloWorld!");
      cp.addText("Press the button to collapse this");
      vp.add(cp);
      vp.layout(true);

    2) Import the necessary classes
    import net.mygwt.ui.client.Style;
    import net.mygwt.ui.client.widget.ContentPanel;
    import net.mygwt.ui.client.widget.Viewport;

    3) In Eclipse, add the MyGwt.jar and the 2 GWT jars to the project classpath so you can compile

    4) If you are using MyGWT 0.5.0 Beta, add these lines to your html file 

      <link rel="stylesheet" type="text/css" href="mygwt-all.css" />
  <link rel="stylesheet" type="text/css" href="mygwt-all-gray.css" />

    5) Recompile then launch the app again

Leave a Reply