Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

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

...

In PhixFlow it is easy to drag a template component from a palette onto a screen.

...

If the template component has a preferred parent configured, PhixFlow can highlight the appropriate areas onto which you can drop the component. 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 container for data fields and text labels
  • a card container for cards
  • a button bar for buttons.


Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone


If you are creating or editing template components for a palette, you can configure its preferred parent to enable highlighting. The nature and naming of parent types is up to you.  

Note

The following palettes

...

predate version 9.0.0 and the template components are not configured with preferred parents.

...

 

Insert excerpt
_theme_list
_theme_list
nopaneltrue

PhixFlows Base components, theme 1 and theme 2 are not configured with preferred parents.

I am using a template and dragging things into a screen. PhixFlow hightlights stuff to show where I can drop it.

I am creating or modifying a component that will be a template and want to select the preferred parent from the list in the component properties.

Where components on a palette have been configured with preferred parents, as you drag a component onto the screen, PhixFlow highlights parent components that are designed to hold this component. 

You can see which components would be preferred parents in the Preferred Parent Categories.

Set layout categories in template components.

See Palette Template

Added a new Type of object "Layout Category", an Area Component can be given a Layout Category and additionally all layout components have a collection of "preferred parent categories". When dropping a layout component onto a layout it will try to find an area component with one of its preferred parent categories to set as its parent. If one is not found it will drop as before.

Creating Layout Categories

PhixFlow uses layout categories so that template components can be configured with preferred parents. When you drag a component from the palette, PhixFlow can then highlight the areas of the screen that are an appropriate container for the component.

To create a layout category:

...

This means when you drag components from them, PhixFlow is unable to highlight potential parent areas.

See also

How to Configure Preferred Parents

  1. Create layout categories; see Layout Category Properties, below.
    • Either in the repository, expand the Layout Categories section and click 
      Insert excerpt
      _add
      _add
      nopaneltrue
      .

...

    • Or in an area component properties, in Basic Settings → Layout Categories, click 
      Insert excerpt
      _add
      _add
      nopaneltrue
      .

...

  1. Edit an area template components. In Basic SettingsLayout Category, select a layout category.
  2. Open the repository and expand Layout Categories.
  3. Drag the repository tab to the left to display it next to the other tabs.
  4. In the palette, right-click on a component and select Edit. PhixFlow opens its properties.
  5. From the repository, drag a layout 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.

Template componentLayout category/preferred parent
static and dynamic text fieldsheader area, form area
data fieldsform area
buttonsbutton-bar area

Anchor
properties
properties

Step 4 illustrated:

Image Added

Layout Category Properties 

Use layout categories to configure preferred parent area highlighting when you drag components from the palette onto a screen.

Insert excerpt
_property_toolbar
_property_toolbar
nopaneltrue

Insert excerpt
_parent
_parent
nopaneltrue

Basic Settings

FieldDescription
Name

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.


Insert excerpt
_description
_description
nopaneltrue

Insert excerpt
_audit
_audit
nopaneltrue