Category Archives: HMG IDE
Basic Controls – 3
( Status Bar, Check Box )
We are continuing with Viva_HMG.hbp, Main.prg and Main.fmg.
While using a table and while navigating between its records, we need some extra info to show to user: Name of table, current record and record count in the table. So user always feels comfortable by knowing where is he / she; which table, which record?
The status bar control is convenient for this purpose and though this is a quite simple control, IDE has a builder for it: Status bar builder.
When you choose this builder ( after open the .fmg file by IDE of course ), a dialog box will open:
By using this dialog box we can define a status bar. We can prefer define status bar manually too:
DEFINE STATUSBAR FONT "Tahoma" SIZE 9 STATUSITEM "" WIDTH 300 STATUSITEM "" WIDTH 40 DATE WIDTH 90 CLOCK WIDTH 90 END STATUSBAR
After define status bar, we need assign values to its items. We don’t need assign values to DATE and CLOCK items, because these items will be updated by system (HMG) automatically.
First a little procedure :
PROCEDURE InitEdit()
EditReco.StatusBar.Item( 1 ) := cTableFNam
ReadData()
RETURN // InitEdit()
Change ON INIT event of EditReco form from ReadData() to InitEdit(.
And add this line at end of ReadData() procedure.
EditReco.StatusBar.Item( 2 ) := LTRIM( STR( RECN() ) ) + "\" + ; LTRIM( STR( LASTREC() ) )
Let’s look at the result :
Whenever active record change, Item( 2 ) of Status Bar will be updated ( 5/25 ) in above picture.
In this step, user must use “Save” button every time current record edited. Whereas “Read” process is different; whenever current record changed, values of text boxes automatically updated. What about automatic save? May be, we can do this; but user may don’t want such automation. Asking a question like “Do you want save?” every change doesn’t a good way.
The better way may be: put a control to form such “Auto save” with On / Off option.
Yes, fortunately we have such control: Check Box.
We can replace a Check Box control to EditReco form with chbAutoSave name and Auto Save caption:
Now, how we will implement Auto Save process?.
By adding a little IF clause to ACTION events of navigation buttons:
Top : (IF(EditReco. chbAutoSave.Value , SaveData(), ), DBGOTOP(), ReadData() )
Next : (IF(EditReco. chbAutoSave.Value , SaveData(), ), DBSKIP(), ReadData() )
Previous : ( IF(EditReco. chbAutoSave.Value , SaveData(), ), DBSKIP( -1 ), ReadData() )
Last : (IF(EditReco. chbAutoSave.Value , SaveData(), ), DBGOBOTTOM(), ReadData() )
To be continued …
Basic Controls – 2
( Text Box )
We are continuing with Viva_HMG.hbp, Main.prg and Main.fmg. We have assign real actions other than MsgBox() to our two buttons now : Open File and Edit Record. Open File not required GUI controls ( at least for now ), so we can begin with it: For Open File we need a file ( a table ) first: it’s here; a table with four field: Clients.dbf :
No: Field Name Type Width Dec --- --------- ---- ----- --- 1 CLI_ID N 5 0 2 CLI_SNAM C 12 0 3 CLI_NAME C 12 0 4 CLI_TLF C 11 0
And then add a little routine to Main.prg for open (USE) it:
PROCEDURE OpenTable()
IF FILE( "CLIENTS.DBF" )
USE CLIENTS
ELSE
MsgStop( "Clients.dbf file not found !")
ENDIF
RETURN // OpenTable()
And assign this procedure to ACTION of Open File button.
Now, we can begin Edit Record task. For this task we need a separate form, a sub form. Then let’s begin. “New form” from tool-bar and assign a name : EditReco. Assign a title : “Edit Record”, a type : MODAL. Our table has four fields, so we need four LABEL first:
Names : lblCLI_ID, lblCLI_SNAM, lblCLI_NAME, lblCLI_TLF;
Values ( Captions ) : ID, Surname, Name, Tlf
Rows : 60, 100, 140, 180 Col : 60
Cols : 60, 60, 60, 60
Widths : 70, 70, 70, 70
Alignement : RIGHT, RIGHT, RIGHT, RIGHT
We can see our job at work:
Now we need a place for display the current data and accept user input. The control for this purpose is text box. So we need to define four text boxes for each field in the table.
The button of text box in the IDE tool bar is :
Names : txbCLI_ID, txbCLI_SNAM, txbCLI_NAME, txbCLI_TLF;
Rows : 55, 95, 135, 175
Col : 140
DataTypes : First : NUMERIC, others : CHARACTER
We can see our job at work:
Well …
But where are table data ?
To see table data we need assign field values to text boxes as values.
Again, a little procedure:
PROCEDURE ReadData() EditReco.txbCLI_ID.Value := CLIENTS->CLI_ID EditReco.txbCLI_SNAM.Value := CLIENTS->CLI_SNAM EditReco.txbCLI_NAME.Value := CLIENTS->CLI_NAME EditReco.txbCLI_TLF.Value := CLIENTS->CLI_TLF RETURN // ReadData()
and a call command for this procedure to ON INIT event of EditReco form.
The result :
Everything is OK ?
No !
This is only first record of table; how we will see others ?
Yes, we need now yet another feature: navigation; that is travelling between records of table.
But before navigation, we have a problem: Open Table must be processed before Edit Record.
Otherwise a run time error will occurs: Alias does not exist.
What we can do?
– Discard Open Table button, open the table automatically; at beginning of program or at beginning of editing.
– Before editing, check the table, if doesn’t open,
– a) open automatically or
– b) warn user and don’t load Edit Table form.
Probably most convenient is : disable Edit Record button until table is open.
First a mini procedure :
PROCEDURE Initialize()
Main.btnEditRec.Enabled := .F.
RETURN // Initialize()
And then add this procedure ON INIT event of form main:
Last point: enable it after USE table:
PROCEDURE OpenTable()
IF FILE( "CLIENTS.DBF" )
USE CLIENTS
Main.btnEditRec.Enabled := .T.
ELSE
MsgStop( "Clients.dbf file not found !")
ENDIF
RETURN // OpenTable()
Run and see:
Before Open File :
After Open File:
Now we can pass to navigation:
We need seven buttons: Go Top, Go Next, Go Previous, Go Last, Save, Discard, Exit.
Name: btnGoTop, Caption : Top, Col : 50, Row: 220, Height: 28, Width: 60
Name: btnGoNext, Caption : Next, Col : 130, Row: 220, Height: 28, Width: 60
Name: btnPrevious, Caption : Previous, Col : 200, Row: 220, Height: 28, Width: 60
Name: btnGoLast, Caption : Last, Col : 270, Row: 220, Height: 28, Width: 60
Name: btnSave Caption : Save, Col : 380, Row: 60, Height: 28, Width: 100
Name: btnDiscard, Caption : Discard, Col : 380, Row: 140, Height: 28, Width: 100
Name: btnExit, Caption : Exit, Col : 380, Row: 220, Height: 28, Width: 100
Common: Font Name: Tahoma, Font Size: 9
Actions :
btnGoTop: ( DBGOTOP(), ReadData() )
btnGoNext: ( DBSKIP(), ReadData() )
btnPrevious: ( DBSKIP( -1 ), ReadData() )
btnGoLast: ( DBGOBOTTOM(), ReadData() )
btnSave: SaveData()
btnDiscard: ReadData()
btnExit: ThisWindow.Release
Note that actions of four first buttons include two actions, separated by comma and enclosed by parenthesis. With this notation we can define more than one action together.
SaveData() is the inverse of ReadData(): copy values of text boxes to table fields.
PROCEDURE SaveData() // Save data from text boxes to table
CLIENTS->CLI_ID := EditReco.txbCLI_ID.Value
CLIENTS->CLI_SNAM := EditReco.txbCLI_SNAM.Value
CLIENTS->CLI_NAME := EditReco.txbCLI_NAME.Value
CLIENTS->CLI_TLF := EditReco.txbCLI_TLF.Value
RETURN // SaveData()
Discard is simply re-reading data from table.
The result:
To be continued …
Basic Controls – 1
( Image, Label and Button )
We are continuing with Viva_HMG.hbp, Main.prg and Main.fmg. First, let’s enlarge our form: width: 650, height: 550; and then place an image: First click “image” button the toolbar of HMG-IDE, and then click anywhere in the form. This clicked point in the form, will be left upper corner of control; in this case : image. IDE always first places controls with its default values. Our image is 405 x 340 pixel size:
We need assign a size to image control so it can hold properly our image. We can manually set these values and assign name of image file:
Background color of our form didn’t well-matched with this image. Let’s change it to white:
In this step, if we run the program we will see like this :
The STRETCH option of IMAGE control allows assigning size values to the control other than original image sizes. In this case quality of image may decrease. We need also avoiding distortion too; that is keeping fixed aspect ratio of image.
By assigning same width / height values of form and image; we can use an image as back-ground image of form. But in this case we can’t place other control onto image: because controls must not be overlap to each other. Under certain circumstances system not obstructs this. But the beneath control can’t seen.
The LABEL control is an exception of this rule by TRANSPARENT option. If a label is transparent, the beneath control may be seen partially.
Let’s add a label to our form:
The big “A” symbol in the toolbar of IDE represent LABEL. First click this button and then top of our form:
The placeholder of LABEL is primitive situation for now. We have added a new and adjusted both to our needs:
If we built and run our project after set these values, appearance will be like this:
Since two controls (labels) have been overlapped, constructing this “shadow” effect will be a few painful. You can edit .fmg file out of HMG, via any text editor when necessary.
Labels probably are most used controls in GUI programming. This control simply displays any text onto form. For xBase programmers we can say this is GUI counterpart of @ …,… SAY command. As all other GUI controls, we use coordinate system to indicate placement of control. In addition we can set size ( width, height ), back and fore color values, font properties and others as well as we need.
Labels also have ALIGNEMENT property with LEFT, RIGHT and CENTER option. In this sample used LEFT.
In addition, LABEL control supports ACTION event too. This means you can instruct a LABEL control to do an action when user clicked it; same as BUTTON.
Last control to use in this sample is button.
Beside menus, buttons are handy controls for doing an action when user clicked. Let’s see how :
The button for BUTTON in the IDE Tool Bar is this:
As precedents, one click to this button and another one to form, under image:
And two more :
Now we can tailor these buttons to our needs:
First let’s change names and captions given by IDE:
btnOpenFile, btnEditRec and btnExit to names and Open File, Edit Record and Exit to captions, consecutively:
It’s time to assign ACTIONs to this buttons.
MsgInfo( “Open File”) to ACTION of btnOpenFile
MsgInfo( “Edit Record”) to ACTION of , btnEditRec,
ThisWindow.Release to ACTION of btnExit.
And, RUN of course …
Test ACTIONs of buttons by clicking: first two will repeat the sentences in their captions via MsgInfo() function and the last will terminate program. Yes, we are using RELEASE method to the main window for terminate running program, instead of QUIT or CANCEL commands.
That’s all for now !
Working with IDE
Since HMG-IDE is an Integrated Development Environment, it’s possible building an entire project from scratch under HMG-IDE.
But this doesn’t mean “without coding”.
So, we can develop all GUI necessities of our project via HMG-IDE; but what, always we will need some little coding.
Then we can begin our project by building a project file. This is the very first and the easiest step:
Simply run IDE.exe and then select “New Project”.
When IDE ask, select (or build a new) a working folder and give a name (say Viva_HMG) to the project. .hbp extension will be assigned by IDE to project file.
Whenever IDE build a new project, automatically build and open a module file with name Main.prg and a form file with name Main.fmg.
Module file open by your text editor and form file open by IDE itself.
The content of your module file will be like this :
#include <hmg.ch> Function Main Load Window Main Main.Center Main.Activate Return
Basic rules :
– Every HMG project have one ( and only one ) “MAIN” procedure / function
– For using GUI controls, every HMG project have one ( and only one ) “MAIN” form.
So, names of both module and form files are “Main“.
File names doesn’t mandatory;
– only name of first procedure / function of first module file must be “Main” and
– “Window Type” property of one form must be “MAIN“.
You can see “module” tab of Project Browser window “(Main)” sign adjacent to the Main.prg and at the bottom line of “Properties” tab of Object Inspector “Window Type” property of “Main” form already set “MAIN” by IDE.
Now, we can work on our first form.
First we can give a name to it.
But what happening?
There isn’t “Name” in the properties list of our form !
Yes, this is correct; because:
– Basic rule 3: Every HMG form has their own name. Only exception is: a form to be LOAD, has a unchangeable name: TEMPLATE.
In other hand, you give an “alias” to a loaded form. The way of this is using “AS” close in the LOAD command. FE:
Load Window Main AS frmIDEBS_01
In this case you have change “Center” and “Activate” commands too :
frmIDEBS_01.Center
frmIDEBS_01.Activate
If you don’t use an “alias” in that way, you will use in all references of form by its file name; in this example : “Main”.
Now, its time to give a “Title” to the form.
For this, we will use “TITLE” property of form:
Double click “Title” and give a title in the open Input Box, say “It’s a Wonderful Life”
We can change easily background color of form:
Double click BackColor in the properties list.
Click “Custom“.
In the Color Select Form select your favorite background color or simply enter these tree values. : 64, 220, 210
Press RUN button and look to your application in work.
That’s all ! 
Browse by IDE
BROWSE is a control a few complicated than others. However HMG-IDE successfully support it.
In this sample we will build a Browse based application in a few steps using HMG-IDE.
Step – 1 : Make a folder for this sample.
Step – 2 : Copy TEST.DBF and TEST.DBT from \hmg\SAMPLES\TUTORIAL folder to your new folder.
Step – 3 : Run HMG-IDE and chose “New Project”.
IDE will ask you location and name for the new project; denote the folder you had build in the first step and give a name, say “IDEBrowse”.
IDE will build a new main module named “Main.Prg” and a new main form named “Main.fmg”
Step – 4 :
Double click “Main.prg” in the “Modules” tab of “Project Browser” window for editing this “main” module:
IDE send this module (.prg) file to your programing editor.
You will see your main program written by IDE :
#include <hmg.ch>
Function Main
Load Window Main Main.Center Main.Activate Return
Step – 5 :
Since BROWSE is a table based control, we must have a table and files opening/closing routines; these aren’t duties of IDE.
So add this two little procedures to the main.prg for opening and closing table:
Procedure OpenTables() Use Test Shared Return Procedure CloseTables() Use Return
Step – 6 :
Now, it’s time for making some arrangements on the form:
Title :
– Click “Object Inspector [Main.Fmg]\Form\Properties\Title” :
– Give a “Title”, say “IDE Browse Sample” to form :
On Init Procedure :
– By clicking “Object Inspector [Main.Fmg]\Form\Events\OnInit” ;
– Assign OpenTables() procedure name to this event:
On Release Procedure :
– By clicking “Object Inspector [Main.Fmg]\Form\Events\OnRelease”;
– Assign CloseTables() procedure name to this event:
Step – 7 :
Now, we can place BROWSE control in our form:
– Click BROWSE button in the Toolbox:
– Then click anywhere in the form :
– Re-size control by dragging “resize” mark at the lower rigth corner :
– If required, change placement of control by using “replace” mark ( at the upper-left corner )
– By using these two marks, you can place control in the form whatever you like:
Step – 8 :
And now, we will make some arrangements on the BROWSE control :
After activating ( by clicking on it ) BROWSE control;
By selecting “Object Inspector[Main.Fmg]\Browse_1\Properties” give these properties to Browse_1 control:
– “Fields” property :
{‘Test->Code’,’Test->First’,’Test->Last’,’Test->Birth’,’Test->Married’,’Test->Bio’}
– “Headers” property :
{ ‘Code’, ‘First Name’, ‘Last Name’, ‘Birth Date’, ‘Married’, ‘Biography’ }
– “Widths” property :
{ 150, 150, 150, 150, 150, 150 }
– “Work Area” property :
Test
Note that “array” properties requires open and close curly-braces (‘{}’), character properties doesn’t requires quotation marks (“”).
.
If you want allow editing abilities to user, you have change default values (.F.) of these properties to .T.
ALLOWEDIT
ALLOWAPPEND
ALLOWDELETE
Last Step :
That is All !
Click “Run” button ( or select “Run” from Project menu or simply press F5 key) for see results :
You have now a BROWSE based HMG application generated by IDE.
When you use “Run” command or attempt to closing your form by clicking “X” button, IDE ask you saving it ( if any change you have made ). You may also use Project\Save Form menu command.
Since IDE is a “Two-Way Form Designer”, you can edit .fmg files by double clicking its name in the “Forms” tab of “Project Browser” window.
And since .fmg files are pure HMG source code, you can open a .fmg file by your editor to see form source code generated by IDE. Inspecting this code may be useful for better understanding and learning HMG.
You can also edit this file manually, but under your own risk ! Some modifications may not suitable to the standards of Form Designer.
HMG IDE Basics
HMG-IDE
Harbour MiniGUI Integrated Development Environment is a comprehensive and highly sophisticated project management and form design tool. It is also extremely facilitated to easily use. HMG-IDE has four windows:
- Main Window (Control Panel),
- Project Browser,
- Object Inspector and
- Form Design Board.
You may use IDE for project management, for form design purpose or for both.
HMG-IDE Main Window ( Control Panel )
The main window is constituted on a menu bar and a tool box, having many command buttons with descriptive tool tips. This tool box may consider two sections: project management tools and form design tools. Form design tools are divided into a “main controls” area and a “builders” area.
The project management tools allow you all project based works with interactive manner. This includes building and running projects without complex batch processing and environment configuration tasks. Project management tools buttons are:
Project Browser
The Project Browser window’s tabs: 
- Modules,
- Forms,
- Resources,
- Reports,
- Configuration,
- Include and
- Tables
You can view, select and inspect all project elements in this window. Whenever you add or exclude a project element (module (program source file), form, resource, report …), IDE automatically updates the project browser.
Object Inspector
The Object Inspector window is for view and change properties and events of GUI elements in your forms. 
You can observe and modify properties and events value of graphical elements of your form in the Object Inspector window.
Form Window
The form window is a chalk board for designing forms and directing its graphical elements. New or existing, when you open a form, this windows also opened by IDE. With only two clicks you can easily place controls on your form: the first on desired button of control in form design tool box and the second one is anywhere in form you like. After placed, you can resize and change its place by dragging.
Controls :
In GUI programming jargon, GUI elements are called as control. HMG offers tons of controls and HMG-IDE successfully supports all of them.
At the beginning you have a form (window) and then you can easily replace any control onto this form. Simply click button of control to used, and then click any place on form to indicate placement (upper left corner) of control.
In short, you can build a complete form by only two clicks for each control. For example, suppose that we want putting an image control on our form; the button of image control is here:
First click this “image” button the toolbar of HMG-IDE, and then click anywhere in the form. This clicked point in the form, will be left upper corner of control; in this case : image.
This isn’t image itself, only a place-holder for image control.
When you placed a control in your form, IDE assign default values to its properties and events.
You can change the placement of control dragging by mouse with upper left corner ( point no: 1) of this place-holder and resize it with lower down corner ( point no: 2 ).
As first placed and whenever you select (click) any control in the form, this control come active in Object Inspector. And as following on Object Inspector, every control has many properties and events. Since IDE assigned default values to all properties and events of that control, we don’t have learning meaning of all of them, at least at the beginning.
Whenever you change these values interactively on the form, IDE also updates them internally. You can observe and modify them in the Object Inspector window. HMG forms are designed “two way” manner. Saved in a readable format; in fact they are pure HMG source codes, neither binary nor cryptic. You can separately open, inspect and also modify them. When opened by IDE, they are automatically converted to visual form.
Yes, you can edit .fmg file out of HMG, via any text editor when necessary. But please be careful, some points may be left out standards of IDE, though they have legal syntax.
IDE Toolbar :
IDE Toolbar ( indicated in above image by “Form Design Tools” ) has a button for each control. Every button has its own tool-tip; when mouse cursor keep over a button, tool-tip become visible and say name of this control.
Anyway here long name of all control is here: 
Builders :
HMG-IDE has several builders for some relatively complex controls: 
You can use these features for placing appropriate controls in your form: 
