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

Lab 5: Multi-line text, Fl_Text_Editor, and Fl_Text_Buffer

1. Description
2. Copying Visual Studio Project
3. Adding widgets in FLUID
4. Push buttons
5. Writing button callback functions
6. Optional: Fl_Text_Display with colors
7. How to submit

Description

• In this lab we explore two FLTK classes, Fl_Text_Editor and Fl_Text_Buffer. Fl_Text_Editor is the FLTK text editor widget. It allows to edit multiple lines of text and supports highlighting and scrolling. The data buffer that is displayed in the widget is managed by the Fl_Text_Buffer class.

• If you want to make it a display-only view of the multi-line text, use Fl_Text_Display instead of Fl_Text_Editor. FLUID design view of our application looks like this:

   

• When user clicks button "Show Text", the text editor is populated with some data. The user can change the data as necessary.

• When user clicks button "Get Text", the data is retrieved from the text editor widget and printed on the system console screen.

   

Copying Visual Studio Project

• We continue using the window classes developed in the previous lab. The prototype for this 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_lab05_multi_line.

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

   

Adding widgets in FLUID

• Start FLUID program and open project

  
      c255labs\labs\c255_lab05_multi_line\fluid_project\CFluidWindow.fl
  
  

• Use FLUID menu or Widget Bin to add the widgets to your window.

• Select Window win_app object in FLUID tree view. Use menu

  
      New/Text/Text_Editor
  
  

• Name the widget txt_edit in the Properties/C++

   

Push buttons

• Select Window win_app object in FLUID tree view.

• Add two push buttons,

  
      New/Buttons/Button
  
  

• Name the button objects in the Properties/C++ as btn_show_text and btn_get_text.

• Specify button labels using Properties/GUI.

• Save FLUID project and generate C++ code by

  
      File/Write Code...
  
  

   

Writing button callback functions

1. Open solution

   
       c255labs\labs\c255_lab05_multi_line\c255_lab05.sln
   
   

   in Visual Studio.

2. Open CMainWindow.h in text editor. Add NEW callback code as shown:

   
   // CMainWindow.h
   
   #ifndef _CMAINWINDOW_H_INCLUDED_
   #define _CMAINWINDOW_H_INCLUDED_
   
   #include "../fluid_project/CFluidWindow.h"
   
   class CMainWindow : public CFluidWindow {
       Fl_Text_Buffer *txt_buff;   // NEW
   public:
       CMainWindow();              // NEW
   
       void show();
       void click_btn_show_text(); // NEW
       void click_btn_get_text();  // NEW
   
       // callback functions
       static void callback_window_closing(Fl_Widget* widg, void* userdata_);
   
        // NEW:
       static void callback_btn_show_text(Fl_Widget* widg, void* userdata_);
       static void callback_btn_get_text(Fl_Widget* widg, void* userdata_);
   };//class CMainWindow
   
   #endif // _CMAINWINDOW_H_INCLUDED_
   
   

3. Notice that the CMainWindow class now includes the data member

   
       Fl_Text_Buffer *txt_buff;
   
   

4. Open CMainWindow.cpp in the text editor.

5. Download the new version of CMainWindow.cpp , or add NEW code manually:

   
   // Lab 5: Multi-line text, Fl_Text_Editor, and Fl_Text_Buffer
   // CMainWindow.cpp
   #include "CMainWindow.h"
   
   // NEW
   CMainWindow::CMainWindow()
   {
       txt_buff = new Fl_Text_Buffer();
       txt_edit->buffer( txt_buff );
   }
   
   void CMainWindow::show()
   {
       // Window callbacks:
       win_app->callback( (Fl_Callback*)CMainWindow::callback_window_closing, (void*)(this) );
   
       // NEW
       btn_show_text->callback( (Fl_Callback*)CMainWindow::callback_btn_show_text, (void*)(this) );
       btn_get_text->callback( (Fl_Callback*)CMainWindow::callback_btn_get_text, (void*)(this) );
   
       // Make the window visible:
       win_app->show();
   }
   
   // callback functions
   void CMainWindow::callback_window_closing(Fl_Widget* widg, void* userdata_) {
       std::cout << "X button clicked -- exiting the program\n";
       while( Fl::first_window() ) {
           Fl::first_window()->hide();
       }
   }
   
   // NEW
   void CMainWindow::callback_btn_show_text(Fl_Widget* widg, void* userdata_)
   {
       CMainWindow* win = static_cast< CMainWindow* > ( userdata_ );
       win->click_btn_show_text();
   }
   
   // NEW
   void CMainWindow::click_btn_show_text()
   {
       std::cout << "btn_show_text click\n";
       txt_buff->text("line 0\nline 1\nline 2\n"
           "line 3\nline 4\nline 5\n"
           "line 6\nline 7\nline 8\n"
           "line 9\nline 10\nline 11\n"
           "line 12\nline 13\nline 14\n"
           "line 15\nline 16\nline 17\n"
           "line 18\nline 19\nline 20\n"
           "line 21\nline 22\nline 23\n"
           );
   }
   
   // NEW
   void CMainWindow::callback_btn_get_text(Fl_Widget* widg, void* userdata_)
   {
       CMainWindow* win = static_cast< CMainWindow* > ( userdata_ );
       win->click_btn_get_text();
   }
   
   // NEW
   void CMainWindow::click_btn_get_text()
   {
       std::cout << "btn_get_text click\n";
       std::cout << txt_buff->text();
   }
   
   

6. Compile and test the program.

    

Optional: Fl_Text_Display with colors

• Both Fl_Text_Display and Fl_Text_Editor widgets can display text with colors. Erco's FLTK Cheat Page seriss.com/people/erco/fltk/ has sample code demonstrating the editor color styles.

   

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.