[jboss-cvs] jboss-seam/examples/seamdiscs/view/layout ...
Peter Muir
peter at bleepbleep.org.uk
Sat Jul 14 19:48:40 EDT 2007
User: pmuir
Date: 07/07/14 19:48:40
Added: examples/seamdiscs/view/layout footer.xhtml
display.xhtml edit.xhtml loginout.xhtml
template.xhtml menu.xhtml
Log:
Move seamdiscs example, upgrade it to Trinidad 1.2.1
Revision Changes Path
1.1 date: 2007/07/14 23:48:40; author: pmuir; state: Exp;jboss-seam/examples/seamdiscs/view/layout/footer.xhtml
Index: footer.xhtml
===================================================================
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.ajax4jsf.org/rich"
xmlns:tr="http://myfaces.apache.org/trinidad">
<rich:modalPanel id="creating" width="450" height="250">
<f:facet name="header">
Creating SeamDiscs
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('creating')">X</a>
</f:facet>
<p>This example was built using seam-gen. To add in Trinidad, the trinidad-api jar was added to
the ear (and referenced from <a href="javascript:Richfaces.showModalPanel('applicationxml')">
<code>application.xml</code></a>) and the trinidad-impl jar, <code>jboss-seam-trinidad.jar</code>
(Seam-Trinidad integration) & <code>a4j-trinidad.jar</code> (Ajax4jsf-Trinidad integration)
were added to <code>WEB-INF/lib</code>.</p>
<p>A few alterations were needed in <a href="javascript:Richfaces.showModalPanel('webxml')">
<code>web.xml</code></a> and <a href="javascript:Richfaces.showModalPanel('facesconfigxml')">
<code>faces-config.xml</code></a>.</p>
<p>The <code>trinidad-config.xml</code> file was used to disable client-side validation for a
more consistent user experience.</p>
<p>Of course Trinidad and RichFaces offer some complementary components (e.g. tables, trees)
- it's up to you which you choose!</p>
</rich:modalPanel>
<rich:modalPanel id="webxml" width="450" height="500" left="50">
<f:facet name="header">
<code>web.xml</code>
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('webxml')">X</a>
</f:facet>
<pre style="height: 420px;" class="source-code"><code>
<!-- Not used, as we've integrated Trinidad -->
<!-- <context-param>
<param-name>
org.ajax4jsf.VIEW_HANDLERS
</param-name>
<param-value>
com.sun.facelets.FaceletViewHandler
</param-value>
</context-param>-->
...
<context-param>
<param-name>
org.apache.myfaces.trinidad.ALTERNATE_VIEW_HANDLER
</param-name>
<param-value>
com.sun.facelets.FaceletViewHandler
</param-value>
</context-param>
<filter>
<filter-name>Trinidad</filter-name>
<filter-class>
org.apache.myfaces.trinidad.webapp.TrinidadFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>Trinidad</filter-name>
<url-pattern>*.seam</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>Trinidad Resources</servlet-name>
<servlet-class>
org.apache.myfaces.trinidad.webapp.ResourceServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Trinidad Resources</servlet-name>
<url-pattern>/adf/*</url-pattern>
</servlet-mapping></code></pre>
</rich:modalPanel>
<rich:modalPanel id="facesconfigxml" width="450" height="300" left="50">
<f:facet name="header">
<code>faces-config.xml</code>
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('facesconfigxml')">X</a>
</f:facet>
<pre class="source-code"><code>
<application>
<!-- Disabled when using Ajax4JSF or Trinidad -->
<!--
<view-handler>
com.sun.facelets.FaceletViewHandler
</view-handler>
-->
<!-- Enable Trinidad renderkit -->
<default-render-kit-id>
org.apache.myfaces.trinidad.core
</default-render-kit-id>
</application></code></pre>
</rich:modalPanel>
<rich:modalPanel id="applicationxml" width="450" height="200" left="50">
<f:facet name="header">
<code>application.xml</code>
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('applicationxml')">X</a>
</f:facet>
<pre class="source-code"><code>
<module>
<java>trinidad-api-1.0.0-incubating.jar</java>
</module></code></pre>
</rich:modalPanel>
<rich:modalPanel id="ajax" width="450" height="230">
<f:facet name="header">
Ajax4jsf and Trinidad: Different partial page models
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('ajax')">X</a>
</f:facet>
<p>Trinidad and Ajax4jsf both provide partial page refresh and submit. For Trinidad PPR to work, it needs to be surrounded by a component
which enables PPR. The example uses <code><tr:panelPartialRoot /></code> to achieve this:</p>
<pre class="source-code"><code>
<tr:panelPartialRoot>
<tr:form>
<tr:table value="#<span>{artists.dataModel}</span>" var="artist">
<tr:column>
...</code></pre>
</rich:modalPanel>
<rich:modalPanel id="inplace" width="450" height="300">
<f:facet name="header">
Inplace editing
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('inplace')">X</a>
</f:facet>
<p>The example also shows how you can use Trinidad components to achieve "in-place" editing - the same views are used to display and edit
informtation. A casual visitor to the site navigates around, and see's the components in read only mode; once logged in,
these components are editable, and button's are rendered to submit information.</p>
<pre class="source-code"><code>
<tr:inputText
label="Artist"
value="#<span>{artist.name}</span>"
readOnly="#<span>{not identity.loggedIn}</span>"
required="true"
autoSubmit="true"/></code></pre>
<p>Trinidad makes it easy by providing a <code>readOnly</code> attribute for components - but you could easily achieve the
same using Seam's <code><s:decorate /></code> tag.</p>
</rich:modalPanel>
<rich:modalPanel id="framework" width="450" height="250">
<f:facet name="header">
Seam Application Framework
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('framework')">X</a>
</f:facet>
<p>The example uses the Seam Application Framework. Where possible XML is used,
using extension only where extra functionality is needed.</p>
<p>An <a href="javascript:Richfaces.showModalPanel('componentsxml')"><code>EntityHome</code></a>
and is used for each CRUD, and an
<a href="javascript:Richfaces.showModalPanel('componentsxml')"><code>EntityQuery</code></a>
for clickable lists.</p>
<p>Each item in the list can be clicked - an <code><s:link /></code> and an
<code><f:param /></code> is used to <a href="javascript:Richfaces.showModalPanel('clickablelist')">link</a>
to the detail view. It's wired using <a href="javascript:Richfaces.showModalPanel('clickablelist')"><code>pages.xml</code></a>.
</p>
<p>The CRUD page uses the <code>EntityHome</code> object to <a href="javascript:Richfaces.showModalPanel('crud')">create, update or
delete</a> the entity as necessary. <a href="javascript:Richfaces.showModalPanel('crud')"><code>pages.xml</code></a>
is used to direct the user back to the list view.</p>
</rich:modalPanel>
<rich:modalPanel id="clickablelist" width="450" height="350" left="50">
<f:facet name="header">
<code>Clickable lists</code>
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('clickablelist')">X</a>
</f:facet>
<pre class="source-code"><code>
<s:link action="artist">
<tr:outputText value="#<span>{artist.name}</span>" />
<f:param name="artistId" value="#<span>{artist.id}</span>" />
</s:link></code></pre>
<pre class="source-code"><code>
<page>
<param name="artistId" value="#<span>{artistHome.id}</span>"
converterId="javax.faces.Integer"/>
<navigation>
<rule if-outcome="artist">
<begin-conversation flush-mode="manual"/>
<redirect view-id="/artist.xhtml"/>
</rule>
</navigation>
</page></code></pre>
</rich:modalPanel>
<rich:modalPanel id="componentsxml" width="450" height="330" left="50">
<f:facet name="header">
<code>components.xml</code>
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('componentsxml')">X</a>
</f:facet>
<pre class="source-code"><code>
<framework:entity-home
entity-class="org.jboss.seam.example.seamdiscs.model.Disc"
name="discHome"/>
<factory
name="disc"
value="#<span>{discHome.instance}</span>"/></code></pre>
<pre class="source-code"><code>
<framework:entity-query
name="discs"
ejbql="select disc from Disc disc"
order="disc.name ASC"
max-results="5"/></code></pre>
</rich:modalPanel>
<rich:modalPanel id="crud" width="450" height="480" left="50">
<f:facet name="header">
<code>CRUD</code>
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('crud')">X</a>
</f:facet>
<pre class="source-code"><code>
<h:commandButton action="#<span>{artistHome.update}</span>"
value="Save" rendered="#<span>{artistHome.managed}</span>" />
<h:commandButton action="#<span>{artistHome.persist}</span>"
value="Save" rendered="#<span>{not artistHome.managed}</span>" />
<s:button action="cancel" value="Cancel" /></code></pre>
<pre class="source-code"><code>
<page>
<param name="artistId" value="#{artistHome.id}"
converterId="javax.faces.Integer"/>
<navigation>
<rule if-outcome="cancel">
<end-conversation/>
<redirect view-id="/artists.xhtml" />
</rule>
<rule if-outcome="updated">
<end-conversation/>
<redirect view-id="/artists.xhtml" />
</rule>
<rule if-outcome="persisted">
<end-conversation/>
<redirect view-id="/artists.xhtml" />
</rule>
</navigation>
</page></code></pre>
</rich:modalPanel>
<rich:modalPanel id="tree" width="450" height="250">
<f:facet name="header">
Using Trinidad's Tree
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('tree')">X</a>
</f:facet>
<p>It's been said that the quality of a tree component is an indication of
the quality of a component set. Trinidad has a really robust tree component,
- but it's <code>TreeModel</code> can be a bit confusing. Luckily it provides
a good default implementation - the <code>ChildPropertyTreeModel</code>.</p>
<p>The <code>ChildPropertyTreeModel</code> takes two parameters - the <code>Collection</code>
to use for the tree's nodes, and a <code>String</code> property which specifies
the field or get/set pair to use for accessing each elements child. If the property
returns <code>null</code>, then the node is a leaf-node.</p>
<p>The example uses a slightly modified
<a href="javascript:Richfaces.showModalPanel('treecode')"><code>ChildPropertyTreeModel</code></a>
- one that says discs are the leaves of the tree.
<a href="javascript:Richfaces.showModalPanel('treecode')">Different labels</a> are
rendered depending on the type of node.
</p>
</rich:modalPanel>
<rich:modalPanel id="treecode" width="450" height="500" left="50">
<f:facet name="header">
<code>Tree</code>
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('treecode')">X</a>
</f:facet>
<pre class="source-code"><code>
public TreeModel getTree() {
return new ChildPropertyTreeModel(artists, "discs") {
protected Object getChildData(Object parentData) {
if (parentData instanceof Artist) {
return super.getChildData(parentData);
} else {
return null;
}
}
};
}</code></pre>
<pre class="source-code"><code>
<tr:tree value="#<span>{artistHome.tree}</span>" var="var">
<f:facet name="nodeStamp">
<ui:fragment>
<s:link
action="artist"
rendered="#<span>{var.class.simpleName eq 'Artist'
or var.class.simpleName eq 'Band'}</span>">
<tr:outputText value="#<span>{var.name}</span>" />
<f:param name="artistId" value="#<span>{var.id}</span>" />
</s:link>
</ui:fragment>
</f:facet>
</tr:tree></code></pre>
</rich:modalPanel>
<rich:modalPanel id="skinning" width="450" height="180">
<f:facet name="header">
Look and Feel
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('skinning')">X</a>
</f:facet>
<p>Both Trinidad and RichFaces have powerful and mature skinning/theming APIs
- so you all you need to do is write some CSS! For seamdiscs, we took a RichFaces
skin, and adjusted the trinidad skin to fit with it. To do this, we added
the skin to <code>trinidad-skins.xml</code>, and told Trinidad to use it in
<code>trinidad-config.xml</code>. You can find more information about Trinidad
skinning on the Trinidad wiki.</p>
<p>You'll notice that Trinidad and RichFaces components don't provide
a consistent look-and-feel out of the box - there are plans afoot to improve this!</p>
</rich:modalPanel>
<rich:modalPanel id="datamodel" width="450" height="500">
<f:facet name="header">
Enhanced <code>DataModel</code>
</f:facet>
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('datamodel')">X</a>
</f:facet>
<p>JSF component sets like Trinidad, Tomahawk and IceFaces give you an enhanced
<code>h:dataTable</code> which has built-in sorting, paging and other goodies.
However, there is one big flaw - the entire data set is loaded and sorted/paged
in memory, when really you want to get your persistence layer (be it an ORM or
just a database) to do this for - a sort translates naturally to an <code>ORDER BY</code>,
and paging translates naturally to a <code>LIMIT</code> clauses.</p>
<p>Seam on the other hand provides tight integration to your persistence layer,
and supports paging and sorting of queries through the <code>Query</code>
object in the Seam Application Framework - but you have to write a load more JSF
to get it integrated. We can get the best of both worlds by using the enhanced
<code>DataModel</code> in Trinidad, which supports paging and sorting backed by
a <code>Query</code>.</p>
<p>The <code>jboss-seam-trinidad.jar</code> (built using the build file in the
<code>trinidad</code> directory in Seam CVS) provides a <code>DataModel</code>
which, when backed by a <code>Query</code>, provides lazy loading of data for
paging, sorting in the persistence context and strong row keys. You can use
it by adding the <code>jboss-seam-trinidad.jar</code> to your <code>WEB-INF/lib</code>
- no need to alter your facelet. One caveat is that you must ensure the rows property
on the <code>Query</code> is the same as the <code>maxResults</code> property on
the <code>Query</code>. Take a look at the seamdiscs example in the
<code>trinidad/examples</code> directory to see it in action.</p>
<pre class="source-code"><code>
<tr:table
value="#<span>{discs.dataModel}</span>"
rows="#<span>{discs.maxResults}</span>">
<tr:column>
...
</tr:column
</tr:table></code></pre>
</rich:modalPanel>
<rich:toolBar itemSeparator="square">
<rich:toolBarGroup>
Powered by <a href="http://labs.jboss.com/jbossseam">Seam</a>
</rich:toolBarGroup>
<rich:toolBarGroup itemSeparator="square">
<s:fragment>
<a href="javascript:Richfaces.showModalPanel('creating')">Creating SeamDiscs</a>
</s:fragment>
<s:fragment>
<a href="javascript:Richfaces.showModalPanel('ajax')">Ajax4jsf and Trinidad</a>
</s:fragment>
<s:fragment>
<a href="javascript:Richfaces.showModalPanel('inplace')">Inplace Editing</a>
</s:fragment>
<s:fragment>
<a href="javascript:Richfaces.showModalPanel('framework')">Seam Application Framework</a>
</s:fragment>
<s:fragment>
<a href="javascript:Richfaces.showModalPanel('skinning')">Look and Feel</a>
</s:fragment>
<s:fragment>
<a href="javascript:Richfaces.showModalPanel('datamodel')">Enhanced DataModel</a>
</s:fragment>
<s:fragment>
<a href="javascript:Richfaces.showModalPanel('tree')">Tree Component</a>
</s:fragment>
</rich:toolBarGroup>
<rich:toolBarGroup location="right">
Generated by seam-gen.
</rich:toolBarGroup>
</rich:toolBar>
</ui:composition>
1.3 +0 -0 jboss-seam/examples/seamdiscs/view/layout/display.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: display.xhtml
===================================================================
RCS file: display.xhtml
diff -N display.xhtml
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ display.xhtml 14 Jul 2007 23:48:40 -0000 1.3
@@ -0,0 +1,16 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:s="http://jboss.com/products/seam/taglib">
+
+ <div class="prop">
+ <span class="name">
+ <ui:insert name="label"/>
+ </span>
+ <span class="value">
+ <ui:insert/>
+ </span>
+ </div>
+
+</ui:composition>
\ No newline at end of file
1.3 +0 -0 jboss-seam/examples/seamdiscs/view/layout/edit.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: edit.xhtml
===================================================================
RCS file: edit.xhtml
diff -N edit.xhtml
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ edit.xhtml 14 Jul 2007 23:48:40 -0000 1.3
@@ -0,0 +1,24 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:s="http://jboss.com/products/seam/taglib">
+
+ <div class="prop">
+
+ <s:label styleClass="name #{invalid?'errors':''}">
+ <ui:insert name="label"/>
+ <s:span styleClass="required" rendered="#{required}">*</s:span>
+ </s:label>
+
+ <span class="value #{invalid?'errors':''}">
+ <s:validateAll>
+ <ui:insert/>
+ </s:validateAll>
+ </span>
+
+ <s:message styleClass="error errors"/>
+
+ </div>
+
+</ui:composition>
\ No newline at end of file
1.3 +0 -0 jboss-seam/examples/seamdiscs/view/layout/loginout.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: loginout.xhtml
===================================================================
RCS file: loginout.xhtml
diff -N loginout.xhtml
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ loginout.xhtml 14 Jul 2007 23:48:40 -0000 1.3
@@ -0,0 +1,12 @@
+<div class="loginout"
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:s="http://jboss.com/products/seam/taglib">
+ <h:outputText value="Welcome, #{identity.username}" rendered="#{identity.loggedIn}"/>
+  | 
+ <s:link view="/login.xhtml" value="Login" rendered="#{not identity.loggedIn}"/>
+ <s:link view="/home.xhtml" action="#{identity.logout}" value="Logout" rendered="#{identity.loggedIn}"/>
+ |
+</div>
1.3 +7 -6 jboss-seam/examples/seamdiscs/view/layout/template.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: template.xhtml
===================================================================
RCS file: template.xhtml
diff -N template.xhtml
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ template.xhtml 14 Jul 2007 23:48:40 -0000 1.3
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:s="http://jboss.com/products/seam/taglib"
+ xmlns:trh="http://myfaces.apache.org/trinidad/html"
+ xmlns:tr="http://myfaces.apache.org/trinidad"
+ xmlns:rich="http://richfaces.ajax4jsf.org/rich">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>SeamDiscs</title>
+ <link href="stylesheet/theme.css" rel="stylesheet" type="text/css" />
+ <trh:styleSheet />
+</head>
+
+<body>
+
+ <ui:include src="menu.xhtml">
+ <ui:param name="projectName" value="SeamDiscs"/>
+ </ui:include>
+
+ <tr:messages globalOnly="true"/>
+
+ <div class="body">
+ <ui:insert name="body"/>
+ </div>
+
+ <ui:include src="footer.xhtml" />
+
+</body>
+</html>
1.4 +0 -0 jboss-seam/examples/seamdiscs/view/layout/menu.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: menu.xhtml
===================================================================
RCS file: menu.xhtml
diff -N menu.xhtml
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu.xhtml 14 Jul 2007 23:48:40 -0000 1.4
@@ -0,0 +1,20 @@
+<rich:toolBar
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:s="http://jboss.com/products/seam/taglib"
+ xmlns:rich="http://richfaces.ajax4jsf.org/rich"
+ itemSeparator="line">
+ <rich:toolBarGroup>
+ <h:outputText value="#{projectName}:"/>
+ <s:link view="/home.xhtml" value="Home" propagation="none"/>
+ <s:link view="/artists.xhtml" value="Artists" propagation="none"/>
+ <s:link view="/discs.xhtml" value="Discs" propagation="none"/>
+ </rich:toolBarGroup>
+ <rich:toolBarGroup location="right">
+ <h:outputText value="Welcome, #{identity.username}" rendered="#{identity.loggedIn}"/>
+ <s:link view="/login.xhtml" value="Login" rendered="#{not identity.loggedIn}"/>
+ <s:link view="/home.xhtml" action="#{identity.logout}" value="Logout" rendered="#{identity.loggedIn}"/>
+ </rich:toolBarGroup>
+</rich:toolBar>
More information about the jboss-cvs-commits
mailing list