Home > Kwartz > Presentation Pattern Catalog

Presentation Pattern Catalog

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.
    }
  }
}

Output Script:

<?php     if ($status == 'error') { ?>
  <span style="color:red">ERROR!</span>
<?php     } else if ($status == 'warning') { ?>
  <span style="color:blue">Warning:</span>
<?php     } else { ?>
  <span style="color:black">No error.</span>
<?php     } ?>

4-1-4 Supplement

Kwartz directive 'kw:d="if(condition)"', 'kw:d="elseif(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="elseif($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: {
    foreach ($list as $item) {
      _element(crumb);          // print <a>...</a>
      _content(separator);      // print '&gt;'
    }
    _element(title);            // print <strong>title</strong>
  }
}

#crumb {
  value:  $item['name'];
  attrs:  "href" $item['path'];
}
#title {
  value: $title;
}

Output Script:

<html>
  <body>
<?php     foreach ($list as $item) { ?>
      <a href="<?php echo $item['path']; ?>"><?php echo $item['name']; ?></a>
&gt;<?php     } ?>
      <strong><?php echo $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;
    foreach ($tablist as $tab) {
      $klass = $current_tabname == $tab['name'] ? 'selected' : '';
      _element(tab);
    }
    _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();
    foreach ($menulist as $menu) {
      _element(menu);
      _element(menu_separator);
    }
    _etag();
  }
}

#menu {
  value:   $menu['name'];
  attrs:   "href" $menu['cgipath'],
           "class" $klass;
  logic: {
    $klass = $current_menu == $menu['name'] ? 'selected' : '';
    _elem();
  }
}

Compile:

### copyright
$ kwartz-php -l php -p copyright.plogic design.pdata > copyright.php

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

### menulist
$ kwartz-php -l php -p menulist.plogic  design.pdata > menulist.php

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">
<?php     foreach ($tablist as $tab) { ?>
<?php       $klass = $current_tabname == $tab['name'] ? 'selected' : ''; ?>
        <a href="<?php echo $tab['href']; ?>" class="<?php echo $klass; ?>"><?php echo $tab['name']; ?></a>
<?php     } ?>
      </div>
      <div class="tabsline">
      </div>
    </div>

Output Script (menulist.rhtml):

    <div>
      <span class="menu_title" id="value:menu_title">MenuList</span>
      <div class="menus">
<?php     foreach ($menulist as $menu) { ?>
<?php     $klass = $current_menu == $menu['name'] ? 'selected' : ''; ?>
        <a href="<?php echo $menu['cgipath']; ?>" class="<?php echo $klass; ?>"><?php echo $menu['name']; ?></a>
        <span><br></span>
<?php     } ?>
      </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.

<<Prev Top