Freeware
Freeware
My Freeware

Shareware
Shareware
My Shareware
PCMag Utilities

Special Sections
Combined List
Reviews
Developer Tools

Resources
Web Sites
Newsletters
Newsgroups
Organizations
SIA Awards

Quick Links
gbAnimator
gbCase
gbCodeLib
gbSnippets
gbGallery
gbNavigate
gbOfficeTimer
gbPlot
gbRegistry
gbReplace
gbSIRTS
gbSnippets
gbStreet
gbText
gbVRML
gbWebCam
gbXML

GBIC >> Software >> gbVisualDesigner
gbVisualDesigner

gbVisualDesigner is an easy-to-use programmers' tool for visually creating PowerBASIC applications. The user simply draws controls using a mouse and gbVisualDesigner generates the corresponding code, then compiles 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 simply indicates a group of files to be opened at the same time.

gbVisualDesigner emphasizes placing as much information at the fingertips of the programmer as possible. To that end, 3 different libraries of information are displayed - 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, and a library of all 50K+ PowerBASIC forum threads.

gbVisualDesigner provides 5 integrated source code editors, each with very powerful Intellisense editing features. There is a source code editor for the automatically generated code, one for the snippets library, one for the local procedures library, there's 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 25 source code analysis reports (such as Call Trees, Sorted Procedure Listing, etc.) are available and may be generated for source code found in any of the source code editors.

For programmers who want to provide their own source code generation, source code formattting, 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 (v1.0, 2.5M)

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:

  • Design a PowerBASIC application using only a mouse
  • Automatic source code generation
  • Built-in source code editors with Intellisense-like features (5 editors)
  • Open source code in PowerBASIC IDE
  • Compile and execute generated code
  • Open multiple files at one time
  • Project support
  • Built-In Libraries: source code snippets, local procedures listing, and forum threads
  • 25 Source Code analaysis reports
  • External DLLs supports to replace internal features

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


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 3 libraries of programming information (snippets, local procedures and forum threads) to drawn on! Plus, if you have a favorite, external editor, gbVisualDesigner can pass the source code to that editor.

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

  • Code generator overwrites previous user edits
  • A Layout is limited to a single dialog
  • Limited source code to layout conversion capabilities
  • Dialogs are limited to a single toolbar and statusbar


Session Capture

When you close gbVisualDesigner, the current session is saved, then restored when gbVisualDesigner is opened again. You do not have to take any other action - just close and open, and you'll be right back where you left off!

Any changes you've made will be automatically be saved as temporary session files. The original files will not be modified.

Content of the snippet, local procedure and scratch pad source code editors are also maintained between sessions.

An exception is the Snippets Library. If you've made changes to the snippets library then you will be asked to Save the snippets library when gbVisualDesigner closes.


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.


Supported File Formats

gbVisualDesigner can open files of several formats.
  • *.BAS,*.INC - standard source code files
  • *.LAY - contains both layout information and generated source code
  • *.LYP - a gbVisualDesigner project file (any combination of BAS/INC/LAY file types)

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

For example, when a *.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.

Likewise, if a *.BAS file is opened and Saved, only source code is contained in the saved file. If a file is saved as a *.BAS file, any layout editing done while the file is opened will be lost when the file is saved.


Layout Area

When a new layout is created, the layout area consists 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. Controls are selected for drawing as noted in the previous section. By default, once a control is drawn, gbVisualDesigner enters 'Select' mode. However, a toolbar button 'Repeat' is available that will let controls of the same type to be drawn repeatedly.

The dialog is always visible in the layout area. 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
To select a control to draw, just select the control from the control toolbar. Then, drag the mouse in the layout area to create the control. The layout area cursor changes to indicate the selected control. Here's an image of the control toolbar, showing which controls are supported.

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.

Once the controls are enabled, you can double-click on the Toolbar or Statusbar, to edit their properties. The main menu itself 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, but no support if provided for drawing custom controls using the mouse.

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

  • Via the Mouse - controls may be moved or resized using the mouse
  • Layout Area Context Menu - offers features for modifying selected controls
  • Control Property Dialog - double-click on the control to open the control property dialog
  • Control List Report - displays a list of all controls, allows various editing options

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.

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

  • Click a control to select it and remove all other selections
  • Click an empty area of the layout to unselect all controls
  • Dragging will move all selected items
  • Ctrl-Click will add/remove a control from the selection
  • Resize markers are displayed around each selected control
  • Drag resize markers to resize all selected items at one time
  • Del, Ctrl-X, Ctrl-C, Ctrl-V keyboard combinations do not apply to the layout area
  • When moved, controls snap to grid points (if setting is enabled)
  • Press Ctrl while dragging a control to ignore snap-to-grid settings

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.

  • Cut/Copy/Paste/Delete
    Standard functions, except that they work on controls within the layout

  • Duplicate Selected Controls
    Creates a copy of the selected controls, slightly offset in position from the currently selected items

  • Clear
    Remove all controls from the layout area, including menus, toolbar, statusbar. This action does not reset the resources selection list.

  • Control Property Dialog
    Opens the Control Property dialog for the control under the mouse. If no control is under the mouse, a Beep is played.

  • Dialog Property Dialog
    Opens the Dialog Property dialog

  • Select All
    Selects all items in the layout

  • UnSelect All
    UnSelects all items in the layout

  • Align Selected Item
    Places the top/left corner of selected items at the nearest grid coordinates

  • Left Align Selected Item
    Align all selected items with the leftmost selected item

  • Top Align Selected Item
    Align all selected items with the rightmost selected item

  • Group Selected Items
    Places all selected items into a common group

  • UnGroup Select Items
    Removes all selected items from all groups

  • Bring Selected Items to Front
    Draws the selected items prior to all other layout items

  • Send Selected Items to Back
    Places the selected items at the back of the drawing order

  • Capture Dialog Image
    Places an image of the dialog from the layout area onto the clipboard


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:

  • Caption
    This is the text shown in the dialog title bar (the caption).

  • Client Size
    the dialog client size (width x height)

  • Location
    the position on the screen of the upper-left corner of the dialog

  • Center Dialog on Screen
    centers the dialog on the screen (overrides the position information)

  • Use INI
    creates an INI file for saving application settings. It is pre-built with the ability to restore the application location and size between sessions.

  • Icon Assignment
    Enables the display of a selected icon (resource) in the dialog title bar. The icon must be selected from the adjacent dropdown list of resources. The list comes from the list of resources selected by the user in the 'Resources' TAB. If the user has not selected any resources, the dropdown list will be empty.

    The selected resource icon is displayed to the right of the dropdown list.

  • Font Assignment
    When selected, this option places a Dialog Default Font statement before the Dialog New statement. The font must be selected from the adjacent dropdown list of fonts. The font list comes from the list of fonts created by the user in the 'Fonts' TAB. If the user has not selected/created any fonts, the dropdown list will be empty.

  • Help File/URL
    Enables the creations of a hot key, F1, to open the specified Help file or web page.

  • Foreground Color
    foreground color of the dialog (in the compiled application)

  • Background Color
    background color of the dialog (in the compiled application)

  • Pixels
    Selects the use of Pixels over Dialog Units in the Dialog New statement

  • DPI Aware
    Sets the DPI-aware flag for the dialog by including an appropriate manifest in the 'Build'

  • Toolbar
    Adds a toolbar to the layout, located at the top of the dialog (just below the main menu, if a menu is used). Content of the statusbar is defined in the Control Properties dialog, which is opened by double-clicking on the toolbar in the layout.

  • StatusBar
    Adds a statusbar to the layout, located at the bottom of the dialog. Content of the statusbar is defined in the Control Properties dialog, which is opened by double-clicking on the statusbar in the layout.

  • Resources
    Allows the user to select resources (images, sounds, files, etc.) for inclusion in the application EXE. The resources defined here are available for use by all controls placed on the dialog. Press the "..." button to open the Resource Editor. Many resources may be listed in the Resources Editor, but only those checked are included in the build.

  • Main Menu
    Enables the build of a main menu. The menu structure is defined in the 'Main Menu' TAB. Command key definition is supported.

  • Fonts
    Enables the build of a pool of up to 4 additional (plus the default) fonts for use by individual controls. Pool fonts are defined/enables in the 'Fonts' TAB.

  • Styles
    Allows the use to select the specific styles to be applied to the dialog. These are used only if 'Use Default Styles' is unchecked.

  • Extended Styles
    Allows the use to select the specific extended styles to be applied to the dialog. These are used only if 'Use Default Styles' is unchecked. The default styles assigned to controls are the same as specified in the PowerBASIC Help file. Simply check or uncheck a style to add/remove it from a control's style.

  • Use Default Styles
    Uses default styles and extended styles in the 'Build'. This overrides the individually selected styles and extended styles. The default extended styles assigned to controls are the same as specified in the PowerBASIC Help file. Simply check or uncheck a style to add/remove it from a control's extended style.

  • Reset Styles
    Sets the checked styles and extended styles to those specified in the PowerBASIC Help file.



Resources/Menu/Fonts Editors

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 Property 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 (Tab#5).

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

Not all controls have the same properties. So the content of the Control Property dialog may differ from the image shown, depending on the control type.

  • Caption
    This is the text that would normally be used in the PowerBASIC Control Add statement as the text to be initially display in a control. gbVisualDesigner allows the use of this text, the control ID, or the control type as the text to be displayed in the layout area or to be used in the Control Add statement during a 'Build'.

  • Background Color
    The control background color. This is shown in the compiled application, not in the layout area.

  • Caption Color
    The control foreground color. Used to display text in the compiled application, not in the layout area.

  • Ctrl ID
    Control ID numbers are assigned when the source code is generated, but may be overridden by the user by editing the Control Properties dialog using the appropriate toolbar Settings button dropdown menu option.

  • Initial Content
    Entry of initial values is supported for the ComboBox, ListBox, ListView, TextBox, and TreeView. A simple textbox is used to enter the initial values. The following image shows how to enter initial values for each of these five controls.

  • Context Menu
    gbVisualDesigner provides an easy way to create a content menu for the ComboBox, Graphic, ListBox, ListView, ProgressBar, TextBox, TreeView and StatusBar controls. A simple text box is used to enter the context menu, using the same format as is used for entering the main menu. See the "Menu" tab discussion for additional details.

  • Image
    The image property can be a file name or the name of a resource item, depending on the requirements of the control. The "..." button allows the user to select a file, if one is required. Where a resource name is required, the available image resources are shown in the dropdown list of the combobox control.

    Only the Graphic control allows the use of an external file for an image. The Image, ImageX, ImgButton, and ImgButtonX controls require a resource image, and the image must have been selected in the 'Resources' TAB. The list of selected images is available in the dropdown combobox adjacent to the Image selection checkbox.

    The default styles or extended styles assigned to controls are the same as specified in the PowerBASIC Help file. Simply check or uncheck a style to add/remove it from the dialog's style.

  • Font
    Enables the use of a font from the pool of fonts defined in the 'Font' TAB.

  • Styles/ExtStyles
    Each control is assigned default style/extended style values. To override the defaults, just check or uncheck the values shown.

  • Use Default Styles/ExtStyles
    This setting tells gbVisualDesigner to apply default control settings during a Build. It does not change the selected style/extstyle values, as shown in this dialog. These are left intact so that the user can return to them at a later point in time.


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 beneath the layout area.

When a 'Build' command is executed it will overwrite all source code already in the Source Code TAB - including all user edits!. All previously generated source code and users edit 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 *.bas file.

Code is submitted to the user-specified IDE by saving the generated source code to a temporary file, then opening that file in the IDE. Submitting code to the IDE does not save the changes the currently opened file.

Building a Layout from Source Code
gbVisualDesigner has the option to create a layout and dialog/control settings from pre-existing 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.


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 several of the custom code analysis reports.

Source code in any of the editors can be manually modified, compiled and executed, or sent to the user-specified IDE (such as the PowerBASIC IDE) for further editing. Code submittal is made by saving the generated source code to a temporary file, then opening that file in the IDE.

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 gbProcedureLibrary 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.


Toolbars

The gbVisualDesigner interface includes 7 different toolbars. Which toolbars are displayed depends on which portion of the user interface is currently selected.

More detailed description of each toolbar are provided in other sections.

Primary Toolbar
This toolbar 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.

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

Control Toolbar
This toolbar is always visible. It allows the user to select which control will be drawn in the layout.

Snippet Library Toolbar
This toolbar is available only when the snippets library is displayed. It provide options for modifying the Snippets Library.

Source Code Editor Toolbar
This toolbar is available only when the Source Code, Snippets, Procedures, and Scratch Pad TABs are selected. It provides options for modifying content of the source code editors.

It also allows the user to send the source code to the PowerBASIC IDE, to compile/run the source code or to print the source code.

Reports Toolbar
This toolbar is displayed only when the Reports TAB is selected. It allows the ser to select which source code is used to generate the reports.

It also lets the user refresh the current report and to jump to the source code listing from which the report was generated.

Threads Toolbar
This toolbar is displayed only when the Threads TAB is selected. It provides otpions for navigating/searching through the displayed thread.

It also allows the user to bookmark and print threads.

Reference Toolbar
This toolbar is displayed only when the References TAB is selected. It allows the user to select which reference information is displayed.


Main Toolbar

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

  • Open
    Opens a dialog for selecting a layout file to open in gbVisualDesigner. The adjacent dropdown list lists all files in the "layouts" subfolder, providing an easier way to select a file to open.
  • Import Controls from Layout
    Extracts just the controls form an existing *.lay layout file
  • Import VB6 Project
    Imports a VB6 project (*.vbp) as a new layout
  • Recently Opened Layouts

  • New
    Creates a new, empty layout. The user is first asked to save any changes in the current layout.

  • Save
    Saves the current layout without asking the user for confirmation. Uses the current filename. A 'Save As' option is available via the dropdown menu adjacent to the Save button.

  • Remove
    Removes the last control added to the layout

  • Restore
    Restores the last control removed form the layout

  • Select
    Enters Select mode, allowing the user to draw select controls as discussed above, or by drawing a rectangle around controls to select them. A selection rectangle need only cross a control to select it.

  • Repeat
    When pressed, allows a user to repeatedly draw the selected control. When not pressed, gbVisualDesigner automatically enters 'Select' mode after drawing a control.

  • Build
    When pressed, generates the source code based on the current dialog/control layout. The associated Build dropdown menu and submenu provides the following options:

    • Build as SDK Code
      Generates SDK style code instead of DDT style code
    • Use External DLL
      Source code generation is performed by a user-written code generator DLL. See the section below for more details.
    • Minimal Code Result
      Returns only Control Add statements in the generated source code
    • Auto Build Code Before Compilation
      Automatically runs 'Build' before compiling. Leave this unchecked when you want to manually edit the generated code before compilation.
    • Close EXE Before Compilation
      Before compiling, shuts down the running EXE from the previous Compile & Run action
    • Open Source Code Folder
      Opens the subfolder 'tempfiles' in Window Explorer. That folder is where generated source code is stored in temporary files before passing the code on to the PowerBASIC IDE.
    • Open Layout Folder
      Opens the 'Layout' subfolder in Windows Explorer

    And then these menu options are available for the sub-menu, 'Code Generator Settings':

    • Ignore Controls Outside Dialog
      Does not include controls in the generated source code unless they are wholly within the dialog boundaries
    • New Control IDs on Build
      Reassigns control IDs when a Build occurs. This may be used to prevent user-assigned control IDs from being overwritten during a Build. This setting does not apply to controls which have had no control ID assigned. In such cases, a Build always generates a control ID.
    • Syntax Highlighting
      Determines whether syntax highlighting is applied to the generated code, library code, and function code
    • Comment Separators
      Adds comment lines between the code generated for each control
    • Unicode Includes
      Added the %Unicode=1 statement to the build
    • %WS_OverlappedWindow As Default Style
      Uses this style as the default dialog style
    • %SS_Notify As Default Style
      Adds this style to the Graphic, Image, ImageX, and Label controls
    • Common Edit Control SubClassing
      When context menus are requests for TextBox or ComboBox controls, uses a common edit control procedure and context menu
    • #Debug Statements
      Added the standard debug statements to the build
    • Select Generated Code TAB on Build
      Ensures that the generated code TAB is visible following a build
    • Set Indentation Level
      Opens a dialog to allow the user to specify how many spaces are in each indentation level of code

  • IDE
    When pressed, the source code is saved to a file and that file is then opened in the selected IDE.

  • Compile
    When pressed, the source code is saved to a file and that file is then compiled and executed. The associated Compile dropdown menu provides the following options:

    • Select IDE
      Select the IDE in which to open the source code
    • Select Compiler
      Select the EXE used to compile the source code
    • Select PowerBASIC Include Folder
      Select the folder containing the PowerBASIC include files
    • Select Jose Roca Include Folder
      Select the folder containing the Jose Roca include files
    • Use Jose Roca Includes
      determines whether the PowerBASIC or Jose Roca includes will be used

  • Tools
    When pressed opens the 'References' TAB to the Ascii Code table. The associated dropdown menu gives access to the following external tools:

    Additional detail on each of these is provided in the Tools section further down this page.

  • Settings
    When pressed, toggles display of the grid as dots or as lines. The associated Settings dropdown menu provides the following menu options:

    • Ask Confirmation
      Before opening a new file, asks the user to save any changes made to the current layout.
    • Auto Select Mode After Draw
      After drawing a shape, go into Select mode
    • Auto Select Frame Children
      When a Frame control is selected, all children of the frame (controls which overlap or are contained in the Frame) are also selected
    • Auto List Available Resources
      Directs the Resources TAB to automatically list the resources found in the 'Resources' subfolder
    • Show Main Toolbar Captions
      Shows/hides text in the main toolbar
    • Show Control Toolbar
      Shows/hides the optional control toolbar
    • Show Ruler
      Displays a ruler along the left/top edges of the layout area. The ruler gives the client area dimensions.
    • Landscape Printing
      Enables landscape mode for printing the layout image
    • Control IDs as Description
      The control ID is used as the displayed control text
    • Caption as Description
      The control caption is used as the displayed control text
    • Control Type as Description
      The control type is used as the displayed control text
    • Grid Options

      • Show Grid
        Determines if a grid is shown, or hidden. Default is shown.
      • Grid Lines
        By default, grids are made up of dots. This menu item cause the grid to be drawn as lines
      • Snap To Grid
        Enables forced placement of moved items at grid points. On by default
      • Snap Half Grid
        When Snap To Grid is on, allows snapping at half grid positions
    • Color Options

      • Grid
        Opens a color dialog for selecting the color used to draw the grid
      • Ruler
        Opens a color dialog for selecting the color used to draw the ruler
      • Layout Area
        Sets the background color of the layout area
      • Dialog Border
        Sets the color used to draw the dialog in the layout area
      • Strings
        Sets the syntax highlighting color for strings embedded in the source code
      • Comments
        Sets the syntax highlighting color for source code comments
      • KeyWords
        Sets the syntax highlighting color for PowerBASIC keywords
      • Set Colors to Default
        Sets all colors to the default values

  • Code Editor Options

    • Syntax Highlighting
      Apply syntax highlighting to source code
    • Line Numbers
      Display line numbers with source code
    • GreenBars
      Alternate line coloring
    • Active URLs
      Highlight/activate URLs found in the source code listing
    • Brace Highlighting
      Identify matching braces
    • Indentation Guides
      Provide vertical alignment guides
    • Call Tips
    • AutoCompletion
    • AutoIndentation
    • Code Folding
    • Upper Case
      Display all keywords in upper case
    • Lower Case
      Display all keywords in lower case
    • Mixed
      Display all keywords in mixed case (1st letter upper)
    • Select Keywords Color...
    • Select Comments Color...
    • Select Strings Color...
    • Select Operators Color...
    • Select Numbers Color...
    • Set Colors to Default
      Sets all colors to the default values

  • Help
    Opens the online Help page (this page). The Help dropdown menu provides the following menu options:

    • Online Update
      Opens the local Help popup dialog
    • Email Author
      Open local email client with email addressed to author
    • PowerBASIC Home Page
      Opens default browser to PowerBASIC home page (http://www.powerbasic.com)
    • PowerBASIC Online Tutorial
      Opens default browser to PowerBASIC tutorial (http://www.garybeene.com/power)
    • PowerBASIC Source Code
      Opens default browser to online source code examples (http://www.garybeene.com/code)


    Libraries

    Snippets

    Local Procedures

    Threads


    Secondary TAB

    Just below the layout area is a TAB which allows the user to select from various source code editors, reports, forums threads and reference materials. These are the displayed TABs:

    1. Source 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 - 15 source code analysis reports (applied to any of the source code editors)
    6. Threads - display of a PowerBASIC forum thread
    7. Reference - display of 6 different reference information data sets

    Several of the TABs (Generated Code, Snippets, Procedures and Scratch Pad) display syntax highlighted source code. The following toolbar is displayed when those TABs are selected.

    This toolbar applies to whichever source code TAB is selected.

    • Cut - Copy the selected text, then delete it
    • Copy - Copy the selected text
    • Paste - Paste text from the clipboard at the cursor
    • Delete - Delete the selected text
    • Undo -
    • Redo
    • Comment - Comment the lines containing the selected text
    • UnComment - UnComment the lines containing the selected text
    • Indent - Indent the lines containing the selected text
    • OutDent - Outdent the lines containing the selecte text
    • Fold All - Fold all procedures in the source code
    • UnFold All - Unfold all procedures in the source code
    • Send to PowerBASIC IDE - Send the source code to the PowerBASIC IDE
    • Compile and Run - Compile the source code and run the EXE
    Each of the tabbed sections are described in more detail below.


    Tab#1: Source Code

    The first tab contains a single code editor, in which is displayed 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, 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.

    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 jusitfy 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.
    • Open Help at Selection
      Open the PowerBASIC Help file at the selected word
    • Show Split Screen
      Display a 2nd source code editor - vertical split screen
    • 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. The file is not loaded into gbVisualDesigner
    • Export as BBCode
      Places forum-ready syntax highlighted code onto the clipboard
    • 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 code is very limited. It currently cannot faithfully convert any but the simplest code to a layout.

    Procedures
    At the right of the source code is an optional list of the procedures found in the source code listing. When shown, double-clicking on a procedure will scroll the source code editor to that procedure.

    The procedure list may be sorted by clicking on the list header. It has a context menu which allows the list to be refreshed, copied to the clipboard, or widened for easier viewing of longer procedure name.


    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.


    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 snippet content but changes cannot be saved (changes to a user's source code file must be made by opening the original file).


    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 snippet content and will be prompted to save the changes to the library/snippet when gbVisualDesigner is closed.


    Tab#5: Code Reports

    The fifth tab is used to display one of the 15 available 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.

    These reports make use of ListView, TreeView, Scintilla and TextBox controls. In the case of the Scintilla and TextBox controls, the user is allowed to edit the contents but changes are not automatically saved by gbVisualDesigner.

    Here's a description of the 15 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) - with two exceptions. The Layout Control List always is drawn from the Layout, not from any source code. And, the Last Compile Log is always the log from the latest source code compilation.

    • Layout Control List
    • Code Control List
    • Last Compile Log
    • Call Tree
    • Called By Tree
    • API Tree
    • Sorted Procedures
    • Non-Procedure Code
    • Formatted Code
    • Left Justified
    • Sorted Lines
    • Sorted/Trimmed
    • Letter Frequency
    • Words (All)
    • Words (Unique)

    An image of each report and additional detail on what the reports contain is provided further down this Help page.


    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.

    Threads are displayed as read-only.


    Tab#7: Reference Materials

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

    The following information categories may be displayed:

    • Ascii Table - table of Ascii values
    • String Equates - built-in PowerBASIC string equates
    • Color Equates - built-in PowerBASIC color equates
    • UDT Structures - built-in PowerBASIC structures
    • Virtual Keys - list of virtual key codes
    • Calculators - conversion between decimal, hex and binary numbers

    Suggestions for additional information categories is always welcome!


    Code Reports

    Layout Control List
    The Control List contains a line for each control in the layout, where each line contains the caption, size, location and control type of the control. Controls which are selected in the Layout Drawing area will also be checked in the Layout Control List. Likewise, checking or unchecking an item in the Layout Control List will cause the corresponding item in the layout to be selected/unselected.

    Double-clicking on an item in the Layout Control List, or in the Layout Drawing area, will open a dialog for editing the control properties.

    It may also be used to edit the content of the Layout. Deleting a control from this list deletes it from the Layout. Also, checking a control on this list selects the control on the Layout. These features make it easy to select a control(s) with the desired features.

    Code Control List
    This report can be applied to any source listing - generated, snippet, local or test.

    It is used to get a quick view of the Controls which are contained in the source code. It's generated by detecting all Control Add statements.

    Last Compile Log
    Whenever the Compile feature of gbVisualDesigner is used, the compiler is directed to provide a compilation log to a temporary file location. This report displays that log.

    The log is generated when any of the source code listings are compiled.

    Call Tree

    Called By Tree

    API Tree
    This report lists which API are used in an application and from which procedure they are called.

    The report can help programmer's identify where API are used.

    Sorted Procedures
    This report locates all procedures in the source code and sorts them in alphabetical order of the procedure declaration line.

    Application procedures are often added randomly - as the programmer needs them. Sorting the procedures can make it easier/quicker to locate a function of interest.

    Non-Procedure Code
    All source code, except that found in procedures, is included in this report.

    For maintenance reasons, a programmer may want to keep all such code together, and usually at the start of the application source code listing.

    Formatted Code
    Programmers' often have personal preferences as to how their code looks. This report gives a preview of how the built-in formatting will make the source code look.

    This lets the user see the results before applying them to their source code.

    Left Justified
    This report removes all leading spaces from the source code.

    It can be use to provide a contrast between pre-formatted code (left justified) and formatted code.

    Sorted Lines
    This report sorts all of the lines of code, as is.

    Having lines sorted allows the programmer to examine code for common handling of code constructs, or to look for specific constructs.

    Sorted/Trimmed
    Before sorting, this report removes all spaces at the front of each line.

    By removing the spaces, the programmer can see similar lines which might differ only by their indentation levels.

    Letter Frequency
    This report provides a word count and letter frequency plot.

    It is used by the programmer to help assess the size of the source code.

    Words (All)
    All words in the source code are listed (sorted).

    This report helps the programmer evaluate what statements are used in the source code and to help identify unexpected content.

    Words (Unique)
    All unique words in the source code are listed (sorted).

    The list allows the programmer to evaluate the procedures and variables used in the source code.


    Keyboard Shortcuts

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

    • F1 - Help
    • F2 - Show Procedure List in Generated Code TAB
    • F3 - Open Find dialog for current source code editor
    • F4 - Cycle through Library display options (Content, Search Results, Both)
    • F1 - Help
    • Ctrl-A - Select all items
    • Ctrl-E - Clear (remove) all items
    • Ctrl-F - Send selected items to front
    • Ctrl-G - Align selected items to grid
    • Ctrl-I - Capture next selection as *.BMP file. Places in the tempFile subfolder.
    • Ctrl-N - Sequentially number selected items
    • Ctrl-S - Save layout as current filename with no user confirmation
    • Ctrl-Z - Remove most recently added layout item


    External Tools

    The toolbar 'Tools' button provides access to several external tools that are distributed with gbVisualDesigner.

  • Poffs
    View and search PowerBASIC forum thread content with this text-based utility.

  • PBReference
    gbVisualDesigner's built-in 'References' TAB was modeled after, and contains information similar to, the PBReference utility - which was written by Bruce Brown.

    However, having an independent window with the reference information can sometimes be convenient, so I've included PBReference in the tools list.

  • PBCodec
    I use PBCodec on every single application I write.

    It's ability to detect unused/duplicate variables and functions is very useful! Originally written by Borje Hagsten, I've included a version updated recently by Nathan Maddox.

  • 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.

  • 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.


    External DLL (User Written) Code Generator

    gbVisualDesigner allows users to create an external DLL for generating the source code associated with a layout. An example of such a DLL is included in the gbVisualDesigner distribution file.

    There is a single function used as the interface between gbVisualDesigner and the external DLL, declared as follows with just two arguments:

    Declare Function CustomSourceCode(fNameSENT As String, gbUDT As gbUDTType) As String
    

    fNameSENT
    This is the file containing all layout information. It is identical to *.lay file format, except that it contains no generated source code.

    gbUDT
    A UDT which contains the user settings as needed to describe the code that is to be returned to gbVisualDesigner. All UDT elements correspond to gbVisualDesigner settings of the same name and should be set to 0 (False) or 1 (True).

    Type gbUDT
       SDK As Long
       MinimalCode As Long
       IgnoreOutsideControls As Long
       NewControlIDsOnBuild As Long
       CommentSeparators As Long
       Unicode As Long
       WS_Overlapped As Long
       SS_Notify As Long
       CommonEditSubClassing As Long
       DebugStatements As Long
    End Type
    

    The return value (a string) of CustomSourceCode is the name of the file generated by the external DLL. The contents of this file will be loaded by gbVisualDesigner into the Generated Code TAB.


    Other Comments

    Miscellaneous information is provided in this section.

    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!

     

  •  


    Tab#7: Resources Editor

    Application resources are defined/edited in this tab. Note that the Dialog property editing dialog provides checkboxes to determine whether the resources are used in a Build.

    It is important to note that the dialog and many controls may require image resources, so setting the resources should be one of the first steps in creating a new application. In several cases, gbVisualDesigner fills a combobox list with available image resources - which cannot be done until resources are selected via this tab. There are no default resources. There are resources (images) supplied with gbVisualDesigner. These are kept in the 'resources' subfolder.

    Embedding resources is very simple. In the resource editor dialog, use the "Add" button to open a file selection dialog for selecting a file to insert into the resource list. You can also remove items from the list.

    gbVisualDesigner will use the file extension to generate the appropriate #Resource statements to put in the generated code.

    The filename (without spaces and without the extension) is used as the resource name, as this example #Resource statement shows:

         #Resource Bitmap, zcowgirl, "C:\data\gbapps\gbVisualDesigner\files\cowgirl.bmp"
    

    Resource names are prefixed with a 'z' to ensure that the file name does not conflict with a reserved PowerBASIC word.

    The list of resources is shown in a ListBox control and may not be manually edited.

    These options are available from the content menu.


    Tab#8: Main Menu Editor

    The main dialog menu is defined/edited in this tab. Note that the Dialog property editing dialog provides checkboxes to determine whether the menu is used in a Build.

    Creating a menu is very simple. In the menu editor dialog, just type in the desired menu structure. Three dots is used to imply a menu level. The above image shows the approach.

    Any number of menu levels may be entered.

    Use an ampersand (&) to indicate letters to be used as command accelerators.

    Use a '|' symbol to indicate a keyboard accelerator.


    Tab#9: Toolbar Editor

    The ToolBar is defined/edited in this tab. Note that the Dialog property editing dialog provides checkboxes to determine whether the ToolBar is used in a Build.

    ToolBar
    gbVisualDesigner supports the creation of a single Toolbar (Windows allows more than one). The following Toolbar properties may be set by the user:

    For a new design, gbVisualDesigner creates an optional button for each icon found in the 'resources' subfolder. The user simply checks which button to include in the ToolBar.

    Buttons may be repositioned up/down to achieve the desired order.

    Buttons may be eliminated from the list, although simply unchecking them is suggested in order to maintain a visible list of optional buttons for adding at a later time.

    Buttons may also be added. When a button is added, it's icon is left blank. It's caption/tooltip/style are set to default values.

    For any button, double-click to open the ToolBar Button Editor, as shown in the following image.

    These options are available from the content menu.


    Tab#10: Fonts Editor

    gbVisualDesigner allows the user to create a pool of fonts, for use by any control in the dialog design. Once fonts are defined on this TAB, the fonts become available to controls via the Control Property dialog.

    Just select the "..." buttons to define the fonts. Only those fonts checked will be created as part of the next 'Build'.

    The Reset All button unchecks all items and restore the font information to a default set of fonts.