Archivo

Posts Tagged ‘JavaScript’

ADF tips (MOBILE): Llamar a un servicio web

ADF tips (MOBILE)

Si su empresa ha apostado por SOA y necesita implementar una aplicación móvil, la forma natural de alimentar de datos esta aplicación será mediante servicios web.

ADF Mobile permite la integración con servicios web de forma fácil con el componente “Web Service Data Control”. Este tipo de “data control” permite acceder tanto a servicios SOAP como a servicios REST. A continuación vamos a mostrar un ejemplo de cómo incorporar una llamada a un servicio web en una aplicación ADF Mobile.

Para poder realizar esta demostración hemos creado un servicio web en una instalación local de Oracle Service Bus. El servicio consiste en una operación que devuelve una lista de frutas. En este post no entraremos en cómo implementar el servicio web. Por otro lado, vamos a suponer que ya disponemos de una aplicación móvil en desarrollo, a la que vamos a incorporar la llamada al servicio.

Paso 1: crear el “data control”
Seleccionamos el proyecto “ApplicationController” y a continuación llamamos a la galería para crear un nuevo objeto. En este caso, seleccionamos la opción “Data Control” dentro de la rama “Business Tier”. En las opciones que aparecen escogemos “Web Service Data Control (SOAP/REST)”. A continuación se inicia el asistente.

nuevo_dataControl

En el asistente se nos pide un nombre para el “data control”, que indiquemos el tipo (en nuestro caso, se trata de un servicio SOAP) y que especifiquemos la URL del descriptor del servicio (WSDL).

asistente1

Leer más…

Categorías:ADF Etiquetas: , , , ,

ADF tips (MOBILE) – Ejecutar un método javascript desde java

septiembre 17, 2013 1 comentario

ADF tips (MOBILE)

ADF Mobile permite extender su funcionalidad estándar mediante el uso de javascript, css3 y html5. En este post vamos a ver cómo podemos invocar un método javascript desde una clase java de nuestra aplicación.

Para nuestro ejemplo, implementaremos un método para mostrar mensajes emergentes. Un caso habitual en las aplicaciones, que requieren que en determinados casos se muestre un mensaje emergente cuyo texto cada vez sea distinto y que necesita ser aceptado por el usuario.

ADF Mobile está desarrollado sobre la plataforma Phonegap/Cordova (en función de la versión) y en esta plataforma existe una API en javascript que permite crear este tipo de avisos. En concreto, el método que vamos a usar es el siguiente:

    navigator.notification.alert(message, alertCallback, [title], [buttonName])

Los parámetros que espera la función son:

  • message: texto del mensaje a mostrar
  • alertCallback: función javascript a ejecutar una vez el usuario acepta el mensaje. Si no se va a ejecutar ninguna acción, se puede pasar el valor null.
  • title: título a mostrar en la ventana del mensaje
  • buttonName: texto que aparecerá en el botón que cierra el aviso

Así pues, el objetivo que nos proponemos es crear una clase java que nos permita crear avisos mediante una llamada al método javascript indicado. ADF Mobile tiene una serie de clases públicas con distintas utilidades que permiten realizar diferentes acciones sobre el framework. Una de las acciones que permite es la de invocar métodos javascript. La clase que contiene esta utilidad es AdfmfContainerUtilities. El método que sirve para realizar las llamadas es el siguiente:

public static java.lang.Object invokeContainerJavaScriptFunction(java.lang.String featureId,
                                                                 java.lang.String methodName,
                                                                 java.lang.Object[] args)
                                                        throws AdfException

Leer más…

Categorías:ADF Etiquetas: , , ,

¿Por qué ADF Mobile y no otro framework?

enero 30, 2013 1 comentario

Ya os expliqué en este post las características básicas de ADF Mobile. Hoy os voy a dar las (mis) razones por las que considero más productivo trabajar con este entorno en vez de utilizar otros frameworks.

La principal razón es que puedo escribir la lógica de la aplicación en Java en vez de usar JavaScript, Phyton u otro lenguaje:

1. Java me ofrece un tipado fuerte, por tanto las aplicaciones son menos propensas a errores
2. Trabajando con Java, depurar las aplicaciones es infinitamente más fácil que con JavaScript
3. El coste de mantenimiento de Java es menor que en el caso de JavaScript (el coste de desarrollo también es menor)
4. Las arquitecturas basadas en Java hoy por hoy ofrecen entornos basados en componentes y una robusta capa de binding que me va a permitir desarrollar con menos codificación al trabajar de forma declarativa. Me facilita la separación entre las capas de negocio y presentación (buenas prácticas de diseño) y dispongo de un enlazado automático y estándar entre ambas capas, con las ventajas que eso supone: mantenibilidad y fiabilidad.
5. Dispongo de un entorno de desarrollo que me ofrece herramientas de transformación de modelo, búsqueda y reemplazo de variables o de cualquier elemento del lenguaje (en javascript si por ejemplo busco y reemplazo en todos los archivos, luego tengo que testear, testear y testear), JavaDoc, etc.
6. Puedo reutilizar modelos de negocio de mis servidores corporativos (a través de web services)
7. Seguridad integrada

No se trata de una discusión de si Java es mejor que Javascript, sino de entender que cada lenguaje tiene unas características que lo hacen más adecuado para construir ciertos elementos pero no tanto para hacer otras cosas.
JavaScript es útil para manejar eventos de la Interfaz de usuario, y así lo utilizo en mis aplicaciones ADF Mobile. No renuncio a nada, pero por suerte tengo Java y lo utilizo para programar la lógica de la aplicación, con la solidez que nos da modelar y construir aplicaciones JEE (también hay otras tecnologías válidas para generar aplicaciones empresariales). De este modo mi lógica de negocio es independiente del cliente web que ejecute el Javascript. Estoy ganando en robustez.

¿Qué supone disponer un framework basado en estándares Java? Supone que podemos usar las facilidades de binding de Java, aprovecharnos del IDE de desarrollo (JDeveloper) y de sus herramientas de diseño.

Este apartado me sigue maravillando. Importo a mi proyecto un módulo de datos con sus JavaBeans correspondientes desde cualquier proyecto corporativo existente, hago click con el botón derecho sobre el JavaBean, selecciono Crear DataControl, arrastro una lista de datos y la suelto sobre la página que estoy diseñando, escojo que quiero que me lo genere como una lista y ya tengo mi lista de datos en la página. He tardado minuto y medio y tengo un diseño correcto basado en la capa de bindings de Java EE sin errores en el código.

Continúo creando mi aplicación: me voy a la lista y le digo que cuando se seleccione un elemento dispare la acción ir_a_elemento (previamente establezco gráficamente mediante el editor de propiedades el parámetro que indica qué elemento de la lista es el seleccionado) y diseño la navegación de la página en el editor de taskflows (gráficamente) para que la capa de control (una capa que no existe en Javascript, y que nos aporta diseño estructurado) sepa como navegar a la página del elemento. Una página que me ha costado otro minuto y medio diseñar partiendo de los objetos de datos que he creado en el apartado anterior.

jdeveloper_taskflow

Como la aplicación requiere más funcionalidad, seguramente tengo que escribir código:  por ejemplo, necesitaré recuperar y guardar los clientes en la base de datos. Pues bien, tengo dos posibilidades: guardarlos en el servidor corporativo o en la base de datos local (se guardarían encriptados, viene de serie). Suponiendo el primer caso, necesitaré obtener el WSDL (contrato) del servicio y generar un componente de datos basado en SOAP o Rest. Ya sólo debo ligar las páginas con los atributos de este componente en vez de utilizar los del modelo de datos. Si necesito usar la base de datos local (no excluyente con el acceso remoto a datos), implemento las operaciones de guardar y recuperar en el JavaBean y me bastará arrastrar la operación de guardar sobre la página y decirle que quiero que me genere como un botón de comando.

En un momento dado, se produce un error en mi aplicación. ¿Qué hago? ¿Activo el log y añado trazas en el código? No tengo claro dónde está el error, pero ADF Mobile está integradísimo en JDeveloper y puedo activar la facilidad de debug (otra cosa que se complica cuando estoy desarrollando tan solo en Javascript).

jdeveloper_debug

Además, elijo ADF Mobile, porque ofrece todas estas ventajas en un entorno integrado. Si tu framework de desarrollo no incluye algunos elementos (librerías de cifrado, herramientas de binding, depuradores de código, capa de control, …) vas a tener que buscarlos fuera, y luego tendrás que responsabilizarte de la integración. Esto implica que con cada nueva versión de cada librería corres el riesgo de que otras partes dejen de funcionar, por lo que decidirás no actualizar nunca y tu tecnología de trabajo irá quedando obsoleta.

Si tu framework te ofrece todo lo que necesitas, y te permite desarrollar y mantener la facilidad y rapidez que tu deseas, sigue adelante con él. Ahora bien, si no estás del todo satisfecho, prueba el funcionamiento de ADF Mobile.

Categorías:ADF Etiquetas: , , , , ,

Probando, probando… compatibilidad con Internet Explorer

Todo buen desarrollador web disfruta de los estándares y, sobretodo, de cómo cada navegador web decide interpretarlos y ceñirse a ellos.
Uno de los personajes principales, históricamente hablando, a la hora de comprobar visualmente nuestros desarrollos suele ser Internet Explorer. Para contextualizar un poco esta afirmación nos podemos fijar en la siguiente tabla que resume las estadísticas de uso de los distintos navegadores en los últimos 10 años según w3schools.com:

Año Internet Explorer Firefox Chrome Safari Otros
2002 83,4 % - - - 16,6 %
2005 68,9 % 23,6 % - - 7,5 %
2008 46 % 44,4 % 3,6 % 2,7 % 6 %
2010 27,5 % 43,5 % 22,4 % 3,8 % 2,8 %
2012 15,1 % 31,2 % 46,3 % 4,4 % 3 %

Si bien es cierto que hoy en día Internet Explorer ha perdido gran parte del delicioso pastel de usuarios que llegó a tener, hay que tener en cuenta que los usuarios suelen ser reacios al cambio, sobre todo si nos enfrentamos a usuarios de tipo corporativo.

Para la incomprensión de nuestro friki interior, aún quedan usuarios que navegan con IE6 o algún otro navegador prehistórico que no se ha logrado erradicar, pero somos buenas personas y queremos que todo usuario pueda navegar felizmente por nuestras aplicaciones web.

El principal interesado en que así sea es, obviamente, Microsoft, y para ello nos proporciona un interesante conjunto de Power PCs (máquinas virtuales ejecutables por Windows) con las versiones de Internet Explorer instaladas en los correspondientes sistemas operativos vigentes en el momento de su lanzamiento. También nos presentaron un conjunto de herramientas integradas en el propio navegador que decían comprobar la compatibilidad con versiones anteriores, pero se ha visto que no siempre son de fiar. Abrir el navegador original, seguro que no falla!

internet-explorer-logoA continuación os dejo el enlace para que podáis ayudar a todos esos usuarios rezagados a disfrutar de vuestras creaciones:

Internet Explorer Application Compatibility

Y vosotros, ¿de qué herramientas echáis mano para comprobar la compatibilidad?

Integración Forms 11g con Javascript: Maximizar FORMS_MDI_WINDOW

julio 30, 2010 6 comentarios

Una de las nuevas funcionalidades de Forms 11g es la integración con Javascript. Para demostrar el funcionamiento de esta nueva funcionalidad os mostraré cómo maximizar la ventana FORMS_MDI_WINDOW.

La integración Forms-Javascript es bidireccional:

  • “Forms to Javascript“
      Mediante uso de web.javascript_eval_expr ejecutamos procedimiento JavaScript
  • “Javascript to Forms”
    1. Desde Javascript mediante método sendEventToForm
    2. En el formulario se dispara el evento When-Custom-JavaScript-Event

En el ejemplo que os propongo, la integración sólo se realiza en la dirección “Forms to JavaScript”.

Como ya conocéis, sobre todo si trabajáis con separateframe=true, la ventana FORMS_MDI_WINDOW no queda del todo maximizada mediante el uso de set_window_property (FORMS_MDI_WINDOW, WINDOW_STATE, MAXIMIZE), con lo que dependiendo de cómo tengamos diseñados nuestros formularios la consola quedará parcialmente “cortada”.

Ahora en Forms 11g, aprovechando la capacidad de integración con JavaScript podemos maximizarla. ¿Cómo? Muy sencillo:

Leer más…

Integración del calendario JS Calendar2 v1.8 en una aplicación web

julio 22, 2010 1 comentario

Después del post que publiqué sobre cómo integrar el editor HTML CKEditor, he considerado interesante publicar este nuevo post tratando la integración de otra aplicación Javascript muy potente y usable: el calendario JSCalendar2.

Al igual que el CKEditor, estoy seguro que muchos de vosotros también conoceréis el JSCal y lo habréis integrado alguna vez en una aplicación web.

A continuación veréis los pasos para realizar una integración básica del calendario:

1. Lo primero es descargarse el zip de la web oficial: http://www.dynarch.com/projects/calendar/download/1.8/JSCal2-1.8.zip

2. Luego descomprimimos la carpeta JSCal2-1.8 directamente en la raíz de nuestro servidor web y le cambiamos el nombre a JSCal2.

3. Seguidamente creamos un HTML con las siguientes líneas de código:

Categorías:Javascript Etiquetas: ,

Integrar el editor HTML CKEditor en tu desarrollo web

junio 10, 2010 2 comentarios

¿Habéis tenido alguna vez la necesidad de integrar un editor HTML estándar en un desarrollo web?

En este post comentaremos la posibilidad de integrar el grandísimo y novedoso CKEditor que algunos de vosotros ya conocéis. Este editor es un componente open source que genera HTML 1.1 estándar desarrollado por CKSource.

A continuación os detallo como integrar el CKEditor paso a paso:

  1. Descargar el zip de la última versión desde la web oficial.
    http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.2.1/ckeditor_3.2.1.zip
  2. Una vez descargado lo descomprimís de manera que todos los archivos queden en la carpeta ckeditor o como la queráis llamar directamente en la raíz de vuestro servidor web
  3. Luego hay que añadir dentro del head de la web la llamada al js.
    <script type=”text/javascript” src=”/ckeditor_3.2.1/ckeditor.js”>
    </script>
  4. Después hay varios métodos para cargar el editor, el más común para aplicaciones sin AJAX sería reemplazando un text area.
    <textarea cols=”80″ id=”editor1″ name=”editor1″ rows=”10″>
    </textarea>
    <script type=”text/javascript”>
    CKEDITOR.replace (“editor1″);
    </script>

Y ya lo tendríamos integrado!!!! Fácil ¿no?. Os dejo un pantallazo del resultado de la integración del editor.

También aprovecho para decir que el zip del CKEditor también incluye otros ejemplos y métodos, así como varios skins visuales y funciones para la integración del plugin en aplicaciones AJAX. Además, en la web del editor encontraréis la documentación y ayuda sobre todas las clases, funciones, triggers, métodos y propiedades del plugin.

Categorías:Javascript Etiquetas: ,
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 133 seguidores