Tutorials: Graphical User Interfaces

Most mobile applications you will develop are going to require a graphical user interface. The courses of this section explain how to work with both major Symbian OS UI-frameworks: S60 and UIQ.

Complete Download: Download the complete section (10 MB)

GUI Architectures

This course will give you an overview of the general development of an application with an UI in Symbian OS. It contains explanations of the concepts and the framework that is built directly into Symbian OS as well as into the UI-frameworks. The various concepts for S60 UI-apps are explained in greater detail. In the challenge you will develop a simple control and use the new Component Array introduced in Symbian OS 9.

Contents:

• GUI Frameworks
• Structure of a GUI application
• Architectures
• Views, Controls, Dialogs
• Seperating UI and engine
• • MVC
  • ECom

Level: Intermediate
Version: v2.0b, May 2008
Based on: Symbian OS 9, S60 3.x, UIQ 3.x

Download:
Materials: GUI Architectures
Challenge: Controls - Instructions
Challenge: Controls - Solution

S60

S60 currently is the most widely-spread platform based on Symbian OS. After explaining basic concepts of resource files, this course gives a hands-on tutorial on how to create some of the most important S60 UI components. This includes defining a menu, loading (localized) strings, modifying the S60 panes and working with various types of dialogs.

Contents

• S60 UI Overview
• Resource Files and Localization
• Defining Menus
• Loading Strings from Resource Files
• Label Controls
• Modifying the Status Pane
• Dialogs
  • Overview
  • Custom Dialog
  • Notes
  • Query Dialogs

Level: Intermediate
Version: v2.0b, January 2009
Based on: Symbian OS 9, S60 3.x

Download:
Materials: S60
Exercise: S60 UI Development - Solution
Challenge: S60 Number Guess - Instructions

UIQ 3

The UIQ framework has changed a lot since its last major version. This course gives a short overview of the concepts behind the new UI framework that supports touchscreen and softkey-input or even a combination of both modes. The tutorial is a a 34-page document that should be worked through after reading the slides - it contains step-by-step instructions along with explanations on how to create a sample EggTimer-application for UIQ3. It includes building a layout with Building Blocks, handling commands, updating a progress bar using an asynchronous timer and displaying a custom dialog.

Contents

• UI Configurations
• Building Blocks
• Commands
• Resource File-Architecture
• Multi-Page Views
• Dialogs

Level: Intermediate
Version: v2.0b, May 2008
Based on: Symbian OS 9, UIQ 3.x

Download:
Materials: UIQ 3
Tutorial: UIQ 3 - Instructions (v1.0a)
Tutorial: UIQ 3 - Solution

< Back to the tutorials overview page...