En el editor pulsar sobre el icono "Create a new Dart application" o las teclas Ctrl+N. A continuación completar la ventana que aparece de esta manera:
El editor creará un directorio llamado mini y, dentro de ella, un árbol de archivos. Entre ellos un archivo fuente llamado Dart mini.dart que contiene el código de Dart por defecto de una aplicación web.
Editamos el fichero mini.dart sustituyendo el código por este:
import 'dart:html';
void main() {
query('#RipVanWinkle').text = 'Wake up, sleepy head!';
}
import dart:html importa dart:html (necesaria en todas la aplicaciones web), para que todas las clases y funciones de la librería estén a disposición de este programa.
Sus clases principales son: Node, Element y Document. (elementos principales del DOM)
query () es una función de alto nivel perteneciente a dart:html que obtiene un objeto de Elemento del DOM.
El argumento que toma query () tipo cadena, es un selector CSS que identifica el objeto en el fichero html que se editará más adelante así: <p id="RipVanWinkle"></p>
Otra función útil para obtener los elementos de la DOM es queryAll (), que devuelve una LISTA de múltiples objetos que coincidan con el selector proporcionado.
En el DOM, el nodo texto contiene dos nodos hijos: Id y la cadena con el texto. Este nodo puede llevar subnodos con estilos ó enlaces.
En Dart, basta con utilizar la propiedad de texto del elemento, que recorre el sub-árbol de nodos y extrae el texto. query('#RipVanWinkle').text = 'Wake up, sleepy head!';
Editamos el fichero mini.html sustituyendo el código por este:
<!DOCTYPE html>
<html>
<head>
<title>A Minimalist App</title>
</head>
<body>
<p id="RipVanWinkle"></p>
<script type="application/dart" src="mini.dart"></script>
<script src="http://dart.googlecode.com/svn/branches/bleeding_edge
/dart/client/dart.js">
</script>
</body>
</html>
Como cualquier código HTML donde se emplea <head>, <title>, <body> y <p>. Y en esta etiqueta de parrafo <p> se encuentra el identificador "RipVanWinkle" que usamos antes en el código de Dart con query() para modificar su contenido.
En este fichero podemos ver <script>' en dos ocasiones, que contiene el código necesario para que la aplicación entienda los comandos Dart (rosa) y javascript (verde).
El primer script primero indica el tipo de script (amarillo) que actualmente es soportado por Dartium.
El atributo 'src' indica la dirección URL del archivo de código fuente del script: mini.dart.
El archivo de Dart debe estar en el mismo directorio que su anfitrión archivo HTML.
El segundo script se encarga de encender la máquina virtual de Dart, así como de la compatibilidad con navegadores no-Dart.
Este diagrama resume la relación entre mini.dart y mini.html
rosa : identificador del nodo texto creado en mini.html y modificado en mini.dart
verde : llamada al script mini.dart
amarillo : tipo de script
violeta : script javascript
Ejecutar la aplicación web
Seleccionar uno de los archivos de mini o el directorio y, a continuación, pulsar en el botón Ejecutar.
El editor Dart invoca Dartium y carga mini.html en ella.
No hay comentarios:
Publicar un comentario