Changeset 28598
- Timestamp:
- 2013-11-04T09:25:54+13:00 (10 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
documentation/trunk/tutorials/xml-source/tutorial_en.xml
r28506 r28598 758 758 </Content> 759 759 </Tutorial> 760 <!-- 761 <MajorVersion number="3"> 760 762 <Tutorial id="images_gps"> 761 763 <Title> … … 767 769 <Content> 768 770 <Comment> 769 <Text id="images-gps-0">In this tutorial, we'll be looking at a building a collection that takes advantage of the location metadata embedded in the image files to present the spatial features meaningfully.</Text> 770 </Comment> 771 <NumberedItem> 772 <Text id="images-gps-1">Create a new collection in GLI called <i>Images-GPS</i>. In the <b>Gather</b> panel, drag and drop the 4 folders in <Path>sample_files → images_gps</Path> from the file system view on the left into your collection view on the right.</Text> 773 </NumberedItem> 774 <NumberedItem> 775 <Text id="images-gps-2">In the <b>Document Plugins</b> section of the <b>Design</b> panel, go down to the <b>select plugin to add</b> and choose the EmbeddedMetadataPlugin. Press the <b>Add Plugin</b> button to add it to the plugin list. Select this plugin in the list, then use the <b>Move Up</b> button to shift it upwards until it comes just after the GreenstoneXMLPlugin.</Text> 771 <Text id="images-gps-0">In this tutorial, we'll be looking at building a collection that takes advantage of the GPS metadata embedded in image files. Using this data, we can plot the images on a map based on where they were taken.</Text> 772 </Comment> 773 <NumberedItem> 774 <Text id="images-gps-1">Create a new collection in GLI called <i>Images-GPS</i>. In the <b>Gather</b> panel, drag and drop the 4 folders in <Path>sample_files → images_gps</Path> from the Workspace view on the left into the Collection view on the right.</Text> 775 </NumberedItem> 776 <NumberedItem> 777 <Text id="images-gps-1a">Since the images are organised by folder, we can easily assign <i>folder-level</i> metadata to the images which will help with classifying them. In the <b>Enrich</b> panel, select the eiffel-tower folder, and in its <b>dc.Title</b> field type <i>Eiffel Tower</i>. Since this metadata is assigned at folder level, it is inherited as <b>dc.Title</b> metadata by all the images in the folder. Now select each of the remaining folders in turn, and assign the appropriate values for their <b>dc.Title</b>: <i>Musée d'Orsay</i>, <i>Parc de Luxembourg</i> and <i>Panthéon district</i>, respectively.</Text> 778 </NumberedItem> 779 <NumberedItem> 780 <Text id="images-gps-2">In the <b>Document Plugins</b> section of the <b>Design</b> panel, go down to the <b>select plugin to add</b> and choose the <b>EmbeddedMetadataPlugin</b>. Press the <b>Add Plugin</b> button, and then click <b>OK</b> to add it to the plugin list. Select this plugin in the list, then use the <b>Move Up</b> button to shift it upwards until it comes just after the GreenstoneXMLPlugin.</Text> 776 781 </NumberedItem> 777 782 <NumberedItem> … … 779 784 </NumberedItem> 780 785 <NumberedItem> 781 <Text id="images-gps-4">If you were to preview it at this stage, it would just be a simple image collection. However, as these images contain GPS metadata embedded into them, building the collection the first time would have extracted this. We can use this extracted location metadata to display the location data in these images more meaningfully. Move to the <b>Enrich</b> pane, expand a folder, select an image and scroll through its extracted metadata to find several pieces of metadata specifying Latitude and Longitude information: ex.LatShort, ex.Latitude, ex.LngShort and ex.Longitude.</Text> 782 </NumberedItem> 783 <NumberedItem> 784 <Text id="images-gps-5">First though, since the images are organised by folder, we can easily assign <i>folder-level</i> metadata to the images which will help with classifying them. Still in the <b>Enrich</b> tab, select the eiffel-tower folder, and in its <b>dc.Title</b> field type <i>Eiffel Tower</i>. Since this metadata is assigned at folder level, it is inherited as <b>dc.Title</b> metadata by all the images in the folder. Now select each of the remaining folders in turn, and assign the appropriate values for their <b>dc.Title</b>: <i>Musée d'Orsay</i>, <i>Parc de Luxembourg</i> and <i>Panthéon district</i>.</Text> 785 </NumberedItem> 786 <NumberedItem> 787 <Text id="images-gps-6">Shift over to the <b>Design</b> panel, select <b>Search Indexes</b> on the left and press the <b>New Index</b> button on the right. Scroll down to the ex.LatShort, ex.Latitude, ex.LngShort and ex.Longitude metadata and tick the boxes for all four and press <b>Add Index</b> to create an index on all these 4 pieces of metadata.</Text> 788 </NumberedItem> 789 <NumberedItem> 790 <Text id="images-gps-7">Select <b>Browsing Classifiers</b> to the left of the <b>Design</b> tab. In the <b>select classifier to add</b> dropdown box, choose <b>AZCompactList</b> and press <b>Add Classifier</b>. In the configuration dialog that appears, set the metadata field to <b>dc.Title</b> to create a classifier that groups all images under Eiffel Tower into one bookshelf and similarly creates bookshelves for the other 3 categories.</Text> 791 </NumberedItem> 792 <NumberedItem> 793 <Text id="images-gps-8">Greenstone has a map view that can make use of this location metadata to present the images. To enable the map, move to the <b>Format</b> panel, select <b>Format Features</b> on the left, select the format statement for the <b>browse</b> classifier. In the editor below, prefix the following format statement <i>above</i> the documentNode template:</Text> 786 <Text id="images-gps-4">Preview the collection and click the <b>Titles</b> tab. This is what an image collection looks like by default. However, these images have embedded GPS metadata, and we can use this extracted GPS metadata to display these images more meaningfully. In the <b>Enrich</b> panel, expand the <b>eiffel-tower</b> folder and select the first image. Scroll down to see the metadata extracted during the building process. Among the extracted metadta, you will find several pieces of Latitude and Longitude metadata, which will will be taking advantage of: ex.LatShort, ex.Latitude, ex.LngShort and ex.Longitude. Greenstone has a map view that can make use of this location metadata to present the images.</Text> 787 </NumberedItem> 788 <NumberedItem> 789 <Text id="images-gps-6">In the <b>Search Indexes</b> section of the <b>Design</b> panel, press the <b>New Index...</b> button. Scroll down and tick the boxes for <b>ex.LatShort</b>, <b>ex.Latitude</b>, <b>ex.LngShort</b> and <b>ex.Longitude</b> and press <b>Add Index</b> to create an index on all these 4 pieces of metadata.</Text> 790 </NumberedItem> 791 <NumberedItem> 792 <Text id="images-gps-7">In the <b>Browsing Classifiers</b> section, choose <b>AZCompactList</b> from the <b>select classifier to add</b> dropdown box and press <b>Add Classifier...</b>. In the configuration dialog that appears, set the metadata field to <b>dc.Title</b> to create a classifier that groups all images under Eiffel Tower into one bookshelf and similarly creates bookshelves for the other 3 categories.</Text> 793 </NumberedItem> 794 <NumberedItem> 795 <Text id="images-gps-8">To enable the map, go to the <b>Format Features</b> section of the <b>Format</b> panel, and select the <b>browse</b> format feature. In the editor below, enter the following format statement <i>above</i> the documentNode template:</Text> 794 796 <Format><gsf:option name="mapEnabled" value="true" /></Format> 795 797 </NumberedItem> … … 802 804 </Content> 803 805 </Tutorial> 806 </MajorVersion--> 804 807 <Tutorial id="word_pdf_collection"> 805 808 <Title> … … 5178 5181 <Text id="hp-23">Add the following template before the final <i></xsl:stylesheet></i>:</Text> 5179 5182 <Format> 5180 <xsl:template name="loginButton"><br /> 5181 <Tab n="1"/><xsl:variable name="username" select="/page/pageRequest/userInformation/@username"/><br /> 5182 <Tab n="1"/><xsl:choose><br /> 5183 <Tab n="2"/><xsl:when test="$username"><br /> 5184 <Tab n="3"/><li><a><br /> 5185 <Tab n="4"/><xsl:attribute name="href"><xsl:value-of select="$library_name"/>/admin/AccountSettings?s1.username=<xsl:value-of select="$username"/></xsl:attribute><xsl:value-of select="$username"/><br /> 5186 <Tab n="3"/></a></li><br /> 5187 <Tab n="3"/><li><a href="{$library_name}/admin/AddUser">Register a new user</a></li><br /> 5188 <Tab n="4"/><li><a href="{$library_name}/admin/ListUsers">Administration</a></li><br /> 5189 <Tab n="3"/><li><a><xsl:attribute name="href"><xsl:value-of select="$library_name"/>?logout=</xsl:attribute>Logout</a></li><br /> 5190 <Tab n="2"/></xsl:when><br /> 5191 <Tab n="2"/><xsl:otherwise><br /> 5192 <Tab n="3"/><li><a href="?a=p&amp;sa=login&amp;redirectURL={$library_name}%3Fa=p%26sa=home">Login<br /> 5193 <Tab n="4"/><xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_tip')"/></xsl:attribute><br /> 5194 <Tab n="3"/></a></li><br /> 5195 <Tab n="2"/></xsl:otherwise><br /> 5196 <Tab n="1"/></xsl:choose><br /> 5197 </xsl:template><br /> 5183 <Tab n="1"/><xsl:template name="loginButton"><br /> 5184 <Tab n="2"/><xsl:variable name="username" select="/page/pageRequest/userInformation/@username"/><br /> 5185 <Tab n="2"/><xsl:variable name="groups" select="/page/pageRequest/userInformation/@groups"/><br /><br /> 5186 5187 <Tab n="2"/><xsl:choose><br /> 5188 <Tab n="3"/><xsl:when test="$username"><br /> 5189 <Tab n="4"/><xsl:if test="contains($groups,'admin')"><br /> 5190 <Tab n="5"/><li class="login"><a href="{$library_name}/admin/AddUser">Add user</a></li><br /> 5191 <Tab n="5"/><li class="login"><a href="{$library_name}/admin/ListUsers">Administration</a></li><br /> 5192 <Tab n="4"/></xsl:if><br /> 5193 <Tab n="4"/><li class="login"><a href="{$library_name}/admin/AccountSettings?s1.username={$username}">Logged in as: <xsl:value-of select="$username"/></a></li><br /> 5194 <Tab n="4"/><li class="login"><a href="{$library_name}?logout=">Logout</a></li><br /> 5195 <Tab n="3"/></xsl:when><br /> 5196 <Tab n="3"/><xsl:otherwise><br /> 5197 <Tab n="4"/><li class="login"><br /> 5198 <Tab n="5"/><a href="{$library_name}?a=p&sa=login&redirectURL={$library_name}%3Fa=p%26sa=home">Login<br/> 5199 <Tab n="6"/><xsl:attribute name="title"><br/> 5200 <Tab n="7"/><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_tip')"/><br/> 5201 <Tab n="6"/></xsl:attribute><br/> 5202 <Tab n="5"/></a><br /> 5203 <Tab n="4"/></li><br /> 5204 <Tab n="3"/></xsl:otherwise><br /> 5205 <Tab n="2"/></xsl:choose><br /> 5206 <Tab n="1"/></xsl:template><br /> 5198 5207 </Format> 5199 5208 </NumberedItem> … … 5236 5245 </Content> 5237 5246 </Tutorial> 5247 <Tutorial id="defining_libraries"> 5248 <Title> 5249 <Text id="dl-01">Defining Libraries</Text> 5250 </Title> 5251 <SampleFiles folder="libraries"/> 5252 <Version initial="3.06" current="3.06"/> 5253 <Content> 5254 <Comment> 5255 <Text id="dl-c1">Greenstone3 is built on the idea of sites and interfaces. <b>Sites</b> mainly contain <i>content</i>, i.e. they contain collections, which, in turn, contain documents and associated metadata. Sites are a convenient way to group collections. <br/><br/></Text> 5256 <Text id="dl-c2"><b>Interfaces</b> dictate the presentation -- e.g. the HTML, CSS, Javascript, etc. used to present the content. You can have multiple sites and interfaces. <br/><br/></Text> 5257 <Text id="dl-c3"><b>Libraries</b> combine content and presentation. To define a library, you select the site and the interface you want it to use. And, of course, you can have multiple libraries, and each site and interface can be used multiple times. <br/><br/></Text> 5258 <Text id="dl-c4">In this tutorial, we will become familiar with <b>web.xml</b>, where we can define new libraries; create a new site; add an interface; and define a new library.</Text> 5259 </Comment> 5260 <Heading> 5261 <Text id="dl-h1">Exploring libraries</Text> 5262 </Heading> 5263 <NumberedItem> 5264 <Text id="dl-02">Start up your Greenstone server (<Path>Start → All Programs → Greenstone3.06 → Greenstone3 Server</Path>) and click the <b>Enter Library</b> button. This will take you to the default library's home page. This library uses the site called <b>localsite</b> and the interface called <b>default</b>. </Text> 5265 5266 <Text id="dl-03">Change the url from <i>http://localhost:8383/greenstone3/library</i> to <i>http://localhost:8383/greenstone3/gs2-library</i> and reload the page. This is another library that is defined by Greenstone3. Again, the site it uses is <b>localsite</b>, but this library (called <b>gs2-library</b>) uses the <b>gs2</b> interface, which is based on the Greenstone2 layout. Let's take a look at where these libraries are defined.</Text> 5267 </NumberedItem> 5268 <NumberedItem> 5269 <Text id="dl-04">In a Windows Explorer, navigate to the <Path>Greenstone3 → web → WEB-INF </Path> folder and open <b>web.xml</b> in a text editor. Scroll down until you see this section: 5270 </Text> 5271 5272 <Format> 5273 <Tab n="1"/><servlet><br/> 5274 <Tab n="2"/><servlet-name>library</servlet-name><br/> 5275 <Tab n="2"/><description>The standard gsdl3 library program</description><br/> 5276 <Tab n="2"/><servlet-class>org.greenstone.gsdl3.LibraryServlet</servlet-class><br/> 5277 <Tab n="2"/><init-param><br/> 5278 <Tab n="3"/><param-name>library_name</param-name><br/> 5279 <Tab n="3"/><param-value>library</param-value><br/><br/> 5280 <Tab n="1"/>...<br/><br/> 5281 5282 <Tab n="2"/><init-param><br/> 5283 <Tab n="3"/><param-name>default_lang</param-name><br/> 5284 <Tab n="3"/><param-value>en</param-value><br/> 5285 <Tab n="2"/></init-param><br/> 5286 <Tab n="1"/></servlet><br/></Format> 5287 5288 5289 5290 <Text id="hp-05">This <i>library servlet</i> defines the default Greenstone3 library (called <b>library</b>). As you can see, the <b>library_name</b> is <i>library</i>, the <b>site_name</b> is <i>localsite</i>, and the <b>interface_name</b> is <i>default</i>. If you look at the next servlet section, you will see that it has a library_name of <i>gs2-library</i>, uses <i>localsite</i> and the interface <i>gs2</i>. If you continue to scroll down, you will see several other library servlets defined. There are also other kinds of servlets, for example, you will see a servlet called <i>oaiserver</i>, which provides the functionality for the OAI server (located at <i>http://localhost:8383/greenstone3/oaiserver</i> ).</Text> 5291 </NumberedItem> 5292 <NumberedItem> 5293 <Text id="dl-06">Near the bottom of the file, you will see a list of <b>servlet mappings</b> that look like this:</Text> 5294 <Format> 5295 <Tab n="1"/><servlet-mapping><br/> 5296 <Tab n="2"/><servlet-name>library</servlet-name><br/> 5297 <Tab n="2"/><url-pattern>/library/*</url-pattern><br/> 5298 <Tab n="1"/></servlet-mapping><br/> 5299 </Format> 5300 <Text id="dl-07">Every servlet -- and, therefore, every library we define -- needs a servlet mapping, which tells the server at what URL the servlet should be located. (Notice that the servlet-name here is the same as above, and the url-pattern matches the library_name; this is required. The servlet-name does not have to match the library_name/url-pattern, but it is good practice to make them all the same.)</Text> 5301 <Text id="dl-08">Now that we've seen how libraries are defined in Greenstone3, let's take a look at where sites are located, how to create a new site, and how to define a new library that uses this site.</Text> 5302 </NumberedItem> 5303 <Heading> 5304 <Text id="dl-h2">Creating a new site</Text> 5305 </Heading> 5306 <NumberedItem> 5307 <Text id="dl-09">Sites are located in <Path>Greenstone3 → web → sites</Path>. In this folder, you will see two sites: <i>gateway</i> and <i>localsite</i>. (<i>gateway</i> is a bit different, and it won't be discussed in this tutorial.) Create a new folder in sites called <b>mysite</b>. This will be the name of your new site. In <b>mysite</b>, create a folder called <b>collect</b>. This is where all of this site's collections will be located. Finally, copy the <b>siteConfig.xml</b> file from the <b>localsite</b> folder into the <b>mysite</b> folder. (You can, of course, make modifications to the siteConfig.xml to configure your site, but, for simplicity's sake, we'll just use an exact copy.) </Text> 5308 </NumberedItem> 5309 <NumberedItem> 5310 <Text id="dl-10">You have now created a site called <b>mysite</b>. However, it has no content yet, and it would be nice to have at least one collection in your new site. From <Path>localsite → collect</Path>, copy the folder <b>lucene-jdbm-demo</b>, and paste it into <Path>mysite → collect</Path>.</Text> 5311 </NumberedItem> 5312 <Heading> 5313 <Text id="dl-h3">Defining a new library</Text> 5314 </Heading> 5315 <NumberedItem> 5316 <Text id="dl-11">Now, let's define a library that uses this new site. In <b>web.xml</b>, add the following (which can be copied from <Path>sample_files → libraries → def_libs.txt</Path>); The exact location doesn't matter, just put it with the other servlets:</Text> 5317 <Format> 5318 <Tab n="1"/><servlet><br/> 5319 <Tab n="2"/><servlet-name>library2</servlet-name><br/> 5320 <Tab n="2"/><description>A new library with my new site!</description><br/> 5321 <Tab n="2"/><servlet-class>org.greenstone.gsdl3.LibraryServlet</servlet-class><br/> 5322 <Tab n="2"/><init-param><br/> 5323 <Tab n="3"/><param-name>library_name</param-name><br/> 5324 <Tab n="3"/><param-value>library2</param-value><br/> 5325 <Tab n="2"/></init-param><br/> 5326 <Tab n="2"/><init-param><br/> 5327 <Tab n="3"/><param-name>site_name</param-name><br/> 5328 <Tab n="3"/><param-value>mysite</param-value><br/> 5329 <Tab n="2"/></init-param><br/> 5330 <Tab n="2"/><init-param><br/> 5331 <Tab n="3"/><param-name>interface_name</param-name><br/> 5332 <Tab n="3"/><param-value>default</param-value><br/> 5333 <Tab n="2"/></init-param><br/> 5334 <Tab n="2"/><init-param><br/> 5335 <Tab n="3"/><param-name>receptionist_class</param-name><br/> 5336 <Tab n="3"/><param-value>DefaultReceptionist</param-value><br/> 5337 <Tab n="2"/></init-param><br/> 5338 <Tab n="2"/><init-param><br/> 5339 <Tab n="3"/><param-name>default_lang</param-name><br/> 5340 <Tab n="3"/><param-value>en</param-value><br/> 5341 <Tab n="2"/></init-param><br/> 5342 <Tab n="1"/></servlet><br/> 5343 </Format> 5344 <Text id="dl-12">This defines a new library called <b>library2</b> that uses <b>mysite</b> and the <b>default</b> interface. Now, near the bottom of the file, add in a servlet mapping to tell the server where our new library should be located:</Text> 5345 <Format> 5346 <Tab n="1"/><servlet-mapping><br/> 5347 <Tab n="2"/><servlet-name>library2</servlet-name><br/> 5348 <Tab n="2"/><url-pattern>/library2/*</url-pattern><br/> 5349 <Tab n="1"/></servlet-mapping><br/> 5350 </Format> 5351 </NumberedItem> 5352 <NumberedItem> 5353 <Text id="dl-13">Save <b>web.xml</b>. For the changes to take effect, we must first restart the server. Click the <b>Restart Library</b> button in the Greenstone Server window. When the new browser window opens, navigate to <i>http://localhost:8383/greenstone3/library2</i> to see your newly defined library. Notice that only one collection appears -- the Lucene Demo Collection that we copied into <b>mysite</b>.</Text> 5354 </NumberedItem> 5355 <Heading> 5356 <Text id="dl-h4">Adding and using a new interface</Text> 5357 </Heading> 5358 <NumberedItem> 5359 <Text id="dl-14">Now that we know how to create and use a new site, let's add a new interface and define a library that uses it. Creating a new interface takes time (and is a tutorial all its own), so, for this tutorial, we are just going to use a pre-made interface. From the <Path>sample_files → libraries</Path> folder, copy the folder <b>althor</b> into the <Path>Greenstone3 → web → interfaces</Path> folder. In <b>web.xml</b>, define a new library that uses the althor interface:</Text> 5360 <Format> 5361 <Tab n="1"/><servlet><br/> 5362 <Tab n="2"/><servlet-name>rand</servlet-name><br/> 5363 <Tab n="2"/><description>A new library with my new interface!</description><br/> 5364 <Tab n="2"/><servlet-class>org.greenstone.gsdl3.LibraryServlet</servlet-class><br/> 5365 <Tab n="2"/><init-param><br/> 5366 <Tab n="3"/><param-name>library_name</param-name><br/> 5367 <Tab n="3"/><param-value>rand</param-value><br/> 5368 <Tab n="2"/></init-param><br/> 5369 <Tab n="2"/><init-param><br/> 5370 <Tab n="3"/><param-name>site_name</param-name><br/> 5371 <Tab n="3"/><param-value>mysite</param-value><br/> 5372 <Tab n="2"/></init-param><br/> 5373 <Tab n="2"/><init-param><br/> 5374 <Tab n="3"/><param-name>interface_name</param-name><br/> 5375 <Tab n="3"/><param-value>althor</param-value><br/> 5376 <Tab n="2"/></init-param><br/> 5377 <Tab n="2"/><init-param><br/> 5378 <Tab n="3"/><param-name>receptionist_class</param-name><br/> 5379 <Tab n="3"/><param-value>DefaultReceptionist</param-value><br/> 5380 <Tab n="2"/></init-param><br/> 5381 <Tab n="2"/><init-param><br/> 5382 <Tab n="3"/><param-name>default_lang</param-name><br/> 5383 <Tab n="3"/><param-value>en</param-value><br/> 5384 <Tab n="2"/></init-param><br/> 5385 <Tab n="1"/></servlet><br/> 5386 </Format> 5387 <Text id="dl-15">and provide the servlet mapping:</Text> 5388 <Format> 5389 <Tab n="1"/><servlet-mapping><br/> 5390 <Tab n="2"/><servlet-name>rand</servlet-name><br/> 5391 <Tab n="2"/><url-pattern>/rand/*</url-pattern><br/> 5392 <Tab n="1"/></servlet-mapping> <br/> 5393 </Format> 5394 </NumberedItem> 5395 <NumberedItem> 5396 <Text id="dl-16">Save <b>web.xml</b>, restart the server again and navigate to <i>http://localhost:8383/greenstone3/rand</i>, where you will see the <b>rand</b> library, which displays <b>mysite</b> using the <b>althor</b> interface. </Text> 5397 </NumberedItem> 5398 <Heading> 5399 <Text id="dl-h5">Changing default settings for the Greenstone server and GLI</Text> 5400 </Heading> 5401 <NumberedItem> 5402 <Text id="dl-17">When we restarted the server throughout this tutorial, Greenstone launched a browser window to <i>http://localhost:8383/greenstone3/library</i>, and we had to navigate to our new library's URL. When you are working in a particular library, you may want to go directly to its URL when the server starts. To do this, in the <b>Greenstone Server</b> window, go to <Path>File → Settings...</Path> and select your library (for example, <b>rand</b>) from the Servlet dropdown menu. Now, when you click <b>Restart Library</b>, a window will open to <i> http://localhost:8383/greenstone3/rand</i>. </Text> 5403 </NumberedItem> 5404 <NumberedItem> 5405 <Text id="dl-18">In the GLI, you can change the current library under <Path>File → Preferences → Connection</Path>. First, select the <b>Site</b> you want to work with (for example, <i>mysite</i>). The <b>Servlet</b> dropdown menu will then include all of the libraries that use <i>mysite</i>. Select one. Be sure to also change the <b>Collect Directory</b> to the <i>mysite/collect</i> folder. Click <b>OK</b> for the changes to take effect. Now, you will be adding and editing collections in the <b>mysite</b> site, and, when you click the Preview button, the selected library will be launched.</Text> 5406 </NumberedItem> 5407 <NumberedItem> 5408 <Text id="dl-19">As you begin using multiple libraries while using GLI, you should be aware of a couple of things. First, any changes you make in the GLI are <b>collection-level</b>, which means they will be the consistent for this collection no matter what library you are using. However, changes may only take effect <i>immediately</i> in the current library. The server may need to be restarted for the changes to appear in other libraries. Second, switching between servlets -- or viewing a collection in a library other than the one currently being used by the GLI -- can create a lock on files in a collection, which will cause an error during collection building. To avoid this, if you use multiple libraries after launching the GLI, <b>restart the server</b> before rebuilding a collection. 5409 </Text> 5410 </NumberedItem> 5411 </Content> 5412 </Tutorial> 5413 5414 5415 5416 5417 5418 5419 5420 5421 5422 5423 5424 <Tutorial id="new_interface1"> 5425 <Title> 5426 <Text id="dl-01">Designing a new interface: Part 1</Text> 5427 </Title> 5428 <SampleFiles folder="interfaces"/> 5429 <Version initial="3.06" current="3.06"/> 5430 <Content> 5431 <Comment> 5432 <Text id="ni1-c1">This tutorial series demonstrates how to create a new interface using the default interface as a base. In this first tutorial, we will set the stage by creating a barebones interface, defining a library that uses the interface, and gathering the various Javascript, CSS, and image files that will be used by the new interface.</Text> 5433 </Comment> 5434 <Heading> 5435 <Text id="ni1-h1">Creating a new interface</Text> 5436 </Heading> 5437 <NumberedItem> 5438 <Text id="ni1-01">In an Explorer window, navigate to the <b>interfaces</b> folder of your Greenstone3 installation (<Path>C: → Users → <user-name> → Greenstone3 → web → interfaces</Path>). </Text> 5439 <Text id="ni1-02">Create a new folder (in the right-click menu, select New → Folder) and call it <b>perrin</b>. The name of this folder (perrin) determines the name of your new interface.</Text> 5440 </NumberedItem> 5441 <NumberedItem> 5442 <Text id="ni1-03">From <Path>sample_files → interfaces → aybara</Path> folder, copy the file <b>interfaceConfig.xml</b>into the <b>perrin</b> folder. Open the file <Path>perrin → interfaceConfig.xml</Path> in a text editor. The interface configuration file is used to specify the languages the interface is available in, certain options, and what "actions" are available. <b>Actions</b> create the web pages for the library and specify what XSL file should be used for each. For example, if you completed the Home Page Tutorial, you changed the <i>home</i> subaction to point to <i>home-tutorial.xsl</i> instead of <i>home.xsl</i>.</Text> 5443 5444 <Text id="ni1-04">We are going to make one important change to this file. Our new interface is going to borrow heavily from the default interface. We will be reusing many of the XSL files, Javascript, and images. We could copy all of these files into our new interface, however, there are a few drawbacks to this solution:<br /><br /> 5445 <Tab n="1"/>• we will end up with duplicates of a large number of files <br/> 5446 <Tab n="1"/>• there are many files in the default interface that we won't need<br/> 5447 <Tab n="1"/>• it will be difficult to keep track of which files are different/unique to our new interface<br/> 5448 </Text> 5449 <Text id="ni1-05">A better solution is to base our new interface on the default interface. A base interface is used by Greenstone as a kind of backup. If Greenstone can't find a file in our interface, it will then try to find it in the base interface. To assign default as base interface, in <Path>perrin → interfaceConfig.xml</Path>, change the second line from this:</Text> 5450 <Format> 5451 <interfaceConfig> 5452 </Format> 5453 <Text id="ni1-06">To this:</Text> 5454 <Format> 5455 <interfaceConfig baseInterface="default"> 5456 </Format> 5457 </NumberedItem> 5458 <NumberedItem> 5459 <Text id="ni1-07">Save and close <b>interfaceConfig.xml</b>. </Text> 5460 </NumberedItem> 5461 <Heading> 5462 <Text id="ni1-h2">Defining a new library</Text> 5463 </Heading> 5464 <NumberedItem> 5465 <Text id="ni1-07">Now, let's define a library that uses the new interface. In <Path>Greenstone3 → web → WEB-INF</Path> open <b>web.xml</b>, and add the following (the exact location doesn't matter, just put it with the other servlets):</Text> 5466 <Format> 5467 <Tab n="1"/><servlet><br/> 5468 <Tab n="2"/><servlet-name>golden</servlet-name><br/> 5469 <Tab n="2"/><description>A new library with my new interface!</description><br/> 5470 <Tab n="2"/><servlet-class>org.greenstone.gsdl3.LibraryServlet</servlet-class><br/> 5471 <Tab n="2"/><init-param><br/> 5472 <Tab n="3"/><param-name>library_name</param-name><br/> 5473 <Tab n="3"/><param-value>golden</param-value><br/> 5474 <Tab n="2"/></init-param><br/> 5475 <Tab n="2"/><init-param><br/> 5476 <Tab n="3"/><param-name>site_name</param-name><br/> 5477 <Tab n="3"/><param-value>localsite</param-value><br/> 5478 <Tab n="2"/></init-param><br/> 5479 <Tab n="2"/><init-param><br/> 5480 <Tab n="3"/><param-name>interface_name</param-name><br/> 5481 <Tab n="3"/><param-value>perrin</param-value><br/> 5482 <Tab n="2"/></init-param><br/> 5483 <Tab n="2"/><init-param><br/> 5484 <Tab n="3"/><param-name>receptionist_class</param-name><br/> 5485 <Tab n="3"/><param-value>DefaultReceptionist</param-value><br/> 5486 <Tab n="2"/></init-param><br/> 5487 <Tab n="2"/><init-param><br/> 5488 <Tab n="3"/><param-name>default_lang</param-name><br/> 5489 <Tab n="3"/><param-value>en</param-value><br/> 5490 <Tab n="2"/></init-param><br/> 5491 <Tab n="1"/></servlet><br/> 5492 </Format> 5493 <Text id="ni1-08">This defines a new library called "golden" that uses "localsite" and our new "perrin" interface. Now, near the bottom of the file, add in a servlet mapping to tell the server where our new library should be located:</Text> 5494 <Format> 5495 <Tab n="1"/><servlet-mapping><br/> 5496 <Tab n="2"/><servlet-name>golden</servlet-name><br/> 5497 <Tab n="2"/><url-pattern>/golden/*</url-pattern><br/> 5498 <Tab n="1"/></servlet-mapping> <br/> 5499 </Format> 5500 </NumberedItem> 5501 <NumberedItem> 5502 <Text id="ni1-09">Save web.xml. Start up your Greenstone server (<Path>Start → All Programs → Greenstone3 → Greenstone3 Server</Path>) and click the <b>Enter Library</b> button. This will take you to the default library's home page.</Text> 5503 <Text id="ni1-10">Navigate to <Path>http://localhost:8383/greenstone3/golden</Path>. This library is using the <i>perrin</i> interface. However, since <i>perrin</i> contains no files except its configuration file, Greenstone is borrowing everything from <i>default</i>, <i>perrin</i>'s base interface.</Text> 5504 </NumberedItem> 5505 <Heading> 5506 <Text id="ni1-h3">Gathering files</Text> 5507 </Heading> 5508 <NumberedItem> 5509 <Text id="ni1-11">To change how the perrin interface looks, we will be adding some key XSL files (<i>home.xsl</i>, <i>header.xsl</i>, and <i>main.xsl</i>). However, before we do that, we want to gather all of the new CSS, Javascript, and image files we will be using with our new interface.</Text> 5510 <Text id="ni1-12">Since designing web pages is quite challening in itself, we will be taking advantage of free CSS templates that can be downloaded and modified. There are many websites that offer high quality web page designs, often for free. <i>(Always be sure to read the license information fully to ensure you do not violate the usage agreement in any way.)</i></Text> 5511 </NumberedItem> 5512 <NumberedItem> 5513 <Text id="ni1-13">Visit <i>http://www.os-templates.com/free-website-templates/news-magazine</i> and click the <b>Download Here</b> button. In the popup window, select <b>Save File</b> and click <b>OK</b>. On Windows, this will save the file <b>news-magazine.zip</b> in your <b>Downloads</b> folder. <i>This template is free to use and modify, but the Copyright and link information <b>must remain intact</b> in files and in the footer of every page. The template <b>cannot be distributed</b> (modified or otherwise) without express permission from OS-Templates (The full license is provided in the <b>license.txt</b> file included with the template).</i></Text> 5514 </NumberedItem> 5515 <NumberedItem> 5516 <Text id="ni1-14">In an Explorer window, navigate to your Downloads folder (<Path>C:\Users\<user-name>\Downloads</Path>). Right-click <b>news-magazine.zip</b>, select <b>Extract All...</b> and, in the popup window, click <b>Extract</b>.</Text> 5517 </NumberedItem> 5518 <NumberedItem> 5519 <Text id="ni1-15">From the new news-magazine folder, copy the <b>styles</b>, <b>scripts</b>, and <b>images</b> folders and the <b>license.txt</b> file into <Path>Greenstone3 → web → interfaces → perrin</Path>. </Text> 5520 <Text id="ni1-16">In the new <Path> perrin → images </Path> folder, delete everything except the <b>galleryviewthemes</b> folder and its contents, because we will not be using any of the other images. </Text> 5521 </NumberedItem> 5522 <NumberedItem> 5523 <Text id="ni1-17"> In the <Path> perrin → styles</Path> folder, open layout.css in a text editor and delete the following line:</Text> 5524 <Format>@import url(tables.css);</Format> 5525 <Text id="ni1-18">Save and close layout.css. You can also delete the tables.css file, as it is no longer used. </Text> 5526 </NumberedItem> 5527 <NumberedItem> 5528 <Text id="ni1-18">Now, from the <Path>sample_files → interfaces → aybara</Path> folder, copy the <b>styles</b>, <b>images</b>, and <b>transform</b> folders, as well as the <b>index-GS3.html</b> file into <Path>Greenstone3 → web → interfaces → perrin</Path> (If a popup window asks whether you want to merge the images and styles folders, select "Yes".) We have now gathered all of the Javascript, CSS, and images our new interface will use.</Text> 5529 <Text id="ni1-19">Double click on <Path>perrin → index-GS3.html</Path> to open it in a browser window. This file isn't used by the new interface, but provides a preview of how the interface will look. </Text> 5530 <Text id="ni1-20">In the next tutorial, we will begin changing how our interface looks, starting with the home page.</Text> 5531 </NumberedItem> 5532 </Content> 5533 </Tutorial> 5534 <Tutorial id="new_interface1"> 5535 <Title> 5536 <Text id="dl-01">Designing a new interface: Part 1</Text> 5537 </Title> 5538 <SampleFiles folder="interfaces"/> 5539 <Version initial="3.06" current="3.06"/> 5540 <Content> 5541 <Comment> 5542 <Text id="ni1-c1">This tutorial series demonstrates how to create a new interface using the default interface as a base. In this first tutorial, we will set the stage by creating a barebones interface, defining a library that uses the interface, and gathering the various Javascript, CSS, and image files that will be used by the new interface.</Text> 5543 </Comment> 5544 <Heading> 5545 <Text id="ni1-h1">Creating a new interface</Text> 5546 </Heading> 5547 <NumberedItem> 5548 <Text id="ni1-01">In an Explorer window, navigate to the <b>interfaces</b> folder of your Greenstone3 installation (<Path>C: → Users → <user-name> → Greenstone3 → web → interfaces</Path>). </Text> 5549 <Text id="ni1-02">Create a new folder (in the right-click menu, select New → Folder) and call it <b>perrin</b>. The name of this folder (perrin) determines the name of your new interface.</Text> 5550 </NumberedItem> 5551 <NumberedItem> 5552 <Text id="ni1-03">From <Path>sample_files → interfaces → aybara</Path> folder, copy the file <b>interfaceConfig.xml</b>into the <b>perrin</b> folder. Open the file <Path>perrin → interfaceConfig.xml</Path> in a text editor. The interface configuration file is used to specify the languages the interface is available in, certain options, and what "actions" are available. <b>Actions</b> create the web pages for the library and specify what XSL file should be used for each. For example, if you completed the Home Page Tutorial, you changed the <i>home</i> subaction to point to <i>home-tutorial.xsl</i> instead of <i>home.xsl</i>.</Text> 5553 5554 <Text id="ni1-04">We are going to make one important change to this file. Our new interface is going to borrow heavily from the default interface. We will be reusing many of the XSL files, Javascript, and images. We could copy all of these files into our new interface, however, there are a few drawbacks to this solution:<br /><br /> 5555 <Tab n="1"/>• we will end up with duplicates of a large number of files <br/> 5556 <Tab n="1"/>• there are many files in the default interface that we won't need<br/> 5557 <Tab n="1"/>• it will be difficult to keep track of which files are different/unique to our new interface<br/> 5558 </Text> 5559 <Text id="ni1-05">A better solution is to base our new interface on the default interface. A base interface is used by Greenstone as a kind of backup. If Greenstone can't find a file in our interface, it will then try to find it in the base interface. To assign default as base interface, in <Path>perrin → interfaceConfig.xml</Path>, change the second line from this:</Text> 5560 <Format> 5561 <interfaceConfig> 5562 </Format> 5563 <Text id="ni1-06">To this:</Text> 5564 <Format> 5565 <interfaceConfig baseInterface="default"> 5566 </Format> 5567 </NumberedItem> 5568 <NumberedItem> 5569 <Text id="ni1-07">Save and close <b>interfaceConfig.xml</b>. </Text> 5570 </NumberedItem> 5571 <Heading> 5572 <Text id="ni1-h2">Defining a new library</Text> 5573 </Heading> 5574 <NumberedItem> 5575 <Text id="ni1-07">Now, let's define a library that uses the new interface. In <Path>Greenstone3 → web → WEB-INF</Path> open <b>web.xml</b>, and add the following (the exact location doesn't matter, just put it with the other servlets):</Text> 5576 <Format> 5577 <Tab n="1"/><servlet><br/> 5578 <Tab n="2"/><servlet-name>golden</servlet-name><br/> 5579 <Tab n="2"/><description>A new library with my new interface!</description><br/> 5580 <Tab n="2"/><servlet-class>org.greenstone.gsdl3.LibraryServlet</servlet-class><br/> 5581 <Tab n="2"/><init-param><br/> 5582 <Tab n="3"/><param-name>library_name</param-name><br/> 5583 <Tab n="3"/><param-value>golden</param-value><br/> 5584 <Tab n="2"/></init-param><br/> 5585 <Tab n="2"/><init-param><br/> 5586 <Tab n="3"/><param-name>site_name</param-name><br/> 5587 <Tab n="3"/><param-value>localsite</param-value><br/> 5588 <Tab n="2"/></init-param><br/> 5589 <Tab n="2"/><init-param><br/> 5590 <Tab n="3"/><param-name>interface_name</param-name><br/> 5591 <Tab n="3"/><param-value>perrin</param-value><br/> 5592 <Tab n="2"/></init-param><br/> 5593 <Tab n="2"/><init-param><br/> 5594 <Tab n="3"/><param-name>receptionist_class</param-name><br/> 5595 <Tab n="3"/><param-value>DefaultReceptionist</param-value><br/> 5596 <Tab n="2"/></init-param><br/> 5597 <Tab n="2"/><init-param><br/> 5598 <Tab n="3"/><param-name>default_lang</param-name><br/> 5599 <Tab n="3"/><param-value>en</param-value><br/> 5600 <Tab n="2"/></init-param><br/> 5601 <Tab n="1"/></servlet><br/> 5602 </Format> 5603 <Text id="ni1-08">This defines a new library called "golden" that uses "localsite" and our new "perrin" interface. Now, near the bottom of the file, add in a servlet mapping to tell the server where our new library should be located:</Text> 5604 <Format> 5605 <Tab n="1"/><servlet-mapping><br/> 5606 <Tab n="2"/><servlet-name>golden</servlet-name><br/> 5607 <Tab n="2"/><url-pattern>/golden/*</url-pattern><br/> 5608 <Tab n="1"/></servlet-mapping> <br/> 5609 </Format> 5610 </NumberedItem> 5611 <NumberedItem> 5612 <Text id="ni1-09">Save web.xml. Start up your Greenstone server (<Path>Start → All Programs → Greenstone3 → Greenstone3 Server</Path>) and click the <b>Enter Library</b> button. This will take you to the default library's home page.</Text> 5613 <Text id="ni1-10">Navigate to <Path>http://localhost:8383/greenstone3/golden</Path>. This library is using the <i>perrin</i> interface. However, since <i>perrin</i> contains no files except its configuration file, Greenstone is borrowing everything from <i>default</i>, <i>perrin</i>'s base interface.</Text> 5614 </NumberedItem> 5615 <Heading> 5616 <Text id="ni1-h3">Gathering files</Text> 5617 </Heading> 5618 <NumberedItem> 5619 <Text id="ni1-11">To change how the perrin interface looks, we will be adding some key XSL files (<i>home.xsl</i>, <i>header.xsl</i>, and <i>main.xsl</i>). However, before we do that, we want to gather all of the new CSS, Javascript, and image files we will be using with our new interface.</Text> 5620 <Text id="ni1-12">Since designing web pages is quite challening in itself, we will be taking advantage of free CSS templates that can be downloaded and modified. There are many websites that offer high quality web page designs, often for free. <i>(Always be sure to read the license information fully to ensure you do not violate the usage agreement in any way.)</i></Text> 5621 </NumberedItem> 5622 <NumberedItem> 5623 <Text id="ni1-13">Visit <Link url="http://www.os-templates.com/free-website-templates/news-magazine">http://www.os-templates.com/free-website-templates/news-magazine</Link> and click the <b>Download Here</b> button. In the popup window, select <b>Save File</b> and click <b>OK</b>. On Windows, this will save the file <b>news-magazine.zip</b> in your <b>Downloads</b> folder. <i>This template is free to use and modify, but the Copyright and link information <b>must remain intact</b> in files and in the footer of every page. The template <b>cannot be distributed</b> (modified or otherwise) without express permission from OS-Templates (The full license is provided in the <b>license.txt</b> file included with the template).</i></Text> 5624 </NumberedItem> 5625 <NumberedItem> 5626 <Text id="ni1-14">In an Explorer window, navigate to your Downloads folder (<Path>C:\Users\<user-name>\Downloads</Path>). Right-click <b>news-magazine.zip</b>, select <b>Extract All...</b> and, in the popup window, click <b>Extract</b>.</Text> 5627 </NumberedItem> 5628 <NumberedItem> 5629 <Text id="ni1-15">From the new news-magazine folder, copy the <b>styles</b>, <b>scripts</b>, and <b>images</b> folders and the <b>license.txt</b> file into <Path>Greenstone3 → web → interfaces → perrin</Path>. </Text> 5630 <Text id="ni1-16">In the new <Path> perrin → images </Path> folder, delete everything except the <b>galleryviewthemes</b> folder and its contents, because we will not be using any of the other images. </Text> 5631 </NumberedItem> 5632 <NumberedItem> 5633 <Text id="ni1-17"> In the <Path> perrin → styles</Path> folder, open <b>layout.css</b> in a text editor and delete the following line:</Text> 5634 <Format>@import url(tables.css);</Format> 5635 <Text id="ni1-18">Save and close <b>layout.css</b>. You can also delete the <b>tables.css</b> file, as it is no longer used. </Text> 5636 </NumberedItem> 5637 <NumberedItem> 5638 <Text id="ni1-18">Now, from the <Path>sample_files → interfaces → aybara</Path> folder, copy the <b>styles</b>, <b>images</b>, and <b>transform</b> folders, as well as the <b>index-GS3.html</b> file into <Path>Greenstone3 → web → interfaces → perrin</Path> (If a popup window asks whether you want to merge the images and styles folders, select "Yes".) We have now gathered all of the Javascript, CSS, and images our new interface will use.</Text> 5639 <Text id="ni1-19">Double click on <Path>perrin → index-GS3.html</Path> to open it in a browser window. This file isn't used by the new interface, but provides a preview of how the interface will look. </Text> 5640 <Text id="ni1-20">In the next tutorial, we will begin changing how our interface looks, starting with the home page.</Text> 5641 </NumberedItem> 5642 </Content> 5643 </Tutorial> 5644 5645 5646 <Tutorial id="new_interface2"> 5647 <Title> 5648 <Text id="dl-01">Designing a new interface: Part 2</Text> 5649 </Title> 5650 <SampleFiles folder="interfaces"/> 5651 <Version initial="3.06" current="3.06"/> 5652 <Content> 5653 <Comment> 5654 <Text id="ni2-c1">In this tutorial, we will be adding <b>home.xsl</b> and <b>header.xsl</b> files to the <b>perrin</b> interface. Modifying XSL files must be done with care. If the XSL is ill-formed or invalid, the page will not display properly. This tutorial attempts to highlight some of the common mistakes that might result in errors. Whenever you are editing XSL files, remember to <b>save very often</b>, and then refresh your browser to see if there is an error.</Text> 5655 </Comment> 5656 <NumberedItem> 5657 <Text id="ni2-01">Start up your Greenstone server (<Path>Start → All Programs → Greenstone3 → Greenstone3 Server</Path>) and click the <b>Enter Library</b> button and navigate to <i>http://localhost:8383/greenstone3/golden</i> in the web browser, which still looks identical to the home page of the default interface. </Text> 5658 </NumberedItem> 5659 <Heading> 5660 <Text id="ni2-h1">Changing the home page content</Text> 5661 </Heading> 5662 <NumberedItem> 5663 <Text id="ni2-02">From the <Path>sample_files → interfaces → aybara</Path> folder, copy <b>home.xsl</b> into <Path>Greenstone3 → web → interfaces → perrin → transform → pages</Path>. In the browser, refresh the library home page. The content of the page should now be only "HOME PAGE CONTENT GOES HERE". Open <b>home.xsl</b> in a text editor and take a look at it.</Text> 5664 </NumberedItem> 5665 <NumberedItem> 5666 <Text id="ni2-03">In a previous tutorial, we created a home page that was completely different than the rest of our library's pages. This time, however, the home page will share a large portion of it's layout and style with the rest of the library's pages. So, we're only going to change the home page's <i>content</i> by modifying the <b>/page/pageResponse</b> template. We will be adding three sections to our home page: an image slider, a section that can contain featured content, and a list of all of the collections in the library, along with their descriptions.</Text> 5667 <Text id="ni2-04">Replace HOME PAGE CONTENT GOES HERE with the following: 5668 </Text> 5669 <Format> 5670 <Tab n="1"/><div class="content"><br /> 5671 <Tab n="2"/><div id="featured_slide"><br /> 5672 <Tab n="3"/><ul id="featurednews"><br /> 5673 <Tab n="4"/><xsl:call-template name="collSlider"/><br /> 5674 <Tab n="3"/></ul><br /> 5675 <Tab n="2"/></div><br /> 5676 <Tab n="1"/></div><br /> 5677 </Format> 5678 </NumberedItem> 5679 <NumberedItem> 5680 <Text id="ni2-05">Save <b>home.xsl</b> and refresh your web browser. You should now see an <i>Apache Tomcat</i> error. This is because we are calling a template (<i>collSlider</i>) that doesn't exist. Now add the following before the final </xsl:stylesheet>:</Text> 5681 <Format> 5682 <Tab n="1"/><xsl:template name="collSlider"><br /> 5683 <Tab n="2"/><xsl:for-each select="./collectionList/collection"><br /> 5684 <Tab n="3"/><xsl:variable name="collectionFolder" select="@name"/><br /> 5685 <Tab n="3"/><xsl:variable name="collectionName" select="displayItem[@name='name']"/><br /> 5686 <Tab n="3"/><xsl:variable name="homeImage"><br /> 5687 <Tab n="4"/><xsl:choose><br /> 5688 <Tab n="5"/><xsl:when test="displayItem[@name='smallicon']"><br /> 5689 <Tab n="6"/>sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collectionFolder"/>/images/<xsl:value-of select="displayItem[@name='smallicon']"/><br /> 5690 <Tab n="5"/></xsl:when><br /> 5691 <Tab n="5"/><xsl:otherwise><br /> 5692 <Tab n="6"/>interfaces/<xsl:value-of select="$interface_name"/>/images/default.jpg<br /> 5693 <Tab n="5"/></xsl:otherwise><br /> 5694 <Tab n="4"/><Tab n=""/></xsl:choose><br /> 5695 <Tab n="3"/></xsl:variable><br /><br /> 5696 5697 <Tab n="3"/><li><img src="{$homeImage}" alt="" /><br /> 5698 <Tab n="4"/><div class="panel-overlay"><br /> 5699 <Tab n="5"/><a href="{$library_name}/collection/{$collectionFolder}/page/about"><br /> 5700 <Tab n="6"/><h2><xsl:value-of select="$collectionName"/></h2><br /> 5701 <Tab n="5"/></a><br /> 5702 <Tab n="4"/></div><br /> 5703 <Tab n="3"/></li><br /> 5704 <Tab n="2"/></xsl:for-each><br /> 5705 <Tab n="1"/></xsl:template><br /> 5706 </Format> 5707 </NumberedItem> 5708 <NumberedItem> 5709 <Text id="ni2-06">Save <b>home.xsl</b> and refresh your web browser. You should no longer have an error. For every collection in your library, you should now see an image followed by the collection's name. In a moment, we will add in the Javascript that will turn these into a slider, but first, let's consider what the collSlider template is doing.</Text> 5710 <Text id="ni2-07">Basically, for every collection in your library (<xsl:for-each select="./collectionList/collection">), it is creating a list item than includes an image and the collection's name, which links to the collection's about page. If the collection has a Home page image (the "smallicon"), this will be displayed. Otherwise a backup image (<i>default.jpg</i>, which is located in <Path>perrin → images</Path>) will be displayed. </Text> 5711 </NumberedItem> 5712 <NumberedItem> 5713 <Text id="ni2-08">Now, add Javascript files that will turn these list items into an image slider. Before the final </xsl:stylesheet>, add the following:</Text> 5714 <Format> 5715 <Tab n="1"/><xsl:template name="additionalHeaderContent"><br /> 5716 <Tab n="2"/><script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.easing.1.3.js"><xsl:text> </xsl:text></script><br /> 5717 <Tab n="2"/><script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.timers.1.2.js"><xsl:text> </xsl:text></script><br /> 5718 <Tab n="2"/><script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.galleryview.2.1.1.min.js"><xsl:text> </xsl:text></script><br /> 5719 <Tab n="2"/><script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.galleryview.setup.js"><xsl:text> </xsl:text></script><br /> 5720 <Tab n="1"/></xsl:template> <br /> 5721 </Format> 5722 <Text id="ni2-09">Save home.xsl and refresh your web browser. All of the images and collection names should now be condensed into an image slider. (It is still missing some style, because we haven't added links to our CSS files yet.) This <b>additionalHeaderContent</b> template is "called" in the <b>header.xsl</b> file, which we will see later in this tutorial. 5723 </Text> 5724 </NumberedItem> 5725 <NumberedItem> 5726 <Text id="ni2-10">Add the next section of of the home page's content. Insert the highlighted section: </Text> 5727 <Format> 5728 <Tab n="5"/><xsl:call-template name="collSlider"/><br /> 5729 <Tab n="4"/></ul><br /> 5730 <Tab n="3"/></div><br /> 5731 <Tab n="2"/></div><br /> 5732 <Tab n="2"/><highlight><div class="column"><br /> 5733 <Tab n="3"/><ul class="latestnews"><br /> 5734 <Tab n="4"/><li><br /> 5735 <Tab n="5"/><p><strong><a href="#">Highlighted Item 1</a></strong><br/>This is a place where you can put information about an item you would like to highlight in your collection, with or without an accompanying image.</p><br /> 5736 <Tab n="4"/></li><br /> 5737 <Tab n="4"/><li><img src="interfaces/{$interface_name}/images/80x80.jpg" alt="" /><br /> 5738 <Tab n="5"/><p><strong><a href="#">Highlighted Item 2</a></strong><br/>This is a place where you can put information about an item you would like to highlight in your collection,with or without an accompanying image.</p><br /> 5739 <Tab n="4"/></li><br /> 5740 <Tab n="4"/><li class="last"><img src="interfaces/{$interface_name}/images/80x80.jpg" alt="" /><br /> 5741 <Tab n="5"/><p><strong><a href="#">Highlighted Item 3</a></strong><br/>This is a place where you can put information about an item you would like to highlight in your collection, with or without an accompanying image.</p><br /> 5742 <Tab n="4"/></li><br /> 5743 <Tab n="3"/></ul><br /> 5744 <Tab n="2"/></div><br /> 5745 <Tab n="2"/><br class="clear" /></highlight><br /> 5746 <Tab n="1"/></xsl:template><br /> 5747 </Format> 5748 <Text id="ni2-11">Save <b>home.xsl</b> and refresh your web browser. This section will be an area where you can add in your own content. Notice the file paths for the image files begin with <b>interfaces/{$interface_name}</b>. As its name suggests, <b>{$interface_name}</b> becomes the name of the interface, in this case "perrin".</Text> 5749 </NumberedItem> 5750 <NumberedItem> 5751 <Text id="ni2-12">Finally, add in the highlighted section:</Text> 5752 <Format> 5753 <Tab n="2"/><br class="clear" /><br /><br /> 5754 5755 <Tab n="2"/><highlight><div id="hpage_cats"><br /> 5756 <Tab n="3"/><xsl:call-template name="collectionsList"/><br /> 5757 <Tab n="2"/></div></highlight><br /> 5758 <Tab n="1"/></xsl:template><br /> 5759 </Format> 5760 <Text id="ni2-13">And add the following templates before the final </xsl:stylesheet>:</Text> 5761 <Format> 5762 <Tab n="1"/><xsl:template name="collectionsList"><br /> 5763 <Tab n="2"/><xsl:for-each select="./collectionList/collection"><br /> 5764 <Tab n="3"/><xsl:choose><br /> 5765 <Tab n="4"/><xsl:when test="position() mod 2 = 1"><br /> 5766 <Tab n="5"/><div class="fl_left"><br /> 5767 <Tab n="6"/><xsl:call-template name="collDescription"/><br /> 5768 <Tab n="5"/></div><br /> 5769 <Tab n="4"/></xsl:when><br /> 5770 <Tab n="4"/><xsl:otherwise><br /> 5771 <Tab n="5"/><div class="fl_right"><br /> 5772 <Tab n="6"/><xsl:call-template name="collDescription"/><br /> 5773 <Tab n="5"/></div><br /> 5774 <Tab n="5"/><br class="clear" /><br /> 5775 <Tab n="4"/></xsl:otherwise><br /> 5776 <Tab n="3"/></xsl:choose><br /> 5777 <Tab n="2"/></xsl:for-each><br /> 5778 <Tab n="1"/></xsl:template> <br /><br /> 5779 5780 <Tab n="1"/><xsl:template name="collDescription"><br /> 5781 <Tab n="2"/><xsl:variable name="collectionFolder" select="@name"/><br /> 5782 <Tab n="2"/><xsl:variable name="collectionName" select="displayItem[@name='name']"/><br /> 5783 <Tab n="2"/><xsl:variable name="aboutImage" select="displayItem[@name='icon']"/><br /> 5784 <Tab n="2"/><xsl:variable name="collDesc" select="displayItem[@name='description']"/><br /> 5785 <Tab n="2"/><xsl:variable name="numDocs" select="metadataList/metadata[@name='numDocs']"/><br /><br /> 5786 5787 <Tab n="2"/><h2><a href="{$library_name}/collection/{$collectionFolder}/page/about"><xsl:value-of select="$collectionName"/></a></h2> <br /> 5788 <Tab n="2"/><xsl:if test="$aboutImage"><br /> 5789 <Tab n="3"/><img src="sites/{$site_name}/collect/{$collectionFolder}/images/{$aboutImage}" alt="{$collectionName}" /><br /> 5790 <Tab n="2"/></xsl:if><br /><br /> 5791 5792 <Tab n="2"/><xsl:choose><br /> 5793 <Tab n="3"/><xsl:when test="$collDesc"><br /> 5794 <Tab n="4"/><p class="justify"><xsl:value-of select="$collDesc"/></p><br /> 5795 <Tab n="3"/></xsl:when><br /> 5796 <Tab n="3"/><xsl:otherwise><br /> 5797 <Tab n="4"/><p class="justify">Welcome to the <xsl:value-of select="$collectionName"/> collection. This collection contains <xsl:value-of select="$numDocs"/> documents.</p><br /> 5798 <Tab n="3"/></xsl:otherwise> <br /> 5799 <Tab n="2"/></xsl:choose> <br /> 5800 <Tab n="1"/></xsl:template> <br /> 5801 </Format> 5802 <Comment> 5803 <Text id="ni2-14a">These templates are a more complicated, but a basic explanation follows (don't worry if you don't understand it). You can skip ahead to Step 9 if you'd like.</Text> 5804 </Comment> 5805 <Text id="ni2-14">First look at the collDescription template. It creates a header that links to the collection's about page (<Format><h2><a href="{$library_name}/collection/{$collectionFolder}/page/about"><xsl:value-of select="$collectionName"/></a></h2></Format>). Then, if there is an About page image for the collection, this is displayed. Finally, if the collection has a description (<Format><xsl:when test="$collDesc"></Format>), it will display this description. Otherwise, it will display the a generic sentence stating the collection's name and how many documents it contains.</Text> 5806 <Text id="ni2-15">Now, let's look at the collectionsList template. Basically, for every collection in the library (<Format><xsl:for-each select="./collectionList/collection"></Format>), it is calling the collDescription template, i.e. doing everything explained in the previous paragraph. However, the CSS we are using requires that our div's alternate between class "fl_left" and class "fl_right" or the page won't display correctly. So, if the collection is an odd number in the list (<Format><xsl:when test="position() mod 2 = 1"></Format>), the collection description will be in a <Format><div class="fl_left"></Format>, otherwise (i.e. when it is an even number in the list) the collection description will be in a <Format><div class="fl_right"></Format>.</Text> 5807 </NumberedItem> 5808 <NumberedItem> 5809 <Text id="ni2-16">Save and close <b>home.xsl</b> and refresh your web browser, which should now include the names and descriptions (and, accompanying images if any of your collections have an About page image) for each collection in your library.</Text> 5810 <Text id="ni2-17">We have now made all of our changes to <b>home.xsl</b>. Next, we will add a new <b>header.xsl</b> file, where the HTML header content is located.</Text> 5811 </NumberedItem> 5812 <Heading> 5813 <Text id="ni2-h2">Changing the HTML header content</Text> 5814 </Heading> 5815 <NumberedItem> 5816 <Text id="ni2-18">From the <Path> sample_files → interfaces </Path> folder, copy header.xsl into <Path>Greenstone3 → web → interfaces → perrin → transform → layouts</Path>. Refresh your web browser: nothing should have changed.</Text> 5817 </NumberedItem> 5818 <NumberedItem> 5819 <Text id="ni2-18">Now open <b>header.xsl</b> in a text editor. It contains only one template called "create-html-header", which was copied directly from the default interface's <b>header.xsl</b>. We are going to remove the links to the CSS files used by the default interface, and add in the links to our new CSS files. Scroll down and replace the following lines:</Text> 5820 <Format> 5821 <Tab n="2"/><xsl:choose><br /> 5822 <Tab n="3"/><xsl:when test="/page/pageResponse/interfaceOptions/option[@name = 'cssTheme']/@value"><br /> 5823 <Tab n="4"/><!-- Get the theme from the interfaceConfig.xml file --><br /> 5824 <Tab n="4"/><link rel="stylesheet" href="{/page/pageResponse/interfaceOptions/option[@name = 'cssTheme']/@value}" type="text/css"/><br /> 5825 <Tab n="3"/></xsl:when><br /> 5826 <Tab n="3"/><xsl:otherwise><br /> 5827 <Tab n="4"/><link rel="stylesheet" href="interfaces/{$interface_name}/style/themes/main/jquery-ui-1.8.16.custom.css" type="text/css"/><br /> 5828 <Tab n="3"/></xsl:otherwise><br /> 5829 <Tab n="2"/></xsl:choose><br /> 5830 <Tab n="2"/><link rel="stylesheet" href="interfaces/{$interface_name}/style/core.css" type="text/css"/><br /> 5831 </Format> 5832 <Text id="ni2-19">With this:</Text> 5833 <Format> 5834 <Tab n="2"/><link rel="stylesheet" href="interfaces/{$interface_name}/styles/layout.css" type="text/css" /><br/> 5835 <Tab n="2"/><link rel="stylesheet" href="interfaces/{$interface_name}/styles/gs3-core-min.css" type="text/css" /><br/> 5836 </Format> 5837 </NumberedItem> 5838 <NumberedItem> 5839 <Text id="ni2-20">Save <b>header.xsl</b> and refresh your web browser. The page should have changed drastically. We removed the links to the default CSS, which removed all of the old style. But, since we added in links to our new CSS, all of the content we just added to the home page should now be styled much better.</Text> 5840 <Text id="ni2-21">Near the bottom of <b>header.xsl</b>, you will see this line: <Format><xsl:call-template name="additionalHeaderContent"/></Format>. For the home page, this is where the four <Format><script></Format> elements from Step 6 above will be placed.</Text> 5841 <Text id="ni2-22">Close <b>header.xsl</b>. In the next and final tutorial on designing an interface, we will add and modify <b>main.xsl</b>.</Text> 5842 </NumberedItem> 5843 </Content> 5844 </Tutorial> 5845 5846 5847 <Tutorial id="new_interface3"> 5848 <Title> 5849 <Text id="dl-01">Designing a new interface: Part 3</Text> 5850 </Title> 5851 <SampleFiles folder="interfaces"/> 5852 <Version initial="3.06" current="3.06"/> 5853 <Content> 5854 <Comment> 5855 <Text id="ni3-c1">In this tutorial, we will change the layout for all of the pages in our library at once by adding and modifying the <b>main.xsl</b> file for our interface.</Text> 5856 </Comment> 5857 <Heading> 5858 <Text id="ni3-h1">Examining main.xsl</Text> 5859 </Heading> 5860 <NumberedItem> 5861 <Text id="ni3-01">From the <Path> sample_files → interfaces → aybara </Path> folder, copy <b>main.xsl</b> into <Path>Greenstone3 → web → interfaces → perrin → transform → layouts</Path>. Refresh your web browser -- you should now only see the new content we added to <b>home.xsl</b>. </Text> 5862 <Text id="ni3-02">Open <b>main.xsl</b> in a text editor. It contains two templates: <b>mainTemplate</b> and <b>gs_footer</b>. The <b>mainTemplate</b> looks like this:</Text> 5863 <Format> 5864 <Tab n="1"/><xsl:template name="mainTemplate"><br/> 5865 <Tab n="2"/><html><br/> 5866 <Tab n="3"/><head><br/> 5867 <Tab n="4"/><!-- ***** in header.xsl ***** --><br/> 5868 <Tab n="4"/><xsl:call-template name="create-html-header"/><br/> 5869 <Tab n="3"/></head><br/> 5870 <Tab n="3"/><body><br/> 5871 <Tab n="4"/><xsl:apply-templates select="/page"/><br/> 5872 <Tab n="4"/><xsl:call-template name="gs_footer"/><br/> 5873 <Tab n="3"/></body><br/> 5874 <Tab n="2"/></html><br/> 5875 <Tab n="1"/></xsl:template><br/> 5876 </Format> 5877 <Text id="ni3-03">Every page in our library uses this template. As you can see, it contains the basic structure of our HTML page. Inside the HTML header, the <b>create-html-header</b> template is called (<Format><xsl:call-template name="create-html-header"/></Format>). This is the template in <b>header.xsl</b> we edited in the previously tutorial. Inside the body of the HTML, we use two templates: <b>/page</b> and <b>gs_footer</b>. (The <b>/page</b> template is "applied" instead of called. The reason for this is complex and not relevant to this tutorial.)</Text> 5878 <Text id="ni3-04"> The <b>/page</b> template is where the content of each individual page is. For the home page, it is the content we just added to <b>home.xsl</b>. Since the <b>perrin</b> interface does not have XSL files for any of the other page types, the content of all of the other pages depends on the default interface: on the collection's about page, it's the collection description; on search pages, it is the query boxes and search results; on document pages it is the document content, etc. </Text> 5879 <Text id="ni3-04">The <b>gs_footer</b> template is where we will put our page's footer.</Text> 5880 </NumberedItem> 5881 <NumberedItem> 5882 <Text id="ni3-05">Now we will add the HTML that all of the pages of our collection will share. (You might want to take another look at <b>index-GS3.html</b> to remind yourself what the layout will look like.)</Text> 5883 <Text id="ni3-06">Let's start by adding a footer to our library. In the <b>gs_footer</b> template, immediately after the line <Format><!-- Put footer in here. --></Format> insert the following:</Text> 5884 <Format> 5885 <Tab n="2"/><!-- ******DO NOT REMOVE THE LINK TO OS TEMPLATES: Template is free to use/modify, but this link MUST remain on all pages. Do not remove Copyright information. Replace "Your Webpage Here" (and it's link) with your own information.--><br/> 5886 <Tab n="2"/><div class="wrapper col8"><br/> 5887 <Tab n="3"/><div id="copyright"><br/> 5888 <Tab n="4"/><p class="fl_left">Copyright © 2013 - All Rights Reserved - <a href="#">Your Webpage Here</a></p><br/> 5889 <Tab n="4"/><p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p><br/> 5890 <Tab n="4"/><br class="clear" /><br/> 5891 <Tab n="3"/></div><br/> 5892 <Tab n="2"/></div><br/> 5893 </Format> 5894 </NumberedItem> 5895 <NumberedItem> 5896 <Text id="ni3-07">Save <b>main.xsl</b> and refresh the web browser. The footer will now appear at the bottom of every page. You can click into a collection to see that it is also on these pages. (If your collection does not have a description, the footer will be the only thing that appears on the collection's about page.)</Text> 5897 </NumberedItem> 5898 <NumberedItem> 5899 <Text id="ni3-08">You'll notice that the image slider and the highlighted items are right up against the edge of the page. In <b>main.xsl</b>, replace <Format><xsl:apply-templates select="/page"/></Format> with:</Text> 5900 <Format> 5901 <Tab n="2"/><div class="wrapper"><br/> 5902 <Tab n="3"/><div class="container"><br/> 5903 <Tab n="4"/><xsl:apply-templates select="/page"/><br/> 5904 <Tab n="4"/><br class="clear" /> <br/> 5905 <Tab n="3"/></div><br/> 5906 <Tab n="2"/></div><br/> 5907 </Format> 5908 </NumberedItem> 5909 <NumberedItem> 5910 <Text id="ni3-09">Save <b>main.xsl</b> and refresh the web browser. The slider and highlighted items should now line up with the collection descriptions below them. There is also a grey line above the footer.</Text> 5911 </NumberedItem> 5912 <Heading> 5913 <Text id="ni3-h2">Adding a navigation bar</Text> 5914 </Heading> 5915 <NumberedItem> 5916 <Text id="ni3-10">Next, we're going to add the navigation bar and quick search box. Since the templates for this are pretty complex, we're going to start by adding only plain HTML to see the basic structure. Insert the following immediately after the <Format><body></Format> tag:</Text> 5917 <Format> 5918 <Tab n="2"/><div class="wrapper col2"><br/> 5919 <Tab n="3"/><div id="topbar"><br/> 5920 <Tab n="4"/><div id="topnav"><br/> 5921 <Tab n="5"/><ul><br/> 5922 <Highlight><Tab n="6"/><li class="active"><a href="index.html">Home</a></li><br/> 5923 <Tab n="6"/><li><a href="style-demo.html">Browse</a><br/> 5924 <Tab n="7"/><ul><br/> 5925 <Tab n="8"/><li><a href="#">Link 1</a></li><br/> 5926 <Tab n="8"/><li><a href="#">Link 2</a></li><br/> 5927 <Tab n="8"/><li><a href="#">Link 3</a></li><br/> 5928 <Tab n="7"/></ul><br/> 5929 <Tab n="6"/></li><br/> 5930 <Tab n="6"/><li><a href="#">Search</a><br/> 5931 <Tab n="7"/><ul><br/> 5932 <Tab n="8"/><li><a href="#">Link 1</a></li><br/> 5933 <Tab n="8"/><li><a href="#">Link 2</a></li><br/> 5934 <Tab n="8"/><li><a href="#">Link 3</a></li><br/> 5935 <Tab n="7"/></ul><br/> 5936 <Tab n="6"/></li></Highlight><br/> 5937 <Tab n="5"/></ul><br/> 5938 <Tab n="4"/></div><br/> 5939 <Tab n="4"/><!--**********************************************************************--><br/> 5940 <Tab n="4"/><div id="search"><br/> 5941 <Tab n="5"/><form action="#" method="post"><br/> 5942 <Tab n="6"/> <fieldset><br/> 5943 <Tab n="7"/><legend>Site Search</legend><br/> 5944 <Tab n="7"/><input type="text" value="Search Our Website…" onfocus="this.value=(this.value=='Search Our Website…')? '' : this.value ;" /><br/> 5945 <Tab n="7"/><input type="submit" name="go" id="go" value="Search" /><br/> 5946 <Tab n="6"/></fieldset><br/> 5947 <Tab n="5"/></form><br/> 5948 <Tab n="4"/></div><br/> 5949 <Tab n="4"/><br class="clear" /><br/> 5950 <Tab n="4"/><div id="advanced"><a href="#">advanced search</a></div><br/> 5951 <Tab n="4"/><!--**********************************************************************--><br/> 5952 <Tab n="3"/></div><br/> 5953 <Tab n="2"/></div><br/> 5954 </Format> 5955 </NumberedItem> 5956 <NumberedItem> 5957 <Text id="ni3-11">Save <b>main.xsl</b> and refresh the web browser. The navigation bar should now appear at the top of the screen.</Text> 5958 <Text id="ni3-12">As you can see in the code above, the navigation links are simply HTML list items, and the dropdown menus are simply lists inside of lists. This is a very common way to make navigation bars.</Text> 5959 </NumberedItem> 5960 <NumberedItem> 5961 <Text id="ni3-13">However, this navigation bar is static. It will be exactly the same for every page in the library. Instead, and we want it to change depending on which page we are on and which collection we are in. To do this, we will be using a couple of pretty complicated looking templates. Just remember, the end result will be HTML structured in the same way as the lists above. First, call the <b>navBar</b> template by replacing this:</Text> 5962 <Format> 5963 <Tab n="6"/><li class="active"><a href="index.html">Home</a></li><br/> 5964 <Tab n="6"/><li><a href="style-demo.html">Browse</a><br/> 5965 <Tab n="7"/><ul><br/> 5966 <Tab n="8"/><li><a href="#">Link 1</a></li><br/> 5967 <Tab n="8"/><li><a href="#">Link 2</a></li><br/> 5968 <Tab n="8"/><li><a href="#">Link 3</a></li><br/> 5969 <Tab n="7"/></ul><br/> 5970 <Tab n="6"/></li><br/> 5971 <Tab n="6"/><li><a href="#">Search</a><br/> 5972 <Tab n="7"/><ul><br/> 5973 <Tab n="8"/><li><a href="#">Link 1</a></li><br/> 5974 <Tab n="8"/><li><a href="#">Link 2</a></li><br/> 5975 <Tab n="8"/><li><a href="#">Link 3</a></li><br/> 5976 <Tab n="7"/></ul><br/> 5977 <Tab n="6"/></li><br/> 5978 </Format> 5979 <Text id="ni3-14">with this:</Text> 5980 <Format> 5981 <Tab n="6"/><xsl:call-template name="navBar"/> 5982 </Format> 5983 <Text id="ni3-15">Then add the following templates before the final <Format></xsl:stylesheet></Format>:</Text> 5984 <Format> 5985 <Tab n="1"/><xsl:template name="navBar"><br /> 5986 <Tab n="2"/><xsl:choose><br /> 5987 <Tab n="3"/><xsl:when test="page/pageResponse/collection"><br /> 5988 <Tab n="4"/><xsl:variable name="count" select="count(/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier)"/><br /> 5989 <Tab n="4"/><xsl:variable name="currentPage" select="page/pageRequest/@fullURL"/><br /><br /> 5990 5991 <Tab n="4"/><li><a href="{$library_name}">Home</a></li><br /> 5992 <Tab n="4"/><li><br /> 5993 <Tab n="5"/><xsl:if test="page/pageRequest/@subaction='about'"><xsl:attribute name="class">active</xsl:attribute></xsl:if><br /> 5994 <Tab n="5"/><a href="{$library_name}/collection/{$collNameChecked}/page/about">About</a><br /> 5995 <Tab n="4"/></li><br /><br /> 5996 5997 <Tab n="4"/><xsl:choose><br /> 5998 <Tab n="5"/><xsl:when test="$count > 3"><br /> 5999 <Tab n="6"/><li><a href="{$currentPage}">Browse</a><br /> 6000 <Tab n="7"/><ul><br /> 6001 <Tab n="8"/><xsl:call-template name="Browsing"/><br /> 6002 <Tab n="7"/></ul><br /> 6003 <Tab n="6"/></li><br /> 6004 <Tab n="5"/></xsl:when><br /> 6005 <Tab n="5"/><xsl:otherwise><br /> 6006 <Tab n="6"/><xsl:call-template name="Browsing"/><br /> 6007 <Tab n="5"/></xsl:otherwise><br /> 6008 <Tab n="4"/></xsl:choose><br /><br /> 6009 6010 <Tab n="4"/><xsl:if test="/page/pageResponse/collection/serviceList/service/@type='query'"><br /> 6011 <Tab n="5"/><li><a href="{$currentPage}">Search</a><br /> 6012 <Tab n="6"/><ul><br /> 6013 <Tab n="7"/><xsl:for-each select="/page/pageResponse/collection/serviceList/service[@type='query']"><br /> 6014 <Tab n="8"/><xsl:variable name="search" select="@name"/><br /> 6015 <Tab n="8"/><xsl:variable name="search_name" select="displayItem[@name='name']"/><br /> 6016 <Tab n="8"/><li><a href="{$library_name}/collection/{$collNameChecked}/search/{$search}"><xsl:value-of select="$search_name"/></a></li><br /> 6017 <Tab n="7"/></xsl:for-each><br /> 6018 <Tab n="6"/></ul><br /> 6019 <Tab n="5"/></li><br /> 6020 <Tab n="4"/></xsl:if><br /><br /> 6021 <Tab n="3"/></xsl:when><br /> 6022 <Tab n="3"/><xsl:otherwise> </xsl:otherwise><br /> 6023 <Tab n="2"/></xsl:choose><br /> 6024 <Tab n="1"/></xsl:template><br /><br /> 6025 6026 <Tab n="1"/><xsl:template name="Browsing"><br/> 6027 <Tab n="2"/><xsl:for-each select="/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier"><br/> 6028 <Tab n="3"/><li><br/> 6029 <Tab n="4"/><xsl:choose><br/> 6030 <Tab n="4"/><!-- If this tab is selected then colour it differently --><br/> 6031 <Tab n="5"/><xsl:when test="util:contains(/page/pageRequest/paramList/param[@name = 'cl' and /page/pageRequest/@action = 'b']/@value, @name)"><br/> 6032 <Tab n="6"/><xsl:attribute name='class'>active</xsl:attribute><br/> 6033 <Tab n="5"/></xsl:when><br/> 6034 <Tab n="5"/><xsl:otherwise> </xsl:otherwise><br/> 6035 <Tab n="4"/></xsl:choose><br/><br/> 6036 6037 <Tab n="4"/><a><br/> 6038 <Tab n="4"/><!-- Add a title element to the <a> tag if a description exists for this classifier --><br/> 6039 <Tab n="5"/><xsl:if test="displayItem[@name='description']"><br/> 6040 <Tab n="6"/><xsl:attribute name='title'><xsl:value-of select="displayItem[@name='description']"/></xsl:attribute><br/> 6041 <Tab n="5"/></xsl:if><br/><br/> 6042 6043 <Tab n="5"/><!-- Add the href element to the <a> tag --><br/> 6044 <Tab n="5"/><xsl:choose><br/> 6045 <Tab n="6"/><xsl:when test="@name"><br/> 6046 <Tab n="7"/><xsl:attribute name="href"><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/<xsl:value-of select="@name"/></xsl:attribute><br/> 6047 <Tab n="6"/></xsl:when><br/> 6048 <Tab n="6"/><xsl:otherwise><br/> 6049 <Tab n="7"/><xsl:attribute name="href"><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/1</xsl:attribute><br/> 6050 <Tab n="6"/></xsl:otherwise><br/> 6051 <Tab n="5"/></xsl:choose><br/><br/> 6052 6053 <Tab n="5"/><!-- Add the actual text of the <a> tag --><br/> 6054 <Tab n="5"/><xsl:value-of select="displayItem[@name='name']"/><br/> 6055 <Tab n="4"/></a><br/> 6056 <Tab n="3"/></li><br/> 6057 <Tab n="2"/></xsl:for-each><br/> 6058 <Tab n="1"/></xsl:template><br/> 6059 </Format><Comment> 6060 <Text id="ni3-c2">A basic explanation of these templates follows (don't worry if you don't understand it). You can skip ahead to Step 9 if you'd like.</Text> 6061 </Comment> 6062 <Text id="ni3-16">Let's take a look at the <b>navBar</b> template and try to understand what it's doing. First, it's checking to see if the page is a collection page (<Format><xsl:when test="page/pageResponse/collection"></Format>). If so, it will create a link back to the home page (<Format><li><a href="{$library_name}">Home</a></li></Format>) and to the current collection's about page.</Text> 6063 <Text id="ni3-17">Then, if there are 3 or fewer browsing classifiers, they will each become a link on the navigation bar. If there are more than 3 browsing classifiers, then they will be made into a dropdown menu under the heading "Browse". (If there are too many links in the navigation bar, they will start to overlap.) Finally, if there are any search types, they will be in a dropdown menu under the heading "Search". In addition, it adds the attribute "class=active" to the link for the current page so that it will be colored differently. </Text> 6064 </NumberedItem> 6065 <NumberedItem> 6066 <Text id="ni3-18">Save <b>main.xsl</b> and refresh the browser. The home page should have no links in the navigation bar at all. Enter a few different collection and see what the navigation bar looks like in each of those.</Text> 6067 </NumberedItem> 6068 <Heading> 6069 <Text id="ni3-h3">Adding functionality to the quick search box</Text> 6070 </Heading> 6071 <NumberedItem> 6072 <Text id="ni3-19">Currently, the quick search box doesn't actually work. To make the quick search work, replace this:</Text> 6073 <Format> 6074 <Tab n="4"/><div id="search"><br/> 6075 <Tab n="5"/><form action="#" method="post"><br/> 6076 <Tab n="6"/> <fieldset><br/> 6077 <Tab n="7"/><legend>Site Search</legend><br/> 6078 <Tab n="7"/><input type="text" value="Search Our Website…" onfocus="this.value=(this.value=='Search Our Website…')? '' : this.value ;" /><br/> 6079 <Tab n="7"/><input type="submit" name="go" id="go" value="Search" /><br/> 6080 <Tab n="6"/></fieldset><br/> 6081 <Tab n="5"/></form><br/> 6082 <Tab n="4"/></div><br/> 6083 <Tab n="4"/><br class="clear" /><br/> 6084 <Tab n="4"/><div id="advanced"><a href="#">advanced search</a></div><br/> 6085 </Format> 6086 <Text id="ni3-20">With this:</Text> 6087 <Format> 6088 <Tab n="4"/><xsl:choose><br/> 6089 <Tab n="5"/><xsl:when test="page/pageRequest/@subaction='home'"><br/> 6090 <Tab n="6"/><xsl:call-template name="crossCollSearch"/><br/> 6091 <Tab n="5"/></xsl:when><br/> 6092 <Tab n="5"/><xsl:when test="page/pageRequest/paramList/param/@name='c' and /page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']"><br/> 6093 <Tab n="6"/><xsl:call-template name="CollectionSearch"/><br/> 6094 <Tab n="5"/></xsl:when><br/> 6095 <Tab n="5"/><xsl:otherwise/><br/> 6096 <Tab n="4"/></xsl:choose><br/> 6097 </Format> 6098 <Text id="ni3-21">This says when you are on the home page, use the <b>crossCollSearch</b> template; when you are on a collection page (and that collection has <b>plain</b>, i.e. "TextQuery", search enabled), use the <b>CollectionSearch</b> template; otherwise, don't put anything at all.</Text> 6099 </NumberedItem> 6100 <NumberedItem> 6101 <Text id="ni3-22">Now add in the <b>crossCollSearch</b> and <b>CollectionSearch</b> templates before the final <Format></xsl:stylesheet></Format>:</Text> 6102 <Format> 6103 <Tab n="1"/><xsl:template name="crossCollSearch"><br/> 6104 <Tab n="2"/><div id="search"><br/> 6105 <Tab n="3"/><xsl:for-each select="/page/pageResponse/serviceList/service[@name='TextQuery']"><br/> 6106 <Tab n="4"/><form name="QuickSearch" method="get" action="{$library_name}"><br/> 6107 <Tab n="5"/><input type="hidden" name="a" value="q"/><br/> 6108 <Tab n="5"/><input type="hidden" name="rt" value="rd"/><br/> 6109 <Tab n="5"/><input type="hidden" name="s" value="{@name}"/><br/> 6110 <Tab n="5"/><input type="hidden" name="s1.collection" value="all"/><br/> 6111 <Tab n="5"/><input type="text" name="s1.query" id="search-text" value="Search all collections…" onfocus="this.value=(this.value=='Search all collections…')? '' : this.value ;" /><br/> 6112 <Tab n="5"/><input type="submit" name="go" id="go" value="Search" /><br/> 6113 <Tab n="4"/></form><br/> 6114 <Tab n="3"/></xsl:for-each> <br/> 6115 <Tab n="2"/></div><br/> 6116 <Tab n="2"/><br class="clear" /> <br/> 6117 <Tab n="1"/></xsl:template><br/><br/> 6118 6119 <Tab n="1"/><xsl:template name="CollectionSearch"><br/> 6120 <Tab n="2"/><div id="search"><br/> 6121 <Tab n="3"/><xsl:variable name="subaction" select="/page/pageRequest/@subaction"/> <br/> 6122 <Tab n="3"/><form action="{$library_name}/collection/{$collNameChecked}/search/TextQuery"><br/> 6123 <Tab n="4"/><!-- This parameter says that we have come from the quick search area --><br/> 6124 <Tab n="4"/><input type="hidden" name="qs" value="1"/><br/> 6125 <Tab n="4"/><input type="hidden" name="rt" value="rd"/><br/> 6126 <Tab n="4"/><input type="hidden" name="s1.level"><br/> 6127 <Tab n="5"/><xsl:attribute name="value"><br/> 6128 <Tab n="6"/><xsl:choose><br/> 6129 <Tab n="7"/><xsl:when test="/page/pageRequest/paramList/param[@name = 's1.level']"><br/> 6130 <Tab n="8"/><xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.level']/@value"/><br/> 6131 <Tab n="7"/></xsl:when><br/> 6132 <Tab n="7"/><xsl:otherwise><br/> 6133 <Tab n="8"/><xsl:value-of select="/page/pageResponse/collection/serviceList/service[@name='TextQuery']/paramList/param[@name = 'level']/@default"/><br/> 6134 <Tab n="7"/></xsl:otherwise><br/> 6135 <Tab n="6"/></xsl:choose><br/> 6136 <Tab n="5"/></xsl:attribute><br/> 6137 <Tab n="4"/></input><br/> 6138 <Tab n="4"/><xsl:choose><br/> 6139 <Tab n="5"/><xsl:when test="/page/pageResponse/service[@name = 'TextQuery']/paramList/param[@name = 'startPage']"><br/> 6140 <Tab n="6"/><input type="hidden" name="s1.startPage" value="1"/><br/> 6141 <Tab n="5"/></xsl:when><br/> 6142 <Tab n="5"/><xsl:otherwise><br/> 6143 <Tab n="6"/> <input type="hidden" name="startPage" value="1"/><br/> 6144 <Tab n="5"/></xsl:otherwise><br/> 6145 <Tab n="4"/></xsl:choose><br/> 6146 <Tab n="4"/><xsl:if test="not(/page/pageRequest/paramList/param[@name = 's1.hitsPerPage'])"><br/> 6147 <Tab n="5"/><input type="hidden" name="s1.hitsPerPage" value="20"/><br/> 6148 <Tab n="4"/></xsl:if><br/> 6149 <Tab n="4"/><xsl:if test="not(/page/pageRequest/paramList/param[@name = 's1.maxDocs'])"><br/> 6150 <Tab n="5"/><input type="hidden" name="s1.maxDocs" value="100"/><br/> 6151 <Tab n="4"/></xsl:if><br/> 6152 <Tab n="4"/><!-- The query text box --><br/> 6153 <Tab n="4"/><span class="querybox"><br/> 6154 <Tab n="5"/><xsl:variable name="qs"><br/> 6155 <Tab n="6"/><xsl:apply-templates select="/page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']/paramList/param[@name='query']" mode="calculate-default"/><br/> 6156 <Tab n="5"/></xsl:variable><br/> 6157 <Tab n="5"/><nobr><br/> 6158 <Tab n="5"/><xsl:apply-templates select="/page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']/paramList/param[@name='query']"><br/> 6159 <Tab n="6"/><xsl:with-param name="default" select="java:org.greenstone.gsdl3.util.XSLTUtil.tidyWhitespace($qs, /page/@lang)"/><br/> 6160 <Tab n="5"/></xsl:apply-templates><br/> 6161 <Tab n="5"/></nobr><br/> 6162 <Tab n="4"/></span><br/> 6163 <Tab n="4"/><!-- The submit button (for TextQuery) --><br/> 6164 <Tab n="4"/><xsl:if test="/page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']"><br/> 6165 <Tab n="5"/><input type="submit" name="go" id="go" value="Search" > </input><br/> 6166 <Tab n="5"/><br/><br/> 6167 <Tab n="4"/></xsl:if><br/> 6168 <Tab n="3"/></form> <br/> 6169 <Tab n="2"/> </div><br/> 6170 <Tab n="2"/><br class="clear" /> <br/> 6171 <Tab n="2"/><div id="advanced"><a href="{$library_name}/collection/{$collNameChecked}/search/TextQuery">advanced search</a></div><br/> 6172 <Tab n="1"/></xsl:template> <br/> 6173 </Format> 6174 </NumberedItem> 6175 <NumberedItem> 6176 <Text id="ni3-23">Save <b>main.xsl</b> and refresh the web browser. Try searching for a word on the home page (like "economy"), and then enter a collection or two and try searching from there, as well.</Text> 6177 </NumberedItem> 6178 <Heading> 6179 <Text id="ni3-h4">Adding the library name and login links</Text> 6180 </Heading> 6181 <NumberedItem> 6182 <Text id="ni3-24">Next, we'll add a header to our page that displays the library's name (with a link to the home page), and, if we're inside a collection, displays the collection's name (with a link to the collection's about page). After the <Format><body></Format> tag in <b>mainTemplate</b>, add the following:</Text> 6183 <Format> 6184 <Tab n="4"/><div class="fl_left"><br /> 6185 <Tab n="5"/><h1><a href="{$library_name}"><xsl:call-template name="siteName"/></a></h1><br /> 6186 <Tab n="5"/><p> <br /> 6187 <Tab n="6"/><xsl:if test="page/pageResponse/collection"><br /> 6188 <Tab n="7"/><a href="{$library_name}/collection/{$collNameChecked}/page/about"><br /> 6189 <Tab n="8"/><xsl:value-of select="page/pageResponse/collection/displayItem[@name='name']"/><br /> 6190 <Tab n="7"/></a><br /> 6191 <Tab n="6"/></xsl:if><br /> 6192 <Tab n="5"/></p><br /> 6193 <Tab n="4"/></div><br /> 6194 </Format> 6195 <Text id="ni3-25">Save main.xsl and refresh the web browser to see the library name display at the top of the page. Enter a collection to see the collection name displayed.</Text> 6196 </NumberedItem> 6197 <NumberedItem> 6198 <Text id="ni3-26">Finally, we will add the top bar which includes the links for logging in, the help page, and the preferences page. In the <b>mainTemplate</b>, <b>replace</b> the <Format><body></Format> tag with: </Text> 6199 <Format> 6200 <Tab n="3"/><body id="top"><br /> 6201 <Tab n="4"/><div class="wrapper col0"><br /> 6202 <Tab n="5"/><div id="topline"><br /> 6203 <Tab n="6"/><ul><br /> 6204 <Tab n="7"/><call-template name="loginLinks"/><br /> 6205 <Tab n="7"/> <li><a href="{$library_name}/collection/{$collNameChecked}/page/pref">Preferences</a></li><br /> 6206 <Tab n="7"/> <li><a href="{$library_name}/collection/{$collNameChecked}/page/help">Help</a></li><br /> 6207 <Tab n="6"/></ul><br /> 6208 <Tab n="6"/> <br class="clear" /><br /> 6209 <Tab n="5"/></div><br /> 6210 <Tab n="4"/></div><br /> 6211 </Format> 6212 <Text id="ni3-27">and add the following template before the final <Format></xsl:stylesheet></Format>:</Text> 6213 <Format> 6214 <Tab n="1"/><xsl:template name="loginLinks"><br /> 6215 <Tab n="2"/><xsl:variable name="username" select="/page/pageRequest/userInformation/@username"/><br /> 6216 <Tab n="2"/><xsl:variable name="groups" select="/page/pageRequest/userInformation/@groups"/><br /><br /> 6217 6218 <Tab n="2"/><xsl:choose><br /> 6219 <Tab n="3"/><xsl:when test="$username"><br /> 6220 <Tab n="4"/><xsl:if test="contains($groups,'admin')"><br /> 6221 <Tab n="5"/><li class="login"><a href="{$library_name}/admin/AddUser">Add user</a></li><br /> 6222 <Tab n="5"/><li class="login"><a href="{$library_name}/admin/ListUsers">Administration</a></li><br /> 6223 <Tab n="4"/></xsl:if><br /> 6224 <Tab n="4"/><li class="login"><a href="{$library_name}/admin/AccountSettings?s1.username={$username}">Logged in as: <xsl:value-of select="$username"/></a></li><br /> 6225 <Tab n="4"/><li class="login"><a href="{$library_name}?logout=">Logout</a></li><br /> 6226 <Tab n="3"/></xsl:when><br /> 6227 <Tab n="3"/><xsl:otherwise><br /> 6228 <Tab n="4"/><li class="login"><br /> 6229 <Tab n="5"/><a href="{$library_name}?a=p&sa=login&redirectURL={$library_name}%3Fa=p%26sa=home">Login<br/> 6230 <Tab n="6"/><xsl:attribute name="title"><br/> 6231 <Tab n="7"/><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_tip')"/><br/> 6232 <Tab n="6"/></xsl:attribute><br/> 6233 <Tab n="5"/></a><br /> 6234 <Tab n="4"/></li><br /> 6235 <Tab n="3"/></xsl:otherwise><br /> 6236 <Tab n="2"/></xsl:choose><br /> 6237 <Tab n="1"/></xsl:template><br /> 6238 </Format> 6239 </NumberedItem> 6240 <NumberedItem> 6241 <Text id="ni3-27">Save and close <b>main.xsl</b> and refresh the web browser too see the top bar. Click the <b>Login</b> button and log in as <b>admin</b> (default password is "admin") to see all of the links appear along the top (including links to the <b>Add User</b> page, to the <b>Administration</b> page, and to Logout).</Text> 6242 </NumberedItem> 6243 <Heading> 6244 <Text id="ni3-h5">Interface language files</Text> 6245 </Heading> 6246 <NumberedItem> 6247 <Text id="ni3-28">In the web browser, click the <b>Help</b> button. For simplicity's sake, we have not built this interface to be language independent. All of the text is simply written in English. The content of the help page, however, which is still being "borrowed" from the default interface, is built to be language independent.</Text> 6248 <Text id="ni3-29"> However, the <b>help.xsl</b> file in <b>default</b> is looking for a file called <Format>interface_<interface-name>2.properties</Format>. So, when the <b>default</b> interface is being used, it will look for the file <Format>interface_default2.properties</Format>, which does exist. But since our library is using the <b>perrin</b> interface, it is looking for the file <Format>interface_perrin2.properties</Format>, which does <i>not</i> exist. There are a few different solutions to this. The quickest solution at the moment is to create an <Format>interface_perrin2.properties</Format> file so that the English values will display.</Text> 6249 </NumberedItem> 6250 <NumberedItem> 6251 <Text id="ni3-30">In the <Path>Greenstone3 → web → WEB-INF → classes</Path> folder, create a copy of the <Format>interface_default2.properties</Format> file (select the file and press <b>Ctrl+C</b> then <b>Ctrl+V</b>). This will create a file called <Format>interface_default2 - Copy.properties</Format>. Rename this file <Format>interface_perrin2.properties</Format>. </Text> 6252 <Text id="ni3-31">When adding or editing properties files, you must restart the server for changes to take effect. In the Greenstone Server window, click the <b>Restart Library</b> button. When the server restarts, navigate to <Path>http://localhost:8383/greenstone3/golden/collection//page/help</Path> to see the English help text properly displayed.</Text> 6253 </NumberedItem> 6254 </Content> 6255 </Tutorial> 5238 6256 </MajorVersion> 5239 6257 </TutorialList>
Note:
See TracChangeset
for help on using the changeset viewer.
