Hello World with GUI application for FrienndlyARM Tutorial

Here are the steps of creating a simple "Hello world" GUI application for FriendlyARM board.   You should have development tools ARM-Linux GCC 4.3.2 and ARM-Qtopia 2.2.0 already installed.  If you don't have them yet you can download them from here: http://www.friendlyarm.net/downloads
My PC is working under Ubuntu 8.04. and the path of Qtopia installation is /usr/local.  I know that my environment is not quite correctly set.That's why I do some steps as root and source some environment variables from file setQpeEnv. But it works.

Here are the steps:
1. With Qt Designer create the main form.

Remark:

Qt Designer comes with the "ARM-Qtopia 2.2.0". It's executable is:

/usr/local/arm-qtopia/qtopia-2.2.0-FriendlyARM/qt2/bin/designer

The screenshot above is from this tool.

Do not try newer versions of Qt Creator. They are not compatible.

From File-New select "Dialog" template.  Change the "name" property to frmMainWindow. This will be the name of the form class.  Save it as MainWindow.ui. This is an XML file. You can view and edit it's contents with text editor.  For example if you want to add tabs to TabWidget this is the only option.

2. Create a script file "build" for building the application with following content:

#!/bin/bash
source /usr/local/arm-qtopia/qtopia-2.2.0-FriendlyARM/setQpeEnv 
qmake -spec /usr/local/arm-qtopia/qtopia-2.2.0-FriendlyARM/qtopia/mkspecs/qws/linux-arm-g++ -o Makefile *.pro 
make clean
make

3.Create a script file "formuic" for compiling the .ui form file with the following content

echo MAIN FORM
echo HEADER
/usr/local/arm-qtopia/qtopia-2.2.0-FriendlyARM/qt2/bin/uic -o MainWindow.h MainWindow.ui
echo CLASS
/usr/local/arm-qtopia/qtopia-2.2.0-FriendlyARM/qt2/bin/uic -i MainWindow.h -o  MainWindow.cpp MainWindow.ui 

Open a terminal window and go to the project folder. Run the script:
    #./formuic
The uic tool (user interface compiler) takes the .ui file. 
When MainWindow.ui is compiled two source files are created - a header and cpp. They content the form class "frmMainWindow".
 
4. Create two files main.cpp , MainWindowImp.h and MainWindowImp.cpp with the following contents:
main.cpp

#include <qtopia/qpeapplication.h>
#include "MainWindowImp.h"

QTOPIA_ADD_APPLICATION("stivlib",frmMainWindowImplementation)
QTOPIA_MAIN

QTOPIA_ADD_APPLICATION macro takes two parameters. The first is "stivlib"  - the name of the project.  The second frmMainWindowImplementation is the name of the class from MainWindowImp.h

MainWindowImp.h
In this file a new class frmMainWindowImplementation is defined which inherits the form class frmMainWindow.  This is done because each time you make changes to you form with Qt Designer and the .ui file is compiled any changes made in MainWindow.h and MainWindow.cpp will be lost. All the functional implementations like new variables definitions and new methods should be done in this new class. 

/****************************************************************************
** Created: Sun Jul 11 18:05:02 2010
**      by:  Svilen Stavrev
** Implementation Class for the main form
****************************************************************************/
#ifndef FRMMAINWINDOWIMP_H
#define FRMMAINWINDOWIMP_H

#include "MainWindow.h"

class frmMainWindowImplementation : public frmMainWindow
{ 
    Q_OBJECT

public:
    frmMainWindowImplementation( QWidget* parent = 0, const char* name = 0, bool modal = FALSE, WFlags fl = 0 ) 
    : frmMainWindow(parent,name,modal,fl)
    {
        //Constructor
    }
};
#endif // FRMMAINWINDOW_H

 

MainWindowImp.cpp

/************************************************
** Created: Sun Jul 11 18:05:02 2010
**      by:  Svilen Stavrev
** Implementation Class for the main form
************************************************/
#include "MainWindowImp.h"

5. Generate the .pro (project) file using the qmake tool:

    $su
    #source  /usr/local/arm-qtopia/qtopia-2.2.0-FriendlyARM/setQpeEnv
    #qmake -project

A project file stivlib.pro has been created.
Open it with the text editor and add these lines:

TARGET=stivlib         <-- This is the exact name of the target executable file. No extension .bin will be added
CONFIG += qtopiaapp
CONFIG -= buildQuicklaunch

5. Build the application

    #./build

Voila! The binary file stivlib is now in the project folder. 
On my next post I'll show how to upload it to the FriendlyARM board and how to create a desktop launcher.