Functions Language: Introduction to Application Design

Fundamentals of Control Creation

Introduction

The Win32 library defines a Windows control as an object that displays on the screen. In order to give presence to such an object, its window must be explicitly created. There are two main categories of windows you will need to create for your application: parents and children:

Owner and Parent: a window is referred to as a parent when there are, or there can be, other windows that depend on it. The Standard toolbar of Embarcadero RAD Studio is an example of a parent window. It is equipped with buttons and acts as their parent. When a parent is created, it "gives life" to other windows that can depend on it. The VCL provides various types of parent controls. When a parent is destroyed, it also destroys its children.
An owner is a control that "owns" another control. The owner must be a parent type. An owner "carries", "holds", or hosts the controls that it owns. When an owner is created, made active, or made visible, it gives existence and visibility to its child controls. When an owner gets hidden, it also hides its children. If an owner moves, it moves with its controls. The controls keep their positions and dimensions inside the owner

Child: A window is referred to as child when its existence and its visibility depend on another window called its parent or owner. All of the Windows controls you will use in your applications are child controls and they must be parented or owned by another control

A child window can be a parent of another control. For example, the Standard toolbar of Embarcadero RAD Studio is the parent of the buttons on it. If you close or hide the toolbar, its children disappear. At the same time, the toolbar is a child of the application's frame. If you close the application, the toolbar disappears, along with its own children. In this example, the toolbar is a child of the frame but is a parent to its buttons.

Practical Learning: Introducing Application Design

Start Embarcadero RAD Studio
To create an application, on the main menu, click File -> New -> VCL Forms Application - C++Builder

Introduction to Controls Methods

To be able to describe an object created from a class, the class can have member variables. A Windows control is an object that allows a computer user to interact with the machine. It can be used to write, read, draw, or calculate, etc. To present itself and make itself useful, a Windows control must have some characteristics.

There are two sets of Windows controls we will use in our applications. The primary controls we will use come from the Visual Component Library (VCL). Most of the time, we will visually add and control those objects. Sometimes we will programmatically create those controls. The secondary controls we will use come from the Win32 library.

As in Pascal, a method is a procedure created as a member of a class. Methods are used to access or manipulate the characteristics of an object, a variable, or a pointer to a class. There are mainly two categories of methods you will use in your classes:

If you are using an existing class such as one of those that control the objects from the Tool Palette, you can call any of its public methods. The requirements of such a method depend on the class being used
If none of the existing methods can perform your desired task, you can add a method to a class. There are two main options available to you:
- If you are using a class that is being derived, this will always be the case of designed forms, you can add a method to it
- If you are using a control from the Tool Palette but find out that, by design, the control lacks a method you need, you can create your own class derived from that control

The methods of a class are available only at run time. Except for the constructor, to access a method, first make sure you have the variable. Then use the period operator to access the desired method.

The most fundamental and the most common method of a class is its constructor. Each Windows control of the VCL is based on a particular class, and each one has a constructor.

The second most popular method is the destructor. Most (in fact all) of the classes that consume resources, such as graphic-based objects, are equipped with a method named Free. Therefore, when it comes time to get rid of an object created from such a class, call its Free() method.

Creating a Control

Using Win32

In Microsoft Windows, that is, in the Win32 library, to let you create a control, the library provides two functions named CreateWindow and CreateWindowEx and you can use either of them. They are declared as follows:

HWND CreateWindow(LPCTSTR lpClassName,
                  LPCTSTR lpWindowName,
                  DWORD dwStyle,
                  int x,
                  int y,
                  int nWidth,
                  int nHeight,
                  HWND hWndParent,
                  HMENU hMenu,
                  HINSTANCE hInstance,
                  LPVOID lpParam);

HWND CreateWindowEx(DWORD dwExStyle,
                    LPCTSTR lpClassName,
                    LPCTSTR lpWindowName,
                    DWORD dwStyle,
                    int x,
                    int y,
                    int nWidth,
                    int nHeight,
                    HWND hWndParent,
                    HMENU hMenu,
                    HINSTANCE hInstance,
                    LPVOID lpParam);

We will come back to them in later sections.

Using the VCL

If for any reason you cannot or would not visually add a control at design time, you can create it programmatically. There are various techniques you can use. You can first decide what class will be used as the basis of your control.

Deriving From an Existing Class

If you are using a VCL control, you must know the name of the class on which the control is based (and each control is based on a particular class). If you have examined the types of classes available but none implements the behavior you need, you can first locate one that is close to the behavior you need, then use it as a base to derive a new class. Besides the constructor, in your class, you can add the properties, methods, and/or events as you see fit. When implementing the constructor, specify the owner as the base class. You can also use it to globally set a value for a property of the base class. Once the control is ready, you can dynamically create it like any other VCL control.

Introduction to Windows Controls in the VCL

Introduction to Controls

There are three main categories of controls we will use in our lessons: existing VCL controls, existing Win32 controls, and custom controls that are not directly available from the other categories. We will always prefer VCL controls because that is the subject of our lessons. If a control cannot do what we want, which will hardly happen, then we can use one of the Win32's. In extreme cases, we may have to create a new control.

As stated already, a control is an object used in an application. In the VCL, a control is based on the TControl class:

The TControl class provides the characteristics that all controls, seen or unseen, share, including many characteristics from the TComponent class.

Introduction to Windows Controls

We know that a Windows control is an object that is visible on an application. A Windows control is an object of type TWinControl:

You will hardly, if ever, use the TWinControl class directly. Instead, to use a control, you will select it. As mentioned already, to create a control in Microsoft Windows, you can use either the CreateWindow() of the CreateWindowEx() function. In reality, the TWinControl class is a VCL adaptation of the Win32's CreateWindow() and CreateWindowEx() functions.

Adding a Control to an Application

A Windows control is a graphical object that allows the user to interact with the computer. The controls are as varied as the needs and goals are. Because there are so many controls for various purposes, their design and creation are left to the computer programmer. Rapid application design (RAD) consists of visually selecting controls and adding them to your application. To assist you with this, Embarcadero RAD Studio provides an object named the Tool Palette:

Therefore, to visually add a control to your application, you will click that control in the Tool Palette and click an object on your application.

Controls can be set by categories based on their function or role. A container is a control whose main purpose is to host other controls. To design it, you pick up objects from the Tool Palette and drop them where desired. The most common and the most widely used container is the form.

All of the applications we will create in our lessons qualify as graphical user interface (GUI). A GUI application is one that displays Windows controls to the user who acts on them to interact with the computer.

Practical Learning: Introduction to Form Design

To add the first control, on the Tool Palette, click the + button of Standard
From the Standard section, double-click TButton
Notice that a button control is added to the form
To add another control, double-click TEdit
Notice that the second control is positioned on top of the first because whenever you double-click a

control from the Tool Palette, it gets positioned in the middle of the form

When you double-click a control in the Tool Palette, it gets positioned in the middle of the selected container. If the selected control on the form is not a container, the control you double-click would be positioned in the middle of the form.

To add another control, on the Tool Palette, click TMemo
To draw a Memo on the form, position the mouse in the top middle section of the form, then click and
hold the mouse. Drag to the center right section of the form:
Release the mouse. Notice that a memo control has been added to the form
On the Tool Palette, expand the Dialogs section
Click the TColorDialog button
Click and drag on the form to draw a big rectangular box and release the mouse
Notice that the icon keeps its set width and height
To display the code for the form, press F12. Notice that although we have added controls, none
of their code has been written

User Interface Design

Creating a good-looking application is a combination of art, intuition, and logic. Not all IDEs provide the

same features but Embarcadero RAD Studio excels on this aspect. We will learn how to configure various

controls as we move on. The first thing to do is to get familiar with what can ease the user's experience with your application.

When designing an application, you will usually position the desired controls on a form. You will decide

what control you need, where it will be positioned on the form and, with regards to other controls,

what appearance it should have, and what behavior should be customized.

Practical Learning: Adding Controls

To start a new project, on the main menu, click File -> New -> VCL Forms Application - Delphi
When asked whether you want to save your project, click No
On the Tool Palette, expand the Standard section
Click the TEdit control
Click the center-top section of the form (it is not important how it is positioned):
On the Tool Palette, click the TEdit control again
This time, click the middle left section of the form (again, the position is not important):
Once again, on the Standard section, click the TEdit control
This time, click in the lower-left section of the form and hold the mouse down
Drag in the opposite directions to draw a tall and wide rectangle:
Release the mouse
Notice that the control gets the same height as the other edit boxes
In the Standard section again, click the TMemo control
Click and drag on the form from the lower-right section to the upper-center section of the form and release the mouse
Notice that this time, the memo keeps the drawn dimensions
To add another control, in the Standard section, click the TActionList control
Click and drag on the form to draw a tall and wide rectangle. Then release the mouse
Notice that the new control keeps a constant shape
To add another form, on the main menu, click File -> New -> Form - Delphi
While Form2 has focus, in the Standard section of the Tool Palette, double-click the TEdit control to place it on Form2
In the Standard section, click the TPanel control
Click the lower right section of the form and drag to the upper-center section of the form to draw a
rectangle that partially covers the edit box (no need for precision). Release the mouse:
Make sure the new panel is still selected. From the Standard section, double-click the TEdit control:
Notice that the new edit box is positioned in the center of the panel and not in the center of the form.
This is because the Panel control is a container and can hold its own controls
From the Standard section of the Tool Palette, click the TEdit control
Click inside the panel but just above the Edit2 edit box (no need for precision)