Creating a installer-like UI

RenanLazarotto 0 Tallied Votes 640 Views Share

Hey people! I was just surfing around the threads here, and found one asking for how to make a Installer-like GUI (http://www.daniweb.com/forums/post1492819.html).

I've replied there, but I think that is nice to have this on our code database.

To start, let’s make na empty Project. Add a TabControl to it. Name it myCoolTabControl. Then, copy into the form load the following code:

Me.myCoolTabControl.Region = New Region(New RectangleF(Me.myCoolWelcomePage.Left, Me.myCoolWelcomePage.Top, Me.myCoolWelcomePage.Width, Me.myCoolWelcomePage.Height))

Once okay, customize the tabs the way you want. Add how many as needed, rename them and make sure you have at least two buttons on each form. Let’s name they as Next and Back.

The Next button code will be:

With myCoolTabControl
            .SelectedIndex += 1
        End With

And the Back button code will be:

With myCoolTabControl
            .SelectedIndex -= 1
        End With

It will be nice disable the next button on the first page and back button on the finished page. Also, remember that you'll need to add this code for each Next/Back button you have on the project. Or, you can add more handlers to the same event:

Private Sub myCoolNextButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolNextButton.Click, myCoolNextButton2.Click, myCoolNextButton3.Click 'one event for multiple buttons
        '// Next Tab.
        With myCoolTabControl
            .SelectedIndex += 1
        End With
    End Sub

Same for the Back Button:

Private Sub myCoolBackButton2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolBackButton.Click, myCoolBackButton2.Click, myCoolBackButton3.Click
        '// Previous Tab.
        With myCoolTabControl
            .SelectedIndex -= 1
        End With
    End Sub

Let’s create 4 tabs. Welcome, Location, Progress, Finish.
The Welcome tab will have the well-known welcome message. The location will have the also well-known text and a textbox, with a browse button near to it. The code to this page can be something like this:

One textbox, one folder browser dialog and one button

Public Class Form1
    Private myCoolSetupLocation As String ‘declares the variable that will be used to store the location

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me.myCoolTabControl.Region = New Region(New RectangleF(Me.myCoolWelcomePage.Left, Me.myCoolWelcomePage.Top, Me.myCoolWelcomePage.Width, Me.myCoolWelcomePage.Height))
    End Sub

    Private Sub myCoolBrowseButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolBrowseButton.Click
        With FolderBrowserDialog1
            .RootFolder = Environment.SpecialFolder.MyComputer 'define the folder that will be selected when folderbrowsedialog opens
            .ShowNewFolderButton = True 'shows a 'new folder button
        End With
        If FolderBrowserDialog1.ShowDialog = Windows.Forms.DialogResult.OK Then 'shows the dialog
            myCoolSetupLocation = FolderBrowserDialog1.SelectedPath 'and, if the result was OK, assign the selected path to our variable
            myCoolTextbox.Text = myCoolSetupLocation 'shows the selected path on the textbox control
        End If
    End Sub
End Class

Since the user can also change the textbox text by its own, we need to check if the text into the box is the same as the stored into the variable. So, let’s add this code on the Next button on this page:

If TextBox1.Text <> myCoolSetupLocation Then
            myCoolSetupLocation = TextBox1.Text
        End If

This way, it will make sure that the typed path will always be the same as the stored value. You can pre-define a value by setting the myCoolSetupLocation when the form loads. Paste this into the form load sub:

myCoolSetupLocation = Environment.SpecialFolder.ProgramFiles & "\myCoolAppName"
myCoolTextbox.Text = myCoolSetupLocation

This way, when you reach the location tab, it will always have a value. One important thing is that, if the variable is empty, the user cannot continue. To do this, we can use the following code:

Private Sub myCoolTextbox _TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolTextbox.TextChanged
        If myCoolTextbox.Text = "" Then
            myCoolNextButton2.Enabled = False
        End If
    End Sub

Now we can proceed to the progress page.

In this page, you'll need to unpack the data of you app. I really don't know how to do that with embbeding files, so I zip the files and use a library to unzip. I'll not teach on how to do this, since you can get all the answers directly from the developers. Check here: http://dotnetzip.codeplex.com/

There, you can download the code and see some examples on how to use it. I also suggest you to take a look on this particular discussion thread: http://dotnetzip.codeplex.com/discussions/239675

The links posted by Cheeso will explain exactly how to make a working progressbar.
So, on this form, we'll need to add a progressbar and nothing more. Just need to remember that, when the extracting event finish (in case you use the library I suggested), you'll need to add the code to go to the next form.

Since we're doing a test app, add a button to the tab and use the following code:

Private Sub myNotSoCoolNextButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myNotSoCoolNextButton.Click
        With myCoolTabControl
            .SelectedIndex += 1
        End With
    End Sub

We finally get to the finish page. There is no much to say. Just add the texts, a checkbox (or a few checkboxes) and a finish button. You decide what checkboxes will do. For example, lets add one that will run the installed app and one that opens a site.

Two checkboxes

Private Sub myCoolRunCheckbox_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolRunCheckbox.CheckedChanged
        If myCoolRunCheckbox.CheckState = CheckState.Checked Then
            myCoolRunProgramVar = True
        ElseIf myCoolRunCheckbox.CheckState = CheckState.Unchecked Then
            myCoolRunProgramVar = False
        End If
    End Sub

    Private Sub myCoolSiteCheckbox_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolSiteCheckbox.CheckedChanged
        If myCoolSiteCheckbox.CheckState = CheckState.Checked Then
            myCoolWebsiteVar = True
        ElseIf myCoolSiteCheckbox.CheckState = CheckState.Unchecked Then
            myCoolWebsiteVar = False
        End If
    End Sub

Remember to declare the variables!

Private myCoolRunProgramVar As Boolean
    Private myCoolWebsiteVar As Boolean

The Finish button code will look like:

Private Sub myCoolFinishButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolFinishButton.Click
        If myCoolRunProgramVar = True Then
            Process.Start("path to process")
        End If
        If myCoolWebsiteVar = True Then
            Process.Start("http://www.daniweb.com")
        End If
        Me.Close()
    End Sub

Thats it! The UI is done. It is up to you to customize it the way you want. And remember: I only covered the UI part. When installing an program, you need to register it on the uninstall section. You'll also need to write an uninstaller app. You can re-use this code for the uninstaller, just changing a few things.

You can look here: http://social.msdn.microsoft.com/forums/en-US/vbgeneral/thread/98c2da3a-1497-4c24-9d87-f1945f806e47 for some info about uninstall section. You can also look here http://social.msdn.microsoft.com/Forums/en-SG/Vsexpressvb/thread/255841ae-7a18-47dd-913f-69222b068fe4 and here http://www.codeproject.com/KB/vb/registry_with_vb.aspx for more detailed info about managing registry.

The complete code is on the snippet.

You can also download the ready-to-use project below. It has been written using Visual Studio 2010, so it will only open on it. I'm sorry, I cannot provide earlier Visual Studio versions.

Public Class Form1

#Region "== VARIABLES =="
    'set the variables
    Private myCoolSetupLocation As String
    Private myCoolRunProgramVar As Boolean
    Private myCoolWebsiteVar As Boolean
#End Region

#Region "== APP STARTUP/FORM LOAD =="
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'hides the tab headers
        Me.myCoolTabControl.Region = New Region(New RectangleF(Me.myCoolWelcomePage.Left, Me.myCoolWelcomePage.Top, Me.myCoolWelcomePage.Width, Me.myCoolWelcomePage.Height))

        'pre-define a setup location
        myCoolSetupLocation = System.Environment.GetFolderPath(Environment.SpecialFolder.ProgramFiles) & "\myCoolAppName"
        myCoolTextbox.Text = myCoolSetupLocation

    End Sub
#End Region

#Region "== WELCOME TAB =="
    'handles the 'next' button on the welcome tab
    Private Sub myCoolNextButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolNextButton.Click
        '// Next Tab.
        With myCoolTabControl
            .SelectedIndex += 1
        End With
    End Sub
#End Region

#Region "== LOCATION TAB =="
    Private Sub myCoolBrowseButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolBrowseButton.Click
        With FolderBrowserDialog1
            .RootFolder = Environment.SpecialFolder.MyComputer 'define the folder that will be selected when folderbrowsedialog opens
            .ShowNewFolderButton = True 'shows a 'new folder button
        End With
        If FolderBrowserDialog1.ShowDialog = Windows.Forms.DialogResult.OK Then 'shows the dialog
            myCoolSetupLocation = FolderBrowserDialog1.SelectedPath 'and, if the result was OK, assign the selected path to our variable
            myCoolTextbox.Text = myCoolSetupLocation 'shows the selected path on the textbox control
        End If
    End Sub

    'will check if the textbox is empty. if yes, disables the next button. DOES NOT VERIFY IF THE CONTENT ON THE TEXTBOX IS A VALID DIRECTORY!
    Private Sub myCoolTextbox_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolTextbox.TextChanged
        If myCoolTextbox.Text = "" Then
            myCoolNextButton2.Enabled = False
        End If
    End Sub

    'handles the 'next' button on the location tab
    Private Sub myCoolNextButton2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolNextButton2.Click
        'checks if the variable has the same content of the textbox. If not, it will assign the textbox content to the variable
        If myCoolTextbox.Text <> myCoolSetupLocation Then
            myCoolSetupLocation = myCoolTextbox.Text
        End If
        '// Next Tab.
        With myCoolTabControl
            .SelectedIndex += 1
        End With
    End Sub

    'handles the 'back' button on the location tab
    Private Sub myCoolBackButton2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolBackButton2.Click
        '// Previous Tab.
        With myCoolTabControl
            .SelectedIndex -= 1
        End With
    End Sub
#End Region

#Region "== PROGRESS TAB =="

    'will not be used on the final code. will be replaced with the unpack data code, and registry operations. is here only for learning purposes. handles the next button
    Private Sub myNotSoCoolNextButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myNotSoCoolNextButton.Click
        With myCoolTabControl
            .SelectedIndex += 1
        End With
    End Sub
#End Region

#Region "== FINISH TAB =="

    'checks if the run program checkbox is checked, and then sets the corresponding variable to true/false.
    Private Sub myCoolRunCheckbox_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolRunCheckbox.CheckedChanged
        If myCoolRunCheckbox.CheckState = CheckState.Checked Then
            myCoolRunProgramVar = True
        ElseIf myCoolRunCheckbox.CheckState = CheckState.Unchecked Then
            myCoolRunProgramVar = False
        End If
    End Sub

    'checks if the visit website checkbox is checked, and then sets the corresponding variable to true/false.
    Private Sub myCoolSiteCheckbox_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolSiteCheckbox.CheckedChanged
        If myCoolSiteCheckbox.CheckState = CheckState.Checked Then
            myCoolWebsiteVar = True
        ElseIf myCoolSiteCheckbox.CheckState = CheckState.Unchecked Then
            myCoolWebsiteVar = False
        End If
    End Sub

    'finish button handler
    Private Sub myCoolFinishButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles myCoolFinishButton.Click
        'check the values of the variables defined before
        If myCoolRunProgramVar = True Then
            'be sure to add a valid process, or it will throw a error
            Process.Start("path to process")
        End If
        If myCoolWebsiteVar = True Then
            Process.Start("http://www.daniweb.com")
        End If
        Me.Close()
    End Sub
#End Region

End Class
RenanLazarotto 0 Posting Whiz in Training

You can see a more complete example on my attached file.
It will really install some files on the selected location, but nothing really useful. Since the extraction I used updates the progress bar after each file has been extracted, I zipped up all RollerCoaster Tycoon 2 Track files, that gave me a pretty small zip file but with a great number of files, which make the progress event 'lookable' :D

You can simply delete the files later. Also, unlike the code I posted earlier, you can check the 'Run application' checkbox and hit Finish. It will only open notepad.

The full source-code is also on the zip file, but the extraction parts are not so well commented. You can download the DotNetZip I mentioned before, and look at the examples section to see if you can figure it out (it is a bit hard, but not impossible! ;) )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.