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

Views

Total Views
293
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

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

Transcript

  • 1. Xpages … l’evoluzione continua Domino Specialist & Developer Insert your presentation title here Insert your name, title and company here Insert your picture
  • 2. Leave this slide as is
  • 3. Agenda
    • Dove eravamo rimasti…
    • Novità 8.5.2
    • Digit.Dialog
    • Multi-Language
    • Partial Refresh
    • FileUpload attenzione al partial refresh
    • SSJS e JS come farle interagire
    • Grafici
  • 4. Dove eravamo rimasti?… Dday 2009
  • 5. Dove eravamo rimasti?…Dday 2009
    • Cosa sono le Xpages
    • Modello MVC
    • Componenti Fondametali (Core, Container,Custom)
    • Variabili Scope (Session,Application, View, Request)
    • Linguaggio di sviluppo SSJS
    • Usale dalla R8.5.1
    • XPiNC (XPages inside Notes Client)
    Ulteriori informazioni a questo link : http://www.dominopoint.it/Dominopoint/Dominopoint_blog.nsf/dx/slide-xpages-cosa-ci-sarà-in-questa-nuova-tecnologia
  • 6. Cosa sono le Xpages
    • Un componente Aggiuntivo Designer
    • Un Framework di sviluppo basato su componenti
    • Tecnologia JSF
    • Sfruttano il backend Domino
    • Una soluzione RAD di sviluppo Web
    • Estensione HTTP Domino
    • Nascono nella 8.5
  • 7. Componenti Base
    • Core
    • Container
    • Custom
  • 8. Variabili Scope
    • Variabili contenitori suddivise in:
    • Application : durano per tutta l’applicazione
    • Session: durano per la sessione corrente
    • View: durano per la vista corrente ( pagina corrente)
    • Request: durano per l’ultima chiamata verso il server
    Ulteriori informazioni a questo link : http://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-scoped-variables.htm
  • 9. Modello MVC
    • E’ un concetto di programmazione
    • Significa Model View Control
    • Model = Dati ( Form di Notes)
    • View = Come vengono rappresentati (Xpages)
    • Control= Logica applicativa ( SSJS, JS)
    • Separa il disegno applicativo dai dati e dalla
    • logica di programmazione
  • 10. SSJS (server side javascript)
    • E’ il linguaggio utilizzato lato server-side dalla Xpages
    • Racchiude oltre 90% delle formulas
    • Semplice
    • Javascript Like
    • Performante
  • 11. XPiNC (XPages inside Notes Client)
    • Permette di eseguire le Xpages nel client
    • Puoi scegliere nelle opzioni del database
    • Dalla 8.5.1
    • Sviluppi 1 volta per i due mondi (client e web)
    • 8.5.1 = Firefox 2.x
    • 8.5.2 = Firefox 3.X
    • Supporta la replica e SSO utente
  • 12. Novita’ della Release 8.5.2
  • 13. Novita’ 8.5.2…
    • Drag&Drop controlli nel source code
    • Oggetti Radio/CheckBox Group migliorati
    • ARIA Support
    • Agents with In-Memory documents
    • Java Agents in XPiNC
    • Ajax ( Partial refresh timeout + prevent filtering)
    • CkEditor
    • TagName ( computed text)
    • Dojo 1.4.3
    • Type and Attribute Dojo
    • onClientLoad
    • SessionAsSigner e sessionAsSignerWithFullAccess
    • Extensions API
    • HeadTag
    • HTML5 ( Cache-Manifest , Base Resource)
    • Public Access Feature
    • OneUI v2
    • Pager ( last page feature)
    • SCXD ( Single copy Xpages Design)
    • View ( startKey,MultiCategoria, LastPage)
    • XPiNC (Agent ,NewTab, Replica, OpenDesigner windows.close)
    • Performance migliorate SSJS
  • 14. Drag&Drop Source Code … Possibilità di trascinare i controlli direttamente nel codice sorgente…
  • 15. Radio/CheckBoxGroup aggiornati … I radio/CheckBox Group hanno un UI nel design tab e proprieta’ definite
  • 16. CkEditor sostituito al DojoRichText … miglior gestione della TextArea, miglior formattazione possibilita’ di inserire immagini embeddedate nel controllo richtext Web ( file Upload a breve?) N.B. Possibilita’ di utilizzare il controllo Dojo precedente inserendo nel campo DojoType il valore ibm.xsp.widget.layout.RichText od in alternativa cambiando il Thema
  • 17. CkEditor sostituito al DojoRichText … ovviamente accessibili dal client Notes e modificabili….
  • 18. Cosa notiamo? Possibilita’ dal client di aprire il documento in formato Xpages per mantenere la corrispondenza 1:1 web client (XpiNC)…
  • 19. Agents with In-Memory documents Nuove modalità di lanciare un agente passandogli al Context anche un documento qualunque: N.B. tramite la context classica è possibile accedere al contenuto del documento in memoria caso LS Set doc = NotesSession.DocumentContext caso Java public Document AgentContext.getDocumentContext () JavaScript (XPages) Agent.runWithDocumentContext(doc:NotesDocument) : void Agent.runWithDocumentContext(doc:NotesDocument, noteID:string) : void Java public void Agent.runWithDocumentContext(Document doc) public void Agent.runWithDocumentContext(Document doc, String noteID) LotusScript NotesAgent.RunWithDocumentContext(doc As NotesDocument, noteID As String) As Integer
  • 20. Partial Update Timeout Come posso allegare file più grandi di 1 Mega senza di che il sistema vada in TimeOut in modo da abilitare reti lenti ad uploadare i File?
  • 21. Partial Update Timeout Come posso allegare file più grandi di 1 Mega senza di che il sistema vada in TimeOut in modo da abilitare reti lenti ad uploadare i File? N.B. Ulteriori dettagli a questo link: http://xpagesblog.com/xpages-blog/2010/6/24/calling-timeout-on-large-file-uploads-in-xpages.html
  • 22. Prevent filtering Fornisce la possibilità di iniziare il Type-Ahead da un carattere qualsiasi e non sempre dalla prima lettera inserita ( ma per esempio dal primo carattere della seconda parola)
  • 23. Dojo attributi nativo
  • 24. Extension API – the next generation Permette di estendere le librerie dei componenti nelle Xpages creando funzionalità aggiuntivie utili per per specifici utilizzi che possono essere integrate nelle vostre applicazioni Xpages (essendo controlli aggiuntivi) con drag&drop: Esempio: FileUpload migliorato, Grafici pronti all’uso etc… La wiki spiega come creare nuovi controlli: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Master_Table_of_Contents_for_XPages_Extensibility_APIs_Developer_Guide N.B. Ulteriori dettagli a questo link: http://www.qtzar.com/blogs/qtzar.nsf/Blog.xsp?entry=DSLH-8673BY
  • 25. TagName Permette di aggiungere Tag HTML di chiusura e apertura nei computed text in modo da ottenere un codice HTML semanticamente corretto anche ai fini dei motori di ricerca N.B. Ulteriori dettagli a questo link: http://xpagesblog.com/xpages-blog/2010/8/25/an-easy-way-to-set-the-tag-of-computed-text-to-aid-in-semant.html
  • 26. ARIA Support Le Xpages supportano l’ARIA per fare in modo che le nostre applicazioni siano accessibili da persone con disabilità. Maggiori informazioni sono disponibili a questo link: http://www.w3.org/WAI/intro/aria.php
  • 27. Public Access Support N.B. ulteriori informazioni a questo link: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Public_Access_Support Introdotta la feature like Domino per documenti pubblici( es. i commenti di un blog)
  • 28. SCXD (Single copy Xpages Design) È possibile memorizzare elementi di progettazione XPage in un database e reindirizzare altri database li al momento dell'esecuzione. In questo modo, vengono migliorate le prestazioni utilizzando un'ubicazione per la memorizzazione degli oggetti e l'accesso del browser. Gli elementi di progettazione interessati sono le XPage, i controlli personalizzati, le librerie JavaScript, i fogli di stile e i temi.
  • 29. SessionAsSigner e sessionAsSignerWithFullAccess
    • Due nuovi Global Objects for Server Side JavaScript (SSJS):
    • sessionAsSigner - Le credenziali di accesso sono referenziate al firmatario del Design dell'Xpages.
    • La session è controllata dall'ACL dell'applicazione e dalla TAB di sicurezza del documento server della Domino Directory del server.
    • sessionAsSignerWithFullAccess -- Le credenziali di accesso sono referenziate al firmatario del Design dell'Xpages. Ed il livello è alzato a full access administrator ( apposito TAB della Domino Directory server) .
    • Il firmatario deve avere quindi diritti sufficienti oppure la variabile non verrà inizializzata 
  • 30. Head Tag Permette di inserire informazioni aggiuntive all’Header della pagina generata N.B. Esempio di utilizzo per aggiungere Header per i blackberry: http://www-10.lotus.com/ldd/heidloffblog.nsf/dx/quick-tip-prereq-to-run-xpages-on-blackberry
  • 31. HTML 5 – cache manifest support Permette di cachare off-line i dati per ottenere migliori performance : Un esempio di utilizzo a questo URL http://www.openntf.org/blogs/openntf.nsf/d6plinks/NHEF-85588X Qui un’altra spiegazione: http://dominoextnd.blogspot.com/2010/05/html-5-cache-manifest-and-dynamic-data.html HTML 5 - Base resource support E’ l’url base href di partenza per tutti i collegamenti degli HREF
  • 32. HTML 5 - Manifest
  • 33. HTML5 – Cache Manifest
  • 34.  
  • 35.  
  • 36. Multicategory View Fornisce la possibilità di filtrare una vista per + di una categoria N.B. Ulteriori dettagli a questo link: http://xpagesblog.com/xpages-blog/2010/8/19/xpages-multi-level-category-filtering-categoryfilter-enhance.html
  • 37. XpiNC
    • Eseguire agent locali
    • Nuovo Tab per gestire le finestre di apertura
    • Opzione di apertura in Designer
    • Opzione di replica
    • Supporto windows.close() funzione
  • 38. OneUi v2 Thema v2… la documentazione su come utilizzarlo è presente a questa URL: http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm
  • 39. REST API ? Introdotte le API REST nella 8.5.2 nelle Proprietà dell'applicazione - È stata aggiunta un'impostazione alle Proprietà dell'applicazione di base che consente di abilitare le operazioni dell'API Domino REST a un livello "per database".
  • 40. Anteprima HTML passante e Editor Script Eclipse
  • 41. Anteprima HTML passante
  • 42. Script Editor in Eclipse Oltre agli agenti è stata convertita anche la Database Script Library , Script Library …cosa manca?
  • 43. Icone a 24 Bit ( BMP,JPG,GIF,PNG) La possibilità di arricchire la nostra workspace con icone a 24Bit! … Ci sono voluti 10 anni ma l’hanno fatto! ( meglio tardi che mai)
  • 44. Tips & tricks…
  • 45. Come accedere da JS client ai componenti? Il motore JSF converte le id html dei componenti in formato particolare ( ciò permette al motore XSP di referenziare univocamente l’accesso ai componenti web) Ma se debbo accedere da JS client ad un componente come posso fare?
  • 46. Come accedere da JS ai componenti? Utilizzare la sintassi #{id:NOMECOMPONENTE} Esempio: var fileContainer=dojo.byId("#{id:fileContainer}"); if(null != fileContainer){ var displayStyle = fileContainer.style.display; if (displayStyle == "none"){ fileContainer.style.display = "inline"; } else { fileContainer.style.display = "none"; } }
  • 47. Come accedere da SSJS ai componenti? Per accedere ai componenti lato server-side è possibile utilizzare due funzioni: getComponent("foo"), and getClientId("foo"). getClientId()  restituirà l’ID che verrà generato via Web da un particolare componente getComponent()  restituisce l’oggetto con tutte le sue proprietà Esempio Utilizzo: se sono all’interno di codice JS client e voglio sfruttare funzioni SSJS basta aggiungere la sintassi #{javascript:SSJS function o code} Esempio: dojo.byId('#{javascript:getClientId(“pannello1")}').
  • 48. Lavorare con Partial e Full Refresh Da client JS si può invocare il metodo: XSP.partialRefreshPost(id); Dove id può essere catturata con #{id:nameOfControl}“ XSP.partialRefreshGet(id); Nel caso non debbono essere postati campi valorizzati In cascata: XSP.partialRefreshGet(id1, { onComplete: function() { XSP.partialRefreshGet(id2, { onComplete: function() { XSP.partialRefreshGet(id3); } } } } . N.B. leggete anche questo post http://xpagesblog.com/xpages-blog/2010/3/25/reusable-javascript-class-to-publish-global-and-element-spec.html
  • 49. FileUpload Control – Attenzione! Non supporta l’ajax refresh in quanto è necessario un IFRAME. Per funzionare con il metodo nativo è necessario impostare un full refresh oppure implementare una soluzione diversa ( flash, iframe virtuale) come controllo dedicato
  • 50. Dijit.Dialog Abilitare Dijit.Dialog per avere questa feature è utile, ma attenzione in quanto nelle Xpages sussiste un problema di funzionamento. Il problema è causato dell’XSP ( la libreria JS che intercetta le azioni) non riesce ad individurare la FORM corretta. E’ necessario quindi adottare un work-around.
  • 51. Workaround Dijit.Dialog Per il corretto funzionamento è necessario creare sotto un DIV ed un pannello il contenuto della finestra di Dialogo ( o href). <div id=&quot;picklistDialog&quot; style=&quot;display:none&quot;> < xp:panel id=&quot;picklistDialogPanel&quot;> .... </xp:panel> <div> Va aggiunto un codice prima che venga caricata la pagina sfruttando la dojo.addonload() che è in grado di spostare l’elemento ID del layer sotto il body function dialog_create(id) { var dialogWidget = dijit.byId(id); if( dialogWidget ) dialogWidget.destroyRecursive(true); dialogWidget = new dijit.Dialog( { }, dojo.byId(id)); var dialog = dojo.byId(id); dialog.parentNode.removeChild(dialog); var form = document.forms[0]; form.appendChild(dialog); dialogWidget.startup(); } N.B. info presa da qui post http://www.xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/How_to_create_a_picklist_style_dialog
  • 52. Diji.Dialog Componente Custom: http://xpagesblog.com/xpages-blog/2010/4/10/xpages-compatible-dojo-dialog-reusable-component.html Componente Esteso: da usare con la 8.5.2 http://www.openntf.org/internal/home.nsf/release.xsp?documentId=84246385CFA2554086257789001D352A&action=openDocument
  • 53. Multilanguage come fare –sol 1? D: Vorrei realizzare la mia applicazione Xpages in modalità multi-lingua come posso fare? R: Utilizzando le localization options
  • 54. Multilanguage come fare –sol 1? Una volta aggiunti i linguaggi supportati nelle proprietà del database della sezione Xpages seleziona dal DDE&quot;Project&quot; menu, selziona Clean e poi &quot;Clean all projects&quot; .Nella finestra di dialogo click OK. Questo creerà un file di proprietà per ogni Xpages ed ogni custom control del database
  • 55. Multilanguage come fare –sol 1? Tasto DX ed esporta file ..che potranno essere esportati e reimportati N.B. info presa da qui post http://www-10.lotus.com/ldd/ddwiki.nsf/dx/UsingLocalizationOptions.htm
  • 56. Multilanguage come fare – soluz 2? D: Vorrei realizzare la mia applicazione Xpages in modalità multi-lingua come posso fare? R: Utilizzando le variabili CGI possiamo intercettare la lingua del browser e servire il contenuto corretto alle nostre label/controlli Questa metodologia è stata adottata nel nostro progetto catalogo delle soluzioni ( supporto in lingua inglese/italiano). In modalità semplice ho creato una variabile di sessione contenente il codice lingua del browser utilizzato ed in ogni controllo ho applicato una condizione
  • 57. Libreria CGI delle variabili ( presa dal Discusssion Template 8.5.1)
  • 58. Funzione Inizializzazione
  • 59. Inserita nelle resource delle Xpages
  • 60. Metodo di Applicazione multilanguage
  • 61. Grafici e Xpage dojo chart Utilizzando il componente di Dojo per generare Chart ci viene fornita la possibilità di creare un un grafico da inserire nella propria applicazione ai fini reportistici N.B. live dei chart dojo a questo URL : http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/theme_preview.html
  • 62. Capire Dojo Chart – cosa serve?
    • È necessario il modulo Dojo: dojox.charting.widget.Chart2D
    • Un tema di colori e combinazioni
    • Il tipo di Chart
    • Una serie di Valori
    • Metodo con il quale possono essere letti i valori ( tramite DojoStore oppure tramite JSON)
    Ulteriori informazioni a questo link : http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Dojox_Charting_for_XPages
  • 63. Capire Dojo Chart – passo 1 Aggiungere il modulo Dojo dojox.charting.widget.Chart2D e mettere dojoParseOnLoad and dojoTheme a true
  • 64. Scegliere un Tema E’ possibile scegliere un Tema a scelta forniti da Dojo oppure crearne uno nuovo in modalità programmatica Quelli di Dojo sono presenti a questo URL: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/theme_preview.html l’ultima release (attualmente la 1.5) N.B. Fate attenzione che Dojo nella 8.5.2 è la release 1.4.3 mentre online trovate sempre l’ultima release di Dojo
  • 65. Vista di appoggio …
  • 66. Generare la serie di valori (es. PieChart) Nel caso di un grafico Pie ( a Torta) la serie di valori (formato JSON) dovrà essere così composta: var series1=[ {y: 357, text: “DDAY2007&quot;,legend: “Dominopoint Day 2007&quot;, tooltip: “evento 2007&quot;}, {y: 521, text: “DDAY2008”,legend: “Dominopoint Day 2008&quot;, tooltip: “evento 2008 {y: 571, text: “DDAY2009”,legend: “Dominopoint Day 2009&quot;, tooltip: “evento 2009&quot;}, ]; Mi creo un ComputedText (non visibile) che legge e crea il JSON prendendo i valori da una vista: var viewNav:NotesViewNavigator = view1.createViewNav(); var viewEnt:NotesViewEntry = viewNav.getFirst(); var output:string = &quot;&quot;; while (viewEnt != null) { output += &quot;{y: &quot; + viewEnt.getColumnValues()[1] + &quot;, text: &quot;&quot; + viewEnt.getColumnValues()[0] + &quot;&quot;,legend: &quot;&quot; + viewEnt.getColumnValues()[2] + &quot;&quot;, tooltip: &quot;&quot; + viewEnt.getColumnValues()[3] + &quot; (&quot; + viewEnt.getColumnValues()[1] + &quot;)&quot;},&quot;; viewEnt = viewNav.getNext(viewEnt); } return output.substr(0, output.length - 1)
  • 67. Generare il Codice renderizzato Mi creo un ComputedText con content-type HTML: Mi creo un ComputedText (stavolta visibile) con content-type HTML che genera il codice SCRIPT JS Client sfruttando la possibilà di leggere i valori di un componente tramite la getComponent var result = &quot;<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>&quot;; result += &quot;var series1 = [&quot;; result += getComponent (&quot;seriesA&quot;). getValue () + &quot;];&quot;; return result; }]]>
  • 68. Creare un container per il Pie-Char <xp:panel id=&quot;simplechart&quot; style=&quot;width: 450px; height: 450px;&quot;> </xp:panel> Creo nella Xpages un pannello nel quale verrà inserito l’output del grafico associando l’ID
  • 69. Codice di rendering makeCharts = function(){ var chart1 = new dojox.charting.Chart2D(&quot;#{id:simplechart}&quot;); chart1.setTheme(dojox.charting.themes.PlotKit.blue); chart1.addPlot(&quot;default&quot;, {type: &quot;Pie&quot;, radius: 150, fontColor: &quot;rgb(0,0,255)&quot;, labels: true}); chart1.addSeries(&quot;Series 1&quot;, series1); var anim_a = new dojox.charting.action2d.Magnify(chart1, &quot;default&quot;, {scale: 1.2, shift: 10}); var anim_d = new dojox.charting.action2d.Highlight(chart1, &quot;default&quot;, {highlight: &quot;#000000&quot;}); var anim_e = new dojox.charting.action2d.Tooltip(chart1, &quot;default&quot;); chart1.render(); }; XSP.addOnLoad(makeCharts); Inserisco uno script-block control nel quale scrivo il seguente codice : N.B. la guida è stata tratta da questo URL: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Dojox_Charting_for_XPages
  • 70. Output generato
  • 71. Documentazione online
    • Blog ben fatto con tanti suggerimenti( http://xpagesblog.com/ )
    • Wiki ufficiale sul Designer ( http://www-10.lotus.com/ldd/ddwiki.nsf )
    • Uno di OpenNTF ( http://www-10.lotus.com/ldd/heidloffblog.nsf/ )
    • Blogger ( http://dominoextnd.blogspot.com/ )
    • Blogger ( http://www.youatnotes.de/xpages )
    • PlanetLotus ( http://www.planetlotus.org )
    • RedBook ( http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Master_Table_of_Contents_for_Building_Domino_Web_Applications_using_Domino_8.5.1 )
    • molto altro lo troverete utilizzando Google ( c’è tanta documentazione)
  • 72. Domande?
  • 73. Grazie a tutti per l’attenzione
    • I miei riferimenti:
    • Daniele Grillo
    • Matrix Computers
    • [email_address]
    • Mobile: 392.29.45.549
    Leave this slide as is