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">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
15
1500
180
' Button 2.
1550
15
1850
180
' Button 3.
1900
15
2200
180
' Button 4.
2250
15
2550
180
' Button 5.
2600
15
2900
180
' Button 6
2950
15
3250
180
' Button 7
3300
15
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.
  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.