diff options
| author | Matthias Melcher <github@matthiasm.com> | 2024-04-17 17:51:32 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-04-17 17:51:32 +0200 |
| commit | fd791a068e39e06785adc44693f4c533d3d6c903 (patch) | |
| tree | ef7ff684b38f646165e80c142e454cd7ef077e2e /fluid/documentation/src | |
| parent | b4cf1a9824f2c4ba9596044962d3af36e3ca3d99 (diff) | |
Separate FLUID user documentation, screen shot automation (#936)
* CMake integration, no autotiools
* alignment panel is now correctly renamed to setting panel
* source view is now correctly renamed to code view
* Merge FLTK FLUID docs into FLUID user manual.
* Add two simple entry tutorials
* Remove FLUID chapter form FLTK docs.
* GitHub action to generate HTML and PDF docs and
make the available as artefacts
Diffstat (limited to 'fluid/documentation/src')
47 files changed, 2906 insertions, 0 deletions
diff --git a/fluid/documentation/src/1of7GUIs.png b/fluid/documentation/src/1of7GUIs.png Binary files differnew file mode 100644 index 000000000..a7a98df0f --- /dev/null +++ b/fluid/documentation/src/1of7GUIs.png diff --git a/fluid/documentation/src/cubeview.png b/fluid/documentation/src/cubeview.png Binary files differnew file mode 100644 index 000000000..877be186c --- /dev/null +++ b/fluid/documentation/src/cubeview.png diff --git a/fluid/documentation/src/edit_live_resize.png b/fluid/documentation/src/edit_live_resize.png Binary files differnew file mode 100644 index 000000000..3ff601347 --- /dev/null +++ b/fluid/documentation/src/edit_live_resize.png diff --git a/fluid/documentation/src/edit_outside.png b/fluid/documentation/src/edit_outside.png Binary files differnew file mode 100644 index 000000000..8755a926c --- /dev/null +++ b/fluid/documentation/src/edit_outside.png diff --git a/fluid/documentation/src/edit_overlap.png b/fluid/documentation/src/edit_overlap.png Binary files differnew file mode 100644 index 000000000..0e2264a4e --- /dev/null +++ b/fluid/documentation/src/edit_overlap.png diff --git a/fluid/documentation/src/edit_select_group.png b/fluid/documentation/src/edit_select_group.png Binary files differnew file mode 100644 index 000000000..19599296f --- /dev/null +++ b/fluid/documentation/src/edit_select_group.png diff --git a/fluid/documentation/src/edit_select_multiple.png b/fluid/documentation/src/edit_select_multiple.png Binary files differnew file mode 100644 index 000000000..4df984b3e --- /dev/null +++ b/fluid/documentation/src/edit_select_multiple.png diff --git a/fluid/documentation/src/edit_snap_grid.png b/fluid/documentation/src/edit_snap_grid.png Binary files differnew file mode 100644 index 000000000..0a4a65d17 --- /dev/null +++ b/fluid/documentation/src/edit_snap_grid.png diff --git a/fluid/documentation/src/edit_snap_group.png b/fluid/documentation/src/edit_snap_group.png Binary files differnew file mode 100644 index 000000000..5638ee309 --- /dev/null +++ b/fluid/documentation/src/edit_snap_group.png diff --git a/fluid/documentation/src/edit_snap_sibling.png b/fluid/documentation/src/edit_snap_sibling.png Binary files differnew file mode 100644 index 000000000..c1b0cb4f0 --- /dev/null +++ b/fluid/documentation/src/edit_snap_sibling.png diff --git a/fluid/documentation/src/edit_snap_size.png b/fluid/documentation/src/edit_snap_size.png Binary files differnew file mode 100644 index 000000000..bcc4558ba --- /dev/null +++ b/fluid/documentation/src/edit_snap_size.png diff --git a/fluid/documentation/src/edit_window.png b/fluid/documentation/src/edit_window.png Binary files differnew file mode 100644 index 000000000..fcf325e6d --- /dev/null +++ b/fluid/documentation/src/edit_window.png diff --git a/fluid/documentation/src/flBox.png b/fluid/documentation/src/flBox.png Binary files differnew file mode 100644 index 000000000..acc3e7e4e --- /dev/null +++ b/fluid/documentation/src/flBox.png diff --git a/fluid/documentation/src/flClass.png b/fluid/documentation/src/flClass.png Binary files differnew file mode 100644 index 000000000..ed707b381 --- /dev/null +++ b/fluid/documentation/src/flClass.png diff --git a/fluid/documentation/src/flCode.png b/fluid/documentation/src/flCode.png Binary files differnew file mode 100644 index 000000000..f5510a346 --- /dev/null +++ b/fluid/documentation/src/flCode.png diff --git a/fluid/documentation/src/flCodeBlock.png b/fluid/documentation/src/flCodeBlock.png Binary files differnew file mode 100644 index 000000000..9092d6c0f --- /dev/null +++ b/fluid/documentation/src/flCodeBlock.png diff --git a/fluid/documentation/src/flComment.png b/fluid/documentation/src/flComment.png Binary files differnew file mode 100644 index 000000000..ed3dc5e0a --- /dev/null +++ b/fluid/documentation/src/flComment.png diff --git a/fluid/documentation/src/flData.png b/fluid/documentation/src/flData.png Binary files differnew file mode 100644 index 000000000..bf4848710 --- /dev/null +++ b/fluid/documentation/src/flData.png diff --git a/fluid/documentation/src/flDeclaration.png b/fluid/documentation/src/flDeclaration.png Binary files differnew file mode 100644 index 000000000..992133052 --- /dev/null +++ b/fluid/documentation/src/flDeclaration.png diff --git a/fluid/documentation/src/flDeclarationBlock.png b/fluid/documentation/src/flDeclarationBlock.png Binary files differnew file mode 100644 index 000000000..65f1b692b --- /dev/null +++ b/fluid/documentation/src/flDeclarationBlock.png diff --git a/fluid/documentation/src/flFunction.png b/fluid/documentation/src/flFunction.png Binary files differnew file mode 100644 index 000000000..9c5b7e969 --- /dev/null +++ b/fluid/documentation/src/flFunction.png diff --git a/fluid/documentation/src/flWidgetClass.png b/fluid/documentation/src/flWidgetClass.png Binary files differnew file mode 100644 index 000000000..92fd7d059 --- /dev/null +++ b/fluid/documentation/src/flWidgetClass.png diff --git a/fluid/documentation/src/flWindow.png b/fluid/documentation/src/flWindow.png Binary files differnew file mode 100644 index 000000000..84a8508bb --- /dev/null +++ b/fluid/documentation/src/flWindow.png diff --git a/fluid/documentation/src/fluid-128.png b/fluid/documentation/src/fluid-128.png Binary files differnew file mode 100644 index 000000000..cf9cf406e --- /dev/null +++ b/fluid/documentation/src/fluid-128.png diff --git a/fluid/documentation/src/fluid-title.tex.in b/fluid/documentation/src/fluid-title.tex.in new file mode 100644 index 000000000..f0036d417 --- /dev/null +++ b/fluid/documentation/src/fluid-title.tex.in @@ -0,0 +1,35 @@ +% +% FLUID PDF documentation title page (LaTeX) +% +\begin{titlepage} +\vspace*{4cm} +\begin{center}% +{\Huge FLUID for FLTK @FLTK_VERSION@ User Manual}\\ +\vspace*{2cm} +\begin{DoxyImageNoCaption} + \mbox{\includegraphics[width=4cm]{fluid-128.png}} +\end{DoxyImageNoCaption}\\ +\vspace*{2cm} +{\Large +By F. Costantini, D. Gibson, M. Melcher, \\ +A. Schlosser, B. Spitzak, and M. Sweet.}\\ +\vspace*{1.5cm} +{\large Copyright © 1998 - @YEAR@ by Bill Spitzak and others.}\\ +\vspace*{0.75cm} +{\small +This software and manual are provided under the terms of the GNU Library General Public License.}\\ +{\small +Permission is granted to reproduce this manual or any portion for any purpose,}\\ +{\small +provided this copyright and permission notice are preserved.}\\ +\vspace*{1.5cm} +{\large Generated by Doxygen @DOXY_VERSION@}\\ +\vspace*{0.5cm} +\today{}\\ +\vspace*{0.5cm} +{\small Git revision @GIT_REVISION@}\\ +\end{center} +\end{titlepage} +% +% end of FLUID PDF documentation title page (LaTeX) +% diff --git a/fluid/documentation/src/fluid1.png b/fluid/documentation/src/fluid1.png Binary files differnew file mode 100644 index 000000000..ddfd8ce48 --- /dev/null +++ b/fluid/documentation/src/fluid1.png diff --git a/fluid/documentation/src/fluid2.png b/fluid/documentation/src/fluid2.png Binary files differnew file mode 100644 index 000000000..04382938b --- /dev/null +++ b/fluid/documentation/src/fluid2.png diff --git a/fluid/documentation/src/fluid3-cxx.png b/fluid/documentation/src/fluid3-cxx.png Binary files differnew file mode 100644 index 000000000..5ac96a4b2 --- /dev/null +++ b/fluid/documentation/src/fluid3-cxx.png diff --git a/fluid/documentation/src/fluid4.png b/fluid/documentation/src/fluid4.png Binary files differnew file mode 100644 index 000000000..64b2548b4 --- /dev/null +++ b/fluid/documentation/src/fluid4.png diff --git a/fluid/documentation/src/fluid_flow_chart.png b/fluid/documentation/src/fluid_flow_chart.png Binary files differnew file mode 100644 index 000000000..71d50e21c --- /dev/null +++ b/fluid/documentation/src/fluid_flow_chart.png diff --git a/fluid/documentation/src/fluid_flow_chart_800.png b/fluid/documentation/src/fluid_flow_chart_800.png Binary files differnew file mode 100644 index 000000000..1e5bd7c8a --- /dev/null +++ b/fluid/documentation/src/fluid_flow_chart_800.png diff --git a/fluid/documentation/src/fluid_gui_overview_800.png b/fluid/documentation/src/fluid_gui_overview_800.png Binary files differnew file mode 100644 index 000000000..d61156a43 --- /dev/null +++ b/fluid/documentation/src/fluid_gui_overview_800.png diff --git a/fluid/documentation/src/index.dox b/fluid/documentation/src/index.dox new file mode 100644 index 000000000..984981de3 --- /dev/null +++ b/fluid/documentation/src/index.dox @@ -0,0 +1,118 @@ + + +/** + + \cond FL_HTML_INDEX + + \mainpage FLUID User Manual + + + <TABLE CELLPADDING="8" CELLSPACING="0" SUMMARY="TITLE BAR" WIDTH="100%" BORDER="0"> + <TR> + <TD><CENTER> + \image html fluid-128.png + \image latex fluid-128.png "" width=3cm + </CENTER></TD> + <TD><CENTER> + <B>FLUID 1.4.0 User Manual</B> + + By F. Costantini, D. Gibson, M. Melcher, + A. Schlosser, B. Spitzak and M. Sweet. + + Copyright © 1998 - 2024 by Bill Spitzak and others. + </CENTER></TD> + </TR> + </TABLE> + + <TABLE CELLPADDING="8" CELLSPACING="0" SUMMARY="TITLE BAR" WIDTH="100%" BORDER="0"> + <TR> + <TD style="text-align: center;"> + This software and manual are provided under the terms of the GNU + Library General Public License. Permission is granted to reproduce + this manual or any portion for any purpose, provided this copyright + and permission notice are preserved. + </TD> + </TR> + </TABLE> + + <TABLE CELLPADDING="8" CELLSPACING="0" SUMMARY="Table of Contents" WIDTH="100%" BORDER="0"> + <TR> + <TD ALIGN="LEFT" VALIGN="TOP"> + + \subpage page_introduction + - \ref introduction_workflow + + \subpage page_commandline + - \ref commandline_options + - \ref commandline_passive + - \ref commandline_windows + + \subpage page_interactive + + \subpage page_main_window + - \ref main_titlebar + - \ref main_menubar + - \ref main_widget_browser + - \ref main_menu_items + + \subpage page_widgetbin_panel + + \subpage page_edit_window + - \ref edit_selection + - \ref edit_layout + - \ref edit_snap + - \ref edit_resize + + \subpage page_widget_panel + - \ref widget_panel_gui + - \ref widget_panel_style + - \ref widget_panel_cpp + - \ref widget_panel_grid + - \ref widget_panel_gridc + + </TD> + <TD ALIGN="LEFT" VALIGN="TOP"> + + \subpage page_functional_nodes + - \ref functional_function + - \ref functional_code + - \ref functional_codeblock + - \ref functional_decl + - \ref functional_declblock + - \ref functional_class + - \ref functional_widgetclass + - \ref functional_comment + - \ref functional_data + + \subpage page_codeview_panel + - \ref codeview_find + - \ref codeview_settings + + \subpage page_setting_dialog + - \ref setting_general + - \ref setting_project + - \ref setting_layout + - \ref setting_shell + - \ref setting_i18n + - \ref setting_user + + \subpage page_tutorial + - \ref fluid_hello_world_tutorial + - \ref fluid_1of7guis_tutorial + - \ref fluid_cubeview_tutorial + - \ref fluid_cubeview_ui + - \ref fluid_addconst + - \ref fluid_gencode + + \subpage page_appendices + - \ref appendix_keyboard_shortcuts + - \ref appendix_fileformat + - \ref appendix_licenses + + </TD> + </TR> + </TABLE> + + \endcond + +*/ diff --git a/fluid/documentation/src/main_titlebar.png b/fluid/documentation/src/main_titlebar.png Binary files differnew file mode 100644 index 000000000..128ecddef --- /dev/null +++ b/fluid/documentation/src/main_titlebar.png diff --git a/fluid/documentation/src/page_appendices.dox b/fluid/documentation/src/page_appendices.dox new file mode 100644 index 000000000..4b352ce71 --- /dev/null +++ b/fluid/documentation/src/page_appendices.dox @@ -0,0 +1,92 @@ +/** + + \page page_appendices Appendices + + \tableofcontents + +<!-- ---------------------------------------------------------------------- --> +\section appendix_keyboard_shortcuts Keyboard Shortcuts + +On Apple computers, use the Apple Command key instead of Ctrl. + +| Key Combo | Function | +| :-------: | :------- | +| `F1` | open widget dialog | +| `F2` | move widget earlier in tree | +| `F3` | move widget later in tree | +| `F7` | move widgets into group | +| `F8` | ungroup widgets | +| `Delete` | delete selected widgets | +| `Ctrl-1..9` | load project from history | +| `Ctrl-A` | select all | +| `Shift-Ctrl-A` | select none | +| `Alt-B` | show or hide Widget Bin | +| `Ctrl-C` | copy widgets | +| `Alt-C` | show or hide Code View window | +| `Shift-Ctrl-C` | generate C++ code files | +| `Ctrl-G` | grid setting dialog | +| `Ctrl-I` | merge project file into current project | +| `Ctrl-N` | start a new project, close the current project | +| `Shift-Ctrl-N` | new project from template | +| `Ctrl-O` | open project file | +| `Shift-Ctrl-O` | toggle overlays | +| `Ctrl-P` | print all visible project windows | +| `Alt-P` | open FLUID settings dialog | +| `Ctrl-Q` | quit FLUID | +| `Ctrl-S` | save project | +| `Shift-Ctrl-S` | save project with new name | +| `Ctrl-U` | duplicate selected widgets | +| `Ctrl-V` | paste last copied widgets | +| `Shift-Ctrl-W` | write i18n translation file | +| `Ctrl-X` | cut selected widgets | +| `Alt-X` | show shell command settings | +| `Ctrl-Z` | undo | +| `Shift-Ctrl-Z` | redo | + +<!-- | `Alt-G` | rund last shell command again | --> + + +| Action | Function in Layout Editor | +| :----: | :------------------------ | +| `left mouse button (LMB)` | select one widget | +| `LMB-drag` | select multiple widgets with selection box | +| `Shift-LMB` | extend widget selection | +| `Shift-LMB-Drag` | toggle selection in selection box | +| `Shift-LMB-Drag` | resize window proportionally | +| `Tab` | select next widget | +| `Shift-Tab` | select previous widget | +| `Arrow` | move selected widgets by one unit | +| `Shift-Arrow` | resize by one unit | +| `Ctrl-Arrow` | move by grid units | +| `Shift-Ctrl-Arrow` | resize by grid units | + + +<!-- ---------------------------------------------------------------------- --> + +\section appendix_fileformat .fl File Format + +FLUID edits and saves its state in `.fl` project files. These files are text, +and you can (with care) edit them in a text editor, perhaps to get some special +effects. The `.fl` file format is described in detail in the file +`fluid/README_fl.txt` which is part of the FLTK source code repository. + +<!-- ---------------------------------------------------------------------- --> + +\section appendix_licenses External Licenses + +FLUID uses graphical images based on the Zendesk Garden Stroke icon set: + +[https://github.com/zendeskgarden](https://github.com/zendeskgarden) +Garden Stroke is licensed under the +[Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html). + +FLUID includes templates based on 7GUIs: + +[7GUIs](https://7guis.github.io/7guis/) was created as a spin-off +of the master’s thesis Comparison of Object-Oriented and Functional +Programming for GUI Development by Eugen Kiss at the Human-Computer +Interaction group of the Leibniz Universität Hannover in 2014. + +With kind permission by Prof. Dr. Michael Rohs. + + */ diff --git a/fluid/documentation/src/page_codeview_panel.dox b/fluid/documentation/src/page_codeview_panel.dox new file mode 100644 index 000000000..2fac1a286 --- /dev/null +++ b/fluid/documentation/src/page_codeview_panel.dox @@ -0,0 +1,76 @@ +/** + + \page page_codeview_panel Code View Panel + + \tableofcontents + + # The Code View Panel # + + \image html codeview_panel.png "Code View Panel" + \image latex codeview_panel.png "Code View Panel" width=9cm + + The Code View panel shows all code files that can be generated by FLUID. + + The Code View window can be activated via the main + menu: *Edit* > *Show Source Code* . FLUID will remember the state and + dimensions of the Code View panel. + + If the Auto-Refresh option is selected, the code views will be updated + automatically while editing the project. + + Code View has four tabs. The first tab shows the source code. Inlined data + is omitted in the code view for brevity. + + The second tab shows the content of the header file. The size of inline data + is not calculated and shown as `-1`. + + The third tab shows the list of labels and tooltips as they would be written + to a translation file, using the selected project internationalization method. + + The fourth tab previews the contents of the `.fl` project file. + + <!-- ---------------------------------------------------------------------- --> + \section codeview_find Code View Find + + \image html cv_find_row.png + \image latex cv_find_row.png "Find in Code" width=9cm + + This group of buttons makes it easy to find any text in the Source, Header, or + Project file. Press *Reveal* to select the widget that generated the indicated + line of code. + + __Find__: enter any text you may want to find in the current tab + + __aA__: press this button to activate case sensitive search + + __<<__, __>>__: find the previous or next occurrence + + __Reveal__: clicking this button reveals the widget that generated the + selected code in the widget browser + + <!-- ---------------------------------------------------------------------- --> + \section codeview_settings Code View Settings + + \image html cv_settings_row.png + \image latex cv_settings_row.png "Code View Settings" width=9cm + + __Refresh__: preview the code in the selected tab as it would be generated + for the project in its current state + + __Auto-Refresh__: Automatically refresh the code view when the project changes. + The Auto Refresh is designed to use relatively little resources, even when + continuously updating the selected code tab. + The Code View window can usually stay open and auto refresh during the entire + design process, even for relatively complex GUIs. + + __Auto-Position__: highlight and reposition to the source code generated by + the currently selected widget whenever the selection changes + + __code...__: choose the type of code that is highlighted. In source + files, *static* code is generated by Menu Items, *code* refers to widget + creation code, *code1* is the part before possible children, *code2* is + code generated after children. In header files, *static* highlights + `#include` statements generated by a widget, *code* refers to + the widget declaration. + +*/ diff --git a/fluid/documentation/src/page_commandline.dox b/fluid/documentation/src/page_commandline.dox new file mode 100644 index 000000000..b89c5f3d4 --- /dev/null +++ b/fluid/documentation/src/page_commandline.dox @@ -0,0 +1,124 @@ +/** + + \page page_commandline Command Line + + \tableofcontents + + FLUID can be used in interactive and in command line mode. If launched with + `-c`, followed by a project filename, FLUID will convert the project file + into C++ source files without ever opening a window (or opening an X11 server + connection under Linux/X11). This makes FLUID a great command line tool + for build processes with complex project files that reference + external resources. For example, an image referenced by a `.fl` file can be + modified and recompiled into the application binary without the need to reload + it in an interactive FLUID session. + + <!-- ---------------------------------------------------------------------- --> + \section commandline_options Command Line Options + + To launch FLUID in interactive mode from the command line, you can give it an + optional name of a project file. If no name is given, it will launch with an + empty project, or with the last open project, if so selected in the + application setting dialog. + + The ampersand `&` is optional on Linux machines and lets FLUID run in its + own new process, giving the shell back to the caller. + + ``` + fluid 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. + +FLUID understands all of the standard FLTK switches before the filename: + +``` +-display host:n.n +-geometry WxH+X+Y +-title windowtitle +-name classname +-iconic +-fg color +-bg color +-bg2 color +-scheme schemename +``` + + <!-- ---------------------------------------------------------------------- --> + \section commandline_passive Compile Tool Options + +FLUID can also be called as a command-line only tool to create +the `.cxx` and `.h` file from a `.fl` file directly. To do this type: + +``` +fluid -c filename.fl +``` + +This is the same as the menu __File > Write Code...__ . +It will read the `filename.fl` file and write +`filename.cxx` and `filename.h`. Any leading +directory on `filename.fl` will be stripped, so they are +always written to the current directory. If there are any errors +reading or writing the files, FLUID will print the error and +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: + +``` +my_panels.h my_panels.cxx: my_panels.fl + fluid -c my_panels.fl +``` + +Most versions of "make" support rules that cause `.fl` files to be compiled: + +``` +.SUFFIXES: .fl .cxx .h +.fl.h .fl.cxx: + fluid -c $< +``` + +Check `README.CMake.txt` for examples on how to integrate FLUID into the +`CMake` build process. + +If you use + +\code +fluid -cs filename.fl +\endcode + +FLUID will also write the "strings" for internationalization into the file +'filename.txt', 'filename.po', or 'filename.msg', depending on the chosen type +of i18n (menu: 'File/Write Strings...'). + +Finally there is another option which is useful for program developers +who have many `.fl` files and want to upgrade them to the current FLUID +version. FLUID will read the `filename.fl` file, save it, and exit +immediately. This writes the file with current syntax and options and +the current FLTK version in the header of the file. Use + +``` +fluid -u filename.fl +``` + +to 'upgrade' `filename.fl` . You may combine this with `-c` or `-cs`. + +\note All these commands overwrite existing files w/o warning. You should +particularly take care when running `fluid -u` since this overwrites the +original `.fl` project file. + + <!-- ---------------------------------------------------------------------- --> + \section commandline_windows Windows Specifics + + FLTK uses Linux-style forward slashes to separate path segments in file names. + When running on Windows, FLUID will understand Microsoft drive names and + backward slashes as path separators and convert them internally into + forward slashes. + + Under Windows, binaries can only be defined either as command line tools, or + as interactive apps. FLTK generates two almost identical binaries under + Windows. `fluid.exe` is meant to be used in interactive mode, and + `fluid-cmd.exe` is generated for the command line. Both tools do exactly the + same thing, except `fluid-cmd.exe` can use stdio to output error messages. + +*/ diff --git a/fluid/documentation/src/page_edit_window.dox b/fluid/documentation/src/page_edit_window.dox new file mode 100644 index 000000000..7cbbf5de5 --- /dev/null +++ b/fluid/documentation/src/page_edit_window.dox @@ -0,0 +1,179 @@ +/** + + \page page_edit_window Layout Editor Window + + \tableofcontents + + \image html edit_window.png "Layout Editor Window" + \image latex edit_window.png "Layout Editor Window" width=7cm + + The Layout Editor window is used to interactively add groups and widgets, and + resize and align them. The editor window already looks very much like the + final product that will be built by the FLUID generated C++ source code. + + To create a user interface, first add a function to the project tree by either + clicking the Function icon in the widget bin, or by selecting __New* > Code > + Function/Method__ from the main menu. + + Now just drag the Window icon from the widget bin onto the desktop. FLUID + will generate code that instantiates this window when the function is called. + The return value of the function is a pointer to that window, unless changed + in the Function Panel. Widgets can be added to the window by dragging them from + the widget bin. If a widget is dropped on a group, it will automatically + become a child of that group. + + <!-- ---------------------------------------------------------------------- --> + \section edit_selection Selecting and Moving Widgets + + To move or resize a widget, it must be selected first by clicking on it. + Multiple widgets can be selected by holding down the Shift key when clicking + on them, or by dragging a selection box around widgets. Widgets can also be + selected in the widget browser the main window. Shift-click will select a + range of widgets, Ctrl-click will add widgets to the selection. + + \image html edit_select_multiple.png + \image latex edit_select_multiple.png "Select Multiple Widgets" width=5cm + + Menu items are selected by clicking on the menu button and selecting it from + the popup menu. Multiple menu items can only be selected in the widget browser + in the main application window. + + Once selected, widgets can be moved by clicking and dragging the center + of the selection box. The outer edges allow resizing in one direction, and + dragging the corners resizes widgets horizontally and vertically. + + Widgets can also be repositioned with the arrow keys. Without a shift key, + the selection moves by a single pixel. With the Meta key held down, they + move by the amount indicated in the *Gap* field in the *Widget* section of + the *Layout* setting panel. + + Holding down the Shift key resizes a selected widget by moving the bottom + right corner of the widget. Holding Shift and Meta while pressing arrow keys + resizes by the amount in the *Widget* *Gap* layout setting. + + Children of groups that reposition their contained widgets may behave + differently. Pressing the arrow keys on children of `Fl_Grid` will move + the widget from grid cell to grid cell instead. Resizing a child of `Fl_Flex` + will also mark the child size as `fixed`. + + The tab and shift+tab keys "navigate" the selection. Tab or shift+tab move to + the next or previous widgets in the hierarchy. If the navigation does not seem + to work you probably need to "Sort" the widgets. This is important if you have + input fields, as FLTK uses the same rules when using tab keys + to move between input fields. + + <!-- ---------------------------------------------------------------------- --> + \section edit_layout Layout Helpers + + \image html edit_overlap.png + \image latex edit_overlap.png "Overlapping Widgets" width=5cm + + In FLTK, the behavior of overlapping children of a group is undefined. If + enabled in the settings, FLUID will show overlapping widgets in a group + with a green hash pattern. + + \image html edit_outside.png + \image latex edit_outside.png "Out Of Bounds" width=5cm + + The behavior of widgets that reach outside the bounds of their parent group + is also undefined. They may be visible, but confuse the user when they don't + react to mouse clicks or don't redraw as expected. Outside widgets are marked + with a red hash pattern. + + Note that `Fl_Tile` requires that all children exactly fill the area of the + tile group to function properly. The hash patterns are great helpers to align + children correctly. + + <!-- ---------------------------------------------------------------------- --> + \section edit_snap Layout Alignment + + FLUID layouts are a handful of rules that help creating a clean and consistent + user interface. When repositioning widgets, the mouse pointer snaps to the + closest position based on those rules. A guide line is drawn for the rule that was + applied. Guides and snaps can be disabled with `Ctrl-Shift-G` or via the + *Edit* > *Hide Guides* menu. + + \image html edit_snap_group.png + \image latex edit_snap_group.png "Snap To Group" width=5cm + + If a horizontal or vertical outline snaps to the group, the + border of that group will highlight. If the outline snaps to the margin + of the parent window or group, an additional arrow is drawn. + + Children of `Fl_Tabs` use the top and bottom margin from the *Tabs* + section. If all children use this rule, the margin height will also be the + height of all tabs. + + \image html edit_snap_sibling.png + \image latex edit_snap_sibling.png "Snap To Sibling" width=5cm + + The selection can also snap to the outline of other widgets in the same group, + or to the outline plus the Widget Gap. The outline that triggers the snap + action is highlighted. + + Note that only the first snap guide found is drawn for horizontal and vertical + movement. Multiple rules may apply, but are not highlighted. + + \image html edit_snap_size.png + \image latex edit_snap_size.png "Snap To Size" width=7cm + + Widget size rules define a minimum size and an increment value that may + be applied multiple times to the size. For example, with a minimum width of 25 + and an increment of 10, the widget will snap horizontally to 25, 35, 45, + 55, etc. . + + \image html edit_snap_grid.png + \image latex edit_snap_grid.png "Snap To Grid" width=5cm + + The grid rule is the easiest to explain. All corners of a selection snap to + a fixed grid. If the selected widgets are children of a window, they will snap + to the window grid. If they are in a group, they snap to the group grid. + + <!-- ---------------------------------------------------------------------- --> + \section edit_resize Live Resize + + \image html edit_select_group.png + \image latex edit_select_group.png "Selected Group" width=9cm + + The Resizable system within FLTK is smart, but not always obvious. When + constructing a sophisticated GUI, it is helpful to organize widgets into + multiple levels of nested groups. Sometimes, incorporating an invisible + resizable box can improve the behavior of a group. FLUID offers a Live Resize + feature, allowing designers to experiment with resizing at each level within + the hierarchy independently. + + To test the resizing behavior of a group, begin by selecting it: + + \image html edit_live_resize.png + \image latex edit_live_resize.png "Live Resize" width=7cm + + Click on *Live Resize* in the widget panel. FLUID will generate a new window + with all the resizing attributes inherited from the original design. This + enables the designer to thoroughly test the behavior and limitations, + making adjustments until they are satisfied. This streamlined process makes + it significantly easier to address resizing behavior at a higher level, + particularly once the lower levels are behaving as intended. + + In the example above, the radio buttons are not fixed to the left side of + the group and the text snippet "of the bed" does not stay aligned + to "right side". To fix this, a thin hidden box could be added to the right + edge of the group that holds the radio button which is then marked `resizable`. + + <!-- ---------------------------------------------------------------------- --> + \section edit_limits Limitations + + Almost all FLTK widgets can be edited with FLUID. Notable exceptions include + + - FLUID does not support an `Fl_Window` inside another `Fl_Window` + - widgets inside `Fl_Scroll` can not be created in the hidden areas of the + scrollable rectangle. It is recommended to organize the children in + a separate Widget Class that is derived from `Fl_Scroll` and then inserted + as a single custom widget. + - children of `Fl_Pack` are not automatically reorganized to fit the packing + group. Again, a Widget Class is recommended here. + - if children of `Fl_Grid` are again some kind of group, their internal layout + may not follow changes in the grid widgets. It's best to complete the grid + first, then add children to the grid cells, size them correctly, and + then finally lay out the grid cell children. + +*/ diff --git a/fluid/documentation/src/page_functional_nodes.dox b/fluid/documentation/src/page_functional_nodes.dox new file mode 100644 index 000000000..4407f0e38 --- /dev/null +++ b/fluid/documentation/src/page_functional_nodes.dox @@ -0,0 +1,450 @@ +/** + + \page page_functional_nodes Functional Node Panels + + \tableofcontents + + <!-- ---------------------------------------------------------------------- --> + + \section functional_function Function and Method Panel + +  Functions and Methods + + Fluid can generate C functions, C++ functions, and methods in classes. + Functions can contain widgets to build windows and dialogs. *Code* nodes can + be used to add more source code to a function. + + ### Parents ### + + To generate a function, the function node must be created at the top level or + inside a declaration block. If added inside a class node, this node generates + a method inside that class. + + ### Children ### + + Function nodes can contain code nodes and windows that in turn contain widgets. + If the function node has no children, only a forward declaration will be + created in the header, but no source code will be generated. + + \image html function_panel.png "Function/Method Properties" + \image latex function_panel.png "Function/Method Properties" width=7cm + + ### Declaring a Function ### + + A function node at the top level or inside a declaration block generates a C + or C++ function. + + The *Name* field contains the function name and all arguments. + If the *Name* field is left empty, Fluid will generate a typical 'main()' function. + ``` + // .cxx + int main(int argc, char **argv) { + // code generated by children + w->show(argc, argv); // <-- code generated if function has a child widget + Fl::run(); + } + ``` + + If a function node has a name but no children, a forward declaration is + generated in the header, but the implementation in the source file is omitted. + This is used to reference functions in other modules. + ``` + // .h + void make_window(); + ``` + + If the function contains one or more Code nodes, the implementation code will + be generated. The default return type is `void`. Text in the *Return Type* field + overrides the default type. + ``` + // .cxx + void make_window() { + // code generated by children + } + ``` + + If the function contains one or more windows, a pointer to the first window + will be returned. The default return type will match the window class. + ``` + // .h + Fl_Window* make_window(); + ``` + + ``` + // .cxx + Fl_Window* make_window() { + Fl_Window* w; + // code generated by children: + // w = new Fl_Window(...) + return w; + } + ``` + + #### Options for Functions #### + + Choosing *static* in the pulldown menu will generate the function `static` in + the source file. No forward declaration will be generated in the header file. + ``` + // .cxx + static Fl_Window* make_window() { ... } + ``` + + Choosing *global* will generate a forward declaration of the function in the + header file and no `static` attribute in the source file. + ``` + // .h + void make_window(); + // .cxx + Fl_Window* make_window() { ... } + ``` + + Additionally, + if the *C* option is checked, the function will be declared as a plain C + function in the header file. + ``` + // .h + extern "C" { void my_plain_c_function(); } + // .cxx + void my_plain_c_function() { ... } + ``` + + The *local* option will generate a function in the source file with no `static` + attribute. No forward declaration will be generated in the header file. + ``` + // .cxx + Fl_Window* make_window() { ... } + ``` + + ### Declaring a Method ### + + A function node inside a class node generates a C++ method. If a method node has + no children, the declaration is generated in the header, but no implementation + in the source file. + ``` + // .h + class UserInterface { + public: + void make_window(); + }; + ``` + + If the method contains one or more Code nodes, an implementation will also be + generated. + + ``` + // .cxx + void UserInterface::make_window() { + printf("Hello, World!\n"); + } + ``` + + If the method contains at least one widget, a pointer to the topmost widget + will be returned and the return type will be generated accordingly. + ``` + // .h + class UserInterface { + public: + Fl_Double_Window* make_window(); + }; + ``` + + ``` + // .cxx + Fl_Double_Window* UserInterface::make_window() { + Fl_Double_Window* w; + // code generated by children + return w; + } + ``` + + #### Options for Methods #### + + Class access can be defined with the pulldown menu. It provides a choice of + `private`, `protected`, and `public`. + + Fluid recognizes the keyword `static` or `virtual` at the beginning of the + *return type* and will generate the declaration including the keyword, but will + omit it in the implementation. The return type defaults still apply if there + is no text after the keyword. + + #### Further Options #### + + Users can define a comment text in the *comment* field. The first line of the + comment will be shown in the widget browser. The comment text will be generated + in the source file before the function. + ``` + // .cxx + // + // My multilen comment will be here... . + // Fluid may actually use C style comment markers. + // + Fl_Window* make_window() { + ``` + + FLUID recognizes default values in the argument list and generates them in the + declaration, but omits them in the implementation. + + A short function body can be appended in the *Name* field. With no child, this + creates an inlined function in the header file. + + <!-- ---------------------------------------------------------------------- --> + + \section functional_code C Source Code + +  Code + + Code nodes hold arbitrary C++ code that is copied verbatim into the + source code file. They are commonly used inside Function nodes. + + ### Parents ### + + Code nodes can be added inside Functions, Code Blocks, and Widget Classes. + + \image html code_panel.png "Code Properties" + \image latex code_panel.png "Code Properties" width=9cm + + The Code Properties panel features a syntax-highlighting C++ code editor. + Some basic bracket and braces match checking is done when closing the dialog. + + When inside a Function or Code Block, the C++ code is inserted directly. + Inside a Widget Class, the code will be added to the constructor of the + widget class. + + <!-- ---------------------------------------------------------------------- --> + + \section functional_codeblock Code Block + +  Code Block + + Code Blocks are used when a single function generates different GUI elements + conditionally. + + ### Parents ### + + Code Blocks are used inside functions and methods. + + ### Children ### + + Code Blocks can contain widgets, code, or more code blocks. + + \image html codeblock_panel.png "Code Block Properties" + \image latex codeblock_panel.png "Code Block Properties" width=7cm + + The two fields expect the code before and after the `{ ... }` statements. The + second field can be empty. + + Two consecutive Code Blocks can be used to generate `else`/`else if` + statements by leaving the second field of the first node empty. + + <!-- ---------------------------------------------------------------------- --> + + \section functional_decl Declaration + +  Declaration + + ### Parents ### + + Declarations can be added at the top level or inside classes and widget classes. + + \image html decl_panel.png "Declaration Properties" + \image latex decl_panel.png "Declaration Properties" width=7cm + + Declaration nodes are quite flexible and can be a simple variable declaration + such as `int i;`. But include statements are also allowed, as are type + declarations, and comments. FLUID does its best to understand user intention, + but the generated code should be verified by the user. + + Declarations nodes at the top level can selectively generate code in the header + and /or in the source file. If a declaration is inside a class, the user can + select if the class member is *private*, *protected*, or *public* instead. + + <!-- ---------------------------------------------------------------------- --> + + \section functional_declblock Declaration Block + +  Declaration Block + + Declaration Blocks are a way to selectively compile child nodes via + preprocessor commands, typically `#ifdef TEST` and `#endif`. + + ### Parents ### + + Declaration Blocks can be created at the top level or inside classes. + + ### Children ### + + Declaration Blocks can contain classes, functions, methods, declarations, and + comments. + + \image html declblock_panel.png "Declaration Block Properties" + \image latex declblock_panel.png "Declaration Block Properties" width=7cm + + Users can select if the block is generated in the source file only, or in the + header file as well. The two input fields are used to enter the line of code + before and after the child nodes. Two consecutive Declaration Blocks can be + used to generate `#else`/`#elif` style code by leaving the second field of + the first node empty. + + \note Declaration Blocks are not smart, and child nodes may still generate + unexpected code outside the scope of this block. This may change in future + versions of FLUID. + + <!-- ---------------------------------------------------------------------- --> + + \section functional_class Classes + + Class + + FLUID can generate code to implement C++ classes. Classes can be used to keep + dialogs and groups of UI elements organized. See Widget Class nodes as an + alternative to implement compound widgets. + + ### Parents ### + + Class nodes can be created at top level or inside a Class or Widget + Class node. + + ### Children ### + + Class nodes can contain Functions, Declarations, Widgets, Data, and + other classes. + + \image html class_panel.png "Class Properties" + \image latex class_panel.png "Class Properties" width=7cm + + The *Name:* and *Subclass of:* fields should be set to standard C++ class + names. + + Function nodes inside classes are implemented as methods. Constructors and + destructors are recognized and implemented as such. Inlined data is declared + as a static class member. + + Note that methods without a code or widget node are only declared in the + header file, but no code is generated for them in the source file. + + <!-- ---------------------------------------------------------------------- --> + + \section functional_widgetclass Widget Class + +  Widget Class + + The Widget Class node creates a new widget type by deriving a class from another + widget class. These are often compound widgets derived from `Fl_Group`. A less + automated but more flexible way to implement compound widgets is the Class node. + + ### Parents ### + + Widget Class nodes can be created at top level or inside a Class or Widget + Class node. + + ### Children ### + + Widget Class nodes can contain Functions, Declarations, Widgets, Data, and + other classes. + + ### Properties ### + + Widget Class nodes use the Widget panel to edit their properties. The super + class can be set in the *C++* tab in the *Class* field. If that field is empty, + FLUID derives from `Fl_Group`. + + The Widget Class always creates a constructor with the common widget parameters: + ``` + MyWidget::MyWidget(int X, int Y, int W, int H, const char *L) + : Fl_Group(X, Y, W, H, L) { ... } + ``` + + If the super class name contains the text `Window`, two more constructors + and a common initializer method are created: + ``` + MyWidget::MyWidget(int W, int H, const char *L) : + Fl_Window(0, 0, W, H, L) { ... } + + MyWidget::MyWidget() : + Fl_Window(0, 0, 480, 320, 0) { ... } + + void MyWidget::_MyWidget() { ... } + ``` + + Code and Widget nodes are then added to the constructor. Function nodes are + added as methods to the class. Declarations are added as class members. + Data nodes generate static class members. + + It may be useful to design compound widgets with a variable size. The Widget + Panel provides a choice menu in the *GUI* tab's *Position* row under + *Children*. The options *resize* and *reposition* generate code to fix up + the coordinates of the widget after instantiation. + + Note that methods without a code or widget node are only declared in the + header file, but no code is generated for them in the source file. + + <!-- ---------------------------------------------------------------------- --> + + \section functional_comment Comments + +  Comment + + This node adds a comment block to the generated source code. + + ### Parents ### + + Comment nodes can be added inside Functions, Code Blocks, and Widget Classes. + If a Comment node is the top node in a tree, it will appear in the source + files even before the `// generated by FLUID ...` line. + + \image html comment_panel.png "Comment Properties" + \image latex comment_panel.png "Comment Properties" width=9cm + + Comment blocks are generated by adding `// ` to the start of each line unless + the first line of a comment starts with `/``*`. In that case, FLUID assumes + a correct block comment and will copy the text verbatim. + + Comments can be generated in the header file, the source file, or both. + + FLUID keeps a small database of predefined comments. Users can add reoccurring + comment blocks, license information for example, to this database via the + pulldown menu. + + Comments can also be imported from an external file. + + <!-- ---------------------------------------------------------------------- --> + + \section functional_data Inlined Data + +  Inlined Data + + The Data node makes it easy to inline data from an external file into the + source code. + + ### Parents ### + + Data nodes can be added at the top level or inside Widget Classes, Classes, + and Declaration Blocks. + + \image html data_panel.png "Data Properties" + \image latex data_panel.png "Data Properties" width=7cm + + At top level, or inside a Declaration Block, Data can be declared *in source + file only*, *static in source file*, or *in source and extern in header*. + + If Data is inside a Class node, it is always declared `static`. The user can + select *private*, *protected*, or *public*. + + Data in binary mode will be stored in an `unsigned char` array. The data size + can be queried with `sizeof()`. In Text mode, it will be stored as `const + char*` and terminated with a `NUL` character. + + In compressed mode, data will be compressed with zlib `compress()` and stored + in an `unsigned char` array. A second variable, holding the original data size, + is declared `int` by appending `_size` to the variable name. + + ``` + // .cxx + int myInlineData_size = 12034; + unsigned char myInlineData[380] = { 65, 128, ... }; + ``` + + The Variable Name should be a regular C++ name. The Filename field expects + the path and name of a file, relative to the location of the .fl file. + + */ diff --git a/fluid/documentation/src/page_interactive.dox b/fluid/documentation/src/page_interactive.dox new file mode 100644 index 000000000..58f46b130 --- /dev/null +++ b/fluid/documentation/src/page_interactive.dox @@ -0,0 +1,57 @@ +/** + + \page page_interactive Interactive Mode + + \tableofcontents + + <!-- ---------------------------------------------------------------------- --> + + In interactive mode, FLUID allows users to construct and modify their GUI + design by organizing widgets hierarchically through drag-and-drop actions. + The project windows provide a live preview of the final UI layout. + Most widget attributes can be adjusted in detail using the + \ref page_widget_panel. + + Users can also incorporate C++ coding elements such as functions, code blocks, + and classes. FLUID supports the integration of external sources, for + example images, text, or binary data, by embedding them directly into the + generated source code. + + \image html fluid_gui_overview_800.png + \image latex fluid_gui_overview_800.png "FLUID Overview" + + A typical FLUID session manages the widget hierarchy in the main application + window on the left. The project file name is shown in the title bar. In the + example above, we edit the FLTK _Preferences_ example file + `test/preferences.fl`. + + \see \ref page_main_window + + The layout editor window left of center, titled + "My Preferences" shows the GUI design as it will be generated by the C++ + source file. The widgets "shower", "shave", and "brush teeth" are shown + in their selected state and can now be resized or moved by grabbing any of + the red boxes around the selection frame. + + \see \ref page_edit_window + + To the right, we have the "Widget Properties" panel. We can use this to + edit many more parameters of the selected widget. If multiple widgets are + selected, changes are applied to all of them where appropriate. + + \see \ref page_widget_panel + + The Widget Bin at the top is an optional tool bar (__Edit > Show Widget Bin__, + Alt-B). It gives quick access to all widget and code types. Widgets can + be added by clicking onto the tool, or by dragging them out of the tool box + into the layout editor. + + \see \ref page_widgetbin_panel + + The optional panel on the right shows a live source code preview. This is + very helpful for verifying how changes in the GUI will be reflected in the + generated C++ code (__Edit > Show Code View__, Alt-C). + + \see \ref page_codeview_panel + +*/ diff --git a/fluid/documentation/src/page_introduction.dox b/fluid/documentation/src/page_introduction.dox new file mode 100644 index 000000000..890dc3718 --- /dev/null +++ b/fluid/documentation/src/page_introduction.dox @@ -0,0 +1,69 @@ +/** + + \page page_introduction Introduction + + \tableofcontents + +<!-- ---------------------------------------------------------------------- --> + + \image latex fluid-128.png "FLUID" width=3cm + + FLUID, short for Fast Light User Interface Designer, is a graphical editor + capable of generating C++ source code and header files ready for compilation. + These files ultimately create an FLTK based graphical user interface + for an application. + + The FLTK programming manual is available at https://www.fltk.org/documentation.php . + + This manual provides instructions on launching FLUID as a command line tool + and integrating `.fl` project files into the application build process. + FLTK utilizes _CMake_, but other build systems and IDEs capable of running + external tools can also build applications based on FLUID. + + The majority of the manual focuses on using FLUID as an interactive GUI + design tool. It covers an overview of windows, menu items, and dialog boxes, + detailing how to create visually appealing and consistent user experiences + through drag and drop functionality, a "what you see is what you get" editor, + and alignment tools. The \ref page_setting_dialog will detail the process of initiating + a new project, creating an alignment template, and incorporating + internationalization. + + Several tutorials will explain how to generate small apps in FLUID alone, + and how to create more complex user interfaces, followed by some advanced + subjects like creating integrated reusable widget classes. + + The appendices contain additional technical information for reference. + +<!-- ---------------------------------------------------------------------- --> + + \section introduction_workflow Workflow + + FLUID stores user interface designs within `.fl` project files. These files + are transformed into a binary application through a multi-step process. + Initially, FLUID converts `.fl` files into C++ source and header files. + Subsequently, these files are compiled into object files, which are then + linked with other object files to form an executable binary. + FLUID-generated header files give access to UI elements from other C++ modules + within the project. FLUID can also generate forward declarations to + variables and callback functions that are defined and implemented in other + C++ modules. + + \image html fluid_flow_chart_800.png "FLUID Workflow" + \image latex fluid_flow_chart.png "FLUID Workflow" + + Small applications can be fully designed and developed with FLUID alone. + Users have the option to include shell scripts in FLUID projects, enabling + them to directly call compilers and linkers to produce the binaries. + + For medium-sized projects, a build system such as _CMake_ or an IDE + with integrated build setup is recommended. FLUID in interactive mode + can pre-generate C++ code files for direct compilation by the IDE. + + In larger projects, FLUID projects frequently reference external resources + such as graphics, binary data, and internationalized text. + In such scenarios, it is very useful to distribute the `.fl` project files + instead of prebuilt source files. FLUID in command-line mode can then be + called as an external tool, dynamically generating C++ source code from all + external resources at build time. + + */ diff --git a/fluid/documentation/src/page_main_window.dox b/fluid/documentation/src/page_main_window.dox new file mode 100644 index 000000000..005ce01ec --- /dev/null +++ b/fluid/documentation/src/page_main_window.dox @@ -0,0 +1,371 @@ +/** + + \page page_main_window Main Application Window + + \tableofcontents + + \image html main_window.png "Main Application Window" + \image latex main_window.png "Main Application Window" width=5cm + + A FLUID project is a hierarchy of nodes. Each node holds information to + generate C++ source code which in turn generates the user interface that + is created in the layout editor windows. Projects usually define one or more + functions. These functions can generate one or more + FLTK windows and all the widgets that go inside those windows. + + The FLUID Main Window is split into three parts. The title bar shows the + status of the source and project files. The menu bar provides a wealth of + menu items for all major actions in FLUID. The biggest part of the + app window is the widget browser, a tree structure that lists every code + node and widget in the project. + + <!-- ---------------------------------------------------------------------- --> + \section main_titlebar Title Bar + + \image html main_titlebar.png + \image latex main_titlebar.png "Title Bar" width=5cm + + The title bar shows the status of the project file, _function_panel.fl_ in this + case, followed by an asterisk if the project was changed after it was saved. + If the asterisk shows, FLUID will ask the user to save changes before closing + the project, loading another project, or starting a new one. Pressing `Ctrl-S` + will save the project and make the asterisk disappear. + + The _.cxx_ in the title bar reflects the status of header and source files + in relation to the project. A trailing asterisk indicates that the project and code + files differ. Pressing `Ctrl-Shift-C` to write the code files will make this + asterisk go away. + + \note FLUID currently supports only one open project at a time. + + <!-- ---------------------------------------------------------------------- --> + \section main_menubar Application Menu Bar + + \image html main_menubar.png + \image latex main_menubar.png "Main Menu" width=5cm + + The menu bar is the true control center of FLUID. All actions start here. + + The *File* menu offers the common file operation for FLUID projects. Projects + can be loaded, merged, and saved. *Print* will print a snapshot of all open + project windows. + The *New From Template* item opens a dialog that provides access to a small + number of sample projects. More projects can be added using *Save as Template*. + + Use *Write Code* to write the header and source code files, and *Write Strings* + to write the translation file if one of the internationalization options + is active. + + The *Edit* menu is mainly used to manipulate widgets within the widget tree. + The bottom entries toggle various dialogs and pop up the settings panel. + + The *New* menu holds a list of all widgets that can be used in FLUID. They + are grouped by functionality, very similarly to the widget bin. New widgets are + added inside or right after the selected widget. If the parent widget is not + compatible, FLUID tries to find another location for the widget. If that also + fails, FLUID will pop up a dialog, describing the required parent type. + + The *Layout* menu is used to adjust the position and size of widgets in + relation to each other. + + The *Shell* menu gives quick access to user definable shell scripts. Note that + scripts can be stored inside `.fl` project files. + + \see \ref main_menu_items + + <!-- ---------------------------------------------------------------------- --> + \section main_widget_browser Widget Tree View + + \image html main_browser.png + \image latex main_browser.png "Widget Browser" width=5cm + + Widgets are stored in a hierarchy. You can open and close a level by clicking + the "triangle" at the left of a widget. The leftmost widgets are the + \e parents, and all the widgets listed below them are their \e children. + Parents don't have to have any children. + + The top level of the hierarchy is composed of \e functions and + \e classes. Each of these will produce a single C++ public function + or class in the output <tt>.cxx</tt> file. Calling the function or + instantiating the class will create all of the child widgets. + + The second level of the hierarchy contains the \e windows. + Each of these produces an instance of class Fl_Window. + + Below that are either \e widgets (subclasses of Fl_Widget) or + \e groups of widgets (including other groups). Plain groups are for + layout, navigation, and resize purposes. <i>Tab groups</i> provide the + well-known file-card tab interface. + + Widgets are shown in the browser by either their \e name (such + as "Button emergency_btn" in the example), or by their \e type + and \e label (such as "Double_Window "My Main Window""). + + You \e select widgets by clicking on their names, which highlights + them (you can also select widgets from any displayed window). You can + select many widgets by dragging the mouse across them, or by using + Shift+Click to toggle them on and off. To select no widgets, click in + the blank area under the last widget. Note that hidden children may + be selected even when there is no visual indication of this. + + You \e open widgets by double-clicking on them, or (to open several + widgets you have picked) by typing the F1 key. A control panel will appear + so you can change the widget(s). + + Nodes are moved within their group using + `F2` and `F3`. They can be grouped and ungrouped with `F7` and `F8`, and + relocated by selecting them and using cut, copy, and paste. + + Every line in the browser has the same basic format. The level of indentation + reflects the depth of a node within the tree. + + The triangle appears only in front of nodes that can have children. If it is + white, the group has no children. If it is black, there is at least one child. + If the triangle points to the right, the children are hidden in the tree view. + Click the triangle to reveal all children. + + The icon to the right is a small representation of the base type of the node. + Widgets are gray, windows have a blue title bar, and functional nodes are + green. If the widget is static or private, a padlock icon will appear in the + bottom right corner of the type icon. + + The content of text fields depends on the node type. If a comment is set, it + appears in green over the text. Widgets combine their type (bold black) and + label text (red), or their C++ name in black (not bold). + + All colors and font styles can be customized in the User tab of the + Settings panel. + + <!-- ---------------------------------------------------------------------- --> + \section main_menu_items The Main Menu + +The "New" menu of the main menu bar is duplicated as a pop-up menu on any +layout editor window. The shortcuts for all the menu items work in any +window. The menu items are: + +__File > New (Ctrl+n)__: Close the current project and start a new, empty project. + +__File > Open... (Ctrl+o)__: Discard the current editing session and read in a +different `.fl` project file. You are asked for confirmation if you have +changed the current file. + +FLUID can also read `.fd` files produced by the Forms 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 not understand. You will probably +need to edit the resulting setup to fix these errors. Be careful not to save +the file without changing the name, as FLUID will write over the `.fd` file +with its own format, which fdesign cannot read! + +__File > Insert... (Ctrl+i)__: Insert the contents of another `.fl` file +without changing the name of the current `.fl` file. All the functions (even if +they have the same names as the current ones) are added, and you will have to +use cut/paste to put the widgets where you want. + +__File > Save (Ctrl+s)__: Write the current data to the `.fl` file. If the +file is unnamed then FLUID will ask for a filename. + +__File > Save As... (Ctrl+Shift+S)__: Ask for a new filename and +save the file. + +__File > Save A Copy...__: Save a copy of the `.fl` data to a different file. + +__File > Revert...__: Revert the `.fl` data to the previously saved state. + +__File > New From Template...__: Create a new user interface design from a +previously saved template. This can be useful for including a predefined +enterprise copyright message for projects, or for managing boilerplate code +for repeating project code. + +__File > Save As Template...__: Save the current project as a starting point +for future projects. + +__File > Print... (Ctrl-P)__: Generate a printout containing all currently +open windows within your project. + +__File > Write Code (Ctrl+Shift+C)__: Write the GUI layout as 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. + +__File > Write Strings (Ctrl+Shift+W)__: Write a message file for all of the +text labels and tooltips defined in the current file. + +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 \ref setting_i18n "Internationalization Mode". + +__File > Quit (Ctrl+q)__: Exit FLUID. You are asked for confirmation if you +have changed the current file. + +__Edit > Undo (Ctrl+z)__ and __Redo (Shift+Ctrl+z)__: FLUID saves the project +state for undo and redo operations after every major change. + +__Edit > Cut (Ctrl+x)__: Delete the selected widgets and all of their children. +These are saved to a "clipboard" file and can be pasted back into any +FLUID window. + +__Edit > Copy (Ctrl+c)__: Copy the selected widgets and all of their children +to the "clipboard" file. + +__Edit > Paste (Ctrl+v)__: Paste the widgets from the clipboard file. + +If the widget is a window, it is added to whatever function +is selected, or contained in the current selection. + +If the widget is a normal widget, it is added to whatever +window or group is selected. If none is, it is added to the +window or group that is the parent of the current selection. + +To avoid confusion, it is best to select exactly one widget +before doing a paste. + +Cut/paste is the only way to change the parent of a +widget. + +__Edit > Duplicate (Ctrl-u)__: Duplicate all currently selected widgets and +insert the duplicates after the last selected widget. + +__Edit > Delete__: Delete all selected widgets. + +__Edit > Select All (Ctrl+a)__: Select all widgets in the same group as the +current selection. + +If they are all selected already then this selects all +widgets in that group's parent. Repeatedly typing `Ctrl+a` will +select larger and larger groups of widgets until everything is +selected. + +__Edit > Properties... (F1 or double click)__: Display the current widget in +the widgets panel. If the widget is a window and it is not visible then the +window is shown instead. + +__Edit > Sort__: Sort 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 the positions of windows or functions. + +__Edit > Earlier (F2)__: Move all of the selected widgets one earlier in order +among the children of their parent (if possible). This will affect navigation +order, and if the widgets overlap it will affect how they draw, as the later +widget is drawn on top of the earlier one. You can also use this to reorder +functions, classes, and windows within functions. + +__Edit > Later (F3)__: Move all of the selected widgets one later in order +among the children of their parent (if possible). + +__Edit > Group (F7)__: Create a new Fl_Group and make all the currently +selected widgets children of it. + +__Edit > Ungroup (F8)__: Delete the parent group if all the children of a +group are selected. + +__Edit > Show or Hide Overlays (Ctrl+Shift+O)__: Toggle the display of the +red overlays off, without changing the selection. This makes it easier to see +box borders and how the layout looks. The overlays will be forced back on if +you change the selection. + +__Edit > Show or Hide Guides (Ctrl+Shift+G)__: Guides can be used to arrange a +widget layout easily and consistently. They indicate preferred widget +positions and sizes with user definable margins, grids, and gap sizes. See +the "Layout" tab in the "Settings" dialog, \ref setting_layout. + +This menu item enables and disables guides and the snapping action when dragging +widgets and their borders. + +__Edit > Show or Hide Restricted (Ctrl+Shift+R)__: The behavior of overlapping +widgets in FLTK is undefined. By activating this button, a hatch pattern is +shown, highlighting areas where restricted or undefined behavior may occur. + +__Edit > Show or Hide Widget Bin (Alt+B)__: The widget bin provides quick +access to all widget types supported by FLUID. Layouts can be created by +clicking on elements in the widget bin, or by dragging them from the bin to +their position within the layout. This button shows or hides the widget bin. + +__Edit > Show or Hide Code View (Alt+C)__: Shows or hide +the source code preview window. Any changes to the layout or code in the layout +editor can be previewed and verified immediately in the Code View window. + +__Edit > Settings... (Alt+p)__: Open the application and project settings +dialog: \ref page_setting_dialog + +__New > Code > Function__: Create a new C function. You will be asked for a +name for the function. This name should be a legal C++ function +template, without the return type. You can pass arguments which +can be referred to by code you type into the individual widgets. + +If the function contains any unnamed windows, it will be +declared as returning an Fl_Window pointer. The unnamed window +will be returned from it (more than one unnamed window is +useless). If the function contains only named windows, it will +be declared as returning nothing (\c void ). + +It is possible to make the <tt>.cxx</tt> output be a +self-contained program that can be compiled and executed. This +is done by deleting the function name so +\p main(argc,argv) is used. The function will call +\p show() on all the windows it creates and then call +\p Fl::run(). This can also be used to test resize +behavior or other parts of the user interface. + +You can change the function name by double-clicking on the +function. + +\see \ref functional_function + +__New > Group > Window__: Create a new Fl_Window widget. The window is added +to the currently selected function, or to the function containing the currently +selected item. The window will appear, sized to 480x320. You can resize it to +whatever size you require. + +The widget panel will also appear and is described later in +this chapter. + +__New > ...__: All other items on the New menu are subclasses of +`Fl_Widget`. Creating them will add them to the +currently selected group or window, or the group or window +containing the currently selected widget. The initial +dimensions and position are chosen by copying the current +widget, if possible. + +When you create the widget you will get the widget's control +panel, which is described later in this chapter. + +__Layout > Align > ...__: Align all selected widgets to the first widget in +the selection. + +__Layout > Space Evenly > ...__: Space all selected widgets evenly inside the +selected space. Widgets will be sorted from first to last. + +__Layout > Make Same Size > ...__: Make all selected widgets the same size as +the first selected widget. + +__Layout > Center in Group > ...__: Center all selected widgets relative to +their parent widget + +__Layout > Grid and Size Settings... (Ctrl+g)__: Display the grid settings +panel. See \ref setting_layout . + +This panel controls dimensions that all widgets snap to when you move +and resize them, and for the "snap" which is how far a widget has to be +dragged from its original position to actually change. + +Layout preferences are defined using margins to parent groups and windows, gaps +between widget, and/or by overlaying a grid over a group or window. A layout +comes as a suite of three presets, one for the main application window, one +for dialog boxes, and one for toolboxes. + +FLUID comes with two included layout suites. `FLTK` was used to design FLUID and +other included apps, and `Grid` is a more rigid grid layout. Users can add +more suites, import and export them, and include them into their `.fl` +project files. + +__Shell > Customize... (Alt+x)__: Displays the shell command settings panel. +Shell commands are commonly used to run a 'make' script to compile the FLUID +output. See \ref setting_shell . + +__Help > About FLUID__: Pops up a panel showing the version of FLUID. + +*/ diff --git a/fluid/documentation/src/page_setting_dialog.dox b/fluid/documentation/src/page_setting_dialog.dox new file mode 100644 index 000000000..78b7282ee --- /dev/null +++ b/fluid/documentation/src/page_setting_dialog.dox @@ -0,0 +1,338 @@ +/** + + \page page_setting_dialog Settings Dialog + + \tableofcontents + + <img src="w_settings.png" align="left" hspace="10" vspace="10" /> + \image latex w_settings.png "Settings Dialog" width=7cm + + The *Settings* dialog combines application preferences + and project settings in a compact set of six tabs. + + The *General* tab contains a collection of application wide settings. They are + stored as user preferences. + + The *Project* tab holds settings for the current project. They are saved with + the `.fl` file. + + The *Layout* tab manages databases of preferred widget alignment. These + preferences can be saved per user, or as part of the project, or exported for + use in other projects. + + The *Shell* tab manages a database of quick access shell commands and scripts. + Shell commands can be saved as a user preference and also as part of the + `.fl` project file. + + The *Locale* tab sets the method of internationalizing texts in the project, + commonly used for labels and tooltips. + + The *User* tab manages customization of fonts and colors in the widget browser. + These settings are stored as user preferences. + + <div style="clear:both;"></div> + + <!-- ---------------------------------------------------------------------- --> + \section setting_general Application Settings + + <img src="w_settings_general_tab.png" align="left" hspace="10" vspace="10" /> + \image latex w_settings_general_tab.png "General Settings Tab" width=7cm + + __Scheme__: + + Select one of the graphics schemes built into FLTK. It's helpful + to verify the look of various schemes for an application design. + + __Options__: + + Various options to make life as a developer more convenient. + + __Recent Files__: + + FLUID keeps track of recently opened files. + + __External Editor__: + + Users that don't like the built-in FLUID code editor can enter a shell command + here that opens the content of Code nodes in an external editor. FLUID does + its best to pick up on changed content or when the editor is closed. + + __Overlays__: + + The *Position Guides* are little red arrows that indicate if snap points are + found. See the *Layout* tab for details. *Restricted Areas* are areas where + widgets from within the same group overlap. They are visible in the project + window as a diagonally hashed pattern. *Ghosted Group Outlines* show faint + frames around groups that would otherwise be invisible in the project window. + + <div style="clear:both;"></div> + + <!-- ---------------------------------------------------------------------- --> + \section setting_project Project Settings + + <img src="w_settings_project_tab.png" align="left" hspace="10" vspace="10" /> + \image latex w_settings_project_tab.png "Project Settings Tab" width=7cm + + __Header File__, __Code File__: + + These fields are used to build the file path and name of the generated header + and source file. If one field is empty the value defaults to `.h` and `.cxx` + respectively. If a name starts with a `.`, FLUID assumes that the rest of the + text is a file extension. The code file name is then generated by replacing + the extension of the `.fl` project file name. + + \todo Document the exact way the source and header file paths are calculated + for interactive FLUID, and for FLUID launched from the command line. + + __Include Header from Code__: + + If checked, the statement to include the header file is automatically + generated in one of the first lines of the source file. + + __Menu shortcuts use FL_COMMAND__: + + Setting this option will replace FL_CTRL and FL_META as a modifier for + shortcuts with the platform aware modifiers FL_COMMAND and FL_CONTROL, making + shortcuts more portable between macOS and Windows/Linux. + + __allow Unicode__: + + If unchecked, Unicode characters in strings are escaped. If checked, the Unicode + character is stored in the source code in UTF-8 encoding. + + __avoid early include__: + + FLUID by default includes `<FL/Fl.H>` early in the header file. If this option + is checked, users can include other files before including the FL header. The + user must then include `<FL/Fl.H>` later using a Declaration node. + + <div style="clear:both;"></div> + + <!-- ---------------------------------------------------------------------- --> + \section setting_layout Layout Preferences + + <img src="w_settings_layout_tab.png" align="left" hspace="10" vspace="10" /> + \image latex w_settings_layout_tab.png "Layout Settings Tab" width=7cm + + Layouts are a collection of hints that help when interactively positioning and + resizing widgets in the project window. Layouts come in a set of three for + the application window, for dialog boxes, and for toolboxes. + + __Layout__: + + The layout pulldown menu lets users choose from a list of existing layouts. + The plus button creates a new set of layouts based on the currently selected + layout. + The pulldown menu has items to rename, load, and save layouts. It can also + change the location where the layout is stored. The FLUID beaker is for + layouts that are predefined in FLUID, the portrait icon stores as user + preference, the document + icon stores the layout in the `.fl` file, and the disk icon lets users store + layout in external files. + + __Window Margin and Grid__: + + Snap widget position to that margin in relation to the window. The grid + snaps widgets to fixed intervals. + + __Group Margin and Grid__: + + Snap widget position to that margin in relation to the group. The grid + snaps widgets to fixed intervals relative to the top left of the group. + + __Tabs Margin__: + + Snap the tab inside `Fl_Tabs` to the tab border and the offset given in + Margins. + + __Widget Minimum, Increment, and Gap__: + + _Minimum_ sets the minimal width of a widget. _Increment_ is the size multiplier + added to the _Minimum_ value. _Gap_ is the preferred distance to other widgets + in the same group. + + __Label Font__, __Text Font__: + + The preferred label and text font and size for new widgets. + + <div style="clear:both;"></div> + + <!-- ---------------------------------------------------------------------- --> + \section setting_shell Shell Commands + + <img src="w_settings_shell_tab.png" align="left" hspace="10" vspace="10" /> + \image latex w_settings_shell_tab.png "Shell Settings Tab" width=7cm + + __Shell Command List__: + + A list of all currently available shell commands. The portrait symbol in front + of the name indicates that the script is stored in the user preferences. The + document symbol saves them within the `.fl` project file. + + `[+]` adds a fresh new script to the list, `[++]` duplicates the currently + selected script. `[DEL]` deletes it, and `[v]` offers import and export + functionality. The `[T]` button shows the terminal window, and finally the + `[Run]` button runs the selected shell script. + + Selecting a shell script will fill in the bottom half of the dialog. + + __Name__: + + This is the name of the script as it appears in the Shell Command List. + + __Menu Label__: + + Shell scripts that match the *Condition* flag are also available for quick + access in the *Shell* menu in the main window and via shortcut key + combinations. This is the text that is used for the menu entry. + + __Shortcut__: + + Assign a keyboard shortcut to this shell script for even faster access. FLUID + does not check if a shortcut is already used elsewhere. Try to avoid + collisions, especially when the script is part of a project file. + + __Store__: + + Choose where to store the settings of this shell script, either in the user + preferences or as part of the `.fl` project file. + + __Condition__: + + Shell scripts can be quite different for different platforms hosting FLUID. + This choice limits scripts to specific platforms. Multiple scripts can have + the same shortcut if they have different conditions. + + __Shell Script__: + + This is a text field for the shell script. The `[v]` pulldown menu has a list + of variables that are replaced with the corresponding value before running + the script. The zoom button gives access to a much larger shell script editor. + + The options below are a list of actions that can be executed before running + the script. + + <div style="clear:both;"></div> + + <!-- ---------------------------------------------------------------------- --> + \section setting_i18n Internationalization + + The *Locale* tab can be used to configure optional internationalization. + FLUID supports GNU `gettext` and POSIX `catgets`. + + FLUID supports internationalization (I18N for short) of label + strings and tooltips used by widgets. The GNU gettext option also + supports deferred translation of statically initialized menu item + labels. The setting panel (`Alt+p`) provides access + to the I18N options. + + \image html w_settings_i18n_gnu.png + \image latex w_settings_i18n_gnu.png "I18N With GNU gettext" width=7cm + + FLUID supports three methods of I18N: none, GNU + gettext, and POSIX catgets. The "none" method is the + default and just passes the label strings as-is to the widget + constructors. + + The "GNU gettext" method uses GNU gettext (or a similar + text-based I18N library) to retrieve a localized string before + calling the widget constructor. + + The GNU gettext option adds some preprocessor code to the source file: + ``` + #include <libintl.h> + #ifndef gettext_noop + # define gettext_noop(text) text + #endif + ``` + and the gettext call around strings in the source code: + ``` + new Fl_Button(50, 50, 54, 40, "Button"); + // -> + new Fl_Button(50, 50, 54, 40, gettext("Button")); + ``` + + FLUID's code support for GNU gettext is limited to calling a + function or macro to retrieve the localized label; you still + need to call \p setlocale() and \p textdomain() or + \p bindtextdomain() to select the appropriate language and + message file. + + __Include__: controls the header file to include for +I18N; by default this is \b <libintl.h>, the +standard I18N file for GNU gettext. + + __Conditional__: If this field contains a macro name, i18n will only be + compiled into the product if this macro is defined. The build system should + define the macro only if all required headers and libraries are available. If + the macro is not defined, no headers are included and `gettext` passes text + through untranslated. + + __Function__: controls the function (or macro) that will retrieve the localized + message; by default the \p gettext function will be called. + + __Static Function__: names a macro that will mark static text fields for + extraction with the `xgettext` tool. The default macro name is + \p gettext_noop and will be defined as `#define gettext_noop(text) text` + right after the `#include` statement. FLUID will call `gettext` on static + texts later, after the textdomain was set by the user. + + \see [GNU gettext special cases](https://www.gnu.org/software/gettext/manual/html_node/Special-cases.html) + + \image html w_settings_i18n_psx.png + \image latex w_settings_i18n_psx.png "I18N With POSIX catgets" width=7cm + + The "POSIX catgets" method uses the POSIX catgets function to + retrieve a numbered message from a message catalog before + calling the widget constructor. + + FLUID's code support for POSIX catgets allows you to use a + global message file for all interfaces or a file specific to + each <tt>.fl</tt> file; you still need to call + \p setlocale() to select the appropriate language. + + This option adds some preprocessor code to the source file: + ``` + #include <nl_types.h> + // Initialize I18N stuff now for menus... + #include <locale.h> + static char *_locale = setlocale(LC_MESSAGES, ""); + static nl_catd _catalog = catopen("", 0); + ``` + and the catgets call around strings in the source code: + ``` + new Fl_Button(50, 50, 54, 40, "Button"); + // -> + new Fl_Button(50, 50, 54, 40, catgets(_catalog,1,6,"Button")); + ``` + + __Include__: controls the header file to include for + I18N; by default this is \b <nl_types.h>, the + standard I18N file for POSIX catgets. + + __Conditional__: include the header file only if this preprocessor macro is + defined. + + __Catalog__: controls the name of the catalog file +variable to use when retrieving localized messages; by default +the file field is empty which forces a local (static) catalog +file to be used for all of the windows defined in your +<tt>.fl</tt> file. + + __Set__: controls the set number in the catalog file. +The default set is 1 and rarely needs to be changed. + + <!-- ---------------------------------------------------------------------- --> + \section setting_user User Interface Preferences + + <img src="w_settings_user_tab.png" align="left" hspace="10" vspace="10" /> + \image latex w_settings_user_tab.png "User Settings Tab" width=7cm + + This tab lets users change the font and color of text in the widget browser. + The settings are stored in the user preferences. + + All changes are directly visible in the widget browser. + + <div style="clear:both;"></div> + + */ diff --git a/fluid/documentation/src/page_tutorial.dox b/fluid/documentation/src/page_tutorial.dox new file mode 100644 index 000000000..3f0d48cae --- /dev/null +++ b/fluid/documentation/src/page_tutorial.dox @@ -0,0 +1,534 @@ +/** + + \page page_tutorial Tutorials + + \tableofcontents + +<!-- ---------------------------------------------------------------------- --> + + \section fluid_hello_world_tutorial Hello, World! + + The first FLUID tutorial explains the FLUID basics. It creates a single + `main()` function that opens an application window with a static text box + inside. + + After launching FLUID we want to make sure that two very useful tool windows + are open. + The "Widget Bin" gives quick access to all available widgets and functional + types. It can be opened via the main menu: __Edit > Show Widget Bin__, or + using the shortcut __Alt-B__. + + The second very helpful tool box is the "Code View". The Code View gives + a preview of the code as it will be generated by FLUID. All changes in the + layout or in attributes are reflected immediately in the Code View. + Choose __Edit > Show Code View__ or press __Alt-C__ to get this + toolbox. Make sure that _Auto-Refresh_ and _Auto-Position_ are active in + the Code View. + + Let's start Hello World from scratch. If there is already a previous project + loaded, select __File > New__ or __Ctrl-N__. + + Before we can create a window, we need a "C" function that can be called + when we run the program. Select __New > Code > Function/Method...__ or click on + the + \image{inline} html flFunction.png "Function/Method" + \image{inline} latex flFunction.png + image in the widget bin. + + A function is added as a first line to the widget tree in the main window, + and a "Function/Method Properties" dialog box will pop up. For our Hello World + program, delete all text in the top "Name(args)" text field. If this field + is left empty, FLUID will generate a `main(argc, argv)` function for us. + + \image html fluid4.png "Function/Method Properties Dialog" + \image latex fluid4.png "Function/Method Properties Dialog" width=7cm + + Click OK to apply the changes you made in the Function Properties dialog. + You can get this dialog back at any time by selecting the function in the + main window and pressing __F1__, or by double-clicking it. + + Note that the function will not show up in the Code View yet. FLUID will + not generate code for functions that don't have any content, and only create + a forward declaration in the header file, assuming that the function will + be implemented inside another module. + + Keep the `main` function selected and add an `Fl_Window` to the function by + selecting __New > Group > Window...__, by clicking the + \image{inline} html flWindow.png "Group/Window" + \image{inline} latex flWindow.png + image in the Widget Bin, or by dragging the Group/Window image from the + Widget Bin onto the desktop. + + A new application window will open up on the desktop. The thin red outline + around the window indicates that it is selected. Dragging the red line will + resize the window. Take a look at the Code View: the main function + is now generated, including code to instantiate our `Fl_Window`. + + To edit all the attributes of our window, make sure it is selected and press + __F1__, or double-click the entry in the main FLUID window, or double-click + the window itself. The "Widget Properties" dialog box will pop up. Enter + some text in the "Label:" text box and see how the label is updated immediately + in the window itself, in the widget list, and in the Code View. + + Adding a static text to our window is just as easy. Put an `Fl_Box` into our + window by selecting __New > Other > Box__, or by clicking on the + \image{inline} html flBox.png "Other/Box" + \image{inline} latex flBox.png + image in the Widget Bin, or by dragging the Other/Box image from the + Widget Bin into our newly created window. + + Most importantly, enter the text "Hello, World!" in the "Label:" field + of the Box Widget Properties panel to achieve the goal of this tutorial. Now + is also a great time to experiment with label styles, label fonts, sizes, + colors, etc. . + + Finally, we should save our project as an `.fl` project file somewhere. Once + the project is saved, select __File > Write Code__ or press __Shift-Ctrl-C__ + to write our source code and header file to the same directory. + + Compile the program using a Makefile, CMake file, or fltk-config as described + in the FLTK manual and the `README.txt` files in the FLTK source tree. + +<!-- ---------------------------------------------------------------------- --> + + \section fluid_1of7guis_tutorial 7GUIs, Task 1 + + In the first "Hello World" tutorial, we built an entire application in FLUID. + It's a boring application though that does nothing except quitting when the + close button in the window border is clicked. + + \image html 1of7GUIs.png "Task 1 of 7GUIs" + \image latex 1of7GUIs.png "Task 1 of 7GUIs" width=5cm + + The second tutorial will introduce callbacks by implementing task 1, "Counter", + of 7GUIs. 7GUIs has been created as a spin-off of my master’s thesis + Comparison of Object-Oriented and Functional Programming for GUI Development + at the Human-Computer Interaction group of the Leibniz Universität Hannover + in 2014. 7GUIs defines seven tasks that represent typical challenges in GUI + programming. https://eugenkiss.github.io/7guis/ . + + Task 1 requires "Understanding the basic ideas of a language/toolkit. The + task is to build a frame containing a label or read-only textfield T and a + button B. Initially, the value in T is “0” and each click of B increases the + value in T by one." + + Our knowledge from tutorial 1 is enough to generate the `main()` function, and + add an `Fl_Window`, an `Fl_Output`, and an `Fl_Button`. To make life easy, + FLUID comes with a built-in template for this tutorial. Just select + __File > New from Template...__ and double-click "1of7GUIs" in the Template + Panel. + + We will need to reference the output widget in our callback, so let's assign a + pointer to the widget to a global variable and give that variable a name. + Open the Widget Properties dialog by double-clicking the output widget. + Change to the "C++" tab, and enter "`counter_widget`" in the "Name:" field. + + The "Count" button is the active element in our application. To tell the + app what to do when the user clicks the button, we create a callback function + for that button. Open the widget properties dialog for the button. + In the "C++" tab, we find the input field "Callback:". + + The callback is called exactly once every time the user clicks the button. Our + strategy here is to read the current value from the `counter_widget`, + increment it by 1, and write it back to `counter_widget`. + The FLTK documentation tells us that we can use `Fl_Output::ivalue()` to get + text in `Fl_Output` as an integer, and we can write it back by calling + `Fl_Output::value(int)`. When the value is changed, FLTK will automatically + redraw the output widget for us. So here is the callback code: + + ``` + int i = counter_widget->ivalue(); + i++; + counter_widget->value(i); + ``` + + That's it. This is a complete interactive desktop application. Compile, link, + run, and test it to see how it works. + +<!-- ---------------------------------------------------------------------- --> + +\section fluid_cubeview_tutorial Cube View + +This tutorial will show you how to generate a complete user interface +class with FLUID that is used for the CubeView program provided with FLTK. + +\image html cubeview.png "CubeView demo" +\image latex cubeview.png "CubeView demo" width=7cm + +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 subclass of Fl_Gl_Window called CubeView. CubeViewUI manages +CubeView using callbacks from the various sliders and rollers to +manipulate the viewing angle and zoom of CubeView. + +At the completion of this tutorial you will (hopefully) understand how to: + +-# Use FLUID to create a complete user interface class, including + constructor and any member functions necessary. +-# Use FLUID to set callback member functions of custom widget classes. +-# Subclass an Fl_Gl_Window to suit your purposes. + +\subsection fluid_cubeview The CubeView Class + +The CubeView class is a subclass of Fl_Gl_Window. It has methods for +setting the zoom, the \e x and \e y pan, and the rotation angle +about the \e x and \e y axes. + +You can safely skip this section as long as you realize that CubeView +is a sublass of Fl_Gl_Window and will respond to calls from +CubeViewUI, generated by FLUID. + +\par The CubeView Class Definition + +Here is the CubeView class definition, as given by its header file +"test/CubeView.h": +<br> + +<!-- Code copied from test/CubeView.h --> +\code +#include <FL/Fl.H> +#include <FL/Fl_Gl_Window.H> +#include <FL/gl.h> + +class CubeView : public Fl_Gl_Window { + +public: + CubeView(int x, int y, int w, int h, const char *l = 0); + + // This value determines the scaling factor used to draw the cube. + double size; + + /* Set the rotation about the vertical (y) axis. + * + * This function is called by the horizontal roller in + * CubeViewUI and the initialize button in CubeViewUI. + */ + void v_angle(double angle) { vAng = angle; } + + // Return the rotation about the vertical (y) axis. + double v_angle() const { return vAng; } + + /* Set the rotation about the horizontal (x) axis. + * + * This function is called by the vertical roller in + * CubeViewUI and the initialize button in CubeViewUI. + */ + + void h_angle(double angle) { hAng = angle; } + + // The rotation about the horizontal (x) axis. + double h_angle() const { return hAng; } + + /* Sets the x shift of the cube view camera. + * + * This function is called by the slider in CubeViewUI + * and the initialize button in CubeViewUI. + */ + void panx(double x) { xshift = x; } + + /* Sets the y shift of the cube view camera. + * + * This function is called by the slider in CubeViewUI + * and the initialize button in CubeViewUI. + */ + void pany(double y) { yshift = y; } + + /* The widget class draw() override. + * + * The draw() function initializes Gl for another round of + * drawing, then calls specialized functions for drawing each + * of the entities displayed in the cube view. + */ + void draw(); + +private: + /* Draw the cube boundaries. + * + * Draw the faces of the cube using the boxv[] vertices, + * using GL_LINE_LOOP for the faces. + */ + void drawCube(); + + double vAng, hAng; + double xshift, yshift; + + 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 + +\par The CubeView Class Implementation + +Here is the CubeView implementation. It is very similar to the +"CubeView" demo included with FLTK. +<br> + +<!-- Code copied from test/CubeView.cxx --> +\code +#include "CubeView.h" +#include <math.h> + +CubeView::CubeView(int x, int y, int w, int h, const char *l) + : Fl_Gl_Window(x, y, w, h, l) +{ + Fl::use_high_res_GL(1); + vAng = 0.0; + hAng = 0.0; + size = 10.0; + xshift = 0.0; + yshift = 0.0; + + /* The cube definition. These are the vertices of a unit cube + * centered on the origin.*/ + + boxv0[0] = -0.5; boxv0[1] = -0.5; boxv0[2] = -0.5; + boxv1[0] = 0.5; boxv1[1] = -0.5; boxv1[2] = -0.5; + boxv2[0] = 0.5; boxv2[1] = 0.5; boxv2[2] = -0.5; + boxv3[0] = -0.5; boxv3[1] = 0.5; boxv3[2] = -0.5; + boxv4[0] = -0.5; boxv4[1] = -0.5; boxv4[2] = 0.5; + boxv5[0] = 0.5; boxv5[1] = -0.5; boxv5[2] = 0.5; + boxv6[0] = 0.5; boxv6[1] = 0.5; boxv6[2] = 0.5; + boxv7[0] = -0.5; boxv7[1] = 0.5; boxv7[2] = 0.5; +} + +void CubeView::drawCube() { +/* Draw a colored cube */ +#define ALPHA 0.5 + glShadeModel(GL_FLAT); + + glBegin(GL_QUADS); + glColor4f(0.0, 0.0, 1.0, ALPHA); + glVertex3fv(boxv0); + glVertex3fv(boxv1); + glVertex3fv(boxv2); + glVertex3fv(boxv3); + + glColor4f(1.0, 1.0, 0.0, ALPHA); + glVertex3fv(boxv0); + glVertex3fv(boxv4); + glVertex3fv(boxv5); + glVertex3fv(boxv1); + + glColor4f(0.0, 1.0, 1.0, ALPHA); + glVertex3fv(boxv2); + glVertex3fv(boxv6); + glVertex3fv(boxv7); + glVertex3fv(boxv3); + + glColor4f(1.0, 0.0, 0.0, ALPHA); + glVertex3fv(boxv4); + glVertex3fv(boxv5); + glVertex3fv(boxv6); + glVertex3fv(boxv7); + + glColor4f(1.0, 0.0, 1.0, ALPHA); + glVertex3fv(boxv0); + glVertex3fv(boxv3); + glVertex3fv(boxv7); + glVertex3fv(boxv4); + + glColor4f(0.0, 1.0, 0.0, ALPHA); + glVertex3fv(boxv1); + glVertex3fv(boxv5); + glVertex3fv(boxv6); + glVertex3fv(boxv2); + glEnd(); + + glColor3f(1.0, 1.0, 1.0); + glBegin(GL_LINES); + glVertex3fv(boxv0); + glVertex3fv(boxv1); + + glVertex3fv(boxv1); + glVertex3fv(boxv2); + + glVertex3fv(boxv2); + glVertex3fv(boxv3); + + glVertex3fv(boxv3); + glVertex3fv(boxv0); + + glVertex3fv(boxv4); + glVertex3fv(boxv5); + + glVertex3fv(boxv5); + glVertex3fv(boxv6); + + glVertex3fv(boxv6); + glVertex3fv(boxv7); + + glVertex3fv(boxv7); + glVertex3fv(boxv4); + + glVertex3fv(boxv0); + glVertex3fv(boxv4); + + glVertex3fv(boxv1); + glVertex3fv(boxv5); + + glVertex3fv(boxv2); + glVertex3fv(boxv6); + + glVertex3fv(boxv3); + glVertex3fv(boxv7); + glEnd(); +} // drawCube + +void CubeView::draw() { + if (!valid()) { + glLoadIdentity(); + glViewport(0, 0, pixel_w(), pixel_h()); + glOrtho(-10, 10, -10, 10, -20050, 10000); + glEnable(GL_BLEND); + glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); + } + + glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); + + glPushMatrix(); + + glTranslatef((GLfloat)xshift, (GLfloat)yshift, 0); + glRotatef((GLfloat)hAng, 0, 1, 0); + glRotatef((GLfloat)vAng, 1, 0, 0); + glScalef(float(size), float(size), float(size)); + + drawCube(); + + glPopMatrix(); +} +\endcode + +\subsection fluid_cubeview_ui The CubeViewUI Class + +We will completely construct a window to display and control the +CubeView defined in the previous section using FLUID. + +\par Defining the CubeViewUI Class + +Once you have started FLUID, the first step in defining a class is to +create a new class within FLUID using the <b>New->Code->Class</b> +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. + +\image html fluid1.png "FLUID file for CubeView" +\image latex fluid1.png "FLUID file for CubeView" width=7cm + +\par Adding the Class Constructor + +Click on the CubeViewUI class in the FLUID window and add a new method +by selecting <b>New->Code->Function/Method.</b> The name of the +function will also be CubeViewUI. FLUID will understand 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 +<b>New->Group->Window</b>. In a similar manner add the +following to the CubeViewUI constructor: + +\li A horizontal roller named \p hrot +\li A vertical roller named \p vrot +\li A horizontal slider named \p xpan +\li A vertical slider named \p ypan +\li A horizontal value slider named \p zoom + +None of these additions need be public. And they shouldn't be +unless you plan to expose them as part of the interface for +CubeViewUI. + +When you are finished you should have something like this: + +\image html fluid2.png "FLUID window containing CubeView demo" +\image latex fluid2.png "FLUID window containing CubeView demo" width=7cm + +We will talk about the \p show() method that is highlighted +shortly. + +\par Adding the CubeView Widget + +What we have is nice, but does little to show our cube. We have already +defined the CubeView class and we would like to show it within the +CubeViewUI. + +The CubeView class inherits the Fl_Gl_Window class, which +is created in the same way as an Fl_Box widget. Use +<b>New->Other->Box</b> 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 <b>Class:</b> text +entry box. This tells FLUID that it is not an Fl_Box, but a +similar widget with the same constructor. + +In the <b>Extra Code:</b> field enter <tt>\#include "CubeView.h"</tt> + +This \p \#include is important, as we have just included +CubeView as a member of CubeViewUI, so any public CubeView methods are +now available to CubeViewUI. + +\image html fluid3-cxx.png "CubeView methods" +\image latex fluid3-cxx.png "CubeView methods" width=7cm + +\par Defining the Callbacks + +Each of the widgets we defined before adding CubeView can have +callbacks that call CubeView methods. You can call an external +function or put a short amount of code in the <b>Callback</b> +field of the widget panel. For example, the callback for the +\p ypan slider is: + +\code +cube->pany(((Fl_Slider *)o)->value()); +cube->redraw(); +\endcode + +We call <tt>cube->redraw()</tt> 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. + +There is no reason to wait until after you have added CubeView to +enter these callbacks. FLUID assumes you are smart enough not to refer +to members or functions that don't exist. + +\par Adding a Class Method + +You can add class methods within FLUID that have nothing to do with the +GUI. As 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 +<b>New->Code->Function/Method</b>. Just use the name +\p 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 \p void. + +\image html fluid4.png "CubeView constructor" +\image latex fluid4.png "CubeView constructor" width=7cm + +Once the new method has been added, highlight its name and select +<b>New->Code->Code.</b> Enter the method's code in the code window. + +\subsection fluid_addconst Adding Constructor Initialization Code + +If you need to add code to initialize a class, for example setting +initial values of the horizontal and vertical angles in the +CubeView, you can simply highlight the constructor and select +<b>New->Code->Code</b>. Add any required code. + +\subsection fluid_gencode Generating the 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 <b>Edit->Preferences</b>. + +At the bottom of the preferences dialog box is the key: +<b>"Include Header from Code"</b>. +Select that option and set your desired file +extensions and you are in business. You can include the CubeViewUI.h +(or whatever extension you prefer) as you would any other C++ class. + +*/ diff --git a/fluid/documentation/src/page_widget_panel.dox b/fluid/documentation/src/page_widget_panel.dox new file mode 100644 index 000000000..158f4663b --- /dev/null +++ b/fluid/documentation/src/page_widget_panel.dox @@ -0,0 +1,429 @@ +/** + + \page page_widget_panel Widget Properties Panel + + \tableofcontents + + # The Widget Properties Panel # + + \image html widget_panel.png "Widget Properties" + \image latex widget_panel.png "Widget Properties" width=9cm + + This panel is used to edit the properties of the currently selected widgets. + It can be opened by double-clicking on a widget or by pressing `F1`. + + When you change attributes using this panel, the changes are + reflected immediately in the window. It is useful to hit the + "Hide Overlays" 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. + + One or more widgets can be selected at the same time, and most attribute + changes will be applied to the entire selection. + Depending on the selected widget types, some properties may + be grayed out or may not be visible. + + All changes in the widget panel are immediately applied to all selected + widgets and their effect can be seen in the project window. It can be very + useful to keep the *Code View* window open at all times. All code changes + appear instantly for all generated files if *Auto-Refresh* is active. + + FLUID generates only code for properties that differ from their default + setting. If a widget class is derived from another class, FLUID can't know + the defaults and will generate code for all attributes instead. + + \image html wLiveMode.png + \image latex wLiveMode.png "" width=9cm + + Correctly resizing a window can be a complex task. It is easier to check + resizing behavior on a more local level first. + To use *Live Resize*, select any group or window in your project. FLUID creates + a resizable clone of that part of your design to try out resizing behavior + of that group only. + + The widget panel itself is resizable to make more room for entering code + and long texts. + + <!-- ---------------------------------------------------------------------- --> + \section widget_panel_gui The GUI Tab + + \image html wp_gui_tab.png + \image latex wp_gui_tab.png "" width=9cm + + The widget panel has three standard tabs that apply to all widgets. Some widget + types, `Fl_Grid` and children of `Fl_Grid`, will create additional + tabs with more options. + + The GUI tab controls basic GUI settings, including label text and widget size. + + \image html wp_gui_label.png + \image latex wp_gui_label.png "" width=7cm + + The *Label* field can be any Unicode string and is stored as a static text. + If internationalization is enabled, the corresponding modifiers are + added. Labels can span multiple lines by pressing `Ctrl-J` to insert a newline + (NL) character. + + The `@` character adds a symbol to the label. See *Labels and Label Types* + in the FLTK documentation. + + The pulldown menu offers some additional rendering styles for the label. + + \image html wp_gui_image.png + \image latex wp_gui_image.png "" width=7cm + + Add an image to the widget label here. The second row takes an optional image + for rendering a deactivated widget. + + The image path must be relative to the location of the `.fl` file and not + necessarily the current directory. It is helpful to keep images in the same + directory as the `.fl` file. + + The image data is inlined into the source code. If many widgets share the same + image then only one copy is written. Since the image data is embedded in the + generated source code, you need only distribute the C++ code and not the + image files themselves. The `.fl` project files however store only the image + file name, so you will need the image files as well to read a project file. + + FLUID can read XBM bitmap files, XPM pixmaps with a transparency channel, and + all other types supported by the FLTK image extension. FLUID stores images + as bitmaps or RGB data by default. If *compressed* is selected in the image + properties field, the image is stored in its original format, and + the FLTK-images library must be linked to decompress the image at runtime. + + Images are stored at their original resolution. The image properties dialog + provides *Scale* settings to scale the image before rendering to screen. + To make full use of high-dpi screen support, images should be stored at double + resolution and then scaled to FLTK coordinates. This gives FLTK the chance to + fall back to the full size image for high-dpi screens. + + \image html wp_gui_alignment.png + \image latex wp_gui_alignment.png "" width=7cm + + Control alignment of the label in relation to the widget position and size as + well as the relation between the image and the label. The box on the right + toggles between inside and outside label alignment. + + \image html wp_gui_size.png + \image latex wp_gui_size.png "" width=7cm + + Control the size and position of a widget here. The input fields react to + vertical scroll wheel input for interactive positioning. + + All fields understand basic math. They are evaluated after the formula is + entered and the result is stored in the respective properties. Formulas can + also contain a number of variables. The *x* input can handle the variables + `x` for its own position, `px` for the parent position, `sx` for the previous + sibling, `cx` for the leftmost x position of all children, and `i`, which is a + counter through all selected widgets. + + The formula `x+10` in the *x* field moves all selected widgets 10 pixels to + the right. `100+25*i` in the *y* field arranges all widgets vertically + starting at 100 with 25 pixels distance. + +| Name | Value | +| ---- | ----- | +| `i` | zero based counter of selected widgets | +| `x`, `y`, `w`, `h` | position and size of the current widget | +| `px`, `py`, `pw`, `ph` | dimensions of the parent widget | +| `sx`, `sy`, `sw`, `sh` | dimensions of the previous sibling | +| `cx`, `cy`, `cw`, `ch` | bounding box of all children | + + \image html wp_gui_values.png + \image latex wp_gui_values.png "" width=7cm + + Activate for widgets that can take numerical values, these input fields take + floating point numbers. They generate lines like `o->minimum(2);` only if the + corresponding value differs from the default value for this property. + + \image html wp_gui_flexp.png + \image latex wp_gui_flexp.png "" width=7cm + + This row is only visible for children of `Fl_Flex` widgets. It sets the + width or height of a widget in a horizontal or vertical Flex widget. If *fixed* + is unchecked, this value is instead calculated by the Flex. + + \image html wp_gui_margins.png + \image latex wp_gui_margins.png "" width=7cm + + This row is only visible for `Fl_Flex` widgets. It sets the various margins + and the gap value for this widget. + + \image html wp_gui_sizerange.png + \image latex wp_gui_sizerange.png "" width=7cm + + This row is only visible for top level windows. The fields set the minimum + and maximum size range for windows. Use the *set* button to copy the current + size. Set width and height to `0` to disable that aspect of the size range. + + \image html wp_gui_shortcut.png + \image latex wp_gui_shortcut.png "" width=7cm + + This option is only visible for buttons and other widgets that can react to a + shortcut key combination. FLUID does not check if a shortcut was already used + elsewhere. + + If *shortcut use FL_COMMAND* is set in the project settings, modifiers are + created in a more compatible way across platforms. + + \image html wp_gui_xclass.png + \image latex wp_gui_xclass.png "" width=7cm + + This row is only visible for top level windows. Note that selecting *modal* + and *non modal* together is undefined. + + The string typed into the *X Class* field is passed to the X window manager + as the class. This can change the icon or window decorations. On most window + managers you will have to close the window and reopen it at runtime to + see the effect. + + \image html wp_gui_attributes.png + \image latex wp_gui_attributes.png "" width=7cm + + Some additional attributes for all widget types. + + The *Visible* button controls whether the widget is + visible (on) or hidden (off) initially. Don't change this for + windows or for the immediate children of a Tabs group. + + The *Active* button controls whether the widget is + activated (on) or deactivated (off) initially. Most widgets + appear grayed out when deactivated. + + The *Resizable* button controls whether the window or widget is + resizable. In addition all the size changes of a window or + 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 + using hierarchies of groups. Resizing of a window or group can be tested + using the *live resize* button. + + The *Hotspot* button causes the parent window to be + positioned with that widget centered on the mouse. This + position is determined when the FLUID function is called, + so you should call it immediately before showing the window. If + you want the window to hide and then reappear at a new position, + you should have your program set the hotspot itself just before + `show()`. + + \image html wp_gui_tooltip.png + \image latex wp_gui_tooltip.png "" width=7cm + + The *Tooltip* field can be any Unicode string and is stored as a static text. + If internationalization is enabled, the corresponding modifiers are + added. + + <!-- ---------------------------------------------------------------------- --> + \section widget_panel_style The Style Tab + + \image html wp_style_tab.png + \image latex wp_style_tab.png "Style Tab" width=9cm + + The Style tab is used to edit font styles and sizes, and the color of elements + of the widget. + + \image html wp_style_label.png + \image latex wp_style_label.png "" width=7cm + + \image html wp_style_text.png + \image latex wp_style_text.png "" width=7cm + + The font pulldown menu provides a list of standard fonts. To enter the index + of a user loaded font, an *extra code* field must be used. The *label color* + and *text color* fields opens a color palette selector. The arrow pulldown + contains a list of the most commonly used colors. Again, user specific colors + can be defined using the *extra code* field. + + The *Text Font* row is only available for widgets that contain an additional + text area. + + \image html wp_style_box.png + \image latex wp_style_box.png "" width=7cm + + Select the up and down box for the given widget. The first six entries in the + box and frame style list are influenced by the FLTK Scheme setting. Other + box styles will always look the same, independently of the selected scheme. + + Many widgets will work, and draw faster, with a + "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 + 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. + + The *Down Box* row is only available for widgets that can be pressed down + by the user. + + Some widgets will use the *Select Color* for certain parts. FLUID + does not always show the result of this: this is the color + buttons draw in when pushed down, and the color of input fields + when they have the focus. + + <!-- ---------------------------------------------------------------------- --> + \section widget_panel_cpp The C++ Tab + + \image html wp_cpp_tab.png + \image latex wp_cpp_tab.png "C++ Tab" width=9cm + + The C++ tab has various input fields for adding C++ code at various places + in the source and header file. + + \image html wp_cpp_class.png + \image latex wp_cpp_class.png "" width=7cm + + If the class property is set, FLUID assumes that the user wants to instantiate + a widget that is derived from the selected widget. For a derived widget, the + default values of attribute can not be known. FLUID will generate code to + explicitly set every known attribute of the super class. + + FLUID generates "include" statements for known classes. Custom classes should + provide a \p \#include line as one of the "Extra Code" lines of the widget. + + If the selected widget is a Widget Class node, the Class property will instead + set the super class of the widget. + + The pulldown menu on the right side contains additional subtypes for some + widget types. `Fl_Button` widgets, for instance, can be further refined to + be an `Fl_Toggle_Button` or an `Fl_Radio_Button`. + + \image html wp_cpp_name.png + \image latex wp_cpp_name.png "" width=7cm + + The name field can be any valid C++ variable name. If the widget is inside + a class, the pulldown menu lets the user select between *private*, *protected*, + and *public*. If not in the group, the variable can be *global* or *static* + within the source file. + + 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 <tt>'.'</tt> or <tt>'->'</tt> or any other symbols + in its name. In this case FLUID 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. + + 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 + in the array must be the same type. + + \image html v_input.png + \image latex v_input.png "" width=7cm + + These four input fields can be used to add arbitrary code to different parts + of the header and source file. A line can be divided into multiple lines + of code by inserting a `Ctrl-J`. + + All Extra Code fields are interpreted individually. If a field contains a `#` + character, or the words `extern`, `typedef`, or `using`, FLUID assumes that + the code is a declaration and writes it to the header file, and only if it + does not duplicate previously written code. This is great for creating a + `#include "MyWidgetType.H"` include statement in the header. + + If the code is not recognized as a declaration, it will instead be put after + the code that instantiates the widget and all its children. For menu items, + the code is added after the container `Fl_Menu_` is created, but before the + menu array is added to the container. + + FLUID will check for matching parentheses, braces, and + quotes, but does not do much other error checking. Be careful + here, as it may be hard to figure out what widget is producing + an error in the compiler. If you need more than four lines you + probably should call a function in your own `.cxx` + code. + + \image html wComment.png + \image latex wComment.png "" width=7cm + + Comments are added to the source code before the widget constructor by adding + `// ` in front of every line of the comment. The first few characters of a + comment are also visible in the widget browser in the main window. + + \image html wp_cpp_callback.png + \image latex wp_cpp_callback.png "" width=7cm + + The callback field can be interpreted in two ways. If the callback text is only + a single word, FLUID assumes that this is the name of an external callback + function and declares it in the header as + `extern void my_button_action(Fl_Button*, void*);`. + + Otherwise, FLUID assumes that the text is the body of a C++ callback function + and instead creates a local static callback function. The name of the callback + function is generated by FLUID and guaranteed to be unique within the file. + ``` + static void cb_input(Fl_Input *o, void *v) { + ... // my text from the Callback field here + } + ``` + You can refer to the widget as \p o and the \p user_data() + as \p v. FLUID will check for matching parentheses, braces, + and quotes, but does not do much other error checking. + + If the callback is blank then no callback is set. + + The *User Data* field can contain any valid C++ code and is copied as the + callback argument. If blank the default value of zero is used. + *Type* is currently limited to a pointer (a type name ending in `*`) or `long`. + + The *When* pulldown gives access to the `Fl_When` flags, including some + commonly used combinations. + + <!-- ---------------------------------------------------------------------- --> + \section widget_panel_grid The Grid Tab + + \image html wp_grid_tab.png + \image latex wp_grid_tab.png "Grid Tab" width=9cm + + This tab is only available if the selected widget is an `Fl_Grid`. When editing + a Grid widget, no other widgets should be selected. + + The *Grid Layout* fields adjust the number of rows and columns in the grid. + + The *Margins* fields describe the size of the margins around all children of + the grid. + + The *Gaps* fields set the gaps between individual children in the grid. + + The *Row* and *Column* groups can be used to set the size of individual rows + and columns within the grid. + + <!-- ---------------------------------------------------------------------- --> + \section widget_panel_gridc The Grid Child Tab + + \image html wp_gridc_tab.png + \image latex wp_gridc_tab.png "Grid Child Tab" width=9cm + + This tab is only available if the selected widget is a child of an `Fl_Grid`. + When editing a child of a Grid widget, no other widgets should be selected. + + Use the *Location* group to move a child around within the grid. Note that + every cell in a grid can only manage one single widget. When moving widgets + over occupied cells, they become "transient". Just continue and move them into + an available cell. If a layout is saved with a transient widget, all grid + attributes for that widget are lost, and it will remain unassigned in the + project file and in the source code. + + The *Align* fields provide a way to align a widget within its cell. + + The *Min. Size* fields define a minimum width and height for the widget + in the cell. + + The *Span* fields change the number of cells that a widget can span in x and y. + + \note Most attributes in this tab will also change the size of the widget. If + the child of the Grid is itself a group, the children of that group do not + follow changes in position or size. It is recommended to either lay out the + grid contents first and leave it unchanged, or to use widgets generated with + Widget Class that automatically adjust themselves to the size constraints + of the grid. + +*/ diff --git a/fluid/documentation/src/page_widgetbin_panel.dox b/fluid/documentation/src/page_widgetbin_panel.dox new file mode 100644 index 000000000..c9da9f9c9 --- /dev/null +++ b/fluid/documentation/src/page_widgetbin_panel.dox @@ -0,0 +1,34 @@ +/** + + \page page_widgetbin_panel Widget Bin Panel + + \tableofcontents + + # The Widget Bin Panel # + + \image html widgetbin_panel.png "Widget Bin" + \image latex widgetbin_panel.png "Widget Bin" width=9cm + + The Widget Bin can be activated via the main + menu: *Edit* > *Show Widget Bin* . FLUID will remember its + state and dimensions. + + The Widget Bin is a great way to quickly create a GUI project. Clicking + an icon in the bin will create the corresponding code or widget node inside + or right after the selected widget. If the parent widget is not supported + for this widget type, FLUID tries to find a better position. If that fails, + a dialog box will pop up, explaining what type of parent node is required. + + The Window and Widget Class icons can be dragged onto the desktop, + creating a new window or widget at the drop position. + + \image html widgetbin_action.png + \image latex widgetbin_action.png + + All other widget types can be dragged from the bin into a window, or a group + inside a window. When dropped, they will be positioned close to the drop point + and inserted into the widget tree as the last child of the chosen group. + The order of widgets within their group can be changed with + the `F2` and `F3` keys. + +*/ diff --git a/fluid/documentation/src/widgetbin_action.png b/fluid/documentation/src/widgetbin_action.png Binary files differnew file mode 100644 index 000000000..26463b6e9 --- /dev/null +++ b/fluid/documentation/src/widgetbin_action.png |
