Created
March 22, 2011 19:48
-
-
Save insin/881908 to your computer and use it in GitHub Desktop.
Akshell newforms demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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> </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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'] | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"libs": { | |
"ak": "akshell/ak:0.3", | |
"newforms": "insin/newforms:0.0.3" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment