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. • nonvisual 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