Integrating With The Windows 8 Experiences

Preview:

DESCRIPTION

Building Windows 8 UIs Using HTML5

Citation preview

and more

demo

demo

demo

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 */);

// 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");...});

demo

Share Target

<!– 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;

demo

function scenario2AddSettingsFlyout() {

WinJS.Application.onsettings = function (e) {

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

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

WinJS.UI.SettingsFlyout.populateSettings(e);

};

}

demo

Thank you

Recommended