creating a new theme

8
Creating a New Theme Click on the download theme button that will direct you into download page. From the version option select 1.10.4 for compatibility issue. From components option deselect ToggleAll so that your theme only includes skinning styles. At the bottom of the download page, just download your theme would look like below.

Upload: alex-valencia

Post on 18-Aug-2015

214 views

Category:

Documents


1 download

DESCRIPTION

Creando un tema para primefaces

TRANSCRIPT

Creating a New Theme Click on the download theme button that will direct you into download page. From the version option select 1.10.4 for compatibility issue. From components option deselect ToggleAll so that your theme only includes skinningstyles. At the bottom of the download page, ust download your theme would look like below. Create a structure of folders that comply with the !rimefaces theme structure standard. "ook below# $%&A'()F folder should contain resources which in turn contains primefaces-yourtheme folder. (n our case we*ve named primefaces-journaldev. !rimefaces'ournaldev folder should contains your css and images. +eturn back into downloaded theme, e,tract the -ip .le into your desk and navigate into css folder and search for jquery-ui-1.10.4.custom.css and rename it to be theme.css. Open your theme.css fle and change all the images paths to be url(#resource!"primefaces-journaldev#imagesimages$image%&'() rather than url(images$image%(). "ook below at a sample of fragments of our theme.css .le. As you&ve noticed* all of images urls are changed to be used in conjunction +ith ,aces resourceobect. Copy your theme.css .le and images .le into your primefaces'yourtheme, in our case they will be located inside primefaces'ournaldev folder. !ackage your theme into /A+ .le using jar -cvf yourTheme.jar -AT.-/0TO-1O23-45TA-/0,-,O6753. "ook /A+ below.c#0metro'ui'master0src0main0resources1ar 'cvf metroui.ar $%&A'()F (mport your /A+ into your proect build path, remember that we*ve used the !rimefacesCalendarproect that was introduced some time ago. %asiest way to create a lib directory at the proect root and copy the ar .le into it. &hen add the ar .le to the proect build path. 2ince we need to package the proect ar .le when we build the proect, we need to make some changes in the pom.,ml .le to copy the ournaldev.ar .le to 3%4'()F5lib directory of the 3A+ .le. &he changes are easy, all we need is to add a con.guration to include the ar .le to 3%4'()F5lib directory for maven'war'plugin plugin. 6ur .nal pom.,ml .le looks like below.pom.8ml7proect ,mlns89http#55maven.apache.org5!6$54.0.09 ,mlns#,si89http#55www.w:.org5;0015ersion A ''17dependency17group(d1org.primefaces75group(d17artifact(d1primefaces75artifact(d17version1A.075version175dependency17@'' /2! "ibrary ''17dependency17group(d1ava,.servlet.sp75group(d17artifact(d1ava,.servlet.sp'api75artifact(d17version1;.:.175version175dependency17@'' /2&" "ibrary ''17dependency17group(d1ava,.servlet75group(d17artifact(d1stl75artifact(d17version11.1.;75version175dependency17@'' !rimefaces &heme "ibrary ''17dependency17group(d1org.primefaces.themes75group(d17artifact(d1blit-er75artifact(d17version11.0.1075version175dependency175dependencies17build17sourceBirectory1src5main5ava75sourceBirectory17plugins17plugin17artifact(d1maven'war'plugin75artifact(d17version1;.:75version17con.guration17war2ourceBirectory13ebContent75war2ourceBirectory17fail6n$issing3eb