Versions Compared

Old Version 18

changes.mady.by.user Anthony George

Saved on

compared with

New Version Current

changes.mady.by.user Anthony George

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
This page is for application designers. It explains how the structure of a screen is made up of layouts and components.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Overview

A screen is made up of components (the smallest building block) and layouts (

set

a group of

preconfigured

components) arranged into layers. Components are

items such as

areas, static text labels and

form

fields, which display data from a table. Multi-component layouts can be simple, such a a label and a field, or more complex parts of a screen with responsive design, these are called tiles. Layouts can also be full screens.

Screen Layers

A typical screen has a layered structure, in which

the main areas are

one layer is the parents for

other components

another layer. This structure, combined with appropriate styling, creates a responsive design that

will adapt

adapts to both desktop and mobile devices. The nested structure for screens is illustrated below. Click on the image to make it larger: 

Image Modified

Components

These

Components are the most basic building blocks that are combined to design a screen.

Components are available from any palette

, for example theme

. For example, one of the Theme 2.1

they can be found under

palettes has the Basic Layouts. For every component you add, you need to give it a name and specify the formatting using the Component properties. It's a good idea to include a meaningful description too.

The basic components are:


Containers

Data Fields

Text Fields

Data Components

Containers are designed to hold other components

Data fields are designed to display data from an attribute.

Text fields are designed to be labels.

These

Data components may not be available

directly from

on the palette.

You can create a data component by dragging a stream onto a dashboard

Instead, your application has default components that it uses when you drag a table or attribute onto the screen canvas. PhixFlow prompts you to choose a:

  • area
  • form
  • card container
  • true/false field
  • date field
  • date-time field
  • number field
  • string field
  • URL display
  • drop-down
  • fixed drop-down
  • dynamic text: text varies depends on backing data.
  • static text: you specify the text you want to appear
  • grid
  • pie chart
  • line graph
  • horizontal bar graph
  • vertical bar graph
  • card


Layouts

Layouts are

a set

groups of

combined

preconfigured components. You can create these yourself by combining

and styling

components or you can use the

pre-built

layouts from a palette (recommended). For example, a simple layout

is

for a tile

, this

is illustrated below:

  • Tile
contains the styles which make the area look lie a tile and controls
  •  is an area container with styling to control its size and the layout of its child
objects
  • components.
    • Header
,
    •  is an area which contains
      • an
icon and
      • icon 
      • a static text text field for the header.
    • Body, in the illustration, the body area is empty. This is where you can add data components,
a simple area that controls the layout of items places inside it, including the addition of
    • such as a grid displaying table data, or form fields. The body area has styling to control its size and the layout of its child components. It also has spacing around its edge.
    • Footer, area which
houses
    • contains a set of
buttons used for updating content associated to the tile
    • buttons. 
      The application user will use the buttons to make changes to data will appear in the body.

Image Modified

Finding Layouts and Components
Anchor
formBuildingFindComponentParent
formBuildingFindComponentParent

It can be very useful to find a layout, component or

the items which contains them

container. There are two ways to

achieve

do this:

Using

the

Layers

The 

Layouts

Layers 

navigator

pane is expandable from the left

hand side. Selecting

of the screen canvas. Select an item

from

:

  • on the canvas
will
  • to highlight it in the
layouts, and selecting an item
  • Layers pane
  • in the Layouts
with
  • pane to highlight it on the canvas.

If the layer section is not visible click 

Insert excerpt
_layer_slider
_layer_slider
nopaneltrue
. 

Using

find

Find in Repository

The repository can be manually searched, simply expand the Components branch (

Right-click any item on an unlocked screen and select

Insert excerpt
_repository_

components

find
_repository_

components

find
nopaneltrue

)

 Alternatively, to search the repository, expand the Components section and navigate to the

desired item. Alternatively right-click on an item on an unlocked screen and select Find in Repository. 

component. The position of the components on a screen is reflected in their order and nesting in the repository list

of layouts. To rearrange layouts on a screen, you can drag component to a different position in the Components branch of the repository.

Image Removed

The repository shows the hierarchical structure of components. With containers and their children and siblings.

Using Properties

Right-click and select  Insert excerpt_repository_find_repository_findnopaneltrue. PhixFlow shows the component in the Layouts section of the repository. 
You can drag components around in the repository to change their position on the dashboard. This means you can be clear about where something is in the layout hierarchy. TipParent Details section at the top of the properties tab indicates

. 

Image Added


Tip

To check whether a component is shared with multiple applications, open its properties and check the Parent Details section, which names the application or package to which

this

the component belongs. For example a component that is shared between several applications

will have a package as it's parent.

Moving Layouts

Affected by

  • pinned/unpinned - unpin a pinned item
  • don't drag - untick dont drag
  • field container/composite - moves items as grouped
  • preferred parent - affects the drop. Assumes you want to put the dropped component/layout into the preferred parent container.

Can be done in the repository Layouts (recommended) or in the screen.

PhixFlow needs to know when you drag something whether or not you want to create a sibling relationship or parent child relationship. Dragging on screen this can be ambiguous.

To make sure you are moving a whole parent/child set of things and moving them within an area it is easiest to move things in the Layouts list in the repository

Animation of dragging in the 

On Screen

Assuming its free to move,

Drag creates a sibling relationship. So if you drop it on a field, it goes next to the field. If you drop it on a container, it goes next to the container.

Shift-drag creates a parent child relationship, where you can only drop onto an appropriate container.

In the repository

To move a component to a new container, press Shift and drag it to the new container. Commonly this is used to move components inside an area to a new area.

To confirm that the component has moved to the new container, remember the techniques to find the container of a component, above.

You cannot add to an area or form that is set as Advanced → View Type → field container. You need to unset this option, add the additional components, then reset the option; see Adding Text and Labels.

Preventing Accidental Dragging

todo - check if this is only related to accidental dragging in design mode - no effect on movement due to responsive design?

Sometimes, when laying out a form, you may find it interesting to "lock" a component in place, to stop yourself dragging it to a new position by accident. To do this, in the component properties → Positional Settings section, tick Prevent Dragging.

todo - What is the role of pin/unpin compared to this

Take into account fixed components and layouts prevent responsive changes to the screen layout, for example if a user changes the screen size of your application on a desktop window, or if it is being displayed on a mobile device.

Themes have been designed to be responsive  Anchorcompositecomposite

Grouping Components

You can group to components together so that PhixFlow treats them as a single item when you drag. This is useful where you have a data field and static text label that you want to keep together. The palette includes prebuilt labelled fields that you can drag in that are already grouped. This type of layout is made up of at least 3 components: 

  • a form component, with the settings:
    • Basic Settings → Composite ticked
    • Advanced → View Type → field container
  • the child components
    • a static or dynamic text field
    • a data field, such as string, number or date.

Image Removed

How to Group Components

To make your own grouped components: 

  • In the dashboard, add a form component.
  • In a basic components palette, such as Basic Components, drag onto a form container:
    • an area to be a container
    • the components you want to treat as a single layout 

  • PhixFlow adds these all as siblings.

    • Right-click one of the new fields and select  Insert excerpt_repository_find_repository_findnopaneltrue. PhixFlow displays the component in the repository layouts list.

  • Within the repository list, shift-drag to move the components into the container you created.

  • Open the properties for the container. In Basic Settings, tick Composite.

    • Field Containers

    PhixFlow has another property that you can use on its own or within a composite component. The option is Advanced → View Type → field container. When this is selected, PhixFlow uses the name of a container as the label on a field. todo-Fiona check

    Adding Text and Labels.

    Creating Responsive layouts

    Some palettes (e.g. those for Theme 2) have been designed so that layouts and components arrange themselves as you add them. These are called Tiles in the Theme 2 palette. If you use palettes not in Theme 2, you will have to set options to ensure components are arranged correctly (see style pages).

    Lay things out using horizontal or vertical flow, with layouts allowed to flow relative to each other - avoid static styles

    Most components or layouts dragged from the palette must be dragged onto an appropriate container (Area, form, card container)

    You can drag data or data components directly onto an element

    See also

    Styles

    1. Use the styles set in the theme
    2. Adapt the theme by editing the styles of components or shared styles
    3. Create your own components and set the styles.

    For an individual component, whether you create it yourself or drag it from the palette, any styles set in its properties are its own. 

    You may want your components to reflect a change you make in one place. To do this, use a shared style on all your components. For example you could set the colour of all buttons using a shared style. If you decide to use a different button colour, you can change it once in the shared style and all the buttons in your application will change colour.

    Binding to Data

    You can add data components to a dashboard without using the palette, by simply dragging a stream onto a dashboard, dashboard element or area.  PhixFlow prompts you to select the type of data component. Optionally, you can create a data view, by add related attributes, sorting and filtering; see Showing Data on a Screen.

    Alternatively, you can bind data to a form or card container by dragging a stream or stream view onto Basic Settings → Stream, or Stream View Name properties.

    How tos

    todo - move this to it's own page.

    Reminder of the training, specific techniques.

    Build Up a basic form

    Note that there are no fancy flow stuff for this. Ask Sarah or Anthony? Classic for videos

    What data do you need to show - 

    1. Create screen 
    2. Open palette
    3. Add Basic Components > Form, and name
    4. Click on the screen to open the properties for your area. In shared styles you will see that this has some default shared styles applied.
    5. Palette Labelled fields > Add labelled fields you need. Click to see properties
      • The Labelled fields palette has composite items - see theBasic Settings checkbox.
      • there are two parts, a static text label and the data field. Making them composite means
      • They move as if they are one thing
      • The name you give to the items is used as the text for the label.
    6. Attributes list - open stream > attributes section or expand for list in repository
    7. Drag from attribute onto form
    HTML Comment

    The following videos will introduce the basic concepts of how you can drag fields into a screen: Videos in widget connector had links to:

    Code Blockhttps://www.youtube.com/watch?v=GCeiTdv0ty4 https://www.youtube.com/watch?v=oXt89u6QGXE

    has a package as its parent; see Package.

    Moving Components

    Insert excerpt
    Moving Components on a Screen
    Moving Components on a Screen
    nopaneltrue
      See Moving Components on a Screen.