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 …

Download source files

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:

  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: