Silverlight 4 e WCF RIA Services : esempio di relazione master-detail
[Aggiornato con codice anche in Visual Basic]
In questo post vedremo come realizzare un semplice esempio per implementare una relatione master-detail usando Silverlight 4 e i WCF RIA Services, entrambe le tecnologie non ancora rilasciate.
Per realizzare l’esempio dovete installare
- Visual Studio 2010 (beta 2 al momento)
- Silverlight 4 (beta) che contiene la Technical Preview dei WCF RIA Serives
Creazione del progetto per una Business Application
Inzialmente partiamo realizzando un’applicazione Silverlight, anche se non strettamente necessario possiamo usare il template Silverlight per realizzare applicazioni di business. Per usarlo da Visual Studio 2010, selezionare “New Projects”, quindi “Silverlight” e selezionare Silverlight Business Application, come mostrato in figura
Questo template ci consente di avere un template già fatto che offre questi vantaggi:
- aspetto professionale
- un framework di navigazione per l’applicazione integrato con i bottoni di back and forward funzionante da diversi browser: Internet Explorer, Safari, FireFox e Chrome.
- Proprietà dei controlli della UI già integrati con il file delle risorse per una facile localizzazione
- integrazione con il provider di memership di ASP.NET per l’autenticazione e gestione dei ruoli
Nel nostro caso andremo a personalizzare la pagina Home.xaml che si trova nel folder Views, ma potete aggiungere un’altra pagina Silverlight facilmente al framework di navigazione.
Creazione del DAL usando Entity Framework
Aggiungiamo ora al progetto un ADO.NET Entity Data Model, per creare il nostro DAL, nel mio caso l’ho chiamato NorthwindModel.edmx e ho aggiunto, usando il database northwind, la tabella Customers e Orders, per avere una semplice relazione 1-a-molti che mi servirà per creare la UI con la relazione master-details. Inoltre nel designer ho rinominato le due classi create togleindo la “s” finale. Quindi il mio modello dei dati avrà la classe Customer e la classe Order, senza “s” . Quersto mi permette di avere collezioni di oggetti che invece avranno la “s” finale. Ovviamente questa è una finezza e non strettamente necessaria.
Nella figura seguente vedete la selezione delle due tabelle dal designer di Entity Framework
Che generano quindi le due classi. Nella figura seguente vedete il risultato con le due entità già rinominate.
Creazione del servizio con i WCF RIA Services
Aggiungiamo ora un nuovo item che realizzerà lo strato di servizio con i RIA Services. Add-> New Items… e selezioniamo il template per Domain Service Class.
Questo mostrerà un popup nel quale dobbiamo indicare se le entità che verrano create saranno accedibili dal client, quali entità di quelle presenti vogliamo utilizzare, se vogliamo fare operazioni di modifica, oltre che di lettura.
Questo wizard genera il file NorthwindDomainService.cs dove troviamo il codice del servizio e in particolare i metodi per ottenere la lista dei nostri Customer come GetCustomers che ritorna un valore di tipo IQueryable del tipo Customer. In questo caso l’implementazione del nostro servizio è fatta sfruttando la classe LinqToEntityDomainServices messa a disposizione dal framework e che Visual Studio 2010 mi consente di sfruttare a pieno tramite il wizard.
Dato che ho chiesto al wizard di utilizzare anche l’entità Order, nel progetto troverete anche i corrispondenti metodi per la gestione.
Nel nostro caso però lo scenario che vogliamo indirizzare è leggermente più complesso: infatti vogliamo mostrare due griglie la prima legata ai clienti e la seconda agli ordini di uno specifico cliente una volta selezionato questo nella prima griglia.
Per questo aggiungiamo un metodo per recuperare gli ordini, metodo che accetterà un parametroche rappresenta l’id del nostro customer.
il codice da aggiungere per chi usa Visual Basic.NET 2010 è il seguente
Grazie ai RIA Service e il template di progetto di Visual Studio 2010 ci troviamo, dopo la compilazione, il modello ad oggetti esposto sul server, direttamente sul client e tutte le operazioni di comunicazione vengono gestite per me dal framework.
Creazione della User Interface
Per la UI ho posizionato due DataGrid, una (customerDataGrid) che conterrà la lista dei customer e la seconda (orderDataGrid) gli ordini selezionati per lo specifico customer. Per fare questo ho intercettato l’evento SelectionChanged sulla prima DataGrid, per aggiungere del codice in cs, come vedrete nel seguito.
Inizialmente ho usato il drag-and-drop offerto da Visual Studio 2010, usando la finestra Data Source e trascinando l’oggetto Customer, questo mi ha aggiunto sia la DataGrid che l’oggetto DomainDataSource corrispondente. Inoltre ho poi aggiunto una seconda DataGrid che dovrà contenere gli ordini.
In figura seguente vedete più o meno il risultato nel designer di Visual Studio 2010:
Aggiungo ora l’evento SelectionChanged alla DataGrid customerDataGrid e aggiungo il codice per riempire la seconda (orderDataGrid nell’esempio) facendo la query verso il metodo GetOrdersByCustomerID, visto prima, aggiunto lato server e che mi trovo ora sul client grazie a RIA Services. Il metodo lato client, si chiama come la sua controparte sul server, con in più l’estensione finale di Query.
Il codice in Visual Basic corrispondente è:
Lanciando ora l’applicazione abbiamo il comportamento desiderato: seleziono un customer nella prima DataGrid e vedo nella seconda gli ordini, come vedete nella figura sottostante.
Download esempio
Potete scaricare il codice d’esempio da
Buon divertimento con Silverlight 4 e i WCF RIA Services !