Earn the Microsoft Certified Software Developer MCSD: Windows Metro style Apps using HTML5 designation by passing 3 exams:
Microsoft would like these pre-requsities at the Associate level:
Develop Metro style Apps by Using WinRT (17%) •Create background tasks. ?implement the Windows.applicationmodel.background classes; implement WebUIBackgroundTaskInstance; create a background task to manage and preserve resources; create a background task to get notifications for an app; register the background task by using the BackgroundTaskBuilder class •Consume background tasks. ?use timing triggers and system triggers; keep communication channels open; request lock screen access; use the backgroundtransfer class to finish downloads •Integrate WinMD components into a solution. ?consume a WinMD component in JavaScript; handle WinMD reference types; reference a WinMD component Discover and Interact with Devices (13%) •Capture media with the camera and microphone. ?use CameraCaptureUI to take pictures or video, and configure camera settings; use MediaCapture to capture pictures, video, and audio; configure camera settings; set media formats; handle media capture events •Get data from sensors. ?determine the availability of a sensor (Windows.devices.sensors); add sensor requests to the app manifest; handle sensor events; get sensor properties; determine location via GPS •Enumerate and discover device capabilities. ?discover the capabilities and properties of available devices, for example, as GPS, removable storage, accelerometer, and near field communication Program User Interaction (18%) •Implement printing by using contracts and charms. ?implement the Print contract; create a custom print template; construct a print preview; handle print pagination; implement in-app printing; expose printer settings within an app •Implement Play To by using contracts and charms. ?register an app for Play To; use PlayToManager stream media assets; register an app as a PlayToReceiver •Notify users by using Windows Push Notification Service (WNS). ?authenticate with WNS; request, create, and save a notification channel; call and poll the WNS Enhance the User Interface (18%) •Design for and implement UI responsiveness. ?choose an asynchronous strategy between web workers and promises; implement web workers; nest and chain promises; make custom functions promise-aware •Implement animations and transitions. ?apply animations from the animation library (WinJS.UI.animation); create and customize animations and transitions by using CSS; apply transformations; create animations by using keypoints; apply timing functions; animate with the HTML5 element •Create custom controls. ?create custom controls using WinJS.Namespace, WinJS.Class.define, and HTML; bind to custom controls with data-win-bind; inherit from and extend an existing WinJS control •Design apps for globalization and localization. ?implement .resjson files to translate text; implement collation and grouping to support different reading directions; implement culture-specific formatting for dates and times; bind JSON properties to resources by using the data-win-res property Manage Data and Security (18%) •Design and implement data caching. ?choose which types of items (user data, settings, application data) in your app should be persisted to the cache based on requirements; choose when items are cached; choose where items are cached (Windows Azure, remote storage); select a caching mechanism; store data by using indexDB, LocalStorage, and SessionStorage •Save and retrieve files from the file system. ?handle file streams; save and retrieve files by using the StorageFile and StorageFolder classes; set file extensions and associations; save and retrieve files by using file pickers and the folder picker; compress files to save space; access libraries, for example, pictures, documents, and videos •Secure application data. ?encrypt data by using the Windows.Security.Cryptography namespace; enroll and request certificates; encrypt data by using certificates Prepare for a Solution Deployment (16%) •Design and implement trial functionality in an app. ?set up a timed trial; set up a feature-based trial; set up in-app purchases; transition an app from trial to full •Design for error handling. ?design the app so that errors and exceptions never reach the user; handle device capability errors; handle promises errors •Design and implement a test strategy. ?design a functional test plan; implement a coded UI test; design a reliability test plan, including performance testing, stress testing, scalability testing, and duration testing •Design a diagnostics and monitoring strategy. ?design profiling, tracing, performance counters, audit trails (events and information), and usage reporting; decide where to log events (local vs. centralized reporting)
Sample Apps in JavaScript, C#, VB, and C++) -- 192 the last I saw.
Skype for Windows 8 (Since Skype was bought by Microsoft).DOWNLOAD AND INSTALL: AppCertKitArmSetup.exe (113 KB) for Windows RT
Side-by-side configuration is needed for this.
Delivering reliable and trustworthy Metro style apps
Windows API reference for Windows Store apps
HTML/CSS for Windows Store apps built using JavaScript
DO THIS: Click on project's package.appxmanifest (listed at the bottom of the Solution Explorer) by double-clicking on it.
Visual Studio's manifest designer
Images provided and Orientations permitted for the app and other aspects are defined here.
The Display Name shows up in the Settings Charms view.
The Start page is by default default.html.
BLAH: Samples from Microsoft run the default.html which doesn't display the app's real screen but an app demo option screen which presents different scenarios the real app can run. But let's analyze default.html before we ignore it forever:
NOTE: .html is used rather than .htm. Shucks. What's a Microsoft fanboy to do now to show undying loyal use of Microsoft-specific variants? ;)
We can tell HTML5 is being invoked because of the first line in the html file:
<!DOCTYPE html>
Looking in the <head section of HTML:
<meta charset="utf-8" />
UTF-8 character encoding is required not just for localilization into different languages. Even if all text is in English, the WinJS library uses glyphs in the extended character set as icons.
WARNING: The <title tag is ignored, as is the target="_blank" attribute, innerHTML, and document.write HTML injection statements.
Windows 8 HTML introduces a new referencing mechanism which uses two forward slashes (when reading English left to right):
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script href="//Microsoft.WinJS.1.0/js/base.js"></script> <script href="//Microsoft.WinJS.1.0/js/ui.js"></script>
href="//Microsoft.WinJS.1.0/... is physically in the App project's References section, within Windows Library for JavaScript 1.0. That's the library where WinJS functions are defined when called from within <body> section.
CAUTION: Libraries in the References folder is specific to each Visual Studio version. Apps built using prior versions (such as Microsoft.WinJS.0.6 for Win8 RP) will fail with an error message such as:
The library is referenced by several html files, so use a "Find & Replace" tool (press Ctrl+F of use DivlocSoft - File Find and Replace Software) to search inside the contents of several file and substitute specified text.
There are two ways that libraries are specified:
<SDKReference Include="Microsoft.WinJS, Version=0.6" /> //Microsoft.WinJS.0.6/replaced with
<SDKReference Include="Microsoft.WinJS.1.0.RC, Version=1.0" /> //Microsoft.WinJS.1.0/
WARNING: Traditional href=URI references do not work. So this makes Windows 8 HTML unique and not operable on anything else, including IE9 and below.
//Microsoft... is used instead of http:// protocol because resources for a Windows 8 app must all reside in the project.
HTML isn't extensible like XML markup where new tags can be added. But WinJS you can't create for them.
DO THIS: Change ui-dark.css to ui-light.css (or visa versa) to see the alternative fonts, color scheme, and other style properties.
QUESTION: Is there a way users can select black or light?
QUESTION: How to control loading of resources so that pages appear sooner?
In the sample default.html file, resources to display demo scenarios are defined by these statements of location:
<link rel="stylesheet" href="/sample-utils/sample-utils.css" /> <script src="/sample-utils/sample-utils.js"></script>
IDEA: I wish samples appear showing the underlying app using defaults which I can then change. Samples use this:
<body role="application"> <div id="rootGrid"> <div id="header" role="contentinfo" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/sample-utils/header.html'}"></div> <div id="content"> <h1 id="featureLabel"></h1> <div id="contentHost"></div> </div> <div id="footer" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/sample-utils/footer.html'}"></div> </div>
The Grid App sample has this:
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/groupedItems/groupedItems.html'}" ></div>
Sample apps specify /pages/home/home.html.
The contenthost refers to CSS specified in
<link href="/css/default.css" rel="stylesheet" />
DO THIS: In Visual Studio Solution Explorer, click on the css folder and double-click on the default.css file to edit it.
The CSS markup:
#contenthost { height: 100%; width: 100%; }
means that the control "Application.PageControlNavigator" uses the entire screen to display the page specified for the data-win-options attribute.
DO THIS: Opening the default.html for a Win8 app within Internet Explorer (such as by double-clicking it within Windows Explorer) results in a blank screen.
DO THIS: Run the app within Visual Studio by clicking Local Machine on the Visual Studio menu bar.
In the log panel on the lower left, notice WMAHost.exe is loaded. This program recognizes the data-win-control and data-win-options Microsoft invented.
WMAHost.exe calls default.js.
At the top of the file, this code invokes Intellisense in Visual Studio:
/// <reference path="///LiveSDKHTML/js/wl.js" />
Near the bottom of the file, all dispatching events are started by this line:
app.start();
This is equivalent to:
WinJS.Application.start();
because the app object was defined near the top of the file:
var app = WinJS.Application;
Objects for other classes include these:
var activation = WinJS.ApplicationModel.Activation; var nav = WinJS.Navigation;
QUESTION: List of all WinJS classes ?
Back at the top, the function defined within the file is self-executing anonymous and private, which means that
(function (){ ... })();
This keeps the context of calls local.
NameSpaces are used to expose data outside the function at hand.
This is feature in ECMAScript 5:
"use strict";
Sub-classes within the WinJS library include this one to help prevent memory leaks when declarative binding is used in an app, as is common in the templates:
WinJS.Binding.optimizeBindingReferences = true;
WinJS.Utilities.markSupportedForProcessing specifies that a function is allowed to use declarative processing.
<link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> <script src="/js/navigator.js"></script> <script src="/js/data.js"></script>
TIP: Write VBScript to create sampleItems code to paste within data.js.
Strings named darkGray, lightGray, and mediumGray are created.???
REMINDER:
"sampleGroups[0]" refers to the first item in the code defining sampleGroups.
"sampleGroups[1]" refers to the second item.
WARNING: Use "group00" to begin the list, with zero fill because the control sorts key values.
Data referenced in HTML and JavaScript are defined in data.js.
var list = new WinJS.Binding.List(); var groupedItems = list.createGrouped( function groupKeySelector(item) { return item.group.key; }, function groupDataSelector(item) { return item.group; } );
TIP: Windows 8 Grid application data.js sample to get data asynchronously
DO THIS: Scroll down to position the cursor at a statement which will be executed, then press F9 to register a stop point for the Debugger.
DO THIS: To run in debug mode, press F5 or click Local Machine, or use Debug > Start Debugging.
To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.
UX: Press F11 or click the Step Into button.
Pretty soon you'll step into base.js (for Windows Store apps), which is too much in the weeds.
UX: So press F10 to Step Over instead to stay in the calling code.
UX: Press Shift+F5 or click the square red button to stop.
UX: Press Alt+F4 (hold down Alt and press F4).
Although checkpoint events can be raised manually, they are usually raised automatically by the system to prepare for suspension.
REMEMBER: The compiler requires functions to be defined before in-line code.
To issue an individual entry in the Output panel:
WinJS.log && WinJS.log("Lorem ipsum", "samples", "status");
WinJS.log(message, tags, type);
There can be more than one tag (separated by spaces) to categorize the message:
"status" should be replaced with the type of message.
TIP: Use industry-standard status tags:
To display a message to the JavaScript Console (shown in the Output region in Visual Studio), set logging to begin in default.js:
WinJS.Utilities.startLog({type: "customType", tags: "custom" });
QUESTION: Is there much performance impact leaving the log open? If there is a slight performance penalty to hard disk I/O writing log entries. So:
WinJS.Utilities.stopLog();
QUESTION: How to programmatically send logs (during productive production use) to a remote file?
var string = WinJS.Utilities.formatLog(message, tag, type);
Samples make use of this feature.
Members added inside are made public using a function such as this:
WinJS.Namespace.define("SdkSample", { sampleTitle: sampleTitle, scenarios: scenarios });
The values of variables were defined at the top of the file, such as:
var sampleTitle = "Fluid App Layout"; var scenarios = [ { url: "/html/scenario1.html", title: "Fluid App Layout full screen sample" } ];
Code which defines English text for display to users in the GUI is not best practice.
REFERENCE:
WATCH:
Implementing, part 1,
icons, placement,
App Bar
DO THIS: Right-click anywhere on the app's screen for the app bar to appear from the bottom.
QUESTION: The App Bar is ___ pixels high.
WATCH: placement,
To make the App Bar sticky,
<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{sticky:true}">
DO THIS:
Touching anywhere on the screen doesn't make the app bar go away.
To remove the app bar, re-swipe or press Winkey+Z.
TIP: The HTML for the app bar is specified by code such as this, with the indentation I prefer:
<div id="appbar" data-win-control="WinJS.UI.AppBar" <button data-win-control="WinJS.UI.AppBarCommand" data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}" data-win-options="{id:'cmd1', label:'Command',section:'selection', icon:'\uE142', tooltip:'Command 1' }" type="button" ></button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}" data-win-options="{id:'cmd2', label:'Point', section:'global', icon:'placeholder', tooltip:'Command 2' }" type="button" ></button>
A different data-win-options specification is coded for each icon.
NOTE: Add/New icons should always be on the right by specifying section:'global'.
Instead of 'placeholder', specify a default glyph name or a Segoe UI Symbol font character number.
DO THIS:
Hold down Winkey + S, search for "char" for the Character Map app.
Select the Segoe UI Symbol font.
Highlight the desired glyph, note at the lower left the name such as "U+06AF".
Code icon:'\u06AF', (with the back slash).
To use a png (ping) file as an icon, create two files, one for dark and one for light background.
Each file is 80x60 pixels containing 8 40x30 blocks for the different states (hover, point state, etc.).
Code icon:'url(images/accept.png)',.
WARNING: The app bar can disply up to 10 icons only.
Aside from asthetics, Windows 8 icons are flat block drawings because (rather than graphics files) they are font special characters, which are a lot faster to draw.
Within the Windows Library for Javascript, js folder, ui-js file, press Ctrl+F to find "var glyphs".
Login | accounts, |
Apps | allapps, permissions, admin, otheruser, switchapps |
Navigation | go, back, forward, previous, next, up, down, left, right, switch |
Screen | setscreenlock, settile |
Windowing | newwindow, openwith, openpane, closepane, page, rotate, backtowindow, fullscreen |
Player Controls | list, play, pause, stop, previewlink, refresh, selectall, shuffle, slideshow, stopslideshow, volume, mute, gotostart |
Keyboard | keyboard, touchpointer |
Drive | mapdrive, disconnectdrive |
Folders | library, folder, newfolder, movetofolder, uploadskydrive, syncfolder, unsyncfolder |
File Operations | openfile, read, link, save, showresults, repair, attach, |
File Movement | folder, document, download, protecteddocument, upload, sync, openlocal, savelocal, send, |
File Editing | view, edit, file, sort, rename, remove, import, importall, disableupdates |
Field Editing | copy, cut, paste, trim, clear, cancel, undo, redo, highlight, |
Display | mappin, more, viewall |
Objects | add, delete, bullets, manage, placeholder, zoom, zoomout, |
Multiples | filter, clearselection, repeateone, repeatall |
Alignment | alignright, alignleft, aligncenter, |
Fonts | font, fontcolor, italic, bold, underline, fontsize, fontdecrease, fontincrease |
Contacts | people, phonebook, contact, contactinfo, contactpresence, blockcontact |
People | contact2 |
Messages | accept, memo |
cc, mail, mail2, mailforward, mailreplayall, showbcc, hidebcc, important, mailreply, priority | |
Phone | cellphone, phone, hangup, videochat, leavechat, zerobars, onebar, twobars, threebars, fourbars |
Bookmarks | bookmarks, pin, unpin |
Rating | like, dislike, likeddislike, outlinestar, solidstar, |
Store | shop, |
Social | characters, comment, favorite, unfavorite, help, emoji, emoji2, twopage, page2, message, reshare, tag, postupdate, reporthacked, addfriend |
Accessories | calculator |
Calendar | calendar, calendarday, calendarweek, gototoday, calendarreply |
Maps/Geo | world, globe, flag, map, directions |
Camera | camera, attachcamera, rotatecamera, webcam |
Photos | pictures, browsephotos, crop, zoomin, zoomout, caption |
Docking | dockleft, dockright, docbottom, remote |
Device | clock, settings, video, orientation |
Music | audio, musicinfo |
Video | microphone |
These can be specified in App Bar Coding.
QUESTION: How to change image files for apps that come with Windows 8?
id | Icon and label | icon |
---|---|---|
View list as list | ||
Show on Map | ||
Save map view | ||
Bookmark | ||
Redo Search | ||
Repeat | ||
Previous | ||
Play | ||
Next | ||
Sort | ||
Filter | ||
New |
WATCH: How to Implement App Bars
ARTICLE: Embracing UI on demand with the app bar
TOOL: Metro Studio from Syncfusion provides Metro-style icons for $499.
TOOL: componentart.com/windows8 provides
ARTICLE: Creating Glyph Badges
DO THIS: To unhide the operating system charms menu for Search, Share, devices, Settings:
NOTICE: Power-off (shutdown) is within the Settings charm, not under the user at the upper right corner.
DO THIS: Mousing on the upper-left corner displays prior apps visited.
When user select Settings, a list of setting categories should display.
To switch to the menu, many apps (such as Auto Trader) add a button at the lower right corner of the screen above the system's scroll right arrow control.
<script src="/js/searchResults.js"></script>
Associate with activation next.
Windows Store apps define interactions with the system and other apps via
App contracts
Extensions let app developers extend or customize standard Windows features primarily for use in their apps and potentially for use in other apps.
When a user invokes the system charms while within an app, the "This app can't be searched" message appears if the app has not enabled the contract.
Integrating search provides a consistent and predictable entry point for search throughout the system. This also puts most frequently searched app at the top of the searches list.
Press Ctrl+F for keyboard entry point.
REFERENCE: Handling view state
CSS to achieve Microsoft's Metro UI standard for Windows 8 apps need to be crafted with an understanding of the different layouts for each view states an app can display.
To support when the tablet is rotated into fullscreen-landscape view state, the left margin is a 100 pixels, narrower than 120 pixels for the default full screen view state.
Below is sample CSS from the GridView project template:
@media screen and (-ms-view-state: fullscreen-portrait) { .itemdetailpage .content article { margin-left: 100px; [a] } }
To magnify:
DO THIS: On the keyboard, hold down the Winkey and press the plus key.
When you're done with the magnifier, click on the magnifier for its options menu, then close it by pressing its X button.
To open the Switch List to switch among apps
DO THIS: Mouse to the upper left corner until a small tile appears, then drag down along the edge for the list of apps activated.
Alternately:
DO THIS: On the keyboard, while holding down Winkey, keep pressing Tab until Visual Studio is highlighted.
DO THIS: Hold down Winkey and press both Shift and plus (+) key.
Windows 8 introduces a split view which enables, for example, a video to play on one side while another app (such as Twitter feed) is displayed. Snapping and un-snapping can be done without interrupting the video. True multi-tasking.
The smaller app uses the media -ms-view-state: snapped. The left margin is 20 pixels.
Fill view state occurs when another app occupies the snap region.
These 20, 100, and 120 pixels are 4, 5, and 6 units to Microsoft Metro graphic designers who use a grid system of units, each 5 pixels large.
/pages/itemDetail/itemDetail.html calls itemDetail.js
<script src="/js/data.js"></script> <script src="/pages/itemDetail/itemDetail.js"></script>
itemDetail.js makes use of elements defined in the DOM by the html:
<div class="itemdetailpage fragment"> <header aria-label="Header content" role="banner"> <button class="win-backbutton" aria-label="Back" disabled type="button"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle"></span> </h1> </header>
Thanks.
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0); element.querySelector(".titlearea .pagetitle").textContent = item.group.title; element.querySelector("article .item-title").textContent = item.title; element.querySelector("article .item-subtitle").textContent = item.subtitle; element.querySelector("article .item-image").src = item.backgroundImage; element.querySelector("article .item-image").alt = item.subtitle; element.querySelector("article .item-content").innerHTML = item.content; element.querySelector(".content").focus(); } });
WinJS.UI.Pages.define creates a new PageControl from the specified URI that contains the specified members. Multiple calls to this method for the same URI are allowed, and all members will be merged.
/pages/itemDetail/itemDetail.html displays 3 levels of heading text: Group Title, Item Title, and Item Subtitle.
The button is disabled until JavaScript enables it.
In the corresponding CSS file, tag margin-bottom: adds space under each line.
the itemdetailpage class contains
At the top above all text is the
"role=banner" sets an attributes with value "banner".
There is no inner text within the span tag for pagetitle because JavaScript fills it programmatically.
<div class="content" aria-label="Main content" role="main"> <article> <div> <header> <h2 class="item-title"></h2> <h4 class="item-subtitle"></h4> </header> <img class="item-image" src="#" /> <div class="item-content"></div> </div> </article> </div> </div>
A
Explanation of CSS
refer to this table of CSS for the two views side-by-side to better compare differences.
On the left, CSS for the default full screen state establishes multi-column with horizontally scrolling.
fullscreen view state |
@media screen and (-ms-view-state: snapped) { |
---|---|
.itemdetailpage .content { -ms-grid-row: 1; -ms-grid-row-span: 2; display: block; height: 100%; overflow-x: auto; position: relative; width: 100%; z-index: 0; } |
.itemdetailpage .content { -ms-grid-row: 2; -ms-grid-row-span: 1; overflow-x: hidden; overflow-y: auto; } |
.itemdetailpage .content article { column-fill: auto; column-gap: 80px; column-width: 480px; height: calc(100% - 183px); margin-left: 120px; [a] margin-top: 133px; [b] width: 480px; } |
.itemdetailpage .content article { -ms-grid-columns: 300px 1fr; -ms-grid-row: 2; -ms-grid-rows: auto 60px; display: -ms-grid; height: 100%; margin-left: 20px; [a] margin-top: 6px; [c] width: 300px; } |
.itemdetailpage .content article header .item-title { margin-bottom: 19px; } .itemdetailpage .content article header .item-subtitle { margin-bottom: 16px; margin-top: 0; } |
.itemdetailpage .content article header .item-title { margin-bottom: 10px; [d] } |
.itemdetailpage .content article .item-image { width: 460px; height: 240px; [h] } .itemdetailpage .content article .item-content p { margin-top: 10px; margin-bottom: 20px; margin-right: 20px; } |
.itemdetailpage .content article .item-image { width: 280px; height: 140px; [h] } .itemdetailpage .content article .item-content { padding-bottom: 60px; } |
REFERENCE: Laying out an app page (Windows Store apps using JavaScript and HTML)
[b] To achieve page header baseline guidelines of 5 units (100 pixels) from the top, the margin-top is set to 133px for full view because ???.
[c] The margin-top in snapped view refers to each article.
[d]
Vertically, lists of tiles or text have 1 unit (20 pixels) of vertical padding.
Hard-edged objects have 2 sub-units (10 pixels) of padding between items in a row.
[e] Content region is 7 units (140 pixels) from the top. Horizontally panning content, it should be no more than 6.5 units (130 pixels), and no less than 2.5 units (50 pixels).
[f] Padding between groups is a generous 4 units (80 pixels) to help people easily distinguish one group from another when panning across many groups.
[g]
2 sub-units (10 pixels) of padding separate hard-edged content items (like images and user tiles)
are separated from accompanying text and other columns.
Lists in columns are separated by 2 units (40 pixels) of padding.
[h]
.item-image areas have different sizes in full vs. snapped views:
In group .item: 250x250 pixels over 2 rows vs. 60x60 in snapped view.
WARNING:
The item-image area within article entries have different aspect ratios
as well as different sizes:
In detail: 460/240 = 19.166 vs. 280/140 = 2
Upon entry into the Grid app, the app name is displayed in ___ point font with the group item (Index) in a smaller __ point font.
DO THIS: Click the subtitle for the groupDetail screen.
The subtitle is now the title for the groupDetail screen.
BLAH: Some may find that the substitution of positions jarring. So some device such as animation to show gradual movement from sub-title to title. Or colors can be maintained between titles and subtitles to provide visual consistency.
Many images are defined using symbols within fonts rather than from graphic (.png) file, using CSS code such as this:
.groupeditemspage .groupeditemslist .group-header .group-chevron::before { content: "\E26B"; font-family: 'Segoe UI Symbol'; }
This makes for much faster user experience since no downloads of images are necessary.
QUESTION: Where is a list of the symbols?
Resource | Pixels | File Name | Notes |
---|---|---|---|
Logo | 150 x 150 | squareTile-sdk.png | |
Wide logo | 310 x 150 | tile-sdk.png | 248x120 on home page? |
Small logo | 30 x 30 | smallTile-sdk.png | |
Notification badge logo | 24 x 24 | - | This is optional. |
Splash screen> | 620 x 300 | splash-sdk.png |
At the upper-left corner, the icon of 28 x 18 is windows-sdk.png.
storelogo.png is 50x50.
To avoid ugly pixelation, Windows 8 requests that developers create 3 versions of each image - one for each screen size category:
Scaling | % | Name | Screen Pixels | TV Diagonal | dpi | click | Size | Cell |
---|---|---|---|---|---|---|---|---|
1x | 100% | fo.scale-100.jpg | 1366x768 | 10 inch | 135 dpi | 5mm | 20px | 20px |
1.4x | 140% | fo.scale-140.jpg | 1920x1080 | 23 inch | 190 dpi | 7mm | 28px | 30px |
1.8x | 180% | fo.scale-180.jpg | 2560x1440 | 30 inch | 253 dpi | 9mm | 36px | 50px |
Windows 8 automatically alters the file name it uses depending on the screen size being used. For example, the name of the image file specified as "fo.jpg" in the HTML <img tag resolves to physical file "fo.scale-100.jpg" when displayed on smaller tablets.
The 100/140/180 scaling is designed to be compatible with the Windows 8 grid system.
Microsoft's fonts were designed to go with their point-based (rather than pixel-based) layout grid, one unit is 20 points, with the smallest sub-unit at 5 points, and each column of 80 points.
So set a gridline every 20 pixels in Photoshop > Preferences > Guides, Grid & Slices, with sub-divisions of 2 pixels. Kerning should be in metric.
Targets for touch should therefore be 40 pixels (7 mm) or larger, with 2mm padding. 9mm is 50 pixels. Radio buttons should be at least 5mm (30 pixels).
The left edge of __ points gives breathing room.
320 pixels is the fixed width for the smaller Snap view.
On-demand UI events are managed by the EdgeGesture class.
ListView Displays a collection of items in a grid or list layout.
A list View UI control :
<div data-win-control="WinJS.UI.ViewBox"> <div class="fixedlayout"> ... </div> </div>
The WinJS.Application object provides three buckets to store unstructured state:
These APIs create sub directories, multiple file formats, and full async programming at multiple layers.
Data is versioned.
Use the Windows.Security.Cryptography namespace to Encode and Decode, Working with SSL certs
On-device storage
data-win-bind attribute binds a property of an element to a property of a data source.
The auto-syncs with back-end servers.
REMEMBER: Each WinRT app project must contain all resources (fonts and js libraries). References to external font libraries (a feature in HTML5) is verboten.
Dynamic references outside the app need to be within a HTML frame.
TODO: Create an msapp-err.html to load automatically in the iframe when errors occur.
DO THIS: Do down the Winkey and press P.
Windows 8 shows options if it detects multiple monitors plugged in.
No longer are Windows users required users to figure out which hidden special function key to press for switching between the laptop screen and the projector.
Sans-serif Segoe UI font - 42 point Light for page headers 20 point sub-headings 11 body copy 9 point tertiary text copy
Cambria font can also be used.
These fonts have been in Vista.
The size of these fonts was designed to coordinate with the Win8 grid system and automatic scaling factors.
REFERENCES:
Typography (http://msdn.microsoft.com/en-us/library/windows/apps/jj553415.aspx)
Fonts (http://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx)
Movement transitions in and out inform users about where UI elements belong.
Live Tiles is the "front door" to an app.
WinJS.UI.Animation.fadeIn(document.querySelector(“div”));
jQuery? Selectors: •document.querySelector(".headerTemplate") •document.querySelectorAll("div")
Text •document.querySelector(“#Title”).textContent;
The Windows Library for JavaScript toolkit provides several controls that aren't a part of HTML5:
But a custom control can be defined too:
<div data-win-control="SdkSample.ScenarioOutput">
The ScenarioOutput control is defined as a new WinJS.Class by invoking the define method by this code within sample-util.js:
var ScenarioOutput = WinJS.Class.define( function (element, options) { element.winControl = this; this.element = element; new WinJS.Utilities.QueryCollection(element) .setAttribute("role", "region") .setAttribute("aria-labelledby", "outputLabel") .setAttribute("aria-live", "assertive"); element.id = "output"; this._addOutputLabel(element); this._addStatusOutput(element); }, { _addOutputLabel: function (element) { var label = document.createElement("h2"); label.id = "outputLabel"; label.textContent = "Output"; element.parentNode.insertBefore(label, element); }, _addStatusOutput: function (element) { var statusDiv = document.createElement("div"); statusDiv.id = "statusMessage"; element.insertBefore(statusDiv, element.childNodes[0]); } } );
Te aria- in aria-labelledby, etc. refers to W3C-defined HTML attributes for Accessible Rich Internet Applications (WAI-ARIA) 1.0 for assistive technologies.
The ViewBox UI control automatically scales pixels to whatever pixel density each device has.
<div data-win-control="WinJS.UI.ViewBox"> <div class="fixedlayout"> ... </div> </div>
Grid Layouts make use of several sets of html/css/js. The default.html specifies the Application.PageControlNavigator control:
<div data-win-control="Application.PageControlNavigator"> <data-win-options="{home: '/pages/groupedItems/groupedItems.html'}" </div>
groupedItems.html makes use of the WinJS.Binding.Template control which uses two templates: classes headertemplate and itemtemplate.
Within VS11, open project based on
SAMPLE:
Grid
This has a pages folder.
Users enter the Grid app's hub page named groupedItems horizontally panning view of categories of content to show users a glimpse of what's new and available. Each item maps to one of the app's Section pages.
Each Section groupDetail bubbles up content or functionality. The Hub should offer a lot of visual variety, engage users, and draw them in to different parts of the app. of an app can display in any form that best represents the scenario and content the Section contains. Section pages may also take advantage of grouping and a panorama style layout. Each section consists of individual items, each of which has its own Detail page.
Each itemDetail page may vary tremendously depending upon the type of content. Each page may contain a lot of information or may contain a single object, such as a picture or video.
Send location between Bing maps.
How To: Bing Maps For Windows 8 Metro Apps - JavaScript
var messageDialog = new.windows.UI.Popups.MessageDialog('Hello'); messageDialog.showAsync();
SAMPLE APP: Toast notifications sample shows many different formats of display.
Toasts are issues as XML
Anyone can search for and view public files on Jason's SkyDrive
"Save to SkyDrive Folders, files, albums of photos, videos, audio, tags, and comments using the SkyDrive API
Skydrive home page provides links to apps on Android and iOS devices.
The abstraction for managing interactions with asynchronous APIs is a Promise object which provides a mechanism to schedule work to be done on a value that has not yet been computed.
A promise implements a method for registering callbacks for state change notifications, named then.
myWebService.get("http://www.contoso.com") .then( function (result) { /* do something */ }, function (error) { /* handle error */ }, function (progress) { /* report progress */ } );
Instead of writing a single get action that force your code to wait for response.
Open standards: JSONP (JavaScript Objection Notation with padding) is used in client-side JavaScript webpage code to interact directly with the Live Connect REST API, with OAuth 2.0 authentication.
To exchange data with Microsoft web services (Hotmail, Windows Live Messenger, Microsoft SkyDrive, etc.). REFERENCE: Use the LiveSDK in your app referencing JavaScript Live Connect API for Windows 8 and web WL object (WL for Windows Live)
DOWNLOAD AND INSTALL: LiveSDK.msi (1,192,448 byte)
DO THIS: Use VS11 to open your project. Right-click References. Select Add Reference... Check Live SDK.
Select one of the js.live.net libraries:
<script src="//js.live.net/v5.0/wl.debug.js"></script> <!-- English Debug version --> <script src="//js.live.net/v5.0/wl.js"></script> <!-- English Production version --> <script src="//js.live.net/v5.0/ja/wl.js"></script> <!-- Japanese Production version --> <script src="///LiveSDKHTML/js/wl.js"></script> <!-- For Intellisense -->
Note the library is external.
REFERENCE: Core Concepts
OAuth 2.0 is specified with the version number because OAuth 1.0 was a disaster involving PKI certificates.
Metro style apps using JavaScript will have no need to interact with cookies. Cookies are applicable only to web apps.
msdn.microsoft.com/library/live
The Live SDK Developer Guide describes the steps as
DO THIS: Use your Microsoft personal credentials to get an email of settings from the Windows Store Dashboard. Open Outlook.com (Hotmail) to copy the code and paste it on the page.
1) get a client ID
2) define
scope permissions such as wl.basic
First name and last name are obtained from a user's profile using a query using the Identity API
CAUTION: Don't show the user's gender and birth date on the screen. Such information is considered invasion of privacy by some users.
Save personalization settings for the signed-in user's experience on the website. Register a user on that website. Reading contacts
"This app is also used by" the current user's contacts by reading Contacts.
Calendars. Work with calendars and events.
"What others are saying about this app" from Messenger Instant messaging Users and buddies. Get a user's info and his or her buddies' info—including things like their friendly names, presence info, and status messages. Status updates. Update a user's status message, a personal message that the user chooses to share with others (for example, participating in a web-based game). This is done by using the Messenger API using XMPP (Extensible Messaging and Presence Protocol)
Blog mentioned in the Windows Store Dashboard to Sell apps
Rubyists have made their impact on the dev scene. It's all about code generation.
Methods, Objects, and Properties and Events implementing Timing and Performance APIs for JavaScript Windows Store apps.
SAMPLE: Display power state sample shows how to use the Windows Runtime display request API to keep the display on during extended periods without user activity.
http://codeshow.codeplex.com/SourceControl/changeset/view/14803#429421 CodeFoster.com (Jeremy Foster) Mo< Store > Create App Package
Right-click on ps1 file and Run with PowerShell.
WinJS controls and styles (Windows Store apps using JavaScript and HTML) DatePicker Enables the user to select a date.
FlipView Displays a collection of items, one item at a time.
Flyout Displays a message that requires user interaction. (Unlike a dialog box, a Flyout doesn't create a separate window.)
HtmlControl Displays an HTML page.
Menu A menu flyout for displaying commands.
PageControl A set of HTML, JavaScript, and CSS that describes a page. You can navigate to a PageControl or use it like a custom control.
SemanticZoom Lets the user to zoom between two different views supplied by two child controls. One child control supplies the zoomed-out view and the other provides the zoomed-in view.
SettingsFlyout Provides users with fast, in-context access to app settings.
TimePicker Enables the user to select a time.
ToggleSwitch Turns an item on or off.
Tooltip Displays a tooltip that can support rich content (such as images and formatted text) to show more info about an object.
ViewBox Scales a single child element to fill the available space without resizing it. The control reacts to changes in the size of the container, and to changes in size of the child element. For example, this control responds if a media query results in a change in aspect ratio.
| Your first name: Your family name: Your location (city, country): Your Email address: |
Top of Page
Thank you! |