Course list http://www.c-jump.com/bcc/

Lab 9: Fl_Box and custom drawing

1. Description
2. Copying Visual Studio Project
3. Adding CDrawBox class
4. Adding CDrawBox widget in FLUID
5. Compiling and testing
6. How to submit

1. Description

• Once again, the prototype for this project is Lab 4 -- an empty window. Our new challenge is to experiment with 2D drawing functions provided with FLTK library.

• What sort of things can you draw in FLTK? Text, boxes, lines, points, polygons, arcs, pies, and circles. You can choose different colors, fonts, and pen styles to alternate the appearance of shapes and text.

• Where can you draw 2D shapes in FLTK? Since we are using FLUID for GUI design, the closest widget with the most similar behavior is Fl_Box. The Fl_Box has Fl_Box::draw(), which does practically nothing, but we can provide our own version of this function.

• Where do we write the draw() function to render the custom shapes? There are three steps:

  1. Derive a new class (e.g. CDrawBox) from the Fl_Box class

      

  2. Write the new function CDrawBox::draw().

  3. Use CDrawBox as a widget in FLTK window

  FLTK calls CDrawBox::draw() instead of Fl_Box::draw(). We have a widget that does its own custom drawing, problem solved!

• But how does it work? C++ supports function override in derived classes for functions declared virtual in the base classes. (virtual is a C++ keyword.) Fl_Box::draw() is a virtual function.

• The topics we need to discuss in this lab include:

  • (a) understanding C++ class inheritance

  • (b) understanding the virtual function call mechanism.

   

2. Copying Visual Studio Project

• The prototype for the project is Lab 4:

  
      c255labs\labs\c255_lab04
  
  

• Make a copy of Lab 4 subfolder, or download and unzip c255_lab04.zip

• Rename the new folder as c255_lab09_fl_box.

• Open solution file in Visual Studio and finish the usual steps to rename the project.

   

3. Adding CDrawBox class

• Download CDrawBox.h header and save it under

  
      c255labs\labs\c255_lab09_fl_box\fluid_project
  
  

• Because CDrawBox class is a GUI widget, we will use it in FLUID. It is practical to store the widget's header file in the FLUID project subdirectory.

   

4. Adding CDrawBox widget in FLUID

• Start FLUID program and open project

  
      c255labs\labs\c255_lab09_fl_box\fluid_project\CFluidWindow.fl
  
  

• Select Window win_app object in FLUID tree view.

• Use FLUID menu

  
      New/Other/Box
  
  

• In the Properties/C++ dialog

  • Enter the name of the Class:: CDrawBox

  • Enter the widget Name: draw_box

  • Enter the Extra Code: #include "CDrawBox.h"
    to make sure that the class header is included.

• CDrawBox appears in FLUID design view as a square box:

   

  Save FLUID project and generate C++ code by

  
      File/Write Code...
  
  

   

5. Compiling and testing

• Open solution

  
      c255labs\labs\c255_lab09_fl_box\c255_lab09.sln
  
  

  in Visual Studio. Compile and test the program.

• Open CDrawBox.h and examine the code:

  
  // CDrawBox.h
  #ifndef CDRAWBOX_H_INCLUDED
  #define CDRAWBOX_H_INCLUDED
  
  #include <iostream>
  #include <FL/Fl.H>
  #include <FL/Fl_Box.H>
  #include <FL/fl_draw.H>
  
  class CDrawBox : public Fl_Box {
  public:
      CDrawBox( int X, int Y, int W, int H )
          : Fl_Box( X, Y, W, H )
      {
      }
  
      void draw() {
          std::cout << "CDrawBox::draw()\n";
          // Make sure Fl_Box is drawn:
          Fl_Box::draw();
          fl_color( FL_BLACK ); // default color is same as window background
          // note that line is drawn in window coordinates:
          fl_line( x(), y(), x() + w(), y() + h() ); // diagonal line
      }
  };// class CDrawBox
  
  #endif // CDRAWBOX_H_INCLUDED
  
  

• Important observations:

  • Class CDrawBox inherits from Fl_Box

  • CDrawBox constructor uses initalizer list to construct Fl_Box.

  • Our code does not call CDrawBox::draw(), FLTK does it. In fact, we should never call this function directly. FLTK will schedule redrawing whenever needed. If your widget must be redrawn as soon as possible, call redraw() instead.

  • It is a standard practice to call Fl_Box::draw() from the overridden function like CDrawBox::draw().

   

6. How to submit

• This is a self-learning lab. There are no files to submit. Make sure to complete all required steps to build and test the project on your own home computer.