mirror of https://github.com/fltk/fltk.git
FLTK - Fast Light Tool Kit - https://github.com/fltk/fltk - cross platform GUI development
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
557 lines
16 KiB
557 lines
16 KiB
<HTML><BODY> |
|
<H1 ALIGN=RIGHT><A NAME=editor>4 - Designing a Simple Text Editor</A></H1> |
|
This chapter takes you through the design of a simple FLTK-based text |
|
editor. |
|
<H2>Determining the Goals of the Text Editor</H2> |
|
Since this will be the first big project you'll be doing with FLTK, |
|
lets define what we want our text editor to do: |
|
<OL> |
|
<LI>Menubar/menus for all functions. </LI> |
|
<LI>Edit a single text file. </LI> |
|
<LI>Load from a file. </LI> |
|
<LI>Save to a file. </LI> |
|
<LI>Cut/copy/delete/paste functions. </LI> |
|
<LI>Search and replace functions. </LI> |
|
<LI>Keep track of when the file has been changed. </LI> |
|
</OL> |
|
<H2>Designing the Main Window</H2> |
|
Now that we've outlined the goals for our editor, we can begin with |
|
the design of our GUI. Obviously the first thing that we need is a |
|
window: |
|
<UL> |
|
<PRE> |
|
Fl_Window *window; |
|
|
|
window = new Fl_Window(640, 480, "Text Editor"); |
|
</PRE> |
|
</UL> |
|
<H2>Variables</H2> |
|
Our text editor will need some global variables to keep track of |
|
things: |
|
<UL> |
|
<PRE> |
|
Fl_Window *window; |
|
Fl_Menu_Bar *menubar; |
|
Fl_Multiline_Input *input; |
|
Fl_Window *replace_dlg; |
|
Fl_Input *replace_find; |
|
Fl_Input *replace_with; |
|
Fl_Button *replace_all; |
|
Fl_Return_Button *replace_next; |
|
Fl_Button *replace_cancel; |
|
|
|
int changed = 0; |
|
char filename[1024] = ""; |
|
char search[256] = ""; |
|
</PRE> |
|
</UL> |
|
The <TT>window</TT> variable is our top-level window described |
|
previously. We'll cover the other variables as we build the |
|
application. |
|
<H2>Menubars and Menus</H2> |
|
The first goal requires us to use a menubar and menus that define each |
|
function the editor needs to perform. The <A href=Fl_Menu_Item.html#Fl_Menu_Item> |
|
<TT>Fl_Menu_Item</TT></A> structure is used to define the menus and |
|
items in a menubar: |
|
<UL> |
|
<PRE> |
|
Fl_Menu_Item menuitems[] = { |
|
{ "&File", 0, 0, 0, FL_SUBMENU }, |
|
{ "&New", FL_ALT + 'n', new_cb }, |
|
{ "&Open...", FL_ALT + 'o', open_cb, 0, FL_MENU_DIVIDER }, |
|
{ "&Save", FL_ALT + 's', save_cb }, |
|
{ "Save &As...", FL_ALT + FL_SHIFT + 's', saveas_cb, 0, FL_MENU_DIVIDER }, |
|
{ "&Quit", FL_ALT + 'q', quit_cb }, |
|
{ 0 }, |
|
|
|
{ "&Edit", 0, 0, 0, FL_SUBMENU }, |
|
{ "&Undo", FL_ALT + 'z', undo_cb, 0, FL_MENU_DIVIDER }, |
|
{ "Cu&t", FL_ALT + 'x', cut_cb }, |
|
{ "&Copy", FL_ALT + 'c', copy_cb }, |
|
{ "&Paste", FL_ALT + 'v', paste_cb }, |
|
{ "&Delete", 0, delete_cb }, |
|
{ 0 }, |
|
|
|
{ "&Search", 0, 0, 0, FL_SUBMENU }, |
|
{ "&Find...", FL_ALT + 'f', find_cb }, |
|
{ "F&ind Again", FL_ALT + 'g', find2_cb }, |
|
{ "&Replace...", FL_ALT + 'r', replace_cb }, |
|
{ "Re&place Again", FL_ALT + 't', replace2_cb }, |
|
{ 0 }, |
|
|
|
{ 0 } |
|
}; |
|
</PRE> |
|
</UL> |
|
Once we have the menus defined we can create the <TT>Fl_Menu_Bar</TT> |
|
widget and assign the menus to it with: |
|
<UL> |
|
<PRE> |
|
Fl_Menu_Bar *menubar = new Fl_Menu_Bar(0, 0, 640, 30); |
|
menubar->menu(menuitems); |
|
</PRE> |
|
</UL> |
|
We'll define the callback functions later. |
|
<H2>Editing the Text</H2> |
|
To keep things simple our text editor will use the <A href=Fl_Multiline_Input.html#Fl_Multiline_Input> |
|
<TT>Fl_Multiline_Input</TT></A> widget to edit the text: |
|
<UL> |
|
<PRE> |
|
Fl_Multiline_Input *input = new Fl_Multiline_Input(0, 30, 640, 450); |
|
</PRE> |
|
</UL> |
|
So that we can keep track of changes to the file, we also want to add |
|
a "changed" callback: |
|
<UL> |
|
<PRE> |
|
input->callback(changed_cb); |
|
input->when(FL_WHEN_CHANGED); |
|
</PRE> |
|
</UL> |
|
Finally, we want to use a mono-spaced font like <TT>FL_COURIER</TT>: |
|
<UL> |
|
<PRE> |
|
input->textfont(FL_COURIER); |
|
</PRE> |
|
</UL> |
|
<H2>The Replace Dialog</H2> |
|
We can use the FLTK convenience functions for many of the editor's |
|
dialogs, however the replace dialog needs its own custom window. To |
|
keep things simple we will have a "find" string, a "replace" string, |
|
and "replace all", "replace next", and "cancel" buttons. The strings |
|
are just <TT>Fl_Input</TT> widgets, the "replace all" and "cancel" |
|
buttons are <TT>Fl_Button</TT> widgets, and the "replace next " button |
|
is a <TT>Fl_Return_Button</TT> widget: |
|
<P ALIGN=CENTER><IMG src=./editor-replace.gif></P> |
|
<UL> |
|
<PRE> |
|
Fl_Window *replace_dlg = new Fl_Window(300, 105, "Replace"); |
|
Fl_Input *replace_find = new Fl_Input(70, 10, 200, 25, "Find:"); |
|
Fl_Input *replace_with = new Fl_Input(70, 40, 200, 25, "Replace:"); |
|
Fl_Button *replace_all = new Fl_Button(10, 70, 90, 25, "Replace All"); |
|
Fl_Button *replace_next = new Fl_Button(105, 70, 120, 25, "Replace Next"); |
|
Fl_Button *replace_cancel = new Fl_Button(230, 70, 60, 25, "Cancel"); |
|
</PRE> |
|
</UL> |
|
<H2>Callbacks</H2> |
|
Now that we've defined the GUI components of our editor, we need to |
|
define our callback functions. |
|
<H3>changed_cb()</H3> |
|
This function will be called whenever the user changes any text in the <TT> |
|
input</TT> widget: |
|
<UL> |
|
<PRE> |
|
void changed_cb(void) { |
|
set_changed(1); |
|
} |
|
</PRE> |
|
</UL> |
|
The <TT>set_changed()</TT> function is one that we will write to set |
|
the changed status on the current file. We're doing it this way |
|
because some of the other callbacks will set the changed status to 0, |
|
and also because we want to show the changed status in the window's |
|
title bar. |
|
<H3>copy_cb()</H3> |
|
This callback function will call <A href=#Fl_Input.copy><TT> |
|
input->copy()</TT></A> to copy the currently selected text to the |
|
clipboard: |
|
<UL> |
|
<PRE> |
|
void copy_cb(void) { |
|
input->copy(); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>cut_cb()</H3> |
|
This callback function will call <A href=Fl_Input_.html#Fl_Input_.copy><TT> |
|
input->copy()</TT></A> to copy the currently selected text to the |
|
clipboard and then <A href=Fl_Input_.html#Fl_Input_.cut><TT>input->cut()</TT> |
|
</A> to delete it: |
|
<UL> |
|
<PRE> |
|
void cut_cb(void) { |
|
input->copy(); |
|
input->cut(); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>delete_cb()</H3> |
|
This callback function will call <A href=Fl_Input_.html#Fl_Input_.cut><TT> |
|
input->cut()</TT></A> to delete the selected text: |
|
<UL> |
|
<PRE> |
|
void delete_cb(void) { |
|
input->cut(); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>find_cb()</H3> |
|
This callback function asks for a search string using the <A href=functions.html#fl_input2> |
|
<TT>fl_input()</TT></A> convenience function and then calls the <TT> |
|
find2_cb()</TT> function to find the string: |
|
<UL> |
|
<PRE> |
|
void find_cb(void) { |
|
const char *val; |
|
|
|
val = fl_input("Search String:", search); |
|
if (val != NULL) { |
|
// User entered a string - go find it! |
|
strcpy(search, val); |
|
find2_cb(); |
|
} |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>find2_cb()</H3> |
|
This function will find the next occurrence of the search string. If |
|
the search string is blank then we want to pop up the search dialog: |
|
<UL> |
|
<PRE> |
|
void find2_cb(void) { |
|
const char *val, *found; |
|
int pos; |
|
|
|
if (search[0] == '\0') { |
|
// Search string is blank; get a new one... |
|
find_cb(); |
|
return; |
|
} |
|
|
|
val = input->value() + input->mark(); |
|
found = strstr(val, search); |
|
|
|
if (found != NULL) { |
|
// Found a match; update the position and mark... |
|
pos = input->mark() + found - val; |
|
input->position(pos, pos + strlen(search)); |
|
} |
|
else fl_alert("No occurrences of \'%s\' found!", search); |
|
} |
|
</PRE> |
|
</UL> |
|
If the search string cannot be found we use the <A href=#fl_alert><TT> |
|
fl_alert()</TT></A> convenience function to display a message to that |
|
effect. |
|
<H3>new_cb()</H3> |
|
This callback function will clear the input widget and current |
|
filename. It also calls the <TT>check_save()</TT> function to give the |
|
user the opportunity to save the current file first as needed: |
|
<UL> |
|
<PRE> |
|
void new_cb(void) { |
|
if (changed) |
|
if (!check_save()) return; |
|
|
|
filename[0] = '\0'; |
|
input->value(""); |
|
set_changed(0); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>open_cb()</H3> |
|
This callback function will ask the user for a filename and then load |
|
the specified file into the input widget and current filename. It also |
|
calls the <TT>check_save()</TT> function to give the user the |
|
opportunity to save the current file first as needed: |
|
<UL> |
|
<PRE> |
|
void open_cb(void) { |
|
char *newfile; |
|
|
|
if (changed) |
|
if (!check_save()) return; |
|
|
|
newfile = fl_file_chooser("Open File?", "*", filename); |
|
if (newfile != NULL) load_file(newfile); |
|
} |
|
</PRE> |
|
</UL> |
|
We call the <TT>load_file()</TT> function to actually load the file. |
|
<H3>paste_cb()</H3> |
|
This callback function will send a FL_PASTE message to the <TT>input</TT> |
|
widget using the <A href=functions.html#paste><TT>Fl::paste()</TT></A> |
|
method: |
|
<UL> |
|
<PRE> |
|
void paste_cb(void) { |
|
Fl::paste(*input); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>quit_cb()</H3> |
|
The quit callback will first see if the current file has been |
|
modified, and if so give the user a chance to save it. It then hides |
|
the main window: |
|
<UL> |
|
<PRE> |
|
void quit_cb(void) { |
|
if (changed) |
|
if (!check_save()) |
|
return; |
|
|
|
window->hide(); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>replace_cb()</H3> |
|
The replace callback just shows the replace dialog: |
|
<UL> |
|
<PRE> |
|
void replace_cb(void) { |
|
replace_dlg->show(); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>replace2_cb()</H3> |
|
This callback will replace the next occurence of the replacement |
|
string. If nothing has been entered for the replacement string, then |
|
the replace dialog is displayed instead: |
|
<UL> |
|
<PRE> |
|
void replace2_cb() { |
|
const char *find, *val, *found; |
|
int pos; |
|
|
|
find = replace_find->value(); |
|
if (find[0] == '\0') { |
|
// Search string is blank; get a new one... |
|
replace_dlg->show(); |
|
return; |
|
} |
|
|
|
val = input->value() + input->position(); |
|
found = strstr(val, find); |
|
|
|
if (found != NULL) { |
|
// Found a match; update the position and replace text... |
|
pos = input->position() + found - val; |
|
input->replace(pos, pos + strlen(find), replace_with->value()); |
|
input->position(pos + strlen(replace_with->value())); |
|
} |
|
else fl_alert("No occurrences of \'%s\' found!", find); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>replall_cb()</H3> |
|
This callback will replace all occurences of the search string in the |
|
file: |
|
<UL> |
|
<PRE> |
|
void replall_cb() { |
|
const char *find, *val, *found; |
|
int pos; |
|
int times; |
|
|
|
find = replace_find->value(); |
|
if (find[0] == '\0') { |
|
// Search string is blank; get a new one... |
|
replace_dlg->show(); |
|
return; |
|
} |
|
|
|
input->position(0); |
|
times = 0; |
|
|
|
// Loop through the whole string |
|
do { |
|
val = input->value() + input->position(); |
|
found = strstr(val, find); |
|
|
|
if (found != NULL) { |
|
// Found a match; update the position and replace text... |
|
times ++; |
|
pos = input->position() + found - val; |
|
input->replace(pos, pos + strlen(find), replace_with->value()); |
|
input->position(pos + strlen(replace_with->value())); |
|
} |
|
} while (found != NULL); |
|
|
|
if (times > 0) fl_message("Replaced %d occurrences.", times); |
|
else fl_alert("No occurrences of \'%s\' found!", find); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>replcan_cb()</H3> |
|
This callback just hides the replace dialog: |
|
<UL> |
|
<PRE> |
|
void replcan_cb() { |
|
replace_dlg->hide(); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>save_cb()</H3> |
|
This callback saves the current file. If the current filename is |
|
blank it calls the "save as" callback: |
|
<UL> |
|
<PRE> |
|
void save_cb(void) { |
|
if (filename[0] == '\0') { |
|
// No filename - get one! |
|
saveas_cb(); |
|
return; |
|
} |
|
else save_file(filename); |
|
} |
|
</PRE> |
|
</UL> |
|
The <TT>save_file()</TT> function saves the current file to the |
|
specified filename. |
|
<H3>saveas_cb()</H3> |
|
This callback asks the user for a filename and saves the current file: |
|
<UL> |
|
<PRE> |
|
void saveas_cb(void) { |
|
char *newfile; |
|
|
|
newfile = fl_file_chooser("Save File As?", "*", filename); |
|
if (newfile != NULL) save_file(newfile); |
|
} |
|
</PRE> |
|
</UL> |
|
The <TT>save_file()</TT> function saves the current file to the |
|
specified filename. |
|
<H3>undo_cb()</H3> |
|
The undo callback just calls the <A href=Fl_Input_.html#Fl_Input_.undo><TT> |
|
undo()</TT></A> method: |
|
<UL> |
|
<PRE> |
|
void undo_cb(void) { |
|
input->undo(); |
|
} |
|
</PRE> |
|
</UL> |
|
<H2>Other Functions</H2> |
|
Now that we've defined the callback functions, we need our support |
|
functions to make it all work: |
|
<H3>check_save()</H3> |
|
This function checks to see if the current file needs to be saved. If |
|
so, it asks the user if they want to save it: |
|
<UL> |
|
<PRE> |
|
int check_save(void) { |
|
if (!changed) return 1; |
|
|
|
if (fl_ask("The current file has not been saved.\n" |
|
"Would you like to save it now?")) { |
|
// Save the file... |
|
save_cb(); |
|
|
|
return !changed; |
|
} |
|
else return (1); |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>load_file()</H3> |
|
This function loads the specified file into the <TT>input</TT> widget: |
|
<UL> |
|
<PRE> |
|
void load_file(char *newfile) { |
|
FILE *fp; |
|
char buffer[8192]; |
|
int nbytes; |
|
int pos; |
|
|
|
input->value(""); |
|
|
|
fp = fopen(newfile, "r"); |
|
if (fp != NULL) { |
|
// Was able to open file; let's read from it... |
|
strcpy(filename, newfile); |
|
pos = 0; |
|
|
|
while ((nbytes = fread(buffer, 1, sizeof(buffer), fp)) > 0) { |
|
input->replace(pos, pos, buffer, nbytes); |
|
pos += nbytes; |
|
} |
|
|
|
fclose(fp); |
|
input->position(0); |
|
set_changed(0); |
|
} else { |
|
// Couldn't open file - say so... |
|
fl_alert("Unable to open \'%s\' for reading!"); |
|
} |
|
} |
|
</PRE> |
|
</UL> |
|
When loading the file we use the <A href=Fl_Input_.html#Fl_Input_.replace> |
|
<TT>input->replace()</TT></A> method to "replace" the text at the end |
|
of the buffer. The <TT>pos</TT> variable keeps track of the end of the |
|
buffer. |
|
<H3>save_file()</H3> |
|
This function saves the current buffer to the specified file: |
|
<UL> |
|
<PRE> |
|
void save_file(char *newfile) { |
|
FILE *fp; |
|
|
|
fp = fopen(newfile, "w"); |
|
if (fp != NULL) { |
|
// Was able to create file; let's write to it... |
|
strcpy(filename, newfile); |
|
|
|
if (fwrite(input->value(), 1, input->size(), fp) < 1) { |
|
fl_alert("Unable to write file!"); |
|
fclose(fp); |
|
return; |
|
} |
|
|
|
fclose(fp); |
|
set_changed(0); |
|
} else { |
|
// Couldn't open file - say so... |
|
fl_alert("Unable to create \'%s\' for writing!"); |
|
} |
|
} |
|
</PRE> |
|
</UL> |
|
<H3>set_changed()</H3> |
|
This function sets the <TT>changed</TT> variable and updates the |
|
window label accordingly: |
|
<UL> |
|
<PRE> |
|
void set_changed(int c) { |
|
if (c != changed) { |
|
char title[1024]; |
|
char *slash; |
|
|
|
changed = c; |
|
|
|
if (filename[0] == '\0') strcpy(title, "Untitled"); |
|
else { |
|
slash = strrchr(filename, '/'); |
|
if (slash == NULL) slash = strrchr(filename, '\\'); |
|
|
|
if (slash != NULL) strcpy(title, slash + 1); |
|
else strcpy(title, filename); |
|
} |
|
|
|
if (changed) strcat(title, " (modified)"); |
|
|
|
window->label(title); |
|
} |
|
} |
|
</PRE> |
|
</UL> |
|
<H2>Compiling the Editor</H2> |
|
The complete source for our text editor can be found in the <TT> |
|
test/editor.cxx</TT> source file. Both the Makefile and Visual C++ |
|
workspace include the necessary rules to build the editor. You can |
|
also compile it using a standard compiler with: |
|
<UL> |
|
<PRE> |
|
CC -o editor editor.cxx -lfltk -lXext -lX11 -lm |
|
</PRE> |
|
</UL> |
|
As noted in <A href=basics.html#basics>Chapter 1</A>, you may need to |
|
include compiler and linker options to tell them where to find the FLTK |
|
library. Also, the <TT>CC</TT> command may also be called <TT>gcc</TT> |
|
or <TT>c++</TT> on your system. |
|
<P>Congratulations, you've just built your own text editor! </P> |
|
<H2>The Final Product</H2> |
|
The final editor window should look like the image below: |
|
<P ALIGN=CENTER><IMG src=./editor.gif></P> |
|
</BODY></HTML>
|
|
|