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

On Pruning Your Passions

We live in a hobby-rich world. There is no shortage of pastimes to grow a passion for. There is a shortage of one thing: time to indulge those passions. If you're someone who pours your heart into that one thing that makes your life worthwhile, that's a great deal. But, what if you've got no shortage of interests that draw your attention and you realize you will never have the time for all of them?

If I look at all the things I'd love to do with my life as a rose bush I'm tending, I realize that careful pruning is essential for the best outcome. This is a hard lesson to learn, because it can mean cutting beautiful flowers and watching the petals fall to the ground to wither. It has to be done.

I have a full time job that takes a lot of my mental energy. I have a wife and a son and family time is very important in my house. I try to read more, and I want to keep up with new developments in my career, and I'm trying to make time for simple, intentional relaxing t…

The Insidiousness of The Slow Solution

In software development, slow solutions can be worse than no progress at all. I'll even say its usually worse and if you find yourself making slow progress on a problem, consider stopping while you're a head.

Its easy to see why fast progress is better: either you solve the problem or you prove a proposed solution wrong and find a better one. Even a total standstill in pushing forward on a task or a bug or a request can force you to seek out new information or a second opinion.

Slow solutions, on the other hand, is kind of sneaky. Its insidious. Slow solution is related the Sunk Cost Fallacy, but maybe worse. Slow solutions have you constantly dripping more of your time, energy, and hope into a path that's still unproven, constantly digging a hole. Slow solutions are deceptive, because they still do offer real progress. It is hard to justify abandoning it or trying another route, because it is "working", technically.

We tend to romanticize the late night hacking…

Finding "One Game A Month"

I was really excited about the One Game A Month challenge as soon as I heard about it.
For about two years I've struggled in fits and starts to make my way into game development. This hasn't been productive in any of the ways I hoped when I started. Its really difficult to be fairly experienced as a developer, which I believe I am in my day job as a web developer, while struggling really hard at an area in which your experience just doesn't exist.
Its like being a pilot who doesn't know how to drive.

But this challenge provided a new breath to this little hobby of mine. It gave me a scaffolding to experiment, to learn, to reflect on finished projects. I had spent far too much time on game projects that stretched on far past their exciting phases, bogged down by bad decisions and regret.
And it has worked.
I have a lot to learn. I have a lot of experience to gain through trial and error and mistake and discovery. I have a lot of fun to be had making more small games t…