Presentation Pattern Catalog

release: $Release$

4   Selection

4-1   Select Element/Content Pattern

4-1-1   Description

The following is an example to choose a certain element or content from some elements. This pattern is named 'Select Element Pattern' or 'Select Content Pattern'.

4-1-2   Situation

This pattern is very useful when you want to change data according to conditions.

4-1-3   Example Code

Presentation Data:
<div id="mark:message">
  <span style="color:red"   id="mark:error">ERROR!</span>
  <span style="color:blue"  id="mark:warning">Warning:</span>
  <span style="color:black" id="mark:good">No error.</span>
</div>
Presentation Logic:
/* select element according to status */
#message {
  logic: {
    if status == 'error'
      _element(error)      # ERROR!
    else if (status == 'warning')
      _element(warning)    # Warning:
    else
      _element(good)       # No error.
    end
  }
}
Output Script:
<%     if status == 'error' %>
  <span style="color:red">ERROR!</span>
<%     else if (status == 'warning') %>
  <span style="color:blue">Warning:</span>
<%     else %>
  <span style="color:black">No error.</span>
<%     end %>

4-1-4   Supplement

Kwartz directive 'kw:d="if condition"', 'kw:d="elsif condition"', and 'kw:d="else"' let you to use this pattern without presentation logic file.

<div>
  <span style="color:red"   kw:d="if status=='error'">ERROR!</span>
  <span style="color:blue"  kw:d="elsif status=='warning'">Warning:</span>
  <span style="color:black" kw:d="else">No error.</span>
</div>

4-2   Pick-up Element/Content Pattern

4-2-1   Description

If you want to use certain elements or contents, do marking the elements and use only them in presentation logic. Unmarked elements are ignored and not printed. This pattern is named 'Pick-up Element Pattern' or 'Pick-up Content Pattern'.

'Pick-up Element' pattern is opposite of 'Dummy Element' pattern. In 'Dummy Element' pattern, dummy elements are marked and removed so that necessary elements are leaved. In 'Pick-up Element' pattern, necessary elements are marked and leaved so that dummy elements are removed.

4-2-2   Situation

This pattern is useful when many dummy datas are exist.

4-2-3   Example Code

Presentation Data:
<html>
  <body>
    <div id="breadcrumbs">
      <a href="/" id="mark:crumb">Home</a>
      <span id="mark:separator">&gt;</span>
      <a href="/aaa/">AAA</a> &lt;
      <a href="/aaa/bbb/">BBB</a> &lgt;
      <a href="/aaa/bbb/ccc">CCC</a> &lgt;
      <strong id="mark:title">title</strong>
    </div>
  </body>
</html>
Presentation Logic:
#breadcrumbs {
  logic: {
    for item in list
      _element(crumb)          # print <a>...</a>
      _content(separator)      # print '&gt;'
    end
    _element(title)            # print <strong>title</strong>
  }
}

#crumb {
  value:  item['name'];
  attrs:  "href" item['path'];
}
#title {
  value: title;
}
Output Script:
<html>
  <body>
<%     for item in list %>
      <a href="<%= item['path'] %>"><%= item['name'] %></a>
&gt;<%     end %>
      <strong><%= title %></strong>
  </body>
</html>

4-3   Extract Element/Content Pattern

4-3-1   Description

It is able to extract a certain element or content form the whole presentation data. Other element and text strings are not printed. This pattern is named 'Extract Element Pattern' or 'Extract Content Pattern'.

4-3-2   Situation

This pattern is very useful to extract HTML fragments and make them libraries.

4-3-3   Example Code

The following is an example to extract the HTML fragments 'tablist', 'menulist', and 'copyright' and generates the output scripts for them.

Presentation Data (design.html):
<html id="mark:whole">
  <head>
    <title>Design Examples</title>
    <link rel="stylesheet" href="design.css" type="text/css">
  </head>
  <body>

    <div id="mark:tablist">
      <div class="tabs" id="mark:tabs">
        <a href="/" class="" id="mark:tab">Home</a>
        <a href="/product/" class="selected">Product</a>
        <a href="/download/" class="">Download</a>
        <a href="/support/" class="">Support</a>
      </div>
      <div class="tabsline">
      </div>
    </div>

    <br>

    <div id="mark:menulist">
      <span class="menu_title" id="value:menu_title">MenuList</span>
      <div class="menus" id="mark:menus">
        <a href="/cgi-bin/email.cgi" class="" id="mark:menu">E-Mail</a>
        <span id="mark:menu_separator"><br></span>
        <a href="/cgi-bin/board.cgi" class="selected">MesgBoard</a><br>
        <a href="/cgi-bin/photo.cgi" class="">PhotoAlbum</a><br>
        <a href="/cgi-bin/greeting.cgi" class="">GreetingCard</a><br>
      </div>
    </div>
    <br>
      
    <p> ..... </p>
    <p> ..... </p>
    <p> ..... </p>
    
    <div align="center" class="copyright" id="mark:copyright">
      Copyright&copy; 2004-2006 kuwata-lab. All Rights Reserved.
    </div>
    
  </body>
</html>
Presentation Logic (copyright.plogic):
/* replace the 'whole' element with the element you want to extract */
#whole {
  logic: {
    _element(copyright)
  }
}
Presentation Logic (tablist.plogic):
/* replace the 'whole' element with the element you want to extract */
#whole {
  logic: {
    _element(tablist)
  }
}

#tabs {
  logic: {
    _stag
    for tab in tablist
      klass = current_tabname == tab['name'] ? 'selected' : ''
      _element(tab)
    end
    _etag
  }
}

#tab {
  value:  tab['name'];
  attrs:  "href" tab['href'],
          "class" klass;
}
Presentation Logic (menulist.plogic):
/* replace the 'whole' element with the element you want to extract */
#whole {
  logic: {
    _element(menulist)
  }
}

#menus {
  logic: {
    _stag
    for menu in menulist
      _element(menu)
      _element(menu_separator)
    end
    _etag
  }
}

#menu {
  value:   menu['name'];
  attrs:   "href" menu['cgipath'],
           "class" klass;
  logic: {
    klass = current_menu == menu['name'] ? 'selected' : ''
    _elem
  }
}
Compile:
### copyright
$ kwartz -l eruby -p copyright.plogic design.pdata > copyright.rhtml

### tablist
$ kwartz -l eruby -p tablist.plogic   design.pdata > tablist.rhtml

### menulist
$ kwartz -l eruby -p menulist.plogic  design.pdata > menulist.rhtml
Output Script (copyright.rhtml):
    <div align="center" class="copyright">
      Copyright&copy; 2004-2006 kuwata-lab. All Rights Reserved.
    </div>
Output Script (tablist.rhtml):
    <div>
      <div class="tabs">
<%     for tab in tablist %>
<%       klass = current_tabname == tab['name'] ? 'selected' : '' %>
        <a href="<%= tab['href'] %>" class="<%= klass %>"><%= tab['name'] %></a>
<%     end %>
      </div>
      <div class="tabsline">
      </div>
    </div>
Output Script (menulist.rhtml):
    <div>
      <span class="menu_title" id="value:menu_title">MenuList</span>
      <div class="menus">
<%     for menu in menulist %>
<%     klass = current_menu == menu['name'] ? 'selected' : '' %>
        <a href="<%= menu['cgipath'] %>" class="<%= klass %>"><%= menu['name'] %></a>
        <span><br></span>
<%     end %>
      </div>
    </div>

4-3-4   Supplement

The command-line option '-X name' extracts the element marked with name in kwartz-ruby.

The command-line option '-x name' extracts the content of the element marked with name in kwartz-ruby.