Add a comprehensive example of using pyjaco and jquery to build a tod…

…o list.
dusty-phillips · Jan 8, 2012 · 637e021 · 637e021
1 parent f8b409f
commit 637e021
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 0 deletions.
diff --git a/examples/pyjados/README b/examples/pyjados/README
@@ -0,0 +1,13 @@
+A complete todos application written in pyjaco with html5 local storage for
+persistence.
+
+build the standard library using:
+pyjs.py -b generate -o py-builtins.js
+
+Then compile using:
+pyjs.py pyjados.py -o pyjados.js
+
+open the app in a web browser
+
+For more information, see the tutorial at:
+http://archlinux.me/dusty/2012/01/08/pyjaco-in-a-real-app-todos-with-local-storage/
diff --git a/examples/pyjados/index.html b/examples/pyjados/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>PyJaco Todo List Example</title>
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+    <script type="text/javascript" src="py-builtins.js"></script>
+    <script type="text/javascript" src="pyjados.js"></script>
+  </head>
+  <body>
+    <h1>PyJaco Todo List Example</h1> 
+    <form id="add_todo_form">
+      <input type="text" id="add_box" placeholder="Add Todo", autofocus="autofocus">
+      <button id="add_button">Add Todo</button>
+    </form>
+    <ul id="todo_items"></ul>
+  </body>
+</html>
diff --git a/examples/pyjados/pyjados.py b/examples/pyjados/pyjados.py
@@ -0,0 +1,59 @@
+class TodosApp:
+    list_item_template = """<li id="todo_%(id)s">
+    <input type="checkbox"/>%(text)s
+    </li>"""
+
+    @JSVar("jQuery", "js_add_form", "js_checkbox", "js_stored_todos", "JSON")
+    def __init__(self):
+        js_add_form = jQuery(js("#add_todo_form"))
+        js_add_form.submit(js(self.add_todo))
+        js_checkbox = jQuery(js("input[type=checkbox]"))
+        js_checkbox.live("click", js(self.complete_todo))
+        self.todos = {}
+        self.next_id = 1
+
+        js_stored_todos = localStorage.getItem("todolist")
+
+        if js_stored_todos:
+            stored_dict = dict(py(JSON.parse(js_stored_todos)))
+            self.todos = dict([(int(i), stored_dict[i]) for i in stored_dict.keys()])
+            self.next_id = max(self.todos.keys()) + 1
+
+        self.render()
+
+    @JSVar("event", "js_add_box")
+    def add_todo(self, js_event):
+        js_add_box = jQuery(js("#add_box"))
+        self.todos[self.next_id] = py(js_add_box.val())
+        js_add_box.val('')
+        js_add_box.focus()
+        self.next_id += 1
+        self.store()
+        self.render()
+        return js(False)
+
+    @JSVar("event", "jQuery", "todo_item")
+    def complete_todo(self, event):
+        todo_item = jQuery(event.target).parent()
+        id = int(py(todo_item.attr("id"))[5:])
+        del self.todos[id]
+        self.store()
+        todo_item.delay(1500).fadeOut("slow")
+
+    @JSVar("js_todo_items")
+    def render(self):
+        js_todo_items = jQuery(js("#todo_items"))
+        js_todo_items.html("")
+        for id, todo in sorted(self.todos.items()):
+            js_todo_items.append(js(TodosApp.list_item_template % {
+                "id": id,
+                "text": todo}))
+
+    @JSVar("localStorage", "JSON")
+    def store(self):
+        localStorage.setItem("todolist", JSON.stringify(js(self.todos)))
+
+def setup():
+    todo_app = TodosApp()
+
+jQuery(js(setup));