Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
This page is for application designers. It explains how the structure of a screen is made up of layouts and components.
Overview
A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layers. Components are
areas, static text labels and
fields, which display data from a table.
Multi-component layouts can be simple, such as
a label and a field, or more complex parts of a screen with responsive design, these are called tiles. Layouts can also be full screens.
Screen Layers
A typical screen has a layered structure, in which
one layer is
Components
Components are the most basic building blocks that are combined to design a screen.
Components are available from any palette
. For example, the Serene Grey palette has the Basic Layouts section which contains components, such as an area. For every component you add, you need to give it a name and specify the formatting using the Component
properties. It's a good idea to include a meaningful description too.
The basic components are:
Containers | Data Fields | Text Fields | Data Components |
---|---|---|---|
Containers are designed to hold other components. | Data fields are designed to display data from an attribute. | Text fields are designed to be labels. |
Data components may not be available |
on the palette. |
Instead, your application has default components that it uses when you drag a table or attribute onto the screen canvas. PhixFlow prompts you to choose a: | ||
|
|
|
|
|
Layouts
Layouts are groups of preconfigured components
. You can create these yourself by combining
components or you can use the
layouts from a palette (recommended). For example, a simple layout
for a tile is illustrated below:
- Tile
- is an area container with styling to control its size and the layout of its child
- components.
- Header
- is an area which contains:
- an
- is an area which contains:
- icon
- a static text
- field for the header
- Body is an area which contains: (in the illustration,
- the body area is empty)
- data components, such as a grid displaying table data or form fields
- styling to control its size and the layout of its child components. It also has spacing around its edge.
- Footer
- the body area is empty)
- is an area which
- contains:
- a set of buttons
- contains:
- , which the application user will use to make changes to the data that appears in the body
Finding Layouts and Components
Anchor | ||||
---|---|---|---|---|
|
It can be very useful to find a layout, component or
container. There are two ways to
do this:
Using
Layers
The Layers
pane is expandable from the left
of the screen canvas. Select an item
:
- on the canvas
- to highlight it in the
- Layers pane
- in the
- Layer pane to highlight it on the canvas
If the layer section is not visible, click
. Insert excerpt _layer_slider _layer_slider nopanel true
Using
Find in Repository
Right-click any item on an unlocked screen and select
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
,
expand the Components section and navigate to the
component. The position of the components on a screen is reflected in their order and nesting in the repository list.
Tip |
---|
To check whether a component is shared with multiple applications, open its Properties and check the Parent Details section |
, which names the application or package to which |
the component belongs. For example, a component that is shared between several applications |
has a package as |
its parent; see Package. |
Moving
Components
On Screen
- Click and hold on a layout or component
- Drag it to the desired location to create a sibling relationship.
- Dragging in this way creates a sibling relationship. For example, if you drag ad drop a field on top of another field they appear next to each other.
- Or hold shift and drag it to the desired location to create a parent child relationship.
- Shift-drag creates a parent child relationship, where your dragged item drops into an appropriate container.
In the Repository
Click and drag them in theSpecial Cases
Components can be marked with Prevent Dragging, this stops an item from being moved on a screen. It is however still moveable within the repository. This setting can be found in the items Properties → Design tab → Position Settings section.
In the example below we may want to fix the header in a set location, and therefore set it to Prevent Dragging.
Composite Component
Form Fields are composite Components
In the example below a tile is being dragged onto a screen from the palette. The tile container is highlighted in blue as it is the preferred parent of the tile.
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|