Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1908, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

LightSwitch: creare un client HTML - prima parte

Da ieri è disponibile il tanto atteso aggiornamento per Visual Studio 2012 RC che permette di creare applicazioni LightSwitch che generino un client HTML 5+JavaScript; questa possibilità, come sapete, permette a qualunque tipo di device che abbia un browser Web di utilizzare le vostre applicazioni (quindi tablet PC, iPad, iPhone, Windows Phone, Android, etc).

Vediamo come creare un semplice client HTML 5 per un'applicazione LightSwitch che, per brevità, avrà una sola tabella. Innanzitutto creiamo un nuovo progetto in LightSwitch con VS 2012 (il client HTML non è disponibile per LightSwitch v1).

Come vedete, già la finestra New Project cambia:

Infatti è possibile scegliere il consueto template per l'applicazione LightSwitch classica, più un template per un'applicazione con il solo client HTML. In realtà la vera potenza sta nel fatto che si può creare un'applicazione classica e aggiungere un client HTML, cosa che faremo in questo post, in modo da avere più client per la stessa fonte dati, che è lo scenario ideale.

Partiamo da una tabella chiamata Contact, che fa anche uso di qualche business type:

 Noterete una novità in Solution Explorer. La soluzione infatti ora si divide in:

  • Server: la parte che contiene i dati e, dietro le scene, i servizi WCF che li espongono all'esterno
  • Client: la parte che contiene il client Silverlight a cui siamo già abituati

Questo ha come conseguenza che anche la gestione delle proprietà di progetto cambia, ma lo vedremo al momento opportuno. Facciamo click destro sul nome del progetto in Solution Explorer e selezioniamo Add Client.

La finestra di dialogo Add Client presenterà le possibilità offerte, quindi per ora il solo client HTML, e attenderà la specifica del nome del progetto:

A questo punto LightSwitch creerà in Solution Explorer un altro nodo di tipo client, chiamato col nome specificato in quest'ultima finestra, proprio a testimoniare la disponibilità di più client. Poiché la sorgente dati rimane la stessa, nulla dobbiamo fare su quest'ultima e possiamo passare direttamente ad aggiungere gli screen.

Obbligatoriamente un client HTML deve avere uno screen chiamato Home e che sia di tipo Browse Data Screen, un template che permette di elencare il contenuto di una tabella. Quindi, tasto destro sul nuovo elemento client generato in Solution Explorer, quindi Add Screen:

I template disponibili sono 3:

  • Browse Data Screen; permette di elencare il contenuto di una tabella o di una query
  • View Details Screen; permette di visualizzare un'entità e i suoi dettagli
  • Add/Edit Details Screen; permette di aggiungere o modificare un'entità

Rispettiamo i requisiti e aggiungiamo l'Home screen richiesto, che comparirà in Solution Explorer e che sarà possibile modificare nel consueto Screen Designer, tenendo bene a mente che sono disponibili una serie di controlli utente in pura produzione HTML.

E' sufficiente premere F5 per avviare il nostro client HTML:

Come vedete è tutto HTML 5 + JavaScript! Quando l'applicazione è in debug, potrete anche notare in Solution Explorer la presenza di una serie di elementi jQuery e di file .js, inoltre potrete osservare che, mentre si interagisce con la pagina, Visual Studio mostra il codice HTML generato.

Inoltre, sia in questo ma anche negli altri screen, è abbastanza evidente come il layout sia stato progettato per essere utilizzato su dispositivi touch. Questo risuona anche nella terminologia di alcuni elementi. Ad esempio, bisogna ora dire a LightSwitch cosa fare quando un utente clicca (o tocca) un contatto nell'elenco. Quindi bisogna far si che ci sia uno screen dei dettagli dell'entità selezionata. In primo luogo aggiungiamo un nuovo screen di tipo View Details che punti alla tabella Contacts, seguendo le consuete modalità.

Fatto questo, apriamo lo Screen Designer per l'Home screen, clicchiamo sul controllo List e nella finestra delle Proprietà individuiamo e clicchiamo la voce chiamata Item Tap. Già il solo nome ci rievoca dispositivi touch screen.

A questo punto dovremo specificare quale metodo invocare al tocco dell'elemento:

E' possibile creare metodi nuovi o usarne uno esistente, come ad esempio nel nostro caso ShowViewContactDetail che aprirà lo screen creato poc'anzi. E' necessario specificare l'oggetto da aprire nello screen, quindi l'elemento correntemente selezionato nella lista. Nell'apposita casella di testo, digitando il nome delle entità una sorta di IntelliSense ci aiuterà nel selezionare il dato di interesse.

A questo punto riavviamo il client:

Magicamente toccando il nome di un contatto si verrà rediretti ai suoi dettagli. Notate la presenza di un pulsante in alto a sinistra che permette di tornare indietro.

Se avete voglia di smanettare un pochino, ma più semplicemente di leggere la documentazione a corredo della macchina virtuale, potrete fare un deploy di test e aprire l'applicazione da un tablet o dispositivo portatile.

In questo post abbiamo visto solo un assaggio, parleremo poi di come aggiungere e modificare entità ma anche di come ritoccare il layout dell'applicazione.

Vi ricordo che il download del package sarà disponibile al pubblico a partire da giovedì 28 giugno 2012, mentre per ora è disponibile agli abbonati MSDN.

Gran bel lavoro, Team di LightSwitch!

Alessandro

Print | posted on mercoledì 27 giugno 2012 19:54 | Filed Under [ Silverlight e Windows Phone Visual Studio LightSwitch ]

Powered by:
Powered By Subtext Powered By ASP.NET