Sharepoint 2010 JQuery
•Als PPTX, PDF herunterladen•
0 gefällt mir•536 views
Sharepoint 2010 JQuery
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Ähnlich wie Sharepoint 2010 JQuery
Ähnlich wie Sharepoint 2010 JQuery (20)
Mehr von Decatec
Sharepoint 2010 JQuery
- 1. Fabrizio Basilio, Decatec Enhancing SharePoint Experience with Client Side Technologies http://www.decatec.it
- 2. Fabrizio Basilio, Decatec 2 Agenda Introduzione alle RIA (Rich Internet Application) Sharepoint 2007 e jQuery Sharepoint 2007 e Silverlight Sharepoint 2010: Client ObjectModel
- 3. 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
- 4. Fabrizio Basilio, Decatec 4 Vantaggi delle RIA Consistente incremento del business Diffusione Assoluta Semplicità di implementazione Vantaggi di gestione
- 5. Fabrizio Basilio, Decatec 5 RIA e Sharepoint jQuery (http://www.jquery.com) Silverlight (http://www.silverlight.net)
- 6. 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('blablabla').width(100);
- 8. Aggiungendo reference nella MasterPage del Sito SharePoint
- 10. 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']");
- 11. Fabrizio Basilio, Decatec 10 jQuery: Caratteristiche DOM Traversing Manipolazione CSS Eventi Effetti AJAX
- 12. Fabrizio Basilio, Decatec 11 jQuery: Esempi Row Highlight al mouse over o statico Ricerca in un calendario RunTimeFilter Data List Web Part
- 13. 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)
- 14. 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)
- 15. 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
- 16. Fabrizio Basilio, Decatec 15 Silverlight: Introduzione
- 17. 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
- 20. Documenti
- 21. Contatti
- 22. ImmaginiAPIs
- 23. Fabrizio Basilio, Decatec 18 Silverlight e Sharepoint: Integrazione Object Model SharePoint Object Model Silverlight + WCF Web Services Model SharePoint (APIs) Silverlight Mixed Mode Silverlight + WCF SharePoint Web Service + Object Model
- 24. Fabrizio Basilio, Decatec 19 Silverlight e Sharepoint: Integrazione
- 25. 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
- 26. Fabrizio Basilio, Decatec 21 Silverlight: Hello World! XAML CODE BEHIND <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!"; }
- 27. Fabrizio Basilio, Decatec 22 Silverlight: Esempio Silverlight Browser
- 28. Fabrizio Basilio, Decatec 23 Sharepoint 2010 vs Sharepoint 2007
- 29. Fabrizio Basilio, Decatec 24 Sharepoint 2010 vs Sharepoint 2007
- 30. Fabrizio Basilio, Decatec 25 Sharepoint 2010 vs Sharepoint 2007
- 31. 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)
- 32. 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%ommon Filesicrosoft Sharedeb server extensions4SAPI
- 33. Fabrizio Basilio, Decatec 28 Client Object Model: Namespace
- 34. Fabrizio Basilio, Decatec 29 Client Object Model: How to work?
- 35. 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%ommon Filesicrosoft Sharedeb server extensions4SAPI
- 36. Fabrizio Basilio, Decatec 31 Client Object Model:First Code static void Main() { ClientContextclientContext = new ClientContext("http://intranet.contoso.com"); Web site = clientContext.Web; clientContext.Load(site); clientContext.ExecuteQuery(); Console.WriteLine("Title: {0}", site.Title); }
- 37. 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) AsynchronousProcessing
- 38. Fabrizio Basilio, Decatec 33 Client Object Model: Code Snippet
- 39. Fabrizio Basilio, Decatec 34 Client Object Model: ECMAScript Aggiungere Referenza: <SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false" />: Aggiungere FormDigest <SharePoint:FormDigestrunat="server" />
- 41. 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:FormDigestrunat="server" /> Attendere il caricamento pagina ExecuteOrDelayUntilScriptLoaded(myjsfucntion, "sp.js");
- 42. Fabrizio Basilio, Decatec 37 GRAZIE! Blog: http://blog.nicolesoftware.com Web: http://www.decatec.it Mail: fabrizio.basilio@decatec.it Skype: fabrizio.basilio
Hinweis der Redaktion
- Punto 1:Punto 2: Infatti la parte dell'applicazione che elabora i dati è trasferita a livello client e fornisce una pronta risposta all'interfaccia utente, mentre la gran parte dei dati e dell'applicazione rimane sul server remoto, con notevole alleggerimento per il computer utente. Le RIA si fondano perciò su un'architettura di tipo distribuito. In un certo senso le RIA rappresentano una generazione di applicazioni che permette un'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'anno successivo.È possibile, con poche righe di codice, effettuare operazioni semplici o complesse, come ottenere l'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'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'altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall'interprete javascript del browser.
- Selettori di basePer prima cosa potete utilizzare selettori semplici (tutte le combinazioni di tag, classi e id):$("a"); //tutti i link nel documento$("#blocco"); //seleziona un singolo elemento con id "blocco"$("a.external"); //solo i link con classe "external" Selettori gerarchiciUn'altra possibilità è quella di utilizzare i selettori gerarchici per ricercare gli elementi all'interno di altri elementi piuttosto che all'interno di tutto il documento. Il selettore gerarchico più conosciuto è senza dubbio quello padre > figlio:$("#blocco a"); //i link all'interno dell'elemento con id "blocco" Tuttavia jQuery supporta altri selettori che possono risultare spesso molto utili come padre > figlio, che permette di selezionare solo gli elementi che sono direttamante contenuti nell'elemento padre:$("ul > li"); //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:$("label + input"); //tutti i tag input preceduti da un taglabeloppure precedente ~ adiacente, che seleziona tutti gli elementi direttamente adiacenti ad un elemento (esempio):$("#prev ~ div"); 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:$("a[target='_blank']"); //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'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'esecuzione (ad esempio sulla onclick di un link). L'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'effetto scivolataNascondimento o visualizzazione piatta, istantaneaÈ possibile definire facilmente effetti personalizzati specificando la proprietà css da manipolare (può essere l'altezza, il bordo, o quant'altro), come è pure possibile specificare la durata dell'effetto e una funzione di callback da eseguire dopo l'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'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'invio.
- Somiglianza dei nomi oggetto