Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 13 Next »

This page is for application designers who want to use templates to create an application with a consistent look-and-feel.

Overview

Template packages holds application settings, templates in the form of preconfigured screen layouts which are available through palettes. Packages enable application designers to quickly create applications with a consistent look-and-feel.

PhixFlow comes with two preinstalled base palettes, additional palettes are available though packages, see the Installing Themes and Packages page for information about how to do this.

To see which palettes are available to you, in the bottom right of the PhixFlow window click  Palette. PhixFlow opens the palette tab which shows all the palettes that are installed. If you do not see the Theme1 and Theme 2 palettes listed, you can download and import them; see Installing Themes and Packages.

The pages in this topic are:

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:

  1. Select the attributes you want to appear in a form. 
  2. Drag the attributes onto the parent container.
  3. 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 you can be specific about how the component relates to other components on the screen.  In the layers panel you can drag a component:

  • into another component, creating a parent-child relationship 
  • next to another component, creating a sibling relationship.

If you are using PhixFlow's palette, most components will resize into the space that is available to them; see Using Size and Position for Responsive Design.



Screen Design and Layers :

A typical screen has a nested structure, in which the main areas are the parents for other components. This structure, combined with appropriate styling, can create a responsive design that can adapt to both desktop and mobile devices. The nested structure is illustrated below:

Another way to show these layers is as a heirarchy. For example:
Screen
Controls area
Menu 1
Menu 2
Main area
Header
Tile container area
Sub-header
Tile Body
Area 1
Grid
Area 2
Form
Button Bar
Footer area
Button 1
Button 2

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. 







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.

What Next?

  • No labels