4.1 开发第一个qtopia2.2.0程序

4.1 开发第一个qtopia2.2.0程序
4.1.1 本示例的设计目的
本章节将介绍如何创建一个简单的Qtopia2.2.0程序，并将其集成到Qtopia2.2.0中，我们将以
一个简单的计算器作为例子，演示开发一个Qtopia2.2.0应用程序的完整步骤，包括使用designer设计图形程序界面、交叉编译arm版本的程序等等，为了简单，本示例所编写的计算器只提供加法功能，功能界面如下所示：
下面的章节将一步步演示如何构造这个程序，在这开始之前，我们先创建一个qtopia2_apps目录，用于专门存放我们自已编写的qtopia2.2.0程序， 在Linux终端中键入以下命令创建该目录：
# mkdir -p /opt/qtopia2_apps
然后在 qtopia2_apps目录下创建mycalc作为本示例的项目目录，在终端上输入如下命令：
# cd /opt/qtopia2_apps
# mkdir mycalc
第 - 34 - 页
4.1.2 使用designer 工具设计图形界面
Qt/Qtopia都带有designer工具，可以设计所见即所得的图形界面，我们现在就使用designer 工具来设计mycalc程序的主界面，主界面将保存成名为main_form_base.ui 的ui文件1，输入如下命令启动designer工具，并以ui文件名作为参数：
# cd mycalc
# /opt/mini6410/qtopia-free-2.2.0/qt2/bin/designer main_form_base.ui
在弹出的New Form界面中，选择“Widget”然后点击”OK“，我们将创建一个基于QWidget的窗体而不是QDialog或其它：
这时，将会显示窗口的编辑画面，我们需要修改窗口的大小，使得3.5寸的屏幕也能完整显示我们的程序，并且需要修改窗口标题， 请参考下图的提示修改窗口的属性值：
1 Designer工具所生成的.ui文件在编译时会被uic编译器解析，并生成C++代码。
第 - 35 - 页
4.1.2.1 在窗体上放置控件
修改完窗口的属性值后，接下来我们就要在窗口上放置控件了，往窗口上放置控件的方法是：在工具栏上点击要放置的控件，再在窗口空白处点击一下即可。
根据我们最初的设计思路，我们需要在窗口上放置以下控件：
1) 二个Button(按钮): 一个是“=”，用于点击时计算结果，一个是“Close”，用于退出程序。
2) 三个Line Edit(单行文本框): 两个用于输入要执行加法运算的数字，另一个用于显示计算结果。
3) 一个Label（文本标签)：用于显示加号。
请参考下图放置上面列出的控件，控件的工具栏图标在下图中我已经以红色方框标记出来了：
第 - 36 - 页
放置完控件之后，我们将Label文本标签上的文字改为“+”，修改方法是双击Label文本标签，然后在弹出的编辑框上输入“+”即可; 用同样的方法修改两个按钮上的文字，将两个按钮上的文字一个修改成“=”, 一个修改成”Close”。
修改完控件上文字之后，按照上图的位置摆放控件，在摆放之前，需要适当地调整控件的大小，调整控件大小的方法是，先单击要调整的控件，然后在控件的边框上的小黑框上单击拖动即可。
4.1.2.2 修改控件属性
我们还需要设置一些控件的属性，主要是修改文本框的实例名称，这样在代码里面可以方便引用它们，修改方法是点击左边的文本框控件，在右边的属性窗口进行修改，请按下图的指示修改三个文本编辑控件的属性，三个文本框的实例名称分别被修改成m_x, m_y和m_result：
第 - 37 - 页
第 - 38 - 页
4.1.2.3 为按钮添加点击事件的处理
最后还要给按钮添加点击事件的处理，我们首先需要新建两个slot函数，一个用于处理“=”按钮的点击事件，一个用于处理Close按钮的点击事件，新建slot的步骤如下:
1) 点击”Edit”菜单，选择“Slots”，将弹出如下所示的slot编辑对话框:
第 - 39 - 页
2) 在上面的对话框中，点击”New Slot“按钮，然后在Slot编辑框中输入“calcButtonClicked()”，如下图所示：
3) 然后再点”New Slot“按钮，并在Slot编辑框中输入“closeButtonClicked()”, 如下图所示，最后点击OK保存并退出该对话框：
至此，slot添加完毕，现在将slot函数与按钮的点击事件对应起来：
4) 单击工具栏上的Connect Signal/Slots图标，然后参照下图所示进行操作，在“=”按钮上按下鼠标左键不放然后拖动到窗口的空白处放开鼠标，操作完成后将会弹出Edit Connects对话框：
第 - 40 - 页
5) 在弹出的Edit Connects对话框中，将clicked()事件连接到calcButtonClicked() slot函数，操作方法如下图所示：
6) 下面用同样的方法操作Close按钮，参照下图所示进行操作：
第 - 41 - 页
7) 最后，如下图所示将Close按钮的clicked()事件连接到closeButtonClicked() slot函数：
至此，界面设计完毕，可以进入写代码环节了。
第 - 42 - 页
4.1.3 编写代码
界面设计完，现在开始为mycalc编写代码，我们需要创建三个源代码文件，一个是头文件main_form.h，一个是源代码文件main_form.cpp，一个是main.cpp，分别在以下章节中创建这些文件：
4.1.3.1 编写程序入口main.cpp
首先用vi编辑器创建并打开main.cpp文件：
# vi main.cpp
在vi编辑器中输入如下源代码内容：
#include "main_form.h" #include <qtopia/qpeapplication.h> QTOPIA_ADD_APPLICATION("mycalc”,TMainForm) QTOPIA_MAIN
main.cpp只有4行源代码，它的实现很简单，宏展开后会是一个main函数，然后创建QPEApplication对象和 TMainForm主窗口对象，最后显示主窗口并执行QApplication::exec()进入事件循环。
main.cpp所用到的头文件main_form.h和TMainForm类到目前为止还不存在，我们接下来就要新建它们。
4.1.3.2 编写主窗口头文件main_form.h
接下来用vi编辑器创建并打开main_form.h文件：
# vi main_form.h
在vi编辑器中输入如下源代码内容：
#if !defined (__MAIN_FORM_H__) # define __MAIN_FORM_H__ #include "main_form_base.h" #include <qsocketnotifier.h>
第 - 43 - 页
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 calcButtonClicked(); void closeButtonClicked(); }; #endif
main_form.h文件中包含了main_form_base.h 头文件，这个main_form_base.h 头文件不需要用户编写，编译时由uic编译器根据main_form_base.ui 文件自动生成的。
在自动生成的main_form_base.h 头文件，是Qt自带的uic编译器由main_form_base.ui转换成的C++程序代码，这部分代码实现了界面的基类TMainFormBase, 并定义了相关的slot函数，因此，要使用我们自已用designer设计的程序界面，我们只需将主窗口TMainForm从TMainFormBase类继承即可，由于我们接下来要编写按钮功能的代码，所以我们还需要重载calcButtonClicked() 和closeButtonClicked() 函数。
4.1.3.3 编写主窗口源文件main_form.cpp
接下来用vi编辑器创建并打开main_form.cpp文件：
# vi main_form.cpp
在vi编辑器中输入如下源代码内容：
#include "main_form.h" #include <qlineedit.h> void TMainForm::calcButtonClicked() { m_result->setText( "" ); if (m_x->text().isEmpty() || m_y->text().isEmpty()) { return ; }
第 - 44 - 页
bool ok = false; int x = m_x->text().toInt(&ok); if (!ok) { m_x->setText(""); return ; }ok = false; int y = m_y->text().toInt(&ok); if (!ok) { m_y->setText(""); return ; }m_result->setText( QString::number( x + y ) ); }void TMainForm::closeButtonClicked() { close(); }
上述源代码主要实现了calcButtonClicked() 和closeButtonClicked() 这两个 slot 函数，closeButtonClicked比较简单，直接调用基类的close() 函数关闭窗口即可退出程序，而calcButtonClicked函数则取m_x和m_y这两个文本框的值，然后相加将结果放到m_result 文本框中，其间进行了一些容错处理，比如如果用户输入的不是数字，则拒绝计算结果并清空该文本框。
4.1.3.4 编写项目文件mycalc.pro
源代码写完了，在编译之前，还得再写一个mycalc.pro项目文件。
接下来用vi编辑器创建并打开mycalc.pro文件：
# vi mycalc.pro
在vi编辑器中输入如下内容：
CONFIG += qtopiaapp
第 - 45 - 页
CONFIG -= buildQuicklaunch HEADERS = main_form.h SOURCES = main_form.cpp main.cpp INTERFACES = main_form_base.ui TARGET = mycalc
上面的项目文件中，CONFIG+=qtopiaapp表示要编译的是一个Qtopia 程序，HEADERS和SOURCES列出了mycalc的源代码和头文件清单，而TARGET则指定最后生成的可执行文件名为mycalc, CONFIG-=buildQuicklaunch的意思是需要编译成一个独立的可执行程序，而不是应用程序插件。
4.1.4 在PC上编译并运行示例
请参考5.1.1章节在项目目录创建一个PC版本的编译脚本buildhost.sh，然后执行该脚本编译mycalc :
# ./buildhost.sh
编译完成后，在mycalc下生成了mycalc可执行文件，接下来就让我们把它在模拟器上运行起来(在这之前先确认你已经按本文档中的方法编译了Qtopia2.2.0的PC版本)：
# cd /opt/qtopia-free-2.2.0/ # ./run&
等 Qtopia运行起来后，并进入系统后，输入如下命令运行mycalc：
# cd /opt/mini6410/qtopia2_apps/mycalc # export QTDIR=/opt/qtopia-free-2.2.0/qtopia/image/opt/Qtopia/ # export QPEDIR=/opt/qtopia-free-2.2.0/qtopia/image/opt/Qtopia/ # export HOME=$QPEDIR/root/ # export LD_LIBRARY_PATH=$QPEDIR/lib:$LD_LIBARAY_PATH # ./mycalc
程序在PC上的运行结果如下所示：
第 - 46 - 页
4.1.5 交叉编译示例程序并在mini6410上运行
请参考5.1.2 章节在项目目录创建一个ARM版本的编译脚本buildarm.sh，然后执行该脚本编译mycalc :
# ./buildarm.sh
编译完成后，在mycalc下生成了mycalc可执行文件，将它拷贝到SD卡，然后将SD插到mini6410开发板上，在串口终端上输入以下命令将可执行文件拷贝到开发板上的/opt/Qtopia/bin/ 目录下：
@# cp /sdcard/mycalc /opt/Qtopia/bin/
@# chmod +x /opt/Qtopia/bin/mycalc
由于我们还没有为mycalc添加程序图标，因此还不能通过触摸屏来运行我们的程序，我会在下一个章节为mycalc添加程序图标，本章节先通过串口终端的命令行来运行，在串口终端上输入以下命令：
@# cp /bin/run_my_qtopia /bin/run_mycalc @# vi /bin/run_mycalc
在vi编辑器中，将最后一行内容：
第 - 47 - 页
exec $QPEDIR/bin/qpe
更改成：
exec $QPEDIR/bin/mycalc
再输入以下命令运行mycalc:
@# chmod +x /bin/run_mycalc @# run_mycalc&
在mini6410上的运行效果如下图所示：
4.1.6 在Qtopia上添加mycalc程序图标
要在Qtopia上增加图标，需要编写一个desktop文件，还需要设计一个图标作为程序的图标，图标的格式需要是png格式的图像文件，由于设计图标远不是我的强项， 这里我就偷一下懒，在
第 - 48 - 页
Fedore9系统中找一个现成的图标来作来mycalc的图标，我使用/usr/share/icons/hicolor/48x48/apps/ 目录下的gnome-sudoku.png 文件作为mycalc的图标，把它拷贝到我们的项目目录并改名为mycalc.png, 执行以下命令将该图标复制到mycalc的项目文件夹里来：
# cd /usr/share/icons/hicolor/48x48/apps/ # cp gnome-sudoku.png /opt/mini6410/qtopia2_apps/mycalc/mycalc.png
接着我们编写一个desktop文件：
# cd /opt/mini6410/qtopia2_apps/mycalc/ # vi mycalc.desktop
在vi中输入以下内容并保存：
[Translation] File=QtopiaSettings Context=mycalc Comment[Desktop Entry/Name]=Use soft hyphen (char U00AD) to indicate hyphenation [Desktop Entry] Exec=mycalc Icon=mycalc Type=Application Name[]=My Calculator CanFastload=0
最后把mycalc.png 和mycalc.desktop 这两个文件放入SD卡，然后将SD 卡插到mini6410开发板上，在串口终端上执下以下命令，把这两个文件拷贝到Qtopia目录的相应位置：
@# cp /sdcard/mycalc.desktop /opt/Qtopia/apps/Applications/ @# cp /sdcard/mycalc.png /opt/Qtopia/pics/
完成后重启开发板，应该可以看到应用程序图标了，就是下图中红色方框框住的图标：
第 - 49 - 页

以后就可以通过点击图标启动程序了，至此，mycalc程序就算开发完成了。

"D:\ARM11\Tiny6410-A\开发文档和教程\01 Qt4和Qtopia编程开发指南\Mini6410 Qt4和Qtopia编程开发指南-20110112.pdf"P33~P49