...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

• what’s included in the theme
• how to use the palettes and layout components
• how to edit components
• how to change or add any components that you need.

If you are looking for tutorials on how to use PhixFlow, see the Training Courses.

Why Use Theme 2?

Theme 2 offers a subtle, contemporary look and feel, with minimalist grey tones and a flourish of colour that can be easily configured to suit your design needs. The flourish of colour can be updated to suite your own design needs as can the logos used; this is all achieved by updating the styles and icons used in the theme.

The Theme 2 palettes are designed to be easy to use. It has the flexibility to fit your application requirements, from data grids to integrated maps.

The Theme 2 provides a responsive layout right out of the box, meaning that your application can adapt to the form factor of the device on which it is being viewed. This is achieved using a tiles. The tiles contain all of the application content and can be resized proportionally to one another depending on the content. So, for example, a tile is larger for a data entry form and  smaller for a map.

We recommend using Theme 2 because it provides more functionality than Theme 1 or the standard palettes. It has more flexibility and is even easier to use. We’ve also included a set of the example dashboards that you can use to see how the tiles work in a dashboard. You can find the example dashboards in the PhixFlow repository → Packages → Theme 2.

What Does it Look Like on a GUI Screen?

To see what a screen designed using Theme 2 looks like, go to the repository → Packages → Theme. Open the T2 - Example Dashboard.

When you first open the dashboard there is no data. To generate the data click the Generate Data button. This adds test data for you to interact with. For example, you can add comments or update employee records. To reset the data back to its original state, simply click the Clear Data button, follow the prompts and then click Generate Data.

The T2 – Example Dashboard includes:

• windows controls
• main content, which includes:
  • a header
  • a tile with:
    
    • a grid, filter buttons and an editable company field. 
    • icon tabs, for embedded comments. These also use the horizontal and vertical splitters.
  • tabs containing:
  • a CRUD form for data entry
  • a set of graphs on a split area. 
  • an embedded video
  • a tile with a map for an integrated google map.

The Theme 2 package also has the following example dashboards.

• Splash screen: can be configured to open other dashboards and provide a pleasant landing page for users.
• Popup: for data entry, providing additional information or anything that requires an additional dashboard to show.
• Confirm: a simple screen to show a custom message such as confirming an action.

How Do I Install Theme 2?

First check your palette. Your administrator may already have installed Theme 2 when setting up your PhixFlow installation. If you need to install Theme 2, it is provided as a package which you can download from Installing Packages.

What Palettes Use Theme 2?

Theme 2 is made up of 3 palettes:

• Base Components:
  These are like the basic lego blocks from which all screens are created. They have minimal styling and can be used to create to create your own layout components or palette tiles. They include the attribute fields that allow users to create, review, update and /or delete (CRUD) records.
• App Builder
  These are preconfigured layout components. If Theme 2 - Base Components contains the basic lego blocks, these components are made up of several blocks already fixed together for you. Each component is something you commonly need in the GUI of an application. For example, you often need a CRUD form to update data tables. You may want users to add comments or notes to specific records. The Tiles in the Theme 2 - App Builder pallete make creating your own apps much easier and quicker, as it gives you ready-made screen components. 
• Buttons: This section provides you with a host of preconfigured buttons that can be used in your applications. These include simple action buttons with an icon, an embedded button with a field that auto generates an email and a filter button which shows the number of records for that filter.

All Theme 2 components have a consistent look and feel, so that your applications will look stylish and professional with minimal effort.

Remember, you can see Theme 2 in action in the example dashboards. You can find these in the repository → Packages → Theme 2→  T2 - Example Dashboard.

How do I Use Theme 2:

How a GUI Screen is Constructed

Before we look in more detail at the layout components in Theme 2, it helps to understand the levels of structure in typical GUI screen, as shown in the following picture.

Image Removed

Overview of Components

Complete Forms

The following are complete forms that can be added directly to a new dashboard or pane, all are available from the Theme 2 – App Builder Palette.

1. Splash Screen

A complete form that can be used as the landing page for an application.

1. Form Complete

A complete form containing all the elements for a standard dashboard containing one tile.

1. Form Content - Complete

Similar to the Form Complete but it excludes the windows controls.

1. Form Content - Empty

As above with no tiles. This provides a blank canvas from which bespoke content configuration can take place.

1. Form Popout - Complete

This a standalone dashboard that is intended to be used for data entry or to display more information is a smaller window.

1. Form Confirmation

The smallest of the complete dashboards, it is designed to service binary options, “Cancel” or “Confirm”, “Yes” or “No”. It provides a means of styling messaging.

1. Comments Complete

A completely configured comments section. It can be added to its own dashboard panel or directly into a tile.

Constituent Items

The constituent parts are the elements which make up the complete forms. They are provided separately so that users can create their own designs more easily.

1. Windows Controls
   1. Primary Controls

Consist of the top-level navigation for the application.

1. Secondary Controls

Secondary controls handle the operation of the window such as closing it or potentially an admin page.

1. Windows Buttons
   1. Provides CRUD buttons housed in an area that apply actions at the window level. This bar is intended to be added at the footer of a window.
2. Header

Intended as a primary section header. It contains both static text for you to enter and dynamic text that can be driven from the data backing the form.

1. Tile Container

Houses and controls the layout of all tiles on a dashboard. All tiles must be placed in here to provide a responsive app.

1. Tile

Provide the building blocks of Theme2. Tiles are designed to house the content of the application. It typically consists of:

1. Tile Header

Intended to be used as a header for a tile. It acts as a secondary section header.

1. Tile Body

Designed to hold the main content of a tile e.g. data grid.

1. Tile Buttons

Footer area designed to hold action buttons pertaining to the tile.

1. Tabs Tiles
   1. Provide a tabulated form of tile, Tab tiles can contain any number of tabs.
   2. We have two types:
      1. Tabs

These provide an icon, header, and subtext.

1. Tabs

Provides only an icon to indicate content.

1. Tile Map & Tile Map Directions

This is a preconfigured tile that contains an integrated Google map. To implement it you will require a Google Map Key API, instructions for generating one can be found here.

1. Resizable

This tile allows users to resize a tile in the application to suit their needs.

1. Expanding Tiles

Provide an expanding area that can house additional content that is not always required to be visible e.g. more options.

1. Comments
   1. This is a preconfigured card component designed specifically for adding comments.

Base Components

These are the standard PhixFlow building blocks from which all of the components we have discussed are constructed. These include fields and date pickers.

Buttons

Provides a selection of buttons designed to meet your design requirements. A specific video is provided to outline all the types of button provided.

...

onto a screen canvas to add content. Palette components can be simple, such as a data field. They can also be multi-component layouts that provide sections of a screen with a header, data display and action buttons. Layouts can even be a complete screen. Layouts and components can display data, enable application users to enter data, or can display information from external sites, such as a Google map.

Image AddedYou can create your own layouts and add them to palettes; see Changing or Creating a Palette. However, we recommend you start with the palettes designed by the PhixFlow team. These layouts are designed to create responsive screens that will rearrange to suit the size and aspect ratio of the device on which the application is running. 

Excerpt

The palettes available to your application are: the basic palettes provided with every PhixFlow installation the palettes provided by the template package selected when you created the application, for example Serene Grey any palettes included in a package that you added to your application; see Package any palettes you created for the application; see Changing or Creating a Palette To use a palette, drag layouts and components onto the screen canvas; see Adding Screen Content.  If you close the palette tab, in the screen canvas toolbar, click  Insert excerpt _palette _palette nopanel true  to reopen it.

Searching the Palette

Use the search box at the top of the palette area to locate template components that contain the text typed in the search box.

What do Components Look Like?

For an overview of the general style of different palettes, see Understanding Template Packages. To see the example content using the Serene Grey palette, load the Serene Grey example application.

Each item in a palette has a description that can be viewed by hovering the mouse cursor over a specific item. In addition it is possible to view a palette item by:

1. Right-clicking on a palette item
2. Selecting Display
3. The item will be displayed in a popup window

Palettes are divided into sections for different screen components. Many are prebuilt to make it easy to add:

• complete screens
• layouts and tiles, in which several components are combined to make sections of a screen 
• individual components, such as data fields

Tiles are layouts with properties to help them adjust in response to the size and shape of the screen on which the application is running. This means you can easily create an application that works on a mobile device, as well as on a laptop or desktop computer. To find out more about responsive design, see Sizing and Positioning Screen Content.

Understanding the Layer Structure of a Screen

Before we look in more detail at using a a palette, it helps to understand that the components of a screen are grouped into containers which form layers, as shown in the following image.

• Click on the image to enlarge it
• Download for printing: PDF Quick Reference Sheet

Image Added

For more information about layers, see Screen Structure.

Anchor
addContent addContent

Adding Screen Content 

To add content to a screen:

1. Drag components from the palette and drop them onto the canvas.
2. If PhixFlow recognises a suitable container for the component, it highlights the container, as shown below. This is known as a preferred parent container; see Component Categories and Preferred Parents.
   Image Added

Moving Components

See Moving Components on a Screen.

Adding Tiles 

Anchor
Tiles Tiles

The Serene Grey palette includes sections for complete screens and for tiles. The complete screens have tile containers, in which the responsive design settings are configured. When you drag a tile from the palette onto the screen canvas, PhixFlow highlights suitable tile containers where you can drop the tile.

If you create your own screen, to use tiles from the palette, you must first provide a suitable tile container by:

• either dragging in a tile container from the palette
• or adding an area component and setting the responsive design options; see Sizing and Positioning Screen Content.

Adding Components to a Tile 

Anchor
EditPalette EditPalette

To add a component into a tile that you have added to your screen, Shift-drag the component from the palette and drop it into the tile.

Changing a Layout Direction 

Anchor
layoutDirection layoutDirection

Tile containers and tiles use the CSS Flex option to specify the layout of contained components as being in either columns or rows. In the palette, the icon for a tile has an arrow to show which direction its contained components will flow.

To change the flow direction:

1. Click on a component on the canvas to find it in the layers panel
2. If necessary, identify the container for the component and its siblings.
3. Right-click the name of the parent and click 

   Insert excerpt
   _edit _edit nopanel true

   .
4. PhixFlow opens the component's 

   Insert excerpt
   _property_tabs _property_tabs nopanel true

5. Click the 

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

    and scroll down to the Direction section:
   Image Added 
6. Set:
   • Direction: either Row or Column. This provides the main axis along which components flow.
   • Wrap: whether or not the content should Wrap around to the next line.
   • Justify: how components align along the main axis. For example, Flex Start aligns a row to the left. 
   • Align: how components align perpendicular to the main axis. For example, Center 
     • for a row: aligns components between the top and bottom of a row
     • for a column: aligns components between the left and right of the column.

See also:

• Component properties
• Sizing and Positioning Screen Content