XpagesXpages

Velocizzare il porting delle tue applicazioni Velocizzare il porting delle tue applicazioni Notes su WebNotes su Web

Daniele GrilloDaniele Grillo

• Consulente Notes/Domino dalla R4.6/R5 Consulente Notes/Domino dalla R4.6/R5 orientato allo sviluppo applicativo Web 2.0orientato allo sviluppo applicativo Web 2.0

• 12 anni di esperienza12 anni di esperienza• Fondatore community Dominopoint nel 2004Fondatore community Dominopoint nel 2004• E-mail: daniele.grillo@gmail.comE-mail: daniele.grillo@gmail.com• Telefono: +39 392.29.45.549Telefono: +39 392.29.45.549

[agenda][agenda]1.1. Cosa sono le XpagesCosa sono le Xpages2.2. Modello MVCModello MVC3.3. Componenti BaseComponenti Base4.4. Custom ControlsCustom Controls5.5. Variabili di scopeVariabili di scope6.6. SSJS un nuovo SSJS un nuovo

linguaggio?linguaggio?

7.7. ValidazioneValidazione8.8. DebugDebug9.9. XPiNCXPiNC10.10.Novità 8.5.2Novità 8.5.211.11.Estensions LibraryEstensions Library12.12.Novità 8.5.3Novità 8.5.313.13.DocumentazioneDocumentazione

Cosa sono le XpagesCosa sono le Xpages• Un componente Aggiuntivo DesignerUn componente Aggiuntivo Designer• Un Framework di sviluppo basato su Un Framework di sviluppo basato su

componenticomponenti• Tecnologia JSF (Java Server Faces)Tecnologia JSF (Java Server Faces)• Sfruttano il backend DominoSfruttano il backend Domino• Una soluzione RAD di sviluppo WebUna soluzione RAD di sviluppo Web• Estensione HTTP DominoEstensione HTTP Domino• Nascono nella 8.5 (usale >=R8.5.1fp3)Nascono nella 8.5 (usale >=R8.5.1fp3)

Modello MVCModello MVCE’ un concetto di programmazioneE’ un concetto di programmazioneSignifica Model View ControlSignifica Model View ControlModel = Model = Dati ( Form di Notes)Dati ( Form di Notes)View = View = Come vengono rappresentati (Xpages)Come vengono rappresentati (Xpages)Control= Control= Logica applicativa ( SSJS, JS)Logica applicativa ( SSJS, JS)

Separa il disegno applicativo dai dati e dalla Separa il disegno applicativo dai dati e dalla logica di programmazionelogica di programmazione

Componenti BaseComponenti Base

• CoreCore• ContainerContainer• CustomCustom

Componenti CoreComponenti CoreNome Componente Binding Domino

EditBox Text/Number Field

Date Time Picker Date Time Field

Label Computed Text

RichText RichText Field

File Upload RichText Filed

File Download RichText Field

ListBox ListBox Field

CheckBox / CheckBox Group CheckBox Field

RadioButton / RadioBox Group RadioButton Field

Button Button

Image RichText Field

Componenti ContainerComponenti ContainerNome Componente Binding Domino

View Vista di Domino

Repeater Vista o Collezione di dati (documenti, array)

Panel NotesDocument

Table Tabella

Tabbed Panel Tabella a Tab

Section Sezione

Componente ViewComponente ViewHa le funzioni 1:1 vista Domino ( checkbox, ordinamenti, valori)Ha le funzioni 1:1 vista Domino ( checkbox, ordinamenti, valori)

• E’ personalizzabile E’ personalizzabile • Ha diverse proprietà per effettuare ricerche, filterbyCategoryHa diverse proprietà per effettuare ricerche, filterbyCategory• Ha un pager di navigazione personalizzabileHa un pager di navigazione personalizzabile• Valore colonne programmabili dinamicamenteValore colonne programmabili dinamicamente

n.b. n.b. ora e’ anche possibile inserire @dblookup e immagini sulle ora e’ anche possibile inserire @dblookup e immagini sulle

colonne dinamicamentecolonne dinamicamente!!

Componente ViewComponente View

Componente View – proprietà colonnaComponente View – proprietà colonna

• Cosa visualizzare (Colonna statica o Cosa visualizzare (Colonna statica o codice SSJS dinamico? Esempio: codice SSJS dinamico? Esempio: query JDBC su MSSQL o query JDBC su MSSQL o @Dblookup verso altra vista etc…)@Dblookup verso altra vista etc…)

• Come visualizzare ? (HTML, Testo)Come visualizzare ? (HTML, Testo)• Effettuare un Href su una specifica Effettuare un Href su una specifica

colonnacolonna• Abilitare CheckBoxAbilitare CheckBox• IconaIcona• StilizzarlaStilizzarla• Etc….Etc….

Componente View – Proprietà avanzateComponente View – Proprietà avanzate

• CategorybyFilteCategorybyFilter= r= EmbeddedView single EmbeddedView single categorycategory

• queryOpenView = queryOpenView = WebQueryOpen prima di WebQueryOpen prima di servire la vistaservire la vista

• postOpenView = postOpenView = dopo dopo che la vista è stata servitache la vista è stata servita

• SearchSearch = effettua una = effettua una FTSEARCH sulla vistaFTSEARCH sulla vista

…….etc.etc….etc.etc…

Componente View – PagerComponente View – PagerIl navigatore della vista (Avanti, Indietro..etc) che è possibile Scegliere/personalizzare e sul quale è possiible attivare il Partial Refresh (Ajax Mode) per non ricaricare tutta la pagina.

Componente RepeaterComponente Repeater

Un componente (fantastico! N.d.r) che può scorrere i seguenti Un componente (fantastico! N.d.r) che può scorrere i seguenti oggetti ( come un ciclo FOR) oggetti ( come un ciclo FOR) • VisteViste• Collezioni (Documents, Entry, o Altro)Collezioni (Documents, Entry, o Altro)• Array (es. La risultante di una @dbcolumn)Array (es. La risultante di una @dbcolumn)• Vettore (un elemento a dimensione dinamica )Vettore (un elemento a dimensione dinamica )

n.b. n.b. La variabile del repeater è case sensitive, e dobbiamo stare La variabile del repeater è case sensitive, e dobbiamo stare attenti a generare il codice HTML corretto in funzione del attenti a generare il codice HTML corretto in funzione del repeatrepeat

Componente RepeaterComponente Repeater

Se applicato ad una vista permette di essere Se applicato ad una vista permette di essere completamente svincolato dal layout tabellare completamente svincolato dal layout tabellare della stessa e di servire l’output che della stessa e di servire l’output che Desiderate.Desiderate.

Output più controllabile e meno rigido!Output più controllabile e meno rigido!

Controllo repeater - esempioControllo repeater - esempio

Il cliente (una PA) necessita di un report Il cliente (una PA) necessita di un report semplice che permetta di tenere sotto controllo semplice che permetta di tenere sotto controllo le spese degli Istituti controllati.le spese degli Istituti controllati.

Creando una vista Notes classica questo è il Creando una vista Notes classica questo è il Risultato…Risultato…

Controllo repeater – Vista NotesControllo repeater – Vista Notes

Controllo repeater…XpagesControllo repeater…Xpages

Il cliente desidera un report accessibile da Web Il cliente desidera un report accessibile da Web più semplice e mi fornisce un ipotetico layout in più semplice e mi fornisce un ipotetico layout in photoshop…. photoshop….

……realizzo la sua richiesta con 4 controlli realizzo la sua richiesta con 4 controlli repeater annidati all’interno di una Xpages.repeater annidati all’interno di una Xpages.

Controllo repeater – ReportControllo repeater – Report

Custom controlsCustom controls

Controlli personalizzati, fanno cose, non deviControlli personalizzati, fanno cose, non devisapere come, perchè forniscono una interfaccia sapere come, perchè forniscono una interfaccia (i parametri) con cui determini come si (i parametri) con cui determini come si comportano.comportano.

Custom Controls pronti all’usoCustom Controls pronti all’uso

Su OpenNTF.org ce ne sono diversi a disposizioneSu OpenNTF.org ce ne sono diversi a disposizione

• Xpages Async Multi File UploaderXpages Async Multi File Uploader• Xpages ScrollpaneXpages Scrollpane• View PicklistView Picklist• xPropertiesxProperties• Google Maps…etc…Google Maps…etc…

http://xpages.info/XPagesHome.nsf/Contest.xsphttp://xpages.info/XPagesHome.nsf/Contest.xsp

Esempio: Custom control – ToolTipEsempio: Custom control – ToolTipNel progetto Catalogo di Dominopoint ho realizzato un Nel progetto Catalogo di Dominopoint ho realizzato un custom controls che visualizza un Dojo Tooltip sul custom controls che visualizza un Dojo Tooltip sul componente Xpages che vuoi.componente Xpages che vuoi.

Custom ToolTip Dojo Custom ToolTip Dojo

Il componente riceve Il componente riceve in Inputin Input::

• il nome del componente Xpages sul quale il nome del componente Xpages sul quale visualizzare TootTipvisualizzare TootTip

• Stringa/Messaggio da visualizzareStringa/Messaggio da visualizzare

Il componente implementaIl componente implementa::• tooltip Dojotooltip Dojo

Custom ToolTip Dojo – ParametriCustom ToolTip Dojo – Parametri

Definizione dei parametri in InputDefinizione dei parametri in Input

Custom ToolTip Dojo – Risorsa DojoCustom ToolTip Dojo – Risorsa Dojo

Modulo Dojo nelle Risorse del Custom Modulo Dojo nelle Risorse del Custom Control per agganciare il widget ToolTip…Control per agganciare il widget ToolTip…

Custom ToolTip Dojo – Source Custom ToolTip Dojo – Source CodeCode

Passaggio di parametri al custom control:Passaggio di parametri al custom control:compositeData.proprietycompositeData.propriety

Custom ToolTip Dojo – Parametri da XpagesCustom ToolTip Dojo – Parametri da Xpages

Custom Control – Design DefinitionCustom Control – Design DefinitionDefinisce il disegno sulla GUI del designer del Custom Definisce il disegno sulla GUI del designer del Custom ControlControl

Extensions LibraryExtensions Library• Scaricabili OpenNTFScaricabili OpenNTF• OneUi themeOneUi theme• Controlli MobileControlli Mobile• Gestione DialogGestione Dialog• RESTREST• Widget Dojo Form Widget Dojo Form • Inotes controlliInotes controlli• Widget Dojo LayoutWidget Dojo Layout• Name Picker …etc….Name Picker …etc….

http://extlib.openntf.org/

Variabili di ScopeVariabili di Scope

Variabili contenitori suddivise in:Variabili contenitori suddivise in:

Application: Application: durano per tutta l’applicazionedurano per tutta l’applicazioneSession: Session: durano per la sessione correntedurano per la sessione correnteView: View: durano per la vista corrente ( pagina corrente)durano per la vista corrente ( pagina corrente)Request: Request: durano per l’ultima chiamata verso il serverdurano per l’ultima chiamata verso il server

Esempio d’uso Varibili ScopeEsempio d’uso Varibili Scope

D: D: Voglio fare in modo che selezionando un valore da Voglio fare in modo che selezionando un valore da un menù a Tendina...dinamicamente venga un menù a Tendina...dinamicamente venga ricalcolata la vista sottostante senza ricaricare la ricalcolata la vista sottostante senza ricaricare la pagina come posso fare?pagina come posso fare?

R: R: Utilizzando un core Utilizzando un core componentcomponent ComboBoxComboBox che che binda alle variabili di scope e le proprietà avanzate binda alle variabili di scope e le proprietà avanzate del del container component Viewcontainer component View

Esempio d’uso Varibili ScopeEsempio d’uso Varibili Scope

Combo Box che binda ad una Combo Box che binda ad una ViewScope.FilterViewViewScope.FilterView

Esempio d’uso Variabili ScopeEsempio d’uso Variabili Scope

OnChange fa un refresh Ajax della vista sottostanteOnChange fa un refresh Ajax della vista sottostante

Esempio d’uso Variabili ScopeEsempio d’uso Variabili Scope

Esempio Variabili di ScopeEsempio Variabili di ScopeNell’esempio appena citato viene fatta Nell’esempio appena citato viene fatta effettuata una effettuata una FtsearchFtsearch parametrica utilizzando parametrica utilizzando la proprietà della vista denominata la proprietà della vista denominata Search.Search.

Si potrebbe anche creare una vista categorizzata Si potrebbe anche creare una vista categorizzata per Business Partner ed utilizzare la proprietà per Business Partner ed utilizzare la proprietà della Vista denominata della Vista denominata CategoryFilter . CategoryFilter . ((Il funzionamento è identico alla single category di una Il funzionamento è identico alla single category di una

embedded view in una Formembedded view in una Form))

SSJS un nuovo linguaggio?SSJS un nuovo linguaggio?

Non stravolge Non stravolge il modo di programmare Lotus, in quanto il modo di programmare Lotus, in quanto sono state messe a disposizione tutte le classi Domino sono state messe a disposizione tutte le classi Domino (identiche a quelle LotusScript) e oltre il 90% delle (identiche a quelle LotusScript) e oltre il 90% delle @formulas con la stessa nomenclatura di metodi e @formulas con la stessa nomenclatura di metodi e proprietà!proprietà!

Inoltre JSS da la possibilità di utilizzare estensioni Java per Inoltre JSS da la possibilità di utilizzare estensioni Java per invocare librerie esterne (Itext, JDBC per relazionali etc…)invocare librerie esterne (Itext, JDBC per relazionali etc…)

((

SSJS un nuovo linguaggio?SSJS un nuovo linguaggio?

• E’ il linguaggio utilizzato lato server-side dalla E’ il linguaggio utilizzato lato server-side dalla Xpages Xpages

• Racchiuge oltre 90% delle formulasRacchiuge oltre 90% delle formulas• SempliceSemplice• Javascript LikeJavascript Like• PerformantePerformante

ValidazioneValidazione• componente nativo legato alla componente nativo legato alla

validazione della Xpagesvalidazione della Xpages• Flag semplificiato per attivazione Flag semplificiato per attivazione

validazionevalidazione• Controllo Dinamico Controllo Dinamico • Gestione del messaggio di erroreGestione del messaggio di errore

ValidazioneValidazioneRequired field Required field per rendere obbligatorio un controlloper rendere obbligatorio un controlloRequired Field error Message Required Field error Message rappresenta il messaggio di errorerappresenta il messaggio di errore

ValidazioneValidazioneShow error message for Show error message for per visualizzare il messagio in una per visualizzare il messagio in una

specifica posizione della paginaspecifica posizione della pagina

ValidazioneValidazione

Per alcuni componenti (es: ComboBox) il Validator non Per alcuni componenti (es: ComboBox) il Validator non è visibile nella GUI e va gestito dalle sezione è visibile nella GUI e va gestito dalle sezione All PropriertiesAll Proprierties

Debuggare Xpages - serverDebuggare Xpages - serverAbilitare il flag: Display default error PageAbilitare il flag: Display default error Page

Debugger – server sideDebugger – server side……Informa sull’oggetto e codice SSJS che ha generato errore…Informa sull’oggetto e codice SSJS che ha generato errore…

Debugger – client sideDebugger – client sideUtilizzare Firefox ed estensione Firebug!Utilizzare Firefox ed estensione Firebug!

Xpages – Debug Custom ControlXpages – Debug Custom ControlPrelevabile da OpenNTF.org gratuitamente, e permette di controllare le variabili di scope, la versione del browser…Attualmente alla release 2.0

Strumento OutlineStrumento OutlineLo strumento Outline è un salva-tempo nel nostro lavoro di manutenzione ed Lo strumento Outline è un salva-tempo nel nostro lavoro di manutenzione ed inserimento di codice applicativo, poiché ci permette di capire la struttura e inserimento di codice applicativo, poiché ci permette di capire la struttura e la ramificazione degli elementi presenti nella pagina che stiamo creandola ramificazione degli elementi presenti nella pagina che stiamo creando

XPiNC (Xpages Inside Notes Client)XPiNC (Xpages Inside Notes Client)

• Lavori una sola volta e hai l’interfaccia ClientLavori una sola volta e hai l’interfaccia Client• Supporta Le Repliche (OFF-Line)Supporta Le Repliche (OFF-Line)• Dalla 8.5.2 è embeddato XUL Runner che Dalla 8.5.2 è embeddato XUL Runner che corrisponde a Firefox 3.6corrisponde a Firefox 3.6

Novità della 8.5.2Novità della 8.5.2• Drag&Drop controlli nel source code Drag&Drop controlli nel source code • Oggetti Radio/CheckBox Group miglioratiOggetti Radio/CheckBox Group migliorati• ARIA SupportARIA Support• Agents with In-Memory documentsAgents with In-Memory documents• Java Agents in XPiNCJava Agents in XPiNC• Ajax ( Partial refresh timeout + prevent filtering)Ajax ( Partial refresh timeout + prevent filtering)• CkEditorCkEditor• TagName ( computed text)TagName ( computed text)• Dojo 1.4.3Dojo 1.4.3• Type and Attribute DojoType and Attribute Dojo• onClientLoadonClientLoad• SessionAsSigner eSessionAsSigner e sessionAsSignerWithFullAccess• Extensions API Extensions API • HeadTagHeadTag• HTML5 ( Cache-Manifest , Base Resource)HTML5 ( Cache-Manifest , Base Resource)• Public Access FeaturePublic Access Feature

• OneUI v2OneUI v2• Pager ( last page feature)Pager ( last page feature)• SCXD ( Single copy Xpages Design)SCXD ( Single copy Xpages Design)• View ( startKey,MultiCategoria, LastPage)View ( startKey,MultiCategoria, LastPage)• XPiNC (Agent ,NewTab, Replica, OpenDesignerXPiNC (Agent ,NewTab, Replica, OpenDesigner

windows.close)windows.close)• Performance migliorate SSJSPerformance migliorate SSJS

Novità della 8.5.3 CD5Novità della 8.5.3 CD5• Dojo 1.5Dojo 1.5• Aggregator CSS/JS [FANTASTICO! N.d.r]Aggregator CSS/JS [FANTASTICO! N.d.r]• Source Control Enablement (SVN)Source Control Enablement (SVN)• Nuovo Elemento di Design JavaNuovo Elemento di Design Java• Editor JS nuovo (release 3.4.2 WTP)Editor JS nuovo (release 3.4.2 WTP)• Ordinamento Full Text View XpagesOrdinamento Full Text View Xpages• Opzione di PreloadOpzione di Preload

N.B. Soggetto a modifiche da parte di IBM in fase di rilascio della GOLD Release

Documentazione onlineDocumentazione online• Blog ben fatto con tanti suggerimenti(http://xpagesblog.com/)Blog ben fatto con tanti suggerimenti(http://xpagesblog.com/)• Wiki ufficiale sul Designer (http://www-10.lotus.com/ldd/ddwiki.nsf)Wiki ufficiale sul Designer (http://www-10.lotus.com/ldd/ddwiki.nsf)• Uno di OpenNTF (http://www-10.lotus.com/ldd/heidloffblog.nsf/)Uno di OpenNTF (http://www-10.lotus.com/ldd/heidloffblog.nsf/)• Blogger (http://dominoextnd.blogspot.com/)Blogger (http://dominoextnd.blogspot.com/)• Blogger (http://www.youatnotes.de/xpages)Blogger (http://www.youatnotes.de/xpages)• PlanetLotus ( http://www.planetlotus.org)PlanetLotus ( http://www.planetlotus.org)• RedBook RedBook

(http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Master_Table_of_Contents(http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Master_Table_of_Contents_for_Building_Domino_Web_Applications_using_Domino_8.5.1)_for_Building_Domino_Web_Applications_using_Domino_8.5.1)

• molto altro lo troverete utilizzando Google ( c’è tanta documentazione)molto altro lo troverete utilizzando Google ( c’è tanta documentazione)

Domande?Domande?

Grazie agli sponsor per aver reso Grazie agli sponsor per aver reso possibile il DDive 2011!possibile il DDive 2011!

Main SponsorMain Sponsor

Premium SponsorPremium Sponsor

Prime SponsorPrime Sponsor