Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

JSF 2 y HTML 5

No description
by

David Gómez

on 5 April 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of JSF 2 y HTML 5

var stockTickerWebSocket = new WebSocket("ws://finance.example.com");


stockTickerWebSocket.onopen = function(evt) {
alert("Stock Ticker Connection open …");
};


stockTickerWebSocket.onmessage = function(evt) {
alert("Received Ticker Update: " + evt.data);
};


stockTickerWebSocket.onclose = function(evt) {
alert("Connection closed.");
};


stockTickerWebSocket.postMessage("BUY: GOOG,100@200.25");


stockTickerWebSocket.disconnect();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">

<!-- INTERFACE -->
<composite:interface>
<composite:actionSource name="loginButton" targets="form:loginButton"/>
<composite:attribute name="loginButtonText" default="Log In" required="true"/>
<composite:attribute name="loginPrompt"/>
<composite:attribute name="namePrompt"/>
<composite:attribute name="passwordPrompt"/>
<composite:attribute name="loginAction"
method-signature="java.lang.String action()"/>
<composite:attribute name="managedBean"/>
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
<h:form id="form" prependId="false">

<div class="prompt">
#{cc.attrs.loginPrompt}
</div>

<panelGrid columns="2">
#{cc.attrs.namePrompt}
<h:inputText id="name" value="#{cc.attrs.managedBean.name}"/>

#{cc.attrs.passwordPrompt}
<h:inputSecret id="password" value="#{cc.attrs.managedBean.password}" />

</panelGrid>

<p>
<h:commandButton id="loginButton" value="#{cc.attrs.loginButtonText}"
action="#{cc.attrs.loginAction}"/>
</p>
</h:form>

<div class="error" style="padding-top:10px;">
<h:messages layout="table"/>
</div>
</composite:implementation>
</html> JSF 2 Antes HTML 5 Ivory Tower vs Real World Bean Validation AJAX Componentes Plantillas y Composición Administración de recursos Navegación Simplificada Configuración XML Tomado de hideyoshi.deviantart.com Torre de Marfil (Ivory Tower):

Lugar mítico donde residen los pensadores
y científicos que está desconectado del
mundo real y sus acontencimientos JSF 1.0 JSF 1.1 JSF 1.2 A partir del estándar actual se
establecen ideales y se genera
el nuevo estándar (JSF 1.x) Tomado de klen70.deviantart.com Surgen necesidades
no contempladas en
el estándar de JSF Mundo real:

Todos vivimos allí!!!
Las soluciones no cubren las necesidades
que se presentan a diario! + Las ideas creadas a partir de estos frameworks constituyen un punto de partida para la nueva especificación Los investigadores (incluidos los creadores de algunos de los frameworks complementarios) establecen entre las distintas soluciones cuáles pueden ser las más adecuadas para la nueva especificación y Esto en parte también sucedió con Las configuraciones mediante archivos XML pueden estar sujetas a varios errores a medida que van creciendo los archivos y se vuelve una tarea tediosa

Los archivos cada vez se vuelven más complicados de mantener

Parte de la cohesión de los elementos configurables se pierde debido a la dependencia de los archivos XML
Motivaciones OJO! Si no se declara ámbito, por defecto será Request Antes Después La declaración de beans se hace con la anotación @ManagedBean y se puede inyectar un bean en otro mediante @ManagedProperty

El ámbito (scope) es dado por las siguientes anotaciones:

@RequestScoped

@SessionScoped

@ApplicationScoped: Ambito de aplicación (con esta anotación al poner el atributo eager de la anotación @ManagedBean se carga el bean al iniciar la aplicación)

AMBITOS NUEVOS

@ViewScoped: Mientras se esté en la misma vista, el estado del bean se mantiene

@CustomScoped: Se define un ámbito que controla el desarrollador. Se manipula un map en el cual se ingresa el bean anotado.

@NoneScoped: Permite declarar beans que no tienen ámbito propio. Se utiliza para usar beans dentro de beans heredando el ámbito del bean padre. ? Para declarar otros elementos se tienen anotaciones similares:

Converters: Se utiliza la anotación @FacesConverter. con el atributo value se define el identifcador del validador.

Validadores: Se utiliza la anotación @FacesValidator. Se debe definir el atributo name con el que será identificado el validador.

Componentes: Algunos componentes se pueden definir a partir de clases anotadas con @FacesComponent.

Renderers: Estos componentes requerirán en algunos casos que se defina un renderer que especifica cómo deben generarse e interpretarse en el navegador (por ejemplo un inputText debe transformarse en un tag input con type= "text"), para ello se usa la anotación @FacesRenderer. Declaración de Otros Elementos Declaración de Beans Antes Después Observaciones Adicionales El archivo faces-config.xml DEBE crearse aunque esté vacío sólo con el fin de que el servidor reconozca la aplicación como una aplicación JSF.

No necesariamente es malo tener definidas cosas en el archivo faces-config.xml pues no es excluyente con las anotaciones.

Algunos casos en los que se puede tener definido un elemento en el archivo faces-config.xml son:

Definición de bundle global: Se puede definir un bundle global en la aplicación mediante el tag <resource-bundle> que va dentro del tag <application>.

Definición de elementos como managedbeans que no se quieren anotar para evitar confusiones en la codificación. Por ejemplo: Entities o TOs cuyo propósito no es de xclusivo manejo en la capa de presentación Motivación La navegación se centraliza en un archivo faces-config.xml. Al igual que con la configuración de elementos, se puede hacer complicada, tediosa y sujeta a errores Antes Después Después La navegación se puede realizar con:
Nombres de las páginas
Paths absolutos
Resolución de nombres Motivación Acceder a los recursos de una manera intuitiva
Mantener un orden adecuado de los recursos de la aplicación
Al igual que con la navegación y la administración de elementos, simplificar el mantenimiento Los recursos deben estar dentro de la carpeta resources Define una hoja de estilos
library: directorio dentro de resources donde se encuentra la hoja de estilos

name: nombre de la hoja de estilos

target: puede ser head o body, en el primer caso sólo carga el recurso cuando se necesite, en el segundo se carga cuando se carga la página. Por defecto siempre es head aunque se declare dentro del cuerpo de la página. Define un javascript
library: directorio dentro de resources donde se encuentra el javascript

name: nombre del javascript

target: puede ser head o body, en el primer caso sólo carga el recurso cuando se necesite, en el segundo se carga cuando se carga la página. Por defecto siempre es head aunque se declare dentro del cuerpo de la página. Una manera menos intutitiva pero igualmente válida de acceder a los recursos es usando EL Alternativa Motivacones Aplicar el principio DRY en la capa de presentación
Facilitar el mantenimiento y lectura de las páginas
Renunciar al estándar JSP en favor de Facelets Estructura basada en plantillas, vistas y secciones Section Template View Las plantillas definen el marco general de las páginas que se van a mostrar
Las vistas definen las partes reemplazables de las plantillas con contenido propio de ella
Las secciones son partes reutilizables por diferentes vistas o plantillas Resumen Facilitar la creación de componentes personalizados
Reforzar DRY en la capa de presentación
Administrar con mayor facilidad los componentes creados Motivaciones Los componentes hacen parte de los recursos de la aplicación Componente Uso del Componente El namespace es dado por la ubicación del componente dentro de los recursos asi: http://java.sun.com/jsf/composite: Raíz del namespace de cualquier componente /components/text: Ruta del componente dentro de los resources El componente permite usar los atributos definidos en la interfaz además del id definido automáticamente Este es el namespace definido para crear componentes La interfaz define los atributos que se exponen del componente, sus valores por defecto y obligatoriedad Se puede acceder al id del componente mediante la expresión cc.clienteId

Los atributos se acceden en la implementación mediante la expresión predefinida cc.attrs
Cómo se usa el componente? Pero, cómo se hacía antes? No se administraban los recursos de manera estándar y existía una declaración explícita del componente (aplica.taglib.xml) El componente no tenía interfaz ni implementación claramente definidas. Se validaban los valores que podía recibir la interfaz mediante JSTL No se visualiza fácilmente qué valores debe recibir el componente al no existir la interfaz El namespace para usar el componente se definía en el taglib La declaración del componente lleva la ruta absoluta o relativa de la ubicación del mismo (no había estándar de administración de recursos) Motivaciones Es una tecnología que se extraña en los estándares
Se usan librerías complementarias para usarlo, sin embargo no siempre es intuitivo y fácil de usar Tiene tres atributos principales:
event: Evento que genera la solicitud

execute: Especifíca qué componentes se envían al servidor

render: Especifica qué componentes se refrescan Atributos event: default (action)

execute: @form (el form que contiene el elemento ajax)

render: default (@none: ningún elemento) Ejemplo 1 event: default (action)

execute: @form (el form que contiene el elemento ajax)

render: username, password y :messages (los dos puntos indican que está fuera del form actual) Ejemplo 2 Ejemplo 3 event: default (action en ambos casos)

execute: default (@this en ambos casos)

render: default (@none en ambos casos) Ejemplo 4 event: default (action en ambos casos)

execute: @form (en ambos casos)

render: default (@none en ambos casos) Ejemplo 5 event: default (action en ambos casos)

execute: @this, firstname y lastname (en ambos casos, equivale en este caso a poner @form)

render: @none (default en ambos casos) Ejemplo 6 event: action (default)

execute: default (@this)

render: @none (default) event: default (action)

execute: @this (default)

render: @form :messages (los dos puntos de messages es debido a que está fuera del form) Se pueden tener elementos ajax dentro y fuera de los componentes a la vez, en este caso se ejecutan los dos eventos.

Además de los "shortcuts" presentados, existe el @all que indica que se envían todos los componentes (se incluyen los que estén fuera del form actual) Adicionalmente... Integrar bean validation con JSF
Motivaciones Declaración de nuevo tag: <f:validateBean> que puede tener definido:

validationGroups: especifica los grupos de validación.

disabled: con sólo este atributo se puede deshabilitar la validación automática del componente al que pertenece.

for: establece el componente sobre el que aplica

Al igual que <f:ajax> puede ir definido dentro del componente o que los componentes estén dentro de él.

Qué validaciones se aplican? En nuestro caso, tenemos un validador propio para mostrar los mensajes de una manera específica...cómo se usa este validador? Se crea un beanValidator diferente al que viene por omisión que a su vez utiliza el validador implementado localmente

Se deshabilita la validación automática

Se invoca el validador con <f:validator> donde sea necesario Deshabilitar la validación automática Establecer que las librerías JSF están en el WAR En Jboss 6: Establecer MyFaces 2 como implementación JSF Se guarda el estado dentro de la página de manera encriptada, si la opción es server se envía el estado al servidor Existen dos nuevos validadores predefinidos:

<f:validateRegex>: valida de acuerdo a una expresión regular

<f:validateRequired>: valida que el valor sea dado (es lo mismo que el atributo required de los componentes). Opciones Adicionales Ojo! es necesario crear los getters y setters de las propiedades inyectadas con @ManagedProperty Error Handling & Project Stage Motivaciones Facilitar la deteccion de errores que no se hayan manejado en capas inferiores (negocio y persistencia) asi como en la capa de presentacion

Permitir manejar el proyecto en diferentes etapas del ciclo de vida (desarrollo, produccion, etc) Mientras una excepcion no se capture en la aplicacion, y se genere sera mostrada en el navegador con detalles

Se muestran 3 menús desplegables (prueba hecha con MyFaces 2.0):

Stacktrace: muestra la pila de errores generados en la aplicación

Component Tree: Muestra el árbol de componentes de la página en la que se generaron los errores

Scoped Variables: Muestra la información que se tenía al momento de generarse los errores en cada uno de los ámbitos (scopes) Error Handling Existen cuatro etapas definidas: Development, Production, UnitTest y SystemTest

La diferencia principal entre declarar el proyecto en una etapa u otra es el detalle de los errores presentados y el desempeño de la aplicación.
Así por ejemplo Development es más detallado y de más bajo desempeño que Production.

Se aclara que incluso en la descripción del JSR-314 (JSF 2.0) no se aclara puntualmente en cada una de estas etapas qué diferencia existe respecto a la otra especialmente respecto a UnitTest y SystemTest. Project Stage Stacktrace Component Tree Scoped Variables
En web.xml:

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>

Con JNDI:

java:comp/env/jsf/ProjectStage=Development Configuracion Stage Manejo de eventos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
...
xmlns:comp="http://java.sun.com/jsf/composite/component/util">

<util:login loginPrompt="#{msgs.loginPrompt}"
namePrompt="#{msgs.namePrompt}"
passwordPrompt="#{msgs.passwordPrompt}"
loginAction="#{user.login}"
loginButtonText="#{msgs.loginButtonText}"
managedBean="#{user}">

<f:actionListener for="loginButton"
type="com.clarity.LoginActionListener"/>

</util:login>
...
</html> Componente Uso de Componente Listener package com.clarity;

import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
import javax.faces.event.ActionListener;

public class LoginActionListener implements ActionListener {
public void processAction(ActionEvent e)
throws AbortProcessingException {
System.out.println("logging in ...........");
}
} Nuevos Elementos <input> Motivacion Algunos son creados con el fin de reducir las validaciones hechas en codigo java o con javascript

Otros son creados como complementos para evitar crearlos desde cero <input type="datetime" ... <input type="datetime-local" ... <input type="date" ... <input type="month" ... <input type="week" ... Fecha y hora CON zona horaria Fecha y hora SIN zona horaria Fecha SIN hora y SIN zona horaria Año y Mes Año y Semana en el año <input type="time" ... horas, minutos, segundos y fracción <input type="number" min="0" max="100" step "1" value="5" ... <input type="range" min="0" max="100" step "1" value="5" ... <input type="email" ... <input type="url" ... Selecciona un numero en un rango dado un paso y un valor predefinido Selecciona un rango mediante un slide en un rango dado un paso y un valor predefinido Valida que el texto introducido sea un correo valido en cuanto su estructura Valida que el texto introducido sea una URL valido en cuanto su estructura Ejemplos tomados de http://www.tutorialspoint.com/html5 Algunos de los elementos de texto permiten el autoenfoque (con el atributo autofocus) y que salga un texto por defecto indicando lo que se debe escribir (con el atributo placeholder) Nota! Progress y Meter <progress>: sirve para indicar el porcentaje de progreso de una tarea y puede ser determinado o indeterminado (por ejemplo el porcentaje cumplido de un proceso de PLUS)

<meter>: sirve para indicar una medida escalar dentro de un rango conocido (por ejemplo la cantidad de memoria libre en la maquina) Y HTML 5 JSF 2 permite agilizar el desarrollo de la capa de presentación de un aplicativo y a la vez permite aplicar el principio DRY de manera eficaz, permitiendo desechar los JSP en el que se exponía a la creación de páginas con código de dificil mantenimiento

HTML5 y CSS3 agregan funcionalidades que agilizan el desarrollo de las paginas web evitando el uso de estandares externos como Flash para lograr acercarse mas a la robustez proveida por los clientes enriquecidos Conclusiones Demo El ejemplo se encuentra en repositorio en /lead/jsf2test

Se debe definir en el archivo de settings de maven la propiedad <jboss4.deploydir>

Construir el proyecto usando mvn clean install

Subir el AS JBoss al que este apuntando la propiedad <jboss4.deploydir>

Entrar a http://localhost:8080/jsf2test http://www.ibm.com/developerworks/java/library/j-jsf2fu1/index.html
http://www.ibm.com/developerworks/java/library/j-jsf2fu2/index.html
http://www.ibm.com/developerworks/java/library/j-jsf2fu3/index.html
http://es.calameo.com/read/0000429059f8e87111065
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=jsf2Return
JSR-314: http://jcp.org/en/jsr/detail?id=314 Referencias JSF 2 http://www.ibm.com/developerworks/web/tutorials/wa-html5/
http://www.tutorialspoint.com/html5/
http://peter.sh/examples/?/html/meter-progress.html
http://www.quackit.com/html_5
http://diveintohtml5.org/
PRUEBA DE COMPATIBILIDAD HTML5: http://html5test.com/
http://www.css3.info/
http://www.css3.com/
TEST DE SELECTORES CSS3: http://tools.css3.info/selectors-test/test.html
FUENTES GRATUITAS: http://www.fontsquirrel.com/ Nuevos elementos semánticos y NO semánticos Motivacion Elementos <header>: Puede aplicarse a toda la página, a un elemento <article> o a un elemento <section>.

<footer>: Típicamente se usa también en toda la página, al final de un elemento <article> o al final de un elemento <section>.

<nav>: Es un contenedor para los enlaces primarios de la página. No debería usarse en cualquier grupo de enlaces sino en los de navegación global o bloques de navegación mayores. Si los enlaces se encuentran dentro del elemento <footer> no es necesario usar el elemento <nav>.

<article>: Se usa para definir un ítem independiente en la página tal como una noticia, un post de un blog o un comentario. El contenido de estos elementos se pueden usar para ser distribuidos mediante RSS (Really Simple Syndication).

<section>: Representa una sección de un documento o de la página. Puede estar dentro de otro <section> y usualmente lleva un <header> aunque no es obligatorio.

<aside>: Este elemento puede ser usado como una barra lateral donde se muestre contenido que de alguna forma se puede considerar como separado del resto. Un ejemplo puede ser una barra de publicidad.

<hgroup>: Este elemento se usa para agrupar un encabezado que lleve más de un elemento <h*> por ejemplo cuando hay un título y un subtítulo. header section aside section footer <canvas>: lienzo sobre el que se puede pintar con funciones de javascript o con librerias externas

<video>: permite incluir videos en diferentes formatos segun lo soporte cada navegador, depende tambien de la implementacion de los codecs necesarios para su reproduccion

<audio>: permite incluir archivos de audio y al igual que para video es dependiente del navegador y los codecs que pueda interpretar Elementos Nuevos Dar significado a las diferentes partes que componen una página

Facilitar a los navegadores la interpretación de estos elementos para saber qué parte de la página se está creando

Administrar de manera nativa elementos multimedia nav tomado de http://hakim.se Mejoras Adicionales Geolocalization JSF 2 Aprovechar las mejoras implementadas a partir de las nuevas especificaciones para crear una capa de presentacion mantenible, modularizable y cuyo codigo sea legible

Realizar aplicaciones web enriquecidas con un menor esfuerzo y de manera estandar

Cumplir con la politica de calidad de la empresa Motivaciones ...permaneciendo a la vanguardia en los recursos utilizados... Gracias! Web Workers Sirven para cargar dinamicamente scripts y ejecutarlos en procesos background

// Creates a Web Worker
var worker = new Worker("worker.js");

// Posts a message to the Web Worker
worker.postMessage(0);

// Triggered by postMessage in the Web Worker
worker.onmessage = function (evt) {
// evt.data is the values from the Web Worker
alert(evt.data);
};

// If the Web Worker throws an error
worker.onerror = function (evt) {
alert(evt.data);
}; // Triggered by postMessage in the page
onmessage = function (evt) {
// evt.data will be 0 here from the above postMessage
for (var i=evt.data, il=1000001; i<il; i++) {
// Continually sends data back
postMessage(i);
};
}; Script 'Padre' worker.js ejemplo tomado de: http://robertnyman.com/2010/03/25/using-html5-web-workers-to-have-background-computational-power/ ejemplo <!DOCTYPE html>
<html>
<head>

<script src="js/jquery-1.4.2.min.js"></script>
<script>
jQuery(window).ready(function(){
jQuery("#btnInit").click(initiate_geolocation);
});

function initiate_geolocation() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);
}

function handle_errors(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: alert("user did not share geolocation data");
break;

case error.POSITION_UNAVAILABLE: alert("could not detect current position");
break;

case error.TIMEOUT: alert("retrieving position timed out");
break;

default: alert("unknown error");
break;
}
}

function handle_geolocation_query(position){
alert('Lat: ' + position.coords.latitude + ' Lon: ' + position.coords.latitude);
}

</script>
</head>
<body>
<div>
<button id="btnInit" >Find my location</button>
</div>
</body>
</html> Sirve para hallar datos de la localizacion de la maquina del cliente donde se ejecuta la aplicacion ejemplo tomado de:http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/ geolocalization.js Se puede tener informacion sobre altitud, longitud, exactitud de las coordenadas entre otros Se pueden ver demos en:

http://merged.ca/iphone/html5-geolocation

http://html5demos.com/geo Se puede ver demo en:

http://html5demos.com/worker Permite guardar localmente informacion para su uso dentro de la aplicacion de manera similar a las cookies Web Storage Variaciones Se pueden ver demo en:

http://people.w3.org/mike/localstorage.html

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-10-localstorage-demo.html Referencias HTML5 Mayor espacio para guardar informacion (cookies: 4KB, localStorage: ~ 5 MB)
No se envia la informacion al servidor
Cada elemento es un par llave/valor (todos los valores son tratados como String)
Ventajas respecto a las Cookies sessionStorage: Mantiene la informacion guardada localmente mientras no se cierre el navegador

localStorage: Mantiene la informacion guardada localmente hasta que el usuario limpie la informacion del navegador var fechaRegistro = localStorage.getItem("dgomez");
...
localStorage.setItem("dgomez", fechaRegistro);


var fechaRegistro = localStorage["dgomez"];
...
localStorage["dgomez"] = fechaRegistro; Uso Alternativamente: Web SQL Database e IndexedDB Alternativas para guardar datos en el navegador con las funcionalidades propias de una base de datos Web SQL Database Ba Basado en SQLite. Esta especificacion se ha abandonado pero Chrome, IE, Opera entre otros lo han implementado.

Desventajas (segun detractores):

SQL no es estandar.
SQL es de muy alto nivel.
Al basarse en SQLite no implementa un estandar particular (no es Oracle, Sybase, Sql Server, etc) Propuesto por Mozilla. La idea es proveer un front end estandar al desarrollador que por debajo lleve alguna implementacion particular (incluyendo SQLite). Esta especificacion se adoptado como oficial dentro de HTML 5

Se proveen funciones javascript estandar para hacer consultas sencillas

Desventajas (segun detractores):

Se vuelve menos eficiente al adicionar una capa al sistema pues por debajo igualmente usa una implementacion de base de datos.
Por su nivel de abstraccion podria no soportarse bases de datos relacionales al no poderse implmentar consultas complejas. IndexedDB ejemplo tomado de: http://html5demos.com/drag-anything#view-source function cancel(e) {
if (e.preventDefault) e.preventDefault(); // required by FF + Safari
// e.dataTransfer.dropEffect = 'copy'; // tells the browser what drop effect is allowed here
return false; // required by IE
}

function entities(s) {
var e = {'"' : '"', '&' : '&', '<' : '<', '>' : '>'};
return s.replace(/["&<>]/g, function (m) {
return e[m];
});
}

var getDataType = document.getElementById('text');
var drop = document.getElementById('drop');

// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);

addEvent(drop, 'drop', function (e) {
if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.

// just rendering the text in to the list

// clear out the original text
drop.innerHTML = '<ul></ul>';

var li = document.createElement('li');

/** THIS IS THE MAGIC: we read from getData based on the content type - so it grabs the item matching that format **/
if (getDataType.checked == false && e.dataTransfer.types) {
li.innerHTML = '<ul>';
[].forEach.call(e.dataTransfer.types, function (type) {
li.innerHTML += '<li>' + entities(e.dataTransfer.getData(type) + ' (content-type: ' + type + ')') + '</li>';
});
li.innerHTML += '</ul>';

} else {
// ... however, if we're IE, we don't have the .types property, so we'll just get the Text value
li.innerHTML = e.dataTransfer.getData('Text');
}

var ul = drop.getElementsByTagName('ul')[0];

if (ul.firstChild) {
ul.insertBefore(li, ul.firstChild);
} else {
ul.appendChild(li);
}

return false;
}); Se pueden ver demos en:

http://html5demos.com/drag

http://html5demos.com/drag-anything

http://ljouanneau.com/lab/html5/demodragdrop.html Ejemplo Permite arrastrar y soltar objetos de un lugar a otro de la pagina Drag & Drop Permite comunicarse con el servidor mediante un protocolo diferente a http y con baja latencia.

Requiere implementacion de servidor de web sockets (por ejemplo jWebSocket) ejemplo tomado de:http://www.indicthreads.com/1525/building-real-time-web-applications-using-html-5-web-sockets/ Se pueden ver demos en:

http://jwebsocket.org/

http://www.html5rocks.com/tutorials/websockets/basics/ Web Sockets Creacion de Socket Apertura de la conexion Accion al recibir un mensaje Cerrado de la conexion Envio de mensaje al servidor Desconexion del servidor
Full transcript