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 Modified 

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 Theme 2.1 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.

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 Theme 2.1), 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

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:

• either the 

  Insert excerpt
  _layers _layers nopanel true

   panel on the left of the screen canvas. To display the panel click the slider: 

  Insert excerpt
  _layer_slider _layer_slider nopanel true

• 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 

  Insert excerpt
  _edit _edit nopanel true

  .

What's Next?