Adapting HTML5 web applications to mobile with Visual WebGui Form Factor designer
Visit our site for our entire selection of blogs Gizmox Blog
As the benefits of enterprise mobility are more accepted, IT organizations and line of business managers are looking beyond unified communication and collaboration solutions to bring enterprise applications, typically limited to the desktop, to employees’ mobile devices. While delivering applications on the web with cross-platform HTML5 are a step in the right direction, application user interfaces need to be tailored and optimized for the devices users are using to access. This task is complicated by the fact that, as most all companies are adopting BYOD policies, application interfaces need to accommodate a wider array of operating systems, browsers, and mobile form factors. To truly capitalize on enterprise mobility, development teams need a fast and easy way to deliver integrated enterprise mobile apps for the many devices (phones and tablets) and operating systems (iOS, Android, Windows) users want to work on. There are several key differences in interface design for desktop and mobile including: different screen sizes, different network communication speeds, different computing resources, and different presentation layouts. In addition, the current level of support for different visual elements, such as HTML5 and CSS3, vary between different browsers. Therefore, developers are often forced to design and create several versions of the same form for the different form factors and operating systems supported. Visual WebGui form factor design feature provides enormous benefits to enterprise mobile application developers. Using the same code base, the feature simplifies cross-platform development by allowing you to easily create a separate form for each mobile device. The feature comes with a set of form templates tailored for the most common devices on the market making it simple for you to develop cross platform mobile application interfaces and at runtime, ensure the proper form is appropriately served to the client based on the device, browser, and operating system.
Adapting to mobile form factors with Visual WebGui at runtime
An application running on Visual WebGui Business Server identifies the browsers and devices that send requests using a set of Detection Definitions. These definitions are set for each browser or device individually. When a request for a form is received, the application detects the definition of the sender, and searches for a match in its list of browser definitions. When a match is found, the appropriate sub-form (a device specific form) is routed to the requesting browser or device of the mobile app. Below is an example of how these built in definitions are displayed in the Browser Definition management window of your application:
Designing to mobile form factors with Visual WebGui
In addition, the Form Factor feature offers Design Definitions mobile development tools, which are intended to mimic the look and visual dimensions of a specific mobile device. By displaying a graphic replica of the mobile device in the designer, you are able to easily adjust the content and layout of a sub-form to its intended mobile device. Below is an example of the Iphone5 device:
An Example of mobile development with Visual WebGui Form Factor Designer
1. In the below example, we will create a simple Login base form that is intended for logging into an application. This form will act as the base form. By using the built-in browser definitions, both for runtime and design time, the layout of the sub-form can be quickly adjusted to its intended browser, and then routed to it automatically:
2. We would like to create a sub-form for Android mobile users. The sub-form is based on the built-in browser definitions for Samsung Galaxy S3, and it inherits its content and layout from the Login base form:
3. When opening the sub-form in the Designer, the inherited content is shown inside an image of the device, according to the built-in Design values that were set for this device:
4. When the application detects the browser definitions that match the Samsung Galaxy S3 definitions, it routes to it the Samsung sub-form:
5. It is apparent from both the Designer view and the browser view that the inherited content of the sub-form is too small for the device display resolution and size. Therefore, using the designer, the content display of the sub-form is enlarged to fit the Samsung display area:
6. When the application runs and the sub-form is routed to the Android mobile browser, its content size now fits the display area of the device:
