<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0055)http://www.caldera.com/skunkware/kde/kdevelop_tutorial/ -->
<HTML><HEAD><TITLE>kdev_abs_tut01</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META content=0000-Admin(0000) name=Author>
<META content="MSHTML 5.00.2919.6307" name=GENERATOR></HEAD>
<BODY aLink=#ff0000 bgColor=#ffffff link=#0000ef text=#000000 vLink=#51188e>
<CENTER>
<H1>Kdevelop入门教程</H1></CENTER>
<CENTER>Petr Sorfa</CENTER>
<CENTER>SCO</CENTER>
<CENTER>February 2000</CENTER> <BR>
<H2>为什么使用本教程</H2>本教程是面向Kdevelop的初次用户，一步一步地介绍如何
利用Kdevelop开发他们的第一个应用程序。
<H2>教程内容</H2>本教程的目标是建立一个简单的程序，在上面显示"Hello World"，而且还有一个可以让程序退出的按钮。 
<P>[图一: 程序的画面] <BR><IMG alt="Final Application"
height=328 src="kdev_abs_tut01.files/kdev_application_final.gif" width=408>
<H2>具体步骤</H2>
<H3>启动</H3>
<UL>
<LI>如果你的Kdevelop安装正确的话，只要在命令行简单地键入Kdevelop就可以启动它。
然而，<B>重要的一点</B>是你的环境参数PATH必须包含/usr/local/bin和/usr/local/kde/bin，以便系统搜索。
<LI>注意，第一次运行Kdevelop时要定义一些运行参数，可能需要手动配置。</LI></UL>[图二: Kdevelop的启动界面] <BR><IMG alt="Kdevelop Splash Screen" height=295
src="kdev_abs_tut01.files/kdev_splash.jpg" width=398>
<H3>创建一个新的项目工程</H3>
<UL>
<LI>你可以通过在菜单栏中选择Project->New来建立一个新的工程项目。如图三的对话框就会显示出来。
因为我们要做的只是一个很简单的小程序，所以选择"KDE->Mini"，再选择"Next>>". </LI></UL>[图三: 创建新的工程项目] <BR><IMG
alt="New Application" height=558
src="kdev_abs_tut01.files/kdev_new_prj_applications.jpg" width=523>
<UL>
<LI>现在填写一些基本信息(见图四)。将项目取名为FirstHello。除了"generate sources and headers"
项之外，去掉其他所有可选项前面的勾，再选择"Next >>". </LI></UL>[图四：工程项目生成设置]
<BR><IMG alt="Project Generate Settings" height=558
src="kdev_abs_tut01.files/kdev_new_prj_generate_settings.jpg" width=523>
<BR>
<UL>
<LI>忽略版本控制这一步骤(见图五)，因为这是为大的软件项目而设计的，再选择"Next >>" </LI></UL>[图五:工程项目版本控制] <BR><IMG alt="Project Version Control" height=558
src="kdev_abs_tut01.files/kdev_new_prj_version_control.jpg" width=523 NOSAVE>
<BR>
<UL>
<LI>随后的两步也可以忽略。(见图六和图七)这两步是让开发者在生成的头文件和源代码
文件的开头插入相关的开发信息和许可协议的。所以按两次"Next >>"，来到创建新项目的最后一步.
</LI></UL>[图六:项目头文件模版] <BR><IMG alt="Project Header Template" height=558
src="kdev_abs_tut01.files/kdev_new_prj_header_template.jpg" width=523>
<P>[图七:项目源代码模版] <BR><IMG alt="Project Code Template"
height=558 src="kdev_abs_tut01.files/kdev_new_prj_code_template.jpg" width=523
NOSAVE> <BR>
<UL>
<LI>创建项目的最后一步是产生项目的整体结构(见图八)，包括源代码、配置文件和make文件。
再按"Create"按钮就可以创建项目文件了。这当中如果产生了错误，要认真研究并解决。
如果提示产生了<B>"configure: error: Qt-1.4 (libraries) not found.
Please check your installation! "</B>的错误，不要担心，我们会在下一步解决这个问题。</LI></UL>[图八:创建工程项目] <BR><IMG
alt="Project Creation" height=558
src="kdev_abs_tut01.files/kdev_new_prj_processes.jpg" width=523 NOSAVE>
<BR>
<H3>配置工程项目</H3>
<UL>
<LI>这一步只有在创建工程时，提示产生<B>"configure: error:
Qt-1.4 (libraries) not found. Please check your installation! "</B>的错误时才是必需的，没有这个错误提示的话就直接到<B><A
href="http://www.caldera.com/skunkware/kde/kdevelop_tutorial/#A Quick Overview">"快速浏览"</A></B>
<LI>这个错误的产生是因为你的系统中同时存在着X11R5和X11R6.1图形系统，打开一个xterm终端窗口，按照以下操作解决问题：
<UL>
<LI>进入到刚创建的工程项目的目录，一般是<B>"cd /home/user/firsthello"</B>。
注意目录的名字改成了小写.
<LI>用你喜欢的字处理器编辑文件"<B>configure"</B>，比如说用<B>"vi configure"</B>.
<LI>去除文件中所有包含引用X11R5的行，再保存文件。</LI></UL>
<LI>回到Kdevelop并选择Build->Configure。一个对话框(图九)出现，键入"i586-sco-svr4"
再选择"OK" </LI></UL>[图九：参数配置] <BR><IMG alt="Configure Arguments" height=116
src="kdev_abs_tut01.files/kdev_configure_arguments.jpg" width=344 NOSAVE>
<BR>
<UL>
<LI>如果以上操作还不起作用，那就需要更多的、超出本教程范围的帮助了！</LI></UL>
<H3><A name="A Quick Overview"></A>快速浏览</H3>
<UL>
<LI>Kdevelop界面由以下几部分构成
<UL>
<LI>类和源代码文件浏览器
<LI>上下文感知的编辑器
<LI>显示消息和错误的状态窗口
<LI>对话框编辑器
<LI>集成的调试器(现在使用的是gdb)
<LI>其他工具，比如说图标编辑器(Kiconedit)，图形工具(Kpaint)
</LI></UL></LI></UL>[图十:KDevelop一瞥] <BR><IMG alt="Kdevelop First Look"
height=535 src="kdev_abs_tut01.files/kdev_first_look.gif" width=807 NOSAVE>
<H3>创建对话框</H3>
<UL>
<LI>现在我们来创建程序的可视部件
<LI>鼠标单击 <IMG align=bottom alt="Dialog Editor Icon" height=27
src="kdev_abs_tut01.files/kdev_icon_dialog_editor.gif" width=30 NOSAVE>
或在菜单中选择View->Dialog Editor以启动对话框编辑器。
<LI>鼠标右击Dialogs栏中的FirstHello并选择New Dialog
<LI>在新出现的New Dialog对话框中选择"Qt/KDE Dialog (*.kdevdlg)"并将新的对话框命名为widgetMain.kdevdlg (图十一)。再选择Ok以创建对话框。
</LI></UL>[图十一:创建主要可视部件] <BR><IMG alt="New Dialog dialog"
height=410 src="kdev_abs_tut01.files/kdev_new_dialog.gif" width=520 NOSAVE>
<BR>
<UL>
<LI>新的对话框的创建就准备就绪了，对话框编辑器的界面参见(图十二) </LI></UL>[图十二:对话框编辑器] <BR><IMG
alt="New Dialog Editor" height=601
src="kdev_abs_tut01.files/kdev_new_dialog_edit.gif" width=861 NOSAVE> <BR>
<UL>
<LI>现在单击Widgets选项以显示所有可供用来创建对话框的部件(图十三) </LI></UL>[图十三: Widgets选项] <BR><IMG
alt="Widgets Tab" height=356 src="kdev_abs_tut01.files/kdev_widgets_tab.gif"
width=216> <BR>
<UL>
<LI>单击标签部件 <IMG align=bottom alt="Label Widget" height=35
src="kdev_abs_tut01.files/kdev_label_widget.gif" width=34 NOSAVE>以在对话框上加入一个标签部件
<LI>选择部件编辑器中的标签(图十四) </LI></UL>[图十四:选择标签部件] <BR><IMG alt="Select Label Widget" height=354
src="kdev_abs_tut01.files/kdev_select_label_widget.gif" width=441> <BR>
<UL>
<LI>在Widget Properties中选择General->Text并键入"Hello World"
以代替缺省的标签显示文字"label" (图十五)。注意这个标签部件的名字是"QLabel_1" </LI></UL>[图十五:输入Hello World] <BR><IMG
alt="Type Hello World" height=366
src="kdev_abs_tut01.files/kdev_type_hello_world.gif" width=196 NOSAVE>
<BR>
<UL>
<LI>单击Widget Properties中的Appearance->Font。在随后弹出的字体对话框(图十六)中选择一种较大的字体(48或更大)并选择加粗的形式，再选择"Ok"。 </LI></UL>[ Fig 16: Font Dialog] <BR><IMG alt="Font Dialog"
height=373 src="kdev_abs_tut01.files/kdev_font_dialog.gif" width=522 NOSAVE>
<BR>
<UL>
<LI>改变标签部件的大小和位置，使得它大致在编辑器的中央并让所有的文字可见(图十七) </LI></UL>
[图十七:改变标签部件的大小和位置] <BR><IMG alt="Resized and Moved Label Widget"
height=352 src="kdev_abs_tut01.files/kdev_label_resized_moved.gif" width=431>
<BR>
<UL>
<LI>再创建一个按钮部件。单击Widget Tab中的 <IMG align=bottom
alt="Button Widget" height=31
src="kdev_abs_tut01.files/kdev_button_widget.gif" width=36 NOSAVE>
<LI>将部件编辑器中的按钮部件移到"Hello World"标签部件下面。
<LI>在Widget Properties中选择General->Text并输入"Quit"，按钮的文字显示就变成了"Quit"。
<LI>注意按钮部件的名字是"QButton_1"
<LI>在Widget Properties中单击Appearance->Font并在字体选择对话框中选择字体大小为14并加粗的字体。
<LI>部件编辑器现在成了(图十九) </LI></UL>[图十九:标签和按钮] <BR><IMG alt="Label and Button Widgets" height=357
src="kdev_abs_tut01.files/kdev_label_button_widgets.gif" width=434 NOSAVE>
<BR>
<UL>
<LI>虽然现在已经创建好了窗口部件，但还没有编写代码，选择
Build->Generate Sources or <IMG align=bottom
alt="Generate Sources" height=30
src="kdev_abs_tut01.files/kdev_icon_generate_sources.gif" width=30 NOSAVE>.
，弹出Generate Dialog对话框。
<LI>选择Dialog Class中的QWidget,因为我们现在要创建的就是widget (主程序的
widget已经由Kdevelop为我们自动创建)
<LI>仍然在Generate Dialog对话框中, 输入"widgetMain"作为类的名字，头文件
、C++源代码和数据文件的名字也会相应地自动改变。(图二十) </LI></UL>[图二十: Generate Dialog对话框] <BR><IMG
alt="Generate Dialog" height=478
src="kdev_abs_tut01.files/kdev_generate_dialog.gif" width=558 NOSAVE> <BR>
<UL>
<LI>选择Ok以创建各部件的源代码。
<LI>本程序的图形界面也相应地产生! </LI></UL>
<H3>评装组合</H3>
<UL>
<LI>选择 <IMG alt="Edit Mode" height=27
src="kdev_abs_tut01.files/kdev_icon_editor_dialog.gif" width=26 NOSAVE>以退出对话框编辑器。
<LI>单击LFV项以显示整个软件的文件组成树，这时可以看到构成整个程序的所有文件。
<LI>选择 <IMG align=bottom alt=Make height=27
src="kdev_abs_tut01.files/kdev_icon_make.gif" width=26 NOSAVE>, 或按F8，或选择Build->Make以编译程序。
<LI>如果没有错误产生，程序就成功了！如果有错误产生就要寻求帮助了。
<LI>选择 <IMG align=bottom alt=Run height=25
src="kdev_abs_tut01.files/kdev_icon_run.gif" width=25 NOSAVE>, 或按F9，或选择
Build->Execute以运行程序(图二十一) </LI></UL>[图二十一:程序的第一次运行] <BR><IMG alt="Incomplete Application" height=335
src="kdev_abs_tut01.files/kdev_application_empty.gif" width=520 NOSAVE>
<BR>
<UL>
<LI>慢着！怎么Quit按钮和Hello World标签没有出现呢？我们还要将这些部件的代码集成到程序中去。
<LI>单击CV项，用鼠标右击FirstHello类，再选择"Add member function"
<LI>弹出Add class member对话框后，输入<B>"void"</B>作为类成员函数的返回类型。
<LI>至于函数的声明，输入<B>"addWidgets (KApplication *a)"</B>在选择Ok，这将为FirstHello类产生addWidgets成员函数的代码。
<LI>新创建的成员函数FirstHello::addWidget (KApplication *a)的编辑窗口将会出现。
<LI>给widgetMain的定义增加"#include <widgetmain.h>"。
<LI>增加以下代码 :
</LI></UL><TT>#include "firsthello.h"</TT> <BR><TT>#include "widgetmain.h"</TT>
<P><TT>FirstHello::FirstHello(QWidget *parent, const char *name) :
QWidget(parent, name)</TT> <BR><TT>{</TT> <BR><TT>}</TT>
<P><TT>FirstHello::~FirstHello()</TT> <BR><TT>{</TT> <BR><TT>}</TT>
<BR><TT>/** */</TT> <BR><TT>void FirstHello::addWidgets (KApplication
*a){</TT> <BR><TT> widgetMain *new_widgets = new widgetMain
(this, "Widgets");</TT>
<P><TT> new_widgets->setupQuit (a);</TT> <BR><TT>}</TT>
<BR>
<UL>
<LI>以上代码创建widgetMain类，并创建标签和按钮部件，接下来创建setupQuit成员函数。
<LI>现在在CV项中鼠标右击widgetMain并选择"Add member function"。
<LI>在Add class member对话框中输入<B>"void"</B>作为函数类型，输入
<B>"setupQuit (KApplication *a)"</B>作为函数的声明。
<LI>单击Ok以产生setupQuit成员函数的代码。
<LI>在setupQuit函数中加入这样一行代码：
</LI></UL><TT>void widgetMain::setupQuit (KApplication *a){</TT>
<BR><TT> QObject::connect(QPushButton_1, SIGNAL(clicked()), a,
SLOT(quit()) );</TT> <BR><TT>}</TT> <BR>
<UL>
<LI>代码QObject::connect建立一个从当quit按钮(QPushButton_1)被点击时发出的信号，它能使得
程序正确地退出。
<LI>再点击LFV项并在FirstHello->Sources下面点击main.cpp。
<LI>在main函数里面加入以下两行代码：
like: </LI></UL><TT>int main(int argc, char *argv[])</TT> <BR><TT>{</TT>
<BR><TT> KApplication a(argc, argv, "firsthello");</TT>
<P><TT> FirstHello *firsthello = new FirstHello();</TT> <BR><TT>
a.setMainWidget(firsthello);</TT> <BR><TT> firsthello->resize(400,300);
// New line 1</TT> <BR><TT> firsthello->addWidgets(&a); //
New line 2</TT> <BR><TT> firsthello->show();</TT>
<P><TT> return a.exec();</TT> <BR><TT>}</TT>
<UL>
<LI>第一行代码改变FirstHello窗口的大小，使之和按钮及标签的大小相符合。
<LI>第二行代码将按钮和标签部件加入到FirstHello程序当中去。
<LI>再选择 <IMG align=bottom alt=Make height=27
src="kdev_abs_tut01.files/kdev_icon_make.gif" width=26 NOSAVE>
<LI>编译将会失败，错误报告将会出现在文件widgetmain.h中。
<LI>在消息窗口中单击这一行: </LI></UL><TT>"widgetmain.h:39:
'KApplication' was not declared in this scope"</TT>
<UL>
<LI>编辑器中将会显示引起编译出错的那个文件。
<LI>问题出在KApplication没有定义，在widgetmain.h中加入一行"#include <kapp.h>"就可以了。
<LI>注意在注释之间不要输入任何内容:
</LI></UL><TT>//Generated area. DO NOT EDIT!!!(begin)</TT>
<P><TT>.. code ..</TT>
<P><TT>//Generated area. DO NOT EDIT!!!(end)</TT> <BR>
<UL>
<LI>因为这部分内容是由Kdevelop自动更新的，任何输入在这里的内容都会被改变和消除。
<LI>现在选择 <IMG align=bottom alt=Make height=27
src="kdev_abs_tut01.files/kdev_icon_make.gif" width=26 NOSAVE>以进行无错误的编译。
如果还有错误出现，那就要在本教程的续集中解决了。
<LI>一旦成功编译，单击 <IMG align=bottom alt=Run height=25
src="kdev_abs_tut01.files/kdev_icon_run.gif" width=25>来运行程序(图二十二)。 </LI></UL>
[图二十二:程序的运行结果] <BR><IMG
alt="Final Application" height=328
src="kdev_abs_tut01.files/kdev_application_final.gif" width=408 NOSAVE>
<H2>更多的提示</H2>
<UL>
<LI>作为附加的部分，我再多说一点提示，你可以选择Tools->IconEdit以调出图标编辑器。
<LI>创建一个新的32x32图标(图二十三)，并将它保存在firsthello/firsthello/目录下，
命名为artpic.xpm </LI></UL>[图二十三:图标编辑器]
<BR><IMG alt="Icon Editor" height=561
src="kdev_abs_tut01.files/kdev_icon_editor.gif" width=558 NOSAVE>
<UL>
<LI>现在选择 <IMG alt="Dialog Editor Icon" height=27
src="kdev_abs_tut01.files/kdev_icon_dialog_editor.gif" width=30>以调出对话框编辑器。
<LI>在Widget Editor选择"Hello World"标签，并在Widget Properties选择Appearance->BgPixmap
并设置背景图片为artpic.xpm，现在标签部件的背景变成了这个图标的矩阵。
<LI>现在选择 <IMG alt="Generate Sources" height=30
src="kdev_abs_tut01.files/kdev_icon_generate_sources.gif" width=30 NOSAVE>以更新/产生相应的代码。
<LI>选择 <IMG alt=Make height=27
src="kdev_abs_tut01.files/kdev_icon_make.gif" width=26 NOSAVE>，然后
<IMG align=bottom alt=Run height=25
src="kdev_abs_tut01.files/kdev_icon_run.gif" width=25 NOSAVE>以编译和运行程序
(图二十四) </LI></UL>[图二十四:修饰后的程序] <BR><IMG
alt="Arty Application" height=328
src="kdev_abs_tut01.files/kdev_application_arty.gif" width=408 NOSAVE>
<H2>结语</H2>本教程只涉及到Kdevelop九牛之一毛。Kdevelop同时也支持版本控制、
集成的调试器、打包、源代码发布、文档编制等等。所以Kdevelop的用户会得到无穷的乐趣！ <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR>
</BODY></HTML>