Lectures/Notes
|
Complex FLTK Window Lets get started. Step 1: Modify the MainFirst, 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 Second, 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(); Third, 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); Fourth, 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 Fifth, 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 = slider->value(); printf("The label size is %d\n", label_size); box->labelsize(label_size); box->damage(1); } Sixth, 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 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 inFor 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); }; } Step 3: Build ProjectYou 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. Step 4: Run the ProgramOne 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. |