Through the Interface: Building an Installer Part 3

May 2015

Sun Mon Tue Wed Thu Fri Sat
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30


« Building an Installer – Part 2 | Main | An updated version of RegDL available »

September 17, 2010

Building an Installer – Part 3

In the first part in this series, we looked at getting our basic installer to install files and in the second part we focused on checking and modifying the Registry. In this part we’re going to finish up our installer by tweaking the user interface.

Let’s get started with some fundamentals: the name of the MSI file itself. This can be modified via the Installer project’s property page (which I pulled up by right-clicking the project in the Solution Explorer and selecting “Properties”):

Change the MSI name

A pretty simple one, but one that’s worth making, nonetheless. Let’s go ahead and spruce up our installer’s look & feel.

When we run the installer we’ve created, we can see it looks pretty boring:

First page of our installer There’s something about that banner logo that makes me think of the early 1990s (at least it doesn’t have a floppy disk on it, I suppose :-). Luckily it’s easy enough to change.

We’ll start by viewing our user interface options:

View the user interface optionsFrom here we can see a node in the tree for each of our installation wizard’s pages, each of which has one or more properties associated:

Our user interface options with the BannerBitmap propertyWe can change the BannerBitmap property by browsing to a JPG or BMP on the local file system for our updated banner. Here’s my effort, which I’m actually pretty pleased with:

Installer bannerWhen we add it into the project, the file gets added automatically to the install-set – but is excluded, which means that it gets installed to the selected folder for the duration of the install (or is held in memory and accessed from there – either way, the end result is that it’s not left behind on the user’s hard drive once installation has completed). [In the final installer, which you’ll be able to download from the link at the end, I’ve included this image in the Installer project source, so that people can rebuild it, if they so choose. So I’ve ended up not excluding this particular file in this final installer.]

We should change this on each of our installer’s pages (and I don’t know of a way to streamline this – I changed it on every single one).

Here’s the page for the Installation Folder settings. If you have perfect recall – and actually read it – then you will remember me saying in the previous post that we were going to specify “Just Me” as the only option, and remove the radio button enabling this selecting. We can make that UI change on this page, too:

Installation folder page properties While we remember, we should make sure the default project setting (which will no longer be visible) should be “Just Me”. That’s the default, if I recall correctly, but you can double check in the Installer project’s properties:

Making sure the install is just for meWhile we’re on this page, we might as well make sure a few other things have been changed, such as the Manufacturer (to avoid the “, Inc.” being added to our install path) as well as the Product Name and the Title. All these little changes lead to a much more professional-looking installer.

Once you’ve updated the BannerBitmap for all your various pages, you should be ready to go.

Here are the various pages of the final installer:

First page of our prettier installerSelect the installation location

And we confirmOur progressOur progress 2 Installation is complete And should we choose to repair or remove the application, we will see the same look and feel:

Repair or remove the application One last change is to update the Programs & Features icon, visible via our control panel. For this we go back to the Installer project’s properties and select “Browse” for the AddRemoveProgramsIcon property. Once we select a file – and I chose the Browser.ico file from the Browser project – it gets added to the install set, but is not going to be excluded: this icon needs to remain accessible while the application is installed, so will remain in the Application folder (or wherever you choose to add it).

Our Programs and Features icon

That’s it for this series. If you’re interested in trying the final installer, here it is. I’ve made a few late changes – such as updating RegDL to support some local logging (I plan on posting the updated source for RegDL sometime next week). You’ll find the installer creates a Source sub-folder beneath the installed program folder, where you should be able to find the fully-buildable project: I also had some hoops to jump through to make sure this project builds once it’s installed, so that’s another area where the final project differs from what I’ve documented here: if you have any questions, just post a comment.

The same also goes for all you installer experts, out there: there may well be “gotchas” that this implementation doesn’t address adequately, in which case please do let me know.

blog comments powered by Disqus


10 Random Posts