Windows 8 Overivew and Qualifying a Metro Style Application
Upcoming SlideShare
Loading in...5
×
 

Windows 8 Overivew and Qualifying a Metro Style Application

on

  • 119 views

An overview of the Windows 8 OS.

An overview of the Windows 8 OS.
Qualifying a “Metro style application”.
From a user perspective.
From a developer perspective.
From a business perspective.

Statistics

Views

Total Views
119
Views on SlideShare
117
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Windows 8 Overivew and Qualifying a Metro Style Application Windows 8 Overivew and Qualifying a Metro Style Application Presentation Transcript

  • An Intertech Course A Tour of Windows 8, Metro and WinRT Andrew Troelsen
  • Oxygen Blast Series Slide 2 @IntertechInc #oxygenblast Intertech Training  Training through hands-on, real world business examples.  Our site, your site, or live online – globally.  Agile/Scrum, Citrix, VMware, Oracle, IBM, Microsoft, Java/Open Source, and web and mobile technologies. Consulting  Design and develop software that powers businesses and governments of all sizes.  On-site consulting, outsourcing, and mentoring.  Agile, .NET, Java, SQL Server, mobile development including iPhone and Android platforms and more…. Instructors Who Consult, Consultants Who Teach Our Company  Over 35 awards for growth, innovation and workplace best practices.  99.7% satisfaction score from our consulting and training customers.  Yearly “Best Places to Work” winner in Minnesota.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 3 Topics within the Presentation • An overview of the Windows 8 OS. • Qualifying a “Metro style application”. • From a user perspective. • From a developer perspective. • From a business perspective. • Suggestions for further study/web resources.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 4 The Windows 8 Operating System • When you think about it, the core UI of the Windows OS has remained fairly constant since Windows 95. • A “desktop” which allows users to define shortcuts, view loaded apps, etc. • A “Start Button / Windows Button” in the lower left of the desktop used to launch applications. • Certainly, we have had numerous UI updates and OS improvements….but the core experience has been the same.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 5 The Windows 8 Operating System • The forthcoming Windows 8 OS is a *huge* redesign of this model. • The traditional “desktop” is still accessible, but this is not the default display. • Installs on desktop and tablet PCs. • Optimized for touch screen devices, but mouse and keyboard work just fine. • Offers a brand new type of application termed a “Metro Style App”. • Metro apps easily integrate / share information with other Metro apps. Default Win 8 “start screen” Metro App Desktop / Metro Integration
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 6 The Windows 8 Operating System • The Windows 8 UI brings together a consistent UI display for all of the core Microsoft devices. • Xbox home page. • Windows Phone 7 • Windows OS Programmer’s note: VS 11 now includes a Portable Library project template! You can build a single library of code to work on all of these platforms, as well as Silverlight.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 7 The Windows 8 Operating System • A quick demo of the Windows 8 OS… • I’ve installed the latest Windows 8 Consumer Preview ISO via Oracle VirtualBox. • I’ve also installed the Windows 8 SDK Developer Tools (VS Express for Metro, Blend 5, etc.) • The Windows 8 preview / Dev tools bits can be downloaded for free from the following URL: • http://windows.microsoft.com/en-US/windows-8/consumer-preview • Virtual Box can be found here: • https://www.virtualbox.org/ • A good installation walkthrough can be found here: • http://www.redmondpie.com/install-windows-8-consumer-preview-in-virtualbox- virtual-machine-on-mac-windows-7-how-to-tutorial/
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 8 Defining a “Metro App” • As shown in the previous demo, Windows 8 supports traditional “desktop apps”. • Developers would build desktop apps using the same tools and techniques they use to build desktop apps for Windows 7. • Developers use Visual Studio, Expression Blend, the .NET platform, C#, VB, C++, etc. • Developers can still: • Install assemblies into the GAC / build config files. • Build DLLs and EXEs. • Create installers. • Etc… • In short, building a “normal app” for Windows 8 will feel more or less the same. • But Metro apps are different…
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 9 Defining a “Metro App” • Traditional desktop apps support a good deal of chrome. • Simply put, “chrome” is the term which describes menu systems, status bars, toolbars, and other window adornments. • The content of the app is typically centered within the chrome in a space termed the client area. Chrome everywhere! Content in client area.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 10 Defining a “Metro App” • Jensen Harris (Director of UX at MS) offered a presentation at the latest Build conference which showcases how Metro apps are different. • He provides 8 key points to keep in mind, summarized here. • We will go through each item in some more detail in the slides to come…
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 11 Point 1: Metro Style Design • Chrome is kept to a minimum. Content is kept to a maximum. • Let the content of the app be the center piece. • Should be touch screen savvy. • Necessary chrome (menus, options, etc.) should be relegated to the OS sidebars / taskbars. • Chrome apps are much more graphically pristine; bright eye-catching colors, clean fonts, and so forth. • Might be time to heir those graphical artists to work with the programming teams! Chrome Style RSS feed Metro Style RSS feed
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 12 Point 1: Metro Style Design • Some applications don’t really make sense with metro... • There are many useful, important applications which *need* copious amounts of chrome to perform their function. • Photoshop, Visual Studio, spread sheet applications, video editing software,… • Such applications would be installed and launched from the Windows 8 “traditional” desktop hub. These would be hard to capture as a Metro style app…and they don’t need to be. It might be helpful to think of a Metro style app as “smart phone apps for the desktop”.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 13 Point 2: Fast and Fluid • Metro style applications should be designed to honor the following points: • Highly responsive applications (ready to capture and process input, etc.) • Appropriate use of animations ( transitions, bounce, fade, etc.) • Honor with Windows 8 touch language. Microsoft provides a full library of common animations you can incorporate into your Metro style apps. Animations are important…real important. This makes Expression Blend important…real important.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 14 Point 2: Fast and Fluid • To help achieve a highly responsive UI, developers should take note of two new C#/VB keywords introduced in .NET 4.5: • async / Async : Marks a method as an asynchronous method. • await / Await : Marks a point in an async method where a secondary thread will spin off to perform a task. • Using these new keywords, programmers are able to make asynchronous calls at the language level, rather than the API level. • Under the hood the compiler will generate a good deal of threading / synchronization code on your behalf. • To use these new keywords, developers should have an understanding of the .NET 4.0 (and higher) Task Parallel Library (TPL). • This is a newer, simpler, more modern threading model than the types of System.Threading. • The TPL is found in System.Threading.Tasks of mscorlib.dll.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 15 Point 2: Fast and Fluid • To illustrate these new language keywords using a simple example, consider the following common programming situation: • You are building a desktop GUI application (Windows Forms, WPF, Metro, Windows Phone 7, etc.) • If the user clicks a particular button, a long running task will begin. • You want the app to remain responsive! Which the following code will not achieve. public partial class MainForm : Form { public MainForm() { InitializeComponent(); } private void btnCallMethod_Click(object sender, EventArgs e) { this.Text = DoWork(); } private string DoWork() { Thread.Sleep(10000); return "Done with work!"; } } If this button is clicked…the UI is frozen for 10 seconds…
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 16 Point 2: Fast and Fluid • We can refactor this code to be asynchronous as so: • First, notice the return value of DoWork() is now a Task<string> rather than string. • The implementation of this method is now using a Task to do the work. • Note use of async and await keywords. • As a best practice, async methods are suffixed with -Async. public partial class MainForm : Form { public MainForm() { InitializeComponent(); } private async void btnCallMethod_Click(object sender, EventArgs e) { this.Text = await DoWorkAsync(); } private async Task<string> DoWorkAsync() { return await Task.Run(() => { Thread.Sleep(10000); return "Done with work!"; }); } } The user can click the button and type away! 10 seconds later, the title will update.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 17 Point 3: Snap and Scale Beautifully • Remember, Windows 8 runs of a wide variety of devices. • Desktop PCs. • Laptops and smart books. • Tablet PCs. • Your metro style apps should scale to all supported screen resolutions. • Thankfully, the native vector based graphics model of XAML APIs greatly simplified this. • As well, various project templates of VS 11 and Blend 5 will get you on your way.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 18 Point 3: Snap and Scale Beautifully 1024x768 is the base line to run a Metro style app.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 19 Point 3: Snap and Scale Beautifully • “Snap” is a required feature of a metro style app. • This represents the ability for an application to be mounted on the sides of the Windows 8 start screen / desktop in a miniature but fully functional format. Snap state Full state
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 20 Point 4: Use the “right contracts” • Windows 8 supports a feature termed “contracts”. • Metro style applications can use OS contracts to communicate between themselves. • Contracts also make it possible for a Metro app to integrate into Windows OS services (such as search functionally, sharing functionality, etc.) • The Metro APIs ship with dozens of predefined contracts developers can plug into. • For example, assume you are building a Metro style painting program. • Your app could support the “share contract” to allow users to upload their picture to social media sites. • Your app could support the “search contract” to allow your app to search anywhere in the Windows OS within the app. This example app supports the “share contact”. Users can email, post, upload app content within the context of the app itself.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 21 Point 5 and 6: Don’t forget the Tile! Stay Connected • Metro tiles are the counterpart to a traditional desktop icon. • Tiles are “alive” on the Windows start screen. • They can receive incoming data updates (consider a weather app showing the current temp). • They can (and most likely should) have animated displays. • Consider tiles an extension of your application…not just a static image used to launch the application.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 22 Points 7 and 8: Leverage the cloud / Honor Metro Design Principles! • Metro style apps ideally will store application settings in the cloud. • Why? Allows a user to gain consistent usage of apps across devices. • For example, a user should have the same experience running a “weather app” at work, on their personal PC at home, or via a handheld device. • Users log into a Windows 8 device via a Windows Live ID. • These credentials can be shared across multiple devices. • All Metro style apps are allocated cloud storage for settings, limited space for user content. • As you might guess, the Windows Azure framework can be quite helpful during the construction of Metro style apps. • Finally, take pride in crafting your Metro style app. • Again, graphics, animations, a fluid interface, and so forth are par for the course. • Such eye candy is not an after thought. It is front and center.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 23 .NET APIs for Metro Style Apps • Now that we better understand what represents a “Metro style app”, we can explore some details of building such a beast. • First, Metro style apps are *not* created using the traditional Microsoft .NET Platform! • .NET proper can only be used to build traditional “chrome” apps. • However, Microsoft has packaged a subset of the .NET’s framework’s functionality which can be used by Metro developers. • Formally, this is called ".NET APIs for Metro style apps"
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 24 .NET APIs for Metro Style Apps • .NET APIs for Metro Style Apps is a lean-and- mean subset of .NET proper. • Any types that are not related to developing Metro style apps are not included in the subset. • Any types which have overlap in the WinRT APIs (see next slide) are not included. • For example, this subset has no support for ASP.NET development. • Like .NET proper, the Metro subset use System as the root namespace. Note that each node here hides a set of related namespace. For example “System.Collections namespaces” includes: • System.Collections • System.Collections.Concerrent • System.Collections.Generics • System.Collections.ObjectModel • System.Collections.Specialized
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 25 Windows Runtime (WinRT) • .NET APIs for Metro Style Apps is only part of the plumbing. • Windows 8 ships with a new runtime engine (WinRT). • This engine exposes Windows 8 APIs in a unified manner to a variety of programming languages. • The WinRT libraries use Windows as the root namespace. • Here is a sample listing of WinRT namespaces. • WinRT provides numerous core services: • Windows.Data.* : Various namespaces to consume / send data in a variety of formats (JSON, RSS, etc.) • Windows.Devices.* : Geolocation, sensors, input devices, etc. • Windows.Storage.* : namespaces to allow apps to manipulate directory structures and files. • Windows.Media.* : Various namespaces for multimedia manipulation. • Windows.Security.* : Yep. Security.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 26 Windows Runtime (WinRT) • In addition, the WinRT branch of APIs provides extremely deep support for graphics, animations, resource management, and common controls • The Windows.UI.* stack of namespaces have been modeled after WPF and Silverlight. • Therefore, Metro style applications can be created via XAML, C#, VB and C++. Remember, these Windows.* namespaces are part of the new WinRT API stack….they are not useable by a .NET desktop app, .NET web app, or whatnot. These are only used to build Metro style apps.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 27 Windows Runtime (WinRT) • While a Metro app could be created using XAML + C#/VB/C++, this is not required. • Web designers can use familiar tools too. • It is possible to access the .NET for Metro APIs and WinRT using JavaScript. • The UI can be built via HTML 5. • Here is a high level breakdown of APIs used for Metro and .NET Desktop Apps Remember! Metro apps can also use a .NET framework subset.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 28 Windows Runtime (WinRT) • The purpose of this high-level overview presentation is to get you thinking about Windows 8 / Metro apps. • However….for the developer’s out there, I have to point out a very funny irony. • WinRT objects are in fact COM objects. • Modern day languages (C#, VB, C++ and JavaScript) communicate with WinRT object via a projection layer. • The underlying services and data types of these COM objects map out to language particulars in a seamless manner.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 29 Metro Apps for Profit • When Windows 8 launches, users will be able to download Metro Apps from the Windows Store. • This is very similar in concept to the Windows Phone 7 store, iOS App Store, etc. • Microsoft has made it very easy to get your Metro apps to a global audience. • You write your app once, set the price in your local currency. • It will then be seen in the Windows Store worldwide marketplace (100+ languages). • MS handles currency conversions and local tax laws to make it easier to sell your apps anywhere.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 30 Metro Apps for Profit • To upload Metro apps to the Windows Store, you will need to be a registered App Developer. • A yearly single user cost of $49 USD. • A yearly corporation cost of $99 USD. • Applications are submitted to the Windows Store, after which they are tested and certified. • The full list of test cases can be found online at the following URL: • http://msdn.microsoft.com/EN-US/library/hh694083%28VS.10%29.aspx • However to give you a taste of what will be investigated…
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 31 Metro Apps for Profit: Make Respectable Apps • Your app must be fully functional when the customer gets it from the Windows Store. • Your app’s trial functionality must reasonably resemble its full functionality. • Each app must display only one tile after it is installed • Your app must not use its tiles, notifications, app bar, or the swipe-from-edge interaction to display ads. • Your app must use only APIs for Metro style apps. • Your app must provide the same user experience on all processor types . • Your app must fully support touch interactions as described in the Windows 8 touch language. • Your app must not jeopardize or compromise the security or functionality of the Windows system. • Your app must not contain content that advocates discrimination, hatred, or violence based on membership in a particular racial, ethnic, national, linguistic, religious, or other social group, or based on a person’s gender, age, or sexual orientation. • Adult content is not allowed in the Store. Microsoft provides the Windows App Certification Kit to help developers pre-test their Metro style apps.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 32 Prepairing for Metro Development • .NET developers can prepare for Metro application development in a variety of ways: • Dive deeply into XAML development. • Dive deeply into using Expression Blend to build XAML-based UIs. • Begin to explore the WinRT libraries via MSDN online. • Web developers can prepare for Metro application development in a variety of ways: • Embrace and get to know the syntax of HTML 5. • Dive deeply into JavaScript. • Begin to explore Expression Blend 5. The latest version of this tool supports both XAML and HTML 5 markup generation. • Begin to explore the WinRT libraries via MSDN online.
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 33 Associated Courses and Resources • Configuring Windows 8: July 7-11 Free Book Chapter from Intertech's WPF Course
  • Course Name Copyright © Intertech, Inc. • www.Intertech.com • 800-866-9884 Slide 34 Thank You! Andrew Troelsen Intertech, Inc. 651-288-7000 atroelsen@intertech.com