What is the difference between Stackpanel and Stacklayoutpanel?
According to the Dev Guide, StackPanel is deprecated and you should use StackLayoutPanel. Basically StackPanel works only in quirks mode, while StackLayoutPanel works only in standards mode, as well as being rooted on the RootLayoutPanel, not the RootPanel.
The LayoutPanels are a newer collection of panels that have much more predictable behavior across browsers. When given a choice, prefer anything based on the Layout system.
This is waaaaay oversimplified, but on a general level, all of the layout panels are more "div" like, vs. the original panels being organized in tables.
So, when you want to do predictable stuff across disparate screen sizes, etc., the layout stuff does what you've come to expect. So definitely use them over all else. In fact, if you're trying to use GWT for the ease of writing in Java and ignoring web design, use as many FlowPanels with css as possible.
Related
I have a multi-column tree that I really don't want to show column headers (they provide no valuable information in my case and make the layout unnecessarily busy). Unfortunately, I really need to have resizable columns.
How can I make the columns resizable by dragging lines between them?
SWT uses native widgets and this isn't native behavior (at least on platforms that I am familiar with), so there is no built-in mechanism in SWT for doing what you are after. You should be able to simulate this yourself by tracking mouse events, managing the mouse cursor and calling TreeColumn.setWidth() when appropriate.
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).
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.
When a <select> tag is used in a HTML page, is there a way to style the text size in
the scroll wheel that shows on the iPhone?
There is this alternative.
http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
It uses javascript to put the elements on the page.. I used it for a web/ iphone app and it worked really well. There would be custom styling if you wanted to change the default text sizes and you could also load in custom images..
I don't believe you can style the wheel that shows up on the iPhone directly. In fact, even modifying it in browsers has weird support. For example, http://jsbin.com/obake3 doesn't work at all in Chrome, only modifies the actual drop down in Safari and stretches the graphic in a very ugly way in Firefox.
We investigated and couldn't find any reliable way of altering the display so we looked into different libraries. We're having good luck with the Mobiscroll library for jQuery. It is a more up to date project than the cubiq project referred to in other responses.
The control is themable. You can easily change the appearance of if in CSS. It also comes with pre-defined, nice looking color schemes.
We chose it because it works across devices allowing for a more consistent look & feel.
Taken from Sitepoint Ref
The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser)
I have a project in which I need a way to display essentially a list of tabs, each with their own content pages, down the left side of the page. I'm using TabLayoutPanels elsewhere to good effect, but after looking at how they are constructed it seems like it would be quite a bit of work to undo Google's carefully constructed layout and get it to work in any other orientation than top-aligned.
This doesn't seem like it would be an uncommon layout, so does anyone know of a successful implementation of this kind of container?
Best you can do is use DeckPanel, and make your custom tab controls to switch visible widget in that DeckPanel.