LDSTechForumProjects

Building User Interfaces Lab 1

Building User Interfaces

This lab assumes you have gone through the intro to GWT lab, prior to this one, know how to create a GWT project, and be able to run your GWT app in Development Mode.

For now, I will only post the end result of the live training lab for review purposes. Soon, I will come back and update this lab page to walk you through the whole lab, step by step, learning all of the concepts covered as you go. As for now though, here is the code for the end result:

Module XML File

In this lab I have created a Module named UI, hence UI.gwt.xml is the file name of this file.

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.6//EN"
        "http://google-web-toolkit.googlecode.com/svn/releases/1.6/distro-source/core/src/gwt-module.dtd">
<module>

    <inherits name='com.google.gwt.user.User'/>

    <entry-point class='ui.lab.client.UI'/>

</module>

HTML Host File

File name: UI.html

<html>
<head>
    <title>Comic & Video of the Day</title>
    <link rel="stylesheet" href="UI.css">
</head>
<body>

    <script type="text/javascript" language="javascript" src="ui.lab.UI.nocache.js"></script>

    <div id="header">
        <h1>Comic & Video of the Day</h1>
        <img id="logo" src="http://code.google.com/webtoolkit/images/gwt-logo.png" title="GWT Rocks!" alt="GWT Rocks!">
    </div>
    
    <div id="mainContent">

    </div>

</body>
</html>

CSS File

Filename: UI.css

body {
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    font-size: small;
    margin: 8px;
}

#header {
    padding: 20px;
    border-bottom: solid 1px RED;
    overflow: auto;
}

#header h1 {
    float: left;
    margin-top: 40px;
}

#header img#logo {
    float: right;
    height: 100px;
}

#mainContent {
    padding: 20px;
}

.contentWrapper {
    margin-top: 20px;
}

#_loveIt {
    margin-top: 10px;
}

Module Entry Point Class

Filename: UI.java

package ui.lab.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.*;

public class UI implements EntryPoint {

    public static final String comicURL = "http://imgs.xkcd.com/comics/exploits_of_a_mom.png";
    public static final String skitEmbedHTML = "<object width=\"480\" height=\"385\">"
        + "<param name=\"movie\" value=\"http://www.youtube.com/v/zNv_Tv1BB2M&hl=en_US&fs=1&\"></param>"
        + "<param name=\"allowFullScreen\" value=\"true\"></param>"
        + "<param name=\"allowscriptaccess\" value=\"always\"></param>"
        + "<embed src=\"http://www.youtube.com/v/zNv_Tv1BB2M&hl=en_US&fs=1&\" "
            + "type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" "
            + "allowfullscreen=\"true\" width=\"480\" height=\"385\">"
        + "</embed></object>";

    public void onModuleLoad() {
        RootPanel.get("mainContent").add(new OfTheDayWidget(comicURL, skitEmbedHTML));
    }
}

Custom Widget

Filename: OfTheDayWidget.java

package ui.lab.client;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;

public class OfTheDayWidget extends Composite {

    private FlowPanel mainPanel = new FlowPanel();
    private Button comicButton = new Button("Comic of the Day");
    private Button videoButton = new Button("You Tube Video of the Day");
    private Button loveItButton = new Button("I Love This Comic!");
    private FlowPanel contentWrapper = new FlowPanel();

    private HTMLPanel comicPanel;
    private HTMLPanel videoPanel;

    public OfTheDayWidget(String comicURL, String videoEmbedHTML) {

        //Create the Comic and Video Panels with the passed in Parameters
        comicPanel = new HTMLPanel("<img src='"+comicURL+"'/><div id='_loveIt'></div>");
        videoPanel = new HTMLPanel(videoEmbedHTML);

        //Apply Styles
        mainPanel.getElement().setId("mainPanel");
        comicButton.setStyleName("commicButton");
        videoButton.addStyleName("videoButton");
        contentWrapper.setStyleName("contentWrapper");
        comicPanel.setStyleName("comicPanel");
        videoPanel.setStyleName("videoPanel");

        //Add ui components to the mainPanel
        mainPanel.add(comicButton);
        mainPanel.add(videoButton);
        mainPanel.add(contentWrapper);

        //Add the Love It Button to the Comic HTMLPanel
        comicPanel.add(loveItButton, "_loveIt");

        //Add the Default content - the Comic Panel
        contentWrapper.add(comicPanel);

        //Create the click Handlers for the buttons
        comicButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                contentWrapper.clear();
                contentWrapper.add(comicPanel);
                DOM.getElementById("logo").setAttribute("src", "http://code.google.com/webtoolkit/images/gwt-logo.png");
            }
        });
        videoButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                contentWrapper.clear();
                contentWrapper.add(videoPanel);
                DOM.getElementById("logo").setAttribute("src",
                    "http://t2.gstatic.com/images?q=tbn:v7VeaLy4bkgyLM:http://www.dng-consulting.com/images/gwtlogo.jpg");
            }
        });
        loveItButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                Window.alert("'I Love This Comic!' Button Clicked");
            }
        });

        //Initialize this Custom Composite Widget!
        initWidget(mainPanel);
    }

}
This page was last modified on 8 June 2010, at 23:46.

Note: Content found in this wiki may not always reflect official Church information. See Terms of Use.