Customized Java EE Training: http://courses.coreservlets.com/Java 7, J - PDF document

© 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop . Themes (Skins) Originals of slides and source code for examples: http://www.coreservlets.com/JSF-Tutorial/primefaces/ and customized JSF2 and PrimeFaces training courses –http://courses.coreservlets.com/jsf-training.html © 2015 Marty Hall . Developed and taught by well-known author and developer. At public venues or onsite at For live training on JSF 2, PrimeFaces, or otherJava EE topics, email hall@coreservlets.comMarty is also available for consulting and development support Taught by the author of Core Servlets and JSP •Courses developed and t Installing and specifying a default themeChanging themes at runtime with Looking up current themeChanging themes at runtime without using Best practices for making your apps adapt All PrimeFaces components follow themesFont families, font sizes, colors, borders, icons, etc.PrimeFaces provides many pre-built themes37 themes as of PrimeFaces release 3.4. This includes the RichFacesand Trinidad themes, for easy migration.Installing a theme is simpleDownload the JAR. Set a context-paramin web.xml.You can customize themes (with effort)Use ThemeRoller. Edit several files. Save JAR. You can change themes at runtimeSo you can write standard HTML that follows theme © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop . Developed and taught by well-known author and developer. At public venues or onsite at Setting the Default Theme Browse themes and choose namehttp://www.primefaces.org/themes.htmlor Download and install corresponding JAR Specify theme as default in web.xmlont;xt-;&#xpara;&#xm000; Browse themes and choose name Click on magnifying glass at bottom, then browse to various showcase sections to see components displayed Choose theme from dropdown at top, and see many Installing a Theme: Details•Download JAR corresponding to name– Click on theme name, then latest version number, then click on JAR file (top entry) to download.This tutorial uses version 1.0.8 of each of the themes, the latest version as of 12/2012.Put JAR file in the WEB-INF/lib folder of your app, as with all , you neither need to download the JAR nor specify it in web.xmlYou can also use the jQuery UI “ThemeRoller” to interactively customize a theme, then save the results. It is a bit tedious, but far better than editing CSS files. For details, see Section 7.2 of the PrimeFaces 3.4 User’s Guide. PrimeFaces looks for a context-paramnamed If that context-paramexists and there is a JAR file with Example: make bluesky(the RichFacestheme) the themes/bluesky/1.0.8/bluesky-1.0.8.jar installed in WEB-INF/lib Made a page with several PrimeFaces Set the primefaces.THEMEcontext-paramto glass-x Project Layout in Eclipse13 Downloaded from http://repositor y .primefaces.or /primefaces/themes/bluesk (start at http://repository.primefaces.and browse from there ). JARs for the other themes are also installed because later examples will let user interactively choose among all available themes. &#x?xml;&#x ver;&#xsion;&#x="1.;�" -;.60;encoding="UTF-8"?ont;xt-;&#xpar-;.90;ames.THEME/par&#x-5.6;am-name&#xpara;&#xm-va;&#xlue0;/par&#x-5.7;am-valuepar&#x/con;&#xtext;&#x--5.;耀amsf-&#x/url;.20;pattern&#x/ser;&#xvlet;&#x--6.;ကmapping Result after moving the slider and spinner, clicking one radio button, then clicking “Growl” button. &#xp:ta;-60;�title="Sample Elements"&#xp:ta;-60;�title="Main Tab"&#xh:pa;&#xnelG;&#xrid-;怀columns="4"&#xui:i;&#xnclu;Þ-6;�src="/snippets/calendar.xhtml"/&#xui:i;&#xnclu;Þ-6;�src="/snippets/table-and-panel.xhtml"/&#xui:i;&#xnclu;Þ-6;�src="/snippets/form-elements.xhtml"/&#xui:i;&#xnclu;Þ-6;�src="/snippets/popups.xhtml"/&#xp:ta;-60;�title="More"&#xui:i;&#xnclu;Þ-6;�src="/snippets/filler.xhtml"/&#xp:ta;-60;�title="More Content"&#xui:i;&#xnclu;Þ-6;�src="/snippets/filler.xhtml"/All four of these content sections contain elements that were covered in earlier parts of this PrimeFaces tutorial. And, none of them have any real server-side behavior. So, if you have already gone through earlier parts of this tutorial, you probably want to skip or skim the next few slides in this sub-section that show the code for the four content regions. This and the other three content sections are each wrapped inside ui:compositionso that they can be inserted with ui:include. Table and Panel: Facelets&#xh:pa;&#xnelG;&#xrid0;&#xh3 a;&#xlign;&#x="ce;&#xnter;&#x"000;&#x/h30;:fa;Ît ;&#xname;&#x="he;૞r;&#x"000;&#x/f:f;૎t;&#x/p:p; nel;&#xGrid;Weather info... &#x/p:p; nel; Form Elements: Facelets&#xh:pa;&#xnelG;&#xrid0;&#xh3 a;&#xlign;&#x="ce;&#xnter;&#x"000;&#x/h30;&#xh:fo;&#xrm00;&#xh:pa;&#xnelG;&#xrid ;olu;&#xmns=;&#x"2"0;&#xp:in;&#xputT;xt/;Textfield: &#xh:pa;&#xnelG;&#xroup;Slider: &#xp:in;&#xputT;xt ;&#xid=";&#xslid;rFi;ld";&#x/000;&#xp:sl;&#xider;&#x for;&#x="sl;&#xider;iel; "/0;&#x/h:p; nel;&#xGrou;&#xp000;&#xp:se;&#xlect;&#xOneR;­io;Radio: :se;&#xlect;&#xItem;&#x ite;&#xmLab;l=";&#xOne";&#x/000;:se;&#xlect;&#xItem;&#x ite;&#xmLab;l=";&#xTwo";&#x/000;&#x/p:s;lec;&#xtOne;&#xRadi;&#xo000;&#xp:se;&#xlect;&#xMany;hec;&#xkbox;Checkbox: :se;&#xlect;&#xItem;&#x ite;&#xmLab;l=";&#xOne";&#x/000;:se;&#xlect;&#xItem;&#x ite;&#xmLab;l=";&#xTwo";&#x/000;:se;&#xlect;&#xItem;&#x ite;&#xmLab;l=";&#xThre;"/0;&#x/p:s;lec;&#xtMan;&#xyChe;kbo;&#xx000; Popups: Facelets&#xh:pa;&#xnelG;&#xrid0;&#xh3 a;&#xlign;&#x="ce;&#xnter;&#x"000;r/0;&#x/h30;Popups()&#xh:fo;&#xrm00; iv ; lig;&#xn="c;nte;&#xr"00;action="#{growlBean.makeMessages}"&#xp:gr;&#xowl ;&#xid=";&#xgrow;&#xl"/0;r/0;r/0;&#xp:co;&#xmman;Ûut;&#xton ;&#xvalu;="D;&#xia00;log" onclick="dlg.show()"/r/0;Blah, blah, blah.&#x/p:d;&#xialo;&#xg000;&#xp:co;&#xmman;Ûut;&#xton ;&#xvalu;="C;&#xonfi;&#xrm D;&#xia00;log" onclick="confirmation.show()"/ader="Please Confirm" message="Are You Sure?"severity="info"&#xp:co;&#xmman;Ûut;&#xton ;&#xvalu;="Y;s" ;onclick="confirmation.hide()"/&#xp:co;&#xmman;Ûut;&#xton ;&#xvalu;="N;&#xo" 0;onclick="confirmation.hide()"/&#x/p:c;&#xonfi;&#xrmDi; log; Popups: GrowlBean@ManagedBeanpublic class GrowlBean {public String makeMessages() {FacesContext context = FacesContext.getCurrentInstance();FacesMessage message1 = new FacesMessage("Something happened");context.addMessage(null, message1);FacesMessage message2 = new FacesMessage("You were naughty");message2.setSeverity(FacesMessage.SEVERITY_ERROR);context.addMessage(null, message2);return(null);} © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop . Developed and taught by well-known author and developer. At public venues or onsite at p:themeSwitcher –Changing Theme at Runtime Install JARs for several themesf:selectItems refers to the themes.String[] –Should contain the theme names in lower case&#xStri;&#xng00;Listagain, theme names in lower case&#xStri;&#xng,S;&#xtrin;&#xg000;Mapthe keys are arbitrary display values and the values are the theme names in lower caseSelectItem[] or &#xSele;tIt;m00;ListDisplay part of each SelectItemis arbitrary, values are theme names So, if top entry is a theme that does not match the current theme, there is no way to select it without changing to another theme in between.Solution 1selection of a theme will be a change.This point was also discussed in general JSF2 tutorial when discussing h:selectOneMenu.Solution 2the list. (Next section) itemLabel="--Choose Theme--" v:se;&#xlect;&#xItem;&#xs-60;
.40;alue="#{themeChoices.themes}"/ &#xui:i;&#xnclu;Þ-6;.4;src="/snippets/theme-body.xhtml"/Returns an array of the theme names. Dummy value so that any theme name selected will be a change. public class ThemeChoices{ Example: Results26 Go to http://apps.jsf2.com/primefaces-themes/and try it yourself. © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop . Developed and taught by well-known author and developer. At public venues or onsite at Looking up the Default Theme Using the ExternalContext, there is a standard way of But, if you know the current thlist, you can skip the dummy value.property (other than the list of choices), so you cannot entry in the list as with h:selectOneMenu. Thus, with &#xh:pa;&#xnelG;&#xrid-;؀.;怀columns="2":se;&#xlect;&#xItem;&#xs-60;�.60;value="#{smartThemeChoices.themes}" / &#xui:i;&#xnclu;Þ-6;�.6;src="/snippets/theme-body.xhtml"/Returns a List of the theme names, with default theme first. No dummy value. public class SmartThemeChoices{ String currentTheme= ThemeUtils.currentTheme(); public class ThemeUtils{ExternalContextexternalContext=String param= if (param!= null) {// Uninstantiatableclass Example: Results (When First Loaded)32 © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop . Developed and taught by well-known author and developer. At public venues or onsite at Changing Theme at Runtime (without p:themeSwitcher) How p:themeSwitcher workschanges the “href” attribute.Although not documented, this is a PrimeFaces function that is in core.js, and is unlikely to change in future So, no need to reproduce functionalityCaveat 1: the appropriate JAR must be in WEB-INF/libCaveat 2: this does not change the default; it is a pure client-side change. So, next time page is reloaded, it will revert to previous theme. But this is the same behavior as with p:themeSwitcher. You could easily use a View Parameter to make this persistent. &#xh:pa;&#xnelG;&#xrid-;؁.;䀀columns="4"value="Light Theme" value=value=value="Dark Theme" src="/snipp © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop . Developed and taught by well-known author and developer. At public venues or onsite at Best Practices for Using Themes &#xtabl; cl; ss=;&#x"bla;&#xh"00;or &#xp:pa;&#xnelG;&#xrid-;â  class="blah"No: element selectors like Minimize use of hard-coded colorsColors change frequently with the themeUse relative, not absolute font sizes“Skinning” entry under each component in the User’s Guide. E.g., p:slider has .ui-slider, .ui-slider-handle, etc. PrimeFaces CSS Classes SelectorApplies To.ui-widgetAll PrimeFaces components.ui-widget-headerHeader section of a component.ui-widget-contentContent section of a component.ui-corner-allMakes corners rounded.ui-state-defaultA clickable in its default state.ui-state-hoverA clickable when the mouse is hovering over it.ui-state-activeA clickable when it is selected.ui-state-disabledDisabled elements.ui-state-highlightHighlighted elements.ui-iconPredefined icon for that componentMore classes and detail: http://docs.jquery.com/UI/Theming/ CSS Classes: Samples CSS Classes: Samples .ui-growl { right: 50px !important; top: 100px !important}Your style sheet will be loaded As discussed on previous slide, if you use h:outputStyleSheet, then Open it in TopStyleor another CSS editor that shows None of the 37 builtinthemes is exactly what you wantThemeRollerto tweak it. The output of ThemeRollerhas to be edited in several © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop . Developed and taught by well-known author and developer. At public venues or onsite at Browse themes and choose namehttp://www.primefaces.org/themes.html orDownload and install corresponding JARSpecify theme as default in web.xml&#xpara;&#xm-na;&#xm-4.;倀eprimefaces.THEMEparam-name&#x/-50;theme-name&#x/-4.;䀀param-valueChange themes at runtimeUse p:themeSwitcher or call PrimeFaces.changeThemePlan ahead for changes to themesLearn most important CSS names. Avoid hard-coded fonts and colors. Don’t define your own CSS for HTML elements, only classes. 47 © 2015 Marty Hall Customized Java EE Training: http://courses.coreservlets.com/Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop . Developed and taught by well-known author and developer. At public venues or onsite at orial/jsf2/ –JSF 2.2 tutorial http://www.coreservlets.com/JSF-Tutorial/primefaces/ –PrimeFaces tutorial -training.html –Customized JSF and PrimeFaces training courses http://coreservlets.com/ –JSF 2, PrimeFaces, Java 7 or 8, Ajax, jQuery, Hadoop, RESTful Web Services, Android, HTML5, Spring, Hibernate, Servlets, JSP, GWT, and other Java EE training