Tutorials::An Icon Extractor and Viewer (Updated)
This tutorial is intended to show how to build a complete application with Delphi. I have chosen to do an icon Extractor and Viewer as it is simple to do whilst demonstrating the power of Delphi. What you should have at the end of this tutorial is:
- A working useful application, that lets you browse your disks for Exe's and Dll's, and then view the icons that they contain
- Experience in using Delphi to design forms
- Experience in using the Object Inspector
- Use of a Windows API function
- A much larger collection of icons
- In the process of writing the icon viewer you will also have written a very simple file explorer
Step 1 - The Interface
As this is a relatively simple application, the interface will be done by placing the components straight onto the form. These can then be moved about until the look and feel are right. Keep all the component names as the defaults that Delphi provides and that way they will be easier for me to reference them later (when writing your own applications it is advisable to change the names to something easier to remember, and relevant to what they do e.g. Button1 could be called SaveButton)
- Start a new application by selecting File-New Application
- On the form place a TPanel from the standard tab on the component palette
- Using the Object Inspector change the align property of Panel1 to alBottom. This panel will be used to display any icons
- Add another TPanel to the form
- Again using the Object Inspector, change the align property of Panel2 to alTop. This panel will be used to hold the drive combobox and the filter
- Onto the bottom panel (Panel1) add 2 TLabel's (found on the standard tab of the component palette) and position these as shown in the diagram below.
- Change the caption property of Label2 to "Show Icon Number"
- Add a TImage component to panel1 and using the Object Inspector change its width and height to 32 (the standard icon size)
- Place a TBevel (also from the Additional tab) around Image1, change its style and shape property to whatever you think looks best
- Add a TSpinEdit to Panel1 and position it next to Label2 as the value in the SpinEdit will correspond to the icon currently displayed
- The last thing to add to Panel1 is a TButton (off the Standard tab) and set its caption to save
- Onto Panel2 you need to add a TDriveComboBox and a TFilterComboBox both of which can be found on the system tab of the component palette, position these side by side (as shown in the screen shot below)
- Onto the remaining area of the form (i.e. in the middle between the two panels) Place a TDirectoryListBox and a TFileListBox
- Using the Object Inspector align DirectoryListBox1 alLeft and FileListBox1 alClient
- Select FilterComboBox1 and using the Object Inspector bring up the filter Editor (Double click next to filter in the O.I.) The files we wish to be looking at are executables (exe) and Dynamic Linked Libraries (DLL) so in The filter editor add:
Change the FileList property of FilterComboBox1 to FileListBox1, this will make FileListBox1 only show files with the extension shown in the FilterComboBox
- The final item to add is a TSaveDialog (form the Dialog tab) which will be used to select the filename to save to, for the given icon.
- You now have the basic layout of your application without writing one line of code. Your form should now look something like this:
- If you run the application you can see how it looks and it has the functionality to change directories, change the filter, select files, change
drives and use the spinedit control. But nothing matches up and no icons are displayed. The next step is to write the code to perform this:
Step 2 - The Actual Code
- The first step is when DriveComboBox1 is changed this should be shown in DirectoryListBox1. What we need to do is trap the OnChange event of DriveComboBox1. This can be done by selecting DriveComboBox1 and going to the Events tab of the Object Inspector and double clicking next to the OnChange event this will create the correct procedure declaration for you in the code and place the cursor between the begin and end of the procedure. Here you need to enter:
DirectoryListBox1.Drive := DriveComboBox1.Drive;
What this does is makes sure the drive that DirectoryListBox1 is looking at is the same as what DriveComboBox1 is showing.
- When now need to do a similar piece of code so that FileListBox1 shows the files in the Directory selected in DirectoryListBox1, so as before use the Object Inspector to produce the code stubs for the OnChange event of DirectoryListBox1 and add the following code:
FileListBox1.Directory := DirectoryListBox1.Directory;
- The next stage is to make the view update whenever a file is selected, so using the Object Inspector produce the code stubs for FileListBox1 onChange event and add the following code. Read the comments for a full description to what you are doing.
procedure TForm1.FileListBox1Change(Sender: TObject); (* Added by Object Inspector *)
IconHandle : THandle;
begin (* Added by Object Inspector *)
(* Only do it if a file is selected *)
if FileListBox1.FileName <> '' then
(* Change the caption of the Application to show which file *)
(* is being looked at *)
caption := FileListBox1.FileName;
(* Get the number of icons the file contains by passing -1 to *)
(* the Windows API call extracticon *)
(* Change label1 to show how many icons the file contains *)
Label1.caption := 'No of Icons: '+inttostr(NoOfIcons);
(* If there are no Icons do not allow the spinedit to be used *)
if NoOfIcons = 0 then
(* Make the icon to display be the first *)
(* Do not let the spinedit go past the number of icons *)
(* Make sure its enabled *)
(* Call the spin edit change routine to load the first icon *)
end; (* Added by Object Inspector *)
- The next stage is to make the icons contained in the currently selected file by displayed in the image area. This routine is attached to the change event for the spin edit and is also called when a new file is selected.
procedure TForm1.SpinEdit1Change(Sender: TObject);
(* Just sets image1 to point to the correct icon *)
- The next routine needs to be called whenever the save button is clicked.
procedure TForm1.Button1Click(Sender: TObject);
(* Displays the save dialog and saves the icon to the specified name
if OK pressed *)
if SaveDialog1.execute then
- Finally we need to add ShellAPI to the uses clause as this is the unit were the ExtractIcon function is contained in.
I hope this sample application shows how easy it is to write an application, that is actually useful and not just of the HelloWorld gender. Ideas on ways to expand it include: a copy to clipboard facility, save to different file formats, etc.
If you would like to download the source code for this demo application then please click here.
I would like to express my sincere thanks to Joe Hall, this is for providing feedback on this tutorial, pointing out certain errors and also that it was not complete at one time. Thanks again.