Event Listeners en Cordova para Android y iOS

Al empezar una aplicación de Cordova una de las primeras cosas a tener en cuenta son sus event listeners, relacionados con el ciclo de vida de una app. Se trata de unos pocos eventos que conviene tener en cuenta, especialmente cuando tenemos que conservar cambios o estados al pasar nuestra aplicación a segundo plano (porque entra una llamada o porque el usuario aprieta el backbutton) y al volver a primer plano.

Así que examinemos brevemente estos event listeners:

Relacionados con el Ciclo de Vida

deviceready

el evento esencial, marca cuando Cordova está cargada y preparada para accederse, para evitar que la parte del Javascript sea llamada antes de que esté accesible en el DOM. Una vez se dispara este evento, el sistema ya escucha nuestra programación.

pause

se dispara cuando una aplicación pasa a segundo plano o background (ver especificaciones particulares para iOS). Es especialmente importante para guardar estados o datos importantes que no queramos que el usuario pierda.

resume

se dispara cuando una aplicación pasa a primer plano (ver especificaciones particulares para iOS)

Relacionados con los Botones (sólo Android)

backbutton

sobrescribe el comportamiento por defecto del botón de ir atrás

menubutton

sobrescribe el comportamiento por defecto del botón de menú

searchbutton

sobrescribe el comportamiento por defecto del botón de buscar

Ejemplos

function writeConsole() {
 console.log("DEVICE READY");
 document.addEventListener("pause", onPause, false);
 document.addEventListener("resume", onResume, false);
 document.addEventListener("backbutton", onBackKeyDown, false);
 document.addEventListener("menubutton", onMenuKeyDown, false);
 document.addEventListener("searchbutton", onSearchKeyDown, false);
 cordova.plugins.email.isAvailable( function (isAvailable) {
 console.log("EMAIL PLUGIN AVAILABLE");
 });
}
function onPause() {
 console.log("ON PAUSE");
}
function onResume() {
 console.log("ON RESUME");
}
function onBackKeyDown() {
 console.log("ON BACK KEY DOWN");
}
function onMenuKeyDown() {
 console.log("ON MENU KEY DOWN");
}
function onSearchKeyDown() {
 console.log("ON SEARCH KEY DOWN");
}

Ponemos nuestra llamada a writeConsole() en el ready del documento. El ready dependerá del framework de vista que utilicemos. Por ejemplo, si utilizamos (muy recomendable) ionic, lo deberíamos poner en el $ionicPlatform.ready:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
    writeConsole()
  });
})

Más información en la página oficial de Cordova.

 

Cómo utilizar Genymotion con Ionic

Genymotion es una más que esperada alternativa a los AVD. Aunque es de pago en su versión completa, la versión gratuita nos permite trabajar con un emulador sólo con unas pocas limitaciones (entre ellas el trabajo en red).

Es sencillo utilizar Genymotion, pero algunos aspectos pueden resultar problemáticos. Esta pequeña guía pretende permitir empezar a trabajar con Genymotion sin más problemas. Para profundizar en las posibilidades, recomendamos su la guía de inicio de Genymotion, muy completa.

Paso 1

Vamos a la página de descargas de Genymotion y escogemos la versión FREE.

Tenemos que registrarnos. El registro es gratuito. Necesitaremos esa cuenta para empezar a utilizar Genymotion.

Seleccionamos nuestra versión y ejecutamos el archivo descargado. Observad que con Genymotion se nos instala VirtualBox, dado que cada virtual device será una máquina virtual.

Paso 2

Iniciamos Genymotion. Nos indicará que no tenemos ningún dispositivo y que si queremos añadir uno. Para añadir un nuevo dispositivo, nos pedirá que nos identifiquemos. Una vez identificados podremos escoger la máquina virtual que queramos, tanto el modelo como la distribución de Android.

Una vez escogida, la bajaremos (se trata de máquinas pesadas, de más de 100M) y la tendremos dispuesta.

Paso 3

Para utilizar nuestra máquina virtual primero debemos encenderla. Genymotion abre cada máquina virtual como un dispositivo externo conectado mediante USB, de manera que tenemos que tener abierta la máquina y debemos abrirla como:

$ ionic run

Paso 4

Si queremos utilizarlo con Eclipse, podemos instalar el plugin para Eclipse de su página. En las instrucciones de Genymotion encontraréis el link para instalarlo desde Install New Software y los pasos.

 

 

 

Crear una web app con Cordova y Ionic utilizando la cámara

Una de las ventajas de utilizar Cordova es la facilidad con la que podemos utilizar muchas de las características de los móbiles, como cámara, geolocalización, agenda, contactos, etc. La ventaja de utilizar Ionic es la facilidad con la que Angular.js (aunque no utilicemos ngCordova) interactúa con los plugins de Cordova y nos permite utilizarlos. Veamos nuestro ejemplo con la cámara en Android.

Paso 1 – Entorno de desarrollo

Instalamos el entorno de desarrollo, con Cordova y Ionic. Si no lo tenéis ya instalado, podéis consultar nuestro tutorial sobre cómo instalar Cordova y Ionic.

Paso 2 – Creación de la app

Creamos una web app vacía Ionic:

$ ionic start miCameraApp blank

Vamos al directorio:

$ cd miPrimeraApp

Le añadimos la plataforma Android y hacemos el build.

A continuación importamos el proyecto a Eclipse y empezamos a trabajar.

Paso 3 – Instalación del plugin

Volvemos a la consola y en el directorio de la app, instalamos el plugin:

$ cordova plugin add org.apache.cordova.camera

Paso 4 – HTML

Añadimos al HTML básico preparado por Ionic nuestro botón para tomar la foto y un tag img en el que mostrar la última foto tomada:

<ion-content>
    <button ng-click="tomaFoto()" class="button button-block button-primary">Foto!</button>
    <img ng-src={{lastPhoto}} style="max-width: 100%" />
</ion-content>

Al hacer click en el botón ejecutará el método tomaFoto() de Angular.js.

Paso 5 – app.js (Angular)

Abrimos el fichero app.js, en www\js, y añadimos al final de todo el documento, fuera de todas las llaves, el siguiente controlador:

.controller('MainCtrl', function($scope, Camara) {
    $scope.tomaFoto = function() {
        Camara.tomaFoto().then(function(imageURI) {
            $scope.ultimaFoto = imageURI;
        }, function(err) {
            console.err(err);
        }, {
            quality: 75,
            targetWidth: 200,
            targetHeight: 200,
            saveToPhotoAlbum: false
        });
    };
})

Este controlador llama a un servicio angular.js creado por nosotros y que nos devuelve un objeto Camara, que nos permite utilizar la cámara del teléfono. Este servicio lo creamos en otro archivo que crearemos nosotrosahora, services.js, y que debemos cargar cuando se cargue este módulo starter de angular.js. Así, añadimos starter.services a la definición del módulo:

angular.module('starter', ['ionic', 'starter.services'])

IMPORTANTE: añadimos también el controlador al body del html:

<body ng-app="starter" ng-controller="MainCtrl">

Paso 4 – la factoría de Cámaras

Creamos un nuevo fichero services.js en el mismo directorio que app.js, www\js, y añadimos la factoría de Cámaras, que es donde Angular interactúa con el plugin de Cordova:

angular.module('starter.services', [])
.factory('Camara', ['$q', function($q) {
    return {
        tomaFoto: function(options) {
            var q = $q.defer();
            navigator.camera.getPicture(function(result) {
                q.resolve(result);
            }, function(err) {
                q.reject(err);
            }, options);
            return q.promise;
        }
    }
}]);

IMPORTANTE: no olvidéis añadir la referencia a services.js en el had de vuestro index.html:

 <script src="js/services.js"></script>

Final

A partir de aquí podemos jugar con esas fotos, pero eso ya son otros plugins…

 

 

Empezar a utilizar Sass en un proyecto IONIC Cordova

Como Bootstrap o muchos otros frameworks, Ionic viene ya con SASS. Estos frameworks para utilizar CSS de manera avanzada, con herramientas de programación, cada vez son más presentes y permeables. En este pequeño artículo vamos a echar un vistazo a la presencia de SASS en Ionic.

Instalación de SASS

Instalamos SASS en nuestro sistema, para que Ionic pueda utilizarlo.

Uso de SASS en Ionic

En cuanto a Ionic y CSS, podemos utilizar directamente el css vacío (/* Empty. Add your own CSS if you like */) que nos aparece en:

nombre_app\www\css\style.css

O podemos trabajar con Sass directamente, que es el que va a generar el css final. Este css final generado por Ionic lo encontramos en:

nombre_app\www\css\ionic.app.css

Para sobrescribir las variables de estilo de scss no vamos directamente a los scss sino que los sobrescribimos en los archivos del directorio nombre_app\scss, que terminan todos unidos en:

nombre_app\www\lib\ionic\scss\ionic.scss

Por ejemplo, si abrimos el fichero:

nombre_app\www\lib\ionic\scss\_variables.scss

podremos en él cambiar variables globales, y empezaremos a disfrutar de poder progamar, o por lo menos acercarnos más a lo que es programar, en CSS.

IMPORTANTE: si queremos trabajar directamente con sass en la compilación de la app en tiempo real, debemos hacer un gulp sass;

gulp sass

Declarando SASS en la página index.html

En la página index.html declararemos nuestro CSS de una manera u otra dependiendo de si queremos escribir directamente css o de si queremos trabajar directamente con SASS.

Así, en el HEAD, debemos escribir:

Si no utilizamos sass:

<link href=“lib/ionic/css/ionic.css” rel=“stylesheet”>

<link href=“css/style.css” rel=“stylesheet”>

Si utilizamos sass:

<link href=”css/ionic.app.css” rel=”stylesheet”>

 

Instalar SASS en Windows

SASS, junto con LESS, es una manera de llevar las ventajas de la programación a CSS, dándonos las ventajas del uso de variables o de subclases. En este link podéis leer una buena comparativa entre ambos.

Por nuestra parte, simplemente os echamos una mano para instalar vuestro SASS en Windows para empezar a utilizarlo.

Con RUBY

SASS está escrito en Ruby, de manera que para instalar SASS en nuestro sistema necesitamos primero instalar Ruby (aunque hace poco han sacado http://sass-lang.com/libsass como un puerto C/C++ para Sass). Instalamos Ruby desde su oágina oficial.

Una vez instalado podemos ir a la consola de Windows e instalar Sass desde gem, el gestor de packages de Ruby:

gem install sass

Para asegurarnos de que todo ha ido bien consultamos la versión instalada de sass:

sass -v

que nos tiene que dar, en el momento de este tutorial:

sass 3.4.7 (Selective Steve)

En el caso de que tengamos sass pero queramos actualizarlo a la última versión:

gem update sass

Con Node

Recientemente tenemos la posibilidad de instalar SASS mediante npm:

npm install node-sass

Cómo debugar una web app en Chrome

Cuando hacemos una web app, ya sea con jQuery Mobile, con Ionic, con Sencha Touch, etc., una de las cosas que más quisiéramos tener es poder actuar con la web app con F12 y ver y depurar todos los procesos. Es cierto que podemos abrir la app con el navegador, pero no es lo mismo, ya que muchas llamadas u otros procesos se pierden.

Pues bien, entre otros métodos que analizaremos en futuros artículos, hoy queremos comentar la herramienta que nos ofrece Google Chrome. Así es, debugar una aplicación web con Google Chrome es posible a partir de Android 4.0!

Tenéis toda la documentació en la página de desarrollo de Chrome, pero vamos a ver los pasos principales.

Paso 1: Requisitos

Como desarrolladores de web apps, ya tendréis habilitada la conexión USB developer entre el teléfono y el ordenador (en caso de que no fuera así, el tutorial de Chrome incluye también instrucciones, o podéis también consultar aquí: http://www.fandroides.com/que-es-y-como-habilitar-la-depuracion-usb-en-android/; recordad también de instalar los controladores usb de vuestro dispositivos, que normalmente se encuentran en la web del fabricante o incluido en los paquetes de instalación (como el KIES en el caso de Samsung). Para la conexión es lo único que necesitamos.

Paso 2: Google Chrome

En Chrome nos vamos a:

Menú -> Más Herramientas ->Inspeccionar dispositivos

Se abrirá la pestaña de DevTools y el apartado devices.

Menú > Más Herramientas > Inspeccionar Dispositivos

Menú > Más Herramientas > Inspeccionar Dispositivos

Paso 3: Debugar

Nos aseguramos de que “Discover USB devices” está marcado, y nos aseguramos de que nuestro dispositivo ha sido encontrado.

Si tenemos alguna web view activa (nuestra app u otra), ésta se mostrará; si no en cuanto la abramos se mostrará.

Una vez se muestre la app, podemos hacer click en “inspect”, y se mostrará nuestro conocido F12 (en caso de que no sea conocido, podéis echarle un vistazo a este tutorial: https://developer.chrome.com/devtools )

Chrome DevTools - Inspect Devices

Chrome DevTools – Inspect Devices

Como hemos dicho, hay otras herramientas, pero esta es una rápida y magnífica manera de conseguir debigar de verdad una web app!

 

Como instalar Ionic para trabajar con Cordova en entorno Android

Recientemente ha saltado con fuerza a la cyber-palestra un framework para mobile apps que une las ventajas de jQuery Mobile y las de Bootstrap junto con los avances en programación web de la mano de Angular.js. Hablamos de Ionic.

Ionic Framework Logo

Ionic Framework

Si bien su getting started es muy claro y sencillo, hemos creado esta pequeña continuación de nuestro tutorial sobre la instalación y configuración de Cordova 3 porque consideramos que en breve esta será la manera de trabajar con Cordova 3.

Pasos 1-3

Corresponden a la instalación de todo el entorno Android y Java. Son los pasos 1 a 3 de nuestro mencionado artículo sobre la instalación y configuración de Cordova 3.

En cuanto al IDE de desarrollo, podemos optar por el Eclipe ADT que aparece en nuestro tutorial, o podéis probar el flamante, aunque todavía en fase beta, Android Studio.

Paso 4

Queremos trabajar con Cordova utilizando Ionic y Angular, de manera que instalaremos ambos a la vez. Abrimos la consola y escribimos:

$ npm install -g cordova ionic

De hecho van tan unidos que a partir de la instalación de ionic, vamos a hacer las tareas de Cordova en su CLI mediante el comando ionic.

Paso 5

Creamos nuestra primera app. Ionic ofrece algunas plantillas de base para empezar. Algunas con elementos que probablemente utilicemos, y una vacía.

Nos situamos en la carpeta de neustro workspace (el comando de ionic creará por nosotros la carpeta del proyecto) y escribimos:

$ ionic start "nombre de la app" "plantilla"

Así, si queremos iniciar una app vacía:

$ ionic start miPrimeraApp blank

Si queremos iniciar una nueva app con tabuladores:

$ ionic start miPrimeraApp tabs

 

Si queremos iniciar una con menú lateral:

$ ionic start miPrimeraApp sidemenu

 

Paso 6

No olvidemos que queremos trabajar con Cordova y Ionic, pero también con Android, de manera que tenemos que añadir también al proyecto la plataforma Android y hacer un build. Para ello nos siatuamos en la nueva carpeta (en este caso miPrimeraApp):

$ cd miPrimeraApp

Añadimos la plataforma Android:

$ ionic platform add android

Lo mismo haríamos con su equivalente ios. Para Windows Phone podéis consultar este link al foro de Ionic.

Hacemos build:

$ ionic build android

Y ya podemos deployar. Con emulate para emulador o run para dispositivo:

$ ionic emulate android
$ ionic run android

Paso 7

Para trabajar con Ionic podemos utilizar cualquier editor de texto, como nuestro preferido Sublime 3, o el más caro pero al parecer más adecuado para javascript y preferido por muchos desarrolladores de Angular WebStorm.

En todo caso, para trabajar con Android sí queremos el mencionado Eclipse ADT o el Android Studio. Para ver cómo cargamos en nuestro Eclipse esta primera aplicación Cordova con Android, lo abrís desde el Eclipse como un Nuevo Proyecto Android desde Código Existente, tal y como se ve en nustro artículo sobre Córdova 3.

Y hasta aquí. ¡Buena suerte, y a disfrutar de este nuevo framework!

 

Cómo probar nuestros diseños web responsive

Idealmente en cada uno de los dispositivos directamente; pero por desgracia cada vez es más complejo, si no ya imposible, poder hacerlo. De manera que, en un primer estadio, sí podemos contentarnos con aumentar y rabajar el ancho y alto de nuestro navegador. Pero en un estadio más avanzado, junto con todos los dispositivos con los que podamos, debemos tirar de otras herramientas.

Aquí os presentamos algunas de ellas.

Screenfly

Sencilla pero potente, para hacerse una rápida idea de cómo quedará nuestra web responsive en determinados dispositivos y con pocas pero, según como, suficientes herramientas de personalización, como ancho y alto personalizados, rotación o barra de desplazamiento.

Screenfly

Screenfly

 

Viewport Resizer

Parecida a la anterior pero actúa como componente del navegador y permite agilizar el redimensionamiento de la página y las diversas opciones. Para utilizarlo:

  1. Abrir la página a testear
  2. En otra pestaña abrir el Viewport Resizer
  3. Arrastrar la imagen azul de ‘Click or Bookmark’ y ponedla sobre la pestaña de vuestra página
  4. Ir a la página y probar las herramientas responsive arriba
Viewport Resizer

Viewport Resizer

 

The Responsinator

Un veterano, que ya hemos analizado en nuestro post sobre recursos web, y que permite de un vistazo hacerse una idea de cómo queda nuestra página en varios dispositivos. Recomendable si se quiere en un momento llevarse una rápida impresión.

Responsinator

Responsinator

 

Mobile Phone Emulator

Una de las muchas aplicaciones que, además de rendrizar el viewport a los píxeles de cada dispositivo móbil, aplican una skin del aparato a la vista, lo cual, especialmente para presentaciones a clientes o para muestras comerciales, es muy útil. Se echa en falta, eso sí, algo más de variedad, pero la presentación es impecable.

Mobile Phone Emulator

Mobile Phone Emulator

 

Hibernate 4: una introducción y un ejemplo básico

Introducción

Hibernate es un Framework de persistencia de Java. En esencia, la persistencia es la pervivencia de información en memoria para trabajar con ella o para traspasarla a otro lugar.

En el caso de la programación orientada a objetos, los frameworks de persistencia como Hibernate abren una sesión para trabajar con ellos y o bien utilizarlos durante la ejecución del programa o bien pasarlos a base de datos. Hablamos, entonces, de que un objeto está persistido cuando éste está en la sesión de Hibernate.

En los frameworks de persistencia existe otro concepto clave: el de transacción. En la sesión de Hibernate se abre también normalmente una transacción, que es la que controla todos los pasos que hay que dar con los objetos y, caso de que exista un error o fallo en medio del proceso, hace rollback, es decir, deshace lo hecho para evitar que nada quede a medias. El entorno de sesión y la transacción hacen de los frameworks de persistencia algo muy útil para trabajar con objetos y bases de datos.

Ejemplo básico – introducción con Eclipse e Hibernate Tools

En este ejemplo vamos a utilizar Eclipse Kepler for Java EE Developer (se recomienda Kepler por su integración con Maven aquí tenéis una excelente introducción a Maven) y una de las varias herramientas de Hibernate para ayudarnos a trabajar con Eclipse: Hibernate Tools for Indigo. Esta herramienta nos ayudará a crear el archivo de configuración, el fichero reveng.xml, la consola, los hbm.xml a partir de la base de datos, etc.

Para trabajar con Hibernate necesitamos:

  • un archivo de configuración (hibernate.cfg.xml) con los datos de conexión a la base de datos y el mapeo de los archivos *.hbm.xml (los ficheros de mapeo entre las clases y la base de datos). También se pueden usar annotations, aunque nosotores usaremos mapeo XML
  • los pojos y su correspondientes archivos hmb.xml, donde mapeamos los objetos con la base de datos y establecemos las relaciones.
  • una (opcional) clase con la que generar sesiones y controlar transacciones. Si no la creamos, podemos generar sesiones y transacciones en el mismo DAO. Estableciendo una clase creamos un constructor estático que nos permite crear la conexión y hacer un singleton con una instancia única de la conexión.

El flujo de trabajo es el siguiente:

  • Hibernate espera recibir un objeto y sus objetos relacionados para efectuar una acción sobre él.
  • Una vez lo recibe, abre una sesión (generada por la sessionFactory y como singleton, se llena de los datos del fichero de configuración de Hibernate y genera las conexiones dinámicamente para cada transacción) con la información que contiene el fichero de configuración hibernate.cfg.xml (lee el fichero, carga la información y crea el método getSessionFactory, que crea una sesión en memoria RAM y la retorna; en la sesión se traen los objetos mapeados a la memoria RAM; cuando hago un select o un get los objetos van a parar a la sesión de hibernate (son persistidos)).
  • Inicia la transacción, hace lo que tenga que hacer con ese objeto, cierra la transacción y cierra la sesión.
  • Si la operación es compleja e implica a muchos objetos relacionados, si hay un error o fallo en el proceso se establece un rollback para eliminar cualquier acción efectuada durante la sesión.

Ejemplo básico – pasos

1)    Creamos un poryecto Maven con el siguiente pom.xml

2)    Creamos la base de datos con el siguiente script.sql

3)    Si no las tenemos, instalamos las Hibernate Tools (Help -> Eclipse Marketplace -> Hibernate Tools for Indigo)

4)    Creamos el fichero de configuración hibernate.cfg.xml. Para ello nos situamos en nuestro proyecto y con el botón derecho New -> Other -> Hibernate -> Hibernate Configuration File (cfg.xml). Escogemos su situación (normalmente en resources, siguiendo la lógica de Maven) y ponemos los datos de la conexión a la base de datos.

5)    Creamos la consola de configuración de Hibernate (que le servirá al plugin entre otras cosas para generar código) (No veremos que Eclipse haya añadido nada, ya que se trata de una herramienta interna del plugin de Hibernate Tools)

6)    Creamos el fichero reveng.xml, que nos permitirá la ingeniería inversa) New -> Other -> Hibernate -> Hibernate Reverse Engineering File (reveng.xml). Nos situamos sobre el directorio resorces, ratificamos y en la página de configuración escogemos la consola que yahemos creado, le damos a Refresh para ver las bbdd e incluimos las tablas a mapear.

7)    Generamos el código poniéndonos sobre el iconos de las Hibernate Tools y seleccionamos Hibernate Code Generations Configurations…

8)    Llenamos los datos e indicamos qué queremos generar. Es buena idea volver a generar el fichero de configuración, pues en él se incluirá el mapeo de los ficheros hmb.xml.

9)    Si creamos las clases nosotros, sí podemos crear los hmb.xml mediante las Hibernate Tools y luego cambiar algunas cosillas. Para ello New -> Other -> Hibernate -> Hibernate Mapping file (hbm.xml), añadimos el package donde hemos creado las clases, nos aseguramos de que so las clases crradas, y las generamos. Es buena idea tenerlas en el directorio resources, junto con los otros ficheros de configuración y mapeo.

10) Tendremos que hacer, quizás, algunos cambios. Por ejemplo en mi caso:

  • No pilla la relación n-n, de manera que en el fichero cliente.hbm.xml:
<set name="productos" table="PRODUCTO" inverse="false" lazy="true">
    <key>
        <column name="IDCLIENTE" />
    </key>
    <one-to-many class="com.hibernate.model.Producto" />
</set>

Pasa a ser:

<set name="productos" table="CLIENTEPRODUCTO" inverse="false" lazy="true">
    <key>
        <column name="IDCLIENTE" />
    </key>
    <many-to-many class="com.hibernate.model.Producto" />
</set>

También ponemos:

<list-index column="idCliente"></list-index>
  • En el fichero Correoelectronico.hbm.xml:
<many-to-one name="cliente" class="com.hibernate.model.Cliente" fetch="join">
    <column name="CLIENTE" />
</many-to-one>

Pasa a ser:

<many-to-one name="cliente" class="com.hibernate.model.Cliente" fetch="join">
    <column name="IDCLIENTE" />
</many-to-one>
  • En el fichero Producto.hbm.xml:
<set name="clientes" table="CLIENTE" inverse="false" lazy="true">
    <key>
        <column name="IDPRODUCTO" />
    </key>
    <one-to-many class="com.hibernate.model.Cliente" />
</set>

Pasa a ser:

<set name="clientes" table="CLIENTEPRODUCTO" inverse="false" lazy="true">
    <key>
        <column name="IDPRODUCTO" />
    </key>
    <many-to-many class="com.hibernate.model.Cliente" />
</set>

11) Añadamos también cascade=”all” en los set de cliente.hbm.cfg para evitar el error object references an unsaved transient instance – save the transient instance before flushing

12) IMPORTANTE: en correoelectronico, cliente, identity:

<generator class="assigned" />

Pasa a ser

<generator class="identity" />

para evitar problemas con las foreign keys.

13) En dirección pasa a ser

<generator class="foreign">
    <param name="property">cliente</param>
</generator>

14) Como hemos dicho, la sesión y las transacciones las controlaremos desde una clase específica del DAO. Creamos un package q contenga los dao y añadimos el siguiente archivo HibernateHelper.java, que ya analizaremos convenientenmenet. Basicamente lo que ahce es inicializar una favctor´ñia de sesiones si no está ya incializada, y alrecibir la orden de guardar coge una sesión nueva, abre una transacción, ejecuta el sabe del objeto que se la ha enviado y cierra la transacción y la sesión.

15) Para probarlo podríamos hacerlo mediante JUnit, como haremos con las sesiones, pero vamos a crear un main, que tenéis en main.java.

 

 

Crear juegos para móvil con HTML5: Construct 2

Hoy en día decir ‘móvil’ en el mundo de las nuevas tecnologías es decir ‘negocio’ y ‘oportunidades’. Una de las maneras más interesante de empezar es con el estándar HTML5.

En este tutorial os presentamos Construct 2, una herramienta para construir muy fácilmente juegos sobre el canvas de HTML5 (en w3schools tenéis una muy buena introducción al Canvas). Si bien no es la única opción, en nuestra opinión es una de las mejores para iniciarse en el mundo del diseño de juegos.

Este tutorial se basa en nuestra experiencia personal. Hemos trabajado bastante con este programa y, si bien tiene algunas limitaciones, es muy recomendable y nos ha dado bastante ventajas con una curva de aprendizaje muy corta.

 

Construct 2

Construct 2

 

Cuánto cuesta

Hay una versión gratuita con algunas limitaciones (pero suficiente para hacer juegos relativamente complejos) y una de pago con todas las funcionalidades, ideal para juegos de gran complejidad. Nosotros finalmente tuvimos que ir a la de pago, pero pudimos hacer bastante con la gratuita.

Cómo empezar

En la página de tutoriales de Construct 2 encontraréis varios tutoriales de iniciación que os permitirán, en muy poco tiempo, crear un juego clásico de disparos y uno de plataforma.

Tutorial de iniciación

Tutorial de iniciación

 

Cómo funciona

Construct 2 genera un Canvas muy complejo, pero su uso es sencillo: se trata de escoger objetos, arrastrarlos al área de juego, y otorgarles, en el área de comandos, comportamientos, variables, tiempo, física, efectos, comportamientos, interacción con mouse, tacto o teclado, y un largo, largo etc.

Área de gráficos

Área de gráficos

El área de comandos es también muy sencilla de usar, dado que todas las opciones están convenientemente explicadas y listadas. Simplemente hay que saber qué queremos hacer y buscar la opción correspondiente.

Área de comandos

Área de comandos

Qué hago con mi juego

Constuct 2 os da la posibilidad de publicar vuestro canvas en varias plataformas, entre ellas iOS, Android o Facebook, ya sea mediante una siomple exportación o mediante precisas instrucciones.

Plataformas

Plataformas

 

Problemas

Como decíamos en la introducción, este programa no está exento de errores o problemas. El principal es que no siempre respeta una lógica aplastante. Al generar javascript, algunas veces puede traerproblemas con la asincronía, de manera que hay que hacer diversas comprobaciones antes de estar seguro que se respetará el orden de los eventos que hemos marcado. Si bien esto se ha solventado en parte en una actualización reciente mediante el uso de funciones, siguen habiendo problemas. Otro porblema es la incapacidad casi total de interactuar con el códigogenerado, dada su complejdiad. En definitiva, es un programa que a los programadores con experiencia puede llegar a irritar bastante.

Actualizaciones y comunidad

Dos puntos a favor: las actualizaciones son muy diversas y se generan a menudo, con incidencia casi nula en los proyectos en marcha. Por otra parte, la comunidad que crea con este programa es muy activa en la creación de plugins y en la participación en foros y creación de tutoriales.