<html> <head> <title>Wrapper HTML for App</title> <link type="text/css" rel="stylesheet" href="MySampleApplication.css"> <script type="text/javascript" language="javascript" src="MySampleApplication/MySampleApplication.nocache.js"></script> </head> <body> <div id="my-div" ></div> <h1>Sample Application</h1> <table align="center"> <tr> <td id="slot1"></td> </tr> </table> </body> </html>
h1 { font-size: 2em; font-weight: bold; text-align: center; } body, td, a, div, .p { font-family: arial, sans-serif } .my-red-class { background-color: #ff0000 }
package com.mySampleApplication.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.dom.client.Document; import com.google.gwt.dom.client.Element; import com.google.gwt.user.client.ui.*; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.event.dom.client.ClickEvent; /** * Entry point classes define <code>onModuleLoad()</code> */ public class MySampleApplication implements EntryPoint { /** * This is the entry point method. */ public void onModuleLoad() { Button button = new Button("Click me"); RootPanel.get("slot1").add(button); button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Element element = Document.get().getElementById("my-div"); element.toggleClassName("my-red"); } }); } }
.my-red-class, and in the code"my-red"- Nofate ♦