Tutorial4

Adapted from Stephen J. Chenney's Tutorial
Modified by Yu-Chi Lai at 2005
Modified by Chi Man Liu in 2007

This tutorial will introduce you to use the command arguments.

Lets get started.

1. Step 1: Modify the Main

We need to include the header files of all classes and functions, we will use in the main. I put on the comment after each header to indicate its function.

#include <iostream> // For output operation
#include <FL/Fl.H>  // For Fundatmental FLTK operation
#include <FL/Fl_Window.H> // For the Fl_Winow class
#include <FL/Fl_Double_Window.H> // For the Fl_Double_Window class
#include <FL/Fl_Value_Slider.H> // For the Slider class
#include <FL/Fl_Button.H> // For the button class

#include "EventBox.h"     // For our own widget class event box

Inside the main, we need to create the memory space for the main window win. The lines between the window created and win->end() are used to add and set up components contained in this window.

	// Set up the container window
	win = new Fl_Window(300, 300, "Example Window");

     ... // Add components into window and also initialize each component.

	// The end of window component definition
	win->end();
	// make the window show up
	win->show();
	return Fl::run();

We add three different components into our main window. One is slider which is FLTK widget, another is button which is also FLTK widget, and the other is box created by ourselves, created from FLTK widgets.

		// Put in our own widget
		box = new EventBox(40, 20, 220, 220);
		// make the box show up	
		box->show();

		// Put in Slider and text indicator
		// The time slider
		slider = new Fl_Value_Slider(20, 270, 250, 25);
		// Set up the type of the slider
		slider->type(FL_HOR_SLIDER);
		// Set up the boundary of the slider
		slider->bounds(1.0, 24.0);
		// Set up the default value
		slider->value(25.0);
		// Set up the callback function
		slider->callback(Slider_Callback);
		// Show up the slider
		slider->show();

		// put a button in
		button = new Fl_Button(220, 270, 75, 25, "Change");
		button->callback(Button_Callback);

We need to have methods to pass the variables between callback functions. We use four global variables pointing to these three components. We must declare them before we use it.

Fl_Window*       win = NULL;     // The main window pointer
Fl_Button*       button = NULL;  // The button pointer
EventBox*        box = NULL;     // The pointer to the box
Fl_Value_Slider* slider = NULL;  // The pointer to the slider who will change label size

We add the callback function for the event when the slider is changed. The value we get from the slider is used to change the font size of "Hello" in the center of the box.

//****************************************************************************
//
// * The slider callback function
//=============================================================================
void Slider_Callback(Fl_Widget *w)
//=============================================================================
{
	int label_size = (int)slider->value();
	printf("The label size is %d\n", label_size);
	box->labelsize(label_size);
	box->damage(1);
}

We add the callback function for the event when the button is clicked. We use this event to change the text between "Hello" and "Bye" in the center of the box.

//****************************************************************************
//
// * The button callback function
//=============================================================================
void Button_Callback(Fl_Widget *w)
//=============================================================================
{
	static int flag = true;   // Flag to control whether print out "Hello" or "Bye"
	if(flag) {
		box->label("Bye");
		flag = false;
	}
	else {
		box->label("Hello");
		flag = true;
	}
	box->damage(1);
}

Step 2: Add eventBox Class in

For our own widget, we need to add in two extra files, eventBox.cpp and eventBox.h. Inside the eventBox.h, we need to overwrite the Fl_Box's default functions for the constructor and event handler. Thus we declare it inside the class

#ifndef __EVENTBOX_H
#define __EVENTBOX_H
#include <FL/Fl_Box.H>

class EventBox: public Fl_Box  // Inherit the Fl_Box class
{
	public:
		// Constructor
		EventBox(int t, int l, int width, int height);
		// Event handler
		int handle(int e);
};

#endif

Inside the eventBox.cpp, we first need to add the declaration header of these function.

		#include "EventBox.h"

We have constructor to set up the default values for fields inside the box.

//***********************************************************************
//
// * Constructor
//=======================================================================
EventBox::EventBox(int t, int l, int width, int height)
         :Fl_Box(FL_UP_BOX, t, l, width, height, "")
//=======================================================================
{	
	// Set up the label
	labelfont(FL_ITALIC);

	// Set up the label size
	labelsize(24);

	// Set up the label style
	labeltype(FL_SHADOW_LABEL);

	// Set up text inside the box
	label("Hello");

}

Then, we have event handler. We use a switch{...} to choose the event we would like to put action on. We give a detail comment next to each interesting event beside the case ...:

//***********************************************************************
//
// * Handle the event happening in this box
//=======================================================================
int EventBox::handle(int e)
//=======================================================================
{
	switch(e)	{
		case FL_ENTER: // When the cursor enters this box
			// Change the color to red
			color (FL_RED);
			// Change the label to black
			labelcolor(FL_BLACK);
			// Notify window to redraw is needed
			damage(1);
			return 1;
		case FL_LEAVE: // When the cursor leave this box
			// Change the color to gray
			color(FL_GRAY);
			// Change the label to black
			labelcolor(FL_BLACK);
			// Notify window to redraw is needed
			damage(1);
			return 1;
		case FL_PUSH: // When mouse button is pushing
			// Change the color to blue
			labelcolor(FL_BLUE);
			// Notify window to redraw is needed
			damage(1);
			return 1;
		case FL_RELEASE: // When release the mouse button
			// Change the label color to black
			labelcolor(FL_BLACK);
			damage(1);
			return 1;
		case FL_DRAG: // When drag the mouse button
			// Set the label to yellow
			labelcolor(FL_YELLOW);
			damage(1);
			return 1;
		default:
			return Fl_Box::handle(e);
	};

}

2. Step 3: Build Project

You need to set up the project
We build our program just like before. Choose Build -> Build Solution. Your project should build with no errors (you can safely ignore the warnings). If you have some errors see where they are and find the difference between your code and the code supplied with this tutorial. Fix the errors and try again.

3. Step 4: Run the Program

One its built you can run it via Debug -> Start Without Debugging. You should see the follwoing effect when moving around the mouse cursor, drag the cursor and drag the slider.

Source Code