Programming Guide:
The modular Qt C++ class library provides a rich set of application building blocks, delivering all of the functionality needed to build SocialCalc on Maemo.
QtCore module: This is the most basic module required as it holds the event-loop and the most basic functionality required by Qt. Classes from this module have been frequently used in this application. Couple of them are explained below, further usage of other classes are explained as encountered.
i. QString : Unicode character string. ii. QVariant: Acts like a union for the most common Qt data types.
QtWebKit module: The Qt WebKit Integration is an integration of WebKit – the open source web browser engine fork of KHTML from the KDE project – with Qt. The Qt WebKit Integration provides an HTML browser engine that makes it easy to embed web content into native applications, and to enhance web content with native controls.
Module provides class references required to implement database interaction in SocialCalc on Maemo. These class references would allow interaction between functions defined in JavaScript in index.html and UI framework developed using Qt C++ class library.
Complete Qt code can be visualized by following file structure:
.Pro file
.ui file
.h file (header)
.cpp file (implementation of class
main.cpp
With reference to above structure, following is description of each and every file :
.UI File :
Graphical user interface of SocialCalc on Maemo is developed using Qt Designer. This Qt tool lets user develop application in WYSIWYG manner. By drop down strategy, as GUI of SocialCalc on Maemo is assembled, integrated XML code is generated which is saved in file with .ui extension as
Header file(.h):
In this file, class named Test is defined as a QWidget. Q_OBJECT macro indicates use of Qt’s signals and slot features.
#include
Q_OBJECT public : Test(QWidget *parent=0);
public slots: void on_pushButton1_clicked(); ///Start SocialCalc void on_pushButton2_clicked(); // Save feature void on_pushButton3_clicked(); ///Open feature
private: QPushButton *startsocialcalc; QPushButton *SaveButton; QPushButton *OpenButton;
};
#endif
Three public slots are declared to perform three different functionalities of Starting, Saving and Opening the content. Along with this references to QPushButton are instantiated which are later to be used in Signals and Slots mechanism.
“ui_example.h” included in the class definition is generated by User Interface Compiler (UIC). It reads an XML format user interface definition (.ui) file as generated by Qt Designer and creates a corresponding C++ header file.
Once Test class has been defined, corresponding implantation of the class is done in .cpp file.
.CPP file (implementation of class defined above):
The constructor of class Test accepts a QWidget parameter, parent.
Test::Test(QWidget *parent):QWidget(parent) { setupUi(this);
connect(startsocialcalc, SIGNAL(clicked()), this, SLOT(on_pushButton1_clicked())); connect(SaveButton, SIGNAL(clicked()), this, SLOT(on_pushButton2_clicked())); connect(OpenButton, SIGNAL(clicked()), this, SLOT(on_pushButton3_clicked())); }
Constructor’s definition includes:
setupUi( this): It sets up the GUI of the application.
Signals and Slot mechanism of Qt.
SocialCalc button clicked on_pushButton1_clicked()- (Signal) Slot
on_pushButton2_clicked()- Save button clicked (Signal) Slot
on_pushButton3_clicked()- Open button clicked (Signal) Slot
Implementation of Test class further includes description of the functions used in Signals and Slots mechanism. Following write up describes workflow in the functions when they are called:
on_pushButton1_clicked():
void Test ::on_pushButton1_clicked() { webView ->setUrl(QUrl("index.html")); }
On clicking the SocialCalc button, on_pushButton1_clicked() function is called. As coded, using QWebView class reference, public function setUrl is called, through which HTML page is loaded in WebView space of GUI. QWebView is the main widget component of the QtWebKit web browsing module.
index.html file contains JavaScript code of SocialCalc which when loaded presents user a new spreadsheet.
on_pushButton2_clicked(): This function is called when Save button is clicked. On accessing dosave() function in index.html, contents written on the spreadsheet by user are saved in a JavaScript string variable. dosave() function is called by passing it in evaluateJavaScript() as an argument, public function of QWebElement class reference.
Return type of evaluateJavaScript() is QVariant variable which is converted to QString variable.
void Test::on_pushButton2_clicked() { { QVariant content = webView->page()->mainFrame()- >evaluateJavaScript("dosave()");
QString data = content.toString(); QString variable obtained is written and saved in a file in host system using file handling operations. These operations are part of Qt Core module and mainly use QFile and QIODevice class reference.
For the saving feature, fileName is obtained using QFileDialog::getSaveFileName(). This is a convenience function provided by QFileDialog which pops up a modal file dialog and allows the user to enter a file name or select any existing .scalc file. The .scalc file is SocialCalc on Maemo extension that is created when spreadsheet is saved.
QString fileName = QFileDialog::getSaveFileName(this, tr("Save Spread Sheet"), "", tr("Social Calc (*.scalc);; AllFiles (*)"));
If fileName is not empty, QFile object is created that is a file, with fileName. QFile works with QTextStream as QFile is a QIODevice. Next, file is opened in WriteOnly mode which if unsuccessful, QMessageBox is displayed to inform user. Otherwise, QTextStream object,in, is instantiated to write the open file.
if (!fileName.isEmpty()) { // save to file QFile file(fileName);
if (!file.open(QIODevice::WriteOnly)) { QMessageBox::information(this, tr("Unable to open file"), file.errorString()); return; }
QTextStream in(&file); in << data; } }
}
on_pushButton3_clicked(): With reference to Signals and Slots mechanism, this function is called on clicking the Open button. To retrieve the saved spreadsheet, relevant file is read using QFile and QTextStream classes. QString obtained as a result of Qt file handling operation described above is passed to JavaScript function doreload().
Similar approach is followed to call JavaScript function doreload() as was used in implementing Save functionality. index.html contains definition of doreload() function. QtWebKit module is used to interact between JavaScript and Qt C++ code.
For the retrieval feature, filename is obtained using QFileDialog::getOpenFileName(). This function, the counterpart to QFileDialog::getSaveFileName(), also pops up the modal file dialog and allows the user to enter a file name or select any existing .scalc file to load it into the the application SocialCalc on Maemo.
void Test::on_pushButton3_clicked() {
QString fileName = QFileDialog::getOpenFileName(this, tr("Open Spread Sheet"), "", tr("Social Clac (*.scalc);; All Files(*)"));
If fileName is not empty, again, QFile object, file, is used to open it in ReadOnly mode. Similar to implementation of save feature, if this attempt is unsuccessful, a QMessageBox is displayed to inform the user. Otherwise, a QTextStream object, out, is instantiated to read contents of file into a QString variable output.
if (!fileName.isEmpty()) { // read from file
QFile file(fileName);
if (!file.open(QIODevice::ReadOnly)) { QMessageBox::information(this, tr("Unable to open file"), file.errorString()); return;
}
QTextStream out(&file); QString output = out.readAll();
Final step involves calling JavaScript function doreload() using evaluateJavaScript() function (public function defined in QWebElement class). QString variable obtained above is passed as an argument to doreload() function. Doreload() function prepares the spreadsheet for user with saved content displayed on it.
webView->page()->mainFrame()-> evaluateJavaScript(QString("doreload('%1')").arg(output)); } }
Main.cpp: A separate file, main.cpp, is used for the main() function. Within this function, QApplication object, app, is instantiated. QApplication is responsible for various application-wide resources, such as the default font and cursor, and for running an event loop. Hence, there is always one QApplication object in every GUI application using Qt.
#include
tela->show(); return app.exec(); }
A new Test widget is created on the stack and its show() function is invoked to display it. However, the widget will not be shown until the application's event loop is started. The event loop is started by calling the application's exec() function; the result returned by this function is used as the return value from the main() function.
Compiling the Qt project and running the application on Maemo OS:
In terminal, type the following command to start Xephyr 11 server software.
$ Xephyr :2 -host-cursor -screen 800x480x16 -dpi 96 -ac -kb
Login to Scratchbox X86 target.
$ /scratchbox/login
Reach the folder of project where all the files have been placed.
Generating project file.
$ qmake - project
Now execute the following command to create a platform specific MakeFile :
$ qmake
To compile program, run the make command:
$ make
Above command would generate an executable file of application SocialCalc on Maemo. Following set of commands would run application on Maemo OS, seen on Xephyr X11.
$ export DISPLAY =:2 $ af-sb-init.sh start $ run-standalone.sh ./