Guide Section: An EASAP GUI
EASAP Tree: USER INTERFACE → FORM LIST or TABBED PANE LIST → FORM or TABBED PANE

LAYOUT PANEL is a newer implementation of SUB PANE.

A LAYOUT PANEL may be created by specifying a range of cells in the Excel Range Wizard.

Download, import, examine in the Builder and Test the new functionality in the,

• LAYOUT PANEL example EASAP

• There are a number of specific innovations for an Author:
  • Zero pixel borders for LAYOUT PANEL's nested within LAYOUT PANEL's
    • → Author has more precise control and flexibility to control layout for input and display objects
  • A Child object of a LAYOUT PANEL has Rowspan: and Colspan: formatting options
  • The Excel Range Wizard 2.0 creates a LAYOUT PANEL for an Excel range by default
    • → Excel-derived CSS attributes may be modified by an Author
  • Column or row hiding using Layout: VERTICAL or HORIZONTAL and Show If:

A LAYOUT PANEL creates a highly configurable rectangular area for GUI objects in an EASAP.

• A LAYOUT PANEL may be nested within a Parent LAYOUT PANEL:
  • A LAYOUT PANEL has no border,
    • → Nesting may be many levels deep without absorbing any display area

In the older SUB PANE implementation an Author may configure CSS-style for Child objects in one of two ways:

1. Within the EASAP (default):
   • Use a USER INTERFACE STYLE or object reference in one of the various style-accepting parameters, such as:
     • Style:
     • Input Style:
     • Label Style:
     • Row Style from DOR:
2. From the Excel spreadsheet derived style ( Set Visual Compatibility:→SPREADSHEET )
   • This will import style settings from the corresponding Excel range
   • Creates a close approximation to the 'Excel look'
   • Changes in the Style: parameter could not be modified and saved

• For a LAYOUT PANEL and its Child objects, an Author does not need to choose between:
  • An inheritable and customizable style
  • An Excel-derived style.

• For a LAYOUT PANEL and its Child objects,
  • The default value for Style: may be taken from an Excel Range Wizard-derived LAYOUT PANEL
  • An Author is then free to modify, customize and save changes in the Style: parameter

LAYOUT PANEL
Optional Parameters:
Show if:	Logical expression, if TRUE then panel shown, if FALSE then panel NOT shown
Enable if:	Logical expression, if TRUE then panel enabled, if FALSE then panel NOT enabled
Layout:	Specify placement of any Child objects (default→VERTICAL, HORIZONTAL,GRID)
Grid:	If Layout:→GRID, Grid: will define the dimensions of a rowsxcolumns grid for Child objects using integers in the form rows,columns (eg. 5,7 for a 'calendar month grid of days')
Style:	A USER INTERFACE STYLE, an object reference or literal CSS-text that controls the visual appearance of this LAYOUT PANEL.
Style to Child:	Should Child objects inherit the Style: of this LAYOUT PANEL? default→NO Each Child→Style: must be left blank or else Child→Style: will take precedence over the Parent LAYOUT PANEL→Style:
Columns Widths:	Set by the Excel Range Wizard (in Visual Compatibility:→SPREADSHEET). Not intended for direct input.
Rows Heights:	Set by the Excel Range Wizard (in Visual Compatibility:→SPREADSHEET). Not intended for direct input.
Rowspan:	Span vertically across more than one cell in a Parent LAYOUT PANEL or SUB PANE with Parent Layout:→GRID
Colspan:	Span horizontally across more than one cell in a Parent LAYOUT PANEL or SUB PANE with Parent Layout:→GRID

The Excel Range Wizard may import an Excel chart via an Author-selected region. In some cases extra space may be added around the edge of the actual chart (extra rows may be added below the image).

There are two ways to remedy this manually:

1. Add the actual CHART REFERENCE as the IMAGE→Chart Reference: parameter
   • → Use this IMAGE in place of the Excel Range Wizard generated IMAGE
2. For the IMAGE eliminate the extra rows,
   • Set:
     • Rowspan: 1

The Excel Range Wizard 2.0 will take a spreadsheet and a range of cells and create a LAYOUT PANEL and Child GUI objects which mimic the Excel look and layout of those cells within an EASAP.

The exact details that specify this look and layout are set as a string of CSS attributes in LAYOUT PANEL→Style:

Although a discussion of Cascading Style Sheets are outside the scope of the EASA Help Pages the primary reference may be found at:

• https://www.w3.org/community/webed/wiki/CSS/Properties

One straightforward alternative to editing individual CSS attributes is to create a USER INTERFACE STYLE referred to in Style: or else to set Style: to a blank string which leaves just the GUI object without any extra formatting.