Versions Compared

Key

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

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Open

Opening an Existing Screen

  1. Load your application.
  2. To open a screen:
    • either, in the header bar, click
      Insert excerpt
      _screen
      _screen
      nopaneltrue
       and click a screen from the list
    • or in the repository, expand your application's Screens section and double-click a screen name.
  3. PhixFlow opens the locked screen in the canvas.
  4. To unlock the screen for editing, right-click anywhere on the screen to open the popup menu and select 
    Insert excerpt
    _layout_unlock
    _layout_unlock
    nopaneltrue
    .
  5. PhixFlow displays the toolbar for the screen indicating it is ready to edit.
  6. Click 
    Insert excerpt
    _palette
    _palette
    nopaneltrue
     to display the palette on the right and you can begin editing the screen.
Add

Creating a New Screen

  1. Click the In the header bar, click 
    • Insert excerpt
      _screen
      _screen
      nopaneltrue
    Screen menu from the top menu
    Insert excerpt
    _screen
    _screen
    nopaneltrue
     or in the repository, expand your application's Screens section.
  2. Click 
    Insert excerpt
    _add
    _add
    nopaneltrue
    , PhixFlow opens the screen creation wizard.
  3. Enter a Name for the screen.
  4. Tick to specify if the screen should open maximised or not.
    1. These can be changed at a later time by accessing the screen's properties from the toolbar. Here are some example setups: 
      1. Popup screen for data entry: 
        1. tick Always on top
        2. tick Allow user to resize
        3. Set Position to Floating and if desired set the other positional settings such as the size and location of the screen. 
      2. Full-screen properties for displaying tables of data
        1. tick Open Maximised
        2. untick Always On Top
        3. if you intend to make your own navigation or screen controls, untick Show Window Button Bar.
        4. optionally, untick Allow user to resize
  5. Click on the template the screen should be based on.
  6. PhixFlow opens a new, unlocked, Screen with the palette opened.

Unlocking and locking a Screen for Editing

Locking a screen will makes it interactive, and therefore uneditable, while it remains locked it displays the screen content as the end user will experience it. For example clicking a button will trigger its action, and components such as a URL component will display their content.

Unlocking a screen will make it editable again and allow you to update the layout, clicking a button now will open its properties editor.

To Unlock the canvas, right-click on the canvas and select Insert excerpt_layout_unlock_layout_unlocknopaneltrue. To Lock the canvas, from the screen toolbar click on 

Designing or Using an Application

When you are creating and editing screens that make up an application, you are working in

Insert excerpt
_design_mode
_design_mode
nopaneltrue
 .

PhixFlow runs applications in 

Insert excerpt
_app_mode
_app_mode
nopaneltrue
. Only essential PhixFlow options are shown in the header bar. All other PhixFlow options are hidden. Instead the application user interacts with the screens you have created .

To switch modes, click the icon in the right of the header bar.

Unlocking and Locking a Screen for Editing

When you first open a screen in

Insert excerpt
_design_mode
_design_mode
nopaneltrue
, it is locked so that you do not accidentally move any of the components. There is no canvas toolbar visible. To edit the screen, you must unlock it. Right-click on the canvas and select
Insert excerpt
_layout_lockunlock
_layout_lockunlock
nopaneltrue
.

Design Mode and Application Mode

When creating and editing applications we work in Design Mode. This provides you access to all the tools and options necessary to create powerful applications. To experience your application as the end user will, we switch to App Mode.

The option to toggle between modes is available in the top right corner of PhixFlow,  

An unlocked screen has all the toolbar and pop-up menu options that you need to move components and edit their properties. If you click on a component, such as a button, PhixFlow opens its properties.

Testing Screens

When you have configured part of a screen, you may want to test how it behaves for an application user. For example, you may want to click a button and run its action, or have a URL component display its content. To do this:

  • either, in 
    Insert excerpt
    _design_mode
    _design_mode
    nopaneltrue
 and 
  • , in the screen toolbar, click on 
    Insert excerpt
    _
app
  • layout_
mode
  • lock
    _
app
  • layout_
modeTo test an application screen, click 
  • lock
    nopaneltrue
    .

Testing Screens

  • or, in the header bar on the right, click
    Insert excerpt
    _app_mode
    _app_mode
    nopaneltrue
 to interact with the screen as if you are an application user
  •  to run your application.