Saturday, September 26, 2009

How to separate UI from code in GWT

1. Create a general structure in HTML with all DIVs that represent major widgets


<script type="text/javascript" language="javascript" src="myapp/myapp.nocache.js"></script>
</head>
<body>

<div id="header">
<h1>Welcome to My App</h1>
<div id="facebook_login"></div>
</div>
<div id="tool_tip"></div>

<table id="main_content">
<tr>
<td id="left_column">
<div id="list_of_products"></div>
</td>
...

2. Style the widgets in CSS

#header h1 {
background-color: yellow;
border-style: dotted;
font-size: xx-large;
}

3. Build the widgets in Java. Note: widgets are composites of various HTML elements and can have their own CSS styling.

RootPanel.get("facebook_login").clear();
RootPanel.get("facebook_login").add(new FbLogin(session));