/** \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. */