gbVisualDesigner

gbVisualDesigner is a comprehensive programmers IDE whose customizable user interface integrates a mouse-based visual designer, 5 source code editors, 4 source code libraries, 27 source code analysis reports and 7 different reference sources to provide unmatched information and IDE options at the fingertips of a programmer!

To create an application, a user simply draws the application controls using a mouse. gbVisualDesigner can then generate the corresponding code and compile it into a working application. Both DDT and SDK code may be generated. The generated source code may also be passed to a user-specified IDE (such as the PowerBASIC IDE).

Multiple files may be opened simultaneously in gbVisualDesigner. The name of each opened file is shown in a file TAB just above the layout area. Projects are supported as well, where a project file is simply a list of supported file types (*.bas, *.inc and *.lay).

gbVisualDesigner emphasizes placing as much information at the fingertips of the programmer as possible. To that end, 4 different libraries of information are available - a snippets library of almost 1500 compilable source code examples and reference materials, a local procedures library that contains all procedures found on the users's PC, a library of all 50K+ PowerBASIC forum threads and a Quick Procedure library for inserting simple functions into source code listings.

gbVisualDesigner provides 5 integrated source code editors, each with very powerful Intellisense editing features. There is a source code editor for each opened file, one for the snippets library and one for the local procedures library. There's also an independent scratch pad editor and there is one additional editor in which the various source code analysis reports may be viewed and edited.

Additionally, a total about 27 source code analysis reports (such as Call Trees, Sorted Procedure Listing, etc.) are available and may be generated against source code found in any of the source code editors.

For programmers who want to provide their own source code generation, source code formatting, custom source code analysis reports and pre-processor code modification capabilities, gbVisualDesigner allows the use of user-supplied DLLs that replace the built-in capabilities.

Download (beta56, 13M)

The following screenshot shows gbVisualDesigner, with just a few controls in the layout area.

Key Features List

gbVisualDesigner provides powerful, yet easy-to-use features for creating single-dialog applications. Key features include:

Another very useful feature of gbVisualDesigner is its extremely customizable user interface, which allows the user to specify which information to display.

Table of Contents

Beta Status

These areas are incomplete, or have issues that I'm working as the highest priority:

I'm not working on these are as part of the initial release, but they are significant improvements which I will work in later releases

And these are simple changes/updates I've thought of that I'll want to make in near-term relesaes:

OverView

gbVisualDesigner provide a wide array of features, including many options not usually associated with a simple IDE or visual designer. Its feature set and interface design can be summarized as in the following image:

Across the top is the main toolbar. It handles opening/closing files and manages the code generation, compile/run actions and various settings options. A second toolbar, from which controls are selected fro drawing into the layout area, may also be displayed.

On the top left is a listing of the content of the currently selected library. Below that is displayed the results of searches against the library. Each of the library GUI elements can be independently selected for display.

In the top right of the dialog is the visual designer - an area where the user uses a mouse to draw controls that go into the application. A wide variety of options are provided for modifying the controls (select, resize, delete, ...). Popup dialogs for editing control properties are available in this area by simply double-clicking on a control.

At the bottom/right of the dialog is a secondary toolbar through which the 5 source code editors are accessed, as well as PowerBASIC forum threads, the 25+ source code analysis reports, 7 reference resources and application notes.

Using gbVisualDesigner

Creating a PowerBASIC application with gbVisualDesigner is a very straight-forward process requiring only a minimum of steps.

  1. Draw controls using the mouse
  2. Edit dialog/control properties as needed
  3. Add optional features - Menu, Toolbar, StatusBar, Resources, Fonts
  4. Build source code (one button press)
  5. Compile/Execute (one button press)

That's petty much it! But don't forget that you can edit the generated source code and that you have 4 libraries of programming information (snippets, local procedures, forum threads and quick procedures) to drawn on! Plus, if you have a favorite, external editor, gbVisualDesigner can pass the source code to that editor.

Video Tutorials

In addition to this Help file, I've created several video tutorials, each lasting about 2 minutes and covering various aspects of how to use gbVisualDesigner. I hope you'll find these a useful adjunct to the online Help.

Limitations

At this time, the following key limitations apply to layouts generated by gbVisualDesigner.

Users can, of course, manually modify the generated source code to extend the code beyond these limits.

Customizing The GUI

The user has several options for controlling how the various graphic elements of gbVisualDesigner are displayed.

Basic IDE
If all the user wants is to use gbVisualDesigner as a standard IDE which opens only source code files (*.bas/*.inc), then gbVisualDesigner can be minimally configured as in this image where both the Library and Layout sections are not displayed.

Here, the File TAB lists all open files. The Code TAB provides 8 different tabs, including the 'File Code' tab which displayed the source code for each opened file. all 8 tabs in the Code TAB are discussed fully in another section.

IDE With Layout and Code TAB
The Layout section allows the user to create applications by drawing controls with a mouse. gbVisualDesigner can then generate the corresponding source code as well as compile and run the resulting EXE. By default, the Layout and Code TAB elements are displayed at the same time, as shown in this next image.

To allow the user to maximize the work space for GUI elements, gbVisualDesigner can be configured to show just the Layout section or just the Code TAB, as shown in these next two images.

Layout Only:

Code TAB Only:

Layout Toolbar Elements
In all three images above, the main toolbar contains several buttons that were not visible in the "basic ide" GUI configuration. There are several toolbar configurations provided, each intended to allow the user to modify the gbVisualDesigner GUI to their own preferences.

By default, gbVisualDesigner opens up with the Layout element showing and with the following toolbar, which contains 4 basic buttons for controlling drawing of controls in the layout:

A slight tweak on the toolbar can also be made which adds a few additional buttons to the toolbar. These additional buttons are also available from the layout context menu, but are available as an option for some users might prefer to have them always visible, even though it requires a wider dialog to display the additional buttons.

As another option, the main toolbar can have all layout-related buttons removed and a second toolbar, the control toolbar, can be displayed:

The details of each toolbar button are discussed in a later section.

Library Elements
gbVisualDesigner includes 3 libraries (snippets, local procedures, forum threads), any of which may optionally be displayed on the left side of gbVisualDesigner. The Library display consists of two parts - a listing of all library elements and a section for searching the library and displaying a list of elements which match the search criteria.

This earlier image shows gbVisualDesigner with a Library (snippets) displayed:

To select a Library for display, use the dropdown menu of the main toolbar Library toolbar button. Then select the Library button itself to toggle display of the selected Library.

Note that only the snippets library includes a toolbar. Context menus are available for the controls in all 3 libraries.

Library Content
A library display is split into two sections. The top section is a summary listing of all items found in the library. The bottom section provides search capabilities in the library.

When the user selects an item from the list in either section, the details of that item are displayed in the corresponding tab ('Snippets', 'Procedures', 'Threads') in the Code TAB section to the right.

In the library bottom section, the user may enter a search term and search settings, then search the library for all matching items. A summary listing of all matching items are displayed in the bottom section.

The main toolbar Library button dropdown menu is used to select which Library to display, and which combination of Library elements (complete listing, search results, or both) will be shown.

A couple of shortcuts are available to manage library/element display. Click on the word "Library" in the label above the library section to cycle through the available libraries. Click to the right n & of the word "Library" in the label to cycle through the element display combinations.

This next image shows the Library content for each of the available libraries.

Session Options

By default, when you close gbVisualDesigner a list of all open files is kept. Those files are then re-opened when gbVisualDesigner is started again. Before closing, the user is asked whether to save or discard those changes.

Optionally, gbVisualDesigner can be configured to save a session to a temporary file, containing a list of all open files and any unsaved changes to those files. Then, when a new session of gbVisualDesigner is started the temporary file is used to restore gbVisualDesigner to the state of the previous session. When a session is saved, the original files will not be modified.

The advantage of saving a session is that there's no action to take other than just to close gbVisualDesigner. All files are re-opened and all pending changes to each open file are restored.

You do not have to take any other action - just close and open, and you'll be right back where you left off!

Automatically Saved Session Data
While the user must select the option to save a session, some gbVisualDesigner content is always saved and restored between sessions. In particular, the content of the snippet, local procedure and scratch pad source code editors are automatically maintained between sessions.

In the case of the Snippets Library, whose Library elements can be modified by gbVisualDesigner, the user will be asked to Save the snippets library when gbVisualDesigner closes and where changes to the library have been made.

Supported File Formats

gbVisualDesigner can open files of several formats.

A Save action saves maintains the original file extensions/format.

For example, when an opened ".lay" file is saved, both layout changes and generated code (as well as any user modifications to the generated code) are contained in the Saved file with the extension ".lay".

Likewise, if a *.BAS or *.INC file is opened and Saved, only source code is contained in the saved file. Saving a file as a *.BAS or *.INC file loses any layout editing done while the file is opened. To save layout information, a file must be saved as a *.LAY file.

Projects

gbVisualDesigner allows grouping files into projects, which can be opened and saved as a group.

Here are the basic Project features supported by gbVisualDesigner.

Layout Area

When a new file is created, its layout area consists simply of an image of an empty dialog. To resize the dialog, just drag the "Resize Client" icon shown in the lower right corner of the dialog. The layout area rulers refer to the size of the dialog client area (coordinates 0,0 are at the top left of the dialog).

The next image shows a layout area just a few controls drawn on the dialog.

The layout area is where all controls are drawn. To draw a control, select the control type and draw the control outline with the mouse. Once the mouse is released, an image of the control will be drawn in the layout area. By default, once a control is drawn, gbVisualDesigner enters 'Select' mode. However, 'Repeat' setting is available that will let controls of the same type to be drawn repeatedly. It also lets you double click to create a control using a default size.

Controls may be drawn inside or outside the dialog area, but by default source code will be generated only for controls located fully inside the dialog client area. The area outside the dialog can be thought of as a simple 'holding' area for controls that may be moved in or out of the dialog design.

Selecting a Control to Draw
One of two toolbar options is used to select a control to draw. If the main toolbar is set to display layout button, then the dropdown menu in the control button (to the right of the 'Select' button) will provide a list of available controls, as shown in this image:

If the control toolbar is displayed, the user can simply select the button corresponding to the control to be drawn.

The control toolbar also includes buttons for several actions which can also be taken via the layout area context menu. The tradeoff is a wider display requirement vs fewer clicks to get to the option.

Auto-Drawn Controls
The main menu, toolbar, and statusbar of a dialog are not drawn by the user. Instead, the user enables these controls by checking the appropriate checkbox on the Dialog Property dialog. gbVisualDesigner handles the details of drawing the controls in the correct location in the dialog.

However, once the controls are enabled, you can double-click on the Toolbar or Statusbar (as is done with all other controls) to edit their properties. The main menu is edited from within the Dialog Property dialog.

Custom Controls
Users can manually edit the generated source code to add controls not specifically supported by gbVisualDesigner. A generic "control" can be selected and drawn as a visual place holder for custom controls.

Editing Controls in the Layout
Once controls are drawn in the layout area, they may be further edited in several different methods:

Many of the gbVisualDesigner layout features are optional, such as the grid markers and ruler. Other features, such as the text information displayed with each control may also be controlled. A complete list of settings is found on the Settings dialog, which is available through the main toolbar Settings button dropdown menu.

Managing Controls With a Mouse
The position and size of controls may be adjusted using just the mouse, using any of the following options:

Control properties can also be edited using the keyboard. Just double-click on a control to open its property dialog, which allows you to use the keyboard to set the control properties.

gbVisualDesigner Layout Context Menu
A context menu is available from the layout area, and provides these menu items which act on (one or more) controls that have been selected in the layout area.

Dialog Property Dialog

The properties of the dialog are edited with the Dialog Properties dialog. To display the dialog, just double click on any unused location of the layout area.

The following properties may be set:

Resources/Menu/Fonts Dialogs

As was mentioned in the section above, the Dialog Properties dialog allows the user to enable the use of resources, a main menu and pre-defined fonts. Checking the resource enables the use and the "..." button next to each calls up a dialog for editing those features.

Resources Dialog
This dialog allows the user to create a list of resources which are embedded in the application, making them available to controls and statements. These resources need not be distributed with the EXE.

While resource files in the list can be selected from any location on the users PC, gbVisualDesigner is distributed with a subfolder 'resources' of ~20 useful icons and images. That folder is the default location whose content is used to fill the resource list, as shown in this image:

Any resources in the list that are checked are included in the application (i.e., the generated code includes the checked resources).

Main Menu Dialog
This editor makes it very easy for a user to create a multilevel main menu, which is displayed along the top edge of the dialog. As this image shows, the user just types in the desired content, with a "..." used to show one level of indentation.

Font Editor
This editor lets the user define up to 5 fonts which are then available for use by any control. The Control Property dialogs will contain a dropdown combobox allowing the user to select which of the 5 fonts are to be used by that control.

Control Properties Dialog

The properties of all controls can be edited using the Control Properties dialog. To display the dialog, just double-click on a control in the layout area. Or, you can double-click on a control in the Layout Control List report. The following image is an example of a control properties dialog. However, not all controls have exactly the same properties so the content of the Control Property dialog may differ from the image shown, depending on the control type

The size and location properties of controls are handled via mouse in the layout area. They cannot be changed on the Control Properties dialog.


Code Generation

The gbVisualDesigner toolbar 'Build' command generates the source code needed to create an application matching the layout and dialog/control settings entered by the user. The generated code is found in the 'Source Code' tab below the layout area.

Note that when a 'Build' command is executed it will overwrite all source code already in the File Code editor (TAB#1) - including all user edits!. All previously generated source code and user edits are discarded by gbVisualDesigner and replaced with newly generated source code. If a user wishes to save their edits, the opened file may be saved or just the source code may be saved to a new *.bas or *.inc file. Here's an image of the Build toolbar button, with its dropdown menu:

The dropdown menu offers the following items:

In addition to the Build button dropdown menu options, there are several other build settings available on the Setting dialog, as shown in this image:

See the section on the Settings dialog for more information about these settings.

Building a Layout from Source Code
gbVisualDesigner has the option to create a layout and dialog/control settings from pre-existing DDT source code (see the "Build Layout" feature), but that option creates a very minimal layout from the source code as it is only able to interpret Control Add statements. The option does not recognize SDK at this time.

User Editing of Source Code

There are 5 source code editors built into gbVisualDesigner - one for the layout-generated source code, one each for the snippets and local procedures library, a scratch pad editor, and another editor used to display source code generated by several of the custom code analysis reports.

Source code in any of the 5 editors can be manually modified, compiled and executed, or sent to the user-specified IDE (such as the PowerBASIC IDE) for further editing. The code of an open file can be saved in the original file, which is then opened in the IDE. Or, gbVisualDesigner can save the source code of an open file to a temporary file, which is then opened in the IDE. Code from the snippet, scratch pad and report code editors is always saved to a temporary file before being opened by the IDE. The same applies to compiling and running code from one of the editors.

The following editing features are available in all of the gbVisualDesigner source code editors:

Syntax Highlighting
Colors are used to distinguish keywords, strings, and comments from the rest of the snippet content. User may select all highlighting colors.

The list of PowerBASIC keywords is kept in the file keywords.txt in the support_files subfolder. That file may be edited as desired.

Unlimited Undo/Redo
The text editor supports undo/redo actions, limited only by the amount of memory available on your PC. Undo/redo actions are taken by pressing the appropriate toolbar button. If an action is not available, the toolbar button will be grayed out.

Code Formatting
gbProcedureLibrary can apply indentation to code, according to settings made by the user. Settings are available for managing how blank lines, comments, indentation and TABs are handled during formatting.

Before And After Formatting:

Brace Highlighting
This feature highlights the matching parenthesis, ( or ), when the cursor is placed in front one of the character. An alternate highlighting is also applied if no matching parenthesis is found.

Indentation Guidelines
The code editor can display vertical lines that correspond to a standard indentation, which by default is 3 spaces. The vertical lines can help you align code, or it can help you scan code to find starting and ending lines of code pairs, such as If/End If.

Greenbar Effect
In the early days of computing, source code was printed on wide paper whose lines were alternately given white and green background colors. The alternating background colors made it easier for the eye to track across lines of code.

The greenbar display provides a similar effect by alternating (every 3 lines) between white and gray line backgrounds.

AutoIndentation
When the user presses enter, the cursor will be placed at the same level of indentation as the line where enter was pressed. However, if the line begins with one of several code constructs, indentation will be made one level lower than the current line.

Code constructs which result in extra indentation include: 

   If             For
   Else           Do
   Select         Loop
   Case           While

Call Tips
When a PowerBASIC function is typed in by the user, the text editor can display a popup label containing a list of the arguments allowed by the function. Some examples of call tips are shown in the image to the right.

When the popup label is displayed, the user continues typing, filling in the argument list per the displayed syntax. Pressing a space bar will remove the display.

If the user enables Persistent Call Tips. the keyword sequence and the call tip text are displayed permanently in the StatusBar, until the user takes another action which reports status to the StatusBar.

The user may modify the list of recognized functions and the corresponding argument syntax/list that is displayed. See the three files words1.txt, words2.txt, and words3.txt in the support_files subfolder for more information.

Persistent Call Tips
Places a copy of the Call Tip into the StatusBar that persists even when the Call Tip disappears from the screen.


AutoCompletion
PowerBASIC keywords are often used in combination with one another, such as "Control Add" or "Thread Get Priority". When the user types in a PowerBASIC keyword that is part of a combination, a popup list of allowed keywords needed to finish the combination, is displayed. The user can select from that list (press TAB) or simply continue typing.

The user may modify the list of recognized keyword combinations. See the two files members1.txt and members2.txt in the support_files subfolder for more information.

Code Folding
When reviewing code it can be convenient to hide the code within procedures and other code constructs. This is called folding and is demonstrated in the image below. Code constructs may be folded by clicking on the minus symbol in the margin, or unfolded by clicking on the plus symbol in the margin. The toolbar provides buttons for folding/unfolding all constructs in a snippet.

The code constructs which gbVisualDesigner recognizes are: 

   Type        End Type                 Class       End Class
   Macro       End Macro                Interface   End Interface
   Sub         End Sub                  Method      End Method
   Function    End Function             Property    End Property
   Callback    End Function             Union       End Union

In general, folding can also be applied to lesser structures, such as Select/End Select, but that level of folding is not currently supported by gbProcedureLibrary.

Open Help to Highlighted Word
Once a word is selected, the PowerBASIC Help file may be opened to the corresponding Help file topic.

Line Numbers
The text editor supports the display of line numbers, contained in a left margin that is separate from the text.

Active Links
gbProcedureLibrary supports hypertext links. Just as in a browser, the links are highlighted and underlined, needing only to be clicked to open the link location. Simply type in an HTTP address and click on the link to open the URL in your default browser.

Context Menus
The source code editors share a common context menu, which is discussed further down this page in the TAB #1 (File Code) section.

Main Toolbar

This toolbar, located across the top of the gbVisualDesigner dialog, is always visible. It provides options for opening and saving files, as well as for selecting controls to be drawn in a layout. It also provides options for opening an opened file in the PowerBASIC IDE or to compile/run the currently selected file. The toolbar may be configured for 3 levels of content, as shown in these images:

The Settings dropdown menu provides the menu options to select the main toolbar content.

Selection of a library, opening the Settings dialog and opening external tools is also performed from this toolbar.

The following options are available from the toolbar. Several of the buttons provide additional dropdown menu options.

Controls Toolbar

Display of this toolbar is optional. It allows the user to select which control will be drawn in the layout.

It also provides Repeat, Remove/Restore and Build Source Code options.

All controls supported by PowerBASIC, except for the line control, are supported by gbVisualDesigner:

  • Button
  • Calendar
  • Check3State
  • CheckBox
  • ComboBox
  • DateTime Picker
  • Frame
  • Graphic
  • Image
  • ImageX
  • ImgButton
  • ImbButtonX
  • Label
  • ListBox
  • ListView
  • Option
  • ProgressBar
  • RichEdit
  • Scrollbar
  • TAB
  • TextBox
  • TrackBar
  • TreeView
  • UpDown
  • Control

This toolbar also provides actions other than just selection of the control to be drawn:

  • Select - Allows using the mouse to select one or more controls
  • Remove - Remove the last added control
  • Restore - Restore the last removed control
  • Lock - Disables the Build button
  • Build - Build source code from the layout

    Library Overview

    gbVisualDesigner supports 3 libraries which may be displayed, one at a time, on the left side of the gbVisualDesigner dialog - the snippets library, the local procedures library and the PowerBASIC forums thread library. There's also a 4th library which is accessed via context menu in any of the source code editors, but that library is discussed in another section.

    Regardless of which library is shown, the display can consist of a full listing of the library content and a listing of the results of searching the library against specific terms and other user search settings. The user can select which one, or both, of these library elements are displayed.

    All library elements have various sort options and all have context menus with which to manipulate the content. Context menus are discussed in the individual library sections.

    Only the snippets library can be edited by the user. It also is the only library for which a custom toolbar is provided. See the Snippets Library section below for more details.

    The local procedures library is generated by scanning source code files on the user's PC (at user request). In addition to listing the procedures, gbVisualDesigner can identify procedures which are duplicates of one another.

    While the local procedures code shown in the source code editor can be edited, those edits will not be saved to the local procedures code library, not will they affect the original source code files in any way. There are some capabilities for removing procedures from the local procedures library. See the context menu in the Local Procedures library section below for more details.

    The complete thread libraries are distributed with gbVisualDesigner. Threads cannot be added or removed from the library, and individual threads cannot be edited. A built-in HTML browser is provided for viewing threads (thread files are HTML files).

    All libraries can be searched in a variety of ways. See the Searches section for details about how to execute a library search.

    Snippets Library

    The Snippets Library consists of approximate 1500 snippets, presented as a tree of categories which contain the individual code snippets. Each of the snippets typically contain the following sections:

    To display the snippets library, use the dropdown menu next to the main toolbar Library button.

    This next image shows gbVisualDesigner with the snippets library displayed. The top section is a Tree control containing all snippets in the library. The bottom section contains the results of a search against the library.

    Click on a snippet in the Tree or in the search results to display the snippet in the snippet source code editor, which is found in the Code TAB, the "Snippets" tab.

    When the user selects the option to open code from the snippets library (i.e., the code in the snippets source code editor) in the IDE, pre-process the code, or to compile/run the code, the action is taken only on the extracted compilable example found within the code.

    The first line of each snippet is exempted from syntax highlighting and is displayed as the snippet title in the Snippet Library TreeView listing. Titles in the snippet library TreeView and source code editor are kept synchronized. As you edit one, the other is changed real-time to match the edits.

    Snippet Library Toolbar
    This toolbar is available only when the snippets library is displayed. It provides various editing options for the snippets library.

    Snippet Library Context Menu - TreeView
    The complete listing of the snippets library is displayed in a TreeView control, which has the following context menu options:

    Snippet Library Context Menu - Search Results
    The following context menu is available from the snippets search results list (the bottom list).

    Local Procedures Library

    To display the local procedures library, use the dropdown menu next to the main toolbar Library button.

    Local Procedures Library Context Menu - Complete Listing
    The following context menu is available from the Local Procedures list (the top list).

    Local Procedures Library Context Menu - Search Results
    The following context menu is available from the Local Procedures search results list (the bottom list).

    Threads Library

    To display the threads library, use the dropdown menu next to the main toolbar Library button.

    Threads Library Context Menu - Complete Listing
    The following context menu is available from the Threads Library list (the top list).

    Threads Library Context Menu - Search Results
    The following context menu is available from the Threads Library search results list (the bottom list).

    Library Searches

    Searches on all 3 libraries are made using the search controls shown in this image. The controls are typically located on the left side of the gbVisualDesigner dialog, between the library content listing and the search results listing.

    A search is begun by typing in search terms and pressing ENTER or pressing the Search button.

    When a search is made, the search terms are added to the top of the search term listing. A list of the most recent search terms may be viewed by pressing the down arrow next where the search terms are enter.

    Context Menu
    The search button has an adjacent dropdown menu with the following options:

    These settings apply to searches in any of the 3 libraries. However, depending on the library being displayed, a few additional context menu entries are provided which allow the search to be further restricted to elements in the library. The additional options are shown in this next image:

    Quick Procedure Library

    gbVisualDesigner provides a quick and easy method of saving snippets, called Quick Procedures, of code and of re-inserting those snippets into source code listings.

    Create a Quick Procedure
    To create a Quick Procedure, just highlight some code in an editor control and select the context menu "Create Quick Procedure". All source code editors support Quick Procedures.

    That will bring up the following dialog, in which you enter a short title for the Quick Procedure. A default title of ".untitled" is provided.

    Pressing ENTER or clicking the OK button will create a Quick Procedure and then return to the source code editor.

    Insert a Quick Procedure
    To open the Quick Procedure Library, select the "Insert Quick Procedure..." context menu, which will call up the Quick Procedure Library dialog, which lists the titles of all procedures in the library.

    To insert a Quick Procedure at the caret in a source code editor, just double-click on a procedure in the list. The title of the Quick Procedure is not inserted into the document. Only the content of is inserted.

    The Quick Procedure Library is pre-loaded with a few dozen entries which the author has found useful. Additionally, the Quick Procedure Library is pre-loaded with 3 special entries, .Date$, .Time$, and .Date$Time$, which direct gbVisualDesigner to insert the corresponding date/time information into the source code editors.

    Context Menu
    The Quick Procedure Library dialog has the following context menu options to help users manage the library.

    There is no built-in feature for editing the content of a Quick Procedure. However, the library is just a text file and can be manually edited when it is opened using the Open Quick Procedure Library menu selection.

    Code TAB Overview

    Just below the layout area is a Code TAB control which allows the user to select from various source code editors, reports, forum threads and reference materials. The Code TAB is divided into these individual tabs:

    1. File Code - source code generated by gbVisualDesigner
    2. Snippets - source code for the selected snippets library
    3. Procedures - source code for the selected local procedures library
    4. Scratch Pad - source code loaded by the user but not associated with any library
    5. Reports - 25+ source code analysis reports (applied to any of the source code editors)
    6. Threads - display of a thread from the PowerBASIC forum thread library
    7. References - display of 6 different reference information data sets
    8. App Notes - text comments by the user

    Tab#1: File Code

    The first tab contains a source code editor which displays the source code associated with the currently selected open file, which may be a *.BAS, *.INC or *.LAY file type.

    The editor is also where generated source code is placed when the Build function is executed. Build always acts on the layout of the currently selected file to generate code.

    The user may edit the code in the editor, and the code is saved whenever the file is saved. But as noted earlier, subsequent Build actions will overwrite the code in this editor!

    The toolbar IDE and Compile buttons act on the code in this editor by saving the code to a temporary file and then opening the code in the PowerBASIC IDE or compiling the code with the PowerBASIC compiler, respectively.

    File Code Toolbar

    The toolbar above the File Code tab provides the following source code editing features:

    Context Menu
    The following context menu is available by right-clicking on the control.

    • Clear
      Remove all code from the RichEdit control
    • Select All
      Select all code to the clipboard
    • Copy All
      Copy all code to the clipboard
    • Left Justify Selection
      Left justify all lines containing selected code
    • Format Selection
      Apply formatting to the selected code. A user-defined formatting DLL may be used to replace the built-in formatting procedure.
    • Go To Line ...
      Open the GoTo Line dialog, where the user can specify which line to scroll to
    • Go To Highlighted Procedure
      Scrolls to the procedure whose name is highlighted
    • Go To Previous Position
      Scrolls to the line from where the last jump was made
    • Open Help at Selection
      Open the PowerBASIC Help file at the selected word
    • Save As Left
      Save selection to a temporary file, to be used as the left side in a text comparison
    • Save As Right
      Save selection to a temporary file, to be used as the right side in a text comparison
    • Compare Left/Right
      Compare the left/right files against on another. A user-defined external comparison tool may be used in place of the default comparison tool.
    • Insert Quick Procedure ...
      Opens a popup dialog which lists available procedures. Double-click on a procedure to insert it at the cursor
    • Create Quick Procedure ...
      Create a new quick procedure from the selected code. The user will be prompted for a procedure name
    • Open Source Code ...
      Insert source code from an existing source file. The user selects the file and its content is inserted at the cursor
    • Save Source Code As ...
      Save the source code to a new file
    • Export as HTML
      Creates an HTML file and opens the file in the user's default browser. The HTML code is also placed on the clipboard
    • Export as BBCode
      Places forum-ready syntax highlighted code onto the clipboard. A Beep is heard when the export is complete
    • Copy to Scratch Pad
      Copies the source code to the Scratch Pad source code editor (replaces content).
    • Build Layout From Code
      Attempts to use the source code to create a layout (replaces current layout). Note that this is an in-work feature and the results are very limited.

    Procedures
    At the right of the source code is an optional list of the procedures found in the selected source code listing. It can be configured in a narrow and wide view. Double-clicking on a procedure will scroll the source code editor to that procedure.

    The following columns of information are provided in the procedure list:
    • Procedures
    • Type
    • Line #
    • File #
    • File Name
    • File Path
    The procedure list can be horizontally scrolled to view these additional columns.

    When created, the list places procedures in the order they are found. The procedure list may then be sorted by clicking on the list header. There is also a context menu with these options:

    • Refresh - rebuilds the procedure list
    • Copy - copies the procedure list to the clipboard
    • Wide View - increases the width of the procedure list
    • All Files - the procedure list will have the procedures for all open files

    Search File Code
    The File Code listing may be searched by pressing the Search button on the toolbar to open up the following dialog.

    Find and replace actions are supported as are beginning a search in the Next/Previous opened file. When a search is advanced to the Next/Previous file and reaches the end of the File TAB, the search will loop to the file at the other end of the File TAB. Also, when a jump occurs, it always jumps to the top of the next file and the search begins automatically, towards the end of source code listing.

    The same Find dialog is used on the File Code, Snippets, Procedures, Scratch Pad and Report source code editors.

    Tab#2: Snippets Code

    The second tab contains a single code editor, in which gbVisualDesigner displays the selected library snippet.

    The user may edit the snippet content and will be prompted to save the changes to the library/snippet when gbVisualDesigner is closed. The Snippets library can also be save at any time using the snippets library toolbar. Content of the snippets editor will be saved from session to session.

    Toolbar/Context Menu/ProcedureList/SearchDialog
    The snippets library source code editor uses the same toolbar, context menu and search dialog as was discussed in the File Code TAB#1. It also supports the procedure list.

    Tab#3: Local Procedure Code

    The third tab contains a single code editor, in which gbVisualDesigner displays the selected library procedure.

    The user may edit the procedure content but changes cannot be saved (changes to a user's source code file must be made by opening the original file). Content of the local procedures editor will, however, be saved from session to session.

    Toolbar/Context Menu/ProcedureList/SearchDialog
    The local procedures library source code editor uses the same toolbar, context menu and search dialog as was discussed in the File Code TAB#1. It also supports the procedure list.

    Tab#4: Scratch Pad

    The fourth tab contains a single code editor, which acts as a scratch pad editor. The user may enter any source code of their choosing, as well as compile and run the code.

    The user may edit the scratch pad content. Content of the scratch pad editor will be automatically saved from session to session.

    Toolbar/Context Menu/ProcedureList/SearchDialog
    The scratch pad source code editor uses the same toolbar, context menu and search dialog as was discussed in the File Code TAB#1. It also supports the procedure list.

    Tab#5: Reports

    The fifth tab is used to display one of the 25+ gbVisualDesigner code analysis reports. The user selects the code source (generated code, snippet code, local procedure or test code) on which the code will be based, then selects the report to be presented.

    This section gives an overview of the Reports tab. For details on each report, visit the separate Report Help page.

    Reports Toolbar
    The above the Reports tab provides the following options:

    Context Menus
    Some, but not all of the reports have context menus. Available report context menus are discussed on a separate Report Help page.

    Reports
    Here's a list of the available reports, each of which can be created from source code in any of the 4 source code editors (Generate Code, Snippets, Local Procedure Code and Test Code). Just click on the report name to jump to a description of the report (located on another HTML page).

    There are two exceptions to the earlier comment that all reports can be based on content any of the 4 source code editors. The Layout Control List always is drawn from the Layout of the currently selected file, and the Last Compile Log is always the log from the latest source code compilation (which may be from any of the source code editors).

    The 'Text' and 'Graphic' custom reports allow the user to specify two DLLs, one of which can return a text report and another which can return a graphical report. Custom DLL requirements are discussed in a separate section.

    Tab#6: Threads

    The sixth tab contains a built-in browser, in which gbVisualDesigner displays the selected PowerBASIC forum thread. All threads within the forum are included in the gbVisualDesigner distribution file.

    Thread Toolbar
    The toolbar above the Threads tab provides the following options:

    Context Menu
    There is no custom context menu for the embedded browser. It uses the default browser as provided by the browser control itself.

    Tab#7: Reference Materials

    This TAB provides quick access to a variety of information useful in programming.

    References Toolbar
    The toolbar above the References tab provides the following options:

    Context Menu
    At this time, none of the References has a context menu.

    Settings Dialog

    Settings Dialog - Layouts

    Settings Dialog - Code Editors

    Settings Dialog - Application

    Settings Dialog - Threads

    Settings Dialog - Local Code

    Settings Dialog - Build/Compile

    Settings Dialog - Custom DLLs

    DDT and SDK Code Generation

    gbVisualDesigner can provide both SDK and DDT code output from the same layout.

    By default, DDT code is generated. To get SDK code, select the "Build as SDK Code" option under the toolbar Build button.

    DDT Control Conversions
    The list of controls in the Controls Toolbar consists primarily of the DDT controls supported by PowerBASIC, some of which have no exact SDK equivalent. So when SDK code is generated for such controls, the results will be similar to, but not exactly as, the specified DDT control.

    Keyboard Shortcuts

    The following key combinations are available to the user to access gbVisualDesigner features:

    External Tools

    The toolbar 'Tools' button provides access to several external tools that are distributed with gbVisualDesigner. Additionally, the user can specify up to 3 tools which will be listed on the Tools dropdown menu. The user many also specify a text comparison tool which will be use for Left/Right text comparisons.

    Here's an image of the tools currently supported, along with a brief description of the tool and the URL of its home page.

  • gbSearch
    This is my most powerful search utility. I use it regularly to search the contents of *.bas and *.inc files all over my hard drive. It's home page is here.

  • gbSearchLite
    This smaller-profile search utility is no less capable of finding *.bas and *.inc content, but it also provides more specific information about where the content is found within the files. It's home page is here.

  • gbHexViewer
    Displays content of a file in hexadecimal format. It's home page is here.

  • gbMagnify
    I use gbMagnify for all of my close up graphics work. When counting pixels, it's a great way to visually verify that your code does exactly what you want it to do! It's home page is here.

  • gbRuler
    gbRuler allows you to make onscreen vertical and horizontal measurements. It's home page is here.

  • WinSpy++
    WinSpy++ is use to examine windows properties of running applications. It's home page is here.

  • Poffs
    View and search PowerBASIC forum thread content with this text-based utility. It's similar to the threads library supported by gbVisualDesigner. It's home page is here.

  • Task Manager
    This is the Windows Task Manager. It can also opened with Ctrl-Shift-ESC.

  • Process Explorer
    This is a process inspection tool by SysInternals. It's home page is here.

  • User1: NotePad
    This is the first user-selectable tool, which defaults to NotePad. Use the 'Select Tools' dropdown menu to change the tool. The name of the selected EXE will be displayed in the Tools dropdown menu.

  • User2: Calc
    This is the second user-selectable tool, which defaults to the Window calculator utility. Use the 'Select Tools' dropdown menu to change the tool. The name of the selected EXE will be displayed in the Tools dropdown menu.

  • User3: MSPaint
    This is the third user-selectable tool, which defaults to the Window MSPaint application. Use the 'Select Tools' dropdown menu to change the tool. The name of the selected EXE will be displayed in the Tools dropdown menu.

    User - Local Procedures Generator

    gbVisualDesigner allows users to provide an external DLL for creating the Local Procedures library, as an alternative to the built-in functions that create the local procedures library. An example of such a DLL is included in the gbVisualDesigner distribution, in the 'customdlls' subdirectory.

    The DLL uses a single function used as the interface between gbVisualDesigner and the external DLL, declared as follows: 

       Declare Function CustomLocalLibrary(fNameLibrary As String, IncludeFolders As String, _
             ExcludeFolders As String, Folders() As DirData, Files() As DirData) As String

    The following arguments are used:

    The custom DLL generates a procedure library in the file 'fNameLibrary'. Indexing and display of that file is handled by gbVisualDesigner.

    User - Custom Code Generator

    gbVisualDesigner allows users to provide an external DLL for generating the source code associated with a layout. An example of such a DLL is included in the gbVisualDesigner distribution, in the 'customdlls' subdirectory.

    The DLL uses a single function used as the interface between gbVisualDesigner and the external DLL, declared as follows: 

       Declare Function CustomGeneratedCode(fNameOUT As String, gbUDT As gbUDTType) As String

    The following arguments are used:

    All UDT elements correspond to gbVisualDesigner settings of the same name and have values of 0 or 1.

    This data type, and other data types that will be needed to read the layout file (fNameOUT) are located in the provided include file, gbtypes.inc.

    The CustomGeneratedCode function reads the layout file and returns the generated custom code as a string.

    User - Custom Formatter

    gbVisualDesigner allows users to provide an external DLL for formatting source code. An example of such a DLL is included in the gbVisualDesigner distribution, in the 'customdlls' subdirectory.

    The DLL uses a single function used as the interface between gbVisualDesigner and the external DLL, declared as follows: 

       Declare Function FormattedCode(fNameOUT As String) As String

    The following arguments are used:

    The FormattedCode function reads the source code from the file and returns the formatted code as a string.

    User - Custom Text Report

    gbVisualDesigner allows users to provide an external DLL for generating a custom report from a source code listing. An example of such a DLL is included in the gbVisualDesigner distribution, in the 'customdlls' subdirectory.

    The DLL uses a single function used as the interface between gbVisualDesigner and the external DLL, declared as follows: 

       Declare Function CustomReportT(fNameOUT As String) As String

    The following arguments are used:

    The CustomReportT procedure reads the source code from the file and returns the content of the text report as a string.

    User - Custom Graphic Report

    gbVisualDesigner allows users to provide an external DLL for generating a custom graphics report from a source code listing. An example of such a DLL is included in the gbVisualDesigner distribution, in the 'customdlls' subdirectory.

    The DLL uses a single function used as the interface between gbVisualDesigner and the external DLL, declared as follows: 

       Declare Function CustomReportG(fNameOUT As String, fImageNameOUT As String, w As Long, h As Long) As String

    The following arguments are used:

    The CustomReportG function reads the source code from the file, generates the graphic report (a bitmap) and saves the report to the file fImageNameOUT.

    The return value of the function is not used by gbVisualDesigner.

    User Pre-Processor

    gbVisualDesigner allows users to provide an external DLL for processing code before the code is sent to the PowerBASIC compiler. An example of such a DLL is included in the gbVisualDesigner distribution file, in the 'customdlls' subdirectory.

    The DLL uses a single function used as the interface between gbVisualDesigner and the external DLL, declared as follows: 

       Declare Function PreProcessCode(fNameOUT As String) As String

    The following arguments are used:

    The PreProcessCode function reads the source code from the file and returns modified ("pre-processed") code as a string.

    Miscellaneous

    This section is a catchall for information that doesn't fit in one of the sections above.

    INI File
    gbVisualDesigner application settings are saved in an INI file, kept in the same folder as the gbVisualDesigner application.

    Comments and suggestions are welcome!