Windows 7: Building Next Generation UI with Multitouch & Windows Ribbon

LYNN LANGITDEVELOPER EVANGELIST – MICROSOFT

HTTP://BLOGS.MSDN.COM/SOCALDEVGAL

Ribbon Markup and API Windows 7 Multitouch Overview Developing Multitouch Application

Today’s Agenda

Taking your application to the next level with Windows 7

Building next generation UI with Multitouch & Windows Ribbon in Windows 7

Beyond human interaction with Windows 7 Sensor & Location Platform

Consistency Counts

The Ribbon

4

Quick Access Toolbar

Help

Microsoft ® Office 2007 Ribbon

Office Button

TabContextual Tab Set

Contextual Tab

Group (aka “Chunk”)

Dialog Box Launcher

5

Windows Scenic Ribbon

Quick Access Toolbar

Help

Office Button

TabContextual Tab Set

Contextual Tab

Group (aka “Chunk”)

Dialog Box Launcher

In-box with Windows® 7, redistribution available to Windows Vista®

Win32 API, COM-based (targets native developers first) Feature parity (or close) with Microsoft Office 2007 Ribbon

The Ribbon Landscape

Microsoft’s Ribbon Strategy

MFC ScenicWPF

Target:Managed

Target:MFC native

Target:Native

needs .NET Framework 3.5

Windows 2000 or later

Windows Vista or later

Office 2007 and Windows styles

Office 2007 and Windows styles

Windows visual style

Coming soon…Official release in 2009

Available now in Visual Studio® 2008 SP1

Ships with Windows 7

1 Office 2007 style available now,  Windows style available 2009

7

Windows Ribbon API Architecture

Strong Model-View-Controller separation Code and markup decoupling Small C++ API surface

MarkupOrganization of

controls

<Ribbon> <Tab> <Button … /> </Tab></Ribbon>

COM APIInitialization andevents handling

MyHandler::Execute(…){DoStuff();}

Windows Scenic Ribbon Application-specific business

logic

void DoStuff() { … … }

Windows Ribbon Controls

Categorized menus

Tabs and groups

Color pickersMini toolbar andcontextual menu

Dropdown galleries Tooltips

Check boxes

Spinners

Help buttonFont control

Group dialog launchers“In-Ribbon” galleries

Combo boxes

Buttons & split buttons

9

Ribbon MarkupCommands Section XAML-based. Consists of two sections: commands and views

Command elements specify a name (ref. in the views section), a label, an image (.bmp only) and tooltip. An ID (number) may also be specified

<?xmlversion="1.0" encoding="utf-8"?><Applicationxmlns='http://schemas.microsoft.com/windows/2009/Scenic/Intent'> <Application.Commands> <CommandName='Home' LabelTitle='Home'/> <CommandName='HomePage' LabelTitle='HomePage'> <Command.LargeImages> <ImageSource='res/HomePageHH.bmp'/> </Command.LargeImages> </Command> </Application.Commands>

10

Ribbon Markup Views Section Specifies the organization of commands into tabs, groups,

quick access toolbar, and application menu Specifies the controls to use for each command

<Application.Views> <Ribbon> <Ribbon.Tabs> <TabCommandName='Home'> <GroupCommandName='GoHomePage' SizeDefinition='OneButton'> <ButtonCommandName='HomePage'/> </Group> </Tab> </Ribbon.Tabs> </Ribbon> </Application.Views></Application>

11

More About Views

Windows Ribbon supports two types of views: the ribbon view and the contextual UI view

The contextual UI provides a richer context system than previously available

12

Application Modes

You may wish to hide some controls in different modes of your application In Microsoft Paint, the Text tab should only be

available when editing text In the markup, define the application

modes in which a control is available

Propagates to child controls In code, call the IUIFrameworkSetModes

function Bit mask. 0 is the default mode

<ButtonCommandName='Paste' ApplicationModes='1,3'/>

Windows 7 Ribbon

demo

The Future is here!

Windows 7Multi-Touch

3 things to know….

the screens

the hardware

the software

16

Screens - How to touch

Resistive Think Push Down and drag

17

Screens - How to touch

Capacitive Think Electric Impulse

18

Screens - How to touch

Infrared Think laser pointer(s)

Multi-Touch Hardware Available Now

CapacitiveHP Touchsmart tx2N-trig (2-10)

InfraredHP Touchsmart IQ816NewWindow(2)

CapacitiveDell LatitudeXT2N-Trig (2-10)

20

Multi-Touch Development TiersGood – Better – Best

Windows application can target one of three levels of touch integration Good: No specific touch APIs are used but the

application UI is appropriately sized and works well with the built-in gestures

Better: The gesture APIs are supported to give smooth natural interactions

Best: Deep touch-focused experiences designed to take advantage of multi-touch features

Best

Better

Good

WM_Touch – WM_Gesture

PC’s, Form Factors, Technology

Easy to Write code now

WM_Touch

Windows7.Multitouch

Windows7.Multitouch.WPF

Massive Multi-touch, Multi-user

PC’s, Form Factors, Technology

Easier to Write code soon

// Private data members private int x; // touch x client coordinate in pixels private int y; // touch y client coordinate in pixels private int id; // contact ID private int mask; // mask which fields in the structure are valid private int flags; // flags private int time; // touch event time private int contactX; // x size of the contact area in pixels private int contactY; // y size of the contact area in pixels

protected event EventHandler<WMTouchEventArgs> Touchdown; // touch down event handler protected event EventHandler<WMTouchEventArgs> Touchup; // touch up event handler protected event EventHandler<WMTouchEventArgs> TouchMove; // touch move event handler

The API

Windows 7 With Windows Touch

demo

More Information

Multi-Touch Systems that I Have Known and Loved http://www.billbuxton.com/multitouchOverview.h

tml Mike Taulty’s Blog http://bit.ly/NKVTN Example Photo App http://bit.ly/d4eE9

Summary

Modernize your user interface with Windows Ribbon Simplify features discoverability and user

usability

Windows Touch is here! Hardware is ready Consumers want it

Has a “cool” factor Flexible and extensible

programming modules

Also in Windows 7

We’ve covered the main areas, but there are so many additional features in Windows 7 Federated Search Windows Web Services Internet Explorer® 8 Windows PowerShell™ 2.0 Windows Biometric Framework MSI 5.0 Windows Animation Framework XPS Document Support Other …

Learn More About Windows 7

Technical Resources

Community Resources

Windows 7 Blog for Developers www.windowsteamblog.com/blogs/developers.aspx

Windows 7 on Channel 9 http://channel9.msdn.com/tags/Windows+7

Windows Developer Center on MSDN http://msdn.microsoft.com/en-us/windows/dd433113.aspx

Windows Application Compatibility Developer Center http://www.msdn.microsoft.com/en-us/windows/aa904987.aspx

Windows 7 Remediation Labs http://www.readyset7.com/workshops

Windows 7 Training Kit for Developershttp://go.microsoft.com/?linkid=9681321

“PhotoView” Reference Application (XP2Win7Project) http://code.msdn.microsoft.com/XP2Win7

SoCal Windows 7 Developer ResourcesTechnical Resources

Underground @PDC – Wed, Nov 18 – 7pm until late

CodeCampLA – Sat/Sun, Nov 20 – 21 - http://www.lacodecamp.com/

Slides – http://blogs.msdn.com/SoCalDevGal

Code samples – my blog (as above)

Recordings – from San Diego MSDN event – watch my blog for the link

Conference – PDC09 – Nov 17-19 in LA - http://microsoftpdc.com/

PreCon – FREE – Windows 7 Developer Bootcamp @PDC09 – Mon, Nov 16 in LA – must register http://microsoftpdc.com/Registration

Lynn’s blog series – http://blogs.msdn.com/SoCalDevGal #Win7DevSeries

Training Resources

Community Events