Qt for Mobile Developers

Workbook
Version 2.0

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 general exercises are based on Qt 4.6.2 (or newer) for desktop (Windows, Linux or MacOS). The mobile related exercises are based on Nokia Qt SDK beta release currently supporting Qt application development on Symbian platform. Nokia PC Suite or Ovi Suite is needed for transferring the application installation file from PC to the target device.

Exercise session 1: Basic Qt GUI application and tools

Objectives To verify the environment To write the very first Qt application Understanding the basic concepts of Qt applications Introducing Qt Creator IDE and Nokia Qt SDK a) From Windows Start menu, open Qt Command prompt. From there, create a basic Qt Hello World application by the following procedure: i. Create a folder for your project > mkdir HelloQt ii. Write the source file with a simple text editor (e.g. notepad) > notepad Hello.cpp iii. Write the code iv. Create a platform independent project file (.pro) by using qmake >qmake project v. Create a platform-specific makefile from the project file > qmake vi. Build the application > mingw32-make vii.Run the application (can be found from release subfolder) > HelloQt.exe b) Now we do the same thing by using Qt Creator IDE. Open Qt Creator in Nokia Qt SDK and build the application from there. From Qt Creator, start from menu New>Empty Qt4 Project. To your project, add a new source file (e.g. main.cpp), write the code, build and run. c) Modify the application so that there is a QPushButton instead of QLabel. Try different fonts and font colors to present text in your button component. If you know how to write HTML, you can also modify the component text by writing HTML code inside the button text string. d) Add functionality where the application exits when the user presses the button. e) 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 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 TripCostCalculator for your application by using Qt Creator. b) Write a header file tripcostcalculator.h for your application: #include <QWidget> #include <QLabel> // etc class TripCostCalculator: public QWidget { Q_OBJECT public: TripCostCalculator (QWidget *parent = 0); ~ TripCostCalculator(); private: QLabel* consLabel; // etc other widgets youll need }; c) Create and write a source file tripcostcalculator.cpp for your widget and implement the widget d) Create a main.cpp file where you create QApplication instance, create and show your widget and execute the application. e) Build and Run

Exercise session 3: Signals and Slots

Objectives To learn signal/slot mechanism in practice

a) In your main widget, add a slot calculateTripCost() b) Connect the signal emitted by QPushButton to your slot where you calculate the trip cost and show the result in the result label. You can access the user input texts of QLineEdit components by invoking text(). The method returns the as a QString, which then must be converted to number for the calculation. c) Build and run the application d) Try debugging the application by setting breakpoints and running the code line by line exploring the varialbes. Optional (time permitting) Write a signal to your widget and slot for the signal. Test your signal-slot implementation with no parameters and by passing some data across the objects (e.g. an integer).

Exercise session 4: Main Windows, Menus and Actions

Objectives To learn how to implement menus in Qt GUIs (make use of QMainWindow, QMenu and QAction) a) Implement a new application where you implement a QMainWindow derived class to be the main GUI class (e.g. MyAppWindow). b) Write another class which is your own widget class deriving from from QWidget (e.g. class MyView). The widget can contain some native components (e.g. QPushButton, QLabel or something else, well add some real content there in the next exercise). c) Add an instance of your widget (e.g. MyView) as a member to your QMainWindow derived class (e.g. MyAppWindow). In implementation, add it as a central widget for you main window (see code example from the lecture slides). d) To your main window, add a menu with the following actions: Animate (starts the animation) Stop (stops the animation) Quit (quits the application) e) Implement the Quit action for the application. We implement the animation actions later in the next session as well use graphics and timers . f) For the Quit functionality, choose and add a dialog to ask the user Exit application? with options Yes and No.

Exercise session 5: Basic painting, timer events.

Objectives To practice 2D drawing on widgets To practice the use of timer services of QObjects To implement simple animations by using timer events Use the solution of the previous exercise as a starting point. a) Implement paintEvent(QPaintEvent *event) method to your widget class. The method should paint the whole canvas of your widget by some background color. b) Draw an ellipse, polygon, lines and some text on the widget by using different colors and fonts. Use Qt Help system to find the right methods for these. c) Add two integer variables to your widget class. The variables should represent x and y coordinates of an ellipse on the canvas. Change the paint method so that the ellipse is drawn to the position specified by the coordinates. int xCoord; int yCoord; d) To your application, add a timer, which is started when the user selects Animate from the options menu. Set the timer interval as 50 milliseconds. On timer events, change the coordinate variables of the ellipse and invoke update() to get the paintEvent() method invoked by the windowing system. Now the ellipse should move on the screen according to the timer. e) 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. f) Add an integer variable representing the current direction of the moving ellipse on the screen. After each timer event, change the x or y coordinates according to the current direction. Change the direction when it hits the border of the screen. // example int direction; // 0==left, 1==right, 2==up, 3==down Optional: g) Implement key event handling so that you can change the direction variable according to the user selection (e.g. the arrow keys) h) Select an image (.bmp, .jpg etc.) to be used in your application and draw it on canvas instead of the ellipse.

Exercise session 6: Using UI Designer

Objectives: To experiment UI Designer tool a) With Qt UI Designer, implement a dialog which counts the Body Mass Index and shows the result to the user. Select the input and display widgets from UI Designer to create a nice GUI for this. The body mass index is calculated by the following formula: BMI = weight (kg)/ (height(meters) x height(meters))

Exercise session 7: Using QFile

Get familiar with QFile API. Add Save/Load functionality to your trip cost calculator or BMI application. Save the latest values the user has entered.

Exercise session 8: Implementing a simple web browser by using QWebKit

Implement a simple web browser by using QWebView class of QWebKit module. Implement a main window which contains QWebView as a central widget. Add also QLineEdit component for the user to type an URL and 3 buttons Go, Reload and Back with corresponding functionality.

Exercise session 9: Building your application Symbian and testing it on N97.

Preliminary work: Connect the phone with Nokia Ovi Suite, Install Qt libraries, App TRK and Mobility APIs to the phone. The instructions and installation packages can be found from Nokia Qt SDK. Do the following steps by using Nokia SDK: a) Try out the Qt Simulator for Mobile phones and test the look and feel of your application, e.g. Trip Cost Calculator or Animation widget. Make the necessary modifications for Symbian, i.e. myAppWindow.showMaximized(); b) Now build your application to Symbian device and test it there. Follow the guide in Nokia Qt SDK. c) Try on-device debugging. Try setting breakpoints and checking variables when running your app.

Exercise session 10: Trying out Qt Mobility APIs

Choose one of the tasks to experiment the mobility features from your application. Choice 1: A simple application that can add new contacts to contact book. See the documentation from the Mobility API beta package. Choice 2: An application which displays the current x-y-z orientation of the device on the display. Choice 3: Follow the users location and showing the coordinates on the display (Location API). Choice 4: To your Trip Cost Calculator, add a menu action Send Cost, which sends the trip cost result to a phone number queried from the user (needs network connectivity).

Workshop: Innovate and implement your own mobile application! At least start with your idea!