Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Fetching latest commit…

Cannot retrieve the latest commit at this time

..
Failed to load latest commit information.
css
erector_logo_eps
images
js
article.html
article.rb
cheatsheet.html
cheatsheet.rb
clickable_li.rb
community.html
community.rb
developers.html
developers.rb
erector-0.png
erector-logo-huge.png
erector-logo.png
erector.jpg
erector.scss
erector_logo_eps.zip
example.rb
faq.html
faq.rb
fork_me.rb
index.html
index.rb
logo.html
logo.rb
navbar.html
navbar.rb
page.rb
pivotal.gif
promo.rb
rails.html
rails.rb
readme.html
readme.rb
release_notes.html
release_notes.rb
section.html
section.rb
source.rb
userguide.html
userguide.rb

readme.html

<html>
  <head>
    <title>Erector - README</title>
    <style>body, td, a, p {
  font-family: Lucida Grande, Lucida Sans, arial, sans-serif;
  font-size: 11pt; }

body {
  margin: 0;
  padding: 0; }

img {
  border: none; }

.clear {
  clear: both; }

ul {
  list-style-position: inside; }

li {
  margin-left: 1.5em;
  padding-bottom: .5em; }

li > p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0; }

h1 {
  /*  font-variant: small-caps;*/
  border-bottom: 1px solid gray;
  /*  background: #EEE; */
  padding: .25em;
  padding-left: 0px;
  margin-left: 0px;
  text-shadow: #999 1px 1px 1px; }

h2 {
  margin-top: 2em;
  background: #FEFEEB;
  padding: .25em;
  border: 1px solid #CCC;
  text-shadow: #999 1px 1px 1px; }

pre {
  background-color: #f4f4FF;
  border: 1px solid gray;
  padding: .5em 1em;
  overflow: auto;
  font-family: Inconsolata, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; }

pre.sh_html {
  background-color: #FFFADE; }

code {
  background-color: #F4F4FF;
  font-size: 12pt; }

/* cheatsheet */
table.cheatsheet {
  border-style: outset;
  border-collapse: collapse;
  font-size: 10pt; }
  table.cheatsheet code {
    background-color: #EEEEFF; }
  table.cheatsheet i {
    font-size: 11pt; }
  table.cheatsheet th {
    background-color: #EDEDED; }
  table.cheatsheet td, table.cheatsheet th {
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    padding: .5em;
    font-size: 10pt; }
  table.cheatsheet td {
    vertical-align: top; }

.separator {
  margin-right: 10px;
  font-size: 36pt; }

/* top */
div.top {
  background-color: #FEFDCD;
  /*  background-color: #FDF909;
  */
  text-align: bottom;
  margin: 0;
  padding: 8px 8px 4px; }
  div.top .logo {
    margin: 2px auto; }
    div.top .logo img {
      opacity: 0.6; }

/* navbar */
div.navbar {
  width: 100%;
  margin: 0 0 2px;
  padding: 8px 0px 11px;
  /* no idea why, but this centers the buttons*/
  overflow-vertical: auto;
  text-align: left;
  background-color: #A3D3D1;
  border-top: 1px solid #6881BA;
  border-bottom: 1px solid #6881BA; }
  div.navbar h3 {
    margin-bottom: .25em; }
  div.navbar ul {
    list-style-type: none;
    display: inline;
    margin: -1px 0px 0px;
    padding: 8px 0px;
    list-style-type: none; }
  div.navbar li.clickable {
    display: inline;
    color: #ccdcea;
    background-color: #3470a2;
    list-style-type: none;
    margin: 8px;
    padding: 4px 6px;
    /*  font-variant: small-caps;*/
    border: 2px solid #6881BA; }
    div.navbar li.clickable a, div.navbar li.clickable a:visited {
      text-decoration: none;
      /*font-weight: bold;*/
      color: white;
      margin: 0;
      font-size: 10pt; }
  div.navbar li.clickable:hover {
    background-color: blue;
    cursor: pointer;
    cursor: hand; }
  div.navbar li.clickable.current {
    font-weight: bold;
    border: 2px solid black;
    background-color: #3875D7; }
    div.navbar li.clickable.current a {
      color: white; }

/* main */
.main {
  margin: 0 auto; }

.footer {
  font-size: 10pt;
  border-top: 1px solid black;
  padding: 1em; }

.body {
  max-width: 60em;
  margin-left: 100px;
  margin-right: 100px; }

.body a {
  color: #6881BA;
  text-decoration: none;
  border-bottom: 1px dotted; }

.main h1.title {
  margin: 0 200px;
  text-align: center; }

/* article */
div.toc {
  margin: 1em .25em;
  display: inline-block;
  border: 1px solid black; }
  div.toc h2 {
    margin: 0; }
  div.toc ul, div.toc ol {
    padding: .25em 1em; }

.promo_wrapper {
  float: right; }

div.promo_wrapper {
  text-align: center;
  margin: 4px;
  padding: 4px; }

div.promo {
  display: inline-block;
  border: 2px solid #6881BA;
  text-align: center;
  background: white; }
  div.promo img {
    border: 2px solid black;
    margin: 2px; }
  div.promo p {
    padding: .25em .5em; }

/* example */
div.example {
  position: relative;
  border: 2px solid darkblue;
  margin: 1em;
  padding: .5em; }
  div.example .before, div.example .after {
    margin: 1em;
    text-align: top;
    vertical-align: top; }
    div.example .before pre, div.example .after pre {
      margin: 0;
      width: 100%; }
</style>
    <script src="js/sh_main.min.js"></script>
    <script src="js/sh_lang/sh_ruby.min.js"></script>
    <script src="js/sh_lang/sh_html.min.js"></script>
    <script src="js/sh_lang/sh_sh.min.js"></script>
    <link href="css/sh_style.css" rel="stylesheet" type="text/css" />
  </head>
  <body onload="sh_highlightDocument();">    <a href="http://github.com/erector/erector"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
    <div class="top">      <div class="logo"><a href="index.html"><img src="erector-logo.png" /></a></div>
    </div>
    <div class="navbar">      <ul class="clickable">
        <li class="clickable" onclick="document.location=&#39;index.html&#39;"><a href="index.html">Home</a></li>
        <li class="clickable" onclick="document.location=&#39;userguide.html&#39;"><a href="userguide.html">User Guide</a></li>
        <li class="clickable" onclick="document.location=&#39;rails.html&#39;"><a href="rails.html">Erector On Rails</a></li>
        <li class="clickable" onclick="document.location=&#39;faq.html&#39;"><a href="faq.html">FAQ</a></li>
        <li class="clickable" onclick="document.location=&#39;cheatsheet.html&#39;"><a href="cheatsheet.html">Cheatsheet</a></li>
        <li class="clickable" onclick="document.location=&#39;rdoc&#39;"><a href="rdoc">RDoc API</a></li>
        <li class="clickable" onclick="document.location=&#39;developers.html&#39;"><a href="developers.html">For Developers</a></li>
        <li class="clickable" onclick="document.location=&#39;release_notes.html&#39;"><a href="release_notes.html">Release Notes</a></li>
        <li class="clickable" onclick="document.location=&#39;community.html&#39;"><a href="community.html">Community</a></li>
      </ul>
    </div>
    <div class="promo_wrapper">      <div class="promo"><img src="images/erector-the-worlds-greatest-toy.jpg" /></div>
    </div>
    <div class="main">      <div class="body"><ul><li>
<p><a href="http://erector.github.io/erector">erector.github.io/erector</a></p>
</li><li>
<p><a href="mailto:erector@googlegroups.com">erector@googlegroups.com</a></p>
</li><li>
<p><a href="http://github.com/erector/erector">github.com/erector/erector</a></p>
</li><li>
<p><a
href="http://www.pivotaltracker.com/projects/482">www.pivotaltracker.com/projects/482</a></p>
</li></ul>

<h2 id="label-DESCRIPTION">DESCRIPTION</h2>

<p>Erector is a Builder-like view framework, inspired by Markaby but
overcoming some of its flaws. In Erector all views are objects, not
template files, which allows the full power of object-oriented programming
(inheritance, modular decomposition, encapsulation) in views. See the rdoc
for the <a href="rdoc/classes/Erector/Widget.html">Erector::Widget</a> class to learn how to make your own widgets, and
visit the project site at <a
href="http://erector.github.io/erector">erector.github.io/erector</a> for
more documentation.</p>

<p>No, seriously, we&#39;ve got hella docs at <a
href="http://erector.github.io/erector">erector.github.io/erector</a> – go
check it out.</p>

<h2 id="label-SYNOPSIS">SYNOPSIS</h2>

<pre class="ruby"><span class="ruby-identifier">require</span> <span class="ruby-string">&#39;erector&#39;</span>

<span class="ruby-keyword">class</span> <span class="ruby-constant">Hello</span> <span class="ruby-operator">&lt;</span> <span class="ruby-constant">Erector</span><span class="ruby-operator">::</span><span class="ruby-constant">Widget</span>
  <span class="ruby-keyword">def</span> <span class="ruby-identifier">content</span>
    <span class="ruby-identifier">html</span> <span class="ruby-keyword">do</span>
      <span class="ruby-identifier">head</span> <span class="ruby-keyword">do</span>
        <span class="ruby-identifier">title</span> <span class="ruby-string">&quot;Hello&quot;</span>
      <span class="ruby-keyword">end</span>
      <span class="ruby-identifier">body</span> <span class="ruby-keyword">do</span>
        <span class="ruby-identifier">text</span> <span class="ruby-string">&quot;Hello, &quot;</span>
        <span class="ruby-identifier">b</span> <span class="ruby-ivar">@target</span>, :<span class="ruby-keyword">class</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-string">&#39;big&#39;</span>
        <span class="ruby-identifier">text</span> <span class="ruby-string">&quot;!&quot;</span>
      <span class="ruby-keyword">end</span>
    <span class="ruby-keyword">end</span>
  <span class="ruby-keyword">end</span>
<span class="ruby-keyword">end</span>

<span class="ruby-constant">Hello</span>.<span class="ruby-identifier">new</span>(:<span class="ruby-identifier">target</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-string">&#39;world&#39;</span>).<span class="ruby-identifier">to_html</span>
=<span class="ruby-operator">&gt;</span> <span class="ruby-string">&quot;&lt;html&gt;&lt;head&gt;&lt;title&gt;Hello&lt;/title&gt;&lt;/head&gt;&lt;body&gt;Hello, &lt;b class=\&quot;big\&quot;&gt;world&lt;/b&gt;!&lt;/body&gt;&lt;/html&gt;&quot;</span>

<span class="ruby-identifier">include</span> <span class="ruby-constant">Erector</span><span class="ruby-operator">::</span><span class="ruby-constant">Mixin</span>
<span class="ruby-identifier">erector</span> { <span class="ruby-identifier">div</span> <span class="ruby-string">&quot;love&quot;</span>, :<span class="ruby-keyword">class</span> =<span class="ruby-operator">&gt;</span> <span class="ruby-string">&quot;big&quot;</span> }
=<span class="ruby-operator">&gt;</span> <span class="ruby-string">&quot;&lt;div class=\&quot;big\&quot;&gt;love&lt;/div&gt;&quot;</span>
</pre>

<h2 id="label-REQUIREMENTS">REQUIREMENTS</h2>

<p>The gem depends on rake and treetop, although this is just for using the
command-line tool, so deployed applications won&#39;t need these. The
Rails-dependent code is now separated so you can use Erector cleanly in a
non-Rails app.</p>

<h2 id="label-INSTALL">INSTALL</h2>

<p>To install as a gem:</p>
<ul><li>
<p>sudo gem install erector</p>
</li></ul>

<p>Then add “require &#39;erector&#39;” to any files which need erector.</p>

<p>To install as a Rails plugin:</p>
<ul><li>
<p>Copy the erector source to vendor/plugins/erector in your Rails directory.</p>
</li></ul>

<p>When installing this way, erector is automatically available to your Rails
code (no require directive is needed).</p>

<h2 id="label-TESTS">TESTS</h2>

<p>Three spec rake tasks are provided: spec:core (core functionality),
spec:erect (the erector command line tool), and spec:rails (rails
integration).</p>

<p>&#39;rake spec&#39; will run the complete set of specs.</p>

<h2 id="label-CONTRIBUTING">CONTRIBUTING</h2>
<ol><li>
<p>Fork it</p>
</li><li>
<p>Create your feature branch (`git checkout -b my-new-feature`)</p>
</li><li>
<p>Commit your changes (`git commit -am &#39;Add some feature&#39;`)</p>
</li><li>
<p>Push to the branch (`git push origin my-new-feature`)</p>
</li><li>
<p>Create new Pull Request</p>
</li></ol>

<p>See web site docs for more details.</p>

<h2 id="label-CREDITS">CREDITS</h2>

<p>Core Team:</p>
<ul><li>
<p>Alex Chaffee</p>
</li><li>
<p>Jim Kingdon</p>
</li></ul>

<p>Special Thanks To:</p>
<ul><li>
<p>Abby (Chaffee&#39;s muse &amp; Best friend)</p>
</li><li>
<p>Brian Takita</p>
</li><li>
<p>Jeff Dean</p>
</li><li>
<p>John Firebaugh</p>
</li><li>
<p>Nathan Sobo</p>
</li><li>
<p>Nick Kallen</p>
</li><li>
<p>Alon Salant</p>
</li><li>
<p>Andy Peterson</p>
</li></ul>

<h2 id="label-VERSION+HISTORY">VERSION HISTORY</h2>

<p>see History.txt</p>

<h2 id="label-LICENSE%3A+MIT">LICENSE: MIT</h2>

<p>see LICENSE.txt</p>
<hr />
        <p>Don&#39;t forget to read the <a href="userguide.html">User Guide</a> and <a href="faq.html">FAQ</a> and <a href="rdoc">API</a></p>
      </div>
      <div class="footer"><a href="http://www.pivotallabs.com"><img alt="Pivotal Labs" height="57" src="pivotal.gif" style="float:right; padding: 8px;" width="158" /></a>
        <center>Erector is an open source project released under the MIT license.<br />
Its initial development was sponsored by <a href="http://pivotallabs.com">Pivotal Labs</a>.<br />
          Not affiliated with or sponsored by the makers of Erector or Meccano toys.</center>
      </div>
    </div>
  </body>
</html>
Something went wrong with that request. Please try again.