Overview

To design configure a screen, you drag components and layouts ,  from the 

PhixFlow comes with two pre-installed base palettes that provide the essential building blocks you need. You can download additional palettes. that have a full set of layouts with a consistent style. Using these palettes mean you can quickly create new applications with a consistent look-and-feel. Additional palettes are provided as template packages; see the Installing Template Packages.

Opening a Palette

To make a package available in your application:

1. Open two repository tabs side-by-side.
2. From the Packages section, drag a template package into your application's properties Packages list.

Palettes are available from the Toolbar on a screen, click the

What Palettes Do I Have?

To see the palettes available to you:

 button to display them.

Adding to a Screen

To add content to a screen, drag components and layouts your screen, such as buttons, maps, headers etc:

1. Click and drag items from the 

   Insert excerpt
   _palette _palette nopanel true

    onto

Starting with a Complete Layout

Theme 2.1 has some complete screen layouts. These provide screen templates with different header-body-footer layouts, to which you can add more components. Open the palette → Theme 2.1 → Complete Screens and drag one of the layouts from the palette onto an empty screen canvas. 
 

     Image Removed 

Adding Components

If you start with a complete layout, or create your own layout, drag components from the palette onto the screen canvas. Start with container components then drag in components for headers, footers, buttons and labels.

1. the

1. screen

1. as illustrated here:
   1. Image Modified

Adding

You can also drag a data table onto the screen canvas to display its data.

Image Removed

Adding Form Fields

Form Fields 

Anchor
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:

1. Open the table the 

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   properties.
2. Drag attributes from the Attributes

   Insert excerpt
   _attributes _attributes nopanel true

    section onto the screen canvas.
3. Enter a name for the field component.
4. 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

Refreshing the Screen

Under certain circumstances changes you make on a screen will not appear immediately. There are two main reasons why this occurs and there is a solution for both.

First, when PhixFlow opens a screen it will load any data associated to it. If you then change a default value for a component such as a Dynamic Text header, the value will not refresh until PhixFlow reloads the screen. Therefore a quick close and reopen of the screen will invoke a refresh and you will see you change appear. This is the most common fix.

Second, and less common in PhixFlow, is your web browser caching content. This means content has been save by the browser so that it can load the website faster. Typical items which get cached are images and styles (CSS). You can search the web for how to clear saved images and temporary files from your browser.

Understanding Default Styles

When you set up your application, it is important to: 

• either choose a template, which configures your default styles
• or to select default styles in the Application Properties.

This tells PhixFlow which component to use when you drag tables or attributes onto a screen canvas; see Understanding Template Packages. If you do not set a default style in your application, PhixFlow uses the styles set for the whole system in System Configuration.

.

Dropping Components Into or Next To Existing Content

When you drop a component, table or attribute onto a screen canvas, PhixFlow needs to know if you want to put the item into or next to any existing component in that locationitem.

Where the palette component item has a preferred parent configured, when you drag the component it onto the a screen canvas, PhixFlow highlights suitable containersthese preferred parents and will try and place the item you are dragging inside its preferred parent; see Component Categories and Preferred Parents.

Palettes

Palette content is organised into groups (see Theme 2.1), with icons and descriptions to indicate their styling and purpose. At the top level are the pre-built screens such as:

.

To make changes to a screen from the palette, or to design of your own screen, use components such as:

• Headers: provide clarity and structure to the screen and act as labels to divide a screen into sections.
• Footers: useful for the buttons to provide create, update and delete functionality, so that the application user can make changes to data.
• Tiles: special layouts from data entry forms to Google maps. The container for a tile is configured so the components in the tile can shift their layout in response to the form-factor of the device on which your application is running; see Sizing and Positioning Screen Content.

Image Removed

Finding a Component

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

When you are working on a screen, it can be useful to see how a component fits into the hierarchy layers. You can see this more clearly in:

The 

click 

To highlight the component in the Layers panel or the repository, select it on the screen canvas.

To open the properties for a component:

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?