Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI

Transcription

1 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI Objectives Prerequisites After completing this lab, you will be able to: Replace the Windows CE shell with a custom HTML based shell Clone a feature from the PUBLIC folder Before working on this lab, you must have: Understanding of Windows CE components and modules Understanding of basic Windows CE build process Estimated time to complete this lab: 60 minutes

2 2 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI Lab Setup To complete this lab, you must have: A development workstation running Windows XP or Windows 2000 Platform Builder 5.0 installed

3 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 3 Exercise 1 Create MyIA Platform In this exercise you will use the New Platform Wizard to create a new platform to be used in subsequent exercises. Create a new platform Workspace 1. On the development workstation, open the Platform Builder application. On Start Menu (press Windows key or click Start on the Taskbar), select All Programs, then select Microsoft Windows CE 5.0, and then select Platform Builder. (there may also be a shortcut on the desktop) Platform Builder On the Platform Builder File menu, click New Platform to launch the New Platform Wizard:

4 4 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 3. Click Next. New Platform Wizard will prompt you for the name and location of the new Workspace being created. Enter the name of MyIA and click Next. 4. New Platform Wizard will prompt you for your platform BSP from the list of available BSPs.

5 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 5 5. Select EMULATOR:X86 and click Next. 6. New Platform Wizard will prompt you to select your design template from the available list of Design Templates: 7. Select Internet Appliance and click Finish. 8. Click Finish to confirm Step On the toolbar, select Emulator: x86_debug.

6 6 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 10. Build the Image by selecting Build OS and then Sysgen, or by clicking the Sysgen button on the toolbar. This may take up to 20 minutes to complete. 11. While the OS image is building, configure the connectivity options by selecting Target and then Connectivity Options from the menu. 12. Select Add Device, enter the New Target Device Name as My IA Emulator, and click Add. 13. In the Target Device Connectivity Options dialog select Emulator for both Download and Transport. 14. Click on the Download Settings button, and setup the screen size to 640x Click OK to confirm the changes, and then Apply in the Target Device Connectivity Options dialog. 16. Close the Target Device Connectivity Options dialog. 17. Wait for build to complete. 18. Once the build has finished, select Target and then Attach Device to download the image to the emulator. You should see the following:

7 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 7

8 8 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI Exercise 2 Clone IESIMPLE In this exercise you will, clone the IESIMPLE sample application and add it to the MyIA platform. Note This exercise manually clones the IESIMPLE sample from the public folder. CE 5.0 has a cloning feature that allows items that can be added to the OS design to be cloned. Unfortunately IESIMPLE cannot be added to the OS design, so we must do the clone manually. Clone IESIMPLE 1. Disconnect Platform Builder from the Emulator by selecting Target and then Detach Device from the menu. 2. Create an empty project by selecting File and then New Project or File (CTRL+SHIFT+N) from the menu. 3. The New Project or File dialog will prompt you for the type and name of the new project. Select WCE Application. Enter the Project Name as IESHELL. Click OK. 4. Enter IESHELL for the Feature name. Fill in the other field or not as you see fit, and click Next.

9 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 9 5. Select An empty project and click Finish. 6. Using File Explorer, copy the.cpp,.h and.rc files in WINCE500\PUBLIC\IE\OAK\IESIMPLE to the newly created project directory - WINCE500\PBWorkspaces\MyIA\IESHELL. 7. Rename iesimple.rc to ieshell.rc in the new IESHELL directory. 8. Add the newly copied files to the IESHELL project. In Platform Builder select the File View and expand the Projects Branch.

10 10 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI Right click on Source Files branch and select Add Files Add mainwnd.cpp. Right click on the Include Files branch and select Add Files Add mainwnd.h and resource.h. Right click on the Resource Files branch and select Add Files Add ieshell.rc. 9. Open the SOURCES editor by either: Selecting IESHELL, followed by the Project and then Settings menu item, or Right clicking on IESHELL and selecting Settings from the pop-up menu.

11 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI Click on the C/C++ Tab and scroll down to the Include Directories item. 11. Enter (as one line): $(_WINCEROOT)\PUBLIC\IE\SDK\INC; $(_WINCEROOT)\PUBLIC\COMMON\OAK\INC; 12. Click OK. 13. The SOURCES file can also be edited directly as text. Right-click IESHELL and select Open, or Select IESHELL and use the Project and then Open item from the main menu.

12 12 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 14. Scroll to the end of the file and verify that the INCLUDES section has been added. 15. Add in the extra TARGETLIBS. TARGETTYPE=PROGRAM TARGETLIBS= \ $(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\coredll.lib \ $(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\wininet.lib \ $(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\commctrl.lib \ $(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\uuid.lib \ $(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\ole32.lib \ $(_PROJECTROOT)\cesysgen\sdk\lib\$(_CPUINDPATH)\oleaut32.lib \ POSTLINK_PASS_CMD=postlink.bat PRELINK_PASS_CMD=prelink.bat Note We determined what target libs were required by examining WINCE500\PUBLIC\IE\CESYSGEN\makefile. Search for iesimple and you will see that it is built using $(OLELIBS), $(WININETLIB) and $(CCLIB). Further searching of the file for these macros reveals the underlying lib names required. 16. Save the changes by selecting File and then Save from the main menu. 17. Select Build Project and then Build Current Project and verify that it builds with no errors. 18. Rebuild the OS image (Build OS and then Build and Sysgen Current BSP). 19. Download the image (Target and then Attach Device).

13 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI On the Emulator, click the Start Menu, select Run, enter ieshell and click OK. 21. The IEShell application should start. If the lab PC is connected to the internet and configured correctly, you should see the msn.com home page.

14 14 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI Exercise 3 Replace Explorer.exe with IESHELL.exe In this exercise you will, replace the current shell with the IESHELL application created in the previous exercise. Add a custom UI to IESHELL and replace Explorer as the default Shell 1. With the Emulator still connected to Platform Builder, start the Remote Registry Editor tool (Tools and then Remote Registry Editor). 2. Select Windows CE Default Platform Default Device to connect to the Emulator. 3. Navigate to Default Device, HKEY_LOCAL_MACHINE, Init. 4. The current Windows CE shell is explorer.exe. Verify that it has the Launch value of Close the Remote Registry Editor and disconnect Platform Builder from the Emulator (Select Target and then select Detach Device). 6. Create a new folder in the MyIA workspace (WINCEROOT\PBWorkspaces\MyIA\IESHELL\ShellFiles) and copy the contents of the ShellFiles folder from the Student CD to it. 7. Replace IESHELL.reg (this should be empty) with the version from ShellFiles. This includes a Init\Launch50 value which will override the default explorer.exe entry in common.reg with IESHELL.exe when the image is built. 8. Select the FileView, expand the Sources File branch, and double click mainwnd.cpp to open the file for editing. 9. Add the following code at line 171 to handle the SignalStarted() call. Once this has been added, the code directly following the else should be the existing code, which calls HandleNewWindow2.

15 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 15 // allow launching with command line arg // for development purposes. When loaded // from the init key initsignal will be non zero int initsignal = _wtol(lpcmdline); if(initsignal!=0) { SignalStarted(initSignal); if(failed(handlenewwindow2(_t(""), NULL))) { goto Cleanup; } } else 10. The only thing left to do is to ensure the html and associated graphics files that make up our new shell are included in the image. This is specified in the IESHELL.bib file. Expand the Parameter files branch in the FileView. 11. Open IESHELL.bib. Notice that it already includes an entry for IESHELL.exe. 12. Add the following underneath the IESHELL.exe entry. The code is in the IESHELL.bib file in the ShellFiles folder. FILES BKG.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\BKG.jpg NK U Button0.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button0.jpg NK U Button1.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button1.jpg NK U Button2.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button2.jpg NK U Button3.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button3.jpg NK U Button4.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button4.jpg NK U Button5.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button5.jpg NK U Button6.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button6.jpg NK U Button7.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button7.jpg NK U Button8.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button8.jpg NK U Button9.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Button9.jpg NK U ButtonPOUND.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\ButtonPOUND.jpg NK U ButtonSTAR.jpg $(PBWORKSPACEROOT)\IESHELL\ShellFiles\ButtonSTAR.jpg NK U default.htm $(PBWORKSPACEROOT)\IESHELL\ShellFiles\default.htm NK U homelogo.gif $(PBWORKSPACEROOT)\IESHELL\ShellFiles\homelogo.gif NK U Shell.htm $(PBWORKSPACEROOT)\IESHELL\ShellFiles\Shell.htm NK U 13. Select File and then select Save All to save all of the changes we have made. 14. Select Platform and then select Settings from the main menu and go to the Environment tab. 15. Click New and enter IMGIESHELL with a value of 1.

16 16 Lab 4-1: Replacing the Shell with a Custom Full Screen Browser Based UI 16. Click OK, and OK again to close the Platform Settings dialog. 17. Right-click IESHELL and select Build Current Project. 18. Select Build OS, then select Build and Sysgen Current BSP. 19. Once this is complete, download the new image to the Emulator using Target and Attach Device. 20. You should see the new shell in all its glory!