<a href="http://www.fltk.org/">FLTK</a>(Fast Light Tool Kit
发音为fulltick)
是一种使用C++开发的GUI工具包，它可以应用于Unix，Linux，MS-Windows95/98/NT/2000和MacOS操作系统平台，相
对于其它的许多图形接口开发工具包（如MFC、GTK、QT等），它具有体积很小、速度比较快，且有着更好的移植性。本文就FLTK编程的一些基本方法进
行介绍。</p>
<p><a name="1"><span class="atitle2">FLTK功能简介</span></a></p>
<p>1. 提供丰富的跨平台的GUI构件(Widget)。有按钮，菜单，窗口等，近六十个。</p>
<p>2. 支持OpenGL，提供Fl_GL_Window，支持OpenGL相关的操作。</p>
<p>3. 提供界面设计工具FLUID，非常方便进行界面的设计。</p>
<p>4. 良好的跨平台移植性。</p>
<p>5. 支持多种C++编译器，Gcc，BC，VC等等。</p>
<p>6. 灵活性。FLTK本身可以定制，以满足不同的需要。这使得FLTK在嵌入式开发上有着极大的竞争力，这正是我要推荐使用FLTK的原因。</p>
<p>本文就FLTK编程的一些基本方法进行介绍。</p>
<p><a name="2"><span class="atitle2">安装</span></a></p>
<p>安装FLTK很简单，我们只
需要下载它的源文件，解压缩到目录下，在Linux下我们只需要输入make，编译完成然后make
install就头文件安装到/usr/include/FL目录下。库文件就在/usr/lib下，也可以自己编译之后把这些文件复制到这些目录，或者
不需要复制，只在编译连接的时候指定路径。</p>
<p>在window下可以使用VC，BC打开相应目录下的工程文件编译即可。</p>
<p><a name="3"><span class="atitle2">FLTK构件简介</span></a></p>
<p>FLTK作为GUI开发包，包含了常用的图形用户接口需要的一些构件，视觉表现非常丰富，如下两图所示：</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image002.jpg" alt="" border="0" height="333" width="553"> <br> </center><p></p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image004.jpg" alt="" border="0" height="415" width="553"> <br> </center><p></p>
<p><b>常用按钮构件</b></p>
<table border="1" width="80%">
<tbody><tr>
<td>按钮名称</td>
<td>头文件</td>
<td>按钮名称</td>
<td>头文件</td>
</tr>
<tr>
<td>Fl_Button</td>
<td>Fl_Button.H</td>
<td>Fl_Check_Button</td>
<td>Fl_Check_Button.H</td>
</tr>
<tr>
<td>Fl_Light_Button</td>
<td>Fl_Light_Button.H</td>
<td>Fl_Repeat_Button</td>
<td>Fl_Repeat_Button.H</td>
</tr>
<tr>
<td>Fl_Return_Button</td>
<td>Fl_Return_Button.H</td>
<td>Fl_Round_Button</td>
<td>Fl_Round_Button.H</td>
</tr>
</tbody></table>
<p>对于具有Fl_Check_Button、Fl_Loght_Button和Fl_Round_Button当状态为off时value() =0 ，On时value()返回1。</p>
<p>处理按钮时间可以使用回调(callback)函数,参见后面的事件处理。</p>
<p><b>文本处理构件</b></p>
<table border="1" width="80%">
<tbody><tr>
<td>构件名称</td>
<td>头文件</td>
<td>构件名称</td>
<td>头文件</td>
</tr>
<tr>
<td>Fl_Input</td>
<td>Fl_Input.H</td>
<td>Fl_Output</td>
<td>Fl_Output.H</td>
</tr>
<tr>
<td>Fl_Multiline_Input</td>
<td>Fl_Multiline_Input.H</td>
<td>Fl_Multiline_output</td>
<td>Fl_Multiline_output.H</td>
</tr>
</tbody></table>
<p>设置和取得文本内容使用value();</p>
<p>如：</p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
(new Fl_Input(x,y,width,height,"Label"))->value("Hello World!");
</code></pre></td></tr></tbody></table>
<p><b>其他构件</b></p>
<p>参见FLTK.org的<a href="http://www.fltk.org/documentation.php">文档</a> 说明。</p>
<p>这些构件是使用C++开发的，具有完善的继承关系，下面是构件继承关系图</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image005.jpg" alt="" border="0" height="478" width="319"> <br> </center><p></p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image006.jpg" alt="" border="0" height="413" width="307"> <br> </center><p></p>
<p>构件使用例子－HelloWorld</p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Box.H>
int main (int argc, char *argv[])
{
Fl_Window *window;
Fl_Box *box;
window = new Fl_Window (300, 180);
window-> label("HelloWorld!"); //添加window的标题
box = new Fl_Box (20, 40, 260, 100, "Hello World!");
box->box (FL_UP_BOX);
box->labelsize (36);
box->labelfont (FL_BOLD+FL_ITALIC); //设置字体
box->labeltype (FL_SHADOW_LABEL); //设置label的类型
/***************************************************************
进入FLTK的事件循环处理过程
***************************************************************/
window->end ();
window->show (argc, argv);
return Fl::run();
}
</code></pre></td></tr></tbody></table>
<p>在window下程序编译运行后如图所示：[使用VC6编译优化后大小为116K]</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image007.jpg" alt="" border="0" height="205" width="306"> <br> </center><p></p>
<p>Linux下图片[编译未优化大小358K]</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image008.png" alt="" border="0" height="206" width="312"> <br> </center><p></p>
<p><a name="4"><span class="atitle2">FLTK事件处理</span></a></p>
<p>对于一般构件的如按钮，菜单等常用事件的处理一般可以使用回调函数实现，回调函数的原型是：</p>
<pre>void XXX_callback( Fl_Widget *w,void *data )
{
//添加自己处理的内容
}
</pre>
<p>使用F1_Widget->callback( XXX_callback,data) 注册回调函数</p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
/***************************************************************
按钮事件例子
***************************************************************/
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_ask.H>
void Btn01_cb(Fl_Widget *w,void *data)
{
((Fl_Button *)w)->label((char *)data);
fl_alert("Hello");
}
int main(int argc, char **argv)
{
char *buff ="Hello";
Fl_Window* w = new Fl_Window(272, 144);
Fl_Button* Btn01 = new Fl_Button(85, 50, 105, 25, "&Test callback");
Btn01->shortcut(FL_ALT+'t'); //定义按钮的快捷键
Btn01->callback((Fl_Callback*)Btn01_cb,buff); //调用处理函数 buff作为参数
w->end();
w->show(argc, argv);
return Fl::run();
}
</code></pre></td></tr></tbody></table>
<p>编译运行程序，鼠标点击按钮，按钮标签会发生改变，并且会弹出提示框。</p>
<p>通常的callback是当构件的value改变时调用，可以使用when()改变为其他事件发生调用回调函数，主要事件有以下事件</p>
<table border="1" width="80%">
<tbody><tr>
<td>事件</td>
<td>说明</td>
</tr>
<tr>
<td>FL_WHEN_NERVER</td>
<td>从不调用回调函数</td>
</tr>
<tr>
<td>FL_WHEN_CHANGED</td>
<td>当构件值改变时调用</td>
</tr>
<tr>
<td>FL_WHEN_RELEASE</td>
<td>当释放按键或者鼠标并且构件值改变</td>
</tr>
<tr>
<td>FL_WHEN_RELEASE_ALWAYS</td>
<td>当释放按键或者鼠标，即使构件值没有改变</td>
</tr>
<tr>
<td>FL_WHEN_ENTER_KEY</td>
<td>按下Enter键并且构件值改变</td>
</tr>
<tr>
<td>FL_WHEN_ENTER_KEY_ALWAYS</td>
<td>按下Enter键，即使构件值没有改变</td>
</tr>
</tbody></table>
<p>通过使用F1_Widget->when(FL_WHEN_XXXX)来改变回调事件。</p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_ask.H>
void Btn01_cb(Fl_Widget *w, void *data)
{
fl_alert("Hello");
}
int main(int argc, char **argv)
{
char *buff = "Hello";
Fl_Window* w = new Fl_Window(272, 144);
Fl_Button* Btn01 = new Fl_Button(85, 50, 105, 25, "&Test callback");
Btn01->shortcut(FL_ALT + 't');
Btn01->callback((Fl_Callback*) Btn01_cb, buff);
Btn01->when(FL_WHEN_RELEASE_ALWAYS);
w->end();
w->show(argc, argv);
return Fl::run();
}
</code></pre></td></tr></tbody></table>
<p>编译运行程序，在按钮上按下鼠标左键，移动到按钮外，松开鼠标按键，仍然会弹出对话框，对比上面的两程序，看看有什么不同。</p>
<p><a name="5"><span class="atitle2">FLTK消息处理</span></a></p>
<p>在FLTK中是通过Fl_Widegt::handle(),虚拟函数来处理系统的消息。我们可以查看Fltk的源代码来分析系统是怎样处理一些系统消息的，如按钮的消息处理</p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
/*******************************************************
Fl_Button中处理消息的代码，省略了具体的处理代码
*******************************************************/
int Fl_Button::handle(int event) {
switch (event)
{
case FL_ENTER:
case FL_LEAVE: return 1;
case FL_PUSH: ……
case FL_DRAG: ……
case FL_RELEASE: ……
case FL_SHORTCUT: ……
case FL_FOCUS : ……
case FL_UNFOCUS : ……
case FL_KEYBOARD : ……
default:
return 0;
}
}
</code></pre></td></tr></tbody></table>
<p>可以看出了，系统的一些消息，都是在构件的handle()中进行处理的。</p>
<p>系统的主要消息有以下</p>
<table border="1" width="80%">
<tbody><tr>
<td>鼠标事件消息</td>
<td>焦点事件消息</td>
</tr>
<tr>
<td>FL_PUSH</td>
<td>FL_ENTER</td>
</tr>
<tr>
<td>FL_DRAG</td>
<td>FL_LEAVE</td>
</tr>
<tr>
<td>FL_RELEASE</td>
<td>FL_FOCUS</td>
</tr>
<tr>
<td>FL_MOVE</td>
<td>FL_UNFOCUS</td>
</tr>
<tr>
<td>键盘事件消息</td>
<td>剪贴板事件消息</td>
</tr>
<tr>
<td>FL_KEYBOARD</td>
<td>FL_PASTE</td>
</tr>
<tr>
<td>FL_SHORTCUT</td>
<td>FL_SELECTIONCLEAR</td>
</tr>
<tr colspan="2">
<td>构件事件消息</td>
</tr>
<tr>
<td>FL_DEACTIVATE</td>
<td>FL_ACTIVE</td>
</tr>
<tr>
<td>FL_HIDE</td>
<td>FL_SHOW</td>
</tr>
</tbody></table>
<p>通过重载handle函数我们可扩充标准构件，下面是一个鼠标移动到上面就改变颜色的按钮的实现源代码。</p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/fl_ask.H>
class EnterButton : public Fl_Button
{
int handle(int e)
{ switch (e)
{
case FL_ENTER:
color(FL_GREEN);
labelsize(18); redraw();
return 1;
case FL_LEAVE:
color(FL_GRAY);
labelsize(18); redraw();
return 1;
default:
return Fl_Button::handle(e);
}
}
public: EnterButton(int x, int y, int w, int h, const char *l )
: Fl_Button(x,y,w,h,l) { }
};
static void cb(Fl_Widget* s, void *data)
{
fl_alert( "Hello World!" );
}
int main(int argc, char **argv)
{
Fl_Window* w = new Fl_Window(130, 50);
EnterButton *eBtn = new EnterButton(25,50,120,25,"HelloWorld");
eBtn->callback((Fl_Callback*)cb);
w->end();
w->show(argc, argv);
return Fl::run();
}
</code></pre></td></tr></tbody></table>
<p>运行显示效果如图:</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image010.jpg" alt="" border="0" height="50" width="130"> <img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image011.jpg" alt="" border="0" height="50" width="130"><br> </center><p></p>
<p>Linux下演示[截屏时鼠标没有取到]</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image013.jpg" alt="" border="0" height="76" width="142"><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image015.jpg" alt="" border="0" height="74" width="134"> <br> </center><p></p>
<p><a name="6"><span class="atitle2">FLUID简介</span></a></p>
<p>FLUID （FLTK UserInteface Designer）是FLTK进行程序界面设计的有力工具，如同GTK界面开发工具Glade一样。</p>
<p>它包含在FLTK源代码中，需要自己编译成可执行文件。在Window平台可以使用VC/BC编译成可执行文件。启动和设计时界面如图所示：</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image017.jpg" alt="" border="0" height="342" width="517"> <br> </center><p></p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image019.jpg" alt="" border="0" height="351" width="529"> <br> </center><p></p>
<p>Fluid
非常容易使用，首先是新建,输入文件名，后点Bin 窗口的Function
图标，建立main主函数[清空name就可以]，然后可以选择window
图标，建立窗口，然后拖放其他构件，可以在双击构件设置构件的属性【如下图】，在GUI属性页中设置标签和快捷键，位置大小，图片，提示，对齐方式等，在
style中设置它的显示风格等，在C++中设置名字，书写它的回调函数等。</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image020.jpg" alt="" border="0" height="418" width="391"> <br> </center><p></p>
<p>设计好界面后，我们可以把这些转换为C++源代码，选菜单File中的write Code即可，使用编辑器可以打开与工程同名的源文件和头文件，怎么做，不再赘述。</p>
<p><a name="7"><span class="atitle2">OpenGL编程</span></a></p>
<p>在FLTK中很容易使用OpenGL进行图形编程的，我们只需要使用它的Fl_Gl_Window构件，重新定义一个派生于Fl_Gl_Window的类，重载draw()和handle()就可以。所需要的代码和步骤如下：</p>
<p><b>包含以下头文件</b></p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
#include <FL/Fl.H>
#include <FL/gl.h>
#include <FL/Fl_Gl_Window.H>
</code></pre></td></tr></tbody></table>
<p><b>定义一个子类，如下代码所示</b></p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
class MYGLWindow : public Fl_Gl_Window
{
void draw(); //作图操作
void handle( int ); //消息事件处理
public :
MYGLWindow(int x,int y,int w,int h,const char *L) : Fl_Gl_Window(x,y,w,h,L){};
};
</code></pre></td></tr></tbody></table>
<p><b>实现draw()事件</b></p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
void MYGLWindow::draw() //作图
{
if ( ! valid() )
{
//设置viewport窗口大小等等 例如
/**********************************************
valid(1);
glLoadIdentity();
glViewport(0,0,w(),h());
***********************************************/
}
//添加使用OPENGL作图操作
/* ……..*/
};
</code></pre></td></tr></tbody></table>
<p><b>事件处理实现</b></p>
<table bgcolor="#cccccc" border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td><pre><code>
void MYGLWindow::handle( int event) //事件处理
{ switch (event)
{ case FL_PUSH : //操作等
return 1;
case …….
}
}
</code></pre></td></tr></tbody></table>
<p><b>注意</b></p>
<p>1. 编译时需要包含openGL32的库文件，名字在不同的平台名字稍微不同。</p>
<p>2. 使用<FL/gl.h>代替<GL/gl.h>头文件，不要使用后者的头文件。</p>
<p>例子程序比较长，附在参考中。运行显示，弹出菜单后如图所示：</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image022.jpg" alt="" border="0" height="288" width="288"> <br> </center><p></p>
<p><a name="8"><span class="atitle2">VC中使用FLTK</span></a></p>
<p>在Vc中无法直接使用FLTK，需要下载FLTK的源文件编译之后再进行一些简单的设置，设置步骤如下：</p>
<p>1. 打开Project->Settings->Link, 添加以下库文件: <br>
wsock32.lib opengl32.lib glu32.lib fltk.lib fltkgl.lib <br>
[fltk.lib fltkgl.lib 需要自己编译FLTK源文件生成,直接打开源文件下的visualc目录下的工程文件就可以编译]</p>
<p>2. 在Project->Settings->Link的PROJECT OPTIONS中 添加 /nodefaultlib:"LIBCD"，如果你要生成release版本的那么是 /nodefaultlib:"LIBC"</p>
<p>3. 在Tools->Options->Directories, 选择 include files 添加路径如<br>
C:\Program Files\fltk [对照自己的修改]</p>
<p>4. 在Tools->Options->Directories, 选择 library files 设定为如下所示<br>
C:\Program Files\fltk\lib [对照自己的修改]</p>
<p>5. Project->Settings->C/C++ 中的category 选择 C++ Language</p>
<p>6. 在Project->Settings->C/C++,的PROJECT OPTIONS添加:<br>
/I "c:\program files\fltk" [对照修改]，此处不修改也可以编译</p>
<p><a name="9"><span class="atitle2">KDevelop中使用FLTK</span></a></p>
<p>作为跨平台的一种轻量级的GUI Tools，在Linux下得到更为广泛的使用，所以我们使用Linux下的最常用的Kdevelop也能很方便使用它。下面简述需要注意的配置步骤：</p>
<p>1. 我们建立C++工程后，需要修改的配置都在菜单[项目]-->[选项]'[连接器选项]中修改</p>
<p>2. 在[库]中选定 X11和Xext，根据自己的需要还需要选定 math等库</p>
<p>3. 在[附加库]那里输入 -L/usr/X11R6/lib -lfltk </p>
<p>4. 如果开发OpenGL应用需要 在附加库中输入 -lfltk_gl -lglut 指定连接库。</p>
<p></p><center><img src="http://www-900.ibm.com/developerWorks/cn/linux/l-fltk/images/image024.jpg" alt="" border="0" height="343" width="533"> <br> </center><p></p>
<p>提示：因为我使用的Linux为RedHat 8,为选择中文环境，所以配置说明也是中文，英文版本可能有所不同，对照修改即可.</p>
<p><a name="resources"><span class="atitle2">参考资料</span></a></p>
<p>1. 想了解更多的FLTK的知识和下载FLTK源代码等可以到<a href="http://www.fltk.org">www.fltk.org</a> 网站。
<a href="http://www.fltk.org/documentation.php">FLTK的编程手册</a> 你想了解FLTK构件的事件方法等都在里面。OpenGL</p>
<p>2. 还是参考一下 <a href="http://www.opengl.org">www.opengl.org</a> 上的资料吧，有文档说明还有教学和源代码。</p>
