Freja Tutorial 2
From CSScripting
View Switching
The first tutorial introduced you to Freja's basic functions. Now you'll see why Freja is called a zero-latency framework.
We're building on the first tutorial, so we keep the same files and we'll just add another view. One that will let us edit the data.
We're modifying the index and javascript files a bit, so here they are again:
- controller/tutorial2.js : The code for this tutorial
- index.html: The page that puts everything together.
index.html (body only)
We need a way to switch from one view to another. To keep it simple, I add two links to the html page: edit and display.
<body>
<div id='content'> </div>
<a href='#' id='editLink'>edit</a>
<a href='#' id='displayLink'>display</a>
</body>
tutorial2.js
The javascript is not that different from our first tutorial. We load up a second view (edit) and then assign some event-handlers to the two links.
var data = getModel('models/data.xml');
var display = getView('views/display.xsl');
var edit = getView('views/edit.xsl');
display.render(data, "content");
document.getElementById('editLink').onclick = function() { edit.render(data, "content"); };
document.getElementById('displayLink').onclick = function() { display.render(data, "content"); };
Each event-handler renders the model using the appropriate view. Since both actions use the same placeholder the views will overwrite each other (hence the switching).
Remark:
On a browser with a XSLT Processor the view switching is instantaneous (no round-trip with the server). This includes IE 5.5+, Firefox/Mozilla (since Netscape 7) and Opera 9. On Safari and Opera 8, the XSL Transformation involves a server-side script, so you'll notice a delay.
We now have a form to edit our data, but that's not doing anything yet. Tutorial 3 will show you how to update your model with just two more lines of code.
