Napster's Experiments with Freedom

Simple Hello World Application with Necessitas aka the Android - Qt

Reading Time : Less than 20 minutes

After a long effort I made Necessitas working on my machine. I strongly believe I should blog it at the right time. So lets start setting up the development environment with Necessitas. Necessitas provides a custom Qt-Creator release with Android stuff integrated. Even though you can build Qt-Creator and QMake yourself for this purpose, I would suggest you to use the installation script available for download. This article is based on Ubuntu 11.10 and ant version 1.8.4. Lets start creating a new folder for installing Necessitas.

sudo mkdir /opt/necessitas
sudo chmod -R 777 /opt/necessitas

So, we have created a folder in /opt and it is has necessary permissions. Now download the installer and save it under your home folder. Once it is made executable, you can run it.

sudo chmod a+x ~/Downloads/necessitas-<version>-online-sdk-installer-linux
sudo ./necessitas-<version>-online-sdk-installer-linux

You will be guided through a set of steps by the installer. When asked for installtion folder, choose /opt/necessitas. In the component selection page, you can choose to opt out unnecessary API version of Android SDK. This will reduce the download size.

Finally, press Install to begin the installation process. On a windows machine, I got an error message that the installer requires atleast 16GiB of space for temporary files. This might also be applicable to Linux. The installation process would take a few minutes (or even hours on slow speed Internet connections) to complete. Once the installation is complete, open the Qt-Create for Necessitas. Go to Tools > Options and switch to the Android tab, and set android SDK and NDK locations. In my case,

SDK Location : /opt/necessitas/android-sdk
NDK Location : /opt/necessitas/android-ndk-r6b
ANT Location : /usr/bin/ant

Now, click on the Start AVD Manager button, and create an AVD with atleast 1024MiB SD card and HVGA resolution. Finally Start the emulator you have created. Now, jump to the Qt4 tab in the Options window, and make it looking as same as in the following image (To see the image in full resolution, right click on it and select View Image)

Press OK to close the Options window. Close Necessitas Qt-Creator but leave the emulator running. Download the latest Ministro service package for Android from here. Once downloaded, open a terminal and issue the following command.

adb install <full path file name of the ministro apk>

Now, start Qt-Creator for Necessitas. Create a new project and select Qt - Mobile Application as the template. Remove the content of MainWindow::setOrientation() method since it contains some reference to Symbian. You will be greeted with the first class Qt GUI designer. Add a couple of widgets you would like to see on the screen. I have added a QLabel and QPushButton. Click the Run button on the left pane. Now check the emulator and you will see the Necessitas Library download message.

This is a one time process. The download wont happen again for another program which requires the exact same library. Once the library has been loaded, the application will start running. Take a look at my output.

Here in this article, we have not played anything with the source code. So, there will be no functionality at all. In the upcoming articles I would try to introduce more Necessitas stuff. But I hope this would be a great start for you with Necessitas. Also don’t forget to watch a much more professional video here.

//See you in the afterlife
//Subin Sebastian

Static funtions API and Property based API

Reading time : Less than 15 minutes

For most of the advanced users, these two terms will be much familiar. So, this article is for new developers. Most of the today’s desktop programming toolkits are object oriented. Lets take an example of popular X-Window GUI toolkits like GTK+ or Qt, both are object oriented. GTK+ is written in C, and the object-orientation in GTK+ is achieved by using the GLib object system, whereas Qt is written in C++ and is purely object oriented. The main, advantage of object oriented design in widget toolkits is that, they can model entities like windows, widgets, or features etc as objects. By definition as objects should have three properties,

• Identity, which makes an object unique
• Attributes, which specifies the state of an object
• Methods, which defines the behaviour of an object

It is very easier for the toolkit developer to make an exact analogy with a GUI elements like a window or a widget in object oriented programming. Even though it makes the life of the toolkit developers job a bit happier, on the other side, application developers face a minute problem. I’m not sure if I could say it is a problem, but still there is something I would like to point out as an application developer, who extensively uses toolkits. A completely object oriented toolkit always provides a property based API, which means, to do something with an element inside it, we have to do the following steps.

• Create an object of that element
• Set required properties to that object to change its state like we do
• Call one of the methods to get the functionality from the object

It may look simpler to some new programmers since they play with pretty simple tasks most. When it gets a little bit complex, say if you are developing a complex application, you cannot spend that much time to do a simple task in between the actual coding. For example, if you are developing a big ERP system, you cannot always spend much time to show different kind of message boxes in between for different purposes. That will increase the number of lines of code in your application and you get messed up with the logic of the application as a whole.

One of the easy way to manage this is, to create a simple function which can take a number of parameters/arguments, call the required method and finally return a useful value to the developer. In case of a message box, it can take the message text, names of buttons to be shown and finally can return which button the user have clicked on. So, apparently we can tweak the three step process into a one step process, which is just a function call. But this has a scalability issue when the message boxes requires completely different kind of apparances in different occurrences - eventually we will keep on developing our custom function to handle all of the cases, which again causes problems. But, the developers life gets much more happier if the toolkit itself contains those kind of functions! Here comes the concept of Static Functions API. Most of the today’s toolkits has both of these APIs so that developers can use them appropriately according as the situation. A good example I’ve seen is : the Qt Message Box API itself. So that’s all, and I hope, when you look into documentations you will keep this post in mind to choose stuff a little more wisely.

//See you in the afterlife
//Subin Sebastian

Creating a useful application with Qt

Reading time : Less than 20 minutes

I would like to introduce you guys into another fruitful environment in application development. Apart from the mobile applications, we should think seriously about desktop application development also. So far, I have been using GTK+ and glade for creating simple applications. But it is for the first time I’m using Qt for doing the same. I feel farthermost advanced in creating useful applications. So, this time I’ll be posting something much more mature than a Hello World application. It would be a converter application, which will be capable of converting currencies and length among different units. So, lets begin with Qt Creator. Qt is a carefully designed application development framework. We will be get into an environment where we will get everything we would be expecting. Anyway, for a simple converter application, we don’t have to learn Qt very deeply. Lets begin with creating an empty project in Qt Creator.

Open Qt Creator -> File -> New File or Project -> Other Project -> Empty Qt Project and click Choose

Fill in the string Converter as project name and set some convenient place to hold your project, click Next and Finish! Now you have an empty project in your IDE. Now, we should add a main function to this project, remember every C++ program has a main() function which is the starting point for its execution. For that, right click on the project folder and select Add New… from the context menu. From the New File window, select C++ Source File and name it main.cpp. This file will be opened automatically as we have just added it to the project. If not, you can find the file under Sources virtual folder in the project directory. Add the following code to main.cpp and save.

#include<QtGui>
int main(int argc, char *argv[])    {
    QApplication app(argc, argv);
    return app.exec();
}

Theoretically, your first Qt application is ready to run. But even though you try to run it, you wont be seeing anything since you don’t have any widgets to be displayed. So, lets add a Main window to the project. From the New File window choose Qt/Qt Designer Form Class, and you will be greeted with something like in the below image. Select Main Window from it. Leave everything else default and press Next till the end and Finish. Now we can use Qt Designer to edit the GUI. For that, close the Qt Creator, browse through your project folder, find the file named mainwindow.ui and open it with Qt Designer. Now it is time to create a nice looking GUI. You can follow these two videos for doing this effectively.

• Creating UI with Qt Designer Part One
• Creating UI with Qt Designer Part Two

I would have created a screen cast but, sorry that the resources are limited here. At the end of the GUI making process I got a UI looks like the below one.

For the sake of simplicity I have added only three currencies for conversion - USD, INR and EUR. Now the GUI is ready to be used with the application. Lets code some login to the application. Close the Qt Designer and open the converter.pro file. In the Headers folder in Qt Creator, you can see a header file named mainwindow.h. Edit that file to look like the one below.

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include<iostream>
namespace Ui   {
    class MainWindow;
}
class MainWindow : public QMainWindow   {
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
private:
    float currency[3][3];
    float length[4][4];
    Ui::MainWindow *ui;
private slots:
    void calculateCurrency();
    void calculateLength();
    void resetAllCurrency();
    void resetAllLength();
    void clearFieldsCurrency();
    void clearFieldsLength();
    void quitApplication();
    void showAbout();
};
#endif // MAINWINDOW_H

See in Qt, signals and slots are something which provides a connection between a GUI widget and the program logic. Also, signals and slots are normal functions just like every other function in a C++ program. For example, if you have to call a function doSomething() when a button widget named YourButton is  pressed, you can connect them using the connect function available with Qt using the following method.

//connect( &sender, SIGNAL( signal() ), &reciever, SLOT( slot() ));
connect( &YourButton, SIGNAL( clicked() ), &parentWindow, SLOT( doSomething() );

For doing this, in the parentWindow class, the function doSomething() has to be declared and defined under private slots: and Q_OBJECT macro should be present in the class at the top. Similarly I’ve added all such slots which is used with our converter application to the MainWindow class. You can also connect GUI widget signals and slots without using the connect() function. This is done via the Qt Designer. For reducing number of lines of code, I’ve used that method to connect widgets and program logic.

For this, open up the mainwindow.ui in Qt Designer and change the mode via Edit -> Edit Signals/Slots or by pressing F4. Then click on each widget and drag to the ground (The main window). A window named Configure Connection will be popped up and you can associate widgets with corresponding slot names there. Once you have connected all required signals to corresponding slots, it is time for the debug release to make. Press Ctrl + R to run the application.

Its working! Now, the application is ready for deployment. One of the most attractive feature of Qt is that, it is cross platform. Means you can run the exact same code on Windows, Linux or even Mac. For doing this, in this case, I have just moved the project folder to a Macbook and and opened the project using Qt Creator on it and pressed Ctrl + R! You can download full source code I’ve developed so far from here. You can work on it to complete the project or can extend it the way you like.

//See you in the afterlife
//Subin Sebastian