Tutorial 35: How to use XY Layout

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

Formspider mainframes, dialogs and panels can be designed using xy layout. Formspider xyLayout is a layout type where the developer specifies the absolute position and the absolute size of the components. Since the size and the position are absolute, the components don’t stretch up when the container(mainframedialog or panel) is resized. xyLayout can be preferred if a container holds components whose size is not affected by the container’s size or by font, look-and-feel, or language changes.

Formspider xyLayout elements consist of cells. The attributes of a xyLayout cell are listed below:

Attribute Description
x horizontal distance in pixels between to the upper left corner of the cell and upper left corner of the container. If not specified, default value 0 is used.
y vertical distance in pixels between to the upper left corner of the cell and upper left corner of the container. If not specified, default value 0 is used.
width width of the cell in pixels. If not specified, component’s default width is used.
height height of the cell in pixels. If not specified, component’s default height is used.
name name of the cell

Using XY Layout

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog will show up. Enter “xyLayout” 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 “xyLayout” 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 three buttons to the “mainPanel” using xylayout:

<panel backgroundColor="Yellow">
  <xyLayout>
    <cell x="80" y="5">
      <button label="one"/>
    </cell>
    <cell x="110" y="40" height="30">
      <button label="two"/>
    </cell>
    <cell x="255" y="15" height="40" width="150">
      <button label="three"/>
    </cell>
  </xyLayout>
</panel>

The screenshot below shows how the buttons are displayed once the application is executed. Note that when the mainFrame window is resized, the sizes and the positions of the buttons remain same.

Three buttons are places using xyLayout