Windows Phone - leggere Embedded Resource con HTML5/Javascript senza PhoneGap

In questo articolo spiegherò come includere file in un progetto ed leggerli durante l'esecuzione senza l'utilizzo del framework PhoneGap. Come ben sapete, HTML e Javascript, normalmente non hanno accesso alla modifica dei file sul computer dell'utente,

in windows 8 sono state aggiunte un paio di funzioni che permettono questo, ma in windows phone?

Per iniziare creiamo un progetto windows phone 8 con HTML5/Javascript (vanno benissimo i due articoli che ho scritto: post1 post2). Nel Solution Explorer apriamo il file default.html che si trova nella cartella html e aggiungiamo questa riga:

<div id="text"></div>

Adesso, torniamo al Solution Explorer ed clicchiamo con il tasto destro sulla soluzione del progetto:

Andiamo su Aggiungi e clicchiamo su Nuovo Progetto...

Nella nuova finestra andiamo su Visual C# -> Windows Phone -> Windows Phone Class Library:

Diamo un Nome e clicchiamo su OK. In Questa finestra:

Clicchiamo su OK. Attendiamo la fine della creazione del nuovo progetto, dopodiché, andiamo nel Solution Explorer e clicchiamo con il destro sul file Class1.cs nel nuovo progetto creato e Rinominiamolo:

Scegliamo un nuovo nome, ad esempio Read.cs, diamo Invio e rispondiamo Si alla finestra che si presenta, infine lo apriamo. La prima modifica che andremo a fare è aggiungere un sealed alla classe:

Con questa modifica, evitiamo che la classe venga ereditata

Ora aggiungiamo un paio di using:

using System.IO;

using System.Reflection;

using System.Threading.Tasks;

ed creiamo questa funzione:

static async Task<string> ReadResourceAsync(Assembly assembly, string resource)

{

   string xml;

   using (var stream = assembly.GetManifestResourceStream(resource))

   {

      using (var reader = new StreamReader(stream))

      {

         xml = await reader.ReadToEndAsync();

      }

   } 

   return xml;

}

Questa funzione serve ad leggere un file dalle risorse dell'applicazione. Adesso vediamo come richiamarla, aggiungiamo un'altra using:

using Windows.Foundation;

e questa nuova funzione:

public static IAsyncOperation<string> GetFileText(string fileName)

{

   return (ReadResourceAsync(typeof(Read).GetTypeInfo().Assembly, 

               fileName)).AsAsyncOperation<string>();

}

A livello di codice C#, abbiamo terminato, adesso aggiungiamo un file che andremo a leggere; va benissimo un qualsiasi file di testo. Per inserirlo andiamo nel Solution Explorer e sempre dentro a questo nuovo progetto clicchiamo con il destro ed andiamo su Aggiungi -> Nuova cartella:

Chiamiamola Files. Clicchiamo con il destro su questa cartella ed andiamo su Aggiungi; adesso, se vogliamo inserire un nuovo elemento clicchiamo su Nuovo elemento..., altrimenti clicchiamo su Elemento esistente..., noi creeremo un nuovo elemento, un file txt che chiameremo Prova.txt ed ci inseriremo questo testo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Andiamo nel Solution Explorer e clicchiamo con il destro sul nuovo file txt scegliento Proprietà:

E cambiamo la Build Action  in Embedded Resource:

Sempre nel Solution Explorer clicchiamo con il destro sul progetto principale scegliendo Aggiungi referenza...

Nella nuova finestra selezioniamo Soluzione -> Progetto e spuntiamo dall'elenco il progetto che abbiamo creato ed infine clicchiamo su OK.

Andiamo nel Solution Explorer ed apriamo il file default.js che si trova nella cartella js e modifichiamo la funzione onLoad in questo modo:

Spiegazione: Cambiamo il tipo di notifica da inviare al C#

Torniamo nel Solution Explorer ed apriamo il file MainPage.xaml.cs:

Modifichiamo la funzione HTML_JS:

Spiegazione: Leggiamo il messaggio, se è un Load, vuol dire che dobbiamo leggere il file

Ora torniamo nel default.js ed aggiungiamo questa nuova funzione:

Spiegazione: inserisco il testo letto nell'elemento div di id text

Per finire, andiamo nel Solution Explorer ed apriamo il file default.css modificandolo in questo modo:

Salviamo ed eseguiamo. Ultimo consiglio, se il testo è troppo lungo e non riusciamo a leggerlo, basta eliminare la riga:

-ms-touch-action: none;

dal file default.css.
Anche per oggi è tutto, al prossimo articolo!