I had really hoped to make a bit more progress with the prefixed library feature for organizing code in Dart, but it seems that it is still not quite baked. Before moving on, I give it a try in the latest version of Dartium.
Since I already have the source code about, I simply need to update and recompile:
gclient sync ./dartium_tools/build.py --mode=ReleaseIt has been a while since I refreshed things, so this takes a while, but it eventually completes OK.
Trying out my prefixed library code, I find... that the Dart engine will no longer start up. After a quick missive to the dart-misc mailing list, I find that I need to change the way in which I kick-start the Dart engine. Previously, it had been:
<!-- Force Dartium to start the script engine -->
<script>{}</script>Now there is the bit more formal:<script>
if (navigator.webkitStartDart) {
navigator.webkitStartDart();
}
</script>And my prefixed library code still does not work. Ah well, the bleeding edge wouldn't be nearly as fun without the blood. Moving on, I drop my home grown solution for running Dart and Javascript side-by-side for the one included in the Dartium source. It is quite similar to my solution, though it replaces the Dart
<script> tags with Javascript equivalents whereas mine created new ones. The main benefit of using the version from the Dart repository is that it will stay in sync with any other changes that might come along in how to start the engine. So I grab the script:$ cd public/scripts $ wget http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.jsAnd update the HTML to reference this script:
<head> <title>Dart Comics</title> <link rel="stylesheet" href="/stylesheets/style.css"> <script src="/scripts/dart.js"></script> <script src="/scripts/main.dart" type="application/dart"></script> </head>With that, I can switch to an uglier, but working version of the prefix'd libraries:
#import('Collections.Comics.dart', prefix: 'Collections');
#import('Views.Comics.dart', prefix: 'ViewsFIXME01');
#import('Views.AddComic.dart', prefix: 'ViewsFIXME02');
main() {
var my_comics_collection = new Collections.Comics()
, comics_view = new ViewsFIXME01.Comics(
el:'#comics-list',
collection: my_comics_collection
);
my_comics_collection.fetch();
new ViewsFIXME02.AddComic(el:'#add-comic');
}Hopefully those FIXMEs will remind me that I really ought to be able to import multiple libraries in to the same namespace.After that, my code again compiles and runs in Dartium. Since I have the latest and greatest Dartium, let's see if Ajax POSTs are working:
Whoa! I had really not expected that to go through. I knew that the dart group had made some progress, but I had not expected it to be working yet. Yay!
Since it is working, I try taking it a step further. After the new comic is added, it is not showing up on the page. I could get that working with a bit of callback spaghetti, but I would like to expand upon my Hipster MVC library. First up, I think is removing some obvious model code from the
AddComicForm class: // Thar be model code here...
_submit_create_form(event) {
var title = el.query('input[name=title]')
, author = el.query('input[name=author]')
, format = el.queryAll('input[name=format]');
print("title: ${title.value}");
print("author: ${author.value}");
print(format);
var data = {'title':title.value, 'author':author.value}
, json = JSON.stringify(data);
print(json);
var req = new XMLHttpRequest();
req.open('post', '/comics', false);
req.setRequestHeader('Content-type', 'application/json');
req.send(json);
print(req.responseText);
}print() statements are what I saw in the screenshot confirming that XHR PUTs are now working in Dart. The rest is model code. In fact, it is already in my HipsterModel base class:class HipsterModel {
// ...
save([callback]) {
var req = new XMLHttpRequest()
, json = JSON.stringify(attributes);
req.on.load.add((event) {
print("[save] ${req.responseText}");
on.save.dispatch(event);
if (callback != null) callback(event);
});
print("[save] $json");
req.open('post', '/comics', true);
req.setRequestHeader('Content-type', 'application/json');
req.send(json);
}
//...
}So I need to add this to the view class. That is easy enough: _submit_create_form(event) {
var title = el.query('input[name=title]')
, author = el.query('input[name=author]')
, format = el.queryAll('input[name=format]');
var comic = new ComicBook({
'title':title.value,
'author':author.value
});
comic.save();
}This has been something of a scattershot post. I began with the pain of the bleeding edge—still not able to prefix libraries properly and a new way of initializing the dart engine. Happily, I end the evening with a new toy—XHR POSTs with body data. Ah, such is life on the bleeding edge. And I wouldn't trade it for anything.
Day #287
No comments:
Post a Comment