Akshell newforms demo

comments.html

{% extends 'base.html' %}

{% block title %}Comments{% endblock %}

{% block content %}
  <h1>Comments</h1>
  <form action="." method="POST">
    {% csrfToken %}
    {% if form.nonFieldErrors.isPopulated %}
    {{ form.nonFieldErrors }}
    {% endif %}
    <table><tbody>
    {% for field in form.boundFields %}
    <tr>
      <th>{{ field.labelTag }}</th>
      <td>{{ field }}</td>
      {% if field.errors.isPopulated %}
      <td>{{ field.errors }}</td>
      {% endif %}
    </tr>
    {% endfor %}
    <tr>
      <th>&nbsp;</th>
      <td>
        <input type="submit" value="Submit">
        <a href="{% url "index" %}">Back to index</a>
      </td>
    </tr>
    </tbody></table>
  </form>

  {% if comments %}
  <div id="comments">
  {% for comment in comments %}
  <div class="comment" id="comment{{ comment.id }}">
    <span class="comment-author">{{ comment.name }}</span>
    <div class="comment-body">
    {{ comment.comment|breakLines }}
    </div>
    <span class="comment-when">{{ comment.created|timeSince }} ago</span>
  </div>
  {% endfor %}
  </div>
  {% endif %}
{% endblock %}

index.html

{% extends 'base.html' %}

{% block title %}Akshell & Newforms Demo{% endblock %}

{% block content %}
  <p>
    Some examples of using <a href="https://github.com/insin/newforms">newforms</a> with Akshell.
    <a href="#source">View demo source</a> below.
  </p>
  <p>Libraries available for use by other Akshell apps are:</p>
  <ul>
    <li><code>insin/newforms:0.0.2</code></li>
    <li><code>insin/<a href="https://github.com/insin/DOMBuilder">DOMBuilder</a>:1.4.1</code></li>
  </ul>
  <p>Try the <a href="{% url "comments" %}">comments page</a> for some interaction with consequences.</p>
  <h1>{{ header }}</h1>
  <form action="." method="POST">
    {% csrfToken %}
    {% if form.nonFieldErrors.isPopulated %}
    {{ form.nonFieldErrors }}
    {% endif %}
    <table><tbody>
    {% for field in form.boundFields %}
    <tr>
      <th>{{ field.labelTag }}<th>
      <td>{{ field }}</td>
      {% if field.errors.isPopulated %}
      <td>{{ field.errors }}</td>
      {% endif %}
    </tr>
    {% endfor %}
    </tbody></table>
    <input type="submit" value="Submit">
  </form>
  
  {% if formset %}
  <h1>FormSet Test (Display Only)</h1>
  <form>
  {% for form in formset.forms %}
    <h2>Contact Form {{ forloop.counter }}</h2>
    <table><tbody>
    {{ form }}
    </tbody></table>
  {% endfor %}
  </form>
  {% endif %}
  
  <h1 id="source">Source</h1>
  <script src="https://gist.github.com/881908.js?sfgdata=+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA%3D%3D+q"></script>
{% endblock %}

main.js

require('ak').setup();

var forms = require('newforms');
var testforms = require('./testforms');

var FakeFile = function() { this.url = "#something"; };
FakeFile.prototype.toString = function() { return this.url; };

var IndexHandler = Handler.subclass({
  perform: function(request) {
    var form, header;
    if (request.method === 'POST') {
      form = testforms.TestForm({data: request.post});
      header = (form.isValid() ? "Valid!" : "Invalid!"); 
    } else {
      form = testforms.TestForm();
      header = 'Hello World!';
    }
    
    var formset = testforms.ContactFormFormSet({
      initial: [{
        name: "Test",
        email: "test@test.com",
        body: "Testing\n\nTesting",
        source: 2,
        stuff: [1,3],
        checkTheBoxes: [1,5],
        zeeMikrofilm: new FakeFile()
      }]
    });
    
    return render('index.html', {
      header: header,
      form: form,
      formset: formset
    });
  }
});

init = function() {
  rv.Comment.create({
    id: 'unique serial',
    name: 'string',
    comment: 'string',
    created: 'date'
  });
};

var CommentForm = forms.Form({
  name: forms.CharField({maxLength: 20}),
  comment: forms.CharField({maxLength: 140, widget: forms.Textarea})
});

var CommentHandler = Handler.subclass({
  perform: function(request) {
    var form;
    if (request.method === 'POST') {
      form = CommentForm({data: request.post});
      if (form.isValid()) {
        rv.Comment.insert(forms.util.extend({}, form.cleanedData, {
          created: new Date()
        }));
        return redirect('/comments/');
      }
    } else {
      form = CommentForm();
    }
    return render('comments.html', {
      form: form,
      comments: rv.Comment.all().get({by: '-id'})
    });
  }
});

exports.root = new URLMap(
  IndexHandler, 'index',
  ['comments/', CommentHandler, 'comments']
);

manifest.json

{
  "libs": {
    "ak": "akshell/ak:0.3",
    "newforms": "insin/newforms:0.0.3"
  }
}

testfowms.js

var forms = require('newforms');

var SOURCE_CHOICES = [
      ["", "----------"],
      [1, "In a specialist catalogue"],
      [2, "On the internet"],
      [3, "Other"]
    ],
    CAT_SOURCE_CHOICES = [
      ["Physical Locations", [
        [1, "In a specialist catalogue"]
      ]],
      ["Virtual Locations", [
        [2, "On the internet"]
      ]],
      ["Somewhere Else Entirely", [
        [3, "Other"]
      ]]
    ],
    STUFF_CHOICES = [
      [1, "Specialist catalogues"],
      [2, "The internet"],
      [3, "The catalogues"],
      [4, "Special internets"],
      [5, "Other"]
    ],
    CAT_STUFF_CHOICES = [
      ["Animals", [
        [1, "Cats"],
        [2, "Dogs"]
      ]],
      ["Food", [
        [3, "Pizza"],
        [4, "Bananas"]
      ]]
    ];

var ContactForm = forms.Form({
  name:
      forms.CharField({minLength: 1, maxLength: 100, label: "Your name"}),
  age:
      forms.IntegerField({minValue: 1, maxValue: 120, label: "Your age"}),
  faveFloat:
      forms.FloatField({
        minValue: 1.5, maxValue: 24.5,
        label: "Your favourite number between 1.5 and 24.5"
      }),
  faveDecimal:
      forms.DecimalField({
        maxDigits: 4, decimalPlaces: 2,
        label: "Your favourite decimal"
      }),
  phoneNumber:
      forms.RegexField(/\d{3}-\d{5}/, {
        label: "Your phone number (e.g. 555-12345)",
        errorMessages: {
          invalid: "Not a valid phone number"
        }
      }),
  email:
      forms.EmailField({
        widget: forms.TextInput({attrs: {maxlength: "200"}}),
        label: "Your email address"
      }),
  zeeMikrofilm:
      forms.FileField({required: false, label: "Please upload zee mikrofilm"}),
  photo:
      forms.ImageField({required: false, label: "Photo or it didn't happen"}),
  website:
      forms.URLField({
        widget: forms.TextInput({attrs: {size: "50"}}),
        label: "Your website URL"
      }),
  faveIPAddress:
      forms.IPAddressField({label: "Your favourite IP address... you freak"}),
  body:
      forms.CharField({widget: forms.Textarea(), label: "Your message"}),
  source:
      forms.ChoiceField({
        choices: SOURCE_CHOICES,
        label: "Where did you hear about us?"
      }),
  catSource:
      forms.ChoiceField({
        choices: CAT_SOURCE_CHOICES,
        label: "Where did you hear about us again, with feeling?"
      }),
  moreSource:
      forms.ChoiceField({
        choices: SOURCE_CHOICES,
        label: "Where did you hear about us again?",
        widget: forms.RadioSelect()
      }),
  stuff:
      forms.MultipleChoiceField({
        choices: STUFF_CHOICES, attrs: {size: 5},
        label: "Pick stuff you like"
      }),
  catStuff:
      forms.MultipleChoiceField({
        choices: CAT_STUFF_CHOICES,
        label: "Pick more stuff you like"
      }),
  awesome:
      forms.BooleanField({initial: true, label: "Check here if you are awesome!"}),
  likeMonkeys:
      forms.NullBooleanField({initial: "2", label: "Do you like monkeys?"}),
  intBeginningWith5:
      forms.ComboField({
        fields: [forms.RegexField(/^[-+]?5/), forms.IntegerField()],
        label: "Type an integer begining with 5"
      }),
  birthday:
      forms.DateField({label: "Your birthday"}),
  wokeUpAt:
      forms.TimeField({label: "What time did you wake up at today?"}),
  howSoonIsNow:
      forms.DateTimeField({
        initial: new Date(),
        label: "What time was it when this page was rendered?"
      }),
  againWithFeeling:
      forms.SplitDateTimeField({initial: new Date(), label: "Once again"}),
  checkTheBoxes:
      forms.MultipleChoiceField({
        choices: STUFF_CHOICES, attrs: {size: 5},
        label: "Check stuff you like",
        widget: forms.CheckboxSelectMultiple()
      }),

  cleanName: function() {
    if (this.cleanedData.name !== "Cheese") {
      throw forms.ValidationError('Your name must be "Cheese".');
    }
    return this.cleanedData.name;
  }
});

exports.ContactFormFormSet = forms.FormSet(ContactForm, {extra: 1, canDelete: true});

exports.TestForm = forms.Form({
  username: forms.CharField(),
  password: forms.CharField({widget: forms.PasswordInput}),

  clean: function() {
    if (this.cleanedData.username && this.cleanedData.password &&
        (this.cleanedData.username !== 'admin' ||
         this.cleanedData.password !== 'secret')) {
      throw forms.ValidationError('Psst! The username is "admin" and the password is "secret"');
    }
    return this.cleanedData;
  }
});