XPages Themes, #dd13

517 views
414 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
517
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

XPages Themes, #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

×