如何调整应用程序的外观

笃，笃。

　　谁呀？

　　生气的开发人员。

　　哪个生气的开发人员？

　　上个月没有去冲浪的那个生气的开发人员。

　　我知道，那并不好笑。相信我，我知道。我的冲浪假期和“只要您在洛杉矶，就可以使用 PDC”的口头约定并没有兑现，我只想说我的心情不太好。我的意思是说，我的要求并不高：给我一听冰凉的可乐、一条装满 Pocket PC 的子弹带和一个可靠的无线以太网连接，我就会非常高兴地去。错过了一次冲浪机会，对我来说有点儿难以接受。与您在加州的那种“只要我愿意，随时可以去冲浪”的情况不同，我们在密歇根州的这些冲浪运动员有两天能出海就会非常愉快。冲浪旅行是件需要认真对待的事儿。 不过，我相信能征服它。征服冲浪中的重重困难，可比编写 eMbedded Visual Basic? 应用程序有意思多了！上一专栏中我介绍了 Smart Device Extensions for Visual Studio? .NET，这个月我们回到老话题 eMbedded Visual Basic，讨论如何调整应用程序的外观。

　　将外观添加到应用程序中

　　外观，即应用程序的可更换的界面，正变得越来越受欢迎。本文的思想是使应用程序的用户不受限于单一的界面显示，而允许用户选择他们喜欢的界面，这样会给他们带来更多的快乐，使用户对您的软件更满意。

　　本文将演示一个简单的方法，通过该方法可以将外观添加到 eMbedded Visual Basic 应用程序中。

　　演示应用程序

　　Skin Demo 应用程序显示了一周中每天的任务，用户可以单击与一周中每天相对应的按钮来选择他们感兴趣的一天。在本示例中，我包含了两个预先创建的外观：一个基于高尔夫主题，另一个基于自然风光。两个外观的示例分别显示在下面的图 1 和图 2 中。

图 1：使用高尔夫球场外观查看星期三各项



图 2：使用自然风光查看相同的项

　　现在，我们来看看该应用程序的局限性。所显示的项是硬编码的，它与该应用程序运行的 Pocket PC 无关，您要完成的是同样的项目。在这个示例中，它们是我的项目，但是如果有人真的完成了这些项目的任何部分，请通知我，我可以从工作表中将它们划掉。

　　这里重点展示如何将外观集成到应用程序界面，而不是如何访问和显示 Pocket Outlook? 中的任务。我会在将来的专栏中讨论这个问题。

　　处理 eMbedded Visual Basic 的局限性

　　可以这样讲，eMbedded Visual Basic 开发就是处理局限性的练习。如果要将外观添加到应用程序中，有几个问题需要注意：

　　第一个问题，本来我想简单地将外观图像放到表单的 Picture 属性中，就象我处理 Visual Basic 应用程序一样，但问题是 eMbedded Visual Basic 表单并没有 Picture 属性。

　　第二个选择是使用 Image 控件控制外观，并调整 Image 控件的大小来适应表单的大小。这可用于显示外观效果；但是，Image 控件并不支持任何类型的单击事件，也就是说我永远也不能处理按钮。

　　第三个选择是 Picture Box 控件，它允许插入外观，也响应单击 - 看起来很完美。然而，只是接近完美。eMbedded Visual Basic Picture Box 控件与其相应的 Visual Basic 控件在处理上稍有不同：Visual Basic 的控件用作容器，也就是说，拖到 Picture Box 顶部的其他控件保留在 Picture Box 顶部；eMbedded Visual Basic 的控件并不这样处理，拖到 eMbedded Visual Basic Picture Box 顶部的控件显示在它后面。要修正这一点，需要设置每个控件的 ZOrder 属性，使它们显示在 Picture Box 的前面。

　　设计外观

　　结构问题解决了，我们可以将注意力转到目前的任务 - 实现外观上。我采用的方法涉及两个文件：外观图像和配置文件。外观图像是显示给用户的；配置文件定义了按钮在外观上的位置、显示文本的位置以及显示文本时使用的颜色。 下面是我使用的配置文件设计示例。您可以看出它并不复杂，并且我已经在文件中嵌入了注释，这种方法使文件易于处理和修改。

　　注意：按钮坐标定义了每个按钮的左上角和右下角。

' 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

　　单步调试应用程序

　　Skin Demo 应用程序启动 Form Load 事件过程时将处理一些预备项，如下所示。它通过配置菜单启动，接着调整 Picture Box 控件的大小来适应界面的大小，最后应用默认外观。您可能希望将应用程序的默认外观的名称存储在注册表中，而不是象我这里所做的，对其进行硬编码。接下来加载高尔夫球场外观的坐标，某些日期信息是硬编码的，并显示指定日期的内容。

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

　　配置菜单

　　Skin Demo 菜单的关键特性是它演示了如何根据显示在用户设备上的外观建立可变的菜单。这是通过使用 eMbedded Visual Basic File System 控件的 Dir 方法来完成的，此方法可用于查询指定目录的内容来获取文件列表。我使用此控件，查找任何与应用程序位于同一目录中并具有 .bmp 扩展名的文件。然后通过简单的字符串处理，除去文件扩展名并将外观名称插入菜单。

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

　　加载外观坐标

　　每个外观都有自己的一组坐标，如果选择了一个特定的外观，LoadCoordinates 例程将加载这些配置。

　　使用 eMbedded Visual Basic File 控件，将坐标文件的内容读入 Skin Demo。我先用此控件打开文件，然后执行一系列行输入，来加载所有的配置信息。

　　注意：在 LoadCoordinates 例程中，有几处我只是向变量 strJunk 读入了一行，并未对该行进一步处理。这在配置文件中有相应的注释。

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

　　显示给定日期的约会

　　我不想在 Skin Demo 应用程序的这个部分花费太多时间，因为它主要是显示硬编码的内容，但是仍有几个关键问题需要讨论。首先，Skin Demo 使用 Picture Box 控件的 DrawText 方法来显示单独的项。这样，我们可以准确控制内容在外观上的显示位置。其次，Picture Box 控件的 Cls 方法用于清除所有可能在添加新内容以前显示的内容。

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

　　更改外观

　　如果用户从菜单中选择新的外观，将使用下面的一小段代码实现新外观。外观名称作为参数传递到事件过程，这使得切换到新外观非常简单。

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

　　处理按钮单击

　　下面的部分介绍如何处理用户单击按钮，这是由 Picture Box 控件的 MouseDown 事件处理的。此例程的实质是获取用户的单击位置，并将它与外观上的每个按钮的坐标进行比较，如果发现匹配项，则显示选定日期的约会。

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

　　调整应用程序外观总结

　　以上就是调整 eMbedded Visual Basic 应用程序外观要做的所有操作。创建外观和配置文件的过程只需花费一点工作，但结果却 - 找不到更好的词儿来形容，只能说是酷极了。请记住，如果要向界面添加其他控件，必须设置 ZOrder 属性，这样才能使它们位于 Picture Box 控件的前面。

　　返回原路

　　这就是本月的话题。我要休息一下，去欣赏大海的风光了。然而，旅途遥远，我会花一番心思来深入思考细节问题。下个月再见吧，现在，我要动身了。

查看本文来源