This page is for application designers. It explains how the structure of a screen is made up of layouts and components.
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
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 a 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, one of the Theme 2.1
palettes has the Basic Layouts. 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 text field for the header.
- Body, in the illustration, the body area is empty. This is where you can add data components,
- such as a grid displaying table data, or form fields. The body area has styling to control its size and the layout of its child components. It also has spacing around its edge.
- Footer, area which
- contains a set of
- buttons.
The application user will use the buttons to make changes to data will appear in the body.
- buttons.
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 Layouts
- 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 theInsert excerpt |
---|
Special 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.
|