integrating with the windows 8 experiences

42

Upload: rami-sarieddine

Post on 07-Jul-2015

227 views

Category:

Documents


0 download

DESCRIPTION

Building Windows 8 UIs Using HTML5

TRANSCRIPT

Page 1: Integrating With The Windows 8 Experiences
Page 2: Integrating With The Windows 8 Experiences

and more

Page 3: Integrating With The Windows 8 Experiences
Page 4: Integrating With The Windows 8 Experiences
Page 5: Integrating With The Windows 8 Experiences
Page 6: Integrating With The Windows 8 Experiences
Page 7: Integrating With The Windows 8 Experiences
Page 8: Integrating With The Windows 8 Experiences

demo

Page 9: Integrating With The Windows 8 Experiences
Page 10: Integrating With The Windows 8 Experiences
Page 11: Integrating With The Windows 8 Experiences
Page 12: Integrating With The Windows 8 Experiences
Page 13: Integrating With The Windows 8 Experiences
Page 14: Integrating With The Windows 8 Experiences
Page 15: Integrating With The Windows 8 Experiences
Page 16: Integrating With The Windows 8 Experiences

demo

Page 17: Integrating With The Windows 8 Experiences
Page 18: Integrating With The Windows 8 Experiences
Page 19: Integrating With The Windows 8 Experiences
Page 20: Integrating With The Windows 8 Experiences
Page 21: Integrating With The Windows 8 Experiences
Page 22: Integrating With The Windows 8 Experiences

demo

Page 23: Integrating With The Windows 8 Experiences
Page 24: Integrating With The Windows 8 Experiences
Page 25: Integrating With The Windows 8 Experiences
Page 26: Integrating With The Windows 8 Experiences

dataTransferManager.addEventListener("datarequested", function (e) {

…// Common propertiesvar request = e.request;request.data.properties.title = "Title for data"; request.data.properties.description = "Description of the data"; request.data.properties.thumbnail = thumbnail; // of type StreamReference

// Common methods request.data.setText("Text to share");request.data.setHtml("<HTML …>");request.data.setUri(uri /* of type Uri */);request.data.setBitmap(stream /* RandomAccessStream */);

// Custom data request.data.setText("FormatID", "Text to share");request.data.setData("FormatID", datastream /* RandomAccessStream */);

Page 27: Integrating With The Windows 8 Experiences
Page 28: Integrating With The Windows 8 Experiences
Page 29: Integrating With The Windows 8 Experiences

// set up data transfer managervar dataTransferManager =

Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();

// create event listener to be called on to fill out data packagedataTransferManager.addEventListener("datarequested", function (e) {

// fill in data package with what to sharevar request = e.request;request.data.properties.title = "Title for data"; request.data.properties.description = "Description of the data"; request.data.setText("Text to share");...});

Page 30: Integrating With The Windows 8 Experiences

demo

Page 31: Integrating With The Windows 8 Experiences

Share Target

Page 32: Integrating With The Windows 8 Experiences
Page 33: Integrating With The Windows 8 Experiences
Page 34: Integrating With The Windows 8 Experiences

<!– extension needs to be added to package.appxmanifest -->

<Extensions>

<Extension Category="windows.shareTarget" StartPage="shareTarget.html">

<ShareTarget><SupportedFileTypes>

<FileType>.jpg</FileType>

</SupportedFileTypes>

<DataFormat>text</DataFormat>

</ShareTarget></Extension>

</Extensions>

...

// activation function in shareTarget.js

function activated(e) {

if (e.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {

share = e.shareOperation;

document.querySelector('.metadata h1').textContent = share.data.properties.title;

document.querySelector('.metadata p').textContent = share.data.properties.description;

Page 35: Integrating With The Windows 8 Experiences
Page 36: Integrating With The Windows 8 Experiences

demo

Page 37: Integrating With The Windows 8 Experiences
Page 38: Integrating With The Windows 8 Experiences
Page 39: Integrating With The Windows 8 Experiences

function scenario2AddSettingsFlyout() {

WinJS.Application.onsettings = function (e) {

e.detail.applicationcommands = { "helpDiv": { title: "Help",

href: "/html/2-SettingsFlyout-Help.html" } };

WinJS.UI.SettingsFlyout.populateSettings(e);

};

}

Page 40: Integrating With The Windows 8 Experiences

demo

Page 41: Integrating With The Windows 8 Experiences
Page 42: Integrating With The Windows 8 Experiences

Thank you