Skinning Your ApplicationSkinning Your Application
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 [email protected].
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.
Skinning Your ApplicationSkinning Your Application
Figure 1. Golf skin viewing Wednesday items
Skinning Your ApplicationSkinning Your Application
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.
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.
strJunk = ceFile.LineInputString
intDateLocX = ceFile.LineInputString
intDateLocY = ceFile.LineInputString
' Load the item location.
strJunk = ceFile.LineInputString
intAppointmentLocX = ceFile.LineInputString
intAppointmentLocY = ceFile.LineInputString
' Load the button locations.
For intDay = 1 To 7
strJunk = ceFile.LineInputString
For intLocs = 1 To 4
intButtons(intDay, intLocs) = CInt(ceFile.LineInputString)
Next intLocs
Next intDay
' Load text colors.
strJunk = ceFile.LineInputString
lngTitleColor = ceFile.LineInputString
strJunk = ceFile.LineInputString
lngItemColor = ceFile.LineInputString
' Clean up.
ceFile.Close
End Sub
Displaying Appointments for a Given Day
I won't dwell much on this section of the Skin Demo application as it mostly handles the displaying of hard-coded content. There are some key points to discuss though. First, the Skin Demo uses the
Picture Box
control's
DrawText
method to display individual items. This allows us to control exactly where on the skin the content is displayed. Second, the Picture Box control's
Cls
method is used to clear off any previous content that may be displayed before adding new content.
Sub DisplayAppointments()
' This routine displays the appointments for the selected date.
Dim strDayOfWeek As String
' Clear off previous appointment information.
picSkin.Cls
' Display the present date.
picSkin.FontBold = True
picSkin.ForeColor = lngTitleColor
Select Case DatePart("w", datCurrent)
Case 1:
strDayOfWeek = "Sunday"
Case 2:
strDayOfWeek = "Monday"
Case 3:
strDayOfWeek = "Tuesday"
Case 4:
strDayOfWeek = "Wednesday"
Case 5:
strDayOfWeek = "Thursday"
Case 6:
strDayOfWeek = "Friday"
Case 7:
strDayOfWeek = "Saturday"
End Select
picSkin.DrawText strDayOfWeek & ", " & MonthName(Month(datCurrent)) & " " & _
Day(datCurrent) & " " & Year(datCurrent), intDateLocX, intDateLocY
' Display the appointments for this date.
' NOTE: These are hard-coded just for the purpose of this demo.
picSkin.FontBold = False
picSkin.ForeColor = lngItemColor
Select Case strDayOfWeek
Case "Sunday"
picSkin.DrawText "no appointments today", intAppointmentLocX, intAppointmentLocY
Case "Monday"
picSkin.DrawText "08:00 drop car off", intAppointmentLocX, intAppointmentLocY
Case "Tuesday"
picSkin.DrawText "10:00 status meeting", intAppointmentLocX, intAppointmentLocY
picSkin.DrawText "13:00 presentation to management", _
intAppointmentLocX, intAppointmentLocY + 200
Case "Wednesday"
picSkin.DrawText "09:30 conference call", intAppointmentLocX, intAppointmentLocY
picSkin.DrawText "11:00 interview", intAppointmentLocX, intAppointmentLocY + 200
picSkin.DrawText "14:00 product meeting", intAppointmentLocX, intAppointmentLocY + 400
picSkin.DrawText "15:30 doctor appointment", intAppointmentLocX,_
intAppointmentLocY + 600
Case "Thursday"
picSkin.DrawText "10:00 project meeting", intAppointmentLocX, intAppointmentLocY
picSkin.DrawText "14:00 presentation to management", _
intAppointmentLocX, intAppointmentLocY + 200
Case "Friday"
picSkin.DrawText "12:00 lunch with Lauren", intAppointmentLocX, intAppointmentLocY
Case "Saturday"
picSkin.DrawText "10:00 soccer game", intAppointmentLocX, intAppointmentLocY
End Select
End Sub
Changing Skins
When the user selects a new skin from the menu, the new skin is implemented using the following small bit of code. The name of the skin is passed as an argument to the event procedure. This makes it extremely simple to switch to a new skin.
Private Sub ceMenuBar_MenuClick(ByVal Item As MenuBarLib.Item)
' Change the skin.
strCurrentSkin = Item.Caption
picSkin.Picture = App.Path & "/" & strCurrentSkin & ".bmp"
LoadCoordinates
DisplayAppointments
End Sub
Handling Button Taps
All that is left is handling user taps on a button. This is handled through the MouseDown event of the
Picture Box
control. The essence behind this routine is to take the location that the user tapped, and compare it against the coordinates for each of the buttons on a skin. If a match is found, the appointments for the selected day are displayed.
Private Sub picSkin_MouseDown(ByVal Button As Long, ByVal Shift As Long, _
ByVal x As Double, ByVal y As Double)
Dim intCounter As Integer
' Uncomment this line to help debug your button locations.
' MsgBox "X:" & x & " Y:" & y
' Check to see if the user tapped a button.
For intCounter = 1 To 7
If (x >= intButtons(intCounter, 1)) Then
If (y >= intButtons(intCounter, 2)) Then
If (x <= intButtons(intCounter, 3)) Then
If (y <= intButtons(intCounter, 4)) Then
datCurrent = datWeek(intCounter)
DisplayAppointments
End If
End If
End If
End If
Next intCounter
End Sub
Summary of Skinning Your Application
That's it, everything that you need to skin-enable your eMbedded Visual Basic applications. The process of creating the skins and the configuration files take a bit of work, but the result is, well, for lack of a better word, just plain cool. Remember, if you are going to have other controls as part of your interface, you have to set the
ZOrder
property so that they sit on top of the
Picture Box
control.
Back on the Road
That's it for this month. I'm going to go stare out my window at the ocean. However, from several thousand miles away, I'll have a hard time making out details. Until next month, I'm back on the road.
