Sharepoint 2010 JQuery

Preview:

DESCRIPTION

Sharepoint 2010 JQuery

Citation preview

Enhancing SharePoint Experience with Client

Side Technologies

http://www.decatec.it

Fabrizio Basilio, Decatec

Fabrizio Basilio, Decatec 2

Agenda

Introduzione alle RIA (Rich Internet Application)

Sharepoint 2007 e jQuery

Sharepoint 2007 e Silverlight

Sharepoint 2010: Client Object Model

Fabrizio Basilio, Decatec 3

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

Fabrizio Basilio, Decatec 4

Vantaggi delle RIA

Consistente incremento del business

Diffusione Assoluta

Semplicità di implementazione

Vantaggi di gestione

Fabrizio Basilio, Decatec 5

RIA e Sharepoint

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

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

Fabrizio Basilio, Decatec 6

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);

Fabrizio Basilio, Decatec 7

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

Fabrizio Basilio, Decatec 8

How to work jQuery

Fabrizio Basilio, Decatec 9

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']");

Fabrizio Basilio, Decatec 10

jQuery: Caratteristiche

DOM Traversing

Manipolazione

CSS

Eventi

Effetti

AJAX

Fabrizio Basilio, Decatec 11

jQuery: Esempi

Row Highlight al mouse over o statico

Ricerca in un calendario

RunTime Filter Data List Web Part

Fabrizio Basilio, Decatec 12

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)

Fabrizio Basilio, Decatec 13

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)

Fabrizio Basilio, Decatec 14

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

Fabrizio Basilio, Decatec 15

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

Fabrizio Basilio, Decatec 16

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

Fabrizio Basilio, Decatec 17

Silverlight e Sharepoint

Browser Backend System

Silverlight

• XAML + C#• XAML +

VB.NET

SharePoint

• Liste• Documenti • Contatti• Immagini

APIs

WebServices

Fabrizio Basilio, Decatec 18

Silverlight e Sharepoint: Integrazione

Object Model•

SharePoint Object Model

Silverlight + WCF

Web Services ModelSharePoint

(APIs)Silverlight

Mixed ModeSharePoint Web Service +

Object Model

Silverlight + WCF

Fabrizio Basilio, Decatec 19

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.

Fabrizio Basilio, Decatec 20

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

Fabrizio Basilio, Decatec 21

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

Fabrizio Basilio, Decatec 22

Silverlight: Esempio

Silverlight Browser

Fabrizio Basilio, Decatec 23

Sharepoint 2010 vs Sharepoint 2007

Fabrizio Basilio, Decatec 24

Sharepoint 2010 vs Sharepoint 2007

Fabrizio Basilio, Decatec 25

Sharepoint 2010 vs Sharepoint 2007

Fabrizio Basilio, Decatec 26

Sharepoint 2010: Client Object Model

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

Fabrizio Basilio, Decatec 27

Sharepoint 2010: Client Object Model

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

Fabrizio Basilio, Decatec 28

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

Fabrizio Basilio, Decatec 29

Client Object Model: How to work?

Fabrizio Basilio, Decatec 30

Sharepoint 2010: Client Object Model

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

Fabrizio Basilio, Decatec 31

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);

    }

Fabrizio Basilio, Decatec 32

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

Fabrizio Basilio, Decatec 33

Client Object Model: Code Snippet

Fabrizio Basilio, Decatec 34

Client Object Model: ECMAScript

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

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

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

Fabrizio Basilio, Decatec 35

Client Object Model: ECMAScript

Limitare i contenuti:

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

Fabrizio Basilio, Decatec 36

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");

Fabrizio Basilio, Decatec 37

GRAZIE!

Blog: http://blog.nicolesoftware.com Web: http://www.decatec.it Mail: fabrizio.basilio@decatec.it Skype: fabrizio.basilio

Recommended