Creating new, scaled, absolutely positioned Mobile Px pages

Starting with the Mobile media, you will get a fluidly positioned page layout. Adding a CanvasPane to this layout will cause it to automatically stretch and scale to fit the size of your mobile device.

Prerequisites:

Target platform is running NiagaraAX 3.8
Niagara Mobile is installed
A recent HTML5 compliant browser (issued 2011 or later), for example: FireFox, Chrome, Opera, IE (v.10 or later) and Safari.
Individual mobile apps licensed, as needed

NOTE: CanvasPane scaling is not supported in Internet Explorer 9 and earlier.

Create a new scaled, absolutely positioned Mobile Px page

Perform the following steps:

Right-click target component in nav tree, select View > New View
Change target media to Mobile PxMedia. This will start your Px page with a BasicMobilePane as the root widget.
Drag a CanvasPane from the bajaui or mobile palette into the BasicMobilePane.
You can also add a MobileGridPane (from the mobile palette) to the BasicMobilePane and add CanvasPanes to that. Be careful not to get the page too cramped, horizontally.
Design your Px graphic inside the pasted CanvasPane.

NOTE: Not all widgets are supported in Mobile Px. For example, the bajaui:PxIncludes widget and kitPx:AnalogMeter widget are not supported. For a complete list of supported widgets, refer to Field editors, widgets, and bindings supported in Mobile Px
Set the CanvasPane scaleMode property to Fit Ratio.

NOTE: In a fluid layout, any scale modes other than None or Fit Ratio will be ignored.

The Mobile Px page automatically stretches and scales to fit the size of the mobile device.

Creating new, scaled, absolutely positioned Mobile Px pages

Related Links