How to dinamically show/hide the window header on portlets?

[d.cavestro]

Scenario: I have a PortalLayout that should support two visual modes: a view mode and an edit mode.
The user should be able to switch from one mode to the other through a toggle button.
In view mode the portlets have only a body with rounded corners, but without header controls (something similar to the corners example).
In edit mode they should also show a header as normal windows (with minimize, maximize and restore icons).
Eventually in view mode some blank space may be reserved for the invisible header, as I don't want any automatic resizing when switching mode.

Problem: I've found no way to show the header after the portlet has already been drawn without it, as per Window.setShowHeader() javadoc saying

@throws IllegalStateException this property cannot be changed after the component has been created

Question: is there any way to show/hide the header after a portlet/window has already been created (and drawn)?

Using Smartgwt 4.0p
SmartClient Version: v9.0p_2014-01-05/LGPL Development Only (built 2014-01-05)

[massimo]

Hello Isomorphic, any idea or suggestion?
Thanks in advance

[stonebranch2]

Hello,
I am interested in showing/hiding a portlet/window header after the window has been created too. Is there a built-in way to achieve this?
Thanks

SmartClient Version: v9.1p_2014-06-30/Pro Deployment (built 2014-06-30)

[stonebranch2]

Here is what I came up with using the "header" auto child property. This example allows for showing the header controls on mouse over and hiding them on mouse out.
Regards

        final Portlet portlet = new Portlet();
        HLayout headerLayout = new HLayout();
        headerLayout.setVisible(false);
        portlet.setAutoChildProperties("header", headerLayout);
        portlet.addMouseOverHandler(new MouseOverHandler() {

            @Override
            public void onMouseOver(MouseOverEvent event) {
                portlet.getHeader().show();
            }
        });
        portlet.addMouseOutHandler(new MouseOutHandler() {

            @Override
            public void onMouseOut(MouseOutEvent event) {
                portlet.getHeader().hide();
            }
        });

[Isomorphic]

Nice - and the correct way to do it.

[stonebranch2]

Thanks
On a related note, is there a way to show/hide the box around the window too?

[Isomorphic]

Do you mean setShowEdges(false)?

[stonebranch2]

I don't believe so, no.

That doesn't seem to impact the visibility of the grey window border.

The reason I ask is that when you hide the header, you are left with a thin grey border along the top, which is thinner than the border along the bottom of the window.

I'd like the thickness of all four borders to be the same (when header is hidden) or simply be able to hide the window border when I hide the header. Understanding how to do either of these would be nice.

[Isomorphic]

See the various setEdgeXxx() APIs - you may need to switch setEdgeTop() between two different valus, depending on your skin.

[stonebranch2]

I could not find a setEdgeTop() API. All I could find are these.

com.smartgwt.client.widgets.Canvas.setEdgeBackgroundColor(String)
com.smartgwt.client.widgets.Canvas.setEdgeCenterBackgroundColor(String)
com.smartgwt.client.widgets.Canvas.setEdgeImage(String)
com.smartgwt.client.widgets.Canvas.setEdgeMarginSize(int)
com.smartgwt.client.widgets.Canvas.setEdgeOffset(Integer)
com.smartgwt.client.widgets.Canvas.setEdgeOpacity(Integer)
com.smartgwt.client.widgets.Canvas.setEdgeShowCenter(Boolean)
com.smartgwt.client.widgets.Canvas.setEdgeSize(int)

Are the setEdgeXxx() APIs applicable for the Enterprise skin? For example, manipulating the edgeSize or edgeOpacity doesn't seems to have an impact for me.

Thanks

[stonebranch2]

This approach to keep the top and bottom window edges the same thickness when hiding the header seems to work.

        final Portlet portlet = new Portlet();
        HLayout headerLayout = new HLayout();
        headerLayout.setHeight(4);
        headerLayout.setOpacity(0);
        portlet.setAutoChildProperties("header", headerLayout);
        portlet.addMouseOverHandler(new MouseOverHandler() {

            @Override
            public void onMouseOver(MouseOverEvent event) {
                HLayout h = portlet.getHeader();
                h.setHeight(20);
                h.setOpacity(100);
            }
        });
        portlet.addMouseOutHandler(new MouseOutHandler() {

            @Override
            public void onMouseOut(MouseOutEvent event) {
                HLayout h = portlet.getHeader();
                h.setHeight(4);
                h.setOpacity(0);
            }
        });

However, it would still be nice to be able to show/hide the window edges in sync with showing/hiding the header.

[Isomorphic]

It turns out, you're seeing the effect of layoutTopMargin, and related settings, as initialized in the skin.

You can alter these margins at runtime, flicking between (0,0,0,0) and (1,4,4,4), like this (note the final call, which is necessary to apply the others):

portlet.setLayoutTopMargin(0);
portlet.setLayoutBottomMargin(0);
portlet.setLayoutLeftMargin(0);
portlet.setLayoutRightMargin(0);
portlet.setLayoutMargin();

[stonebranch2]

That is definitely what I needed. There was no "portlet.setLayoutMargin();" method though. That method took an Integer, but passing "null" seemed to work the same as you suggested.

I also had some problems with the portlet border and the portlet body border.

Here is a HideablePortlet class incorporating your setLayoutXxx recommendations along with the border changes. This produces the desired results.

Thanks

public class HideablePortlet extends Portlet {

    private static final String BLANK_TITLE = "";
    private static final String NO_BORDER = "0px";
    private static final String HEADER_PROPERTY = "header";
    private static final String BODY_PROPERTY = "body";

    public HideablePortlet() {
        this(BLANK_TITLE);
    }

    public HideablePortlet(String title) {
        setTitle(title);

        setLayoutTopMargin(0);
        setLayoutBottomMargin(0);
        setLayoutLeftMargin(0);
        setLayoutRightMargin(0);
        setBorder(NO_BORDER);

        Canvas windowBody = new Canvas();
        windowBody.setBorder(NO_BORDER);
        setAutoChildProperties(BODY_PROPERTY, windowBody);

        HLayout headerLayout = new HLayout();
        headerLayout.setVisible(false);
        setAutoChildProperties(HEADER_PROPERTY, headerLayout);

        addMouseOverHandler(new MouseOverHandler() {

            @Override
            public void onMouseOver(MouseOverEvent event) {
                showPortlet();
            }
        });
        addMouseOutHandler(new MouseOutHandler() {

            @Override
            public void onMouseOut(MouseOutEvent event) {
                hidePortlet();
            }
        });
    }

    public void showPortlet() {
        getHeader().show();
        setLayoutTopMargin(1);
        setLayoutBottomMargin(4);
        setLayoutLeftMargin(4);
        setLayoutRightMargin(4);
        setLayoutMargin(null);
        setBorder(null);
        getBody().setBorder(null);
    }

    public void hidePortlet() {
        getHeader().hide();
        setLayoutTopMargin(0);
        setLayoutBottomMargin(0);
        setLayoutLeftMargin(0);
        setLayoutRightMargin(0);
        setLayoutMargin(null);
        setBorder(NO_BORDER);
        getBody().setBorder(NO_BORDER);
    }
}