InforBRás - Hardware Brasileira Ltda.

Chapter 4
Detailed study of Components
At the end of the chapter, you will be able to: • • • Explain the components tha
t are visual and nonvisual Explain what properties, events and methods Describe
three ways to manipulate or customize components
Detailed study of Components Overview
Components are building blocks of an application. This chapter covers the main a
spects of components: properties, events and methods. The study of components al
so includes several ways to arrange them, line-lose set properties of components
. This chapter also emphasizes the use of on-line help, because it is an extensi
ve supply of components.
Description of component
Introduction
Delphi applications are built using component. A component is an object that can
be manipulated to build and customize an application. Even a form, although not
found in the Component Palette, is a component. It is a component that can cont
ain other components. Generically, the term component refers to items found in t
he Component Palette. This meaning applies throughout the course. The components
are categorized into component visual and nonvisual.
Visual Component
Visual components appear during the execution of the same order as they appear d
uring design. Examples are buttons and edit fields. Delphi uses the term control
as a means for a visual component that can be displayed when the application is
running. The controls are divided into two groups: control window and not sprin
klered. See Appendix A: Controls on Delphi for details.
Non-visual components
Non-visual components appear at design as figurines in a form. However, they: •
They make a framework for dialogue to appear when called. An example is the comp
onent SaveDialog.
1
InforBRás - Hardware Brasileira Ltda.
• Do not appear at any moment during execution. DataSource, and Table. Examples
of Non-Visual Components The following figure shows examples of visual component
s and non-visual: Examples are the components Timer
Timer Component (non-visual) Component DataSource (non-visual)
SaveDialog component (non-visual)
Component Query (non-visual) component EditBox (visual) Component Button (visual
)
Code Generated for a Form As mentioned, Delphi allows you to create an applicati
on with minimal coding. When you start Delphi, a new form is automatically gener
ated and Delphi creates a corresponding unit. The code for the form can be seen
in the code editor window. The code editor window is usually positioned behind t
he default form, Form1. code is generated when you add a component is an event,
as you will see later in this chapter. The code editor window appears as follows
:
ListBox component (visual)
2
InforBRás - Hardware Brasileira Ltda.
Adding a Component Code Generated When you add a component to the form, Delphi g
enerates the code for this, as shown in the following example, a component Edit:
Aspects of a Component A Delphi component has the following three aspects: • Pro
perties • Methods • Events Each aspect is explained in the following sections: P
roperties Properties are attributes or fields of component. Properties can be de
fined during execution or design. The properties control how a component behaves
and its appearance in an application. For example, a button is a component that
you can add to a form. One of the many properties of a button is the Caption pr
operty. Set the Caption property changes the text displayed on the button.
Influencing the Behaviour of a Component
The Object Inspector displays the properties of a component. The Object Inspecto
r is the connection between the visual appearance of the component and the code
that Delphi generates to make the application run. The Object Inspector is used
to set properties at design time.
Example: property to the Edit Component
The properties are listed in the Properties page of the Object Inspector. The fo
llowing example shows part of the list for the component added to the Edit form.
3
InforBRás - Hardware Brasileira Ltda.
Example: Description of the Component Properties to Edit
Although the properties in the Object Inspector vary for each component selected
, once you understand the properties of a component, you can apply this knowledg
e to other components. The following table describes the complete list of the Ed
it component properties. This list is a representation of the properties commonl
y found for the components of Delphi.€AutoSize BorderStyle property AutoSelect C
harCase Color Description Determines whether the text is automatically selected
when the user move up the component using Memo or Edit tab determines whether a
component is the size automatically adjusted to accommodate its content determin
es the type of border displayed for a component Determines if the style of the c
haracters will be displayed in uppercase, lowercase, or mixed Determines the fol
lowing: • The background color of form • The color of a control or figure Determ
ines if the control has a visual three-dimensional or two-dimensional image that
determines the pointer mouse assume (as the arrow or I-beam) when passing throu
gh the area covered by the component determines the image that the cursor (such
as arrow or I-beam) when it passes over a component that determines the acceptab
le drag-and-drag component drop of a component determines if the component respo
nds to mouse events, keyboard or timer Determines the attributes (color, size, s
tyle, or name) of the following: • Text written on or inside a component or obje
ct • Text sent the printer determines the vertical size of a component or object
determines a unique number for each screen to be called in the context-sensitiv
e Help Determine if the selected text remains selected when the object loses foc
us
Cursor Ctl3D DragCursor DragMode Enabled
Font
Height HelpContext HideSelection
4
InforBRás - Hardware Brasileira Ltda.
Hint Property Description Specifies the text string that will appear when the ev
ent occurs OnHint (when the cursor passes over a component or menu item, its mea
ning will be displayed) Determines the horizontal position in pixels from the le
ft: Left • A component for the form or panel or other container objects • A form
for the screen determines the maximum number of characters a user can type in a
component MaxLength Edit or Memo. Zero (0) means no limit. Determines a unique
name for a component or object name Determines whether the text is converted to
OEM characters OEMConvert Determines where the component searching for informati
on about its color, as follows: • If the value ParentColor form True, the compon
ent uses the Color property of the component father. • If the value false, the c
omponent uses its own Color property. Determines where the component searching f
or information about its three-dimensional visual ParentCtl3D as follows: • If t
he form value True, the component uses the three-dimensional property of parent
component. • If the value false, the component uses its own proprietary three-di
mensional. Determines where a component by searching for the information on its
source, ParentFont as follows: • If the form value True, the component will use
the Font property of the parent component. • If the value false, the component u
ses its own Font property. ParentShowHint Determines where a control that search
es the Help Hint should be shown as follows: • If the form value True, the contr
ol uses the property ShowHint the parent component. • If the form value False, t
he control uses its own proprietary ShowHint. Determines if a component or Edit
Memo displays special characters (instead of text PasswordChar real) when a pass
word typed form identifies the name of the pop-up menu that appeared when one of
the following happens: PopupMenu • The user selects a component and press the b
utton right mouse button. • The method of a popup menu pop-up runs. Become a par
t read-only during execution, so the user can change the ReadOnly field value or
dataset Determines if the Help is enabled or not, for the application, as follo
ws: • If the value ShowHint True Form, Help Hints is enabled. • If the value fal
se, Help Hints is disabled. Indicates the position of the component in the tab o
rder of the container, the order in which a TabOrder component receives the focu
s when the tab key is pressed. Determines whether a user can press tab to the co
mponent TabStop Creates a location available to store integer value as part of a
component Tag The Tag property, but not used by Delphi, is available for specia
l needs of the user. Specifies the text string displayed in a component or other
object Text Determines the vertical position in pixels from top left: Top • A c
omponent in relation to form, control panel or other container • A form for the
screen determines if a component Visible appears on the screen determines the si
ze of the horizontal component and other objects Width
5
InforBRás - Hardware Brasileira Ltda.
Using the Properties Editor to set or change a property The Object Inspector pro
vides several ways to display properties and their variations so you can define
them or change them.€These mechanisms are called property editors. If you create
your own component, you can use the same property editors to define the propert
ies of your component. The editors are objects of Delphi. The editors are: • • •
• Editor Editor simple drop-down list with table editor dialog editor with nest
ed properties
Simple Editor This simple editor allows you to enter a new value in place of a d
efault value for type numeric and alphanumeric strings. In the following example
, the default value of the Caption property is Form1. You can enter a new name i
nstead. Delphi checks the validity of the value to make sure that a numeric stri
ng was not entered in place of an alphanumeric string or vice versa.
Editor Drop-Down List
A down arrow () after some value in the Values column indicates that a value is
limited to a list of choices. Color and Cursor are examples of properties that h
ave a drop-down list.
Editor in Dialog Box
Ellipses (...) indicate that there is a table of options. The following example
shows a dialog box used to define various attributes for the object type tSource
. Font and Color are examples of properties that have a framework for dialogue.
The Color property has no reticence to indicate the existence of a framework for
dialogue. You must double-click to display it.
6
InforBRás - Hardware Brasileira Ltda.
Editor Properties with Nested
Some properties have nested menus (Submenus hidden) from propriedades.Um plus si
gn (+) in front of the name of this property indicates that one or more menus ne
sted properties exist for that property. By clicking on the sign to display the
submenu, a minus sign replaces the plus sign. A minus sign (-) indicates that th
ere is no additional submenu. Font is an example of property that has a nested m
enu. The plus sign + Style submenu indicates that the Style property has a neste
d menu.
Using the F1 key for a complete description of a property
The importance of context-sensitive Help feature of Delphi as is apparent when y
ou need a full description of a property. Pressing the F1 key on your property a
nd (s) value (s), as in AutoSelect property, as follows:
Related Topics Across the F1 key
By clicking on See Also the option (in green text) links with property related t
opics. A list of topics is displayed, as in the example below, the property Auto
Select:
7
InforBRás - Hardware Brasileira Ltda.
Examples of Codes By Phil Key
By clicking on the option Example (in green text) links the property to an examp
le of code related to property AutoSelect. The online Help includes the copy com
mand that lets you copy the text of the Help and pastes it into the application.
This can be especially useful if you find sample code that wants to use in your
application. To use the Copy command, display the Help topic you want to copy,
and Edit menu, select Copy.
Steps to Setting Properties During Design
Follow the steps to set properties at design: Step 1 2 Action Right-click on a p
age of the Component Palette, and a click on the component you want, such as the
Edit component. A click on the area of the form where you want to insert the co
mponent. The component appears in the Edit form with the component. The componen
t name and type of object Edit1: TEdit is placed in the Object Selector. The Val
ues column displays the name Edit1 as the default text of the Text property. Use
a property editor to change the property value. Changes made for most propertie
s appear immediately on the form.
3
Events
Introduction
Event is another characteristic of a component. Events are user actions or event
s that a component of the system can recognize, such as a mouse click.
Event Handler
When you select an event for a component, Delphi generates a heading of procedur
e and code block. The code you write specifies how a component should respond to
an event, and is called the event handler. Event handler procedures are special
ized. The Object Inspector lets you specify which procedures are associated with
certain events.
Example: Events for Component Edit
Events are listed on the Events page of the Object Inspector. The following exam
ple shows a list of events for the Edit component:
8
InforBRás - Hardware Brasileira Ltda.
Example:
Description of Events for the Edit Component
Although the events in the Object Inspector vary for each type of component, onc
e you understand the events for a component, you can apply this knowledge to oth
er components.€The following table lists the events and their descriptions for t
he component Edit: Event OnChange OnClick OnDblClick OnDragDrop OnDragOver OnEnd
Drag OnEnter OnExit OnKeyDown OnKeyPress OnKeyUp OnMouseDown OnMouseMove OnMouse
Up Description Occurs when a particular value of an object or component is chang
ed Occurs when a user click about the component occurs when the user double-clic
k a component occurs when the user releases an object being dragged Occurs when
the user drags an object over a component occurs when the drag ends of an object
occurs when a component becomes active Occurs when the input focus moves from o
ne component to another occurs when the user presses any key when a component ha
s the focus occurs when the user presses a single key character occurs when the
user releases a key that was pressed Occurs when the user presses the mouse butt
on while the mouse pointer is over a component occurs when the user moves the mo
use pointer when the mouse pointer is over the component occurs when the user re
leases the mouse button when the mouse pointer is over a component
Heading of the Procedure Generated Through a Double-Click on an Event
In the Object Inspector, double-click the Value column next to the event generat
es a heading of procedure to the code of the event and associates the event, as
shown in the following example, the OnChange event of the Edit component. The cu
rsor is positioned between the pair begin ... end so you can enter the code for
the desired behavior.
9
InforBRás - Hardware Brasileira Ltda.
Calling Procedures with Parameters
The event handler can have parameters. The instructions inside the procedure can
use the values passed as parameters when the program runs. Values are treated a
s variables declared within the procedure for passing data. The parameters appea
r in parentheses after the name of the procedure, as shown above.
Steps
Step 1
Add Enevt Handler
Follow the steps below to add an event handler to the component Edit: Action Aft
er modifying one or more properties of a component, a click on the Events tab pa
ge to display it. The Events page displays all events recognized by the selected
component, as in the previous example. Select an event and double-click the Val
ue column next to the event. Delphi generates an event handler (the procedure he
ading and the block of code) in the code editor window. The cursor is positioned
within the pair begin ... end. Within the pair begin ... end, type the instruct
ions you want the Delphi run when the component receives the event. Delphi adds
a statement of procedure in the portion of the file interface unit. If you chang
e the name of event handler, Delphi changes the name wherever it appears in the
source code.
2
3
Methods
Introduction
In addition to properties and events, a component has methods. Because the compo
nents are objects, they inherit not only properties and events, but also methods
. In general, a method is a procedure or function associated with a component. I
n terms of programming, a method is a procedure or function declared as part of
an object.
Example: Description of Methods for a Component Edit
The following table lists the methods and their descriptions of an Edit componen
t: Method Description
10
InforBRás - Hardware Brasileira Ltda.
A procedure that starts with the drag of a control • If the Immediate parameter
value is True, the mouse pointer changes to the property value DragCursor and dr
ag starts immediately. • If the Immediate parameter value is False, the pointer
does not change the value and the drag starts only after the user moves the mous
e pointer five pixels. A procedure that makes a component or form in front of ot
her components sprinklered or not, or forms within your parent or component form
. A function that returns the class name of an object A function that returns th
e class that is parent of an object A function that returns the class type of an
object A constructor that initializes an object or component according to certa
in standard procedures. A constructor is declared with the keyword constructor.
A procedure that deletes items from a text or a control procedure that deletes t
he selected text of a component or Edit Memo A procedure that copies a selection
to the Clipboard a procedure that deletes the selection of a control and copy t
o the Clipboard A destructor that destroys a object, control or component, and f
rees the memory that was allocated to it.€A destructor is declared with the word
destructor A function that specifies whether an object is being dragged a proce
dure that ends the drag of an object A procedure that destroys an object and fre
es the memory allocated to it a function that copies a buffer for the selected t
ext of a component or Edit Memo, and returns the number of characters copied A f
unction that returns the text size of a control A Procedure that operates only d
uring the performance and becomes a form or control invisible by setting the Vis
ible property to False, the form or control A procedure that copies text from Cl
ipboard to control a procedure that clears any image that is on the screen and t
hen redraw the whole control A procedure that resets a control to a percentage o
f its previous size A procedure that scrolls the contents of a form or control s
prinklered A procedure that selects the entire block of text in a control A proc
edure that places a component, sprinklered or not, behind all other components w
ithin a parent component or form a procedure that defines the properties Left, R
ight , Height and Width of a component to the values passed to the parameters AL
eft, aright, and AHeight AWidth A procedure that puts the focus on input control
A procedure that sets the selected text in a component or Edit Text Memo to the
 null-terminated string to which indicates the buffer sets the text in a text co
mponent to the buffer A procedure that makes a visual form or control by setting
its Visible property to True A procedure that redraws a component
BeginDrag
BringToFront ClassType ClassName ClassParent Create
Clear CleanSelection CopyToClipboard CutToClipboard Destroy Dragging EndDrag Fre
e GetSelTextBug GetTextLen Hide PasteFromClipboard Refresh ScaleBy ScrollBy Sele
ctAll SendToBack setBounds
SetFocus SetSelTextBuf SetTextBuf Show Update
11
InforBRás - Hardware Brasileira Ltda.
Calling Methods You can call methods (functions or procedures) using dot notatio
n (.), Known as dot notation. For example to call a method show: Edit.Show metho
ds, different properties, are never activated during the design. They are proced
ures or functions that operate on the component. Using the F1 key for a Full Des
cription of Methods pressing F1 on the name of a particular component will be sh
own a list of methods and properties and events associated with that component.
Each component is listed by its object type. You can also select Topic Search in
the Help menu to search for any component. You may want to research a compnent
want to work with which to become familiar with all the available methods.
Manipulating and Customizing Components
Introduction
Add the component form is only part of the task in using them. They need to be m
anipulated and customized to best use and presentation in the form. The followin
g operations are involved: • Define common properties for multiple components •
Resize a Component • Add multiple copies of a component • Group • Align componen
ts Additional components Transactions Transactions The following components are
not covered in the course are the same as in MS Windows : • • Move • Delete Cut
Copy and Paste • Using the Edit Menu Most of the options for manipulation of the
components are in the Edit menu. Selecting A Component and Various Components W
hen a component is selected, it is highlighted with small black squares around i
ts edges. The selection of components varies, if you want to select one or more
components. You can select a component in the following ways: • By giving a clic
k on the component on the form • Giving a click on the component name in the Obj
ect Selector, on top of the Object Inspector • Press tab until the component on
the form
You can select multiple components in the following ways:
12
InforBRás - Hardware Brasileira Ltda.
• Holding down the Shift key as you click on the components giving • Giving a cl
ick a blank area of the form and dragging the mouse pointer over the component t
o include them. A rectangle will appear as you drag the mouse pointer. Setting P
roperties for Multiple Components At the beginning of the course you learned how
to set a property for a component. Most components have properties in common, s
uch as the properties Height is Visible. You can set properties together in a fo
rm without having to select and change each component individually.
Steps to Defining Shared Properties
Follow the steps below to set common properties for multiple components: Step Ac
tion 1 Select all the components for which you want to define properties in comm
on, by clicking on the first component, and keeping the Shift key, giving clicks
on each additional component. The Properties page of the Object Inspector displ
ays only properties that all components have in common. Set the properties you w
ant to share. Note that all components get the same definition of property. Noti
ceable changes in design are reflected in each component.
2
Rearranging a Component You can reset both components when the insert and after
inserting them. When you select a component, small squares called handlers readj
ustment appear around the edge of the component. When you move your mouse pointe
r over a handle, the pointer switches to a double-headed arrow (). When the mous
e pointer is in this format, you can move the handles to make the component more
or less. If you readjust the size of the component as you add, you need not use
the manipulators.
Steps to Resize a Component at Insertion
Perform the following steps to reset a component as you insert it: Step 1 2 Acti
on Select the component in the Component Palette. Position the mouse pointer on
the form where you want the component to appear and drag the mouse in the desire
d direction. As you drag, a rectangle appears to indicate the size and position
of the component. When the rectangle has the desired size, release the mouse but
ton. The component appears in the same size as the rectangle.
3
Steps to Add a Component and reset it Follow the steps below to add a component,
and reset it.
13
InforBRás - Hardware Brasileira Ltda.
For a readjustment in pixels, you can use the Size menu Edit.
Step 1 2
3
Select an action component in the Component Palette. Point to the area of the fo
rm where you want the component to appear and a click with the left mouse button
. The component appears in the form. Hover your mouse pointer over the handlers.
When the mouse pointer to switch to a double-headed arrow, drag the handles to
adjust the size.
Steps to Resize Multiple Components Perform the following steps to reset several
components simultaneously. Step 1 2 Action Select the first component. Hold dow
n the Shift key and clicking on the rest of the components you want to reset. Al
l selected components appear bright. On the Edit menu, choose Size. Table dialog
appears, as follows: Select the desired adjustment. For a precise adjustment, y
ou can type a number in pixels in the Width and Height fields. Right-click OK
3 April 5
Adding Multiple Copies of a Component You can add multiple copies of the same ty
pe of component by pressing the Shift key when selecting the component in the Co
mponent Palette. When you press the Shift key and clicking on the component for
the first copy, a rectangle appears around the component, as shown in the exampl
e with the component Edit: When you give a click on an area of the form, the fir
st copy of the component appeared. Each click on the form, after it adds a copy
of the form. By clicking on the selection tool cursor (the first button from the
Component Palette) terminates the multiple copies.
14
InforBRás - Hardware Brasileira Ltda.
Aligning Components
You can align components through the menu bar in three ways: • On the Views menu
, select Alignment Palette • On the Edit menu, select Align • On the Options men
u, select Environment
Environment Options menu lets you change default options in the environment of D
elphi.
You can also align the grid components using the form. The grid is a default fea
ture and appears as lines of dots of the form. Steps to Align Components Using t
he View / Alignment Palette Follow the steps below to align components via the V
iew menu by selecting Alignment Palette. Step Action 1 2 3 4 Select the componen
ts you want to align. On the View menu, select Alignment Palette. Align Palette
appears as follows: Hover your mouse pointer over each button to display its mea
ning. Give a click of a button alignment.
Steps to Align Components Using Edit / Align the steps below to align components
using the Edit menu and selecting Align. Step 1 2 3 Action Select the component
s you want to align. On the Edit menu, select Align. Table Alignment dialog appe
ars as follows: Please click an alignment option and clicking OK.
15
InforBRás - Hardware Brasileira Ltda.
Steps to Align Components Using Options / Environment Perform the following step
s to align component using the Options menu and selecting Environment. Action St
ep 1 On the Options menu, select Environment. The Environment Options dialog box
appears, as follows, with the front page Preferences: GroupBox In the Form desi
gner, make sure that the following are enabled: Makes 2 • Display grid lines vis
ible in the form of points for alignment of components • Snap to grid causes the
upper left corner of the components are aligned with the mark of the nearest gr
id to change the granularity (the distance of points in the grid), enter new val
ues in place of 3 displayed. The default is 8 pixels for spacing X (horizontal)
and Y (vertical). A number greater than 8 increases the distance of points is fe
wer than 8 points closer. From a four click OK Locate the components in the form
aligning them with the grid. 5
Chapter Summary
Key Points
After completing this chapter, you learned that: • visual components usually app
ear during the execution of the same form that appears during the design. • non-
visual components appear as small figures on the form, but do not appear during
the execution unless displaying a table of dialogue. • A component has three asp
ects: properties, events and methods. • A property is an attribute of a componen
t. The properties control how a component appears and behaves in an application.
16
InforBRás - Hardware Brasileira Ltda.
• An event is a user action or an instance of the application system that can re
cognize, such as a mouse click. • A method is a procedure or function declared a
s part of an object. • Handling and customizing components involve several opera
tions, such as setting its properties or readjust the components.
Terms and Definitions
The following table is a quick reference to the terms presented in this chapter:
Term Definition An event handler procedure associated with an event of the comp
onent that indicates how to handle the event a user action or occurrence of a co
mponent system that can recognize a subroutine that returns a value rows and col
umns of dots that serve as guides in aligning components in a simpler form the u
nit in a program. Instructions are separated by a point-and-comma (;). A procedu
re or function declared within the object, component or control. A sub-propertie
s common to all selected components A procedure or function
Event Function
Grade Instruction Method
Procedure
Shared Properties Routine
17