A Simple Introduction to FLTK 2.0

FLTK is a cross-platform user interface library written in C++. FLTK runs on UNIX, GNU/Linux, Windows, and Mac OS X. FLTK is designed to be small and modular. It's clean and easy to use. This article will introduce you to FLTK by creating a simple Hello World style program.

FLTK is straight forward to build, but I'll include instructions for building the toolkit. The build process and program have been tested on Mac OS X 10.5.2.

This introduction is based on the first example provided with the FLTK documentation, it was written to be easier to follow for beginners.

Building FLTK

To begin grab the latest version of the FLTK source from www.fltk.org. I downloaded fltk-2.0.x-r6101.tar.gz into my ~/src directory.

Extract the FLTK source and change to the FLTK source directory by typing:

$ tar xzf fltk-2.0.x-r6101.tar.gz
$ cd fltk-2.0.x-r6101

Configure, compile and install FLTK like any other UNIX program.

$ ./configure
$ make
$ make install

Assuming everything built you should now have a working installation of FLTK in /usr/local/include/fltk and /usr/local/lib.

Testing the FLTK2 installation

To make sure everything built properly start the FLTK UI builder fluid2. At the command line type:

$ fluid2

You should see the windows shown in Figure 1 and Figure 2.

...

Figure 1

...

Figure 2

Quit fluid2 by choosing File → Quit.

Writing Hello World

Create a new text file called hello.cxx. Using your favorite text editor enter the following text into hello.cxx:

#include <fltk/Window.h>
#include <fltk/Widget.h>
#include <fltk/run.h>

using namespace fltk;

int main(int argc, char **argv) {
  Window *window = new Window(300,180);
  window->begin();
  Widget *box = new Widget(0,0,300,180,"Hello, World!");
  window->end();
  window->show(argc, argv);
  return run();
}

Next, switch back to the command line and type the following line to compile the program:

$ g++ `fltk2-config --cxxflags` hello.cxx  `fltk2-config --ldflags` -o hello

Now we're ready to run the Hello World program. Type the following at the command prompt:

$ ./hello

If all goes well you should see the window in Figure 3.

...

Figure 3

Quit the Hello World program by pressing Esc.

Adding flare

The Hello World example is rather simple. We can do better without much effort. By adding the following lines we'll have a more impressive program:

#include <fltk/Window.h>
#include <fltk/Widget.h>
#include <fltk/run.h>

using namespace fltk;

int main(int argc, char **argv) {
  Window *window = new Window(300,180);
  window->begin();
  Widget *box = new Widget(0,0,300,180,"Hello, World!");
  // *** new code ***
  box->box(FLAT_BOX);
  box->labelfont(TIMES_BOLD_ITALIC);
  box->labelsize(36);
  box->labeltype(SHADOW_LABEL);
  // *** end new code ***
  window->end();
  window->show(argc, argv);
  return run();
}

Just like with the first Hello World program, switch back to the command line and type the following line to compile the program:

$ g++ `fltk2-config --cxxflags` hello.cxx  `fltk2-config --ldflags` -o hello

This should overwrite the old binary. Just like with the first example type the following at the command prompt:

$ ./hello

You should see the window in Figure 4.

...

Figure 4

Again, quit the Hello World program by pressing Esc.

Conclusion

FLTK is a straight forward and easy to use GUI toolkit. It's perfect for real world projects, as well as learning and teaching.

You can find more tutorials in the FLTK 2.0 documentation. Just click on Related Pages. Example 1 is essentially the same program we created here, but with some in depth explanations of the methods used. Example 2 introduces callbacks.

Comments