Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1909, 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: utilizzare i controlli Telerik per visualizzare, stampare, esportare dati - parte 1

Indubbiamente tra le tematiche "calde" per chi sta utilizzando le prime Beta di Visual Studio LightSwitch rientrano la possibilità di utilizzare controlli di terze parti, ma anche stampa e reportistica. Ovviamente tutto questo è possibile, utilizzando controlli utente scritti in Silverlight 4.0. Personalmente faccio uso intensivo della suite di controlli RadControls for Silverlight di Telerik, che è veramente ottima e completa e arricchisce in modo notevole la toolbox di Visual Studio 2010.

Sebbene giri voce che Telerik voglia realizzare delle apposite estensioni per LightSwitch, in realtà è già possibile utilizzare i controlli dell'attuale suite. Vedremo quindi come utilizzare alcuni controlli nell'ultima versione della suite Telerik per creare un'applicazione LightSwitch veramente ricca. Implementeremo infatti la RadGridView, una griglia con eccezionali funzionalità di filtro, sorting e raggruppamento integrate, il paging e l'esportazione dei dati in Excel e in PDF, più la stampa. Questo, chiaramente, richiede Visual Studio 2010 Professional o superiore.

Suddividerò la trattazione in due post, così da renderla meno noiosa. Se siete stati attenti a quello che ho scritto, vi starete chiedendo perché dobbiamo implementare funzionalità di esportazione in Excel e di paging, visto che in LightSwitch ci sono di default. E' vero in parte, nel senso che quando sostituiamo la DataGrid di default di LightSwitch con un controllo utente esterno, perdiamo tutte le funzionalità built-in di esportazione e paging, quindi dobbiamo comporre un controllo utente che implementi il tutto; non solo, in LightSwitch l'esportazione in Excel funziona solo se l'applicazione è eseguita come desktop client, se invece è eseguita nel browser questa funzionalità non è disponibile poiché sfrutta COM automation disponibile solo con gli elevati privilegi delle out-of-browser. Bando alle ciance, cominciamo. In questo primo post creeremo un controllo utente che incapsula la RadGridView e il RadDataPager. Il resto nel prossimo post.

Supponiamo di aver creato una nuova applicazione LightSwitch collegandola ad una sorgente dati nuova o esistente; nella mia demo faccio uso di una connessione al database Northwind già esistente. In questa connessione ho importato le tabelle Customers, Orders e Order_Details nelle relative entità. Dò per scontato che sappiate come fare questo tipo di operazione, quindi non mi soffermo. Dopo aver creato l'origine dati, la prima cosa che faccio è aggiungere uno screen di tipo List and Details che elenchi i miei customer e visualizzi l'elenco degli order correlati:

Quando lo screen è creato, lo Screen Designer diventa attivo e mostra i controlli auto-generati ma focalizzeremo l'attenzione sul designer solo allorquando sostituiremo i controlli di default. Aggiungiamo quindi alla soluzione un nuovo progetto di tipo Silverlight Class Library, basato su Silverlight 4. Sulla mia macchina ho chiamato il progetto TelerikClassLibrary, ma è libera scelta. Visual Studio aggiunge una classe di default chiamata Class1.vb, bene... eliminiamola.

Aggiungiamo al progetto un nuovo elemento di tipo Silverlight User Control:

Anche in questo caso il nome del file è a vostra scelta e non per forza deve rispecchiare quello dello screenshot. Ci proponiamo di usare i controlli Telerik per gestire l'elenco di Orders. Quando il designer XAML di Visual Studio 2010 appare, abbiamo due scelte: la prima è aggiungere a mano i riferimenti agli assembly di Telerik, l'altra è quella di trascinare i controlli dalla toolbox e aggiustare lo XAML successivamente. Optiamo per la seconda scelta per semplificarci la vita. In particolare dobbiamo trascinare la RadGridView e il RadDataPager. In questa fase faremo il design anche dei pulsanti che ci serviranno nel prossimo post, anche se non li renderemo operativi. Qui non voglio soffermarmi troppo sul codice, se non quando espressamente richiesto, poiché la pagina online degli esempi di Telerik fornisce spiegazioni dettagliate. Qui vogliamo andare subito al sodo  Ecco il codice che predispone l'interfaccia:

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="29" />
            <RowDefinition Height="*" />
            <RowDefinition Height="29" />
        </Grid.RowDefinitions>
        <telerik:RadGridView Grid.Row="1" Name="RadGridView1" ItemsSource="{Binding Value}" ShowInsertRow="True" IsFilteringAllowed="True" 
                             SelectedItem="{Binding Value.SelectedItem, Mode=TwoWay}"  RowDetailsVisibilityMode="VisibleWhenSelected" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Order Date" DataMemberBinding="{Binding Path=OrderDate, StringFormat=D}"/>
                <telerik:GridViewDataColumn Header="Required Date" DataMemberBinding="{Binding Path=RequiredDate, StringFormat=D}"/>
                <telerik:GridViewDataColumn Header="Shipped Date" DataMemberBinding="{Binding Path=ShippedDate, StringFormat=D}"/>
                <telerik:GridViewDataColumn Header="Ship Via" DataMemberBinding="{Binding Path=ShipVia}"/>
                <telerik:GridViewDataColumn Header="Freight" DataMemberBinding="{Binding Path=Freight, StringFormat=c}"/>
                <telerik:GridViewDataColumn Header="Ship Name" DataMemberBinding="{Binding Path=ShipName}"/>
                <telerik:GridViewDataColumn Header="Ship Address" DataMemberBinding="{Binding Path=ShipAddress}"/>
                <telerik:GridViewDataColumn Header="Ship City" DataMemberBinding="{Binding Path=ShipCity}"/>
                <telerik:GridViewDataColumn Header="Ship Country" DataMemberBinding="{Binding Path=ShipCountry}"/>
            </telerik:RadGridView.Columns>
 
        </telerik:RadGridView>
        <telerik:RadDataPager Grid.Row="2" Name="RadDataPager1" Source="{Binding Items, ElementName=RadGridView1}" PageSize="45" IsTotalItemCountFixed="True"/>
        <StackPanel Orientation="Horizontal">
            <Button Content="Export to Excel" Height="21" Name="Button1" Width="100" Margin="3" />
            <Button Content="Print" Height="21" Name="PrintBitton" Width="100" Margin="3"/>
            <Button Content="Export to PDF" Height="21" Name="ExportPDFButton" Width="100" Margin="3"/>
        </StackPanel>
    </Grid>

Mettiamo in evidenza che:

  • la RadGridView si comporta in modo molto simile a una DataGrid nativa. Utilizzando gli appropriati StringFormat come markup extension, a runtime la griglia utilizzerà i controlli utente più adatti.
  • la proprietà ItemsSource è in binding con un generico oggetto chiamato Value. Questo consente alla RadGridView di ricevere una qualunque collection a runtime rendendo il nostro controllo, di fatto, riutilizzabile.
  • è fondamentale impostare la proprietà SelectedItem in binding con l'elemento corrente della collezione associata, altrimenti si perde l'allineamento tra griglia e collection
  • il RadDataPager, diversamente da quello nativo di Silverlight, punta alla proprietà Items della RadGridView. Le altre proprietà per il paging si spiegano da sole

Questo è essenzialmente tutto quello che dobbiamo fare. La cosa spettacolare è che non dobbiamo scrivere codice VB o C#, tutto avviene in binding nello XAML. A questo punto il nostro controllo composto si presenta così:

Compiliamo il progetto e andiamo a vedere come utilizzarlo in LightSwitch. A questo punto andiamo nello Screen Designer per lo screen che abbiamo creato poc'anzi. Selezioniamo la DataGrid che punta agli Orders e nella combo associata selezioniamo Custom Control:

Poi, nella finestra delle proprietà localizziamo la voce Custom Control e noteremo che impostata come Not Set. Clicchiamo su Change. Questo ci permetterà di selezionare un controllo utente diverso. Dapprima cliccheremo su Add Reference e aggiungeremo il riferimento al progetto Silverlight che contiene il nostro controllo, quindi lo selezioneremo nella dialog:

Nella finestra delle proprietà ora il controllo risulterà associato allo screen, per la parte da noi richiesta:

Si noti la familiarità con Silverlight/WPF, dovuta al fatto che esiste una proprietà Data Context per il controllo utente che viene alimentata con la collection Orders. Ora non ci resta che avviare l'applicazione e.. et voilà:

Come potete vedere il nostro controllo utente ha sostituito la DataGrid originaria, solo lavorando sullo XAML. E' quindi possibile sfruttare le eccezionali funzionalità della RadGridView come i filtri integrati, il sorting, lo spostamento delle colonne ecc. Inoltre, anche la funzionalità di paginazione dei dati funziona a meraviglia.

Nel prossimo post vedremo come rendere operativi i pulsanti e implementare le funzionalità di esportazione/stampa.

Alessandro

Print | posted on lunedì 18 aprile 2011 03:09 | Filed Under [ Visual Studio LightSwitch ]

Powered by:
Powered By Subtext Powered By ASP.NET