Index | Prev | Next

CanvasPane

Found, in the bajaui palette, this component is commonly used to specify positioning for most Widgets and Geom for Shapes in a Px graphic. In addition to providing support for absolute positioning, it also provides support for scaling and/or aligning its contents.

The added Min/Max Scale Factor properties in Niagara, provide support for responsive positioning, giving you more control over how graphics respond when displayed on mobile devices. The responsive CanvasPane scales contents to the screen size of the device in use, which could be anything from a PC with a large screen monitor to a cellphone. Additionally, the FlowPane component (with child ResponsivePane) adjusts the display of contents in a CanvasPane to make best use of the available space. For example when using a cellphone, data that initially displays in a single column adjusts to flow into two columns when the device is rotated 90–degrees.

Figure 97.   CanvasPane properties
Image
 NOTE: It provides support for absolute positioning for Widgets in a Mobile Px page. When used in a Mobile Px file, the CanvasPane scale options are limited to None or Fit Ratio. 
Property Value Description
Visible true (default), false
Sets the table to be visible in the Px page interface (true) or not (false).
Enabled (Px graphics) true (default) 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
Opens a layout window for specifying the size and location of the table in relation to its parent (X, Y coordinates, height and width).
View Size Width 100.00, Height 100.00 Specifies the logical size of the CanvasPane's coordinate system, measured as a percentage.
Scale None (default), Fit, Fit Ratio, Fit Width, Fit Height Specifies how to scale the ViewSize to fit the CanvasPane's bounds: Fit Ratio preserves the aspect ratio. Fit causes the graphics to fill the entire available screen space, possibly causing some distortion.
Min Scale Factor 0.05 (default) Defines the minimum scale for the graphic. the range is 0.0–1.0. Setting a value smaller than 0.5 could allow a graphic to become unusable and setting a value to 1.0 does not allow it to shrink at all.
Max Scale Factor 1.00 (default) Defines the maximum scale for a graphic. The default means the graphic will not get any bigger than it currently is. In most cases, you want to shrink images for mobile device display and you do not want to enlarge them when the page gets very big.
Halign Left, Center (default), Right, Fill
Selects from among horizontal alignment options: Left, Center, Right, and Fill
Valign Top, Center (default), Bottom, Fill
Specifies how to vertically align the pane: Top, Center, Right, Fill
Background Solid, Gradient, Image, Null (default)
Specifies the background fill color.

Solid opens the Color Chooser window.

Gradient opens the Gradient Editor window.

Image opens the Image Brush Editor window. Click the Browse icon (Image) to open the File Chooser, Ord Chooser, or other method of selecting an image file.

Null indicates no color (white).

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.

Related Links

  • Components in bajaui module (Parent Topic)

    • Index | Prev | Next