I am about to develop a pretty big form in GWT and I have the traditional: "which layout should i start with"?
When I say "complex" form, it is roughly 25 fields, with some lookup, explanations...
I use uibinder.
GWT translates Java into JavaScript. Nothing more. When you think about layouts, think HTML and CSS first. You can create a very complex layout using Ui:Binder without a single line of Java code. You will need GWT for handlers and such.
GWT does offer some widgets - like a LayoutPanel - for convenience. So you can use it as a container for your form, possibly split into a couple of layers (left and right column), with each layer containing an HTMLPanel (or ScrollPanel and then an HTMLPanel inside of a ScrollPanel). Then you add all your fields into each of these HTMLPanels.
Related
I am trying to define a combobox that shows as items, custom controls instead of standard text only items. The control used is com.google.gwt.user.client.ui.ListBox (standard GWT control) as combobox.
Looking at the Showcase http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellList for example, there is a custom list with custom items. To do this, the example uses the CellList class. Is it possible to use the same technique for a combobox?
More in general, is it possible to use a combobox with custom, complex items (e.g. multi column items, custom complex items of any sort, in general a widget of my own or similar)?
I ask this using standard gwt ui controls, no Ext-GWT, no Smart GWT or others.
Thanks.
You cannot style GWT ListBox as it translates to HTML <select> element. If you still insist on feature rich combo-box like GXT then you can go with
GwtChosen - http://dev.arcbees.com/gwtchosen/
CellList with reduced height, selection mode - single and CustomCell.
GWT SuggestBox - http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwSuggestBox
I am thinking of migrating my GWT app from "native GWT" to GXT, however I want to know whether there is a theme in GXT that looks just like the native theme of GWT, com.google.gwt.user.theme.standard.Standard
Also in my "native GWT" application I apply my own css to some widgets. Does the CSS-format for widgets the same with GXT as it is with the native GWT widgets? Like for Button, MenuBar, Panels etc.
Basically GXT 2 has just two themes (blue and gray). There is no such a theme that looks like native GWT, but thats why you should choose GXT, becuose it has rich components and you don't have to take care of your css and other stuffs. Also is not easy to change you style.
Ext GWT 2.0, widgets are responsible for creating their DOM structure
directly. This is done either by manually creating the elements or by
using an HTML fragment. The HTML for the widget is created from
strings, from an XTemplate, or by assembling DOM elements. The CSS
class names are then applied to the elements by the widgets. With this
approach, a widget’s view is tightly bound to the widget itself and
CSS class names are generally hardcoded into the widget.
Because the way how was build is really difficult to change the style of your component. But the new version 3.0 has a new approach that make easier to change your style and you can also combine with native gwt widget.
You can check the website
In our project we decided to try to design our UIs with UIBinder instead of doing everything in Java mixing GWT widgets and logic. We found out how much prettier they look panels, buttons and such from scratch, which saves a lot of time especially for presenting a demo. However, when we use number box widgets, like IntegerBox or DoubleBox, they don't appear as pretty as TextBoxes, they are like plain HTML boxes, thus quite ugly in contrast with the rest of the widgets. We did some Google search but nothing came up about this topic.
Is there any trick to accomplish this, to use GWT native number boxes with UIBinder and to appear in the pretty style? Or maybe we should just use TextBoxes for everything and write our own wrappers for setText-getText and parse the values.
This is really important as we have to make client-side calculations with input numbers before sending data back to the server.
UIBinder is not in any way responsible for things looking "pretty", it only generates Java code, the same kind of code that you were coding by hand previously. If things look "prettier", it's likely because you <inherits>-ed a theme in your gwt.xml.
Contrary to TextBox though, IntegerBox and DoubleBox don't have an associated hard-coded style name. If you want to have them style the same as every TextBox, you can then simply addStyleName("gwt-TextBox") to them (the hard-coded style name of the TextBox widget), or in your ui.xml: <g:IntegerBox addStyleNames="gwt-TextBox" … (note the plural here; this is documented in UIObject's javadoc).
We're using sitemesh to add a header to the page, but in order to use TabLayoutPanel, we have to revert to hacky getAbsoluteTop methods in order to place the TabLayoutPanel so it doesn't cover the header, since (as far as I know) TabLayoutPanel must also be added to RootLayoutPanel in order to resize correctly and handle the resize events.
Is there a way I could add some element similar to RootLayoutPanel to the body, and just add a logical reference to TabLayoutPanel so that TabLayoutPanel receives the onResize event? I want to do this so I can attach TabLayoutPanel to a div that's positioned after the header generated by sitemesh. The end goal I'm trying to achieve is better modularity with GWT widgets, but by hopefully using the UIBinder and *LayoutPanels. Some of our pages are pure JSP, and some are JSP and GWT mixed.
(I apologize if this question doesn't make sense, I've been trying to think of the right question to ask for two days now)
I'm fighting to understand the weird behavior of GWT Layout Panels. I'm wondering how GWT translate Layout logic into javascript and html. sometimes we don't get the expected Layout . something under the cover is done by GWT compiler.
the GWT documentation is not clear enough on how Layout is performed under the cover.
is there some good books or tutorials that explains well the GWT Layout issues?
thanks.
I don't know about good books or tutorials but here's a little information that may be helpful.
First, as you may know there's a big difference between the FooPanels and the FooLayoutPanels. These are two different sets of panels that are based on different layout mechanisms. The Layout Panels are the new stuff that seems to be suited better for layouts that have hard-coded sizes, Google Wave style. The older FooPanels (VerticalPanel, etc.) are based on HTML tables mostly.
FlowPanel - this is simply something that outputs your widgets as successive HTML elements in a single DIV. As documented: "A panel that formats its child widgets using the default HTML layout behavior".
DockLayoutPanel - Looking at the code shows that it hard-codes the sizes of the different regions according to what you specify in the children (north, east, etc.)
Finally - my experience has led me to abandon all usage of the Layout Panel system and rely only on HTML and CSS wherever I can. This means using HTMLPanel + UiBinder mostly and sometimes FlowPanel, rarely also some of the other panels.
Trying to understand and battle the Layout Panel system to do things that are not the "default case" was a waste of time. I'm not saying it's the best thing to do, but I just couldn't get the kind of control I wanted without this - especially with regard to elements that should automatically expand vertically. If you haven't already, take note of this from the GWT documentation about Layout Panels:
The panels described above are best used for defining your application's outer structure — that is, the parts that are the least "document-like". You should continue to use basic widgets and HTML structure for those parts for which the HTML/CSS layout algorithm works well. In particular, consider using UiBinder templates to directly use HTML wherever that makes sense.