Dojo e Domino Come cambiare il look nelle vostre applicazioni web Autore:  Daniele Grillo Professione:  Domino Developer
Cos’è Dojo Toolkit ? <ul><li>è una libreria modulare Javascript Open Source </li></ul><ul><li>studiata per sviluppare velo...
Perché Dojo? <ul><li>Robusto </li></ul><ul><li>Dojo Foundation (501 membri…tra cui IBM e SUN supportano ufficialmente Dojo...
Un po’ di storia… <ul><li>2004 Release 0.0  (Come creare qualcosa come Gmail?) </li></ul><ul><li>2005  Release 0.1, 0.2   ...
RoadMap <ul><li>http://trac.dojotoolkit.org/roadmap </li></ul><ul><li>R 1.2.1 31 Ottobre 2008 </li></ul><ul><li>R 1.3 15 D...
I moduli Dojo <ul><li>Contiene le librerie di Base </li></ul><ul><li>Eventi Ajax, packaging, CSS querying, animazioni, JSO...
Dojo.Require  <ul><li>Con questa funzione JS utilizzi solo </li></ul><ul><li>quello che realmente ti serve. </li></ul><ul>...
Dojo & Domino Dijit.Editor RichText Dijit.form.Combobox/Dijit.form.ListeringSelect ListBox/ComboBox Dijit.form.ChechBox / ...
Opzioni di installazione <ul><li>Attivare WEBDAV e caricare le librerie all’interno dell’nsf stesso </li></ul><ul><li>Copi...
Dojo inside NSF <ul><li>caricare Dojo attivando webdav  </li></ul><ul><li>( vedi  link  articolo  dominopoint ). </li></ul...
Dojo Server Side <ul><li>Copiare i file Dojo all’interno della folder di  </li></ul><ul><li>Domino  datadominohtmlDojoVers...
Dojo AOL – CDN <ul><li>Se l’applicazione verrà usata in internet è vantaggioso utilizzare </li></ul><ul><li>AOL (i file so...
Servire Dojo compresso (Gzip) <ul><li>Per diminuire il tempo di  loading delle </li></ul><ul><li>risorse e’ consigliabile ...
Situazione tipica… <ul><li>Il cliente ci domanda : </li></ul><ul><li>“ Quanto ci vuole e qual è il costo per rendere web (...
La mia risposta usando Dojo <ul><li>“ Una volta capito cosa vi serve esporre sarà una questione di poco tempo visto che gr...
Sarà vero? <ul><li>Per dimostrare la veridicità della mia  </li></ul><ul><li>affermazione prendo come esempio la classica ...
Classica Schermata Address Book (R8)
Apro l’address book in un browser..
Risultato <ul><li>DOMANDA :E’ quello che intendeva il vostro cliente? </li></ul><ul><li>RISPOSTA:  </li></ul><ul><li>No, q...
La mia rubrica fatta in Dojo
Live della Rubrica <ul><li>Clicca  qui per aprire la rubrica </li></ul>
Cosa ho usato per fare questo? <ul><li>1 Pagina con widget Dojo per creare il layout e i controlli JS fondamentali </li></...
Pagina Layout + StartPage La prima cosa da fare è quella di creare una pagina ( nel nostro caso nominata StartPage ) che s...
Struttura Layout della pagina
<div style=&quot;position: relative; width: 100%; height: 400px; border: 1px #ccc solid;&quot;> <div  dojoType=&quot;dijit...
Scelgo il tema che voglio <ul><li>I temi disponibili con Dojo sono : </li></ul><ul><li>Tundra </li></ul><ul><li>Soria </li...
ParseonLoad <ul><li>L’istruzione “ParseOnLoad:True”  </li></ul><ul><li>processa tutti gli elementi HTML  </li></ul><ul><li...
 
Schema ViewDojo JS GET HTTP REQUEST JSON DATA GET HTTP REQUEST JSON DATA SearchDojo JS Pagina HTML
Rendering delle viste (ViewDojoJSON) <ul><li>Per effettuare il rendering a video delle viste, ho creato una oggetto </li><...
 
 
Ricerche (BackEnd) <ul><li>Non esiste il comando ?SearchView&OutputFormat=JSON, così per effettuare  </li></ul><ul><li>le ...
 
Ricerche ( FrontEnd) <ul><li>Utilizzo un oggetto Javascript da me creato che  </li></ul><ul><li>tramite Ajax chiama l’agen...
 
Form WebPerson dojoType=   può essere inserito nella sezione HTML Other sui Field (esempio a fianco)  oppure nell  HTML at...
Salvataggio (webquerysave) La submit effettuerà il salvataggio della form che chiamerà l’agente in WQS che si occuperà di ...
Vista di appoggio <ul><li>La vista mi permetterà di aprire i  </li></ul><ul><li>documenti in essa presenti  </li></ul><ul>...
Firebug ti aiuta!
Risorse & esempi online http://www.slideshare.net/rkremer/introduction-dojo-toolkit-ibm-lotus-domino Pavone Slides http://...
Press
I Nostri Sponsor
Upcoming SlideShare
Loading in …5
×

Dojo nuovo look alle vostre applicazioni web Domino

1,995 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,995
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Sotto Sponsored by inserire il logo dello sponsor a voi affiliato. Il logo lo trovate nell’ultima SLIDE.
  • Dojo nuovo look alle vostre applicazioni web Domino

    1. 1. Dojo e Domino Come cambiare il look nelle vostre applicazioni web Autore: Daniele Grillo Professione: Domino Developer
    2. 2. Cos’è Dojo Toolkit ? <ul><li>è una libreria modulare Javascript Open Source </li></ul><ul><li>studiata per sviluppare velocemente </li></ul><ul><li>Applicazioni Web: </li></ul><ul><li>cross browser </li></ul><ul><li>Interattive e funzionali(Ajax) </li></ul><ul><li>Look accattivante </li></ul>
    3. 3. Perché Dojo? <ul><li>Robusto </li></ul><ul><li>Dojo Foundation (501 membri…tra cui IBM e SUN supportano ufficialmente Dojo con contributi al al codice ) </li></ul><ul><li>Licenza OpenSource (AFL o BSD ) </li></ul><ul><li>Internazionalizzazione(i18n) </li></ul><ul><li>Accessibilità </li></ul><ul><li>Widget </li></ul><ul><li>La base Dojo.js pesa solo 26Kb </li></ul><ul><li>Package ( carichi solo quello che serve) </li></ul><ul><li>Utilizzato in Connection, Quickr e Domino 8.5 </li></ul>
    4. 4. Un po’ di storia… <ul><li>2004 Release 0.0 (Come creare qualcosa come Gmail?) </li></ul><ul><li>2005 Release 0.1, 0.2 qualche feature </li></ul><ul><li>2006 Release 0.3, 0.4 altre feature + stesura documentazione </li></ul><ul><li>2007-06 ridisegno applicativo </li></ul><ul><li>2007-11 1.0 Prima release ufficiale del prodotto </li></ul><ul><li>2008-06 1.1 fix e nuove feature </li></ul><ul><li>2008-09 1.2Beta con nuove feature e fix </li></ul><ul><li>2008-10-07 Release 1.2 </li></ul>
    5. 5. RoadMap <ul><li>http://trac.dojotoolkit.org/roadmap </li></ul><ul><li>R 1.2.1 31 Ottobre 2008 </li></ul><ul><li>R 1.3 15 Dicembre 2008 </li></ul><ul><li>R 1.4 28 Febbraio 2009 </li></ul><ul><li>R 2.0 30 Giugno 2009 </li></ul><ul><li>Etc..etc.. </li></ul>
    6. 6. I moduli Dojo <ul><li>Contiene le librerie di Base </li></ul><ul><li>Eventi Ajax, packaging, CSS querying, animazioni, JSON, language utilities, 26 Kb, altro… </li></ul><ul><li>Contiene i widget </li></ul><ul><li>Accessibilità e localizzazione </li></ul><ul><li>Codice sperimentale / innovativo </li></ul><ul><li>Grafici, portare applicazioni off-line </li></ul><ul><li>Pre – Beta Widget, altro ancora… </li></ul>
    7. 7. Dojo.Require <ul><li>Con questa funzione JS utilizzi solo </li></ul><ul><li>quello che realmente ti serve. </li></ul><ul><li>(il loading avviene in backend) </li></ul><ul><li>es : Dojo.require(“dijit.form.Button”) </li></ul>
    8. 8. Dojo & Domino Dijit.Editor RichText Dijit.form.Combobox/Dijit.form.ListeringSelect ListBox/ComboBox Dijit.form.ChechBox / Dijit.form.RadioButton CheckBox / RadioButton Dijit.form.NumberTextBox Dijit.form.NumberSpinner Dijit.form.CurrencyTextBox Number Dijit.form.DateTextBox Dijit.form.TimeTextBox Date/Time Dijit.form.TextBox Dijit.form.ValidationTextBox Text/Password Dojo Widget Class Domino Form Field
    9. 9. Opzioni di installazione <ul><li>Attivare WEBDAV e caricare le librerie all’interno dell’nsf stesso </li></ul><ul><li>Copiare le librerie Dojo all’interno della directory “DATA/DOMINO/HTML” di Domino </li></ul><ul><li>AOL’ s CDN (Content Delivery Network) </li></ul>
    10. 10. Dojo inside NSF <ul><li>caricare Dojo attivando webdav </li></ul><ul><li>( vedi link articolo dominopoint ). </li></ul><ul><li>Le risorse Dojo verranno caricate all’interno </li></ul><ul><li>dell’NSF stesso. </li></ul><ul><li>Utilizzare il codice nell’head section : </li></ul><ul><li>&quot;<script type=&quot;text/javascript&quot; scr=&quot;&quot;+@WebDbName+&quot;/DojoVersion/Dojo/Dojo.js&quot;+ &quot; djConfig=&quot;parseOnLoad:true&quot; </script>&quot; </li></ul>
    11. 11. Dojo Server Side <ul><li>Copiare i file Dojo all’interno della folder di </li></ul><ul><li>Domino datadominohtmlDojoVersion </li></ul><ul><li>&quot;<script type=&quot;text/javascript&quot; scr”/DojoVersion/Dojo/Dojo.js&quot;+ &quot; djConfig=&quot;parseOnLoad:true&quot; </script>&quot; </li></ul>
    12. 12. Dojo AOL – CDN <ul><li>Se l’applicazione verrà usata in internet è vantaggioso utilizzare </li></ul><ul><li>AOL (i file sono GZIP) in quanto non vi è manutenzione lato </li></ul><ul><li>admin ed è semplice l’implementazione </li></ul><ul><li>&quot;<script type=&quot;text/javascript&quot; src=&quot;http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js&quot; djConfig=&quot;parseOnLoad: true&quot;></script>&quot; </li></ul>
    13. 13. Servire Dojo compresso (Gzip) <ul><li>Per diminuire il tempo di loading delle </li></ul><ul><li>risorse e’ consigliabile creare una folder </li></ul><ul><li>contentente Dojo in formato GZIP </li></ul><ul><li>(esempio nella folder Dojo1.1.0 creo una </li></ul><ul><li>subfolder GZ che contiene i file compressi) e </li></ul><ul><li>tramite Rules Domino servire i </li></ul><ul><li>contenuti compressi solo ai browser che </li></ul><ul><li>supportano questa feature tramite il controllo </li></ul><ul><li>CGI: </li></ul><ul><li>@Contains( @GetHTTPHeader( &quot;Accept-Encoding&quot; ) ; “gzip&quot; ) </li></ul>
    14. 14. Situazione tipica… <ul><li>Il cliente ci domanda : </li></ul><ul><li>“ Quanto ci vuole e qual è il costo per rendere web (su qualsiasi browser) la mia applicazione che sta girando lato client ?” </li></ul><ul><li>Risposta classica : </li></ul><ul><li>“ Bhè ci vuole tempo, non è così facile, dobbiamo analizzare, ridisegnare la parte web, è come se partissimo a farne una nuova…” </li></ul>
    15. 15. La mia risposta usando Dojo <ul><li>“ Una volta capito cosa vi serve esporre sarà una questione di poco tempo visto che grazie a Dojo abbiamo gran parte degli strumenti che ci servono già pronti all’uso e non dobbiamo far fatica a rendere cross l’applicazione” </li></ul>
    16. 16. Sarà vero? <ul><li>Per dimostrare la veridicità della mia </li></ul><ul><li>affermazione prendo come esempio la classica </li></ul><ul><li>address book della R8 Domino e con l’ausilio di </li></ul><ul><li>Dojo la esporrò via web senza toccare tutto </li></ul><ul><li>ciò che è stato sviluppato lato client dal team </li></ul><ul><li>IBM/Lotus. </li></ul>
    17. 17. Classica Schermata Address Book (R8)
    18. 18. Apro l’address book in un browser..
    19. 19. Risultato <ul><li>DOMANDA :E’ quello che intendeva il vostro cliente? </li></ul><ul><li>RISPOSTA: </li></ul><ul><li>No, questo è quello che il motore HTTP Domino renderizza sul web senza alcun adattamento di codice. </li></ul><ul><li>E possibile che le strade da compiere per renderla web-oriented l’applicazione siano: </li></ul><ul><li>Dovrete creare nuove viste HTML (altre viste spesso cloni di quelle presenti) . </li></ul><ul><li>e poi magari tramite CSS potete dare un look alle viste utilizzando le FORM Domino $$ViewTemplate for. </li></ul><ul><li>Se la vostra form ha dei campi particolari (tipo calendario) dovrete cercare/realizzare Widget appositi per realizzare i controlli. </li></ul><ul><li>Dovrete adattare la FORM alla visualizzazione web. </li></ul><ul><li>Dovrete lavorare sulle $$SearchTemplate from per la visualizzazione delle ricerche. </li></ul><ul><li>Dovrete aprire sui diversi browser l’applicazione per verificarne il corretto funzionamento sui diversi browser </li></ul><ul><li>Quanto tempo avete perso a fare tutto questo ? </li></ul>
    20. 20. La mia rubrica fatta in Dojo
    21. 21. Live della Rubrica <ul><li>Clicca qui per aprire la rubrica </li></ul>
    22. 22. Cosa ho usato per fare questo? <ul><li>1 Pagina con widget Dojo per creare il layout e i controlli JS fondamentali </li></ul><ul><li>1 Form WebPerson visibile da web + vista di appoggio per l’apertura/modifica dei documenti </li></ul><ul><li>2 Script-Library JS per gestire le viste + ricerche (in futuro saranno dei widget aggiuntivi ) </li></ul><ul><li>2 Estensioni Dojo ( 2 files) fatte da Dojomino per creare l’outline + FilteringSelect </li></ul><ul><li>1 CSS per gestire lo stile </li></ul>
    23. 23. Pagina Layout + StartPage La prima cosa da fare è quella di creare una pagina ( nel nostro caso nominata StartPage ) che sarà quella che verrà aperta alla prima visualizzazione del browser e settarla come pagina di partenza nelle proprietà del database
    24. 24. Struttura Layout della pagina
    25. 25. <div style=&quot;position: relative; width: 100%; height: 400px; border: 1px #ccc solid;&quot;> <div dojoType=&quot;dijit.layout.BorderContainer&quot; gutters=&quot;true&quot; id=&quot;borderContainerTwo&quot; > <div dojoType=&quot;dijit.layout.ContentPane&quot; region=&quot;top&quot; splitter=&quot;false&quot;> Qui solitamente ci sono le informazioni, dell'header come titolo..etc... </div> <div dojoType=&quot;dijit.layout.BorderContainer&quot; liveSplitters=&quot;false&quot; design=&quot;sidebar&quot; region=&quot;center&quot; id=&quot;mainSplit&quot;> <div dojoType=&quot;dijit.layout.AccordionContainer&quot; minSize=&quot;20&quot; style=&quot;width: 300px;&quot; id=&quot;leftAccordion&quot; region=&quot;leading&quot; splitter=&quot;true&quot;> <div dojoType=&quot;dijit.layout.AccordionPane&quot; title=&quot;Menu&quot;> </div> <div dojoType=&quot;dijit.layout.AccordionPane&quot; title=&quot;Altro&quot;> </div> </div><!-- end AccordionContainer --> <div dojoType=&quot;dijit.layout.TabContainer&quot; region=&quot;center&quot; tabStrip=&quot;true&quot;> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Primo TABS&quot; selected=&quot;true&quot;> Contentuto centrale </div> </div> </div> <div dojoType=&quot;dijit.layout.ContentPane&quot; region=&quot;bottom&quot; splitter=&quot;false&quot;> INFORMAZIONI FOOTER </div> </div> </div>
    26. 26. Scelgo il tema che voglio <ul><li>I temi disponibili con Dojo sono : </li></ul><ul><li>Tundra </li></ul><ul><li>Soria </li></ul><ul><li>Nihilo </li></ul><ul><li>Per cambiarli basta cambiare la </li></ul><ul><li>classe nel Body e selezionare il </li></ul><ul><li>CSS corretto nell’Head Content. </li></ul>
    27. 27. ParseonLoad <ul><li>L’istruzione “ParseOnLoad:True” </li></ul><ul><li>processa tutti gli elementi HTML </li></ul><ul><li>della pagina in cui sia definito il </li></ul><ul><li>Seguente tag </li></ul><ul><li>dojotype=Widget. </li></ul><ul><li>e li renderizza a video sotto </li></ul><ul><li>forma di widget al caricamento </li></ul><ul><li>della della stessa. </li></ul>
    28. 29. Schema ViewDojo JS GET HTTP REQUEST JSON DATA GET HTTP REQUEST JSON DATA SearchDojo JS Pagina HTML
    29. 30. Rendering delle viste (ViewDojoJSON) <ul><li>Per effettuare il rendering a video delle viste, ho creato una oggetto </li></ul><ul><li>Javascript che dato il nome della vista, ed altri parametri ( come il numero </li></ul><ul><li>della colonna da ordinare, la searchkey) effettua una chiamata Ajax alla vista </li></ul><ul><li>Domino e restituisce il JSON che parserizzo e renderizzo a video sotto forma </li></ul><ul><li>di tabella HTML. </li></ul><ul><li>Il comando che uso per leggere i titoli delle colonne è: </li></ul><ul><li>NOMEVISTA?ReadDesing&OutputFormat=Json </li></ul><ul><li>Il comando che uso per leggere gli entries della vista è : </li></ul><ul><li>NOMEVISTA?ReadViewEntries&OutputFormat=JSON </li></ul>
    30. 33. Ricerche (BackEnd) <ul><li>Non esiste il comando ?SearchView&OutputFormat=JSON, così per effettuare </li></ul><ul><li>le ricerche Ajax che restituiscono un JSON ho creato un agente : </li></ul>
    31. 35. Ricerche ( FrontEnd) <ul><li>Utilizzo un oggetto Javascript da me creato che </li></ul><ul><li>tramite Ajax chiama l’agente passandogli i </li></ul><ul><li>parametri ( vista, query..etc..) ed elabora il JSON </li></ul><ul><li>di ritorno e lo scrive nella Dijit.Dialog </li></ul>
    32. 37. Form WebPerson dojoType= può essere inserito nella sezione HTML Other sui Field (esempio a fianco) oppure nell HTML attributes dei campi
    33. 38. Salvataggio (webquerysave) La submit effettuerà il salvataggio della form che chiamerà l’agente in WQS che si occuperà di fare un replace del campo FORM ed una ComputedWithform
    34. 39. Vista di appoggio <ul><li>La vista mi permetterà di aprire i </li></ul><ul><li>documenti in essa presenti </li></ul><ul><li>usando la FORM WEBperson. </li></ul><ul><li>In questo modo per </li></ul><ul><li>aprire /creare/editare i </li></ul><ul><li>documenti i documenti lato web </li></ul><ul><li>uso la seguente sintassi : </li></ul><ul><li>/vista/UNID?OpenDocument </li></ul><ul><li>/vista/UNID?EditDocument </li></ul><ul><li>/vista/UNID?OpenForm </li></ul>
    35. 40. Firebug ti aiuta!
    36. 41. Risorse & esempi online http://www.slideshare.net/rkremer/introduction-dojo-toolkit-ibm-lotus-domino Pavone Slides http://www.lotusgeek.com/LotusGeek/LotusGeekBlog.nsf/downloads/ROLR-7B4QCF Slides LotusSphere 2008 http://www.11tmr.com/11tmr.nsf/D6Plinks/MWHE-6Z7K5Y Dojo-Discussion-DB http://ekrantz.com/index.php/2008/01/30/dojo-grid-with-domino-views.html Dojo-Grid-View-example http://dojocampus.org/ Dojo Campus http://dojotoolkit.org/docs Dojo Documentation: http://dojomino.com/ Dojomino: http://www.sitepen.com/blog/ SitePen: http://dojotoolkit.org/ Sito ufficiale Dojo
    37. 42. Press
    38. 43. I Nostri Sponsor

    ×