Overview

To design a screen, you drag components and layouts,  from the  Palette onto the screen canvas.

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.

Once the template package is installed, when you create a new application, you can select the one you want to use. This sets some default styles for your application and adds its palettes to the list in  Palette.

What Palettes Do I Have?

To see the palettes available to you:

1. In the right panel, switch to the repository tab, or click  Repository to open it.
2. Expand the Packages section to see all the packages available to you, for example, Serene Grey.

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.

Adding Content to a Screen

To add content to a screen, drag components and layouts from the  Palette onto the screen canvas.

Starting with a Complete Layout

Serene Grey 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 → Serene Grey → Complete Screens and drag one of the layouts from the palette onto an empty screen canvas. 
 

      

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.

When you drag components from the Serene Grey palette, PhixFlow highlights containers on the screen canvas where you can drop the component, as shown below. This is known as a Preferred Parent.

Adding Data Tables

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

1. Find the table you want to use:
   • either in the repository Tables list
   • or open its properties.
2. Drag the table icon onto the screen canvas.
   The screenshot below shows how to drag the table icon from the properties onto the canvas.
   
   
3. Select how you want to display the data, for example in a grid or chart.

Adding Form Fields

It is easy to create data display or data entry using fields on a form by dragging attributes onto the screen canvas:

1. Open the table properties.
2. Drag attributes from the Attributes 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 location.

When you move a component or layout, you drag it onto another component. 

• drag and drop places a component next to the component on which you drop. This creates a sibling relationship. 
• shift+drag and drop places a component into the component on which you drop. This creates a parent-child relationship.

If you drag a component that is a parent, all its children move with it.

 See Moving Components on a Screen.

Where the palette component has a preferred parent configured, when you drag the component onto the screen canvas, PhixFlow highlights suitable containers; see Component Categories and Preferred Parents.

Palettes

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

• Confirmation Screen: A complete screen designed to be used as a confirmation message or other binary option.
  
• Full Screens: A complete screen containing windows controls, a content area, a single tile with a header and CRUD buttons in a footer.
• Data Entry Forms: a form or popup window for an application user to enter data.

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.

Finding a Component

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:

• either the  Layers panel on the left of the screen canvas. To display the panel click the slider:  Show/Hide Layer Panel
• or in the repository Components section, in the right panel.

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

To open the properties for a component:

• in the canvas right-click on the component and select Show Details
• In the Layers panel or repository click on its name and click  Edit.

What's Next?