Dojo nuovo look alle vostre applicazioni web Domino

  • 1,569 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,569
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Sotto Sponsored by inserire il logo dello sponsor a voi affiliato. Il logo lo trovate nell’ultima SLIDE.

Transcript

  • 1. Dojo e Domino Come cambiare il look nelle vostre applicazioni web Autore: Daniele Grillo Professione: Domino Developer
  • 2. Cos’è Dojo Toolkit ?
    • è una libreria modulare Javascript Open Source
    • studiata per sviluppare velocemente
    • Applicazioni Web:
    • cross browser
    • Interattive e funzionali(Ajax)
    • Look accattivante
  • 3. Perché Dojo?
    • Robusto
    • Dojo Foundation (501 membri…tra cui IBM e SUN supportano ufficialmente Dojo con contributi al al codice )
    • Licenza OpenSource (AFL o BSD )
    • Internazionalizzazione(i18n)
    • Accessibilità
    • Widget
    • La base Dojo.js pesa solo 26Kb
    • Package ( carichi solo quello che serve)
    • Utilizzato in Connection, Quickr e Domino 8.5
  • 4. Un po’ di storia…
    • 2004 Release 0.0 (Come creare qualcosa come Gmail?)
    • 2005 Release 0.1, 0.2 qualche feature
    • 2006 Release 0.3, 0.4 altre feature + stesura documentazione
    • 2007-06 ridisegno applicativo
    • 2007-11 1.0 Prima release ufficiale del prodotto
    • 2008-06 1.1 fix e nuove feature
    • 2008-09 1.2Beta con nuove feature e fix
    • 2008-10-07 Release 1.2
  • 5. RoadMap
    • http://trac.dojotoolkit.org/roadmap
    • R 1.2.1 31 Ottobre 2008
    • R 1.3 15 Dicembre 2008
    • R 1.4 28 Febbraio 2009
    • R 2.0 30 Giugno 2009
    • Etc..etc..
  • 6. I moduli Dojo
    • Contiene le librerie di Base
    • Eventi Ajax, packaging, CSS querying, animazioni, JSON, language utilities, 26 Kb, altro…
    • Contiene i widget
    • Accessibilità e localizzazione
    • Codice sperimentale / innovativo
    • Grafici, portare applicazioni off-line
    • Pre – Beta Widget, altro ancora…
  • 7. Dojo.Require
    • Con questa funzione JS utilizzi solo
    • quello che realmente ti serve.
    • (il loading avviene in backend)
    • es : Dojo.require(“dijit.form.Button”)
  • 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. Opzioni di installazione
    • Attivare WEBDAV e caricare le librerie all’interno dell’nsf stesso
    • Copiare le librerie Dojo all’interno della directory “DATA/DOMINO/HTML” di Domino
    • AOL’ s CDN (Content Delivery Network)
  • 10. Dojo inside NSF
    • caricare Dojo attivando webdav
    • ( vedi link articolo dominopoint ).
    • Le risorse Dojo verranno caricate all’interno
    • dell’NSF stesso.
    • Utilizzare il codice nell’head section :
    • &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;
  • 11. Dojo Server Side
    • Copiare i file Dojo all’interno della folder di
    • Domino datadominohtmlDojoVersion
    • &quot;<script type=&quot;text/javascript&quot; scr”/DojoVersion/Dojo/Dojo.js&quot;+ &quot; djConfig=&quot;parseOnLoad:true&quot; </script>&quot;
  • 12. Dojo AOL – CDN
    • Se l’applicazione verrà usata in internet è vantaggioso utilizzare
    • AOL (i file sono GZIP) in quanto non vi è manutenzione lato
    • admin ed è semplice l’implementazione
    • &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;
  • 13. Servire Dojo compresso (Gzip)
    • Per diminuire il tempo di loading delle
    • risorse e’ consigliabile creare una folder
    • contentente Dojo in formato GZIP
    • (esempio nella folder Dojo1.1.0 creo una
    • subfolder GZ che contiene i file compressi) e
    • tramite Rules Domino servire i
    • contenuti compressi solo ai browser che
    • supportano questa feature tramite il controllo
    • CGI:
    • @Contains( @GetHTTPHeader( &quot;Accept-Encoding&quot; ) ; “gzip&quot; )
  • 14. Situazione tipica…
    • Il cliente ci domanda :
    • “ Quanto ci vuole e qual è il costo per rendere web (su qualsiasi browser) la mia applicazione che sta girando lato client ?”
    • Risposta classica :
    • “ Bhè ci vuole tempo, non è così facile, dobbiamo analizzare, ridisegnare la parte web, è come se partissimo a farne una nuova…”
  • 15. La mia risposta usando Dojo
    • “ 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”
  • 16. Sarà vero?
    • Per dimostrare la veridicità della mia
    • affermazione prendo come esempio la classica
    • address book della R8 Domino e con l’ausilio di
    • Dojo la esporrò via web senza toccare tutto
    • ciò che è stato sviluppato lato client dal team
    • IBM/Lotus.
  • 17. Classica Schermata Address Book (R8)
  • 18. Apro l’address book in un browser..
  • 19. Risultato
    • DOMANDA :E’ quello che intendeva il vostro cliente?
    • RISPOSTA:
    • No, questo è quello che il motore HTTP Domino renderizza sul web senza alcun adattamento di codice.
    • E possibile che le strade da compiere per renderla web-oriented l’applicazione siano:
    • Dovrete creare nuove viste HTML (altre viste spesso cloni di quelle presenti) .
    • e poi magari tramite CSS potete dare un look alle viste utilizzando le FORM Domino $$ViewTemplate for.
    • Se la vostra form ha dei campi particolari (tipo calendario) dovrete cercare/realizzare Widget appositi per realizzare i controlli.
    • Dovrete adattare la FORM alla visualizzazione web.
    • Dovrete lavorare sulle $$SearchTemplate from per la visualizzazione delle ricerche.
    • Dovrete aprire sui diversi browser l’applicazione per verificarne il corretto funzionamento sui diversi browser
    • Quanto tempo avete perso a fare tutto questo ?
  • 20. La mia rubrica fatta in Dojo
  • 21. Live della Rubrica
    • Clicca qui per aprire la rubrica
  • 22. Cosa ho usato per fare questo?
    • 1 Pagina con widget Dojo per creare il layout e i controlli JS fondamentali
    • 1 Form WebPerson visibile da web + vista di appoggio per l’apertura/modifica dei documenti
    • 2 Script-Library JS per gestire le viste + ricerche (in futuro saranno dei widget aggiuntivi )
    • 2 Estensioni Dojo ( 2 files) fatte da Dojomino per creare l’outline + FilteringSelect
    • 1 CSS per gestire lo stile
  • 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. Struttura Layout della pagina
  • 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. Scelgo il tema che voglio
    • I temi disponibili con Dojo sono :
    • Tundra
    • Soria
    • Nihilo
    • Per cambiarli basta cambiare la
    • classe nel Body e selezionare il
    • CSS corretto nell’Head Content.
  • 27. ParseonLoad
    • L’istruzione “ParseOnLoad:True”
    • processa tutti gli elementi HTML
    • della pagina in cui sia definito il
    • Seguente tag
    • dojotype=Widget.
    • e li renderizza a video sotto
    • forma di widget al caricamento
    • della della stessa.
  • 28.  
  • 29. Schema ViewDojo JS GET HTTP REQUEST JSON DATA GET HTTP REQUEST JSON DATA SearchDojo JS Pagina HTML
  • 30. Rendering delle viste (ViewDojoJSON)
    • Per effettuare il rendering a video delle viste, ho creato una oggetto
    • Javascript che dato il nome della vista, ed altri parametri ( come il numero
    • della colonna da ordinare, la searchkey) effettua una chiamata Ajax alla vista
    • Domino e restituisce il JSON che parserizzo e renderizzo a video sotto forma
    • di tabella HTML.
    • Il comando che uso per leggere i titoli delle colonne è:
    • NOMEVISTA?ReadDesing&OutputFormat=Json
    • Il comando che uso per leggere gli entries della vista è :
    • NOMEVISTA?ReadViewEntries&OutputFormat=JSON
  • 31.  
  • 32.  
  • 33. Ricerche (BackEnd)
    • Non esiste il comando ?SearchView&OutputFormat=JSON, così per effettuare
    • le ricerche Ajax che restituiscono un JSON ho creato un agente :
  • 34.  
  • 35. Ricerche ( FrontEnd)
    • Utilizzo un oggetto Javascript da me creato che
    • tramite Ajax chiama l’agente passandogli i
    • parametri ( vista, query..etc..) ed elabora il JSON
    • di ritorno e lo scrive nella Dijit.Dialog
  • 36.  
  • 37. Form WebPerson dojoType= può essere inserito nella sezione HTML Other sui Field (esempio a fianco) oppure nell HTML attributes dei campi
  • 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
  • 39. Vista di appoggio
    • La vista mi permetterà di aprire i
    • documenti in essa presenti
    • usando la FORM WEBperson.
    • In questo modo per
    • aprire /creare/editare i
    • documenti i documenti lato web
    • uso la seguente sintassi :
    • /vista/UNID?OpenDocument
    • /vista/UNID?EditDocument
    • /vista/UNID?OpenForm
  • 40. Firebug ti aiuta!
  • 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
  • 42. Press
  • 43. I Nostri Sponsor