cliente rico con extjs y rest
DESCRIPTION
IV Encuentro de Programadores Java organizados por Oscar Belmonte (profesor del Departamento de Lenguajes y Sistemas Informáticos) y decharlas.com. En esta ocasión, la temática de las jornadas girará entorno al desarrollo de aplicaciones con interfaz de cliente rico.TRANSCRIPT
Cliente rico con ExtJS y RESTRicardo Borillo [email protected]
ndice
REST:
Introduccin Jersey JAX-RS Acceso a servicios REST Testing en Jersey Tipos de frameworks ExtJS
Cliente rico:
Integracin ExtJS / REST
Introduccin
Principales objetivos:
Arquitectura flexible e interoperable: Modelo de negocio siempre accesible a distintos frameworks en distintos dispositivos Facilidad de integracin con otras aplicaciones Mejora de la experiencia de usuario
Introduccin
Qu es REST?
Introduccin
REST = Representational State Transfer:
Define un estilo de arquitectura distribuida basada en el protocolo HTTP y que explota el uso enlaces o hypermedia (al igual que la WWW) No est ligado al formato ni a la estructura de los documento intercambiados (JSON, XML, PDF, HTML cualquier formato) Orientado al acceso a recursos y colecciones Las URIs son su elemento ms importante
Introduccin
Una URI define la identidad de un recurso en la web Tanto las URL como los URN son URIs Un URN slo define un nombre, pero no ninguna forma de recuperar ese recurso (urn:isbn:0451450523) Una URL define como recuperar ese recurso a travs de la web (http://www.a.com/doc.pdf)
Introduccin
Peticin HTTP:GET /recurso/base?param=valor HTTP/1.1 Host: www.uji.es User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; es-CL; rv:1.9.2.10) Gecko/20100922 Ubuntu/10.10 (maverick) Firefox/3.6.10 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: es-cl,es;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive
Introduccin
Respuesta HTTP:HTTP/1.1 200 OK Cache-Control: private Content-Type: text/html Connection: Keep-Alive Keep-Alive: timeout=30, max=999 Server: Oracle-Application-Server-10g/10.1.2.3.0 Oracle-HTTP-Server OracleASWeb-Cache-10g/10.1.2.3.0 (H;max-age=3600+360;age=350;ecid=759620335360,0) Content-Length: 25671 Date: Thu, 14 Oct 2010 17:05:03 GMT
Introduccin
Otros aspectos fundamentales:
Cookies Cdigos de respuesta HTTP:
Informational 1xx (100 Continue, 101 Switching protocols) Successful 2xx (200 OK, 201 Created, 202 Accepted, 204 No Content) Redirection 3xx (301 Moved Permanently, 302 Found, 304 Not Modified Client Error 4xx (400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 405 Method Not Allowed) Server Error 5xx (500 Internal Server Error, 501 Not Implemented, 502 Bad Gateway, 503 Service Unavailable)
Introduccin
Pero esto no es la web tal y como la conocemos?
Introduccin
REST aprovecha realmente la arquitectura diseada para la WWW Los navegadores slo aprovechan una parte de la semntica disponible
Introduccin
POST. Creacin de un nuevo recurso No es seguro y no es idempotente GET. Recuperacin de un recurso S es seguro y s es idempotente PUT. Modificacin de un recurso o creacin de un recurso del que conocemos el ID No es seguro y s que es idempotente DELETE. Borra un recurso No es seguro y s que es idempotente
Introduccin
Ejemplos:
GET /cars: Lista todos los coches GET /cars/1234AAW: Recupera un coche POST /cars: Aade un nuevo coche PUT /cars/1234AAW: Crea o modifica un coche PUT /cars/1234AAW: Crea un nuevo coche. DELETE /cars/1234AAW: Elimina un coche
Introduccin
Los servicios REST son Web Services? En qu se diferencian REST y SOAP?
Introduccin
Wikipedia:
Web services are typically application programming interfaces (API) or Web APIs that are accessed via Hypertext Transfer Protocol (HTTP) and executed on a remote system hosting the requested services. Web services tend to fall into one of two camps: SOAP Web services or RESTful Web services.
Introduccin
Inconvenientes del stack ws-*:
Es complejo y difcil de mantender (generacin de cdigo a partir de documentos WSDL) Necesidad de un framework complejo Problemas de interoperabilidad entre frameworks y plataformas Problemas para ser usados desde dispositivos mviles y aplicaciones RIA basadas en JavaScript Slo sirve para XML (con adjuntos binarios) No aprovecha al 100% la arquitectura HTTP al ser definido con soporte independiente del transporte
Introduccin
La clave es HATEOAS: Hypermedia as the Engine of Application State Diferencia a REST de un RPC convencional y representa un avance: Las respuestas del servidor contienen links que corresponden a las acciones que se pueden realizar, en funcin del estado actual de la aplicacin
Introduccin
Cdigo ejemplo HATEOAS:{ 'home': { 'description':'go to system home', 'href':'/store/home' }, 'search': { 'description':'search books', 'href':'/store/books{?title,author,minPrice,maxPrice}' }, 'byId': { 'description':'get book by id', 'href':'/store/books/{bookId}' } }
ndice
REST:
Introduccin Jersey JAX-RS Acceso a servicios REST Testing en Jersey Tipos de frameworks ExtJS
Cliente rico:
Integracin ExtJS / REST
Jersey JAX-RS
Jersey es la implementacin Java de referencia del estndar JAX-RS para la definicin de servicios REST: https://jersey.dev.java.net/
Se aplica sobre POJOs Define un conjunto de anotaciones, de proveedores y de filtros para gestionar el ciclo de vida de las peticiones/respuestas HTTP
Jersey JAX-RS
Anotaciones bsicas para definir recursos y operaciones:
@GET, @PUT, @POST, @DELETE @Path@Path("coches") public class CochesService { @GET public List getCoches() { } }
Jersey JAX-RS
Acceso a parmetros en las URLs:
@PathParam @QueryParam@GET @Path("/coches/{matricula}") public Coche getCoche( @PathParam("matricula") String matricula, @QueryParam("puertas") @DefaultValue("5") String puertas) { }
Jersey JAX-RS
Identificacin del tipo de contenido recibido o emitido:
@Consumes. Tipo mime esperado. @Produces. Tipo mime producido@GET @Produces(MediaType.APPLICATION_XML) public List getCoches() { } @PUT @Consumes(MediaType.APPLICATION_JSON) public void updateCoche(Coche coche) { }
Jersey JAX-RS
Peticin HTTP:@GETHost: www.uji.es
@Path
@QueryParam
GET /recurso/base?param=valor HTTP/1.1
@PathParam
User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; es-CL; rv:1.9.2.10) Gecko/20100922 Ubuntu/10.10 (maverick) Firefox/3.6.10 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: es-cl,es;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive
@Produce
Jersey JAX-RS
Respuesta HTTP:HTTP/1.1 200 OK Content-Type: text/html
Response @Produce
Server: Oracle-Application-Server-10g/10.1.2.3.0 Content-Length: 25671 Date: Thu, 14 Oct 2010 17:05:03 GMT
Contenido de la respuesta
Jersey JAX-RS
Distintas serializaciones disponibles para distintos formatos:
XML/JSON mediante JAXB natural JSON mediante Jackson ATOM mediante Apache Abdera Lectura/escritura personalizada en funcin del tipo mime gracias a los interfaces MessageBodyReader y MessageBodyWriter
Jersey JAX-RS
Disponibles filtros tanto en el cliente como en el servidor para:
Autenticar peticiones o realizar conexiones seguras Registrar las peticiones en un fichero de log Transformar datos de entrada o de salida Cualquier otro filtro personalizado
Jersey JAX-RS
Otros mdulos/funcionalidades disponibles:
Mapeo de excepciones Java a respuestas y cdigos HTTP mediante ExceptionMapper Integracin con Spring Framewok API para simplifica el acceso cliente (Jersey Client) Gestin de uploads (Jersey Multipart) Testing integrado (Jersey Test Framework) Autorizacin mediante OAuth
Jersey JAX-RS
Configuracin de la webapp: rest com.sun.jersey.spi.container.servlet.ServletContainer com.sun.jersey.config.property.packages com.decharlas.usuarios.services com.sun.jersey.spi.container.ContainerRequestFilters com.sun.jersey.api.container.filter.LoggingFilter com.sun.jersey.spi.container.ContainerResponseFilters com.sun.jersey.api.container.filter.LoggingFilter 1 rest /rest/*
ndice
REST:
Introduccin Jersey JAX-RS Acceso a servicios REST Testing en Jersey Tipos de frameworks ExtJS
Cliente rico:
Integracin ExtJS / REST
Acceso a servicios REST
Distintos mtodos de acceso:
Navegador:
Accediendo a URLs mediante GET y con el envo de formularios mediante POST Aplicaciones de cliente rico haciendo uso de AJAX (XmlHttpRequest). Veremos el caso de ExtJS. Ejemplo aplicaciones web que aprovechan la potencia de la semntica REST: http://www.thomas-bayer.com/restgate/index.do
Otros clientes de acceso:
curl Jersey Client API
Acceso a servicios REST
Curl:
POST: curl -i -H "Accept: application/json" -X POST -d "user=pepe" http://localhost/persons/person
PUT: curl -i -H "Accept: application/json" -X PUT -d "phone=964556677" http://localhost/persons/person/1
GET: curl -i -H "Accept: application/json" http://localhost/persons?zipcode=93031
DELETE: curl -i -H "Accept: application/json" -X DELETE http://localhost/persons/person/1
Acceso a servicios REST
Jersey Client API:
Simplifica el acceso a los servicios REST desde Java Creacin de un cliente y llamada GET:Client client = Client.create(); WebResource resource = client.resource("http://localhost/app/rest"); ClientResponse response = resource.path("/coche/1").queryParam("matricula", "1234546").get(ClientResponse.class); Coche coche = response.getEntity(Coche.class)
Acceso a servicios REST
Jersey Client API:
Llamada de tipo POST:MultivaluedMap params = new MultivaluedMapImpl(); params.putSingle("param1", "value1"); resource.path("/perico").type(MediaType.APPLICATION_FORM_URLEN CODED).post(Persona.class, params);
Comprobacin del resultado:if (response.getStatus() == Status.OK.getStatusCode()) { ... }
ndice
REST:
Introduccin Jersey JAX-RS Acceso a servicios Testing en Jersey Tipos de frameworks ExtJS
Cliente rico:
Integracin ExtJS / REST
Testing en Jersey
Requisitos:
Entorno de integracin contnua API testeable Independencia respecto al despliege de la aplicacin
Testing en Jersey
public class AllTests extends JerseyTest { public AllTests() throws Exception { super(new WebAppDescriptor.Builder("es.uji.jersey"). contextParam("contextConfigLocation", "classpath:applicationContext.xml"). servletClass(SpringServlet.class). contextListenerClass(ContextLoaderListener.class).build()); } @Override protected TestContainerFactory getTestContainerFactory() { return new EmbeddedGlassFishTestContainerFactory(); } @Test public void testHelloWorld() { WebResource webResource = resource(); String result = webResource.path("rest/helloworld"). accept(MediaType.TEXT_PLAIN).get(String.class); Assert.assertEquals("Hello World", result); } }
ndice
REST:
Introduccin Jersey JAX-RS Acceso a servicios Testing en Jersey Tipos de frameworks ExtJS
Cliente rico:
Integracin ExtJS / REST
Tipos de frameworks
Frameworks para aplicaciones web:
Frameworks para integracin con contenido HTML/CSS existente (jQuery, prototype, etc) Frameworks para la creacin de aplicaciones ricas completas: JavaScript: ExtJS, qooxdoo, SmartClient No JavaScript: Flex, OpenLaszlo, JavaFX Frameworks mixtos: Dojo, jQuery UI, Prototype UI
ndice
REST:
Introduccin Jersey JAX-RS Acceso a servicios Testing en Jersey Tipos de frameworks ExtJS
Cliente rico:
Integracin ExtJS / REST
ExtJS
Desarrollo de aplicaciones ricas multiplataforma:
ExtJS. Framework de cliente rico para aplicaciones web. Ext GWT. Integracin de GWT con ExtJS. Sencha Touch. Aplicaciones mbiles ricas para iPhone, iPad y Android. Ext Designer. Diseador WYSIWYG para ExtJS.
ExtJS
ExtJS
ExtJS
ExtJS
Recursos imprescindibles para desarrollar con ExtJS:
Ejemplos: http://dev.sencha.com/deploy/dev/examples/ Documentacin: http://dev.sencha.com/deploy/dev/docs/ Foros: http://www.sencha.com/forum/
Tipos de frameworks
Recursos imprescindibles para desarrollar con ExtJS:
Videos: http://www.extjs.tv/ Libros:
ExtJS in Action: http://www.manning.com/garcia/ Learning ExtJS: http://www.learningextjs.com/
ndice
REST:
Introduccin Jersey JAX-RS Acceso a servicios Testing en Jersey Tipos de frameworks ExtJS
Cliente rico:
Integracin ExtJS / REST
Integracin ExtJS / REST
Caractersticas interesantes que favorecen la integracin:
ExtJS implementa sus componentes de datos siguiendo el patrn MVC ExtJS soporta distintos formatos de datos mediante la implementacin de Readers Los stores en ExtJS soportan desde la versin 3.0 el atributos restful. ExtJS se puede combinar con otros frameworks como jQuery, Prototype o YUI
Integracin ExtJS / REST
Elementos principales:
De estructura:
Viewport y Panel:http://dev.sencha.com/deploy/dev/docs/index.html
Layouts:http://dev.sencha.com/deploy/dev/examples/#sample-9
De datos:
Store Reader/Writer (XML/JSON) Comunicacin AJAX
Integracin ExtJS / REST
Elementos principales:
Widgets:
GridPanel:http://dev.sencha.com/deploy/dev/examples/#sample-4
FormPanel y componentes de formulario:http://dev.sencha.com/deploy/dev/examples/#sample-11
TreePanel:http://dev.sencha.com/deploy/dev/examples/#sample-8
Windows:http://dev.sencha.com/deploy/dev/examples/#sample-7
Integracin ExtJS / REST
Otras funcionalidades interesantes:
Drag & Drop:http://dev.sencha.com/deploy/dev/examples/#sample-14
Charts:http://dev.sencha.com/deploy/dev/examples/#sample-6
Offline support:http://dev.sencha.com/deploy/dev/examples/#sample-1
Integracin ExtJS / REST
Mltiples formas de crear objetos:
Con el operador new:var editor = new Ext.ux.grid.RowEditor({ saveText: 'Actualizar' });
Con la inclusin implcita usando JSON y el atributo xtype:{ xtype : 'form', items: [{ xtype : 'textfield', name : "nombre", fieldLabel : 'Nombre' }]
}
Integracin ExtJS / REST
Aplicacin mnima con ExtJS: Ext.onReady(function() { Ext.Msg.alert("Informacin", "Alerta desde ExtJS"); });
Integracin ExtJS / REST
Elementos necesarios para la creacin de un GridPanel en ExtJS:
Store. Responsable de la gestin de datos que recibe de un Reader o que enva a un Writer. Reader/Writer. Procesamiento de los datos de entrada/salida en mltiples formatos (JSON, XML) y accediento a mltiples destinos (memoria, HTTP). GridPanel. Componente para la representacin de tablas de datos.
Integracin ExtJS / REST
Store para el GridPanel:new Ext.data.Store( { restful : true, url : '/usuarios/rest/users', reader : new Ext.data.XmlReader( { record : 'user', totalProperty : 'total', id : 'id' }, [ 'id', 'dni', 'nombre']), writer : new Ext.data.XmlWriter({ writeAllFields : true, xmlEncoding: "utf-8" }) });
Integracin ExtJS / REST
GridPanel:var grid = new Ext.grid.GridPanel( { store : store, sm : new Ext.grid.RowSelectionModel( { singleSelect : true }), frame : true, colModel : new Ext.grid.ColumnModel( { defaults : { sortable : true }, columns : [ { header : 'Cdigo', dataIndex : 'id', width : 10, editor: { xtype: 'textfield', allowBlank: false } }, ] }), listeners : { rowclick : function(grid, rowIndex, evt) { } } });
Integracin ExtJS / REST
Relacin entre los datos, el store y el grid:var grid = new Ext.grid.GridPanel( { ... colModel : new Ext.grid.ColumnModel( { defaults : { sortable : true 1 }, 123456780X columns : [ { Perico 0 header : 'Cdigo', dataIndex : 'id', ... width : 10, editor: { xtype: 'textfield', allowBlank: false } }, ] }), new Ext.data.Store( { ... restful : true, }); url : '/usuarios/rest/users',
reader : new Ext.data.XmlReader( { record : 'user', totalProperty : 'total', id : 'id' }, [ 'id', 'dni', 'nombre']), ... });
Integracin ExtJS / REST
FormPanel:new Ext.FormPanel( { title : 'Users', frame : true, url: '/usuarios/rest/users', items : [ { xtype : 'textfield', name : "id", fieldLabel : 'Cdigo', allowBlank: false }, ], buttons: [ { xtype : 'button', text : 'Aadir', handler : function() { if (form.getForm().isValid()) { form.getForm().submit({ success: function(form, action) {}, failure: function(form, action) {} }); } } }] });
Fin
Preguntas?