Legacy Maemo 5 Documentation/Graphical UI Tutorial/Introduction

Contents

Application Development

Introduction

The Maemo platform's basic starting point for graphical user interface programming is Hildon, an application framework comprising of a lightweight desktop, a set of widgets optimized for handheld devices, a set of theming tools and other complementary libraries and applications.

Hildon is based on GNOME technologies to a great extent. Compared to a GNOME desktop from a user interface point of view, Hildon is designed to provide a new desktop for mobile embedded devices. Therefore it uses, for example, a lighter window manager called Matchbox.

Hildon is a user interface toolkit based on GTK that targets mobile devices. Hildon was originally developed by Nokia for the Maemo operating system that powered its Internet Tablet devices.

Since Maemo version 5.0 (also known as Fremantle), Hildon widgets are specially designed to be finger-friendly, that is, easily used on touch-screen devices. Hildon is published under the LGPL license which gives you the right to develop free and open source, as well as commercial software with Hildon without being charged for licenses or royalties.

Because Hildon is based on GTK, it offers an object-oriented API, although written in C.

GTK is a library for creating user interfaces that is used in a number of important projects like GNOME. This topic includes many references to GTK and Glib. Glib is a library that offers functions to manage memory and data structures, as well as some replacements for standard calls in order to increase portability. For more information on GTK and Glib, refer to GTK and Glib documentation.

This document is intended for developers and covers the usage of Hildon to create graphical user interfaces. It starts from a simple "Hello World" program and expands to more complex examples, presenting a number of widgets and their usage to accomplish some tasks from a technical point of view. It enables you to understand the process of graphical user interface programming and build effective touch interfaces for mobile devices with Hildon.

This topic assumes a good knowledge of the C programming language. Previous experience in creating graphical user interfaces with GTK will be helpful but not mandatory. This topic targets the development of graphical user interfaces, not the design of such. For more information on designing interfaces with regard to usability and user experience, see the topic on Hildon Human Interface Guidelines.

Desktop overview

This section gives a brief overview of the Hildon desktop area in order to give you a better understanding of the application domains and layout.

The figure below illustrates the look of the desktop when an application's normal window is shown. As for the figure's legend, the following list explains it:

  • A: Task switcher button. Tapping on it, the application is put into in the background and the desktop is quickly shown allowing you to choose any running application, as well as the application you had on before. To access the home view from this new view, press the dimmed area around the applications' thumbnails or launch another task by tapping the task switcher button which in this view becomes a task launcher button.
  • B: Status area button. Provides information about the status of the device or applications. A status view can be accessed by pressing the status area.
  • C: Close button. Closes the application. Note that if the current application's window is a subview (for more information, see Windows and Dialogs 6.5), a back button is displayed instead of a close button. The back button also closes the window but instead of closing the application, it goes back to a previous view.
  • D: Title area. Shows an identifier of the application's current task, usually its name but may also be a document's name, etc. Tapping on it calls the application's menu.
  • F: Application area. Shows the actual application's contents.

Note that the above explanation refers to the normal view of an application. When using an application on fullscreen mode, only the application area is shown. Also note that if an application has a toolbar widget, it is displayed at the very bottom of the application's area, both in normal and in fullscreen views.


Typical Maemo GUI Application

The following shows the components making up a typical GUI application developed for Maemo (starting from the bottom):

  • C library: Implements wrappers around the system calls to the kernel and a lot of other useful things. However, the libraries presented below also provide their own APIs to similar functions, so it should always be checked whether they can be used directly, and avoid doing POSIX-level and system-level calls if possible. This makes the application easier to debug, and in some cases easier understand. This library is used (indirectly at least) by every application running on any Linux-based system.
  • Xlib: A library that allows an application to send graphics-related commands to the X server, and receive HID events from the server. Normally an application does not use Xlib API directly, but uses some easier toolkit instead, which in turn uses Xlib.
  • GLib: A utility library that provides portable types, an object-oriented framework (GObject/GType), a general event mechanism (sometimes referred to as GSignal), common abstract data structure types like hash tables, linked lists, etc.
  • GDK: A library that abstracts the Xlib and provides a lot of convenience code to implement most common graphical operations. Used by an application wanting to implement drawing directly, for example in order to implement custom widgets. In theory, GDK is meant to be independent of graphics systems, which it mostly is. Complete abstraction, however, is not yet complete, but for now, the original Xlib target is enough. GDK uses GLib internally.
  • Pango: A portable library designed to implement correct and flexible text layout for all languages. This is necessary to support the different text entry directions. Uses GLib and GDK. Used by GTK+ for all displayed text.
  • ATK: The Accessibility ToolKit. Provides generic methods by which an application can support people with special needs with respect to using computers.
  • GTK+: A library that provides a portable set of graphical elements, graphical area layout capabilities and interaction functions for applications. Graphical elements in GTK+ are called widgets. GTK+ also supports the notion of themes, which are user-switchable sets of graphics and behavior models. These are called skins in some other systems. Uses GLib, GDK, Pango and ATK.
  • Hildon: A library containing widgets and themes designed specifically for Maemo. This is necessary because the screen has very high PPI (compared to PCs), and applications are sometimes controlled via a stylus. Uses all of the libraries above.
  • Other support libraries of interest:
    • GConf: A library from the GNOME project that allows applications to store and retrieve their settings in a consistent manner (in a way, similar to the registry in Windows). Uses GLib.
    • GnomeVFS: A library that provides a coherent set of file access functions, and implements those functions using plug-in libraries for different kinds of files and devices. Allows the application to ignore the semantics of implementations between different kinds of devices and services. By using GnomeVFS, an application does not need to care whether it reads a file from a web server (URLs are supported), from a compressed file archive (.zip, .rpm, .tar.gz, etc.) or from a memory card. Modeled to follow POSIX-style file and directory operations.
    • GDK-Pixbuf: A library that implements various graphical bitmap formats and also alpha-channeled blending operations using 32-bit pixels (RGBA). The Application Framework uses pixbufs to implement the shadows and background picture scaling if necessary. Uses GLib and GDK.
    • LibOSSO: A library specific to the Maemo platform, allowing an application to connect to D-Bus in a simple and consistent manner. Also provides an application state serialization mechanism. This mechanism can be used by an application to store its state, so that it can continue from the exact point in time when the user switched to another application. Useful to conserve battery life on portable devices.

There are some caveats related to API changes between major GTK+ versions, and existing codes should not be copy-pasted blindly.


Hildon Desktop

The end user's desktop experience on Maemo compatible devices is provided by the Hildon Desktop, which is based on Hildon. The latter provides several libraries to interface with the desktop environment UI elements and services.

The Hildon framework's main UI elements are separated to four categories and all of them can be extended with plug-ins:

  • Hildon Home is the root desktop, which can be customized by Hildon home applets.
  • Hildon Status bar provides area for information and quick-access items used mainly to communicate device status changes.
  • Hildon Task Navigator plug-ins implement the top-level desktop menus.
  • Hildon Control Panel is a general interface for application configuration and is extended by control panel plug-ins.

GUI applications in Maemo usually contain one or more HildonWindows, which are top-level application windows. They can include a standardized menubar and a toolbar.

The Hildon framework also includes other auxiliary widgets and services specialized for the Hildon environment. Examples of these are the Hildon-FM library for file system dialogs and widgets, HildonBanner for displaying notifications to the user and HildonWizardDialog for creating wizard user interfaces. For information about Hildon's widgets, see Maemo API References.

Another important element of the Hildon framework is the Hildon Input Method API, which is an interface for creating new user input systems in addition to the included virtual keyboard and handwriting recognition.