kwartz 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/COPYING +340 -0
 - data/ChangeLog +103 -0
 - data/README.txt +37 -0
 - data/bin/kwartz +12 -0
 - data/doc-api/classes/Kwartz.html +218 -0
 - data/doc-api/classes/Kwartz/Assertion.html +140 -0
 - data/doc-api/classes/Kwartz/AssertionError.html +148 -0
 - data/doc-api/classes/Kwartz/AttrInfo.html +320 -0
 - data/doc-api/classes/Kwartz/BaseError.html +206 -0
 - data/doc-api/classes/Kwartz/BaseTranslator.html +331 -0
 - data/doc-api/classes/Kwartz/CharacterType.html +212 -0
 - data/doc-api/classes/Kwartz/CommandOptionError.html +154 -0
 - data/doc-api/classes/Kwartz/CommandOptions.html +374 -0
 - data/doc-api/classes/Kwartz/Config.html +150 -0
 - data/doc-api/classes/Kwartz/ConvertError.html +191 -0
 - data/doc-api/classes/Kwartz/Converter.html +252 -0
 - data/doc-api/classes/Kwartz/CssStyleParser.html +483 -0
 - data/doc-api/classes/Kwartz/DocumentRuleset.html +369 -0
 - data/doc-api/classes/Kwartz/ElementExpander.html +325 -0
 - data/doc-api/classes/Kwartz/ElementInfo.html +312 -0
 - data/doc-api/classes/Kwartz/ElementRuleset.html +582 -0
 - data/doc-api/classes/Kwartz/EperlHandler.html +338 -0
 - data/doc-api/classes/Kwartz/EperlTranslator.html +167 -0
 - data/doc-api/classes/Kwartz/ErubisHandler.html +113 -0
 - data/doc-api/classes/Kwartz/ErubisTranslator.html +168 -0
 - data/doc-api/classes/Kwartz/ErubyHandler.html +337 -0
 - data/doc-api/classes/Kwartz/ErubyTranslator.html +167 -0
 - data/doc-api/classes/Kwartz/ExpandStatement.html +227 -0
 - data/doc-api/classes/Kwartz/Expression.html +119 -0
 - data/doc-api/classes/Kwartz/Handler.html +558 -0
 - data/doc-api/classes/Kwartz/JstlHandler.html +657 -0
 - data/doc-api/classes/Kwartz/JstlTranslator.html +226 -0
 - data/doc-api/classes/Kwartz/KwartzError.html +146 -0
 - data/doc-api/classes/Kwartz/Main.html +384 -0
 - data/doc-api/classes/Kwartz/NativeExpression.html +236 -0
 - data/doc-api/classes/Kwartz/NativeStatement.html +254 -0
 - data/doc-api/classes/Kwartz/Node.html +156 -0
 - data/doc-api/classes/Kwartz/ParseError.html +148 -0
 - data/doc-api/classes/Kwartz/PhpHandler.html +333 -0
 - data/doc-api/classes/Kwartz/PhpTranslator.html +194 -0
 - data/doc-api/classes/Kwartz/PresentationLogicParser.html +830 -0
 - data/doc-api/classes/Kwartz/PrintStatement.html +221 -0
 - data/doc-api/classes/Kwartz/RailsHandler.html +587 -0
 - data/doc-api/classes/Kwartz/RailsTranslator.html +167 -0
 - data/doc-api/classes/Kwartz/RubyStyleParser.html +558 -0
 - data/doc-api/classes/Kwartz/Ruleset.html +117 -0
 - data/doc-api/classes/Kwartz/Statement.html +119 -0
 - data/doc-api/classes/Kwartz/StrutsTranslator.html +190 -0
 - data/doc-api/classes/Kwartz/TagInfo.html +314 -0
 - data/doc-api/classes/Kwartz/TextConverter.html +270 -0
 - data/doc-api/classes/Kwartz/Translator.html +318 -0
 - data/doc-api/classes/Test.html +107 -0
 - data/doc-api/classes/Test/Unit.html +101 -0
 - data/doc-api/created.rid +1 -0
 - data/doc-api/files/__/README_txt.html +150 -0
 - data/doc-api/files/kwartz/assert_rb.html +114 -0
 - data/doc-api/files/kwartz/binding/eperl_rb.html +116 -0
 - data/doc-api/files/kwartz/binding/erubis_rb.html +116 -0
 - data/doc-api/files/kwartz/binding/eruby_rb.html +115 -0
 - data/doc-api/files/kwartz/binding/jstl_rb.html +116 -0
 - data/doc-api/files/kwartz/binding/php_rb.html +116 -0
 - data/doc-api/files/kwartz/binding/rails_rb.html +115 -0
 - data/doc-api/files/kwartz/binding/struts_rb.html +117 -0
 - data/doc-api/files/kwartz/config_rb.html +107 -0
 - data/doc-api/files/kwartz/converter_rb.html +119 -0
 - data/doc-api/files/kwartz/error_rb.html +107 -0
 - data/doc-api/files/kwartz/main_rb.html +124 -0
 - data/doc-api/files/kwartz/node_rb.html +114 -0
 - data/doc-api/files/kwartz/parser_rb.html +117 -0
 - data/doc-api/files/kwartz/translator_rb.html +115 -0
 - data/doc-api/files/kwartz/util/assert-text-equal_rb.html +115 -0
 - data/doc-api/files/kwartz/util/testcase-helper_rb.html +115 -0
 - data/doc-api/files/kwartz_rb.html +120 -0
 - data/doc-api/fr_class_index.html +75 -0
 - data/doc-api/fr_file_index.html +45 -0
 - data/doc-api/fr_method_index.html +216 -0
 - data/doc-api/index.html +24 -0
 - data/doc-api/rdoc-style.css +208 -0
 - data/doc/docstyle.css +188 -0
 - data/doc/p-pattern.html +1207 -0
 - data/doc/reference.html +3396 -0
 - data/doc/users-guide.html +1670 -0
 - data/examples/breadcrumbs1/Makefile +15 -0
 - data/examples/breadcrumbs1/breadcrumbs.eruby.plogic +27 -0
 - data/examples/breadcrumbs1/breadcrumbs.html +12 -0
 - data/examples/breadcrumbs1/breadcrumbs.jstl.plogic +28 -0
 - data/examples/breadcrumbs1/breadcrumbs.php.plogic +26 -0
 - data/examples/breadcrumbs1/main.php +12 -0
 - data/examples/breadcrumbs1/main.rb +12 -0
 - data/examples/breadcrumbs2/Makefile +15 -0
 - data/examples/breadcrumbs2/breadcrumbs.eruby.plogic +22 -0
 - data/examples/breadcrumbs2/breadcrumbs.html +14 -0
 - data/examples/breadcrumbs2/breadcrumbs.jstl.plogic +24 -0
 - data/examples/breadcrumbs2/breadcrumbs.php.plogic +23 -0
 - data/examples/breadcrumbs2/main.php +12 -0
 - data/examples/breadcrumbs2/main.rb +12 -0
 - data/examples/pagelayout/Makefile +47 -0
 - data/examples/pagelayout/content.eruby.plogic +44 -0
 - data/examples/pagelayout/content.jstl.plogic +36 -0
 - data/examples/pagelayout/content.php.plogic +37 -0
 - data/examples/pagelayout/content1.html +36 -0
 - data/examples/pagelayout/content2.html +29 -0
 - data/examples/pagelayout/design.css +40 -0
 - data/examples/pagelayout/layout.html +50 -0
 - data/examples/pagelayout/main.php +55 -0
 - data/examples/pagelayout/main.rb +77 -0
 - data/examples/pagelayout/menu.eruby.plogic +14 -0
 - data/examples/pagelayout/menu.html +13 -0
 - data/examples/pagelayout/menu.jstl.plogic +14 -0
 - data/examples/pagelayout/menu.php.plogic +14 -0
 - data/examples/rails1/Makefile +36 -0
 - data/examples/rails1/README +19 -0
 - data/examples/rails1/application_helper.rb +31 -0
 - data/examples/rails1/edit.html +28 -0
 - data/examples/rails1/edit.plogic +10 -0
 - data/examples/rails1/form.html +52 -0
 - data/examples/rails1/form.plogic +33 -0
 - data/examples/rails1/layout.plogic +15 -0
 - data/examples/rails1/link_to.plogic +19 -0
 - data/examples/rails1/list.html +48 -0
 - data/examples/rails1/list.plogic +28 -0
 - data/examples/rails1/new.html +27 -0
 - data/examples/rails1/new.plogic +10 -0
 - data/examples/rails1/reader.plogic +29 -0
 - data/examples/rails1/show.html +40 -0
 - data/examples/rails1/show.plogic +4 -0
 - data/examples/rails1/writer.plogic +8 -0
 - data/examples/table1/Makefile +15 -0
 - data/examples/table1/main.php +11 -0
 - data/examples/table1/main.rb +11 -0
 - data/examples/table1/table1.eruby.plogic +21 -0
 - data/examples/table1/table1.html +16 -0
 - data/examples/table1/table1.jstl.plogic +21 -0
 - data/examples/table1/table1.php.plogic +22 -0
 - data/kwartz.gemspec +55 -0
 - data/lib/kwartz.rb +13 -0
 - data/lib/kwartz/assert.rb +31 -0
 - data/lib/kwartz/binding/eperl.rb +166 -0
 - data/lib/kwartz/binding/erubis.rb +61 -0
 - data/lib/kwartz/binding/eruby.rb +164 -0
 - data/lib/kwartz/binding/jstl.rb +334 -0
 - data/lib/kwartz/binding/php.rb +167 -0
 - data/lib/kwartz/binding/rails.rb +295 -0
 - data/lib/kwartz/binding/struts.rb +109 -0
 - data/lib/kwartz/config.rb +28 -0
 - data/lib/kwartz/converter.rb +920 -0
 - data/lib/kwartz/error.rb +41 -0
 - data/lib/kwartz/main.rb +464 -0
 - data/lib/kwartz/node.rb +454 -0
 - data/lib/kwartz/parser.rb +903 -0
 - data/lib/kwartz/translator.rb +153 -0
 - data/lib/kwartz/util/assert-text-equal.rb +44 -0
 - data/lib/kwartz/util/testcase-helper.rb +112 -0
 - data/setup.rb +1331 -0
 - data/test/test-compile.rb +36 -0
 - data/test/test-compile.yaml +178 -0
 - data/test/test-converter.rb +34 -0
 - data/test/test-converter.yaml +127 -0
 - data/test/test-directives.rb +32 -0
 - data/test/test-directives.yaml +1411 -0
 - data/test/test-main.rb +464 -0
 - data/test/test-parser.rb +54 -0
 - data/test/test-parser.yaml +394 -0
 - data/test/test-rails.rb +28 -0
 - data/test/test-rails.yaml +301 -0
 - data/test/test-ruleset.rb +36 -0
 - data/test/test-ruleset.yaml +804 -0
 - data/test/test.rb +44 -0
 - metadata +236 -0
 
| 
         @@ -0,0 +1,1670 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
         
     | 
| 
      
 2 
     | 
    
         
            +
            <html>
         
     | 
| 
      
 3 
     | 
    
         
            +
            <head>
         
     | 
| 
      
 4 
     | 
    
         
            +
              <meta http-equiv="Content-Type" content="text/html">
         
     | 
| 
      
 5 
     | 
    
         
            +
              <title>Kwartz 3.0 Users' Guide</title>
         
     | 
| 
      
 6 
     | 
    
         
            +
              <meta name="author" content="Makoto Kuwata <kwa(at)kuwata-lab.com>">
         
     | 
| 
      
 7 
     | 
    
         
            +
              <meta name="generator" content="kwaser">
         
     | 
| 
      
 8 
     | 
    
         
            +
              <meta http-equiv="Content-Style-Type" content="text/css">
         
     | 
| 
      
 9 
     | 
    
         
            +
              <link rel="stylesheet" href="docstyle.css" type="text/css">
         
     | 
| 
      
 10 
     | 
    
         
            +
             </head>
         
     | 
| 
      
 11 
     | 
    
         
            +
             <body>
         
     | 
| 
      
 12 
     | 
    
         
            +
             
     | 
| 
      
 13 
     | 
    
         
            +
              <blockquote>
         
     | 
| 
      
 14 
     | 
    
         
            +
               <div class="mainbody">
         
     | 
| 
      
 15 
     | 
    
         
            +
             
     | 
| 
      
 16 
     | 
    
         
            +
                <div align="left"><h1>Kwartz 3.0 Users' Guide</h1></div>
         
     | 
| 
      
 17 
     | 
    
         
            +
                <div align="left">
         
     | 
| 
      
 18 
     | 
    
         
            +
                  Makoto Kuwata <kwa(at)kuwata-lab.com><br>
         
     | 
| 
      
 19 
     | 
    
         
            +
                  last update: $Date: 2006-05-22 22:25:43 +0900 (Mon, 22 May 2006) $<br>
         
     | 
| 
      
 20 
     | 
    
         
            +
                </div>
         
     | 
| 
      
 21 
     | 
    
         
            +
             
     | 
| 
      
 22 
     | 
    
         
            +
            <a name="preface"></a>
         
     | 
| 
      
 23 
     | 
    
         
            +
            <h2 class="section1">Preface</h2>
         
     | 
| 
      
 24 
     | 
    
         
            +
            <p>This is the users' guide of Kwartz<sup>(<a href="#fnref:1" name="fnlink:1">*1</a>)</sup>,
         
     | 
| 
      
 25 
     | 
    
         
            +
            a template system which realized the concept of 'Independence of Presentation Logic'.
         
     | 
| 
      
 26 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 27 
     | 
    
         
            +
            <div class="footnote">
         
     | 
| 
      
 28 
     | 
    
         
            +
             <dl compact>
         
     | 
| 
      
 29 
     | 
    
         
            +
              <dt>(<a name="fnref:1" href="#fnlink:1">*1</a>)</dt>
         
     | 
| 
      
 30 
     | 
    
         
            +
              <dd>Development of Kwartz had subsidized by Exploratory Software Project of <a href="http://www.ipa.go.jp/about/english/index.html">IPA (Information-Technology Promotion Agency Japan)</a>.</dd>
         
     | 
| 
      
 31 
     | 
    
         
            +
             </dl>
         
     | 
| 
      
 32 
     | 
    
         
            +
            </div>
         
     | 
| 
      
 33 
     | 
    
         
            +
            <a name="toc"></a>
         
     | 
| 
      
 34 
     | 
    
         
            +
            <h3 class="section2">Table of Contents</h3>
         
     | 
| 
      
 35 
     | 
    
         
            +
            <ul>
         
     | 
| 
      
 36 
     | 
    
         
            +
              <li><a href="#preface">Preface</a>
         
     | 
| 
      
 37 
     | 
    
         
            +
              <ul>
         
     | 
| 
      
 38 
     | 
    
         
            +
                <li><a href="#toc">Table of Contents</a>
         
     | 
| 
      
 39 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 40 
     | 
    
         
            +
              </ul>
         
     | 
| 
      
 41 
     | 
    
         
            +
              </li>
         
     | 
| 
      
 42 
     | 
    
         
            +
              <li><a href="#intro">Introduction to Kwartz</a>
         
     | 
| 
      
 43 
     | 
    
         
            +
              <ul>
         
     | 
| 
      
 44 
     | 
    
         
            +
                <li><a href="#whatis">What's Kwartz?</a>
         
     | 
| 
      
 45 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 46 
     | 
    
         
            +
                <li><a href="#features">Features Overview</a>
         
     | 
| 
      
 47 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 48 
     | 
    
         
            +
                <li><a href="#example1">Simple Example</a>
         
     | 
| 
      
 49 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 50 
     | 
    
         
            +
                <li><a href="#example2">Complex Example</a>
         
     | 
| 
      
 51 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 52 
     | 
    
         
            +
                <li><a href="#pattern">Other Examples of Presentation Logic</a>
         
     | 
| 
      
 53 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 54 
     | 
    
         
            +
              </ul>
         
     | 
| 
      
 55 
     | 
    
         
            +
              </li>
         
     | 
| 
      
 56 
     | 
    
         
            +
              <li><a href="#detail">Features Detail</a>
         
     | 
| 
      
 57 
     | 
    
         
            +
              <ul>
         
     | 
| 
      
 58 
     | 
    
         
            +
                <li><a href="#ruleset">RuleSet and Properties</a>
         
     | 
| 
      
 59 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 60 
     | 
    
         
            +
                <li><a href="#directives">Directives</a>
         
     | 
| 
      
 61 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 62 
     | 
    
         
            +
                <li><a href="#escape">Escape</a>
         
     | 
| 
      
 63 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 64 
     | 
    
         
            +
                <li><a href="#langs">Multi-language</a>
         
     | 
| 
      
 65 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 66 
     | 
    
         
            +
                <li><a href="#span">Span Tag Deletion</a>
         
     | 
| 
      
 67 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 68 
     | 
    
         
            +
                <li><a href="#import-plogic">Import Presentation Logic File</a>
         
     | 
| 
      
 69 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 70 
     | 
    
         
            +
                <li><a href="#import-elem">Import Elements in Other Files</a>
         
     | 
| 
      
 71 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 72 
     | 
    
         
            +
                <li><a href="#extract">Extract Element</a>
         
     | 
| 
      
 73 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 74 
     | 
    
         
            +
                <li><a href="#print-statement">Print Statement</a>
         
     | 
| 
      
 75 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 76 
     | 
    
         
            +
                <li><a href="#begin">Add Code at Beginning/End of Document</a>
         
     | 
| 
      
 77 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 78 
     | 
    
         
            +
              </ul>
         
     | 
| 
      
 79 
     | 
    
         
            +
              </li>
         
     | 
| 
      
 80 
     | 
    
         
            +
              <li><a href="#topics">Other Topics</a>
         
     | 
| 
      
 81 
     | 
    
         
            +
              <ul>
         
     | 
| 
      
 82 
     | 
    
         
            +
                <li><a href="#restriction1">Restrictions around presentation logic</a>
         
     | 
| 
      
 83 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 84 
     | 
    
         
            +
                <li><a href="#restriction2">Restrictions around presentation data</a>
         
     | 
| 
      
 85 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 86 
     | 
    
         
            +
                <li><a href="#makefile">Makefile and Rakefile</a>
         
     | 
| 
      
 87 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 88 
     | 
    
         
            +
                <li><a href="#kwartz-lib">Use Kwartz as Library</a>
         
     | 
| 
      
 89 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 90 
     | 
    
         
            +
                <li><a href="#start_link_to"><code>link_to()</code> method in Ruby on Rails</a>
         
     | 
| 
      
 91 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 92 
     | 
    
         
            +
              </ul>
         
     | 
| 
      
 93 
     | 
    
         
            +
              </li>
         
     | 
| 
      
 94 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 95 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 96 
     | 
    
         
            +
             
     | 
| 
      
 97 
     | 
    
         
            +
             
     | 
| 
      
 98 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 99 
     | 
    
         
            +
             
     | 
| 
      
 100 
     | 
    
         
            +
             
     | 
| 
      
 101 
     | 
    
         
            +
            <a name="intro"></a>
         
     | 
| 
      
 102 
     | 
    
         
            +
            <h2 class="section1">Introduction to Kwartz</h2>
         
     | 
| 
      
 103 
     | 
    
         
            +
            <a name="whatis"></a>
         
     | 
| 
      
 104 
     | 
    
         
            +
            <h3 class="section2">What's Kwartz?</h3>
         
     | 
| 
      
 105 
     | 
    
         
            +
            <p>Kwartz<sup>(<a href="#fnref:2" name="fnlink:2">*2</a>)</sup> is a template system
         
     | 
| 
      
 106 
     | 
    
         
            +
            which realized the concept of <b>'Independence of Presentation Logic'(IoPL)</b>.
         
     | 
| 
      
 107 
     | 
    
         
            +
            It means that Kwartz separates presentaion logics from both presentation data (typically HTML document) and business logics.
         
     | 
| 
      
 108 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 109 
     | 
    
         
            +
            <p>You know CSS (Cascading Style Sheet). CSS separates design from HTML file.
         
     | 
| 
      
 110 
     | 
    
         
            +
            In the same way, Kwartz separates presentation logics from HTML template.
         
     | 
| 
      
 111 
     | 
    
         
            +
            If you are familiar with CSS, you'll be also familiar with Kwartz.
         
     | 
| 
      
 112 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 113 
     | 
    
         
            +
            <p>The following figure show the relation of HTML, CSS, JavaScript, and Kwartz.
         
     | 
| 
      
 114 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 115 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 116 
     | 
    
         
            +
            <li>HTML represents document structure.
         
     | 
| 
      
 117 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 118 
     | 
    
         
            +
            <li>CSS represents document design.
         
     | 
| 
      
 119 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 120 
     | 
    
         
            +
            <li>JavaScript represents client-side logics.
         
     | 
| 
      
 121 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 122 
     | 
    
         
            +
            <li>Kwartz represents server-side presentation logics.<br>
         
     | 
| 
      
 123 
     | 
    
         
            +
               (Notice that Kwartz represents only presentation logics and not business logics.)
         
     | 
| 
      
 124 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 125 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 126 
     | 
    
         
            +
            <div style="text-align: center">
         
     | 
| 
      
 127 
     | 
    
         
            +
            <span>Figure1. Relation of HTML, CSS, JavaScript, and Kwartz.</span><br />
         
     | 
| 
      
 128 
     | 
    
         
            +
            <img src="img/fig04.png" alt="relation of HTML, CSS, JavaScript, and Kwartz" />
         
     | 
| 
      
 129 
     | 
    
         
            +
            </div>
         
     | 
| 
      
 130 
     | 
    
         
            +
            <p>Kwartz-ruby is an implemenation of Kwartz in Ruby.
         
     | 
| 
      
 131 
     | 
    
         
            +
            There is a plan to implement Kwartz in PHP or Java.
         
     | 
| 
      
 132 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 133 
     | 
    
         
            +
            <p>In the following, the word 'Kwartz' means the specification of the template system
         
     | 
| 
      
 134 
     | 
    
         
            +
            and the word 'Kwartz-ruby' means the implementation of it in Ruby language.
         
     | 
| 
      
 135 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 136 
     | 
    
         
            +
            <div class="footnote">
         
     | 
| 
      
 137 
     | 
    
         
            +
             <dl compact>
         
     | 
| 
      
 138 
     | 
    
         
            +
              <dt>(<a name="fnref:2" href="#fnlink:2">*2</a>)</dt>
         
     | 
| 
      
 139 
     | 
    
         
            +
              <dd>'Kwartz' is pronounced like 'Quartz'.</dd>
         
     | 
| 
      
 140 
     | 
    
         
            +
             </dl>
         
     | 
| 
      
 141 
     | 
    
         
            +
            </div>
         
     | 
| 
      
 142 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 143 
     | 
    
         
            +
             
     | 
| 
      
 144 
     | 
    
         
            +
             
     | 
| 
      
 145 
     | 
    
         
            +
            <a name="features"></a>
         
     | 
| 
      
 146 
     | 
    
         
            +
            <h3 class="section2">Features Overview</h3>
         
     | 
| 
      
 147 
     | 
    
         
            +
            <p>Kwartz has the following features:
         
     | 
| 
      
 148 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 149 
     | 
    
         
            +
            <dl class="dl2">
         
     | 
| 
      
 150 
     | 
    
         
            +
            <dt class="dt2">
         
     | 
| 
      
 151 
     | 
    
         
            +
            Separates presentation logic from presentation data.</dt>
         
     | 
| 
      
 152 
     | 
    
         
            +
            <dd class="dd2">
         
     | 
| 
      
 153 
     | 
    
         
            +
            <p>	Using template systems such as Smarty, Velocity, XMLC, amrita, etc,
         
     | 
| 
      
 154 
     | 
    
         
            +
            	you can separate HTML design from business logic as a template.
         
     | 
| 
      
 155 
     | 
    
         
            +
            	With Kwartz, you can separate presentation logic from a template.
         
     | 
| 
      
 156 
     | 
    
         
            +
            	In other words, Kwartz divides a template into 'presentation data' and 'presentation logic'.
         
     | 
| 
      
 157 
     | 
    
         
            +
            	You need not mix presentation logic into HTML files nor main program.
         
     | 
| 
      
 158 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 159 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 160 
     | 
    
         
            +
            <dt class="dt2">
         
     | 
| 
      
 161 
     | 
    
         
            +
            Very fast</dt>
         
     | 
| 
      
 162 
     | 
    
         
            +
            <dd class="dd2">
         
     | 
| 
      
 163 
     | 
    
         
            +
            <p>	Kwartz creates a script from a template (= presentation data and presentaion logic). 
         
     | 
| 
      
 164 
     | 
    
         
            +
            	All you have to do in main program is to call the output script.
         
     | 
| 
      
 165 
     | 
    
         
            +
            	Because Kwartz doesn't use DOM trees or the like, it is both fast and light-weight.
         
     | 
| 
      
 166 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 167 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 168 
     | 
    
         
            +
            <dt class="dt2">
         
     | 
| 
      
 169 
     | 
    
         
            +
            Multi-languages support</dt>
         
     | 
| 
      
 170 
     | 
    
         
            +
            <dd class="dd2">
         
     | 
| 
      
 171 
     | 
    
         
            +
            <p>	Kwartz can create output scripts for Ruby(eRuby), PHP, JSP(JSTL 1.2 & 1.1).
         
     | 
| 
      
 172 
     | 
    
         
            +
            	Presentation logics are written in each language<sup>(<a href="#fnref:3" name="fnlink:3">*3</a>)</sup>.
         
     | 
| 
      
 173 
     | 
    
         
            +
            	This approach gives you the power of the target language fully.
         
     | 
| 
      
 174 
     | 
    
         
            +
            	For example, you can write Ruby on Rails helper method (such as <code>link_to</code>, <code>field_tag</code>, and so on) directly in your template file.
         
     | 
| 
      
 175 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 176 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 177 
     | 
    
         
            +
            <dt class="dt2">
         
     | 
| 
      
 178 
     | 
    
         
            +
            Doesn't break HTML design at all</dt>
         
     | 
| 
      
 179 
     | 
    
         
            +
            <dd class="dd2">
         
     | 
| 
      
 180 
     | 
    
         
            +
            <p>	You must use directives like 
         
     | 
| 
      
 181 
     | 
    
         
            +
            	<code>{foreach ...}{/foreach}</code> in <a href="http://smarty.php.net/">Smarty</a> or
         
     | 
| 
      
 182 
     | 
    
         
            +
            	<code>#foreach(...)</code> in <a href="http://jakarta.apache.org/velocity/">Jakarta Velocity</a>.
         
     | 
| 
      
 183 
     | 
    
         
            +
            	These directives break the HTML design of template.
         
     | 
| 
      
 184 
     | 
    
         
            +
            	Kwartz doesn't break HTML design because Kwartz uses id or title attributes for marking in an HTML template.
         
     | 
| 
      
 185 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 186 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 187 
     | 
    
         
            +
            <dt class="dt2">
         
     | 
| 
      
 188 
     | 
    
         
            +
            Able to handle any text file</dt>
         
     | 
| 
      
 189 
     | 
    
         
            +
            <dd class="dd2">
         
     | 
| 
      
 190 
     | 
    
         
            +
            <p>	Kwartz uses an original template parser; not using an HTML or XML parser,
         
     | 
| 
      
 191 
     | 
    
         
            +
            	it is able to handle any type of text file (HTML, PostScript, CSV, and so on).
         
     | 
| 
      
 192 
     | 
    
         
            +
            	This also means that Kwartz can handle non-well-formed XML files, as well as well-formed XML files.
         
     | 
| 
      
 193 
     | 
    
         
            +
            	This is an advantage of Kwartz against <a href="http://xmlc.objectweb.org/">Enhydra XMLC</a> or
         
     | 
| 
      
 194 
     | 
    
         
            +
            	<a href="http://amrita.sourceforge.jp/">amrita</a>, which handle only XML/HTML files.
         
     | 
| 
      
 195 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 196 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 197 
     | 
    
         
            +
            <dt class="dt2">
         
     | 
| 
      
 198 
     | 
    
         
            +
            Auto-escape and Partial-escape</dt>
         
     | 
| 
      
 199 
     | 
    
         
            +
            <dd class="dd2">
         
     | 
| 
      
 200 
     | 
    
         
            +
            <p>	Kwartz can do sanitizing automatically.
         
     | 
| 
      
 201 
     | 
    
         
            +
            	You don't need to write '<code>CGI.escapeHTML(var)</code>' or '<code>htmlspecialchars($var)</code>'.
         
     | 
| 
      
 202 
     | 
    
         
            +
            	You are free to turn sanitizing on/off, as well specifying which parts of the template to sanitize.
         
     | 
| 
      
 203 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 204 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 205 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 206 
     | 
    
         
            +
            <div class="footnote">
         
     | 
| 
      
 207 
     | 
    
         
            +
             <dl compact>
         
     | 
| 
      
 208 
     | 
    
         
            +
              <dt>(<a name="fnref:3" href="#fnlink:3">*3</a>)</dt>
         
     | 
| 
      
 209 
     | 
    
         
            +
              <dd>Previous version of Kwartz adopt original language and convert it to each target language(Ruby, PHP, JSTL, and so on). From Current version, it is required to write presentation logic in target language.</dd>
         
     | 
| 
      
 210 
     | 
    
         
            +
             </dl>
         
     | 
| 
      
 211 
     | 
    
         
            +
            </div>
         
     | 
| 
      
 212 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 213 
     | 
    
         
            +
             
     | 
| 
      
 214 
     | 
    
         
            +
             
     | 
| 
      
 215 
     | 
    
         
            +
            <a name="example1"></a>
         
     | 
| 
      
 216 
     | 
    
         
            +
            <h3 class="section2">Simple Example</h3>
         
     | 
| 
      
 217 
     | 
    
         
            +
            <p>In Kwartz, a template is defined as both presentation data and presentation logic.
         
     | 
| 
      
 218 
     | 
    
         
            +
            They may be described in separate files.
         
     | 
| 
      
 219 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 220 
     | 
    
         
            +
            <p>This is an example of a presentation data file.
         
     | 
| 
      
 221 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 222 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 223 
     | 
    
         
            +
            <li>'<b><code>id="list1"</code></b>' means "I'll operate this element in presentation logic" (called 'marking' in Kwartz).
         
     | 
| 
      
 224 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 225 
     | 
    
         
            +
            <li>'<b><code>id="mark:item1"</code></b>' is also an marking.
         
     | 
| 
      
 226 
     | 
    
         
            +
               Difference between <code>id="mark:item1"</code> and <code>id="item1"</code> is that id attribute in the former format is removed automatically and the latter format is leaved.
         
     | 
| 
      
 227 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 228 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 229 
     | 
    
         
            +
            <p>Presentation data file(example1.html):
         
     | 
| 
      
 230 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 231 
     | 
    
         
            +
            <a name="example1.html"></a>
         
     | 
| 
      
 232 
     | 
    
         
            +
            <pre class="program"><table>
         
     | 
| 
      
 233 
     | 
    
         
            +
              <tr <b>id="list1"</b>>
         
     | 
| 
      
 234 
     | 
    
         
            +
                <td <b>id="mark:item1"</b>>foo</td>
         
     | 
| 
      
 235 
     | 
    
         
            +
              </tr>
         
     | 
| 
      
 236 
     | 
    
         
            +
            </table>
         
     | 
| 
      
 237 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 238 
     | 
    
         
            +
            <p>And the following is an example of presentation logic.
         
     | 
| 
      
 239 
     | 
    
         
            +
            In presentation logic, you can operate on elements which are marked in presentation data.
         
     | 
| 
      
 240 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 241 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 242 
     | 
    
         
            +
            <li>'<b><code>#list1 { ... }</code></b>' represents an element marked with name 'list1' (= '<tr>...</tr>')
         
     | 
| 
      
 243 
     | 
    
         
            +
                <ul type="circle">
         
     | 
| 
      
 244 
     | 
    
         
            +
                <li>'<b><code>logic: { ... }</code></b>' represents presentation logic of the element.
         
     | 
| 
      
 245 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 246 
     | 
    
         
            +
                <li>'<b><code>_stag</code></b>' represents a start tag (= '<tr>').
         
     | 
| 
      
 247 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 248 
     | 
    
         
            +
                <li>'<b><code>_cont</code></b>' represents content(= '<td id="mark:item1">foo</td>').
         
     | 
| 
      
 249 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 250 
     | 
    
         
            +
                <li>'<b><code>_etag</code></b>' represents an end tag(= '</tr>').
         
     | 
| 
      
 251 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 252 
     | 
    
         
            +
                <li>'<b><code>for <i>var</i> in <i>list</i> ...</code></b>' is a Ruby code to loop.
         
     | 
| 
      
 253 
     | 
    
         
            +
                   In this case, the element(= start-tag + content + end-tag) is looped.
         
     | 
| 
      
 254 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 255 
     | 
    
         
            +
                </ul>
         
     | 
| 
      
 256 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 257 
     | 
    
         
            +
            <li>'<b><code>#item1 { ... }</code></b>' represents an element marked with name 'item1' (= '<td>...</td>').
         
     | 
| 
      
 258 
     | 
    
         
            +
                <ul type="circle">
         
     | 
| 
      
 259 
     | 
    
         
            +
                <li>'<b><code>value: <i>expression</i>;</code></b>' represents that the content of the element is replaced by value of <code><i>expression</i></code>, which is value of a variable <code>member</code> in this case.
         
     | 
| 
      
 260 
     | 
    
         
            +
                </li>
         
     | 
| 
      
 261 
     | 
    
         
            +
                </ul>
         
     | 
| 
      
 262 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 263 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 264 
     | 
    
         
            +
            <a name="example1.plogic"></a>
         
     | 
| 
      
 265 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 266 
     | 
    
         
            +
            Presentation logic file(example1.plogic):</div>
         
     | 
| 
      
 267 
     | 
    
         
            +
            <pre class="program">/* The element which is marked by 'id="list1"' */
         
     | 
| 
      
 268 
     | 
    
         
            +
            <b>#list1</b> {
         
     | 
| 
      
 269 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 270 
     | 
    
         
            +
                for member in @members
         
     | 
| 
      
 271 
     | 
    
         
            +
                  <b>_stag</b>           # start tag
         
     | 
| 
      
 272 
     | 
    
         
            +
                  <b>_cont</b>           # content
         
     | 
| 
      
 273 
     | 
    
         
            +
                  <b>_etag</b>           # end tag
         
     | 
| 
      
 274 
     | 
    
         
            +
                end
         
     | 
| 
      
 275 
     | 
    
         
            +
              }
         
     | 
| 
      
 276 
     | 
    
         
            +
            }
         
     | 
| 
      
 277 
     | 
    
         
            +
             
     | 
| 
      
 278 
     | 
    
         
            +
            /* The element which is marked by 'id="mark:item1"' */
         
     | 
| 
      
 279 
     | 
    
         
            +
            <b>#item1</b> {
         
     | 
| 
      
 280 
     | 
    
         
            +
              /* replace the content with value of a variable 'member' */
         
     | 
| 
      
 281 
     | 
    
         
            +
              value: member;
         
     | 
| 
      
 282 
     | 
    
         
            +
            }
         
     | 
| 
      
 283 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 284 
     | 
    
         
            +
            <p>(Don't forget the semicolon at the end of line especially for Ruby user!)
         
     | 
| 
      
 285 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 286 
     | 
    
         
            +
            <p>Kwartz generates eRuby script from the above files. This action is called 'compiling'.
         
     | 
| 
      
 287 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 288 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 289 
     | 
    
         
            +
            how to compile eRuby script</div>
         
     | 
| 
      
 290 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -p example1.plogic example1.html > example1.rhtml
         
     | 
| 
      
 291 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 292 
     | 
    
         
            +
            <p>The following is the compiled eRuby script.
         
     | 
| 
      
 293 
     | 
    
         
            +
            Notice that <code>id="mark:item1"</code> is removed automatically while <code>id="list1"</code> is leaved.
         
     | 
| 
      
 294 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 295 
     | 
    
         
            +
            <a name="example1.expected"></a>
         
     | 
| 
      
 296 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 297 
     | 
    
         
            +
            generated eRuby script</div>
         
     | 
| 
      
 298 
     | 
    
         
            +
            <pre class="program"><table>
         
     | 
| 
      
 299 
     | 
    
         
            +
            <%     for member in @members %>
         
     | 
| 
      
 300 
     | 
    
         
            +
              <tr id="list1">
         
     | 
| 
      
 301 
     | 
    
         
            +
                <td><%= member %></td>
         
     | 
| 
      
 302 
     | 
    
         
            +
              </tr>
         
     | 
| 
      
 303 
     | 
    
         
            +
            <%     end %>
         
     | 
| 
      
 304 
     | 
    
         
            +
            </table>
         
     | 
| 
      
 305 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 306 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 307 
     | 
    
         
            +
             
     | 
| 
      
 308 
     | 
    
         
            +
             
     | 
| 
      
 309 
     | 
    
         
            +
            <a name="example2"></a>
         
     | 
| 
      
 310 
     | 
    
         
            +
            <h3 class="section2">Complex Example</h3>
         
     | 
| 
      
 311 
     | 
    
         
            +
            <p>Next is bordered table example which is a little complex than previous.
         
     | 
| 
      
 312 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 313 
     | 
    
         
            +
            <a name="example2.html"></a>
         
     | 
| 
      
 314 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 315 
     | 
    
         
            +
            Presentation Data (example2.html):</div>
         
     | 
| 
      
 316 
     | 
    
         
            +
            <pre class="program"><table>
         
     | 
| 
      
 317 
     | 
    
         
            +
             <tr bgcolor="#CCCCFF" <b>id="mark:list"</b>>
         
     | 
| 
      
 318 
     | 
    
         
            +
              <td <b>id="mark:name"</b>>foo</td>
         
     | 
| 
      
 319 
     | 
    
         
            +
              <td>
         
     | 
| 
      
 320 
     | 
    
         
            +
               <a href="mailto:foo@mail.com" <b>id="mark:email"</b>>foo@mail.com</a>
         
     | 
| 
      
 321 
     | 
    
         
            +
              </td>
         
     | 
| 
      
 322 
     | 
    
         
            +
             </tr>
         
     | 
| 
      
 323 
     | 
    
         
            +
            </table>
         
     | 
| 
      
 324 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 325 
     | 
    
         
            +
            <p>The following is the presentation logic file.
         
     | 
| 
      
 326 
     | 
    
         
            +
            In the presentation logic, you should detect whether odd or even line in the iteration.
         
     | 
| 
      
 327 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 328 
     | 
    
         
            +
            <p>Presentation Logic (example2.plogic):
         
     | 
| 
      
 329 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 330 
     | 
    
         
            +
            <a name="example2.plogic"></a>
         
     | 
| 
      
 331 
     | 
    
         
            +
            <pre class="program">/*
         
     | 
| 
      
 332 
     | 
    
         
            +
             * an element which is marked by 'id="mark:list"'
         
     | 
| 
      
 333 
     | 
    
         
            +
             *  - print value of a variable 'color' as bgcolor attribute value.
         
     | 
| 
      
 334 
     | 
    
         
            +
             */
         
     | 
| 
      
 335 
     | 
    
         
            +
            <b>#list</b> {
         
     | 
| 
      
 336 
     | 
    
         
            +
              attrs:  "bgcolor" color;
         
     | 
| 
      
 337 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 338 
     | 
    
         
            +
                @members.each_with_index do |member, i|
         
     | 
| 
      
 339 
     | 
    
         
            +
                  color = i % 2 == 0 ? '#FFCCCC' : '#CCCCFF';
         
     | 
| 
      
 340 
     | 
    
         
            +
                  _stag    # start tag
         
     | 
| 
      
 341 
     | 
    
         
            +
                  _cont    # content
         
     | 
| 
      
 342 
     | 
    
         
            +
                  _etag    # end tag
         
     | 
| 
      
 343 
     | 
    
         
            +
                end
         
     | 
| 
      
 344 
     | 
    
         
            +
              }
         
     | 
| 
      
 345 
     | 
    
         
            +
            }
         
     | 
| 
      
 346 
     | 
    
         
            +
             
     | 
| 
      
 347 
     | 
    
         
            +
            /*
         
     | 
| 
      
 348 
     | 
    
         
            +
             * an element which is marked by 'id="mark:name"':
         
     | 
| 
      
 349 
     | 
    
         
            +
             *  - print value of member[:name] as content of the element.
         
     | 
| 
      
 350 
     | 
    
         
            +
             */
         
     | 
| 
      
 351 
     | 
    
         
            +
            <b>#name</b> {
         
     | 
| 
      
 352 
     | 
    
         
            +
              value: member[:name];
         
     | 
| 
      
 353 
     | 
    
         
            +
            }
         
     | 
| 
      
 354 
     | 
    
         
            +
             
     | 
| 
      
 355 
     | 
    
         
            +
            /*
         
     | 
| 
      
 356 
     | 
    
         
            +
             * an element marked by 'id="mark:email"':
         
     | 
| 
      
 357 
     | 
    
         
            +
             *  - print value of member[:email] as contentn of the element. 
         
     | 
| 
      
 358 
     | 
    
         
            +
             *  - print "mailto:" and member[:email] as href attribute value.
         
     | 
| 
      
 359 
     | 
    
         
            +
             */
         
     | 
| 
      
 360 
     | 
    
         
            +
            <b>#email</b> {
         
     | 
| 
      
 361 
     | 
    
         
            +
              value: member[:email];
         
     | 
| 
      
 362 
     | 
    
         
            +
              attrs: "href" "mailto:#{member[:email]}";
         
     | 
| 
      
 363 
     | 
    
         
            +
            }
         
     | 
| 
      
 364 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 365 
     | 
    
         
            +
            <p>(Don't forget the semicolon at the end of line especially for Ruby user!)
         
     | 
| 
      
 366 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 367 
     | 
    
         
            +
            <p>You will find that there is no HTML tag in the presentation logic and no logic in the presentation data.
         
     | 
| 
      
 368 
     | 
    
         
            +
            That is to say, Kwartz can separate presentation logic from presentation data.
         
     | 
| 
      
 369 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 370 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 371 
     | 
    
         
            +
            compilation</div>
         
     | 
| 
      
 372 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -p example2.plogic example2.html > example2.rhtml
         
     | 
| 
      
 373 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 374 
     | 
    
         
            +
            <a name="example2.expected"></a>
         
     | 
| 
      
 375 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 376 
     | 
    
         
            +
            output script</div>
         
     | 
| 
      
 377 
     | 
    
         
            +
            <pre class="program"><table>
         
     | 
| 
      
 378 
     | 
    
         
            +
            <b><%     @members.each_with_index do |member, i| %></b>
         
     | 
| 
      
 379 
     | 
    
         
            +
            <b><%       color = i % 2 == 0 ? '#FFCCCC' : '#CCCCFF'; %></b>
         
     | 
| 
      
 380 
     | 
    
         
            +
             <tr bgcolor="<b><%= color %></b>">
         
     | 
| 
      
 381 
     | 
    
         
            +
              <td><b><%= member[:name] %></b></td>
         
     | 
| 
      
 382 
     | 
    
         
            +
              <td>
         
     | 
| 
      
 383 
     | 
    
         
            +
               <a href="<b><%= "mailto:#{member[:email]}" %></b>"><b><%= member[:email] %></b></a>
         
     | 
| 
      
 384 
     | 
    
         
            +
              </td>
         
     | 
| 
      
 385 
     | 
    
         
            +
             </tr>
         
     | 
| 
      
 386 
     | 
    
         
            +
            <b><%     end %></b>
         
     | 
| 
      
 387 
     | 
    
         
            +
            </table>
         
     | 
| 
      
 388 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 389 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 390 
     | 
    
         
            +
             
     | 
| 
      
 391 
     | 
    
         
            +
             
     | 
| 
      
 392 
     | 
    
         
            +
            <a name="pattern"></a>
         
     | 
| 
      
 393 
     | 
    
         
            +
            <h3 class="section2">Other Examples of Presentation Logic</h3>
         
     | 
| 
      
 394 
     | 
    
         
            +
            <p>Kwartz enables you to write complex presentation logic natulally.
         
     | 
| 
      
 395 
     | 
    
         
            +
            This section shows some examples.
         
     | 
| 
      
 396 
     | 
    
         
            +
            See <a href="p-pattern.html">Presentation Pattern Catalog</a> for details.
         
     | 
| 
      
 397 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 398 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 399 
     | 
    
         
            +
            <li>Iterate an element.
         
     | 
| 
      
 400 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 401 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 402 
     | 
    
         
            +
                for member in @members
         
     | 
| 
      
 403 
     | 
    
         
            +
                  _stag
         
     | 
| 
      
 404 
     | 
    
         
            +
                  _cont
         
     | 
| 
      
 405 
     | 
    
         
            +
                  _etag
         
     | 
| 
      
 406 
     | 
    
         
            +
                end
         
     | 
| 
      
 407 
     | 
    
         
            +
              }
         
     | 
| 
      
 408 
     | 
    
         
            +
            }
         
     | 
| 
      
 409 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 410 
     | 
    
         
            +
               Or
         
     | 
| 
      
 411 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 412 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 413 
     | 
    
         
            +
                for member in @members
         
     | 
| 
      
 414 
     | 
    
         
            +
                  _elem     # equivarent to _stag + _cont + _etag
         
     | 
| 
      
 415 
     | 
    
         
            +
                end
         
     | 
| 
      
 416 
     | 
    
         
            +
              }
         
     | 
| 
      
 417 
     | 
    
         
            +
            }
         
     | 
| 
      
 418 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 419 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 420 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 421 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 422 
     | 
    
         
            +
            <li>Iterate only contents. This is useful for <dl></dl>.
         
     | 
| 
      
 423 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 424 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 425 
     | 
    
         
            +
                _stag
         
     | 
| 
      
 426 
     | 
    
         
            +
                for member in @members
         
     | 
| 
      
 427 
     | 
    
         
            +
                  _cont
         
     | 
| 
      
 428 
     | 
    
         
            +
                end
         
     | 
| 
      
 429 
     | 
    
         
            +
                _etag
         
     | 
| 
      
 430 
     | 
    
         
            +
              }
         
     | 
| 
      
 431 
     | 
    
         
            +
            }
         
     | 
| 
      
 432 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 433 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 434 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 435 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 436 
     | 
    
         
            +
            <li>Replace content of element by expression value.
         
     | 
| 
      
 437 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 438 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 439 
     | 
    
         
            +
                _stag
         
     | 
| 
      
 440 
     | 
    
         
            +
                print expr
         
     | 
| 
      
 441 
     | 
    
         
            +
                _etag
         
     | 
| 
      
 442 
     | 
    
         
            +
              }
         
     | 
| 
      
 443 
     | 
    
         
            +
            }
         
     | 
| 
      
 444 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 445 
     | 
    
         
            +
               Or
         
     | 
| 
      
 446 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 447 
     | 
    
         
            +
              value: expr;
         
     | 
| 
      
 448 
     | 
    
         
            +
            }
         
     | 
| 
      
 449 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 450 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 451 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 452 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 453 
     | 
    
         
            +
            <li>Replace element by exression value
         
     | 
| 
      
 454 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 455 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 456 
     | 
    
         
            +
                print expr
         
     | 
| 
      
 457 
     | 
    
         
            +
              }
         
     | 
| 
      
 458 
     | 
    
         
            +
            }
         
     | 
| 
      
 459 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 460 
     | 
    
         
            +
                Or
         
     | 
| 
      
 461 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 462 
     | 
    
         
            +
              elem:  expr;
         
     | 
| 
      
 463 
     | 
    
         
            +
            }
         
     | 
| 
      
 464 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 465 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 466 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 467 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 468 
     | 
    
         
            +
            <li>Delete start-tag and end-tag, and leaves content only.
         
     | 
| 
      
 469 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 470 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 471 
     | 
    
         
            +
                _cont
         
     | 
| 
      
 472 
     | 
    
         
            +
              }
         
     | 
| 
      
 473 
     | 
    
         
            +
            }
         
     | 
| 
      
 474 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 475 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 476 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 477 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 478 
     | 
    
         
            +
            <li>Delete elemnt. This is useful for delete dummy data.
         
     | 
| 
      
 479 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 480 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 481 
     | 
    
         
            +
              }
         
     | 
| 
      
 482 
     | 
    
         
            +
            }
         
     | 
| 
      
 483 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 484 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 485 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 486 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 487 
     | 
    
         
            +
            <li>Replace element with other element.
         
     | 
| 
      
 488 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 489 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 490 
     | 
    
         
            +
                _element(foo)  # expand other element marked with name 'foo'
         
     | 
| 
      
 491 
     | 
    
         
            +
              }
         
     | 
| 
      
 492 
     | 
    
         
            +
            }
         
     | 
| 
      
 493 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 494 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 495 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 496 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 497 
     | 
    
         
            +
            <li>Replace element with other element's content.
         
     | 
| 
      
 498 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 499 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 500 
     | 
    
         
            +
                _content(foo)  # expand content of other element
         
     | 
| 
      
 501 
     | 
    
         
            +
              }
         
     | 
| 
      
 502 
     | 
    
         
            +
            }
         
     | 
| 
      
 503 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 504 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 505 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 506 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 507 
     | 
    
         
            +
            <li>Include complex presentation logics.
         
     | 
| 
      
 508 
     | 
    
         
            +
            <pre class="program">#list {
         
     | 
| 
      
 509 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 510 
     | 
    
         
            +
                i = 0
         
     | 
| 
      
 511 
     | 
    
         
            +
                for member in @members
         
     | 
| 
      
 512 
     | 
    
         
            +
                  i += 1
         
     | 
| 
      
 513 
     | 
    
         
            +
                  if i % 2 == 0
         
     | 
| 
      
 514 
     | 
    
         
            +
                    color = '#FFCCCC'
         
     | 
| 
      
 515 
     | 
    
         
            +
                  else
         
     | 
| 
      
 516 
     | 
    
         
            +
                    color = '#CCCCFF'
         
     | 
| 
      
 517 
     | 
    
         
            +
                  end
         
     | 
| 
      
 518 
     | 
    
         
            +
                  _elem    # '_elem' is equivarent to _stag + _cont + _etag
         
     | 
| 
      
 519 
     | 
    
         
            +
                end
         
     | 
| 
      
 520 
     | 
    
         
            +
              }
         
     | 
| 
      
 521 
     | 
    
         
            +
            }
         
     | 
| 
      
 522 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 523 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 524 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 525 
     | 
    
         
            +
            <p>It is very important that tag/attribute names don't appear in presentation logic at all.
         
     | 
| 
      
 526 
     | 
    
         
            +
            This way, you don't need to change presentation logic files even if the tag/attribute names are changed in the presentation data.
         
     | 
| 
      
 527 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 528 
     | 
    
         
            +
            <p>Kwartz separates presentation logic from presentation data and main program.
         
     | 
| 
      
 529 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 530 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 531 
     | 
    
         
            +
             
     | 
| 
      
 532 
     | 
    
         
            +
             
     | 
| 
      
 533 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 534 
     | 
    
         
            +
             
     | 
| 
      
 535 
     | 
    
         
            +
             
     | 
| 
      
 536 
     | 
    
         
            +
            <a name="detail"></a>
         
     | 
| 
      
 537 
     | 
    
         
            +
            <h2 class="section1">Features Detail</h2>
         
     | 
| 
      
 538 
     | 
    
         
            +
            <a name="ruleset"></a>
         
     | 
| 
      
 539 
     | 
    
         
            +
            <h3 class="section2">RuleSet and Properties</h3>
         
     | 
| 
      
 540 
     | 
    
         
            +
            <p>Format of presentation logic in Kwartz is similar to CSS (Cascading Style Sheet).
         
     | 
| 
      
 541 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 542 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 543 
     | 
    
         
            +
            <li>Presentation logic file is a set of Ruleset.
         
     | 
| 
      
 544 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 545 
     | 
    
         
            +
            <li>Ruleset is a pair of selector and declarations.
         
     | 
| 
      
 546 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 547 
     | 
    
         
            +
            <li>Declaration is a pair of property name and value.
         
     | 
| 
      
 548 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 549 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 550 
     | 
    
         
            +
            <p>The following rules are available in presesntation logic file.
         
     | 
| 
      
 551 
     | 
    
         
            +
            These are similar to CSS. If you are familiar with CSS, you'll be so with Kwartz.
         
     | 
| 
      
 552 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 553 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 554 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 555 
     | 
    
         
            +
            stag: <i>expr</i>; </b></dt>
         
     | 
| 
      
 556 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 557 
     | 
    
         
            +
            	Replace start-tag by expression value.
         
     | 
| 
      
 558 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 559 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 560 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 561 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 562 
     | 
    
         
            +
            etag: <i>expr</i>; </b></dt>
         
     | 
| 
      
 563 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 564 
     | 
    
         
            +
            	Replace end-tag by expression value.
         
     | 
| 
      
 565 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 566 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 567 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 568 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 569 
     | 
    
         
            +
            elem: <i>expr</i>; </b></dt>
         
     | 
| 
      
 570 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 571 
     | 
    
         
            +
            	Replace elemnt by expression value.
         
     | 
| 
      
 572 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 573 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 574 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 575 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 576 
     | 
    
         
            +
            cont: <i>expr</i>; </b></dt>
         
     | 
| 
      
 577 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 578 
     | 
    
         
            +
            	Replace content of element by expressin value.
         
     | 
| 
      
 579 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 580 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 581 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 582 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 583 
     | 
    
         
            +
            value: <i>expr</i>; </b></dt>
         
     | 
| 
      
 584 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 585 
     | 
    
         
            +
            	Equivarent to <code>cont: <i>expr</i></code>.
         
     | 
| 
      
 586 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 587 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 588 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 589 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 590 
     | 
    
         
            +
            attrs: 'attrname' <i>expr</i>; </b></dt>
         
     | 
| 
      
 591 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 592 
     | 
    
         
            +
            	Replace attribute value by expression.
         
     | 
| 
      
 593 
     | 
    
         
            +
            	The following is an example to specify some attributes.
         
     | 
| 
      
 594 
     | 
    
         
            +
            <pre class="program">#foo {
         
     | 
| 
      
 595 
     | 
    
         
            +
              attrs:  'href'  item[:url],
         
     | 
| 
      
 596 
     | 
    
         
            +
            	  'id'    item[:id],
         
     | 
| 
      
 597 
     | 
    
         
            +
                      'class' classname;
         
     | 
| 
      
 598 
     | 
    
         
            +
            }
         
     | 
| 
      
 599 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 600 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 601 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 602 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 603 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 604 
     | 
    
         
            +
            append: <i>expr</i>; </b></dt>
         
     | 
| 
      
 605 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 606 
     | 
    
         
            +
            	Append expression value to tail of tag.
         
     | 
| 
      
 607 
     | 
    
         
            +
            	This is used especially to add 'checked="checked"', 'selected="selected"'
         
     | 
| 
      
 608 
     | 
    
         
            +
            	into the form control tag.
         
     | 
| 
      
 609 
     | 
    
         
            +
            <pre class="program">#checkbox1 {
         
     | 
| 
      
 610 
     | 
    
         
            +
              append:  member[:age] > 18 ? ' checked="checked"' : '';
         
     | 
| 
      
 611 
     | 
    
         
            +
            }
         
     | 
| 
      
 612 
     | 
    
         
            +
            #select_options {
         
     | 
| 
      
 613 
     | 
    
         
            +
              append:  option[:value] == current_val ? ' selected="selected"' : '';
         
     | 
| 
      
 614 
     | 
    
         
            +
            }
         
     | 
| 
      
 615 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 616 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 617 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 618 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 619 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 620 
     | 
    
         
            +
            remove:  'attr1', 'attr2', 'attr3'; </b></dt>
         
     | 
| 
      
 621 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 622 
     | 
    
         
            +
            	Remove the attributes from the element.
         
     | 
| 
      
 623 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 624 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 625 
     | 
    
         
            +
            <dl class="dl3">
         
     | 
| 
      
 626 
     | 
    
         
            +
            <dt class="dt3"><b>
         
     | 
| 
      
 627 
     | 
    
         
            +
            logic: { ... } </b></dt>
         
     | 
| 
      
 628 
     | 
    
         
            +
            <dd class="dd3">
         
     | 
| 
      
 629 
     | 
    
         
            +
            	Logic of the element.
         
     | 
| 
      
 630 
     | 
    
         
            +
            </dd>
         
     | 
| 
      
 631 
     | 
    
         
            +
            </dl>
         
     | 
| 
      
 632 
     | 
    
         
            +
            <p>'stag:' and 'elem:' are useful especially for Ruby on Rails.
         
     | 
| 
      
 633 
     | 
    
         
            +
            The following is an examle to use Kwartz in Ruby on Rails.
         
     | 
| 
      
 634 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 635 
     | 
    
         
            +
            <a name="form1.html"></a>
         
     | 
| 
      
 636 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 637 
     | 
    
         
            +
            presentation data (form1.html)</div>
         
     | 
| 
      
 638 
     | 
    
         
            +
            <pre class="program"><form <b>id="form"</b>>
         
     | 
| 
      
 639 
     | 
    
         
            +
              Name: <input type="text" <b>id="member_name"</b>><br>
         
     | 
| 
      
 640 
     | 
    
         
            +
              Birthday: <select <b>id="member_birth"</b>>
         
     | 
| 
      
 641 
     | 
    
         
            +
                          <option> - </option>
         
     | 
| 
      
 642 
     | 
    
         
            +
                        </select><br>
         
     | 
| 
      
 643 
     | 
    
         
            +
             <input type="submit" <b>id="submit"</b>>
         
     | 
| 
      
 644 
     | 
    
         
            +
            </form>
         
     | 
| 
      
 645 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 646 
     | 
    
         
            +
            <a name="form1.plogic"></a>
         
     | 
| 
      
 647 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 648 
     | 
    
         
            +
            presentation logic (form1.plogic)</div>
         
     | 
| 
      
 649 
     | 
    
         
            +
            <pre class="program"><b>#form</b> {
         
     | 
| 
      
 650 
     | 
    
         
            +
              <b>stag:</b>  start_form_tag :action=>'new';
         
     | 
| 
      
 651 
     | 
    
         
            +
            }
         
     | 
| 
      
 652 
     | 
    
         
            +
            <b>#member_name</b> {
         
     | 
| 
      
 653 
     | 
    
         
            +
              <b>elem:</b>  text_field 'member', 'name';
         
     | 
| 
      
 654 
     | 
    
         
            +
            }
         
     | 
| 
      
 655 
     | 
    
         
            +
            <b>#member_birth</b> {
         
     | 
| 
      
 656 
     | 
    
         
            +
              <b>elem:</b>  date_select 'member', birth';
         
     | 
| 
      
 657 
     | 
    
         
            +
            }
         
     | 
| 
      
 658 
     | 
    
         
            +
            <b>#submit</b> {
         
     | 
| 
      
 659 
     | 
    
         
            +
              <b>elem:</b>  submit_to 'Submit';
         
     | 
| 
      
 660 
     | 
    
         
            +
            }
         
     | 
| 
      
 661 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 662 
     | 
    
         
            +
            <a name="form1.expected"></a>
         
     | 
| 
      
 663 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 664 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 665 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -p form1.plogic form1.html
         
     | 
| 
      
 666 
     | 
    
         
            +
            <b><%= start_form_tag :action=>'new' %></b>
         
     | 
| 
      
 667 
     | 
    
         
            +
              Name: <b><%= text_field 'member', 'name' %></b><br>
         
     | 
| 
      
 668 
     | 
    
         
            +
              Birthday: <b><%= date_select 'member', birth' %></b><br>
         
     | 
| 
      
 669 
     | 
    
         
            +
             <b><%= submit_to 'Submit' %></b>
         
     | 
| 
      
 670 
     | 
    
         
            +
            </form>
         
     | 
| 
      
 671 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 672 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 673 
     | 
    
         
            +
             
     | 
| 
      
 674 
     | 
    
         
            +
             
     | 
| 
      
 675 
     | 
    
         
            +
            <a name="directives"></a>
         
     | 
| 
      
 676 
     | 
    
         
            +
            <h3 class="section2">Directives</h3>
         
     | 
| 
      
 677 
     | 
    
         
            +
            <p>Presentation logic may be embedded into presentation data in Kwartz.
         
     | 
| 
      
 678 
     | 
    
         
            +
            You can choose to separate or not to sepearate presentation logic from presentation data.
         
     | 
| 
      
 679 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 680 
     | 
    
         
            +
            <p>The reason to provide both solutions (separate or not) is <b>choosability</b>.
         
     | 
| 
      
 681 
     | 
    
         
            +
            Some preferes to separate presentation logic from presentaion data, and others may
         
     | 
| 
      
 682 
     | 
    
         
            +
            prefere to mix them.
         
     | 
| 
      
 683 
     | 
    
         
            +
            Both approaches have own advantages and disadvantages.
         
     | 
| 
      
 684 
     | 
    
         
            +
            Thus it is the user who determine which solution to adopt.
         
     | 
| 
      
 685 
     | 
    
         
            +
            Kwartz provides both approaches and you can select which to use.
         
     | 
| 
      
 686 
     | 
    
         
            +
            Kwartz doesn't enforce you to adopt a solution.
         
     | 
| 
      
 687 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 688 
     | 
    
         
            +
            <p>To embed presentation logic into presentation data, use directives.
         
     | 
| 
      
 689 
     | 
    
         
            +
            Directive is a command to embed presentation logic into presentation data.
         
     | 
| 
      
 690 
     | 
    
         
            +
            In Kwartz, 'title' attributes<sup>(<a href="#fnref:4" name="fnlink:4">*4</a>)</sup> are used to describe directives.
         
     | 
| 
      
 691 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 692 
     | 
    
         
            +
            <p>The following is an example to use directives.
         
     | 
| 
      
 693 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 694 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 695 
     | 
    
         
            +
            <li>Directive <code>title="for <i>var</i> in <i>list</i>"</code> means to iterate the element.
         
     | 
| 
      
 696 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 697 
     | 
    
         
            +
            <li>Directive <code>title="value: <i>expression</i>"</code> means to print value of expression as content of the element.
         
     | 
| 
      
 698 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 699 
     | 
    
         
            +
            <li>Directive <code>title="dummy:"</code> means that the element is a dummy and is not printed out.
         
     | 
| 
      
 700 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 701 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 702 
     | 
    
         
            +
            <a name="directive1.html"></a>
         
     | 
| 
      
 703 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 704 
     | 
    
         
            +
            Presentation Data(directive1.html):</div>
         
     | 
| 
      
 705 
     | 
    
         
            +
            <pre class="program"><table>
         
     | 
| 
      
 706 
     | 
    
         
            +
              <tr <b>title="for member in @members"</b>>
         
     | 
| 
      
 707 
     | 
    
         
            +
                <td <b>title="value: member.name"</b>>foo</td>
         
     | 
| 
      
 708 
     | 
    
         
            +
                <td>
         
     | 
| 
      
 709 
     | 
    
         
            +
                  <a href="mailto:<%= member.email %>"
         
     | 
| 
      
 710 
     | 
    
         
            +
                     title="<b>value: member.email</b>">foo@mai.com</a>
         
     | 
| 
      
 711 
     | 
    
         
            +
                </td>
         
     | 
| 
      
 712 
     | 
    
         
            +
              </tr>
         
     | 
| 
      
 713 
     | 
    
         
            +
              <tr <b>title="dummy:"</b>>
         
     | 
| 
      
 714 
     | 
    
         
            +
                <td>bar</td>
         
     | 
| 
      
 715 
     | 
    
         
            +
                <td><a href="mailto:bar@mail.org">bar@mail.org</a></td>
         
     | 
| 
      
 716 
     | 
    
         
            +
              </tr>
         
     | 
| 
      
 717 
     | 
    
         
            +
              <tr <b>title="dummy:"</b>>
         
     | 
| 
      
 718 
     | 
    
         
            +
                <td>baz</td>
         
     | 
| 
      
 719 
     | 
    
         
            +
                <td><a href="mailto:baz@mail.net">baz@mail.net</a></td>
         
     | 
| 
      
 720 
     | 
    
         
            +
              </tr>
         
     | 
| 
      
 721 
     | 
    
         
            +
            </table>
         
     | 
| 
      
 722 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 723 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 724 
     | 
    
         
            +
            Compile:</div>
         
     | 
| 
      
 725 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -l eruby  directive1.html > directive1.rhtml
         
     | 
| 
      
 726 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 727 
     | 
    
         
            +
            <a name="directive1.expected"></a>
         
     | 
| 
      
 728 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 729 
     | 
    
         
            +
            Output script:</div>
         
     | 
| 
      
 730 
     | 
    
         
            +
            <pre class="program"><table>
         
     | 
| 
      
 731 
     | 
    
         
            +
            <b><% for member in @members do %></b>
         
     | 
| 
      
 732 
     | 
    
         
            +
              <tr>
         
     | 
| 
      
 733 
     | 
    
         
            +
                <td><b><%= member.name %></b></td>
         
     | 
| 
      
 734 
     | 
    
         
            +
                <td>
         
     | 
| 
      
 735 
     | 
    
         
            +
                  <a href="mailto:<b><%= member.email %></b>"><b><%= member.email %></b></a>
         
     | 
| 
      
 736 
     | 
    
         
            +
                </td>
         
     | 
| 
      
 737 
     | 
    
         
            +
              </tr>
         
     | 
| 
      
 738 
     | 
    
         
            +
            <b><% end %></b>
         
     | 
| 
      
 739 
     | 
    
         
            +
            </table>
         
     | 
| 
      
 740 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 741 
     | 
    
         
            +
            <p>If the first character of target attribute is a space, Kwartz recognize it as non-directive<sup>(<a href="#fnref:5" name="fnlink:5">*5</a>)</sup>.
         
     | 
| 
      
 742 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 743 
     | 
    
         
            +
            <a name="directive2.html"></a>
         
     | 
| 
      
 744 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 745 
     | 
    
         
            +
            presentation data (directive2.html)</div>
         
     | 
| 
      
 746 
     | 
    
         
            +
            <pre class="program"><span <b>title="value: expr1"</b>>foo</span>
         
     | 
| 
      
 747 
     | 
    
         
            +
            <span <b>title=" value: expr2"</b>>bar</span>
         
     | 
| 
      
 748 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 749 
     | 
    
         
            +
            <a name="directive2.expected"></a>
         
     | 
| 
      
 750 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 751 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 752 
     | 
    
         
            +
            <pre class="terminal">$ kwartz directive2.html
         
     | 
| 
      
 753 
     | 
    
         
            +
            <span><b><%= expr1 %></b></span>
         
     | 
| 
      
 754 
     | 
    
         
            +
            <span <b>title="value: expr2"</b>>bar</span>
         
     | 
| 
      
 755 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 756 
     | 
    
         
            +
            <p>Directives are different in each target language.
         
     | 
| 
      
 757 
     | 
    
         
            +
            For example, foreach loop is 'for item in list' in eRuby, 'foreach($list as $item)' in PHP, 'forEach(item in list)' in JSTL.
         
     | 
| 
      
 758 
     | 
    
         
            +
            See reference manual for details about directives.
         
     | 
| 
      
 759 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 760 
     | 
    
         
            +
            <div class="footnote">
         
     | 
| 
      
 761 
     | 
    
         
            +
             <dl compact>
         
     | 
| 
      
 762 
     | 
    
         
            +
              <dt>(<a name="fnref:4" href="#fnlink:4">*4</a>)</dt>
         
     | 
| 
      
 763 
     | 
    
         
            +
              <dd>It is able to change attribute name by command-line option '--dattr=name' or configuration option PROPRERTY_DATTR.</dd>
         
     | 
| 
      
 764 
     | 
    
         
            +
              <dt>(<a name="fnref:5" href="#fnlink:5">*5</a>)</dt>
         
     | 
| 
      
 765 
     | 
    
         
            +
              <dd>This spec may change in the future if I get have better idea.</dd>
         
     | 
| 
      
 766 
     | 
    
         
            +
             </dl>
         
     | 
| 
      
 767 
     | 
    
         
            +
            </div>
         
     | 
| 
      
 768 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 769 
     | 
    
         
            +
             
     | 
| 
      
 770 
     | 
    
         
            +
             
     | 
| 
      
 771 
     | 
    
         
            +
            <a name="escape"></a>
         
     | 
| 
      
 772 
     | 
    
         
            +
            <h3 class="section2">Escape</h3>
         
     | 
| 
      
 773 
     | 
    
         
            +
            <p>Kwartz supports Automatic-escape and Partial-escape/unescape.
         
     | 
| 
      
 774 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 775 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 776 
     | 
    
         
            +
            <li>If command-line option '<code>-e</code>' is specified,  values of '<code>value: <i>expr</i></code>'
         
     | 
| 
      
 777 
     | 
    
         
            +
               are escaped. (Automatic-escape)
         
     | 
| 
      
 778 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 779 
     | 
    
         
            +
            <li>'<code>Value: <i>expr</i></code>' always escapes value even when '<code>-e</code>' is not specified. (Partial-escape)
         
     | 
| 
      
 780 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 781 
     | 
    
         
            +
            <li>'<code>VALUE: <i>expr</i></code>' always doesn't escapes value even when '<code>-e</code>' is specified. (Partial-unescape)
         
     | 
| 
      
 782 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 783 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 784 
     | 
    
         
            +
            <a name="escape1.html"></a>
         
     | 
| 
      
 785 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 786 
     | 
    
         
            +
            presentation Data (escape1.html):</div>
         
     | 
| 
      
 787 
     | 
    
         
            +
            <pre class="program"><tr>
         
     | 
| 
      
 788 
     | 
    
         
            +
              <td id="mark:val1">foo</td>
         
     | 
| 
      
 789 
     | 
    
         
            +
              <td id="mark:val2">bar</td>
         
     | 
| 
      
 790 
     | 
    
         
            +
              <td id="mark:val3">baz</td>
         
     | 
| 
      
 791 
     | 
    
         
            +
            </tr>
         
     | 
| 
      
 792 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 793 
     | 
    
         
            +
            <a name="escape1.plogic"></a>
         
     | 
| 
      
 794 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 795 
     | 
    
         
            +
            presentation logic (escape1.plogic)</div>
         
     | 
| 
      
 796 
     | 
    
         
            +
            <pre class="program">#val1 {
         
     | 
| 
      
 797 
     | 
    
         
            +
              <b>value:</b> expr;
         
     | 
| 
      
 798 
     | 
    
         
            +
            }
         
     | 
| 
      
 799 
     | 
    
         
            +
            #val2 {
         
     | 
| 
      
 800 
     | 
    
         
            +
              <b>Value:</b> expr;
         
     | 
| 
      
 801 
     | 
    
         
            +
            }
         
     | 
| 
      
 802 
     | 
    
         
            +
            #val3 {
         
     | 
| 
      
 803 
     | 
    
         
            +
              <b>VALUE:</b> expr;
         
     | 
| 
      
 804 
     | 
    
         
            +
            }
         
     | 
| 
      
 805 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 806 
     | 
    
         
            +
            <a name="escape1.expected"></a>
         
     | 
| 
      
 807 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 808 
     | 
    
         
            +
            compile without '<code>-e</code>' option.</div>
         
     | 
| 
      
 809 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -p escape1.plogic escape1.html
         
     | 
| 
      
 810 
     | 
    
         
            +
            <tr>
         
     | 
| 
      
 811 
     | 
    
         
            +
              <td><%= expr %></td>
         
     | 
| 
      
 812 
     | 
    
         
            +
              <td><%=h expr %></td>
         
     | 
| 
      
 813 
     | 
    
         
            +
              <td><%= expr %></td>
         
     | 
| 
      
 814 
     | 
    
         
            +
            </tr>
         
     | 
| 
      
 815 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 816 
     | 
    
         
            +
            <a name="escape1e.expected"></a>
         
     | 
| 
      
 817 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 818 
     | 
    
         
            +
            comple with '<code>-e</code>' option.</div>
         
     | 
| 
      
 819 
     | 
    
         
            +
            <pre class="terminal">$ kwartz <b>-e</b> -p escape1.plogic escape1.html
         
     | 
| 
      
 820 
     | 
    
         
            +
            <tr>
         
     | 
| 
      
 821 
     | 
    
         
            +
              <td><b><%=h expr %></b></td>
         
     | 
| 
      
 822 
     | 
    
         
            +
              <td><b><%=h expr %></b></td>
         
     | 
| 
      
 823 
     | 
    
         
            +
              <td><b><%= expr %></b></td>
         
     | 
| 
      
 824 
     | 
    
         
            +
            </tr>
         
     | 
| 
      
 825 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 826 
     | 
    
         
            +
            <p>In the same way, '<code>Stag:</code>', '<code>Etag:</code>', '<code>Elem:</code>',
         
     | 
| 
      
 827 
     | 
    
         
            +
            '<code>Cont:</code>', '<code>Attrs:</code>', and '<code>Append:</code>' properties are
         
     | 
| 
      
 828 
     | 
    
         
            +
            always escaped, '<code>STAG:</code>', '<code>ETAG:</code>', '<code>ELEM:</code>',
         
     | 
| 
      
 829 
     | 
    
         
            +
            '<code>CONT:</code>', '<code>ATTRS:</code>', and '<code>APPEND:</code>' properties are
         
     | 
| 
      
 830 
     | 
    
         
            +
            never escaped.
         
     | 
| 
      
 831 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 832 
     | 
    
         
            +
            <p>Escape function or method is different for each tareget language.
         
     | 
| 
      
 833 
     | 
    
         
            +
            'h()' is used in eRuby and 'htmlspecialchars()' in PHP.
         
     | 
| 
      
 834 
     | 
    
         
            +
            JSTL prints escaped value in default.
         
     | 
| 
      
 835 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 836 
     | 
    
         
            +
            <p>Directives <code>title="Value: <i>expr</i>"</code>, <code>title="Attr: '<i>name</i>' <i>expr</i>"</code>, and <code>title="Append: <i>expr</i>"</code> always escape expression value even when the command-line option '<code>-e</code>' is not specified.
         
     | 
| 
      
 837 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 838 
     | 
    
         
            +
            <p>Directives <code>title="VALUE: <i>expr</i>:"</code>, <code>title="ATTR: '<i>name</i>' <i>expr</i>"</code>, and <code>title="APPEND: <i>expr</i>"</code> doesn't escape expression value even when the command-line option '<code>-e</code>' is specified.
         
     | 
| 
      
 839 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 840 
     | 
    
         
            +
            <p>Configuration option PROPERTY_ESCAPE in 'kwartz/config.rb' determines whether values are escaped or not in default.
         
     | 
| 
      
 841 
     | 
    
         
            +
            If this is true then Kwartz will escape values in default.
         
     | 
| 
      
 842 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 843 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 844 
     | 
    
         
            +
             
     | 
| 
      
 845 
     | 
    
         
            +
             
     | 
| 
      
 846 
     | 
    
         
            +
            <a name="langs"></a>
         
     | 
| 
      
 847 
     | 
    
         
            +
            <h3 class="section2">Multi-language</h3>
         
     | 
| 
      
 848 
     | 
    
         
            +
            <p>Kwartz-ruby now supports the following programming language.
         
     | 
| 
      
 849 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 850 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 851 
     | 
    
         
            +
            <li>Ruby (eRuby)
         
     | 
| 
      
 852 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 853 
     | 
    
         
            +
            <li>PHP
         
     | 
| 
      
 854 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 855 
     | 
    
         
            +
            <li>JSP (JSTL 1.1 and 1.2)
         
     | 
| 
      
 856 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 857 
     | 
    
         
            +
            <li>Perl (ePerl) [experimental]
         
     | 
| 
      
 858 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 859 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 860 
     | 
    
         
            +
            <p>Presentation logics must be described in each target language.
         
     | 
| 
      
 861 
     | 
    
         
            +
            It means that if you have wrote presentation logics in Ruby, they were not reusable
         
     | 
| 
      
 862 
     | 
    
         
            +
            for PHP project (but you can get full-power of Ruby in presentation logic).
         
     | 
| 
      
 863 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 864 
     | 
    
         
            +
            <p>The followings are examples of Ruby, PHP, JSP, and Perl.
         
     | 
| 
      
 865 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 866 
     | 
    
         
            +
            <a name="table1.html"></a>
         
     | 
| 
      
 867 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 868 
     | 
    
         
            +
            table1.html</div>
         
     | 
| 
      
 869 
     | 
    
         
            +
            <pre class="program"><html>
         
     | 
| 
      
 870 
     | 
    
         
            +
              <body>
         
     | 
| 
      
 871 
     | 
    
         
            +
              
         
     | 
| 
      
 872 
     | 
    
         
            +
                <table>
         
     | 
| 
      
 873 
     | 
    
         
            +
                  <tr bgcolor="#CCCCFF" <b>id="mark:row"</b>>
         
     | 
| 
      
 874 
     | 
    
         
            +
                    <td <b>id="mark:name"</b>>Foo</td>
         
     | 
| 
      
 875 
     | 
    
         
            +
                    <td <b>id="mark:mail"</b>>foo@mail.com</td>
         
     | 
| 
      
 876 
     | 
    
         
            +
                  </tr>
         
     | 
| 
      
 877 
     | 
    
         
            +
                  <tr bgcolor="#FFCCCC" <b>id="dummy:row1"</b>>
         
     | 
| 
      
 878 
     | 
    
         
            +
                    <td>Bar</td>
         
     | 
| 
      
 879 
     | 
    
         
            +
                    <td>bar@mail.net</td>
         
     | 
| 
      
 880 
     | 
    
         
            +
                  </tr>
         
     | 
| 
      
 881 
     | 
    
         
            +
                  <tr bgcolor="#CCCCFF" <b>id="dummy:row2"</b>>
         
     | 
| 
      
 882 
     | 
    
         
            +
                    <td>Baz</td>
         
     | 
| 
      
 883 
     | 
    
         
            +
                    <td>baz@mail.org</td>
         
     | 
| 
      
 884 
     | 
    
         
            +
                  </tr>
         
     | 
| 
      
 885 
     | 
    
         
            +
                </table>
         
     | 
| 
      
 886 
     | 
    
         
            +
             
     | 
| 
      
 887 
     | 
    
         
            +
             </body>
         
     | 
| 
      
 888 
     | 
    
         
            +
            </html>
         
     | 
| 
      
 889 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 890 
     | 
    
         
            +
            <a name="table1.eruby.plogic"></a>
         
     | 
| 
      
 891 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 892 
     | 
    
         
            +
            table1.eruby.plogic</div>
         
     | 
| 
      
 893 
     | 
    
         
            +
            <pre class="program">#row {
         
     | 
| 
      
 894 
     | 
    
         
            +
              attrs:  "bgcolor" color;
         
     | 
| 
      
 895 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 896 
     | 
    
         
            +
                @list.each_with_index do |user, i|
         
     | 
| 
      
 897 
     | 
    
         
            +
                  color = i % 2 == 1 ? '#FFCCCC' : '#CCCCFF';
         
     | 
| 
      
 898 
     | 
    
         
            +
                  _elem
         
     | 
| 
      
 899 
     | 
    
         
            +
                }
         
     | 
| 
      
 900 
     | 
    
         
            +
              }
         
     | 
| 
      
 901 
     | 
    
         
            +
            }
         
     | 
| 
      
 902 
     | 
    
         
            +
             
     | 
| 
      
 903 
     | 
    
         
            +
            #name {
         
     | 
| 
      
 904 
     | 
    
         
            +
              Value:  user[:name];
         
     | 
| 
      
 905 
     | 
    
         
            +
            }
         
     | 
| 
      
 906 
     | 
    
         
            +
             
     | 
| 
      
 907 
     | 
    
         
            +
            #mail {
         
     | 
| 
      
 908 
     | 
    
         
            +
              value:  user[:mail];
         
     | 
| 
      
 909 
     | 
    
         
            +
            }
         
     | 
| 
      
 910 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 911 
     | 
    
         
            +
            <a name="table1.php.plogic"></a>
         
     | 
| 
      
 912 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 913 
     | 
    
         
            +
            table1.php.plogic</div>
         
     | 
| 
      
 914 
     | 
    
         
            +
            <pre class="program">#row {
         
     | 
| 
      
 915 
     | 
    
         
            +
              attrs:  "bgcolor" $color;
         
     | 
| 
      
 916 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 917 
     | 
    
         
            +
                $i = 0;
         
     | 
| 
      
 918 
     | 
    
         
            +
                foreach ($list as $user) {
         
     | 
| 
      
 919 
     | 
    
         
            +
                  $color = ++$i % 2 == 0 ? '#FFCCCC' : '#CCCCFF';
         
     | 
| 
      
 920 
     | 
    
         
            +
                  _elem();
         
     | 
| 
      
 921 
     | 
    
         
            +
                }
         
     | 
| 
      
 922 
     | 
    
         
            +
              }
         
     | 
| 
      
 923 
     | 
    
         
            +
            }
         
     | 
| 
      
 924 
     | 
    
         
            +
             
     | 
| 
      
 925 
     | 
    
         
            +
            #name {
         
     | 
| 
      
 926 
     | 
    
         
            +
              Value:  $user['name'];
         
     | 
| 
      
 927 
     | 
    
         
            +
            }
         
     | 
| 
      
 928 
     | 
    
         
            +
             
     | 
| 
      
 929 
     | 
    
         
            +
            #mail {
         
     | 
| 
      
 930 
     | 
    
         
            +
              value:  $user['mail'];
         
     | 
| 
      
 931 
     | 
    
         
            +
            }
         
     | 
| 
      
 932 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 933 
     | 
    
         
            +
            <a name="table1.jstl.plogic"></a>
         
     | 
| 
      
 934 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 935 
     | 
    
         
            +
            table1.jstl.plogic</div>
         
     | 
| 
      
 936 
     | 
    
         
            +
            <pre class="program">#row {
         
     | 
| 
      
 937 
     | 
    
         
            +
              attrs:  "bgcolor" color;
         
     | 
| 
      
 938 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 939 
     | 
    
         
            +
                <c:forEach var="user" items="${list}" varStatus="loop">
         
     | 
| 
      
 940 
     | 
    
         
            +
                  <c:set var="color" value="${loop.index % 2 == 0 ? '#FFCCCC' : '#CCCCFF'}"/>
         
     | 
| 
      
 941 
     | 
    
         
            +
                  _elem
         
     | 
| 
      
 942 
     | 
    
         
            +
                </c:forEach>
         
     | 
| 
      
 943 
     | 
    
         
            +
              }
         
     | 
| 
      
 944 
     | 
    
         
            +
            }
         
     | 
| 
      
 945 
     | 
    
         
            +
             
     | 
| 
      
 946 
     | 
    
         
            +
            #name {
         
     | 
| 
      
 947 
     | 
    
         
            +
              Value:  user.name;
         
     | 
| 
      
 948 
     | 
    
         
            +
            }
         
     | 
| 
      
 949 
     | 
    
         
            +
             
     | 
| 
      
 950 
     | 
    
         
            +
            #mail {
         
     | 
| 
      
 951 
     | 
    
         
            +
              value:  user.mail;
         
     | 
| 
      
 952 
     | 
    
         
            +
            }
         
     | 
| 
      
 953 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 954 
     | 
    
         
            +
            <a name="table1.eperl.plogic"></a>
         
     | 
| 
      
 955 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 956 
     | 
    
         
            +
            table1.eperl.plogic</div>
         
     | 
| 
      
 957 
     | 
    
         
            +
            <pre class="program">#row {
         
     | 
| 
      
 958 
     | 
    
         
            +
              attrs:  "bgcolor" $color;
         
     | 
| 
      
 959 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 960 
     | 
    
         
            +
                $i = 0;
         
     | 
| 
      
 961 
     | 
    
         
            +
                foreach ($user in @list) {
         
     | 
| 
      
 962 
     | 
    
         
            +
                  $color = ++$i % 2 == 0 ? '#FFCCCC' : '#CCCCFF';
         
     | 
| 
      
 963 
     | 
    
         
            +
                  _elem();
         
     | 
| 
      
 964 
     | 
    
         
            +
                }
         
     | 
| 
      
 965 
     | 
    
         
            +
              }
         
     | 
| 
      
 966 
     | 
    
         
            +
            }
         
     | 
| 
      
 967 
     | 
    
         
            +
             
     | 
| 
      
 968 
     | 
    
         
            +
            #name {
         
     | 
| 
      
 969 
     | 
    
         
            +
              Value:  $user{'name'};
         
     | 
| 
      
 970 
     | 
    
         
            +
            }
         
     | 
| 
      
 971 
     | 
    
         
            +
             
     | 
| 
      
 972 
     | 
    
         
            +
            #mail {
         
     | 
| 
      
 973 
     | 
    
         
            +
              value:  $user{'mail'};
         
     | 
| 
      
 974 
     | 
    
         
            +
            }
         
     | 
| 
      
 975 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 976 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 977 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 978 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -l eruby -p table1.eruby.plogic table1.html > table1.rhtml
         
     | 
| 
      
 979 
     | 
    
         
            +
            $ kwartz -l php   -p table1.php.plogic   table1.html > table1.php
         
     | 
| 
      
 980 
     | 
    
         
            +
            $ kwartz -l jstl  -p table1.jstl.plogic  table1.html > table1.jsp
         
     | 
| 
      
 981 
     | 
    
         
            +
            $ kwartz -l eperl -p table1.eperl.plogic table1.html > table1.iphtml
         
     | 
| 
      
 982 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 983 
     | 
    
         
            +
            <a name="table1.rhtml"></a>
         
     | 
| 
      
 984 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 985 
     | 
    
         
            +
            output script (table1.rhtml)</div>
         
     | 
| 
      
 986 
     | 
    
         
            +
            <pre class="program"><html>
         
     | 
| 
      
 987 
     | 
    
         
            +
              <body>
         
     | 
| 
      
 988 
     | 
    
         
            +
              
         
     | 
| 
      
 989 
     | 
    
         
            +
                <table>
         
     | 
| 
      
 990 
     | 
    
         
            +
            <b><%       @list.each_with_index do |user, i| %></b>
         
     | 
| 
      
 991 
     | 
    
         
            +
            <b><%          color = i % 2 == 1 ? '#FFCCCC' : '#CCCCFF' %></b>
         
     | 
| 
      
 992 
     | 
    
         
            +
                  <tr bgcolor="<b><%= color %></b>">
         
     | 
| 
      
 993 
     | 
    
         
            +
                    <td><b><%=h user[:name] %></b></td>
         
     | 
| 
      
 994 
     | 
    
         
            +
                    <td><b><%= user[:mail] %></b></td>
         
     | 
| 
      
 995 
     | 
    
         
            +
                  </tr>
         
     | 
| 
      
 996 
     | 
    
         
            +
            <b><%       end %></b>
         
     | 
| 
      
 997 
     | 
    
         
            +
                </table>
         
     | 
| 
      
 998 
     | 
    
         
            +
             
     | 
| 
      
 999 
     | 
    
         
            +
             </body>
         
     | 
| 
      
 1000 
     | 
    
         
            +
            </html>
         
     | 
| 
      
 1001 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1002 
     | 
    
         
            +
            <a name="table1.php"></a>
         
     | 
| 
      
 1003 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1004 
     | 
    
         
            +
            output script (table1.php)</div>
         
     | 
| 
      
 1005 
     | 
    
         
            +
            <pre class="program"><html>
         
     | 
| 
      
 1006 
     | 
    
         
            +
              <body>
         
     | 
| 
      
 1007 
     | 
    
         
            +
              
         
     | 
| 
      
 1008 
     | 
    
         
            +
                <table>
         
     | 
| 
      
 1009 
     | 
    
         
            +
            <b><?php     $i = 0; ?></b>
         
     | 
| 
      
 1010 
     | 
    
         
            +
            <b><?php     foreach ($list as $user) { ?></b>
         
     | 
| 
      
 1011 
     | 
    
         
            +
            <b><?php       $color = ++$i % 2 == 0 ? '#FFCCCC' : '#CCCCFF'; ?></b>
         
     | 
| 
      
 1012 
     | 
    
         
            +
                  <tr bgcolor="<b><?php echo $color; ?></b>">
         
     | 
| 
      
 1013 
     | 
    
         
            +
                    <td><b><?php echo htmlspecialchars($user['name']); ?></b></td>
         
     | 
| 
      
 1014 
     | 
    
         
            +
                    <td><b><?php echo $user['mail']; ?></b></td>
         
     | 
| 
      
 1015 
     | 
    
         
            +
                  </tr>
         
     | 
| 
      
 1016 
     | 
    
         
            +
            <b><?php     } ?></b>
         
     | 
| 
      
 1017 
     | 
    
         
            +
                </table>
         
     | 
| 
      
 1018 
     | 
    
         
            +
             
     | 
| 
      
 1019 
     | 
    
         
            +
             </body>
         
     | 
| 
      
 1020 
     | 
    
         
            +
            </html>
         
     | 
| 
      
 1021 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1022 
     | 
    
         
            +
            <a name="table1.jsp"></a>
         
     | 
| 
      
 1023 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1024 
     | 
    
         
            +
            output script (JSTL 1.2)</div>
         
     | 
| 
      
 1025 
     | 
    
         
            +
            <pre class="program"><%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
         
     | 
| 
      
 1026 
     | 
    
         
            +
            <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
         
     | 
| 
      
 1027 
     | 
    
         
            +
            <html>
         
     | 
| 
      
 1028 
     | 
    
         
            +
              <body>
         
     | 
| 
      
 1029 
     | 
    
         
            +
              
         
     | 
| 
      
 1030 
     | 
    
         
            +
                <table>
         
     | 
| 
      
 1031 
     | 
    
         
            +
                <b><c:forEach var="user" items="${list}" varStatus="loop"></b>
         
     | 
| 
      
 1032 
     | 
    
         
            +
                  <b><c:set var="color" value="${loop.index % 2 == 0 ? '#FFCCCC' : '#CCCCFF'}"/></b>
         
     | 
| 
      
 1033 
     | 
    
         
            +
                  <tr bgcolor="<b>${color}</b>">
         
     | 
| 
      
 1034 
     | 
    
         
            +
                    <td><b>${user.name}</b></td>
         
     | 
| 
      
 1035 
     | 
    
         
            +
                    <td><b>${user.mail}</b></td>
         
     | 
| 
      
 1036 
     | 
    
         
            +
                  </tr>
         
     | 
| 
      
 1037 
     | 
    
         
            +
                <b></c:forEach></b>
         
     | 
| 
      
 1038 
     | 
    
         
            +
                </table>
         
     | 
| 
      
 1039 
     | 
    
         
            +
             
     | 
| 
      
 1040 
     | 
    
         
            +
             </body>
         
     | 
| 
      
 1041 
     | 
    
         
            +
            </html>
         
     | 
| 
      
 1042 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1043 
     | 
    
         
            +
            <a name="table1.iphtml"></a>
         
     | 
| 
      
 1044 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1045 
     | 
    
         
            +
            output script (ePerl)</div>
         
     | 
| 
      
 1046 
     | 
    
         
            +
            <pre class="program"><html>
         
     | 
| 
      
 1047 
     | 
    
         
            +
              <body>
         
     | 
| 
      
 1048 
     | 
    
         
            +
              
         
     | 
| 
      
 1049 
     | 
    
         
            +
                <table>
         
     | 
| 
      
 1050 
     | 
    
         
            +
            <b><?     $i = 0; !></b>
         
     | 
| 
      
 1051 
     | 
    
         
            +
            <b><?     foreach ($user in @list) { !></b>
         
     | 
| 
      
 1052 
     | 
    
         
            +
            <b><?       $color = ++$i % 2 == 0 ? '#FFCCCC' : '#CCCCFF'; !></b>
         
     | 
| 
      
 1053 
     | 
    
         
            +
                  <tr bgcolor="<b><?= $color !></b>">
         
     | 
| 
      
 1054 
     | 
    
         
            +
                    <td><b><?= encode_entities($user{'name'}) !></b></td>
         
     | 
| 
      
 1055 
     | 
    
         
            +
                    <td><b><?= $user{'mail'} !></b></td>
         
     | 
| 
      
 1056 
     | 
    
         
            +
                  </tr>
         
     | 
| 
      
 1057 
     | 
    
         
            +
            <b><?     } !></b>
         
     | 
| 
      
 1058 
     | 
    
         
            +
                </table>
         
     | 
| 
      
 1059 
     | 
    
         
            +
             
     | 
| 
      
 1060 
     | 
    
         
            +
             </body>
         
     | 
| 
      
 1061 
     | 
    
         
            +
            </html>
         
     | 
| 
      
 1062 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1063 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1064 
     | 
    
         
            +
             
     | 
| 
      
 1065 
     | 
    
         
            +
             
     | 
| 
      
 1066 
     | 
    
         
            +
            <a name="span"></a>
         
     | 
| 
      
 1067 
     | 
    
         
            +
            <h3 class="section2">Span Tag Deletion</h3>
         
     | 
| 
      
 1068 
     | 
    
         
            +
            <p>Kwartz regards span tags which contain only directives as dummy tags and delete them automatically when command-line option '--delspan' is specified.
         
     | 
| 
      
 1069 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1070 
     | 
    
         
            +
            <a name="delspan1.html"></a>
         
     | 
| 
      
 1071 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1072 
     | 
    
         
            +
            presentation data (delspan1.html)</div>
         
     | 
| 
      
 1073 
     | 
    
         
            +
            <pre class="program"><h1><span <b>id="mark:title"</b>>title</span></h1>
         
     | 
| 
      
 1074 
     | 
    
         
            +
             
     | 
| 
      
 1075 
     | 
    
         
            +
            Hello <span <b>title="value: user"</b>>World</span>!
         
     | 
| 
      
 1076 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1077 
     | 
    
         
            +
            <a name="delspan1.plogic"></a>
         
     | 
| 
      
 1078 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1079 
     | 
    
         
            +
            presentation logic (delspan1.plogic)</div>
         
     | 
| 
      
 1080 
     | 
    
         
            +
            <pre class="program">#title {
         
     | 
| 
      
 1081 
     | 
    
         
            +
              value: title;
         
     | 
| 
      
 1082 
     | 
    
         
            +
            }
         
     | 
| 
      
 1083 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1084 
     | 
    
         
            +
            <a name="delspan1.expected"></a>
         
     | 
| 
      
 1085 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1086 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 1087 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -p delspan1.plogic <b>--delspan</b> delspan1.html
         
     | 
| 
      
 1088 
     | 
    
         
            +
            <h1><b><%= title %></b></h1>
         
     | 
| 
      
 1089 
     | 
    
         
            +
             
     | 
| 
      
 1090 
     | 
    
         
            +
            Hello <b><%= user %></b>!
         
     | 
| 
      
 1091 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1092 
     | 
    
         
            +
            <p>The span tags are not removed when they have other attributes.
         
     | 
| 
      
 1093 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1094 
     | 
    
         
            +
            <a name="delspan2.html"></a>
         
     | 
| 
      
 1095 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1096 
     | 
    
         
            +
            presentation data (delspan2.html)</div>
         
     | 
| 
      
 1097 
     | 
    
         
            +
            <pre class="program">Hello <span <b>title="value: user" style="color:black"</b>>World</span>!
         
     | 
| 
      
 1098 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1099 
     | 
    
         
            +
            <a name="delspan2.expected"></a>
         
     | 
| 
      
 1100 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1101 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 1102 
     | 
    
         
            +
            <pre class="terminal">$ kwartz <b>--delspan</b> delspan2.html
         
     | 
| 
      
 1103 
     | 
    
         
            +
            Hello <b><span style="color:black"></b><%= user %><b></span></b>!
         
     | 
| 
      
 1104 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1105 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1106 
     | 
    
         
            +
             
     | 
| 
      
 1107 
     | 
    
         
            +
             
     | 
| 
      
 1108 
     | 
    
         
            +
            <a name="import-plogic"></a>
         
     | 
| 
      
 1109 
     | 
    
         
            +
            <h3 class="section2">Import Presentation Logic File</h3>
         
     | 
| 
      
 1110 
     | 
    
         
            +
            <p>'<code>@imort "filename.plogic"</code>' imports filename.plogic.
         
     | 
| 
      
 1111 
     | 
    
         
            +
            This is useful to share common presentation logic in many files.
         
     | 
| 
      
 1112 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1113 
     | 
    
         
            +
            <a name="link_to2.plogic"></a>
         
     | 
| 
      
 1114 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1115 
     | 
    
         
            +
            link_to.plogic</div>
         
     | 
| 
      
 1116 
     | 
    
         
            +
            <pre class="program"><b>#link_to_new</b> {
         
     | 
| 
      
 1117 
     | 
    
         
            +
              elem:  start_link_to :action=>'new';
         
     | 
| 
      
 1118 
     | 
    
         
            +
            }
         
     | 
| 
      
 1119 
     | 
    
         
            +
            <b>#link_to_show</b> {
         
     | 
| 
      
 1120 
     | 
    
         
            +
              elem:  start_link_to :action=>'show', :id=>@member;
         
     | 
| 
      
 1121 
     | 
    
         
            +
            }
         
     | 
| 
      
 1122 
     | 
    
         
            +
            <b>#link_to_edit</b> {
         
     | 
| 
      
 1123 
     | 
    
         
            +
              elem:  start_link_to :action=>'edit', :id=>@member;
         
     | 
| 
      
 1124 
     | 
    
         
            +
            }
         
     | 
| 
      
 1125 
     | 
    
         
            +
            <b>#link_to_list</b> {
         
     | 
| 
      
 1126 
     | 
    
         
            +
              elem:  start_link_to :action=>'list';
         
     | 
| 
      
 1127 
     | 
    
         
            +
            }
         
     | 
| 
      
 1128 
     | 
    
         
            +
            <b>#link_to_destroy</b> {
         
     | 
| 
      
 1129 
     | 
    
         
            +
              stag:  start_link_to({:action=>'destroy', :id=>@member}, :confirm=>'Are you sure?');
         
     | 
| 
      
 1130 
     | 
    
         
            +
            }
         
     | 
| 
      
 1131 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1132 
     | 
    
         
            +
            <a name="show2.html"></a>
         
     | 
| 
      
 1133 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1134 
     | 
    
         
            +
            show.html</div>
         
     | 
| 
      
 1135 
     | 
    
         
            +
            <pre class="program"><p>
         
     | 
| 
      
 1136 
     | 
    
         
            +
             Name: <span id="mark:name">foo</span> <br>
         
     | 
| 
      
 1137 
     | 
    
         
            +
             Email: <span id="mark:email">foo@mail.com</span> <br>
         
     | 
| 
      
 1138 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1139 
     | 
    
         
            +
            <a href="#" <b>id="link_to_edit"</b>>Edit this member</a> |
         
     | 
| 
      
 1140 
     | 
    
         
            +
            <a href="#" <b>id="link_to_new"</b>>Create new member</a> |
         
     | 
| 
      
 1141 
     | 
    
         
            +
            <a href="#" <b>id="link_to_list"</b>>Return to list</a>
         
     | 
| 
      
 1142 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1143 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1144 
     | 
    
         
            +
            show.plogic</div>
         
     | 
| 
      
 1145 
     | 
    
         
            +
            <pre class="program"><b>@import 'link_to.plogic';</b>
         
     | 
| 
      
 1146 
     | 
    
         
            +
             
     | 
| 
      
 1147 
     | 
    
         
            +
            #name {
         
     | 
| 
      
 1148 
     | 
    
         
            +
              Value: @member.name;
         
     | 
| 
      
 1149 
     | 
    
         
            +
            }
         
     | 
| 
      
 1150 
     | 
    
         
            +
            #email {
         
     | 
| 
      
 1151 
     | 
    
         
            +
              Value: @member.email;
         
     | 
| 
      
 1152 
     | 
    
         
            +
            }
         
     | 
| 
      
 1153 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1154 
     | 
    
         
            +
            <a name="show2.expected"></a>
         
     | 
| 
      
 1155 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1156 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 1157 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -p show.plogic show.html
         
     | 
| 
      
 1158 
     | 
    
         
            +
            <p>
         
     | 
| 
      
 1159 
     | 
    
         
            +
             Name: <span><%=h @member.name %></span> <br>
         
     | 
| 
      
 1160 
     | 
    
         
            +
             Email: <span><%=h @member.email %></span> <br>
         
     | 
| 
      
 1161 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1162 
     | 
    
         
            +
            <%= start_link_to :action=>'edit', :id=>@member %> |
         
     | 
| 
      
 1163 
     | 
    
         
            +
            <%= start_link_to :action=>'new' %> |
         
     | 
| 
      
 1164 
     | 
    
         
            +
            <%= start_link_to :action=>'list' %>
         
     | 
| 
      
 1165 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1166 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1167 
     | 
    
         
            +
             
     | 
| 
      
 1168 
     | 
    
         
            +
             
     | 
| 
      
 1169 
     | 
    
         
            +
            <a name="import-elem"></a>
         
     | 
| 
      
 1170 
     | 
    
         
            +
            <h3 class="section2">Import Elements in Other Files</h3>
         
     | 
| 
      
 1171 
     | 
    
         
            +
            <p>Command-line option '-i <i>filename,...</i>' imports element definitions form other files.
         
     | 
| 
      
 1172 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1173 
     | 
    
         
            +
            <a name="form.html"></a>
         
     | 
| 
      
 1174 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1175 
     | 
    
         
            +
            form.html</div>
         
     | 
| 
      
 1176 
     | 
    
         
            +
            <pre class="program"><form>
         
     | 
| 
      
 1177 
     | 
    
         
            +
             <div <b>id="mark:form_content"</b>>
         
     | 
| 
      
 1178 
     | 
    
         
            +
              <b>Name: <input type="text"><br></b>
         
     | 
| 
      
 1179 
     | 
    
         
            +
              <b>Password: <input type="password"><br></b>
         
     | 
| 
      
 1180 
     | 
    
         
            +
             </div>
         
     | 
| 
      
 1181 
     | 
    
         
            +
             <input type="submit">
         
     | 
| 
      
 1182 
     | 
    
         
            +
            </form>
         
     | 
| 
      
 1183 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1184 
     | 
    
         
            +
            <a name="new.html"></a>
         
     | 
| 
      
 1185 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1186 
     | 
    
         
            +
            new.html</div>
         
     | 
| 
      
 1187 
     | 
    
         
            +
            <pre class="program"><form action="/new">
         
     | 
| 
      
 1188 
     | 
    
         
            +
              <div <b>id="mark:placeholder"</b>></div>
         
     | 
| 
      
 1189 
     | 
    
         
            +
              <input type="submit" value="Create">
         
     | 
| 
      
 1190 
     | 
    
         
            +
            </form>
         
     | 
| 
      
 1191 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1192 
     | 
    
         
            +
            <a name="new.plogic"></a>
         
     | 
| 
      
 1193 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1194 
     | 
    
         
            +
            new.plogic</div>
         
     | 
| 
      
 1195 
     | 
    
         
            +
            <pre class="program">/* use element which is defined other file */
         
     | 
| 
      
 1196 
     | 
    
         
            +
            <b>#placeholder</b> {
         
     | 
| 
      
 1197 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 1198 
     | 
    
         
            +
                <b>_content(form_content)</b>
         
     | 
| 
      
 1199 
     | 
    
         
            +
              }
         
     | 
| 
      
 1200 
     | 
    
         
            +
            }
         
     | 
| 
      
 1201 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1202 
     | 
    
         
            +
            <a name="new.expected"></a>
         
     | 
| 
      
 1203 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1204 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 1205 
     | 
    
         
            +
            <pre class="terminal">$ kwartz <b>-i form.html</b> -p new.plogic new.html
         
     | 
| 
      
 1206 
     | 
    
         
            +
            <form action="/new">
         
     | 
| 
      
 1207 
     | 
    
         
            +
              <b>Name: <input type="text"><br></b>
         
     | 
| 
      
 1208 
     | 
    
         
            +
              <b>Password: <input type="password"><br></b>
         
     | 
| 
      
 1209 
     | 
    
         
            +
              <input type="submit" value="Create">
         
     | 
| 
      
 1210 
     | 
    
         
            +
            </form>
         
     | 
| 
      
 1211 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1212 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1213 
     | 
    
         
            +
             
     | 
| 
      
 1214 
     | 
    
         
            +
             
     | 
| 
      
 1215 
     | 
    
         
            +
            <a name="extract"></a>
         
     | 
| 
      
 1216 
     | 
    
         
            +
            <h3 class="section2">Extract Element</h3>
         
     | 
| 
      
 1217 
     | 
    
         
            +
            <p>Command option '-X <i>name</i>' extracts element marked as <i>name</i>
         
     | 
| 
      
 1218 
     | 
    
         
            +
            and command option '-x <i>name</i>' extracts content of element.
         
     | 
| 
      
 1219 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1220 
     | 
    
         
            +
            <a name="show.html"></a>
         
     | 
| 
      
 1221 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1222 
     | 
    
         
            +
            show.html</div>
         
     | 
| 
      
 1223 
     | 
    
         
            +
            <pre class="program"><html>
         
     | 
| 
      
 1224 
     | 
    
         
            +
             <body>
         
     | 
| 
      
 1225 
     | 
    
         
            +
              <div <b>id="mark:content"</b>>
         
     | 
| 
      
 1226 
     | 
    
         
            +
               <h1>Show</h1>
         
     | 
| 
      
 1227 
     | 
    
         
            +
               <p>Name: <span id="mark:name">foo</span></p>
         
     | 
| 
      
 1228 
     | 
    
         
            +
               <p>Email: <span id="mark:email">foo@mail.com</span></p>
         
     | 
| 
      
 1229 
     | 
    
         
            +
              </div>
         
     | 
| 
      
 1230 
     | 
    
         
            +
             </body>
         
     | 
| 
      
 1231 
     | 
    
         
            +
            </html>
         
     | 
| 
      
 1232 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1233 
     | 
    
         
            +
            <a name="show.plogic"></a>
         
     | 
| 
      
 1234 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1235 
     | 
    
         
            +
            show.plogic</div>
         
     | 
| 
      
 1236 
     | 
    
         
            +
            <pre class="program">#name {
         
     | 
| 
      
 1237 
     | 
    
         
            +
              value: user.name;
         
     | 
| 
      
 1238 
     | 
    
         
            +
            }
         
     | 
| 
      
 1239 
     | 
    
         
            +
            #email {
         
     | 
| 
      
 1240 
     | 
    
         
            +
              value: user.email;
         
     | 
| 
      
 1241 
     | 
    
         
            +
            }
         
     | 
| 
      
 1242 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1243 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1244 
     | 
    
         
            +
            compile with '-X'</div>
         
     | 
| 
      
 1245 
     | 
    
         
            +
            <pre class="terminal">$ kwartz <b>-X content</b> -p show.plogic show.html
         
     | 
| 
      
 1246 
     | 
    
         
            +
              <div>
         
     | 
| 
      
 1247 
     | 
    
         
            +
               <h1>Show</h1>
         
     | 
| 
      
 1248 
     | 
    
         
            +
               <p>Name: <span><%= user.name %></span></p>
         
     | 
| 
      
 1249 
     | 
    
         
            +
               <p>Email: <span><%= user.email %></span></p>
         
     | 
| 
      
 1250 
     | 
    
         
            +
              </div>
         
     | 
| 
      
 1251 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1252 
     | 
    
         
            +
            <a name="test_show_cont.expected"></a>
         
     | 
| 
      
 1253 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1254 
     | 
    
         
            +
            compile with '-x'</div>
         
     | 
| 
      
 1255 
     | 
    
         
            +
            <pre class="terminal">$ kwartz <b>-x content</b> -p show.plogic show.html
         
     | 
| 
      
 1256 
     | 
    
         
            +
               <h1>Show</h1>
         
     | 
| 
      
 1257 
     | 
    
         
            +
               <p>Name: <span><%= user.name %></span></p>
         
     | 
| 
      
 1258 
     | 
    
         
            +
               <p>Email: <span><%= user.email %></span></p>
         
     | 
| 
      
 1259 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1260 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1261 
     | 
    
         
            +
             
     | 
| 
      
 1262 
     | 
    
         
            +
             
     | 
| 
      
 1263 
     | 
    
         
            +
            <a name="print-statement"></a>
         
     | 
| 
      
 1264 
     | 
    
         
            +
            <h3 class="section2">Print Statement</h3>
         
     | 
| 
      
 1265 
     | 
    
         
            +
            <p>Print statement is available in 'logic:' property.
         
     | 
| 
      
 1266 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1267 
     | 
    
         
            +
            <a name="print-stmt.html"></a>
         
     | 
| 
      
 1268 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1269 
     | 
    
         
            +
            print-stmt.html</div>
         
     | 
| 
      
 1270 
     | 
    
         
            +
            <pre class="program"><ul>
         
     | 
| 
      
 1271 
     | 
    
         
            +
              <li id="items">foo</li>
         
     | 
| 
      
 1272 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1273 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1274 
     | 
    
         
            +
            <a name="print-stmt.eruby.plogic"></a>
         
     | 
| 
      
 1275 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1276 
     | 
    
         
            +
            print-stmt.eruby.plogic</div>
         
     | 
| 
      
 1277 
     | 
    
         
            +
            <pre class="program">#items {
         
     | 
| 
      
 1278 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 1279 
     | 
    
         
            +
                for item in list
         
     | 
| 
      
 1280 
     | 
    
         
            +
                  _stag
         
     | 
| 
      
 1281 
     | 
    
         
            +
                  <b>print item</b>
         
     | 
| 
      
 1282 
     | 
    
         
            +
                  _etag
         
     | 
| 
      
 1283 
     | 
    
         
            +
                end
         
     | 
| 
      
 1284 
     | 
    
         
            +
              }
         
     | 
| 
      
 1285 
     | 
    
         
            +
            }
         
     | 
| 
      
 1286 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1287 
     | 
    
         
            +
            <a name="print-stmt.eruby.expected"></a>
         
     | 
| 
      
 1288 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1289 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 1290 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -l eruby -p print-stmt.eruby.plogic print-stmt.html
         
     | 
| 
      
 1291 
     | 
    
         
            +
            <ul>
         
     | 
| 
      
 1292 
     | 
    
         
            +
            <%     for item in list %>
         
     | 
| 
      
 1293 
     | 
    
         
            +
              <li id="items"><b><%= item %></b></li>
         
     | 
| 
      
 1294 
     | 
    
         
            +
            <%     end %>
         
     | 
| 
      
 1295 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1296 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1297 
     | 
    
         
            +
            <a name="print-stmt.php.plogic"></a>
         
     | 
| 
      
 1298 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1299 
     | 
    
         
            +
            print-stmt.php.plogic</div>
         
     | 
| 
      
 1300 
     | 
    
         
            +
            <pre class="program">#items {
         
     | 
| 
      
 1301 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 1302 
     | 
    
         
            +
                foreach ($list as $item) {
         
     | 
| 
      
 1303 
     | 
    
         
            +
                  _stag();
         
     | 
| 
      
 1304 
     | 
    
         
            +
                  <b>print($item);</b>
         
     | 
| 
      
 1305 
     | 
    
         
            +
                  _etag();
         
     | 
| 
      
 1306 
     | 
    
         
            +
                }
         
     | 
| 
      
 1307 
     | 
    
         
            +
              }
         
     | 
| 
      
 1308 
     | 
    
         
            +
            }
         
     | 
| 
      
 1309 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1310 
     | 
    
         
            +
            <a name="print-stmt.php.expected"></a>
         
     | 
| 
      
 1311 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1312 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 1313 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -l php -p print-stmt.php.plogic print-stmt.html
         
     | 
| 
      
 1314 
     | 
    
         
            +
            <ul>
         
     | 
| 
      
 1315 
     | 
    
         
            +
            <?php     foreach ($list as $item) { ?>
         
     | 
| 
      
 1316 
     | 
    
         
            +
              <li id="items"><b><?php echo $item; ?></b></li>
         
     | 
| 
      
 1317 
     | 
    
         
            +
            <?php     } ?>
         
     | 
| 
      
 1318 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1319 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1320 
     | 
    
         
            +
            <a name="print-stmt.jstl.plogic"></a>
         
     | 
| 
      
 1321 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1322 
     | 
    
         
            +
            print-stmt.jstl.plogic</div>
         
     | 
| 
      
 1323 
     | 
    
         
            +
            <pre class="program">#items {
         
     | 
| 
      
 1324 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 1325 
     | 
    
         
            +
                <c:forEach var="item" items="${list}">
         
     | 
| 
      
 1326 
     | 
    
         
            +
                  _stag
         
     | 
| 
      
 1327 
     | 
    
         
            +
                  <b>print item</b>
         
     | 
| 
      
 1328 
     | 
    
         
            +
                  _etag
         
     | 
| 
      
 1329 
     | 
    
         
            +
                </c:forEach>
         
     | 
| 
      
 1330 
     | 
    
         
            +
              }
         
     | 
| 
      
 1331 
     | 
    
         
            +
            }
         
     | 
| 
      
 1332 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1333 
     | 
    
         
            +
            <a name="print-stmt.jstl12.expected"></a>
         
     | 
| 
      
 1334 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1335 
     | 
    
         
            +
            compile (JSTL 1.2)</div>
         
     | 
| 
      
 1336 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -l jstl -p print-stmt.jstl.plogic print-stmt.html
         
     | 
| 
      
 1337 
     | 
    
         
            +
            <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
         
     | 
| 
      
 1338 
     | 
    
         
            +
            <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
         
     | 
| 
      
 1339 
     | 
    
         
            +
            <ul>
         
     | 
| 
      
 1340 
     | 
    
         
            +
                <c:forEach var="item" items="${list}">
         
     | 
| 
      
 1341 
     | 
    
         
            +
              <li id="items"><b>${item}</b></li>
         
     | 
| 
      
 1342 
     | 
    
         
            +
                </c:forEach>
         
     | 
| 
      
 1343 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1344 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1345 
     | 
    
         
            +
            <a name="print-stmt.jstl11.expected"></a>
         
     | 
| 
      
 1346 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1347 
     | 
    
         
            +
            compile (JSTL 1.1)</div>
         
     | 
| 
      
 1348 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -l jstl -p print-stmt.jstl.plogic --jstl=1.1 print-stmt.html
         
     | 
| 
      
 1349 
     | 
    
         
            +
            <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
         
     | 
| 
      
 1350 
     | 
    
         
            +
            <ul>
         
     | 
| 
      
 1351 
     | 
    
         
            +
                <c:forEach var="item" items="${list}">
         
     | 
| 
      
 1352 
     | 
    
         
            +
              <li id="items"><b><c:out value="${item}"/></b></li>
         
     | 
| 
      
 1353 
     | 
    
         
            +
                </c:forEach>
         
     | 
| 
      
 1354 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1355 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1356 
     | 
    
         
            +
            <p>It is recommended to use 'elem:', 'stag:', 'etag:', 'cont:', or 'value:' instead of
         
     | 
| 
      
 1357 
     | 
    
         
            +
            print statement because they can escape or unescape exression value.
         
     | 
| 
      
 1358 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1359 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1360 
     | 
    
         
            +
             
     | 
| 
      
 1361 
     | 
    
         
            +
             
     | 
| 
      
 1362 
     | 
    
         
            +
            <a name="begin"></a>
         
     | 
| 
      
 1363 
     | 
    
         
            +
            <h3 class="section2">Add Code at Beginning/End of Document</h3>
         
     | 
| 
      
 1364 
     | 
    
         
            +
            <p>'#DOCUMENT' is a special selector which represents the document.
         
     | 
| 
      
 1365 
     | 
    
         
            +
            In '#DOCUMENT', properties 'begin:' and 'end:' are available to add codes at beginning/end of document.
         
     | 
| 
      
 1366 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1367 
     | 
    
         
            +
            <a name="document-test.html"></a>
         
     | 
| 
      
 1368 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1369 
     | 
    
         
            +
            document-test.html</div>
         
     | 
| 
      
 1370 
     | 
    
         
            +
            <pre class="program"><html>
         
     | 
| 
      
 1371 
     | 
    
         
            +
             <body>hello</body>
         
     | 
| 
      
 1372 
     | 
    
         
            +
            </html>
         
     | 
| 
      
 1373 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1374 
     | 
    
         
            +
            <a name="document-test.plogic"></a>
         
     | 
| 
      
 1375 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1376 
     | 
    
         
            +
            document-test.plogic</div>
         
     | 
| 
      
 1377 
     | 
    
         
            +
            <pre class="program"><b>#DOCUMENT</b> {
         
     | 
| 
      
 1378 
     | 
    
         
            +
              <b>begin:</b> {
         
     | 
| 
      
 1379 
     | 
    
         
            +
                title = _context[:title]
         
     | 
| 
      
 1380 
     | 
    
         
            +
                user  = _context[:user]
         
     | 
| 
      
 1381 
     | 
    
         
            +
              }
         
     | 
| 
      
 1382 
     | 
    
         
            +
              <b>end:</b> {
         
     | 
| 
      
 1383 
     | 
    
         
            +
                print "<!--end-->\n"
         
     | 
| 
      
 1384 
     | 
    
         
            +
              }
         
     | 
| 
      
 1385 
     | 
    
         
            +
            }
         
     | 
| 
      
 1386 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1387 
     | 
    
         
            +
            <a name="document-test.expected"></a>
         
     | 
| 
      
 1388 
     | 
    
         
            +
            <div class="terminal_caption">
         
     | 
| 
      
 1389 
     | 
    
         
            +
            compile</div>
         
     | 
| 
      
 1390 
     | 
    
         
            +
            <pre class="terminal">$ kwartz -p document-test.plogic document-test.html
         
     | 
| 
      
 1391 
     | 
    
         
            +
            <b><%     title = _context[:title] %></b>
         
     | 
| 
      
 1392 
     | 
    
         
            +
            <b><%     user  = _context[:user] %></b>
         
     | 
| 
      
 1393 
     | 
    
         
            +
            <html>
         
     | 
| 
      
 1394 
     | 
    
         
            +
             <body>hello</body>
         
     | 
| 
      
 1395 
     | 
    
         
            +
            </html>
         
     | 
| 
      
 1396 
     | 
    
         
            +
            <b><%= "<!--end-->\n" %></b>
         
     | 
| 
      
 1397 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1398 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1399 
     | 
    
         
            +
             
     | 
| 
      
 1400 
     | 
    
         
            +
             
     | 
| 
      
 1401 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1402 
     | 
    
         
            +
             
     | 
| 
      
 1403 
     | 
    
         
            +
             
     | 
| 
      
 1404 
     | 
    
         
            +
            <a name="topics"></a>
         
     | 
| 
      
 1405 
     | 
    
         
            +
            <h2 class="section1">Other Topics</h2>
         
     | 
| 
      
 1406 
     | 
    
         
            +
            <a name="restriction1"></a>
         
     | 
| 
      
 1407 
     | 
    
         
            +
            <h3 class="section2">Restrictions around presentation logic</h3>
         
     | 
| 
      
 1408 
     | 
    
         
            +
            <p>There are several restrictions in presentation logic file.
         
     | 
| 
      
 1409 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1410 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 1411 
     | 
    
         
            +
            <li>Position in which comment '<code>/* ... */</code>' is available is limited.
         
     | 
| 
      
 1412 
     | 
    
         
            +
               In the following example, 'value:' property will be error because
         
     | 
| 
      
 1413 
     | 
    
         
            +
               string from 'expr;' to the end of comment is regared as argument of 'value:' property.
         
     | 
| 
      
 1414 
     | 
    
         
            +
            <pre class="program">   /* this comment is ok */
         
     | 
| 
      
 1415 
     | 
    
         
            +
               #foo {
         
     | 
| 
      
 1416 
     | 
    
         
            +
                 /* this comment is ok */
         
     | 
| 
      
 1417 
     | 
    
         
            +
                 value:  expr;   /* this comment is NG! */
         
     | 
| 
      
 1418 
     | 
    
         
            +
                 logic: {        /* this comment will be Ruby syntax error! */
         
     | 
| 
      
 1419 
     | 
    
         
            +
                    for item in list    # ruby comment is OK in 'logic:' property
         
     | 
| 
      
 1420 
     | 
    
         
            +
            	  _stag
         
     | 
| 
      
 1421 
     | 
    
         
            +
            	  _cont
         
     | 
| 
      
 1422 
     | 
    
         
            +
            	  _etag
         
     | 
| 
      
 1423 
     | 
    
         
            +
            	end
         
     | 
| 
      
 1424 
     | 
    
         
            +
                 }
         
     | 
| 
      
 1425 
     | 
    
         
            +
               }
         
     | 
| 
      
 1426 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1427 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 1428 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1429 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 1430 
     | 
    
         
            +
            <li>'_stag', '_cont', '_etag', '_elem', '_element()', and '_content()' must be placed
         
     | 
| 
      
 1431 
     | 
    
         
            +
               one in per line, because Kwartz-ruby scans 'logic:' property with regular expression
         
     | 
| 
      
 1432 
     | 
    
         
            +
               pattern such as '/^\s*_(stag|cont|etag|element|content)(\(.*\))\s*$/' or so.
         
     | 
| 
      
 1433 
     | 
    
         
            +
            <pre class="program">   #foo {
         
     | 
| 
      
 1434 
     | 
    
         
            +
                 logic: {
         
     | 
| 
      
 1435 
     | 
    
         
            +
                   # OK
         
     | 
| 
      
 1436 
     | 
    
         
            +
                   if x > 0
         
     | 
| 
      
 1437 
     | 
    
         
            +
                     _elem
         
     | 
| 
      
 1438 
     | 
    
         
            +
                   end
         
     | 
| 
      
 1439 
     | 
    
         
            +
             
     | 
| 
      
 1440 
     | 
    
         
            +
                   # NG (parse failed)
         
     | 
| 
      
 1441 
     | 
    
         
            +
                   _elem if x > 0
         
     | 
| 
      
 1442 
     | 
    
         
            +
                 }
         
     | 
| 
      
 1443 
     | 
    
         
            +
               }
         
     | 
| 
      
 1444 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1445 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 1446 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1447 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 1448 
     | 
    
         
            +
            <li>The number of '{' and '}' must be equal in 'logic:' property.
         
     | 
| 
      
 1449 
     | 
    
         
            +
            <pre class="program">#foo {
         
     | 
| 
      
 1450 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 1451 
     | 
    
         
            +
                str = "{"         # this will be parse error 
         
     | 
| 
      
 1452 
     | 
    
         
            +
                _elem
         
     | 
| 
      
 1453 
     | 
    
         
            +
              }
         
     | 
| 
      
 1454 
     | 
    
         
            +
            }
         
     | 
| 
      
 1455 
     | 
    
         
            +
            #bar {
         
     | 
| 
      
 1456 
     | 
    
         
            +
              logic: {
         
     | 
| 
      
 1457 
     | 
    
         
            +
                str = "{"         # add dummy '}' in comment!
         
     | 
| 
      
 1458 
     | 
    
         
            +
                _elem
         
     | 
| 
      
 1459 
     | 
    
         
            +
              }
         
     | 
| 
      
 1460 
     | 
    
         
            +
            }
         
     | 
| 
      
 1461 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1462 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 1463 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1464 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 1465 
     | 
    
         
            +
            <li>'@import "file.plogic"' should be at the beginning of presentation logic file.
         
     | 
| 
      
 1466 
     | 
    
         
            +
            <pre class="program">   /* OK */
         
     | 
| 
      
 1467 
     | 
    
         
            +
               @import 'file1.plogic';
         
     | 
| 
      
 1468 
     | 
    
         
            +
               
         
     | 
| 
      
 1469 
     | 
    
         
            +
               #foo {
         
     | 
| 
      
 1470 
     | 
    
         
            +
               }
         
     | 
| 
      
 1471 
     | 
    
         
            +
             
     | 
| 
      
 1472 
     | 
    
         
            +
               /* NG */
         
     | 
| 
      
 1473 
     | 
    
         
            +
               @import 'file2.plogic';
         
     | 
| 
      
 1474 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1475 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 1476 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1477 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1478 
     | 
    
         
            +
             
     | 
| 
      
 1479 
     | 
    
         
            +
             
     | 
| 
      
 1480 
     | 
    
         
            +
            <a name="restriction2"></a>
         
     | 
| 
      
 1481 
     | 
    
         
            +
            <h3 class="section2">Restrictions around presentation data</h3>
         
     | 
| 
      
 1482 
     | 
    
         
            +
            <p>Kwartz parses presentation data file by regular expression pattern matching.
         
     | 
| 
      
 1483 
     | 
    
         
            +
            It means that Kwartz doesn't use HTML parser nor XML parser for parsing presentation data.
         
     | 
| 
      
 1484 
     | 
    
         
            +
            This approach enables Kwartz to handle any type of text file, and also brings the following restrictions to Kwartz.
         
     | 
| 
      
 1485 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1486 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 1487 
     | 
    
         
            +
            <li>Cannot omit end tag if id attribute is specified.
         
     | 
| 
      
 1488 
     | 
    
         
            +
            <pre class="program"><!-- Kwartz cannot parse the following because </li> is omitted. -->
         
     | 
| 
      
 1489 
     | 
    
         
            +
            <ul>
         
     | 
| 
      
 1490 
     | 
    
         
            +
             <li id="foo">foo
         
     | 
| 
      
 1491 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1492 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1493 
     | 
    
         
            +
               An Element which doesn't have any content is to be written as an empty tag such as <code><foo id="..."/></code>.
         
     | 
| 
      
 1494 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 1495 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1496 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 1497 
     | 
    
         
            +
            <li>However, <code><input></code>, <code><br></code>, <code><meta></code>, <code><img></code>, and <code><hr></code> are allowed to omit end tag.
         
     | 
| 
      
 1498 
     | 
    
         
            +
               And these doesn't have to be written as an empty tag.
         
     | 
| 
      
 1499 
     | 
    
         
            +
            <pre class="program"><!-- </input/> is omitted but Kwartz can parse correctly. -->
         
     | 
| 
      
 1500 
     | 
    
         
            +
            <input type="text" name="user" id="user">
         
     | 
| 
      
 1501 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1502 
     | 
    
         
            +
               Configuration option PROPERTY_NOEND lists these tag names in file 'kwartz/config.rb'.
         
     | 
| 
      
 1503 
     | 
    
         
            +
               Upper-case and lower-case are distinguished.
         
     | 
| 
      
 1504 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 1505 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1506 
     | 
    
         
            +
            <ul type="disc">
         
     | 
| 
      
 1507 
     | 
    
         
            +
            <li>Attribute values should be surrounded with '<code>"</code>'.
         
     | 
| 
      
 1508 
     | 
    
         
            +
            <pre class="program"><!-- Kwartz fails parsing because attribute value is not surrounded with '"'. -->
         
     | 
| 
      
 1509 
     | 
    
         
            +
            <h1 id="value:title" class=title>title</h1>
         
     | 
| 
      
 1510 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1511 
     | 
    
         
            +
            </li>
         
     | 
| 
      
 1512 
     | 
    
         
            +
            </ul>
         
     | 
| 
      
 1513 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1514 
     | 
    
         
            +
             
     | 
| 
      
 1515 
     | 
    
         
            +
             
     | 
| 
      
 1516 
     | 
    
         
            +
            <a name="makefile"></a>
         
     | 
| 
      
 1517 
     | 
    
         
            +
            <h3 class="section2">Makefile and Rakefile</h3>
         
     | 
| 
      
 1518 
     | 
    
         
            +
            <p>The followings are examples of Makefile, Rakefile, Rantfile, and Rookbook.
         
     | 
| 
      
 1519 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1520 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1521 
     | 
    
         
            +
            example of Makefile</div>
         
     | 
| 
      
 1522 
     | 
    
         
            +
            <pre class="program">.SUFFIXES:  .rhtml .html .plogic
         
     | 
| 
      
 1523 
     | 
    
         
            +
             
     | 
| 
      
 1524 
     | 
    
         
            +
            ALL    = file1.rhtml file2.rhtml file3.rhtml
         
     | 
| 
      
 1525 
     | 
    
         
            +
            LAYOUT = layout.html
         
     | 
| 
      
 1526 
     | 
    
         
            +
             
     | 
| 
      
 1527 
     | 
    
         
            +
            default:  $(ALL)
         
     | 
| 
      
 1528 
     | 
    
         
            +
             
     | 
| 
      
 1529 
     | 
    
         
            +
            %.rhtml:  %.html %.plogic
         
     | 
| 
      
 1530 
     | 
    
         
            +
            	kwartz -l eruby -p $*.plogic $*.html > $@
         
     | 
| 
      
 1531 
     | 
    
         
            +
             
     | 
| 
      
 1532 
     | 
    
         
            +
            file3.rhtml: file3.html file3.plogic $(LAYOUT)
         
     | 
| 
      
 1533 
     | 
    
         
            +
            	kwartz -p file3.plogic -L $(LAYOUT) file3.html > file3.rhtml
         
     | 
| 
      
 1534 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1535 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1536 
     | 
    
         
            +
            example of Rakefile for <a href="http://rake.rubyforge.org/">Rake</a></div>
         
     | 
| 
      
 1537 
     | 
    
         
            +
            <pre class="program">all    = ["file1.rhtml", "file2.rhtml", "file3.rhtml"]
         
     | 
| 
      
 1538 
     | 
    
         
            +
            layout = 'layout.html'
         
     | 
| 
      
 1539 
     | 
    
         
            +
             
     | 
| 
      
 1540 
     | 
    
         
            +
            task :default => all
         
     | 
| 
      
 1541 
     | 
    
         
            +
             
     | 
| 
      
 1542 
     | 
    
         
            +
            rule '.rhtml' => ['.html', '.plogic']           do |t|
         
     | 
| 
      
 1543 
     | 
    
         
            +
              pdata, plogic = t.sources
         
     | 
| 
      
 1544 
     | 
    
         
            +
              sh "kwartz -l eruby -p #{plogic} #{pdata} > #{t.name}"
         
     | 
| 
      
 1545 
     | 
    
         
            +
            end
         
     | 
| 
      
 1546 
     | 
    
         
            +
             
     | 
| 
      
 1547 
     | 
    
         
            +
            file 'file3.rhtml' => ["file3.html", "file3.plogic", layout] do |t|
         
     | 
| 
      
 1548 
     | 
    
         
            +
              pdata, plogic, layout = t.prerequisites
         
     | 
| 
      
 1549 
     | 
    
         
            +
              sh "kwartz -p #{plogic} -L #{layout} #{pdata} > #{t.name}"
         
     | 
| 
      
 1550 
     | 
    
         
            +
            end
         
     | 
| 
      
 1551 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1552 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1553 
     | 
    
         
            +
            example of Rantfile for <a href="http://make.rubyforge.org/">Rant</a></div>
         
     | 
| 
      
 1554 
     | 
    
         
            +
            <pre class="program">all    = ["file1.rhtml", "file2.rhtml", "file3.rhtml"]
         
     | 
| 
      
 1555 
     | 
    
         
            +
            layout = 'layout.html'
         
     | 
| 
      
 1556 
     | 
    
         
            +
             
     | 
| 
      
 1557 
     | 
    
         
            +
            task :default => all
         
     | 
| 
      
 1558 
     | 
    
         
            +
             
     | 
| 
      
 1559 
     | 
    
         
            +
            gen Rule, ".rhtml" => [".html", ".plogic"] do |t|
         
     | 
| 
      
 1560 
     | 
    
         
            +
              pdata, plogic = t.prerequisites
         
     | 
| 
      
 1561 
     | 
    
         
            +
              sys "kwartz -p #{plogic} #{pdata} > #{t.name}"
         
     | 
| 
      
 1562 
     | 
    
         
            +
            end
         
     | 
| 
      
 1563 
     | 
    
         
            +
             
     | 
| 
      
 1564 
     | 
    
         
            +
            file "file3.rhtml" => ["file3.html", "file3.plogic", layout] do |t|
         
     | 
| 
      
 1565 
     | 
    
         
            +
              pdata, plogic, layout = t.prerequisites
         
     | 
| 
      
 1566 
     | 
    
         
            +
              sys "kwartz -p #{plogic} -L #{layout} #{pdata} > #{t.name}"
         
     | 
| 
      
 1567 
     | 
    
         
            +
            end
         
     | 
| 
      
 1568 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1569 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1570 
     | 
    
         
            +
            example of Rookbook for <a href="http://www.rubyforge.org/projects/rook">Rook</a></div>
         
     | 
| 
      
 1571 
     | 
    
         
            +
            <pre class="program">properties:
         
     | 
| 
      
 1572 
     | 
    
         
            +
              - layout  :  layout.html
         
     | 
| 
      
 1573 
     | 
    
         
            +
             
     | 
| 
      
 1574 
     | 
    
         
            +
            variables:
         
     | 
| 
      
 1575 
     | 
    
         
            +
              - all     :  [ file1.rhtml, 'file2.rhtml', file3.rhtml ]
         
     | 
| 
      
 1576 
     | 
    
         
            +
              - rook_product:  $(all)
         
     | 
| 
      
 1577 
     | 
    
         
            +
             
     | 
| 
      
 1578 
     | 
    
         
            +
            recipes:
         
     | 
| 
      
 1579 
     | 
    
         
            +
             
     | 
| 
      
 1580 
     | 
    
         
            +
              - product:	*.rhtml
         
     | 
| 
      
 1581 
     | 
    
         
            +
                ingreds:	[ $(1).html, $(1).plogic ]
         
     | 
| 
      
 1582 
     | 
    
         
            +
                method: |
         
     | 
| 
      
 1583 
     | 
    
         
            +
                    pdata, plogic = @ingreds
         
     | 
| 
      
 1584 
     | 
    
         
            +
            	sys "kwartz -p #{plogic} #{pdata} > #{@product}"
         
     | 
| 
      
 1585 
     | 
    
         
            +
             
     | 
| 
      
 1586 
     | 
    
         
            +
              - product:	file3.rhtml
         
     | 
| 
      
 1587 
     | 
    
         
            +
                ingres:	[ file3.html, file3.plogic, $(layout) ]
         
     | 
| 
      
 1588 
     | 
    
         
            +
                method: |
         
     | 
| 
      
 1589 
     | 
    
         
            +
                    pdata, plogic, layout = @ingreds
         
     | 
| 
      
 1590 
     | 
    
         
            +
            	sys "kwartz- p #{plogic} -L $(layout) #{pdata} > #{@product}"
         
     | 
| 
      
 1591 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1592 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1593 
     | 
    
         
            +
             
     | 
| 
      
 1594 
     | 
    
         
            +
             
     | 
| 
      
 1595 
     | 
    
         
            +
            <a name="kwartz-lib"></a>
         
     | 
| 
      
 1596 
     | 
    
         
            +
            <h3 class="section2">Use Kwartz as Library</h3>
         
     | 
| 
      
 1597 
     | 
    
         
            +
            <p>If you want to use Kwartz library in your Ruby script, use Kwartz::Main class.
         
     | 
| 
      
 1598 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1599 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1600 
     | 
    
         
            +
            usage of Kwartz::Main class</div>
         
     | 
| 
      
 1601 
     | 
    
         
            +
            <pre class="program"><b>require 'kwartz'</b>
         
     | 
| 
      
 1602 
     | 
    
         
            +
            <b>require 'kwartz/main'</b>
         
     | 
| 
      
 1603 
     | 
    
         
            +
             
     | 
| 
      
 1604 
     | 
    
         
            +
            argv = %w[-p hello.plogic -L layout.html hello.html]
         
     | 
| 
      
 1605 
     | 
    
         
            +
            <b>main = Kwartz::Main.new(argv)</b>
         
     | 
| 
      
 1606 
     | 
    
         
            +
            <b>output = main.execute()</b>
         
     | 
| 
      
 1607 
     | 
    
         
            +
            File.open('hello.rhtml', 'w') { |f| f.write(output) }
         
     | 
| 
      
 1608 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1609 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1610 
     | 
    
         
            +
             
     | 
| 
      
 1611 
     | 
    
         
            +
             
     | 
| 
      
 1612 
     | 
    
         
            +
            <a name="start_link_to"></a>
         
     | 
| 
      
 1613 
     | 
    
         
            +
            <h3 class="section2"><code>link_to()</code> method in Ruby on Rails</h3>
         
     | 
| 
      
 1614 
     | 
    
         
            +
            <p><code>link_to()</code> method in Ruby on Rails is a little incompatible with Kwartz
         
     | 
| 
      
 1615 
     | 
    
         
            +
            because you must specify link label in both presentation data and presentation logic.
         
     | 
| 
      
 1616 
     | 
    
         
            +
            It's not DRY.
         
     | 
| 
      
 1617 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1618 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1619 
     | 
    
         
            +
            presentation data</div>
         
     | 
| 
      
 1620 
     | 
    
         
            +
            <pre class="program"><a href="#" id="mark:link_to_new"><b>Create new recipe</b></a>
         
     | 
| 
      
 1621 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1622 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1623 
     | 
    
         
            +
            presentation logic</div>
         
     | 
| 
      
 1624 
     | 
    
         
            +
            <pre class="program">#link_to_new {
         
     | 
| 
      
 1625 
     | 
    
         
            +
              elem:  link_to <b>'Create new recipe'</b>, :action=>'new';
         
     | 
| 
      
 1626 
     | 
    
         
            +
            }
         
     | 
| 
      
 1627 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1628 
     | 
    
         
            +
            <p>It is recommended to include the following helper method
         
     | 
| 
      
 1629 
     | 
    
         
            +
            in your 'app/helpers/application_helper.rb'.
         
     | 
| 
      
 1630 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1631 
     | 
    
         
            +
            <pre class="program">module ApplicationHelper
         
     | 
| 
      
 1632 
     | 
    
         
            +
             
     | 
| 
      
 1633 
     | 
    
         
            +
              def start_link_to(options = {}, html_options = nil, *parameters_for_method_reference)
         
     | 
| 
      
 1634 
     | 
    
         
            +
                s = link_to('', options, html_options, *parameters_for_method_reference)
         
     | 
| 
      
 1635 
     | 
    
         
            +
                s.sub!(/<\/a>\z/, '')
         
     | 
| 
      
 1636 
     | 
    
         
            +
              end
         
     | 
| 
      
 1637 
     | 
    
         
            +
              alias anchor start_link_to
         
     | 
| 
      
 1638 
     | 
    
         
            +
             
     | 
| 
      
 1639 
     | 
    
         
            +
              def start_link_to_remote(options = {}, html_options = {})
         
     | 
| 
      
 1640 
     | 
    
         
            +
                s = link_to_remote(options, html_options)
         
     | 
| 
      
 1641 
     | 
    
         
            +
                s.sub!(/<\/a>\z/, '')
         
     | 
| 
      
 1642 
     | 
    
         
            +
              end
         
     | 
| 
      
 1643 
     | 
    
         
            +
              alias anchor_remote start_link_to_remote
         
     | 
| 
      
 1644 
     | 
    
         
            +
             
     | 
| 
      
 1645 
     | 
    
         
            +
            end
         
     | 
| 
      
 1646 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1647 
     | 
    
         
            +
            <p>The above methods prints only start tag. You don't need to write label twice.
         
     | 
| 
      
 1648 
     | 
    
         
            +
            </p>
         
     | 
| 
      
 1649 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1650 
     | 
    
         
            +
            presentation data</div>
         
     | 
| 
      
 1651 
     | 
    
         
            +
            <pre class="program"><a href="#" id="mark:link_to_new">Create new recipe</a>
         
     | 
| 
      
 1652 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1653 
     | 
    
         
            +
            <div class="program_caption">
         
     | 
| 
      
 1654 
     | 
    
         
            +
            presentation logic</div>
         
     | 
| 
      
 1655 
     | 
    
         
            +
            <pre class="program">#link_to_new {
         
     | 
| 
      
 1656 
     | 
    
         
            +
              stag:  <b>start_link_to</b> :action=>'new';
         
     | 
| 
      
 1657 
     | 
    
         
            +
            }
         
     | 
| 
      
 1658 
     | 
    
         
            +
            </pre>
         
     | 
| 
      
 1659 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1660 
     | 
    
         
            +
             
     | 
| 
      
 1661 
     | 
    
         
            +
             
     | 
| 
      
 1662 
     | 
    
         
            +
            <br>
         
     | 
| 
      
 1663 
     | 
    
         
            +
             
     | 
| 
      
 1664 
     | 
    
         
            +
             
     | 
| 
      
 1665 
     | 
    
         
            +
             
     | 
| 
      
 1666 
     | 
    
         
            +
               </div>
         
     | 
| 
      
 1667 
     | 
    
         
            +
              </blockquote>
         
     | 
| 
      
 1668 
     | 
    
         
            +
             
     | 
| 
      
 1669 
     | 
    
         
            +
             </body>
         
     | 
| 
      
 1670 
     | 
    
         
            +
            </html>
         
     |