Announcement

**Isomorphic** · 16 Dec 2015, 09:41

Look in the Watch tab of the Developer Console so you can see the size of the form and the containing layout. Most likely the form as a whole is centered, but the elements you've placed within the form don't take up the form's full width.

You can either reduce the specified width of the form to match the elements, or size the elements to match the form using the techniques described in the Form Layout overview.

**carlossierra** · 16 Dec 2015, 13:13

Thanks for your answer, but I don't think that's the problem because of these things I've tried:

1. Resizing dynamically the HLayout that contains the VLayout (in the class that uses the PreferencesStackSection class): the IButton will move dynamically to the center of the control. The form stays anchored to the left of the screen/control.
2. I also tried making that container HLayout control bigger (50% of the screen), but the behavior stays the same.

It's like the DynamicForm control refuses to comply with the layout.setDefaultLayoutAlign(Alignment.CENTER) instruction.

By the way, I also tried these (each on a separate attempt to make this work):

Code:

form.setLayoutAlign(Alignment.CENTER); // seemed like a reasonable enough option
form.setAlign(Alignment.CENTER); // didn't spect much, but tried anyway...
form.setNumCols(2); // maybe the setting of 1 column was making the form act strange, as two columns are required minimum when the titles are to the left
form.setTitleOrientation(TitleOrientation.LEFT); // maybe it was a conflict with the TitleOrientation that I want (TOP)

**Isomorphic** · 16 Dec 2015, 14:34

If you have not yet looked at the Watch Tab to see the component sizes, do that now - there's no point speculating.

**carlossierra** · 17 Dec 2015, 08:51

Ok. I did what you suggested (sorry for not doing it before... as you said, speculating is pointless... lesson learned!). And you were right.

The form is taking all the available space (after taking out the margins), but the form titles and fields only use a small (and fixed) portion of that allocated space.

So now the question is how can I make the form fields span to the full width of the canvas? I have tried different things after finding this, and can't seem to get the desired result, which would be to have the set of titles and controls as shown above, but centered in the canvas' available space, and aligned with the button below?

Also, I think there's something wrong when using the TitleOrientation.TOP setting, since the form would leave some additional blank space for each column of fields in the form). This is what I tried:

Code:

    private void createPreferencesForm(VLayout layout) {
        form = new DynamicForm();
        form.setNumCols(2);
        form.setTitleOrientation(TitleOrientation.TOP);
        form.setColWidths("50%", "50%");
        form.setDataSource(ds);
        layout.addMember(form);
    }

And the result:

Thanks again for all the help!

Attached Files

**Isomorphic** · 17 Dec 2015, 11:58

You just need a closer read of the Form Layout overview, and also perhaps to turn on some of the diagnostics mentioned there.

The main thing you are missing is that the TextItems have a fixed width of 150px by default. They will stick to that width unless you set the width to "*", which tells them to fill their column.

**carlossierra** · 17 Dec 2015, 14:41

Thanks for your reply. I have to make clear that I have read the Form Layout review (and various other things in the past two days trying to solve this). In fact, this is how I came to the idea that:

Code:

form.setColWidths("50%", "50%");

should help the form in the second image above display like I wanted. But this didn't help. As I understand it, I am telling the form to use 50% of the available space for the first column, and the other 50% for the other column, since I have only two columns and none of the has a fixed width. The two columns do take 50% of the available space, but the white unused space is still there.

I also tried going back to my one column configuration, and following this advice found on the Form Layout overview: "FormItems that have "*" for FormItem.width will fill the column". Again, the result is that part of white space to the right of the column.

Since I am not explicitly defining any fields in the data source xml file, nor in the class, I tried to iterate through all the FormItem elements, setting their widths to "*" or "100%". The result is the same.

Code:

for(FormItem item: form.getFields()){
    item.setWidth("*");
}

Sorry to keep asking, but I have spent my last two days reading, trying to learn and trying to solve it before asking again, and I am really not seeing how to solve this.

ps. this is my preferences.ds.xml file content, in case it is of any help:

Code:

<DataSource
    ID="preferences"
    serverType="sql"
    tableName="preferences"
    autoDeriveSchema = "true"
></DataSource>

**Isomorphic** · 17 Dec 2015, 15:40

Aha. The problem is that you're missing even more fundamental information: go back to the QuickStart Guide, Data Binding chapter, to see how you can specify widths for your fields (or any other setting) even though you are using a DataSource.

However, from a design perspective, you should also consider whether you want the inputs to span all that space. Super-wide inputs look odd if the expected values are quite short. Another approach would be to set the form to be about 308px width (2x default width of TextItem, plus padding), in which case it will be centered, with fixed width input fields.

**carlossierra** · 17 Dec 2015, 18:42

Well, I appreciate the design advice. I agree with it, and I have to make clear that I don't want to make a huge form with huge fields. The example images I have posted are for clarity, because the issue I'm trying to solve is less evident with narrower forms (and stack sections).

Regarding your comment on me missing the information from the Data Binding chapter, I just re-read it again, and I have to respectfully disagree with you. I understand how to set the properties for the fields, but wouldn't that defeat the purpose of being able to use autoDeriveSchema = "true" in the data source definition?

Anyway, I finally got it to behave as I want it, but I don't think I know why. What I did was to move the layout.addMember(form) line before the loop where I set all column widths to take all the space, and also to define the form width after adding it to the layout, and now each column takes all available space. Here is my code:

Code:

ds = DataSource.get("preferences");
form = new DynamicForm();
form.setDataSource(ds);
form.setNumCols(1);
form.setTitleOrientation(TitleOrientation.TOP);
layout.addMember(form);
form.setWidth("70%");
for(FormItem item: form.getFields()){
    item.setWidth("*");
}

Here is the result :)

Could it be because the fields are not defined explicitly, so they are only being "created" after adding the form to the layout, hence making it only possible to set their widths at that moment?

**Isomorphic** · 18 Dec 2015, 12:08

No, specifying a single, presentation-oriented property per field doesn't defeat the purpose of autoDeriveSchema - everything else is still auto-derived, and doesn't need to be repeated.

It would instead be a serious problem if you could not add presentation oriented information in this way, since obviously, every aspect of the presentation isn't going to be able to be derived from the database.

Iterating through the fields after databinding is another, valid way of doing things, and can be a line or two shorter for the unusual situation that you need to set exactly one property for each field, to the same value for all fields, and no other properties need to be set for any field. But the general-purpose strategy is to use the approach shown in the Data Binding chapter.

**carlossierra** · 18 Dec 2015, 12:18

Ok. Thanks.

Announcement

Align DynamicForm to the Center o VLayout

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment