Creating a GWT application with GWT-Ext controls running on JBoss using NetBeans. Step by step

    I decided to share with the general public how you can create a full-fledged GWT application using NetBeans, as well as how to deploy it on the JBoss application server. Unfortunately, I did not find a complete description of this process on the network (there are articles separately on GWT, separately on GWT-EXT and separately on JBoss), so I decided to put everything together. I hope this guide is useful to someone and serves as a starting point. So let's get started.

    Caution! Lots of great screenshots

    We will need:


    - Sun JDK v1.6
    - JBoss Application Server v4.2.3 GA
    - NetBeans v6.5.1
    - Google Web Toolkit 1.6.4
    - GWT-Ext v2.0.5
    - ExtJS v2.0.2 or extjs.com/products/extjs/download.php

    Couple of points


    - In my guide I will use the folder C:/Java.In it I will put all the necessary things. I advise you to do the same.
    - Remember that when setting environment variables for Windows XP it is better to reboot

    Step 1. Install Java


    I probably won’t tell how to install Java. Everything has already been chewed and chewed many times. I can only say that full operability requires that the JAVA_HOME variable be registered in the environment variables .

    Step 2. Unpacking all archives and environment variables


    Archives need to be unpacked as follows. Remember to write environment variables.
    Sun JDK v1.6C: \ Java \ JdkJAVA_HOME
    JBoss Application Server v4.2.3 GAC: \ Java \ JBossJBOSS_HOME
    Google Web Toolkit 1.6.4C: \ Java \ GWTGWT_HOME
    GWT-Ext v2.0.5C: \ Java \ GXTGXT_HOME

    image
    image

    Step 3. Launch JBoss


    After unpacking, go to JBoss / bin and run run.bat. If everything went well, then we should see the following:
    image

    Step 4. NetBeans and installing the GWT4NB plugin


    After installing NetBeans, go to Tools -> Plugins. There, in the tab, select the GWT4NB plugin. After installing the plugin, the following should happen:
    image

    Step 5. Creating a web project


    image
    image
    image
    image
    image
    image
    image
    image
    image

    Step 6. Test publication of the project


    Right-click on the project and select Deploy. Since JBoss is already running, NetBeans will compile the project and put it on the server on its own. It should look like this:
    image
    Now the project is available at the following address: http: // localhost: 8080 / SampleGwtApplication . There will be a button with an inscription.

    Step 7. We teach the client part to pull the server code. AJAX in action


    To do this, we need to create a service. Right-click on the project.
    image
    image
    image

    After NetBeans generates the necessary classes, go to MainModuleEntryPoint.java and write the following to the onModuleLoad function:
    image
    Publish the project again. After compilation, a text box and a button will appear on the project page ( http: // localhost: 8080 / SampleGwtApplication ). The button will send a full ajax request to the server. Details about the device services and how they work with the client to read on the Internet.

    Step 8. Fasten the GWT-Ext


    The first thing to do is connect to the libraries of the GWT-Ext project. To do this, right-click on the project libraries and select "Add Library ..".
    image
    ... create a new library in NetBeans.
    image
    Specify the library itself, which we have C: \ Java \ GXT \ gwtext.jar
    image
    ... and the documentation for it.
    image
    Now in the MainModule.gwt.xml file we add one line:
    image
    Now in the code of MainEntryPoint.java we can use GWT-Ext controls. However, this is not enough for everything to work. It is also necessary to put ExtJS client scripts in the project. To do this, create scripts, css and images folders in the web folder. Like here:
    image
    ... from the ext-2.0.2.zip archive, you need to put adapter and ext-all.js in the scripts folder
    image
    ... in the css folder you need to put the contents of ext-2.0.2.zip/resources/css
    image
    ... in the images folder you need to put the contents of ext-2.0.2.zip/resources/images
    image
    ... now we connect these scripts in the page. We write such things in the welcomeGWT.html file ...
    image
    Only a little remains. In the MainModuleEntryPoint.java code, we write the creation of the GWT-Ext panel and buttons for it. In the same way, you can use other control pack com.gwtext.client.widgets
    image
    Again we publish the project and see the result
    image
    That's all. Thanks for attention.

    PS Sorry for the awkwardness of the syllable and large pictures. Time is 23.41, and I'm still sitting at work. I’m trying for you.

    Also popular now: