Skip to main content

Nevow: Post-Render Injection of LiveFragments

In part of my current project, I've tried to make things very spiffy and use that nice AJAX stuff we all hear so much about. I do this through the wonderful Nevow, which makes much of the work a breeze. Some of the things I wanted to do, however, it isn't there on yet, so I had some more work on. Here is a story.

Nevow has a concept of a LiveFragment, which is a piece of a dynamic webpage that can be placed into a LivePage and attached to a counter class in JavaScript. The Python and JavaScript classes on either side of the pool are able to call methods between one-another, to facilitate anything you want that can be done in either language. All of this works through the transport system of the LivePage to communicate back and forth. Some recent changes allow easier post-render initialization of new LiveFragments, but it isn't perfect yet.

This is how is basically works, and some of this may change soon, as Nevow is a work in progress.

First, we need to take our LiveFragment on the server-side and convert it to something we can pass over to the browser in a remote call. We'll just render the fragment into XML, which makes sense. This is called flattening and is done when Nevow fragments are rendered anyway. We do this after creating and setting up the new LiveFragment. In this context, we are adding the new fragment as a child fragment of the current one.

This assumes you already know how to use LiveFragments, and write the jsClass to go along with it.


f = MyLiveFragment()
f.setFragmentParent(self)
html = flat.flatten(tags.span(xmlns="http://www.w3.org/1999/xhtml")[flat.flatten(f)])
d = self.callRemote('addChild', html)
d.addErrback(lambda m: logmsg("Error adding child: %s" % m))


Now, we need to handle this on the client-side with a JavaScript function implementing this addChild method of our jsClass.


MyModule.MyClass.method(
'addChild',
function (self, html) {
posting_list = Nevow.Athena.NodeByAttribute(self.node, 'class', 'list_node');
posts = Array();
var runtime = Divmod.Runtime.theRuntime;

for (var p=0; p<posting_list.childNodes.length; p++) {
posts.push(posting_list.childNodes[p]);
}
runtime.setNodeContent(posting_list, post_html);
for (var p=0; p<posts.length; p++) {
posting_list.appendChild(posts[p]);
}
});


Now, this is the meat of the deal, so I'll go over it in a piece by piece. The first thing we do is find the node we're going to add a child to. In this case, for some extra excitement, we're going to insert the new child at the beginning, instead of just tacking it on the end. It turns out this isn't the easiest thing in the world, but it isn't difficult by a long shot. We create a new array, children and iterate over the nodes, adding them each to this array. At this point, we use Divmod.Runtime.theRuntime.setNodeContent() to replace all the children of the node with just our new one. Now, we iterate over the list we made and append them all, in order, back to the node. This inserts our new node before any of the others. When we insert the new node with setNodeContent, it is parsed internally and this process requires it is XHTML 1.0 and that the namespace is declared as such. However, the node you flatten is actually prepended first with a script element, in this case, which initializes the component on in the browser, when it all gets added to the document. This will cause some errors parsing, so we wrap the whole thing up in its own span tag and give it the right namespace. Keep this in mind when working out any DOM logic, that you're LiveFragment's root node will be the childnode of this wrapping span. Of course, you can use any type of element to wrap it together, as long as its one top-level node of the XHTML 1.0 namespace.

To summerize, we flatten our LiveFragment. We wrap the script node and the live fragment up in something of the XHTML 1.0 namespace. This is passed in a remote call to a javascript function. The javascript generates a DOM from this and inserts it on the client-side, and the script node initializes the fragment for us. After this, the LiveFragment and its widget can make remote calls back and forth as normal.

This technique is very useful in creating dynamic pages. In my case, I'm using it to allow new postings to a page to appear immediately, and for those postings to be immediately editable through an embedded LiveForm. It can be used for a lot of things, and helps seperate your logic and design.

I don't know if this will be helpful to anyone, but hopefully so. Please let me know of any errors.

Comments

Popular posts from this blog

CARDIAC: The Cardboard Computer

I am just so excited about this. CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer.  One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC? It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operate on

Statement Functions

At a small suggestion in #python, I wrote up a simple module that allows the use of many python statements in places requiring statements. This post serves as the announcement and documentation. You can find the release here . The pattern is the statement's keyword appended with a single underscore, so the first, of course, is print_. The example writes 'some+text' to an IOString for a URL query string. This mostly follows what it seems the print function will be in py3k. print_("some", "text", outfile=query_iostring, sep="+", end="") An obvious second choice was to wrap if statements. They take a condition value, and expect a truth value or callback an an optional else value or callback. Values and callbacks are named if_true, cb_true, if_false, and cb_false. if_(raw_input("Continue?")=="Y", cb_true=play_game, cb_false=quit) Of course, often your else might be an error case, so raising an exception could be u

How To use Sphinx Autodoc on ReadTheDocs with a Django application

Sphinx is awesome for writing documentation. ReadTheDocs is awesome for hosting it. Autodocs are great for covering your entire API easily. Django is a great framework that makes my job easier. Between these four things is an interaction that only brought me pain, however. I'm here to help the next dev avoid this. Autodocs works by importing your modules and walking over the classes and functions to build documentation out of the existing docstrings. It can be used to generate complete API docs quickly and keep them in sync with the libraries existing docstrings, so you won't get conflicts between your docs and your code. Fantastic. This creates a problem when used with Django applications, where many things cannot be imported unless a valid settings module can be found. This can prevent a hurdle in some situations, and requires a little boilerplate to get working properly with Sphinx. It require a little extra to get working on ReadTheDocs. What makes this particularly h