Last separator in

[edulid]

Why is the last separator being drawn inside the embedded component?
Using 6.0-p20160519.

public void onModuleLoad() {
        final IMenuButton menuButton = createErstellenButton();
        menuButton.setWidth(100);
        menuButton.setAutoDraw(false);

        final HStack layout = new HStack();
        layout.setWidth100();
        layout.setMembers(menuButton);
        layout.draw();
    }

    private IMenuButton createErstellenButton() {
        final Menu menu = new Menu();
        menu.setWidth(570);
        menu.setAutoDraw(false);

        /* Trenner */
        FileItem trennerImageItem = new FileItem("f_image");
        trennerImageItem.setRequired(true);
        trennerImageItem.setWidth(250);
        trennerImageItem.setShowTitle(false);

        TextItem trennerFilename = new TextItem("f_image_filename");
        trennerFilename.setVisible(false);

        final DynamicForm trennerDynamicForm = new DynamicForm();
        trennerDynamicForm.setWidth(200);
        trennerDynamicForm.setSnapTo("TR");
        trennerDynamicForm.setFields(trennerImageItem);

        final IButton addTrennerButton = new IButton("erstellen");
        addTrennerButton.setWidth(100);
        addTrennerButton.setIcon(KidsIcons.SAVE.getFilename());

        final HStack trennerEmbedded = new HStack();
        trennerEmbedded.setDefaultLayoutAlign(VerticalAlignment.CENTER);
        trennerEmbedded.setAutoDraw(false);
        trennerEmbedded.setSnapTo("TR");
        trennerEmbedded.setHeight100();
        trennerEmbedded.setMembers(trennerDynamicForm, addTrennerButton);

        final MenuItem trennerErstellenMenuItem = new MenuItem("trenner");
        trennerErstellenMenuItem.setShowRollOver(false);
        trennerErstellenMenuItem.setEmbeddedComponentFields("key");
        trennerErstellenMenuItem.setEmbeddedComponent(trennerEmbedded);

        /* Bereich */
        FileItem pageImageItem = new FileItem("f_image");
        pageImageItem.setTitle("bild");
        pageImageItem.setRequired(true);
        pageImageItem.setWidth(280);

        SelectItem pageItem = new SelectItem("f_page");
        pageItem.setTitle("kategorie");
        pageItem.setSortField("f_display_reihenfolge");
        pageItem.setDisplayField("f_display_text");
        pageItem.setValueField("f_id");
        pageItem.setWidth(280);
        pageItem.setRequired(true);

        SelectItem klasseTypItem = new SelectItem("f_klasse_typ", "Klasse");
        klasseTypItem.setWidth(280);
        klasseTypItem.setRequired(true);

        ColorPickerItem backgroundColorItem = new ColorPickerItem("f_background_color");
        backgroundColorItem.setTitle("background");
        backgroundColorItem.setRequired(true);
        backgroundColorItem.setWidth(280);
        backgroundColorItem.setDefaultPickerMode(ColorPickerMode.COMPLEX);

        final DynamicForm pageDynamicForm = new DynamicForm();
        pageDynamicForm.setWidth(300);
        pageDynamicForm.setSnapTo("TR");
        pageDynamicForm.setFields(pageImageItem, pageItem, klasseTypItem, backgroundColorItem);

        final IButton addpageButton = new IButton("erstellen");
        addpageButton.setWidth(100);
        addpageButton.setIcon(KidsIcons.SAVE.getFilename());

        final VStack pageEmbedded = new VStack(5);
        pageEmbedded.setDefaultLayoutAlign(Alignment.RIGHT);
        pageEmbedded.setAutoDraw(false);
        pageEmbedded.setSnapTo("TR");
        pageEmbedded.setHeight100();
        pageEmbedded.setWidth(100);

        VLayout spacer = new VLayout();
        spacer.setHeight(10);
        pageEmbedded.setMembers(pageDynamicForm, addpageButton, spacer);

        final MenuItem pageErstellenMenuItem = new MenuItem("Bereich");
        pageErstellenMenuItem.setShowRollOver(false);
        pageErstellenMenuItem.setEmbeddedComponentFields("key");
        pageErstellenMenuItem.setEmbeddedComponent(pageEmbedded);

        menu.setData(new MenuItemSeparator(), trennerErstellenMenuItem, new MenuItemSeparator(), pageErstellenMenuItem,
                new MenuItemSeparator());

        final IMenuButton erstellenButton = new IMenuButton("erstellen", menu);
        erstellenButton.setWidth(100);
        erstellenButton.setAutoDraw(false);
        erstellenButton.setBaseStyle("buttonRounded");
        erstellenButton.setHeight(28);

        return erstellenButton;
    }

[Isomorphic]

Because you're calling setHeight100() on your pageEmbedded VStack - just don't do that.

[edulid]

Thanks, this works.
Now I have a problem with validation: if validation returns false, and the button "erstellen" is clicked after the menu being shown, the menu disappears, which is correct. But if I click the button "erstellen" again, the errors are still there. How can I clear the errors? I know I can call dynamicForm.clearErrors(true), but where to call it?

[Isomorphic]

We're not sure what you mean about "where can I call it". What is your issue?

Do you not understand how to keep a reference to the form in your menu? This is just ordinary programming - make a decision as to where to keep the reference, for example, perhaps as part of a subclass of IMenuButton.

Or are you confused about the timing of when to clear the errors? This would be the same as for a normal form - when your save completes successfully.

[edulid]

1. click the "erstellen" button for the first time, the menu appears.
2. validate() the form, which shows errors visually.
3. click the "erstellen" button again, the menu disappears.
4. click the "erstellen" button again. The menu appears, but the errors are still there! I want to clear these errors.

Normally I would do: button.addClickHandler(), but then it will be called every time the button is clicked (1. 3. 4.).
My question is thus how to hide the errors when the menu is being hidden, (step 3.) , so that the next time (step 4.) the errors are not there.

[Isomorphic]

We're not following. You've got 3 different buttons titled "estellen" and your description of the problem appears to treat them as if they are the same, but they aren't. It looks like the "erstellen" button that actually appears within the menu is meant to save the form if there are no errors, so to do that, call saveData(). If the save completes the errors are automatically cleared. If you are doing your own save not via saveData(), call clearErrors() when you know that save has not failed.

Of course this is all rudimentary programming stuff, so your question must be more complicated, but we can't figure out what the question is.

[edulid]

ah sorry, I see that I have 3 "erstellen" buttons. I mean ONLY the one WITHOUT the icon. The other ones are not important here :) I just noticed this
The 1. 2. 3. 4. are the steps I take in order to describe the problem. Please read again taking into account that I only mean the button without the icon.

The validation is done in such a way:
if (form.validate()) {
form.saveData();
}

So if the validation throws errors, these are shown visually. When I click the "erstellen" button again in order to hide the menu (remember, ignore the icon buttons), it disappears, but the errors are still there. So I need something like:
erstellenButton.addOnHideHandler(new HideHandler() {
onHide() {
form.clearErrors(true);
}));

So I just need something like this hideHandler on the "erstellen"-Button.
Or how can I clear the errors when the menu is being hidden ?

[Isomorphic]

Still not seeing what the question is.

Perhaps this helps: you can call clearErrors() on a form whether or not it is visible. So you could just clear the errors every time the menu is shown anew.

There is also the VisibilityChangedHandler, present on any Canvas (including Menu) if you prefer that approach.

[edulid]

So you could just clear the errors every time the menu is shown anew.

How? Exactly this is my question. How to do something every time the menu is shown anew?

[Isomorphic]

We just mentioned the VisibilityChnaged handler, that's one way.