Page 38

EETE MAY 2013

HAPTICS & USER INTERFACES Fig. 1: The first UI mock-up made with QML rectangles and layout managers. The Qt framework is conceived for creating cross-platform applications and UIs for C++. It allows applications to run natively on various devices such as desktops, tablets or handhelds using popular operating systems. By building in support for the target system, Qt allows developers to achieve a betteroptimised result more quickly than traditional porting of the design to multiple platforms. With QML and built-in C++ support, Qt allows teams both to speed up user-interface development and to streamline integration of the UI and the main application. More recently Qt Quick (Qt UI Creation Kit) has been released to provide a faster and more flexible framework for creating more fluid user experiences meeting the demands of embedded and mobile marketplaces. Qt Quick separates the declarative user-interface design and the imperative programming logic. The presentation layer of the UI is written with QML, yet it retains a C++ backend that takes care of rendering and allows direct access to platform services from the QML presentation layer. This approach also allows QML to be extended with graphics such as OpenGL 3D objects written in C++. Qt Quick is included in a variety of third-party development environments. QML files can be created and developed using any text editor. The syntax and structure of QML documents are very human friendly, unlike in many other markup languages. Alternatively, Qt Quick features the Qt Creator development environment, which provides powerful editing tools to help quickly code new UI designs. Qt Creator provides tools to implement features such as shapes and text, and to enhance them by configuring aspects such as colour and animations. The Qt toolbar allows the designer to select various options and automatically generates the appropriate QML code for these. From version 2.1, Qt Creator also supports a special design mode that can be used to gain a quick visual confirmation that the UI is developing as required. A single mouse click is used to switch into or out of design mode, and Qt Creator also provides access to on-screen reference documentation via hovering the mouse cursor over the chosen code element in the document. This provides helpful information to configure various aspects of the element, such as animations. Since QML contains only basic UI controls such as Rectangle, Image, Text, MouseArea and BorderImage, users can build up their own compound elements to create the desired look and feel. This is easy to do within QML, and compound elements can be re-used throughout the UI and also between different projects. New compound UI elements are created in a hierarchical way so that it is easy to re-write an early mock-up of a UI control later with an improved iteration. This allows an agile and incremental process for creating the UI through rapid prototyping. Rapid optimisation for multiple platforms Qt’s cross-platform capabilities allow developers to do prototyping and development work on a desktop PC without having their actual embedded target hardware in place. The deployment to the target device can be done later independently when the hardware is ready. This means the fully developed UI will run as expected on the target hardware. Often the only requirement, for cross-platform applications, is to scale the UI to suit the different screen sizes on various devices or platforms. Qt performs this scaling by default. In some cases, however, the same application is taken across very different screens and use environments. The designers would then wish to re-optimise the UI layout from device to device, for example to suit differing use contexts such as on a mobile, in-car or on a desktop. Naturally, a UI layout made for a full desktop screen wouldn’t suit a mobile phone and vice versa. By separating the declarative UI design from the code logic, Qt Quick provides the flexibility to change only the thin presentation layer, written in QML. The C++ backend containing most of the functionality can be re-used in its entirety. As QML is a high-level and productive markup language, re-writing the thin UI layer for another layout is very straightforward, and again, can be done incrementally in parts. QML prototyping workflow Most developers experiment when writing QML, using a creative trial and error approach; it is fun to play around with QML and incrementally approach your desired output. However, some thought is required in the beginning of a project to decide a suitable UI approach and to create a framework for it. This is not provided automatically, since QML contains only basic UI controls and layout managers. Aspects to consider include whether the UI has different views or a stack-based page navigation, whether there are static parts such as a tab navigator and a status bar, or whether there is simply a plain main view with pop-up dialogs. A practicable way to begin user-interface development with QML is to use a basic element such as Rectangle to position placeholders. Fig. 2: Custom slider elements are implemented. 38 Electronic Engineering Times Europe May 2013 www.electronics-eetimes.com


EETE MAY 2013
To see the actual publication please follow the link above