Some Sakai3 front-end developers had a dream:
It felt like quite a big challenge and I wondered if it would be possible from a front-end point of view or not. So I gave it a go.
What we need from the back-end
In Nakamura (the Sakai3 back-end) we are using Apache Sling in combination with Apache Jackrabbit. Which means that when we go to a URL like twitter.2.json we get information back about the structure of it’s contents:
If we remove all the “jcr:” properties on those nodes, it makes it even more clear:
We basically get the hierarchical folder structure back for the twitter widget. If we change default GET servlet for sling or if we make a URL to something like twitter.content.json, it would be possible to get something like this back:
And that, would be genuinely awesome. This would mean that our widget could be loaded into one request! Except for the images – but those could get base64 encoded…
About the example
Before I send a request to the back-end to have this feature enabled, I want to make sure that we could actually make it work in cross-browser, fast and easy to use way.
Basically a Sakai3 page process looks like this:
- When this page is loaded, load all the widgets you embedded on that page.
The Sakai3 widget process goes a bit deeper:
- For each widget type, send one GET request to it’s path. (e.g. devwidgets/twitter.3.json)
- Remove the original <link> and <script> tags from the widget HTML.
- Add the widget HTML to the container on the Sakai3 page.
Maybe I didn’t look well enough, but I actually couldn’t find any native jQuery method that would load the CSS dynamically. So I wrote something that is heavily based on a post by Stoyan Stephanov: