overview of window mobile second edition marcus perryman

Overview of Window Overview of Window Mobile Second EditionMobile Second Edition

Marcus PerrymanMarcus Perryman

AgendaAgenda

Screen OrientationScreen Orientation OverviewOverview Application ImpactApplication Impact Developer ConsiderationsDeveloper Considerations

Hi Dpi – Resolution Aware ApplicationsHi Dpi – Resolution Aware Applications

Windows Mobile RoadmapWindows Mobile Roadmap

Richer Richer Platform Platform CapabilitiesCapabilities

.NET CF “Whidbey”.NET CF “Whidbey”MFC 8.0, ATL 8.0MFC 8.0, ATL 8.0

Broad managed Broad managed code support code support

Notification broker, Notification broker, Location, Camera, Location, Camera, SQL CE, D3DMSQL CE, D3DM

.NET CF SP2.NET CF SP2

VGA (PPC)VGA (PPC)Square (PPC)Square (PPC)Landscape (PPC)Landscape (PPC)

QVGA (SP)QVGA (SP)

.NET CF.NET CF Enhanced Enhanced Emulator Emulator Configuration Configuration Mgr,Mgr,Bluetooth, SMSBluetooth, SMS

MFC 3.0, MFC 3.0, ATL 3.0ATL 3.0

Active SyncActive SyncConnection MgrConnection MgrMAPIMAPIOBEXOBEXTelephonyTelephony

MFC 3.0MFC 3.0

Win32, Win32, POOM POOM

BetterBetterDevelopmentDevelopment

Visual Studio Visual Studio 2005 2005 formerlyformerly

VS “Whidbey”VS “Whidbey”(C#, VB.NET, C++)(C#, VB.NET, C++)

eVC 3 eVC 3 (C++)(C++)eVC 4 eVC 4 (C++)(C++)

VS.NET 2003 VS.NET 2003 (C#, VB.NET)(C#, VB.NET)

eVC 3 eVC 3 (C++)(C++)eVC 4 eVC 4 (C++)(C++)

VS.NET 2003VS.NET 2003(C#, VB.NET)(C#, VB.NET)

eVC 3 eVC 3 (C++)(C++)eVB 3 eVB 3 (VB)(VB)

eVC 3 eVC 3 (C++)(C++)eVB 3 eVB 3 (VB)(VB)

Core OSCore OS WinCE WinCE “Macallan”“Macallan”WinCE 4.2WinCE 4.2WinCE 4.2WinCE 4.2WinCE 3.0WinCE 3.0 WinCE 3.0WinCE 3.0

MoreMoreDevice Device ChoicesChoices FutureFuture

Windows MobileWindows Mobile20032003Second EditionSecond Edition

200320032002200220002000

http://www.geek.com/hwswrev/pda/ppcphone/webshot.jpg

Types Of Orientations & ScreensTypes Of Orientations & Screens

Portrait Portrait 240x320240x320

LandscapeLandscape320x240320x240

Square Square 240x240240x240

Changing OrientationChanging Orientation

Screen control Screen control

panel appletpanel applet Hardware buttonHardware button Emulator – App Emulator – App

Button 2Button 2

Changing Changing OrientationOrientation

Application ImpactApplication Impact

Fit content to the windowFit content to the window Change the contentChange the content Change layoutChange layout Design for squareDesign for square

Fit Content To WindowFit Content To Window

PortraitPortraitLandscapeLandscape

Change The ContentChange The Content Content may need to change when orientation Content may need to change when orientation

changeschanges


Change The LayoutChange The Layout


Design For Design For SquareSquare

PortraitPortrait

LandscapeLandscape

SquareSquare

Developer ConsiderationsDeveloper Considerations

What Happens?What Happens?

Pocket PC OS actions:Pocket PC OS actions: Call to ChangeDisplaySettingsEx() Call to ChangeDisplaySettingsEx()

occursoccurs The display driver and touch screen The display driver and touch screen

driver are notified of the orientation driver are notified of the orientation changechange

The shell is notified of the orientation The shell is notified of the orientation changechange

Pocket PC Shell ActionsPocket PC Shell Actions

Any open menus or bubbles are closedAny open menus or bubbles are closed

Pocket PC Shell Actions – cont.Pocket PC Shell Actions – cont. Title bar and desktop window are Title bar and desktop window are

resized and the new work area is setresized and the new work area is set

Title barTitle bar

DesktopDesktop

Work Area: (0,26,240,320)Work Area: (0,26,240,320)

Work Area: (0,26,320,240)Work Area: (0,26,320,240)

Pocket PC Shell Actions – cont.Pocket PC Shell Actions – cont.

Full-screen application windows and their menu Full-screen application windows and their menu bars are resized. Non full-screen windows are not bars are resized. Non full-screen windows are not resizedresized

MenubarMenubar

Pocket PC Shell Actions – cont.Pocket PC Shell Actions – cont.

Foreground window with Foreground window with (WS_CAPTION | DS_CENTER) is (WS_CAPTION | DS_CENTER) is positionedpositioned

Scroll bar is added/removed for Scroll bar is added/removed for existing application dialogsexisting application dialogs

Input Panel is loweredInput Panel is lowered

Final ActionsFinal Actions

All windows are invalidated and All windows are invalidated and repaintedrepainted

Top level windows receive Top level windows receive WM_SETTINGCHANGE messageWM_SETTINGCHANGE message wParam = SETTINGCHANGE_RESETwParam = SETTINGCHANGE_RESET

Done!Done!

Supporting Orientation ChangeSupporting Orientation Change Full Screen applicationFull Screen application

Resize done by the shellResize done by the shell Respond to WM_SIZE and resize child Respond to WM_SIZE and resize child

windowswindows DialogsDialogs

Design new dialogs for square screenDesign new dialogs for square screen Consider using property pagesConsider using property pages Re-layout content Re-layout content Use Replacement controlsUse Replacement controls

MenusMenus Design for square screen Design for square screen Fit without scrolling in all orientationsFit without scrolling in all orientations

Auto Scrollbars In DialogsAuto Scrollbars In Dialogs Existing apps (version <=4.20) Existing apps (version <=4.20)

automatic vertical scroll bar for Landscape and automatic vertical scroll bar for Landscape and SquareSquare

New apps (version >=4.21) New apps (version >=4.21) Call SHInitDialog() with Call SHInitDialog() with

SHIDIF_WANTSCROLLBARSHIDIF_WANTSCROLLBAR

80 pixels80 pixels

Tips and TricksTips and Tricks

Layout TipsLayout Tips Re-layout is expensiveRe-layout is expensive

relayout only when the width changes relayout only when the width changes (not all WM_SIZE)(not all WM_SIZE)

Use DeferWindowPos for child windowsUse DeferWindowPos for child windows Off-screen controlsOff-screen controls

To the left or above the windowTo the left or above the window Hide them!Hide them!

Ensure select item is visibleEnsure select item is visible Scroll into view if necessaryScroll into view if necessary

Hardware buttons move!Hardware buttons move! May not lie where you expect May not lie where you expect

Update Your Install ScriptUpdate Your Install Script

Subsystem .EXE version <=4.20Subsystem .EXE version <=4.20

Update .INF file:Update .INF file:

[CEDevice][CEDevice]

BuildMax=0xE0000000 ; support for BuildMax=0xE0000000 ; support for square screens and screen rotationsquare screens and screen rotation

Handling Unsupported Handling Unsupported OrientationOrientation Check orientation, display an error if Check orientation, display an error if

orientation is not supported:orientation is not supported:DEVMODE devMode;DEVMODE devMode;memset(&devMode, 0, sizeof(devMode));memset(&devMode, 0, sizeof(devMode));devMode.dmSize = sizeof(devMode);devMode.dmSize = sizeof(devMode);devMode.dmFields = DM_DISPLAYORIENTATION;devMode.dmFields = DM_DISPLAYORIENTATION;

// Calling with CDS_TEST puts current orientation// Calling with CDS_TEST puts current orientation// in dmDisplayOrientation// in dmDisplayOrientationChangeDisplaySettingsExChangeDisplaySettingsEx

(NULL, &devMode, NULL, (NULL, &devMode, NULL, CDS_TESTCDS_TEST, , NULL);NULL);

if (devMode.dmDisplayOrientation != DMDO_0)if (devMode.dmDisplayOrientation != DMDO_0)Display Error;Display Error;

Games API (GAPI)Games API (GAPI)

GXOpenDisplay and GXResumeGXOpenDisplay and GXResume Switch to Portrait orientationSwitch to Portrait orientation

GXCloseDisplay and GXSuspendGXCloseDisplay and GXSuspend switch back to the previous orientationswitch back to the previous orientation

Orientation SummaryOrientation Summary

Full-screen windows should relayout Full-screen windows should relayout content and child windows when content and child windows when WM_SIZE is receivedWM_SIZE is received

Redesign dialogs and menus so they Redesign dialogs and menus so they fit in all screens and orientationsfit in all screens and orientations

Reposition, resize and/or relayout non Reposition, resize and/or relayout non full-screen windows when full-screen windows when WM_SETTINGCHANGE with WM_SETTINGCHANGE with wParam=SETTINGCHANGE_RESET is wParam=SETTINGCHANGE_RESET is receivedreceived

Resolution-Aware Resolution-Aware ApplicationsApplications

AgendaAgenda

IntroductionIntroduction What’s new?What’s new?

ExistingExisting NewNew

Pocket PCPocket PC 240 x 320 240 x 320

96 dots per inch96 dots per inch

480 x 640480 x 640

192 DPI192 DPI

SmartphoneSmartphone 172 x 240172 x 240

96 DPI96 DPI

240 x 320240 x 320

131 DPI131 DPI

NOTE: this is a DPI change, NOT a NOTE: this is a DPI change, NOT a screen size change!screen size change! Same physical sizeSame physical size Designed to enable high quality screensDesigned to enable high quality screens

GoalsGoals

Keep one app for both DPI settingsKeep one app for both DPI settings Support existing applicationsSupport existing applications

Provide DPI “emulation” for existing appsProvide DPI “emulation” for existing apps Best effort experienceBest effort experience Pocket PC onlyPocket PC only

Allow new applications to be DPI awareAllow new applications to be DPI aware Use hires graphicsUse hires graphics Better customer experienceBetter customer experience

What Is DPI Awareness?What Is DPI Awareness?

More detail per elementMore detail per element

NOT tiny textNOT tiny text

Migrating to HiDPIMigrating to HiDPI

Run your app on 96DPIRun your app on 96DPI Take a screen snapshotTake a screen snapshot

Run your app on 192DPIRun your app on 192DPI Take a screen snapshotTake a screen snapshot

Compare the output:Compare the output:

pWord, 96 DPIpWord, 96 DPI pWord, 192 DPIpWord, 192 DPI

Migrating to HiDPIMigrating to HiDPI Why so similar?Why so similar?

Legacy emulation layerLegacy emulation layer App believes it is running on 96 DPIApp believes it is running on 96 DPI Layer stretches app to screen pixelsLayer stretches app to screen pixels

Main Difference:Main Difference: Text looks sharper/betterText looks sharper/better

96 DPI 192 DPI96 DPI 192 DPI

So, Are We Done?So, Are We Done?

No – true Hi-DPI support means:No – true Hi-DPI support means: Better imagesBetter images Better performanceBetter performance

96 DPI96 DPI 192 DPI192 DPI

Disabling Emulation LayerDisabling Emulation Layer

Creating “manifest” resource:Creating “manifest” resource: Resource type: CEUX (custom data)Resource type: CEUX (custom data) Resource Name: “HI_RES_AWARE”Resource Name: “HI_RES_AWARE”

Quotes important (or will be defined as Quotes important (or will be defined as numeric)numeric)

Value: 01 00Value: 01 00 In .rc file:In .rc file:

HI_RES_AWARE CEUX HI_RES_AWARE CEUX BEGINBEGIN 0x0001 0x0001ENDEND

Now app will see the real DPINow app will see the real DPI

Looking For ProblemsLooking For Problems Compare screenshotsCompare screenshots

Obvious bugsObvious bugs Subtle bugsSubtle bugs

LoDPILoDPI

HiDPIHiDPI

Types of IssueTypes of Issue

Hardcoded screen pixel constantsHardcoded screen pixel constants Need to scale constants based on DPINeed to scale constants based on DPI

Pens, Lines & RectanglesPens, Lines & Rectangles Scale size based on DPIScale size based on DPI

Image resourcesImage resources Using image appropriate to DPIUsing image appropriate to DPI

Hardcoded Screen Pixel ConstantsHardcoded Screen Pixel Constants


Red line is 17 pixels tall in 96 DPIRed line is 17 pixels tall in 96 DPI It is also 17 pixels tall in 192 DPI, but It is also 17 pixels tall in 192 DPI, but

should be 34should be 34 Code, laden with constants:Code, laden with constants:

PatRect(ptb->hdc, iStart + 1, lprc->top + 3, iEnd-iStart - 1, (lprc->bottom - lprc->top) - 6, ptb);

Fixing the ConstantsFixing the Constants Replace constants with system metrics Replace constants with system metrics

(GetSystemMetrics) if applicable(GetSystemMetrics) if applicable Borders (SM_CXBORDER)Borders (SM_CXBORDER) 3D Edges (SM_CXEDGE)3D Edges (SM_CXEDGE) Icons (SM_CXICON, SM_CXSMICON)Icons (SM_CXICON, SM_CXSMICON) Screen size (SM_CXSCREEN)Screen size (SM_CXSCREEN)

Manual scale constantsManual scale constants See uihelper.h in Developer Resource KitSee uihelper.h in Developer Resource Kit Insert Insert HIDPI_ENABLEHIDPI_ENABLE once per exe/dll once per exe/dll Call HIDPI_InitScaling() in WinMain/DllMainCall HIDPI_InitScaling() in WinMain/DllMain Use SCALEX & SCALEY with constantsUse SCALEX & SCALEY with constants

DPI Aware Code:DPI Aware Code:

DPI aware:DPI aware: PatRect(ptb->hdc, iStart+PatRect(ptb->hdc, iStart+11,, lprc->top + lprc->top + GetSystemMetrics(SM_CYEDGE) +GetSystemMetrics(SM_CYEDGE) + SCALEY(1)SCALEY(1),, iEnd-iStart- iEnd-iStart-11,, (lprc->bottom-lprc->top) – (lprc->bottom-lprc->top) – 2*(GetSystemMetrics(SM_CYEDGE)2*(GetSystemMetrics(SM_CYEDGE) + SCALEY(1)) + SCALEY(1)),, ptb); ptb);

Not DPI Aware:Not DPI Aware:PatRect(ptb->hdc,PatRect(ptb->hdc, iStart + iStart + 11, lprc->top + , lprc->top + 33,, iEnd-iStart - iEnd-iStart - 11,, (lprc->bottom - lprc->top) - (lprc->bottom - lprc->top) - 66,, ptb); ptb);

Pens, Lines & RectanglesPens, Lines & Rectangles Pen widths also need love & scaling:Pen widths also need love & scaling:


BLACK_PEN stock object is always 1 pixel BLACK_PEN stock object is always 1 pixel widewide Use new stock object: BORDERX_PEN (black Use new stock object: BORDERX_PEN (black

pen, width = SM_CXBORDER)pen, width = SM_CXBORDER) #define BORDERX_PEN 32 (uihelper.cpp from #define BORDERX_PEN 32 (uihelper.cpp from

sample)sample)

Pens created with hardcoded widthPens created with hardcoded width Use SCALEX & SCALEYUse SCALEX & SCALEY

Pens, Lines & RectanglesPens, Lines & Rectangles1-pixel thick pen at 96-DPI1-pixel thick pen at 96-DPIfrom (1,1) to (6,1)from (1,1) to (6,1)

2-pixel thick pen at 192-DPI2-pixel thick pen at 192-DPIfrom (2,2) to (12,2)from (2,2) to (12,2)

Pens, Lines & Rectangles:Pens, Lines & Rectangles: Not DPI aware:Not DPI aware:

HPEN hPen1 = GetStockObject(BLACK_PEN);HPEN hPen1 = GetStockObject(BLACK_PEN);SelectObject(hdc1, hPen1);SelectObject(hdc1, hPen1);PolylinePolyline(hdc1, rgpts, 2);(hdc1, rgpts, 2);HPEN hPen2 = CreatePen(PS_SOLID, HPEN hPen2 = CreatePen(PS_SOLID, 22, , RGB(0,0,0));RGB(0,0,0));SelectObject(hdc2, hPen2);SelectObject(hdc2, hPen2);RectangleRectangle(hdc,prc->left(hdc,prc->left+1+1, prc->top, prc->top+1+1,, prc->right prc->right-1-1, prc->bottom, prc->bottom-1-1););

Image ResourcesImage Resources

Use SM_CXSMICON and Use SM_CXSMICON and SM_CYSMICONSM_CYSMICON


Other Image considerationsOther Image considerations Stretching up is badStretching up is bad Shrinking down is worseShrinking down is worse Use separate images per DPIUse separate images per DPI

Don’tsDon’ts

Don’t change dialog layouts Don’t change dialog layouts Don’t change UI layoutDon’t change UI layout Don’t change functionalityDon’t change functionality Don’t hardcode pixel height or DPI Don’t hardcode pixel height or DPI

when creating new fonts. Do:when creating new fonts. Do:lf.lfHeight =lf.lfHeight =

-MulDiv(cPoints,-MulDiv(cPoints,GetDeviceCaps(NULL, GetDeviceCaps(NULL,

LOGPIXELSY)LOGPIXELSY),72);,72);

GotchasGotchas

Font widthsFont widths Use GetTextExtent Use GetTextExtent

Images that contain subimagesImages that contain subimages Images in static controls (dialog picture Images in static controls (dialog picture

boxes) now behave like desktop:boxes) now behave like desktop: Stretch by defaultStretch by default No stretch if SS_REALSIZEIMAGE (0x0800) No stretch if SS_REALSIZEIMAGE (0x0800)

specified in .rc file:specified in .rc file:ICON "",IDC_CERT_TRUST_ICON,28,49,20,20,ICON "",IDC_CERT_TRUST_ICON,28,49,20,20, SS_REALSIZEIMAGESS_REALSIZEIMAGE

RoundoffRoundoffSCALEX(x/2) != SCALEX(x)/2SCALEX(x/2) != SCALEX(x)/2

SmartphoneSmartphone

No emulationNo emulation Non-integralNon-integral

Most legacy apps usableMost legacy apps usable WhitespaceWhitespace Dialog managerDialog manager

GAPI letterboxedGAPI letterboxed Update your appUpdate your app

Same as Pocket PCSame as Pocket PC

Need to bypass GAPI emulation layerNeed to bypass GAPI emulation layer Don’t call GXBeginDraw or GXEndDrawDon’t call GXBeginDraw or GXEndDraw Call ExtEscapeCall ExtEscape withwith GETRAWFRAMEBUFFER GETRAWFRAMEBUFFER

paramparam#define GETRAWFRAMEBUFFER 0x00020001

RawFrameBufferInfo rfbi;ExtEscape(hdc, GETRAWFRAMEBUFFER, 0, NULL, sizeof(RawFrameBufferInfo), (char *) &rfbi);

Use returned frame pointer for drawingUse returned frame pointer for drawingrfbi.pFramePointer

With manifest, screen taps are in the real DPIWith manifest, screen taps are in the real DPI

GAPIGAPI

RecapRecap

DPI awareness implies screen DPI awareness implies screen resolution, not real-estateresolution, not real-estate

Always compare LoDPI vs. HiDPI Always compare LoDPI vs. HiDPI versions of your appversions of your app

Focus on 3 areas to fix:Focus on 3 areas to fix: Hardcoded screen pixel constantsHardcoded screen pixel constants Pens, Lines & RectsPens, Lines & Rects Image ResourcesImage Resources

Questions?Questions?

overview of window mobile second edition marcus perryman

Documents