How To Use Smartclient Layouts In Openbravo

Smart Client Layouts In Openbravo

Layouts: 

Layout is represent web page structure style. Layouts are of two kind VLayout and HLayout in smart client.

VLayout is represent vertical layout where members are arranged vertically(side by side).

HLayout is represent horizontal layout where members are arranged horizontally.

Layout  Class (in Smartclient):

Layout class is a subclass of Canvas that automatically arranges other Canvases according to a layout policy.

A Layout manages a set of "member" Canvases initialized via the "members" property. Layouts can have both "members", which are managed by the Layout, and normal Canvas children, which are not managed. 

Rather than using the Layout class directly, use the HLayout, VLayout, HStack and VStack classes, which are subclasses of Layout preconfigured for horizontal or vertical stacking, with the "fill" (VLayout) or "none" (VStack) policies already set. 

In Openbravo there is no difference in usage, we can use every method of layout class in it.

From above we have an idea about Layouts. For more information about layouts please look into HLayout and VLayout articles in this blog.

Example Code for Layout:

isc.defineClass('Ob_exmplelayout', isc.VLayout);

isc.Ob_exmplelayout.addProperties({
    ID: 'ifvw',
    initWidget: function () {
        this.hegly = isc.HLayout.create({
            width: "100%",
            height: "100%",
            members: [
                isc.Label.create({
                    contents: "Navigation Content",
                    align: "center",
                    overflow: "hidden",
                    width: "30%",
                    showResizeBar: true,
                    border: "1px solid blue"
                }),
                isc.VLayout.create({
                    width: "70%",
                    members: [
                        isc.Label.create({
                            contents: "Header Listing",
                            align: "center",
                            overflow: "hidden",
                            height: "30%",
                            showResizeBar: true,
                            border: "1px solid blue"
                        }),
                        isc.Label.create({
                            contents: "Body Details",
                            align: "center",
                            overflow: "hidden",
                            height: "70%",
                            border: "1px solid blue"
                        })
                    ]
                })
            ]
        });

        this.addMember(this.hegly);
        this.Super('initWidget', arguments);
    }
});

Example View for Layout:

Any issues related to this please comment it.