From b9ab566a35c820d6dd4b910adc9ad2717c8f8edd Mon Sep 17 00:00:00 2001
From: Albrecht Schlosser This chapter shows how to use the Fast Light User-Interface Designer
-("FLUID") to create your GUIs.Version Numbers
The FLTK version number is stored in a number of compile-time
constants:
Events
Events are identified by an Fl_Event enumeration value. The
diff --git a/documentation/fluid.dox b/documentation/fluid.dox
index 38a82c7c6..95c436277 100644
--- a/documentation/fluid.dox
+++ b/documentation/fluid.dox
@@ -3,7 +3,7 @@
\page fluid 9 - Programming with FLUID
Subchapters:
FLUID can "compile" the .fl file into a +
FLUID can "compile" the .fl file into a .cxx and a .h file. The .cxx file defines all the objects from the .fl file and the .h file declares all the global ones. FLUID also @@ -41,18 +41,17 @@ These .cxx files must #include the .h file or they ca #include the .cxx file so it still appears to be a single source file. -

-Figure 9-1: FLUID organization.
Normally the FLUID file defines one or more functions or classes which output C++ code. Each function defines a one or more FLTK windows, and all the widgets that go inside those windows.
-Widgets created by FLUID are either "named", "complex named" or -"unnamed". A named widget has a legal C++ variable identifier as its +
Widgets created by FLUID are either "named", "complex named" or +"unnamed". A named widget has a legal C++ variable identifier as its name (i.e. only alphanumeric and underscore). In this case FLUID defines a global variable or class member that will point at the widget after the function defining it is called. A complex named object has -punctuation such as '.' or '->' or any other symbols in its name. In +punctuation such as '.' or '->' or any other symbols in its name. In this case FLUID assigns a pointer to the widget to the name, but does not attempt to declare it. This can be used to get the widgets into structures. An unnamed widget has a blank name and no pointer is stored.
@@ -61,18 +60,18 @@ another source file, or you can supply a small piece of C++ source and FLUID will write a private callback function into the .cxx file.-fluid filename.fl &- + \code +fluid filename.fl & + \endcode + to edit the .fl file filename.fl. If the file does not exist you will get an error pop-up, but if you dismiss it you will be editing a blank file of that name. You can run FLUID without any name, in which case you will be editing an unnamed blank setup (but you can use save-as to write it to a file).
You can provide any of the standard FLTK switches before the filename:
-+ + \code -display host:n.n -geometry WxH+X+Y -title windowtitle @@ -82,8 +81,7 @@ save-as to write it to a file). -bg color -bg2 color -scheme schemename -- +\endcode
Changing the colors may be useful to see what your interface will look at if the user calls it with the same switches. @@ -91,7 +89,7 @@ Similarly, using "-scheme plastic" will show how the interface will look using the "plastic" scheme.
In the current version, if you don't put FLUID into the -background with '&' then you will be able to abort FLUID by +background with '&' then you will be able to abort FLUID by typing CTRL-C on the terminal. It will exit immediately, losing any changes.
@@ -104,12 +102,12 @@ FLUID always runs in the background under WIN32.FLUID can also be called as a command-line -"compiler" to create the .cxx and .h +"compiler" to create the .cxx and .h file from a .fl file. To do this type: -
-fluid -c filename.fl -+\code +fluid -c filename.fl +\endcode
This will read the filename.fl file and write filename.cxx and filename.h. Any leading @@ -120,19 +118,19 @@ exit with a non-zero code. You can use the following lines in a makefile to automate the creation of the source and header files: -
+\code my_panels.h my_panels.cxx: my_panels.fl fluid -c my_panels.fl -+\endcode
Most versions of make support rules that cause .fl files to be compiled: -
+\code .SUFFIXES: .fl .cxx .h .fl.h .fl.cxx: - fluid -c $< -+ fluid -c $< +\endcode

-Figure 9-2: CubeView demo.
The window is of class CubeViewUI, and is completely generated by FLUID, including class member functions. The central display of the cube is a separate @@ -172,7 +169,8 @@ CubeViewUI, generated by FLUID.
+
+\code
class CubeView : public Fl_Gl_Window {
public:
CubeView(int x,int y,int w,int h,const char *l=0);
@@ -227,16 +225,17 @@ class CubeView : public Fl_Gl_Window {
float boxv0[3];float boxv1[3]; float boxv2[3];float boxv3[3];
float boxv4[3];float boxv5[3]; float boxv6[3];float boxv7[3];
};
-
+\endcode
+
Here is the CubeView implementation. It is very similar to the -"cube" demo included with FLTK. +"cube" demo included with FLTK. -
+\code #include "CubeView.h" -#include <math.h> +#include+\endcode +CubeView::CubeView(int x,int y,int w,int h,const char *l) : Fl_Gl_Window(x,y,w,h,l) @@ -351,7 +350,8 @@ void CubeView::draw() { glScalef(float(size),float(size),float(size)); drawCube(); glPopMatrix(); }; -
Once you have started FLUID, the first step in defining a class is to -create a new class within FLUID using the New->Code->Class -menu item. Name the class "CubeViewUI" and leave the +create a new class within FLUID using the \em New->Code->Class +menu item. Name the class "CubeViewUI" and leave the subclass blank. We do not need any inheritance for this window. You should see the new class declaration in the FLUID browser window. -

-Figure 9-3: FLUID file for CubeView.
Click on the CubeViewUI class in the FLUID window and add a new method -by selecting New->Code->Function/Method. The name of the +by selecting New->Code->Function/Method. The name of the function will also be CubeViewUI. FLUID will understands that this will be the constructor for the class and will generate the appropriate code. Make sure you declare the constructor public.
Then add a window to the CubeViewUI class. Highlight the name of the constructor in the FLUID browser window and click on -New->Group->Window. In a similar manner add the +New->Group->Window. In a similar manner add the following to the CubeViewUI constructor:
When you are finished you should have something like this: -

-Figure 9-4: FLUID window containing CubeView demo.
We will talk about the show() method that is highlighted shortly. @@ -411,36 +409,35 @@ CubeViewUI.
The CubeView class inherits the Fl_Gl_Window class, which is created in the same way as a Fl_Box widget. Use -New->Other->Box to add a square box to the main window. +New->Other->Box to add a square box to the main window. This will be no ordinary box, however.
The Box properties window will appear. The key to letting CubeViewUI -display CubeView is to enter CubeView in the "Class:" text +display CubeView is to enter CubeView in the "Class:" text entry box. This tells FLUID that it is not an Fl_Box, but a -similar widget with the same constructor. In the "Extra -Code:" field enter #include "CubeView.h" +similar widget with the same constructor. In the "Extra +Code:" field enter #include "CubeView.h"
This #include is important, as we have just included CubeView as a member of CubeViewUI, so any public CubeView methods are now available to CubeViewUI. -

-Figure 9-5: CubeView methods.
Each of the widgets we defined before adding CubeView can have callbacks that call CubeView methods. You can call an external -function or put in a short amount of code in the "Callback" +function or put in a short amount of code in the "Callback" field of the widget panel. For example, the callback for the ypan slider is: -
-cube->pany(((Fl_Slider *)o)->value()); -cube->redraw(); -+\code +cube->pany(((Fl_Slider *)o)->value()); +cube->redraw(); +\endcode -
We call cube->redraw() after changing the value to update +
We call cube->redraw() after changing the value to update the CubeView window. CubeView could easily be modified to do this, but it is nice to keep this exposed in the case where you may want to do more than one view change only redrawing once saves a lot of time. @@ -456,29 +453,28 @@ GUI. An an example add a show function so that CubeViewUI can actually appear on the screen.
Make sure the top level CubeViewUI is selected and select -New->Code->Function/Method. Just use the name +New->Code->Function/Method. Just use the name show(). We don't need a return value here, and since we will not be adding any widgets to this method FLUID will assign it a return type of void. -

-Figure 9-6: CubeView constructor.
Once the new method has been added, highlight its name and select -New->Code->Code. Enter the method's code in the code window. +New->Code->Code. Enter the method's code in the code window.
If you need to add code to initialize class, for example setting initial values of the horizontal and vertical angles in the CubeView, you can simply highlight the Constructor and select -New->Code->Code. Add any required code. +New->Code->Code. Add any required code.
Now that we have completely defined the CubeViewUI, we have to generate the code. There is one last trick to ensure this all works. Open the -preferences dialog from Edit->Preferences. +preferences dialog from Edit->Preferences.
At the bottom of the preferences dialog box is the key: "Include Header from Code". Select that option and set your desired file @@ -498,7 +494,7 @@ all the defined widgets. The name of the .fl file being edited is shown in the window title.
The widgets are stored in a hierarchy. You can open and close a -level by clicking the "triangle" at the left of a widget. +level by clicking the "triangle" at the left of a widget. The leftmost widgets are the parents, and all the widgets listed below them are their children. Parents don't have to have any children.
@@ -517,8 +513,8 @@ layout, navigation, and resize purposes. Tab groups provide the well-known file-card tab interface.Widgets are shown in the browser by either their name (such -as "main_panel" in the example), or by their type -and label (such as "Button "the green"").
+as "main_panel" in the example), or by their type +and label (such as "Button "the green"").You select widgets by clicking on their names, which highlights them (you can also select widgets from any displayed window). You can @@ -544,7 +540,7 @@ window. The menu items are:
changed the current file.FLUID can also read .fd files produced by the Forms -and XForms "fdesign" programs. It is best to +and XForms "fdesign" programs. It is best to File/Merge them instead of opening them. FLUID does not understand everything in a .fd file, and will print a warning message on the controlling terminal for all data it does @@ -573,13 +569,13 @@ file is unnamed then FLUID will ask for a filename.
"Compiles" the data into a .cxx and .h +
"Compiles" the data into a .cxx and .h file. These are exactly the same as the files you get when you run FLUID with the -c switch.
The output file names are the same as the .fl file, with -the leading directory and trailing ".fl" stripped, and -".h" or ".cxx" appended.
+the leading directory and trailing ".fl" stripped, and +".h" or ".cxx" appended.The output file name is the same as the .fl file, -with the leading directory and trailing ".fl" -stripped, and ".txt", ".po", or -".msg" appended depending on the Internationalization Mode.
Deletes the selected widgets and all of their children. -These are saved to a "clipboard" file and can be +These are saved to a "clipboard" file and can be pasted back into any FLUID window.
Copies the selected widgets and all of their children to the -"clipboard" file. +"clipboard" file.
Sorts the selected widgets into left to right, top to bottom order. You need to do this to make navigation keys in FLTK work correctly. You may then fine-tune the sorting with -"Earlier" and "Later". This does not affect +"Earlier" and "Later". This does not affect the positions of windows or functions.
The internationalization options are described later in this chapter. -

-Figure 9-7: FLUID Preferences Window.
When you double-click on a widget or a set of widgets you -will get the "widget attribute panel". +will get the "widget attribute panel".
When you change attributes using this panel, the changes are reflected immediately in the window. It is useful to hit the -"no overlay" button (or type Ctrl+Shift+O) to hide the +"no overlay" button (or type Ctrl+Shift+O) to hide the red overlay so you can see the widgets more accurately, especially when setting the box type. @@ -815,21 +810,21 @@ values for the fields. In this case the value for one of the widgets is shown. But if you change this value, all of the selected widgets are changed to the new value. -
Hitting "OK" makes the changes permanent. +
Hitting "OK" makes the changes permanent. Selecting a different widget also makes the changes permanent. FLUID checks for simple syntax errors such as mismatched parenthesis in any code before saving any text. -
"Revert" or "Cancel" put everything back +
"Revert" or "Cancel" put everything back to when you last brought up the panel or hit OK. However in the -current version of FLUID, changes to "visible" +current version of FLUID, changes to "visible" attributes (such as the color, label, box) are not undone by revert or cancel. Changes to code like the callbacks are undone, however. -

-Figure 9-8: The FLUID widget GUI attributes.
Where to draw the label. The arrows put it on that side of the widget, you can combine the to put it in the corner. The -"box" button puts the label inside the widget, rather +"box" button puts the label inside the widget, rather than outside.
The clip button clips the label to the widget box, the @@ -898,7 +893,7 @@ appear greyed out when deactivated.
The Resizable button controls whether the window is resizeable. In addition all the size changes of a window or -group will go "into" the resizable child. If you have +group will go "into" the resizable child. If you have a large data display surrounded by buttons, you probably want that data area to be resizable. You can get more complex behavior by making invisible boxes the resizable widget, or by @@ -925,9 +920,7 @@ as the class. This can change the icon or window decorations. On most (all?) window managers you will have to close the window and reopen it to see the effect. - -

-Figure 9-9: The FLUID widget Style attributes.
Font to draw the label in. Ignored by symbols, bitmaps, and pixmaps. Your program can change the actual font used by these -"slots" in case you want some font other than the 16 +"slots" in case you want some font other than the 16 provided.
The boxtype to draw as a background for the widget.
Many widgets will work, and draw faster, with a -"frame" instead of a "box". A frame does +"frame" instead of a "box". A frame does not draw the colored interior, leaving whatever was already there visible. Be careful, as FLUID may draw this ok but the real program may leave unwanted stuff inside the widget.
If a window is filled with child widgets, you can speed up redrawing by changing the window's box type to -"NO_BOX". FLUID will display a checkerboard for any +"NO_BOX". FLUID will display a checkerboard for any areas that are not colored in by boxes. Note that this checkerboard is not drawn by the resulting program. Instead random garbage will be displayed.
@@ -987,9 +980,7 @@ when they have the focus.Some widgets display text, such as input fields, pull-down menus, and browsers. - -

-Figure 9-10: The FLUID widget C++ attributes.
In addition, no #include header file is put in the .h file. You must provide a #include line as -the first line of the "Extra Code" which declares your +the first line of the "Extra Code" which declares your subclass.
The class must be similar to the class you are spoofing. It does not have to be a subclass. It is sometimes useful to change this to another FLTK class. Currently the only way to get a double-buffered window is to change this field for the window -to "Fl_Double_Window" and to add "#include -<FL/Fl_Double_Window.h>" to the extra code.
+to "Fl_Double_Window" and to add +\code "#includeName of a variable to declare, and to store a pointer to this
-widget into. This variable will be of type "<class>*". If the name is
+widget into. This variable will be of type " You can name several widgets with "name[0]", "name[1]", "name[2]",
+ You can name several widgets with "name[0]", "name[1]", "name[2]",
etc. This will cause FLUID to declare an array of pointers. The array
is big enough that the highest number found can be stored. All widgets
that in the array must be the same type. If the text starts with a # or the word
-extern then FLUID thinks this is an "include"
+extern then FLUID thinks this is an "include"
line, and it is written to the .h file. If the same
include line occurs several times then only one copy is
written. All other lines are "code" lines. The current
+ All other lines are "code" lines. The current
widget is pointed to by the local variable o. The
window being constructed is pointed to by the local variable
w. You can also access any arguments passed to the
@@ -1067,7 +1059,7 @@ of code. If you enter anything but letters, numbers, and the
underscore then FLUID treats it as code.
A name names a function in your own code. It must be
-declared as void name(<class>*,void*).
A code snippet is inserted into a static function in the .cxx output file. The function prototype is void @@ -1124,7 +1116,7 @@ selection of the widgets instead.
widgets if they are completely overlapped by later widgets. Use the browser to select these widgets. -The selected widgets are shown with a red "overlay" +
The selected widgets are shown with a red "overlay" line around them. You can move the widgets by dragging this box. Or you can resize them by dragging the outer edges and corners. Hold down the Alt key while dragging the mouse to @@ -1134,19 +1126,19 @@ defeat the snap-to-grid effect for fine positioning.
visible by clicking on the file tabs. The child you pick is selected. -The arrow, tab, and shift+tab keys "navigate" the +
The arrow, tab, and shift+tab keys "navigate" the selection. Left, right, tab, or shift+tab move to the next or previous widgets in the hierarchy. Hit the right arrow enough and you will select every widget in the window. Up/down widgets move to the previous/next widgets that overlap horizontally. If the navigation does not seem to work you probably need to -"Sort" the widgets. This is important if you have +"Sort" the widgets. This is important if you have input fields, as FLTK uses the same rules when using arrow keys to move between input fields.
-To "open" a widget, double click it. To open +
To "open" a widget, double click it. To open several widgets select them and then type F1 or pick -"Edit/Open" off the pop-up menu.
+"Edit/Open" off the pop-up menu.Type Ctrl+o to temporarily toggle the overlay off without changing the selection, so you can see the widget borders.
@@ -1185,7 +1177,7 @@ recommend you either put the images in the same directory as theFLUID runs using the default visual of your X server. This may be 8 bits, which will give you dithered images. You may get better results in your actual program by adding the code -"Fl::visual(FL_RGB)" to your code right before the +"Fl::visual(FL_RGB)" to your code right before the first window is displayed.
All widgets with the same image on them share the same code @@ -1202,29 +1194,29 @@ remove the image from all widgets that are using it or re-load the widget, as this may change in future versions! The cropping of inside labels will probably be unchanged.
-To more accurately place images, make a new "box" +
To more accurately place images, make a new "box" widget and put the image in that as the label.
FLUID reads X bitmap files which use C source code to define -a bitmap. Sometimes they are stored with the ".h" or -".bm" extension rather than the standard -".xbm" extension. +a bitmap. Sometimes they are stored with the ".h" or +".bm" extension rather than the standard +".xbm" extension.
FLUID writes code to construct an Fl_Bitmap image and use it to label the widget. The '1' bits in the bitmap are drawn using the label color of the widget. You can change this color in the FLUID widget attributes panel. The '0' bits are transparent.
-The program "bitmap" on the X distribution does an +
The program "bitmap" on the X distribution does an adequate job of editing bitmaps.
FLUID reads X pixmap files as used by the libxpm library. These files use C source code to define a pixmap. The -filenames usually have the ".xpm" extension. +filenames usually have the ".xpm" extension.
FLUID writes code to construct an Fl_Pixmap image and use it to label the widget. The label color of the widget is ignored, @@ -1307,11 +1299,10 @@ fields will then appear to control the include file and function/macro name to use when retrieving the localized label strings. -

-Figure 9-11: Internationalization using GNU gettext.
The "#include" field controls the header file to include for
-I18N; by default this is <libintl.h>, the
+I18N; by default this is \b The "Function" field controls the function (or macro) that
@@ -1331,11 +1322,10 @@ input fields will then appear to control the include file,
catalog file, and set number for retrieving the localized label
strings.
- The "#include" field controls the header file to include for
-I18N; by default this is <nl_types.h>, the
+I18N; by default this is \b The "File" field controls the name of the catalog file
@@ -1347,7 +1337,7 @@ file to be used for all of the windows defined in your
The "Set" field controls the set number in the catalog file.
The default set is 1 and rarely needs to be changed.
-
-Figure 9-12: Internationalization using POSIX catgets.Know limitations
+Known limitations
Declaration Blocks can be used to temporarily block out already
designed code using #if 0 and #endif
--
cgit v1.2.3