Component Sizing : Continued...


In an earlier thread
, I was trying to work out how to have a child window size itself around some component (a form) without being explicitly sized; Artur’s answer sorted me out.

I now want to have some buttons on that form (well, obviously not that form, it’s just an example) that are bottom right aligned. I’ve used the Form#setFooter to container the buttons, as, well, that seems to be the logical thing to do.

I now have a problem - if I give the form an explicit size, the buttons are on the bottom right of the form (“Hurrah!”); however, I don’t want to explicitly size form.

What’s the right way to achieve this? (Form of an “undefined” size in a Child Window, along with buttons, bottom right aligned)

Cheers,

Charles.

public class SizingWindowApp extends Application {
  public SizingWindowApp() { }

  public void init() {
    Window mainWindow = new Window();
    VerticalLayout mainLayout = new VerticalLayout();
    mainLayout.setSizeFull();
    mainLayout.addComponent(new Button("Show Edit Window", new Button.ClickListener() {
      public void buttonClick(Button.ClickEvent event) {
        doShowChildWindow();
      }
    }));
    mainWindow.setContent(mainLayout);
    setMainWindow(mainWindow);
  }

  private void doShowChildWindow() {
    FormFieldFactory ff = new BaseFieldFactory() {
      @Override
      public Field createField(Item item, Object propertyId, Component uiContext) {
        // Identify the fields by their Property ID.
        String pid = (String) propertyId;
        if (pid.equals("name")) {
          TextField textField = new TextField("Name");
          textField.setColumns(20);
          return textField;
        } else if (pid.equals("city")) {
          Select select = new Select("City");
          select.addItem("Berlin");
          select.addItem("Helsinki");
          select.addItem("London");
          select.addItem("New York");
          select.addItem("Turku");
          select.setNewItemsAllowed(true);
          return select;
        }
        return super.createField(item, propertyId, uiContext);
      }
    };

    Item item = new PropertysetItem();
    item.addItemProperty("name", new ObjectProperty("Charles Anthony"));
    item.addItemProperty("city", new ObjectProperty("London"));
    item.addItemProperty("isTallPerson", new ObjectProperty(Boolean.FALSE));

    Label spacer = new Label();
    HorizontalLayout buttons = new HorizontalLayout();
    buttons.setSpacing(true);
    buttons.setWidth("100%");
    buttons.addComponent(spacer);
    buttons.addComponent(new Button("OK"));
    buttons.addComponent(new Button("Cancel"));
    buttons.setExpandRatio(spacer, 1f);

    Form form = new Form();
    form.setDescription("Ooh. Just a demonstration of things, really. Is this form going to be shown in full, or" +
        " is it going to be clipped, when popped up in a child window?");
    form.setFormFieldFactory(ff);
    form.setItemDataSource(item);
    form.setFooter(buttons);


    Window childWindow = new Window("Edit Me!");
    childWindow.addComponent(form);
    // With null : buttons not on bottom right
    childWindow.getContent().setWidth(null);
    
    // With explicit width : buttons on bottom right
    childWindow.getContent().setWidth("500px");

    getMainWindow().addWindow(childWindow);
  }
}

Hi!

Setting width to subwindow should do what you are looking for (you have initially a reasonably sized form that can be resized by user). But the bad news is that I found the Form to be a bit broken. See http://dev.vaadin.com/ticket/3365

cheers,
matti

Hi Matti,

I’ve just seen the ticket and fix, thanks.

My problem, though, is “Setting width to subwindow”; I don’t know how wide it’s going to be. I’m trying to set up (well, investigate) our own application “framework” within Vaadin. The bit that shows the edit/add form won’t know anything about the form itself, how wide it might be, what fields are on it, what language (and hence how long the labels are) - all it will have will be a form. Maybe not even that, maybe just an AbstractComponent.

For now, I’ve “cheated” (?) and created a new component that vertical layout of form followed by the button bar, and the button bar explicity bottom right aligned; the ChildWindow then contains this component (which is width “undefined”) - this appears to work fine.

Cheers,

Charles.