/scalate-website/src/documentation/scuery.page

  1---
  2title: Scuery
  3in_menu: false
  4sort_info: 2
  5--- name:overview
  6# Scuery
  7
  8Transform HTML using jQuery style DSL in Scala
  9
 10--- name:content pipeline:jade
 11
 12.left
 13  :markdown
 14    # Scuery
 15
 16.right
 17  :markdown
 18
 19    **Scuery** provides an XML transformation library which uses a jQuery style approach, using CSS3 selectors to transform HTML or XHTML to inject dynamic information from static HTML/XHTML documents owned by designers.
 20
 21    For example a designer could create a mock up layout in HTML; or have a sample page with mock data. Scuery can then be used to transform the XML, using Scala's [NodeSeq](http://www.scala-lang.org/api/current/scala/xml/NodeSeq.html) with CSS3 selectors.
 22
 23
 24.left
 25  :markdown
 26    # Simple Example
 27
 28.right
 29  :markdown
 30
 31    If you had the following HTML...
 32
 33    {pygmentize:: html}
 34    <div id="content">
 35      <table class="people">
 36        <tr>
 37          <th>Name</th>
 38          <th>Location</th>
 39        </tr>
 40        <tr>
 41          <td class="name">DummyName</td>
 42          <td class="location">DummyLocation</td>
 43        </tr>
 44      </table>
 45    </div>
 46    {pygmentize}
 47
 48    Then you can transform this with the following code.
 49
 50    {pygmentize:: scala}
 51    object transformer extends Transformer {
 52      $("table .name").contents = "Hiram"
 53      $(".location").contents = "Tampa"
 54    }
 55
 56    val result = transformer(xml)
 57    {pygmentize}
 58
 59    We are creating an object, transformer, which we can then use as a function to transform XML.
 60
 61.left
 62  :markdown
 63    # More complex example
 64
 65.right
 66  :markdown
 67
 68    Typically you want to iterate through collections so something like this...
 69
 70    {pygmentize:: html}
 71    <div id="content">
 72      <table class="people">
 73        <tr>
 74          <th>Name</th>
 75          <th>Location</th>
 76        </tr>
 77        <tr class="person">
 78          <td class="name">DummyName</td>
 79          <td class="location">DummyLocation</td>
 80        </tr>
 81      </table>
 82    </div>
 83    {pygmentize}
 84
 85    There's the Scala code to create the transformer...
 86
 87    {pygmentize:: scala}
 88    // add an implicit conversion from Transform -> NodeSeq
 89    import org.fusesource.scalate.scuery.Transform._
 90
 91    val people = List(Person("James", "Mells"), 
 92                      Person("Hiram", "Tampa"))
 93
 94    object transformer extends Transformer {
 95      $(".person") { node =>
 96        people.flatMap { p =>
 97          new Transform(node) {
 98            $(".name").contents = p.name
 99            $(".location").contents = p.location
100          }
101        }
102      }
103    }
104    {pygmentize}
105  
106    Which would generate
107
108    {pygmentize:: html}
109    <div id="content">
110      <table class="people">
111        <tr>
112          <th>Name</th>
113          <th>Location</th>
114        </tr>
115        <tr class="person">
116          <td class="name">James</td>
117          <td class="location">Mells</td>
118        </tr>
119        <tr class="person">
120          <td class="name">Hiram</td>
121          <td class="location">Tampa</td>
122        </tr>
123      </table>
124    </div>
125    {pygmentize}
126