Location: PHPKode > projects > Open Power Template > docs/Opt/syntax.instructions.selector.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="robots" content="all" />

	<title>opt:selector - Open Power Template</title>
	
	<link rel="stylesheet" type="text/css" href="design/generic.css" media="all"  />
	<link rel="stylesheet" type="text/css" href="design/print.css" media="print" />
	<!--[if lte IE 6]><link rel="stylesheet" href="design/ie.css" type="text/css" /><![endif]-->	
	<!--[if IE 7]><link rel="stylesheet" href="design/ie7.css" type="text/css" /><![endif]-->
</head>
<body>

<div id="wrap">
	<div id="header">
		<h1>Open Power Template 2.0</h1>
		<h2>opt:selector</h2>
		<p class="generated">@ 02.09.2010</p>
		<p class="location"><a href="index.html"><strong>User manual</strong></a> &raquo; <a href="syntax.html">Template syntax</a> &raquo; <a href="syntax.instructions.html">Instructions</a> &raquo; <a href="syntax.instructions.selector.html">opt:selector</a></p>
	</div>
	
	<div id="content"><dl class="location"><dt><a href="syntax.instructions.html">3.7. Instructions</a><br/>3.7.20. opt:selector</dt><dd class="prev">3.7.19. opt:section<br/><a href="syntax.instructions.section.html">&laquo; Previous</a></dd><dd class="next">3.7.21. opt:separator<br/><a href="syntax.instructions.separator.html">Next &raquo;</a></dd></dl>	<h1>3.7.20. opt:selector</h1><blockquote class="help">
  <p>This chapter describes one of section instructions. We recommend to read <a href="syntax.topics.sections.html" title="3.9.1. Sections">Sections</a> first to get to know more about them.</p>
</blockquote>
<p><code>opt:selector</code> works much like <code>opt:section</code>. The difference is that here we may define several types of element layout. OPT will choose one for each element, depending on one of its fields (by default, it is called "item"). Below, we can find an example of displaying the links to the result pages. Each list element represents one page, however we do not want them do look exactly the same. With <code>opt:selector</code> we define different looks for various types of pages (standard, active, dotted part to hide too many pages etc.):</p>

<pre class="xml"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:selector</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;pages&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$page.address&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$page.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$page.address&quot;</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">&quot;active&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$page.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:selector<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre>

<p>With <code>opt:selector</code> we defined different layout for various types of pages:</p>

<ol>
<li>Default page link</li>
<li>Current page</li>
<li>The dots to shorten the list, if there are too many pages (for example, <em>[ 1 ] ... [ 5 ] [ 6 ] [ 7 ] ... [ 15 ]</em>).</li>
</ol>

<p>Now, the pagination system must simply generate a list of pages with a field <code>item</code> to identify the requested type.</p>

<p>Note that the layout types are defined as separate tags in one of namespaces recognized by OPT. The rest of tags located directly in <code>opt:selector</code> will be ignored. OPT tries to match the list elements to the tag names.</p>

<p>Normally, OPT looks for the element type name in the variable <code>$sectionName.item</code>. This can be changed with an extra attribute, <code>type</code>:</p>

<table>
<thead>
<tr>
  <th>Name</th>
  <th>Type</th>
  <th>Required?</th>
  <th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
  <td>test</td>
  <td>ID</td>
  <td>No</td>
  <td align="left">The name of element variable with the type name</td>
</tr>
</tbody>
</table>

<pre class="xml"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:selector</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;pages&quot;</span> <span style="color: #000066;">test</span>=<span style="color: #ff0000;">&quot;pageType&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$page.address&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$page.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$page.address&quot;</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">&quot;active&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$page.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:selector<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre>

<p>Now the types are taken from <code>$pages.pageType</code> instead of <code>$pages.item</code>.</p>

<h2>Empty lists</h2>

<p>You may define the alternative content to be displayed, if the list is empty, using the tag <code>opt:selectorelse</code>:</p>

<pre class="xml"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:selector</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;pages&quot;</span> <span style="color: #000066;">test</span>=<span style="color: #ff0000;">&quot;pageType&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$page.address&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$page.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$page.address&quot;</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">&quot;active&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$page.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:selectorelse<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Sorry, the result set is empty.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:selectorelse<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:selector<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre>

<p>Note that you must not use <code>opt:selectorelse</code>, if our selector works together with <code>opt:show</code>. In this case, <code>opt:showelse</code> is available:</p>

<pre class="xml"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:show</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;pages&quot;</span> <span style="color: #000066;">test</span>=<span style="color: #ff0000;">&quot;pageType&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;opt:selector<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$page.address&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$page.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$page.address&quot;</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">&quot;active&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$page.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:selector<span style="color: #000000; font-weight: bold;">&gt;</span></span><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:showelse<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Sorry, the result set is empty.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:showelse<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:show<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre>

<h2>opt:selector and snippets</h2>

<p><code>opt:selector</code> supports OPT snippets. Let's get back to our pagination example. It is obvious that on huge website we are not going to declare the layouts in each of our 100 templates that display some result sets. Instead of that, the generic layout can be moved to an external snippet and loaded with <code>opt:use</code> attribute:</p>

<pre class="xml"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:snippet</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;defaultPagination&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$defaultPagination.address&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$defaultPagination.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:page<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>[ <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">parse:href</span>=<span style="color: #ff0000;">&quot;$defaultPagination.address&quot;</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">&quot;active&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>{$defaultPagination.number}<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> ]<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:active<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:dots<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/opt:snippet<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:selector</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;pages1&quot;</span> <span style="color: #000066;">opt:use</span>=<span style="color: #ff0000;">&quot;defaultPagination&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;opt:selector</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;pages2&quot;</span> <span style="color: #000066;">opt:use</span>=<span style="color: #ff0000;">&quot;defaultPagination&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span></pre>
<h4>See also:</h4><ul><li><a href="syntax.topics.sections.html">3.9.1. Sections</a></li><li><a href="syntax.instructions.section.html">3.7.19. opt:section</a></li><li><a href="syntax.instructions.tree.html">3.7.25. opt:tree</a></li><li><a href="syntax.instructions.grid.html">3.7.10. opt:grid</a></li><li><a href="syntax.instructions.show.html">3.7.22. opt:show</a></li><li><a href="syntax.instructions.separator.html">3.7.21. opt:separator</a></li><li><a href="syntax.attributes.selector.html">3.8.9. opt:selector</a></li></ul><dl class="location location-bottom"><dt>3.7.20. opt:selector<br/><a href="syntax.instructions.html">3.7. Instructions</a></dt><dd class="prev"><a href="syntax.instructions.section.html">&laquo; Previous</a><br/>3.7.19. opt:section</dd><dd class="next"><a href="syntax.instructions.separator.html">Next &raquo;</a><br/>3.7.21. opt:separator</dd></dl>		</div>
	
	<div id="footer">
		<p>Copyright &copy; <a href="http://www.invenzzia.org/">Invenzzia Group 2008-2009</a></p>
		<p>Available under the terms of license: <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License 1.2</a></p>
		<p>Generated by <strong>TypeFriendly 0.1.4</strong> by <a href="http://www.invenzzia.org/">Invenzzia</a></p>
	</div>
</div>

</body>
</html>
Return current item: Open Power Template