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));



As an Amazon Associate I earn from qualifying purchases.

My favorite quotations..


“A man should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects.”  by Robert A. Heinlein

"We are but habits and memories we chose to carry along." ~ Uki D. Lucas


Popular Recent Articles