1、建立目錄

在這開始之前，我們先建立一個 qtopia2_apps 目錄，用於專門存放我們自已編寫的 qtopia2.2.0 程式，  在 Linux 終端中鍵入以下命令建立該目錄：

[[email protected] ~]# mkdir -p /opt/qtopia2_apps 

然後在  qtopia2_apps 目錄下建立 hello 作為本示例的專案目錄，在終端上輸入如下命令：

[[email protected] ~]# cd /opt/qtopia2_apps 

[[email protected] ~]# mkdir hello

2、使用 designer 工具設計圖形介面

  2.1 主介面的設計

利用designer 工具來設計hello 程式的主介面，主介面將儲存成名為  main_form_base.ui 的 ui 檔案，輸入如下命令：

[[email protected] ~]# cd hello

[[email protected]~]#/opt/FriendlyARM/tiny4412/linux/x86-qtopia/qtopia-2.2.0-FriendlyARM/qt2/bin/designer main_form_base.ui 

在彈出的 New  Form 介面中，選擇“Widget”然後點選”OK“，我們將建立一個基於 QWidget 

  2.2 在窗體上放置控制元件

修改完視窗的屬性值後，接下來我們就要在視窗上放置控制元件了，往視窗上放置控制元件的方法是：在工具欄上點選要放置的控制元件，再在視窗空白處點選一下即可。

主要放置三個控制元件：一個文字標籤，兩個按鈕標籤，各控制元件屬性的設定如下圖所示。

2.3  為按鈕新增點選事件的處理

我們首先需要新建兩個 slot 函式，一個用於處理OK按鈕的點選事件，一個用於處理  Exit 按鈕的點選事件，新建 slot 

     1)點選”Edit”選單，選擇“Slots”，將彈出slot 編輯對話方塊。

     2)在上面的對話方塊中，點選New Slot按鈕，然後在 Slot 編輯框中輸入“exitButtonClicked()”。

     3）然後再點”New Slot“按鈕，並在 Slot 編輯框中輸入“okButtonClicked()”,  最後   點選 OK 儲存並退出該對話方塊。

     4）其次，將 slot 函式與按鈕的點選事件對應起來： 單擊工具欄上的 Connect Signal/Slots 圖示 ，然後參照下圖所示進行操作，在“Ok”按鈕上按下滑鼠左鍵不放然後拖動到視窗的空白處放開滑鼠，操作完成後將會彈出 Edit  Connects 對話方塊。

     5）在彈出的 Edit  Connects 對話方塊中，將 clicked()事件連線到 calcButtonClicked()  slot 函式，操作方法如下圖所示：

     6）下面用同樣的方法操作 Close 按鈕，最後可以得到完整的UI介面。

3、利用C++編寫程式碼

     現在開始為hello 編寫程式碼，需要建立三個原始碼檔案，一個是標頭檔案 main_form.h，一個是原始碼檔案 main_form.cpp，一個是 main.cpp。

 首先在終端輸入：  

   [[email protected] ~]# vi main.cpp

寫入如下程式碼：

   #include "main_form.h" 

   #include <qtopia/qpeapplication.h> 

   QTOPIA_ADD_APPLICATION("hello”,TMainForm) 

   QTOPIA_MAIN 

接著輸入：

   [[email protected] ~]# vi main_form.h 

在其中寫入如下程式碼：

#ifndef  __MAIN_FORM_H__

#define  __MAIN_FORM_H__ 

#include "main_form_base.h" 

#include <qsocketnotifier.h>

class TMainForm: public TMainFormBase

 { 

     Q_OBJECT 

public: 

     TMainForm(QWidget  *  parent  =  0,  const  char  *  name  =  0,  WFlags  f =  WType_TopLevel)  : 

TMainFormBase(parent,name,f) {} 

virtual ~TMainForm() {} 

public slots: 

     void okButtonClicked(); 

     void exitButtonClicked(); 

}; 

#endif 

然後用 vi 編輯器建立並開啟  main_form.cpp 檔案

[[email protected] ~]# vi main_form.cpp

寫入如下程式碼：

#include "main_form.h" 

#include <qlineedit.h> 

void TMainForm::exitButtonClicked() 

{ 

     close(); 

} 

void TMainForm::okButtonClicked() 

{ 

} 

最後，編寫專案檔案 hello.pro

[[email protected] ~]# vi hello.pro 

CONFIG += qtopiaapp 

CONFIG-= buildQuicklaunch 

HEADERS= main_form.h 

SOURCES= main_form.cpp main.cpp 

INTERFACES= main_form_base.ui 

TARGET= hello

4、在 PC 上編譯並執行示例

首先，編寫一個指令碼 buildhost.sh 來執行PC 版本的編譯工作

在終端輸入如下命令：

[[email protected] ~]#cd /opt/qtopia2_apps/hello

[[email protected] ~]# vi buildhost.sh

    在 vi 編輯器中輸入如下內容： 

#!/bin/sh 

source /opt/FriendlyARM/tiny4412/linux/x86-qtopia/qtopia-2.2.0-FriendlyARM/setQpeEnv 

qmake -o Makefile.host -spec qws/linux-generic-g++ *.pro 

make -f Makefile.host clean 

make -f Makefile.host 

執行以下命令可以實現編譯指令碼：
    [[email protected] ~]# chmod +x buildhost.sh

[[email protected] ~]# ./buildhost.sh 

編譯完成後，在 hello 下生成了hello 可執行檔案，輸入如下命令可以在模擬器上執行.（必須已經安裝了x86-qtopia）

# cd /opt/FriendlyARM/tiny4412/linux/x86-qtopia

# ./run& 

接著輸入如下命令：

cd /opt/qtopia2_apps/hello

    export  QTDIR=/opt/FriendlyARM/tiny4412/linux/x86-qtopia/qtopia-2.2.0-FriendlyARM

/qtopia/image/opt/Qtopia/

export  QPEDIR=/opt/FriendlyARM/tiny4412/linux/x86-qtopia/qtopia-2.2.0-FriendlyARM

/qtopia/image/opt/Qtopia/ 

    export  HOME=$QPEDIR/root/ 

export  LD_LIBRARY_PATH=$QPEDIR/lib:$LD_LIBARAY_PATH

最後執行： 

./hello

程式在 PC 上的執行結果如下所示： 

5、交叉編譯示例程式並在tiny4412上執行

   首先，編寫一個指令碼 buildarm.sh 來執行ARM 版本的編譯工作

在終端輸入如下命令：

[[email protected] ~]#cd /opt/qtopia2_apps/hello

[[email protected] ~]# vi buildarm.sh

    在 vi 編輯器中輸入如下內容： 

#!/bin/sh 

source /opt/FriendlyARM/tiny4412/linux/arm-qtopia/qtopia-2.2.0-FriendlyARM/setQpeEnv 

qmake -spec qws/linux-arm-g++ -o Makefile.target *.pro 

make -f Makefile.target clean 

make -f Makefile.target 

執行以下命令可以實現編譯指令碼：
    [[email protected] ~]# chmod +x buildarm.sh

[[email protected] ~]# ./buildarm.sh 

編譯完成後，在hello下生成了hello可執行檔案，將它拷貝到SD卡，然後將SD插到tiny4412開發板上，在串列埠終端上輸入以下命令將可執行檔案拷貝到開發板上的  /opt/Qtopia/bin/  目錄下： 

# cp /sdcard/hello /opt/Qtopia/bin/

先通過串列埠終端的命令列來執行，在串列埠終端上輸入以下命令：

# cp /bin/qtopia /bin/run_myhello 

# vi /bin/run_myhello

在 vi 編輯器中，改變下面一行的內容：

exec $QPEDIR/bin/qpe 

更改成： 

exec $QPEDIR/bin/hello

接著在終端輸入：

 # run_hello&

可以看到Arm上顯示如下內容：

6、在 Qtopia 上新增 hello 程式圖示

Fedore9 系統中找一個現成的圖示來作來 hello 的圖示，我使用 /usr/share/icons/hicolor/48x48/apps/  目錄下的 gnome.png  檔案作為 hello 的圖示，把它拷貝到我們的專案目錄並改名為 hello.png,  執行以下命令將該圖示複製到hello的專案資料夾裡來，在終端輸入如下命令： 

[[email protected] ~]# cd /usr/share/icons/hicolor/48x48/apps/ 

[[email protected] ~]# cp gnome-sudoku.png /opt/qtopia2_apps/hello/hello.png

接著寫入：

 # cd /opt/qtopia2_apps/hello/ 

 # vi hello.desktop

在 vi 中輸入以下內容並儲存： 

[Translation] 

File=QtopiaSettings 

Context=hello 

Comment[Desktop  Entry/Name]=Use  soft  hyphen  (char  U00AD)  to  indicate 

hyphenation 

[Desktop Entry] 

Exec=hello 

Icon=hello

Type=Application 

Name[]=My Hello 

CanFastload=0 

   最後把 hello.png 和hello.desktop  這兩個檔案放入SD卡，然後將SD卡插到 tiny4412開發板上，在串列埠終端上執下以下命令，把這兩個檔案拷貝到Qtopia目錄的相應位置：

# cp /sdcard/hello.desktop /opt/Qtopia/apps/Applications/

# cp /sdcard/hello.png /opt/Qtopia/pics 

完成後重啟開發板，應該可以看到應用程式圖示了

7、附件（主要含有原始碼等）。經過測試已經完全通過。