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.
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.
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.
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.
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.
« Previous 1 2 3 Next »
Buy Linux Magazine
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.
News
-
Canonical Bumps LTS Support to 12 years
If you're worried that your Ubuntu LTS release won't be supported long enough to last, Canonical has a surprise for you in the form of 12 years of security coverage.
-
Fedora 40 Beta Released Soon
With the official release of Fedora 40 coming in April, it's almost time to download the beta and see what's new.
-
New Pentesting Distribution to Compete with Kali Linux
SnoopGod is now available for your testing needs
-
Juno Computers Launches Another Linux Laptop
If you're looking for a powerhouse laptop that runs Ubuntu, the Juno Computers Neptune 17 v6 should be on your radar.
-
ZorinOS 17.1 Released, Includes Improved Windows App Support
If you need or desire to run Windows applications on Linux, there's one distribution intent on making that easier for you and its new release further improves that feature.
-
Linux Market Share Surpasses 4% for the First Time
Look out Windows and macOS, Linux is on the rise and has even topped ChromeOS to become the fourth most widely used OS around the globe.
-
KDE’s Plasma 6 Officially Available
KDE’s Plasma 6.0 "Megarelease" has happened, and it's brimming with new features, polish, and performance.
-
Latest Version of Tails Unleashed
Tails 6.0 is based on Debian 12 and includes GNOME 43.
-
KDE Announces New Slimbook V with Plenty of Power and KDE’s Plasma 6
If you're a fan of KDE Plasma, you'll be thrilled to hear they've announced a new Slimbook with an AMD CPU and the latest version of KDE Plasma desktop.
-
Monthly Sponsorship Includes Early Access to elementary OS 8
If you want to get a glimpse of what's in the pipeline for elementary OS 8, just set up a monthly sponsorship to help fund its continued existence.