Windows 8 Ria Application

Ria call example this example demonstrates how to use accessible RIA to ensure a fully accessible Metro style Application Program . The example shows how to implement the aria tag in a simulated chat software. In the UI and simple functions, you can better focus on the implemented Ria.

(Function(){

"Use strict ";

VaRUi = winjs. UI;

FunctionUpdatelayout (element, layoutstate ){
}

FunctionReady (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;
}

FunctionIteminvokedgroup (e ){
VaRLvcontact = Document. queryselector (". chatlistcontact"). wincontrol;
VaRItemscontact = 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 });
}

FunctionChattimerfired (){
VaRSendername = "Unknown sender ";
Addtexttochat (sendername + ": This is a sample reply .");
}

FunctionAddtexttochat (texttoadd ){

VaR Textecho = Document. queryselector ('. chattextechocontainer ');
If (Textecho ){
// Add a div element containing the new text being echoed, beneath the element containing all
// Echoed text. This leads to keep Ive technologies wide Ying 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
});
})();

Complete example:/files/risk/windows8/riaapplication sample.rar