What is Theme 2?
| Multimedia | ||
|---|---|---|
|
Theme 2 is a 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 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?
| Multimedia | ||
|---|---|---|
|
...
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?
...
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.
Using Complete Forms
| Multimedia | ||
|---|---|---|
|
...
| Multimedia | ||
|---|---|---|
|
Using Constituent Components
If you want to tailor your form layouts, Theme 2 also provides parts of forms that you can combine easily into your own design.
- Windows Controls
- Primary Controls Consist consist of the top-level navigation for the application.
- Secondary Controls Secondary controls handle handle the operation of the window, such as closing it or potentially an admin page. You could also use this for additional controls that an administrator could use.
- Windows Buttons Provides provides CRUD buttons housed in an area that a button bar area. These apply actions at the window level. This button bar is intended to be added at the footer of a window.
- Header Intended as a primary section header. It for main sections in your screen. The header 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 has controls for the layout of all tiles on a dashboard. All tiles must be placed in here this container to provide a responsive appapplication.
- Tile Provide is the building blocks block of Theme2Theme 2. Tiles are designed to house the content of the contain layout components for an application. It typically Each tile consists of:
- Tile HeaderIntended to be used as a header for a Header to appear at the top of tile. It acts as a secondary section header.
- Tile BodyDesigned to hold Body holds the main content of a tile e.g. such as a data grid.
- Tile ButtonsFooter area designed to hold action buttons pertaining to Buttons is the action button bar for the bottom of the tile.
- Tabs TilesProvide a tabulated form of tile, Tab tiles can contain Tiles let you create tabbed forms with any number of tabs. We tabs can have two types:
- TabsThese provide headers, with an icon, header, and subtext.
- TabsProvides only an icon to indicate content, rather than a header.
- Tile Map & Tile Map DirectionsThis Directions is a preconfigured tile that contains with an integrated Google map. To implement it you will require a All you need to add is the Google Map Key API, instructions for generating one can be found here.
- ResizableThis tile allows users to resize a tile in the application to suit their needs.
- Expanding TilesProvide an expanding area that can house .
- Resizable has drag-handles so that a user can resize the tile in application.
- Expanding Tiles can automatically expand to accommodate additional content that is not always required to be visible e.g. only required occasionally. For example users can expand the tile to see more options.
- Comments This is a preconfigured card component designed specifically for adding comments.
Theme 2 also include separate palettes for
- Base Components
- the building blocks from which all of the layout components
- and tiles are made. These include fields and date pickers.
- Buttons
- are described in a separate video.