Nella lezione precedente abbiamo visto cosa sono i componenti Windows Runtime, ovvero le librerie di WinRT che possono essere sfruttate da qualsiasi applicazione Windows Store e utilizzando qualunque linguaggio, compreso JavaScript.
Abbiamo anche detto però che non è possibile attualmente realizzare questi componenti con JavaScript, per questo abbiamo dovuto realizzare un esempio di libreria direttamente in C#, all'interno della guida dedicata allo sviluppo di app Windows Store con C#/XAML.
In questo articolo vediamo come consumare il componente WinMD che abbiamo realizzato all'interno di un'applicazione Windows Store in HTML/JavaScript.
L'utilizzo di componenti Windows Runtime sviluppate in codice managed (C#/VB) richiedono l'esecuzione del Common Language Runtime, mentre questo non è necessario quando a essere utilizzati sono componente Windows Runtime nativi (sviluppati in codice unmanaged). Normalmente, infatti, le applicazioni Windows Store sviluppate in HTML5/JavaScript si avvalgono del Trident Rendering Engine per il rendering dell'HTML e sul Chakra JavaScript Engine per l'interpretazione del codice JavaScript (per inciso, gli stessi engine su cui si basa Internet Explorer 10), senza dunque la necessità di caricare il Common Language Runtime. Al contrario, quando a essere consumato è un componente WinMD sviluppato in C# o VB, questo deve essere eseguito all'interno dell'ambiente offerto dal CLR.
Ciò premesso, creiamo un nuovo progetto Windows Store in HTML5/JavaScript e, come prima cosa, aggiungiamo una reference al file WinMD che rappresenta la nostra libreria custom. Cliccando con il tasto destro sulla solution, selezioniamo Add reference, clicchiamo su Browse e navighiamo fino alla cartella bin/Debug del progetto WinMD creato durante l'articolo precedente e quindi selezioniamo il file WinMD contenuto nella cartella (perché il file sia presente, occorre aver compilato il progetto almeno una volta).La prossima immagine mostra la libreria WinMD precedentemente creata.
A questo punto possiamo utilizzare il componente all'interno della nostra applicazione. Ecco il markup HTML per testare il componente.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo.Html.it.WinMDConsumer.JS</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- Demo.Html.it.WinMDConsumer.JS references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<span>
<input type="text" name="emailText" />
<button id="btnConsume">Controlla email</button>
</span>
</body>
</html>Nel file default.js aggiungiamo il seguente handler per l'evento di click:
app.onloaded = function () {
btnConsume.addEventListener("click", consumeWinMD_click);
};
function consumeWinMD_click(args) {
var email = emailText.value;
var tool = new Demo.Html.it.MyWinMDLibrary.CS.SampleTool();
var result = tool.isMailAddress(email);
}Aggiungiamo poi un breakpoint in corrispondenza della chiamata al metodo IsMailAddress ed eseguiamo l'applicazione in modalità Debug. Una volta raggiunto il breakpoint, premendo F11 (Step Into) noterai che il debug non entrerà all'interno della funzione esposta dal componente custom a partire dal progetto Windows Store. Questo perché, per default, la modalità di debugging del codice è impostata su Native Only. Per modificare questo comportamento (e quindi per entrare in debug nel componente managed) è sufficiente aprire la finestra delle proprietà del progetto e impostare il Debugger Type su Mixed (Managed and Native).
Se adesso eseguiamo nuovamente l'applicazione, noteremo che questa volta Visual Studio entrerà in debug nel codice del componente C#, come mostrato nella prossima immagine:
Per concludere, è importante aggiungere che la creazione di un componente Windows Runtime rappresenta solo una delle opzioni a disposizione dello sviluppatore per creare proprie librerie di API riutilizzabili in applicazioni Windows Store.
Come abbiamo avuto di ricordare più volte, in JavaScript non è possibile creare un componente WinMD. È probabile quindi che la user interface dell'applicativo risieda in una applicazione HTML/Javascript, mente la logica di business si basi su un linguaggio object oriented più evoluto come C# o C++.
