Utilizzare i Themes nelle XPages per dare un nuovo vestito alla tua applicazione

1. Themes nelle XPages
Alla ricerca della bellezza di Stefano Mastella

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. 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. Il software fa schifo

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. E nelle Xpages?

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. 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. 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. DEMO

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. 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. 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. 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. 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. Partiamo dal più semplice
Riferimento a CSS interno
<resource>
<content-type>text/css<content-
type>
<href>stylesheet.css</href>
</resource>

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. view.setStyleClass(view.getStyleClass() + “ xspView tundra”);

19. Inclusione di risorse
<!-- Firefox specific -->
<resource rendered="#{javascript:context.getUserAgent().isFirefox()}">
<content-type>text/css</content-type>
<href>foxOnFire.css</href>
</resource>

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. OneUI v. 3

22. OneUI v. 3
http://infolib.lotus.com/resources/oneui/3.0/docPublic/index.htm

23. DEMO

24. Applicare altri framework CSS

25. DEMO

26. Concludendo

27. GRAZIGRAZI

28. Grazie agli sponsor per aver reso possibile i
Dominopoint Days 2013!
Main SponsorMain Sponsor
Vad sponsorVad sponsor
Platinum sponsorPlatinum sponsor
Gold sponsorGold sponsor