Coding for Maemo devices with Qt

Hello World

A simple Hello World program will give you a first look at using Qt inside Scratchbox. The hello_world.cpp file in Listing 1 displays a friendly "Hello" message.

Lines 1 and 2 of Listing 1 include two header files that contain definitions for the QApplication and QLabel type. You will probably include the QApplication header file in all your Qt applications. In lines 5 and 6, the Qt application is instantiated, and a label that is automatically inserted into the Qt application is created. The command in line 7 is used to show the QLabel with the message Hello Linux Magazine!" and, in Line 8, the application's main loop is closed.

To compile and run this application, open a terminal and type the following command to enter the Scratchbox environment:

/scratchbox/login

In vi, create the new file hello_lm.cpp in your home directory:

vi ~/hello_lm.cpp

Paste the contents of Listing 1 and save the file with :x"+Enter.

Listing 1

hello_lm.cpp

 

Next, run the following to make the .pro file (used to generate the makefile) and compile your application:

qmake -project
qmake hello_lm.pro
make

To execute the application on Scratchbox, start the Hildon application framework, which will launch a screen that emulates the Maemo desktop.

af-sb-init.sh start

To execute the Hello World application, you just need to run the command below and your application will show up on the Maemo desktop emulated and opened in the previous step:

run-standalone.sh ./hello_world

The run-standalone.sh script is responsible for correcting the look and feel for Qt applications. The resulting application is shown in Figure 5.

Figure 5: Basic Hello World application in Qt.

A Text Editor

Another example of a simple Qt application is a very limited text editor written in Qt's Python variant PyQt. To implement the text editor, create a new file on your desktop, paste the source code shown in Listing 2, and save the file as texteditor.py [7].

Listing 2

texteditor.py

 

Lines 2 and 3 of Listing 2 import the classes QtGui and QtCore. These classes are used to start the basic Qt development library. Between lines 46 and 50, QApplication and the class TextEditor are instantiated. The TextEditor class, which is defined in lines 5 to 45, is the real implementation for the Text Editor example. Between lines 7 and 18, application constructor is defined, in which the Qt main window is created through the instantiation of the QMainWindow class (line 8). A text edit component represented by QTextEdit is instantiated and added to the application GUI (lines 11 and 12). This component allows users to write text on it.

The application menu is built and added to the application by the commands in lines 13 to 18. Note that each option available in the application menu is linked to a specific method defined after the class constructor. The for loop defined in lines 15 to 18 takes an important role. For example, it links the New menu option to the class method self.new. When the New menu option is clicked by the user, it calls the TextEditor class method self.new(), which executes the operation necessary to create a new file. The same behavior occurs with the Open and Save menu options, which invoke the Text Editor class methods self.open and self.save, respectively. For homework, I will let you study the operations of these methods. The result of the TextEditor Application is shown in the Figure 6.

Figure 6: Text Editor implemented with PyQt.

To execute the application, you just need to transfer the file to the device with the scp command, open the terminal, and execute the command python texteditor.py.

Embedded Google Maps

For the last stage of this Qt journey, I will describe a more advanced example that uses Qt to build an application for viewing maps with the Qt WebKit and the Google Maps API. This mapping tool requires its own application GUI, and for this purpose, Qt offers a powerful tool called Qt Designer (Figure 7), which I'll use to build the application form. The form contains five QPushButton buttons and a QWebView web view. You can add new Qt components inside a form by dragging and dropping them from the Widget Box to the form. Through the Property Editor, you can set some component properties of a Qt component, such as the name and label. You can download and install Qt Designer with your favorite Linux distribution package manager, such as apt-get, yum, or emerge, or you can download it from the Qt official website.

Figure 7: Main window for Qt Designer.

Once you have learned a bit more about Qt Designer, you can create a new Qt application, mapsQtGoogleMapsMaemo, that has a QWebView and five QButton components inserted into it with a customized QWebView component that shows a map inside it via the Google Maps API.

First, I'll create a Qt class to communicate with the Google Maps API, which allows you to retrieve and embed maps inside your own components – in this example, the component is a QWebView. To communicate with the Google Maps API, I define a class called Map and a set of methods (Listing 3). The most important role of the Map class is implemented in the Map::geoCode method (line 20), which receives a name and loads the map of the specified city with Google Maps.

Listing 3

map.cpp

 

The method get, invoked in line 26, generates a response that is handled by the method Map::replyFinished, as defined in line 16. This method parses and stores the latitude and longitude in an array of coordinates when the program emits the Map::reloadMap signal (line 39). As defined in line 17, the Map::reloadMap signal is handled by the method Map::loadCoordinates (line 43). This method uses QtWebKit to invoke a JavaScript function called Open defined in the HTML content loaded in the Map component requested previously in line 26. The Map class definition is shown in Listing 4.

Listing 4

map.h

 

The next step is to promote the QWebView component to be controlled by the Map class. Open the UI file of the Qt project in a text editor and change the base class of your custom component to QWebView by adding the Map class and its header file and specifying that the Map class extends to the QWebView class (Listing 5). After saving the UI file, open it with Qt Designer and promote QWebView to your custom component, as shown in Figure 8.

Figure 8: Promoting the QWebView component to a Map class.

Listing 5

Extending the Map Class

 

The main screen is defined by the class MainScreen, as shown in Listing 6. This class uses the Map component defined previously to show city locations on the map, which is loaded in the QWebView component. Listing 7 shows the MainScreen class definition. Note that the main screen has QWebView promoted to the Map class and five buttons to display city locations for New York, Washington, Palo Alto, Boston, and Las Vegas. You can extend this idea to whatever city you prefer or add a text editor component that allows the user to specify the name of a city. Note in Listing 6 that the click event for each city button invokes the method Map::getCode, passing as an argument the name of the city.

Listing 6

mainscreen.cpp

 

Listing 7

mainscreen.h

 

In the MainScreen constructor, specifically (line 15, Listing 6), the application loads an HTML file called index.html that contains JavaScript code to show the city location with the Google Maps API. The JavaScript initialize function embedded in the index.html file instantiates a GMap2 object with a center point at (0, 0) and zoom level 1. In this case, the loaded map is shown entirely in the QWebView component. The JavaScript Open function updates the GMap2 center point to the arguments passed as parameters and the zoom level to 11.

The index.html source code is shown in Listing 8. The Google Maps API is retrieved in line 5, and the JavaScript functions initialize and Open are defined in lines 9 and 16, respectively.

Listing 8

index.html

 

To compile and run the map example, make sure you specify the necessary Qt libraries in your Qt project file:

QT += network webkit xml

Now compile the example with Scratchbox by executing the commands qmake mapsQtGoogleMapsMaemo.pro and make, copy the generated binary file and the index.html file to the device with the scp command, and execute it by opening a terminal and typing mapsQtGoogleMapsMaemo. The view should be very similar to Figure 9.

Figure 9: Screenshot of the map app on a Maemo device.

Buy Linux Magazine

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

comments powered by Disqus
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters

Support Our Work

Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.

Learn More

News