Difference between revisions of "Ide/Resource Editor"

From wiki.visual-prolog.com
(Editing the Window Submenu: video)
 
(20 intermediate revisions by 3 users not shown)
Line 22: Line 22:


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


{{:ide/Creating new Project Items/Creating a Dialog}}
{{:ide/Creating new Project Items/Creating a Dialog}}


=== Editing a Dialog ===
{{:ide/Resource Editor/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
{{ide|Resource Editor#IDE Designer|'''IDE Designer'''}} appears and you can edit whatever form of a dialog you wish.


[[Image:Ide_MyDialog_Editor.png|center]]
=== Creating and Editing a Window ===
The IDE does not support the creation or editing of the old-style VPI windows. You should use
{{ide|Resource Editor#Creating and Editing a Form|'''Forms'''}} instead of windows (see description of forms in the GUI package overview in the PFC part of Help for more details).


The IDE Designer After Creation of a New Dialog
However, the IDE automatically creates for GUI applications the special resource file '''TaskWindow.win''' which is placed if the TaskWindow sub-directory of the project root directory. This resource file can be later changed by the IDE resource editor.


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.
=== Creating and Editing a Form ===
{{:ide/Creating new Project Items/Creating a Form}}


==== Controls ====
== Toolbar Editor ==


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).
The '''Toolbar''' editor allows you interactively create various kinds of toolbars.
{{:ide/Creating new Project Items/Creating a Toolbar}}


===== Types of Controls =====
{{:ide/Resource Editor/Editing a Toolbar}}


{|{{prettytable}}
== Menu Editor ==
|-
| [[Image:Ide_PushButton.png]]
| A '''Push Button''' control serves to initiate a specialized action in an application.
|-
| [[Image: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.
|-
| [[Image:Ide_RadioButton.png]]
| A group of '''Radio Button''' controls serves to indicate one choice from among a list of alternatives.
|-
| [[Image: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.
|-
| [[Image: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.
|-
| [[Image:Ide_ListBox.png]]
| A '''List Box''' allows you to view a list of elements and to select one - or several - elements from this list.
|-
| [[Image: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.
|-
| [[Image:Ide_ListEdit.png]]
| A '''List Edit''' control allows single line text editing like an '''Edit''' control, or selection from a list of elements.
|-
| [[Image:Ide_VerticalScrollBar.png]]  [[Image:Ide_HorizontalScrollBar.png]]
| The '''Vertical Scroll Bar''' and the '''Horizontal Scroll Bar''' controls serve to select a value within a scale of values.
|-
| [[Image: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.
|-
| [[Image:Ide_Icon.png]]
| An '''Icon''' control reserves an area for an icon image.
|-
| [[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 <vp>vpi::classCreate</vp>, or it can be controls imported as {{ide|Creating new Project Items#Creating a COM Package|COM packages}} from DLLs, VBXs or OCXs.
|}


===== Inserting Controls =====
The '''Menu Editor''' can be used to create both pull-down menus (for windows), and pop-up menus (useful for object oriented user interfaces).
{{:ide/Creating new Project Items/Creating a Menu}}


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 {{ide|Resource Editor#IDE Designer|'''IDE Designer'''}}.)
==== Editing a Menu ====


===== Controls Toolbar =====
To edit a menu, double-click (or press '''Enter''') the name of a file with a menu description in the project tree in the '''Project''' window. For example '''TaskMenu.mnu'''. The '''Menu Editor''' dialog appears and you can create (or modify) whatever kind of a menu you wish.


Originally the '''Controls toolbar''' is displayed below the {{ide|Resource Editor#IDE Designer|'''IDE Designer'''}} window. You see it in the following picture:
[[Image:Ide_MenuTask.png|center|frame|'''Menu Editor''']]


[[Image:Ide_Controls.png|center|frame|'''The Controls Toolbar''']]
The '''Menu Editor''' dialog allows you to modify or delete existing menu items or add new ones. The main pane in this dialog contains the tree of menu items of the edited (it is '''TaskMenu''' in the picture) menu.


Clicking icons in the '''Controls toolbar''' you select a type of a control to be placed into the edited dialog/window/form/IDE control (sometimes we will use the term ''container'' instead of dialog/window/form/IDE control). When you click a control type icon, then the current cursor is replaced with the cursor correspondent to the control type to be inserted. Move the cursor to some position in the container client area and click the mouse button. The control with the default size will be inserted at the specified position.
By pressing the '''New''' toolbar buttons it is possible to create new menu items and sub-items. You can use: [[Image:Ide_MenuEdit_First.png]] - the '''New First Item''', [[Image:Ide_MenuEdit_New.png]] - the next '''New Item''' , and [[Image:Ide_MenuEdit_Subitem.png]] - the menu '''New SubItem'''.


Instead of dropping a control into a container with a click, it is possible to drag out the rectangle (in the container client area) where a control should be placed; so you can specify not only the control position but also the control size.
Menu items can optionally be grouped by inserting separators. To insert a separator just click the '''New Separator''' toolbar button [[Image:Ide_MenuEdit_Separator.png]].


After a VPI control is placed with the mouse into a {{ide|Resource_Editor#GUI and VPI Style Resources|VPI style container}}, the correspondent VPI control Attributes dialog appears. In this dialog you can change some control attributes, when you close the dialog, the control appears at the specified location in the container.
'''Cut''', '''Copy''' and '''Paste''' operations for selected menu items (with all their submenu items) can be executed with '''Ctrl+X''', '''Ctrl+C''', and '''Ctrl+V''' keyboard accelerators.


After a GUI control is placed with the mouse into a {{ide|Resource_Editor#GUI and VPI Style Resources|GUI style container}}, it immediately appears at the specified location in the container. To change properties of the GUI control, one should select it then the list of GUI control properties appears in the
The '''Menu Editor''' can create nested menus of any level. To enter/create a submenu for the selected menu item click the '''Submenu''' button [[Image:Ide_MenuEdit_Subitem.png]].
[Properties_of_GUI_Controls\Properties_of_GUI_Controls.htm GUI control Properties table].


There are the following icons in the '''Controls toolbar:'''
By pressing the '''Test''' toolbar button [[Image:Ide_MenuEdit_Test.png]] you activate the test mode in which the edited menu will be displayed instead of the main IDE menu. You can open it submenus, etc. To exit the test mode, you can click somewhere in the IDE window out of the tested menu.


{|{{prettytable}}
===== Customizing Menu Item Attributes =====
|-
! Icon
! Insert a new:
! Description
|-
| [[Image:Ide_Ctrl_PushBtn.png]]
| Push Button
| After selection of this control the cursor becomes [[Image:Ide_Cursor_PushBtn.png]]
|-
| [[Image:Ide_Ctrl_CheckBx.png]]
| Check Box
| After selection of this control the cursor becomes [[Image:Ide_Cursor_Check.png]].
|-
| [[Image:Ide_Ctrl_RadioBtn.png]]
| Radio Button
| After selection of this control the cursor becomes [[Image:Ide_Cursor_RB.png]].
|-
| [[Image:Ide_Ctrl_StaText.png]]
| Static Text Control
| After selection of this control the cursor becomes [[Image:Ide_Cursor_Text.png]].
|-
| [[Image:Ide_Ctrl_EditCtrl.png]]
| Edit Control
| After selection of this control the cursor becomes [[Image:Ide_Cursor_Edit.png]].
|-
| [[Image:Ide_Ctrl_ListBox.png]]
| List Box
| After selection of this control the cursor becomes [[Image:Ide_Cursor_ListBox.png]].
|-
| [[Image:Ide_Ctrl_ListBtn.png]]
| List Button
| After selection of this control the cursor becomes [[Image:Ie_Cursor_ListBtn.png]].
|-
| [[Image:Ide_Ctrl_ListEdit.png]]
| List Edit
| After selection of this control the cursor becomes [[Image:Ide_Cursor_ListEdit.png]].
|-
| [[Image:Ide_Ctrl_HScroll.png]]
| Horizontal Scroll Bar
| After selection of this control the cursor becomes [[Image:Ide_Cursor_HScroll.png]].
|-
| [[Image:Ide_Ctrl_VScroll.png]]
| Vertical Scroll Bar
| After selection of this control the cursor becomes [[Image:Ide_Cursor_VScroll.png]].
|-
| [[Image:Id_Ctrl_GroupBox.png]]
| Group Box
| After selection of this control the cursor becomes [[Image:Ide_Cursor_Group.png]].
|-
| [[Image:Ide_Ctrl_Icon.png]]
| Icon Control
| After selection of this control the cursor becomes [[Image:Ide_Cursor_Icon.png]].
|-
| [[Image:Ide_Ctrl_Custom.png]]
| Custom Control
| After selection of this control the cursor becomes [[Image:Ide_Cursor_Custom.png]].
|}


===== Selecting and Deselecting Controls =====
In the bottom of the menu editor dialog you see the big pane (the '''Menu Tree''' pane) in which you can see the edited menu tree. Menu items prefixed with the plus [[Image:Ide_Plus_Icon.png]] icon have submenus. Click the plus [[Image:Ide_Plus_Icon.png]] icon or press the right arrow on the keypad to expand one level of such submenu. Notice that the plus [[Image:Ide_Plus_Icon.png]] icon before expanded menu items is changed for the minus [[Image:Ide_Minus_Icon.png]] icon.


Click inside a control to select one control. A frame appears around the selected control.
When you select any menu item in the menu tree, the menu editor controls display attributes of this menu item. For each menu item the programmer can specify the following attributes:


To select a group of controls move the mouse pointer to the point in the dialog you want to be one corner of the selected area and press and hold the left mouse button. While holding the left mouse button move the mouse until all the desired controls in the dialog are inside the selected area. Then release the mouse button. All controls inside the specified rectangle will be selected.
*'''Item Title'''
*:Select a menu item in the '''Menu Tree''' pane and click the menu item title. The menu item title becomes surrounded by the frame like:
*:[[Image:Ide_MenuEdit_Title.png]]
*:Here you can specify/edit the menu item title (name).
*:* The menu item title may contain up to 255 characters. It may include the '''\t''' (tab) escape sequence.
*:* In the menu item title the ampersand symbol '''&''' can be used for indicating that the following character is to be underlined. For example, if you type in the string '''&Contents''', then at runtime this menu item will be displayed as <u>'''C'''</u>'''ontents'''. I.e. the character <u>'''C'''</u> will be displayed underlined (thus visually indicating that the <u>'''C'''</u> is an accelerator key). The underlined character should be unique on each level of a menu. If you need to display the '''&''' character, use two '''&&'''.


Also after one or more controls are already selected, you can include one extra control in the selection by holding down the '''Ctrl''' key and click the control.
*'''Item Constant'''
*:The '''Item Constant''' input box is where you can select or type in the symbolic (or integer) constant that will be used as the menu item identifier. It can be typed-in directly from the keyboard or selected from the list of available constants (by clicking the [[Image:Ide_ListButton_Button.png]] button). It must be either a legal symbolic constant (for example, '''''id_help_contents''''') or an integer value.
*:<br />If you enter a symbolic constant name, then the IDE automatically places this symbolic constant into the '''resourceidentifiers.i''' file and generates an appropriate integer value for it. The '''Menu Editor''' automatically generates the default symbolic constant name (for example, '''''id_file_exit''''') from the '''Constant Prefix''' '''''id_file''''' and names of menu items ('''Exit''' on the picture).


To deselect the control or group of controls click outside the selecting frame. Deselected controls lose their frame.
*'''Constant Prefix'''
*:The '''Constant Prefix''' edit control is where you can input a common prefix for all ''item constants'' of menu items on the current level of submenu.


===== Resizing Controls =====
*'''Checked'''
*:Set the initial state of the menu item to Checked.


Once a control has been inserted in the dialog, it has a default size. To re-size a control, first click inside the control area to select it. Then move the cursor to the sizing handles on the selection frame. A new shape of cursor indicates the direction in which you can re-size the control. Press and hold the mouse button, drag until the selected control has the size you want, then release the mouse button.
*'''Disabled'''
*:Specifies that initially the menu item will be Disabled.


You can also change the size of a control by double-clicking it to activate the dialog for control attributes setting. Select the position you want to change and after specifying a new position or size, press enter to return to the dialog.
*'''Accelerator'''
*:In the '''Accelerator''' group box you can set an accelerator key (hot key), which will be used to activate this menu item. The accelerator key can be defined as a combination of a basic accelerator key and of the '''Shift''', '''Ctrl''', and '''Alt''' keys. The basic accelerator key can be typed in or chosen from the list in the list edit control. To specify the desired '''Shift''', '''Ctrl''', and '''Alt''' keys check on the corresponding check box. To assign more than one accelerator key to a menu item, use the <vp>vpi::setAccelerators/1</vp> predicate.


'''Remark:''' You cannot change the size of icons. You can only change their location.
*'''Help Constant'''
*:In this list button control you can select one of constants of the existing first-level menu items. The '''Windows''' (system handling) menu item (in MDI mode) will be placed just before the first-level menu item with this constant.
*:<br />Notice that this possibility can be used only for MDI applications. (It is ignored for non-MDI applications since they do not have the '''Windows''' (system handling) menu item.


===== Moving Controls =====
===== Editing the Window Submenu =====


To move a control or a group of controls first select them. Then move the cursor inside the selection frame, press and hold the mouse button, drag the mouse pointer to a new location and release the mouse. Also, when one or more controls are selected, it is possible to use the cursor keys to move the selection in small steps (corresponding to the '''Grid''' settings).
In MDI applications Windows automatically add the '''Windows''' first-level menu item, which, by default, is placed after (the most right) all other user-created first-level menu items in each application menu. By default, it contains the '''Tile''', '''Cascade''', and '''Arrange Icons''' menu commands and in the bottom of this menu are listed titles of all opened MDI document windows.


===== Arranging Controls =====
To customize items of the '''Windows''' submenu, the programmer should create a new menu with the Item Constant equal to '''''mdiwindow_menu'''''. This menu should include only one level of menu items. Notice that since this user-designed submenu will be used instead of the default system '''Windows''' submenu, so handling of ALL its menu commands should be explicitly programmed. For instance, handling of the '''Tile''', '''Cascade''', and '''Arrange Icons''' menu commands should be programmed if they are included into the designed menu.


To arrange a group of controls first select the group. Then click an appropriate button in the '''Layout''' toolbar or a menu item in the '''Layout''' menu of the IDE menu (or in the pop-up menu).
See the video: [http://www.youtube.com/watch?v=sAxJgHpZ9nk Using your own Window menu]


[[Image:Ide_Layout.png|center|frame|'''The Layout Toolbar''']]
== Graphics Editor ==
 
The '''Layout''' commands for justifying and resizing controls:
 
{|{{prettytable}}
|-
| [[Image:Ide_Layout_AllignLeft.png]]
| '''Align Left'''
| Align the selected controls along their left sides.
|-
| [[Image:Ide_Layout_CenterVertically.png]]
| '''Align Center'''
| Center the selected controls vertically.
|-
| [[Image:Ide_Layout_AllignRight.png]]
| '''Align Right'''
| Align the selected controls along their right sides.
|-
| [[Image:Ide_Layout_AllignTops.png]]
| '''Align Top'''
| Align the selected controls along their tops.
|-
| [[Image:Ide_Layout_CenterHorizontally.png]]
| '''Align Middle'''
| Center the selected controls horizontally.
|-
| [[Image:Ide_Layout_AllignBottom.png]]
| '''Align Bottom'''
| Align the selected controls along their bottoms.
|-
| [[Image:Ide_Layout_SpacingHorizontally.png]]
| '''Even Horizontal Spacing'''
| Spacing the selected controls evenly between the leftmost and the rightmost controls.
|-
| [[Image:Ide_GridButton.png]]
| '''Grid'''
| Toggle the Grid (see below).
|-
| [[Image:Ide_Layout_SpacingVertically.png]]
| '''Even Vertical Spacing'''
| Spacing the selected controls evenly between the topmost and the bottom-most controls.
|-
| [[Image:Ide_Layout_SameSize.png]]
| '''Make Same Size'''
| Make the selected controls the same size as a model control.
|-
| [[Image:Ide_Layout_SameHorizontal.png]]
| '''Make Same Horizontal Size'''
| Make the selected controls the same width as a model control.
|-
| [[Image:Ide_Layout_SameVertical.png]]
| '''Make Same Vertical Size'''
| Make the selected controls the same height as a model control.
|-
| 
| '''Size To Contents'''
| Resize the selected controls to optimally display its titles (caption texts).
|}
 
==== Editing Properties of GUI Controls ====
 
When you open a GUI dialog or a Form (GUI window) in the '''IDE Designer''', then near from the opened dialog (form) the '''[Properties_of_GUI_Controls\Properties_of_GUI_Controls.htm Control Properties]''' table appears.
 
To change ''properties'' of a GUI package control first select this control (by clicking in it) in the dialog (form). The current set of the control properties appears in the '''Control Properties''' table. Now you can edit the displayed GUI control properties.
 
'''Click here to view [Properties_of_GUI_Controls\Properties_of_GUI_Controls.htm GUI Control Properties table.] '''
 
The displayed set of properties depends on the control type. The '''[Properties_of_GUI_Controls\Properties_of_GUI_Controls.htm Control Properties]''' table contains two types of properties. General properties are common to all types of controls and some properties, which are individual to different kinds of controls.
 
Initially this '''Control Properties''' table is empty. However, as soon as one of controls in the edited dialog (form) is selected this table starts to display properties of the selected control.
 
If the '''Control Properties''' table is closed, then double-click a control - the '''Control Properties''' table appears. Also the '''Control Attributes''' command, from the '''IDE Designer''' {{ide|Resource Editor#Speed Menu|speed menu}}, can be used to open the '''Control Properties''' table.
 
==== Editing Attributes of VPI Controls ====
 
To change attributes of a VPI package control double-click it or select the control and activates the '''Control Attributes''' command from the '''IDE Designer''' {{ide|Resource Editor#Speed Menu|speed menu}}. Then the '''''<ControlType>'' Attributes''' dialog appears.
 
These dialogs contains two levels of attributes. The general group contains attributes, which are common to all types of controls: the '''Text''' determines the control title, the '''Constant''' (name) is used as the control identifier, and the '''Control Size''' group determines position and size of the control.
 
Notice that the '''Text''' property/attribute is not used for some controls, for instance, it is not used for scroll bars.
 
Notice that in the '''Text''' fields the ampersand symbol <vp>&</vp> is reserved for indicating that the next to it character is to be underlined. For example, if you use the text string '''E&xit''' as a control name, then this control will be displayed with the title '''E<u>x</u>it''' at runtime. I.e. the char '''<u>x</u>''' will be displayed underlined (thus visually indicating that the '''<u>x</u>''' is an accelerator key). If you need to display the ampersand <vp>&</vp> symbol in the '''Text''' of a control, then use two of them <vp>&&</vp>.
 
Other attributes are individual to different kinds of controls.
 
===== Attributes of VPI Controls =====
 
[Properties_of_VPI_Controls\Push_Button_Flags.htm Push Button Attributes]
 
[Properties_of_VPI_Controls\Check_Box_Flags.htm Check Box Attributes]


[Properties_of_VPI_Controls\Custom_Control_Attributes.htm Custom Control Attributes]
=== About the Graphics Editor ===


[Properties_of_VPI_Controls\Radio_Button_Flags.htm Radio Button Attributes]
The Graphics Editor is a convenient tool for creating, viewing and editing icons, cursors and small bitmaps. The images can be passed to the Windows Clipboard or saved in files.


[Properties_of_VPI_Controls\Static_Text_Flags.htm Static Text Attributes]
The Graphics Editor allows you to create and edit images ranging in size from 4x4 pixels to 64x64 pixels, by using either a 16-color palette or monochrome shadow palette.


[Properties_of_VPI_Controls\Edit_Control_Flags.htm Edit Control Attributes]
The Graphics Editor is invoked from the Project window for Icons, Cursors and Bitmaps. However, when you register large bitmaps in your project, Visual Prolog will call to edit the bitmap an external editor associated in Windows for editing files with .BMP extension.


[Properties_of_VPI_Controls\List_Box_Attributes.htm List Box Attributes]
After the Graphics Editor is started, the Graphics Editor window will appear on the screen.


[Properties_of_VPI_Controls\List_Button_Attributes.htm List Button Attributes]
[[Image:Ide_GE_ProjectIcon.png|center|frame|'''Graphics editor window''']]


[Properties_of_VPI_Controls\List_Edit_Attributes.htm List Edit Attributes]
When you create a new image in a project, you need to specify the '''Name''' of the image, the Constant (resource ID) which will be identify the image in the project, the name of the '''File''', in which the image will be saved, its size, and how many colors it will have.


[Properties_of_VPI_Controls\Scroll_Bar_Attributes.htm Scroll Bar Attributes]
=== Graphics Editor Menus ===


[Properties_of_VPI_Controls\Group_Box_Attributes.htm Group Box Attributes]
When the Graphics Editor window is active, the Integrated Development Environment's menu bar displays the Graphics Editor sub-menus of the '''Resource''' menu and looks as follows:


[Properties_of_VPI_Controls\Icon_Control_Attributes.htm Icon Attributes]
[[Image:Ide_GE_Menu.png|center|frame|'''The Visual Prolog menu bar when the Graphics Editor is active''']]


==== Using Anchors for Positioning GUI Controls while Dialog Resizing ====
Note that there are 2 menu items: '''Set Mirror Style''', '''Set Cursor Hotspot''' and 2 sub-menus: '''Tools''' and '''Move'''. Also some menu items under the '''Edit''' menu (like the '''Undo''', '''Redo''', '''Cut''', '''Copy''', '''Paste''') are specially tailored for the Graphics Editor, and the '''File''' menu operations refer now to the image files.


VPI controls remember in their attributes ({{ide|Resource Editor#Attributes of VPI Controls|Attributes of VPI Controls}}) only their absolute positions and sizes. Therefore, when a VPI dialog or a VPI window containing such VPI controls are resized, these VPI controls do not change their positions and sizes!
{{:ide/Creating new Project Items/Creating a Image}}


In difference to them GUI controls have additional ''Anchor'' properties, which help to reposition (and may be resize) GUI controls when containing them GUI dialog (or form) is resized.
=== Editing Image Attributes ===


Each GUI control has four anchor properties: '''Left Anchor''', '''Top Anchor''', '''Right Anchor''', and '''Bottom Anchor''' (see '''[Properties_of_GUI_Controls\Properties_of_GUI_Controls.htm#Anchors Anchor Properties of GUI Controls]''').
You can always wake up (with the '''Resource | Attribute''' task menu item or with the '''Attribute''' item from pop up menu) the '''Bitmap/Cursor/Icon Attributes''' dialog for the created bitmap, cursor or icon to view and change some image attributes.


Each anchor determines that the specified ('''Left''', '''Top''', '''Right''' or '''Bottom''') control boundary should be '''always''' positioned on the stated distance from the nearest (correspondent) border of the dialog (frame).
Notice that the appeared '''Bitmap Attributes''' dialog for an existing bitmap will display less bitmap attributes then it has for created bitmaps:


Each of anchors can have the '''True''' or '''False''' values. When the anchor value is '''True''', then this anchor is active (used to position the correspondent control).
[[Image:Ide_GE_ExistingBitmapAttributes.png|center|frame|'''The Bitmap Attributes dialog for an existing bitmap''']]


For example, when the '''Left Anchor''' is active (has the '''True''' value), then the ''left'' control boundary should be positioned on the stated distance from the nearest (''left'') border of the dialog (frame).
You see that for existing bitmap the dialog does not contain the '''Width''', '''Height''', and '''Color''' attributes.


The simplest way to see which anchors are active for a control, is to select this control. Then some red arrows between control boundaries and correspondent boundaries of the dialog can bee seen. Each arrow specifies, that the correspondent anchor is active. For example, the arrow from the control top to the dialog top identifies, that the '''Top Anchor''' is active. In the picture below, you see three arrows, which specify that the '''Left''', '''Top''', and '''Right''' anchors are active to the '''Push Button''' control.
The only image attribute that you can edit is the '''Constant'''.:


[[Image:Ide_de_Anchors|center]]
'''Constant'''
 
:In the '''Constant''' list edit the programmer can change the default resource constant for the image (at the picture it is '''''idb_mybitmap''''').
Numbers near such arrows show distances (in Dialog Base Units) between the correspondent boundaries of the control and the dialog.
{{:ide/Resource Editor/Graphics Editor}}
 
Normally each control has one active horizontal and one active vertical anchors. When the dialog is resized, then such control is always positioned on the specified distances from the specified boundaries of the dialog. The size of the control is not changed!
 
When a control has both horizontal (or/and both vertical) anchors active, then both horizontal (or/and both vertical) boundaries of the control should be placed on some specified distances from the correspondent horizontal (vertical) boundaries of the dialog. Therefore, when the dialog is resized, then such control is also resized accordingly to keep the specified distances.
 
When no one of horizontal (or vertical) anchors of a control are active, then no one of horizontal (or vertical) boundaries of the control are bounded to the correspondent horizontal (vertical) boundaries of the dialog. Coordinates of such controls are handles on the "proportional basis". For example, when the dialog width is increased onto <vp>Delta</vp> dialog base units, then the <vp>X</vp> coordinate of the control is also increased, but it is increased two times smaller. That is the <vp>X</vp> coordinate of the control is increased only onto <vp>Delta/2</vp> dialog base units.
 
==== Cut, Copy and Paste, Undo and Redo ====
 
You can '''Cut''' or '''Copy''' a group of selected controls onto the Windows clipboard, and '''Paste''' controls from the clipboard back into a dialog. The '''Undo''' and '''Redo''' commands serve to delete or restore the last editing operations of your dialog.
 
==== Grid ====
 
When the menu (or the pop-up menu) entry '''Resource | Grid''' is activated, or when the [[Image:Ide_GridButton.png]] button from the '''Layout''' toolbar is pressed, the following dialog appears:
 
[[Image:Ide_GridSpecification.png|center|frame|'''The Dialog to Specify the Grid Properties''']]
 
With a grid in place, arranging the controls inside a dialog is easier. Also it is possible to tell the {{ide|Resource Editor#IDE Designer|'''IDE Designer'''}} by the '''Snap to Grid''' that it should place controls at the grid intersections to give a satisfactory result.
 
[[Image:Ide_MyDialog_withGrid.png|center|frame|'''Using a grid in the Dialog/Window/Form Editor''']]
 
==== Test Mode ====
 
The {{ide|Resource Editor#IDE Designer|'''IDE Designer'''}} has the '''Test Mode''', so it is possible to see how the dialog with the created controls behaves. To illustrate the '''Test Mode''' we will assign some default values to the controls. The test mode is activated and deactivated from the '''Resource''' menu (or from the pop-up menu).
 
[[Image:Ide_MyDialog_TestMode.png|center|frame|'''Test Mode for a Dialog''']]
 
==== Tab Stops ====
 
When activating the menu (or the pop-up menu) entry '''Resource | Tabstops''', it is possible to specify to which controls you can Tab to in the dialog. When this command is activated a small button with the <vp>+</vp> or <vp>-</vp> appears on controls depending upon whether the control has a tab stop or not. By clicking the small buttons, it is possible to toggle the setting.
 
[[Image:Ide_MyDialog_TabStops.png|center|frame|'''Specifying Tab Stops for a Dialog''']]
 
To exit the tab stop mode, just click in the dialog but outside of any controls.
 
==== Visit Order ====
 
When the tab stops have been specified for a dialog, then it is possible to specify the order in which controls will receive focus when tabbing.
 
[[Image:Ide_MyDialog_VisitOrder.png|center|frame|'''Displaying the Visit Order''']]
 
To change the visit order, click a small rectangle displaying the visit order number for a control that has an incorrect sequence number and this will bring up another dialog to change this sequence:
 
[[Image:Ide_MyDialog_ChangeVisitOrder.png|center|frame|'''Changing the Visit Order''']]
 
To stop the visit order mode, just click in the dialog outside any controls.
 
==== Speed Menu ====
 
When you are in the {{ide|Resource Editor#IDE Designer|'''IDE Designer'''}} you can click the right mouse button to activate the Speed Menu. From this menu you can easily call any {{ide|Resource Editor#IDE Designer|'''IDE Designer'''}} command:
 
[[Image:Ide_We_SpeedMenu.png|center|frame|'''The IDE Designer Speed Menu''']]
 
=== Creating and Editing a Window ===
----
The IDE does not support the creation or editing of the old-style VPI windows. You should use
{{ide|Resource Editor#Creating and Editing a Form|'''Forms'''}} instead of windows (see description of forms in the GUI package overview in the PFC part of Help for more details).
 
However, the IDE automatically creates for GUI applications the special resource file '''TaskWindow.win''' which is placed if the TaskWindow sub-directory of the project root directory. This resource file can be later changed by the IDE resource editor.
 
=== Creating and Editing a Form ===
 
{{:ide/Creating new Project Items/Creating a Form}}
 
== Toolbar Editor ==
 
== Menu Editor ==
 
== Graphics Editor ==

Latest revision as of 10:35, 10 October 2013

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

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 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 IDE Designer.)

Controls Toolbar

Originally the Controls toolbar is displayed below the IDE Designer window. You see it in the following picture:

The Controls Toolbar

Clicking icons in the Controls toolbar you select a type of a control to be placed into the edited dialog/window/form/IDE control (sometimes we will use the term container instead of dialog/window/form/IDE control). When you click a control type icon, then the current cursor is replaced with the cursor correspondent to the control type to be inserted. Move the cursor to some position in the container client area and click the mouse button. The control with the default size will be inserted at the specified position.

Instead of dropping a control into a container with a click, it is possible to drag out the rectangle (in the container client area) where a control should be placed; so you can specify not only the control position but also the control size.

After a VPI control is placed with the mouse into a VPI style container, the correspondent VPI control Attributes dialog appears. In this dialog you can change some control attributes, when you close the dialog, the control appears at the specified location in the container.

After a GUI control is placed with the mouse into a GUI style container, it immediately appears at the specified location in the container. To change properties of the GUI control, one should select it then the list of GUI control properties appears in the GUI control Properties table.

There are the following icons in the Controls toolbar:

Icon Insert a new: Description
Ide Ctrl PushBtn.png Push Button After selection of this control the cursor becomes Ide Cursor PushBtn.png
Ide Ctrl CheckBx.png Check Box After selection of this control the cursor becomes Ide Cursor Check.png.
Ide Ctrl RadioBtn.png Radio Button After selection of this control the cursor becomes Ide Cursor RB.png.
Ide Ctrl StaText.png Static Text Control After selection of this control the cursor becomes Ide Cursor Text.png.
Ide Ctrl EditCtrl.png Edit Control After selection of this control the cursor becomes Ide Cursor Edit.png.
Ide Ctrl ListBox.png List Box After selection of this control the cursor becomes Ide Cursor ListBox.png.
Ide Ctrl ListBtn.png List Button After selection of this control the cursor becomes Ide Cursor ListBtn.png.
Ide Ctrl ListEdit.png List Edit After selection of this control the cursor becomes Ide Cursor ListEdit.png.
Ide Ctrl HScroll.png Horizontal Scroll Bar After selection of this control the cursor becomes Ide Cursor HScroll.png.
Ide Ctrl VScroll.png Vertical Scroll Bar After selection of this control the cursor becomes Ide Cursor VScroll.png.
Ide Ctrl GroupBox.png Group Box After selection of this control the cursor becomes Ide Cursor Group.png.
Ide Ctrl Icon.png Icon Control After selection of this control the cursor becomes Ide Cursor Icon.png.
Ide Ctrl Custom.png Custom Control After selection of this control the cursor becomes Ide Cursor Custom.png.
Selecting and Deselecting Controls

Click inside a control to select one control. A frame appears around the selected control.

To select a group of controls move the mouse pointer to the point in the dialog you want to be one corner of the selected area and press and hold the left mouse button. While holding the left mouse button move the mouse until all the desired controls in the dialog are inside the selected area. Then release the mouse button. All controls inside the specified rectangle will be selected.

Also after one or more controls are already selected, you can include one extra control in the selection by holding down the Ctrl key and click the control.

To deselect the control or group of controls click outside the selecting frame. Deselected controls lose their frame.

Resizing Controls

Once a control has been inserted in the dialog, it has a default size. To re-size a control, first click inside the control area to select it. Then move the cursor to the sizing handles on the selection frame. A new shape of cursor indicates the direction in which you can re-size the control. Press and hold the mouse button, drag until the selected control has the size you want, then release the mouse button.

You can also change the size of a control by double-clicking it to activate the dialog for control attributes setting. Select the position you want to change and after specifying a new position or size, press enter to return to the dialog.

Remark: You cannot change the size of icons. You can only change their location.

Moving Controls

To move a control or a group of controls first select them. Then move the cursor inside the selection frame, press and hold the mouse button, drag the mouse pointer to a new location and release the mouse. Also, when one or more controls are selected, it is possible to use the cursor keys to move the selection in small steps (corresponding to the Grid settings).

Arranging Controls

To arrange a group of controls first select the group. Then click an appropriate button in the Layout toolbar or a menu item in the Layout menu of the IDE menu (or in the pop-up menu).

The Layout Toolbar

The Layout commands for justifying and resizing controls:

Ide Layout AllignLeft.png Align Left Align the selected controls along their left sides.
Ide Layout CenterVertically.png Align Center Center the selected controls vertically.
Ide Layout AllignRight.png Align Right Align the selected controls along their right sides.
Ide Layout AllignTops.png Align Top Align the selected controls along their tops.
Ide Layout CenterHorizontally.png Align Middle Center the selected controls horizontally.
Ide Layout AllignBottom.png Align Bottom Align the selected controls along their bottoms.
Ide Layout SpacingHorizontally.png Even Horizontal Spacing Spacing the selected controls evenly between the leftmost and the rightmost controls.
Ide GridButton.png Grid Toggle the Grid (see below).
Ide Layout SpacingVertically.png Even Vertical Spacing Spacing the selected controls evenly between the topmost and the bottom-most controls.
Ide Layout SameSize.png Make Same Size Make the selected controls the same size as a model control.
Ide Layout SameHorizontal.png Make Same Horizontal Size Make the selected controls the same width as a model control.
Ide Layout SameVertical.png Make Same Vertical Size Make the selected controls the same height as a model control.
Size To Contents Resize the selected controls to optimally display its titles (caption texts).

Editing Properties of GUI Controls

When you open a GUI dialog or a Form (GUI window) in the IDE Designer, then near from the opened dialog (form) the Control Properties table appears.

To change properties of a GUI package control first select this control (by clicking in it) in the dialog (form). The current set of the control properties appears in the Control Properties table. Now you can edit the displayed GUI control properties.

Click here to view GUI Control Properties table

The displayed set of properties depends on the control type. The Control Properties table contains two types of properties. General properties are common to all types of controls and some properties, which are individual to different kinds of controls.

Initially this Control Properties table is empty. However, as soon as one of controls in the edited dialog (form) is selected this table starts to display properties of the selected control.

If the Control Properties table is closed, then double-click a control - the Control Properties table appears. Also the Control Attributes command, from the IDE Designer speed menu, can be used to open the Control Properties table.

GUI Control Properties Table

When you open a GUI dialog or a form (GUI window) in the IDE Designer, then the Control Properties table also opens.

The set of properties displayed in the Control Properties table depends on the control type and contains two groups of properties:

  • General properties are common to all types of controls.
    These are: Left Anchor, Top Anchor, Right Anchor, Bottom Anchor, Container Name, Enabled, Lock to Container, Name, Representation, TabStop, Title, X, Y, Width, Height and Visible.
  • Specific properties are individual to different types of GUI controls.
    These are: 3State, AlignBaseline, Alignment, AllowPartialRows, Auto, AutoNotify, AutoHScroll, AutoVScroll, Border, Case, Class, ExtendedSel, HideSel, HScroll, Icon Name, IgnorePrefix, LeftText, MultiColumn, MultiLine, MultiSelect, Password, ReadOnly, Rows, Sort, StaticScrollbar, Style, UseTabStops, VScroll, WantReturn, Wrap.

In Control Properties table you can edit the displayed properties of the selected GUI control.

Initially this table is empty. However, as soon as any of GUI controls in the edited GUI dialog (form) is selected, the Control Properties table displays the current set of properties of the selected control.

If the Control Properties table is closed, double-click a control to show the table. The Control Attributes command, from the speed menu of the IDE Designer, can also be used to open the Control Properties table.

Common Properties of Almost All GUI Controls

There are some basic control properties, which are used by almost all GUI controls. These are:

  • Name
The Name input box is where you can specify some correct Visual Prolog name, which will be used as the control name (identifier).
The default Name is generated from the control type (for example, pushButton, checkBox, listButton, etc.) and the _ctl suffix. If several controls of the same type are created, then the control type is suffixed with the number, for example, pushButton1_ctl.
You can edit this default name or simply type in your own version.
  • Representation
This property can have one of the following two values: Fact Variable, Variable.
  • Fact Variable
When Fact Variable is specified, then the IDE generates the fact variable, which will store the object of the control. This fact variable is used to reference to this control in the code. This fact variable name is determined by the Name property. For example, ok_ctl. Notice that in this case the fact variable name is automatically converted to be started with the lowercase character.
  • Variable
When Variable is specified, then the IDE unifies the object of the control with an ordinary variable. This variable will be used to reference to this control in the code. This variable name is determined by the Name property. For example, Cancel_ctl. Notice that in this case the variable name is automatically converted to be started with the uppercase character.
The default value is Fact Variable.
  • Title
The Title property is where you specify the title (label), which you want to be displayed as the control caption.
One character in the Title text may be underlined to indicate an access key. To underline a character precede it with the ampersand & character. At runtime this character in the control Title will be underlined.
Notice that this character is displayed underlined also in the value cell of the Title property:
Ide GUI Prop Title.png
The used ampersand & character is seen only when the value cell of the Title property has the focus:
Ide GUI Prop Title2.png
If you need to display the ampersand & character in the Title text, then use two of them &&.
  • Lock to Container
Possible values are True and False. True defines that the control is locked inside the container selected in the Container Name property.
  • Container Name
In this list box you can select the Name of one of containers (currently only the group box groupBox type of containers is supported) defined in the dialog or in the form.
All controls belonging to the same container are in the same group of related controls. The user may use the arrow keys to move from one control in the group to the next one.
Only the Names of group boxes, inside which the control is placed, appear in the list of Container Name property values. For example, if you see:
Ide GUI Prop Container.png
this means that the control is placed inside two group boxes with names GroupBox_ctl and GroupBox1_ctl.
If you do not need to relate the control to any container, then you should select [none].
  • X, Y, Width, Height
These properties determine the control coordinates and size:
  • X
The X coordinate of the upper-left corner of the control (in Dialog Base Units).
  • Y
The Y coordinate of the upper-left corner of the control (in Dialog Base Units).
  • Width
The Width of the control (in Dialog Base Units).
  • Height
The Height of the control (in Dialog Base Units).
  • Left, Top, Right and Bottom Anchors
These properties determine how the control coordinates (and may be size) will be handled when the dialog or form (containing this control) is resized. The general rules are described in the "Using Anchors for Positioning GUI Controls while Dialog Resizing".
  • Left Anchor
Possible values are True and False. True defines that the Left boundary of the control is always positioned at the specified distance (equal to the X property) from the Left boundary of the dialog (form) containing this control.
The distance is specified in the Dialog Base Units.
  • Top Anchor
Possible values are True and False. True defines that the Top of the control is always positioned at the specified distance (equal to the Y property) from the Top boundary of the dialog (form) containing this control.
The distance is specified in the Dialog Base Units.
  • Right Anchor
Possible values are True and False. True defines that the Right boundary of the control is always positioned at the specified distance from the Right boundary of the dialog (form) containing this control.
The distance is specified in the Dialog Base Units. The distance value can be seen near the arrow, which appears when the control is selected "Using Anchors for Positioning GUI Controls while Dialog Resizing".
  • Bottom Anchor
Possible values are True and False. True defines that the Bottom of the control is always positioned at the specified distance from the Bottom boundary of the dialog (form) containing this control.
The distance is specified in the Dialog Base Units. The distance value can be seen near the arrow, which appears when the control is selected "Using Anchors for Positioning GUI Controls while Dialog Resizing".
  • Enabled
Possible values are True and False. They define whether the control will be created initially enabled (True) or disabled (False). The default value is True (enabled).
You can use the window::getEnabled/0-> predicate to get whether the control is enabled
IsEnabled = checkButtonName:getEnabled(),
IsEnabled = true,
and the window::setEnabled/1 predicate
IsEnabled = true,
checkButtonName:setEnabled(IsEnabled),
to set this flag programmatically.
  • Visible
Possible values are True and False. They define whether the control will be created initially visible (True) or invisible (False). The default value is True (visible).
You can use the window::getVisible/0-> predicate to get whether the control is visible
IsVisible = checkButtonName:getVisible(),
IsVisible = true,
and the window::setVisible/1 predicate
IsVisible = true,
checkButtonName:setVisible(IsVisible),
to set this flag programmatically.
  • TabStop
Possible values are True and False. They define whether this control belongs to a subset of controls through which the user can move using the TAB key. The default value is True (the control belongs to a group of controls between which the user can navigate with TAB).
You can use the control::getTabStop/0-> predicate to get whether the control has this flag
IsTabStop = checkButtonName:getTabStop(),
IsTabStop = true,
and the control::setTabStop/1 predicate
IsTabStop = true,
checkButtonName:setTabStop(IsTabStop),
to set this flag programmatically.
If IsTabStop is true, then the focus will be able to jump to this control while the Tab pressing navigation. Pressing the TAB key moves the focus to the next control, which has the TabStop = True.
Specific Properties of Different GUI Control Types

The following properties are specific to different types of controls:

  • Auto
Possible values are True and False. They define whether this control is an automatic (an automatic check box or an automatic radio button). When you click an automatic control, then it change its state in the proper way.
You can use the checkButton::getStyle/2 and radioButton::getAuto/0-> predicates to get whether this flag is set to a control:
checkButtonName:getStyle(IsAuto, _Is3State),
IsAuto = true,
and the checkButton::setStyle/2 or radioButton::setAuto/1 predicates
IsAuto = true,
checkButtonName:setStyle(IsAuto, _Is3State),
to set this flag programmatically.
The default value is True (auto).
  • 3State
Possible values are True and False. They define whether this check box can have 3 states (unchecked, checked, undetermined). You can use the checkButton::getStyle/2 predicate to get whether this state is set to a control
checkButtonName:getStyle(_IsAuto, Is3State),
Is3State = true,
and the checkButton::setStyle/2 predicate
Is3State = true,
checkButtonName:setStyle(_IsAuto, Is3State),
to set this state programmatically.
A 3-states check box is the same as an ordinary check box, except that the box can be grayed (dimmed) as well as checked. The grayed state is used to show that the state of the check box is not determined.
The default value is False (3State).
  • LeftText
Possible values are True and False. They define whether the control title text should be positioned on the left or on the right of the control (check box or radio button).
You can use the checkButton::getLeftText/0-> or radioButton::getLeftText/0-> predicates to get whether the control has this flag
IsLeftText = checkButtonName:getLeftText(),
IsLeftText = true,
and the checkButton:setLeftText/1 or radioButton:setLeftText/1 predicates
IsLeftText = true,
checkButtonName:setLeftText(IsLeftText),
to set this flag programmatically.
The default value is False (caption is on the right side).
  • AlignBaseline
Possible values are True and False. They define whether the control caption text should be positioned on the same horizontal line with caption texts of all other controls, which have the same vertical position with this control.
This property is defined to all controls, which can have captions (static texts, check boxes, edit and list edit controls, etc.)
You can use the getAlignBaseline predicates (like editControl::getAlignBaseline/0->) to get whether the control has this flag
IsAllignBaseLine = checkButtonName:getAllignBaseLine(),
IsAllignBaseLine = true,
and the setAlignBaseline (like textControl::setAlignBaseline/1) predicates
IsAllignBaseLine = true,
checkButtonName:setAllignBaseLine(IsAllignBaseLine),
to set this flag programmatically.
The default value is True (align captions horizontally).

Style

Push buttons
For push buttons possible values are Cancel, OK and Regular.
Cancel
Push buttons with the Cancel style are created by the button::newCancel/1 onstructor.
When a dialog/form contains a push button with the Cancel style, then this dialog/form will provide standard handling of the Esc key - the dialog/form is simply closed without any additional actions.
OK
Push buttons with the OK style are created by the button::newOk/1 constructor.
When a dialog/form contains a push button with the Ok style, then this dialog/form will execute dialog/form validation check when this button is clicked. See "Dialog/Form Validation" tutorial (on WEB) for more information.
Regular
Push buttons with the Regular style are created by the ordinary button::new/1 constructor.
Such buttons do not initiate any special default handling.
Group boxes
For group boxes possible values are Group Box, Simple Border, Horizontal Separator, No Border. These values define the border type of the group box control.
The default is Simple Border.
You can use the groupBox::getBorderStyle/0-> predicate to get the border style
GroupBoxBorderStyle = controlName : getBorderStyle(),
and the groupBox::setBorderStyle/1 predicate
GroupBoxBorderStyle = groupBox(),
controlName : setBorderStyle(GroupBoxBorderStyle),
to set the border style programmatically.
  • Alignment
Possible values are Left, Center and Right. Radio buttons in this group box determine how the text in the control is aligned.
The default value is Left (align left).
  • Left
Defines that the text in the control will be aligned left.
You can use the textControl::getAlignment/0-> predicate to get which of these flags the control has
AlignmentType = textControlName : getAlignment(),
AlignmentType = alignLeft(),
and the textControl::setAlignment/1 predicate
AlignmentType = alignLeft(),
textControlName : setAlignment(AlignmentType),
to set this flag programmatically.
  • Center
Defines that the text in the control will be centered.
The AlignmentType = alignCenter().
  • Right
Defines that the text in the control will be aligned right.
The AlignmentType = alignRight().
  • Wrap
Possible values are True and False. They define whether the text in the control will be wrapped to several lines.
The default value is True (wrap).
You can use the textControl::getWrap/0-> predicate to get whether the control has this flag
IsNoWrap = textControlName : getWrap(),
IsNoWrap = true,
and the textControl::setWrap/1 predicate
IsNoWrap = false,
textControlName: setWrap(IsNoWrap),
to set this flag programmatically.
  • IgnorePrefix
Possible values are True and False. Setting True value prevents interpretation of any & characters in the caption of the static text control as access keys (accelerator prefix characters). Accelerator characters are displayed underlined and the prefix & character is deleted.
The default value is False.
Notice that static text controls cannot be activated. Therefore, when an access key of a static text control is pressed, then the control next to this static text control, in the tab-stop order of controls in the dialog, is activated.
Most often this flag is used when filenames, which can contain the & character, need to be displayed in static text controls.
You can use the textControl::getIgnorePrefix/0-> predicate to get whether the control has this flag
IsIgnorePrefix = controlName : getIgnorePrefix(),
IsIgnorePrefix = true,
and the textControl::setIgnorePrefix/1 predicate
IsIgnorePrefix = true,
controlName : setIgnorePrefix(IsIgnorePrefix),
to set this flag programmatically.
  • MultiLine
Possible values are True and False. When this property is True, then the edit control allows multiple lines.
The default value is True (allows multiple lines).
Notice that the VScroll, HScroll, AutoVScroll, and WantReturn properties do not work for single-line (False) edit controls.
You can use the editControl::getMultiLine/0-> predicate to get whether the control has this flag
IsMultiLine = controlName : getMultiLine(),
IsMultiLine = true,
and the editControl::setMultiLine/1 predicate
IsMultiLine = true,
controlName : setMultiLine(IsMultiLine),
to set this flag programmatically.
  • WantReturn
Possible values are True and False.
If it is True, then a carriage return will be inserted as the part of an edited string, when the user presses the Enter key while entering text into a multi-line edit control.
If it is False, then pressing the Enter key has the same effect as pressing the default (OK) push button, which has the latest specified Default = True property value.
This property has no effect on single-line edit controls.
The default value is False.
You can use the editControl::getWantReturn/0-> predicate to get whether the control has this flag
IsWantReturn = controlName : getWantReturn(),
IsWantReturn = true,
and the editControl::setWantReturn/1 predicate
IsWantReturn = true,
controlName : setWantReturn(IsWantReturn),
to set this flag programmatically.
  • VScroll
Possible values are True and False. They define whether the multi-line control gets a vertical scroll bar when it needs one.
The default value for edit controls is True for other types of controls is False.
This property has no effect on single-line edit controls.
You can use the editControl::getVScroll/0-> and listControl::getVScroll/0-> predicates to get whether the control has this flag
IsVScrollSet = controlName : getVScroll(),
IsVScrollSet = true,
and the editControl::setVScroll/1 and listControl::setVScroll/0 predicates
IsVScrollSet = true,
controlName : setVScroll(IsVScrollSet),
to set this flag programmatically.
  • AutoVScroll
Possible values are True and False. They define whether the multi-line edit control automatically scrolls text up when the user presses the Enter on the last line.
The default value is False (does not scroll).
This property has no effect on single-line edit controls.
You can use the editControl::getAutoVScroll/0-> predicate to get whether the control has this flag
IsAutoVScrollSet = controlName : getAutoVScroll(),
IsAutoVScrollSet = true,
and the editControl::setAutoVScroll/1 predicate
IsAutoVScrollSet = true,
controlName : setAutoVScroll(IsAutoVScrollSet),
to set this flag programmatically.
  • HScroll
Possible values are True and False. They define whether the multi-line edit or list box control gets a horizontal scroll bar when it needs one.
The default value is False (does not scroll).
This property has no effect on single-line edit controls.
You can use the editControl::getHScroll/0-> or listBox::getHScroll/0-> predicates to get whether the control has this flag
IsHScrollSet = controlName : getHScroll(),
IsHScrollSet = true,
and the editControl::setHScroll/1 or listBox::setHScroll/1 predicates
IsHScrollSet = true,
controlName : setHScroll(IsHScrollSet),
to set this flag programmatically.
  • AutoHScroll
Possible values are True and False. They define whether the control automatically scrolls text in the control in order to display a typed character, when the user types the character at the end of the line.
If it is False, then only text that fits within the rectangular boundary is allowed. When the user presses the Enter key, the control scrolls all text back to the zero position.
The default value is True (scrolls text automatically).
You can use the editControl::getAutoHScroll/0-> predicate to get whether the control has this flag
IsAutoHScrollSet = controlName : getAutoHScroll(),
IsAutoHScrollSet = true,
and the editControl::setAutoHScroll/1 predicate
IsAutoHScrollSet = true,
controlName : setAutoHScroll(IsAutoHScrollSet),
to set this flag programmatically.
  • Border
Possible values are True and False. They define whether the control is created initially with a border around the control.
The default value is False.
You can use the editControl::getBorder/0-> or listBox::getBorder/0-> predicates to get whether the control has this flag
BorderIsSet = controlName : getBorder(),
BorderIsSet = true,
and the editControl::setBorder/1 or listBox::setBorder/1 predicates
BorderIsSet = true,
controlName : setBorder(BorderIsSet),
to set this flag programmatically.
  • Password
Possible values are True and False. If it is True, then the edit control displays all typed-in characters as asterisks (*).
The default value is False (displays typed characters "as-is").
You can use the editControl::getPassword/0-> predicate to get whether the control has this flag
IsPassword = controlName : getPassword(),
IsPassword = true,
and the editControl::setPassword/1 predicate
IsPassword = true,
controlName : setPassword(IsPassword),
to set this flag programmatically.
  • HideSel
Possible values are True and False. If it is True, then the edit control hides selection, when it loses the input focus, and shows selection, when it receives the input focus.
The default value is True (hides selection).
You can use the editControl::getHideSel/0-> predicate to get whether the control has this flag
IsHideSel = controlName : getHideSel(),
IsHideSel = true,
and the editControl::setHideSel/1 predicate
IsHideSel = true,
controlName : setHideSel(IsHideSel),
to set this flag programmatically.
  • ReadOnly
Possible values are True and False. If it is True, then the edit control is in the read-only mode.
The default value is False (editable).
You can use the editControl::getReadOnly/0-> predicate to get whether the control has this flag
IsReadOnly = controlName : getReadOnly(),
IsReadOnly = true,
and the editControl::setReadOnly/1 predicate
IsReadOnly = true,
controlName : setReadOnly(IsReadOnly),
to set this flag programmatically.
  • Case
Possible values are Insensitive, Upper, Lower.
The default value is Insensitive.
  • Insensitive
Defines that the edit control leaves the typed-in text "as-is".
This is the default value.
  • Upper
Defines that the edit control converts all typed-in characters into the upper case.
You can use the editControl::getUpperCase/0-> predicate to get whether the control has this flag
IsUpperCase = controlName : getUpperCase(),
IsUpperCase = true,
and the editControl::setUpperCase/1 predicate
IsUpperCase = true,
controlName : setUpperCase(IsUpperCase),
to set this flag programmatically.
  • Lower
Defines that the edit control converts all typed-in characters into the lower case.
You can use the editControl::getLowerCase/0-> predicate to get whether the control has this flag
IsLowerCase = controlName : getLowerCase(),
IsLowerCase = true,
and the editControl::setLowerCase/1 predicate
IsLowerCase = true,
controlName : setLowerCase(IsLowerCase),
to set this flag programmatically.
  • Sort
Possible values are True and False. If it is True, then the list control sorts strings alphabetically.
The default value is True (sort).
You can use the listControl::getSort/0-> predicate to get whether the control has this flag
IsSort = controlName : getSort(),
IsSort = true,
and the listControl::setSort/1 predicate
IsSort = true,
controlName : setSort(IsSort),
to set this flag programmatically.
  • ExtendedSel
Possible values are True and False. If it is True, then the list box control allows selection of multiple items by using the Shift key and the mouse or using the Shift key and the Up or Down Arrow keys.
The default value is False (cannot select multiple items).
You can use the listBox::getExtendedSel/0-> predicate to get whether the control has this flag
IsExtendedSel = controlName : getExtendedSel(),
IsExtendedSel = true,
and the listBox::setExtendedSel/1 predicate
IsExtendedSel = true,
controlName : setExtendedSel(IsExtendedSel),
to set this flag programmatically.
  • MultiSelect
Possible values are True and False. If it is True, then the list box control allows selection of multiple items using the mouse.
The default value is False (cannot select multiple items).
You can use the listBox::getMultiSelect/0-> predicate to get whether the control has this flag
IsMultiSelect = controlName : getMultiSelect(),
IsMultiSelect = true,
and the listBox::setMultiSelect/1 predicate
IsMultiSelect = true,
controlName : setMultiSelect(IsMultiSelect),
to set this flag programmatically.
  • AutoNotify
Possible values are True and False. If it is True, then the list box control notifies the parent window with an input message whenever the user clicks or double-clicks in the list box.
The default value is True (notify).
You can use the listBox::getAutoNotify/0-> predicate to get whether the control has this flag
IsAutoNotify = controlName : getAutoNotify(),
IsAutoNotify = true,
and the listBox::setAutoNotify/1 predicate
IsAutoNotify = true,
controlName : setAutoNotify(IsAutoNotify),
to set this flag programmatically.
  • UseTabStops
Possible values are True and False. If it is True, then the list box control recognizes and expands TAB characters when drawing strings.
The default value is False (does not expand).
You can use the control::getUseTabStops/0-> predicate to get whether the control has this flag
IsUseTabStops = controlName : getUseTabStops(),
IsUseTabStops = true,
and the control::setUseTabStops/1 predicate
IsUseTabStops = true,
controlName : setUseTabStops(IsUseTabStops),
to set this flag programmatically.
  • StaticScrollbar
Possible values are True and False. If it is True, then the list control shows a disabled vertical scroll bar for the list box when the box does not contain enough items to scroll. If it is False, then the scroll bar is hidden when the list box does not contain enough items.
The default value is True (shows vertical scroll bar).
You can use the listControl::getStaticScrollbar/0-> predicate to get whether the control has this flag
IsStaticScrollbar = controlName : getStaticScrollbar(),
IsStaticScrollbar = true,
and the listControl::setStaticScrollbar/1 predicate
IsStaticScrollbar = true,
controlName : setStaticScrollbar(IsStaticScrollbar),
to set this flag programmatically.
  • AllowPartialRows
Possible values are True and False. If it is True, then the size of the list box is exactly the size specified by the application when it creates the list box. Normally, Windows re-sizes list boxes so that a list box does not display partial items.
The default value is True for list box controls and False for list button and list edit controls.
You can use the listControl::getAllowPartialRows/0-> predicate to get whether the control has this flag
IsAllowPartialRows = controlName : getAllowPartialRows(),
IsAllowPartialRows = true,
and the listControl::setAllowPartialRows/1 predicate
IsAllowPartialRows = true,
controlName : setAllowPartialRows(IsAllowPartialRows),
to set this flag programmatically.
  • MultiColumn
Possible values are True and False. If it is True, then the list box control can have multiple columns.
The default value is False.
You can use the listBox::getMultiColumn/0-> predicate to get whether the control has this flag
IsMultiColumn = controlName : getMultiColumn(),
IsMultiColumn = true,
and the listBox::setMultiColumn/1 predicate
IsMultiColumn = true,
controlName : setMultiColumn(IsMultiColumn),
to set this flag programmatically.
  • Rows
Possible values are positive numbers. For list button and list edit controls it specifies the maximal number of rows, which can be displayed in the opened list box sub-control.
The default value is 3.
You can use the listControl::getMaxDropDownRows/0-> predicate to get this number
MaxDropDownRowNumber = controlName : getMaxDropDownRows(),
and the listControl::setMaxDropDownRows/1 predicate
MaxDropDownRowNumber = 5,
controlName : setMaxDropDownRows(MaxDropDownRowNumber),
to set this number programmatically.
  • Icon Name
The icon name must be selected from the list of icon names registered in the Project (by clicking the Ide ListButton Button.png button). In order to an icon name appears in the list of registered icon names, you should add the icon file (IconName.ico) into the project files. To do this you should use the File | Add command (the Resource Files should be selected in the Files of Type).
  • Class
Specify a name of a Windows class for the custom control (your application code must register the custom control by this name).

Editing Attributes of VPI Controls

To change attributes of a VPI package control double-click it or select the control and activates the Control Attributes command from the IDE Designer speed menu. Then the <ControlType> Attributes dialog appears.

These dialogs contains two levels of attributes. The general group contains attributes, which are common to all types of controls: the Text determines the control title, the Constant (name) is used as the control identifier, and the Control Size group determines position and size of the control.

Notice that the Text property/attribute is not used for some controls, for instance, it is not used for scroll bars.

Notice that in the Text fields the ampersand symbol & is reserved for indicating that the next to it character is to be underlined. For example, if you use the text string E&xit as a control name, then this control will be displayed with the title Exit at runtime. I.e. the char x will be displayed underlined (thus visually indicating that the x is an accelerator key). If you need to display the ampersand & symbol in the Text of a control, then use two of them &&.

Other attributes are individual to different kinds of controls.


Using Anchors for Positioning GUI Controls while Dialog Resizing

VPI controls remember in their attributes only their absolute positions and sizes. Therefore, when a VPI dialog or a VPI window containing such VPI controls are resized, these VPI controls do not change their positions and sizes!

In difference to them GUI controls have additional Anchor properties, which help to reposition (and may be resize) GUI controls when containing them GUI dialog (or form) is resized.

Each GUI control has four anchor properties: Left Anchor, Top Anchor, Right Anchor, and Bottom Anchor (see Anchor Properties of GUI Controls).

Each anchor determines that the specified (Left, Top, Right or Bottom) control boundary should be always positioned on the stated distance from the nearest (correspondent) border of the dialog (frame).

Each of anchors can have the True or False values. When the anchor value is True, then this anchor is active (used to position the correspondent control).

For example, when the Left Anchor is active (has the True value), then the left control boundary should be positioned on the stated distance from the nearest (left) border of the dialog (frame).

The simplest way to see which anchors are active for a control, is to select this control. Then some red arrows between control boundaries and correspondent boundaries of the dialog can bee seen. Each arrow specifies, that the correspondent anchor is active. For example, the arrow from the control top to the dialog top identifies, that the Top Anchor is active. In the picture below, you see three arrows, which specify that the Left, Top, and Right anchors are active to the Push Button control.

Ide de Anchors.png

Numbers near such arrows show distances (in Dialog Base Units) between the correspondent boundaries of the control and the dialog.

Normally each control has one active horizontal and one active vertical anchors. When the dialog is resized, then such control is always positioned on the specified distances from the specified boundaries of the dialog. The size of the control is not changed!

When a control has both horizontal (or/and both vertical) anchors active, then both horizontal (or/and both vertical) boundaries of the control should be placed on some specified distances from the correspondent horizontal (vertical) boundaries of the dialog. Therefore, when the dialog is resized, then such control is also resized accordingly to keep the specified distances.

When no one of horizontal (or vertical) anchors of a control are active, then no one of horizontal (or vertical) boundaries of the control are bounded to the correspondent horizontal (vertical) boundaries of the dialog. Coordinates of such controls are handles on the "proportional basis". For example, when the dialog width is increased onto Delta dialog base units, then the X coordinate of the control is also increased, but it is increased two times smaller. That is the X coordinate of the control is increased only onto Delta/2 dialog base units.

Cut, Copy and Paste, Undo and Redo

You can Cut or Copy a group of selected controls onto the Windows clipboard, and Paste controls from the clipboard back into a dialog. The Undo and Redo commands serve to delete or restore the last editing operations of your dialog.

Grid

When the menu (or the pop-up menu) entry Resource | Grid is activated, or when the Ide GridButton.png button from the Layout toolbar is pressed, the following dialog appears:

The Dialog to Specify the Grid Properties

With a grid in place, arranging the controls inside a dialog is easier. Also it is possible to tell the IDE Designer by the Snap to Grid that it should place controls at the grid intersections to give a satisfactory result.

Using a grid in the Dialog/Window/Form Editor

Test Mode

The IDE Designer has the Test Mode, so it is possible to see how the dialog with the created controls behaves. To illustrate the Test Mode we will assign some default values to the controls. The test mode is activated and deactivated from the Resource menu (or from the pop-up menu).

Test Mode for a Dialog

Tab Stops

When activating the menu (or the pop-up menu) entry Resource | Tabstops, it is possible to specify to which controls you can Tab to in the dialog. When this command is activated a small button with the + or - appears on controls depending upon whether the control has a tab stop or not. By clicking the small buttons, it is possible to toggle the setting.

Specifying Tab Stops for a Dialog

To exit the tab stop mode, just click in the dialog but outside of any controls.

Visit Order

When the tab stops have been specified for a dialog, then it is possible to specify the order in which controls will receive focus when tabbing.

Displaying the Visit Order

To change the visit order, click a small rectangle displaying the visit order number for a control that has an incorrect sequence number and this will bring up another dialog to change this sequence:

Changing the Visit Order

To stop the visit order mode, just click in the dialog outside any controls.

Speed Menu

When you are in the IDE Designer you can click the right mouse button to activate the Speed Menu. From this menu you can easily call any IDE Designer command:

The IDE Designer Speed Menu

Creating and Editing a Window

The IDE does not support the creation or editing of the old-style VPI windows. You should use Forms instead of windows (see description of forms in the GUI package overview in the PFC part of Help for more details).

However, the IDE automatically creates for GUI applications the special resource file TaskWindow.win which is placed if the TaskWindow sub-directory of the project root directory. This resource file can be later changed by the IDE resource editor.

Creating and Editing a Form

Creating a Form

Forms can be created in any Graphical User Interface projects (see description of forms in the GUI package overview in the PFC part of Help). To create and register a new form in a project you need to use the File | New menu command. In the opened Create Project Item dialog you should select the Form type of created item. Then the Create Project Item dialog accepts the following shape:

Ide MyForm New.png

Name

In the Name field you should type in the name, which will be associated with this form 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 as names of files generated for handling the form. These files appear in the project tree in the Project window. The Code Expert uses this name for generation of names of predicates that handle the form.

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 form, 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 radio button, then you can type in the directory name in the Parent Directory field. The package and the form handling files will be created and placed into the parent directory.
If you check the Existing Package radio button, then in the Package list button you should select one of the packages known to the project. The files handling the created form 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 Form Properties dialog appears.

Form Properties Dialog

Ide myForm Properties.png

Possible options for the Form Properties dialog are:

Title

At runtime this text appears in the title of the form.

Style Flags

These properties define the style flags, which control the look of the form (and affect the generated codes).
  • TitleBar
    When this option is set to true the form will have a title bar.
  • CloseBox
    When this option is set to true the form will have a close box. It is disabled if the TitleBar is not chosen.
  • MaximizeBox
    When this option is set to true the form will have a maximize box. It is disabled if the TitleBar is not chosen. Do not specify this flag if the window should not be resized.
  • Minimize Box
    When this option is set to true the form will have a minimize box. It is disabled if the TitleBar is not chosen. Do not specify this flag if the window should not be resized.
  • Visible
    When this option is set to true the form is visible when it is opened the first time.
  • Enabled
    When this option is set to false the form is displayed as disabled (grayed) when it is opened the first time.
  • ClipSiblings
    When this option is set to true, if this form and some other window have the same parent window, then these child windows should use clipping.
  • ClipChildren
    When this option is set to true, then drawing over any child windows should be clipped.
  • Maximized
    When this option is set to true, then the form should be initially displayed maximized.
  • Minimized
    When this option is set to true, then the form should be initially displayed minimized.
  • VertScrollbar
    When this option is set to true, then the form will have a vertical scroll bar.
  • HorizScrollbar
    When this option is set to true, then the form will have a horizontal scroll bar.
  • Border
    You can can select which style of border the form will have:
    • Size Border Form has a double border. It is used to resize the form.
    • Thin Border Form has a thin border. The form cannot be resized.
    • Dialog Border Form has a border like a dialog. The form cannot be resized.
    • No Border Specifies that there should not be any border around the form.
  • Menu
    Using Menu you can select which of registered in the project menus should be assigned to the form. Usually this is the TaskMenu. If the form should not have a menu, then select the unset.
  • Assigned Toolbars
    Here a programmer can assign to the form any of existing toolbars.

Font

With controls in this group you can select attributes of the font used in controls of the form. When the Set Form Font check box is checked, the Font button can be used to select font properties in the standard font dialog. Note that the selected font is not seen while the dialog editing, but using the Resource | Test Mode command it is possible to see how the form 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 form. 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 form in the current project. You can always go back and activate (with the Resource | Attributes... task menu command or with the Attributes... item from pop up menu) the Form Properties dialog to change the form properties.

Editing a Form

To edit a form, double-click (or press Enter) the name of the form description file (the .FRM filename extension) in the project tree. The IDE Designer with the form appears. Here you can place controls and execute any other editing operations with the form.

Editing a form in the IDE Designer is nearly the same as editing a dialog.

Toolbar Editor

The Toolbar editor allows you interactively create various kinds of toolbars.

Creating a Toolbar

To create and register a new toolbar in a project you need to use the File | New menu command. In the opened Create Project Item dialog you should select in the left pane the Toolbar type of created item. Then the dialog will accept the following shape:

Ide MyToolbar New.png

Name

In the Name field you should type in the name, which will be associated with this toolbar 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 appears in names of files generated for handling the toolbar. These files appear in the project tree in the Project window. The Code Expert uses this name for generation of the name of class, which handle the toolbar.

Package

You should check one of the New Package or Existing Package radio buttons to specify whether the generated resource file and class, which handle the toolbar, 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 radio button, then you should type in the directory name in the Parent Directory field; it is (TaskWindow\) in the picture. The package and the toolbar handling files will be created and placed into the parent directory.
If you check the Existing Package radio button, then in the Package list button you should select one of the packages known to the project (the TaskWindow.pack in the picture). The files handling the created toolbar will be included into this package. The created files will be placed into the selected package subdirectory. The name of this subdirectory is displayed after the package name; it is (TaskWindow\) in the picture.

Toolbar Attributes Dialog

After you press the OK button in the Create Project Item dialog, the Toolbar Attributes dialog appears.

Ide ToolbarAttributes.png

The possible settings for a toolbar are:

Style

There are several toolbar styles. And since the layout of a toolbar simply shows the order of the controls it is easy to change the toolbar style.
The toolbar Style can be one of the following:
Toolbar Style Toolbar Location
Top Placed at the top of window
Left Placed at the left side of the window
Bottom Placed at bottom of window
Right Placed at the right side of the window
Inside Placed at a fixed location inside the window. (The Graphics Editor uses several of these)
Movable A floating toolbar, which the user can move around
Try to change the toolbar style to see the various layouts.

Title

Sets the title for the toolbar. It is disabled for all toolbar styles except for the Movable.

Position

Shows the toolbar position. The position can be set for the Inside and Movable toolbar styles.

Code

This group box contains the read only Class Name text field and the Update Code push button.
  • Class Name
    In this read-only control you can see the name of the class in which the IDE places the default code for the toolbar.
  • Update Code
    Click this push button to enforce code updating.

After clicking the OK button the new toolbar will be created and its name will be added to the existing toolbars for the current project. You can always go back and wake up the Toolbar Attributes dialog (with the Resource | Attribute task menu item or with the Attribute item from pop up menu) for the toolbar to change any of the toolbar attributes.


Editing a Toolbar

To edit a toolbar, double-click (or press Enter) the name of a file with a toolbar description in the project tree in the Project window's list of project files. The Toolbar Editor window appears and you can create whatever form of a toolbar you wish.

The Toolbar Editor

In the top of the picture you see edited toolbar (ProjectToolbar in the picture).

Controls Toolbar in the Toolbar Editor

In the bottom of the previous picture you see the Controls toolbar. Using the Controls toolbar you can easily add desired controls into the edited toolbar.

There are the Controls toolbar commands inserting the following kinds of controls into toolbars:

Ide Ctrl PushBtn.png Push Button Enables inserting of the push button control into the edited toolbar. Click inside the toolbar to specify the place where the control should be inserted, press on the button Ide Ctrl PushBtn.png, the Button Attributes dialog appears. In this dialog you must specify a bitmap that will be used to display the button. Press the OK button to create the control.
Ide Ctrl CheckBx.png Check Button Enables inserting of the check button control into the edited toolbar. Click inside the toolbar to specify the place where the control should be inserted, press on the button Ide Ctrl CheckBx.png, the Button Attributes dialog appears. In this dialog you must specify a bitmap that will be used to display the button. Press the OK button to create the control.
Ide Ctrl StaText.png Static Text Enables inserting of the static text control into the edited toolbar. Click inside the toolbar to specify the place where the control should be inserted, press on the button Ide Ctrl StaText.png, the Text Attributes dialog appears. In this dialog you can specify the Initial Text that will be displayed in the control. Press the OK button to create the control.
Ide TB ContextText.png Context Sensitive Text Enables inserting of the context sensitive text control into the edited toolbar. Click inside the toolbar to specify the place where the control should be inserted, press on the button Ide TB ContextText.png, the Text Attributes dialog appears. Press the OK button to create the control.
Ide Ctrl ListBtn.png List Button Enables inserting of the list button control into the edited toolbar. Click inside the toolbar to specify the place where the control should be inserted, press on the button Ide Ctrl ListBtn.png, the List Button Attributes dialog appears. Press the OK button to create the control. List buttons can be used to select one item from a list of possible values.
Ide TB Separator.png Separator Enables inserting of a separator into the edited toolbar. Click inside the toolbar to specify the place where the separator should be inserted, press on the button Ide TB Separator.png, the separator will be inserted. The separator is like a space; it is used to make some space and a vertical bar between other controls, usually to divide them into functional groups.
Ide TB NewRow.png New Row Enables inserting of a new row into the edited toolbar. Click inside the toolbar to specify the place where the new row should start, press on the button Ide TB NewRow.png, the new row will be created. Notice that the new rows are relevant only for toolbars with the styles Inside and Movable. A new row control will cause breaking of the current line, the following controls appear on the next line.

Control Types Used in Toolbars

In the lower part of the previous picture we see the Controls toolbar toolbar, which contains all kinds of controls that can be used in toolbars.

Control Description
Push Button This is a standard push button. When pressed it sends an vpiDomains::e_Menu event to the parent window. The bitmap must be registered for the button.
Check Button This is used to indicate the state of a property that can have two states; either checked or unchecked. When pressed it sends an vpiDomains::e_Control(_, vpiDomains::wc_CheckBox,_,_) event to the parent window. You must register a bitmap for a check button.
List Button A list button can be used to select one item from a number of values. When pressed it sends an vpiDomains::e_Control(_, vpiDomains::wc_LBoxButton,_,_) event to the parent window.
Static Text Text may be placed in this control initially and also dynamically. A Static Text is often used for titles.
Context Sensitive Text If a Context Sensitive Text field is put into the toolbar, this field will display help information about the control the mouse is currently located over.
Separator A separator is like a space; it is used to make some space and a vertical bar between other controls, usually to divide them into functional groups.
New Row New row is relevant only for toolbars with the styles Inside and Movable. A New Row control will cause the current line to break, and the following controls to appear on the next line of the toolbar.

Toolbar Layout Editing

The layout of the toolbar can be done both with the keyboard, and with the mouse. There is an insertion point that is marked with a colored bar. This insertion point can be moved with the arrow keys, or by clicking the mouse on the new location. When the insertion bar is at a given location, the control to the right of the bar can be deleted by pressing the Delete key, the control to the left can be deleted by pressing the Backspace key.

To place a new control at the insertion point:

  • select an item from the Controls menu or
  • choose a control from the ones shown in the Controls floating dialog or
  • click the right mouse button anywhere in the Toolbars Editor window area outside the toolbar to display a pop up from which a desired control can be selected.

Attributes of Toolbar Controls

After a control is inserted, it is possible to change the control attributes. Just double-click the control.

Push and Check Button Attributes

Double-click a Push button or a Check button calls the Button Attributes dialog.

Ide Toolbar ButtonAttributes.png
Specifying properties of push buttons and check buttons

The following information must be specified:

Constant A constant name to identify the button control. This is the constant that will be used in the vpiDomains::e_Menu events. Therefore, it is recommended to use the same constant as is used for the menu item correspondent to the same command.

The Constant input box is where you can select or type in the symbolic constant that will be used as the control identifier. It can be input directly from the keyboard or selected from the list of available constants (by clicking the Ide ListButton Button.png button). It must be either a legal symbolic constant (for example, idt_file_open ) or an integer value.

If you enter a symbolic constant, then the IDE automatically places this symbolic constant into the resourceidentifiers.i file and generates an appropriate integer value for it. The Toolbar Editor automatically generates the default symbolic constants (for example, idt_7 from the toolbar constant prefix idt_ and the number of this control in the toolbar.

Status Text The string entered into this field can consist from 2 sub-strings separated by a semicolon. The sub-string specified before the semicolon (if specified) is used as the button Tool Tip text. The sub-string specified after the semicolon (or if the semicolon is not specified) will be displayed in the Context Sensitive Text field (when the mouse cursor is positioned over this button).

For example, the text New;New file will cause New to be shown in the yellow tool tip while New file will be shown in a context sensitive field when the mouse is over the button.

Checked If this check box is checked than the button initial state is "pressed" and the icon shaped as pressed is initially displayed. Otherwise the button initial state is "released" and the icon shaped as released is displayed.
Disabled If this check box is checked then the button initially does not accept a user input and is grayed. Otherwise the button is initially enabled (accepts a user input) and has initial state specified by the Checked check box.
Push Button
or
Check Button 		Select the appropriate button style (Push Button or Check Button). The style can be changed at any time. At runtime the state (pressed or released) of a check button can be switched by clicking the check button.
Bitmap Name This bitmap will be used to display a button. This bitmap should be selected from the list of bitmaps registered in the Project window (by clicking the Ide ListButton Button.png button). Before a bitmap name will appear in the registered bitmap list, it should be registered in the project with the File | Add command (the Resource Files should be selected in the Files of Type).

In Visual Prolog v.7 we use a single bitmap for each button and automatically draw different state ornamentations for the released state, the pressed state, and the disabled state of the button.

Edit If the Edit button is pressed, then the Graphics Editor will come up with the given bitmap allowing you to view and edit the bitmap.
Text Control Attributes

Double-clicking a Static Text or a Context Sensitive Text control calls the Text Attributes dialog:

Specifying properties of text controls in a toolbar

The following information must be specified:

Constant A constant name to identify the Text control.
Initial Text The default text to display in the field.
Static
or
Context Sensitive 		Select the appropriate text control type. The style can be changed at any time.
Font Select a font name, font style (Normal, Bold, Italic ...), and font size for the displayed text.
Text Width Determines a width in pixels of the Text control field. It can be entered manually or, by pushing the "|<---Text--->|" button. In this case the width of the field will be optimized to display the Initial Text with the selected Font.
Foreground Color Select the Foreground Color for the displayed text.
List Button Attributes

Double-clicking a List Button control calls the List Button Attributes dialog.

Ide Toolbar ListButtonAttributes.png
Specifying properties of list buttons in a toolbar

Only two parameters can be set for a list button in a toolbar:

Constant A constant name to identify the List Button control.
Width Determines the width in pixels of the List Button control field.

Menu Editor

The Menu Editor can be used to create both pull-down menus (for windows), and pop-up menus (useful for object oriented user interfaces).

Creating a Menu

To create and register a new menu in a project you need to use the File | New menu command. In the opened Create Project Item dialog you should select the Menu type of created item. Then the dialog will accept the following shape:

Ide MenuNew.png

In this dialog you should specify the following items:

Name

In the Name field you should type in the name, which will be associated with this menu 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 appears as the name of the files storing the menu description (with .mnu extension). This file appears in the project tree in the Project window.

Parent Directory

In the Parent Directory field you should type in the parent directory (the TaskWindow\ on the picture). The menu resource file will be placed into the selected directory.

Menu Attributes Dialog

After you press the OK button in the Create Project Item dialog, the Menu Attributes dialog appears.

Ide MenuAttributes.png

After clicking the OK button the new menu will be created and its name will be added to the list of menus existing in the current project. You can always go back and wake up (with the Resource | Attribute task menu item or with the Attribute item from pop-up menu) the Menu Attributes dialog for the menu. The only possible setting for menu attributes is:

  • Constant
    In this list edit the programmer can change the default resource constant for the menu (at the picture it is id_mymenu). A menu identifier must be unique throughout the project.
  • Resourse File
    In this read-only field the programmer can see the name of the file in which the creating menu resource will be stored.

Editing a Menu

To edit a menu, double-click (or press Enter) the name of a file with a menu description in the project tree in the Project window. For example TaskMenu.mnu. The Menu Editor dialog appears and you can create (or modify) whatever kind of a menu you wish.

Menu Editor

The Menu Editor dialog allows you to modify or delete existing menu items or add new ones. The main pane in this dialog contains the tree of menu items of the edited (it is TaskMenu in the picture) menu.

By pressing the New toolbar buttons it is possible to create new menu items and sub-items. You can use: Ide MenuEdit First.png - the New First Item, Ide MenuEdit New.png - the next New Item , and Ide MenuEdit Subitem.png - the menu New SubItem.

Menu items can optionally be grouped by inserting separators. To insert a separator just click the New Separator toolbar button Ide MenuEdit Separator.png.

Cut, Copy and Paste operations for selected menu items (with all their submenu items) can be executed with Ctrl+X, Ctrl+C, and Ctrl+V keyboard accelerators.

The Menu Editor can create nested menus of any level. To enter/create a submenu for the selected menu item click the Submenu button Ide MenuEdit Subitem.png.

By pressing the Test toolbar button Ide MenuEdit Test.png you activate the test mode in which the edited menu will be displayed instead of the main IDE menu. You can open it submenus, etc. To exit the test mode, you can click somewhere in the IDE window out of the tested menu.

Customizing Menu Item Attributes

In the bottom of the menu editor dialog you see the big pane (the Menu Tree pane) in which you can see the edited menu tree. Menu items prefixed with the plus Ide Plus Icon.png icon have submenus. Click the plus Ide Plus Icon.png icon or press the right arrow on the keypad to expand one level of such submenu. Notice that the plus Ide Plus Icon.png icon before expanded menu items is changed for the minus Ide Minus Icon.png icon.

When you select any menu item in the menu tree, the menu editor controls display attributes of this menu item. For each menu item the programmer can specify the following attributes:

  • Item Title
    Select a menu item in the Menu Tree pane and click the menu item title. The menu item title becomes surrounded by the frame like:
    Ide MenuEdit Title.png
    Here you can specify/edit the menu item title (name).
    • The menu item title may contain up to 255 characters. It may include the \t (tab) escape sequence.
    • In the menu item title the ampersand symbol & can be used for indicating that the following character is to be underlined. For example, if you type in the string &Contents, then at runtime this menu item will be displayed as Contents. I.e. the character C will be displayed underlined (thus visually indicating that the C is an accelerator key). The underlined character should be unique on each level of a menu. If you need to display the & character, use two &&.
  • Item Constant
    The Item Constant input box is where you can select or type in the symbolic (or integer) constant that will be used as the menu item identifier. It can be typed-in directly from the keyboard or selected from the list of available constants (by clicking the Ide ListButton Button.png button). It must be either a legal symbolic constant (for example, id_help_contents) or an integer value.

    If you enter a symbolic constant name, then the IDE automatically places this symbolic constant into the resourceidentifiers.i file and generates an appropriate integer value for it. The Menu Editor automatically generates the default symbolic constant name (for example, id_file_exit) from the Constant Prefix id_file and names of menu items (Exit on the picture).
  • Constant Prefix
    The Constant Prefix edit control is where you can input a common prefix for all item constants of menu items on the current level of submenu.
  • Checked
    Set the initial state of the menu item to Checked.
  • Disabled
    Specifies that initially the menu item will be Disabled.
  • Accelerator
    In the Accelerator group box you can set an accelerator key (hot key), which will be used to activate this menu item. The accelerator key can be defined as a combination of a basic accelerator key and of the Shift, Ctrl, and Alt keys. The basic accelerator key can be typed in or chosen from the list in the list edit control. To specify the desired Shift, Ctrl, and Alt keys check on the corresponding check box. To assign more than one accelerator key to a menu item, use the vpi::setAccelerators/1 predicate.
  • Help Constant
    In this list button control you can select one of constants of the existing first-level menu items. The Windows (system handling) menu item (in MDI mode) will be placed just before the first-level menu item with this constant.

    Notice that this possibility can be used only for MDI applications. (It is ignored for non-MDI applications since they do not have the Windows (system handling) menu item.
Editing the Window Submenu

In MDI applications Windows automatically add the Windows first-level menu item, which, by default, is placed after (the most right) all other user-created first-level menu items in each application menu. By default, it contains the Tile, Cascade, and Arrange Icons menu commands and in the bottom of this menu are listed titles of all opened MDI document windows.

To customize items of the Windows submenu, the programmer should create a new menu with the Item Constant equal to mdiwindow_menu. This menu should include only one level of menu items. Notice that since this user-designed submenu will be used instead of the default system Windows submenu, so handling of ALL its menu commands should be explicitly programmed. For instance, handling of the Tile, Cascade, and Arrange Icons menu commands should be programmed if they are included into the designed menu.

See the video: Using your own Window menu

Graphics Editor

About the Graphics Editor

The Graphics Editor is a convenient tool for creating, viewing and editing icons, cursors and small bitmaps. The images can be passed to the Windows Clipboard or saved in files.

The Graphics Editor allows you to create and edit images ranging in size from 4x4 pixels to 64x64 pixels, by using either a 16-color palette or monochrome shadow palette.

The Graphics Editor is invoked from the Project window for Icons, Cursors and Bitmaps. However, when you register large bitmaps in your project, Visual Prolog will call to edit the bitmap an external editor associated in Windows for editing files with .BMP extension.

After the Graphics Editor is started, the Graphics Editor window will appear on the screen.

Graphics editor window

When you create a new image in a project, you need to specify the Name of the image, the Constant (resource ID) which will be identify the image in the project, the name of the File, in which the image will be saved, its size, and how many colors it will have.

Graphics Editor Menus

When the Graphics Editor window is active, the Integrated Development Environment's menu bar displays the Graphics Editor sub-menus of the Resource menu and looks as follows:

The Visual Prolog menu bar when the Graphics Editor is active

Note that there are 2 menu items: Set Mirror Style, Set Cursor Hotspot and 2 sub-menus: Tools and Move. Also some menu items under the Edit menu (like the Undo, Redo, Cut, Copy, Paste) are specially tailored for the Graphics Editor, and the File menu operations refer now to the image files.


Creating a New Image (Bitmap, Cursor or Icon)

To create and register a new image (a bitmap, an icon or a cursor) in a project you need to use the File | New menu item. In the opened New dialog you should select the Bitmap, the Icon or the Cursor type of creating item. Then the following dialog (in case if you have selected the Bitmap) appears:

Creating a new bitmap image

In this dialog you should specify the following items:

Name

In this dialog you should type in the Name which will be associated with this image in the code generated by default. This Name should be a correct Visual Prolog name. It should be any sequence of letters, digits, and underscores, beginning with a letter. This is the name of the creating image. It appears as the names of image files in the project tree in the Project window.

Package

With the Package selection the programmer can determine into directory of which package will be placed the image file.

Image Attributes Dialog

After you press the OK button in the New Bitmap dialog, the Bitmap Attributes dialog appears. The similar dialogs appear in case if you will create a cursor or an icon.

The Bitmap Attributes dialog while creation of a new bitmap

After clicking the OK button the new bitmap will be created and its name will be added to the existing bitmaps for the current project.

The similar (but little simpler) dialogs appear when you create a new Icon:

The Icon Attributes dialog while creation of a new icon

and a new Cursor:

The Cursor Attributes dialog while creation of a new cursor

In these dialogs you can change only the Constant attribute. The attributes Name and File are generated automatically and cannot be changed by the programmer.

Name

This is the Name which was specified for the image in the previous New dialog. It cannot be changed here.

File

Here you will see the name of file, with the path relative to the project root directory, in which the image will be stored. This filename is generated automatically by the IDE and cannot be changed.

Constant

The constant is used to identify the image in your program. An image identifier must be unique throughout the project.

You can either input it directly from the keyboard or allow the IDE to create a default value.
The default values for constants are:
Image Type Constant
Bitmap idb_bitmap_name
Icon idi_icon_name
Cursor idc_cursor_name
Constant must be either legal symbolic constant name (for example, idb_mybitmap) or an integer. The IDE automatically places the symbolic identifier into the ResourceIdentifiers.i file and generates an integer value for it. The Graphics Editor automatically concatenates a sequence number if the project already has an image with the same name.
In case of Icons and Cursors this is the only attribute which can be edited in this dialog.

In case when you create a new bitmap, you can specify several additional attributes:

Width and Height

Defines the Width and Height of the bitmap in pixels. The maximal possible values are 64.
You may specify the size of the image for bitmaps only. The Graphics Editor allows you to create and edit bitmaps ranging in size from 4x4 pixels to 64x64 pixels.
The size of icons and cursors is always 32x32.

Colors

In this field you may specify using of either a 16-color palette or monochrome shadow palette for bitmaps and icons. Remember that for creating cursor images only 2 colors are available - the color black and transparent for background "color".

Editing Image Attributes

You can always wake up (with the Resource | Attribute task menu item or with the Attribute item from pop up menu) the Bitmap/Cursor/Icon Attributes dialog for the created bitmap, cursor or icon to view and change some image attributes.

Notice that the appeared Bitmap Attributes dialog for an existing bitmap will display less bitmap attributes then it has for created bitmaps:

The Bitmap Attributes dialog for an existing bitmap

You see that for existing bitmap the dialog does not contain the Width, Height, and Color attributes.

The only image attribute that you can edit is the Constant.:

Constant

In the Constant list edit the programmer can change the default resource constant for the image (at the picture it is idb_mybitmap).

Graphics Editor Window

When the Graphics Editor is started to edit an image, the Graphics Editor window will appear on the screen:

Graphics Editor Window

The Graphics Editor window is divided into several areas. Each area is responsible for a definite function or combines a number of tools, which are associated by purpose.

Areas of the Graphics Editor Window

Graphics Editor Title Bar

The title bar of the Graphics Editor window serves to display information about the type of the image (icon, cursor or bitmap), the image size in pixels, the number of colors which are available for use, and the name of the file which is opened for the current image.

For example, the title bar ProjectIcon.ico Size 32*32 Colors:16 says that:

  • the type of current image is an icon;
  • the size of the current image is 32*32 pixels;
  • 16 colors may be used in the image;
  • the name of the file, which is opened for current image, is ProjectIcon.ico.
Graphic Field

The Graphic Field is situated in the middle of the Graphics Editor window.

Typical contents of the Graphic Field

The Graphic Field lets you see and edit the current image in expanded mode. The Graphic Field consists of small cells, where each cell corresponds to one pixel on the actual size image. The number of cells in each horizontal row and the number of cells in each vertical column give the image size, which is displayed in the title bar of the Graphics Editor window. It is possible to turn on and off a grid in the Graphic field.

Image Screen

To the right of the Graphic Field in the Graphics Editor window you can see the Image Screen, painted in background color. In the middle of Image Screen you can see the current image in actual size on the selected background color. By changing the background color you can see how your current image will look in various surroundings.

Ide GE ImageScreen.png

Icon

Under the Graphic Field, you can see the Icon drop-down list:

Ide GE IconComboBox.png

You can choose, which of the icon images in the current file to load into the editor.

Move Toolbar

(Moving, Rotating and Flipping an Image) To the right of the Graphic Field, under the Image Screen, you can see the Image Move toolbar:

Image Move toolbar

By clicking the appropriate button you can move, rotate or flip the current image.

Button Button Name Description
Ide I064.png Shift
Left 		Moves the image one column to the left. The left edge column crosses the left borderline of the Graphic Field and returns to the Graphic Field as the right edge column
Ide I063.png Shift
Right 		Moves the image one pixel column to the right. The right edge column crosses the right borderline of the Graphic Field and returns to the Graphic Field as the left edge column
Ide I061.png Shift
Up 		Moves the image one pixel row up. The top row crosses the upper borderline of the Graphic Field and returns to the Graphic Field as the bottom row
Ide I062.png Shift
Down 		Moves the image one pixel row down. The bottom row crosses the bottom borderline of the Graphic Field and returns to the Graphic Field as the top row
Ide I066.png Rotate
Left 		Rotates the image 90 degrees counter-clockwise around its center
Ide I065.png Rotate
Right 		Rotates the image 90 degrees clockwise around its center
Ide I068.png Flip
Horizontal 		Flips the image around the vertical axis
Ide I067.png Flip
Vertical 		Flips the image around the horizontal axis

Notice that the Resource | Move menu contains the same commands as the Image Move toolbar.

Color Palette

At the top of the Graphics Editor window you can see the Color Palette.

The Color Palette

The Color Palette lets you choose colors for the drawing operations:

Color Modes Toolbar

Under the Image Screen you can see the Color Modes tool box:

Ide I10.png
The Color Modes toolbar

The Color Modes tool box is used to set:

Draw and Edit Toolbar

Using Draw and Edit Tools

To the left of the Graphic Field of the Graphics Editor window you can see the Draw and Edit Toolbar. It contains the main tools for drawing and editing:

Ide GE DrawEditToolbox.png
The Draw and Edit toolbar

The Graphics Editor provides a number of tools to make creating your image easy. The tools can be activated either from the Resource | Tools menu or from the Draw and Edit toolbar.

Draw and Edit Tools

By clicking any of the buttons in the Draw and Edit toolbar you can select the required draw or edit tool. Here are short descriptions of them:

Button Button Name Description
Ide I15.png Pen The Pen tool can be used to color an individual pixel on the Graphic Field or to make a free-hand drawing.
Ide I16.png Brush The Brush tool works the same as Pen tool, except that the Brush tool leaves a larger mark than the Pen. The style of the Brush can be changed by selecting among the Small, Big, and Star in the Brush Style list button (in the right bottom corner of the Graphics Editor window).
Ide I18.png Eraser To erase a fragment of the image (the same as painting it with the Screen Color), you can use the Eraser Tool in the toolbar.
The size of the Eraser can be changed by selecting among the Small and Big in the Eraser Style list button (in the right bottom corner of the Graphics Editor window)
Ide I20.png Color Eraser The Erase Color tool will erase cells of the selected color without changing other colors.
Ide I21.png Fill Contour The fastest way to color an area, which has an enclosed boundary, is to use the Fill Contour tool. Move the cursor into the area to be colored and click the mouse button. The interior of the bounded region will be colored.
Ide I26.png Mirror To create symmetrical images use the Mirror tool. The Mirror tool sets the points that are the reflections of the cursor trail point relative to the different axes of symmetry. To choose the appropriate axes of symmetry for the Mirror tool select the Resource | Set Mirror Style menu command in the Task window menu.
Ide I22.png Line Selecting this button enables you to draw a line between any two points in the image.
Ide I23.png Draw Rectangle Click this button if you need a rectangle. Size the Rectangle by drawing it out with the left button held down, then release.
Ide I24.png Draw Ellipse Choose this tool if you need to draw a circle or an ellipse. Size the circle or ellipse by drawing it out with the left button held down, then release.
Ide I25.png Enter Text Click this button to insert some text in your image. Move the cursor to the position on the Graphic Field where you want to start the text and click the mouse button. You will see a text cursor, which shows you the height of the letters and digits, and the starting point for the current line of text.
When you type some text, it will be drawn in the currently selected color, with the currently selected font.
To select the desired font settings press Ctrl+F.
While the text is still selected, it is possible to move the starting point clicking in the new position.
Ide I28.png Mark Area To mark a rectangular fragment of the image on the Graphic Field to be cut, copied or moved, click the Mark Area tool. Then move the cursor to the Graphic Field cell, which you want to be one corner of a marked rectangular area, and press and hold the mouse button. Release the mouse when the rectangle is of the appropriate size and you will see a sub-region of the image marked accordingly.
You can move the marked region to another part of the Graphic Field by means of "drag and drop". Move the cursor into the marked region and press and hold the mouse button. Then, keeping the mouse button depressed, drag the marked fragment to the place of your choice and release the mouse button. Now the marked region is fixed in its new place.
If you want to copy the marked region to another place, do as described under move, but hold down the Ctrl key, while pressing the mouse button in the marked region.
When a region is marked:
  • Edit|Cut or Edit|Copy (from the main menu, or the main IDE toolbar Cut and Copy buttons, or the standard accelerator keys Ctrl+X and Ctrl+C)can be used to place it to the clipboard;
  • Edit|Paste (or the Paste toolbar button or accelerator Ctrl+V)can be used to scale a image from the clipboard into the region.
  • The Paste & Scale tool can be used.

Note
When you use Edit|Paste , the image fragment will appear in the left top corner of Graphic Field. The region may be moved to another place by the mouse.

Ide I29.png Paste & Scale in Rectangle When an image has been copied to the clipboard, this image can be pasted back into another marked area by pressing this button. This button will stay disabled until there are both an image on the clipboard, and a region has been selected.
Ide I30.png Clear Graphic Field To clear the Graphic Field, click the Clear button. The white color is used for bitmaps and transparent color is used for icons and cursors.
Ide I31.png Change a Selected Color With this button you can change all pixels that have a given color into another color. The two colors should first be set for the Color and Alt+Color selections.
Note
Any pixels, which were colored in background color or in "inverse" color by Inverse tool, will keep their original colors.
Ide I32.png Inverse Colors This button can be used to invert all colors on the image. In this case, any pixels, which were colored in background color or in inverse to background color, will retain their existing colors.
Ide I33.png Grid This button can be used to turn on and off a grid in the Graphic Field

Mirror Style Dialog

The Mirror Style dialog is activated by the Resource | Set Mirror Style menu command in the Task window menu:

Ide GE MirrorStyle.png
The Mirror Style dialog

The Mirror Style dialog is used to choose the appropriate axes of symmetry for the Mirror tool.

The Mirror tool Ide I26.png sets the points that are the reflections of the cursor trail point relative to the different axes of symmetry.

When you place the mouse cursor onto some point inside an edited image and click the left mouse button, then we say that you set the cursor trail point.

Using the Mirror tool, you can (by one click) set up to 8 reflections of the specified cursor trail point. A reflection point will be painted to each checked ON type of reflections. They are:

Main -> Trial

When checked ON, then paints the clicked cursor trail point.

Main -> Reverse

When checked ON, then paints the point opposite to the clicked cursor trail point.

Reflect -> Horizontal

When checked ON, then paints the point, which is the horizontal reflection of the clicked cursor trail point.

Reflect -> Vertical

When checked ON, then paints the point, which is the vertical reflection of the clicked cursor trail point.

Orthogonal -> Left

When checked ON, then paints the point, which is 90 degrees left rotation of the clicked cursor trail point.

Orthogonal -> Right

When checked ON, then paints the point, which is 90 degrees right rotation of the clicked cursor trail point.

Reflect Diagonal -> Left

When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the left upper corner to the right lower corner of the image.

Reflect Diagonal -> Right

When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the right upper corner to the left lower corner of the image.

Using Tools and Colors

Setting Colors

Setting the Draw and Edit Colors

To choose colors for the drawing and editing tools you can select one of the following four switches.

Ide GE Mode DrawColor.png
The Color Modes toolbar with selected "color" mode

The color of selection will be used for the drawing. It is possible to choose a new color for the active selection by a click in the Color Palette.

The color and the alt-color can be used in all drawing operations, the screen (or transparent) and inverse selections have different purposes depending on the image type.

Note. There are 16 color fields on the Color Palette, and all of them are available for drawing and editing in the Graphic Field.

Setting the Background Color

To see how your image looks on the different background colors or to color the image fragments in "transparent" (to let the background color show through) use the screen color selection.

Ide GE Mode BackgroundColor.png
The "screen" mode should be used for Background color

To change the background color, be sure that the screen switch is selected, then you can choose the background color by clicking in the Color Palette. The background color on the Image Screen, any details of the image, which were colored in (transparent) background color, and the screen indicator of Color Modes toolbar, all will change to the new color.

Usage of the "screen" Colors for Bitmaps, Cursors and Icons

Image Screen Colors
Bitmaps Used to set the color of the surrounding area
Cursors and Icons Used to specify transparent pixels and to set the color of the surrounding area
Setting the Inverse (to Background) Color

Using the inverse color is a convenient way to mark the boundary of the image or to color the details, which should be always be in contrast to any background color.

Ide GE Mode InverseBackground.png
The "inverse" mode should be used for Inverse color

Usage of the Inverse color for Bitmaps, Cursors and Icons

Image Inverse Color
Bitmaps Cannot be used
Cursors and Icons Used to specify pixels that should get a color inverse of the actual background

Understanding Colors

  • Colors for Bitmaps

The Visual Prolog Graphics Editor can create bitmaps with either 2 or 16 colors. A pixel in a bitmap can not have the inverse and screen colors.

  • Colors for Cursors

Any pixel in a cursor can have one of four color control values:

Cursor Color Effect
Black Pixels will be black
White Pixels will be white
Inverse Pixels will be converted to the inverse of the original color
Screen Pixels will be transparent, they will just keep their old color

To understand how this works, you should create a little cursor having four areas, with these four color control values. Then select the Resources | Tools | Test Cursor, and study how the cursor looks.

Ide GE TestCursorColors.png
In this test cursor the left upper quoter of the cursor is painted with the "color"
and the left bottom quarter is painted with the "inverse"

Place the cursor over the Grid and you will see effects of "inverse" color.

  • Colors for Icons

Icons can either have 2 or 16 colors, and in addition to those, the pixels can also use the screen and inverse colors.

Cursor Handling Tools

Setting Cursor Hot Spots

When working with a cursor, the menu command Resource | Set Cursor Hotspot activates a dialog box:

Ide GE CursorHotSpot.png
Defining the Hotspot for a cursor

As long as this dialog is open you can point to the pixel, which is to be the cursor Hotspot. This pixel in the cursor will determine the screen pixel which will be acted upon and which will be reported during a mouse action.

Testing a Cursor

When working with a cursor, the Resource | Tools | Test Cursor menu item allows you to see what your newly designed cursor will look like.

Undo / Redo Buffer

The Graphics Editor supports Edit|Undo and Edit|Redo operations, just as the other editors do.

Retrieved from "https://wiki.visual-prolog.com/index.php?title=Ide/Resource_Editor&oldid=3850"