Arte 3D con three.dart: 08. Añadir un ELEMENTO al DOM

DOM es una estructura de árbol simple, donde cada nodo es un elemento de la página web.
LA CLASE NODE contiene los métodos y las propiedades que controlan los nodos del árbol.
LA CLASE ELEMENT contenida en clase node, contiene los nodos que forman la página web.
LOS ELEMENTOS tienen forma de rectángulo y pueden recibir eventos del ratón o del teclado.
Son: h1, p, table, button, etc..

Aplicación web para modificar el dom

Creamos una nueva aplicación web con el nombre "todo" y cambiamos el contenido html, dart y css por:

todo.dart:
import 'dart:html';
InputElement toDoInput;

UListElement toDoList;

void main() {
  toDoInput = query('#to-do-input');
  toDoList = query('#to-do-list');
  toDoInput.on.change.add(addToDoItem);
}

void addToDoItem(Event e) {
  var newToDo = new LIElement();
  newToDo.text = toDoInput.value;
  toDoInput.value = '';
  toDoList.children.add(newToDo);
}

todo.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
    <h2>Procrastinator's Todo</h2>
    <div>
      <input id="to-do-input" type="text" placeholder="What needs to be done?"> </input>
    </div>
       
    <div>
      <ul id="to-do-list">
      </ul>
    </div>
    <script type="application/dart" src="todo.dart"></script>
    <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

todo.css:

body {
  font-family: 'Open Sans', sans-serif;
  background-color: WhiteSmoke;
  margin: 15px;
}
#to-do-input {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 5px 0px 5px 5px;
  width: 100%;
  border: 1px solid Silver;
  background-color: White;
}
#to-do-list {
  padding:0px;
  margin:0px;
  list-style-position:inside;
}
#to-do-list li {
  padding:5px 0px 5px 5px;
  border-bottom: 1px dotted Silver;
}

Arrancamos la aplicación y que deberá tener este aspecto:

La aplicación gestiona una lista de tareas pendientes. Puede añadir tareas pero no eliminarlas.

Elementos padres e hijos

Cada ELEMENTO tiene un sólo padre, que es definitivo y no se puede cambiar.
Para hacer referencia al padre se usa el comando mielemento.parent.
Cada ELEMENTO se refiere a sus hijos mediante una lista.
La lista es una clase dentro del la librería dart:core, que puede ser de tamaño fijo o extensible.
Los elementos de una lista han de ser definidos con un tipo determinado. Por ejemplo:

List<String> Cadenas de texto
List<int> Números enteros
List<Element> Lista de elementos

Un ELEMENTO se relaciona con TODOS SUS HIJOS con mielemento.children
Un ELEMENTO se relaciona con UN HIJO EN CONCRETO con mielemento.children[0]
La estructura del árbol se puede modificar, añadiendo o eliminando hijos de la lista
Para añadir un nuevo hijo: mielemento.children.add(newchildren);

Configuración de la página en HTML

La aplicación web todo agrega dinámicamente elementos al DOM de esta forma:

En el archivo todo.html se establece los elementos del DOM:

<h2>Procrastinator's Todo</h2>

En el archivo todo.dart, función query() para obtener los elementos del DOM.
Llamar query () no es gratis, mejor guardar una referencia para usarlo varias veces en toDoInput y toDoList:

toDoInput = query('#to-do-input');

toDoList = query('#to-do-list');

Estas variables son del tipo InputElement y UListElement, subclases de ELEMENT.

Registro de un controlador de eventos

Al teclear un texto y pulsar ENTER, se dispara el evento:

toDoInput.on.change.add(addToDoItem);

Esto llama a la función addToDoItem(), que añade el texto a la lista de tareas pendientes.

Acerca de las funciones EventListener

El argumento pasado al método add () es una función del tipo EventListener que no devuelve ningún argumento,al estar definida en dart:html así definida:

typedef void EventListener(Event event)

La forma de añadir un controlador de eventos a un elemento es la siguiente.

El objeto Event procedente de la función EventListener dandole forma.
Esta acción se guarda en la variable 'e' y contiene información de que elemento provocó la acción y que tipo de acción: void addToDoItem(Event e) {}
En esta aplicación addToDoItem ignora el objeto 'e' que se le ha pasado.

Agregar un elemento al árbol DOM

El controlador eventos tiene el siguiente código:

void addToDoItem(Event e) {
  var newToDo = new LIElement();
  newToDo.text = toDoInput.value;
  toDoInput.value = '';
  toDoList.children.add(newToDo);
}


Define un nuevo elemento de lista: var newToDo = new LIElement();
Modifica la propiedad texto de este nuevo elemento: newToDo.text = toDoInput.value;
Borra el contenido del elemento : toDoInput : toDoInput.value = '';
Añade a la lista el nuevo elemento : toDoList.children.add(newToDo);

08. Añadir un ELEMENTO al DOM

No hay comentarios: