GDI Tools: Icons

The Image Editor

C++ Builder ships with a graphic application called Image Editor. Image Editor is used to create or manipulate small to medium, various types of, pictures needed in computer and graphic applications. These graphics are divided in categories that have different roles. Image Editor provides pens and brushes used to design its objects.

There are various ways you can launch Image Editor:

• If you had started C++ Builder, to start a graphic, on the main menu of C++ Builder, you can click Tools -> Image Editor
• Image Editor is installed in the same group as C++ Builder. To start Image Editor at anytime, from the taskbar, you can click Start -> (All) Programs -> Borland C++ Builder -> Image Editor
• Image Editor is installed in the same location as C++ Builder. Therefore, in Windows Explorer or My Computer, locate C:\Program Files\Borland\Cbuilder6\Bin, and double-click imagedit or imagedit.exe

Using the Image Editor

When Image Editor appears, it is mainly made of four areas.

On top, there is the title bar that displays Image Editor and the main menu. The title bar has the same classic look shared by Windows applications. Under the title bar, the menu, here called the main menu, allows you to perform all regular operations of an application. Image Editor is a Multiple Document Interface (MDI) application. This means that it allows you to open or work on different child windows. By default, when Image Editor starts, it does not create a new document. To create a graphic, you will have to let Image Editor know what kind of graphic you want to work on. Once you open or start a new document, the menu would change according to the type of graphic you are using.

To open an existing document, on the main menu, you can click File -> Open… and locate the desired document. To create a new document, on the main menu, you would click File -> New… and select the type of document you want.

The menu is used as on all other documents. For example, if you make a mistake on a graphic and want to dismiss the last action, you can click Edit -> Undo or press Ctrl + Z. In the same way, you can copy by clicking Edit -> Copy or pressing Ctrl + C. In other words, most of the shortcuts you are familiar with are available.

To find out what a button is used for, position the mouse on top. A tool tip, or hint, would display. The buttons are used for various goals and exhibit different behaviors.

f you change the default line width of a tool, the selected width or thickness stays in memory and can be applied to a tool that does not obviously display this option. This happens if you a great width for a rectangle and then decide to use a Filled Rectangle tool, the last width would apply to the new tool. Therefore, if you do not want to use the same width, select the default before using another tool.

The main area of the application is made of a wide black rectangle that is used to host the graphics you will be using.

Like the top section, the bottom area of the application contains two objects. The Color Palette displays a list of 16 colored buttons (by default)

Under the Color Palette, there is the Status Bar.

After using Image Editor, you can close it. You have a few alternatives:

• On the main menu, you can click File -> Exit
• The shortcut to close such an application as Image Editor is Alt + F4
• To close Image Editor, you can press either Alt, f, x or Alt + X

When closing Image Editor, if you had a modified document that needs to be saved, you would be prompted to save it.

Graphics used in the Windows operating system are divided in categories. Probably the most popular of the graphics natively used in the operating system is called a bitmap.

Icons

Introduction

Like a bitmap, an icon is used to display graphics on window objects. While a bitmap can have any dimension the window needs, the size of an icon must be limited. This is because icons assume different roles on an application.

Icons are used to represent folders in Windows Explorer and My Computer:

To create an icon, on the main menu of Image Editor, you can click File -> New… -> Icon File (.ico). This would call the Icon Properties dialog box, which allows you to specify the icon as a 16x16 or 32x32 pixel graphic. You can also design an icon that consists of 2 or 16 colors. After creating and designing your icon you must save it. An icon is a Windows file whose extension is .ico

1. Start Borland C++ Builder if necessary.
   On the main menu, click Tools -> Image Editor
2. On the main menu of Image Editor, click File -> New… -> Icon File (.ico)
3. On the Icon Properties dialog box, click the 32 x 32 (Standard Icon) radio button. In the Colors section, click the 16 Color radio button
4. Click OK
5. Press Ctrl + I three times to zoom
6. On the Tools Palette, click the Rectangle button
7. On the Color Palette, click the gray button (2nd column, 1st row)
8. On the drawing area, draw a rectangle as follows:
    
   
9. On the Tools Palette, click the Fill button
10. On the Color Palette, click the red color (3rd column, 2nd row)
11. Click inside of the drawn gray rectangle
12. On the Tools Palette, click the Filled Rectangle button
13. On the Color Palette, click the yellow color (4th column, 2nd row)
14. Using the drawing tools and the colors on the Color Palette, draw a rectangle as follows:
     
    
15. To associate an equivalent smaller icon, under the title bar of the child window, click the New… button:
     
    
16. Notice that the 16 x 16 (Small Icon) and 16 Color radio buttons are already selected. Therefore, click OK
17. Press Ctrl + I five times to zoom
18. Using the drawing tools on the Tools Palette and the colors on the Colors Palette, draw the flag as follows:
     
    
19. On the Tool Palette, click the Line tool
20. Save the icon as Belgium in the Icons folder of our exercises and return to C++ Builder
21. Create a new Application and change the form’s caption to Applications Resources
22. Save the project in a New Folder named Applications Resources
23. Save the unit as Main and save the project as AppResources
24. To use the Belgium icon we have just created, on the main menu, click Project -> Options...
25. In the Project Options dialog box, click the Application property page and click the Load Icon button
26. Locate the Icons folder in which the Belgium icon was saved and display it in the Look In combo box
     
    
27. Click Belgium and click Open
     
    
28. On the Project Options, click OK
29. To execute your project, on the main menu, click Run -> Run
30. When the main form displays, notice that it uses the small (16x16) Belgium icon
     
    
31. After viewing the form, close it
32. Open Windows Explorer or My Documents and display the contents of the Applications Resources folder. Display the content in Small Icons and Large Icons views
     
    
     
    
33. Notice that the executable file uses the the right icon for each display
34. Return to Bcb