Introduzione allo sviluppo per SharePoint

Introduzione allo sviluppo per SharePoint Esercitazione pratica Manuale dell esercitazione SPCHOL306 - Utilizzo di Silverlight con il modello a oggetti client - C#

Questo documento viene fornito «così com è». Le informazioni e le opinioni espresse nel presente documento, inclusi gli URL e altri riferimenti a siti Web Internet, possono essere soggette a modifiche senza preavviso. L utente accetta di utilizzarlo a proprio rischio. Questo documento non conferisce alcun diritto legale alla proprietà intellettuale dei prodotti Microsoft. È possibile copiare e utilizzare questo documento per fini di riferimento interno. 2010 Microsoft. Tutti i diritti riservati.

Sommario SPCHOL306 - UTILIZZO DI SILVERLIGHT CON IL MODELLO A OGGETTI CLIENT... 2 Obiettivo dell esercitazione... 2 Risorse aggiuntive... 2 Informazioni preliminari... 2 Esecuzione dell accesso alla macchina virtuale... 2 Percorsi... 2 Prerequisiti per l esercitazione... 3 Copia di esempi di codice dal documento di Word... 3 Frammenti di codice... 4 Esercizio 1 - Creazione di un applicazione Silverlight per il modello a oggetti client di SharePoint... 5 Attività 1 - Creare un progetto applicazione Silverlight... 5 Attività 2 - Scrivere il codice per accedere ai dati di un elenco di SharePoint ed eseguire il rendering di tali dati... 8 Attività 3 - Eseguire la distribuzione e il test utilizzando la web part Silverlight di SharePoint... 12 Esercizio 2 - Creazione di un grafico con il modello a oggetti di SharePoint e gli appositi controlli Silverlight... 14 Attività 1 - Creare un progetto applicazione Silverlight... 14 Attività 2 - Scrivere il codice per accedere ai dati dell elenco Dipendenti (Employees) di SharePoint e visualizzarli in un controllo grafico Silverlight... 18 Attività 3 - Eseguire la distribuzione e il test utilizzando la web part Grafico Silverlight di SharePoint... 22 Riepilogo dell esercitazione... 25 Pagina 1

SPCHOL306 - Utilizzo di Silverlight con il modello a oggetti client Tempo previsto per completare l esercitazione: 30 minuti Per questi esercizi sono necessari Visual Studio 2010, SharePoint Foundation 2010 e Silverlight 3 Toolkit, che sono installati nella macchina virtuale utilizzata in questa esercitazione. Obiettivo dell esercitazione L obiettivo di questa esercitazione è illustrare come creare e ospitare applicazioni Silverlight in SharePoint 2010 e come utilizzare il modello a oggetti client di SharePoint per accedere a dati di SharePoint da Silverlight. Creare un applicazione Silverlight di base in grado di visualizzare un elenco di SharePoint all interno di una griglia dati e distribuire l applicazione Silverlight in SharePoint. Creare un applicazione Silverlight in grado di visualizzare i dati di un elenco di SharePoint in un grafico utilizzando gli appositi controlli Silverlight. Risorse aggiuntive In questa esercitazione sono incluse le risorse aggiuntive seguenti: Il manuale di questa esercitazione Il codice sorgente SPCHOL306_Manual_CS.docx \Supporting Files\SPCHOL306\Completed\CS\Ex1\ \Supporting Files\SPCHOL306\Completed\CS\Ex2\ Il presente documento Il codice sorgente completo dell esercitazione in C# Risorse \Supporting Files\SPCHOL306\Resources\CS\ Diverse risorse utilizzate in questa esercitazione Informazioni preliminari Esecuzione dell accesso alla macchina virtuale Eseguire l accesso alla macchina virtuale con le credenziali seguenti: Nome utente: Amministratore Password: pass@word1 Percorsi In questa esercitazione pratica sono incluse diverse altre risorse in percorsi fissi. Per impostazione predefinita, si presuppone che la directory di base delle risorse dell esercitazione pratica sia C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\Supporting Files\SPCHOL306\Resources. La cartella di lavoro predefinita per questa esercitazione è C:\SPHOLS\SPCHOL306. Pagina 2

Prerequisiti per l esercitazione Passare alla directory di base Supporting Files\SPCHOL306\Resources dell esercitazione pratica ed eseguire lo script di PowerShell denominato optimize.ps1: 1. Fare clic con il pulsante destro del mouse su optimize.ps1 e scegliere Esegui con PowerShell: Figura 1 - Esecuzione dello script di PowerShell 2. Verrà aperta una finestra di PowerShell per l esecuzione dello script. Attendere che venga completata l esecuzione dello script di PowerShell e che venga chiusa la finestra di PowerShell (questa operazione può richiedere tempo): Figura 2 - Finestra di PowerShell con lo script in esecuzione Copia di esempi di codice dal documento di Word Copiare e incollare codice da questo documento di Word a Visual Studio è un operazione sicura solo per le sezioni di codice formattato, ad esempio: Console.WriteLine("This is safe code!"); Pagina 3

Nel codice non incluso in sezioni di questo tipo possono essere presenti caratteri Unicode o altri caratteri invisibili non riconosciuti come codice XML o C#/VB valido, ad esempio: Console.WriteLine( This is NOT safe code!! ); Frammenti di codice Per inserire il codice appropriato nell esercitazione, è inoltre possibile utilizzare frammenti di codice. Per utilizzare il frammento di codice necessario per questa esercitazione: Fare clic con il pulsante destro del mouse sul file di codice in cui si desidera inserire il frammento di codice. Scegliere Inserisci frammento di codice. Figura 3 - Menu contestuale del codice di Visual Studio Selezionare i frammenti di codice dalla raccolta Frammenti di codice. Pagina 4

Esercizio 1 - Creazione di un applicazione Silverlight per il modello a oggetti client di SharePoint In questo esercizio verrà creata un applicazione Silverlight di base in grado di visualizzare un elenco di SharePoint all interno di una griglia dati. I dati dell elenco vengono recuperati dal server, in modo da essere disponibili in Silverlight tramite il modello a oggetti client di SharePoint. Verrà utilizzata una soluzione di Visual Studio 2010 che sarà distribuita nel server SharePoint locale. Attività 1 - Creare un progetto applicazione Silverlight È innanzitutto necessario creare un progetto applicazione Silverlight standard. 1. Aprire Visual Studio 2010 da Start Tutti i programmi Microsoft Visual Studio 2010 Microsoft Visual Studio 2010. 2. Scegliere File Nuovo Progetto dal menu. 3. Nella finestra di dialogo Nuovo progetto espandere il menu Modelli installati a sinistra in modo da visualizzare Altri tipi di progetto Soluzioni di Visual Studio Soluzione vuota. 4. Selezionare.NET Framework 3.5. 5. Specificare Begin come nome della soluzione. 6. Immettere C:\SPHOLS\SPCHOL306\CS\Ex1\ nella casella di testo Percorso. Figura 4 - Finestra di dialogo Nuovo progetto 7. Fare clic su OK per continuare. 8. Scegliere File Aggiungi Nuovo progetto dal menu. Pagina 5

9. Nella finestra di dialogo Nuovo progetto espandere il menu Modelli installati a sinistra in modo da visualizzare Visual C# Silverlight, quindi selezionare Applicazione Silverlight nell elenco dei tipi di progetto nella sezione centrale della schermata. 10. Selezionare.NET Framework 3.5. 11. Specificare SPSilverlightExample come nome del progetto. 12. Lasciare invariato il percorso. Figura 5 - Finestra di dialogo Aggiungi nuovo progetto 13. Fare clic su OK per continuare. Figura 6 - Finestra di dialogo Aggiungi applicazione Silverlight Pagina 6

14. Fare clic su OK per creare il progetto. 15. Nel progetto SPSilverlightExample sarà ora necessario aggiungere gli assembly di riferimento al modello a oggetti client Silverlight di SharePoint. Fare clic con il pulsante destro del mouse su Riferimenti nel progetto SPSilverlightExample e scegliere Aggiungi riferimenti. 16. Passare alla cartella «C:\Programmi\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin». 17. Selezionare Microsoft.SharePoint.ClientSilverlight.dll e Microsoft.SharePoint.Client.Silverlight.Runtime.dll (tenere premuto CTRL per selezionare più file). 18. Fare clic su OK per aggiungere i riferimenti alle DLL selezionate. Figura 7 - Aggiungi riferimento Pagina 7

Attività 2 - Scrivere il codice per accedere ai dati di un elenco di SharePoint ed eseguire il rendering di tali dati 1. In Visual Studio aprire la Casella degli strumenti ed espandere i controlli Silverlight. 2. Trascinare un controllo DataGrid nella griglia esistente nella finestra di progettazione Silverlight Page.xaml. Figura 8 - Casella degli strumenti con i controlli Silverlight Pagina 8

3. Espandere la DataGrid in modo che occupi l intera pagina. A tale scopo, visualizzare la griglia proprietà e impostare Width e Height su Auto, HorizontalAlignment e VerticalAlignment su Esteso e Margin su 0. Figura 9 - Proprietà della DataGrid 4. Ricordarsi inoltre di selezionare AutoGenerateColumns (o di impostare il relativo valore su True nell XAML). Figura 10 - Proprietà AutoGenerateColumns 5. Aprire App.xaml.cs e aggiungere le istruzioni using seguenti nella parte superiore del file: using Microsoft.SharePoint.Client; using System.Threading; Frammento di codice: My Code Snippets spchol306_ex1_app_namespaces 6. Aggiungere il codice seguente all inizio del metodo Application_Startup: ApplicationContext.Init(e.InitParams, SynchronizationContext.Current); Frammento di codice: My Code Snippets spchol306_ex1_ application_startup Pagina 9

7. Aprire MainPage.xaml.cs e aggiungere l istruzione using seguente nella parte superiore del file: using Microsoft.SharePoint.Client; Frammento di codice: My Code Snippets spchol306_ex1_page_namespaces 8. Aggiungere la classe seguente prima della classe MainPage: public class Project { public string Title { get; set; } public DateTime DueDate { get; set; } public string Description { get; set; } } Frammento di codice: My Code Snippets spchol306_ex1_ classes 9. Aggiungere la variabile seguente alla classe MainPage: private ListItemCollection _projects; Frammento di codice: My Code Snippets spchol306_ex1_ property 10. Aggiungere il codice seguente al costruttore Page sotto la chiamata a InitializeComponent: ClientContext context = new ClientContext(ApplicationContext.Current.Url); context.load(context.web); List Projects = context.web.lists.getbytitle("projects"); context.load(projects); CamlQuery query = new Microsoft.SharePoint.Client.CamlQuery(); string camlqueryxml = "<View><Query><Where><Gt>" + "<FieldRef Name= Due_x0020_Date />" + "<Value Type= DateTime >2008-01-1T00:00:00Z</Value>" + "</Gt></Where></Query><ViewFields>" + "<FieldRef Name=\"Title\" /><FieldRef Name=\"Description\" />" + "<FieldRef Name=\"Due_x0020_Date\" />" + "</ViewFields></View>"; query.viewxml = camlqueryxml; _projects = Projects.GetItems(query); context.load(_projects); context.executequeryasync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null); Frammento di codice: My Code Snippets spchol306_ex1_initializecomponent Pagina 10

11. Aggiungere il codice seguente dopo il costruttore: private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args) { // this is not called on the UI thread Dispatcher.BeginInvoke(BindData); } private void BindData() { List<Project> projects = new List<Project>(); foreach (ListItem li in _projects) { projects.add(new Project() { Title = li["title"].tostring(), DueDate = Convert.ToDateTime(li["Due_x0020_Date"].ToString()), Description = li["description"].tostring() }); } datagrid1.itemssource = projects; // must be on UI thread } Frammento di codice: My Code Snippets spchol306_ex1_methods Questo codice inizializza il contesto del modello a oggetti client Silverlight di SharePoint (ClientContext). Ottiene quindi un riferimento all elenco Projects ed esegue su quest ultimo una query CAML semplice per estrarre tutti i progetti con una data di scadenza successiva al 1 gennaio 2008. I risultati vengono convertiti in un elenco di progetti e associati al controllo griglia dati (DataGrid) Silverlight. Pagina 11

Attività 3 - Eseguire la distribuzione e il test utilizzando la web part Silverlight di SharePoint Per poter distribuire la soluzione in SharePoint, è necessario che il file con estensione xap risultante, creato dal progetto Silverlight, si trovi nella cartella C:\Programmi\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. 1. Fare clic con il pulsante destro del mouse sul progetto SPSilverlightExample, scegliere Proprietà e fare clic sulla scheda Compila. 2. Modificare il percorso di output specificando C:\Programmi\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. Figura 11 - Proprietà del progetto 3. Compilare la soluzione. Il file con estensione xap viene così copiato nella directory necessaria di SharePoint e si è pronti per aggiungere la web part Silverlight al sito Web di SharePoint. 4. Aprire Internet Explorer e accedere al sito http://intranet.contoso.com. 5. Fare clic sull icona Modifica nella parte superiore della pagina. 6. Fare clic sulla scheda Inserisci e quindi su Web part. 7. Nell elenco Categorie selezionare Elementi multimediali e contenuto, nell elenco delle web part selezionare Web part Silverlight e quindi fare clic su Aggiungi. Pagina 12

8. Nella finestra di dialogo Web part Silverlight che viene visualizzata immettere /_layouts/clientbin/spsilverlightexample.xap come URL. Figura 12 - Finestra di dialogo dell URL della web part Silverlight 9. Fare clic su OK per salvare la web part Silverlight. 10. Uscire dalla modalità di modifica. 11. La web part finale risulterà simile alla seguente nella pagina di SharePoint: Figura 13 - Web part Silverlight completata In questo esercizio è stata creata un applicazione Silverlight di base in grado di visualizzare un elenco di SharePoint all interno di una griglia dati. I dati dell elenco vengono recuperati dal server, in modo da essere disponibili in Silverlight tramite il modello a oggetti client di SharePoint. Pagina 13

Esercizio 2 - Creazione di un grafico con il modello a oggetti di SharePoint e gli appositi controlli Silverlight Nell Esercizio 2 verrà di nuovo utilizzato il modello a oggetti di SharePoint per accedere ai dati dell elenco di SharePoint, ma questa volta verranno utilizzati LINQ e i controlli per grafici Silverlight per visualizzare i dati in un grafico. Attività 1 - Creare un progetto applicazione Silverlight 1. Aprire Visual Studio 2010 da Start Tutti i programmi Microsoft Visual Studio 2010 Microsoft Visual Studio 2010. 2. Scegliere File Nuovo Progetto dal menu. 3. Nella finestra di dialogo Nuovo progetto espandere il menu Modelli installati a sinistra in modo da visualizzare Altri tipi di progetto Soluzioni di Visual Studio Soluzione vuota. 4. Specificare Begin come nome della soluzione. 5. Impostare C:\SPHOLS\SPCHOL306\CS\Ex2\ come percorso. Figura 14 - Finestra di dialogo Nuovo progetto Pagina 14

6. Fare clic su OK per continuare. 7. Scegliere File Aggiungi Nuovo progetto dal menu. 8. Nella finestra di dialogo Aggiungi nuovo progetto espandere il menu Modelli installati a sinistra in modo da visualizzare Visual C# Silverlight, quindi selezionare Applicazione Silverlight nell elenco dei tipi di progetto nella sezione centrale della schermata. 9. Specificare SilverlightEmployeeContributionsGraph come nome del progetto. 10. Lasciare invariato il percorso. Figura 15 - Finestra di dialogo Aggiungi nuovo progetto Pagina 15

11. Fare clic su OK. Figura 16 - Finestra di dialogo Nuova applicazione Silverlight 12. Fare clic su OK per creare il progetto. 13. Nel progetto SPSilverlightExample sarà ora necessario aggiungere gli assembly di riferimento al modello a oggetti client Silverlight di SharePoint. Fare clic con il pulsante destro del mouse su Riferimenti nel progetto SilverlightEmployeeContributionsGraph e scegliere Aggiungi riferimenti. 14. Passare alla cartella C:\Programmi\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. 15. Selezionare Microsoft.SharePoint.ClientSilverlight.dll e Microsoft.SharePoint.Client.Silverlight.Runtime.dll (tenere premuto CTRL per selezionare più file). Pagina 16

16. Fare clic su OK per aggiungere i riferimenti alle DLL selezionate. Figura 17 - Aggiungi riferimento 17. Aggiungere un riferimento all assembly relativo ai controlli per grafici Silverlight. Tale assembly è disponibile nella scheda.net ed è denominato System.Windows.Controls.DataVisualization.Toolkit. Figura 18 - Aggiunta del riferimento a DataVisualization Pagina 17

Attività 2 - Scrivere il codice per accedere ai dati dell elenco Dipendenti (Employees) di SharePoint e visualizzarli in un controllo grafico Silverlight 1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul file App.xaml e scegliere Visualizza codice. Nel file App.xaml.cs aperto aggiungere le istruzioni using seguenti nella parte superiore del file: using Microsoft.SharePoint.Client; using System.Threading; Frammento di codice: My Code Snippets spchol306_ex2_app_namespaces 2. Aggiungere il codice seguente all inizio del metodo Application_Startup: ApplicationContext.Init(e.InitParams, SynchronizationContext.Current); Frammento di codice: My Code Snippets spchol306_ex2_application_startup 3. Nella visualizzazione XAML del file MainPage.xaml aggiungere lo spazio dei nomi XML seguente nell elemento UserControl: xmlns:chartingtoolkit="clrnamespace:system.windows.controls.datavisualization.charting;assembly=system.wind ows.controls.datavisualization.toolkit" Pagina 18

4. Aggiungere il controllo grafico Silverlight seguente all interno dell elemento Grid: <chartingtoolkit:chart x:name="chart" Width="350" Height="250" Title="Team Contributions"> <chartingtoolkit:chart.series> <chartingtoolkit:columnseries ItemsSource="{Binding}" DependentValuePath="Contributions" IndependentValuePath="Name" AnimationSequence="FirstToLast" Title="Contributions" IsSelectionEnabled="True" /> </chartingtoolkit:chart.series> </chartingtoolkit:chart> Figura 19 - XAML del grafico Silverlight 5. Aprire MainPage.xaml.cs e aggiungere l istruzione using seguente nella parte superiore del file: using Microsoft.SharePoint.Client; Frammento di codice: My Code Snippets spchol306_ex2_page_namespaces Pagina 19

6. Aggiungere le classi seguenti prima della classe MainPage: public class EmployeeContributions { public string Name { get; set; } public string TeamName { get; set; } public decimal Contributions { get; set; } } public class TeamContributions { public string Name { get; set; } public decimal Contributions { get; set; } } Frammento di codice: My Code Snippets spchol306_ex2_classes 7. Aggiungere la variabile seguente alla classe MainPage: private ListItemCollection _employees; Frammento di codice: My Code Snippets spchol306_ex2_property 8. Aggiungere il codice seguente al costruttore Page sotto la chiamata a InitializeComponent: ClientContext context = new ClientContext(ApplicationContext.Current.Url); context.load(context.web); List employees = context.web.lists.getbytitle("employees"); context.load(employees); CamlQuery query = new CamlQuery(); string camlqueryxml = null; query.viewxml = camlqueryxml; _employees = employees.getitems(query); context.load(_employees); context.executequeryasync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null); Frammento di codice: My Code Snippets spchol306_ex2_initializecomponent Pagina 20

9. Aggiungere il codice seguente dopo il costruttore: private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args) { // this is not called on the UI thread Dispatcher.BeginInvoke(BindData); } private void BindData() { List<EmployeeContributions> employees = new List<EmployeeContributions>(); // get list item values into a strongly typed class foreach (ListItem li in _employees) { employees.add(new EmployeeContributions { Name = li["title"].tostring(), TeamName = li["team"].tostring(), Contributions = Convert.ToDecimal(li["Contribution_x0020 x0028_in_x00"]) }); } // use linq to group employees on team name and then total team contributions List<TeamContributions> teams = employees.groupby(e => e.teamname).select(t => new TeamContributions { Name = t.key, Contributions = t.sum(e => e.contributions) }).ToList(); } chart.datacontext = teams; // must be on UI thread Frammento di codice: My Code Snippets spchol306_ex2_methods 10. Come nell esercizio precedente, è stato utilizzato il modello a oggetti client Silverlight di SharePoint per recuperare i dati da un elenco di SharePoint. Dopo l inserimento degli elementi contributo dei dipendenti in un elenco, viene utilizzato LINQ per raggruppare i dipendenti in team e sommare i relativi contributi. I contributi dei team vengono quindi impostati come origine dati del grafico. Pagina 21

Attività 3 - Eseguire la distribuzione e il test utilizzando la web part Grafico Silverlight di SharePoint Per poter distribuire la soluzione in SharePoint, è necessario che il file con estensione xap risultante, creato dal progetto Silverlight, si trovi nella cartella C:\Programmi\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. 1. Fare clic con il pulsante destro del mouse sul progetto SilverlightEmployeeContributionsGraph, scegliere Proprietà e fare clic sulla scheda Compila. 2. Modificare il percorso di output specificando C:\Programmi\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin. Figura 20 - Proprietà del progetto Silverlight 3. Compilare la soluzione. Il file con estensione xap viene così copiato nella directory necessaria di SharePoint e si è pronti per aggiungere la web part Silverlight al sito Web di SharePoint. 4. Aprire Internet Explorer e accedere al sito http://intranet.contoso.com. Pagina 22

5. È ora necessario aggiornare la web part Silverlight aggiunta nell esercizio precedente in modo che punti al nuovo controllo grafico Silverlight appena creato. Fare clic sull icona nell angolo in alto a destra della web part Silverlight e selezionare Modifica web part nell elenco a discesa che viene visualizzato. Figura 21 - Proprietà della web part Silverlight Pagina 23

6. Fare clic sul pulsante Configura (per visualizzarlo, potrebbe essere necessario scorrere verso destra il contenuto della finestra). Immettere quindi /_layouts/clientbin/silverlightemployeecontributionsgraph.xap nella finestra di dialogo Web part Silverlight. Figura 22 - URL della web part Silverlight 7. Fare clic su OK. 8. Fare clic su OK nella parte inferiore dell intestazione laterale della web part Silverlight. Pagina 24

9. La web part finale risulterà simile alla seguente: Figura 23 - Web part Grafico Silverlight completata Riepilogo dell esercitazione In questa esercitazione sono stati eseguiti gli esercizi seguenti: È stato creato un nuovo progetto applicazione Silverlight. Sono stati aggiunti i riferimenti alle DLL del modello a oggetti Silverlight di SharePoint. È stato scritto il codice per ottenere i dati da un elenco di SharePoint con il modello a oggetti di SharePoint. È stata distribuita in SharePoint un applicazione Silverlight, che è stata quindi visualizzata nella nuova web part Silverlight di SharePoint. I dati dell elenco di SharePoint sono stati visualizzati in una griglia dati Silverlight. È stato utilizzato LINQ per modificare gli elementi restituiti da un elenco di SharePoint. I dati dell elenco di SharePoint sono stati visualizzati in un grafico a barre Silverlight. Pagina 25