<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE section PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
<!ENTITY % BOOK_ENTITIES SYSTEM "../../../User_Guide.ent">
%BOOK_ENTITIES;
]>
<section id="sect-User_Guide-Views">
	<title>Views</title>
	 <para>
		There are many drives in <emphasis role="bold">Sites Explorer</emphasis>. Each drive has some views that enable you to view data in the drive in a particular way. Each view has some action tabs and each action tab contains some functions.
	</para>
	 <para>
		&PRODUCT; supports you some ways to view nodes in a specific folder and show actions of corresponding tab on the <emphasis role="bold">Action</emphasis> bar.
	</para>
	 <note>
		 <para>
			The number of view types depends on which drive you are browsing. In eXo Platform, you can manage view types by selecting
      <inlinemediaobject>
            <imageobject>
              <imagedata fileref="images/sawtooth_icon.png" format="PNG" scalefit="1" width="4mm"/>
            </imageobject>
          </inlinemediaobject> <emphasis role="bold">--> Content --> Content Administration --> Content Presentation --> Manage View.</emphasis> See the <link linkend="sect-User_Guide-Content_Presentation_Manager-Manage_Views">Manage views</link> section for more details.
		</para>
	</note>
	 <section id="sect-User_Guide-Views-Admin_view">
		<title>Admin view</title>
		 <para>
			In this view, each item in the list includes following information: <emphasis role="bold">Name, Versionable, Owner, Date Modified </emphasis>, and <emphasis role="bold">Date Created</emphasis>. These information will help you manage nodes easily.
		</para>
		 <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/detailsview.png" format="PNG"   />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/detailsview.png" format="PNG" width="150mm" scalefit="1" />
			</imageobject>
		</mediaobject>
		 <para>
			You also can sort nodes to the nodes information by clicking the label of corresponding column.
		</para>
			<itemizedlist>
			<listitem>
			<para>
			<inlinemediaobject>
				<imageobject>
					<imagedata fileref="images/descendingarrow.png" format="PNG" width="3mm" scalefit="1"/>
				</imageobject>
            <textobject>
               <phrase>ascending arrow</phrase>
            </textobject>
			</inlinemediaobject> indicates that nodes are ordered in the ascending order.
			</para>
			</listitem>
			<listitem>
			<para>
			<inlinemediaobject>
				<imageobject>
               <imagedata fileref="images/ascendingarrow.png" format="PNG" width="3mm" scalefit="1"/>
				</imageobject>
            <textobject>
               <phrase>descending arrow</phrase>
            </textobject>
			</inlinemediaobject> means nodes are in the descending order.
		</para>
		</listitem>
		</itemizedlist>
	</section>
<section id="sect-User_Guide-Views-Cover_Flow_View">
		<title>Cover Flow view</title>
		 <para>
			This view is defined as a dynamic one with the side-scrolling view to nodes in a folder. In this view, when a node is selected, its name is set with bold effect to more outstanding than others.
		</para>
		 <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/imagefolders.png" format="PNG"   />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/imagefolders.png" format="PNG" width="150mm" scalefit="1" />
			</imageobject>

		</mediaobject>
		<!-- <para>
			If nodes are pictures, they are shown like:
		</para>
		 <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/coverflow.png" format="PNG"   />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/coverflow.png" format="PNG" width="150mm" />
			</imageobject>

		</mediaobject>
		 <para>
			If nodes are documents or folders, they are displayed like the illustration below :
		</para>
		 <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/folderflow.png" format="PNG"   />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/folderflow.png" format="PNG" width="150mm" />
			</imageobject>

		</mediaobject>    -->
		 <para>
			To move from one node to another one, you can do one of these ways:
		</para>
		 <itemizedlist>
			<listitem>
				<para>
					Use the mouse wheel.
				</para>
			</listitem>
			 <listitem>
				<para>
					Hold and move the yellow circle button to the left or the right.
				</para>
			</listitem>
			 <listitem>
				<para>
					Click the folder/document name that you want to select.
				</para>
			</listitem>
		</itemizedlist>
	</section>
	 <section id="sect-User_Guide-Views-Icons_View">
		<title>Icons view</title>
		 <para>
			In this view type, nodes in a specific folder will be viewed as icons. The name of each node will be shown under its icon.
		</para>
		 <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/iconsview.png" format="PNG"   />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/iconsview.png" format="PNG" width="150mm" scalefit="1"/>
			</imageobject>

		</mediaobject>

	</section>
	
	 <section id="sect-User_Guide-Views-Thumbnails_View">
		<title>Thumbnails view</title>
		 <para>
			By using the <emphasis role="bold">Thumbnails</emphasis> view, nodes in a specific folder are viewed as icons bounded by frames. Name of each node is shown under its icon.
		</para>

		 <para>
			If nodes are image files, their thumbnails will be shown like the screenshot below.
		</para>
		 <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/thumbnailimages.png" format="PNG"   />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/thumbnailimages.png" format="PNG" width="150mm" scalefit="1" />
			</imageobject>
		</mediaobject>

	<!--	 <para>Especially, in this view, you can <emphasis role="bold">overload a thumbnail image</emphasis> for a node as follows:
		</para>
		 <procedure>
			 <step>
				<para>
					Select a folder (on the left or right pane) that you want to add a thumbnail image.
				</para>
			</step>
			 <step>
				<para>
					Click
					<inlinemediaobject>
						<imageobject>
							<imagedata fileref="images/overloadthumbnail.png" format="PNG" width="5mm"/>
						</imageobject>
                  <textobject>
                     <phrase>[ Overload Thumbnail ]</phrase>
                  </textobject>
					</inlinemediaobject> to open the <emphasis role="bold">Add Thumbnail Image</emphasis> form.
				</para>
			</step>
			 <step>
				<para>
					Select an image from your device to use as a display icon for the selected folder.
				</para>
			</step>
			 <step>
				<para>
					Complete adding a thumbnail image by clicking <emphasis role="bold">Save.</emphasis> This node will be stored in the <emphasis>exo:thumbnails</emphasis> folder.
				</para>
			</step>
			 <step>
				<para>
					Return to the parent folder ("Pictures" in this example) which contains the selected folder to see an icon used to display.
				</para>
			</step>
		</procedure>   -->
	</section>
		 <section id="sect-User_Guide-Views-Slide_Show_View">
		<title>Slide Show view</title>
		 <para>
			In this view type, pictures in folders are viewed in the slide show.
		</para>
		 <para>
			To view pictures in the slide show, click
      <inlinemediaobject>
				<imageobject>
               <imagedata fileref="images/slideshowicon.png" format="PNG" width="5mm" scalefit="1"/>
				</imageobject>
            <textobject>
               <phrase>slide show</phrase>
            </textobject>
			</inlinemediaobject>.
		</para>
		 <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/imageslideshow.png" format="PNG"  />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/imageslideshow.png" format="PNG" width="50mm" scalefit="1"/>
			</imageobject>
		</mediaobject>
		 <para>
			If nodes are pictures, they are displayed like the following illustration.
		</para>
		 <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/pictureslideshowscreen.png" format="PNG"   />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/pictureslideshowscreen.png" format="PNG" width="100mm" scalefit="1" />
			</imageobject>

		</mediaobject>
		 <para>
			The <emphasis role="bold">Slide Show</emphasis> view automatically shows all picture nodes. Users can control this slide show by clicking the below buttons.
		</para>
		 <table>
			 <tgroup cols="2">
				<thead>
					<row>
						<entry>
							Button
						</entry>
						 <entry>
							Function
						</entry>

					</row>

				</thead>
				 <tbody>
					<row>
						<entry>
							<mediaobject>
								<imageobject>
                           <imagedata align="center" fileref="images/slideshownavfirst.png" format="PNG" width="4mm" scalefit="1"/>
								</imageobject>

							</mediaobject>

						</entry>
						 <entry>
							Go to the first picture node.
						</entry>

					</row>
					 <row>
						<entry>
							<mediaobject>
								<imageobject>
                           <imagedata align="center" fileref="images/slideshownavprev.png" format="PNG" width="4mm" scalefit="1" />
								</imageobject>

							</mediaobject>

						</entry>
						 <entry>
							View the previous picture node.
						</entry>
					</row>
					 <row>
						<entry>
							<mediaobject>
								<imageobject>
                           <imagedata align="center" fileref="images/slideshownavpause.png" format="PNG" width="4mm" scalefit="1" />
								</imageobject>
							</mediaobject>
						</entry>
						 <entry>
							Pause the slide show. After clicking this button, 
              <inlinemediaobject>
            <imageobject>
              <imagedata fileref="images/slideshownavpause.png" format="PNG" scalefit="1" width="4mm"/>
            </imageobject>
          </inlinemediaobject> will become 
           <inlinemediaobject>
            <imageobject>
              <imagedata fileref="images/slideshownavplay.png" format="PNG" scalefit="1" width="4mm"/>
            </imageobject>
          </inlinemediaobject>. Click 
             <inlinemediaobject>
            <imageobject>
              <imagedata fileref="images/slideshownavplay.png" format="PNG" scalefit="1" width="4mm"/>
            </imageobject>
          </inlinemediaobject> to continue viewing the pictures node.
          </entry>
				</row>
					 <row>
						<entry>
							<mediaobject>
								<imageobject>
                           <imagedata align="center" fileref="images/slideshownavnext.png" format="PNG" width="4mm" scalefit="1"/>
								</imageobject>

							</mediaobject>

						</entry>
						 <entry>
							View the next picture node.
						</entry>
					</row>
					 <row>
						<entry>
							<mediaobject>
								<imageobject>
                           <imagedata align="center" fileref="images/slideshownavlast.png" format="PNG" width="4mm" scalefit="1"/>
								</imageobject>

							</mediaobject>

						</entry>
						 <entry>
							View the last picture node.
						</entry>
					</row>
        </tbody>

			</tgroup>

		</table>

	</section>
	
	 <section id="sect-User_Guide-Views-Timeline_View">
		<title>Timeline view</title>
		 <para>
			This view enables users to view all document nodes created and uploaded by simply clicking
			<inlinemediaobject>
				<imageobject>
               <imagedata fileref="images/timeline.png" format="PNG" width="4mm" scalefit="1"/>
				</imageobject>
            <textobject>
               <phrase>clock</phrase>
            </textobject>
			</inlinemediaobject>.
		</para>
         <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/timelineview.png" format="PNG"  />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/timelineview.png" format="PNG" width="62mm" scalefit="1" />
			</imageobject>
		</mediaobject>
		 <para>
			All the document nodes, which have been created and uploaded, will be displayed.
		</para>
         <mediaobject>
			<imageobject role="html">
				<imagedata align="center" fileref="images/timelinedetails.png" format="PNG"   />
			</imageobject>
			 <imageobject role="fo">
            <imagedata align="center"  fileref="images/timelinedetails.png" format="PNG" width="150mm" scalefit="1" />
			</imageobject>
		</mediaobject>
         <itemizedlist>
             <listitem>
                 <para>
                     Click the node name to view its content in details.
                 </para>
             </listitem>
             <listitem>
                 <para>Click a timeline category, such as <emphasis role="bold">Today</emphasis>,
                     <emphasis role="bold">Yesterday</emphasis>, <emphasis role="bold">Earlier This Week</emphasis>,
                     <emphasis role="bold">Earlier This Month</emphasis>,
                     and
                     <emphasis role="bold">Ealier This Year</emphasis>
                     to review all the nodes of the category. Click it again to return the the default.
                 </para>
             </listitem>
             <listitem>
                 <para>
                     Click
                     <inlinemediaobject>
                         <imageobject>
                             <imagedata fileref="images/favestar.png" format="PNG" width="5mm" scalefit="1"/>
                         </imageobject>
                         <textobject>
                             <phrase>star</phrase>
                         </textobject>
                     </inlinemediaobject>
                     to mark your item as favorite, or
                     <inlinemediaobject>
                         <imageobject>
                             <imagedata fileref="images/unfavestar.png" format="PNG" width="5mm" scalefit="1"/>
                         </imageobject>
                         <textobject>
                             <phrase>star</phrase>
                         </textobject>
                     </inlinemediaobject>
                     of a favorite node again to remove it from favorites.
                 </para>
             </listitem>
         </itemizedlist>
     </section>
</section>