Ide/Resource Editor

From wiki.visual-prolog.com

Revision as of 14:24, 14 March 2013 by GalinaTchekmareva (talk | contribs) (New page: {{ideNavbar|Resource Editor}} The term ''resource'' is applied to the things like dialogs, forms, icons, cursors, pens, brushes, etc. Resources can be created by one of the IDE resource e...)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

IDE

The term resource is applied to the things like dialogs, forms, icons, cursors, pens, brushes, etc. Resources can be created by one of the IDE resource editors, or just added to a project. The correspondent resource files are referenced from a project file.

During project building IDE generates binary ProjectName.res file which is provided to a linker. IDE also generates resourceIdentifiers.i file which specifies numeric constants for resource identifiers. Resource identifierd can be refered from sources codes to provide the proper resource handling. The names and values for resource identifiers can be set or changed with the help of IDE resource editors.

GUI and VPI Style Resources

Historically windowing programs - that is, programs with the graphical user interface - were developed in Visual Prolog using the VPI (Visual Programming Interface) package supplied as one of packages in Prolog Foundation Classes (PFC).

The Visual Programming Interface (VPI) is a high-level Application Programming Interface (API) and it is designed to make it easy for Prolog applications to provide sophisticated user interfaces utilizing the graphical capabilities of today's operating systems and display hardware. The resources and tools needed by such applications - windows, menus, dialogs, controls, pens, brushes, cursors, carets, pictures, etc. all appear as simple Prolog structures.

However, the VPI layer (PFC\vpi) provides an old style of handling the graphical user interface. This was the reason why the PDC has developed the modern GUI package (pfc\gui), which provides really object-oriented implementation of API handling of the main windowing system features. The GUI package presents the object-oriented windows, dialogs, forms, controls, etc., handling. This package is built on top of the VPI package and delivers a new level of abstraction and ease of use while retaining compatibility with VPI programs since both the GUI and VPI programming styles can be applied in the same program.

Currently for new GUI applications the IDE generates the default program code which use the GUI package features (but it still possible to edit old VPI style dialogs, etc.).

Notice that in VPI style programs, except for VPI style dialogs and VPI style windows you can also create GUI style forms, which, of course, are handled by GUI package predicates. From the other side, since each GUI program includes the VPI package, so some VPI features can be embedded into GUI style programs.

To understand difference of GUI and VPI style programs and difference of GUI and VPI style dialogs, windows, forms, controls, etc., we recommend to read carefully VPI and GUI programming tutorials on WEB.

IDE Designer

Creating a Dialog

Editing of dialogs, windows, form, and IDE Controls on the IDE Designer are very closely related. The only real difference is that definitions of the VPI package dialogs are (normally) put into resource files, whereas GUI package dialogs, windows, and forms are always created dynamically by code.


Creating a Dialog

To create and register a new dialog in a project you need to use the File | New menu command. Then the Create Project Item dialog will look like:

Ide NewDialog Dialog.png

Name

In the Name field you should type in the name, which will be associated with this dialog in the automatically generated code. This name should be a correct Visual Prolog name. It should be any sequence of letters, digits, and underscores, beginning with a letter. This name is used to generate names of files handling the dialog. These files appear in the project tree in the Project window. The Code Expert uses this name for names of predicates handling the dialog.

Package

You should check one of the New Package or Existing Package radio buttons to specify whether the generated resource file, interface and class, which handle the dialog, will be included to the new package that will be created or will be included to the existing one.
If you check the New Package button, then you can specify the parent directory name in the Parent Directory field. The package and the dialog handling files will be created and placed into the parent directory.
If you check the Existing Package button, then in the Package list button you should select one of the packages known to the project. The files handling the created dialog will be included into this package. The created files will be placed into the selected package subdirectory

In namespace

If this flag is checked, then it is possible to define a namespace in which the correspondent automatically generated interface, class declaration and class implementation will be placed.

After you fill in all required settings, you should press the Create button, then the Dialog Properties/Attributes dialog appears.

Dialog Properties and Attributes

When you create a dialog it looks like:

Ide DialogAttributes Dialog0.png

Title

At runtime this text appears in the title of the dialog window. This field is ignored if the Titlebar property is set to false or Titlebar check box is not checked.

Dialog Type

It is the Type property. Values Modal and Modeless can be set.
If the Modal property is set to true, then the created dialog will be modal. Modal dialogs prohibit activation of another windows or dialogs in the same application until the modal dialog is closed.
If the Modal property is set to false, then the created dialog will be modeless.

Style Flags

Set of properties that control the look of the dialog. When some option is set to true, then the correspondent property is set to the dialog.
  • Titlebar
    When this attribute is set to true or is checked, the dialog will have a title bar.
  • CloseBox
    When this attribute is set to true or is checked, the dialog will have a close box.
  • MaximizeBox
    Creates the maximize box in the title bar of the dialog window.
  • MinimizeBox
    Creates the minimize box in the title bar for the dialog window.
  • Invisible
    When the dialog will be opened the first time, it will be invisible. Notice that, even if a modal dialog is created with the Invisible option, it will be initially visible.
    The programmer can make a modal dialog invisible by the call to
    window::setState([vpiDomains::wsf_Invisible,...])
  • Disabled
    Determines that the dialog will be displayed as disabled (grayed) when it will be first opened.
  • ClipSiblings
    Specifies that two dialogs with the same parent window should use clipping.
  • ClipChildren
    Specifies that drawing over any child windows should be clipped.
  • HorizScrollbar
    When it is set to true, the dialog includes a horizontal scroll bar.
  • VertScrollbar
    When it is set to true, A the dialog includes a vertical scroll bar.
  • ChildDialog
    Specifies that the dialog window has behavior similar to child windows. This means that:
    • The dialog window is restricted to stay inside the client rectangle of its parent window.
    • The dialog window can be partially or completely obscured by any overlapping windows.
    • Under MDI mode. When the parent window of the dialog is a task window, then the created dialog is (usually) initially hidden (obscured by other windows).
    It is disabled if the Modal property is set to true.
  • SizeBorder
    When it is set to true, the dialog gets double border (such dialogs can be resized).

Position
Size

Two properties that determine the position and the size of the dialog. The coordinates are given in Dialog Base Units. One unit in the X direction is equal to one quarter of the width dialog base unit. One unit in the Y direction is equal to one eighth of the height dialog base unit. The dialog base units are computed from the height and width of the system font.

Font

The property for with which you can select attributes of the font used in controls of the dialog. Note that the selected font is not seen while dialog editing, but using the Resource | Test Mode command it is possible to see how the dialog will look like. The Dialog Base Unit size is scaled by the operating system depending upon the font size - but note that bitmaps and icons are not scaled. Be careful not to specify any fonts that may not exist in the environments where your application might be used.

Default Button

Specifies the default button for a dialog. This button action is called when the user presses the Enter key.

After you fill all the required attributes you may click the OK button. Clicking the OK button you create the new dialog in the current project.

The properties panel is always present in design mode.

After you compile the package in which the created dialog is included, the project tree starts to display files handling the dialog (the interface, the class, and the implementation).

Editing a Dialog

To edit a dialog, in the project tree (in the Project window) double click (or press Enter) the name of a file with a dialog description (the .dlg filename extension). The [Window_and_Dialog_Editor.htm IDE Designer] appears and you can edit whatever form of a dialog you wish.

Ide MyDialog Editor.png

The IDE Designer After Creation of a New Dialog

When a new dialog is created, it will by default have three push button controls: OK, Cancel and Help. These can freely be rearranged or deleted.

Controls

Each control in a dialog must have an identifying name (constant in VPI style dialogs), which is unique within that dialog. While two controls within one dialog may not have the same name (or constant value), it is actually a good idea if controls in different dialogs, which perform the same action have the same names (or constants).

Types of Controls
Ide PushButton.png A Push Button control serves to initiate a specialized action in an application.
Ide CheckBox.png A Check Box control lets you indicate a choice among two alternatives. For example some facility may be switched ON or switched OFF.
Ide RadioButton.png A group of Radio Button controls serves to indicate one choice from among a list of alternatives.
Ide StaticText.png A Static Text control reserves an area for the text in the dialog. Although called static, in fact the application can change the text during execution. This is often used for prompts or field names relating to other controls.
Ide EditControl.png An Edit Control reserves an area for text editing (e.g. names, numbers, text constants etc.). Editing text strings with multiple lines is possible.
Ide ListBox.png A List Box allows you to view a list of elements and to select one - or several - elements from this list.
Ide ListButton.png A List Button control serves for choosing one from the pop-out set of the alternatives revealed by pressing the button. Pressing the button again pops the list back in again.
Ide ListEdit.png A List Edit control allows single line text editing like an Edit control, or selection from a list of elements.
Ide VerticalScrollBar.png  Ide HorizontalScrollBar.png The Vertical Scroll Bar and the Horizontal Scroll Bar controls serve to select a value within a scale of values.
Ide GroupBox.png A Group Box control serves for assembling together a number of controls in a functional group with a Group Name. Its only function is a visual one.
Ide Icon.png An Icon control reserves an area for an icon image.
Ide CustomControl.png A Custom Control can be either IDE Controls created in the project, it can be VPI user-defined control with a window class defined by vpi::classCreate, or it can be controls imported as COM packages from DLLs, VBXs or OCXs.
Inserting Controls

To insert a new control in a dialog, click the icon of the desired control type in the Controls toolbar. (You can also select the desired control type in the Controls sub-menu of the main IDE menu or in the pop-up menu in the [Window_and_Dialog_Editor.htm IDE Designer].)

Controls Toolbar

Toolbar Editor

Menu Editor

Graphics Editor