<?xml version="1.0" encoding="UTF-8"?>
<section id="albumView">
	<title>Album View</title>
	<para>
		Work in progress...
	</para>
	
	
	<section>
		<title>Image Size Control with &lt;rich:inputNumberSlider&gt;</title>
            <para>
                  The <emphasis role="bold"><property>rich:inputNumberSlider</property></emphasis> component in the Photo Album Demo is used as a control that helps a user to change photos size while previewing an album. 
                  A handler position on the slider track corresponds to a particular value of an image size. 
                  The component is included into the page with the help of <emphasis role="bold"><property>ui:include</property></emphasis>:
            </para>
                  <programlisting role="XML"><![CDATA[...
<ui:include src="src/main/webapp/includes/image/inputNumberSlider.xhtml"/>
...]]></programlisting> 
            
            <para>
                  Now let's have a look at <code>src/main/webapp/includes/image/inputNumberSlider.xhtml</code> file:
            </para>
                  <programlisting role="XML"><![CDATA[...
<ui:composition ...>
      <div>
            <rich:inputNumberSlider value="#{imageSizeHelper.value}"
                        minValue="80" 
                        maxValue="200" 
                        step="40"
                        enableManualInput="false"
                        showArrows="false"
                        showBoundaryValues="true"
                        showInput="false">
                  <a4j:support event="onchange" reRender="userAlbumImages"/>
            </rich:inputNumberSlider>
      </div>
</ui:composition>
...]]></programlisting> 
              <para>
                    There is special Enumeration type that contains four predefined values for image size. Each type has a set of image related attributes such as CSS class for new photo size, postfix for a new file name, image background.
                    The <code>setValue</code> method of the <code>ImageSizeHelper.java</code> class is triggered on each slider's position change. This method sets one of four predefined values for image size and due to slider's position.  
              </para>
	      <programlisting role="JAVA"><![CDATA[public void setValue(int value) {
            currentDimension = ImageDimension.getInstance(value);
            this.value = currentDimension.getX();
}]]></programlisting> 
	      
	      <para>
	            And here is the <code>ImageDimension.java</code> class:
	      </para>
                 
                  <programlisting role="JAVA"><![CDATA[...
 public enum ImageDimension {

	SIZE_80(80), SIZE_120(120), SIZE_160(160), SIZE_200(200), SIZE_MEDIUM(600), ORIGINAL(0);

	final static String CSS_CLASS = "preview_box_photo_";
	final static String FILE_POSTFIX = "_small";
	final static String IMAGE_BG = "/img/shell/frame_photo_%1$d.png";
	final static String IMAGE_BG_STYLE = "width: %1$dpx; height: %1$dpx";
	
	int x;
	String bgStyle;
	String cssClass;
	String imageBgSrc;
	String filePostfix;

	private ImageDimension(int x) {
		this.x = x;
		this.bgStyle = String.format(IMAGE_BG_STYLE, x + 20);
		cssClass = CSS_CLASS + x;
		imageBgSrc = String.format(IMAGE_BG, (x == 160) ? 200 : x);
		if(x == 600){
			filePostfix = "_medium";
		}else if(x == 0){
			filePostfix = "";
		}else{
			filePostfix = FILE_POSTFIX + x;
		}
	}
      ...]]></programlisting>
                  	      	      
	      <para>
	          After the <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> is worked out user photos 
                        (more exactly, the <emphasis role="bold"><property>h:panelGroup</property></emphasis> with <code>userAlbumImages</code> id  that contains user photos) 
                        are rendered correspondingly to a new set value. Here is <code>web/src/main/webapp/includes/image/imageList.xhtml</code>:
                  </para>
                  <programlisting role="XML"><![CDATA[...
<h:panelGroup id="userAlbumImages">		
	<a4j:repeat id="imageList" value="#{model.images}" var="image" rows="20">
		<h:panelGroup layout="block" styleClass="#{imageSizeHelper.currentDimension.cssClass}">
			<h:graphicImage styleClass="pr_photo_bg" style="#{imageSizeHelper.currentDimension.imageBgStyle}" value="#{imageSizeHelper.currentDimension.imageBg}" />
			<h:panelGrid cellpadding="0">
				<h:panelGroup>
					<a4j:commandLink
							actionListener="#{controller.showImage(image)}"
							reRender="mainArea, treePanel">					
								<a4j:mediaOutput id="img"  element="img" 
									createContent="#{imageLoader.paintImage}" 
									style="border : 1px solid #FFFFFF;"
									value="#{fileManager.transformPath(image.fullPath, imageSizeHelper.currentDimension.filePostfix)}">
									<f:param value="#{imageSizeHelper.currentDimension.x}" name="x" />
									<rich:dragSupport rendered="#{controller.isUserImage(image)}" reRender="mainArea, treePanel" id="dragSource" dragIndicator="dragIndicator"
                                dragType="image" dragValue="#{image}">
                                <rich:dndParam id="dragParam" name="label" value="#{image.name}" />
                            </rich:dragSupport>
							</a4j:mediaOutput>
					</a4j:commandLink>
					<br/>
				</h:panelGroup>
				<ui:include src="/includes/contextMenu/CMForImage.xhtml" >
					<ui:param name="image" value="#{image}" />
					<ui:param name="mediaOutput" value="#{rich:clientId('img')}"/>
				</ui:include>
				
			</h:panelGrid>				
			<h:panelGroup layout="block" styleClass="photo_name">#{image.name}</h:panelGroup>		
			<h:panelGroup layout="block" styleClass="photo_data">
				<h:outputText value="#{image.created}">
					<f:convertDateTime />
				</h:outputText>
			</h:panelGroup>		
		</h:panelGroup>
	</a4j:repeat>
	</h:panelGroup>		
...]]></programlisting>
              
              <para>
                    When the <emphasis role="bold"><property>&lt;rich:inputNumberSlider&lt;</property></emphasis> is rendered, at first its default value for image size is 120 px.  
              </para>
                  
                  <figure>
                        <title>Image size control</title>
                        <mediaobject>
                              <imageobject>
                                    <imagedata fileref="images/image_size.png"/>
                              </imageobject>
                        </mediaobject>
                  </figure>
	      <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>
	      
	      <itemizedlist>
	            <listitem>
	                  <para>
	                        <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumberSlider.jsf?c=inputNumberSlider">InputNumberSlider</ulink> page for the <emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> component;
	                  </para>     
	            </listitem>
	            
	            <listitem>
	                  <para>
	                        <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf?c=support">AjaxSupport</ulink> for the <emphasis role="bold"><property>&lt;a4j:suport&gt;</property></emphasis> component.
	                  </para>     
	            </listitem>
	            
	            	            
	      </itemizedlist>   
            
            </section>
            
            <section id="imagesScroller">
	            <title>Images Scroller</title>
                  <para>
                        The Images Scroller implementation in the Photo Album application is basically <emphasis role="bold"><property>&lt;a4j:repeat&gt;</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>&lt;rich:dataScroller>&gt;</property></emphasis> component tied to the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</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>&lt;a4j:repeat&gt;</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>&lt;a4j:repeat&gt;</property></emphasis> has a corresponding <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> with the <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis>   as a nested element. <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> renders the thumbnail of the image. As the rows attribute is set to &quot;5&quot; (<code>rows="5"</code>), only 5 images are displayed on the page at a time.
                        
                  </para>
                  
                  <para>
                        As you&apos;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>&lt;a4j:repeat&gt;</property></emphasis> is performed in the styleClass, if  it returns &quot;true&quot;,  different style is applied.
                  </para>
                  <para>
                        Each  <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> has a corresponding  <emphasis role="bold"><property>&lt;a4j:support&gt;</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>&lt;a4j:support&gt;</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>&lt;rich:datascroller&gt;</property></emphasis> is attached to the  <emphasis role="bold"><property>&lt;a4j:repeat&gt;</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=&quot;full&quot; </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>&lt;rich:dataScroller&gt;</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=&quot;hide&quot;</code> and <code>stepControls=&quot;hide</code> attributes of <emphasis role="bold"><property>&lt;rich:dataSroller&gt;</property></emphasis>.
                  </para>
                  
                  <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>
                  
                  <itemizedlist>
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableScroller.jsf?c=dataTableScroller">DataTableScrolling</ulink> page for the <emphasis role="bold"><property>&lt;rich:dataScroller&gt;</property></emphasis> component;
                              </para>     
                        </listitem>
                        
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?c=repeat">Repeat</ulink> for the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component.
                              </para>     
                        </listitem>
                                           
                  </itemizedlist>  
                 
            </section>
            
            <section id="slideshow">
            <title>Slideshow</title>
            
                  <para>The slideshow feature in the Photo Album Demo can be enabled by clicking on <emphasis role="bold">&quot;Start Slideshow&quot;</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 &lt;<emphasis role="bold"><property>ui:include</property></emphasis> tag 
                  (for more information about &lt;<emphasis role="bold"><property>ui:include</property></emphasis> see Facelets Reference Guide — 
                  <ulink url="http://www.jsftoolbox.com/documentation/facelets/01-Introduction/index.jsf">http://www.jsftoolbox.com/documentation/facelets/01-Introduction/index.jsf</ulink>).
            </para>
            <para>
                  The components that implement the slideshow functionality are:
            </para>
                  <itemizedlist>
                        <listitem><para><emphasis role="bold"><property>&lt;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=&quot;#{slideshow.active}&quot;</code> and the active property of  SlideshowManager.java is set to &quot;false&quot; by default.</para></listitem>
                        <listitem><para><emphasis role="bold"><property>&lt;a4j:poll&gt;</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>&lt;a4j:poll&gt;</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&apos;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;
      if(model.getImages() == null || model.getImages().size() < 1){
            stopSlideshow();
            Events.instance().raiseEvent(Constants.ADD_ERROR_EVENT, "No images for slideshow!");
            return;
      }
      this.selectedImage = model.getImages().get(this.slideshowIndex);
      this.selectedImage.getAlbum().visitImage(selectedImage, true);
}
...]]></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();
            Events.instance().raiseEvent(Constants.ADD_ERROR_EVENT, "No images for slideshow!");
            return;
      }
      this.slideshowIndex = model.getImages().indexOf(selectedImage);
      this.selectedImage = selectedImage;
      this.selectedImage.getAlbum().visitImage(selectedImage, true);
}
...]]></programlisting>           
            
            <para>
                  Both variants of <code>startSlideshow()</code> method set the <code>active</code> property to &quot;true&quot; as a result the poller is activated and modal panel becomes visible.                   
                 
            </para>
                  <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 &lt;ui:include&gt; 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[...
<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>
                        
                        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">
      <a4j:form id="slideShowForm">
            <a4j:poll reRender="slideshowImage"
                              actionListener="#{slideshow.showNextImage()}"
                              interval="#{slideshow.interval}"
                              enabled="#{slideshow.active}"
                              onsubmit="hidePictureEffect()"
                              oncomplete="showPictureEffect();"/>
      </a4j:form>
</ui:composition>
...]]></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> 
                  
                  <para>
                        The <code>active</code> field is set to &quot;false&quot; 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>
                  
                  <itemizedlist>
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.jsf?c=modalPanel">ModalPanel</ulink> page for the <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> component;
                              </para>     
                        </listitem>
                        
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?c=effect">Effect</ulink> for the <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> component;
                              </para>     
                        </listitem>
                        
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/mediaOutput.jsf?c=mediaOutput">MediaOutput</ulink> for the <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> component;
                              </para>     
                        </listitem>
                        
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf?c=support">AjaxSupport</ulink> for the <emphasis role="bold"><property>&lt;a4j:suport&gt;</property></emphasis> component;
                              </para>     
                        </listitem>
                        
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandLink.jsf?c=commandLink">CommandLink</ulink> for the <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> component;
                              </para>     
                        </listitem>
                        
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf?c=form">AjaxForm</ulink> for the <emphasis role="bold"><property>&lt;a4j:form&gt;</property></emphasis> component;
                              </para>     
                        </listitem>
                        
                        <listitem>
                              <para>
                                    <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/poll.jsf?c=poll">Poll</ulink> for the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> component.
                              </para>     
                        </listitem>
                       </itemizedlist>
            
</section>
