Building_The_Next-Generation_UI - Multitouch and Ribbon


Published on

Building_The_Next-Generation_UI - Multitouch and Ribbon

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • This is the last of three Windows® 7 sessions that we’ve had today. Through these sessions we’ve show you how you can take advantage of the features in our newest Operation System, Windows 7. Our goal is to show you the value in Windows 7, the power built into the features to enable you to unlock new scenarios and enhance existing ones. During the first session, you saw what it takes to build great Windows 7 Applications and how to optimize them. In this session we talked about creating dynamic and adoptive UI using Windows 7 Location and Sensor platform as well as getting the most out of your graphics cards. This is the last session. In this session which we talk about creating modern Application using Windows® Ribbon and enhancing interactions with Multitouch.
  • During the first session you saw what it takes to build a great Windows® 7 Application. We are not going to repeat everything, however it is important to note that: • First, you need to make sure your Application is compatible with Windows 7. There is no escape from this; it is essential that you make sure that your Application runs properly on Windows 7, whether you are a managed or native developer. So please make sure your Application is Windows 7 compatible. Second, after verifying that your Application can install and run on Windows 7 ,it is time to become a good Windows 7 Citizen by stepping up and optimizing your Application’s user experiences and performance to its best while running on Windows 7. This first two steps are what users will expect from your Application, that is to install and run “properly” on Windows 7. Finally, you can differentiate yourself from the competition. You can get more of your Application while running on Windows 7. This session is all about making a difference using Multitouch and Windows® Ribbon.
  • Since Windows® Ribbon was introduced with Microsoft® Office 2007, it looks like everyone wants to use it. The Ribbon is a powerful new paradigm that empowers Users to take control over their Applications and drive to results. No more lengthy menus and pop-ups that clutter the view and make it difficult to get the most of your Applications. By adding a Ribbon you can give your Application a modern look and feel, but also provide powerful new UI functionality, and enable greater functionality discoverability In Windows® 7 the Ribbon is part of the Operating System and it is has about 99% feature parity with the Microsoft Office Ribbon. Talk a little about the different controls” Group, Galleries and such… Some of the Applications that ship in the box with Windows 7 like WordPad and Paint include a Ribbon interface, and you will see more and more Applications using the Ribbon. Furthermore, in Windows 7 we transformed the Ribbon into a platform, enabling developers to take advantage of the Ribbon infrastructure provided in the box with Windows 7. This Ribbon will be also redistributed to Windows® Vista for backwards compatibility. The existing and future Ribbon landscape will include: WPF Ribbon – to be released MFC Ribbon available in Visual Studio 2008 SP1 Windows® 7 Scenic Ribbon – ships with Windows 7, also used by Microsoft® Office 2010 Microsoft® Office 2007 Ribbon – not available stand-alone for Application developers
  • Windows® Ribbon elements are specified in a markup file similar to the WPF XAML, but somewhat more limited in functionality (e.g. no code inside the markup) One section of the markup specifies the commands themselves with names, labels, images, tooltips etc. Another section of the markup specifies the views, i.e. how commands are organized into groups, what the Application menu contains, etc. This entire architecture encourages a very clear-cut separation of view-controller, and is very command-oriented. There’s also the possibility to display a contextual UI using the same commands (e.g. see Word context menu). There are multiple useful controls but bear in mind that the Ribbon can’t contain a custom Win32 control – the entire Ribbon is custom-drawn, and only the in-box Ribbon controls can be embedded in it. The markup file is compiled using the UICC tool (from Windows SDK) and then linked together with the Application as an embedded resource, a header file is also generated with the #defines of the various commands etc. The Application uses the Ribbon COM APIs and uses that embedded resource to initialize the Ribbon. The Application registers for events using command handlers that are invoked by the Ribbon framework.
  • See demo script
  • To provide well-rounded Windows® Touch solutions for all kind of Applications, the Windows Touch Platform provides various levels of support. There are several scenarios by which you can enhance Applications using the Windows Touch Platform features. Before you adopt a specific approach, you should consider what exactly you want to do with your Application Let’s assume you already have an existing Application with a large install base. You might ask yourself, what will be my Users Multitouch experience when running the Application on a Windows® 7 Multitouch-enabled computer? The good news is that the Windows 7 Multitouch Platform provides a free out-of-the-box experience for Applications that are touch-unaware and were not designed to support Multitouch. Specifically, it provides free, out-of-the-box support for a few basic gestures. In other words, you can expect a few basic gestures to work and to have the desired effect in your Application. Basic gestures include single finger or two fingers panning, two fingers zoom, and flick gestures that were introduced in the Windows® Vista time frame. [CLICK] The first approach - the Good option, is all about providing support to Applications that were not designed to support touch. These are legacy Applications. And don’t get me wrong, by legacy I mean any Application that was not developed to support Windows® 7 with Multitouch – that is about 99.999% of existing Applications today Explain the out of the box base functionality One sentence on controls
  • See demo script
  • The second development tier is providing support for basic gestures Applications that fall into this category are adding custom Multitouch support that supersedes the one we just saw in as the default out of the box Here you can apply your own custom logic to the gesture and not rely on the default out-of-the-box behavior There are six predefined gestures that are supported Pan in 2 D space Zoom Rotate Tap and double tap Touch and tap For native developers, you need to work with WM_GESTURE messages … For managed code there are few options Today, you will need to choose some out of a band library that supports Multitouch for WPF 3.5 In the near future, you will be able to use WPF 4.0 with…
  • Start by showing the Windows ® 7 Desktop Right click with the mouse on Microsoft ® Word or Microsoft ® PowerPoint (whichever has enough items in the jump list) Then use touch to show the Jump List Touch the icon and drag up Launch Windows ® Explorer (by default it should show all the libraries – preset to make them large icons) Double touch the picture library Chose one picture  this launches the shipped-in-the-box Windows ® Photo Viewer Zoom to specific area of the picture Pan Zoom out and in again on a different location  you can’t achieve that with the default behavior of Windows 7 MT support Launch the default XPS viewer with a predefined XPS doc (large enough to show the effects) Scroll and select text just to show you can  but the nice functionality start when you zoom out, which allow you to navigate quickly to pages in the doc that you are familiar with. Like let’s say I am looking for a picture or some code…. Zoom out until you see the pages side by side  here you can see a complete view of the document, but unlike Microsoft Word, click on page zooms back into the context of that page. So now let’s see what does it take to build such an app Launch VS Show the native SDK sample that draw a picture just like the Windows Photo Viewer Show the Wndproc Show the WM_GESTURE message Show the decoding of the message Add Zoom Gesture handler Show the extra info about zoom center and such Run and zoom Add all other gestures Show very briefly Run and show the full app  while this is very powerful and functional, there are few limitations The gestures are up to 2 fingers Can’t combine gestures And you have to work with the predefined set of gestures
  • The best-case scenario is when Applications are designed from the ground up to support Multitouch. These Applications build on top of the Windows® Messages Touch message, WM_TOUCH. This message provides raw touch data to the Application, and you can consume these messages and handle multiple touch points. Most gestures that we mentioned previously are two-finger gestures, where with WM_TOUCH messages you can receive as many simultaneous touch points as your underlying touch sensitive hardware supports. This is the best Multitouch approach enable you to overcome all the caveats we just mentioned From functionality standpoint you have full control, interpreting the Users touch gestures as you see fit The system support as many touch points as the actual hardware supports But you need to decode these raw touch points event data and decided for yourself what gestures (or gestures) did the User perform. The Windows® 7 Touch Platform also provides manipulation and inertia processors to help you interpret the touch messages. Think of manipulation as a black-box that receives as input the object that is being touched and all the related touch messages. The result is a 2D affine transform matrix representing the transformation that happened as a result of the finger movement. For instance, if you were writing a photo-editing Application, you could grab two photos at the same time using however many fingers you wanted to rotate, resize, and translate the photos, and the manipulation process provides the changes you need to reflect on the object. Inertia provides a very basic physics model for Applications and provides you with an easy way to continue the smooth transition of an object even after you picked up your fingers from the touch- sensitive device, to create a simple transition effect rather than stopping the object on the spot For native developers … . For Managed developers … .
  • See demo script
  • See demo script
  • See demo script
  • There are lots of other features that we didn’t have time to cover during these three sessions. Among them: Search Federation – use the Windows® Explorer search facilities to connect with intranet and Internet web services for providing search information inside and outside the organization. Windows® Web Services – a set of Win32 APIs that allow native developers to build and communicate with web services supporting various protocol stacks including simple HTTP web services as well as WS-* protocols Internet Explorer® 8 – speaks for itself Windows® PowerShell™ 2.0 – the new version of the scripting language and environment that brings .NET to the scripting world Windows Biometric Framework – OS support for biometric devices including a CPL applet MSI 5.0 – new installer-related technologies (whatever they may be) Windows Animation Framework – bundled in the “Scenic” bunch there’s a framework for defining animation in Win32 apps XPS Document Support – including printing and rendering of XPS documents programmatically For more information about these features, see the Resources section.
  • Building_The_Next-Generation_UI - Multitouch and Ribbon

    1. 2. Beyond Human Interaction with Windows 7 Sensor & Location Platform
    2. 3. <ul><li>Multitouch </li></ul><ul><li>Windows Ribbon </li></ul><ul><li>Sensors </li></ul><ul><li>Windows Taskbar </li></ul><ul><li>Libraries </li></ul><ul><li>Fundamentals </li></ul><ul><li>Version Control </li></ul><ul><li>User Account Control </li></ul><ul><li>Removed Components </li></ul>Get Compatible Optimize Differentiate
    3. 4. Help Button Contextual Tab Contextual Tab Group Tab Quick Access Toolbar Application Menu Group
    4. 5. void DoStuff() { … … } MyHandler::Execute(…) { DoStuff(); } <Ribbon> <Tab> <Button … /> </Tab> </Ribbon>
    5. 7. <ul><li>Developer Platform </li></ul><ul><ul><li>At the root is the touch developer platform that exposes touch APIs for any application </li></ul></ul><ul><li>UI Enhancements </li></ul><ul><ul><li>Focusing on core scenarios, many parts of the core UI optimized for touch experiences </li></ul></ul><ul><li>Gestures </li></ul><ul><ul><li>Multitouch gestures enable consistent panning and zooming in most applications </li></ul></ul><ul><li>Applications </li></ul><ul><ul><li>Powerful Multitouch-focused applications to ship separately from Windows 7 </li></ul></ul><ul><li>Navigating and consuming the Web </li></ul><ul><li>Reading and sorting email </li></ul><ul><li>Viewing photos </li></ul><ul><li>Playing casual games </li></ul><ul><li>Consuming music and video </li></ul><ul><li>Navigating files and arranging windows </li></ul><ul><li>Using Microsoft Office Applications </li></ul>
    6. 8. <ul><li>It’s Free! </li></ul><ul><li>Panning/zoom gestures </li></ul><ul><li>Right-click gesture </li></ul><ul><li>Standard Controls with scrollbars </li></ul><ul><li>Standard Controls with scrollbars </li></ul>
    7. 10. <ul><li>It’s Free! </li></ul><ul><li>Panning/zoom gestures </li></ul><ul><li>Right-click gesture </li></ul><ul><li>Standard Controls with scrollbars </li></ul><ul><li>Standard Controls with scrollbars </li></ul><ul><li>Gesture notifications Pan/ Zoom/ Rotate/ Click / Double clic </li></ul><ul><li>WM_GESTURE Message </li></ul><ul><li>WPF 3.5 SP1 API + CodePack </li></ul><ul><li>WPF 4.0 full support + Controls </li></ul>
    8. 12. <ul><li>It’s Free! </li></ul><ul><li>Panning/zoom gestures </li></ul><ul><li>Right-click gesture </li></ul><ul><li>Standard Controls with scrollbars </li></ul><ul><li>Standard Controls with scrollbars </li></ul><ul><li>Gesture notifications pan/zoom/rotate/click/ double click etc </li></ul><ul><li>WM_GESTURE Message </li></ul><ul><li>WPF 3.5 SP1 API + CodePack </li></ul><ul><li>WPF 4.0 full support + Controls </li></ul><ul><li>Full raw touch input </li></ul><ul><li>Custom gestures </li></ul><ul><li>WM_TOUCH message </li></ul><ul><li>Manipulation and Inertia processors </li></ul><ul><li>Manipulation and Inertia processors via COM interoperability </li></ul><ul><li>Touch events </li></ul><ul><li>WPF 4.0 Manipulation </li></ul><ul><li>and Inertia processors </li></ul>