Pocket PC Application Development Robert Turner Application Development

Pocket PC Application Development Robert Turner Application Development Consultant Microsoft UK

Agenda l e. Mbedded Visual Tools development Ø Ø l Pocket PC Specifics Ø Ø l Tools overview What’s new Intelligent client capabilities and UI design Browser capabilities Application Installation

Windows CE 3. 0 l l l Highly componentised OS OEM’s can pick and choose Two logo’ed configurations enable device consistency for the majority Ø Ø l Pocket PC Handheld PC 2000 Adoption of changes back into the OS

Embedded Visual Tools Development

Tools Landscape Choosing the correct tool e. VB LOB Apps UI Exploitive Apps Device Drivers/ Time Critical e. VC Platform Builder

Programming Models Embedded devices and applications Hardware Development Custom Hardware Custom Win. CE OS Configuration Subset/Superset: Win 32 APIs Device Specific Pocket. PC SDK Win 32 APIs Device Specific OEM SDK OS Development Application Development

Pocket PC App Platform Diagram Your App Goes Here VB MFC ATL HTML JScript XML XSL p. IE POOM ADO Mail API GAPI Rapier Shell APIs Win. Inet Win. CE 3. 0 (Cedar): Win 32, OLE, Winsock, etc

What’s New In Embedded Visual Tools ? l e. VC/e. VB are standalone, no longer VS add-ins Ø Ø l Separate from but co-exist with VS and VS SPs Remove support for Win 32 desktop development Customer Benefits Ø Ø Ø Greatly simplified setup, UI with embedded focus IDE tailored for platform-specific support through Windows CE SDKs Lower cost - no longer need VS installed

Documentation Changes

New Features In 3. 0 IDE - e. VC

Wizards - e. VC l 2 New Pocket PC Specific Wizards Ø Ø l WCE Pocket PC app WCE Pocket PC MFC app Add functionality specific to Pocket PC UI Ø Ø Check for previous instance Create Pocket PC menu bar SHCreate. Menu. Bar SHHandle. WMSetting. Change SHInit. Dialog in about dialog

Demo

What Is New In MFC For Pocket PC? - e. VC l Property sheets Ø l Dialog boxes Ø l Full Screen, no border Find and replace text dialog and toolbar Ø l Flat tabs, not 3 D CFind. Replace. Dialog Document list for browsing files Ø Ø Like standard pocket PC apps CCe. Doc. List

More API’s For Pocket PC - e. VC l Context menu Hold stylus down – Tap ‘n Hold Ø Automatic within MFC Ø l l l Borderless Windows Internet Explorer style re-Bars Custom Today Items

About e. VB l l l e. VB language is a subset of that used by the desktop version of Visual Basic Small, lightweight, and interpreted, Related to VBScript e. VB combines the robust power of Visual Basic with the compact portability and ease of use characteristic of VBScript

What’s New In e. VB 3. 0 l IDE Standalone toolset Ø Focus on Platform functionality Ø Limits features based on Platform Ø § Ø l Toolbox, Properties, Intellisense, … Integrated Debugger (ethernet-enabled) Runtime Pocket PC specific runtime Ø Access to Windows CE APIs through VB style Declare statement Ø

Intelligent Client Capabilities and UI Design

Wyvern v. Rapier

Key is Simplify l Remove complexity Flat controls & Page-based dialogs Ø Single tap Ø Redesign of control panels Ø Remove redundant menus, introduce tap & hold Ø Use colour sparingly Ø

UI Design Principles l · l l l l The form factor is critical, optimize for it Design for the 80% / 20% case rather than the 100% case More content, less app Reduce redundancy, and reduce effort Windows affinity, not wholesale copy Consistency with what users expect, not for its own sake Single click - convention only Ease up on the eyes Simple NOT simplistic

Redesigned UI App Name New Shell Nav bar on top (start button + title bar), command bar on bottom, system tray on home screen only New User Model Single tap, autosave everywhere, close cards/documents (no cancel) Flat look & feel Pages instead of cascading menus, flat buttons, fewer controls Feature consolidation Removed redundant menus/buttons, redesigned control panel Start Menu Client Area Menu Bar New App Menu SIP

Designing For Pocket PC l l l Flat interface Menu bar control Simple interaction Popup menus OK buttons Minimize data input

The Flat Look l Design Stuff Ø Ø l Works better on small screens w/range of resolutions incl. greyscale 3 D is so…last century Detail - e. VC Ø Ø Ø Mostly standard Win 32. Avoid WS_DLGFRAME and WS_EX_WINDOWEDGE CCM_SETVERSION with COMCTL 32_VERSION Others inherit for free (except Prop. Sheets)

Navigation Bar l Design Stuff Ø Ø Ø Start at 0, 0, prime real estate Title should only be app name, should not change Instantly conveys a sense of place OK button, closes dialogs & docs No cancel, just undo § Ø Read is often different from edit Tray objects only appear on Today

Navigation Bar - e. VC l Respecting space Ø Ø Ø Create. Windows at CW_USEDEFAULT, CW_USEDEFAULT origin, NOT at (0, 0) And/Or use SHSip. Info

Navigation Bar - e. VC si. cb. Size = sizeof(si); if( SHSip. Info(SPI_GETSIPINFO, 0, &si, 0) ) { if (dw. Style & WS_POPUP) { x = si. rc. Visible. Desktop. left; y = si. rc. Visible. Desktop. top; } //Consider the menu at the bottom, please. i. Delta = (si. fdw. Flags & SIPF_ON) ? 0 : MENU_HEIGHT; cx = si. rc. Visible. Desktop. right si. rc. Visible. Desktop. left; cy = si. rc. Visible. Desktop. bottom si. rc. Visible. Desktop. top - i. Delta; hwnd = Create. Window(lp. Class. Name, lp. Window. Name, dw. Style, x, y, cx, cy, h. Wnd. Parent, h. Menu, h. Instance, lp. Param); }

Navigation Bar - e. VC l Shared Resources Ø Ø Title comes from your top level window text OK button § § Remove WS_CAPTION and WS_SYSMENU bits, add WS_EX_CAPTIONOKBTN For Dialogs, use SHInit. Dialog: SHINITDLGINFO shidi; shidi. h. Dlg = hwnd; shidi. dw. Mask = SHIDIM_FLAGS; shidi. dw. Flags = SHIDIF_SIZEDLGFULLSCREEN | SHIDIF_DONEBUTTON; SHInit. Dialog(&shidi);

OK Button - e. VB l l To add set Show. OK property = True Handling OK button click Private Sub Form_OKClick() Me. Hide End Sub l Included by default for main form

Navigation Bar - e. VC l Hiding the Nav. Bar Ø Ø Use SHFull. Screen With § § Ø Ø dw. State = SHFS_HIDETASKBAR | SHFS_HIDESIPBUTTON | SHFS_HIDESTARTICON; // to hide dw. State = SHFS_SHOWTASKBAR | SHFS_SHOWSIPBUTTON | SHFS_SHOWSTARTICON; // to show Must be foreground window Do this on WM_ACTIVATE

New Menu Bar l Design Stuff Ø Ø Ø Moved to bottom so hand does not obstruct operations Menus & toolbar buttons mixed on ONE bar, no overlapping rebar Tooltips § Ø if the icon isn’t 100% self-evident, just use a menu or text Buttons and menus should NOT be redundant

Menu. Bar - e. VB l Adding buttons programmatically Dim mnu. Assets As Menu. Bar. Lib. Item Set mnu. Assets = menubar 1. Controls. Add. Menu("Assets", "mnu. Assets") mnu. Assets. Items. Add 1, "mnu. Assets. Add", "Add" mnu. Assets. Items. Add 2, "mnu. Assets. List", "List“ l Responding when menu. Bar buttons are clicked Private Sub menubar 1_Menu. Click(By. Val Item As Menu. Bar. Lib. Item) Select Case Item. Key Case "mnu. Assets. Add" Asset. Number. Text = ""

New “New” Button l Design Stuff Ø Ø Quick input is critical Shared with all apps On Today page and a user option to turn on everywhere Don’t spam it § You can spam it in your own app

Menu. Bar new New… - e. VB l l New button enabled through properties of Menu. Bar Control Detecting when New is clicked, Private Sub Menu. Bar 1_New. Click() Msg. Box ("New Button Clicked") End Sub

Input l Design Stuff Ø Ø Ø Design with the SIP Put it up for people and take it down Try not to make it dance Input is hard, make it easy… Remember it is pluggable, recommended 80 pixels high § Could be different!

Input - e. VC l l SIP friendliness (the rules) SHSip. Preference(HWND hwnd, SIPSTATE e. State) Ø Ø Ø l WC_SIPPREF magic control Ø l SIP_UP on WM_SETFOCUS SIP_DOWN on WM_KILLFOCUS Do nothing if you’re not an input control CONTROL "", -1, WC_SIPPREF, NOT WS_VISIBLE, -10, 5, 5 Input Dialogs Ø SHInput. Dialog(hwnd, u. Msg, w. Param)

Input - e. VC l Main Wnd. Proc - save & restore sip state per window case WM_INITDIALOG/WM_CREATE: this->sai. cb. Size = sizeof(SHACTIVATEINFO); break; case WM_ACTIVATE: SHHandle. WMActivate(h. Wnd, w. Param, l. Param, &this->sai, 0); break; case WM_SETTINGCHANGE: SHHandle. WMSetting. Change(h. Dlg, w. Param, l. Param, &this->sai)); break; case WM_SIZE: //sizing goo here. break;

Controlling the SIP - e. VB l SIPBehavior Ø Ø l SIPVisible Ø Ø l This property determines under what conditions the input panel appears. object. SIPBehavior [= value] This property determines the visibility of the input panel. object. SIPVisible [= Boolean] SIPChange Ø Ø This event occurs when the display state of the input panel changes. Private Sub form_SIPChange( Boolean )

Handling SIP - e. VC l Determine and set SIP Status Ø l Sip. Get. Info( ) and Sip. Set. Info( ) SIPINFO Structure contains… Flags – Sip ON, OFF and Locked Ø Rectangle of Visible Screen Ø Rectangle of SIP Ø l Call Sip. Get. Info( ) to determine current status and Sip. Set. Info( ) to change status.

Performance l For best results and maximum efficiency, streamline applications for Windows CE-based devices Think about the functionality you NEED on the device. Ø Multiple forms? Ø § Think UI Simplicity. Use Tab. Strip control to group tasks. Ø Use multiple frames on one form and move frames into view as needed. See NWind sample from SQLCE for example Ø

Browser Based Capabilities

Pocket IE Capabilities Overview l l l HTML 3. 2 Compliant Java. Script 1. 1 compliant XML Object Model SSL Active X support NOTE: Emulator does not run JScript

HTML Capabilities l HTML 3. 2 support Ø l Lightweight & ubiquitous Framesets Ø Ø Ø Per HTML 4. 0 spec Borders always visible even with BORDER=0 Linked wav files will be played without user interaction

HTML Capabilities l DHTML Ø l CSS Ø l Useful on the desktop, but still heavyweight for handhelds Use XSL stylesheets instead Animated GIFs, background images and sounds

JScript Capabilities l HTML 3. 2 -based object model Ø l Not the IE 4 OM Core script support: Scripting against FORM elements Ø Scripting against the XML OM Ø

JScript Capabilities Not supported: l Dynamic frameset creation l Dynamic script generation l Window. open

Detecting Pocket IE Server-side VBScript 'Check for Windows CE if (In. Str(Request. Server. Variables("HTTP_USER_AGENT"), "Windows CE")) then { add Windows CE specific code } else { add code for other platforms } end if 'Check for Pocket PC if (In. Str(Request. Server. Variables("HTTP_UA_OS"), "POCKET PC")) then { add Pocket PC specific code } else { add code for other platforms } end if

Detecting Pocket IE Client-side JScript var str. Nav = navigator. user. Agent; var is. CE = str. Nav. index. Of("Windows CE"); if(is. CE > -1) { { add Windows CE specific code } } else { { add code for other platforms } } var is. PPC = str. Nav. index. Of("240 x 320"); if(is. PPC > -1) { { add Pocket PC specific code } } else { { add code for other platforms } }

XML Capabilities l l l Same XML component as IE 5 Markup and transfer of data as XML How it works: Ø Ø Ø Data-as-XML delivered from server embedded in HTML page - an XML ‘Data Island’ Data read out of page, parsed, and placed into a data tree JScript accesses the XML OM and manipulates the data

XML Capabilities l Render the XML data in the browser as HTML Ø l Use XSL to transform XML into HTML Describe appearance of HTML page with XML Instead of CSS, markup page with XSL Ø Minimize round-trips to the server Ø Easy support for multiple browser types Ø

Using the XMLHTTP Object the request <SCRIPT LANGUAGE=“JSCRIPT”> var xmlhttp = new Active. XObject ("Microsoft. XMLHTTP"); xmlhttp. Open("POST", "XMLlog. asp", false); var str. XML = "<changeprice SKU='" + document. forms[0]. SKU. value + "' Price='" + i. New. Price + "'/>"; // Send request to logging page xmlhttp. Send(str. XML); // Show response (success or failure) alert(xmlhttp. responsetext); </SCRIPT>

Using the XMLHTTP Object the response <%@ LANGUAGE="VBSCRIPT" %> <% Response. Content. Type = "text/xml" set XMLReq = Server. Create. Object("Microsoft. XMLDOM") XMLReq. load(Request) set xml. Action = XMLReq. select. Single. Node("//changeprice") i. SKU = xml. Action. Get. Attribute("SKU") i. Price = xml. Action. Get. Attribute("Price") { open recordset containing the requested SKU } if not rs. Data. eof then rs. Data("Price") = i. Price rs. Data. update response. write "Price changed successfully to $" & i. Price & ". " else response. write "No record found for this SKU. " end if %>

Security Capabilities l For secure transactions, Pocket IE supports: Ø SSL § § 64 -bit certificates 128 -bit encryption (add-on)

Active. X Capabilities l Straightforward – just like the desktop COM component accessed from <OBJECT> tag Ø Script can call Active. X components, but not vice-versa Ø l Must be installed on device directly No auto-download Ø Great hook for rich device-web interaction scenarios Ø

Efficient Use of Pocket IE Suggestions l Keep it simple – just the essentials Avoid >2 frames per page Ø Use tables sparingly; allow for dynamic resizing Ø l Single-column format Pocket IE pages should never require horizontal scrolling Ø Makes single-handed reading easy Ø

Application Installation

App. Install Distribution Methods l App. Install supports multiple distribution methods: Ø Ø l l Web to device (via Pocket Internet Explorer) CF Card to device (via Auto. Run/Explorer) Device to device (via IR) Desktop to device (via App. Mgr) Accomplished by distributing the CAB files themselves With CEF, only need to distribute one CAB file to support all Pocket PC devices

App. Install Overview 1 Cab. Wiz INF 2 App Files 3 App. Mgr INI 4 Desktop Setup A Cab. Wiz (desktop) CEApp. Mgr (desktop) B CAB Files WCELoad (device) C

App. Mgr Register-only Flag l l l New flag to register your app only Will not run the App. Mgr UI Usage Ø l CEApp. Mgr. exe /register “<INI file>” [“<INI file>”] Example Ø Ø Ø CEApp. Mgr. exe /register “C: My. AppGame 1. ini” “C: My. AppGame 2. ini”

CE-Operating System Min/Max Version l l App. Mgr now uses CE-Operating System min/max version information in the CABs to determine which CAB to download Allows supporting all Palmsize/Pocket PC devices with a single Cab. Wiz INF and App. Mgr INI file

CE-Operating System Min/Max Version [CEDevice. PPC 1] ; Palm-size PC black/white Version. Min = 2. 1 Version. Max = 2. 1 [CEDevice. PPC 2] ; Palm-size PC colour Version. Min = 2. 11 Version. Max = 2. 11 [CEDevice. PPC 3] ; Pocket PC and beyond Version. Min = 3. 0 Version. Max = 100. 0 ; arbitrary high value

CE-Operating System Version Information l l Device Platform CE OS H/PC 2. 0 “HPC” 2. 0 H/PC 3. 0 “HPC Pro” 2. 11 Palm-size PC 1. 0 “Palm PC” 2. 1 Palm-size PC 2. 0 “Palm PC” 2. 11 Pocket PC “Palm PC” 3. 0 App. Install does not support H/PC 1. 0 CE API to get Platform Name: System. Parameters. Info (SPI_GETPLATFORMTYPE, …)

Q&A