gramlot.

Course · Lesson 09 of 20

Arrange an application with containers

Choose border, tab and stack containers and verify what survives a panel change.

Reading · Practice2 sectionsPrerequisites: Name behavior and understand lifecycle
Course contents
Orientation
  1. 01 Install Gramlot and create Hello world
  2. 02 Connect text and colour to Data
  3. 03 Explore Data and Source with the inspector
  4. 04 Use relative and symbolic paths, then dataFormula
  5. 05 Call the server with dataRpc and .remote
Start a project
  1. 01 Create your first project
  2. 02 Read and compose Source
  3. 03 Initialize structured Data
  4. 04 Connect fields and values
Build a form
  1. 05 Accept values, preserve drafts
  2. 06 Declare a calculation
  3. 07 Run an action at the right time
  4. 08 Name behavior and understand lifecycle
Compose an interface
  1. 09 Arrange an application with containers
  2. 10 Style the page you own
  3. 11 Publish messages and ask before acting
  4. 12 Format values without changing Data
Connect services
  1. 13 Call an endpoint
  2. 14 Load a Source fragment
  3. 15 Load Data when it is read
  4. 16 Save, restore and send Data deliberately
Deliver your work
  1. 17 Organize pages and choose a host
  2. 18 Read the JavaScript edition
  3. 19 Deliver the JavaScript edition offline
  4. 20 Explain and change a complete form

Let layout express the workspace

A borderContainer divides a workspace into regions with contentPane children. Splitters let users change the allocation of space. A tabContainer presents selectable pages; a stackContainer selects one child without necessarily providing a tab strip.

These are structural components. Keep the data paths of a form understandable inside them, and use layout to support the task: navigation beside details, or different views of the same record.

Check retained content

Switching tabs or opening a drawer is different from removing a Source branch. The current container examples demonstrate retained mounted content and Data during layout changes. Closing a child introduces another lifecycle to inspect.

Use the small gallery examples first. Compare their declared selection with the visible panel, then test resizing and keyboard access on the devices your application needs.

Your turn

Try it yourself

  1. Open Border regions and splitters and resize a region.
  2. Open Drawers; change a field, close the drawer and open it again.
  3. Open Tabs, selection and closing; switch panels and compare this with closing a tab.

Check your understanding

Is hiding a drawer the same as deleting its Data?

Show the answer and expected result

No. Closing the drawer’s presentation retains its content and Data in the demonstrated container. Do not infer the same behavior for removing a Source subtree or reloading the entire page; those are different operations.

Working examples and reference