8. Feature Local context Web context
Windows Run-time Yes No
Windows Library for Yes No
Javascript
External script references No Yes
Cross-domain XHR Yes No
requests
Automatic filtering for Yes No
script injection on DOM
There are ways to communicate across contexts, ways to give websites access to some web standards
features and ways to skip automatic filtering within a function.
9.
10. DatePicker SettingsFlyout
Listview
SemanticZoom
Semantic Zoom
Flipview
Menu Flyout
Rating
Appbar
Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
11.
12.
13.
14.
15.
16.
17.
18.
19.
20. App gets 5s to handle App is not notified
suspend before termination
User
Launche
s App
Apps are notified
when they have been
resumed
Splash
screen
21.
22.
23. Capabilities Seamless data Performant
driven access Native platform
High isolation Data Roaming
31. Contoso Travel
Featured destinations Last minute deals My Trips
Ocean View Cabins Suites
Upgrade from an inside cabin and save Upgrade from an inside cabin and save
$43/night/person! $43/night/person!
Picture windows with ocean and port views Picture windows with ocean and port view
From $2,099 — only $150/night/person based on From $2,099 — only $150/night/person do
double occupancy
“Let’s talk Windows. We like to talk of Windows 8 as Windows reimagined with a new start screen, unified input across touch, mouse and keyboard but preserving all the great work that we did in Windows 7”.Makes Windows 7 even better --- Everything that runs on Windows 7 still runs on Windows 8 (in the same architecture)Reimagines Windows from chipset to experiencenew range of capabilities, scenarios and form factors
Every language is a first class citizen.. This is the official slide, Direct X is missing from this slide.. But you can show it..
Let’s just see it in action.. --- Demonstrate mostly the Windows Start Screen Show the desktop.. Mentione nothing changed. Make sure you use touch … Highlight the following points Windows 8 Experience Full screen apps Live tiles Alive and in motion Action: Drag & rearrange tiles Semantic Zoom in Start Menu Search Personalize Windows Swap across process Pin an app Charms Talking points to summarize Apps are full screen (when not snapped).. Responsive.
Talking Track:IE10 is the next step in hardware-accelerated standards with 33 new standards supported (3x more than IE9). It’s easier to design your site layout including flexbox, grid, animations, and transitionsDrag and drop, forms, and FileAPI make the web feel more like native applicationsSandbox, IndexedDB and a new set of Performance APIs help you build faster, more secure sites with large data setsChanges between IE9 to IE10 also demonstrate how standards-based technologies evolve:WebSockets is a great example of this, which delivers real-time notifications and updates in the browser. The spec has made significant progress in the past months in working groups like the W3C. Microsoft tests and vets specs like WebSockets in our HTML5 Labs and has contributed over 456 new test cases since IE9 launch. In this case, WebSockets was stabilized and recommended to the Internet Engineering Steering Group for final approval. It was included into IE10 through our platform previewsLinks:List of IE10 supported standards (http://msdn.microsoft.com/en-us/library/ie/hh673549(v=vs.85).aspx)Site-ready web sockets (http://blogs.msdn.com/b/ie/archive/2011/09/15/site-ready-websockets.aspx)HTML5 Labs (http://html5labs.interoperabilitybridges.com/)IE Testing Center (http://samples.msdn.microsoft.com/ietestcenter/)
Navigating from a web context page to a local context page is not allowed by default, but MSApp.addPublicLocalApplicationUrienables it.//This must be called from the local contextMSApp.addPublicLocalApplicationUri("ms-appx:///localpage.html");Declaring a Content URI in Visual studio will give a website access to geolocation, clipboard, indexed db, appcache, etc. Automatic filtering prevents script injection into DOM elements. For example, setting innerHTML, outerHTML, document.write, DOMParser.parseFromString.. Etc.. If you really trust what you are bringing in, you can use MSApp.execUnsafeLocalFunction or WinJS.Utilities.setInnerHTMLUnsafe, setOuterHTMLUnsafe, and insertAdjacentHTMLUnsafe are wrappers for calling DOM methods that would otherwise strip out risky content.
Create a Camera Capture UI demo. Seamless integration with devices and OS resources.
You just saw that WinRT leverages the Async pattern to keep the UI responsive.. This happens across all languages.. The WINRT API has meta data that the platform uses to create projections that make using the API very natural.. There is a lot of power behind WInRT… a few lines of code and we had a dialog selecting a file using a common UX paradigm that all users will be familiar with promptly..
Different languages work together. Write Library code in C++ or C# consumable by all (but must be included in package).Subset of Win32 APIsAgain projectionJS casing exampleControl type differences across.Mix and match different languages. Windows runtime objects or components basically DllsWinMD files, can use subset of Win32 APIs, can expose functionality to all languages through “projection” We take care of making sure that these projections work in the way the origional language intended, controling types, casing, etc. Allows writing native C++ code with xaml UI.Adapted from slides 18 and 19 of PLAT-874T
Now that we have introduced the architecture and a bit of the language.. We need to move to the new App Execution Environment..
Installation process:From the store, you will trigger an install.. This pulls the bytes from the cloud, validates it, and installs it.. Installation is per user.. [windows traditionally has been per machine].. Behind the scenes, we have a single instance store.. So the apps are installed once.. The registration is per user.. Extension handlers.. System handles setup and uninstall automatically – allows us to guarantee that installed app will not be making permanent changes – nothing left after uninstall.Download app package (zip) goes to package manager
The app package (Appx) is abb OPC file ( a zip) The package It includes anything necessary to deploy or uninstall – It includes capabilities and declartions so we know the impact in the system. In the package you will see JS files etc. If in C++ see .dll files and what you would expect. Blockmap is a series of hashes for each block in your package. Combination of signature + blockmap verifies the package.. It can be validated as it comes off-the wire… we don’t have to download the whole thing..
Show it in VS and rawIf not declared can’t use at runtime. Protect system integrity. Privacy implications of devices. System prompts the user – make sure when you use you handle this possiblity, expect they may be blocked at runtime from lack of user consent. Some have no privacy implications (e.g. sensors) don’t need to be declared.VS provides a nice graphical container.Slide condensed from slides APP-389T (slides 9-13)
S
Talking about appdata specifically, will talk about user data later when we look at skydrive, etc.Slide 8 from PLAT-475T
Key, app does not have to do much – whole infrastructure built for you.Writes local and system takes care of the rest – some limitations, we will cover later.Slide 8 from PLAT-475T
In the absence of chrome, when users are focusing on the content, the formation of your content is what forms the silhouette. This shape is what allows your eyes to recognize something as a Windows Store app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence. Align elements on a grid to create a structured and consistent layoutTop, left, and bottom margins create a ‘C’ with negative space to indicate panning directionThe headers are in the same position, use the same type treatmentConsistent type sizes are used throughout and in parallel locations: Large, medium, small
There are specific pixel values to this layout: title is baselined at 100px, content starts 120px from the left.The easiest way is to get this layout is by starting with the templates.
Contextual commandsCommands are generally on the rightNew is on the far rightWhen an item is selected, the app bar shows, and a new contextual command shows on the other side (easy to notice and differentiate)When the app bar comes up because of selection it is sticky – no longer light dismiss
UI Structure
UI Structure
RE: Actions should be reversible so users can safely explore. Example – swipe to select is reversible
Your app can be displayed in any of the following sizes:Snapped: 320x768 (a minimum of 1366x768 is required to support snapped view)Full screen landscape / filled: minimum 1024x768Full screen portrait: minimum 768x1024Although there are an infinite number of supported sizes, it is important to verify your application in the most common application dimensions, namely:1024px by 768px1366px by 768px
Use common system entry points, Charms, as a predictable consistent way of accessing contract functionalities so users do not have to relearn
Keep the look and feel the same between your share target page and your primary app.
Do not use Search for FindThe difference between Find and Search is in the scope. “Find” is looking for something that is already on the current page, but the user just need help locating it. For example, think: Ctrl+F in Word, or in IE – you would type in something that you expect to already be in the doc or the html page, and Find locates it for you. “Search” on the other hand has a much broader scope, and is looking across your application regardless of what the user is viewing (they can be anywhere within your app, or not even in your app at all!). The result of Search is usually a list of items within the app that contain the search term, and you can navigate to then navigate to view the item from the search result page (as opposed to Find, where you are already viewing the item).