Author: ilya_shaikovsky Date: 2008-03-31 06:16:19 -0400 (Mon, 31 Mar 2008) New Revision: 7445 Added: trunk/samples/richfaces-demo/src/main/webapp/images/cn_StandardComponentsSkinning.gif trunk/samples/richfaces-demo/src/main/webapp/images/ico_StandardComponentsSkinning.gif trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet1.css trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet2.css trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet3.css Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/inplaceInput/examples/simpleDefault.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/inplaceInput/examples/simpleWithControls.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/usage.xhtml Log: Standard Skinning page created Inplaces default labels changed Added: trunk/samples/richfaces-demo/src/main/webapp/images/cn_StandardComponentsSkinning.gif =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/images/cn_StandardComponentsSkinning.gif ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/samples/richfaces-demo/src/main/webapp/images/ico_StandardComponentsSkinning.gif =================================================================== (Binary files differ) Property changes on: trunk/samples/richfaces-demo/src/main/webapp/images/ico_StandardComponentsSkinning.gif ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/inplaceInput/examples/simpleDefault.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/inplaceInput/examples/simpleDefault.xhtml 2008-03-31 09:47:31 UTC (rev 7444) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/inplaceInput/examples/simpleDefault.xhtml 2008-03-31 10:16:19 UTC (rev 7445) @@ -5,15 +5,15 @@ xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> - <rich:panel style="width:200px;"> + <rich:panel style="width:220px;"> <f:facet name="header"> <h:outputText value="Person Info"></h:outputText> </f:facet> <h:panelGrid columns="2"> <h:outputText value="Name: "/> - <rich:inplaceInput defaultLabel="John Smith"/> + <rich:inplaceInput defaultLabel="click to enter your name"/> <h:outputText value="Email:"/> - <rich:inplaceInput defaultLabel=&quot;john(a)gmail.com&quot;/&gt; + <rich:inplaceInput defaultLabel="click to enter your email"/> </h:panelGrid> </rich:panel> -</ui:composition> \ No newline at end of file +</ui:composition> \ No newline at end of file Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/inplaceInput/examples/simpleWithControls.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/inplaceInput/examples/simpleWithControls.xhtml 2008-03-31 09:47:31 UTC (rev 7444) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/inplaceInput/examples/simpleWithControls.xhtml 2008-03-31 10:16:19 UTC (rev 7445) @@ -5,16 +5,16 @@ xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> - <rich:panel style="width:200px;"> + <rich:panel style="width:220px;"> <f:facet name="header"> <h:outputText value="Person Info"/> </f:facet> <h:panelGrid columns="2"> <h:outputText value="Name: "/> - <rich:inplaceInput defaultLabel="John Smith" + <rich:inplaceInput defaultLabel="click to enter your name" showControls="true"/> <h:outputText value="Email:"/> - <rich:inplaceInput defaultLabel=&quot;john(a)gmail.com&quot; + <rich:inplaceInput defaultLabel="click to enter your email" showControls="true"/> </h:panelGrid> </rich:panel> Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet1.css =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet1.css (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet1.css 2008-03-31 10:16:19 UTC (rev 7445) @@ -0,0 +1,11 @@ +... + +select { + //class content +} + +hr { + //class content +} + +... \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet2.css =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet2.css (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet2.css 2008-03-31 10:16:19 UTC (rev 7445) @@ -0,0 +1,9 @@ +... +rich-container select { + //class content +} + +rich-container hr { + //class content +} +... \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet3.css =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet3.css (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet3.css 2008-03-31 10:16:19 UTC (rev 7445) @@ -0,0 +1,9 @@ +... +.rich-select { + //class content +} + +.rich-input-text { + //class content +} +... \ No newline at end of file Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/usage.xhtml 2008-03-31 09:47:31 UTC (rev 7444) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/usage.xhtml 2008-03-31 10:16:19 UTC (rev 7445) @@ -12,39 +12,121 @@ font-size: 11px !important; } </style> - <p>This section overviews main principles of standard components - skinning with the Rich Faces framework.</p> - <p>This feature provides styling for standard HTML form elements - in order to be highly compilant to RichFaces common look'n'feel. There - should be two ways of applying skins to elements:</p> + <p> + This section overviews main principles of standard components + skinning with the Rich Faces framework. + </p> + <p> + This feature provides styling for standard HTML form elements + in order to be highly compilant to RichFaces common look'n'feel. There + should be two ways of applying skins to elements: + </p> <ul> - <li>Skinning style classes are applied to elements by element - name and type attribute (where applicable). No additional steps - required from an application developer. Application initialization - parameter serves for enabling/disabling the feature.</li> - <li>Several style classes are provided for different types of - elements. That style classes have predefined names. Application - developer should manually assign classes to controls that needs - skinning or assign class to an element that contains controls.</li> + <li> + Skinning style classes are applied to elements by element + name and type attribute (where applicable). No additional steps + required from an application developer. Application initialization + parameter serves for enabling/disabling the feature. + </li> + <li> + Several style classes are provided for different types of + elements. That style classes have predefined names. Application + developer should manually assign classes to controls that needs + skinning or assign class to an element that contains controls. + </li> </ul> - <p>Standard controls skinning feature provides 2 levels of - skinning:</p> + <p> + Standard controls skinning feature provides 2 levels of skinning: + </p> <ol> - <li><b>Standard</b> - customization of only - basic style properties. </li> - <li><b>Extended</b> - extends basic level introducing customizations - of a broader number of style properties </li> + <li> + <b>Standard</b> - customization of only basic style properties. + </li> + <li> + <b>Extended</b> - extends basic level introducing customizations + of a broader number of style properties + </li> </ol> + <p> + Skinning level calculated automatically at server side depending on user agent info. + </p> <p class="note"> - Advanced skinning should not be applied to browsers having rich - visual styling for controls (e.g. Opera and Safari). + Extended skinning not applied to browsers having rich + visual styling for controls (e.g. Opera and Safari). Also advanced level of skinning requires support of CSS 2 attribute selectors either as implicit type attributes for button/textarea elements (e.g. IE7 in standards compilant mode) or CSS 3 draft namespace selectors (e.g. Mozilla Firefox). </p> + <a href="#" onclick="#{rich:component('panel')}.show()">Click here to call modal with an example.</a> + <p> + There three ways of applying skinning to application: + </p> + <ul> + <li> + <b>org.richfaces.CONTROL_SKINNING</b> context param set to <b>enabled</b> means that all + standard elements on the page will be skinned. (CSS style classes for + elements based on their names and type attribute values will be applied) + </li> + <li> + <b>org.richfaces.CONTROL_SKINNING_CLASSES</b> context param set to <b>enabled</b> + means that basic elements nested to element having <i>rich-container</i> class + will be skinned. + </li> + <li> + Rich faces also provides predefined classes which can be applied by end developer + to elements need to be skinned separately. This classes added to the page also + according to <b>org.richfaces.CONTROL_SKINNING_CLASSES</b> context-param. + </li> + </ul> + <p> + Using first way CSS with next definitions will be automatically added to pages: + </p> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/standardSkinning/snippets/snippet1.css" highlight="xhtml"/> + </rich:panel> + <p> + And using the second way next CSS will influence corresponding elements: + </p> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/standardSkinning/snippets/snippet2.css" highlight="xhtml"/> + </rich:panel> + <p> + And the last one way means that classes with names corresponding to elements names + will be added to the application pages and possible to set manually: + </p> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/standardSkinning/snippets/snippet3.css" highlight="xhtml"/> + </rich:panel> + <p class="note" style="height: 40px"> + <b><i>Important Exception:</i></b> <b>a</b> elements have classes based on "link" + and pseudo class name. <i>(e.g.: rich-link, rich-link-hover, rich-link-visited)</i> + </p> + <rich:modalPanel id="panel" width="300" height="230"> + <f:facet name="header"> + Standard components skinning + </f:facet> + <i> + All the controls below is just standard JSF components skinned with Rich Faces: + </i> + <hr/> + <h:panelGrid columns="2"> + <h:outputText value="Enter Name:"/> + <h:inputText/> + <h:outputText value="Enter you interests:"/> + <h:inputTextarea/> + <h:outputText value="Choose your favourite color"/> + <h:selectOneMenu> + <f:selectItem itemLabel="Red"/> + <f:selectItem itemLabel="Black"/> + <f:selectItem itemLabel="Green"/> + <f:selectItem itemLabel="White"/> + </h:selectOneMenu> + </h:panelGrid> + <hr/> + <button type="button" onclick="#{rich:component('panel')}.hide()">Hide this example</button> + </rich:modalPanel> </ui:define> - </ui:composition> </html>