From richfaces-svn-commits at lists.jboss.org Mon Jul 14 12:48:37 2008 Content-Type: multipart/mixed; boundary="===============7522421587783207211==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r9584 - trunk/docs/userguide/en/src/main/docbook/modules. Date: Mon, 14 Jul 2008 12:48:36 -0400 Message-ID: --===============7522421587783207211== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: msorokin Date: 2008-07-14 12:48:36 -0400 (Mon, 14 Jul 2008) New Revision: 9584 Modified: trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml Log: http://jira.jboss.com/jira/browse/RF-3163 Details of usage section is added Modified: trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover= .xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2= 008-07-14 16:41:19 UTC (rev 9583) +++ trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2= 008-07-14 16:48:36 UTC (rev 9584) @@ -2687,7 +2687,7 @@ - Elements that has class name corresponding to + Elements that have class name corresponding to one of the basic elements name/type mapped by the following scheme @@ -4300,14 +4300,15 @@ XCSS files If the command is executed with the "DcreateExt" key set to - "true", XCSS files that define style + "true", the XCSS (extended_classes.xcss and extended.xcss= ) files that define style for standard controls will be created. Location: "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\". - SKIN-NAME-ext.xcss + SKIN-NAME-ext.xcss / + = If the command is executed with the "DcreateExt" key set to "true", the configuration @@ -4457,10 +4458,115 @@
Details of Usage = - This section will cover some practical aspects of Plug-n-Skin imple= mentation. + This section will cover some practical aspects of Plug-n-Skin imple= mentation. + It's assumed that you have read the section of the guide that tells how t= he new skin using Plug-n-Skin prototype can be created. + Above all, we need to create a new skin, in order to do that we jus= t have to follow = + the steps described in the previous section. = + This command will be used to create a template of the new skin proj= ect. + = + + + Now you can browse the "P-n-S" folder to view what files and f= olders were created there. + + = + + Next, we will also use Maven to add all needed files to the skin project= . This will done by the following command: + + = + + = + + As you remember from the previous section "-DbaseSkin" key def= ines what skin to be used as a base, = + "-DcreateExt=3Dtrue" determines that the new skin will = + come with XCSS files that unify the look of the rich components with sta= ndard HTML controls. + + = + = + + So, now the files and folder with all needed resources are created = + and we can start redefining/editing the new skin. + + = + + Now we can start editing XCSS files of the rich components. = + In order to see how the Plug-n-Skin feature works we will change some st= yle attributes of + <rich:calendar> and some basic HT= ML controls to see how they are affected by standard controls skinning. + = + + Thus, it will be demonstrated how to: + + Recolor the current day's cell background of the + <rich:calendar> to see how the n= ew skin created with the help of Plug-n-Skin feature affects the style of t= he component; + Recolor a standard HTML submit button; + = + + = + = + In oder to edit the style properties of + <rich:calendar> you + need to open the "calendar.xcss" file located in "P-n-S\= src\main\resources\skinpackage\plugnskindemo\css\". Once, you have ope= ned the file, please find ".rich-calendar-today" selector and add specify = it the following way:background-color: #075ad1;. + = + Now we will see how font style of a standard HTML submit button can= be changed. Please, open "extended.xcss" file located in "P= -n-S\src\main\resources\skinpackage\plugnskindemo\css\" and font= -weight: bold;inside the curly braces of these coma separated select= ors + button[type=3D"button"], button[type=3D"reset"]= , button[type=3D"submit"], input[type=3D"reset"], input= [type=3D"submit"], input[type=3D"button"] + + All the changes that were planned to be preformed are done and now = you can proceed to building the new PlugnSkinDemo skin and import it into t= he project. = + As you read, the skin should be built in the "P-n-S" folder of= the skin project be executing mvn clean install command. This= procedure results in creating a "target" folder that contains a = .jar file with a compiled new skin, it our case the file is named "P-n= -S-1.0.-SNAPSHOT.jar". = + The next step is to import the new PlugnSkinDemo skin into the project.<= /para> + What you need to do, in order to have the new skin imported to the = project is + + = + Copy the "P-n-S-1.0.-SNAPSHOT.jar" file to the= "\WebContent\WEB-INF\lib\" folder. + Add the new skin's name to the "web.xml" = file. It is done like this + = + + org.ajax4jsf.SKIN + PlugnSkinDemo + +]]> + = + = + = + + + = + = + = + = + Please, do not forget that standard controls skinning has to be enabled i= n the "web.xml" file, which can be done by adding the following c= ode to the "web.xml" file: + + = + = + + org.richfaces.CONTROL_SKINNING + enable + +]]> + The result of both action is displayed on the figure below. + = + = + = +
+ Plug-n-Skin feature in action. + + + + + +
- = --===============7522421587783207211==--