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