17. Dart Timeline
• Inspired by Java, JavaScript, GWT
• Revealed in October 2011
• Frequent public releases
• June 19, 2013 First Beta version
• Production ~2014
18. Warning: Dart is hot!
Code shown will not probably
work after two months
22. Ways of Working
• Working in pairs
• Writing automated tests
• 5 Steps to complete
• Solutions available online
https://github.com/buzdin/dart-workshop
23. • Part I : Hello, Dart!
• Part II : Integrating Google Maps
• Part III: Dynamic HTML
• Part IV:Adding Server-Side
• PartV:Adding MongoDB
25. Tasks
• Learn application directory structure
• Run client and server side code
• Check output in Dartium console
• Write new unit tests
• Check that they work
• Learn to use debugger
40. Drawing Markers
var marker = new Marker(
new MarkerOptions()
..position = new LatLng(56.946, 24.131)
..map = map
..title = 'Best Place in the World!'
..icon = 'icon.png'
);
http://www.iconarchive.com/
Pick your own icon!
44. Tasks
• Draw input form for place name and icon
• Show/hide DOM elements
• Attach custom DOM event handlers
45. JQuery in Dart
import 'dart:html';
Element elem1 = query('#an-id'); // Find an element by id (an-id).
Element elem2 = query('.a-class'); // Find an element by class (a-class).
List<Element> elems1 = queryAll('div'); // Find all elements by tag (<div>).
List<Element> elems2 = queryAll('input[type="text"]'); // Find all text inputs.
// Find all elements with the CSS class 'class' inside of a <p>
// that is inside an element with the ID 'id'.
List<Element> elems3 = queryAll('#id p.class');
http://api.dartlang.org/docs/releases/latest/dart_html.html
46. Manipulating DOM
<div id="form">
<input id="name" type="text"/>
<input id="icon" type="text"/>
</div>
var name = query('#name').value;
query('#name').value = ‘New Value’;
query('#form').hidden = true;
61. Posting Data
var request = new HttpRequest();
request.open('POST', '/api/places');
request.setRequestHeader("Content-Type", "application/json");
request.send(json);
62. Timers
new Timer.periodic(
new Duration(seconds:5), (timer) {
print("timer triggered");
loadPlaces(map);
});
Refresh list of places every few seconds
import 'dart:async';
http://api.dartlang.org/docs/releases/latest/dart_async/
Timer.html
63. You Learned
• Server side is “easy”
• Testing HTTP services
• Creating Ajax client
• Using JSON