Microsoft Longhorn

Longhorn User Experience: 

Christopher Baldwin Architect Evangelist Microsoft EMEA DPE Longhorn User Experience

Agenda: 

Presentation Data Communication Base Operating System Services Agenda

Foundations for Creativity: 

Foundations for Creativity Change New things become possible Experience We understand the problems better We learn which solutions work and which don’t

Longhorn Architecture: 

Presentation Data Communication Base Operating System Services Longhorn Architecture

Presentation: 

Presentation Change Ubiquitous, powerful graphics processing units (GPUs) Better, more diverse monitors Experience People like web applications The line between application user interface (UI), documents, and media has blurred

Choosing a Client: 

Choosing a Client Browser Windows Forms

Avalon: 

Avalon Empower Developers Flexible Framework Best of the Web / Desktop Integrating documents and UI Leveraging local machine

Avalon: UI Basics: 

Avalon: UI Basics A UI is built from elements, including: Panels: page layout and containers for other elements Controls: user interaction Shapes: vector graphics Documents: document structure Elements have properties So behavior and appearance can be customized Elements raise events

Avalon: Illustrating An Application: 

UI Avalon: Illustrating An Application Code or XAML

Avalon: UI Using XAML: 

Avalon: UI Using XAML <FlowPanel xmlns= "http://schemas.microsoft.com/2003/xaml“ > <Button Background=“Green“ Click=“EventY“> Yes </Button> <Button Background=“Red“ Click=“EventN“> No </Button> </FlowPanel> XAML

Avalon: Describing XAML: 

An XML-based markup language for: Application user interfaces Documents XAML elements correspond to Avalon classes, so <Button Background="Red“ /> No </Button> could also be expressed as Button btn = new Button(); btn.Background = Brushes.Red; btn.Content = “No"; Avalon: Describing XAML

XAML Fundamentals: 

XAML Fundamentals Mark-up = Object Model XAML (Extensible Application Markup Language) Provides additional way to author content/applications. Applications can be pure mark-up, pure code or a combination of both (C#, VB.NET etc) Potential separation of UI and procedural code UI can be developed by graphics design artists Toolable by design

XAML Basics: 

XAML Basics

Panels: 

Panels Control the rendering of elements size, dimensions, their position, behavior Rendering is controlled by properties Avalon has support for 6 panels Everything in XAML uses panels <Border BorderBrush = “Green: Background = “Lavender” BorderTickness=“20” Width=“100%” Height=“100%” />

Avalon Panels: 

Avalon Panels Canvas Child elements explicitly placed relative to Canvas (x,y coordinates) DockPanel Child elements aligned to top, bottom, left, right, centre. FlowPanel Child elements arranged according to line breaks TextPanel Multiple lines of text in multiple text formats GridPanel Child elements arranged in rows/columns FixedPanel Child elements on fixed layout page (always same position regardless of device)

Panels: 

Panels

Avalon: Single Page Apps: 

Avalon: Single Page Apps

Avalon: Multi-Page Apps: 

Avalon: Multi-Page Apps NavigationApplication Page1.xaml <TextPanel … > . . . </TextPanel> XAML public class Logic1 { . . . } Code PageN.xaml <FlowPanel … > . . . <HyperLink NavigateUri ="Page1.xaml"> Home </HyperLink> . . . </FlowPanel> XAML public class LogicN { . . . } Code . . .

Choosing a main app class: 

Choosing a main app class Application User multitasks between many activities at once Offers very fast access to large number of tools NavigationApplication Presents large volume of interrelated information Progression through activities—user finishes one thing before starting another Often guides user Integrates with web pages

Navigation Types: 

Navigation Types Explorer App runs inside the standard Explorer frame User can browse into and out of your app’s pages Has many links to other apps or sites NavigationWindow Application runs in its own window App’s pages form self-contained world App used for long stretches of time Helps user perform their dedicated job function Default window style can be overridden for complete control

Applications: 

Applications

Avalon: Document Basics: 

Avalon: Document Basics XAML can be used to define documents for: Viewing Printing XAML documents can be: Fixed format Flow Adaptive flow, with Changing font sizes Differing numbers of columns Hyphenation More

Avalon: An Example XAML Document: 

Avalon: An Example XAML Document <Document xmlns="http://schemas.microsoft.com/2003/xaml"> <AdaptiveMetricsContext FontFamily="Arial" ColumnPreference=“Low“> <TextPanel Hyphenation=“true”> <Section> <Heading>A XAML Document</Heading> <Paragraph> Here’s a <Bold>paragraph</Bold>. </Paragraph> </Section> </TextPanel> </AdaptiveMetricsContext> </Document> AdaptiveFlowDoc.xaml

Documents: 

Documents Not just a Scroll world any more Different views, same data Designed to enhance the reading experience Adaptive Flow Fixed Layout

Documents: 

Documents

Today’s Multimedia APIs: 

Today’s Multimedia APIs Multiple SDKs SDKs have overlap and gaps and do not derive from a common base technology Difficult to integrate components from each into cohesive solution Overly Complex Architecture ISVs are often forced to make big investments for relatively simple solutions Poor factored access Hard to get at bits and functionality, large footprint required for simple needs Where’s the .Net? Few managed APIs are available for multimedia

Avalon: Media Basics: 

Avalon: Media Basics UIs and documents can contain various kinds of media

Animation: 

Animation Attract users attention Change properties over time Color Angle Width Size Location Opacity Can be XAML or code <Button.Background> <SolidColorBrush Color="Blue"> <SolidColorBrush.ColorAnimations> <ColorAnimation From="Red" To="Blue" Duration="7" RepeatCount="500“ AutoReverse="True"/> </SolidColorBrush.ColorAnimations> </SolidColorBrush> </Button.Background>

Audio, Video & Animation: 

Audio, Video & Animation

The look and feel: 

The look and feel Theme Look defined by the operating system Applies to all applications Helps support system-wide consistent application look and feel Style Look defined by application author Only applies to single application Helps support application-wide consistent look and feel

Setting Property Values: 

Setting Property Values Simplest form of styling is by setting properties directly Not very flexible You can use a <Style> instead. flexible “As use” syntax Can be applied on a document by document basis Hosted on a server and shared

Styles: 

Styles

Sidebar: 

Sidebar

Sidebar tiles: 

Sidebar tiles Peripheral awareness Live data Minimal controls User controls which tiles appear and where Consumes valuable screen real estate — make the tile worth it!

Sidebar flyout: 

Sidebar flyout Quick access to more details and controls Made for one quick interaction

Sidebar icons: 

Sidebar icons For very compact representation of status Regular tiles that can’t fit also take on icon form Not a launcher

Efficiency in sidebar tiles: 

Efficiency in sidebar tiles Make tile as small as possible Auto-hide controls Tile should be self-explanatory Don’t show a title Minimum text Branding in flyout, not in tile Info is live, detailed, contextual, useful Okay: “5:00–6:15 pm Presentation” Better: “In 5 minutes: Presentation” Hide tile if there’s nothing to show

Avalon: What To Do Now: 

Avalon: What To Do Now Use managed code Build and deploy Windows Forms applications Use No-Touch Deployment Separate visual presentation from application logic It will help when you replace your visuals for Longhorn

Longhorn Architecture: 

Presentation Data Communication Base Operating System Services Longhorn Architecture

Data: 

Data Change Much cheaper disk space Much more data And much more diverse data Experience We can’t find things Organizing by folders isn’t enough Applications don’t share data well

Illustrating NTFS: 

Illustrating NTFS File File File File File File

WinFS: Basics: 

WinFS: Basics WinFS stores items Items have properties Properties can be integers, strings, XML, etc. An item’s properties depend on its type Each item type is defined by a schema An item’s schema can be extended An item might have a file stream But it’s not required Items are associated via relationships

Illustrating WinFS: 

Illustrating WinFS Item 1 Item 2 Item 3 . . . . . . Properties Item N WinFS

WinFS: Example Types: 

WinFS: Example Types Item Types Properties

WinFS: Example Relationships: 

WinFS: Example Relationships

WinFS: Where It’s Applied: 

WinFS: Where It’s Applied Desktop My Documents . . . My Computer Local Disk (C:) My Pictures Program Files . . .

WinFS: Application Interfaces: 

WinFS: Application Interfaces NTFS WinFS Application

WinFS: 

WinFS

WinFS: What To Do Now: 

WinFS: What To Do Now Use managed code Look at the draft WinFS item schemas http://msdn.microsoft.com/ longhorn/understanding/pillars/winfs Do they meet your needs?

Key Longhorn Ideas (1): 

Key Longhorn Ideas (1) Improved fundamentals Especially security Much better client applications with Avalon Combining the good things from web-based and Windows applications Schematized data with WinFS For better storage, searching, and sharing

Key Longhorn Ideas (2): 

Key Longhorn Ideas (2) Service-oriented applications with Indigo And interoperability with non-Windows systems A common API with WinFX Managed code everywhere

Between Today and Longhorn: Whidbey: 

Between Today and Longhorn: Whidbey The Whidbey release of Visual Studio and the .NET Framework is scheduled to ship late this year It includes: Version 2 of ASP.NET New language features, e.g., Edit and Continue, generics The first release of ClickOnce installation Tools for SOA design

Ranking Creativity: 

Ranking Creativity Idea Leadership 1980s 1990s 2000s