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 !

Downloads source files

IMAGE Control

HMG Tutor 14

Displaying Images (The IMAGE Control)

The IMAGE control allows to show image files in your program.

@ 10,10 IMAGE Image_1 ;
        PICTURE 'Demo.Bmp' ;
        WIDTH 90 ;
        HEIGHT 90

#include ""
Function Main
   AT 0,0 ;
   WIDTH 400 ;
   HEIGHT 200 ;
   TITLE 'Tutor 14 Image Test' ;
      POPUP "First Popup"
         ITEM 'Change Image Content' ACTION ;
               Win_1.Image_1.Picture := 'Open.Bmp'
         ITEM 'Retrieve Image Content' ACTION ;
               MsgInfo ( Win_1.Image_1.Picture)
  @ 10,10 IMAGE Image_1 ;
          PICTURE 'Demo.Bmp' ;
          WIDTH 90 ;
          HEIGHT 90

HMG IDE Basics


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:

  1. Main Window (Control Panel),
  2. Project Browser,
  3. Object Inspector and
  4. 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 Management Buttons

Project Browser

The Project Browser window’s tabs: Project Browser Tabs

  1. Modules,
  2. Forms,
  3. Resources,
  4. Reports,
  5. Configuration,
  6. Include and
  7. 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. Object Inspector

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.

HMG IDE FormWindow

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: