Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ddive Xpage852

582 views

Published on

My presentation at Ddive evento at Folgaria

  • Be the first to comment

  • Be the first to like this

Ddive Xpage852

  1. 1. Xpages … l’evoluzione continua Domino Specialist & Developer Insert your presentation title here Insert your name, title and company here Insert your picture
  2. 2. Leave this slide as is
  3. 3. Agenda <ul><li>Dove eravamo rimasti… </li></ul><ul><li>Novità 8.5.2 </li></ul><ul><li>Digit.Dialog </li></ul><ul><li>Multi-Language </li></ul><ul><li>Partial Refresh </li></ul><ul><li>FileUpload attenzione al partial refresh </li></ul><ul><li>SSJS e JS come farle interagire </li></ul><ul><li>Grafici </li></ul>
  4. 4. Dove eravamo rimasti?… Dday 2009
  5. 5. Dove eravamo rimasti?…Dday 2009 <ul><li>Cosa sono le Xpages </li></ul><ul><li>Modello MVC </li></ul><ul><li>Componenti Fondametali (Core, Container,Custom) </li></ul><ul><li>Variabili Scope (Session,Application, View, Request) </li></ul><ul><li>Linguaggio di sviluppo SSJS </li></ul><ul><li>Usale dalla R8.5.1 </li></ul><ul><li>XPiNC (XPages inside Notes Client) </li></ul>Ulteriori informazioni a questo link : http://www.dominopoint.it/Dominopoint/Dominopoint_blog.nsf/dx/slide-xpages-cosa-ci-sarà-in-questa-nuova-tecnologia
  6. 6. Cosa sono le Xpages <ul><li>Un componente Aggiuntivo Designer </li></ul><ul><li>Un Framework di sviluppo basato su componenti </li></ul><ul><li>Tecnologia JSF </li></ul><ul><li>Sfruttano il backend Domino </li></ul><ul><li>Una soluzione RAD di sviluppo Web </li></ul><ul><li>Estensione HTTP Domino </li></ul><ul><li>Nascono nella 8.5 </li></ul>
  7. 7. Componenti Base <ul><li>Core </li></ul><ul><li>Container </li></ul><ul><li>Custom </li></ul>
  8. 8. Variabili Scope <ul><li>Variabili contenitori suddivise in: </li></ul><ul><li>Application : durano per tutta l’applicazione </li></ul><ul><li>Session: durano per la sessione corrente </li></ul><ul><li>View: durano per la vista corrente ( pagina corrente) </li></ul><ul><li>Request: durano per l’ultima chiamata verso il server </li></ul>Ulteriori informazioni a questo link : http://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-scoped-variables.htm
  9. 9. Modello MVC <ul><li>E’ un concetto di programmazione </li></ul><ul><li>Significa Model View Control </li></ul><ul><li>Model = Dati ( Form di Notes) </li></ul><ul><li>View = Come vengono rappresentati (Xpages) </li></ul><ul><li>Control= Logica applicativa ( SSJS, JS) </li></ul><ul><li>Separa il disegno applicativo dai dati e dalla </li></ul><ul><li>logica di programmazione </li></ul>
  10. 10. SSJS (server side javascript) <ul><li>E’ il linguaggio utilizzato lato server-side dalla Xpages </li></ul><ul><li>Racchiude oltre 90% delle formulas </li></ul><ul><li>Semplice </li></ul><ul><li>Javascript Like </li></ul><ul><li>Performante </li></ul>
  11. 11. XPiNC (XPages inside Notes Client) <ul><li>Permette di eseguire le Xpages nel client </li></ul><ul><li>Puoi scegliere nelle opzioni del database </li></ul><ul><li>Dalla 8.5.1 </li></ul><ul><li>Sviluppi 1 volta per i due mondi (client e web) </li></ul><ul><li>8.5.1 = Firefox 2.x </li></ul><ul><li>8.5.2 = Firefox 3.X </li></ul><ul><li>Supporta la replica e SSO utente </li></ul>
  12. 12. Novita’ della Release 8.5.2
  13. 13. Novita’ 8.5.2… <ul><li>Drag&Drop controlli nel source code </li></ul><ul><li>Oggetti Radio/CheckBox Group migliorati </li></ul><ul><li>ARIA Support </li></ul><ul><li>Agents with In-Memory documents </li></ul><ul><li>Java Agents in XPiNC </li></ul><ul><li>Ajax ( Partial refresh timeout + prevent filtering) </li></ul><ul><li>CkEditor </li></ul><ul><li>TagName ( computed text) </li></ul><ul><li>Dojo 1.4.3 </li></ul><ul><li>Type and Attribute Dojo </li></ul><ul><li>onClientLoad </li></ul><ul><li>SessionAsSigner e sessionAsSignerWithFullAccess </li></ul><ul><li>Extensions API </li></ul><ul><li>HeadTag </li></ul><ul><li>HTML5 ( Cache-Manifest , Base Resource) </li></ul><ul><li>Public Access Feature </li></ul><ul><li>OneUI v2 </li></ul><ul><li>Pager ( last page feature) </li></ul><ul><li>SCXD ( Single copy Xpages Design) </li></ul><ul><li>View ( startKey,MultiCategoria, LastPage) </li></ul><ul><li>XPiNC (Agent ,NewTab, Replica, OpenDesigner windows.close) </li></ul><ul><li>Performance migliorate SSJS </li></ul>
  14. 14. Drag&Drop Source Code … Possibilità di trascinare i controlli direttamente nel codice sorgente…
  15. 15. Radio/CheckBoxGroup aggiornati … I radio/CheckBox Group hanno un UI nel design tab e proprieta’ definite
  16. 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. 17. CkEditor sostituito al DojoRichText … ovviamente accessibili dal client Notes e modificabili….
  18. 18. Cosa notiamo? Possibilita’ dal client di aprire il documento in formato Xpages per mantenere la corrispondenza 1:1 web client (XpiNC)…
  19. 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. 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. 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. 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. 23. Dojo attributi nativo
  24. 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. 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. 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. 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. 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. 29. SessionAsSigner e sessionAsSignerWithFullAccess <ul><li>Due nuovi Global Objects for Server Side JavaScript (SSJS): </li></ul><ul><li>sessionAsSigner - Le credenziali di accesso sono referenziate al firmatario del Design dell'Xpages. </li></ul><ul><li>La session è controllata dall'ACL dell'applicazione e dalla TAB di sicurezza del documento server della Domino Directory del server. </li></ul><ul><li>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) . </li></ul><ul><li>Il firmatario deve avere quindi diritti sufficienti oppure la variabile non verrà inizializzata  </li></ul>
  30. 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. 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. 32. HTML 5 - Manifest
  33. 33. HTML5 – Cache Manifest
  34. 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
  35. 37. XpiNC <ul><li>Eseguire agent locali </li></ul><ul><li>Nuovo Tab per gestire le finestre di apertura </li></ul><ul><li>Opzione di apertura in Designer </li></ul><ul><li>Opzione di replica </li></ul><ul><li>Supporto windows.close() funzione </li></ul>
  36. 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
  37. 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 &quot;per database&quot;.
  38. 40. Anteprima HTML passante e Editor Script Eclipse
  39. 41. Anteprima HTML passante
  40. 42. Script Editor in Eclipse Oltre agli agenti è stata convertita anche la Database Script Library , Script Library …cosa manca?
  41. 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)
  42. 44. Tips & tricks…
  43. 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?
  44. 46. Come accedere da JS ai componenti? Utilizzare la sintassi #{id:NOMECOMPONENTE} Esempio: var fileContainer=dojo.byId(&quot;#{id:fileContainer}&quot;); if(null != fileContainer){ var displayStyle = fileContainer.style.display; if (displayStyle == &quot;none&quot;){ fileContainer.style.display = &quot;inline&quot;; } else { fileContainer.style.display = &quot;none&quot;; } }
  45. 47. Come accedere da SSJS ai componenti? Per accedere ai componenti lato server-side è possibile utilizzare due funzioni: getComponent(&quot;foo&quot;), and getClientId(&quot;foo&quot;). 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&quot;)}').
  46. 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
  47. 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
  48. 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.
  49. 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
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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
  55. 57. Libreria CGI delle variabili ( presa dal Discusssion Template 8.5.1)
  56. 58. Funzione Inizializzazione
  57. 59. Inserita nelle resource delle Xpages
  58. 60. Metodo di Applicazione multilanguage
  59. 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
  60. 62. Capire Dojo Chart – cosa serve? <ul><li>È necessario il modulo Dojo: dojox.charting.widget.Chart2D </li></ul><ul><li>Un tema di colori e combinazioni </li></ul><ul><li>Il tipo di Chart </li></ul><ul><li>Una serie di Valori </li></ul><ul><li>Metodo con il quale possono essere letti i valori ( tramite DojoStore oppure tramite JSON) </li></ul>Ulteriori informazioni a questo link : http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Dojox_Charting_for_XPages
  61. 63. Capire Dojo Chart – passo 1 Aggiungere il modulo Dojo dojox.charting.widget.Chart2D e mettere dojoParseOnLoad and dojoTheme a true
  62. 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
  63. 65. Vista di appoggio …
  64. 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)
  65. 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; }]]>
  66. 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
  67. 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
  68. 70. Output generato
  69. 71. Documentazione online <ul><li>Blog ben fatto con tanti suggerimenti( http://xpagesblog.com/ ) </li></ul><ul><li>Wiki ufficiale sul Designer ( http://www-10.lotus.com/ldd/ddwiki.nsf ) </li></ul><ul><li>Uno di OpenNTF ( http://www-10.lotus.com/ldd/heidloffblog.nsf/ ) </li></ul><ul><li>Blogger ( http://dominoextnd.blogspot.com/ ) </li></ul><ul><li>Blogger ( http://www.youatnotes.de/xpages ) </li></ul><ul><li>PlanetLotus ( http://www.planetlotus.org ) </li></ul><ul><li>RedBook ( http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Master_Table_of_Contents_for_Building_Domino_Web_Applications_using_Domino_8.5.1 ) </li></ul><ul><li>molto altro lo troverete utilizzando Google ( c’è tanta documentazione) </li></ul>
  70. 72. Domande?
  71. 73. Grazie a tutti per l’attenzione <ul><li>I miei riferimenti: </li></ul><ul><li>Daniele Grillo </li></ul><ul><li>Matrix Computers </li></ul><ul><li>[email_address] </li></ul><ul><li>Mobile: 392.29.45.549 </li></ul>Leave this slide as is

×