1 / 63

Pocket PC Application Development

Pocket PC Application Development. Robert Turner Application Development Consultant Microsoft UK. Agenda. eMbedded Visual Tools development Tools overview What’s new Pocket PC Specifics Intelligent client capabilities and UI design Browser capabilities Application Installation.

yuval
Download Presentation

Pocket PC Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pocket PC Application Development Robert Turner Application Development Consultant Microsoft UK

  2. Agenda • eMbedded Visual Tools development • Tools overview • What’s new • Pocket PC Specifics • Intelligent client capabilities and UI design • Browser capabilities • Application Installation

  3. 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

  4. Embedded Visual Tools Development

  5. Tools LandscapeChoosing the correct tool Platform Builder eVB eVC LOB Apps UI Exploitive Apps Device Drivers/ Time Critical

  6. Programming ModelsEmbedded devices and applications Hardware Development Custom Hardware OS Development Custom WinCE OS Configuration Subset/Superset: Win32 APIs Application Development Win32 APIs Device Specific Win32 APIs Device Specific Win32 APIs Device Specific PocketPC SDK OEM SDK OEM SDK

  7. Pocket PC App Platform Diagram Your App Goes Here VB MFC ATL HTML JScript XML XSL ADO POOM Mail API GAPI Rapier Shell APIs pIE WinInet WinCE 3.0 (Cedar): Win32, OLE, Winsock, etc

  8. 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

  9. Documentation Changes

  10. New Features In 3.0 IDE - eVC

  11. 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

  12. Demo

  13. What Is New In MFC For Pocket PC? - eVC • Property sheets • Flat tabs, not 3D • Dialog boxes • Full Screen, no border • Find and replace text dialog and toolbar • CFindReplaceDialog • Document list for browsing files • Like standard pocket PC apps • CCeDocList

  14. 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

  15. 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

  16. 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

  17. Intelligent Client Capabilities and UI Design

  18. Wyvern v. Rapier

  19. 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

  20. 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

  21. 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 App Menu New SIP

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

  23. 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)

  24. 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

  25. Navigation Bar - eVC • Respecting space • CreateWindows at CW_USEDEFAULT, CW_USEDEFAULT origin, NOT at (0,0) • And/Or use SHSipInfo

  26. 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); }

  27. 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);

  28. 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

  29. 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

  30. 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

  31. 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 = ""

  32. 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

  33. 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

  34. 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!

  35. Input - eVC • SIP friendliness (the rules) • SHSipPreference(HWND hwnd, SIPSTATE eState) • SIP_UP on WM_SETFOCUS • SIP_DOWN on WM_KILLFOCUS • Do nothing if you’re not an input control • WC_SIPPREF magic control • CONTROL "",-1,WC_SIPPREF, NOT WS_VISIBLE,-10,-10,5,5 • Input Dialogs • SHInputDialog(hwnd, uMsg, wParam)

  36. 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;

  37. Controlling the SIP - eVB • SIPBehavior • This property determines underwhat conditions the input panel appears. • object.SIPBehavior [= value] • SIPVisible • 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 )

  38. 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.

  39. 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

  40. Browser Based Capabilities

  41. Pocket IE CapabilitiesOverview • HTML 3.2 Compliant • JavaScript 1.1 compliant • XML Object Model • SSL • Active X support NOTE: Emulator does not run JScript

  42. 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

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

  44. JScript Capabilities • HTML 3.2-based object model • Not the IE4 OM • Core script support: • Scripting against FORM elements • Scripting against the XML OM

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

  46. Detecting Pocket IEServer-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

  47. Detecting Pocket IEClient-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 } }

  48. 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 OMand manipulates the data

  49. 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

  50. Using the XMLHTTP Objectthe 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>

More Related