Cliente rico con ExtJS y REST

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:


Cliente rico:


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:


Cliente rico:


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


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


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)


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:


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:


Cliente rico:


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:


Cliente rico:


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:


Cliente rico:



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


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


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


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


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' }]

}


Aplicacin mnima con ExtJS: Ext.onReady(function() { Ext.Msg.alert("Informacin", "Alerta desde ExtJS"); });


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.


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" }) });


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) { } } });


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']), ... });


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?

Date post:	21-Nov-2014
Category:	Documents
Upload:	ricardo-borillo-domenech
View:	7 times
Download:	4 times

Cliente rico con ExtJS y REST

Documents