themes nelle xpages - alla ricerca della bellezza #dd13
DESCRIPTION
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.TRANSCRIPT
Themes nelle XPages
Alla ricerca della bellezza di Stefano Mastella
Chi sonoIngegnere, 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
Agenda
Il software fa schifo: di bellezza e usabilità
Xpages e bellezza
Temi: cosa sono e come li uso?
Temi: come li personalizzo?
Conclusione
Il software fa schifo
[slide finale]
La bellezza salverà in mondoF. Dostoevskij
Che cos’è la bellezza? Una convenzione, una moneta che
ha corso solo in un dato tempo e un dato luogo
H. Ibsen
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 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
Temi server preinstallati
Webstandard (predefinito)
Notes
oneUI v2 (da versione >= 8.5.1)
ICS UI (già oneUI v3)
o oneui (blue)o oneuiv2_greeno oneuiv2_goldo oneuiv2_metal
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
DEMO
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)
Come funzionano
Sono come “Server Side CSS”
Sono applicati durante la fase di rendering JSFLe risorse sono “iniettate” nell’albero dei componenti
I componenti sono agganciati con id standard o custom
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
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
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 baseo tutto funzionerà comunque nelle XPage
Partiamo dal più semplice
Riferimento a CSS interno
<resource> <content-type>text/css<content-type> <href>stylesheet.css</href></resource>
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>
[slide finale]
view.setStyleClass(view.getStyleClass() + “ xspView tundra”);
Inclusione di risorse
<!-- Firefox specific --><resource rendered="#{javascript:context.getUserAgent().isFirefox()}">
<content-type>text/css</content-type><href>foxOnFire.css</href>
</resource>
Mobile
<resource rendered="#{javascript:context.getUserAgent().getUserAgent().match("iPhone")}">
<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
OneUI v. 3
OneUI v. 3
http://infolib.lotus.com/resources/oneui/3.0/docPublic/index.htm
DEMO
Applicare altri framework CSS
DEMO
Concludendo
[slide finale]
GRAZIGRAZI
EE!!
Grazie agli sponsor per aver reso possibile i Dominopoint Days 2013!
Main SponsorMain Sponsor
Vad sponsorVad sponsor
Platinum sponsorPlatinum sponsor
Gold sponsorGold sponsor