[jboss-cvs] jboss-seam/trinidad/examples/seamdiscs/view/layout ...
Peter Muir
peter at bleepbleep.org.uk
Wed Apr 18 08:06:28 EDT 2007
User: pmuir
Date: 07/04/18 08:06:28
Modified: trinidad/examples/seamdiscs/view/layout footer.xhtml
template.xhtml
Log:
Tidy up seamdiscs
Revision Changes Path
1.2 +233 -34 jboss-seam/trinidad/examples/seamdiscs/view/layout/footer.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: footer.xhtml
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/trinidad/examples/seamdiscs/view/layout/footer.xhtml,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- footer.xhtml 16 Apr 2007 00:28:05 -0000 1.1
+++ footer.xhtml 18 Apr 2007 12:06:27 -0000 1.2
@@ -13,12 +13,20 @@
<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>
+ 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>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>
+ <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">
@@ -28,7 +36,8 @@
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('webxml')">X</a>
</f:facet>
- <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 420px; height: 420px;"><code><!-- Not used, as we've integrated Trinidad -->
+ <pre style="height: 420px;" class="source-code"><code>
+<!-- Not used, as we've integrated Trinidad -->
<!-- <context-param>
<param-name>
org.ajax4jsf.VIEW_HANDLERS
@@ -70,8 +79,7 @@
<servlet-mapping>
<servlet-name>Trinidad Resources</servlet-name>
<url-pattern>/adf/*</url-pattern>
-</servlet-mapping>
-</code></pre>
+</servlet-mapping></code></pre>
</rich:modalPanel>
<rich:modalPanel id="facesconfigxml" width="450" height="300" left="50">
@@ -81,7 +89,8 @@
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('facesconfigxml')">X</a>
</f:facet>
- <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 420px; height: 220px;"><code><application>
+ <pre class="source-code"><code>
+<application>
<!-- Disabled when using Ajax4JSF or Trinidad -->
<!--
<view-handler>
@@ -92,9 +101,7 @@
<default-render-kit-id>
org.apache.myfaces.trinidad.core
</default-render-kit-id>
-</application>
- </code>
- </pre>
+</application></code></pre>
</rich:modalPanel>
<rich:modalPanel id="applicationxml" width="450" height="200" left="50">
@@ -104,12 +111,13 @@
<f:facet name="controls">
<a href="javascript:Richfaces.hideModalPanel('applicationxml')">X</a>
</f:facet>
- <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 420px;"><code><module>
+ <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="150">
+ <rich:modalPanel id="ajax" width="450" height="230">
<f:facet name="header">
Ajax4jsf and Trinidad: Different partial page models
</f:facet>
@@ -117,10 +125,16 @@
<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. As the example doesn't use Trinidad to render the whole page (just sections), the <code><tr:panelPartialRoot /></code>
- surrounds any Trinidad components which we want PPR to work on.</p>
+ 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="200">
+
+ <rich:modalPanel id="inplace" width="450" height="300">
<f:facet name="header">
Inplace editing
</f:facet>
@@ -128,35 +142,215 @@
<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 <code>readOnly</code> mode; once logged in,
+ 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>
- <p>You could easily achieve the same using Seam's <code><s:decorate /></code> tag - and better yet, you get complete control over styling and placement
- of labels, help text and error messages!</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="150">
+
+ <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; page parameters, <code>EntityHome</code> and <code>EntityQuery</code> are used for all CRUD
- operations. Where possible these are defined in XML, using extension only where extra functionality is needed (for example auto-suggest).</p>
+ <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="skinning" width="450" height="150">
+
+ <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>You'll notice that Trinidad and RichFaces components don't exactly provide
- a consistent look-and-feel - there are plans afoot to improve this out of the box.</p>
- <p>However both Trinidad and RichFaces have powerful and mature skinning/theming APIs
- - so you all you need to do is write some CSS!</p>
+ <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="450">
+
+ <rich:modalPanel id="datamodel" width="450" height="500">
<f:facet name="header">
Enhanced <code>DataModel</code>
</f:facet>
@@ -186,12 +380,14 @@
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 style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 420px;"><code><tr:table value="#<span>{discs.dataModel}</span>" rows="#<span>{discs.maxResults}</span>">
+ <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>
+</tr:table></code></pre>
</rich:modalPanel>
<rich:toolBar itemSeparator="square">
@@ -217,6 +413,9 @@
<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.
1.3 +2 -0 jboss-seam/trinidad/examples/seamdiscs/view/layout/template.xhtml
(In the diff below, changes in quantity of whitespace are not shown.)
Index: template.xhtml
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/trinidad/examples/seamdiscs/view/layout/template.xhtml,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -b -r1.2 -r1.3
--- template.xhtml 16 Apr 2007 00:28:05 -0000 1.2
+++ template.xhtml 18 Apr 2007 12:06:27 -0000 1.3
@@ -21,6 +21,8 @@
<ui:param name="projectName" value="SeamDiscs"/>
</ui:include>
+ <tr:messages globalOnly="true"/>
+
<div class="body">
<ui:insert name="body"/>
</div>
More information about the jboss-cvs-commits
mailing list