Skip to main content
Version: 5.0.0

Window and layout

A screen is built from containers. A window is the titled container that groups related content; a resizable lets the user decide how much room a part takes; and the layout (expandible and the expand styles) says how the free space of a container is shared among its children. The screen template puts them all in place: the row of buttons, the breadcrumb and the area where the windows go.

Window​

A window has a title bar with an optional icon and help, and a body (panel-body) and a footer (panel-footer) as child tags. With maximize="true" it gets a button that makes it grow over the center area of the template and restores it; in the preview it covers the preview area, which plays the part of that center area.

Live preview
XML
<window id="demo" label="Customer data" icon="lucide:user">
  <tag type="div" style="panel-body">
    <criteria id="Name" component="text" label="Name" />
    <criteria id="Email" component="text" label="Email" />
  </tag>
  <tag type="div" style="panel-footer">
    <button id="Save" label="Save" style="btn-primary" />
  </tag>
</window>

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

AttributeControlValues
labelTitletext
iconIconlucide:userlucide:filterlucide:listlucide:settings
helpHelp texttext
maximizeMaximize buttontrue / false
tagFooter with a buttontrue / false

The advanced search (advanced-mode) and the saved searches (saved-searches) need an advanced block of criteria and the server of the screen: see the advanced search.

Resizable​

A resizable shows a handle on each side listed in directions; the user drags it to change the size of the container itself. In a flex layout the sibling next to the handle gives or takes the space, so the rest of the screen does not move. A resizable needs an initial size: a real screen gives it with a grid class in style, the preview with its own class. The handles turn off at small widths with the no-resizable-* styles.

Live preview
XML
<resizable id="demo" directions="right bottom">
  <tag type="p" label="Drag a handle to change the size of this panel." />
</resizable>

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

AttributeControlValues
directionsRight handletrue / false
directionsLeft handletrue / false
directionsBottom handletrue / false
directionsTop handletrue / false

Recipes​

Expand to fill the height​

A container with expandible="vertical" lays its children out in a column. The ones with the expand style share the free space (expand-2x takes double); the others keep their height. Here the criteria window keeps its size and the results window takes the rest.

<tag type="div" expandible="vertical">
  <window id="CriteriaWindow" label="Criteria" icon="lucide:filter">
    <tag type="div" style="panel-body">
      <criteria id="Search" component="text" label="Search" placeholder="Name or email" />
    </tag>
  </window>
  <window id="ResultsWindow" label="Results" icon="lucide:list" style="expand">
    <tag type="div" style="panel-body expand" label="This window takes all the height that is left." />
  </window>
</tag>

The height of the container comes from the template of a screen; the preview gives it 18rem. Layout explains the horizontal layout and the other expansion styles.

Screen template with breadcrumb​

The window template of a screen draws a header with the breadcrumb of the menu path and, on its right, the buttons of the buttons source; the center source holds the windows. Since #925 window-header on the screen chooses breadcrumb (the default) or none, which leaves only the buttons row.

<screen label="Customer list" template="window" window-header="breadcrumb">
  <tag source="buttons">
    <button id="NewCustomer" label="New customer" icon="lucide:plus" style="btn-primary" />
  </tag>
  <tag source="center">
    <window id="ListWindow" label="Customers" icon="lucide:users">
      <tag type="div" style="panel-body" label="The grid of customers goes here." />
    </window>
  </tag>
</screen>

With window-header="none" the header keeps the buttons row and drops the breadcrumb; the application property awe.application.window-header sets the default for every screen.

<screen label="Customer list" template="window" window-header="none">
  ...
</screen>

Events and actions​

Neither the window nor the resizable has an event or an action of its own: the window is a container, and the user maximizes it or drags a handle. A dependency can show or hide a window, and the maximize state is remembered only while the screen is open.

More​