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.

No comments:

Post a Comment

Please be polite.

Post Scriptum

The views in this article are mine and do not reflect those of my employer.
I am preparing to cancel the subscription to the e-mail newsletter that sends my articles.
Follow me on:
X.com (Twitter)
LinkedIn
Google Scholar

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 Posts

Most Popular Articles