Tutorial 34: How to use Border Layout

This tutorial describes how the border layout can be used to design screens in Formspider.

Formspider mainframes, dialogs and panels can be designed using border layout. Formspider borderLayout lays out a container, arranging and resizing its components to fit in five regions: north, south, east, west, and center.

Formspider borderLayout elements consist of cells corresponding to the five regions above. The attributes of a borderLayout cell are listed below:

Attribute Description
docking region identifier of the cell, it’s a required attribute. Valid values are: North, South, East, West, Center
width width of the cell, ignored if the docking value is equal to North, South or Center. If not specified, component’s default width is used.
height height of the cell, ignored if the docking value is equal to East, West or Center. If not specified, component’s default height is used.
name name of the cell

Each region may contain no more than one component, meaning that each docking value may be used only once. The components are laid out according to the size of the cell(specified with width and height attributes). The North and South components may be stretched horizontally; the East and West components may be stretched vertically; the Center component may stretch both horizontally and vertically to fill any space left over. Therefore, the width attribute is ignored for North and South components, the height attribute is ignored for East and West components and both the width and height attributes are ignored for Center component.

Using Border Layout

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog will show up. Enter “borderLayout” as the name of the application and “HR” as its Datasource Schema name.  If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. Leave other fields empty and click “OK”. This creates the “borderLayout” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

Double click the “mainPanel” under the “Panels” node of the “Containers” navigation tree to open it in the editor. The example below places two buttons to the North and Center regions of the “mainPanel” using border layout:

<panel backgroundColor="Yellow" borderType="TitledBorder" borderTitle="my layout type is borderLayout!">
  <borderLayout>
    <cell docking="North" height="100">
      <button label="North"/>
    </cell>
    <cell docking="Center">
      <button label="Center"/>
    </cell>
  </borderLayout>
</panel>

The screenshot below shows how the buttons are displayed once the application is executed. Note that when the mainFrame window is resized, the “North” button is stretched only horizontally and the “Center” button is stretched both horizontally and vertically.

Two buttons are placed to the North and Center regions

The example below places a button to every region of the of the “mainPanel”:

<panel backgroundColor="Yellow" borderType="TitledBorder" borderTitle="my layout type is borderLayout!">
  <borderLayout>
    <cell docking="North" height="100">
      <button label="North"/>
    </cell>
    <cell docking="South" height="60">
      <button label="South"/>
    </cell>
    <cell docking="East" width="120">
      <button label="East"/>
    </cell>
    <cell docking="West" width="50">
      <button label="West"/>
    </cell>
    <cell docking="Center">
      <button label="Center"/>
    </cell>
  </borderLayout>
</panel>

All regions are used