Versions Compared

Version Old Version 15 New Version 16
Changes made by

Fiona Sargeant (Unlicensed)

Fiona Sargeant (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This page explains how to open a screen or create a new one.

Select an Existing Screen

  1. From the application Home window, select Design Screens.

  2. Select one of the listed screens; remember you can change the format of the list to see more names.

PhixFlow opens the screen canvas on the left and the palette on the right.

Insert excerpt
_home_screen
_home_screen
nopaneltrue


Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone


Locking and Unlocking the Screen Canvas

To prevent accidental editing of a screen, PhixFlow sets the canvas to be locked:

  • when you first open an existing screen in 
    Insert excerpt
    _design_mode
    _design_mode
    nopaneltrue
  • when you switch between 
    Insert excerpt
    _design_mode
    _design_mode
    nopaneltrue
     and 
    Insert excerpt
    _app_mode
    _app_mode
    nopaneltrue
    .

To unlock the canvas, right-click on the canvas and select

Insert excerpt
_layout_unlock
_layout_unlock
nopaneltrue
. Within your session, PhixFlow remembers the locked statusTo test buttons and actions that you have configured for a screen, you must switch to  Insert excerpt_app_mode_app_modenopaneltrue


Create

  1. Click 
    Insert excerpt
    _add
    _add
    nopaneltrue
     to create a new screen.
  2. Select a screen template. This will give you pre-set layouts such as: 
    • full screen or pop-up
    • basic screen layout, such as data grid or form
    • desktop or mobile screen dimensions.
  3. PhixFlow prompts you to:
    • Enter the name and description for the screen.
    • Select whether or not the screen will Open Maximised
      When you select this option, the screen will open "full screen" for the application user.
      Otherwise, PhixFlow assumes the screen will be a pop-up window. It automatically selects the following options:
      • Always on top
      • Allow user to resize
  4. Click Confirm.
  5. PhixFlow opens a new screen canvas on the left and the palette on the right.
  6. To add components to the screen, drag them in from the palette.

If you have defined your data in an ERD, you can screen and its components based on data; see Create a Screen From ERD Data.

Screen Design

Screens tabs

  • Palettes
  • Component Categories
  • Templates
  • Styles
  • Menus
  • Images

Adding Components to a Screen

For your selected template, PhixFlow displays a palette. This has all the "bits" or components you need to build a screen. A typical screen has a nested structure, as shown in the following picture.

Image Modified
The way a GUI screen is made up of levels of content is reflected in the way components are constructed and grouped in the palette. At the top level are the most pre-built items
  • Complete Forms - a full screen layout 
  • Form Elements - sets fo components prebuilt to make it easy to create a customised screen

If you do not want to use these, you can design your own screen. Some components are designed to be containers. These will give you distinct areas on the screen, with padding and margins so that child items look sensible.

  • Tile containers - create the areas on your screen design
  • You can then drag in Tiles or tile elements. These are still composites of several components.

If you want to go right back to the basic screen components and fields, use the last 2 palettes.

Tip

You do not need to add lots of individual form fields to your screen. Instead you can:

  1. select the attributes you want to apper in a form
  2. drag the attributes onto the parent container for the form
  3. let PhixFlow create default form fields in which to display data records.

For how to do this, see Showing Data on a Component.

Alternatively, you can add components, such as fields, and bind them to data later.


Fields that do not know what data to show are displayed with a broken link icon??, and those that have a data binding show the link icon??

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.


Using Layers

As you add components to the screen, they are nested so that there is an outer container (parent) with components inside (children). You can see the parent/child hierarchy in the Layers List. Click the layers tab on the left to show the layers list.  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 list, drag components around to move them on the screen. 


See Also

Refer to details in other pages

  • Component concepts, and properties.
  • Component → template → palette
  • Where you can drop things - default container
  • Designing with Drag-drop page
  • Screen properties
  • Palettes and Themes
  • Styles and Formats

For how to display data see: Showing Data on a Component.

Testing Screens

PhixFlow aims to show you how the screen will appear to users. However, when you are working in 

Insert excerpt
_design_mode
_design_mode
nopaneltrue
there are visible elements to help you with the process of screen design. For example, the top of the canvas shows the screen toolbar, and components that are connected to data are marked with glyps. To see how a screen will appear to a user and to test how it is working, switch to 
Insert excerpt
_app_mode
_app_mode
nopaneltrue
. You can now interact with the screen as if you are an application user.