Overview

A screen is made up of components (the smallest building block) and layouts (a group of components) arranged into layers. Components are items such as areas, static text labels and form fields which display data from a table. Layouts are items such as Tiles.

Screen Layers

A typical screen has a layered structure, in which the Layers are the parents for other layers. This structure, combined with appropriate styling, creates a responsive design that will adapt to both desktop and mobile devices. The nested structure for screens is illustrated below, click on the image to make it larger: 

Components

These are the most basic building blocks that are combined to design a screen.

Components are available from any palette, for example theme 2.1 they can be found under 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:

Layouts

Layouts are groups of components that have been preconfigured. You can create these yourself by combining components or you can use the pre-built layouts from a palette (recommended). For example, a simple layout for a tile is illustrated below:

• Tile is the container, its styling makes the area look like a tile and controls the layout of its child objects.
• Header, an area which contains an icon and a static text.
• Body, a simple area that controls the layout of items places inside it, including the addition of spacing around its edge.
• Footer, area which houses a set of buttons used for updating content associated to the tile.

Finding Layouts and Components

It can be very useful to find a layout, component or the items which contains them. There are two ways to achieve 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  Show/Hide Layer Panel. 

Using Find in Repository

Right-click any item on an unlocked screen and select  Find in Repository Alternatively, the repository can be manually searched, simply expand the  Components branch and navigate to the desired item. The position of the components on a screen is reflected in their order and nesting in the repository list. 

Moving Layouts and Components

In the Layers Section

To move components that are on the screen canvas, use the  Layers panel. When you select a component on the screen, PhixFlow automatically highlights it in the Layers panel.

1. In the Layers panel, click and drag a component to a different location in the list of components.  PhixFlow moves the component on the screen canvas. 
   If the component is a parent, all the children move with it.
2. To move a layout or component inside another item, hold Shift and drag it onto the desired container.

For moving components that are on the screen canvas, use the  Layers panel. This makes it easy to see container components that can be hard to select on the canvas. It also makes the parent-child relationships clear. You can then select and drag individual or groups of components up and down the hierarchy to move them in the canvas. 

How items move in the canvas depends on whether they are flowing in rows or columns; see . For example, if you move a form field in the  Layers

On Screen

Click and hold on a layout or component on your screen and then:

• Either drag it to the desired location and drop it. This creates a sibling relationship.
  For example, if you drop a field on top of another field they appear next to each other.
• Or hold Shift and drag the component to the desired location. This will drop it inside the other component. This creates a parent child relationship.

In the Repository

1. Click and drag a layout or components in the  Components section of the repository to change their position on the screen.
2. To move a layout or component into a new container, hold Shift and drag it to the new container. Commonly this is used to move one item inside another item.