HTML for Dart
Our entire application will follow the grand tradition of recent client-side MVC frameworks. As such, we require only a single web page.
| your_first_dart_app/web/index.html | |
| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <title>Dart Comics</title> |
| | <link rel="stylesheet" href="/stylesheets/style.css"> |
| | |
| | <!-- The main application script --> |
| | <script src="/scripts/comics.dart" type="application/dart"></script> |
| | |
| | <!-- Force Dartium to start the script engine --> |
| | <script> |
| | navigator.webkitStartDart(); |
| | </script> |
| | |
| | </head> |
| | |
| | <body> |
| | <h1>Dart Comics</h1> |
| | <p>Welcome to Dart Comics</p> |
| | <ul id="comics-list"></ul> |
| | <p id="add-comic"> |
| | Add a sweet comic to the collection. |
| | </p> |
| | </body> |
| | </html> |
Most of that web page should be familiar; it will include simple HTML, links for CSS, and scripts.
HTML Head
The only oddity to note is the first <script> tag, in which JavaScript starts the Dart scripting engine.
| | <!-- Force Dartium to start the script engine --> |
| | <script> |
| | navigator.webkitStartDart(); |
| | </script> |
| Recipe 1 | Important: As of this writing, it is necessary to kick-start the Dart VM with navigator.webkitStartDart() on Dartium, the Dart-enabled version of Chrome.[2] As you’ll see later, there is a Dart package that does this for you. |
Next we load the contents of our actual code. The only change here is a different type attribute in the <script> tag, indicating that this is Dart code.
| | <!-- The main application script --> |
| | <script src="/scripts/comics.dart" type="application/dart"></script> |
There is more to be said about loading libraries and including code with Dart once we reach Chapter 10, Libraries. For now, it is simply nice to note that loading Dart works exactly as we might expect it to work.
HTML Body
As for the body of the HTML, there is nothing new there, but we ought to note the IDs of two elements to which we will be attaching behaviors.
| | <h1>Dart Comics</h1> |
| | <p>Welcome to Dart Comics</p> |
| | <ul id="comics-list"></ul> |
| | <p id="add-comic"> |
| | Add a sweet comic to the collection. |
| | </p> |
To the #comics-list UL element, we are going to attach the list of comic books in the back-end data store. We will also attach a form handler to the #add-comic paragraph tag. So, let’s get started.