Controls for Mobile Devices
Supported controls and properties
The following controls are supported on the mobile devices’ RIA client: Subform, Radio, Tab, Label, Edit, Button, Group, Line, Image, Browser, Check Box, Combo Box, Table and Column.
The Rich Text, Rich Edit, Tree, List Box and .NET controls are not supported on mobile devices.
Since version: Android and iOS support of Subform controls – 2.2a; Radio and Tab controls – 2.5
Most of the form and control properties are supported on the mobile devices’ RIA client. For a full list of supported properties, refer to the Magic xpa Reference Guide.
Appearance of controls
Controls for mobile devices are different than the Windows controls in their appearance, minimum size and space padding. This means that the size of the controls defined using the Magic xpa Fit to Size option may not be large enough to display the entire control text (due to the larger padding on the mobile device controls).
Borders and Radius
The border and corner radius of controls can be fully customized for controls with a non-system color by using the following properties in some of the controls (Since version: 2.3):
-
Border Width – The border width in pixels according to the device's dpi.
-
Border Color – The border color from the color table. This will also affect the line dividers’ color.
-
Border Focus Width – The border width when the control is in focus. This is relevant for Edit controls.
-
Border Focus Color – The border color when the control is in focus. This is relevant for Edit controls.
-
Corner Radius – The control's corner radius in pixels according to the device's dpi.
Keyboard Functionalities
You can control the layout of the keyboard by using the following properties in the Edit control (Since version: 2.5):
-
Keyboard Type – Defines the keyboard content.
-
Keyboard Return Key – Defines the return key value and action.
-
Allow Suggestions – Defines whether the suggestion text will be used.
Edit control
On Android and iOS devices:
-
For a modifiable Edit control with a Date or Time attribute, clicking on the control will open a date or a time picker. You can change this behavior to be as a regular Edit control by using the Open Picker property. (Since version: 2.3)
-
The picture mask of Alpha and Unicode Edit controls is calculated when leaving the control (instead of after typing a character). This provides support for the built-in auto-complete feature of the mobile devices. (Since version: 2.3)
-
You can define a hint for the Edit control. A hint is the text shown on an Edit control that is removed automatically while typing. (Since version: 2.5)
On Android devices:
-
You can define that the Edit control be aligned using Android default alignment rules by using the Default Alignment property. By doing so, English text in the control will be aligned to the left and RTL text will be aligned to the right. If the Default Alignment value is entered, the value of the Magic xpa Horizontal and Vertical Alignment properties will be ignored.
Since version: 2.4
Image control
As mentioned above, the control sizes change according to the device DPI.
Images with the Copied style do not change and use the same amount of pixels as in the image, so the images will appear in different sizes when used on devices with different DPIs.
It is best practice to use Distorted Scaling or Scaled to Fit styles to attain the desired appearance.
Tab control
The Tab control appears as a tab bar on Android and iOS devices (Since version: 2.5). The tab bar will appear in full screen; therefore, when developing an app, it is recommended to stretch the Tab control across the entire form.
In general, the tab bar's functionality is based on the device's default behavior:
|
Functionality
|
Android
|
iOS
|
|
Navigation
|
Click the tab bar items or swipe the tab bar.
|
Click the tab bar items.
|
|
Location
|
At the top of the form.
|
At the bottom of the form.
|
|
Horizontal scrolling inside a tab
|
Not supported. Horizontal scrolling navigates between tabs. Controls (on a tab) that exceed the screen size will not be seen.
|
Supported.
|
|
Vertical scrolling
|
Supported.
|
Supported.
|
Images on a Tab control
The tab can contain both text and images. Images are defined in the Image List File Name and Image List Indexes properties (as in desktop tabs).
Unlike desktop tabs:
-
The images' size is not limited to 16x16. The images however must be rectangles; so for example, the image list can contain multiple 100x100 images.
-
The image file must contain images for all of the tabs.
-
For iOS devices, according to the iOS Human Interface Guidelines, it is best to use an icon whose size is a multiplication of 25 pixels (for example, 25x25 or 50x50).
Tab Header Appearance – Android Only
For Android devices, you can hide the tab header by having blank text and no images. In this case, the tab will be used for scrolling between objects without a header. You can display and/or hide the text and images by setting the following properties:
|
Display combination
|
Display List property
|
Image List File Name property
|
|
To show only text values
|
|
X
|
|
To show text + images
|
|
|
|
To show only images
|
X
|
|
|
To hide the tab bar (and have only pane scrolling behavior)
|
X
|
X
|
Exceptions
Due to the default behavior of the devices, the following scenarios are not allowed:
-
Controls placed outside the Tab control.
-
Controls attached to layer 0 of the Tab control.
-
More than one Tab control on the form.
-
A Tab control attached to a container control (such as a Group control or another Tab control).
-
A subform task that has a Tab control.
Note: The background of the form (wallpaper, color, and gradient) will be used for all the tabs.
Two-state images
You can create two-state images. This means that by clicking on the image on the mobile device, the image will switch to an alternate image. This is done by setting the Image List File Name property in the Check Box control's Mobile section.
You can also create multiple two-state images. This is done by setting the Image List File Name property in the Radio Button control's Mobile section.
Since version: 2.5
Parking on controls
Some controls, such as the Push Button, are not parkable due to the device’s behavior. In such cases, the current control will remain the parked control.
Virtual keyboard support
On touch devices with a virtual keyboard, the virtual keyboard is automatically displayed when parking on controls that require keyboard input, namely modifiable Edit controls. On other controls, the virtual keyboard is automatically hidden.
Note that when the virtual keyboard is displayed, the visible part of the form becomes much smaller. The RIA client automatically scrolls the form so that the parked control is shown in the visible area, as the user navigates between the fields.
Dates
The Date Mode environment setting is not supported for mobile devices. The mobile device's date format will be used.
Incremental Locate
Incremental Locate is not supported on mobile devices.
