Border Container Layout

The example shows the border container layout in Project Avatar. The default widget library used to render the layout is jQuery. You can change the avatar.properties file to set the widgetLib to dijit to see the border container rendered in Dojo.

All Defaults with 5 regions, Width and Height set, Resizable, Closable

Top Text
Height: #{bc1Model.state.top.h}
Right Sidebar Text
Width: #{bc1Model.state.right.w}

Center Text

Move the splitters to generate the resize event and show the changed heights/widths.

Left Text
Width: #{bc1Model.state.left.w}
Bottom Text
Height: #{bc1Model.state.bottom.h}

Sidebars, 5 Regions, 3 Splitter

Table of Contents
Width: #{bc2Model.state.left.w} px
North Frontier

Main Center Content

South Frontier
Fixed Width Sidebar

Nested Layout, 2 Splitters, Form in Center Layout

Table of Contents
North Frontier


Hello #{name.first} #{name.last}

Complex Nesting.

Left Sidebar 1
Left Sidebar 2
header region one
header region two

Main Content Here....

Right Sidebar 2
Right Sidebar 1