Fabrizio Basilio, Decatec<br />Enhancing SharePoint Experience with Client Side Technologies<br />http://www.decatec.it<br />
Fabrizio Basilio, Decatec<br />2<br />Agenda<br />Introduzione alle RIA (Rich Internet Application)<br />Sharepoint 2007 e...
Fabrizio Basilio, Decatec<br />3<br />Cosa sono le RIA?<br />Applicazioni web con caratteristiche e le funzionalità delle ...
Fabrizio Basilio, Decatec<br />4<br />Vantaggi delle RIA<br />Consistente incremento del business<br />Diffusione Assoluta...
Fabrizio Basilio, Decatec<br />5<br />RIA e Sharepoint<br />jQuery (http://www.jquery.com)<br />Silverlight  (http://www.s...
Fabrizio Basilio, Decatec<br />6<br />Cosa è jQuery?<br />Framework basato su Javascript<br />Riassume in poche righe scri...
Fabrizio Basilio, Decatec<br />7<br />Integrare jQuery: Modalità<br />Copiare nella cartella Layouts Libreria Jquery<br />...
Aggiungendo reference nella MasterPage del Sito SharePoint
AdditionalPageHead Delegate Control</li></li></ul><li>Fabrizio Basilio, Decatec<br />8<br />How to work jQuery<br />
Fabrizio Basilio, Decatec<br />9<br />jQuery: Selettori<br />Selettori di base o selettori semplici<br />$("a"); <br />$("...
Fabrizio Basilio, Decatec<br />10<br />jQuery: Caratteristiche<br />DOM Traversing<br />Manipolazione<br />CSS<br />Eventi...
Fabrizio Basilio, Decatec<br />11<br />jQuery: Esempi<br />Row Highlight al mouse over o statico<br />Ricerca in un calend...
Fabrizio Basilio, Decatec<br />12<br />jQuery: Conclusioni<br />Rapidità di esecuzione<br />Carico di lavoro prevalentemen...
Fabrizio Basilio, Decatec<br />13<br />jQuery: Conclusioni<br />Rapidità di esecuzione<br />Carico di lavoro prevalentemen...
Fabrizio Basilio, Decatec<br />14<br />Silverlight: Introduzione<br />Interazione complessa e dinamica con i dati nelle Da...
Fabrizio Basilio, Decatec<br />15<br />Silverlight: Introduzione<br />
Fabrizio Basilio, Decatec<br />16<br />Perchè Silverlight?<br />Dare un nuovo look rispetto al classico Sharepoint<br />Ra...
Fabrizio Basilio, Decatec<br />17<br />Silverlight e Sharepoint<br />Browser <br />Backend System<br />Silverlight<br /><u...
XAML + VB.NET</li></ul>SharePoint<br /><ul><li>Liste
Documenti
Contatti
Immagini</li></ul>APIs<br />
Fabrizio Basilio, Decatec<br />18<br />Silverlight e Sharepoint: Integrazione<br />          Object Model<br />SharePoint ...
Fabrizio Basilio, Decatec<br />19<br />Silverlight e Sharepoint: Integrazione<br />
Fabrizio Basilio, Decatec<br />20<br />Silverlight: Hello World!<br />Silverlight 2.0 project in Visual Studio 2008<br />C...
Fabrizio Basilio, Decatec<br />21<br />Silverlight: Hello World!<br />XAML<br />CODE BEHIND<br /><TextBlock x:Name="HelloW...
Fabrizio Basilio, Decatec<br />22<br />Silverlight: Esempio<br />Silverlight Browser<br />
Fabrizio Basilio, Decatec<br />23<br />Sharepoint 2010 vs Sharepoint 2007<br />
Fabrizio Basilio, Decatec<br />24<br />Sharepoint 2010 vs Sharepoint 2007<br />
Fabrizio Basilio, Decatec<br />25<br />Sharepoint 2010 vs Sharepoint 2007<br />
Fabrizio Basilio, Decatec<br />26<br />Sharepoint 2010: Client Object Model<br />Tree new client APIs<br />.NET Managed Ap...
Fabrizio Basilio, Decatec<br />27<br />Sharepoint 2010: Client Object Model<br />Requisiti<br />.NET 3.5 Framework<br />Mi...
Fabrizio Basilio, Decatec<br />28<br />Client Object Model: Namespace<br />
Fabrizio Basilio, Decatec<br />29<br />Client Object Model: How to work?<br />
Fabrizio Basilio, Decatec<br />30<br />Sharepoint 2010: Client Object Model<br />Requisiti<br />.NET 3.5 Framework<br />Mi...
Fabrizio Basilio, Decatec<br />31<br />Client Object Model:First Code<br />static void Main()<br />    {<br />       Clien...
Fabrizio Basilio, Decatec<br />32<br />Client Object Model: Caratteristiche<br />Accesso a tutti i componenti Sharepoint<b...
Upcoming SlideShare
Loading in...5
×

Sharepoint 2010 JQuery

1,700

Published on

Sharepoint 2010 JQuery

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,700
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Punto 1:Punto 2: Infatti la parte dell&apos;applicazione che elabora i dati è trasferita a livello client e fornisce una pronta risposta all&apos;interfaccia utente, mentre la gran parte dei dati e dell&apos;applicazione rimane sul server remoto, con notevole alleggerimento per il computer utente. Le RIA si fondano perciò su un&apos;architettura di tipo distribuito. In un certo senso le RIA rappresentano una generazione di applicazioni che permette un&apos;interazione totalmente rinnovata, fondata sugli aspetti migliori delle caratteristiche funzionali e progettuali che finora erano prerogativa alternata del web o delle applicazioni desktop
  • Una gratificante Esperienza di fruizione si traduce rapidamente in un consistente incremento del vostro Business, applicabile a pressoché qualunque aspetto della comunicazione via web. Diffusione assolutaPer godere di un’applicazione RIA, realizzata con Adobe® Flash, è sufficiente possedere un browser dotato del plugin gratuito Adobe® Flash Player, presente nei 98% dei navigatori Internet, compresi numerosi palmari, telefoni cellulari ed addirittura alcuni tipi di console. Semplicità d’implementazioneLe RIA possono essere agevolmente inserite in qualunque contesto web integrandosi con il vostro sito aziendale preesistente senza doverne rivedere interamente l’architettura. Vantaggi di gestioneOltre ad essere applicabili pressoché a qualunque ambiente operativo e substrato informativo, alcune RIA permettono di integrare nel vostro sito web funzionalità in grado di semplificare la gestione delle attività connesse con la vostra azienda (un esempio su tutti può essere offerto dalla RIA realizzata per Swissflex, attraverso la quale possono essere gestiti i dettagli d’ordine dei prodotti personalizzati).
  • jQuery è un framework per il web, strutturato in javascript, che si prepone come obiettivo quello di astrarre ad un livello più alto la programmazione lato client del comportamento di ogni singola pagina HTML.Pubblicato in stato molto primordiale da John Resig per la prima volta il 22 agosto2005, ha in realtà raggiunto la versione 1 (stabile) soltanto il 26 agosto dell&apos;anno successivo.È possibile, con poche righe di codice, effettuare operazioni semplici o complesse, come ottenere l&apos;altezza di un elemento, o farlo scomparire con effetto dissolvenza.Anche la gestione degli eventi è completamente standardizzata e gestita automaticamente, assieme alla loro propagazione; stessa cosa per quanto riguarda l&apos;utilizzo di AJAX, in quanto sono presenti alcune funzioni molto utili e veloci che si occupano di istanziare i giusti oggetti ed effettuare la connessione / invio di dati.Il framework fornisce metodi e funzioni per gestire al meglio aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del DocumentObjectModel e quant&apos;altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall&apos;interprete javascript del browser.
  • Selettori di basePer prima cosa potete utilizzare selettori semplici (tutte le combinazioni di tag, classi e id):$(&quot;a&quot;); //tutti i link nel documento$(&quot;#blocco&quot;); //seleziona un singolo elemento con id &quot;blocco&quot;$(&quot;a.external&quot;); //solo i link con classe &quot;external&quot; Selettori gerarchiciUn&apos;altra possibilità è quella di utilizzare i selettori gerarchici per ricercare gli elementi all&apos;interno di altri elementi piuttosto che all&apos;interno di tutto il documento. Il selettore gerarchico più conosciuto è senza dubbio quello padre &gt; figlio:$(&quot;#blocco a&quot;); //i link all&apos;interno dell&apos;elemento con id &quot;blocco&quot; Tuttavia jQuery supporta altri selettori che possono risultare spesso molto utili come padre &gt; figlio, che permette di selezionare solo gli elementi che sono direttamante contenuti nell&apos;elemento padre:$(&quot;ul &gt; li&quot;); //solo gli elementi lista diretti discendenti del tagulEcco un esempio pratico per capire la differenza con il selettore precedenteAltri due selettori interessanti sono precedente + seguente, in cui vengono selezionati tutti gli elementi preceduti direttamente da uno specifico elemento:$(&quot;label + input&quot;); //tutti i tag input preceduti da un taglabeloppure precedente ~ adiacente, che seleziona tutti gli elementi direttamente adiacenti ad un elemento (esempio):$(&quot;#prev ~ div&quot;); n metodo di selezione degli elementi molto utile è quello che permette di indicare regole specifiche per gli attributi degli elementi. Come in precedenza, la sintassi non si discosta da quella dei CSS:$(&quot;a[target=&apos;_blank&apos;]&quot;); //tutti i link che si aprono in nuove finestr
  • DOM Traversing[modifica]Per risalire a elementi padre, figli, per i nodi foglia o per elementi successivi, il framework propone numerosi metodi e funzioni per attraversare e scorrere il DOM del documento.Manipolazione [modifica]La manipolazione del DOM è semplificata da numerosi metodi:Per aggiungere e rimuovere elementi alla pagina, o in una posizione specificaPer sostituire elementi, o per circondarli con del nuovo contenutoPer eliminare tutti gli elementi contenuti in un certo nodo, o per copiarliCSS [modifica]Per controllare lo stile degli elementi, in maniera semplificata e standardizzata. Sono forniti i metodi:Per cambiare, rimuovere o aggiungere proprietà grafiche di tutti gli elementi selezionatiPer ottenere e sostituire velocemente proprietà solitamente difficili da manipolare Lo scroll di pagina o di un elementoLe dimensioni (height() e width())Le dimensioni interne (escludendo quindi il margine)L&apos;offset rispetto ai bordiEventi [modifica]Il framework riconosce gli oggetti di tipo event e provvede a modificare le loro proprietà rendendoli uniformi, semplificando la loro gestione, la loro propagazione, e fornendo un utile modalità per impedire al browser di continuare l&apos;esecuzione (ad esempio sulla onclick di un link). L&apos;assegnazione di eventi quali click, load, mouseover è gestita in maniera efficace e non invadente.Effetti [modifica]Gli effetti messi a disposizione dal framework, servono a manipolare la visibilità degli elementi selezionati. È possibile mostrarli o nasconderli con vari effetti, tra i quali:Effetto fading, la dissolvenza in entrata o uscitaEffetto sliding, l&apos;effetto scivolataNascondimento o visualizzazione piatta, istantaneaÈ possibile definire facilmente effetti personalizzati specificando la proprietà css da manipolare (può essere l&apos;altezza, il bordo, o quant&apos;altro), come è pure possibile specificare la durata dell&apos;effetto e una funzione di callback da eseguire dopo l&apos;animazione.AJAX [modifica]La gestione delle chiamate asincrone è davvero semplificata, e sono fornite le funzioni:Per caricare contenuti dinamicamente Funzione di caricamento piattoFunzione di caricamento di codice HTML con inserimento automaticoPer eseguire richieste asincrone Con metodo GETCon metodo POSTPer l&apos;interazione con javascript Funzione per caricare un oggetto JSONFunzione per caricare un file javascript remoto ed eseguirlo automaticamenteAnche gli eventi AJAX sono comodamente gestiti, per il completamento, gli errori e l&apos;invio.
  • Somiglianza dei nomi oggetto
  • Sharepoint 2010 JQuery

    1. 1. Fabrizio Basilio, Decatec<br />Enhancing SharePoint Experience with Client Side Technologies<br />http://www.decatec.it<br />
    2. 2. Fabrizio Basilio, Decatec<br />2<br />Agenda<br />Introduzione alle RIA (Rich Internet Application)<br />Sharepoint 2007 e jQuery<br />Sharepoint 2007 e Silverlight<br />Sharepoint 2010: Client ObjectModel<br />
    3. 3. Fabrizio Basilio, Decatec<br />3<br />Cosa sono le RIA?<br />Applicazioni web con caratteristiche e le funzionalità delle applicazioni desktop<br />Interattive, multimediali e veloci<br />Aggiornamento e deploy immediato<br />Accesso da qualsiasi pc in rete<br />Qualità di navigazione:<br />Ricca<br />Fluida<br />Immediata<br />Personalizzata<br />
    4. 4. Fabrizio Basilio, Decatec<br />4<br />Vantaggi delle RIA<br />Consistente incremento del business<br />Diffusione Assoluta<br />Semplicità di implementazione<br />Vantaggi di gestione<br />
    5. 5. Fabrizio Basilio, Decatec<br />5<br />RIA e Sharepoint<br />jQuery (http://www.jquery.com)<br />Silverlight (http://www.silverlight.net)<br />
    6. 6. Fabrizio Basilio, Decatec<br />6<br />Cosa è jQuery?<br />Framework basato su Javascript<br />Riassume in poche righe script molto complessi<br />Modifica radicalmente le modalità di sviluppo client-site<br />Cross – browser<br />Chainability(concatenabilità) <br />$('div#content').addClass('current').html('blablabla').width(100); <br />
    7. 7. Fabrizio Basilio, Decatec<br />7<br />Integrare jQuery: Modalità<br />Copiare nella cartella Layouts Libreria Jquery<br />Rendere disponibile la libreria nelle pagine SharePoint<br /><ul><li>Aggiungendo ContentEditor Web Part
    8. 8. Aggiungendo reference nella MasterPage del Sito SharePoint
    9. 9. AdditionalPageHead Delegate Control</li></li></ul><li>Fabrizio Basilio, Decatec<br />8<br />How to work jQuery<br />
    10. 10. Fabrizio Basilio, Decatec<br />9<br />jQuery: Selettori<br />Selettori di base o selettori semplici<br />$("a"); <br />$("#blocco"); <br />$("a.external"); <br />Selettori gerarchici (padre->figlio)<br />$("#blocco a"); <br />$("#blocco"); <br />$("a.external"); <br />Selettori per attributo<br />$("a[target='_blank']");<br />
    11. 11. Fabrizio Basilio, Decatec<br />10<br />jQuery: Caratteristiche<br />DOM Traversing<br />Manipolazione<br />CSS<br />Eventi<br />Effetti<br />AJAX<br />
    12. 12. Fabrizio Basilio, Decatec<br />11<br />jQuery: Esempi<br />Row Highlight al mouse over o statico<br />Ricerca in un calendario<br />RunTimeFilter Data List Web Part<br />
    13. 13. Fabrizio Basilio, Decatec<br />12<br />jQuery: Conclusioni<br />Rapidità di esecuzione<br />Carico di lavoro prevalentemente del client<br />Accesso in get / set a tutti gli elementi di una pagina<br />Sfuttare un’unica libreria per l’intera piattaforma<br />Estendibilità<br />Supporto di una grossa community<br />Leggero (pesa solo 16 kb)<br />
    14. 14. Fabrizio Basilio, Decatec<br />13<br />jQuery: Conclusioni<br />Rapidità di esecuzione<br />Carico di lavoro prevalentemente del client<br />Accesso in get / set a tutti gli elementi di una pagina<br />Sfuttare un’unica libreria per l’intera piattaforma<br />Estendibilità<br />Supporto di una grossa community<br />Leggero (pesa solo 16 kb)<br />
    15. 15. Fabrizio Basilio, Decatec<br />14<br />Silverlight: Introduzione<br />Interazione complessa e dinamica con i dati nelle Dashboard (grafici, relazioni, ...)<br />Visualizzare elementi multimediali in SharePoint<br />Controlli di navigazione<br />Off-load di lavoro per i client<br />
    16. 16. Fabrizio Basilio, Decatec<br />15<br />Silverlight: Introduzione<br />
    17. 17. Fabrizio Basilio, Decatec<br />16<br />Perchè Silverlight?<br />Dare un nuovo look rispetto al classico Sharepoint<br />Rappresentazione dei dati in formato grafico<br />Facilità d‘uso<br />Supporto Business Intelligence<br />Colpo d‘occhio<br />
    18. 18. Fabrizio Basilio, Decatec<br />17<br />Silverlight e Sharepoint<br />Browser <br />Backend System<br />Silverlight<br /><ul><li>XAML + C#
    19. 19. XAML + VB.NET</li></ul>SharePoint<br /><ul><li>Liste
    20. 20. Documenti
    21. 21. Contatti
    22. 22. Immagini</li></ul>APIs<br />
    23. 23. Fabrizio Basilio, Decatec<br />18<br />Silverlight e Sharepoint: Integrazione<br /> Object Model<br />SharePoint Object Model<br />Silverlight + WCF<br /> Web Services Model<br />SharePoint (APIs)<br />Silverlight<br />Mixed Mode<br />Silverlight + WCF<br />SharePoint Web Service + Object Model<br />
    24. 24. Fabrizio Basilio, Decatec<br />19<br />Silverlight e Sharepoint: Integrazione<br />
    25. 25. Fabrizio Basilio, Decatec<br />20<br />Silverlight: Hello World!<br />Silverlight 2.0 project in Visual Studio 2008<br />Create your user experience using XAML:<br />IntelliSense®<br />Silverlight Controls in Toolbox<br />Preview in Designer<br />Microsoft Expression Blend for complex design<br />Code-behind class:<br />Event-handler<br />Business logic<br />Asynchronous communication with server data<br />
    26. 26. Fabrizio Basilio, Decatec<br />21<br />Silverlight: Hello World!<br />XAML<br />CODE BEHIND<br /><TextBlock x:Name="HelloWorldTextBlock" Canvas.Left="50" Canvas.Top="45" FontFamily="Trebuchet MS" FontWeight="Bold" FontSize="25" Text="Hello World" Foreground="#FF333333" MouseLeftButtonDown="HelloWorldTextBlock_MouseLeftButtonDown" /><br />private void HelloWorldTextBlock_MouseLeftButtonDown<br /> (object sender, MouseButtonEventArgs e)<br />{<br />HelloWorldTextBlock.Text = "I am clicked!";<br />}<br />
    27. 27. Fabrizio Basilio, Decatec<br />22<br />Silverlight: Esempio<br />Silverlight Browser<br />
    28. 28. Fabrizio Basilio, Decatec<br />23<br />Sharepoint 2010 vs Sharepoint 2007<br />
    29. 29. Fabrizio Basilio, Decatec<br />24<br />Sharepoint 2010 vs Sharepoint 2007<br />
    30. 30. Fabrizio Basilio, Decatec<br />25<br />Sharepoint 2010 vs Sharepoint 2007<br />
    31. 31. Fabrizio Basilio, Decatec<br />26<br />Sharepoint 2010: Client Object Model<br />Tree new client APIs<br />.NET Managed Applications (using the .NET CLR) <br />Silverlight Applications <br />ECMAScript (JavaScript, JScript) <br />
    32. 32. Fabrizio Basilio, Decatec<br />27<br />Sharepoint 2010: Client Object Model<br />Requisiti<br />.NET 3.5 Framework<br />Microsoft.SharePoint.Client.dll<br />Microsoft.SharePoint.Client.Runtime.dll  <br />Assemblies Location<br />%ProgramFiles%Common FilesMicrosoft Sharedweb server extensions14ISAPI<br />
    33. 33. Fabrizio Basilio, Decatec<br />28<br />Client Object Model: Namespace<br />
    34. 34. Fabrizio Basilio, Decatec<br />29<br />Client Object Model: How to work?<br />
    35. 35. Fabrizio Basilio, Decatec<br />30<br />Sharepoint 2010: Client Object Model<br />Requisiti<br />.NET 3.5 Framework<br />Microsoft.SharePoint.Client.dll<br />Microsoft.SharePoint.Client.Runtime.dll  <br />Assemblies Location<br />%ProgramFiles%Common FilesMicrosoft Sharedweb server extensions14ISAPI<br />
    36. 36. Fabrizio Basilio, Decatec<br />31<br />Client Object Model:First Code<br />static void Main()<br />    {<br />       ClientContextclientContext =<br />            new ClientContext("http://intranet.contoso.com");<br />        Web site = clientContext.Web;<br />        clientContext.Load(site);<br />        clientContext.ExecuteQuery();<br />        Console.WriteLine("Title: {0}", site.Title);<br />    }<br />
    37. 37. Fabrizio Basilio, Decatec<br />32<br />Client Object Model: Caratteristiche<br />Accesso a tutti i componenti Sharepoint<br />Object Identity<br />Trim Result Sets (Direttiva Include)<br />Usare CAML<br />LINQ per filtrare (Query Innestate)<br />AsynchronousProcessing<br />
    38. 38. Fabrizio Basilio, Decatec<br />33<br />Client Object Model: Code Snippet<br />
    39. 39. Fabrizio Basilio, Decatec<br />34<br />Client Object Model: ECMAScript<br />Aggiungere Referenza:<br /><SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false" />:<br />Aggiungere FormDigest<br /><SharePoint:FormDigestrunat="server" /><br />
    40. 40. Fabrizio Basilio, Decatec<br />35<br />Client Object Model: ECMAScript<br /><ul><li>Limitare i contenuti:</li></ul>ctx.load(this.web,'Title','Id','Created');<br />
    41. 41. Fabrizio Basilio, Decatec<br />36<br />Client Object Model: ECMAScript Considerazioni<br />Aggiungere Referenza:<br /><SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false" /><br />Aggiungere FormDigest<br /><SharePoint:FormDigestrunat="server" /><br />Attendere il caricamento pagina<br />ExecuteOrDelayUntilScriptLoaded(myjsfucntion, "sp.js");<br />
    42. 42. Fabrizio Basilio, Decatec<br />37<br />GRAZIE!<br />Blog: http://blog.nicolesoftware.com<br />Web: http://www.decatec.it<br />Mail: fabrizio.basilio@decatec.it<br />Skype: fabrizio.basilio<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×