Design, Code, and Deploy Apps: An Introduction to FireUI

Device diversity continues to expand the Internet of Things. In todays world of connected apps, watches, streaming set top boxes, phones, tablets, desktop and laptops as well as other emerging form factors like Google Glass all have to be supported. Customers expect to be able to use an application on their smartphone while on the go and then switch to their tablet or Desktop computer while in their office or at home. How is a developer supposed to keep up? With Appmethod and FireUI deploying apps from a single code base to multiple devices with a consistent UI is radically simplified!

Fire UI consists of 3 components; the Multi-Device Form Designer, the Multi View Components, and Behavior Services. By leveraging this powerful platform developers using Appmethod get a streamlined process of deploying connected apps to multiple devices across the Internet of Things.

Get to Know the FireUI Multi-Device Designer

The Multi-Device Designer is a feature of the Appmethod IDE that automates consistent user interfaces across different devices and form factors. Styling, behavior, position and other UI properties all conform, at a native level, to the style guides set forth by platform it is running on. Appmethod is packed with pre-defined views including Windows Desktop, Surface Pro Tablet, Mac Desktop, iPhone, iPad, Android Phones & Tablets, and Google Glass.

Meet the Master View

The Master View contains everything an application needs to function. Apps are designed with a top-down approach by placing FireUI components onto the Form Designer while it is set to the Master View. The developer can create new views as needed to extend functionality, look and feel for a particular device or platform.

Each view is stored as an FMX file; one for the master and one for each created view. Appmethod uses stream inheritence with created views so all set properties stored in the FMX file are a difference from the master view FMX file. The Appmethod compiler will selectivly include only the current platform resources which minimzes the size of executables.

Reacting with Multi View Components

MultiView is a new component that adjusts its location and rendering style depending on form factor, orientation and target platform. Depending on device and orientation, the application menu will be displayed as a drawer on smaller form factors, a docked panel for wider screens such as tablets in landscape mode or as a custom menu, such as a popover menu. The drawer menu can be shown by hooking it to a menu button or through swipe gestures that have been enhanced with advanced physics engine logic to add a cool, smooth UI feel with zero code. The MultiView component can also be programmatically customized as desired.

Multi View Components in Action

Create a new project by clicking File -> New -> Multi-Device Application - C++ and select Tabbed with Navigation.

Toggle the view from Master to Android 5" Phone and then to iPhone 4". The Form Designer automatically adjusts to display how the device nativley handles rendering tabbed navigation. On Android the menu is docked at the top of the screen and on iPhone it is docked to the bottom of the screen.

Reacting with Multi View Components

MultiView is a new component that adjusts its location and rendering style depending on form factor, orientation and target platform. Depending on device and orientation, the application menu will be displayed as a drawer on smaller form factors, a docked panel for wider screens such as tablets in landscape mode or as a custom menu, such as a popover menu. The drawer menu can be shown by hooking it to a menu button or through swipe gestures that have been enhanced with advanced physics engine logic to add a cool, smooth UI feel with zero code. The MultiView component can also be programmatically customized as desired.

Multi View Components in Action

Create a new project by clicking File -> New -> Multi-Device Application - C++ and select Tabbed with Navigation.

Toggle the view from Master to Android 5" Phone and then to iPhone 4". The Form Designer automatically adjusts to display how the device nativley handles rendering tabbed navigation. On Android the menu is docked at the top of the screen and on iPhone it is docked to the bottom of the screen.

Defining Behavior With FireUI Components

Behavior Services provides an API to query for platform appropriate design time and runtime behavior. For example, Behavior Services informs the MultiView component to dynamically adjust its display mode based on the selected view and orientation. Additionally, the Tab Control correctly aligns tabs to the top or bottom depending on the target platform. Behavior Services works with the style engine by reading the default size of all controls as defined in the underlying style. Behavior Services can also trigger specific runtime behavior depending on the target platform, such as the bounce physics on a list control on iOS, and the respective glow effect on Android, for example.