Qt for Mobile Development

Workbook
Version 2.5

Prerequisities
The participants should have knowledge on C++ language with basic object oriented features including classes and object, inheritance and virtual methods. Template principles are needed only for understanding Qts collection classes. No STL or RTTI (runtime-type-information) knowledge of standard C++ required.

Tools and Versions

The exercises are based on Qt 4.6.3 or newer. Nokia Qt SDK is required for using Qt Mobility APIs and for building and deploying applications to Symbian or Maemo handsets.

Exercise session 1: Basic Qt GUI application and tools

Objectives Verifying the installation and environment To write the very first Qt application Understanding the basic concepts of Qt applications Introducing Qt Creator IDE and Nokia Qt SDK a) Open the Qt Creator of Nokia Qt SDK and a new empty Qt 4 project.

b) To your project, add a new C++ source file (e.g. main.cpp) and write a basic HelloWorld like application (refer to the lecture slides). c) Build and run the application on different targets e.g. desktop (Linux or Windows), mobile simulator and if available, on MeeGo SDK environment also. d) Try different fonts and font colors to present text in your label component. If you know how to write HTML, you can also modify the component text by writing HTML code inside the text string or the label. e) Modify the application so that there is a QPushButton instead of QLabel. Add functionality where the application exits when the user presses the button. f) Get familiar with the help system of Qt Creator. How can you easily open the api documentation of a specific class? In which situations QPushButton instances send signals? Does the QPushButton class define any slots?

Exercise session 2: Creating a Trip Cost Calculator App GUI

Objectives Hand-coding a GUI application Getting familiar with basic widgets and layout managers In this exercise we implement an application, which calculates the fuel costs of a car trip. The inputs are fuel consumption (liters/100kms), fuel cost per liter and trip distance. The basic application GUI could consist of e.g. QLabels, QLineEdits and a QPushButton but use here some other input widgets like sliders or dial components. Implement the GUI your own main widget class deriving from QWidget. In the main method you just initialize the application and create an instance of your widget. a) Create an empty Qt4 project for your application by using Qt Creator (as in exercise 1). Name your project e.g. as TripCostCalculator b) Add a new class named TripCostCalculator by using Qt C++ Class Wizard (can be found from File->Add New).

c) Implement the GUI in the widget class constructor by first creating a layout e.g. QVBoxLayout and then the widgets itself one by one. Remember to add your widget class as a parent for the layout and then add the child widgets (QLabel, QLineEdit etc..) to the widget. Remember the proper memory management! d) Create a main.cpp file where you create QApplication instance, create and show your widget and execute the application. Build and run the GUI.

Exercise session 3: Adding Signals and Slots

Objectives The main objective of the exercise is to learn Qts signal-slot mechanism in practice. We continue the previous exercise by implementing functionality to the application. We add a new slot, which we connect to the Calculate buttons clicked() signal. a) In your main widget, add a slot calculateTripCost(). Remember to add this under public/private slots section of the widget class header file. Implement the slot as a normal C++ method in .cpp file. The slot should just take the values the user has entered to QLineEdit components and then convert them to numbers (QString class has the methods for that). Texts of QLineEdit components can be accessed by using method text(). The method returns the as a QString. b) In the widgets constructor, connect the signal emitted by QPushButton to your slot where you calculate the trip cost and show the result in the result label. c) Build and run the application d) Try debugging the application by setting breakpoints and running the code line by line exploring the variables. Optional extra exercise if you have time: Write a signal to your widget and slot for the signal. Emit the signal at some point in the code. Test your signal-slot implementation with no parameters and by passing some data across the objects (e.g. an integer).

Exercise session 4: Creating GUIs by using Qt Designer

Objectives In this exercise we learn how to make use of Qt Designer tool in creating GUIs in a quick and visual way. We also get familiar with basic features and functionality of Qt Creator including the signal-slot editor and auto-connected slots. a) Open Nokia Qt SDK and create a new Qt 4 GUI application named BodyMassIndex. This will now create files for basic Qt GUI project and open a Qt Designer form. b) With Qt UI Designer, implement an application which counts the Body Mass Index and shows the result to the user. Create a new project and choose Qt GUI Application. Select the input and display widgets from UI Designer to create a nice GUI for this. c) With signal/slot editor of the Qt Designer, connect signals and slots between sliders and lcd numbers.

d) Implement the calculation functionality for the application. The body mass index is calculated by the following formula: BMI = weight (kg) / (height(meters) x height(meters))

Exercise session 5: Main Windows, Menus and Actions

Objectives If we want to implement menus and actions in our application, we can just derive our main GUI class from QMainWindow instead of QWidget. Menus and actions can then be created either by simply hand-coding them (examples in slides) or by using Qt Designer. Hand-coding can be done like as follows:
QMenu* menu = menuBar()->addMenu(File); QAction* openAction = menu->addAction(Open); connect( openAction, SIGNAL(triggered()), this, SLOT(openFile()) );

QAction represents a menu item in menus. QAction sends signal triggered(), when selected by the user. a) Now create a new Qt GUI Application project named MyAnimation. Select QMainWindow to be the base class for your application.

b) To your project, add a new Qt C++ class AnimationWidget inheriting from QWidget.

c) In your QMainWindow class, add an instance of your widget. Create an instance of your animation widget in the constructor. After creating, the must also be set as a central widget for the main window.

//Include the header of your widget class #include AnimationWidget.h //In the class declaration of your main window class private: AnimationWidget* animationWidget; }; // In the constructor of your main window class you create the widget and // set it to be the central widget of this window animationWidget = new AnimationWidget( this ); setCentralWidget( animationWidget );

d) In your main window constructor, implement a menu with the following actions: Start (starts the animation) Stop (stops the animation) Quit (quits the application) e) Implement the Quit action for the application. For the Quit functionality, add a message dialog to ask the user Exit application? with options Yes and No.

Exercise session 6: Painting and event handling

Objectives To practice 2D drawing on widgets To practice the use of timer services of QObjects To implement event handling: timers key and mouse events. Here we continue the previous exercise. a) Implementing paint event. Add method void paintEvent(QPaintEvent *event)to your animation widget. This is a virtual method from QWidget base class and is used for painting the widget itself. The QWidget implementation for this method does not draw anything. Implement the method so that it draws the background with some color and an ellipse on it. b) To your animation widget, add a private member of type QPoint, which describes the location for an ellipse to be moved on the screen. In paintEvent method, draw a green ellipse on the screen located by the QPoint variable. QPoint ellipseLocation; c) Adding timer events: To your widget, implement a slot, where you start a timer with 50 ms interval. Start the timer when the user selects Start from the options menu. Implement timerEvent(QTimerEvent *event) method so that it updates the ellipseLocation QPoint and invokes update() asking the window manager to redraw. d) Starting the animation from the menu: By using timers, implement an animation where the ellipse moves forward and backward on the screen. Start the timer when the user selects Animate from the menu and stop the timer when the user selects Stop from the menu. e) Mouse event handling :Implement mouseClickEvent(QMouseEvent *event) so that when the user clicks or touches the canvas, the click coordinates become the new location of the ellipse. f) Key event handling : Implement keyEvent(QKeyEvent *event) method so that it handles the arrow key event. The direction of the ellipse is changed accordingly. g) Optional (time permitting): To your project, add a Qt resource file and import an image to your application. Draw it on the screen instead of the ellipse.

Exercise session 7: WebKit Implementing a simple web browser by using QWebKit.

With Qt Designer, implement a simple web browser by using QWebView component. Add also QLineEdit component for the user for inputting an URL and 3 buttons Go, Reload and Back with corresponding functionalities. Remember to add WebKit module to your .pro file for linking. QT += webkit If you have network connectivity, deploy and try it out on a mobile phone.

Exercise session 8: Using Qt Mobility APIs

Now we take the new Qt Mobility APIs into use. However, you should install them to your device too in order to test your apps there. Many of the mobility features can also be tested with Qt Simulator. Open the Qt Mobility Documentation web page and from there Quickstart Guide to get the latest info on what you need to add to your project. The key points here:
#include <QSystemInfo> //(1) #include <QSystemDeviceInfo> QTM_USE_NAMESPACE //(2) // In your class then.. QSystemDeviceInfo deviceInfo; // Then check the API documentation for further information // on how to utilize the API

a) Implement a simple Mobile Application, which shows the current battery level percentage on a QLcdDisplay component. The UI consists of a single QWidget with QLcdDisplay instance. The battery level API and signals related to it can be found from System Info Mobility APIs. Test the application on the Mobile Simulator. Note! You have to set the build target to be the Simulator, Symbian or Maemo target device in order to get this built). b) Test the application with different battery states, battery low states by using the mobile simulator application. c) If you have a Maemo/MeeGo or a Symbian handset available, deploy and test the application on a target device. Follow the rules you can find from behind the link on the Qt Creators Welcome view (Nokia Qt SDK).

Mobility API Workshop: Where am I? application featuring Location, Google Maps, SMS Messaging and Phonebook.
For multiple views, you can use QStackedWidget component, which can contain multiple QWidgets of which one can be displayed at a time. This is a way of implementing view based applications.
QWidget *firstPageWidget = new QWidget; QWidget *secondPageWidget = new QWidget; QWidget *thirdPageWidget = new QWidget; QStackedWidget *stackedWidget = new QStackedWidget; stackedWidget->addWidget(firstPageWidget); stackedWidget->addWidget(secondPageWidget); stackedWidget->addWidget(thirdPageWidget); // Selecting the current widget stackedWidget->setCurrentIndex(0); // Or stackedWidget->setCurrentWidget( firstPageWidget );

The quickest way to implement multiple views with QStackedWidget is of course using Qt Designer tool. Implement an application, which uses the Location API to determine the current GPS location (latitude and longitude). The location can then be shown on Google Maps and also sent to the specified phone number as an SMS message. Implement the application UI views with Qt Designer by using QStackedWidget component. View1 Location/Google Maps View: When the application gets the location data, it opens Google Maps with the current location by using QWebView (see Google Maps API for how to set the proper URL. View2: SMS Editor View: This view is opened when the user selects to send his/her location via SMS. View3: Contacts view (optional, time permitting). Add a button Contacts to the SMS editor view. The button opens this view to display the contact book contacts, where the user can select the recipient. After confirming, the SMS editor view is opened and the selected contacts phone number is displayed on the recipient field. Optional (time permitting): Open the previously created animated ball exercise and change the implementation so that the ball can be directed with mobile phone sensors. Use Qt Mobility Sensor API to do the task.