...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
What is Theme 2?
| Multimedia | ||
|---|---|---|
|
Theme 2 is a palette of set palettes that contain ready-made layout components that you can drag into a dashboard. This page explains how to use Theme 2. It covers:
- what’s included in the theme
- how to use the various elementpalettes and layout components
- how to editing itemsedit components
- how you can create your own components to suit your needsto 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?
| Multimedia | ||
|---|---|---|
|
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 palette is 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?
| Multimedia | ||
|---|---|---|
|
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 install Theme 2 there will be open the dashboard there is no data present. To generate the data simply load the T2 – Example Dashboard and click on the click the Generate Data button. This generates adds test data for you to interact with in the Example Dashboard. 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. This will reset the data to its original state.
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?
| Multimedia | ||
|---|---|---|
|
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.
| Multimedia | ||
|---|---|---|
|
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.
- Splash Screen
A complete form that can be used as the landing page for an application.
- Form Complete
A complete form containing all the elements for a standard dashboard containing one tile.
- Form Content - Complete
Similar to the Form Complete but it excludes the windows controls.
- Form Content - Empty
As above with no tiles. This provides a blank canvas from which bespoke content configuration can take place.
- 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.
- 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.
- 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.
- Windows Controls
- Primary Controls
Consist of the top-level navigation for the application.
- Secondary Controls
Secondary controls handle the operation of the window such as closing it or potentially an admin page.
- Windows Buttons
- 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.
- 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.
- 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.
- Tile
Provide the building blocks of Theme2. Tiles are designed to house the content of the application. It typically consists of:
- Tile Header
Intended to be used as a header for a tile. It acts as a secondary section header.
- Tile Body
Designed to hold the main content of a tile e.g. data grid.
- Tile Buttons
Footer area designed to hold action buttons pertaining to the tile.
- Tabs Tiles
- Provide a tabulated form of tile, Tab tiles can contain any number of tabs.
- We have two types:
- Tabs
These provide an icon, header, and subtext.
- Tabs
Provides only an icon to indicate content.
- 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.
- Resizable
This tile allows users to resize a tile in the application to suit their needs.
- Expanding Tiles
Provide an expanding area that can house additional content that is not always required to be visible e.g. more options.
- Comments
- 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.
| Multimedia | ||
|---|---|---|
|