I think you'll want to let css do the styling for you and only hard code styles, widths, etc in GWT when you absolutely have to.
Qt is a ui framework for creating desktop apps while GWT ultimately has to run in the browser. So Qt has a lot more freedom in how to layout widgets while GWT (and all web frameworks) are constrained by how the browser operates. I think if you try to compare the two you'll just get frustrated with all web frameworks. Typically with the right css you can get what you want, but I've run into a problems similar to yours and it requires a little more work in the GWT code. If you must size Widgets to exact pixel widths/ percentages and can't achieve it with css then try creating a panel that can size itself accordingly using .getAbsoluteLeft (), .getOffsetWidth(), Window.getClientWidth(), etc to calculate it's position and size. You'll need to add a WindowResizeListener also to fire off your resize calculations anytime the user changes the size of the window. Yeah it can be a lot of work, but most of the time there is a css solution. Try taking a look at this site, perhaps a 3 column page example can be applied to your form. http://pmob.co.uk/ On Mar 12, 12:02 pm, Michael <mikecg...@gmail.com> wrote: > I have built a number of applications with requirements for widgets > like labels, text boxes, rich edit controls, combo boxes, etc. When > designing pages in a wizard or laying out controls on a typical window > or panel, it is often desirable to have policies for specific controls > in a layout. For example, if I had a series of a widgets laid out > horizontally like this: > > Label -> Text box -> Spacer -> Label -> Text box -> Spaces -> Label -> > Text box > > When these controls are placed in a container, the desirable behaviour > in this example is for the first and the last text box to expand when > the container expands. Each label should remain the same size, and the > middle text box should be a fixed size and not grow with the > container. > > I do not know how to accomplish this using GWT. If I were using a > toolkit like Qt, I would set the size policy for labels to be a > "fixed" size and the first and last text boxes to have policies like > "minimum expanding," while the middle text box would have its geometry > fixed to a certain pixel value like. > > The closest I have been able to accomplishing this behaviour is > demonstrated by the following code: > > <code> > package com.scalix.sac.test.client; > > import com.google.gwt.user.client.ui.*; > > public class TestContainer3 extends Composite > { > private class CustomContainerLeft extends Composite > { > CustomContainerLeft() > { > Button button = new Button(); > button.setText("Test"); > > initWidget(button); > } > > } > > private class CustomContainerRight extends Composite > { > CustomContainerRight() > { > Label label1 = new Label("First item:"); > label1.setWordWrap(false); > TextBox box1 = new TextBox(); > box1.setWidth("100%"); > > Label label2 = new Label("Second item:"); > label2.setWordWrap(false); > TextBox box2 = new TextBox(); > box2.setWidth("12px"); > > Label label3 = new Label("Third item:"); > label3.setWordWrap(false); > TextBox box3 = new TextBox(); > box3.setWidth("12px"); > > Label label4 = new Label("Last item:"); > label4.setWordWrap(false); > TextBox box4 = new TextBox(); > box4.setWidth("100%"); > > HorizontalPanel panel = new HorizontalPanel(); > panel.add(label1); > panel.add(box1); > panel.add(label2); > panel.add(box2); > panel.add(label3); > panel.add(box3); > panel.add(label4); > panel.add(box4); > > initWidget(panel); > } > > } > > public TestContainer3() > { > HorizontalSplitPanel panel = new HorizontalSplitPanel(); > > panel.setSize("100%", "100%"); > panel.setSplitPosition("100px"); > > populateForm(panel); > > initWidget(panel); > } > > private void populateForm(HorizontalSplitPanel panel) > { > HorizontalPanel hPanel = new HorizontalPanel(); > hPanel.setWidth("100%"); > hPanel.setSpacing(10); > > CustomContainerLeft left = new CustomContainerLeft(); > left.setWidth("100%"); > > panel.add(left); > > CustomContainerRight right = new CustomContainerRight(); > right.setWidth("100%"); > > hPanel.add(right); > > panel.add(hPanel); > }} > > </code> > > The above example has a couple of issues with legibility when > executed. First, the spacing between the widgets is too narrow. I > cannot increase the space between each label/text box pair via CSS > without affecting the space between the label and the text box. I > could throw each label/text box pair into a FlexTable cell, but > different problems with spacing arise with that implementation too. > > Does anyone have any experience with the problem I have described? I > know it is possible to achieve this using a custom web application > with its own layout code in JavaScript (I have an application which > does just that), but the point of moving to a tool-kit like GWT is to > remove headaches just like that. Any help would be appreciated. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to Google-Web-Toolkit@googlegroups.com To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~----------~----~----~----~------~----~------~--~---
