How to Retrieve an XML document from a remote server using Google Web Toolkit (GWT) and display text from its elements
(using Eclipse Indigo running on Windows 7)


Steps:

  1. Run Eclipse

  2. File -> New -> Web Application Project

  3. Fill in the followings fields:
    Project name: ProjectName
    Package: com.example.myproject

  4. Google SDKs:
    Tick 'Use Google Web Toolkit'

  5. Untick 'Use Google App Engine'



  6. Click Finish.

  7. In order to use the XML and HTTP types provided by GWT, you'll need to add the following tags

    <inherits name="com.google.gwt.http.HTTP" />

    <inherits name="com.google.gwt.xml.XML" />

    in the 'src' folder, under 'com.example.myproject', change the module XML file named 'ProjectName.gwt.xml'.


  8. Save.

  9. In the 'src' folder, under 'com.example.myproject.client' package, replace the the entire contents of 'ProjectName.java', to the following:

    package com.example.myproject.client;

    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    import com.google.gwt.http.client.Request;
    import com.google.gwt.http.client.RequestBuilder;
    import com.google.gwt.http.client.RequestCallback;
    import com.google.gwt.http.client.RequestException;
    import com.google.gwt.http.client.Response;
    import com.google.gwt.http.client.URL;
    import com.google.gwt.user.client.Window;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.xml.client.DOMException;
    import com.google.gwt.xml.client.Document;
    import com.google.gwt.xml.client.XMLParser;

    public class ProjectName implements EntryPoint
    {
        public static String    url;

        @Override
        public void onModuleLoad()
        {
            final Button button = new Button("Click Here");
            button.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event)
                {
                    retrieve();
                }
            });

            RootPanel.get().add(button);
        }

        public void retrieve()
        {
            url = "sample.xml";

            RequestBuilder builder = new RequestBuilder(RequestBuilder.GET,
                    URL.encode(url));

            try
            {
                builder.sendRequest(null, new RequestCallback() {
                    public void onError(Request request, Throwable exception)
                    {
                        // Couldn't connect to server (could be timeout, SOP
                        // violation, etc.)
                        Window.alert("Couldn't retrieve XML");
                    }

                    public void onResponseReceived(Request request,
                            Response response)
                    {
                        if (200 == response.getStatusCode())
                        {
                            // Process the response in response.getText()
                            parseMessage(response.getText());
                        }
                        else
                        {
                            // Handle the error. Can get the status text from
                            // response.getStatusText()
                            Window.alert("Error: " + response.getStatusText());
                        }
                    }
                });
            }
            catch (RequestException e)
            {
                // Couldn't connect to server
                Window.alert("Couldn't connect to server to retrieve the XML: \n");
            }
        }

        private void parseMessage(String messageXml)
        {
            try
            {
                // parse the XML document into a DOM
                Document messageDom = XMLParser.parse(messageXml);

                String tag1Value = messageDom.getElementsByTagName("tag1").item(0)
                        .getFirstChild().getNodeValue();
                String tag2Value = messageDom.getElementsByTagName("tag2").item(0)
                        .getFirstChild().getNodeValue();

                Window.alert("tag1 Value: " + tag1Value + "\n" + "tag2 Value: "
                        + tag2Value);

            }
            catch (DOMException e)
            {
                Window.alert("Could not parse XML document.");
            }
        }
    }

  10. In the 'war' folder, replace the the entire contents of  the file 'ProjectName.html' into:

    <html>
      <head>
        <title>Web Application Starter Project</title>
        <script type="text/javascript" language="javascript" src="projectname/projectname.nocache.js"></script>
      </head>
      <body>
        <noscript>
          <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">
            Your web browser must have JavaScript enabled
            in order for this application to display correctly.
          </div>
        </noscript>
        <h1>Demo How-to retrieve an XML document from a remote server using Google Web Toolkit (GWT)</h1>
      </body>
    </html>

  1. Save.

  2. In the 'war' folder, create a new file (New -> File)

  3. Name the file 'sample.xml'

  4. Update its content to:

    <?xml version="1.0" encoding="UTF-8"?>
    <message>
        <tag1>blah blah</tag1>
        <tag2>blah blah blah</tag2>
    </message>

  5. make sure there is no space before the XML declaration:

    <?xml version="1.0" encoding="UTF-8" ?>
  6. Now, click on the project, Run As... -> Web Application

  7. Now, open the link that is given (similar to the following) in your web browser

    http://127.0.0.1:8888/ProjectName.html?gwt.codesvr=127.0.0.1:9997

  8. Make sure that your browser is equipped with the Google Web Toolkit Developer Plugin, so that it can show. If not, install it upon prompt.
    On a Mac machine, as of 2012-04-27, Safari and Firefox-for-Mac do not have a GWT Plugin, OmniWeb 5.1.1/Google Chrome would find the plugin and would work.
  9. Click the button, and it will show retrieve the XML file, parse its contents, and show the data contained in its tags.

  10. You can GWT Compile Project, and it will be a self-contained webpage, you can host on the internet and use.

  11. To cutomize the project, you can change the 'url' value in the 'ProjectName.java' file, under 'src' folder, in the 'com.example.myproject.client', to hold the address to the XML file.
    And, also, you can chane the XML file and parseXML function in the aforementioned file.