Group items tagged

Mixing HTML and Widgets So how can we mix widgets and html properly? Before GWT version 2.0, the most common way was to use “RootPanel.get(’someId’)” to access an HTML element in the application host page, and then create an object there to attach the widgets to (ie. a “RootPanel”). If we need to embed only a few widgets in the host page, this technique suffices. But doing this in a real application with a large number of widgets becomes complex and slow. UiBinder scales better because it does not inject widgets into the HTML of the host page. Instead, you declare your layout in a stand-alone HTML file that can be composed with other components as many times as necessary to build more complex interfaces. Composition entails componentization, allowing the developer to create subparts of the user interface (UI components) that can be packaged, re-used and tested in isolation.

Summary:  Google Web Toolkit (GWT) lets you use the Java™ language to implement rich client user interfaces that run in a browser. In this two-part article, David Geary brings you up to speed on the latest version of GWT and shows you how to implement a desktop-like Web application.

The primary reason why I am writing a specific tutorial on the Anchor widget is because without it you will not be able to easily use GWT’s history framework

let’s talk about a hash, and how to use them. Since GWT is an easy way to use AJAX we are going to stay within that realm when talking about the hash. A hash is simply anything with the pound symbol in front of it. For example “#gwt” is a hash that points somewhere in your web application. We are going to learn more about the hash in the tutorial on GWT history.

Anchor anchor = new Anchor("GWT Tutorials", "http://www.gwttutorials.com?action=hello", "_blank");   String paramAction = Window.Location.getParameter("action");   //Do something with paramAction.

Gwittir is a library for GWT that provides a lot of interesting features including data binding, animation, reflection, and more. To help me learn more about this library, I decided to take it a spin and create a small GWT application to experiment with Gwittir’s data binding capabilities.

It allows you to glue together your user-interface widgets with the properties on your domain model. Whenever a user does something to a bound widget, its associated property in the model will be updated automatically. The binding is bi-directional as well,

servlet

11public class MyHTMLBinder extends UIObject {12 13    interface MyHTMLBinderUiBinder extends UiBinder<Element, MyHTMLBinder> {}14    private static MyHTMLBinderUiBinder uiBinder = GWT.create(MyHTMLBinderUiBinder.class);15 16    @UiField SpanElement nameSpan;17    @UiField SpanElement greetingSpan;18    @UiField DivElement divElement;19 20    public MyHTMLBinder(String firstName) {21        setElement(uiBinder.createAndBindUi(this));22 23        greetingSpan.setInnerText("Hello there ");24        nameSpan.setInnerText(firstName);25        divElement.setInnerHTML("<p> Hope you had a good time </p>");26 27    }28 29}

protected void init() {                 VerticalPanel container = new VerticalPanel();                 initWidget(container);                 int pageSize = 10;                 CellTable<User> cellTable = new CellTable<User>(pageSize);                 setColumns(cellTable);                 setSelectionModel(cellTable);                 setDataSize(cellTable);                 int pageStart = 0;                 loadData(pageStart, pageSize, cellTable);                 SimplePager<User> pager = createPager(cellTable);                 container.add(cellTable);                 container.add(pager);         }

public class TreeExample implements EntryPoint { public void onModuleLoad() { // Create a tree with a few items in it. TreeItem root = new TreeItem("root"); root.addItem("item0"); root.addItem("item1"); root.addItem("item2"); // Add a CheckBox to the tree TreeItem item = new TreeItem(new CheckBox("item3")); root.addItem(item); Tree t = new Tree(); t.addItem(root); // Add it to the root panel. RootPanel.get().add(t); } }