My presentation at Ddive evento at Folgaria

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

4. Dove eravamo rimasti?… Dday 2009

12. Novita’ della Release 8.5.2

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.

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

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

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

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: amp;quot;&quot; + viewEnt.getColumnValues()[0] + &quot;amp;quot;,legend: amp;quot;&quot; + viewEnt.getColumnValues()[2] + &quot;amp;quot;, tooltip: amp;quot;&quot; + viewEnt.getColumnValues()[3] + &quot; (&quot; + viewEnt.getColumnValues()[1] + &quot;)amp;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

72. Domande?