Mobile Design Guidelines (Magic xpa 4.x)
Since the mobile devices’ capabilities, user interface and expected user experience are significantly different from a desktop computer, there are important differences that need to be taken into account when designing the application screens and planning the user interaction.
Devices differ in screen size, fonts, expected interaction device features (such as a camera and GPS), security related features and more. This document is designed to assist developers to take full advantage of each device.
-
Screen size and orientation – Mobile devices have various resolutions and screen sizes in both landscape and portrait orientations.
-
Keyboard devices – Some mobile devices have a full QWERTY keyboard. In addition to a keyboard, some devices have a dedicated Menu key, an Esc key and a trackpad or trackball that are equivalent to the desktop keyboard arrow keys. The trackpad also provides a dedicated Fire action when pressed. Keyboard-only devices have a fixed screen orientation and cannot be rotated.
-
Touch devices – Some mobile devices have a touch screen, some in addition to a full keyboard, and some without a keyboard. Touch devices support screen rotation and provide an on-screen virtual keyboard when a full keyboard is not available.
-
Windowing model – Mobile devices support a simple stacked window model. Each application can open multiple windows, but each new window is stacked on top of the previous windows and is inherently modal. As there is no mouse pointer, windows cannot be manipulated (moved or resized) by the end user. When an application is run, its main window (and subsequent stacked windows) occupies the entire device screen.
-
Form navigation using touch keyboard – Touch devices use an on-screen virtual keyboard. Some devices rely on tapping on form controls (fields) to navigate between the fields while others have Tab functionality in the virtual keyboard. The navigation inside a field (an Edit control), is done using a long press on the field content.
-
Context menu – The context menu is an important and central user interaction tool. Since the screen size is relatively small, it is common to perform most tasks using the context menu, instead of “wasting” screen space on buttons and on-screen menus.
-
Input modes – The Edit control is always in Insert mode. There is no equivalent Overwrite mode on the mobile devices.
-
Running in the background – The mobile devices’ OS is a multi-tasking OS, meaning that each application can run either in the foreground or in the background. The end user can see the running applications and switch between them. An application running in the background is not suspended and continues to run, but does not have access to the screen.
As was mentioned above, mobile devices have various resolutions and screen sizes. Magic xpa makes this easier for you with its Mobile Design mode.
When the Mobile Design mode is enabled and controls are added to the form, some of the properties will be set with different default values, which better support the mobile platforms.
You activate this feature by clicking the Mobile Design Mode button 
from the toolbar or by opening the Options menu and selecting the Mobile Design Mode option.
The following properties differ from the non-Mobile Design mode:
-
The screen size is smaller. This is because it is recommended to design a screen for the smallest device and use placement to increase the size of the controls for larger devices.
-
The size of controls is larger.
-
The color of the table is defined according to the table color and not the column color (in the Set Table Color property).
-
The Table control will not show scrollbars.
-
The Group control will not have a default text.
-
The Radio control will have a button appearance.
-
The Line control placed in a container control will be stretched horizontally to fill the control.
-
The width placement of the Edit, Group and Line control will be set to 100%. Therefore, by default, these controls will be resized.
-
Tab controls will be placed on the entire form area.
-
An Image control will have a different size when dropped on the form or in a Table control.
When developing for mobile platforms, you can preview the Display forms that you are developing by using the Mobile Preview pane. You access this by clicking the mobile button 
from the toolbar, by opening the View menu and selecting the Mobile Preview Pane option or by pressing Ctrl+Alt+P.
This lets you play around with the placement and size of the controls and see how the controls will appear on various mobile devices. The form and control properties related to placement and size are the properties that are supported for this preview pane.
From the floating pane you can select which mobile device you want to preview, such as iPhone 6. Next to the name of the device, you will see the dimensions of the device. You can also click to the right of the device list to change the orientation of the preview. The options that appear here are defined in the Magic.ini file's [MAGIC_DEVICES] section or in the Mobile Device repository, which you can access from Options > Settings > Mobile Devices.
Controls that are not supported for mobile devices, appear as a crossed out rectangle: 
.
