- El nuevo objetivo es una versión de la aplicación web 'todo' para que se puedan eliminar elementos de la lista.
- Al situar el ratón sobre una tarea, esta cambia su apariencia y al hacer clic sobre ella, esta se elimina de la lista, borrando el elemento del DOM.
- Con un botón para eliminar todos las tareas de la lista.
En una nueva aplicación web cambiamos todo.dart, todo.html y todo.css por los siguientes:
todo_with_delete.dart
import 'dart:html';
InputElement toDoInput;
UListElement toDoList;
ButtonElement deleteAll;
void main() {
toDoInput = query('#to-do-input');
toDoList = query('#to-do-list');
toDoInput.on.change.add(addToDoItem);
deleteAll = query('#delete-all');
deleteAll.on.click.add((e) => toDoList.children.clear());
}
void addToDoItem(Event e) {
var newToDo = new LIElement();
newToDo.text = toDoInput.value;
newToDo.on.click.add((e) => newToDo.remove());
toDoInput.value = '';
toDoList.children.add(newToDo);
}
todo_with_delete.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<link rel="stylesheet" href="todo_with_delete.css">
</head>
<body>
<h2>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>
<button id="delete-all" type="button" style="float:right"> Delete All </button>
<script type="application/dart" src="todo_with_delete.dart"></script>
<script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
todo_with_delete.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;
}
#to-do-list li:hover {
color: red;
font-size: 18px;
cursor:pointer;
}
#delete-all {
background-color: #F8F8F8;
border: 1px dotted #ccc;
border-radius: 1em;
float: right;
}
#delete-all:hover {
background-color: #ddd;
}
El aspecto que tiene la aplicación es el siguiente:
- Tecleando tareas, se irán añadiendo a la lista
- Situando el cursor encima de una tarea, su aspecto cambia color, tamaño y la forma del cursor.
- Haciendo clic sobre una tarea, ésta se borra
- Pulsando el botón "Delete All" se borran todas las tareas.
Cambio del aspecto cuando el cursor está sobre un elemento
Para que la tarea de la lista cambie de aspecto, en el fichero todo_with_delete.css se incluye este código:
#to-do-list li:hover {
color: red;
font-size: 18px;
cursor:pointer;
}
Eliminación de un elemento del árbol DOM
Para eliminar un ELEMENTO del DOM se debe borrar de la lista del padre.
La clase List tiene funciones para localizar un elemento de la lista y así poder borrarlo.
En este caso se usa el ELEMENTO remove(), que es más corto que usando la clase List.
En la función que registra los clics de ratón añadimos un elemento nuevo, que borra el elemento del DOM:
newToDo.on.click.add((e) => newToDo.remove());
Eliminación de todos los elementos secundarios de un elemento
Al hacer clic sobre el botón "Delete All" se elminan todos los elementos de la lista.
- Usando la función clear() de la clase List, se eliminan todos hijos de la lista todoList.
- En el botón del .html incorporamos un id para hacer referencia en el código .dart:
- <button id="delete-all" type="button" style="float:right"> Delete All </button>
- En el main del .dart se obtiene el elemento de botón a través del id.
- deleteAll = query('#delete-all');
- Añade un acción al evento clic del ratón que borra todos los elementos hijos de la lista de tareas.
- deleteAll.on.click.add((e) => toDoList.children.clear());
El código con con la expresión de función => podría sustituirse con una función independiente:
...
void main() {
...
deleteAll.on.click.add(deleteAllElements);
}
void deleteAllElements(Event e) {
toDoList.children.clear();
}
...
Las funciones se suelen usar generar acciones sobre eventos de un elemento y pueden tener varias líneas.
Al definir la función se debe usar un EventListener (Event e), para tomar el evento sin devolver ningún valor.
No hay comentarios:
Publicar un comentario