introduction to developing · desktop apps and windows native • primarily the same as win32 on...

Introduction to Developing Ultrabook™ Applications

Intel® Corporation

Legal Disclaimer

• INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL® PRODUCTS. EXCEPT AS PROVIDED IN INTEL’S TERMS AND CONDITIONS OF SALE FOR SUCH

PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER, AND INTEL IS CLAIMS ANY EXPRESS OR IMPLIED WARRANTY RELATING TO SALE AND/OR USE OF INTEL

PRODUCTS, INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT,

COPYRIGHT, OR OTHER INTELLECTUAL PROPERTY RIGHT. Intel products are not intended for use in medical, life-saving, life sustaining, critical control or safety systems,

or in nuclear facility applications.

• Intel products may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are

available on request.

• Intel may make changes to dates, specifications, product descriptions, and plans referenced in this document at any time, without notice.

• This document may contain information on products in the design phase of development. The information here is subject to change without notice. Do not finalize a

design with this information.

• Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined." Intel reserves these for future definition and

shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them.

• Intel Corporation may have patents or pending patent applications, trademarks, copyrights, or other intellectual property rights that relate to the presented subject

matter. The furnishing of documents and other materials and information does not provide any license, express or implied, by estoppel or otherwise, to any such

patents, trademarks, copyrights, or other intellectual property rights.

• Wireless connectivity and some features may require you to purchase additional software, services or external hardware.

• Performance tests and ratings are measured using specific computer systems and/or components and reflect the approximate performance of Intel products as measured

by those tests. Any difference in system hardware or software design or configuration may affect actual performance. Buyers should consult other sources of

information to evaluate the performance of systems or components they are considering purchasing. For more information on performance tests and on the

performance of Intel products, visit Intel Performance Benchmark Limitations

• Intel, the Intel logo are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries.

Copyright © 2011 Intel Corporation. All rights reserved.

Intel Confidential - Customer NDA Use Only

* Other Names and Brands maybe claimed as the property of others. All dates, plans and features are preliminary and subject to change without notice.

2 Copyright© 2012, Intel Corporation. All rights reserved. *Other brands

and names are the property of their respective owners

http://www.intel.com/performance/resources/limits.htm

Technical Overview Sessions

• Ultrabook Features

• Touch

• Sensors

• Battery

• Developer Tools

• Metro App Developers

• Developers Resources

Copyright© 2012, Intel Corporation. All rights reserved. *Other brands and names are the property of their respective owners 3

Technical Overview Sessions

4 Copyright© 2012, Intel Corporation. All rights reserved. *Other brands and names are the property of their respective owners

5. Developer Resources & References

3. Touch and Sensors for C/C++ developers

4. Touch and Sensors for .NET developers

2. Sensors / Battery / Developer Tools

1. Windows 8 Overview / Touch

Overview of the Entire Day


5. Developer Platforms

3. Developer Resources / Community / Intel AppUp® Center

4. Introduction to Metro

2. Sensors / Battery / Developer Tools

1. Windows 8 Overview / Touch

Agenda for this Session


3. Touch for C/C++ developers

4. Touch for .NET developers

2. UltrabookTM / Windows* 8 Features (Hardware, OS, Application) levels

1. What does UltrabookTM / Windows* 8 mean for current developers?

WHAT DOES ULTRABOOKTM / WINDOWS* 8 MEAN FOR CURRENT DEVELOPERS?


Worried about the Windows* 8 transition?

What’s the difference

between an Ultrabook and a

notebook?

Metro?

Desktop?

Do I have to re-write all of my Win32 apps

from scratch?

WinRT?

Do my applications need to support

touch?

How does HTML5* fit into this?

How do I use an Ultrabook’s

sensors?


The world of Windows* 8 • New Metro Style

Applications – Metro style applications have a single,

full-screen window with multiple views

Source: Microsoft


– Run in a desktop UI, with full device and driver compatibility

– Enhance desktop applications to take advantage of UltrabookTM/Windows* 8 features

– Must follow the Metro user experience

– Requires new developer ecosystem

• Desktop applications – Windows* 8 supports

Native Win7 Applications

Metro Style Desktop Style


How Metro and Desktop Work Together

Desktop App Launched from Metro Environment

10

Click Metro tile for iTunes* iTunes Desktop app launches

Legacy Compatibility for IA: • Windows* 8 will support Native Win7 Applications (in “Desktop” UI, with full device and driver

compatibility)

• “Desktop Applications ” will run as is, with no changes required, in the “Desktop” UI mode of Windows* 8

• 4 million+ “legacy” apps supported by IA.

New Metro Style Applications:

• Requires NEW developer ecosystem.

• WinRT* (i.e. Metro* style) applications to be compatible with both x86- and ARM-based systems.

• HTML5/JavaScript and .NET desktop apps expected to be compatible with both x86 and ARM.

x86 + ARM*

x86 Only

Source: Microsoft

Windows* 8 Application Compatibility Expectations:


ULTRABOOKTM / WINDOWS* 8 FEATURES (HARDWARE, OS, APPLICATION LEVELS)


Ultrabook Hardware

Security

Rapid Start Battery Life

Thunderbolt Turbo Boost

Graphics

UltrabookTM is Built to Set Applications Apart

OS

UX Desktop Metro

Touch/Gestures Context Aware Sensors

Near Field Communication Geolocation


Hardware Differentiators

• Graphics performance

• World-class battery life

• Intel® Rapid Start Technology

• Hardware-based security

• Thunderbolt™ Technology

• Intel® Turbo Boost Technology 2.0

Ultrabook Hardware

Security

Rapid Start Battery Life

Thunderbolt Turbo Boost

Graphics


Ivy Bridge Processor Graphics

15

• Integration of graphic and media processing onto the same CPU die • Dedicated hardwired media processing functions

• Maximum media performance at lowest possible power consumption • Highly sophisticated graphic execution units (EU) for high quality graphics

Copyright© 2012, Intel Corporation. All rights reserved. *Other brands and names are the property of their respective owners

Intel® Turbo Boost Technology 2.0


• Performance when you need it • Dynamic overclocking • Don’t need to drain power constantly for all processes • Helps reduce temperature and extends battery power.

OS Differentiators

• Touch- and gesture-based UI

• Context aware sensors

• Near field communication

• Geolocation

OS

Touch/Gestures Context Aware

Sensors

Near Field Communication

Geolocation

Intel Confidential 17


Application Differentiators



Metro Style

Desktop Style

• Metro style applications have a single, full-screen

window with multiple views

• Clean typography and animations

• Fast, fluid touch first experience

• Retains the flexibility of the traditional Windows* Desktop

• Full access to familiar x86 applications and tools

• Provides finer-grained control

• Touch and Sensors can be enabled for all

three styles of application

Metro Style Desktop Style

HTML5 Style

• HTML5* applications can run as Metro applications or as

Desktop in Internet Explorer 9 & 10


Digital Storefronts for Windows* 8

Windows Store* for Metro Apps Intel AppUp ® for Desktop Apps

WINDOWS METRO APIS FOR DESKTOP DEVELOPERS


Application Environment


Model

View

Systems

Services

Metro Style Apps Desktop Apps

HTML JavaScript

C

C++

C#

VB

Internet

Explorer Win32 .NET

HTML CSS

JavaScript (Chakra)

C#, VB C/C++

XAML

WinRT APIs

Application Model

Network & Data

Graphics

&

Media

Devices

&

Printing

Kernel Windows Kernel Services

XAML

WinRT

• API to access to the system (display, file system, sensors, media devices, etc)

– Everything needed for a Metro application

– Desktop applications can use a sub-set of WinRT

• Combine with Win Native or .NET

• Languages: C++, C#, JavaScript and VB

– WinRT HTML or XAML elements are restricted to Metro applications



Desktop apps and Windows Native

• Primarily the same as Win32 on Windows 7 – Computer System Hardware Classes – Installed Application Classes – Operating System Classes – Performance Counter Classes – Security Descriptor Helper Classes – WMI Service Management Classes

• Access to the hardware – Better performance – Less abstraction

• Access to sensors via COM interfaces • Code is unmanaged

– No automated free memory management


Metro API Areas

• Core • Controls • Data and content • Devices • Files and folders • Globalization • Graphics • Helpers • Media

• Networking • Printing • Presentation • Remote Desktop • Security • Social • UI Automation • User Interaction

Underlined items have classes available to desktop applications


APPLICATION DEVELOPMENT WITH TOUCH AND SENSORS ON

ULTRABOOKTM / WINDOWS 8


MAHJONG DEMO HERE


Using touch in a desktop application

• Touch and gestures – Tap/Double tap – Panning with inertia – Selection/Drag – Press and tap – Press and hold

• Do’s and Don’t of gesture interfaces • Demo: Use touch and gestures to select, move and

manipulate three images • The Windows Touch API • Using touch with XMAL

27 Copyright(C) 2012 Intel Corporation. All rights reserved. *Other brands and names are properties of their respective owners.

– Zoom – Rotate – Two-finger tap – Flicks

Adding touch to a desktop application

• Touch is not a mouse • Make touch targets large enough • Support standard gestures and behaviors • Portrait vs. Landscape • Do not use touch just for touch’s sake • Touch should be forgiving • Microsoft User Experience Guidelines

– msdn.microsoft.com/en-us/library/windows/desktop/cc872774.aspx

– blogs.msdn.com/b/ie/archive/2012/04/20/guidelines-for-building-touch-friendly-sites.aspx


Designing for Touch User Experience

• Design UI to include traditional laptop style and tablet mode usages

• Space and size controls to register fuzzy touch input – Common Controls: 23X23 pixels – Command Controls: 40X40 pixels

• Use multiple form tabs for touch efficiency • Consider the target size while designing your

application UI • Use natural and intuitive controls • Ultrabook Optimal Resolution: 1366X768 Source: MSDN http://msdn.microsoft.com/en-us/library/windows/desktop/cc872774.aspx#guidelines

Copyright(C) 2012 Intel Corporation. All rights reserved. *Other brands and names are properties of their respective owners. 29

http://msdn.microsoft.com/en-us/library/windows/desktop/cc872774.aspx




• Use common controls as much as possible

• Choose custom controls that support touch

• Prefer constrained controls to unconstrained controls

• Provide default values and auto text-completion

• Use check boxes instead of multiple selection lists

Source: MSDN http://msdn.microsoft.com/en-us/library/windows/desktop/cc872774.aspx#guidelines







• Place controls in areas better utilized for touch

• Command controls should be more easily accessible


Using Windows Touch API • Touch and gesture events are delivered via Windows

Touch messages – Windows must register for Windows Touch input

• WM_TOUCH reports action, position and identifier • WM_GESTURE describes the gesture via GESTUREINFO

structure • Special interfaces to help process gesture messages

– IManipulationProcessor – IInertiaProcessor

• API reference at msdn.microsoft.com/en-us/library/windows/desktop/dd371406%28v=vs.85%29.aspx


Sensors and Windows Native

• Sensor manager controls sensors – Use sensor manager to get to sensors – Notifies when a sensor connects

• Sensors report data, changes in state and disconnection

• Access both via COM interfaces – Use API to communicate to sensors – Sensor events handled using callbacks – API reference at msdn.microsoft.com/en-

us/library/windows/desktop/dd318953%28v=vs.85%29.aspx


WinNative: Receive gesture message

LRESULT CALLBACK WndProc(…)

{ … switch (message) { case WM_GESTURE: // Call code to // interpret the // gesture return DecodeGesture(…); … }


(Source: Microsoft)

• Check for WM_GESTURE message in WndProc

WinNative: Process gesture

LRESULT DecodeGesture(…)

{

…

BOOL bResult = GetGestureInfo(…);

BOOL bHandled = FALSE;

if (bResult)

{

// now interpret the gesture

switch (gi.dwID){

case GID_ZOOM :

// Code for zooming goes here

bHandled = TRUE;

break;

case GID_PAN :

…

case GID_ROTATE :

…

case GID_TWOFINGERTAP:

…

case GID_PRESSANDTAP:

…

default:

// A gesture was not recognized

break;

} …


• Retrieve the additional gesture information from the GESTUREINFO structure

• Handle each of the possible gestures

(Source: Microsoft)

Demo

• Metro application

– Full screen

– Borderless window

• Desktop application

– Runs in desktop environment

– Multiple windows

– Can support touch and sensors


Source: Microsoft

Using touch and XAML/.NET

• XAML provides access to WPF touch-enabled UI components – WPF touchs event are available in both Windows* 7 and

Windows* 8.

• Typical gesture events: – ManipulationStarting

– ManipulationDelta

– ManipulationInertiaStarting


XAML: TouchControl.xaml

<UserControl x:Class="Win8Demo.TouchControl"

…>

<Grid x:Name="cont" ClipToBounds="True" >



<Image x:Name="photo_1"

Source="/Assets/ultrabook1.png“

IsManipulationEnabled="True"

Width="500" />

<Image x:Name="photo_2“


IsManipulationEnabled="True“

Width="500" Margin="125,-79,25,79"/>

<Image x:Name="photo_3“


IsManipulationEnabled="True“

Width="500" Margin="0,-59,150,59" />

</Grid>

</UserControl>


• Three images placed in a Grid inside of a TouchControl

• Each image has IsManipulationEnabled set to true

Touch Event State Diagram


Manipulation Starting

Manipulation Delta

Manipulation Inertia Starting

Manipulation Delta

w/ Inertia

ManipulationCompleted

Events begin with User Touching the Image

User finger is touching the

screen

User finger is lifted from the screen

XAML: TouchControl.xaml.cs

public TouchControl()

{

…

//Register for manipulation events

photo_1.ManipulationStarting +=

m_rect_ManipulationStarting;

photo_1.ManipulationDelta +=

m_rect_ManipulationDelta;

photo_1.ManipulationInertiaStarting +=

m_rect_ManipulationInertiaStarting;

photo_2.ManipulationStarting += …

photo_3.ManipulationStarting += …

}


• Add event handlers to

each image for: •ManipulationStarting •ManipulationDelta •ManipulationInertiaStarting




Manipulation Delta


Manipulation Delta

w/ Inertia




screen


XAML: Manipulation starting event handler

void

m_rect_ManipulationStarting

(…)

{

…

e.ManipulationContainer =

this;

}


• ManipulationStarting event handler is called at start of touch event

• By setting Manipulation-Container to the touched image all subsequent manipulation events will be relative to that element




Manipulation Delta


Manipulation Delta

w/ Inertia




screen


XAML: Manipulation delta event handler

void m_rect_ManipulationDelta(…)

{

…

//Get the manipulation’s delta

var delta = e.DeltaManipulation;

//Compute the transformed center point

Point rectCenter = new Point(rect.ActualWidth *

0.5, rect.ActualHeight * 0.5);

rectCenter = matrix.Transform(rectCenter);

//Adjust the element’s scale, rotation and

translation

matrix.ScaleAt(delta.Scale.X, delta.Scale.Y,

rectCenter.X, rectCenter.Y);

matrix.RotateAt(delta.Rotation, rectCenter.X,

rectCenter.Y);

matrix.Translate(delta.Translation.X,

delta.Translation.Y);

//Update the element’s render transformation

rect.RenderTransform =

new MatrixTransform(matrix);

e.Handled = true;


• ManipulationDelta event happens as user moves fingers

• Compute new image center point, scale, and rotation using event data

• Set Handled to true so other handlers don’t process same event




Manipulation Delta


Manipulation Delta

w/ Inertia




screen


XAML: Inertia starting event handler

void m_rect_ManipulationInertiaStarting(…)

{

//Set the manipulations inertia values

e.TranslationBehavior = new

InertiaTranslationBehavior()

{

InitialVelocity =

e.InitialVelocities.LinearVelocity,

DesiredDeceleration =…

};

e.ExpansionBehavior = new

InertiaExpansionBehavior()

{

InitialVelocity =

e.InitialVelocities.ExpansionVelocity,

DesiredDeceleration = …

};

e.RotationBehavior = new

InertiaRotationBehavior()

{

InitialVelocity =

e.InitialVelocities.AngularVelocity,

DesiredDeceleration = …

};

e.Handled = true;…


• Inertia actions are handled by the ManipulationInertiaStarting event handler

• Define the behavior of the inertia by specifying • Linear velocity • Deceleration • Expansion velocity (used in

pinch or spread) • Angular velocity (used in

rotation)

• Again, set Handled to true so other handlers don’t process same event




Manipulation Delta


Manipulation Delta

w/ Inertia




screen


XAML: Handle inertia manipulation

if (e.IsInertial)

{

//Get the containing element’s size

Rect containingRect = …

(e.ManipulationContainer).RenderSize);

//Get the transformed element’s new

//bounds

Rect shapeBounds =

rect.RenderTransform.TransformBounds

(…);

//If element falls out of bounds

if

(!containingRect.Contains(shapeBounds))

{

//Report boundary feedback

e.ReportBoundaryFeedback(…);

//Stop any after inertia

e.Complete();

}

}

…


• Check if inertia is moving the

image across the grid

• If so, make sure image does not

travel outside of the grid by

calling the Complete method to

end the inertia

References

• Intel Ultrabook™ Community

• Intel® Software Network – software.intel.com

• Windows Development Reference – msdn.microsoft.com/en-

us/library/windows/desktop/hh447209%28v=vs.85%29.aspx

• WinRT API Reference – msdn.microsoft.com/en-

us/library/windows/apps/br211377.aspx


Q & A


introduction to developing · desktop apps and windows native • primarily the same as win32 on...

Documents