Author: artdaw Date: 2008-08-11 12:43:17 -0400 (Mon, 11 Aug 2008) New Revision: 10028 Added: trunk/docs/cdkguide/en/src/main/resources/examples/inputDate.xcss trunk/docs/cdkguide/en/src/main/resources/examples/resource-config.xml Modified: trunk/docs/cdkguide/en/src/main/docbook/includes/register.xml trunk/docs/cdkguide/en/src/main/docbook/includes/skin.xml trunk/docs/cdkguide/en/src/main/resources/examples/InputDateRendererBase.java Log: https://jira.jboss.org/jira/browse/RF-3692 - Skinnability section was fixed, 'resource-config.xml file format' section was added. Modified: trunk/docs/cdkguide/en/src/main/docbook/includes/register.xml =================================================================== --- trunk/docs/cdkguide/en/src/main/docbook/includes/register.xml 2008-08-11 15:16:59 UTC (rev 10027) +++ trunk/docs/cdkguide/en/src/main/docbook/includes/register.xml 2008-08-11 16:43:17 UTC (rev 10028) @@ -1,22 +1,117 @@ <?xml version="1.0" encoding="UTF-8"?> <section id="register" xreflabel="register"> <?dbhtml filename="register.html"?> -<sectioninfo> -<keywordset> -<keyword>register</keyword> -<keyword>UI</keyword> -<keyword>CDK</keyword> -<keyword>Guide</keyword> -</keywordset> -</sectioninfo> -<title>Component resources registration</title> -<para> - Registering component resources -</para> -<section id="resconf"> -<title>resources-config.xml file format</title> -<para> -resources-config.xml file format -</para> -</section> + <sectioninfo> + <keywordset> + <keyword>register</keyword> + <keyword>UI</keyword> + <keyword>CDK</keyword> + <keyword>Guide</keyword> + </keywordset> + </sectioninfo> + <title>Component resources registration</title> + <para> + The <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component has a number of resources that should be registered + in the <property>resource-config.xml</property> file. + If the resource is registered, the RichFaces filter will send a request to the <property>ResourceBuilder</property> class + in order to create and to deliver the resource. + </para> + <para> + So, you need to proceed to the <property>inputDate/src/main/config/resources</property> directory and + register following resources in the <property>resource-config.xml</property> file: + </para> + <itemizedlist> + <listitem> + <para> + an icon + </para> + <programlisting role="XML"><![CDATA[... +<resource> + <name>org/mycompany/renderkit/html/images/inputDate.png</name> + <path>org/mycompany/renderkit/html/images/inputDate.png</path> +</resource> +...]]></programlisting> + </listitem> + <listitem> + <para> + the <property>inputDate.xcss</property> file + </para> + <programlisting role="XML"><![CDATA[... +<resource> + <name>org/mycompany/renderkit/html/css/inputDate.xcss</name> + <path>org/mycompany/renderkit/html/css/inputDate.xcss</path> +</resource> +...]]></programlisting> + </listitem> + <listitem> + <para> + the <property>inputDate.js</property> file + </para> + <programlisting role="XML"><![CDATA[... +<resource> + <name>org/mycompany/renderkit/html/scripts/inputDate.js</name> + <path>org/mycompany/renderkit/html/scripts/inputDate.js</path> +</resource> +...]]></programlisting> + </listitem> + </itemizedlist> + <para> + <ulink url="examples/resource-config.xml">Here</ulink> you could find a full example of the <property>resource-config.xml</property> + for the <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component. + </para> + <section id="resconf"> + <title>resource-config.xml file format</title> + <para> + The <property>resource-config.xml</property> is a file for resources registration. + Note, that the <property>resource-config.xml</property> should appear in the <property>META-INF</property> folder after the + component building. + </para> + <para> + This file has the <emphasis role="bold"><property>&lt;resource-config&gt;</property></emphasis> root element + with nested <emphasis role="bold"><property>&lt;resource&gt;</property></emphasis> elements. + </para> + <para> + It is possible to register static resources (images, JavaScript , CSS, XCSS, SWF, (X)HTML, XML, Log files), dynamic created images, + component-incapsulated, JAR resources, etc. + </para> + <para> + Here is a simple example of the image registration: + </para> + <programlisting role="XML"><![CDATA[... +<resource> + <name>org/mycompany/renderkit/html/images/inputDate.png</name> + <path>org/mycompany/renderkit/html/images/inputDate.png</path> +</resource> +...]]></programlisting> + <para> + There are two element in the example above: + an obligatory <emphasis role="bold"><property>&lt;name&gt;</property></emphasis> element which defines resource name and + a <emphasis role="bold"><property>&lt;path&gt;</property></emphasis> element which defines the path to the resource. + The <emphasis role="bold"><property>&lt;path&gt;</property></emphasis> element is optional as it is possible to register + dynamic resources with the <emphasis><property>&quot;class&quot;</property></emphasis> attribute. + For example you could register dynamic created image as it is shown in the following example: + </para> + <programlisting role="XML"><![CDATA[... +<resource class="org.mycompany.renderkit.html.images.inputDate"> + <name>org.mycompany.renderkit.html.images.inputDate</name> +</resource> +...]]></programlisting> + + <!--programlisting role="XML"><![CDATA[... +<resource> + <name></name> + <path></path> + <cacheable></cacheable> + <session-aware></session-aware> + <property> + <name></name> + </property> + <content-type></content-type> + <renderer> + <content-type></content-type> + </renderer> +</resource> +...]]></programlisting--> + + </section> </section> \ No newline at end of file Modified: trunk/docs/cdkguide/en/src/main/docbook/includes/skin.xml =================================================================== --- trunk/docs/cdkguide/en/src/main/docbook/includes/skin.xml 2008-08-11 15:16:59 UTC (rev 10027) +++ trunk/docs/cdkguide/en/src/main/docbook/includes/skin.xml 2008-08-11 16:43:17 UTC (rev 10028) @@ -1,28 +1,75 @@ <?xml version="1.0" encoding="UTF-8"?> <section id="skin" xreflabel="skin"> -<?dbhtml filename="skin.html"?> -<sectioninfo> -<keywordset> -<keyword>skin</keyword> -<keyword>UI</keyword> -<keyword>CDK</keyword> -<keyword>Guide</keyword> -</keywordset> -</sectioninfo> -<title>Skinnability</title> -<para> - creation -</para> -<section> -<title>XCSS Format</title> -<para> -XCSS -</para> -</section> -<section> -<title>Dynamic images generation</title> -<para> -XCSS -</para> -</section> + <?dbhtml filename="skin.html"?> + <sectioninfo> + <keywordset> + <keyword>skin</keyword> + <keyword>UI</keyword> + <keyword>CDK</keyword> + <keyword>Guide</keyword> + </keywordset> + </sectioninfo> + <title>Skinnability</title> + <para> + One of the significant features of the Component Development Kit (CDK) is a skins-based technology which helps you to create a modern rich user interface look-and-feel. + RichFaces has a number of predefined skins you could use wtih the <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component. + But if you want to create your own skin, please, read carefully + the <property>&quot;Skinnability&quot;</property> section of the + <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... Developer Guide</ulink>. You could find all neccesary information about + <property>Built-in skinnability in RichFaces</property>, <property>XCSS file format</property>, <property>Plug-n-Skin feature</property>, etc. there. + </para> + <para> + According to the <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> markup you need to + define following selectors and classes in the <property>inputDate.xcss</property>: + </para> + <itemizedlist> + <listitem> + <para> + <code>.my-inputDate-input</code>, <code>.my-inputDate-icon</code> selectors + </para> + <programlisting role="XML"><![CDATA[... +<u:selector name=".my-inputDate-input"> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="background-color" skin="controlBackgroundColor"/> + <u:style name="color" skin="controlTextColor"/> + <u:style name="font-family" skin="generalFamilyFont"/> + <u:style name="font-size" skin="generalSizeFont"/> +</u:selector> +<u:selector name=".my-inputDate-icon"> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="background-image"> + <f:resource f:key="/org/mycompany/renderkit/html/images/inputDate.png" /> + </u:style> +</u:selector> +...]]></programlisting> + </listitem> + <listitem> + <para> + <code>.my-inputDate-input</code>, <code>.my-inputDate-icon</code>, and <code>.my-inputDate-caption</code> classes + </para> + <programlisting role="CSS"><![CDATA[... +.my-inputDate-input{ + background-color: #EBEBE4; + border: 1px solid #7F9DB9; + float:left; +} +.my-inputDate-icon{ + margin-left: 3px; +} +.my-inputDate-caption{ + color: #000000; +} +...]]></programlisting> + </listitem> + </itemizedlist> + <para> + You could find a complete <property>inputDate.xcss</property> <ulink url="examples/inputDate.xcss">here</ulink>. + </para> + + <!--section> + <title>Dynamic images generation</title> + <para> + Dynamic images generation + </para> + </section--> </section> \ No newline at end of file Modified: trunk/docs/cdkguide/en/src/main/resources/examples/InputDateRendererBase.java =================================================================== --- trunk/docs/cdkguide/en/src/main/resources/examples/InputDateRendererBase.java 2008-08-11 15:16:59 UTC (rev 10027) +++ trunk/docs/cdkguide/en/src/main/resources/examples/InputDateRendererBase.java 2008-08-11 16:43:17 UTC (rev 10028) @@ -15,7 +15,7 @@ import org.mycompany.component.UIInputDate; -public abstract class InputDateRendererBase extends HeaderResourcesRendererBase{ +public abstract class InputDateRendererBase extends HeaderResourcesRendererBase{ public void decode(FacesContext context, UIComponent component){ ExternalContext external = context.getExternalContext(); Added: trunk/docs/cdkguide/en/src/main/resources/examples/inputDate.xcss =================================================================== --- trunk/docs/cdkguide/en/src/main/resources/examples/inputDate.xcss (rev 0) +++ trunk/docs/cdkguide/en/src/main/resources/examples/inputDate.xcss 2008-08-11 16:43:17 UTC (rev 10028) @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8"?> +<f:template xmlns:f='http:/jsf.exadel.com/template' + xmlns:u='http:/jsf.exadel.com/template/util' + xmlns="http://www.w3.org/1999/xhtml" > + <f:verbatim> + <![CDATA[ + .my-inputDate-input{ + background-color: #EBEBE4; + border: 1px solid #7F9DB9; + float:left; + } + + .my-inputDate-icon{ + margin-left: 3px; + } + + .my-inputDate-caption{ + color: #000000; + } + ]]> + </f:verbatim> + + <u:selector name=".my-inputDate-input"> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="background-color" skin="controlBackgroundColor"/> + <u:style name="color" skin="controlTextColor"/> + <u:style name="font-family" skin="generalFamilyFont"/> + <u:style name="font-size" skin="generalSizeFont"/> + </u:selector> + <u:selector name=".my-inputDate-icon"> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="background-image"> + <f:resource f:key="/org/mycompany/renderkit/html/images/inputDate.png" /> + </u:style> + </u:selector> + +</f:template> \ No newline at end of file Property changes on: trunk/docs/cdkguide/en/src/main/resources/examples/inputDate.xcss ___________________________________________________________________ Name: svn:executable + * Added: trunk/docs/cdkguide/en/src/main/resources/examples/resource-config.xml =================================================================== --- trunk/docs/cdkguide/en/src/main/resources/examples/resource-config.xml (rev 0) +++ trunk/docs/cdkguide/en/src/main/resources/examples/resource-config.xml 2008-08-11 16:43:17 UTC (rev 10028) @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<resource-config> + <resource> + <name>org/mycompany/renderkit/html/images/inputDate.png</name> + <path>org/mycompany/renderkit/html/images/inputDate.png</path> + </resource> + <resource> + <name>org/mycompany/renderkit/html/scripts/inputDate.js</name> + <path>org/mycompany/renderkit/html/scripts/inputDate.js</path> + </resource> + <resource> + <name>org/mycompany/renderkit/html/css/inputDate.xcss</name> + <path>org/mycompany/renderkit/html/css/inputDate.xcss</path> + </resource> +</resource-config> \ No newline at end of file Property changes on: trunk/docs/cdkguide/en/src/main/resources/examples/resource-config.xml ___________________________________________________________________ Name: svn:executable + *