source: documentation/trunk/tutorial_sample_files/interfaces/aybara/interface.txt@ 37565

Designing a new interface: Part 1


Step 4:

<servlet>
<servlet-name>golden</servlet-name>
<description>A new library with my new interface!</description>
<servlet-class>org.greenstone.gsdl3.LibraryServlet</servlet-class>
<init-param>
<param-name>library_name</param-name>
<param-value>golden</param-value>
</init-param>
<init-param>
<param-name>site_name</param-name>
<param-value>localsite</param-value>
</init-param>
<init-param>
<param-name>interface_name</param-name>
<param-value>perrin</param-value>
</init-param>
<init-param>
<param-name>receptionist_class</param-name>
<param-value>DefaultReceptionist</param-value>
</init-param>
<init-param>
<param-name>default_lang</param-name>
<param-value>en</param-value>
</init-param>
</servlet>


<servlet-mapping>
<servlet-name>golden</servlet-name>
<url-pattern>/golden/*</url-pattern>
</servlet-mapping> 


***********************************

Designing a new interface: Part 2


Step 3:

<div class="content">
<div id="featured_slide">
<ul id="featurednews">
<xsl:call-template name="collSlider"/>
</ul>
</div>
</div>


Step 4:

<xsl:template name="collSlider">
<xsl:for-each select="./collectionList/collection">
<xsl:variable name="collectionFolder" select="@name"/>
<xsl:variable name="collectionName" select="displayItemList/displayItem[@name='name']"/>
<xsl:variable name="homeImage">
<xsl:choose>
<xsl:when test="displayItem[@name='smallicon']">
sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collectionFolder"/>/images/<xsl:value-of select="displayItem[@name='smallicon']"/>
</xsl:when>
<xsl:otherwise>
interfaces/<xsl:value-of select="$interface_name"/>/images/default.jpg
</xsl:otherwise>
</xsl:choose>
</xsl:variable>

<li><img src="{$homeImage}" alt="" />
<div class="panel-overlay">
<a href="{$library_name}/collection/{$collectionFolder}/page/about">
<h2><xsl:value-of select="$collectionName"/></h2>
</a>
</div>
</li>
</xsl:for-each>
</xsl:template>


Step 6:

<xsl:template name="additionalHeaderContent">
<script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.min.js"><xsl:text> </xsl:text></script>
<script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.easing.1.3.js"><xsl:text> </xsl:text></script>
<script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.timers.1.2.js"><xsl:text> </xsl:text></script>
<script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.galleryview.2.1.1.min.js"><xsl:text> </xsl:text></script>
<script type="text/javascript" src="interfaces/{$interface_name}/scripts/jquery.galleryview.setup.js"><xsl:text> </xsl:text></script>
</xsl:template> 


Step 7:

<div class="column">
<ul class="latestnews">
<li>
<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>
</li>
<li><img src="interfaces/{$interface_name}/images/80x80.jpg" alt="" />
<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>
</li>
<li class="last"><img src="interfaces/{$interface_name}/images/80x80.jpg" alt="" />
<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>
</li>
</ul>
</div>
<br class="clear" />


Step 8:

<div id="hpage_cats">
<xsl:call-template name="collectionsList"/>
</div>


<xsl:template name="collectionsList">
<xsl:for-each select="./collectionList/collection">
<xsl:choose>
<xsl:when test="position() mod 2 = 1">
<div class="fl_left">
<xsl:call-template name="collDescription"/>
</div>
</xsl:when>
<xsl:otherwise>
<div class="fl_right">
<xsl:call-template name="collDescription"/>
</div>
<br class="clear" />
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</xsl:template> 

<xsl:template name="collDescription">
<xsl:variable name="collectionFolder" select="@name"/>
<xsl:variable name="collectionName" select="displayItemList/displayItem[@name='name']"/>
<xsl:variable name="homeImage" select="displayItemList/displayItem[@name='icon']"/>
<xsl:variable name="aboutImage" select="displayItemList/displayItem[@name='smallicon']"/>
<xsl:variable name="collDesc" select="displayItemList/displayItem[@name='description']"/>
<xsl:variable name="numDocs" select="metadataList/metadata[@name='numDocs']"/>

<h2><a href="{$library_name}/collection/{$collectionFolder}/page/about"><xsl:value-of select="$collectionName"/></a></h2> 
<xsl:if test="$aboutImage">
<img src="sites/{$site_name}/collect/{$collectionFolder}/images/{$aboutImage}" alt="{$collectionName}" />
</xsl:if>

<xsl:choose>
<xsl:when test="$collDesc">
<p class="justify"><xsl:apply-templates select="displayItemList/displayItem[@name='description']"/></p>
</xsl:when>
<xsl:otherwise>
<p class="justify">Welcome to the <xsl:value-of select="$collectionName"/> collection. This collection contains <xsl:value-of select="$numDocs"/> documents.</p>
</xsl:otherwise> 
</xsl:choose> 
</xsl:template> 


Step 11 (header.xsl):

<link rel="stylesheet" href="interfaces/{$interface_name}/styles/layout.css" type="text/css" />
<link rel="stylesheet" href="interfaces/{$interface_name}/styles/gs3-core-min.css" type="text/css" />

***********************************

Designing a new interface: Part 3


Step 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.-->
<div class="wrapper col8">
<div id="copyright">
<p class="fl_left">Copyright © 2013 - All Rights Reserved - <a href="#">Your Webpage Here</a></p>
<p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
<br class="clear" />
</div>
</div>


Step 4:

<div class="wrapper">
<div class="container" id="gs_content">
<xsl:apply-templates select="/page"/>
<br class="clear" /> 
</div>
</div>


Step 6:

<div class="wrapper col2">
<div id="topbar">
<div id="topnav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="style-demo.html">Browse</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Search</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</div>
<!--**********************************************************************-->
<div id="search">
<form action="#" method="post">
<fieldset>
<legend>Site Search</legend>
<input type="text" value="Search Our Website
" onfocus="this.value=(this.value=='Search Our Website
')? '' : this.value ;" />
<input type="submit" name="go" id="go" value="Search" />
</fieldset>
</form>
</div>
<br class="clear" />
<div id="advanced"><a href="#">advanced search</a></div>
<!--**********************************************************************-->
</div>
</div>


Step 8:

<xsl:call-template name="navBar"/>


" select="@name"/>
<xsl:variable name="search_name" select="displayItem[@name='name']"/>
<li><a href="{$library_name}/collection/{$collNameChecked}/search/{$search}"><xsl:value-of select="$search_name"/></a></li>
</xsl:for-each>
</ul>
</li>
</xsl:if>

</xsl:when>
<xsl:otherwise> </xsl:otherwise>
</xsl:choose>
</xsl:template>

<xsl:template name="Browsing">
<xsl:for-each select="/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier">
<li>
<xsl:choose>
<!-- If this tab is selected then colour it differently -->
<xsl:when test="util:contains(/page/pageRequest/paramList/param[@name = 'cl' and /page/pageRequest/@action = 'b']/@value, @name)">
<xsl:attribute name='class'>active</xsl:attribute>
</xsl:when>
<xsl:otherwise> </xsl:otherwise>
</xsl:choose>

<a>
<!-- Add a title element to the <a> tag if a description exists for this classifier -->
<xsl:if test="displayItem[@name='description']">
<xsl:attribute name='title'><xsl:value-of select="displayItem[@name='description']"/></xsl:attribute>
</xsl:if>

<!-- Add the href element to the <a> tag -->
<xsl:choose>
<xsl:when test="@name">
<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>
</xsl:when>
<xsl:otherwise>
<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>
</xsl:otherwise>
</xsl:choose>

<!-- Add the actual text of the <a> tag -->
<xsl:value-of select="displayItem[@name='name']"/>
</a>
</li>
</xsl:for-each>
</xsl:template>


Step 10:

<xsl:choose>
<xsl:when test="page/pageRequest/@subaction='home'">
<xsl:call-template name="crossCollSearch"/>
</xsl:when>
<xsl:when test="page/pageRequest/paramList/param/@name='c' and /page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']">
<xsl:call-template name="CollectionSearch"/>
</xsl:when>
<xsl:otherwise/>
</xsl:choose>


Step 11:

<xsl:template name="crossCollSearch">
<div id="search">
<xsl:for-each select="/page/pageResponse/serviceList/service[@name='TextQuery']">
<form name="QuickSearch" method="get" action="{$library_name}">
<input type="hidden" name="a" value="q"/>
<input type="hidden" name="rt" value="rd"/>
<input type="hidden" name="s" value="{@name}"/>
<input type="hidden" name="s1.collection" value="all"/>
<input type="text" name="s1.query" id="search-text" value="Search all collections
" onfocus="this.value=(this.value=='Search all collections
')? '' : this.value ;" />
<input type="submit" name="go" id="go" value="Search" />
</form>
</xsl:for-each> 
</div>
<br class="clear" /> 
</xsl:template>

<xsl:template name="CollectionSearch">
<div id="search">
<xsl:variable name="subaction" select="/page/pageRequest/@subaction"/> 
<form action="{$library_name}/collection/{$collNameChecked}/search/TextQuery">
<!-- This parameter says that we have come from the quick search area -->
<input type="hidden" name="qs" value="1"/>
<input type="hidden" name="rt" value="rd"/>
<input type="hidden" name="s1.level">
<xsl:attribute name="value">
<xsl:choose>
<xsl:when test="/page/pageRequest/paramList/param[@name = 's1.level']">
<xsl:value-of select="/page/pageRequest/paramList/param[@name = 's1.level']/@value"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="/page/pageResponse/collection/serviceList/service[@name='TextQuery']/paramList/param[@name = 'level']/@default"/>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</input>
<xsl:choose>
<xsl:when test="/page/pageResponse/service[@name = 'TextQuery']/paramList/param[@name = 'startPage']">
<input type="hidden" name="s1.startPage" value="1"/>
</xsl:when>
<xsl:otherwise>
<input type="hidden" name="startPage" value="1"/>
</xsl:otherwise>
</xsl:choose>
<xsl:if test="not(/page/pageRequest/paramList/param[@name = 's1.hitsPerPage'])">
<input type="hidden" name="s1.hitsPerPage" value="20"/>
</xsl:if>
<xsl:if test="not(/page/pageRequest/paramList/param[@name = 's1.maxDocs'])">
<input type="hidden" name="s1.maxDocs" value="100"/>
</xsl:if>
<!-- The query text box -->
<span class="querybox">
<xsl:variable name="qs">
<xsl:apply-templates select="/page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']/paramList/param[@name='query']" mode="calculate-default"/>
</xsl:variable>
<nobr>
<xsl:apply-templates select="/page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']/paramList/param[@name='query']">
<xsl:with-param name="default" select="java:org.greenstone.gsdl3.util.XSLTUtil.tidyWhitespace($qs, /page/@lang)"/>
</xsl:apply-templates>
</nobr>
</span>
<!-- The submit button (for TextQuery) -->
<xsl:if test="/page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@name='TextQuery']">
<input type="submit" name="go" id="go" value="Search" > </input>
<br/>
</xsl:if>
</form> 
</div>
<br class="clear" /> 
<div id="advanced"><a href="{$library_name}/collection/{$collNameChecked}/search/TextQuery">advanced search</a></div>
</xsl:template>


Step 13:

<div class="wrapper">
<div id="header">
<div class="fl_left">
<h1><a href="{$library_name}"><xsl:call-template name="siteName"/></a></h1>
<p>&#160;
<xsl:if test="page/pageResponse/collection">
<a href="{$library_name}/collection/{$collNameChecked}/page/about">
<xsl:value-of select="page/pageResponse/collection/displayItemList/displayItem[@name='name']"/>
</a>
</xsl:if>
</p>
</div>
<br class="clear"/></div>
</div>


Step 14:

<body id="top">
<div class="wrapper col0">
<div id="topline">
<ul>
<xsl:call-template name="loginLinks"/>
<li><a href="{$library_name}/collection/{$collNameChecked}/page/pref">Preferences</a></li>
<li><a href="{$library_name}/collection/{$collNameChecked}/page/help">Help</a></li>
</ul>
<br class="clear" />
</div>
</div>


<xsl:template name="loginLinks">
<xsl:variable name="username" select="/page/pageRequest/userInformation/@username"/>
<xsl:variable name="groups" select="/page/pageRequest/userInformation/@groups"/>

<xsl:choose>
<xsl:when test="$username">
<xsl:if test="contains($groups,'admin')">
<li class="login"><a href="{$library_name}/admin/AddUser">Add user</a></li>
<li class="login"><a href="{$library_name}/admin/ListUsers">Administration</a></li>
</xsl:if>
<li class="login"><a href="{$library_name}/admin/AccountSettings?s1.username={$username}">Logged in as: <xsl:value-of select="$username"/></a></li>
<li class="login"><a href="{$library_name}?logout=">Logout</a></li>
</xsl:when>
<xsl:otherwise>
<li class="login">
<a href="{$library_name}?a=p&amp;sa=login&amp;redirectURL={$library_name}%3Fa=p%26sa=home">Login
<xsl:attribute name="title">
<xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_tip')"/>
</xsl:attribute>
</a>
</li>
</xsl:otherwise>
</xsl:choose>
</xsl:template>


***********************************