FLTK

1. FLTK Implementation

The FLTK implementation will follow the base benchmark structure.

In order to build the wanted interface as specified in the mockup we need the fltk toolkit, a window, input boxes to insert text, a button to trigger the insertion of notes and a list to display the result of the notes searching. Here we have the needed imports for that.


In FLTK the browser is the list and we will use the box for the labels.


FLTK allows us to import only the widgets we really use.

{Includes 2:3} +=
#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Input.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_Box.H>
#include <FL/Fl_Hold_Browser.H>

Added to in section 3:1

Redefined in section 5:1

Used in sections 2:3 and 5:1

To have a consistent interface we will use the fixed values for side margin, row spacing and for the widgets height.

{Constants 2:3} +=
#define SIDE_MARGIN 15
#define ROW_SPACE 10
#define WIDGET_HEIGHT 25

Added to in section 2:3

Redefined in section 5:1

Used in sections 2:3 and 5:1

We start by setting the window configuration and triggering the building of the main interface.

{Graphical Initialization 5:1}
Fl_Window *window = new Fl_Window(WIDTH, HEIGHT, TITLE);

build_window();

window->end();
window->show(argc, argv);
status = Fl::run();

Used in sections 2:3 and 5:1

To construct the interface we will build two main areas, the insert area where we input new notes to the rememberfile and the search area where we search and filter notes in the same file.


By having this events we will need some logic to handle the notes submition and the notes search, which will go in the callbacks.

{Window Construction 1}
{Insert Button Callback, 1}
{Search Changed Callback, 1}

void build_window(){
	{Build Insert Area, 1}
	{Build Search Area, 1}
}

Used in section 2:3

In the insert area we want a label at the top, then an input text field to insert notes and a button to insert the note after writing it.

{Build Insert Area 1}
// Top Label
int y_row = ROW_SPACE;
new Fl_Box(WIDTH / 3, y_row, WIDTH / 3, WIDGET_HEIGHT, "Create New");

// Insert Text
y_row += WIDGET_HEIGHT;
int input_w = WIDTH / 4 * 2.5;
input = new Fl_Input(SIDE_MARGIN, y_row, input_w, WIDGET_HEIGHT, "");

// Insert Button
int button_w = WIDTH - (SIDE_MARGIN * 3 + input_w);
Fl_Button * button = new Fl_Button(
	SIDE_MARGIN * 2 + input_w, 
	y_row,
	button_w,
	WIDGET_HEIGHT,
	"Insert" 
);
button->callback(insert_note);

The search area we want a label at the the, an input text field to search the notes and a list which will update when changes are made in the text field. The list starts filled with all the notes so we can start searching.


To tell the list to trigger an event when a change occurs when pass the FL_WHEN_CHANGED flag to the search input.

{Build Search Area 1}
// Search Label
y_row += WIDGET_HEIGHT + ROW_SPACE / 2;
new Fl_Box(WIDTH / 3, y_row, WIDTH / 3, WIDGET_HEIGHT, "Search");

// Search Input text
y_row += WIDGET_HEIGHT;
search_input = new Fl_Input(WIDTH / 4, y_row, WIDTH / 4 * 2, WIDGET_HEIGHT, "");
search_input->when(FL_WHEN_CHANGED);
search_input->callback(search_change);

// Search results list
y_row += WIDGET_HEIGHT + ROW_SPACE;
list = new Fl_Hold_Browser (
	SIDE_MARGIN,
	y_row,
	WIDTH - SIDE_MARGIN * 2,
	HEIGHT - y_row - ROW_SPACE,
	""
);

char text[NOTE_SIZE] = "";
{Search Notes, 2:3}

When the insert button is pressed we want to read the data from the input field and insert it as a note in the remember file. If no data is in the field we can ignore the submition. After inserting the data we will clear the input field for new notes.

{Insert Button Callback 1}
void insert_note(Fl_Widget * w, void * data){
	if(input->size() > 0){
		char text[NOTE_SIZE] = "";
		strncpy(text, input->value(), NOTE_SIZE);
		
		{Insert Note, 2:3}

		if(result == 0){
			input->value("", 0);
		}
	}
}

Used in section 3:1

Since we will need to get the text in the input text field from the button callback we make it global.

{Globals 1}
Fl_Input * input = NULL;

Used in section 2:3

When the text in the search input field changes we clear the notes list and refresh it with data searched using the received text and fill the list with the results.

{Search Changed Callback 1}
void search_change(Fl_Widget * w, void * data){
	char text[NOTE_SIZE] = "";
	strncpy(text, search_input->value(), NOTE_SIZE);

	// Clear current entries
	list->clear();

	{Search Notes, 2:3}
}

Used in section 3:1

To be able to access the search field and the results list from the search callback we will make the search input and the results list global.

{Globals 1} +=
Fl_Input * search_input = NULL;
Fl_Hold_Browser * list = NULL;

Used in section 2:3

For each item obtained as a result from the search in the .remember file we will add it to the results list.

{Display Note 1}
list->add(current_note);

Used in section 2:3

To compile this program we need ftlk1.3.5 libraries installed, and then we can use the fltk-config.

{fltk/Makefile 1}
all:
	gcc `fltk-config --compile main.cpp`
clean:
	rm -f main

2. Results

Obtained Interface


FLTK Notes


FLTK Notes

Evaluation


RAM Usage - 9.84MB


Implementation Dificulty - The drawing of elements in the interface was really easy to start since it uses a simple approach of drawing in specific positions. The management of rows and margins needed manual calculations which would make the application harder to scale or resize if needed. The documentation has all the widgets well documented and they cover most use cases.


Supported Platforms - GNU/Linux, Unix, Windows, macOS, AmigaOS 4


Previous ChapterNext Chapter