0
Themes nelle XPages
Alla ricerca della bellezza di Stefano Mastella
Chi sono
Ingegnere, consulente informatico e
strategico, imprenditore e startupper
Sviluppo in Notes a partire dal 2000
Ai...
Agenda
Il software fa schifo: di bellezza e
usabilità
Xpages e bellezza
Temi: cosa sono e come li uso?
Temi: come li perso...
Il software fa schifo
La bellezza salverà in mondo
F. Dostoevskij
Che cos’è la bellezza?
Una convenzione, una moneta che
ha corso solo in un dat...
E nelle Xpages?
Cos’é un tema?
Elemento design introdotto con la v. 8.5
File XML che ha come root l’elemento theme
Definisce le regole per...
Temi server preinstallati
Webstandard (predefinito)
Notes
oneUI v2 (da versione >= 8.5.1)
ICS UI (già oneUI v3)
o oneui (b...
Temi standard e server
Location temi standard:
<%dominohome>/xsp/nsf/themes
CSS:
<%dominodata>/domino/java/xsp/themes
Aggi...
DEMO
Uso tipico
Inclusione standard di CSS e librerie
Forzatura di attributi di componenti
o uso di framework standard (Dojo, B...
Come funzionano
Sono come “Server Side CSS”
Sono applicati durante la fase di rendering
JSF
Le risorse sono “iniettate” ne...
Performance
Sono applicati durante la fase finale di vita della JSF
Sono cached
I componenti sono agganciati con id standa...
Limiti
A causa del late binding non tutto può
essere definito in un tema
Le SSJS incluse nel tema sono
utilizzabili solo n...
Estendere i temi
Si possono creare da zero
Sarebbe meglio estendere il tema webstandard
o creare XML
o
o creare un nuovo t...
Partiamo dal più semplice
Riferimento a CSS interno
<resource>
<content-type>text/css<content-
type>
<href>stylesheet.css<...
Settiamo i default
Control
<control override="false">
<name>viewRoot</name>
<property>
<name>pageTitle</name>
<value>#{dat...
view.setStyleClass(view.getStyleClass() + “ xspView tundra”);
Inclusione di risorse
<!-- Firefox specific -->
<resource rendered="#{javascript:context.getUserAgent().isFirefox()}">
<co...
Mobile
<resource
rendered="#{javascript:context.getUserAgent().getUserAgent().match("iPhon
e")}">
<content-type>text/css</...
OneUI v. 3
OneUI v. 3
http://infolib.lotus.com/resources/oneui/3.0/docPublic/index.htm
DEMO
Applicare altri framework CSS
DEMO
Concludendo
GRAZIGRAZI
Grazie agli sponsor per aver reso possibile i
Dominopoint Days 2013!
Main SponsorMain Sponsor
Vad sponsorVad sponsor
Plati...
Upcoming SlideShare
Loading in...5
×

Themes nelle XPages - Alla ricerca della bellezza #Dd13

186

Published on

My presentation at DominoPoint Days 13.
It is centered on how improve user interface and user experience in XPages using Themes, by simplifying the developer work.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
186
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Themes nelle XPages - Alla ricerca della bellezza #Dd13"

  1. 1. Themes nelle XPages Alla ricerca della bellezza di Stefano Mastella
  2. 2. Chi sono Ingegnere, consulente informatico e strategico, imprenditore e startupper Sviluppo in Notes a partire dal 2000 Aiuto le aziende a capire ed accettare i cambiamenti e le accompagno nel percorso Twitter.com/stemax73 Linkedin.com/in/stefanomastella
  3. 3. Agenda Il software fa schifo: di bellezza e usabilità Xpages e bellezza Temi: cosa sono e come li uso? Temi: come li personalizzo? Conclusione
  4. 4. Il software fa schifo
  5. 5. La bellezza salverà in mondo F. Dostoevskij Che cos’è la bellezza? Una convenzione, una moneta che ha corso solo in un dato tempo e un dato luogo H. Ibsen
  6. 6. E nelle Xpages?
  7. 7. Cos’é un tema? Elemento design introdotto con la v. 8.5 File XML che ha come root l’elemento theme Definisce le regole per la modifica runtime delle pagine Possono essere su server o specifici di un singolo NSF o Inclusione di risorse (JS/CSS) o Modifica attributi componenti
  8. 8. Temi server preinstallati Webstandard (predefinito) Notes oneUI v2 (da versione >= 8.5.1) ICS UI (già oneUI v3) o oneui (blue) o oneuiv2_green o oneuiv2_gold o oneuiv2_metal
  9. 9. Temi standard e server Location temi standard: <%dominohome>/xsp/nsf/themes CSS: <%dominodata>/domino/java/xsp/themes Aggiungete i vostri temi nelle stesse cartelle Provate a modificare i temi standard prima di scriverne uno voi
  10. 10. DEMO
  11. 11. Uso tipico Inclusione standard di CSS e librerie Forzatura di attributi di componenti o uso di framework standard (Dojo, Blueprint CSS, ecc.) o design personalizzato ma standard (CSS aziendali) o risorse specifiche per l’applicazione o style (es. font-family: helvetica; font-size: 14 pt;) o styleclass (es xspTableCell)
  12. 12. Come funzionano Sono come “Server Side CSS” Sono applicati durante la fase di rendering JSF Le risorse sono “iniettate” nell’albero dei componenti I componenti sono agganciati con id standard o custom
  13. 13. Performance Sono applicati durante la fase finale di vita della JSF Sono cached I componenti sono agganciati con id standard o custom + definisci in un tema meno lavoro deve essere fatto dal server in fase di rendering
  14. 14. Limiti A causa del late binding non tutto può essere definito in un tema Le SSJS incluse nel tema sono utilizzabili solo nella afterPageLoad I componenti “HTML passthru” non possono essere modificati
  15. 15. Estendere i temi Si possono creare da zero Sarebbe meglio estendere il tema webstandard o creare XML o o creare un nuovo tema nel designer che fornirà già un template o <theme extends=“webstandard” o si ha un tema di base o tutto funzionerà comunque nelle XPage
  16. 16. Partiamo dal più semplice Riferimento a CSS interno <resource> <content-type>text/css<content- type> <href>stylesheet.css</href> </resource>
  17. 17. Settiamo i default Control <control override="false"> <name>viewRoot</name> <property> <name>pageTitle</name> <value>#{database.title}</value> </property> <property> <name>dojoParseOnLoad</name> <value>#{true}</value> </property> <property mode="override"> <name>styleClass</name> <value>myNewStyleClass</value> </property> </control>
  18. 18. view.setStyleClass(view.getStyleClass() + “ xspView tundra”);
  19. 19. Inclusione di risorse <!-- Firefox specific --> <resource rendered="#{javascript:context.getUserAgent().isFirefox()}"> <content-type>text/css</content-type> <href>foxOnFire.css</href> </resource>
  20. 20. Mobile <resource rendered="#{javascript:context.getUserAgent().getUserAgent().match("iPhon e")}"> <content-type>text/css</content-type> <href>iPhone.css</href> </resource> var uAgent = context.getUserAgent().getUserAgent(); if (uAgent.match("iPhone") != null) { context.redirectToPage("/iPhone.xsp"); } CSS apposito nel tema in base al browser Redirect nella BeforePageLoad O entrambi
  21. 21. OneUI v. 3
  22. 22. OneUI v. 3 http://infolib.lotus.com/resources/oneui/3.0/docPublic/index.htm
  23. 23. DEMO
  24. 24. Applicare altri framework CSS
  25. 25. DEMO
  26. 26. Concludendo
  27. 27. GRAZIGRAZI
  28. 28. Grazie agli sponsor per aver reso possibile i Dominopoint Days 2013! Main SponsorMain Sponsor Vad sponsorVad sponsor Platinum sponsorPlatinum sponsor Gold sponsorGold sponsor
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×