|
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
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 lin [1] [2] 下一页
[Delphi程序]delphi create Http link on your form [VB.NET程序]Store Images in Your Database
[VB.NET程序]Create Your Own Visual Basic Add-Ins
| 
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
