要完成本文练习内容,您需要:
• |
Microsoft eMbedded Visual C++ 4.0 Service Pack 3 |
• |
Pocket PC 软件开发工具包 (SDK) |
• |
可用于 Windows Mobile 2003 Second Edition 的开发人员资源 |
• |
Pocket PC 的 Windows Mobile 2003 Second Edition 仿真程序映像 |
注要使该练习能够正确进行,必须按顺序安装这些应用程序。如果您已在计算机上安装了这些应用程序,则需要卸载它们,然后按该顺序重新安装。有关详细信息,请参见本文中的附录 A。
简介
该自定步调的练习演示了如何将现有应用程序转换成能够识别横向和屏幕分辨率的应用程序。Crossword 示例 — 一个包含许多特征(代表实际应用程序)的字谜游戏,包括所有者描述的控件和屏幕外内存缓冲区 — 该 Crossword 示例包含在 Program FilesDeveloper Resources for Windows Mobile 2003 Second EditionSamplesPocket PCWin32Crossword 文件夹中。为了防止无关的详细信息导致代码混乱,Crossword 示例的许多功能并未实现。该字谜本身是虚构的,没有答案。
第一部分:修复识别方向的问题
这部分练习的目标为,使 Crossword 示例能够识别横向和纵向模式间的方向变化。默认情况下,示例文件位于 Program FilesDeveloper Resources for Windows Mobile 2003 Second EditionSamplesPocket PCWin32Crossword 文件夹。有关对横向模式进行编码的详细信息,请参阅 Developing Screen Orientation-Aware Applications。
在这部分练习中,您将执行以下任务:
• |
使用 Pocket PC 的 Windows Mobile 2003 Second Edition 仿真程序映像打开 Crossword 示例 |
• |
调整背景、文本框区域、提示区域及工具命令对话框 |
在这部分练习中,有些图是缩略图。您可以单击缩略图以查看大图像。
使用 Pocket PC 的 Windows Mobile 2003 Second Edition 仿真程序映像打开 Crossword 示例
在该任务中,您将打开并运行 Crossword 示例,以便了解项目,并了解移植您自己的应用程序时可能遇到的问题类型。
要使用 Pocket PC 的 Windows Mobile 2003 Second Edition 仿真程序映像,需要配置平台管理器 (Platform Manager)
1. |
启动 Microsoft eMbedded Visual C++ 4.0 版本。 |
2. |
在 Tools 菜单上,单击 Configure Platform Manager。 |
3. |
展开 Pocket PC 2003,然后单击 Add Device。 |
4. |
键入 Pocket PC 2003 SE Emulator 作为新设备的名称。 |
5. |
单击 Properties。 |
6. |
将 Transport 更改为 TCP/IP Transport for Windows CE。 |
7. |
确保 Startup Server 为 Emulator Startup Server。 |
8. |
然后转到 Emulator Startup Server,单击 Configure。 |
9. |
在 Image 列表中,选择 WWE PPC 2003 SE。 |
10. |
在每个对话框上单击 OK,关闭所有三个对话框。 |
11. |
从 BaseSample 文件夹打开工作区 CrosswordSample.vcw。 |
12. |
在 Windows CE Configuration 工具栏上,选择 Win32 (WCE emulator) Debug 作为活动配置,并选择 Pocket PC 2003 SE Emulator 作为默认设备。 |
在配置完平台管理器以使用 Pocket PC 的 Windows Mobile 2003 Second Edition 仿真程序映像以后,您需要运行 Crossword 示例。
运行 Crossword 示例
1. |
按 F5 键运行该示例。如果出现任何 Find Local Modules 对话框,单击 Cancel。 |
2. |
细读源代码,以便了解该示例是如何实现的。 |
3. |
在仿真程序中,按 F2 键以观察它是如何处理纵向/横向这两个方向的变化的。 |
4. |
请注意以下问题,如下图所示。 |
![200512203346227.gif](http://jcszjswkzhou.itpub.net/html/UploadPic/2005-12/200512203346227.gif)
• |
背景在屏幕的右侧被剪切。 |
• |
应该扩大文本框区域以填充屏幕的长度。 |
• |
未显示提示区域。 |
• |
Tools 命令对话框被剪切,并且该对话框需要滚动条。 |
调整背景、文本框区域、提示区域及工具命令对话框
在该任务中,您将修复在前一任务观察到的问题。
首先,背景图像 (Background1.bmp) 的大小只有 240 _ 320 像素,您需要将它替换为位于 LandscapeAware 文件夹中的 320 _ 320 版本的图像。
扩展背景
1. |
在 LandscapeAware 文件夹中,复制 Background1.bmp。 |
2. |
将 Background1.bmp 粘贴到 CrosswordBaseSample 文件夹。 |
3. |
在 OnPaint 处理程序中,将现有的 BitBlt 语句替换为以下代码。 |
4. |
BitBlt(hDC, 0, 0, 320, 320, hMemDC, 0, 0, SRCCOPY); |
其次,您需要扩大文本框区域以填充屏幕的长度。当屏幕方向从纵向改为横向时,您会接收到 WM_SIZE 消息。
扩大文本框区域
• |
在 CrosswordSample.cpp 中,将下面的 WM_SIZE 处理程序添加到 WndProc。 case WM_SIZE: { HWND hEditBox = GetDlgItem(hWnd, IDC_MAIN_EDIT_BOX); HWND hEnterButton = GetDlgItem(hWnd, IDC_MAIN_ENTER_BUTTON); INT nWidth = LOWORD(lParam); MoveWindow(hEditBox, 8, 4, nWidth - 70, 20, TRUE); MoveWindow(hEnterButton, nWidth - 57, 4, 50, 20, TRUE); } break; |
第三,需要将提示区域移到屏幕的一侧。该移动需要您添加一个函数,用它来检测是否应该以宽模式 (wide mode) 显示 Crossword 示例。只要是少于 320 垂直像素,您就可以使应用程序使用宽模式。
将提示区域移到屏幕的一侧
1. |
添加以下函数。 BOOL InWideMode() { int height = GetSystemMetrics(SM_CYSCREEN); return (height < 320) ? TRUE : FALSE; } |
2. |
在 OnPaint 中(绘制提示区域的位置),删除声明 RECT r 的行,然后将其替换为以下代码行。 RECT rTallMode = { 25, 200, 230, 245 }; RECT rWideMode = { 240, 43, 311, 185 }; RECT& r = InWideMode() ? rWideMode : rTallMode; |
3. |
用以下代码替换 OnLButtonDown 中现有的 RECT.r 声明,因为单击鼠标左键时提示区域是无效的。 RECT rTallMode = { 0, 189, 240, 320 }; RECT rWideMode = { 240, 26, 320, 240 }; InvalidateRect(hWnd, InWideMode() ? &rWideMode : &rTallMode, FALSE); |
第四,您需要移动箭头(该箭头表明线索是向下的还是横向的)。
移动向下/横向箭头
• |
在 OnPaint 中,添加以下代码。 rgArrow[i].x += (InWideMode() ? 280 : 5); rgArrow[i].y += (InWideMode() ? 26 : 200); |
以下三个程序举例说明了如何完整地显示 Tools 命令对话框。
重新布局对话框
• |
向 LandscapeAware 文件夹中的项目添加 UIHelper.CPP、UIHelper.H 和 shguim.h。(UIHelper.CPP 和 UIHelper.H 提供您将要使用的 helper 函数 RelayoutDialog。) |
您需要为设备创建对话框模板,使其用于宽模式。
创建用于宽模式的对话框模板
1. |
创建一个新的对话框。(在 Insert 菜单上,单击 Resource,选择 Resource type 列表中的 Dialog,然后单击 New)。 |
2. |
删除默认的 OK 和 Cancel 按钮。 |
3. |
右键单击对话框,然后单击 Properties。 |
4. |
在 ID 框中,键入 IDD_TOOLS_OPTIONS_1_WIDE。 |
5. |
通过拖动右下角至适当大小,将对话框的大小调整到 187 _ 91 DLU。(这些尺寸大概就是横向模式中对话框的大小。) |
6. |
在右侧“Resource”窗格中,双击 IDD_TOOLS_OPTIONS_1。 |
7. |
按 CTRL+A,选择所有项,然后按 CTRL+C,将这些项复制到剪贴板。 |
8. |
打开 IDD_TOOLS_OPTIONS_1_WIDE,然后按 CTRL+V,粘贴这些项。 |
9. |
调整这些项的大小并重新排列,以使其适合新的对话框,如下图所示。 ![]() 您可以发现,通过暂时放大对话框的大小,能够更轻松地重新排列这些项,随意移动这些项以后再将对话框的大小调整到 187 _ 91 DLU。 |
10. |
对于 IDD_TOOLS_OPTIONS_1_WIDE,将 ID 为 IDC_STATIC 的三个对话框控件重命名为:IDC_STATIC_1、IDC_STATIC_2 和 IDC_STATIC_3。所有这些 ID 必须都是唯一的,这样 RelayoutDialog 才能识别纵向模式的哪些控件对应于横向模式的哪些控件。 |
11. |
重复 IDD_TOOLS_OPTIONS_1 的第 10 步,确保为每个控件提供与其对应的横向控件相同的 ID。 |
12. |
重复 IDD_TOOLS_OPTIONS_2 的第 1 到 11 步,确保将 IDD_TOOLS_OPTIONS_2 和 IDD_TOOLS_OPTIONS_2_WIDE 的 IDC_STATIC 控件重命名为 IDC_STATIC_1。 |
将 WM_SIZE 处理程序添加到对话框
1. |
在 CrosswordSample.cpp、ToolsOptions1.cpp 和 ToolsOptions2.cpp 中,添加以下语句。 #include UIHelper.H In ToolsOptions1.cpp, add the following WM_SIZE handler: case WM_SIZE: { RelayoutDialog(g_hInst, hDlg, InWideMode() ? MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_1_WIDE) : MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_1)); } return TRUE; |
2. |
在 ToolsOptions2.cpp 中,添加以下 WM_SIZE 处理程序。 case WM_SIZE: { RelayoutDialog(g_hInst, hDlg, InWideMode() ? MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_2_WIDE) : MAKEINTRESOURCE(IDD_TOOLS_OPTIONS_2)); } return TRUE; |
3. |
在 ToolsAbout.cpp 中,添加以下 WM_SIZE 处理程序(在这种情况下,您可以手动处理 About 对话框模板,而无需使用 RelayoutDialog)。 case WM_SIZE: { INT nWidth = LOWORD(lParam); INT nHeight = HIWORD(lParam); HWND hWnd = GetDlgItem(hDlg, IDC_STATIC_1); RECT rWnd; RECT rDlg; GetWindowRect(hWnd, &rWnd); GetWindowRect(hDlg, &rDlg); OffsetRect(&rWnd, -rDlg.left, -rDlg.top); MoveWindow(hWnd, rWnd.left, rWnd.top, nWidth - rWnd.left - 8, nHeight - rWnd.top - 8, TRUE); } return TRUE; |
4. |
在 CrosswordSample.h 中,添加 Function Prototypes 部分中的下列行。 BOOL InWideMode(); |
5. |
验证整个应用程序是否处理了横向/纵向这两个方向的变化。 |
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10294527/viewspace-126780/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/10294527/viewspace-126780/