From richfaces-svn-commits at lists.jboss.org Fri May 8 10:37:32 2009 Content-Type: multipart/mixed; boundary="===============1014068345833922493==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r14080 - in trunk/docs/realworld_app_guide/en/src/main/docbook: includes and 1 other directory. Date: Fri, 08 May 2009 10:34:09 -0400 Message-ID: --===============1014068345833922493== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable 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.x= ml 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_stat= us.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- 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 @@ + +
+ The <emphasis role=3D"bold"><property><a4j:status></propert= y></emphasis> component + + = + <a4j:status> + is a component, designed to create some visual effect during Ajax reque= st. The comportment is usually attached to a certain request, which implie= s 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 (t= he component is frequently used to indicate file uploading process). + + + However, in the Photo Album application the <a4j:status> component is triggered on a= ny Ajax request: to demonstrate the component itself and partially to disp= lay for the user that on every click on a link or a button something is hap= pening, as all actions in the application occur on a single page which is n= ot typical for usual web-workflow, when on each action the user navigates t= o a new page. + + + = + By default, <a4j:status> works for each Ajax components inside the local region. Thi= s means if you have no region defined on the page (the whole view is a regi= on) and have only one <a4j:status><= /property> on the page, the &= lt;a4j:status> will be activated during Ajax requ= est by any of the Ajax component located on the page. = + + + As there are no regions defined explicitly in the application, <a4j:status> is locat= ed in the main template (template.xhtml) for all pages: + + + + ... + + + + +...]]> = + + Hence the default behavior of the component meets that application&apos= ;s requirements: the component is shown on every single Ajax request. + + + This is the page with the <a4j:stat= us> component: + + + + + + + + + + + +...]]> = + + The startStyle=3D"height: 52px; width: 79px; position: absolu= te; top: 0px; left: 278px;", attribute specifies what is displa= yed 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 an= d 0 pixels from the top, its width is 79px and the height is 52px. = + + = + + The stopStyle=3D"display: none;" attribute is res= ponsible for displaying the component on the page when the request is finis= hed, in our case the it will be hidden. = + = + + + As we need to show only the beginning of the request, we customize only = the <f:facet name=3D"start"> which is just an = image(you can insert any image you like). + + + = + If you would like to get more details about the = <a4j:status> please visit Live Demo web page and RichFaces Developer Guide. = + +
Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/album= View.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.x= ml 2009-05-08 13:31:51 UTC (rev 14079) +++ trunk/docs/realworld_app_guide/en/src/main/docbook/includes/albumView.x= ml 2009-05-08 14:34:09 UTC (rev 14080) @@ -161,27 +161,168 @@ =
Images Scroller - - Work in progress... - + + The Images Scroller implementation in the Photo Al= bum application is basically <a4j:repe= at> with the value attribute bound to #{mode= l.selectedAlbum.images}, which is a collection of images of the sele= cted album and the <rich:dataScroller>= > component tied to the <a4j:repeat> . = + + = + + The source code you can find in the includes/image= s/imageScroller.xhtml file. = + Now let's go deeper into the details. The main co= mponent here is <a4j:repeat>: + = + + = + + + + + + + + + +
+ + + + + + + + + + + + + +...]]> = + = + + Each element of the = + = + <a4j:repeat&g= t; has a corresponding <a4j:outputPanel> with the <a4j:mediaOutput> as a ne= sted element. <a4j:mediaOutput> renders the thumbnail of the image. As the rows attribut= e is set to "5" (rows=3D"5"), only 5 images are disp= layed on the page at a time. + = + + = + + As you've noticed, the currently selected ima= ge in the images scroller has different style, namely: a red frame around t= humbnail, which is implemented with this code: + + = +...]]> = + + As you can see from the code snippet, = + identification of whether the currently selected i= mage is the same image displayed by the &= lt;a4j:repeat> is performed in the styleClass, if = it returns "true", different style is applied. + + + Each <a4j:re= peat> has a corresponding <a4j:support> configured like this: + + + +...]]> = + = + + On every click &= lt;a4j:support> calls #{controller.showImag= e(img)} method that sets the current image, thumbnail of which has j= ust been clicked on. For more details please see Controller.java class. + + = + + To implement thumbnails scrolling effect the <rich:datascroller> is attached to the <a4j:repeat>= : + + = + + + + + + + + + + + + + + + + + + +...]]> = + + The page attribute identifies which page should be= displayed right now. For instance, if you have only 20 images and the cur= rent image has the 12th index in the collection= , then the 3rd page will be displayed: + = + + = + = + + The lastPageMode=3D"full" = 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 displ= ayed. = + + = + + As you can see, = <rich:dataScroller> has a slightly different lo= ok-and-feel, the trick is in the redefinition of fastforward, fastforward_disabled, fastrewind<= /property> and fastrewind_disabled facets on which pla= ces we display our images. We didn't redefine other facets because they are= not rendered to the page which is achieved with boundaryControls=3D= "hide" and stepControls=3D"hide attribut= es of <rich:dataSroller>= . + + + To get more details about the <a4j:repeat> and <rich:dataScroller> compone= nts please visit Live Demo web page and RichFaces Developer Guide + = +
=
Slideshow = - The slide-show feature in the Photo Album Demo can be en= abled by clicking "Start Slideshow" link from two different place= s in the application: = + The slideshow feature in the Photo Album Demo can = be enabled by clicking on "Start Slideshow&quo= t; link from two different places in the application: = 1) from user's album preview (/web/src/main/webapp= /image/albumInfo.xhtml) and 2) from a particular photo preview (src/main/webapp/image/imageInfo.xhtml). = Both of two mentioned XHTML files include slideshow wit= h the help of Facelets <ui:include tag = (for more information about <= ui:include see Facelets Reference Guide =E2= =80=94 = http://www.jsftoolbox.com/documentation/f= acelets/01-Introduction/index.jsf). - = - The startSlideshow() method of Slide= showManager.java has two implementations. = - The first implementation is designed to activate the sli= de-show from an album preview (/image/albumInfo.xhtml) when no= photo is selected in the current image list. = - The method iterates over all photos of a particular albu= m starting from the first one in the list. Look at the SlideshowManag= er.java listing below: = + The components that implement the slideshow functionalit= y are: - + = <rich:modalPanelgt; located in web/src/main= /webapp/includes/image/slideshow.xhtml that is hidden by default as = the attribute showWhenRendered=3D"#{slideshow.active}" and the active property of SlideshowManager.java is set to "false= " by default. + = <a4j:poll> located in includes/misc/slid= eShowPooler.xhtml which is also inactive due to the mentioned active= property ( active=3D#{slideshow.active}) + + = + + = + After activation, <= ;a4j:poll> will send asynchronous requests to the = server with some certain interval, as the result of these requests modal pa= nel will display the next image in the row. + = + = + + Now let's have a look at the details of the slideshow implement= ation. + + = + + The startSlideshow() method of = SlideshowManager.java is invoked when no photo is selected in the cu= rrent image list. The method iterates over all photos of a particular album= starting from the first one in the list. Look at the SlideshowManage= r.java listing below: = + + = + - = - - The second implementation of the startSlideshow()<= /code> method is activated when a link to slide-show is clicked from a part= icular photo preview. = - This method iterates over the rest of photos starting fr= om the current selected one: - - = + + The second variation of the startSlideshow() method i= s activated when a link to slide-show is clicked from a particular photo pr= eview. This method iterates over the rest of photos starting from the curre= nt selected one: = + = + = + +...]]> = = - Both implementations of startSlideshow() me= thod set active property to true. = - This true makes two important slide-show pa= rts (slide-show modal panel and slide-show poller) render. = + Both variants of startSlideshow() method se= t the active property to "true" as a result the poll= er is activated and modal panel becomes visible. = + = - - The slide-show modal panel is kept in the web/src/= main/webapp/includes/image/slideshow.xhtml file and referred from th= e corresponding pages with the help of &l= t;ui:include> Facelets tag: - - = - + The slideshow modal panel is kept in the web= /src/main/webapp/includes/image/slideshow.xhtml file and referred fr= om the corresponding pages with the help of <ui:include> Facelets tag= : = + + -...]]> - = - - Have a look at web/src/main/webapp/includes/image/= slideshow.xhtml file: - - = - = + + Have a look at web/src/main/webapp/includes/= image/slideshow.xhtml file: = + + + + + + + + + + + ... = + + -...]]> - = - - The modal panel is always rendered on the page in a hidd= en state. = - Activating the slide-show renders the main area, so the = slide-show modal panel appears in the closest to an observer layer. - = - = - ... - -...]]> - - Slide-show poller is enabled if the slide-show is activ= ated: - - = + + = + This is the source code of includes/misc/sl= ideShowPooler.xhtml: = + + = + + xmlns:s=3D"http://jboss.com/products/seam/taglib" + xmlns:ui=3D"http://java.sun.com/jsf/facelets" + xmlns:f=3D"http://java.sun.com/jsf/core" + xmlns:h=3D"http://java.sun.com/jsf/html" + xmlns:rich=3D"http://richfaces.org/rich" + xmlns:a4j=3D"http://richfaces.org/a4j" + xmlns:richx=3D"http://richfaces.org/richx"> -...]]> - - The slide-show poller sends the request for the next ima= ge (showNextImage() method) each four seconds. = - The interval is defined in the interval property of the = SlideshowManager.java and refers to a INITIAL.DELAY constant (constants.java). = - When the <a4j:poll&= gt; component receives a new image it renders the sli= deShowImage area (/web/src/main/webapp/image/slideshow.xhtml): - - = - - - #{slideshow.selecte= dImage.description} - - - -...]]> - = - - The a4j:mediaOtuput component has a value attribute that takes a path to ph= otos as a value and renders photos with the help of a c= reateContent attribute. The showNextImage works cycli= cally. = - - = - - There is rich:effect that makes rendering process look more effective (web/src/main/webapp/includes/image/slideshow.xhtml): - - - -...]]> - = - - The described above example implements a modal panel wit= h photos that change each other in the order they are stored in an album. = = - -
- Slide show - - - - - -
- = - - To quit the slide-show user clicks "Close window&qu= ot; button on the slide-show panel and stopSlideshow() method = is activated. = - - = + = + + The slideshow poller sends the request for the nex= t image (showNextImage() method) each four seconds. = + The interval is defined in the interval property o= f the SlideshowManager.java and refers to a INITIAL.DELA= Y constant (constants.java). = + + + The described above example implements a modal pan= el with photos that rotate them in the order they are stored in an album. = + +
+ Image size control + + + + + +
+ = + + To stop the slide-show user clicks Close window button on the slide-show panel and stop= Slideshow() method is invoked. = + + - = + ...]]> = + = + The active field is set to "fals= e" again, consequently the poller becomes inactive and the modal panel= becomes invisible too. + +
+ Vizit following pages at RichFaces Live Demo for m= ore information, examples and sources on the components used in the applica= tion and described in this chapter: = @@ -392,4 +509,3 @@ = - Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/butto= n.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- 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 @@ + xmlns:s=3D"http://jboss.com/products/seam/taglib" + xmlns:c=3D"http://java.sun.com/jstl/core" + xmlns:ui=3D"http://java.sun.com/jsf/facelets" + xmlns:f=3D"http://java.sun.com/jsf/core" + xmlns:h=3D"http://java.sun.com/jsf/html" + xmlns:rich=3D"http://richfaces.org/rich" + xmlns:a4j=3D"http://richfaces.org/a4j" + xmlns:richx=3D"http://richfaces.org/richx"> - - - - - -
#{value}
- - - + + + +
#{value}
+ - - - - - = - - - -
#{value}
- - - - - - - - - - - - - - -
#{value}
- - - - - - - - - - - - - - - -
#{value}
- - - - - - - ...]]> = The <richx:actionMapper> Deleted: trunk/docs/realworld_app_guide/en/src/main/docbook/includes/datasc= roller.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/realworld_app_guide/en/src/main/docbook/includes/datascrolle= r.xml 2009-05-08 13:31:51 UTC (rev 14079) +++ trunk/docs/realworld_app_guide/en/src/main/docbook/includes/datascrolle= r.xml 2009-05-08 14:34:09 UTC (rev 14080) @@ -1,132 +0,0 @@ - -
- Custom Data Scroller - - The custom data scroller implementation in the Photo Album application i= s basically <a4j:repeat>= with the value attribute bound to #{model.selectedAlbum.i= mages}, which is a collection of images of the selected album and th= e <rich:dataScroller>> component tied to the <a4j:r= epeat> . = - - = - - The source code you can find in the includes/images/imageScroller.xhtm= l file. = - Now let's go deeper into the details. The main component here is <a4j:repeat>: - = - - = - - - - - - - - - -
- - - - - - - - - - - - - -...]]> = - = - - Each element of the = - = - <a4j:repeat> has a corresponding <a4j:outputPane= l> with the <= a4j:mediaOutput> as a nested element. <a4j:mediaOutput> rende= rs the thumbnail of the image. As the rows attribute is set to "5"= ; (rows=3D"5"), only 5 images are displayed on the page at a t= ime. - = - - = - - As you've noticed, the currently selected image in the data scrolle= r has different style, namely: a red frame around thumbnail, which is imple= mented with this code: - - = -...]]> = - - As you can see from the code snippet, = - identification of whether the currently selected image is the same image= displayed by the <a4j:repeat> is performed in the styleClass, if it returns "true= ", different style is applied. - - - Each <a4j:repeat> has a corresponding <a4j:sup= port> configured like this: - - - -...]]> = - = - - On every click <a4j:support> calls #{controller.showImage(img)} method = that sets the current image, thumbnail of which has just been clicked on. F= or more details please see Controller.java class. - - = - - To implement thumbnails scrolling effect the <rich:datascroller> is attached to the = <a4j:repeat>: - - = - - - - - - - - - - - - - - - - - - -...]]> = - - 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 index in the collection, then the 3rd page will be displayed: - = - - = - = - - The lastPageMode=3D"full" 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 selec= ted then only 2 last thumbnails would have been displayed. = - - = - - As you can see, <rich:dataScroller&= gt; has a slightly different look-and-feel, the trick= is in the redefinition of fastforward, fa= stforward_disabled, fastrewind and fastrewind_disabled facets on which places we display our ima= ges. We didn't redefine other facets because they are not rendered to the p= age which is achieved with boundaryControls=3D"hide" and stepControls=3D"hide attributes of <rich:dataSroller>. - - - To get more details about the <a4j:= repeat> and <= rich:dataScroller> components please visit Live Demo web page and RichFaces Developer Guide - = - -
Modified: trunk/docs/realworld_app_guide/en/src/main/docbook/master.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/realworld_app_guide/en/src/main/docbook/master.xml 2009-05-0= 8 13:31:51 UTC (rev 14079) +++ trunk/docs/realworld_app_guide/en/src/main/docbook/master.xml 2009-05-0= 8 14:34:09 UTC (rev 14080) @@ -18,9 +18,9 @@ - - + + = ]> = @@ -81,9 +81,9 @@ &uploadImages; &contextMenu; &tooltips; - &validators; - &datascroller; + &validators; &button; + &a4j_status; = &userPreferencesView; &errorsReports; --===============1014068345833922493==--