Group items tagged

There is two type of layouts: RIA-like and web-page-like. The RIA-like layout is done using the layout panels. The app stretch to the whole available space. There is no scrollbars. The web-page-like layout is done using HTML tags (and some standard panels). The app don't stretch. If the content is larger than the viewport, scrollbars appears, like in traditional pages. Looking at the first screenshot, here is my proposal: 1) The main panel is a DockLayoutPanel attached to RootLayoutPanel. 2) The north slot contains the header. 3) The center slot contains a TabLayoutPanel. But when you show data (list, form...) you may have no enough space to show all. Here you start to use web-page-like layout. So: 4) The contain of the contact tab is a LayoutPanel with four slot: Tighformat, the list, Detail view, Relations. 5) Tighformat, Detail view and Relations are standard panels (FlowPanel) into ScrollPanels. If there not enough space, a scrollbar will appear. 6) The list is some sort of DockLayoutPanel with the headers top, the navigation buttons bottom and the contains of the list in the center with a scrollbar is needed. The exact implementation depends on the used widget for the list (SmartGWT, GXT, gwt-incubator...)

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.

I figure it is going to take me at least four iterations to get this right. The first one will be building a GWT application with a simple UI that has no server logic behind it (just to learn how layout in GWT works). Step two will be adding a fake servlet backend (not app engine, just in memory). While not exactly App Engine yet, I should have a completely specified client-server API by the end of this process that I can subsequently implement on App Engine (iteration 3). Iteration four will handle deployment, CSS and whatever I may screw up in iterations one and two. I will log my notes of things I run into while I code.