Windows Phone 8 e javascript - Parte 1

Navigando nel web ho trovato molte domande sulla convivenza di Windows phone e Javascript, la mia risposta è sempre la stessa:

"Si, è possibile creare applicazioni Windows Phone basate su HTML5 e Javascript"

Oggi voglio far capire come sia possibile farlo. Chi non è alle prime armi, potrebbe rispondermi:

"Visual Studio dispone già di un Project Template HTML5/Javascript per Windows Phone"

Questa cosa è vera, però è interessante capire come funziona la cosa, e creare un template pulito da codice che magari non useremo mai.

NOTA BENE: Per sviluppare su Windows Phone 8, hai bisogno di un PC con Windows 8 e Visual Studio 2012.


Prima di tutto, apriamo il nostro Visual Studio e clicchiamo su File -> Nuovo -> Progetto...

Nella finestra che si apre selezioniamo Visual C# -> Windows Phone -> Windows Phone App

Inseriamo un Nome e il Percorso di salvataggio e clicchiamo su OK. In questa ultima finestra, lasciamo tutto così com'è e clicchiamo su OK.

Attendiamo che il progetto venga creato, finito il caricamento, ci verrà presentata una schermata simile a questa:

Concentriamoci sulla parte destra, quella del codice, apporteremo qualche modifica. Prima di tutto modifichiamo queste righe:

Cancelliamo completamente questa parte di codice:

Ed anche questa:

Infine, eliminiamo questa ultima parte:

Ora modifichiamo queste linee di codice:

Fatte tutte queste operazioni, il risultato dovrebbe essere simile a questo:

Fino ad ora, non abbiamo fatto altro che creare una griglia con una riga, che occupa tutto lo schermo. Javascript e l'HTML 5, funzionano all'interno di pagine web, quindi il prossimo passo sarà quello di inserire un Web Browser all'interno della riga, dove, all'interno di esso verrà visualizzata la nostra applicazione. Modifichiamo questa riga:

Così avremmo aggiunto il nostro Web Browser. Ora andremo a creare un po di cartelle per dare una struttura al nostro progetto. Apriamo il Solution Explorer

Selezioniamo il nostro progetto

Clicchiamo con il tasto destro su di esso e selezioniamo  Aggiungi -> Nuova cartella

Le cartelle da creare con questo procedimento sono:

• css
• html
• js

Creata la prima struttura, sempre dal Solution Explorer creiamo un nuovo file dentro la cartella css

Nella finestra che si apre, selezioniamo File di Testo, nel campo nome inseriamo default.css e clicchiamo su Aggiungi

Modifichiamo il file css, inserendo queste righe

La riga nuova per tutti è la seguente:

• -ms-touch-action: none; Con questa riga, disabilitiamo lo scroll all'interno del Web Browser, nascondendo agli utenti, il fatto di essere a navigare una pagina web e rendendo l'applicazione più nativa.

Adesso torniamo nel  Solution Explorer, clicchiamo con il destro sulla cartella html e selezioniamo Aggiungi -> Nuovo elemento... Questa volta nella finestra selezioniamo File di Testo e come nome diamo default.html. In questo nuovo file aggiungiamo le seguenti righe:

Semplicemente, sono tag HTML. Torniamo al Solution Explorer, clicchiamo con il destro sulla cartella js, selezioniamo Aggiungi -> Nuovo Elemento... Nella finestra selezioniamo File di Testo e come nome diamo default.js. Aggiungiamo le seguenti righe al nuovo file:

Torniamo nella pagina MainPage.xaml, Al nuvo tag inserito in precedenza (quello del Web Browser), dovremmo aggiungere dei nuovi attributi, ecco una breve spiegazione:

• Source: questo attributo richiede il percorso del file html da visualizzare, quindi noti inseriremo il percorso del file default.html

Salviamo tutto

e proviamo ad eseguire

Continua con la Parte 2