Form & Doc Panel

[courtenayt]

Hi,

I really like your new tool, but I'm having some problems using both the FormPanel and DocPanel in the designer mode.

My problem with the FormPanel is that I'm only able to add 1 form element widget (ex. a textBox) to the panel by dragging and dropping it in. After that, even if I resize the textBox to be much smaller than the formPanel box, I am unable to drag and drop any other form widgets into the formPanel. When I have my mouse hover over where I want to drop the next widget it shows a black circle with a line through it indicating I can't add anything more to the formPanel. I've double checked and it shows the formPanel as the currently active panel in the property editor list. I'm not sure what I should do or if this may be a bug.

I'm having a similar problem with the docPanel. When I add elements to it, it is very convenient to drop them in the section I want them to appear in, but afterwards, the last element does not take up the entire remaining area of the docPanel, as I understand it should. Unfortunately I'm totally new to Gwt as well as Gwt designer, so I apologize if this is a GWT function I am just not that familiar with. Currently I have added one West and one Center Panel. No matter what I do with changing their height and width or adjusting them both to be West panels, they are separated by a huge gap.


The code generated for the docPanel is:

Code: Select all

public class OSP implements EntryPoint {
   public void onModuleLoad() {
      RootPanel rootPanel = RootPanel.get();

      final DockPanel dockPanel = new DockPanel();
      rootPanel.add(dockPanel, 0, 0);
      dockPanel.setSize("100%", "100%");

      final VerticalPanel verticalPanel = new VerticalPanel();
      dockPanel.add(verticalPanel, DockPanel.WEST);

      final HorizontalPanel horizontalPanel = new HorizontalPanel();
      dockPanel.add(horizontalPanel, DockPanel.WEST);      
   }
}


I've attached an image of what this looks like in design view. As you can see there is a huge gap between the 2 panels. Can you tell me what I'm doing wrong with this?

Thanks,
Courtenay

[Eric Clayberg]

FormPanel is a form of SimplePanel, so it can only have one child. If you haven't done so, the FormPanel Javadoc is a useful read...

http://google-web-toolkit.googlecode.co ... Panel.html

DockPanel is just plain weird (and based on the HTML table), but GWT Designer is rendering is accurately (as you can see in hosted mode).

Many folks who have used Swing before think that DockPanel is similar to Swing BorderLayout. It isn't.

[courtenayt]

Thanks for the tips! I had looked at the formPanel documentation, but i guess I didn't realize I'd have to add another panel too it before adding the form widgets. Thanks!

I think I also figured out how to get the dockPanel to cooperate a little more. here is my code:

Code: Select all

public class OSP implements EntryPoint {
   public void onModuleLoad() {
      RootPanel rootPanel = RootPanel.get();

      final DockPanel dockPanel = new DockPanel();
      rootPanel.add(dockPanel, 0, 0);
      dockPanel.setSize("100%", "100%");

      final SimplePanel simplePanel = new SimplePanel();
      dockPanel.add(simplePanel, DockPanel.NORTH);
      simplePanel.setSize("100%", "100%");
      dockPanel.setCellHeight(simplePanel, "100px");

      final VerticalPanel verticalPanel = new VerticalPanel();
      dockPanel.add(verticalPanel, DockPanel.WEST);
      verticalPanel.setSize("100%", "100%");
      dockPanel.setCellWidth(verticalPanel, "150px");

      final TabPanel tabPanel = new TabPanel();
      dockPanel.add(tabPanel, DockPanel.CENTER);
      tabPanel.setSize("100%", "100%");      
   }
}


Once I placed the panels I wanted in the places I wanted them in the dockPanel, I set them all to 100% width and 100% height using the Design view. Then I was able to switch to the source and set how big I wanted each of the cells in the dockPanel to actually be using the dockPanel.setCellWidth(panelIwantToChange, "150px"); and dockPanel.setCellHeight(panelIwantToChange, "150px"); respectively by hand. It worked pretty well. Hopefully it will hold together as I add more to it. Hope this may help others with the dockPanel too.

Thanks,
Courtenay

[Eric Clayberg]

BTW, you should try Grid and FlexPanel as alternatives to DockPanel.