Archivo

Archive for the ‘Tech – Application Development’ Category

Gráficas DVT basadas en un View Object dinámico

En uno de nuestros últimos proyectos teníamos un requisito de crear una funcionalidad de reporting, que dependiendo de unos filtros debíamos crear una query diferente y mostrar los resultados en una gráfica. En este post podréis ver cómo lo implementamos.

El primer paso es crear un view object dummy. Vamos a utilizar ‘SELECT * FROM DUAL’ por query.

Una vez tenemos creado el VO, tenemos que añadirlo al Application Module y crear la clase de implementación del AM.

Lo que necesitamos principalmente es una lista en nuestro bean, que esté basada en un POJO, que iremos populando con los datos que obtengamos. Leer más…

ADF tips: Diferentes formas de mostrar mensajes de validación

ADF tips

Este post trata sobre las diferentes opciones que tenemos para mostrar mensajes de validación, como cuando tenemos un componente de entrada de datos marcado como requerido o como cuando utilizamos un componente tipo af:validateDoubleRange para manejar la validación.

Podemos tener un formulario simple como éste:

Por defecto, si solo hay un error de validación, el mensaje se mostrará en una especie de bocadillo.

Si por el contrario tenemos más de un mensaje, estos se mostrarán en un popup.

Si queremos cambiar la forma en la que se muestran los mensajes disponemos de 2 componentes:

Leer más…

Agregar librerías de terceros en Oracle JET usando Bower

junio 9, 2017 3 comentarios

El mundo JavaScript es enorme y con una gran comunidad que nos proporciona multitud de líneas de código ya desarrolladas. Para tener un control sobre cada una de estas líneas, y no tener que estar buscando en Google cada una de las librerías, ha nacido “Bower”.

¿Qué es Bower?

Si buscamos una definición encontramos que Bower es una especie de manejador de paquetes para la web, es decir, cualquier librería de código abierto necesaria para el desarrollo de un front-end.

Es probable que se confunda npm con bower, ya que el concepto y funcionamiento es bastante similar, y la diferencia estriba en que npm está enfocado a módulos y Bower está enfocado y optimizado para el front-end.

 

Ejemplos de uso:

bower install jquery
bower install knockout

Estructura

Cada vez que instalamos un paquete a través de Bower, éste genera una carpeta llamada “bower_components”, en la cual se descargan todos los componentes descargados a través de la herramienta.

El desarrollo

Hoy, desarrollaremos una aplicación híbrida usando una librería muy conocida en el mundo JavaScript como es threeJS.

Dividiremos el desarrollo en 4 pasos:

  • Preparar estructura de la app
  • Instalar threeJS con Bower
  • Configurar Grunt para recuperar las nuevas librerías
  • Desarrollar la animación 3D que deseamos mostrar.

¿Qué es ThreeJS?

Three.js permite la creación de animaciones 3D aceleradas por GPU utilizando el lenguaje JavaScript como parte de un sitio web sin depender de los complementos de navegación propietarios. Esto es posible gracias a la llegada de WebGL.

Las bibliotecas de alto nivel, como Three.js o GLGE, SceneJS, PhiloGL o una serie de otras bibliotecas, hacen posible la creación de complejas animaciones en 3D que se muestran en el navegador sin el esfuerzo de realizar una aplicación independiente o un plugin.

Véase: https://en.wikipedia.org/wiki/Three.js
Leer más…

Animaciones 3D con Three JS y Oracle JET

En el día de hoy me gustaría enseñaros la librería JavaScript ThreeJS.

¿Qué es ThreeJS?

Three.js permite la creación de animaciones 3D aceleradas por GPU utilizando el lenguaje JavaScript, como parte de un sitio web, sin depender de herramientas adicionales. Esto es posible gracias a la llegada de WebGL.

Las bibliotecas de alto nivel como Three.js o GLGE, SceneJS, PhiloGL (o una serie de otras bibliotecas) hacen posible la creación, y posterior muestra en el navegador, de complejas animaciones en 3D sin el esfuerzo de tener que realizar una aplicación independiente o un plugin.

Véase: https://en.wikipedia.org/wiki/Three.js

El objetivo

El objetivo de este post es desarrollar una aplicación capaz de generar una matriz, y que además, la aplicación pueda moverse por ella después de haber utilizado el giroscopio del dispositivo.

El desarrollo

Antes de empezar debemos identificar o crear el contenedor donde se creará el canvas en el que se visualizará nuestra animación 3D. En este caso utilizaremos el div “pageContent”, este div lo hemos creado en el index.html donde se visualizarán los distintos módulos de la aplicación; por defecto viene creado en el template “navdrawer”.

var container = document.getElementById( ‘pageContent’ );

El siguiente paso será crear la cámara. Este objeto pretende imitar la forma en que el ojo humano ve. Es el modo de proyección más común utilizado para la representación de una escena 3D.

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);

Para la representación de la cámara necesitamos 4 parámetros:

fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

Leer más…

ADF tips: Filtrar los nodos padre e hijos en un af:tree

ADF tips

A partir de la necesidad real de uno de nuestros clientes, sobre filtración de datos en una página con un componente af:tree, voy a mostraros como filtrar los padres y los hijos con un sólo valor utilizando parte del post de Ashish. Esto también se puede aplicar al componente af:treeTable.

La primera cosa que necesitamos es el componente tree y la estructura de datos. En este caso vamos a utilizar las tablas Departments y Employees del schema HR de Oracle.

En nuestra página vamos a arrastrar DepartmentsView desde la paleta de datacontrols y crearemos el componente tree.

Después crearemos un View Criteria en el View Object Departments (padre).

Leer más…

Mi primera aplicación con Oracle MAX (parte 2): Desarrollo de la aplicación

En la última versión de Oracle Mobile Cloud Service se incluyeron novedades como Oracle Mobile Application Accelerator (Oracle MAX) y los servicios de localización. En este post sobre la versión 2.0 de MCS vamos a centrarnos en Oracle MAX, una nueva herramienta que nos permite crear aplicaciones sin utilizar una linea de código, lo que permitirá a usuarios de negocio, y a personas que no saben programar, crear aplicaciones fácilmente.

Este es un post que consta de dos partes donde podréis encontrar:

En la primera parte de este post hemos diseñado la Custom API que consumiremos desde Oracle MAX.

Para poder acceder a Oracle MAX, dentro del menú ‘Aplications’ de Oracle MCS, tenemos que hacer click en ‘Mobile Applications’

Si queremos que un usuario de negocio tenga acceso a Oracle MAX, debemos asignarle el rol MobileEnvironment_BusinessUser. Si un usuario tiene este rol, no podrá acceder a Oracle MCS, solo a Oracle MAX.

1

Leer más…

ADF tips: Cambiar el estilo de un componente por su id

ADF tips

Si queremos cambiar la apariencia de un componente normalmente utilizamos Skinning y los selectores que nos ofrece. Aunque no es una forma usual de aplicar diferentes estilos a componentes, voy a mostraros como aplicarlos utilizando la id del componente.

Si por ejemplo tenemos un botón en una página, y este componente no está rodeado de ningún naming container (como puede ser un PanelCollection o una región), podemos utilizar su id sin hacer ninguna modificación más.

Podéis observar el código de la página, el css y el resultado.

 

1

2

3

 

Si por el contrario el componente está rodeado de un naming container, la id generada en html no será la misma, por ejemplo será ‘pc1:b2’ si lo tenemos dentro de un panelCollection o ‘r1:0:b2’ si el botón está dentro de una región.

Al ejecutar la página podremos inspeccionarla utilizando nuestro navegador preferido.

2-1

4

Leer más…