From line 0 changed to line 0:
When this blog is writing, JSF 2.0 specification reached the Public Review status. Everybody can visit the [JSR-314 EG page=>http://jcp.org/en/jsr/detail?id=314] and download an own copy of it. Instead of JSF 1.2 when the implementation appeared about one year after the specification is done, Sun is developing the reference implementation, also known as Project Mojarra, at the time with writing the specification. So, you can the new features of JSF 2.0 right away downloading the Mojarra 2.0.0 PR release from the project home page: [=>https://javaserverfaces.dev.java.net/] . <br/><br/>
When this blog is writing, JSF 2.0 specification reached the Public Review status. Everybody can visit the [JSR-314 EG page=>http://jcp.org/en/jsr/detail?id=314] and download his own copy of it. Comparing to JSF 1.2 when the implementation appeared about one year after the specification is done, Sun is developing the reference implementation, also known as Project Mojarra, at the time with writing the specification. Thus, you can try new features of JSF 2.0 right away downloading the Mojarra 2.0.0 PR release from the project home page: [=>https://javaserverfaces.dev.java.net/] . <br/><br/>
From line 2 changed to line 2:
JSF 2.0 has some cool innovation features. One of them is PDL (Page Declaration Language). PDL inherits its core functionality from two very known JSF project - Facelets and JSFTemplates. Between the other feature, It allows to create new JSF components in declarative manner, without creating a bunch of java classes like it was in the previous JSF versions. In this blog we will test drive this feature and show the top features of PDL.<br/><br/>
JSF 2.0 has some cool innovation features. One of them is PDL (Page Declaration Language). PDL inherits its core functionality from two well known JSF project - Facelets and JSFTemplates. Among all other features, it allows to create new JSF components in declarative manner, without creating a bunch of java classes like it was in the previous JSF versions. In this blog we will test-drive this feature and show the top features of PDL.<br/><br/>
From line 4 changed to line 4:
Binary Mojarra distribution already contains |ezcomp00| and |ezcomp01| applications that show the basic of the PDL. We are not going to repeat after them, but will create something different. RichFaces has a |rich:panel|, pretty simple, but useful JSF component. It represents the rectangle with body and optional header defined by facet. The look-n-feel of the |rich:panel| is defined with some set of css rules. Some of those rules refer to the parameters taken from the skin parameters. I.e. css has a static and dynamically generated rules. If header presents, it is filled with background gradient generated by java class that also uses the skin parameters as base colors for generated gradient. The working example of the rich-panel you can see at the main richfaces demo at:
Binary Mojarra distribution already contains |ezcomp00| and |ezcomp01| applications that show the basic of the PDL. We are not going to repeat them, but will create something different. RichFaces has a |rich:panel|, pretty simple, but useful JSF component. It represents the rectangle with a body and an optional header defined by a facet. The look-n-feel of the |rich:panel| is defined with some set of css rules. Some of those rules refer to the parameters taken from the skin parameters. I.e. css has static and dynamically generated rules. If header presents, it is filled with background gradient generated by java class that also uses the skin parameters as base colors for generated gradient. The working example of the rich-panel you can see at the main richfaces demo at:
From line 8 changed to line 8:
Actually, RichFaces has a CDK (Component Development Kit) that is used for creating all 100\+ RichFaces component. CDK is maven based tool that generate components based on the meta-data, java classes and jspx templates that define the component layout. The |rich:panel| was exactly the component that we use to test drive the first versions of CDK. So, now, we just to pass the same path, but using a new standard of JSF 2.0 - Page Declaration Language.
Actually, RichFaces has a CDK (Component Development Kit) that is used for creating all 100\+ RichFaces component. CDK is a maven based tool that generates components based on the meta-data, java classes and jspx templates that define a component layout. The |rich:panel| was exactly the component that we use to test-drive the first versions of CDK. Hence, now we just need to follow the same path, but using a new standard of JSF 2.0 - Page Declaration Language.
From line 12 changed to line 12:
The structure of the |rich:panel| is pretty simple. It has a outer div, body div and header div optionally.
The structure of the |rich:panel| is pretty simple. It has an outer div, body div and header div optionally.
From line 22 changed to line 22:
Let see what we can do using JSF 2.0 PDL. How to create a simple component like that is shown in the ezcompXX demo and described several times in the [blogs and introduction articles=>http://jsfTutorials.net]. I like the [JSF 2.0 PREVIEW by Cagatay Civici presentation=>http://www.prime.com.tr/webcast/jsf2london/jsf2preview.pdf]. It is short and overview the key feature is JSF 2.0.
Let's see what we can do using JSF 2.0 PDL. How to create a simple component like the one shown in the ezcompXX demo and described several times in the [blogs and introduction articles=>http://jsfTutorials.net]. I like the [JSF 2.0 PREVIEW by Cagatay Civici presentation=>http://www.prime.com.tr/webcast/jsf2london/jsf2preview.pdf]. It is short and overview the key feature is JSF 2.0.
From lines 54 to 55 changed to lines 54 to 55:
We use |rich:| namespace which is defined at top of the page as |xmlns:rich="http://java.sun.com/jsf/composite/rich|.
In our case, |http://java.sun.com/jsf/composite/rich| means we have a folder with name "rich" that is located in the |{webtoot}/resources/| folder.
In our case, |http://java.sun.com/jsf/composite/rich| means we have a folder with name "rich" that is located in the |{webtoot}/resources/| folder.
We use |rich:| namespace which is defined at the top of the page as |xmlns:rich="http://java.sun.com/jsf/composite/rich|.
In our case, |http://java.sun.com/jsf/composite/rich| means we have a folder with the name "rich" that is located in the |{webtoot}/resources/| folder.
In our case, |http://java.sun.com/jsf/composite/rich| means we have a folder with the name "rich" that is located in the |{webtoot}/resources/| folder.
From line 107 changed to line 107:
Our component is represented with two tags: |composite:interface| and |composite:implementation|. The interface has a declaration for attribute set. For the same of simplicity, we avoid all other attribute, but add only the one that represent the component styling. The implementation tag contains the layout of the component. The context of the header is inserted with:
Our component is represented with two tags: |composite:interface| and |composite:implementation|. The interface has a declaration for attribute set. For the sake of simplicity, we avoid all other attributes, but add only the ones that represent the component styling. The implementation tag contains the layout of the component. The context of the header is inserted with:
From line 117 changed to line 117:
The class attributes of the div tags reference to the static name of the default component classes and to the user defined classes wired using EL expressions.
The class attributes of the div tags reference the static name of the default component classes and to the user defined classes wired using EL expressions.
From line 119 changed to line 119:
The classic h: library has some new component including |h:outputStylesheet|. We use it to reference to the static CSS file with default panel CSS rules. Note, that the used path is relative. However, the root of this relative path is located not where |panel.xhtml| is located, but from the |{webtoot}/resources/| folder.
The classic h: library has some new components including |h:outputStylesheet|. We use it to reference the static CSS file with default panel CSS rules. Note, that the used path is relative. However, the root of this relative path is located not where |panel.xhtml| is located, but where the |{webtoot}/resources/| folder is.
From line 121 changed to line 121:
So, |{webtoot}/resources/rich/css/panel.css| contains:
Thus, |{webtoot}/resources/rich/css/panel.css| contains:
From line 148 changed to line 148:
At this moment we are done with basic of the panel. Let see how to reach the rest of the |rich:panel| features. To be continued....
At this moment we are done with basic of the panel. Let's see how to reach the rest of the |rich:panel| features. To be continued....
