windows8 RIA應用

RIA調用樣本這個樣本示範了如何使用可訪問的RIA來確保一個完全可訪問Metro樣式的應用程式。範例實現ARIA標籤在一個類比的聊天軟體。在UI和簡單的功能都更好地關注實現的RIA。

 (function () {

    "use strict";

    var ui = WinJS.UI;

    function updateLayout(element, layoutState) {
    }

    function ready(element, options) {

        // Build up the contents of the Group list.
        var itemsGroup = getItemsGroup();
        var listViewGroup = element.querySelector(".chatListGroup").winControl;
        ui.setOptions(listViewGroup, {
            itemDataSource: itemsGroup.dataSource,
            itemTemplate: element.querySelector(".itemTemplate"),
            oniteminvoked: itemInvokedGroup,
        });

        // Build up the contents of the Contact list.
        var itemsContact = getItemsContact(0);
        var listViewContact = element.querySelector(".chatListContact").winControl;
        ui.setOptions(listViewContact, {
            itemDataSource: itemsContact.dataSource,
            itemTemplate: element.querySelector(".itemTemplate"),
            oniteminvoked: itemInvokedContact,
        });

        // Add a key down event handler to the text input area to react to a press of the Enter key.
        var chatTextInput = element.querySelector('.chatTextInput');
        chatTextInput.addEventListener("keydown", function (eventData) {
            // Has the Enter key been pressed?
            if (eventData.keyCode === WinJS.Utilities.Key.enter) {
                var textinput = document.querySelector('.chatTextInput');

                // Add the text in the text input area immediately to the chat history area.
                var texttoadd = textinput.value;
                if (texttoadd !== "") {
                    // Clear the text input area.
                    chatTextInput.value = "";

                    addTextToChat("Me: " + texttoadd);

                    // Start a 3 second timer to have a simulated reply appear later.
                    setTimeout(function () { chatTimerFired(); }, 3000);
                }
            }
        });
    }

    function getItemsGroup() {
        var colors = ["red", "green", "blue"];
        var items = new WinJS.Binding.List();
        for (var i = 1; i <= 3; i++) {
            items.push({
                key: i,
                title: "Group " + i,
                description: "This is Group " + i,
                borderAll: "2px solid rgba(255, 255, 255, 1.0)",
                backgroundColor: colors[(i - 1) % colors.length],
            });
        }
        return items;
    }

    function getItemsContact(index) {
        var colors = ["red", "green", "blue"];
        var items = new WinJS.Binding.List();
        for (var i = 1; i <= 3; i++) {
            items.push({
                key: i,
                title: 'Contact ' + i,
                description: 'This is Contact ' + (index + 1) + '.' + i,
                borderAll: "2px solid rgba(255, 255, 255, 1.0)",
                backgroundColor: colors[index],
            });
        }
        return items;
    }

    function itemInvokedGroup(e) {
        var lvContact = document.querySelector(".chatListContact").winControl;
        var itemsContact = getItemsContact(e.detail.itemIndex);

        ui.setOptions(lvContact, {
            itemDataSource: itemsContact.dataSource,
            itemTemplate: document.querySelector(".itemTemplate"),
            oniteminvoked: itemInvokedContact,
        });
    }

    function itemInvokedContact(e) {
        // Clear the Contacts list before navigating away from the page.
        var items = new WinJS.Binding.List();
        var lvContact = document.querySelector('.chatListContact');
        WinJS.UI.setOptions(lvContact, {
            dataSource: items.dataSource
        });

        WinJS.Navigation.navigate("/html/tablePage.html", { item: item });
    }

    function chatTimerFired() {
        var sendername = "Unknown sender";
        addTextToChat(sendername + ": This is a sample reply.");
    }

    function addTextToChat(texttoadd) {

        var textEcho = document.querySelector('.chatTextEchoContainer');
        if (textEcho) {
            // Add a div element containing the new text being echoed, beneath the element containing all the
            // echoed text. This leads to assistive technologies notifying users immediately of the update due
            // to the use of the aria-live and aria-relevant properties on the chatTextEchoContainer element.
            textEcho.insertAdjacentHTML('beforeEnd', "<div class=\"chatTextEcho\">" + texttoadd + "</div>");
        }
    }

    ui.Pages.define("/html/chatPage.html", {
        ready: ready,
        updateLayout: updateLayout
    });
})();

 完整樣本:/Files/risk/windows8/RIA應用sample.rar