Downloaded 21 times
![Fabrizio Basilio, Decatec9jQuery: SelettoriSelettori di base o selettori semplici$("a"); $("#blocco"); $("a.external"); Selettori gerarchici (padre->figlio)$("#blocco a"); $("#blocco"); $("a.external"); Selettori per attributo$("a[target='_blank']");](https://image.slidesharecdn.com/cdocumentsandsettingsadministratordesktopsharepoint-jquery-100927045239-phpapp01/85/Sharepoint-2010-JQuery-10-320.jpg)
Uploaded byDecatec
Sharepoint 2010 JQuery
Il documento di Fabrizio Basilio esplora l'integrazione delle tecnologie client-side come jQuery e Silverlight nel migliorare l'esperienza SharePoint. Viene trattata la creazione di applicazioni web interattive (RIA) che combinano prestazioni delle applicazioni desktop con i vantaggi delle applicazioni web. Inoltre, il documento fornisce dettagli tecnici su come implementare questi framework e il modello client di SharePoint.
Sharepoint 2010 JQuery
- 1. Fabrizio Basilio, DecatecEnhancingSharePoint Experience with Client Side Technologieshttp://www.decatec.it
- 2. Fabrizio Basilio, Decatec2AgendaIntroduzionealle RIA (Rich Internet Application)Sharepoint 2007 e jQuerySharepoint 2007 e SilverlightSharepoint 2010: Client ObjectModel
- 3. Fabrizio Basilio, Decatec3Cosasono le RIA?Applicazioni web con caratteristiche e le funzionalità delle applicazioni desktopInterattive, multimediali e velociAggiornamento e deploy immediatoAccesso da qualsiasi pc in reteQualità di navigazione:RiccaFluidaImmediataPersonalizzata
- 4. Fabrizio Basilio, Decatec4Vantaggidelle RIAConsistente incremento del businessDiffusione AssolutaSemplicità di implementazioneVantaggi di gestione
- 5. Fabrizio Basilio, Decatec5RIAe SharepointjQuery (http://www.jquery.com)Silverlight (http://www.silverlight.net)
- 6. Fabrizio Basilio, Decatec6Cosaè jQuery?Framework basato su JavascriptRiassume in poche righe script molto complessiModifica radicalmente le modalità di sviluppo client-siteCross – browserChainability(concatenabilità) $('div#content').addClass('current').html('blablabla').width(100);
- 7. Fabrizio Basilio, Decatec7IntegrarejQuery: ModalitàCopiare nella cartella Layouts Libreria JqueryRendere disponibile la libreria nelle pagine SharePointAggiungendo ContentEditor Web Part
- 8. Aggiungendo reference nellaMasterPage del Sito SharePoint
- 9. AdditionalPageHead Delegate ControlFabrizioBasilio, Decatec8How to work jQuery
- 10. Fabrizio Basilio, Decatec9jQuery:SelettoriSelettori 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, Decatec10jQuery:CaratteristicheDOM TraversingManipolazioneCSSEventiEffettiAJAX
- 12. Fabrizio Basilio, Decatec11jQuery:EsempiRow Highlight al mouse over o staticoRicerca in un calendarioRunTimeFilter Data List Web Part
- 13. Fabrizio Basilio, Decatec12jQuery:ConclusioniRapidità di esecuzioneCarico di lavoro prevalentemente del clientAccesso in get / set a tutti gli elementi di una paginaSfuttare un’unica libreria per l’intera piattaformaEstendibilitàSupporto di una grossa communityLeggero (pesa solo 16 kb)
- 14. Fabrizio Basilio, Decatec13jQuery:ConclusioniRapidità di esecuzioneCarico di lavoro prevalentemente del clientAccesso in get / set a tutti gli elementi di una paginaSfuttare un’unica libreria per l’intera piattaformaEstendibilitàSupporto di una grossa communityLeggero (pesa solo 16 kb)
- 15. Fabrizio Basilio, Decatec14Silverlight:IntroduzioneInterazione complessa e dinamica con i dati nelle Dashboard (grafici, relazioni, ...)Visualizzare elementi multimediali in SharePointControlli di navigazioneOff-load di lavoro per i client
- 16. Fabrizio Basilio, Decatec15Silverlight:Introduzione
- 17. Fabrizio Basilio, Decatec16PerchèSilverlight?Dare un nuovo look rispetto al classico SharepointRappresentazione dei dati in formato graficoFacilità d‘usoSupporto Business IntelligenceColpo d‘occhio
- 18. Fabrizio Basilio, Decatec17Silverlighte SharepointBrowser Backend SystemSilverlightXAML + C#
- 19.
- 20.
- 21.
- 22.
- 23. Fabrizio Basilio, Decatec18Silverlighte Sharepoint: Integrazione Object ModelSharePoint Object ModelSilverlight + WCF Web Services ModelSharePoint (APIs)SilverlightMixed ModeSilverlight + WCFSharePoint Web Service + Object Model
- 24. Fabrizio Basilio, Decatec19Silverlighte Sharepoint: Integrazione
- 25. Fabrizio Basilio, Decatec20Silverlight:Hello World!Silverlight 2.0 project in Visual Studio 2008Create your user experience using XAML:IntelliSense®Silverlight Controls in ToolboxPreview in DesignerMicrosoft Expression Blend for complex designCode-behind class:Event-handlerBusiness logicAsynchronous communication with server data
- 26. Fabrizio Basilio, Decatec21Silverlight:Hello World!XAMLCODE 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, Decatec22Silverlight:EsempioSilverlight Browser
- 28. Fabrizio Basilio, Decatec23Sharepoint2010 vs Sharepoint 2007
- 29. Fabrizio Basilio, Decatec24Sharepoint2010 vs Sharepoint 2007
- 30. Fabrizio Basilio, Decatec25Sharepoint2010 vs Sharepoint 2007
- 31. Fabrizio Basilio, Decatec26Sharepoint2010: Client Object ModelTree new client APIs.NET Managed Applications (using the .NET CLR) Silverlight Applications ECMAScript (JavaScript, JScript)
- 32. Fabrizio Basilio, Decatec27Sharepoint2010: Client Object ModelRequisiti.NET 3.5 FrameworkMicrosoft.SharePoint.Client.dllMicrosoft.SharePoint.Client.Runtime.dll Assemblies Location%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\ISAPI
- 33. Fabrizio Basilio, Decatec28ClientObject Model: Namespace
- 34. Fabrizio Basilio, Decatec29ClientObject Model: How to work?
- 35. Fabrizio Basilio, Decatec30Sharepoint2010: Client Object ModelRequisiti.NET 3.5 FrameworkMicrosoft.SharePoint.Client.dllMicrosoft.SharePoint.Client.Runtime.dll Assemblies Location%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\ISAPI
- 36. Fabrizio Basilio, Decatec31ClientObject Model:First Codestatic 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, Decatec32ClientObject Model: CaratteristicheAccesso a tutti i componenti SharepointObject IdentityTrim Result Sets (Direttiva Include)Usare CAMLLINQ per filtrare (Query Innestate)AsynchronousProcessing
Editor's Notes
- #4 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
- #5 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).
- #7 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.
- #10 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
- #11 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.
- #29 Somiglianza dei nomi oggetto