Editing Legacy Maemo 5 Documentation/Graphical UI Tutorial/Introduction

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.

Learn more about Contributing to the wiki.

The following code examples are used in this chapter:

* [https://vcs.maemo.org/svn/maemoexamples/tags/maemo_5.0/hildon-examples/ hildon-examples]

Maemo platform's basic starting point for graphical user interface programming is [http://live.gnome.org/Hildon/ 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 [http://www.gnome.org/ 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 [http://matchbox-project.org/ 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.

Because of 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, see [http://www.gtk.org/documentation.html 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 [[Legacy Maemo 5 Documentation/Human Interface Guidelines | 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 in second plan 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 [[Legacy Maemo 5 Documentation/Graphical UI Tutorial/Windows and dialogs | Windows and dialogs]]), 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, and so on. Tapping on it calls the application's menu.
* F: Application area. Shows the actual application's contents.

[[Image:desktop_overview.png|frame|center|alt=Screenshot of desktop|Desktop overview]]

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 always check 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 <code>GSignal</code>), 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 with 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, so do not copy and paste existing code blindly.

<hr/>
<table width=100%>
<tr><td width=30% align=left></td>
<td align=center>Up: [[{{BASEPAGENAME}}|Table of Contents]]</td>
<td width=30% align=right>
Next: [[{{BASEPAGENAME}}/Getting_started|Getting Started]]</td>
</tr></table>

Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!

Summary:

Cancel | Editing help (opens in new window)

Templates used on this page:

Template:Ambox (view source) (semi-protected)
Template:Legacy documentation (view source) (semi-protected)

Retrieved from "https://wiki.maemo.org/Legacy_Maemo_5_Documentation/Graphical_UI_Tutorial/Introduction"

Personal tools

Navigation

Views

Editing Legacy Maemo 5 Documentation/Graphical UI Tutorial/Introduction

@@ Line 27: / Line 27: @@
 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.
+* A: Task switcher button. Tapping on it, the application is put in second plan 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 [[Legacy Maemo 5 Documentation/Graphical UI Tutorial/Windows and dialogs | Windows and dialogs]]), 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.