Chapter 4: Bling-bling¶
Before we add front-end bling, we need some code that can
handle these requests coming in. Let's create a simple
view that will update the object in context to a new
state. Go to GitHub and copy the code for
todo.py. This class represents a view that our AJAX code will
call. You can also get the code with git, however note
that now we are checking out code from master, as Chapter
4 is the last chapter and its code is in the master
$ git checkout master src/tutorial/todoapp/todo.py
Take a look at the
class and comments around the code. There are a couple of
things to point out specific to this setup:
Tells us that this view should be called in the context of a Dexterity Container item. So if you try to go to this view from the portal root or anywhere in the site that is not a Dexterity item, Plone will return a 404 - not found error. By default all Dexterity types that you create TTW are based on the Dexterity Container base class.
This tells us on which URL the view will be available on.
In this case, on
is a special function that must be used. It is where all
of the code must go when used with grok directives. This
is the main block of code that will be executed.
transition = self.request.form.get('transition', '')
is set by the base class, and anything based on
BrowserView will have access to this variable. All of
GET/POST parameters will be stored in
self.request.response.setHeader( 'Content-Type', 'application/json; charset=utf-8') return json.dumps(results)
When working with JSON, it's not required to set the header content type, but when used with certain jQuery calls it is expected to have the header set correctly. If you don't set this, it will sometimes work and sometimes not. Get used to setting it!
Furthermore, before taking the plunge to wire up
For example, if you have an item at
http://localhost:8080/Plone/todo-list/go-to-the-bathroom, you can test the view by appending the view name and
GET variables to the end of the item's url. However, you
first need to restart your Zope first, so your Python
files get reloaded!
http://localhost:8080/Plone/todo-list/go-to-the-bathroom + update_workflow?transition = complete http://localhost:8080/Plone/todo-list/go-to-the-bathroom/update_workflow?transition=complete
- Write base view and passing test cases
- Test views in browser
- Make ajax interactive
Starting with bling from the start will only bring you pain.
Now that we know the
view is working, let's add some AJAX handling on the top
registry file into your working directory:
git checkout master src/tutorial/todoapp/static/todoapp.js git checkout master src/tutorial/todoapp/profiles/default/jsregistry.xml
contains all configuration needed to tell Plone how it
options that are pretty self explanatory (if you think
like a machine).
Trying it out!¶
Holy moley you made it! Restart Zope (to reload Python files), reactivate the product (to reimport XML files), do a hard reload in your web browser (to clear any caches) and check out your todo list. The todo items should toggle between complete and incomplete without the page reloading. Sweet!
As always, let's add tests! First add the following
Lastly, add a new test module:
test_workflow.py. Download it from GitHub, put and it in your
folder and run tests. Then fiddle around with it to see
what it does. As always, you can use git to get the file.
$ git checkout master src/tutorial/todoapp/tests/test_workflow.py
This concludes the Todo app in Plone tutorial. Congratulations! Now it's time to checkout other tutorials and documentation available on developer.plone.org!