This page is for application designers who want to use palettes to create an application with a consistent look-and-feel.
Template package holds default settings, template components and palettes. This creates the look-and-feel for the application.
You can design an application with a consistent look-and-feel using palettes. PhixFlow comes with two preinstalled palettes. There are additional palettes that we provide as packages; see the Installing Themes and Packages page for information about how to do this.
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
To configure a screen, drag components and layouts from the
, or a data table, onto the screen canvas.Insert excerpt _palette _palette nopanel true
Opening a Palette
Palettes are available from the Toolbar on a screen, click the Insert excerpt _palette _palette nopanel true
The pages in this topic are:
| Child pages (Children Display) |
|---|
Using the Palette
The way a screen is made up of layered components is reflected in the way components are grouped in the palette. At the top level are the pre-built items, such as:
- Complete Screens- drag in a single tile that has all the components to create a full screen.
- Form Elements - drag in several components or tiles to design your own screen. These have layers of components, such as an area with headers, fields and labels.
If you want more control over the design of your screen, use partially prepared components:
- Tile containers - drag these in to be the containers. Containers create distinct areas on the screen, with padding and margins so that child items can be automatically positioned.
- Tiles - drag in composite components called tiles.
If you want to go right back to the basic screen components and fields, use the last 2 palettes.
- Base Components - build up the different things you want on the screen from the base up.
- Data Components - add components designed to display data.
Creating Forms Easily
If your screen is going to be a form to display individual data records for a user to edit, it's easier to start with the data rather than creating lots of individual fields. The page see Showing Data on a Screen explains how to:
- Select the attributes you want to appear in a form.
- Drag the attributes onto the parent container.
- Let PhixFlow create default form fields in which to display data records.
If you have already created form fields fields, they are displayed with a broken link icon. Drag on attributes to bind them to the field.
For your selected template, PhixFlow displays a palette. This has all the components you need to build a screen.
The easiest way to move components around is in the layers panel, rather than in the screen itself. This means In the layers panel you can drag a component:
- into another component, creating a parent-child relationship
Screen Design and Layers :
A typical screen has a nested structure, in which the
To show the parent/child hierarchy for a screen, click 
Show/hide layer panel. There is an example on the right.
You can
- Select something on your screen to see it/them highlighted in the layers list.
- Selected items outlined in blue
- Parent item outlined in orange.
- In the layers panel, drag components around to change their position on the screen.
See Also
- Drag-and-Drop Techniques
- Screen Reference Information properties
- Understanding Palettes and Themes
- Styles and Formats
- Showing Data on a Screen
Where Can I Drop This?
Whenever you start to drag a component from the palette, or an attribute, PhixFlow highlights the area onto which you can drop something using light blue, as shown below.
button to display them.
Adding to a Screen
To add content to your screen, such as buttons, maps, headers etc:
- Click and drag items from the
onto the screen as illustrated here:Insert excerpt _palette _palette nopanel true
Adding Form Fields Anchor AddingFormFields AddingFormFields
| AddingFormFields | |
| AddingFormFields |
It's easy to create data to display or data entry using fields on a form by dragging attributes onto the screen canvas:
- Open the
properties.Insert excerpt _tableOnly _tableOnly nopanel true - Drag attributes from the
section onto the screen canvas.Insert excerpt _attributes _attributes nopanel true - Enter a name for the field component.
- PhixFlow automatically creates the form fields using on the default style specified for the type of data that the attribute represents.
For example, a telephone number has a number field, whilst a name has a text field. The default styles are set in your application properties.
Dropping Components Into or Next To Existing Content
When you drop a component, table or attribute onto a screen, PhixFlow needs to know if you want to put the item into or next to any existing item.
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
Where the palette item has a preferred parent, when you drag it onto a screen PhixFlow highlights these preferred parents and will try and place the item you are dragging inside its preferred parent; see Component Categories and Preferred Parents.
Finding a Component
| Anchor | ||||
|---|---|---|---|---|
|
The
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
Moving Content on a Screen
See Moving Content on a Screen
Trouble Shooting
Are changes not showing? Under certain circumstances changes you make on a screen will not appear immediately. Therefore a simple close and reopen of the screen will invoke a refresh and you will see your changes appear.
What's Next?
| Child pages (Children Display) | ||
|---|---|---|
|