9:34 a.m.
Author: msorokin
Date: 2009-05-08 10:34:09 -0400 (Fri, 08 May 2009)
New Revision: 14080
Added:
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/a4j_status.xml
Removed:
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/datascroller.xml
Modified:
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.xml
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/button.xml
trunk/docs/realworld_app_guide/en/src/main/docbook/master.xml
Log:
added new chapters
https://jira.jboss.org/jira/browse/RF-5768
Added: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/a4j_status.xml
===================================================================
--- trunk/docs/realworld_app_guide/en/src/main/docbook/includes/a4j_status.xml
(rev 0)
+++ trunk/docs/realworld_app_guide/en/src/main/docbook/includes/a4j_status.xml 2009-05-08
14:34:09 UTC (rev 14080)
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<section id="a4j_status">
+ <title>The <emphasis
role="bold"><property><a4j:status></property></emphasis>
component</title>
+ <para>
+
+ <emphasis
role="bold"><property><a4j:status></property></emphasis>
+ is a component, designed to create some visual effect during Ajax request. The
comportment is usually attached to a certain request, which implies time consuming
processing, so that the end user is aware the page is not hung up,
+ it's responding to her actions: the user sees the processing progress (the
component is frequently used to indicate file uploading process).
+ </para>
+ <para>
+ However, in the Photo Album application the <emphasis
role="bold"><property><a4j:status></property></emphasis>
component is triggered on any Ajax request: to demonstrate the component itself and
partially to display for the user that on every click on a link or a button something is
happening, as all actions in the application occur on a single page which is not typical
for usual web-workflow, when on each action the user navigates to a new page.
+ </para>
+ <para>
+
+ By default, <emphasis
role="bold"><property><a4j:status></property></emphasis>
works for each Ajax components inside the local region. This means if you have no region
defined on the page (the whole view is a region) and have only one <emphasis
role="bold"><property><a4j:status></property></emphasis>
on the page, the <emphasis
role="bold"><property><a4j:status></property></emphasis>
will be activated during Ajax request by any of the Ajax component located on the page.
+ </para>
+ <para>
+ As there are no regions defined explicitly in the application, <emphasis
role="bold"><property><a4j:status></property></emphasis>
is located in the main template (template.xhtml) for all pages:
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<!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"
+ ...
+ <body class="main-body">
+ ...
+ <ui:include src="/includes/index/status.xhtml" />
+ </body>
+</html>
+
+...]]></programlisting>
+ <para>
+ Hence the default behavior of the component meets that application's
requirements: the component is shown on every single Ajax request.
+ </para>
+ <para>
+ This is the page with the <emphasis
role="bold"><property><a4j:status></property></emphasis>
component:
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<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.org/rich"
+ xmlns:a4j="http://richfaces.org/a4j"
+ xmlns:richx="http://richfaces.org/richx">
+ <a4j:status layout="block" stopStyle="display: none;"
+ startStyle="height: 52px; width: 79px; position: absolute; top: 0px; left:
278px;">
+ <f:facet name="start">
+ <h:panelGroup>
+ <h:graphicImage style="position: absolute; top: 0px; left: 0px;"
+ height="79" width="52" alt=""
value="/img/shell/ai.png" />
+ <h:graphicImage style="position: absolute; top: 26px; left: 13px;"
+ height="26" width="26" alt=""
value="/img/shell/ai.gif" />
+ </h:panelGroup>
+ </f:facet>
+ </a4j:status>
+</ui:composition>
+...]]></programlisting>
+ <para>
+ The <code>startStyle="height: 52px; width: 79px; position: absolute;
top: 0px; left: 278px;"</code>, attribute specifies what is displayed on
the page after the request initiation, which means in our case that it is positioned
absolutely: 278 pixels from the left border of the page and 0 pixels from the top, its
width is 79px and the height is 52px.
+ </para>
+
+ <para>
+ The <code>stopStyle="display: none;"</code> attribute is
responsible for displaying the component on the page when the request is finished, in our
case the it will be hidden.
+
+ </para>
+ <para>
+ As we need to show only the beginning of the request, we customize only the
<code><f:facet name="start"></code> which is
just an image(you can insert any image you like).
+ </para>
+ <para>
+
+ If you would like to get more details about the <emphasis
role="bold"><property><a4j:status></property></emphasis>
please visit <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?...
Demo</ulink> web page and <ulink
url="http://www.jboss.org/file-access/default/members/jbossrichfaces...
Developer Guide</ulink>.
+ </para>
+</section>
Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.xml
===================================================================
--- trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.xml 2009-05-08
13:31:51 UTC (rev 14079)
+++ trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.xml 2009-05-08
14:34:09 UTC (rev 14080)
@@ -161,27 +161,168 @@
<section id="imagesScroller">
<title>Images Scroller</title>
- <para>
- Work in progress...
- </para>
+ <para>
+ The Images Scroller implementation in the Photo Album application
is basically <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
with the value attribute bound to <code>#{model.selectedAlbum.images}</code>,
which is a collection of images of the selected album and the <emphasis
role="bold"><property><rich:dataScroller>></property></emphasis>
component tied to the <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
.
+ </para>
+
+ <para>
+ The source code you can find in the
includes/images/imageScroller.xhtml file.
+ Now let's go deeper into the details. The main component
here is <emphasis
role="bold"><property><a4j:repeat></property></emphasis>:
+
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
+<a4j:repeat value="#{model.selectedAlbum.images}" rows="5"
+ var="img" id="repeat" rowKeyVar="rk">
+
+ <a4j:outputPanel layout="block"
+ styleClass="preview_box_photo_nav #{model.selectedImage == img ?
'preview_box_photo_current' : 'preview_box_photo_default'}">
+ <h:panelGroup layout="block"
styleClass="preview_box_photo_80">
+ <h:graphicImage styleClass="pr_photo_bg"
+ value="/img/shell/frame_photo_80.png" />
+ <h:panelGrid cellpadding="0" cellspacing="2">
+ <h:panelGroup layout="block">
+ <a4j:mediaOutput element="img"
+ createContent="#{imageLoader.paintImage}"
+ value="#{fileManager.transformPath(img.fullPath,
'_small80')}">
+ </a4j:mediaOutput>
+ <br />
+ </h:panelGroup>
+ </h:panelGrid>
+ <h:panelGroup layout="block" styleClass="photo_name">
+ <h:outputText value="#{img.name}" />
+ </h:panelGroup>
+ <h:panelGroup layout="block" styleClass="photo_data">
+ <h:outputText value="#{rk + 1}" />
+ </h:panelGroup>
+ </h:panelGroup>
+
+ <a4j:support event="onclick" rendered="#{model.selectedImage !=
img}"
+ reRender="mainArea,treePanel, imagesTable"
action="#{controller.showImage(img)}" />
+ </a4j:outputPanel>
+</a4j:repeat>
+...]]></programlisting>
+
+ <para>
+ Each element of the
+
+ <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
has a corresponding <emphasis
role="bold"><property><a4j:outputPanel></property></emphasis>
with the <emphasis
role="bold"><property><a4j:mediaOutput></property></emphasis>
as a nested element. <emphasis
role="bold"><property><a4j:mediaOutput></property></emphasis>
renders the thumbnail of the image. As the rows attribute is set to "5"
(<code>rows="5"</code>), only 5 images are displayed on the page at
a time.
+
+ </para>
+
+ <para>
+ As you've noticed, the currently selected image in the
images scroller has different style, namely: a red frame around thumbnail, which is
implemented with this code:
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:outputPanel layout="block"
+styleClass="preview_box_photo_nav #{model.selectedImage == img ?
'preview_box_photo_current' : 'preview_box_photo_default'}">
+...]]></programlisting>
+ <para>
+ As you can see from the code snippet,
+ identification of whether the currently selected image is the
same image displayed by the <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
is performed in the styleClass, if it returns "true", different style
is applied.
+ </para>
+ <para>
+ Each <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
has a corresponding <emphasis
role="bold"><property><a4j:support></property></emphasis>
configured like this:
+ </para>
+ <programlisting role="XML"><![CDATA[...
+ <a4j:support event="onclick"
+ rendered="#{model.selectedImage != img}"
+ reRender="mainArea,treePanel, imagesTable"
+ action="#{controller.showImage(img)}" />
+
+...]]></programlisting>
+
+ <para>
+ On every click <emphasis
role="bold"><property><a4j:support></property></emphasis>
calls <code> #{controller.showImage(img)}</code> method that sets the current
image, thumbnail of which has just been clicked on. For more details please see
Controller.java class.
+ </para>
+
+ <para>
+ To implement thumbnails scrolling effect the <emphasis
role="bold"><property><rich:datascroller></property></emphasis>
is attached to the <emphasis
role="bold"><property><a4j:repeat></property></emphasis>:
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
+<rich:datascroller page="#{controller.getPage()}"
+ styleClass="image-scroller" lastPageMode="full"
for="repeat" reRender="imagesTable"
+ boundaryControls="hide" stepControls="hide">
+ <f:facet name="pages">
+ <h:outputText />
+ </f:facet>
+ <f:facet name="fastforward">
+ <h:graphicImage styleClass="image-scroller-right-arrow"
+ value="img/shell/arr_right.png" />
+ </f:facet>
+ <f:facet name="fastforward_disabled">
+ <h:graphicImage styleClass="image-scroller-right-arrow"
+ value="img/shell/arr_right_dis.png" />
+ </f:facet>
+ <f:facet name="fastrewind">
+ <h:graphicImage styleClass="image-scroller-left-arrow"
+ value="img/shell/arr_left.png" />
+ </f:facet>
+ <f:facet name="fastrewind_disabled">
+ <h:graphicImage styleClass="image-scroller-left-arrow"
+ value="img/shell/arr_left_dis.png" />
+ </f:facet>
+</rich:datascroller>
+
+...]]></programlisting>
+ <para>
+ The page attribute identifies which page should be displayed
right now. For instance, if you have only 20 images and the current image has the
12<superscript>th</superscript> index in the collection, then the
3<superscript>rd</superscript> page will be displayed:
+
+ </para>
+ <programlisting role="XML"><![CDATA[...
+public Integer getPage(){
+ final Integer index = model.getSelectedAlbum().getIndex(model.getSelectedImage());
+ return index / 5 + 1;
+ }
+
+...]]></programlisting>
+
+ <para>
+ The <code>lastPageMode="full"
</code> attribute ensures that 5 thumbnails are always shown on the page. If this
attribute hadn't been configured like this, in case the 19th thumbnail out of 20 had
been selected then only 2 last thumbnails would have been displayed.
+ </para>
+
+ <para>
+ As you can see, <emphasis
role="bold"><property><rich:dataScroller></property></emphasis>
has a slightly different look-and-feel, the trick is in the redefinition of
<property>fastforward</property>,
<property>fastforward_disabled</property>,
<property>fastrewind</property> and
<property>fastrewind_disabled</property> facets on which places we display our
images. We didn't redefine other facets because they are not rendered to the page
which is achieved with <code>boundaryControls="hide"</code>
and <code>stepControls="hide</code> attributes of <emphasis
role="bold"><property><rich:dataSroller></property></emphasis>.
+ </para>
+ <para>
+ To get more details about the <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
and <emphasis
role="bold"><property><rich:dataScroller></property></emphasis>
components please visit <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc...
Demo</ulink> web page and <ulink
url="http://www.jboss.org/file-access/default/members/jbossrichfaces...
>RichFaces Developer Guide</ulink>
+
+ </para>
</section>
<section id="slideshow">
<title>Slideshow</title>
- <para>The slide-show feature in the Photo Album Demo can be enabled by
clicking "Start Slideshow" link from two different places in the
application:
+ <para>The slideshow feature in the Photo Album Demo can be
enabled by clicking on <emphasis role="bold">"Start
Slideshow"</emphasis> link from two different places in the application:
1) from user's album preview
(<code>/web/src/main/webapp/image/albumInfo.xhtml</code>) and 2) from a
particular photo preview (<code>src/main/webapp/image/imageInfo.xhtml</code>).
Both of two mentioned XHTML files include slideshow with the help of
Facelets <<emphasis
role="bold"><property>ui:include</property></emphasis> tag
(for more information about <<emphasis
role="bold"><property>ui:include</property></emphasis> see
Facelets Reference Guide —
<ulink
url="http://www.jsftoolbox.com/documentation/facelets/01-Introductio...>).
</para>
-
<para>
- The <code>startSlideshow()</code> method of
<code>SlideshowManager.java</code> has two implementations.
- The first implementation is designed to activate the slide-show from an
album preview (<code>/image/albumInfo.xhtml</code>) when no photo is selected
in the current image list.
- The method iterates over all photos of a particular album starting from
the first one in the list. Look at the <code>SlideshowManager.java</code>
listing below:
+ The components that implement the slideshow functionality are:
</para>
- <programlisting role="JAVA"><![CDATA[...
+ <itemizedlist>
+ <listitem><para><emphasis
role="bold"><property><rich:modalPanelgt;</property></emphasis>
located in <code>web/src/main/webapp/includes/image/slideshow.xhtml</code>
that is hidden by default as the attribute
<code>showWhenRendered="#{slideshow.active}"</code> and the
active property of SlideshowManager.java is set to "false" by
default.</para></listitem>
+ <listitem><para><emphasis
role="bold"><property><a4j:poll></property></emphasis>
located in <code>includes/misc/slideShowPooler.xhtml</code> which is also
inactive due to the mentioned active property (
<code>active=#{slideshow.active}</code>)</para></listitem>
+ </itemizedlist>
+
+ <para>
+
+ After activation, <emphasis
role="bold"><property><a4j:poll></property></emphasis>
will send asynchronous requests to the server with some certain interval, as the result of
these requests modal panel will display the next image in the row.
+ </para>
+
+<para>
+ Now let's have a look at the details of the slideshow implementation.
+</para>
+
+ <para>
+ The <code>startSlideshow()</code> method of
<code>SlideshowManager.java</code> is invoked when no photo is selected in the
current image list. The method iterates over all photos of a particular album starting
from the first one in the list. Look at the <code>SlideshowManager.java</code>
listing below:
+ </para>
+
+<programlisting role="JAVA"><![CDATA[...
+ ...
public void startSlideshow(){
active = true;
this.slideshowIndex = 0;
@@ -193,14 +334,13 @@
this.selectedImage = model.getImages().get(this.slideshowIndex);
this.selectedImage.getAlbum().visitImage(selectedImage, true);
}
-...]]></programlisting>
-
- <para>
- The second implementation of the
<code>startSlideshow()</code> method is activated when a link to slide-show is
clicked from a particular photo preview.
- This method iterates over the rest of photos starting from the current
selected one:
- </para>
- <programlisting role="JAVA"><![CDATA[...
-public void startSlideshow(Image selectedImage){
+...]]></programlisting>
+ <para>
+ The second variation of the <code>startSlideshow()</code> method is
activated when a link to slide-show is clicked from a particular photo preview. This
method iterates over the rest of photos starting from the current selected one:
+
+ </para>
+ <programlisting role="JAVA"><![CDATA[...
+ public void startSlideshow(Image selectedImage){
active = true;
if(model.getImages() == null || model.getImages().size() < 1){
stopSlideshow();
@@ -211,69 +351,72 @@
this.selectedImage = selectedImage;
this.selectedImage.getAlbum().visitImage(selectedImage, true);
}
-...]]></programlisting>
+...]]></programlisting>
<para>
- Both implementations of <code>startSlideshow()</code>
method set active property to true.
- This <code>true</code> makes two important slide-show parts
(slide-show modal panel and slide-show poller) render.
+ Both variants of <code>startSlideshow()</code> method set
the <code>active</code> property to "true" as a result the
poller is activated and modal panel becomes visible.
+
</para>
- <para>
- The slide-show modal panel is kept in the
<code>web/src/main/webapp/includes/image/slideshow.xhtml</code> file and
referred from the corresponding pages with the help of <emphasis
role="bold"><property><ui:include></property></emphasis>
Facelets tag:
- </para>
-
- <programlisting role="XML"><![CDATA[...
+ <para>
+ The slideshow modal panel is kept in the
<code>web/src/main/webapp/includes/image/slideshow.xhtml</code> file and
referred from the corresponding pages with the help of <ui:include> Facelets
tag:
+ </para>
+ <programlisting role="XML"><![CDATA[...
<ui:include src="/includes/image/slideshow.xhtml"/>
-...]]></programlisting>
-
- <para>
- Have a look at
<code>web/src/main/webapp/includes/image/slideshow.xhtml</code> file:
- </para>
-
- <programlisting role="XML"><![CDATA[...
+...]]></programlisting>
+ <para>
+ Have a look at
<code>web/src/main/webapp/includes/image/slideshow.xhtml</code> file:
+ </para>
+ <programlisting role="XML"><![CDATA[...
<ui:composition xmlns="http://www.w3.org/1999/xhtml"...>
+
<rich:modalPanel showWhenRendered="#{slideshow.active}"
+
domElementAttachment="parent"
+
id="slideShowModalPanel"
+
width="650"
+
onshow="showPictureEffect();"
+
height="650">
+
<f:facet name="controls">
+
<h:panelGroup>
+
<h:graphicImage value="/img/modal/close.png"
style="cursor:pointer" id="hidelink">
+
<a4j:support event="onclick"
actionListener="#{slideshow.stopSlideshow}" reRender="slideShowForm,
mainArea, tree" />
+
</h:graphicImage>
+
</h:panelGroup>
+
</f:facet>
+
...
+
</rich:modalPanel>
+
</ui:composition>
-...]]></programlisting>
-
- <para>
- The modal panel is always rendered on the page in a hidden state.
- Activating the slide-show renders the main area, so the slide-show
modal panel appears in the closest to an observer layer.
- </para>
- <programlisting role="XML"><![CDATA[...
-<a4j:commandLink styleClass="slideshow-link"
- actionListener="#{slideshow.startSlideshow()}"
- reRender="slideShowForm, mainArea">
- ...
-</a4j:commandLink>
-...]]></programlisting>
- <para>
- Slide-show poller is enabled if the slide-show is activated:
- </para>
- <programlisting role="XML"><![CDATA[...
+...]]></programlisting>
+ <para>
+
+ This is the source code of
<code>includes/misc/slideShowPooler.xhtml</code>:
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.org/rich"
- xmlns:a4j="http://richfaces.org/a4j"
- xmlns:richx="http://richfaces.org/richx">
+ 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.org/rich"
+ xmlns:a4j="http://richfaces.org/a4j"
+ xmlns:richx="http://richfaces.org/richx">
<a4j:form id="slideShowForm">
<a4j:poll reRender="slideshowImage"
actionListener="#{slideshow.showNextImage()}"
@@ -283,67 +426,41 @@
oncomplete="showPictureEffect();"/>
</a4j:form>
</ui:composition>
-...]]></programlisting>
- <para>
- The slide-show poller sends the request for the next image
(<code>showNextImage()</code> method) each four seconds.
- The interval is defined in the interval property of the
<code>SlideshowManager.java</code> and refers to a
<code>INITIAL.DELAY</code> constant (<code>constants.java</code>).
- When the <emphasis
role="bold"><property><a4j:poll></property></emphasis>
component receives a new image it renders the slideShowImage area
(<code>/web/src/main/webapp/image/slideshow.xhtml</code>):
- </para>
- <programlisting role="XML"><![CDATA[...
-<h:panelGroup id="slideshowImage">
- <a4j:mediaOutput id="imgSlideShow"
- element="img"
- styleClass="main-image"
- createContent="#{imageLoader.paintImage}"
- style="opacity: 0.1"
- value="#{slideshow.selectedImage != null?
fileManager.transformPath(slideshow.selectedImage.path,
'_medium'):null}">
- <rich:toolTip followMouse="true"
- direction="top-right"
- showDelay="500"
- styleClass="tooltip">
- <span style="white-space: nowrap">
#{slideshow.selectedImage.description} </span>
- </rich:toolTip>
- </a4j:mediaOutput>
-</h:panelGroup>
-...]]></programlisting>
-
- <para>
- The <emphasis
role="bold"><property>a4j:mediaOtuput</property></emphasis>
component has a value attribute that takes a path to photos as a value and renders photos
with the help of a
<emphasis><property>createContent</property></emphasis> attribute.
The showNextImage works cyclically.
- </para>
-
- <para>
- There is <emphasis
role="bold"><property>rich:effect</property></emphasis>
that makes rendering process look more effective
(<code>web/src/main/webapp/includes/image/slideshow.xhtml</code>):
- </para>
- <programlisting role="XML"><![CDATA[...
-<rich:effect name="hidePictureEffect" type="Opacity"
params="duration:0.4, from:1.0, to:0.0" for="imgSlideShow" />
-<rich:effect name="showPictureEffect" type="Opacity"
params="duration:0.4, from:0.1, to:1.0" for="imgSlideShow" />
-...]]></programlisting>
-
- <para>
- The described above example implements a modal panel with photos that
change each other in the order they are stored in an album.
- </para>
- <figure>
- <title>Slide show</title>
- <mediaobject>
- <imageobject>
- <imagedata
fileref="images/slide_show.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>
- To quit the slide-show user clicks "Close window"
button on the slide-show panel and <code>stopSlideshow()</code> method is
activated.
- </para>
- <programlisting role="JAVA"><![CDATA[...
+...]]></programlisting>
+
+ <para>
+ The slideshow poller sends the request for the next image
(<code>showNextImage()</code> method) each four seconds.
+ The interval is defined in the interval property of the
<code>SlideshowManager.java</code> and refers to a
<code>INITIAL.DELAY</code> constant (<code>constants.java</code>).
+ </para>
+ <para>
+ The described above example implements a modal panel with photos
that rotate them in the order they are stored in an album.
+ </para>
+ <figure>
+ <title>Image size control</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/slide_show.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>
+ To stop the slide-show user clicks <emphasis
role="bold">Close window</emphasis> button on the slide-show panel and
<code>stopSlideshow()</code> method is invoked.
+ </para>
+<programlisting role="XML"><![CDATA[...
@Observer("stopSlideshow")
public void stopSlideshow(){
active = false;
this.selectedImage = null;
this.slideshowIndex = 0;
}
-...]]></programlisting>
-
+ ...]]></programlisting>
+
<para>
+ The <code>active</code> field is set to
"false" again, consequently the poller becomes inactive and the modal
panel becomes invisible too.
+ </para>
+ </section>
+ <para>
Vizit following pages at RichFaces Live Demo for more
information, examples and sources on the components used in the application and described
in this chapter:
</para>
@@ -392,4 +509,3 @@
</itemizedlist>
</section>
-</section>
Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/button.xml
===================================================================
--- trunk/docs/realworld_app_guide/en/src/main/docbook/includes/button.xml 2009-05-08
13:31:51 UTC (rev 14079)
+++ trunk/docs/realworld_app_guide/en/src/main/docbook/includes/button.xml 2009-05-08
14:34:09 UTC (rev 14080)
@@ -11,156 +11,33 @@
</para>
<programlisting role="XML"><![CDATA[...
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
- xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:c="http://java.sun.com/jstl/core"
- 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.org/rich"
- xmlns:a4j="http://richfaces.org/a4j"
xmlns:richx="http://richfaces.org/richx">
+ xmlns:s="http://jboss.com/products/seam/taglib"
+ xmlns:c="http://java.sun.com/jstl/core"
+ 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.org/rich"
+ xmlns:a4j="http://richfaces.org/a4j"
+ xmlns:richx="http://richfaces.org/richx">
<a4j:loadScript src="/scripts/buttons.js" />
<richx:actionMapper>
- <a4j:outputPanel layout="block" style="#{style}"
- styleClass="photoalbumButton #{styleClass}" lang="#{lang}"
dir="#{dir}"
- title="#{title}" rendered="#{empty rendered or rendered}"
- onmousedown="RF_RW_DEMO.toPressed(this)"
onmouseup="RF_RW_DEMO.toReleased(this)"
- onmouseout="RF_RW_DEMO.toReleased(this)">
-
- <h:graphicImage value="/img/shell/button.png" alt="" />
- <h:graphicImage value="/img/shell/button_press.png"
- style="display: none;" alt="" />
-
- <div>#{value}</div>
-
- <a4j:commandButton accesskey="#{accesskey}"
- ajaxSingle="#{ajaxSingle}" alt="#{alt}" type="image"
image="/img/shell/spacer.gif"
- actionListener="#{mappedActionListener}"
action="#{mappedAction}"
- bypassUpdates="#{bypassUpdates}" data="#{data}"
disabled="#{disabled}"
- eventsQueue="#{eventsQueue}" focus="#{focus}"
ignoreDupResponses="#{ignoreDupResponses}"
- immediate="#{immediate}" limitToList="#{limitToList}"
- onbeforedomupdate="#{onbeforedomupdate}" timeout="#{timeout}"
- tabindex="#{tabindex}" status="#{status}"
similarityGroupingId="#{similarityGroupingId}"
- reRender="#{reRender}" requestDelay="#{requestDelay}"
process="#{process}"
- oncomplete="#{oncomplete}" onblur="#{onblur}"
onclick="#{onclick}"
- ondblclick="#{ondblclick}" onfocus="#{onfocus}"
onkeydown="#{onkeydown}"
- onkeypress="#{onkeypress}" onkeyup="#{onkeyup}"
onmousedown="#{onmousedown}"
- onmousemove="#{onmousemove}" onmouseout="#{onmouseout}"
onmouseover="#{onmouseover}"
- onmouseup="#{onmouseup}" />
-
+ <a4j:outputPanel layout="block" style="#{style}"
styleClass="photoalbumButton #{styleClass}" lang="#{lang}"
dir="#{dir}" title="#{title}"
+ rendered="#{empty rendered or rendered}"
+ onmousedown="RF_RW_DEMO.toPressed(this)"
onmouseup="RF_RW_DEMO.toReleased(this)"
onmouseout="RF_RW_DEMO.toReleased(this)">
+ <h:graphicImage value="/img/shell/button.png" alt="" />
+ <h:graphicImage value="/img/shell/button_press.png" style="display:
none;" alt="" />
+ <div>#{value}</div>
+ <a4j:commandButton accesskey="#{accesskey}"
ajaxSingle="#{ajaxSingle}" alt="#{alt}" type="image"
image="/img/shell/spacer.gif"
+ actionListener="#{mappedActionListener}"
action="#{mappedAction}" bypassUpdates="#{bypassUpdates}"
data="#{data}" disabled="#{disabled}"
+ eventsQueue="#{eventsQueue}" focus="#{focus}"
ignoreDupResponses="#{ignoreDupResponses}" immediate="#{immediate}"
limitToList="#{limitToList}"
+ onbeforedomupdate="#{onbeforedomupdate}" timeout="#{timeout}"
tabindex="#{tabindex}" status="#{status}"
similarityGroupingId="#{similarityGroupingId}"
+ reRender="#{reRender}" requestDelay="#{requestDelay}"
process="#{process}" oncomplete="#{oncomplete}"
+ onblur="#{onblur}" onclick="#{onclick}"
ondblclick="#{ondblclick}" onfocus="#{onfocus}"
onkeydown="#{onkeydown}" onkeypress="#{onkeypress}"
onkeyup="#{onkeyup}"
+ onmousedown="#{onmousedown}" onmousemove="#{onmousemove}"
onmouseout="#{onmouseout}" onmouseover="#{onmouseover}"
onmouseup="#{onmouseup}" />
</a4j:outputPanel>
</richx:actionMapper>
-
</ui:composition>
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
- xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:c="http://java.sun.com/jstl/core"
- 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.org/rich"
- xmlns:a4j="http://richfaces.org/a4j"
xmlns:richx="http://richfaces.org/richx">
- <a4j:loadScript src="/scripts/buttons.js" />
- <richx:actionMapper>
- <a4j:outputPanel layout="block" style="#{style}"
- styleClass="photoalbumButton #{styleClass}" lang="#{lang}"
dir="#{dir}"
- title="#{title}" rendered="#{empty rendered or rendered}"
- onmousedown="RF_RW_DEMO.toPressed(this)"
onmouseup="RF_RW_DEMO.toReleased(this)"
- onmouseout="RF_RW_DEMO.toReleased(this)">
- <h:graphicImage value="/img/shell/button.png" alt="" />
- <h:graphicImage value="/img/shell/button_press.png"
- style="display: none;" alt="" />
-
- <div>#{value}</div>
-
- <a4j:commandButton accesskey="#{accesskey}"
- ajaxSingle="#{ajaxSingle}" alt="#{alt}" type="image"
image="/img/shell/spacer.gif"
- actionListener="#{mappedActionListener}"
action="#{mappedAction}"
- bypassUpdates="#{bypassUpdates}" data="#{data}"
disabled="#{disabled}"
- eventsQueue="#{eventsQueue}" focus="#{focus}"
ignoreDupResponses="#{ignoreDupResponses}"
- immediate="#{immediate}" limitToList="#{limitToList}"
- onbeforedomupdate="#{onbeforedomupdate}" timeout="#{timeout}"
- tabindex="#{tabindex}" status="#{status}"
similarityGroupingId="#{similarityGroupingId}"
- reRender="#{reRender}" requestDelay="#{requestDelay}"
process="#{process}"
- oncomplete="#{oncomplete}" onblur="#{onblur}"
onclick="#{onclick}"
- ondblclick="#{ondblclick}" onfocus="#{onfocus}"
onkeydown="#{onkeydown}"
- onkeypress="#{onkeypress}" onkeyup="#{onkeyup}"
onmousedown="#{onmousedown}"
- onmousemove="#{onmousemove}" onmouseout="#{onmouseout}"
onmouseover="#{onmouseover}"
- onmouseup="#{onmouseup}" />
-
- </a4j:outputPanel>
- </richx:actionMapper>
-
-</ui:composition><ui:composition xmlns="http://www.w3.org/1999/xhtml"
- xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:c="http://java.sun.com/jstl/core"
- 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.org/rich"
- xmlns:a4j="http://richfaces.org/a4j"
xmlns:richx="http://richfaces.org/richx">
- <a4j:loadScript src="/scripts/buttons.js" />
- <richx:actionMapper>
- <a4j:outputPanel layout="block" style="#{style}"
- styleClass="photoalbumButton #{styleClass}" lang="#{lang}"
dir="#{dir}"
- title="#{title}" rendered="#{empty rendered or rendered}"
- onmousedown="RF_RW_DEMO.toPressed(this)"
onmouseup="RF_RW_DEMO.toReleased(this)"
- onmouseout="RF_RW_DEMO.toReleased(this)">
-
- <h:graphicImage value="/img/shell/button.png" alt="" />
- <h:graphicImage value="/img/shell/button_press.png"
- style="display: none;" alt="" />
-
- <div>#{value}</div>
-
- <a4j:commandButton accesskey="#{accesskey}"
- ajaxSingle="#{ajaxSingle}" alt="#{alt}" type="image"
image="/img/shell/spacer.gif"
- actionListener="#{mappedActionListener}"
action="#{mappedAction}"
- bypassUpdates="#{bypassUpdates}" data="#{data}"
disabled="#{disabled}"
- eventsQueue="#{eventsQueue}" focus="#{focus}"
ignoreDupResponses="#{ignoreDupResponses}"
- immediate="#{immediate}" limitToList="#{limitToList}"
- onbeforedomupdate="#{onbeforedomupdate}" timeout="#{timeout}"
- tabindex="#{tabindex}" status="#{status}"
similarityGroupingId="#{similarityGroupingId}"
- reRender="#{reRender}" requestDelay="#{requestDelay}"
process="#{process}"
- oncomplete="#{oncomplete}" onblur="#{onblur}"
onclick="#{onclick}"
- ondblclick="#{ondblclick}" onfocus="#{onfocus}"
onkeydown="#{onkeydown}"
- onkeypress="#{onkeypress}" onkeyup="#{onkeyup}"
onmousedown="#{onmousedown}"
- onmousemove="#{onmousemove}" onmouseout="#{onmouseout}"
onmouseover="#{onmouseover}"
- onmouseup="#{onmouseup}" />
-
- </a4j:outputPanel>
- </richx:actionMapper>
-
-</ui:composition>
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
- xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:c="http://java.sun.com/jstl/core"
- 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.org/rich"
- xmlns:a4j="http://richfaces.org/a4j"
xmlns:richx="http://richfaces.org/richx">
- <a4j:loadScript src="/scripts/buttons.js" />
- <richx:actionMapper>
- <a4j:outputPanel layout="block" style="#{style}"
- styleClass="photoalbumButton #{styleClass}" lang="#{lang}"
dir="#{dir}"
- title="#{title}" rendered="#{empty rendered or rendered}"
- onmousedown="RF_RW_DEMO.toPressed(this)"
onmouseup="RF_RW_DEMO.toReleased(this)"
- onmouseout="RF_RW_DEMO.toReleased(this)">
-
- <h:graphicImage value="/img/shell/button.png" alt="" />
- <h:graphicImage value="/img/shell/button_press.png"
- style="display: none;" alt="" />
-
- <div>#{value}</div>
-
- <a4j:commandButton accesskey="#{accesskey}"
- ajaxSingle="#{ajaxSingle}" alt="#{alt}" type="image"
image="/img/shell/spacer.gif"
- actionListener="#{mappedActionListener}"
action="#{mappedAction}"
- bypassUpdates="#{bypassUpdates}" data="#{data}"
disabled="#{disabled}"
- eventsQueue="#{eventsQueue}" focus="#{focus}"
ignoreDupResponses="#{ignoreDupResponses}"
- immediate="#{immediate}" limitToList="#{limitToList}"
- onbeforedomupdate="#{onbeforedomupdate}" timeout="#{timeout}"
- tabindex="#{tabindex}" status="#{status}"
similarityGroupingId="#{similarityGroupingId}"
- reRender="#{reRender}" requestDelay="#{requestDelay}"
process="#{process}"
- oncomplete="#{oncomplete}" onblur="#{onblur}"
onclick="#{onclick}"
- ondblclick="#{ondblclick}" onfocus="#{onfocus}"
onkeydown="#{onkeydown}"
- onkeypress="#{onkeypress}" onkeyup="#{onkeyup}"
onmousedown="#{onmousedown}"
- onmousemove="#{onmousemove}" onmouseout="#{onmouseout}"
onmouseover="#{onmouseover}"
- onmouseup="#{onmouseup}" />
-
- </a4j:outputPanel>
- </richx:actionMapper>
-
-</ui:composition>
...]]></programlisting>
<para>
The <emphasis role="bold">
<property><richx:actionMapper></property></emphasis>
Deleted: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/datascroller.xml
===================================================================
---
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/datascroller.xml 2009-05-08
13:31:51 UTC (rev 14079)
+++
trunk/docs/realworld_app_guide/en/src/main/docbook/includes/datascroller.xml 2009-05-08
14:34:09 UTC (rev 14080)
@@ -1,132 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<section id="CustomDataScroller">
- <title>Custom Data Scroller</title>
- <para>
- The custom data scroller implementation in the Photo Album application is basically
<emphasis
role="bold"><property><a4j:repeat></property></emphasis>
with the value attribute bound to <code>#{model.selectedAlbum.images}</code>,
which is a collection of images of the selected album and the <emphasis
role="bold"><property><rich:dataScroller>></property></emphasis>
component tied to the <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
.
- </para>
-
- <para>
- The source code you can find in the includes/images/imageScroller.xhtml file.
- Now let's go deeper into the details. The main component here is <emphasis
role="bold"><property><a4j:repeat></property></emphasis>:
-
- </para>
-
- <programlisting role="XML"><![CDATA[...
-<a4j:repeat value="#{model.selectedAlbum.images}" rows="5"
- var="img" id="repeat" rowKeyVar="rk">
-
- <a4j:outputPanel layout="block"
- styleClass="preview_box_photo_nav #{model.selectedImage == img ?
'preview_box_photo_current' : 'preview_box_photo_default'}">
- <h:panelGroup layout="block"
styleClass="preview_box_photo_80">
- <h:graphicImage styleClass="pr_photo_bg"
- value="/img/shell/frame_photo_80.png" />
- <h:panelGrid cellpadding="0" cellspacing="2">
- <h:panelGroup layout="block">
- <a4j:mediaOutput element="img"
- createContent="#{imageLoader.paintImage}"
- value="#{fileManager.transformPath(img.fullPath,
'_small80')}">
- </a4j:mediaOutput>
- <br />
- </h:panelGroup>
- </h:panelGrid>
- <h:panelGroup layout="block" styleClass="photo_name">
- <h:outputText value="#{img.name}" />
- </h:panelGroup>
- <h:panelGroup layout="block" styleClass="photo_data">
- <h:outputText value="#{rk + 1}" />
- </h:panelGroup>
- </h:panelGroup>
-
- <a4j:support event="onclick" rendered="#{model.selectedImage !=
img}"
- reRender="mainArea,treePanel, imagesTable"
action="#{controller.showImage(img)}" />
- </a4j:outputPanel>
-</a4j:repeat>
-...]]></programlisting>
-
- <para>
- Each element of the
-
- <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
has a corresponding <emphasis
role="bold"><property><a4j:outputPanel></property></emphasis>
with the <emphasis
role="bold"><property><a4j:mediaOutput></property></emphasis>
as a nested element. <emphasis
role="bold"><property><a4j:mediaOutput></property></emphasis>
renders the thumbnail of the image. As the rows attribute is set to "5"
(<code>rows="5"</code>), only 5 images are displayed on the page at
a time.
-
- </para>
-
- <para>
- As you've noticed, the currently selected image in the data scroller has
different style, namely: a red frame around thumbnail, which is implemented with this
code:
- </para>
- <programlisting role="XML"><![CDATA[...
-<a4j:outputPanel layout="block"
-styleClass="preview_box_photo_nav #{model.selectedImage == img ?
'preview_box_photo_current' : 'preview_box_photo_default'}">
-...]]></programlisting>
- <para>
- As you can see from the code snippet,
- identification of whether the currently selected image is the same image displayed by
the <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
is performed in the styleClass, if it returns "true", different style
is applied.
- </para>
- <para>
- Each <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
has a corresponding <emphasis
role="bold"><property><a4j:support></property></emphasis>
configured like this:
- </para>
- <programlisting role="XML"><![CDATA[...
- <a4j:support event="onclick"
- rendered="#{model.selectedImage != img}"
- reRender="mainArea,treePanel, imagesTable"
- action="#{controller.showImage(img)}" />
-
-...]]></programlisting>
-
- <para>
- On every click <emphasis
role="bold"><property><a4j:support></property></emphasis>
calls <code> #{controller.showImage(img)}</code> method that sets the current
image, thumbnail of which has just been clicked on. For more details please see
Controller.java class.
- </para>
-
- <para>
- To implement thumbnails scrolling effect the <emphasis
role="bold"><property><rich:datascroller></property></emphasis>
is attached to the <emphasis
role="bold"><property><a4j:repeat></property></emphasis>:
- </para>
-
- <programlisting role="XML"><![CDATA[...
-<rich:datascroller page="#{controller.getPage()}"
- styleClass="image-scroller" lastPageMode="full"
for="repeat" reRender="imagesTable"
- boundaryControls="hide" stepControls="hide">
- <f:facet name="pages">
- <h:outputText />
- </f:facet>
- <f:facet name="fastforward">
- <h:graphicImage styleClass="image-scroller-right-arrow"
- value="img/shell/arr_right.png" />
- </f:facet>
- <f:facet name="fastforward_disabled">
- <h:graphicImage styleClass="image-scroller-right-arrow"
- value="img/shell/arr_right_dis.png" />
- </f:facet>
- <f:facet name="fastrewind">
- <h:graphicImage styleClass="image-scroller-left-arrow"
- value="img/shell/arr_left.png" />
- </f:facet>
- <f:facet name="fastrewind_disabled">
- <h:graphicImage styleClass="image-scroller-left-arrow"
- value="img/shell/arr_left_dis.png" />
- </f:facet>
-</rich:datascroller>
-
-...]]></programlisting>
- <para>
- The page attribute identifies which page should be displayed right now. For instance,
if you have only 20 images and the current image has the
12<superscript>th</superscript> index in the collection, then the
3<superscript>rd</superscript> page will be displayed:
-
- </para>
- <programlisting role="XML"><![CDATA[...
-public Integer getPage(){
- final Integer index = model.getSelectedAlbum().getIndex(model.getSelectedImage());
- return index / 5 + 1;
- }
-
-...]]></programlisting>
-
- <para>
- The <code>lastPageMode="full" </code> attribute ensures
that 5 thumbnails are always shown on the page. If this attribute hadn't been
configured like this, in case the 19th thumbnail out of 20 had been selected then only 2
last thumbnails would have been displayed.
- </para>
-
- <para>
- As you can see, <emphasis
role="bold"><property><rich:dataScroller></property></emphasis>
has a slightly different look-and-feel, the trick is in the redefinition of
<property>fastforward</property>,
<property>fastforward_disabled</property>,
<property>fastrewind</property> and
<property>fastrewind_disabled</property> facets on which places we display our
images. We didn't redefine other facets because they are not rendered to the page
which is achieved with <code>boundaryControls="hide"</code>
and <code>stepControls="hide</code> attributes of <emphasis
role="bold"><property><rich:dataSroller></property></emphasis>.
- </para>
- <para>
- To get more details about the <emphasis
role="bold"><property><a4j:repeat></property></emphasis>
and <emphasis
role="bold"><property><rich:dataScroller></property></emphasis>
components please visit <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc...
Demo</ulink> web page and <ulink
url="http://www.jboss.org/file-access/default/members/jbossrichfaces...
>RichFaces Developer Guide</ulink>
-
- </para>
-</section>
Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/master.xml
===================================================================
--- trunk/docs/realworld_app_guide/en/src/main/docbook/master.xml 2009-05-08 13:31:51 UTC
(rev 14079)
+++ trunk/docs/realworld_app_guide/en/src/main/docbook/master.xml 2009-05-08 14:34:09 UTC
(rev 14080)
@@ -18,9 +18,9 @@
<!ENTITY contextMenu SYSTEM "includes/contextMenu.xml">
<!ENTITY tooltips SYSTEM "includes/tooltips.xml">
<!ENTITY hiw SYSTEM "includes/hiw.xml">
- <!ENTITY validators SYSTEM "includes/validators.xml">
- <!ENTITY datascroller SYSTEM "includes/datascroller.xml">
+ <!ENTITY validators SYSTEM "includes/validators.xml">
<!ENTITY button SYSTEM "includes/button.xml">
+ <!ENTITY a4j_status SYSTEM "includes/a4j_status.xml">
]>
@@ -81,9 +81,9 @@
&uploadImages;
&contextMenu;
&tooltips;
- &validators;
- &datascroller;
+ &validators;
&button;
+ &a4j_status;
<!-- &hiw; -->
&userPreferencesView;
&errorsReports;