059 Creando User Controls Con Google Web Toolkit Y Gene Xus X Evolution 1
•Download as PPTX, PDF•
0 likes•677 views
Recommended
Recommended
More Related Content
Similar to 059 Creando User Controls Con Google Web Toolkit Y Gene Xus X Evolution 1
Similar to 059 Creando User Controls Con Google Web Toolkit Y Gene Xus X Evolution 1 (20)
More from GeneXus
More from GeneXus (20)
Recently uploaded
Recently uploaded (20)
059 Creando User Controls Con Google Web Toolkit Y Gene Xus X Evolution 1
- 1. userscontrols con google web toolkit y genexus X evolution 1 Diego Villagra dvillagra@culturait.com.ar
- 2. No Silver bullet Ley de Brooks – 1987 Frederick P. Brooks ganador del premio A. M. Turing (ACM) en 1999 (El Premio Nobel de la Computación)
- 3. Las Dificultades Esencial: una cualidadfundamental del software. Accidental: un problema en los métodos de producción actuales
- 4. Áreas de análisis OOP ProgramaciónAutomática ProgramaciónGráfica Program Verification (Testing) Entornos y Herramientas ComprarvsCrear Requerimientorefinamiento y prototipación Grandes diseñadores Tiempo Compartido
- 5. El problema
- 6. Cómoelegir? Eliminar, no incluir….
- 7. SOFEA (Service-Oriented Front-End Architecture) Application Download www Data Interchange
- 8. Arquitectura SOFEA Backend GeneXus X Evolution 1 - REST Rich FrontEnd GeneXus X Evolution 1 Componentes / Controles Flex GWT Comparison
- 9. Rich Frontend - Flex Primeraversión en Marzo 2004. Pros Produce Flash UI Creadopor Adobe Casos de éxito Soporta REST de forma simple
- 10. Rich Frontend - Flex Contras Not Search Engine Friendly El proceso de render HTML no tienebuenosresultados. La impresión no resultabuena. No Zero Turnaround w/o IDE.
- 11. Rich Frontend - GWT Primeraversión Mayo de 2006 Pros: Java => JavaScript Fácil de aprender y desarrollar con lasherramientasestándares de Java Unafuertecomunidad Zero Turnaround en modo Host
- 12. Rich Frontend - GWT Contras: Dificil de acoplar GWT sobrecódigo JavaScript existente No soportaforma robusta REST Opera bajo JavaScript Sandbox
- 13. GXT = GWT + ExtJS GWT comoFrameWork RIA ExtJS YUI (Yahoo User interface library) AJAX, DHTML, DOM
- 14. GWT vs Flex Usemos la mejorherramientaparacadatrabajo: Open Web : GWT Video and Rich Media : Flex HTML Rendering : GWT Vector Graphics and bitmap manipulation: Flex Accesibilidad (Navegadores, Técnicos): Flex
- 17. Google Web Toolkit Presente en las 9 áreas de análisis Programaciónautomática Entornos y herramientas Aplicaciones y controlesorientados a datos.
- 18. Google Web Toolkit + = GXT = + GXT UserControls Extensibilidad
- 19. Development GWT – Cómofunciona? Xmls Html, .java .java Runtime Hosted Mode Hosted Browser
- 21. Cross Compiler Run JAVA JavaScript Beneficios GWT Compilación Performance
- 22. Service oriented Front-EndArchitecture FrontEnd BackEnd Application Download www JSON Data InterchangeREST - JSON HTTP Procedure Data Provider
- 23. GXT Menu – Demo Creaciónproyecto Clases Java Objetos en GeneXusEv 1
- 24. Conclusión
- 25. ? Conclusión
- 26. Preguntas…
- 27. Referencias Ejemplo: www.gxopen.com www.culturait.com.ar Conferencias relacionadas GeneXus X: ¡Rich Internet Applications YA!- Sala 2A, Martes, 11:00 REST web services– Sala 2A, Miercoles, 11:45 Diego Villagra, Team Leader Cultura IT, dvillagra@culturait.com.ar
Editor's Notes
- Quieroempezarcontándolescuálserá el enfoque de nuestracharla. El proposito de ésta, no essólohablarlescomoconstruir Users Controls con GWT, no solamenteconocer los detallestécnicos, sinotambiénqueudsconozcan el procesoquenosllevo a obtenerunaconclusiónsobreestatecnología. El objetivoesqueconozcannuestralínea de razonamientoquenosbrindaherramientasparadebatiracerca de la integración de GeneXus con otroscomponentes, cuálesadoptarparanuestrasempresas y porqué.La primerapreguntaquequierohacerleses, cuántasveces en los desarrollos web queudshicieron, ya sea con genexus u otroslenguajes, tuvieronquerecurrir a códigojavascriptpara resolver aquelloquesóloutilizando el lenguaje de base no era posible de resolver?, el famosomenúdesplegable en la web. Esequetuvimosqueescribirya sea con algúndesarrollopropio o buscar y descargaralgunaversiónyaexistente en internet y adaptarla a mi aplicacióngenexus?.Es porpreguntascomoestasquenosotros en Cultura IT decidimosaprovechar la extensibilidad de GeneXus X, lasnuevasfuncionalidades de Evolution 1 paralograrcomponentesjavascriptmásintegrados al entorno de desarrollo de genexus, esdecircomponentesmuchosmásGeneXus. Estamosconvencidosqueescribirextensionesnosofrecer la oportunidad de generar un diferencialcompetitivoparanuestrosdesarrollos.Pero antes de volcarnosfuertemente en la pregunta de porque GWT, y porque no otrastecnologías, queremosintroduciralgunosconceptos…..
- nosgustaríacitar a un Guru de la informáticacomoes Frederick Brooks. Brooks, ganador del premioturingporsuscontribuciones a arquitectura de computadores, sistemasoperativos e ingeniería del software.Es ingeniero de software y másconocidopordirigir, dentro de IBM, el desarrollo del sistemaoperativo OS/360. Escribióalgunoslibrossobre el tema, perohoyvamos a hablarespecíficamenteacerca de un artículoqueescribió en 1987.Uds se preguntarán, porquecitamosestaley?, porquecompartimosfuertemente la visión de este Sr. Brooks dice: Of all the monsters that fill the nightmares of our folklore, none terrify more than werewolves, becausethey transform unexpectedly from the familiar into horrors. For these, one seeks bullets of silver that canmagically lay them to rest.Brooks, en suLey, haceunaanalogía entre los sistemasinformáticos y la leyendo del hombre lobo. El dice que los sistemasinformáticos, paranosotros los ingenieros, son como el hombre lobos, que de algo familiar se transformaninesperadamente en algohorroso, porque?Porque de ser un proyecto de software aparentemente simple, a los quenosotrosestamosacostumbrados, cuandonosllegan la noche, se convierten en mounstros con planificacionesatrasadas, excedidas en tiempo, presupuestosinflados, y productosquefinalmente son defectuosos.Entoncesnosotrosbuscamosdesesperadamentelasbalas de plataquemágicamentedisminuyan los costos del software. Vamos a intentarentender el punto de vista de brooks….Para comprendersuenunciado, debemosintroducirnos en lo que Brooks llama lasdificultades del software….
- Brooks dice que el software escomplejo y poseedificultades. Estas dificultades puede ser de dos tipos, Escencial….. Constituye o forma parte de la esencia de algo; es inherenteEj. La cantidad de estados de un sistema, la interpratamoscomounaDificultadescencial. Es parte de lo que el sistemadebe resolver y estádictadapor el negocio al cuál el sistemaaplica.Mientrasque la complejidad….Accidental….. Relativo a una propiedad, factor o atributo que no es esencial.Ej. Prácticasqueutilizamos, lasherramientas, los soporte de base, etc…Habiendocomprendidolasdiferencias entre ambascomplejidades, yo les pregunto ? cuáles la complejidadquetenemos q minimizar?, cuálesaquellaque en téoríapodemoscontrolar? Y otraaúnmásimportante…. cuáles la complejidadquenosva a diferenciarcomoempresas de desarrollo de software ? …La complejidad accidental.Perocómologramosreducirestasdificultades. Existenentonces 9 áreasqueseránanalizadas en cadatecnología o herramienta a utilizar … lascuales a nuestrocriteriodeberían ser cubiertas…
- El primero de los puntosque Brooks define comoesperanzases….OOP, la programaciónorientada a objetos, un paradigmaquees un estandart en lenguajes de programaciónactuales. Prg. Automática, estamoshablando de la generación de código? Estamoshablando de automatizartareas de codificación, estáalienado a nuestravisión, y la de Artech, automatizar lo automatizable.ProgramaciónGráfica, habla de dise;arunaaplicaciónutilizandounainterfazgráfica. Es decir lo queparahoynosotroses habitual, en un entorno de desarrollocomo GX o Visual StudioVerificación de programas (Testing). Gran parte del esfuerzo de la programaci’on van dirigidos a la prueba y corrección de errores. Cómopodemosencontrar un métodoparahacerpruebasquepermitanaumentar la productividad y mejorar la fiabilidad del producto final?, Ent. Y Herramientas. Nuevamenteestamoshablando de un conceptoquemejora la productividad, la herramientaqueadoptemos, dispone de entornos de desarrolloevolucionados ?, quecantidad de herramientasexistentesparaesatecnología?Comprar Vs Crear …. La soluciónmás radical y posiblepara la construcción de software es no construirlo. Brooks yaestabapensando en Frameworks. Cuandohabla de comprar no hablabasolamente de comprar software existente, hablaba de reutilización, estáhablando de Frameworks.Requerimientos y prototipación. Un conceptoquepara la comunidad GX resultaalgo habitual. Poresteconcepto y el queviene a continuación, Brooks esconsiderado el precursor de lo qyehoyes la metodologíaságiles de desarrollo.Grandes Dis. El otroconceptoquefuerte de desarrolloságiles. Brooks nos dice ladiferencia entre el grandedise;adores y el promedio son enormes. Habla de la escacez de estosdise;adores o arquitectos en la ingeniería y los métodosparafidelizarlos.Tiempocompartido, estamoshablando de procesamiento en paralelo. Pero no estamoshablandosólo de procesosqueejecutan en paralelo y mejoran la performance de lasaplicaciones, sinoestáintroduciendo el concepto de Zero Turnaround, unapropiedad de los lenguajesdinámicoscomo Ruby. Quesignifica Zero Turnaround?, es el tiempoquepasadesdequeyomodifico el fuente de un programa y puedoversuresultado. En los lenguajesdinámicoscomo Ruby, esetiempoesigual a 0. Modifico el código e inmediatamenteestoyobservando el resultado.Brooks advocates "growing" software organically through incremental development.He suggests devising and implementing the main and subprograms right at the beginning, filling in the working sub-sections later. He believes that programming this way excites the engineers and provides a working system at every stage of development. (This idea can be seen as a precursor of agile software development.)Estasáreas son lasqueutilizamosparaevaluarlastecnologíasqueveremos a continuación, son estos los factoresquedeterminanparanosotros los diferenciales entre unatecnología y otra.Y habiendocomprendidolasáreasque son significativaspara el análisis, nosenfoquemos en el problema…
- El granproblema de elegirunatecnología…..Y finjenséqueproblema, unalargalista de componentes o frameworks paraanalizar. Todos con sus pros y contras.
- Nuestrapreguntaahoraes…..Cómodeterminarcuáles la tecnologíaadecuada?, comoresultaría la integración a GX?, seríaposible ? Quecomplejidad y queperfilesnecesitamosparatrabajar con estatecnología ? Estáalineadaestatecnología con lasáreasquenombramosanteriormente, lasesperanzas de la plata?Tantaspreguntas….Pensemosentonces en descartar, y no en incluir. Descartamosdesde el principio aquellasque son son GX Compatibles, aquellasquesuintegración con GX se tornatecnicamentecompleja.Para poderanalizarestacomplejidad, tenemosquehablar de arquitecturas. QuesoportetenemosdesdeGeneXus a paraestastecnologías, cuáles la arquitecturaóptimaquepodemoslograr con GX parasoportarestastecnologías. Quenosbrinda GX Evolution 1 en relación a estaintegración?Entoncestenemosqueintroducirnos en la arquitectura de lasaplicaciones.
- Hablemosacerca de la arquitectura SOFEA, Arquitectura Front-End orientada a servicios. Se compone de ….Un server, desdedonde se descarga la aplicación….Un contenedorque en esteejemplopuede ser internet explorer, quedescarga la aplicación, Este cliente se desarrolloutilizandounaarquitectura MVC, y es el controler el responsible de intercambiardatos entre la aplicación y los servers de servicios, ya se autilizando SOAP o REST.Observenque no sóloestamoshablando de protocolo SOAP, sinotambién de REST.Peroestees un diagramagenérico de comocomo se estructuraestaarquitectura, comencemos a bajar a detalle los componentesqueintervienen…
- Entoncesvamos a diferenciar dos grandespartesdentro de la arquitecturaparaaplicaciones RIA. FrontEnd y backend. REST Backend, la capa de servicios, dondeutilizaremos GX X ev1 quees el soportequenospermite la implementaci’no de la arquitectura.Con respecto a Rich FrontEnd, tambiénutilizamos GX Ev 1, peroademáspotenciaremos la interface utilizandotecnologías RIA. Para estoscomponentes o controlesanalizaremos GWT y Flex.Haremosunacomparación entre ambas, peroestacomparaciónpuedehacerse extensible a lasdemástecnologíascomentadas con la mismalínea de razonamiento.Decidimosenforcarnos en estas dos duranteestacharlaparaacotar la comparación dada la importantecantidad de frameworks existentes y ademásporqueestosestán entre los losmásevolucionados.
- Empezaremospor Flex, una de lastecnologías a comparar….The first major release of Flex was introduced in March 2004. Y hablaremos de los pro y contras q tienecadatecnología, la másdestacado en cadacaso.Produceunainterfaz de usuario Flash, quepracticamentees un estandar en cualquiernavegador y existenmuchossitiosimportantesque lo utilizanparahacerdinámicasupresentación.Impulsadoporunaempresaimportantecomo Adobe.Soportar REST de forma simple significaque la interaciónbajoesta pseudo arquitecturaestransparente.
- Y ahoraanalizamos el otrograncompetidor….Primeraversión dosa;os posterior a Flex….Escribir Java y lograr JavaScript.Funcionacomo un generador de código JS ?. Podemosdecirquesí, no solo lo genera sinoque lo optimiza. Y luegocomprenderemosmejorcuáles la optimización.La base instaladaesgrande e importante, yaqueexistenmuchasherramientasdisponibles en la comunidad Java. Entornos de desarrollomuycompletos y probados.Existenmuchos sites, blogs, documentación, foros, quehacen a la comunidad de GWT unacomunidadmuyfuerte.Y en el caso del proceso de pruebacodificar-testear y debuggear, esmascorto en modo host.Turnaround is the time it takes for the changes in code to propagate to the running application. Currently the average time spent waiting for building and deployment is about one minute. In fact turnaround takes even more time away, due to the interruption penalties and quality degradation.
- En las contrastenemosque…Es dicil de acoplar con código JS yaexistente…..Sibienesposiblehacerlomediante JSNI, quepermitehacerllamadas a códigojs y viceversa, esmáscomplejoreutilizarcódigoyaexistente.La arquitectura REST essoportada, pero no de forma robusta. In computer security, a sandbox is a security mechanism for separating running programs. It is often used to execute untested code, or untrusted programs from unverified third-parties, suppliers and untrusted users.The sandbox typically provides a tightly-controlled set of resources for guest programs to run in, such as scratch space on disk and memory. Network access, the ability to inspect the host system or read from input devices are usually disallowed or heavily restricted. In this sense, sandboxes are a specific example of virtualization.Nospreguntamostambiénquesucedecuandoqueremosusar GWT paracrearaplicaciones RIA…. Puedegenerar el resultadoquehoy se obtiene con Flex?....
- Google Web Toolkit como Framework de aplicaciones RIA podríamosdecirquenecesita mayor evolución. En suversión actual 1.7 dispone de un paquete de clasesquepermitencrearcontrolesstarndart. Es decir, botones, ventanas, comboboxes, labels, etc.Sucedequeestoscontroles, cuando los comparamos con los controlesquepodemoslograrutilizando Flex, los resultados no son competitivos.Sin embargo, se handesarrolloimplementaciones de Frameworks RIA JavaScript para GWT. Tal es el caso de unamuyevolucionadaqueesExtJS. ExtJSnacecomounaextensión de la biblioteca YUI. Evolucionó en un FrameWork o biblioteca JavaScript paradesarrollaraplicaciones Web Interactivas con base en AJAX, DHTML y DOM.Estacombinación entre GWT y ExtJS ha sidobautizadacomo GXT. Unaimplementación de ExtJSpara GWT. QuesignificaqueExtJS, se escribiócomo un paquetes de clasesreutilizablesdentro del dominio de GWT. Como un datointeresante , paraconoceracerca de la estabilidad de ExtJS ,veamosquiénes lo utilizan y en queproductos…..
- Entoncescomoresumen de la comparación…GWT vs Flex, o comomáscomunmente se puedeencontrar la comparacióncomo Ajax vs Flex.Estamosconvencidos de usar la herramientaadecuadaparacadatrabajo:Open Web, hablamos de aplicaciones Web estandaresdesde el punto de vistsa de sucontenido, html, css, imágenes, etc. Ajax esmásadecuado. Contenido multimedia, obviamente Flex, porquecomotecnologíasuperaampliamente al tradicionalhipertextoquees html.HTML rendering, es el proceso de presentarcontenido html en los navegadores. En estecaso Flex tieneinconvenientesqueyaestánsiendosubsanados con Adobe AIR. Pero de todasmaneras en Ajax podemosdecirqueesnativo.Manipulación de imágenes y gráficosvectoriales, Flex nuevamentepor ser unatecnología multimedia.Accesibilidad, Flex corre con ventaja. Perocuandohablamos de Accesibilidadestamoshablando de accesibilidadtanto de los internautas, a través de los navegadores de internet comotambién de lasempresas a recursoscapacitadosparaestatecnología. Entonces, nuestrapreguntaes, que tan accesibles son estastecnologíasparalasempresas en lo querespecta a desarrolladorescapacitados?
- GWT, y concentremon’ósentonces en lasrazonesporlascuálesadoptamos Google Web Toolkit, estas son:Cubre en un importanteporcentajelasáreas de análisisquenospropusimos. Las 9 áraes, dondelasmásfuertes son:Programaciónautomática, porque genera códigojavascriptque a través del proceso de compilación el código final producidogeneralmenteesmáspeque;o y másrápidoquesiesecódigo se escribiera a mano. Y Además ese mismo código es ejecutado es el mismo en los navegadores populares. No tendríamos que tener inconvenientes de compatibilidad en un navegador u otro.La existencia de muybuenos IDES y herramientasasociadas a Java. La mayor parte de lasaplicacionesquedesarrollamosestafuertementeorientadas a la gestióndatos, no al streaming de video ni a la manipulación de bitmas y gráficosvectoriales.Teniendo en claroporque GWT, esquenosvamos a adentrar en la configuraciónquevamos a utilizarparatrabajar con lascomponentes RIA y estaes…..
- Habiendoadoptadounatecnología a nuestro set de herramientas en Cultura IT, vamos a introducirnos en los detallestécnicos de la solución.Como se configura un ambiente, suarquitectura y susbeneficioscomoherramienta.La combinaciónquevamos a utilizarentonceses :GWT +ExtJS +GWT + ExtJS = GXT +GX Ev 1 + User Controls= Full Web 2.0 & RIAPerocomofuncionaeste framework de google?Actualmente, la creación de aplicaciones web resulta un proceso pesado y propenso a errores. Los desarrolladores pueden pasar el 90% de su tiempo estudiando las peculiaridades de los navegadores. Por otra parte, la creación, la reutilización y el mantenimiento de una gran cantidad de componentes AJAX y bases de código JavaScript pueden ser tareas complejas y delicadas. Google Web Toolkit (GWT), especialmente en combinación con el complemento de Google para Eclipse, facilita estas arduas tareas al ofrecer a los desarrolladores la posibilidad de crear y mantener rápidamente aplicaciones JavaScript con interfaces complejas, pero de gran rendimiento, en el lenguaje de programación Java. Google Web Toolkit (GWT) permite crear aplicaciones AJAX en el lenguaje de programación Java que son compiladas posteriormente por GWT en código JavaScript ejecutable optimizado que funciona automáticamente en los principales navegadores. Durante el desarrollo de una aplicación, puedes repetir rápidamente el mismo ciclo "editar - actualizar - ver" típico de JavaScript y aprovechar la ventaja añadida de poder depurar y recorrer una a una todas las líneas de código Java. Cuando estés listo para la implementación, GWT compilará el código fuente Java en archivos JavaScript optimizados independientes. Google Web Toolkit te permite crear fácilmente tanto un artilugio para una página web como una aplicación completa.
- Hablemosacerca del proceso de desarrollo….En tiempo de ejecución se disparan….Son estos dos componentes los quepermitentrabajando en estemodo host, hacer el debug del código java de la aplicación…..Y podemosobservar la interacción entre ellos…
- La interaccion entre el navegador GWT y el server.En la imagenpuede verse que en el server se observan los mensajes de error, talcomo la consola de ejecución de java o .net, y generando los mensajes de error y toda la trasnferencia http quedaregistrada.Unavezquecompletamos un primer prototipo de la aplicaciónpasamos a uno de los procesosmásimportantes de GWT. Es la compilación.
- Enqueconsiste la compilación ?Java -> Compila JavaScriptJavaScript compiladoejecutable y optimizadopara los principalesnavegadores (FireFox, IE, Safari, Opera).Depurarcódigo Java.Es posiblecrear un Widget particular o todaunaaplicación.Es posibleutilizarbibliotecas JavaScript y código JavaScript original (JSNI)A diferencia de los minimizadores de JavaScript, que sólo funcionan con texto, el compilador de GWT realiza optimizaciones y un análisis estático completo de toda la base de código de GWT y, frecuentemente, genera código JavaScript que se carga y ejecuta con mayor rapidez que el código JavaScript equivalente creado de forma manual. Por ejemplo, el compilador de GWT suprime de forma segura todo el código no utilizable (mediante una exhaustiva tarea de eliminación de clases, métodos, campos, e incluso parámetros, que no se utilizan) para asegurarse de que el archivo de secuencias de comandos compilado sea lo más pequeño posible. Otro ejemplo: el compilador de GWT realiza una sustitución selectiva de llamadas a funciones en los métodos, lo que permite optimizar el rendimiento de las ejecuciones de métodos. La compilación cruzada te ofrece la modularidad y las abstracciones mantenibles que necesitas para desarrollar aplicaciones sin sufrir una disminución del rendimiento durante la ejecución del programa. Veamosahoracomoes el proceso de integración y unejemploconcretoutilizando el estilo de arquitectura REST con GeneXus Ev1.
- La solución final configurada de la siguiente forma, El desarollo del FrontEndutilizando GWT, Eclipse, lasclases y el objeto .jscompilado final corriendo en un navegador.Este navegadorconectandosé a un web server con unaaplicacióngenerada con GX Ev 1. Utilizandoprcs Http call protocol y mains. Queleendesde un data provider En conclusión el BackEndgenexuscontiene:Unprocedimientoestandargxutilizando :Main en Yes, call protocol en http, y utilizar variables HttpResponse.Data providers queproveen la estructuraleída.MetódoToJsonparaconvertirla en el formatoespecificado.Y poruqueJson y no XML ??
- Para terminarquierodejarclaro el porque de nuestraconclusión y queesta no esunaconclusiónestricta o rotunda.Fundalmentalmenteporqueestamosconvencidosque no existela balaplata, queconstantementetrabajamos en resolver la dificultad accidental y queporeso Google Web Toolkit esunaherramientaque en Cultura IT hemosadoptadoperoque no debe ser la única y quecadauna de nuestrasempresasdebetrabajar en formarsuspropiasconclusiones.Diferenciaciónesequivalente a competitividad, escribirextensiones, desarrollar Users Controls significallevar al extremonuestrosdesarrollos web tanto en el proceso de desarollo, como en el resultado final. Y porúltimo les dejounapregunta….
- ….queestánhaciendosusempresasparadiferenciarse en los desarrollospara la Web ?Hoy nosotrostenemosunaconclusión…..