Mike Hall
Microsoft Corporation
Steve Maillet
Entelechy Consulting
April 4, 2002
// interface翻译成界面，部分时候翻译成接口
（没有全文翻译，只是摘记了一些有用的信息，和自己的一些理解）
WinCE 的UI是skinnable。
Recently, while preparing for a talk at an Embedded event, a bullet point in my presentation seemed to beg for elaboration: the skinnable UI for Microsoft® Windows® CE .NET. I had talked to this point at a number of conferences, but had spent little time playing with the code to produce a customized UI. Since I had a few moments in the speaker lounge (and also an article to write), it seemed a good time to take a look at how the UI can be customized for Windows CE. On my wish list: customized screen colors, Windows controls that don't look like they belong to Windows, an OK/Close button in the non-client area that looks like a smiley face, a replacement shell (perhaps based on Microsoft® Internet Explorer 5.5 browser), and a shiny bike with basket and bell for Christmas...
Okay, so on with the article; let's see what's lurking beneath the hood of the Windows CE UI.
Windows CE .NET 提供为你的嵌入式设计定制用户界面的能力。如 POS terminals, ATM machines, or other 'fixed function' devices。也可以用Internet 浏览器和应用程序.以前版本的WINCE也可以定制用户界面，但带有明显的WINDOWS外观和感觉。现在WINCE 。NET改变了这个。
这里有一些选择，在为一个Windows CE .NET 设备定制界面时：
· 使用 Microsoft Internet Explorer 作为设备的shell. 这是一个非常弹性的选择。使用HTML（和DHTML）编制高度定制化的用户界面是快速的，简单的和弹性的。可以充分利用位图，动画，动态。
· 创建一个独立的应用程序来取代标准shell。在概念上，这个和使用IE是类似的。是一个很好的选择在一个功能单一的设备上，如点销售终端（point-of-sale terminal）上。 It's possible to change the appearance of controls within an application by subclassing the control, which is achieved through GetWindowLong( ) and SetWindowLong( ) API's. (Feel free to check out any of the number of articles on MSDN that discuss subclassing.)
· 在操作系统里改变某些用户界面组件的外观。可以通过改变位图和代码来实现。
Microsoft在Windows CE .NET中提供了2种皮肤: Windows 95 外观和Windows XP 外观. 这些分别为通用控件，windows控件，和非客户区提供windows外观。“皮肤”文件 在下面文件夹处：
WINCE420PUBLICCOMMONOAKDRIVERSSKINNABLEUI.
在skinnableui 文件夹下提供的代码可以改动（因为是在public树下），可以被你的设备所采用。
Take a look in the skinnableui folder. There are two sets of user interface components: GWE/COMMCTRL (Windows 95 appearance) and GWEXP/COMMCTRLXP (Windows XP).
Here's how we choose which of the 'skins' is applied to our device:
1. Build an operating system image using the default catalog options; this will give a Windows 95 appearance.
2. 从catalog里选择Windows XP skin。在 Core O/S/Display Based Devices/Shell and User Interface/User Interface/Customizable UI/Windows XP-like sample skin. 加这个组件到平台里，或者设置the SYSGEN_XPSKIN 环境变量.
How do these skins differ? Let's take a look at some of the UI differences. We can then take a look at how to further customize the Windows CE .NET user interface.
Figure 1. Windows 95 外观,使用标准皮肤。
Figure 2. Windows XP 外观, 使用XP-风格皮肤。
Let's now examine how we modify the Windows CE .NET user interface. This includes:
· Changing the user interface colors.
· Modifying user interface bitmaps.
· Modifying Windows CE .NET controls appearance.
· Modifying standard UI dialogs (for instance, Startupwhich can be used to show device configuration or password screen, Out of Memory, and Touch Screen Calibration).
· Using Internet Explorer as the shell of our device.
Changing the User Interface Colors
One of the quickest and simplest ways to modify the appearance of a device is to modify some or all of the user interface colors. This is achieved through the registry. Note that the default system colors are not visible in the devices registry. To set colors to something other than the default system colors, we need to override the color map in the registry. The easiest way to do this is to build an operating system image using Platform Builder, download the image to either the emulation environment or to a reference board, use the control panel to modify the color scheme to match the colors you require for your device, and then use the remote registry editor to take a snapshot of the updated colors from the registry—after all, who wants to spend time guessing RGB values? The color map can be found in the following registry location: HKEY_LOCAL_MACHINESYSTEMGWESysColor.
If we were to modify the system color map on a device (or emulator) and use Remote Registry Editor to extract a .REG file, here's how the extracted .REG file might look. Once we've extracted the registry information we can then add this to our Project.REG file and rebuild our platform to take advantage of the new color scheme.
[HKEY_LOCAL_MACHINESYSTEMGWE]
"SysColor"=hex:E0,E0,E0,00, 00,80,80,00, 80,80,FF,00, 80,80,80,00,
C0,C0,C0,00, FF,FF,FF,00, 00,00,00,00, 00,00,00,00,
00,00,00,00, FF,FF,00,00, C0,C0,C0,00, C0,C0,C0,00,
80,80,80,00, 00,00,FF,00, 00,00,FF,00, C0,C0,C0,00,
80,80,80,00, 80,80,80,00, 00,00,00,00, C0,C0,C0,00,
FF,FF,FF,00, 00,00,00,00, DF,DF,DF,00, 00,00,00,00,
FF,FF,E1,00
The .REG file contents directly map to the following colors on the device (note that each color is represented by 4 hex digits).
COLOR_SCROLLBAR
COLOR_BACKGROUND
COLOR_ACTIVECAPTION
COLOR_INACTIVECAPTION
COLOR_MENU
COLOR_WINDOW
COLOR_WINDOWFRAME
COLOR_MENUTEXT
COLOR_WINDOWTEXT
COLOR_CAPTIONTEXT
COLOR_ACTIVEBORDER
COLOR_INACTIVEBORDER
COLOR_APPWORKSPACE
COLOR_HIGHLIGHT
COLOR_HIGHLIGHTTEXT
COLOR_BTNFACE
COLOR_BTNSHADOW
COLOR_GRAYTEXT
COLOR_BTNTEXT
COLOR_INACTIVECAPTIONTEXT
COLOR_BTNHIGHLIGHT
COLOR_3DDKSHADOW
COLOR_3DLIGHT
COLOR_INFOTEXT
COLOR_INFOBK
COLOR_STATIC
COLOR_STATICTEXT
Note that COLOR_BTNFACE is used throughout the Windows XP-like user interface as the color for caption bars and the like.
Modifying User Interface Bitmaps
Another way to get a UI facelift is to alter some of the standard UI bitmaps.The bitmaps contain the toolbar button images used in standard Windows CE .NET applications, such as Microsoft® Windows Explorer. The toolbar bitmaps can be found in the following folder: WINCE400publiccommonOAKFILES.
· Stdsm.bmp: Windows 95-like toolbar bitmaps.
· Stdsmxp.bmp: Windows XP-like toolbar bitmaps.
· Viewsm.bmp: Windows 95 'file' toolbar bitmaps.
· Viewsmxp.bmp: Windows XP 'file' toolbar bitmaps.
So how about the 'Close' button on an applications caption bar? Can we also modify how this looks? Yes, absolutely. Let's look at how to change the Windows XP look.
This isn't as simple as it first seems. There are two parts to the Close button. The first is the background bitmap, which can be found in C:wince400publiccommonOAKDRIVERSSKINNABLEUIGWEXPGCACHEVIEWXPRES—the file is Closebutton.bmp. This contains the button background in up, down, selected, and disabled form. So how does the white "X" get added to the button?
Right, lets roll up them sleeves and dig into some of the skinnableui source code… Perhaps the first stop on the tour of the code is the initialization function for the XP skin code. The code is wrapped into a class called CacheView_t. The initialization function is called Init( ). The CacheView_t::Init( ) function is located in SKINNABLEUIGWEXPGCACHEVIEWXPgcacheviewxp.cpp. Let's take a look at some of the code. This is where the GDI object cache is setup.
// close button
HBITMAP hbmCloseButton = NULL;
hbmCloseButton = LoadBitmapW_I (hInstance,
MAKEINTRESOURCE(GWES_CLOSEBUTTON));
ASSERT (hbmCloseButton);
g_cacheview.hdcCloseButton = Gdi::CreateCompatibleDC_I(NULL);
ASSERT(g_cacheview.hdcCloseButton);
Gdi::SelectObject_I(g_cacheview.hdcCloseButton,
(HGDIOBJ)hbmCloseButton);
Here's what's happening: We're loading a bitmap resource "GWES_CLOSEBUTTON" and selecting this into a cached device context g_cacheview.hdcCloseButton, so that this is ready to use later. GWES_CLOSEBUTTON is defined in gcacheviewxp.res as follows:
GWES_CLOSEBUTTON BITMAP resCloseButton.bmp
The bitmap is getting loaded from SKINABLEUIGWEXPGCACHEVIEWXPRES.
So, we've loaded the background bitmap. We now need to figure out where g_cacheview.hdcCloseButton is getting used. Since the caption bar is part of the non-client area, it's a safe bet that we will find the code we're looking for in the following folder: SKINNABLEUIGWEXPNCLIENTVIEWXP. Let's take a look at nclientviewxp.cpp.
Below is part of the DrawClose( ) function. We can clearly see the call to DrawCaptionButton( ) passing in the cached hdcCloseButton. (I've skipped some lines that aren't interesting for this part of the article.) We can then see the calls to SelectObject_I(hdc, hNewBrush), which selects a white brush into the device context. We then call DrawDiagonalLine( ) twice to place the cross onto the close button. This can, of course, be easily replaced with whatever background bitmap and foreground text/figure you want.
DrawCaptionButton(hdc, lprc, wControlState, g_cacheview.hdcCloseButton);
// … skip some lines…
hOldBrush = (HBRUSH)Gdi::SelectObject_I(hdc, hNewBrush);
DrawDiagonalLine(hdc, lprc, 1, 2, 0);
DrawDiagonalLine(hdc, lprc, -1, 2, 0);
Modifying the Appearance of Windows CE .NET Controls
Ok, so we've looked at changing colors and replacing some of the standard bitmaps. These are quick and effective ways of changing the appearance of a device. Now comes the interesting bit: altering the drawing code for some of the standard windows and controls. Here's a list of the items within Windows CE .NET that support skinning:
Window Controls
· Scroll bar
· Button—radio, check, push
· Combo box (edit and list)
· List box
· Static controls
· Group box
Non-Client Area
· Caption bar/window border
Common Controls
· Command band/command bar
· Header control
· Trackbar (slider)
· Progress bar
Skinning of the above items requires modification to source code (and in some cases, modifying bitmaps).
We have two options for creating a new skin for Windows CE .NET. The first option is to make a copy of the contents of either C:wince400publiccommonOAKDRIVERSSKINNABLEUI (GWE & COMMCTRL) or (GWEXP & COMMCTRLXP), and create a new skin project folder, perhaps called MYGWE and MYCOMMCTRL. We will also need to modify the DIRS file in C:wince400publiccommonOAKDRIVERSSKINNABLEUI to include my new project files into the build. Then we need to replace the standard operating system build components with my new components. This is achieved through setting the SYSGEN_REPLACESKIN=1 environment variable (using Platform/Settings/Environment).
Lets examine the use of these environment variables. Here's a section of cesysgen.bat (part of the build system). We can see the first line checks for SYSGEN_REPLACESKIN. If this is set, then we skip including the standard Windows 95 and Windows XP UI components. If this is not set, then we look for SYSGEN_XPSKIN being set, and if it is, then we include the Windows XP skin components. If SYSGEN_XPSKIN is not set, then we include the Windows 95 skin components. Simple.
REM //XP or 9X UI
if "%SYSGEN_REPLACESKIN%"=="1" goto ReplaceSkin
if "%SYSGEN_XPSKIN%"=="1"
set GWE4_COMPONENTS=%GWE4_COMPONENTS%
sbcmnviewxp nclientviewxp gcacheviewxp btnctlviewxp
stcctlviewxp cmbctlviewxp lbctlviewxp
if not "%SYSGEN_XPSKIN%"=="1"
set GWE4_COMPONENTS=%GWE4_COMPONENTS%
sbcmnview nclientview gcacheview btnctlview
stcctlview cmbctlview lbctlview
:ReplaceSkin
To replace the default component with the component you customize, you must modify your cesysgen.bat file, and add a line similar to the following, which lists the skinning replacement libraries:
set GWE4_COMPONENTS=%GWE4_COMPONENTS%
sbcmnview nclientview gcacheview btnctlview
stcctlview cmbctlview lbctlview
The cesysgen.bat file can be found in the following folder: WINCE400public%PROJECT_NAME%WINCE400%TARGETNAME%oakMISC. For an emulator project I'm working on, the cesysgen.bat file would be found here: WINCE400publicUIDemoWINCE400EmulatoroakMISC.
We now understand how to remove the existing UI skin libraries (SYSGEN_REPLACESKIN) and how to add our own libraries to the build (cesysgen.bat). Let's now take a look at some of the Windows XP skin source code.
In this example, we could easily replace the 'button' focus rectangle drawing code with a solid rectangle. The Windows XP 'button' drawing code can be found in the following folder: WINCE400publiccommonOAKDRIVERSSKINNABLEUIGWEXPBTNCTLVIEWXP. The file we're interested in is buttonviewxp.cpp. Search for DrawFocusRect_I. This is in the ButtonView_t::DrawText( ) function. We could replace the DrawFocusRect_I function call with a call to Gdi::Rectangle_I( ) to get a solid 'focus' rectangle. I'm sure you can think of many other ways to change the appearance of some of the Windows CE .NET user interface controls.
And then we're back to bitmaps—for example, changing the look of a scrollbar is as simple as using the Windows Paint program. The following folder contains the Scrollbar bitmaps: WINCE400publiccommonoakdriversskinnableuigwexpgcacheviewxpres. Take a look at ScrollThumb.bmp and ScrollShaft.bmp; these are the bitmaps for vertical and horizontal 'thumbs,' and the horizontal and vertical 'shaft.' Simply edit the bitmaps, rebuild the operating system, and you have a whole new look.
Modifying Standard UI Dialogs (Startup, Out of Memory, Touch Screen Calibration)
Windows CE .NET contains a number of standard user interface components that can be OEM customized. These include the Startup UI, the Out-of-Memory UI, and the Touch-Screen-Calibration UI.
We may have specific setup/configuration options for our device that can be handled through the Startup UI (this is typically used to prompt for a password, and display user information). The Out-of-Memory UI component can be modified to prompt a user in a specific manner, or to work with headless devices, perhaps creating a log file or sending a message across the network to alert a system administrator. (Having a UI component isn't much use on headless devices!) Touch Screen Calibration is self-explanatory.
So how do we replace/modify these components?
This requires some modification of cesysgen.bat (see Modifying the Appearance of Windows CE .NET Controls above for the location of this file), and the setting of environment variables. Here's how:
First we need to remove the ComponentName (oomui, startui, calibrui) from cesysgen.bat for each component being replaced. Below is an extract from cesysgen.bat. We can see the oomui component highlighted; remove this from cesysgen (unless you are modifying the existing code).
set GWE4_COMPONENTS=%GWE4_COMPONENTS% startup oomui oom startui cmbctl cdlctl edctl imgctl lbctl scbctl
Use GWES_REPLACE to replace components with .res files, and GWES_REPLACECOMPONENT to replace a component without a .res file.
We then need to set the environment variable GWES_REPLACE with the name of the module we are inserting into the build process to replace (in this case) oomui. The GWES_REPLACE environment variable can be set using Platform/Settings/Environment in the Platform Builder IDE.
We could, for example set GWES_REPLACE=myoomui—I know you are asking how the build system knows where to get this file. That's simple. The build system will pick up the .lib file from the following folder: C:WINCE400publiccommonOAKLIB%PROCESSORDEBUG/RETAIL.
That's all there is to it. In this month's column, we've taken a look at how to change the user interface colors using the registry, modify user interface bitmaps for common dialogs, and modify Windows CE .NET controls appearance. I'm sure the creative side of you is just itching to get started with building customized Windows CE user interface components. We'd certainly be interested in seeing any samples you produce. As always, let us know if you'd be interested in getting more information in this area, or have suggestions for additional articles.
But wait, there's more… Next month we will take a look at how to replace the standard shell and create a flexible user interface using the Internet Explorer 5.5 browser. This is an interesting shell solution, since we can quickly build a device user interface using HTML, DHTML, and Microsoft ActiveX® Controls.
Get Embedded
Mike Hall is a Product Manager in the Microsoft Embedded and Appliance Platform Group (EAPG). Mike has been working with Windows CE since 1996—in developer support, Embedded System Engineering, and the Embedded product group. When not at the office, Mike can be found with his family, working on Skunk projects, or riding a Honda ST1100.
Steve Maillet is the Founder and Senior Consultant for Entelechy Consulting. Steve has provided training and has developed Windows CE solutions for clients since 1997, when CE was first introduced. Steve is a frequent contributor to the Microsoft Windows CE development newsgroups. When he's not at his computer burning up the keys, Steve can be found jumping out of airplanes at the nearest drop zone.
APP下载
登录
热门文章
更多
现场总线系统的功能安全评价
