Sharepoint 2010 JQuery

Enhancing SharePoint Experience with Client

Side Technologies

http://www.decatec.it

Fabrizio Basilio, Decatec

http://www.decatec.it/

Fabrizio Basilio, Decatec 2

Agenda

Introduzione alle RIA (Rich Internet Application)

Sharepoint 2007 e jQuery

Sharepoint 2007 e Silverlight

Sharepoint 2010: Client Object Model


Cosa sono le RIA?

Applicazioni web con caratteristiche e le funzionalità delle applicazioni desktop

Interattive, multimediali e veloci Aggiornamento e deploy immediato Accesso da qualsiasi pc in rete Qualità di navigazione:

Ricca Fluida Immediata Personalizzata


Vantaggi delle RIA

Consistente incremento del business

Diffusione Assoluta

Semplicità di implementazione

Vantaggi di gestione


RIA e Sharepoint

jQuery (http://www.jquery.com)

Silverlight (http://www.silverlight.net)

http://www.jquery.com/

http://www.silverlight.net/


Cosa è jQuery?

Framework basato su Javascript Riassume in poche righe script molto complessi Modifica radicalmente le modalità di sviluppo client-

site Cross – browser Chainability(concatenabilità)

$('div#content').addClass('current').html('bla bla bla').width(100);


Integrare jQuery: Modalità

Copiare nella cartella Layouts Libreria Jquery

Rendere disponibile la libreria nelle pagine SharePoint

Aggiungendo Content Editor Web Part Aggiungendo reference nella MasterPage del

Sito SharePoint AdditionalPageHead Delegate Control


How to work jQuery


jQuery: Selettori

Selettori di base o selettori semplici $("a");

$("#blocco");

$("a.external");

Selettori gerarchici (padre->figlio) $("#blocco a");

$("#blocco");

$("a.external");

Selettori per attributo $("a[target='_blank']");


jQuery: Caratteristiche

DOM Traversing

Manipolazione

CSS

Eventi

Effetti

AJAX


jQuery: Esempi

Row Highlight al mouse over o statico

Ricerca in un calendario

RunTime Filter Data List Web Part


jQuery: Conclusioni

Rapidità di esecuzione

Carico di lavoro prevalentemente del client

Accesso in get / set a tutti gli elementi di una pagina

Sfuttare un’unica libreria per l’intera piattaforma

Estendibilità

Supporto di una grossa community

Leggero (pesa solo 16 kb)


jQuery: Conclusioni

Rapidità di esecuzione

Carico di lavoro prevalentemente del client

Accesso in get / set a tutti gli elementi di una pagina

Sfuttare un’unica libreria per l’intera piattaforma

Estendibilità

Supporto di una grossa community

Leggero (pesa solo 16 kb)


Silverlight: Introduzione

Interazione complessa e dinamica con i dati nelle Dashboard (grafici, relazioni, ...)

Visualizzare elementi multimediali in SharePoint

Controlli di navigazione Off-load di lavoro per i client


Silverlight: Introduzione

Cosa è Silverlight

• Piattaforma RIA• Rich Media Applications

Features • WPF-based UI framework • Rich Controls• Rich Networking Support

Sviluppo• Expression Blend Studio• Visual Studio 2008 SP1• Silverlight SDK


Perchè Silverlight?

Dare un nuovo look rispetto al classico Sharepoint

Rappresentazione dei dati in formato grafico Facilità d‘uso Supporto Business Intelligence Colpo d‘occhio


Silverlight e Sharepoint

Browser Backend System

Silverlight

• XAML + C#• XAML +

VB.NET

SharePoint

• Liste• Documenti • Contatti• Immagini

APIs

WebServices


Silverlight e Sharepoint: Integrazione

Object Model•

SharePoint Object Model

Silverlight + WCF

Web Services ModelSharePoint

(APIs)Silverlight

Mixed ModeSharePoint Web Service +

Object Model

Silverlight + WCF


Silverlight e Sharepoint: Integrazione

1 •Creare una applicazione IIS sullo stesso server•Usare la Page View Web Part

2 •Content Editor Web Part

3 •Creare una nuova web part per Silverlight

4 •Creare un server control e inserirlo nella Master Page o in una pagina ASPX.


Silverlight: Hello World!

Silverlight 2.0 project in Visual Studio 2008

Create your user experience using XAML: IntelliSense®

Silverlight Controls in Toolbox

Preview in Designer

Microsoft Expression Blend for complex design

Code-behind class: Event-handler

Business logic

Asynchronous communication with server data


Silverlight: Hello World!

<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" />

private void HelloWorldTextBlock_MouseLeftButtonDown (object sender, MouseButtonEventArgs e){ HelloWorldTextBlock.Text = "I am clicked!";}

XAMLCODE BEHIND


Silverlight: Esempio

Silverlight Browser


Sharepoint 2010 vs Sharepoint 2007







Tree new client APIs .NET Managed Applications (using the .NET CLR) Silverlight Applications ECMAScript (JavaScript, JScript)

Client Type Assembly/File

Managed Client Microsoft.SharePoint.Client

Silverlight Microsoft.SharePoint.Client.Silverlight

ECMAScript SP.js



Requisiti .NET 3.5 Framework Microsoft.SharePoint.Client.dll Microsoft.SharePoint.Client.Runtime.dll

Assemblies Location %ProgramFiles%\Common Files\Microsoft Shared\

web server extensions\14\ISAPI


Client Object Model: Namespace

Client Server

Microsoft.SharePoint.Client.ClientContext Microsoft.SharePoint.SPContext

Microsoft.SharePoint.Client.Site Microsoft.SharePoint.SPSite

Microsoft.SharePoint.Client.Web Microsoft.SharePoint.SPWeb

Microsoft.SharePoint.Client.List Microsoft.SharePoint.SPList

Microsoft.SharePoint.Client.ListItem Microsoft.SharePoint.SPListItem

Microsoft.SharePoint.Client.Field Microsoft.SharePoint.SPField


Client Object Model: How to work?



Requisiti .NET 3.5 Framework Microsoft.SharePoint.Client.dll Microsoft.SharePoint.Client.Runtime.dll

Assemblies Location %ProgramFiles%\Common Files\Microsoft Shared\

web server extensions\14\ISAPI


Client Object Model:First Code

static void Main()

{

ClientContext clientContext =

new ClientContext("http://intranet.contoso.com");

Web site = clientContext.Web;

clientContext.Load(site);

clientContext.ExecuteQuery();

Console.WriteLine("Title: {0}", site.Title);

}


Client Object Model: Caratteristiche

Accesso a tutti i componenti Sharepoint Object Identity Trim Result Sets (Direttiva Include) Usare CAML LINQ per filtrare (Query Innestate) Asynchronous Processing


Client Object Model: Code Snippet


Client Object Model: ECMAScript

Aggiungere Referenza: <SharePoint:ScriptLink Name="SP.js" runat="server"

OnDemand="true" Localizable="false" />:

Aggiungere FormDigest <SharePoint:FormDigest runat="server" />


Client Object Model: ECMAScript

Limitare i contenuti:

ctx.load(this.web,'Title','Id','Created');


Client Object Model: ECMAScript Considerazioni

Aggiungere Referenza: <SharePoint:ScriptLink Name="SP.js" runat="server"

OnDemand="true" Localizable="false" />

Aggiungere FormDigest <SharePoint:FormDigest runat="server" />

Attendere il caricamento pagina ExecuteOrDelayUntilScriptLoaded(myjsfucntion, "sp.js");


GRAZIE!

Blog: http://blog.nicolesoftware.com Web: http://www.decatec.it Mail: [email protected] Skype: fabrizio.basilio

Technology

Sharepoint 2010 JQuery