Themes nelle XPages - Alla ricerca della bellezza #Dd13
-
Upload
stefano-mastella -
Category
Technology
-
view
180 -
download
0
description
Transcript of Themes nelle XPages - Alla ricerca della bellezza #Dd13
![Page 1: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/1.jpg)
Themes nelle XPages
Alla ricerca della bellezza di Stefano Mastella
![Page 2: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/2.jpg)
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
![Page 3: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/3.jpg)
Agenda
Il software fa schifo: di bellezza e usabilità
Xpages e bellezza
Temi: cosa sono e come li uso?
Temi: come li personalizzo?
Conclusione
![Page 4: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/4.jpg)
Il software fa schifo
![Page 5: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/5.jpg)
[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
![Page 6: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/6.jpg)
E nelle Xpages?
![Page 7: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/7.jpg)
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
![Page 8: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/8.jpg)
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
![Page 9: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/9.jpg)
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
![Page 10: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/10.jpg)
DEMO
![Page 11: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/11.jpg)
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)
![Page 12: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/12.jpg)
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
![Page 13: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/13.jpg)
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
![Page 14: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/14.jpg)
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
![Page 15: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/15.jpg)
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
![Page 16: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/16.jpg)
Partiamo dal più semplice
Riferimento a CSS interno
<resource> <content-type>text/css<content-type> <href>stylesheet.css</href></resource>
![Page 17: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/17.jpg)
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>
![Page 18: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/18.jpg)
[slide finale]
view.setStyleClass(view.getStyleClass() + “ xspView tundra”);
![Page 19: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/19.jpg)
Inclusione di risorse
<!-- Firefox specific --><resource rendered="#{javascript:context.getUserAgent().isFirefox()}">
<content-type>text/css</content-type><href>foxOnFire.css</href>
</resource>
![Page 20: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/20.jpg)
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
![Page 21: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/21.jpg)
OneUI v. 3
![Page 22: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/22.jpg)
OneUI v. 3
http://infolib.lotus.com/resources/oneui/3.0/docPublic/index.htm
![Page 23: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/23.jpg)
DEMO
![Page 24: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/24.jpg)
Applicare altri framework CSS
![Page 25: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/25.jpg)
DEMO
![Page 26: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/26.jpg)
Concludendo
![Page 27: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/27.jpg)
[slide finale]
GRAZIGRAZI
EE!!
![Page 28: Themes nelle XPages - Alla ricerca della bellezza #Dd13](https://reader035.fdocumenti.com/reader035/viewer/2022081404/5594c8c91a28abdb3c8b4581/html5/thumbnails/28.jpg)
Grazie agli sponsor per aver reso possibile i Dominopoint Days 2013!
Main SponsorMain Sponsor
Vad sponsorVad sponsor
Platinum sponsorPlatinum sponsor
Gold sponsorGold sponsor