Auto-hide/collapse panel widget?

[borice]

Hello,

I'm evaluating the option of porting my GWT-Ext app to SmartGWT. The main layout of my app (see screenshot below) is based on the GWT-Ext BorderLayout. The "Repository" and "Details" panels function in "auto-collapse" mode, that is, once collapsed, they can be clicked to be temporarily displayed so that the user can interact with them, but automatically collapse once the user's action is completed.

I can't seem to find a similar widget in SmartGWT. Are there any plans on adding such a widget, or is it possible to easily retrofit an existing one to exhibit this behavior? (an example would be very helpful)

(for reference, see the "west" panel in this GWT-Ext example)




Thank you for any pointers!

Boris

[Isomorphic]

Hi Boris,

You basically want this structure (this is how it might appear in the Watch Tab in the Developer Console, or in Visual Builder):

HLayout
    SectionStack (Repository)
        ListGrid
    VLayout (Center)
        TabSet
        Output Pane (single section SectionStack?)
    SectionStack (Details)
        TabSet (Properties)
        TabSet (Description)

Some details omitted but this should give you the general idea.

If you just setShowResizeBar(true) on the Repository SectionStack and the central VLayout, you'll get a resizebar that does *both* resizing and hiding the components (note the arrow in the resize grip). Use setResizeBarTarget("next") on the center VLayout to cause the resizebar to collapse (hide) the next component (Details SectionStack) instead of the central SectionStack.

If you prefer to keep a dedicated button for hiding the Repository / Details SectionStacks (right now you have one with a "<<" icon), you can add one via SectionStackSection.setControls() and just have it call hide() on eg the Repository SectionStack - the surrounding HLayout will automatically react to this, resizing the other members to fill available space.

The same thing works if you want to auto-hide those panels based on some other user action (like say, double clicking on one of the Components).

[mike.art1]

Looking at the SmartClient Visual Builder (screenshot), it appears you should be able to build something quite similar

[borice]

Thank you both for the fast responses!
How do I get to the "Visual Builder" -- is this something that comes with SmartGWT?

[Isomorphic]

Right now it's just in the Eval of the commercial version of normal SmartClient. The plan is to make the XML screen descriptions that Visual Builder spits out capable of being translated to SmartGWT Java code, but that won't be part of the first release of the commercial version of SmartGWT.

You might want to play around with Visual Builder just to get a clearer idea of how the components fit together, especially if you have no trouble reading the generated JavaScript and understanding what the corresponding Java would be.

[borice]

I undestand - thank you! I'm not a JavaScript expert, but I understand enough to be dangerous :) I'll give it a try...

Again, thanks for such great work! You guys are great!

[Atd]

thanks its very useful , but i need to add button in the center so if u click on it it will be maximized and the left & right will be hidden with the resize too and will convert the img on the button and if it clicked again it will return the width of all three layouts , i try to use .hide() & .show() and its work fine but if i click on the resizeBar for the center layout , the left layout will be hidden() " i use setResizeBarTarget("next") for the center resizbar " and after that press the button to maximize the center layout so the center layout will be maximized ,..... but if i click on the button to restore the stats of all layouts the resizeBar will be disabled so i cant use it any more
Please Any suggestion ?? Any Help ???
Thanks ,