So, one of my pet peeves of a poorly designed site is that as the site loads, elements shift in size/position/content, and shift around the page content as it loads. For example, if the header loads after the menu and grows in height, it can possibly shift the menu down just as the user is going to click. Also it just gives the appearance of a poor quality site.
But, with GWT what I'm noticing is that by adding Widgets to the page dynamically, the page initially loads with the skeleton HTML, then grows and shifts around as the Widgets are drawn. This occurs even in some of the demos in the Samples section. I'd like to eliminate this shifting around completely, but still use dynamic GWT Widgets like Button and StackLayout.
Is there a common way to address this?
Thanks guys!
Example:
Below is a lightweight example of a welcome page, where the menu has 0 height, but a second or two after the page loads, the buttons will be drawn and shift the content down. In this example, I could set the "menu" element's height in CSS, but that forces me to always update the CSS if buttons were added/removed, but this establishes a poor development precedent and is difficult to maintain.
Example MyEP.html:
<html>
<head>
<style type="text/css">
#menu {
width:50px;
}
.button {
width:50px;
}
</style>
</head>
<body>
<div id="menu"></div>
<div id="content">
<p>Some Content that will shift down after the page loads</p>
</div>
</body>
</html>
Example MyEP.java:
public class MyEP extends EntryPoint {
public void onModuleLoad() {
Button one = new Button("Button One");
Button two = new Button("Button Two");
RootPanel menuPanel = RootPanel.get("menu");
menuPanel.add(one);
menuPanel.add(two);
}
}
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
No comments:
Post a Comment