Skinning Your Application

Larry Roof

Tonked.com

December 11, 2001

Knock, knock.

Who's there?

Angry developer.

Angry developer who?

Angry developer that didn't get to go surfing last month.

I know. It's not funny. Trust me, I know. My surfing vacation and "while you are in L.A. anyways PDC speaking engagement" didn't happen, and let's just say I'm not in a very good mood. I mean, I don't ask for much. Give me a cold Coke, a bandolier full of Pocket PCs, and a reliable wireless Ethernet connection, and I'm pretty much good to go. Missing a surfing opportunity though is a bit hard for me to take. Unlike you California "I can go surfing any time I want" types, us Michigan-based surfers are a good two-day drive from the ocean. Surfing outings are serious business.

But hey, I'll get over it, and what better way to get over the surfer's blues than to write a little eMbedded Visual Basic® application. While I introduced Smart Device Extensions for Visual Studio® .NET in my last column, this month I'm going to jump back to the old school—eMbedded Visual Basic to demonstrate how you can skin your applications.

Click here to download sample - Road11282001.exe.

Note If any of you are concerned about my surfing dilemma and have an oceanfront condo that you would say, let me use for a week free of charge, please contact me at lroof@tonked.com.

Injecting Skins Into Your Application

Skins, changeable interfaces for applications, are becoming increasingly popular. The idea here is rather than limit the users of an application to a single interface appearance, skins allow your user to select an interface that is appealing to them, therefore making them happier and more satisfied with your software.

In this article, I'm going to demonstrate a simple method in which you can inject skins into your eMbedded Visual Basic applications.

The Demo Application

The skin demo application displays tasks for each day of the week. The user can select a day by clicking the button corresponding to the day of the week in which they are interested. I've included two pre-built skins to use with this example—one is based on a golf motif, the other is a nature setting. Examples of these skins are shown in figures 1 and 2 below.

Figure 1. Golf skin viewing Wednesday items

Figure 2. The same items with the nature skin

Now, let me point out the limitations of this application. The items that are displayed are hard-coded. It doesn't matter on what Pocket PC this application is run, you will always end up with the same items to complete. In this case, they are my items, so if any of you actually complete any of these items, please let me know so that I can cross them off my list.

The focus here is to show how to incorporate skins into an applications interface, rather than how to access and display tasks extracted from Pocket Outlook®. I'll leave that discussion for a future column.

Working Around Those eMbedded Visual Basic Limitations

If eMbedded Visual Basic development is nothing else, it is an exercise in working around limitations. In the case of adding skins to an application, there are a couple of issues.

The first problem I encountered is that I would have liked to simply place the skin image into the Picture property of the form, just as I would do with a Visual Basic application. The problem is that eMbedded Visual Basic forms don't have a Picture property.

My second choice was to use the Image control to hold the skin, and resize the Image control to match the size of the form. That worked fine for displaying the skin, but alas, the Image control doesn't support any type of tapping events, which means I could never handle buttons.

My third choice was the Picture Box control. It allowed me to insert a skin, and it responds to taps—seemed perfect. Well, almost perfect. The eMbedded Visual Basic Picture Box control acts slightly different from its Visual Basic counterpart. The Visual Basic version acts as a container. That is, other controls that are drawn on top of the Picture Box remain on top of the Picture Box. The eMbedded Visual Basic version doesn't act this way. Controls that are drawn on top of the eMbedded Visual Basic Picture Box appear behind it. To correct this shortcoming, you will need to set the ZOrder property of each of your controls so that they appear in front of the Picture Box.

Designing the Skins

With the structural issues resolved, we can turn our attention to the task at hand—implementing skins. The approach I used involves two files—the skin image and a configuration file. The skin image is what is displayed to the user. The configuration file defines where the buttons are on the skin, where to place text that is displayed, and what colors to use when displaying the text.

A sample of the configuration file design I used is shown below. You will note that it is not complicated and that I've embedded comments into the file. I find that this approach makes it easier to work with and modify.

Note The button coordinates define the upper left and lower right corners of each button.' Heading location.

400

1000

' Item location.

600

1200

' Button 1.

1200

1500

180

' Button 2.

1550

1850

180

' Button 3.

1900

2200

180

' Button 4.

2250

2550

180

' Button 5.

2600

2900

180

' Button 6

2950

3250

180

' Button 7

3300

3600

180

' Heading color.

65535

' Item color.

16777215

Stepping Through the Application

When the Skin Demo application starts the Form Load event procedure, shown below, it handles some preliminary items. It starts by configuring the menu. Next, it resizes the Picture Box control to match the size of the interface. A default skin is then applied. For your applications, you will probably want to store the name of the default skin in the registry, rather than hard coding it as I did here. The coordinates for the golf skin are then loaded, some date information is hard-coded, and the contents for a specific date are displayed.

Private Sub Form_Load()

' Configure the menu.

ConfigureMenu

' Position and size the background.

picSkin.Left = 0

picSkin.Top = 0

picSkin.Width = frmSkinDemo.ScaleWidth

picSkin.Height = frmSkinDemo.ScaleHeight

' Set the default skin.

strCurrentSkin = "golf"

picSkin.Picture = App.Path & "\" & strCurrentSkin & ".bmp"

' Load the coordinates for the skin.

LoadCoordinates

' Hard code a set of dates.

datWeek(1) = CDate("11-25-2001")

datWeek(2) = CDate("11-26-2001")

datWeek(3) = CDate("11-27-2001")

datWeek(4) = CDate("11-28-2001")

datWeek(5) = CDate("11-29-2001")

datWeek(6) = CDate("11-30-2001")

datWeek(7) = CDate("12-01-2001")

' Set the starting date.

datCurrent = datWeek(2)

' Display today's appointments.

DisplayAppointments

End Sub

Configuring the Menu

The key feature behind the Skin Demo menu is that it demonstrates how to build a menu that varies depending upon the skins that are present on the user's device. This is accomplished by using the eMbedded Visual Basic File System control's Dir method. This method allows you to query the contents of a specific directory to obtain a list of files. I use this control to look for any files that are in the same directory as the application and have the extension of .bmp. Using some simple string manipulation, I strip off the file extension and insert the skin name into the menu.

Sub ConfigureMenu()

' This routine builds the Skins menu based upon the skins that are present on the device.

Dim mnuSkins As MenuBarMenu

Dim strDir As String

Dim strSkin As String

' Create the Skins menu.

Set mnuSkins = ceMenuBar.Controls.AddMenu("Skins", "skins")

' Use the File System control to get a list of the available skins.

' Start with the first skin.

strDir = ceFileSystem.Dir(App.Path & "\*.bmp")

' Grab the rest of the skins.

Do While strDir <> ""

strSkin = Mid(strDir, 1, Len(strDir) - 4)

mnuSkins.Items.Add , strSkin, strSkin

strDir = ceFileSystem.Dir

Loop

End Sub

Loading Skin Coordinates

Each skin has its own set of coordinates. The LoadCoordinates routine handles loading these configurations as a specific skin is selected.

The contents of a coordinates file are read into the Skin Demo using the eMbedded Visual Basic File control. With this control, I first open the file and then perform a series of line inputs to load all of the configuration information.

Note There are several points in the LoadCoordinates routine where I simply read a line into a variable called strJunk and never do anything further with that line. These correspond to the comments that are embedded into each configuration file.Sub LoadCoordinates()

Dim intDay As Integer

Dim intLocs As Integer

Dim strJunk As String

' Open the configuration file for the current skin.

ceFile.Open App.Path & "\" & strCurrentSkin & ".cfg", fsModeInput, fsAccessRead

' Load the heading location.