[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- Since the archetype currently has not made its way into the distribution, you will need to get the archetype from the Shale Subversion repository located at: - https://svn.apache.org/repos/asf/shale/maven/archetypes/shale-clay-starter-archetype + https://svn.apache.org/repos/asf/shale/maven/trunk/archetypes/shale-clay-starter-archetype After you have downloaded the sources, you need to run the following Maven2 command in the shale-starter-archetype directory:
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- /managed-bean }}} - If you look at the above definition you will see that Person has been declared as a managed bean. Because Person is defined as a managed bean, Shale will inject it into our page2 definition because we instructed it to through the use of the managed-property section. Since Person has a scope of session it will be persisted between request so that any value that we set on one request will be available on the next. Finally we see that we define a method sayHello on the TestViewController bean, and that we refer to that method in the page2Body.html in the âactionâ attribute (: [EMAIL PROTECTED]). + If you look at the above definition you will see that Person has been declared as a managed bean. Because Person is defined as a managed bean, Shale will inject it into our page2 definition because we instructed it to through the use of the managed-property section. Since Person has a scope of session it will be persisted between request so that any value that we set on one request will be available on the next. Finally we see that we define a method sayHello on the Test''View''Controller bean, and that we refer to that method in the page2Body.html in the âactionâ attribute (: [EMAIL PROTECTED]). One of the thing that separate Java``Server Faces from an ordinary webapplication is that most interaction with the server is through http POST. This means that all fields and actions must be surrounded with a form tag. @@ -424, +424 @@ /navigation-rule }}} - In TestViewController.sayHello we returned the string page3, and in the navigation rules we see that this will send us to /page3.jsf. You can define many navigation rules, and also note that a navigation rule always must have a from view. If you use the asterix (*) then that will mean that unless otherwise specified the outcomes become global rules. + In Test''View''Controller.sayHello we returned the string page3, and in the navigation rules we see that this will send us to /page3.jsf. You can define many navigation rules, and also note that a navigation rule always must have a from view. If you use the asterix (*) then that will mean that unless otherwise specified the outcomes become global rules. As a result of our action page3 will be rendered. If we look at the bodyCOntent definition for page3 in the clay-views-config.xml file we will se that it refers to page3Body.html.
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- == Preface == - This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. The attachment:ShaleClay.zip file contains a complete Maven/Eclipse project which you may use as basis for this. + This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. The attachment:ShaleClay.zip (you will need to add the dependent jar files to the WEB-INF/llib folder manually or by running mvn war:inplace) file contains a complete Maven/Eclipse project which you may use as basis for this. The easiest way to get started with Shale and Clay is by starting with the Maven2 clay-starter archetype.
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user,
You have subscribed to a wiki page or wiki category on Shale Wiki for change
notification.
The following page has been changed by Hermod Opstvedt:
http://wiki.apache.org/shale/ShaleAndClayTutorial
--
Since the archetype currently has not made its way into the distribution, you
will need to get the archetype from the Shale Subversion repository located at:
-
https://svn.apache.org/repos/asf/shale/sandbox/maven/archetypes/shale-clay-starter-archetype
+
https://svn.apache.org/repos/asf/shale/maven/archetypes/shale-clay-starter-archetype
After you have downloaded the sources, you need to run the following Maven2
command in the shale-starter-archetype directory:
@@ -83, +83 @@
attachment:ShaleClay7.jpg
In the Java sourcefolder (src/main/java) under the packagename you provided
you should find two classes:
- Person and TestVC.
+ Person and TestViewController.
In the resources folder (src/main/resources) you will find three property
files. This is actually one property file with two language provisions of it.
These can be identified by their name extention.
@@ -361, +361 @@
managed-bean id=page1
managed-bean-namepage1/managed-bean-name
managed-bean-class
- com com.acme.test.TestVC
+ com com.acme.test.TestViewController
/managed-bean-class
managed-bean-scoperequest/managed-bean-scope
/managed-bean
managed-bean id=page2
managed-bean-namepage2/managed-bean-name
managed-bean-class
- com.acme.test.TestVC
+ com.acme.test.TestViewController
/managed-bean-class
managed-bean-scoperequest/managed-bean-scope
managed-property
@@ -385, +385 @@
When Clay sees the symbol [EMAIL PROTECTED], it replaces it with the
implicitly mapped bean that Shale is providing. In our case {{{page1}}}.
- Lets take a closer look at the bean {{{com.acme.test.TestVC}}} that we are
using for our backing bean. The first thing we notice is that it inherits from
[http://shale.apache.org/shale-view AbstractViewController]. This class gives
us some hooks (callbacks) into some Shale added lifecycle methods so that we
can perform certain tasks that are relevant to that particular lifecycle. The
next thing to notice is that is refers to a class Person. If you look in the
{{{faces-config.xml}}} file again you will find the following declaration:
+ Lets take a closer look at the bean {{{com.acme.test.TestViewController}}}
that we are using for our backing bean. The first thing we notice is that it
inherits from [http://shale.apache.org/shale-view AbstractViewController].
This class gives us some hooks (callbacks) into some Shale added lifecycle
methods so that we can perform certain tasks that are relevant to that
particular lifecycle. The next thing to notice is that is refers to a class
Person. If you look in the {{{faces-config.xml}}} file again you will find the
following declaration:
{{{
managed-bean id=person
@@ -397, +397 @@
/managed-bean
}}}
- If you look at the above definition you will see that Person has been
declared as a managed bean. Because Person is defined as a managed bean, Shale
will inject it into our page2 definition because we instructed it to through
the use of the managed-property section. Since Person has a scope of session it
will be persisted between request so that any value that we set on one request
will be available on the next. Finally we see that we define a method sayHello
on the TestVC bean, and that we refer to that method in the page2Body.html in
the âactionâ attribute (: [EMAIL PROTECTED]).
+ If you look at the above definition you will see that Person has been
declared as a managed bean. Because Person is defined as a managed bean, Shale
will inject it into our page2 definition because we instructed it to through
the use of the managed-property section. Since Person has a scope of session it
will be persisted between request so that any value that we set on one request
will be available on the next. Finally we see that we define a method sayHello
on the TestViewController bean, and that we refer to that method in the
page2Body.html in the âactionâ attribute (: [EMAIL PROTECTED]).
One of the thing that separate Java``Server Faces from an ordinary
webapplication is that most interaction with the server is through http POST.
This means that all fields and actions must be surrounded with a form tag.
@@ -424, +424 @@
/navigation-rule
}}}
- In TestVC.sayHello we returned the string page3, and in the navigation rules
we see that this will send us to /page3.jsf. You can define many navigation
rules, and also note that a navigation rule
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- Your project should now compile ok. Now comes the time to look at the project it self and how it is organized. If you expand your project it should look something like this: - attachment:ShaleClay7.jpg + attachment:ShaleClay7.png In the Java sourcefolder (src/main/java) under the packagename you provided you should find two classes: Person and TestViewController.
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- To make Eclipse understand that this is an Eclipse project you need to run the following Maven2 command. - mvn eclipse:eclipse âDwtpversion=1.5 + mvn eclipse:eclipse âDwtpversion=1.5 (If you are using an older version of the Maven Eclipse plugin you may have to specify 1.0) After running this command a couple of files and a directory will be created, that is need for Eclipse. Your layout should look something like this:
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- - Describe ShaleAndClayTutorial here. + * Getting started with Shale and Clay
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- - * Getting started with Shale and Clay + = Getting started with Shale and Clay = + == Preface == + + This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. The attached zip file contains a complete Maven/Eclipse project which you may use as basis for this. + + The easiest way to get started with Shale and Clay is by starting with the Maven2 clay-starter archetype. + + Since the archetype currently has not made its way into the distribution, you will need to get the archetype from the Shale Subversion repository located at: + + https://svn.apache.org/repos/asf/shale/sandbox/maven/archetypes/shale-clay-starter-archetype + + After you have downloaded the sources, you need to run the following Maven2 command in the shale-starter-archetype directory: + + mvn clean install. + + This will build the archetype and install into your local repository so that it is available to you. + + Create a directory where you want the project, ex. C:\My projects\ShaleClay. Open a shell (CMD) and type in (on one line): + + mvn archetype:create -DarchetypeGroupId=org.apache.shale.clay -DarchetypeArtifactId=clay-starter-archetype -DarchetypeVersion=1.0-SNAPSHOT -DgroupId=com.acme.test -DpackageName=com.acme.test -DartifactId=shaleclay + + What happens here is that Maven will create a project based on Shale and Clay. The parameters are: + + * archetypeGroupId â The archetype groupIdbr/ + * archetypeArtifactId â The archetype artifactId br/ + * archetypeVersion â The archetype version numberbr/ + * groupId â The groupId of you projectbr/ + * packageName â The default package name of your project â included source is placed herebr/ + * artifactId - The groupId of you project br/ + + After you have done his, a project will have been created for you in a directory with the same name as you gave for the artifactId. Move to this directory. + + To make Eclipse understand that this is an Eclipse project you need to run the following Maven2 command. + + mvn eclipse:eclipse âDwtpversion=1.5 + + After running this command a couple of files and a directory will be created, that is need for Eclipse. Your layout should look something like this: + + attachement:shaleclaydir.gif +
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- After running this command a couple of files and a directory will be created, that is need for Eclipse. Your layout should look something like this: - attachement:shaleclaydir.gif + attachement:shaleclaydir.jpg
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- attachement:shaleclaydir.jpg + Start Eclipse and open a workspace that points to C:\My projects\ShaleClay (or wherever you chose as a workspace for this project) + + For Eclipse you now need to import the newly created project into the workspace: + + Choose âFile-Importâ. In the next dialog select General-Exisiting projects into workspace + + attachement:shaleclaydir2.jpg + http://wiki.apache.org/shale/ShaleAndClayTutorial/shaleclaydir2.jpg + + You should the get the following: + + http://wiki.apache.org/shale/ShaleAndClayTutorial/shaleclaydir.jpg + + In the field Select root directory enter the name of you workspace or use the âBrowse..â button to navigate to it. Eclipse should now list all available projects. Select the ShaleClay project and hit the âFinishâ button. + + You may see a red cross on your projectname if you have not defined the maven classpath variable âM2_REPOâ. You ca add it under Window-preferences and then Java-Build Path-Classpath Variables + + attachement:shaleclay4.jpg + + Press the New... button. In the next dialog type inn M2_REPO in the name field and in the âPath:â field you enter the path to your local Maven2 repository. Press Ok and Ok again in the next dialog. + + attachement:shaleclay5.jpg + + Eclipse will then inform you that it has to rebuild the workspace. Press the Yes button. + + If you still have a re cross after it has recompiled, check the default Java version in Eclipse. If you have Java5 as standard the cause is the compiler-level is mismatched with what Maven set when it generated the project. Go to the problems view, right click on the message and choose âQuick Fixâ + + attachement:shaleclay6.jpg + + Select Change Java compiler level to 1.4 and press âOkâ. + + Your project should now compile ok. Now comes the time to look at the project it self and how it is organized. If you expand your project it should look something like this: + + attachement:shaleclay7.jpg + + In the Java sourcefolder (src/main/java) under the packagename you provided you should find two classes: + Person og TestVC. + + In the resources folder (src/main/resources) you will find three property files. This is actually one property file with two language provisions of it. These can be identified by their nameextention. + + In the web sources folder (src/main/webapp) you will find several folders: + + The folder âimagesâ contains the images and backgrouns that are used for the site. + + The folder âpagesâ contains standard definitions (defaultxxx.html) of the various parts tghat make up the site, along with som specific definitions (pageXbody.html) + + The folder âtemplatesâ contains the template that we are using to build our site â we will return to this shortly + + The folder âthemeâ contains the cascading stylesheet we use to format our site. + + In the folder âWEB-INFâ we find all the important configurationfiles. + + attachement:shaleclay8.jpg + + Lets take a closer look at these, starting with web.xml where we find these important declarations: + +!-- Override the default suffix for extension-mapped -- +context-param + param-namejavax.faces.DEFAULT_SUFFIX/param-name + param-value.jsf/param-value +/context-param + +!-- Select JSF State Saving Mode -- +context-param + param-namejavax.faces.STATE_SAVING_METHOD/param-name + param-valueclient/param-value +/context-param + +!-- Clay Common Configuration Resources -- +context-param + param-name + org.apache.shale.clay.COMMON_CONFIG_FILES + /param-name + param-value/WEB-INF/clay-config.xml/param-value +/context-param + +!-- Clay Configuration Full XML view Resources -- +context-param + param-name + org.apache.shale.clay.FULLXML_CONFIG_FILES + /param-name + param-value/WEB-INF/clay-views-config.xml/param-value +/context-param + +!-- Clay XML View Suffix -- +context-param + param-name + org.apache.shale.clay.XML_TEMPLATE_SUFFIX + /param-name + param-value.jsf/param-value +/context-param + + These declarations (context-param) are used by Clay and the JavaServer Faces (JSF) implementation at startup. + + * javax.faces.DEFAULT_SUFFIX â Tells which page suffixes should be handled by JSF + * javax.faces.STATE_SAVING_METHOD â How should session state be persisted (Client-side or Server-side) + * org.apache.shale.clay.COMMON_CONFIG_FILES â What are the name(s )of the Clay configuration file(s), providing absolute path within the web-context + *
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- After running this command a couple of files and a directory will be created, that is need for Eclipse. Your layout should look something like this: + ##URL: attachement:shaleclaydir.jpg Start Eclipse and open a workspace that points to C:\My projects\ShaleClay (or wherever you chose as a workspace for this project)
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- What happens here is that Maven will create a project based on Shale and Clay. The parameters are: - * archetypeGroupId â The archetype groupIdbr/ + * archetypeGroupId â The archetype groupId[[BR]] - * archetypeArtifactId â The archetype artifactId br/ + * archetypeArtifactId â The archetype artifactId[[BR]] - * archetypeVersion â The archetype version numberbr/ + * archetypeVersion â The archetype version number[[BR]] - * groupId â The groupId of you projectbr/ + * groupId â The groupId of you project[[BR]] - * packageName â The default package name of your project â included source is placed herebr/ + * packageName â The default package name of your project â included source is placed here[[BR]] - * artifactId - The groupId of you project br/ + * artifactId - The groupId of you project[[BR]] After you have done his, a project will have been created for you in a directory with the same name as you gave for the artifactId. Move to this directory. @@ -39, +39 @@ After running this command a couple of files and a directory will be created, that is need for Eclipse. Your layout should look something like this: - ##URL: attachement:shaleclaydir.jpg Start Eclipse and open a workspace that points to C:\My projects\ShaleClay (or wherever you chose as a workspace for this project) @@ -49, +48 @@ Choose âFile-Importâ. In the next dialog select General-Exisiting projects into workspace attachement:shaleclaydir2.jpg - http://wiki.apache.org/shale/ShaleAndClayTutorial/shaleclaydir2.jpg You should the get the following: - http://wiki.apache.org/shale/ShaleAndClayTutorial/shaleclaydir.jpg + attachement:shaleclaydir3.jpg In the field Select root directory enter the name of you workspace or use the âBrowse..â button to navigate to it. Eclipse should now list all available projects. Select the ShaleClay project and hit the âFinishâ button. @@ -98, +96 @@ Lets take a closer look at these, starting with web.xml where we find these important declarations: -!-- Override the default suffix for extension-mapped -- +!-- Override the default suffix for extension-mapped --[[BR]] -context-param +context-param[[BR]] - param-namejavax.faces.DEFAULT_SUFFIX/param-name + param-namejavax.faces.DEFAULT_SUFFIX/param-name[[BR]] - param-value.jsf/param-value + param-value.jsf/param-value[[BR]] -/context-param +/context-param[[BR]] -!-- Select JSF State Saving Mode -- +!-- Select JSF State Saving Mode --[[BR]] -context-param +context-param[[BR]] - param-namejavax.faces.STATE_SAVING_METHOD/param-name + param-namejavax.faces.STATE_SAVING_METHOD/param-name[[BR]] - param-valueclient/param-value + param-valueclient/param-value[[BR]] -/context-param +/context-param[[BR]] -!-- Clay Common Configuration Resources -- +!-- Clay Common Configuration Resources --[[BR]] -context-param +context-param[[BR]] - param-name + param-name[[BR]] - org.apache.shale.clay.COMMON_CONFIG_FILES + org.apache.shale.clay.COMMON_CONFIG_FILES[[BR]] - /param-name + /param-name[[BR]] - param-value/WEB-INF/clay-config.xml/param-value + param-value/WEB-INF/clay-config.xml/param-value[[BR]] -/context-param +/context-param[[BR]] -!-- Clay Configuration Full XML view Resources -- +!-- Clay Configuration Full XML view Resources --[[BR]] -context-param +context-param[[BR]] - param-name + param-name[[BR]] - org.apache.shale.clay.FULLXML_CONFIG_FILES + org.apache.shale.clay.FULLXML_CONFIG_FILES[[BR]] - /param-name + /param-name[[BR]] - param-value/WEB-INF/clay-views-config.xml/param-value + param-value/WEB-INF/clay-views-config.xml/param-value[[BR]] -/context-param +/context-param[[BR]] -!-- Clay XML View Suffix -- +!-- Clay XML View Suffix --[[BR]] -context-param +context-param[[BR]] - param-name + param-name[[BR]] - org.apache.shale.clay.XML_TEMPLATE_SUFFIX + org.apache.shale.clay.XML_TEMPLATE_SUFFIX[[BR]] - /param-name + /param-name[[BR]] - param-value.jsf/param-value + param-value.jsf/param-value[[BR]] -/context-param +/context-param[[BR]] These declarations (context-param) are used by Clay and the JavaServer Faces (JSF) implementation at startup. @@ -144, +142 @@ The are the Filter defintions. A filter is a Javaclass that will be called by the webcontainer on every request that comes into it (Actually only requests that
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- These declarations (context-param) are used by Clay and the JavaServer Faces (JSF) implementation at startup. - * javax.faces.DEFAULT_SUFFIX â Tells which page suffixes should be handled by JSF + * javax.faces.DEFAULT_SUFFIX â Tells which page suffixes should be handled by JSF[[BR]] - * javax.faces.STATE_SAVING_METHOD â How should session state be persisted (Client-side or Server-side) + * javax.faces.STATE_SAVING_METHOD â How should session state be persisted (Client-side or Server-side)[[BR]] - * org.apache.shale.clay.COMMON_CONFIG_FILES â What are the name(s )of the Clay configuration file(s), providing absolute path within the web-context + * org.apache.shale.clay.COMMON_CONFIG_FILES â What are the name(s )of the Clay configuration file(s), providing absolute path within the web-context[[BR]] - * org.apache.shale.clay.FULLXML_CONFIG_FILES â What are the name(s) of the Clay configuration file(s) that tells Clay about our page definitions. + * org.apache.shale.clay.FULLXML_CONFIG_FILES â What are the name(s) of the Clay configuration file(s) that tells Clay about our page definitions.[[BR]] - * org.apache.shale.clay.XML_TEMPLATE_SUFFIX â Which page suffixes should be handled by Clay. + * org.apache.shale.clay.XML_TEMPLATE_SUFFIX â Which page suffixes should be handled by Clay.[[BR]] The are the Filter defintions. A filter is a Javaclass that will be called by the webcontainer on every request that comes into it (Actually only requests that match a certain predefined pattern â See filter-mapping below) @@ -183, +183 @@ The next file we look at is the faces-config.xml file. This file governs the setup of JSF. It is normally divided into three sections - * General information - application + * General information - application [[BR]] - * Navigation rules - navigation-rule + * Navigation rules - navigation-rule[[BR]] - * Managed beans - managed-bean + * Managed beans - managed-bean[[BR]] First in out file we define which languages this application supports; Norwegian(no) and English(en), and that the default is English. @@ -201, +201 @@ If we take a closer look at it we see that it is devided into sections. These sections are the parts of the page that naturally lend tem selves to a functionalitygroup and as such are candidates for reuse. This is known as templating. The page is formatted as a âliquid designâ layout. If you want to read up on this, a good place to start is [http://www.mardiros.net/liquid-css-layouts.html/ Carmen Mardios] + The section that the page is divided into are: + +* Pagetitle[[BR]] +* Leftmenu[[BR]] +* Content[[BR]] +* Footer[[BR]] + + body[[BR]] + div id=headspan jsfid=clay clayjsfid=@headerContent[[BR]] + allowbody=falseHeader Content/span/div[[BR]] + div id='logo'nbsp;/div[[BR]] + div id=leftnbsp;/div[[BR]] + div id=menuspan jsfid=clay clayjsfid=@leftContent[[BR]] + allowbody=falseLeft Content/span/div[[BR]] + div id=pad1nbsp;/div[[BR]] + div id='content'span jsfid=clay clayjsfid=@bodyContent[[BR]] + allowbody=falseBody Content/span/div[[BR]] + div id=pad1nbsp;/div[[BR]] + div id=footerspan jsfid=clay clayjsfid=@footerContent[[BR]] + allowbody=falseFooter Content/span/div[[BR]] + /body[[BR]] + + These sections are identifiable with the help of the attribute âclayjsfidâ on the SPAN tags. Here we see that we have: @headerContent, @leftContent. @bodyContent and @footerContent. These are what we refer to as symbols in Clay. This means that Clay processes the page looking for symbols and replaces them with their counterpart efinition in the configuration file(s). Lets look at how this template is defined as a Clay component in the clay-config.xml file: + + component jsfid=baseLayout extends=clay id=base[[BR]] + attributes[[BR]] + set name=clayJsfid value=/templates/standard.html /[[BR]] + /attributes[[BR]] + symbols[[BR]] + set name=title value=Hello World /[[BR]] + set name=leftContent value=/pages/defaultLeftNav.html /[[BR]] + set name=headerContent value=/pages/defaultHeader.html /[[BR]] + set name=bodyContent value=/pages/defaultBody.html /[[BR]] + set name=footerContent value=/pages/defaultFooter.html /[[BR]] + /symbols[[BR]] + /component[[BR]] +
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user,
You have subscribed to a wiki page or wiki category on Shale Wiki for change
notification.
The following page has been changed by Hermod Opstvedt:
http://wiki.apache.org/shale/ShaleAndClayTutorial
--
/symbols[[BR]]
/component[[BR]]
+ As we can see we have a section named âsymbolsâ, Here we instruct Clay
what to substitute the symbols with. In this case we have made some defaults to
substitute in and the will be used unless we override them when defining a
specific page. Now that we have a template to work with the work of creating
specific pages start. Since we for now only want to replace the content part
(defined by the symbol bodyContent) and the page title, we only need to create
those parts. We now need to let Clay know about these. To tell Clay how to
build our specifi pages we do that in the clay-views.xml file. If we open this
file, we will find several page definitions:
+
+ component jsfid=/page1.jsf extends=baseLayout[[BR]]
+ symbols[[BR]]
+ set name=title value=Page 1 /[[BR]]
+ set name=bodyContent value=/pages/page1Body.html
/[[BR]]
+ /symbols[[BR]]
+ /component
+ component jsfid=/page2.jsf extends=baseLayout[[BR]]
+ symbols[[BR]]
+ set name=title value=Page 2 /[[BR]]
+ set name=bodyContent value=/pages/page2Body.html
/[[BR]]
+ /symbols[[BR]]
+ /component
+ component jsfid=/page3.jsf extends=baseLayout[[BR]]
+ symbols[[BR]]
+ set name=title value=Page 3 /[[BR]]
+ set name=bodyContent value=/pages/page3Body.html
/[[BR]]
+ /symbols[[BR]]
+ /component[[BR]]
+
+ Here we define 3 components that inherit from our basecomponent
âbaseLayoutâ. As we mentioned we override the definitions of the title and
bodyContent. We have now created 3 components based on a common template, but
where the title and content vary. If we now look at for instance page1Body.html:
+
+ h3[[BR]]
+ span jsfid=outputText value=#{messages['content.title.page1']}
allowBody=falseClay template application - Page 1/span[[BR]]
+ /h3[[BR]]
+ p[[BR]]
+ span jsfid=outputText value=#{messages['content.message.page1']}
allowBody=falseThis is Page 1 content/span[[BR]]
+ /p[[BR]]
+
+ then we see that we refer to the jsfid âoutputTextâ. This is one of the
standard predefined Clay components that we can utilize. Itâs purpose is to
output text. Further we refer to â#{messages['content.message.page1']}. This
is a reference to a âmanaged-beanâ named messages. This is a bean that
Shale will instantiate for us, If you open the faces-config.xml file you will
find this at the bottom:
+
+ !-- Make resources available to the pages by defining it here (in a
page use messages['propertyname'] as value --[[BR]]
+ managed-bean[[BR]]
+ managed-bean-namemessages/managed-bean-name[[BR]]
+ managed-bean-class[[BR]]
+ org.apache.shale.util.LoadBundle[[BR]]
+ /managed-bean-class[[BR]]
+ managed-bean-scopeapplication/managed-bean-scope[[BR]]
+ managed-property[[BR]]
+ property-namebasename/property-name[[BR]]
+ value[[BR]]
+ ResourceBundle[[BR]]
+ /value[[BR]]
+ /managed-property[[BR]]
+ /managed-bean[[BR]]
+
+ Here we define the messages bean. In the this case it is a special purpose
Shale bean. It purpose it to make available to us a resourcebundle that we have
created. The name of that is ResourceBundle.properties. You will find it the
folder src/main/resources. This bean is available application wide (given by
the scope section). It supports internationalization (I18N), so we can have
several versions of the file where the are unique by their extension (_en, _no
etc.).
+
+ Another attribute to note is âallowBodyâ. This attribute tells Clay
whether or not to include any content within this tags body or not. Another way
to achieve the same is through the Clay meta information !-- ### clay:remove
### -- !-- ### /clay:remove ### --. One of the nice things about this that
we can have mock content on a page so that during design time w eget the full
picture, and then have it removed during runtime so that it does not interfere
with the actual content (Open the page in a browser to see this effect).
+
+ If we more on and look at the second page (/page2.jsf) and its content
(pageBody2.html) we see that we have used more of Clays functionalities.
+
+ h3[[BR]]
+ span jsfid=outputText value=#{messages['content.title.page2']}
allowBody=falseClay template application - Page 2/span[[BR]]
+ /h3[[BR]]
+ p[[BR]]
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- == Preface == + + /!\ '''Edit conflict - other version:''' This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. [attachment:ShaleClay.zip/ This] attached zip file contains a complete Maven/Eclipse project which you may use as basis for this. + + /!\ '''Edit conflict - your version:''' + This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. [attachment:ShaleClay.zip/ This] attached zip file contains a complete Maven/Eclipse project which you may use as basis for this. + + /!\ '''End of edit conflict''' The easiest way to get started with Shale and Clay is by starting with the Maven2 clay-starter archetype.
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- == Preface == - /!\ '''Edit conflict - other version:''' This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. [attachment:ShaleClay.zip/ This] attached zip file contains a complete Maven/Eclipse project which you may use as basis for this. - - /!\ '''Edit conflict - your version:''' - This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. [attachment:ShaleClay.zip/ This] attached zip file contains a complete Maven/Eclipse project which you may use as basis for this. - - /!\ '''End of edit conflict''' The easiest way to get started with Shale and Clay is by starting with the Maven2 clay-starter archetype.
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- == Preface == - This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. [attachment:ShaleClay.zip/ This] attached zip file contains a complete Maven/Eclipse project which you may use as basis for this. + This tutorial is based on Maven and Eclipse. The guidelines also apply to any other scenario, but you must find the appropriate way of doing it within your IDE. The attachment:ShaleClay.zip file contains a complete Maven/Eclipse project which you may use as basis for this. The easiest way to get started with Shale and Clay is by starting with the Maven2 clay-starter archetype.
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user,
You have subscribed to a wiki page or wiki category on Shale Wiki for change
notification.
The following page has been changed by Hermod Opstvedt:
http://wiki.apache.org/shale/ShaleAndClayTutorial
--
/managed-bean-class[[BR]]
managed-bean-scoperequest/managed-bean-scope[[BR]]
/managed-bean[[BR]]
+ managed-bean id=page2[[BR]]
+ managed-bean-namepage2/managed-bean-name[[BR]]
+ managed-bean-class[[BR]]
+ com.acme.test.TestVC[[BR]]
+ /managed-bean-class[[BR]]
+ managed-bean-scoperequest/managed-bean-scope[[BR]]
+ managed-property[[BR]]
+ property-nameperson/property-name[[BR]]
+ property-class[[BR]]
+ com.acme.test.Person[[BR]]
+ /property-class[[BR]]
+ value#{person}/value[[BR]]
+ /managed-property[[BR]]
+ /managed-bean[[BR]]
+
- What we do here is to define what is known as a backing bean or managed bean.
This is a that Shale will make available to us. Shale uses an implicit mapping
strategy to decide which beans it should instantiate for a given view. Since
our page is called page1, it will then look for a managed bean with the same
name and instantiate it. If you have a path to your page that spans several
folders as in /foo/bar/pages/page1 then you need to define it as
foo$bar$pages$page1 for Shale to find it and associate it with the page.
+ What we do here is to define what is known as a backing beans or managed
beans. These are beans that Shale will make available to us. Shale uses an
implicit mapping strategy to decide which beans it should instantiate for a
given view. If our page is called page1, it will then look for a managed bean
with the same name and instantiate it. If you have a path to your page that
spans several folders as in /foo/bar/pages/page1 then you need to define it as
foo$bar$pages$page1 for Shale to find it and associate it with the page.
- Clay will when it sees the symbol managed-bean-name, replace it with the
implicitly mapped bean that Shale is providing. In our case page1
+ Clay will when it sees the symbol managed-bean-name, replace it with the
implicitly mapped bean that Shale is providing. In our case page1.
- Lets take a closer look at this bean (com.acme.test.TestVC). The first thing
we notice is that it inherits from fra
[http://shale.apache.org/shale-view/index.html/ AbstractViewController]. This
class gives us some hooks (callbacks) into some Shale added lifecycle methods
so that we can perform certain tasks that are relevant to that particular
lifecycle. The next thing to notice is that is refers to a class Person. If you
look in the faces-config.xml file again you will find the following declaration:
+ Lets take a closer look at the bean (com.acme.test.TestVC) that we are using
for our backing bean. The first thing we notice is that it inherits from fra
[http://shale.apache.org/shale-view/index.html/ AbstractViewController]. This
class gives us some hooks (callbacks) into some Shale added lifecycle methods
so that we can perform certain tasks that are relevant to that particular
lifecycle. The next thing to notice is that is refers to a class Person. If you
look in the faces-config.xml file again you will find the following declaration:
managed-bean id=person[[BR]]
managed-bean-nameperson/managed-bean-name[[BR]]
@@ -359, +374 @@
managed-bean-scopesession/managed-bean-scope[[BR]]
/managed-bean[[BR]]
+ If you look at the above definition you will see that Person has been
declared as a managed bean. Because Person is defined as a managed bean, Shale
will inject it into our page2 definition because we instructed it to through
the use of the managed-property section. Since Person has a scope of session it
will be persisted between request so that any value that we set on one request
will be available on the next. Finally we see that we define a method sayHello
on the TestVC bean, and that we refer to that method in the page2Body.html in
the âactionâ attribute (: [EMAIL PROTECTED]).
+
+ One of the thing that separate JavaServer Faces from an ordinary
webapplication is that most interaction with the server is through http POST.
This means that all fields and actions must be surrounded with a form tag.
+
+ Another important thing to notice is that if declare your backing beans to
extend AbstractViewController you have to declare them with request scope for
the lifecycle methods to be called. If you declare it with scope session they
will not be called!
+
+ When we do a post against the server JSF/Shale will populate all fields in
the managed bean that we have associated with fields on the page (There is
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user,
You have subscribed to a wiki page or wiki category on Shale Wiki for change
notification.
The following page has been changed by Hermod Opstvedt:
http://wiki.apache.org/shale/ShaleAndClayTutorial
--
Another important thing to notice is that if declare your backing beans to
extend AbstractViewController you have to declare them with request scope for
the lifecycle methods to be called. If you declare it with scope session they
will not be called!
- When we do a post against the server JSF/Shale will populate all fields in
the managed bean that we have associated with fields on the page (There is a
lot of other things going on too but that is beyond the scope of this
tutorial). That means that when the method sayHello is invoked a bean Person
will have been instantiated and filled with the values coming from our page. In
the method sayHello we do not actually do anything other that return a string.
+ When we do a post against the server JSF/Shale will populate all fields in
the managed bean that we have associated with fields on the page (There is a
lot of other things going on too but that is beyond the scope of this
tutorial). That means that when the method sayHello is invoked a bean Person
will have been instantiated and filled with the values coming from our page. In
the method sayHello we do not actually do anything other that return a string.
This string is used by JSF to figure out which view it should render. This is
also defined in the faces-config.xml file under the navigation rules section.
+
+ navigation-rule[[BR]]
+ !-- These pages should be accessable form everywhere --[[BR]]
+ from-view-id*/from-view-id[[BR]]
+ navigation-case[[BR]]
+ from-outcomehome/from-outcome[[BR]]
+ to-view-id/page1.jsf/to-view-id[[BR]]
+ /navigation-case[[BR]]
+ navigation-case[[BR]]
+ from-outcomepage2/from-outcome[[BR]]
+ to-view-id/page2.jsf/to-view-id[[BR]]
+ /navigation-case[[BR]]
+ navigation-case[[BR]]
+ from-outcomepage3/from-outcome[[BR]]
+ to-view-id/page3.jsf/to-view-id[[BR]]
+ /navigation-case[[BR]]
+ /navigation-rule[[BR]]
+
+ In TestVC.sayHello we returned the string page3, and in the navigation rules
we see that this will send us to /page3.jsf. You can define many navigation
rules, and also note that a navigation rule always must have a from view. If
you use the asterix (*) then that will mean that unless otherwise specified the
outcomes become global rules.
+
+ As a result of our action page3 will be rendered. If we look at the
bodyCOntent definition for page3 in the clay-views-config.xml file we will se
that it refers to page3Body.html.
+
+ h3[[BR]]
+ span jsfid=outputText value=#{messages['content.title.page3']}
allowBody=falseClay template application - Page 3/span[[BR]]
+ /h3[[BR]]
+ p[[BR]]
+ span jsfid=outputText value=#{messages['content.message.page3']}
allowBody=falseThis is Page 3 content/span[[BR]]
+ /p[[BR]]
+ p[[BR]]
+ span jsfid=outputText value=#{messages['hello']}
allowBody=falseHello/span span jsfid=outputText value=#{person.name}
allowBody=falseWorld/span[[BR]]
+ /p[[BR]]
+
+ Here again we refer to the person bean, butt his time we are displaying a
value from it (#{person.name}. As we mentioned this bean has bean declared
with session scope, so that the name we entered on page2 is now available on
page3 for as long as our session exists. We can also refer to any other managed
bean, and properties in these.
+
+ We have now been through a simple Shale/Clay application. It is recommended
that you play around with it to see the effects of your changes. When you are
ready to move on a natural step is to follow the [:CreatingClayComponents/
Create Clay components tutorial] to learn haw to create reusable Clay
components for your pages.
+
+ Hermod Opstvedt
+ February 2007
+
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user,
You have subscribed to a wiki page or wiki category on Shale Wiki for change
notification.
The following page has been changed by Hermod Opstvedt:
http://wiki.apache.org/shale/ShaleAndClayTutorial
--
span jsfid=outputText value=#{messages['hello']}
allowBody=falseHello/span span jsfid=outputText value=#{person.name}
allowBody=falseWorld/span[[BR]]
/p[[BR]]
- Here again we refer to the person bean, butt his time we are displaying a
value from it (#{person.name}. As we mentioned this bean has bean declared
with session scope, so that the name we entered on page2 is now available on
page3 for as long as our session exists. We can also refer to any other managed
bean, and properties in these.
+ Here again we refer to the person bean, but this time we are displaying a
value from it (#{person.name}. As we mentioned this bean has bean declared
with session scope, so that the name we entered on page2 is now available on
page3 for as long as our session exists. We can also refer to any other managed
bean, and properties in these.
- We have now been through a simple Shale/Clay application. It is recommended
that you play around with it to see the effects of your changes. When you are
ready to move on a natural step is to follow the [:CreatingClayComponents/
Create Clay components tutorial] to learn haw to create reusable Clay
components for your pages.
+ We have now been through a simple Shale/Clay application. It is recommended
that you play around with it to see the effects of your changes. When you are
ready to move on a natural step is to follow the [:CreatingClayComponents/
Create Clay components tutorial] to learn how to create reusable Clay
components for your pages.
Hermod Opstvedt
February 2007
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user,
You have subscribed to a wiki page or wiki category on Shale Wiki for change
notification.
The following page has been changed by Hermod Opstvedt:
http://wiki.apache.org/shale/ShaleAndClayTutorial
--
Here again we refer to the person bean, but this time we are displaying a
value from it (#{person.name}. As we mentioned this bean has bean declared
with session scope, so that the name we entered on page2 is now available on
page3 for as long as our session exists. We can also refer to any other managed
bean, and properties in these.
- We have now been through a simple Shale/Clay application. It is recommended
that you play around with it to see the effects of your changes. When you are
ready to move on a natural step is to follow the [:CreatingClayComponents/
Create Clay components tutorial] to learn how to create reusable Clay
components for your pages.
+ We have now been through a simple Shale/Clay application. It is recommended
that you play around with it to see the effects of your changes. When you are
ready to move on a natural step is to follow the
[:CreatingClayComponents:Create Clay components tutorial] to learn how to
create reusable Clay components for your pages.
Hermod Opstvedt
February 2007
[Shale Wiki] Update of ShaleAndClayTutorial by Hermod Opstvedt
Dear Wiki user, You have subscribed to a wiki page or wiki category on Shale Wiki for change notification. The following page has been changed by Hermod Opstvedt: http://wiki.apache.org/shale/ShaleAndClayTutorial -- After running this command a couple of files and a directory will be created, that is need for Eclipse. Your layout should look something like this: - attachment:shaleclaydir1.jpg + attachment:ShaleClaydir1.jpg == Lets start ==
