GAB Code Editor v4 Controls

< Back to main GAB Code Editor v4 Page

This GAB update contains a number of new and updated controls. Here are the changes:

New controls

AccordionControl

The AccordionControl is a docked control with a list of groups and items that act like buttons when clicked. It is used as the Left and Right docks in the new Screen Standards Properties Minimized (Boolean) - When true, the Accordion Control will be minimized at runtime. FireHooks (Boolean) - When true, an element that has a hook number attached will automatically fire that hook without being handled in GAB. ShowInBar (Boolean) - When true, any elements within this control that have a hook are shown in a dropdown menu on the main menu bar. AllowResize (Boolean) - When true, the end user is allowed to drag the edge of the control to resize. Events ElementClick - Fires when an Accordion Element is clicked. Passed variables include the clicked element's ID. Available Functions AddElement(ElementName as String, Caption as String, [SvgPicture as v.Enum.Image], [SvgPictureWidth as Long], [SvgPictureHeight as Long], [Picture as String], [HookNo as Long], [InternationalID as Long], [ParentElementName as String], [BeginsGroup as Boolean], [Visible as Boolean], [ElementStyle as v.Enum.AccordionElementStyle]) UpdateElement(ElementName as String, Caption as String, SvgPicture as v.Enum.Image, SvgPictureWidth as Long, SvgPictureHeight as Long, Picture as String, HookNo as Long, InternationalID as Long, ParentElementName as String, BeginsGroup as Boolean, Visible as Boolean, ElementStyle as v.Enum.AccordionElementStyle) RemoveElement(ElementName as String) SetElementMetadata(ElementName as String, MetaDataN as Array) ClearElementMetadata(ElementName as String) SetElementCollapsed(ElementName as String, Collapsed as Boolean) SetElementVisible(ElementName as String, Visible as Boolean)

An AccordionControl with several groups and elements.

BarDock

The BarDock is a menu bar that the programmer can place anywhere in their application. It acts just like the main menu bar, and supports Buttons (with SVG images), TextBoxes, ComboBoxes, and Dividers. It also has an optional left aligned "Caption". Properties Caption - Sets the caption text on the left of the bar. Available Functions BarAddButton(name as string, caption as string, [svgImage as v.Enum.Image], [parentMenu as string], [beginsGroup as boolean]) BarAddTextBox(name as string, caption as string, width as long, [emptyPrompt as string], [beginsGroup as boolean]) BarAddComboBox(name as string, caption as string, width as long, [initialValue as string], [disableEditor as boolean], [beginsGroup as boolean]) BarAddComboBoxItem(comboBoxName as string, itemName as string, itemDisplayValue as object, [itemDataValue as long]) BarAddComboBoxItems(comboBoxName as string, collectionType as "Dictionary", dictionaryName as string) BarAddComboBoxItems(comboBoxName as string, collectionType as "DataTable", dataTableName as string, keyColumn as string, valueColumn as string) BarAddComboBoxItems(comboBoxName as string, collectionType as "DataView", dataTableName as string, dataViewName as string, keyColumn as string, valueColumn as string) BarRemoveButton(name as string) BarRemoveTextBox(name as string) BarRemoveComboBox(name as string) BarRemoveComboBoxItem(comboBoxName as string, itemOrdinal as long)

A BarDock floating on a form with a menu, button, caption, and combobox.

Flow Frame

The Flow Frame is an implementation of the FlowLayoutPanel. Controls within it do not have settable positions. Instead, they appear one after another in the set direction. Just add the flow frame, set its properties, and then add controls to it like you would a normal frame. To set the control order click the control menu (right arrow button) on the child control, and type the desired index, then hit enter to confirm. Properties Flow Direction - Sets the direction of the controls. LeftToRight, TopDown, BottomUp, and RightToLeft. WrapContents - Sets whether the contents should wrap to a new line or column when they reach the end of the main direction, or if they should continue, and have a scrollbar.

The flow frame with 4 buttons. Flow Break is set to true on the button labeled "Flow Break".

Hyperlink

The Hyperlink is a new control that works like a website's hyperlink. It appears colored, and underlined, and has an OnClick event so that it can act like a button. For lesser functions on your screen, hyperlinks should be used in lieu of buttons. Buttons should be reserved for the most important class of function

A sample hyperlink with an SvgPicture

KeyLabel

The KeyLabel is a Label control that allows the programmer to set a specified color. This color is shown as a colored dot next to the label text. This control can be used to create a Key/Legend for a grid (until GridKey is added to GAB). Properties Key Color - Sets the color of the Key dot indicator. Key Dot Size - Sets the size of the Key dot indicator.

A sample Key Label with the KeyColor set to a dark red.

Lookup

See the Lookup Article for details on the new Lookup Control.

Navigation Frame (and Pages)

The Navigation Frame is a container control with multiple pages. It is similar to a tab control, in that you can have multiple layouts on a single form, but unlike a tab control, there is no visible way to change pages. Use a Navigation Frame Links control for user page changes. The navigation frame also has a slide and fade animation that occurs during navigation. For new projects, the Navigation Frame should be used over the Tab Control for primary navigation, though a Tab Control is acceptable within a Navigation Page for sub-controls.

To use the Navigation Frame:

1. Drag a Navigation Frame from the toolbox onto your form.
2. Clicking the control will select the auto-generated first page.
3. Right click the control and select "nav#" from the menu to select the primary Navigation Control.
4. Open the Navigation Pages property collection editor to add and organize pages.
   • Each page has a caption and image that will appear in the Navigation Frame Links control.

Navigation Pages cannot be added/deleted directly, and should be managed using the Navigation Frame's "Navigation Pages" property. To switch pages, select the Navigation Frame, then click the menu button at the top right of the control. The pages will be listed in the menu under the heading "Go to page". Select a page to perform the navigation. This does not affect which page is shown initially at runtime.

Navigation Pages act like a frame for adding controls. Set the control's parent property to the desired Navigation Page. They also support Layout Controls.

Properties

AnimationLengthInMS - Gets or sets the page navigation time in milliseconds.

UseAnimations - Gets or sets if the navigation frame uses animations, or immediately displays the new page.

NavigationPages - A collection of pages shown in the control.

SelectedIndex - Gets or sets which page is displayed at runtime.

Progress Panel

The Progress Panel is a new style of progress indicator. It can be used to cover large parts of the form, so that you can indicate which parts are being loaded, or not show a control before it's ready. It features a Caption (title), Detail, and Offset (the distance between the edge and the loading icon) properties. Just drag it on the form to use. Alternately (and most likely more useful), you can automatically convert any control into a Progress Panel while it's loading. Call "Gui.[Form].[Control].InvokeWait(Detail as String, Title as String, Border as Boolean)" to show the panel Once this is called, the control itself is hidden from the form, and a progress panel is added in its place. This means the control can be modified/loaded without any performance impact. Call "Gui.[Form].[Control].UpdateWait(Detail as String, Title as String)" to update the progress panel's message. Call "Gui.[Form].[Control].HideWait" to close the progress panel. This will automatically remove the progress panel, and put the original control back on the form, with its initial visibility intact. Properties Caption - The large text. Detail - The small text. FontSize - The size of the caption (large) text. FontSizeDetail - The size of the detail (small) text. FontStyle - The style of the caption (large) text. FontStyleDetail - The style of the detail (small) text. FontSizeDelta - Sets a modifier for the font size of Caption and Detail. For example, using "1" will make the caption 13.25 pt and the detail 9.25. Offset - Sets the space between the left edge of the control (not including padding) and the progress indicator.

A progress panel in the form designer.

Split Container

The final new control is the Split Container. This acts like two side by side Frames with a splitter between them. The splitter allows the user to resize the two containers at runtime, or collapse/expand one of the panels. To use the Split Container, just drag it to the form from the Toolbox, and then set other controls' Parent property to the desired Split Panel. The two panels support Layout Controls. Properties: Fixed Panel - When True, this panel will not be resized when the control is resized. When False, both panels resize proportionally. Orientation - Sets whether the split is horizontal or vertical. Splitter Position - Sets the offset of the splitter from the edge of the control (top or left). Collapsible Panel - When set, the splitter icon changes to a collapse/expand indicator. When clicked, it will collapse or expand the specified panel. Collapsed - Sets the initial collapsed state of the panel specified in Collapsible Panel.

A split container, with the Collapsible Panel set to Panel1 in the form designer.

Updated Controls

General Changes

In addition to new controls, several changes have been applied to many of the already existing controls.

1. Many controls had already supported properties that did not appear in the designer. These have been added for ease of use.
2. All controls have been replaced with DevExpress controls, instead of the base WinForms controls to support better theming.
3. New Properties on many (or all) controls
   1. UseLayout [DockPanel, Frame, NavigationPage, SplitContainer, TabPage] - Converts the internal layout of the container control to use the Layout Control.
   2. LayoutItem [All Controls] - If the control is a child of a container control with "UseLayout" turned on, the layout item can be modified here.
   3. Dock [All Controls] - In addition to Anchor, controls can now be docked for better layout reflow.
   4. Picture [Button, DockPanel, Hyperlink, Label, NavigationPage, PictureBox] - The picture property didn't work before. It does now, but requires the G2P file format.
   5. Exclude From Undo [CheckBox, ComboBox, DatePicker, DropdownList, GsGridControl, Multiline Text Box, Radio Button, Rich Text Box, Slider, Text Box] - When set to true, this control will not be monitored for the Undo System.
   6. Padding [Most controls] - Sets the amount of space within the content area of the control that the content should be offset.
   7. Margin [All controls] - Sets the amount of space outside the control bounds. Used in the FlowFrame.
   8. Flow Break - [All Controls] - Sets whether the next control will be forced to wrap when included within a FlowFrame.

Specific Changes

Rich Text Box

The Rich Text Box has been changed to the much more in depth DevExpress Rich Text Editor. The functionality could be substantially different. It is basically a fully featured text editor like you'd find in Microsoft Word.

Button

New properties SvgPicture/SvgPictureSize allow the programmer to specify an icon used on the button from a set of pre-defined GSS standard icons.

Label

New properties SvgPicture/SvgPictureSize allow the programmer to specify an icon used on the button from a set of pre-defined GSS standard icons.

Frame

The older Frame Border style has been replaced by four options:

1. NoBorder - The frame has no caption and no border
2. Title - The frame has a colored title area (set by the Theme and Accent Color) and white caption text.
3. Light - The frame has a gray title area and black/white text (set by the Theme and Accent Color).
4. Card - Should not often be used - Like the Light border style, but with a single pixel gray border around the whole frame.