Lab 3: FLUID Window Class

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

Lab 3: FLUID Window Class

Description
Copying Visual Studio Project
Using FLUID to create a C++ class
Getting Started with FLUID Project
Adding CFluidWindow class
Adding the class constructor
Adding the window
Testing what we have so far
Adding FLUID-generated .CXX to Visual Studio Project
How to submit

1. Description

In this lab we create a C++ class to control and manipulate a GUI window. This allows us to better organize the code and learn various aspects of C++ object-oriented programming.

2. Copying Visual Studio Project

Once again, our strategy is to keep each Lab in a separate project folder under c255labs\labs.

The prototype for this exercise is Lab 1, c255labs\labs\c255_lab01_intro.
Follow Lab 2 instructions to make a copy of Lab 1 directory. Remember to cleanup Lab 1 project before making a copy.
Rename new copy as c255labs\labs\c255_lab03_win_class.
Open c255labs\labs\c255_lab03_win_class\c255_lab01_intro.sln in Visual Studio. (You can double-click the .SLN file name in Windows Explorer to open it automatically.)
In Solution Explorer, rename solution name as c255_lab03_win_class.
Rename project name as c255_lab03_win_class.
Rename c255_lab01_main.cpp as c255_lab03_main.cpp.
Save everything by CTRL+SHIFT+S.
Build and run the program. Everything should compile and run without a problem.
To save your work:
- Clean the solution by
```
    Build -> Clean Solution
    File -> Close Solution
```
- Exit Visual Studio
- Run clean_before_submit.bat in c255labs\labs\c255_lab03_win_class to delete hidden .vs subdirectory from the new project.
- Zip c255labs\labs\c255_lab03_win_class folder and save the ZIP archive as a backup copy on a separate drive, thumbdrive or a cloud drive.

3. Using FLUID to create a C++ class

FLUID can create C++ classes that represent a GUI window, its widgets, and the callback functions to handle user interaction.
In this Lab, FLUID generates code for the CFluidWindow class, while our own class, CDemoWindow, provides callback functions for the widgets:
FLUID creates a complete C++ class to handle user interface, including class constructor and other member functions. As before, the code is written in a header file (.H) and implementation file (.CXX):
```
    CFluidWindow.h
    CFluidWindow.cxx
```

4. Getting Started with FLUID Project

FLUID saves the project in a file with extension .fl. It is best to keep the files managed by FLUID in a dedicated subdirectory. Create fluid_project subdirectory under your C++ project directory:
```
    c255labs\labs\c255_lab03_win_class\fluid_project
```

Start FLUID program:


    c255labs\external\fluid\fluid.exe

Use FLUID menu
```
    File/New
```
to create a new project.
Save the project by clicking
```
    File/Save As
```
Point to fluid_project folder and save the project as CFluidWindow.fl.

5. Adding CFluidWindow class

Define a class by clicking FLUID menu
```
    New/Code/Class
```
Name the class CFluidWindow and leave the subclass blank.
Once added, the CFluidWindow class becomes visible in the FLUID browser window.
You can view the C++ code for the FLUID project by clicking
```
    Edit/Show Source Code
```

6. Adding the class constructor

Select CFluidWindow class in the project tree.
Add a new function by selecting FLUID menu
```
    New/Code/Function/Method
```
FLUID understands that we want a constructor when the function name is the same as the class name, so we enter
```
    CFluidWindow()
```
Make sure you declare the constructor public.
Note that if you need a constructor that requires some arguments, you can enter them with the parameter list an the parenteses as usual. For example:

CFluidWindow( type1 param1, type2 param2, ... )

In most cases, the default constructor is all that's needed.
FLUID recognizes the class constructor and generates the appropriate code.

7. Adding the window

Select the CFluidWindow constructor in FLUID project tree, and add a window by clicking
```
    New/Group/Window
```
Resize the window, double-click to open the window properties, switch to C++ tab, and enter the window name, e.g. win_app in the Name: field.
Save the project.

8. Testing what we have so far

To generate C++ code, click FLUID menu
```
    File/Save
```
to save the project.
Click
```
    File/Write code...
```
to generate the C++ source files in fluid_project directory. As before, the two files are project_name.h and project_name.cxx.

9. Adding FLUID-generated .CXX to Visual Studio Project

Open Visual Studio project and add file fluid_project/CFluidWindow.cxx to the list of source files.

Create CDemoWindow.h under project source directory


    c255labs\labs\c255_lab03_win_class\src

Copy and paste the following code into the file:


// CDemoWindow.h

#ifndef _CDEMOWINDOW_H_INCLUDED_
#define _CDEMOWINDOW_H_INCLUDED_

#include "../fluid_project/CFluidWindow.h"

class CDemoWindow : public CFluidWindow {
public:
    void show()
    {
        // Make the window visible:
        win_app->show();
    }
};//class CDemoWindow

#endif // _CDEMOWINDOW_H_INCLUDED_

Modify c255_lab03_main.cpp as follows:


// main.cpp

#include "CDemoWindow.h"

int main()
{
    CDemoWindow window;
    window.show();
    return Fl::run();
}

Compile and test the program.

10. 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.