One of the mobile-friendly components available in the bajaui palette (Niagara) that adapts the display of Px graphics for various devices
(PC, cellphone, tablet, etc.). ResponsivePane can be used to customize
the layout of widgets within a FlowPane.
For example, if you add 4 ResponsivePanes to a FlowPane
and set the Max Width property for each ResponsivePane to 25%. The
ResponsivePane will adjust the width of each to try to fit the 4 children
on the same row. The last child ResponsivePane will adjust in size
from its Max Width to Min Width value to try to fit on the row, but
if there is not enough space for the specified Min Width, the FlowPane
will let that child wrap to the next row.Figure 1. Responsive Panes in PxEditor and Widget Tree Pane
Note: The bajaui palette provides an Examples folder that contains pre-configured FlowPanes and CanvasPanes to help you start designing mobile-friendly px pages.
ResponsivePane is available in the bajaui palette.
Figure 2. Example ResponsivePane Properties Pane
Property
Value
Description
Visible
true (default) or false
Sets the table to be visible in the
Px page interface (true) or not (false).
Enabled (Px graphics)
true (default) or false
Determines if the table on
a Px page can receive a command.
true configures
the page to receive a command using a popup menu.
false renders the display visible but unable to receive a command.
Layout
additional properties
See following section, Layout properties.
Content
additional properties
The Content property is a container for an added widget.
It reflects properties of the widget that is added to the pane.
Max Width
value, and units
Specifies the maximum width of the ResponsivePane. Max Width
dimension defaults to the preferred size of the widget inserted in
Content, but can be changed for better flow layout. Unit type can
be Absolute, Percent, or Preferred.
Min Width
value, and units
Specifies the minimum width of the ResponsivePane. Min Width
dimension defaults to 20.0 (pixels) Abs, but should be customized
to the smallest desired width for the widget inserted in Content.
Unit type can be Absolute (pixels), Percent, or Preferred.
Force New Row
true or false (default)
Forces the ResponsivePane to wrap to the next row in the
parent container. This ensures a widget starts on a new row, which
allows setting up different sections like header, footer, etc., in
a FlowPane
Layout properties
The Layout property, visible
in a Property Sheet view of the component, allows
you to set positioning coordinates and dimensions for the pane.
Name
Value
Description
X
0.00
Provides the horizontal X-coordinate for absolute positioning
of the pane. Units are either Abs (default)
or Percent.
Y
0.00
Provides the vertical Y-coordinate for absolute positioning
of the pane. Units are either Abs (default)
or Percent.
Width
100.00
Provides the width dimension of the pane in pixels. Units
specify either an absolute value, a percentage, or a preferred value:Abs(default) orPercent, orPref.
Height
100.00
Provides the height dimension of the pane in pixels. Units
specify either an absolute value, a percentage, or a preferred value:Abs(default) orPercent, orPref.
Fill
checkbox
When Fill is selected all widgets in a given row are sized
to fill the row height. When deselected the widgets in a given row
use their preferred height and alignment.
