Transcript Document

Pocket PC Application
Development
Robert Turner
Application Development Consultant
Microsoft UK
Agenda

eMbedded Visual Tools
development



Pocket PC Specifics



Tools overview
What’s new
Intelligent client capabilities and UI
design
Browser capabilities
Application Installation
Windows CE 3.0



Highly componentised OS
OEM’s can pick and choose
Two logo’ed configurations enable
device consistency for the majority



Pocket PC
Handheld PC 2000
Adoption of changes back into the
OS
Embedded Visual Tools
Development
Tools Landscape
Choosing the correct tool
eVB
LOB
Apps
UI
Exploitive
Apps
Device Drivers/
Time Critical
eVC
Platform
Builder
Programming Models
Embedded devices and applications
Hardware
Development
Custom Hardware
Custom WinCE OS Configuration
Subset/Superset: Win32 APIs
Win32 APIs
Device Specific
PocketPC SDK
Win32 APIs
Device Specific
OEM SDK
Win32 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
pIE
POOM
ADO
Mail
API
GAPI
Rapier
Shell
APIs
WinInet
WinCE 3.0 (Cedar): Win32, OLE, Winsock, etc
What’s New In Embedded
Visual Tools ?

eVC/eVB are standalone, no longer
VS add-ins



Separate from but co-exist with VS and VS
SPs
Remove support for Win32 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 - eVC
Wizards - eVC

2 New Pocket PC Specific Wizards



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
SHCreateMenuBar
SHHandleWMSettingChange
SHInitDialog in about dialog
Demo
What Is New In MFC For
Pocket PC? - eVC

Property sheets


Dialog boxes


Full Screen, no border
Find and replace text dialog and toolbar


Flat tabs, not 3D
CFindReplaceDialog
Document list for browsing files


Like standard pocket PC apps
CCeDocList
More API’s For Pocket PC - eVC

Context menu
Hold stylus down – Tap ‘n Hold
 Automatic within MFC




Borderless Windows
Internet Explorer style re-Bars
Custom Today Items
About eVB



eVB language is a subset of that used by
the desktop version of Visual Basic
Small, lightweight, and interpreted,
Related to VBScript
eVB combines the robust power of
Visual Basic with the compact portability
and ease of use characteristic of
VBScript
What’s New In eVB 3.0

IDE
Standalone toolset
 Focus on Platform functionality
 Limits features based on Platform




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

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









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






Flat interface
Menu bar control
Simple interaction
Popup menus
OK buttons
Minimize data input
The Flat Look

Design Stuff



Works better on small screens w/range of
resolutions incl. greyscale
3D is so…last century
Detail - eVC



Mostly standard Win32. Avoid
WS_DLGFRAME and
WS_EX_WINDOWEDGE
CCM_SETVERSION with
COMCTL32_VERSION
Others inherit for free (except PropSheets)
Navigation Bar

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 - eVC

Respecting space



CreateWindows at CW_USEDEFAULT,
CW_USEDEFAULT origin, NOT at (0,0)
And/Or use SHSipInfo
Navigation Bar - eVC
si.cbSize = sizeof(si);
if( SHSipInfo(SPI_GETSIPINFO, 0, &si, 0) )
{
if (dwStyle & WS_POPUP)
{
x = si.rcVisibleDesktop.left;
y = si.rcVisibleDesktop.top;
}
//Consider the menu at the bottom, please.
iDelta = (si.fdwFlags & SIPF_ON) ? 0 :
MENU_HEIGHT;
cx = si.rcVisibleDesktop.right si.rcVisibleDesktop.left;
cy = si.rcVisibleDesktop.bottom si.rcVisibleDesktop.top - iDelta;
hwnd = CreateWindow(lpClassName,
lpWindowName, dwStyle, x, y, cx, cy,
hWndParent, hMenu, hInstance, lpParam);
}
Navigation Bar - eVC

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 SHInitDialog:
SHINITDLGINFO shidi;
shidi.hDlg = hwnd;
shidi.dwMask = SHIDIM_FLAGS;
shidi.dwFlags =
SHIDIF_SIZEDLGFULLSCREEN |
SHIDIF_DONEBUTTON;
SHInitDialog(&shidi);
OK Button - eVB


To add set ShowOK property = True
Handling OK button click
Private Sub Form_OKClick()
Me.Hide
End Sub

Included by default for main form
Navigation Bar - eVC

Hiding the NavBar


Use SHFullScreen
With




dwState = SHFS_HIDETASKBAR |
SHFS_HIDESIPBUTTON |
SHFS_HIDESTARTICON; // to hide
dwState = SHFS_SHOWTASKBAR |
SHFS_SHOWSIPBUTTON |
SHFS_SHOWSTARTICON; // to show
Must be foreground window
Do this on WM_ACTIVATE
New Menu Bar

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
MenuBar - eVB

Adding buttons programmatically
Dim mnuAssets As MenuBarLib.Item
Set mnuAssets =
menubar1.Controls.AddMenu("Assets",
"mnuAssets")
mnuAssets.Items.Add 1, "mnuAssetsAdd", "Add"
mnuAssets.Items.Add 2, "mnuAssetsList", "List“

Responding when menuBar buttons are
clicked
Private Sub menubar1_MenuClick(ByVal Item As
MenuBarLib.Item)
Select Case Item.Key
Case "mnuAssetsAdd"
AssetNumber.Text = ""
New “New” Button

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
MenuBar new New… - eVB


New button enabled through properties
of MenuBar Control
Detecting when New is clicked,
Private Sub MenuBar1_NewClick()
MsgBox ("New Button Clicked")
End Sub
Input

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 - eVC


SIP friendliness (the rules)
SHSipPreference(HWND hwnd,
SIPSTATE eState)




WC_SIPPREF magic control


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,-10,5,5
Input Dialogs

SHInputDialog(hwnd, uMsg, wParam)
Input - eVC

Main WndProc - save & restore sip state per
window
case WM_INITDIALOG/WM_CREATE:
this->sai.cbSize = sizeof(SHACTIVATEINFO);
break;
case WM_ACTIVATE:
SHHandleWMActivate(hWnd, wParam, lParam,
&this->sai, 0);
break;
case WM_SETTINGCHANGE:
SHHandleWMSettingChange(hDlg, wParam,
lParam, &this->sai));
break;
case WM_SIZE:
//sizing goo here.
break;
Controlling the SIP - eVB

SIPBehavior



SIPVisible



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 - eVC

Determine and set SIP Status


SipGetInfo( ) and SipSetInfo( )
SIPINFO Structure contains…
Flags – Sip ON, OFF and Locked
 Rectangle of Visible Screen
 Rectangle of SIP


Call SipGetInfo( ) to determine
current status and SipSetInfo( ) to
change status.
Performance

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 TabStrip 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





HTML 3.2 Compliant
JavaScript 1.1 compliant
XML Object Model
SSL
Active X support
NOTE: Emulator does not run JScript
HTML Capabilities

HTML 3.2 support


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

DHTML


CSS


Useful on the desktop, but still
heavyweight for handhelds
Use XSL stylesheets instead
Animated GIFs, background images
and sounds
JScript Capabilities

HTML 3.2-based object model


Not the IE4 OM
Core script support:
Scripting against FORM elements
 Scripting against the XML OM

JScript Capabilities
Not supported:
 Dynamic frameset creation
 Dynamic script generation
 Window.open
Detecting Pocket IE
Server-side VBScript
'Check for Windows CE
if (InStr(Request.ServerVariables("HTTP_USER_AGENT"),
"Windows CE")) then
{ add Windows CE specific code }
else
{ add code for other platforms }
end if
'Check for Pocket PC
if (InStr(Request.ServerVariables("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 strNav = navigator.userAgent;
var isCE = strNav.indexOf("Windows CE");
if(isCE > -1) {
{ add Windows CE specific code }
}
else {
{ add code for other platforms }
}
var isPPC = strNav.indexOf("240x320");
if(isPPC > -1) {
{ add Pocket PC specific code }
}
else {
{ add code for other platforms }
}
XML Capabilities



Same XML component as IE5
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

Render the XML data in the browser
as HTML


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 ActiveXObject ("Microsoft.XMLHTTP");
xmlhttp.Open("POST", "XMLlog.asp", false);
var strXML = "<changeprice SKU='" + 
document.forms[0].SKU.value + "' 
Price='" + iNewPrice + "'/>";
// Send request to logging page
xmlhttp.Send(strXML);
// Show response (success or failure)
alert(xmlhttp.responsetext);
</SCRIPT>
Using the XMLHTTP Object
the response
<%@ LANGUAGE="VBSCRIPT" %>
<% Response.ContentType = "text/xml"
set XMLReq = Server.CreateObject("Microsoft.XMLDOM")
XMLReq.load(Request)
set xmlAction = XMLReq.selectSingleNode("//changeprice")
iSKU = xmlAction.GetAttribute("SKU")
iPrice = xmlAction.GetAttribute("Price")
{ open recordset containing the requested SKU }
if not rsData.eof then
rsData("Price") = iPrice
rsData.update
response.write "Price changed successfully to $" &
iPrice & "."
else
response.write "No record found for this SKU."
end if %>
Security Capabilities

For secure transactions, Pocket IE
supports:

SSL


64-bit certificates
128-bit encryption (add-on)
ActiveX Capabilities

Straightforward – just like the desktop
COM component accessed from <OBJECT>
tag
 Script can call ActiveX components, but not
vice-versa


Must be installed on device directly
No auto-download
 Great hook for rich device-web interaction
scenarios

Efficient Use of Pocket IE
Suggestions

Keep it simple – just the essentials
Avoid >2 frames per page
 Use tables sparingly; allow for dynamic
resizing


Single-column format
Pocket IE pages should never require
horizontal scrolling
 Makes single-handed reading easy

Application Installation
AppInstall Distribution
Methods

AppInstall supports multiple distribution
methods:






Web to device (via Pocket Internet Explorer)
CF Card to device (via AutoRun/Explorer)
Device to device (via IR)
Desktop to device (via AppMgr)
Accomplished by distributing the CAB
files themselves
With CEF, only need to distribute one CAB
file to support all Pocket PC devices
AppInstall Overview
1
CabWiz
INF
2
App
Files
3
AppMgr
INI
A
CabWiz
(desktop)
CEAppMgr
(desktop)
4
Desktop
Setup
B
CAB
Files
WCELoad
(device)
C
AppMgr Register-only Flag



New flag to register your app only
Will not run the AppMgr UI
Usage


CEAppMgr.exe /register “<INI file>” [“<INI
file>”]
Example



CEAppMgr.exe /register
“C:\MyApp\Game1.ini”
“C:\MyApp\Game2.ini”
CE-Operating System
Min/Max Version


AppMgr 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
CabWiz INF and AppMgr INI file
CE-Operating System
Min/Max Version
[CEDevice.PPC1] ; Palm-size PC black/white
VersionMin = 2.1
VersionMax = 2.1
[CEDevice.PPC2] ; Palm-size PC colour
VersionMin = 2.11
VersionMax = 2.11
[CEDevice.PPC3] ; Pocket PC and beyond
VersionMin = 3.0
VersionMax = 100.0 ; arbitrary high value
CE-Operating System
Version Information


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
AppInstall does not support H/PC 1.0
CE API to get Platform Name:
SystemParametersInfo
(SPI_GETPLATFORMTYPE, …)
Q&A