This page is for application designers who are editing or creating palettes with custom components. It explains how to use layout categories on template components to set preferred parent highlighting.
Overview
The PhixFlow palette contains sets of template layouts and components. It is easy to drag a layout or component from a palette onto a screen.
If a component or layout on the palette has a preferred parent configured, PhixFlow will highlight the appropriate areas onto which you can drop it. This can be useful where you have a screen with different areas designed to display different things, such as:
- a header for static and dynamic text
- a form-area for data fields and text labels
- a card-area for cards
- a button bar for buttons
- a tile container for tiles.
Some palettes include layouts called tile containers and tiles. These layouts are configured to with styles and properties that ensure a screen is responsive to changes in screen size or form-factor.
| Live Search | ||||||||
|---|---|---|---|---|---|---|---|---|
|
| Panel | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
Component Categories are used to highlight on a screen where an item is expected to be placed.
For example, a Tile Container has the Component Category "Tile Holder". If a user then drags a tile with "Tile Holder" specified as its Preferred Parent onto a screen that has a Tile Container it will highlight with a pink surround.
The PhixFlow palettes contain templates with component categories and preferred parent specified to help make creating screens easier. For example,:
- Header areas highlight when header items are dragged over a screen.
- Button bars highlight when buttons are dragged over a screen.
| Note |
|---|
The following palettes predate version 9.0.0 and the |
preferred parent feature is not supported for them. We recommend using the Serene Grey Template Package, see Installing Template Packages.
|
This means when you drag components from them, PhixFlow is unable to highlight potential parent areas.
To install the latest version of Theme 2, which has been updated to add preferred parents, see Installing Template Packages.
See also
How to Configure Preferred Parents
How to Configure Preferred Parents
Define a Component Category and apply it to an object, then any objects we want to be place in this object have this Component Category set as their Preferred Parent. A Component Category is just a label that is used to create an association. Objects can have multiple Preferred Parents and can also have their own Component Category.
Setup
- For the item you want to be the Parent,
- Open its properties.
- In Basic Settings → Component Category,
- If you have a Component Category already defined, click
Insert excerpt _
componentCategory _
componentCategory nopanel true
- and from the window that opens drag the component category into the box.
- If you have not defined a Component Category yet, click
Insert excerpt _add _add nopanel true
For example, in the palette, right-click on a component and select Edit.
- to create one.
- For all the template items that you want to be placed in this Component Category repeat the following:
- Open the template section in the repository where your desired items is held.
- It is advised to add this feature to a template, however if you have not yet made your component a template, simply open its properties from where it resides.
- Double click on item to open its Properties.
- In the Preferred Parent Categories section click
.Insert excerpt _componentCategory _componentCategory nopanel true - From the repository, drag
- Open the template section in the repository where your desired items is held.
- the required Component Category onto the Preferred Parent Categories list
The following table shows some examples of the layout categories you could create, and the components that would be appropriate for them.
Step 4 illustrated:
- and save your changes. This is illustrated below:
| Note |
|---|
When you are dragging a component from the palette, you can drop it onto any suitable container - it does not have to be a preferred parent. |
Layout Category Properties
Use layout categories to configure highlighting of an area that is a preferred parent, when you drag components from the palette onto a screen.
Basic Settings
Enter the name for the layout category, which PhixFlow will add to the Layout Categories section of the repository.
Drag layout categories from the repository into the Preferred Parent Categories section of components.
Simply hold the shift key to force the item into the desired location. See Moving Components on a Screen for more help on this subject. |