6

CRIAX-SDK: Configurando una aplicación II

11Feb
en CRIAX-SDK, Herramientas, Javascript, SDK, Tutoriales

En el tutorial anterior vimos la primera parte de la configuración, en el presente post se abordará:

  • Configuración II: autocarga de clases
  • Manifest.json: meta información de la aplicación
  • Inicios POO en CRIAX-SDK

Configuración II

Autocarga de clases

Una de las ventajas que ofrece CRIAX-SDK es la autocarga de clases antes de ser instanciadas. Normalmente una clases es cargada cuando se crea una instancia de la misma. CRIAX, permite en su configuración establecer las clases que serán cargadas al inicio de la aplicación. En la sección autoload class se especifican las clases de la aplicación y para el test, que deben ser cargadas al incio.

Esta sección esta dividida en 2, en el caso de app class, se cargan el controlador, la vista y la clase de fachada por defecto y más abajo las clases que intervienen en la conexión con la base de datos SQLite (las cuales están en comentarios).

En la sección test class se cargan las clases a testear que se irán agregando a medida que avance el proyecto.

Con esto termina la sección de configuración de la aplicación, ahora sólo nos queda jugar un poco con la misma, para ello realizaremos 3 simples tareas:

  1. cambiar el tamaño de la ventana
  2. traducir al ingles el texto del botón
  3. testear la aplicación

1- Cambiar el tamaño de la ventana

Vamos a la sección de la configuración build:enviroment://app resolution y llevemos el tamaño de la ventana a 300×200.

...
//app resolution
"criax.width" : 300,
"criax.height" : 200,
....

Una vez salvado el archivo de configuración, por la consola o terminal nos situamos en el directorio raíz de nuestra aplicación y ejecutamos:

Linux

./toolchain/update.sh

Window

toolchain\update.bat

Acto seguido se ejecutará la actualización y cuando cargue la aplicación, el tamaño de la ventana será de 300X200 px. Simple verdad!?. Eso no es todo. En Window, si intentáramos redimensionar la ventana o maximizarla, no podríamos, esto se debe a una configuración interna del directorio de la app que veremos más adelante.

Redimensión 300x200

Redimensión 300×200

2- Traducir al inglés

Vamos a la sección de la configuración build:enviroment://app language y establecemos como código de idioma en.

...
//app language
"criax.i18n" : "en",
....

Una vez salvado el archivo de configuración, por la consola o terminal nos situamos en el directorio raíz de nuestra aplicación y ejecutamos, la tarea update.

Cuando cargue la aplicación, el texto del botón ya no será «Botón de Información», sino «Information Button».

Traducción al inglés

Traducción al inglés

Si ya se que la magia se encuentra dentro del código pero paso a paso para entenderlo todo.

3- Testear la aplicación

Se preguntarán qué sentido tiene testear una aplicación en la que no han tirado una línea de código, pues bien, sí, toda aplicación generada, viene con un ejemplo de como se llevan a cabo las pruebas funcionales de la misma.

Paso 1:

Poner la aplicacióon en modo de testeo, para ello vamos a la configuración y en la sección build:enviroment://app enviroment en test ponemos true. Ahora nos dirigimos a la sección de autocarga de clases build:use://test class ahí encontraremos que la clase TestRunner, sera la encargada de correr los test realizados, y que para ello primero se deben autocargar las clases de los mismos, es por esta razón que se encuentra en este arreglo helloworld.test.DemoTest. Salvamos el archivo de configuración y terminamos el primer paso.

Paso 2:

Nos adentramos en el directorio source/resource/services/ y abrimos el archivo services.json, vamos a la línea 22 y descomentamos //{include:»test»}. Salvamos y entonces ejecutamos la tarea de testeo:

Linux

./toolchain/test.sh

Window

toolchain\test.bat

Se nos abrirá una ventana en blanco con los test existentes. Los estados que pueden tener 3 estados, error (rojo), ok (azul) y skip (amarillo). Sin mucho tecnicismo el azul, pasó bien, el rojo tuvo algun error y el amarillo no fue ejecutado. Mas abajo saldrán el mensaje con la cantidad de test erróneos, si no hay ningno saldrá con fondo azul, en caso de exisitr alguno, con fondo rojo.

Ventana de test

Ventana de test

Los test también pueden ser apreciados en la consola, claro sin fondo de colores. Se podrá apreciar el nombre de la clase y el del test ejecutado así como si se ejcutó satisfactoriamente o no.

Test en la consola

Test en la consola

Si se quiere apreciar mejor la ventana con los test, redimensionarla, recordar que tiene las dimensiones 300×200 px. Para llevar la aplicación a su configuración normal, simplemente comentamos en los servicios el include y en el test del enviroment ponemos false.

Manifest.json: meta información de la aplicación

El archivo Manifest.json que se encuentra en el directorio raíz de la aplicación proveé la meta información de la aplicación en desarrollo. Su sintáxis es en JSON. El mismo es usado en el proceso de genración de la configuración.

{
  "info" :
  {
    //nombre de la aplicación
    "name" : "helloworld",

    //Sumario de la aplicación
    "summary" : "Custom Application",

    //Descripción de la aplicación
    "description" : "This is a skeleton for a Criax application.",

    //Página de la aplicación
    "homepage" : "https://",

    //Licencia de la aplicación
    "license" : "...",

    //Autor(es) de la aplicación
    "authors" :
    [
      {
        "name" : "First Author (uid)", //autor principal
        "email" : "first.author@some.domain" //dirección de correo
      }
    ],

    //Versión de la aplicación
    "version" : "0.0.0",
    "qooxdoo-versions": ["2.1"], //versión del framewok Qooxdoo (no cambiar)
    "criax" : "0.1" //version de la plataforma CRIAX-SDK (no cambiar)
  },

  //Configuracion de los directorios de la aplicación (no cambiar si no eres experto)
  "provides" :
  {
    "namespace"   : "helloworld", //namespace raiz
    "encoding"    : "utf-8", //codificación
    "class"       : "source/class", //directorio de las clases
    "resource"    : "source/resource", //directorio de los recursos
    "translation" : "source/translation", //directorio de la traduccion
    "type"        : "application" //tipo de aplicación
  }
}

Inicios POO en CRIAX-SDK

Ok ahora sí prometo que nos vamos a meter en materia. CÓDIGO!!!. Primero que todo debemos situarnos en el dirctorio source/class/helloworld. Con nuestro editor de texto favorito demos un vistazo a los siguientes archivos:

    1. Application.js
    2. controller/Controller.js
    3. model/Model.js
    4. view/View.js

¿Y esto qué cosa es? A mí me engañaron me dijeron que esto era Javascript. Bueno a ver no nos asustemos, CRIAX posee un modelo, una forma de codificar POO (interfaces, herencia, mixin, clases abstractas, clases estáticas, clases singleton), sí sí real. Pero para entenderlo primero veremos todo lo que puede contener un archivo de clases.

Estructura de código (estándar)

Estas son algunas reglas generales que deben ser seguidas al momento de crear un archivo con CIRAX-SDK, las mismas siguen en un 90% el estándar del framework Qooxdoo.

  • Defina una clase por archivo.
  • El nombre del archivo debe coincidir con el nombre de la clase. (Case Sensitive)
  • El namespace de la clase debe coincidir con el directorio donde se encuentra el archivo, sustituyendo los por (.). Ejem: file:///custom/foo/Bar, namespace: custom.foo.Bar.js
  • Todos los archivos deben estar codificados en UTF-8
  • Todas las clases deben tener el bloque de código del encabezado:
     /**
      * Descripción de la clase
      *
      * @class Nombre de la clase
      * @public Visibilidad/tipo de la clase
      * @extends namespace.NombreClasePadre
      * @author Nombre del autor de la clase
      * @namespace namespace de la clase
      * @copyrigth
      * @license directorio donde se encuentra la licencia de la clase
      * @version 0.0.1 versión de la clase/aplicación
      *
      */
    
  • En caso de requerirlo después del bloque de encabezado irá el bloque de código de tareas de compilación:
    /*
    //clase que se requiere en tiempo de ejecución, se cargara antes de la clase presente
    #require(qx.core.Assert)
    //parecido a require, pero solo en caso de que se use la clase presente
    #use(qx.log.Logger)
    //recursos utilizados por esta clase (img, css, js, etc)
    #asset(custom/*)
    //clase, variable o testo que el compilador debe ignorar
    #ignore(foo)
    */
    


    Ojo que no van los (*) intermedios como en los comentarios normales
  • Antes de los bloques de comentario anterior sólo pueden estar las importaciones de las clases a utilizar en la clase presente
     var Model = helloworld.model.Model;
    

Un encabezado completo podría quedar:

var Model = helloworld.model.Model;

/**
  * Descripción de la clase
  *
  * @class
  * @public
  * @extends
  * @author
  * @namespace
  * @copyrigth
  * @license
  * @version
  *
  */

/*
#require(qx.core.Assert)
#use(qx.log.Logger)
#asset(custom/*)
#ignore(foo)
*/

Caramba que cantidad de cosas y todavía no se programa nada. Sí, necesario, vayamos por parte, la importación es necesaria si no quieres dentro de la clase tener que escribir todo el namespace de otra clase que vayas a utilizar, no es lo mismo esto:

var persona = new app.namespace.Clase();

a esto:

var Persona = app.namespace.Clase;
var persona = new Persona();

Bloque de encabezado de información sobre la clase. ¿Te gusta compartir tu app con tus amigos? No te gusta tener que explicarle uno a uno como se usan? Pues bien dale la app con su API y ya está. Así de sencillo, sirve para generar la información de la API de la aplicación, es más, en la descripción puedes utilizar etiquetas HTML para mejorarla, incluso poner el código de ejemplo de como se utiliza la clase.

Las tareas de compilación son utilizadas internamente por la plataforma para optimizar la carga y enrutamiento de los elementos utilizados por las clases.

¿Alguna pregunta de esta parte? Que sí, que sí, que quiero programar, muy bien en el próximo post verás código real. Por el momento la presentación en ppt de inicio al POO en CRIAX-SDK.

Descargar pdf: Introducción a POO en CRIAX-SDK

Bonificación

Desde ya, te diré que la bonificación de hoy no es API, es un IDE, escuchastes alguna vez de Spket, liviano, pequeño que parece medio mongo, es bueno en lo que hace. Sí, más de uno saltará, y porque no Aptana? también esta genial, pero me consume mucho, así que aquí tienes link de descarga:

IDE Spket 1.6.23

0 MB

6 Comentarios

  1. JANSG dice:

    Muy bien… estamos avanzando.. pero vamos muy lento.. te entiendo .. no es facil.. he estado tratando de explorar otras opciones.. Como tideSDk o AppJS .. pero no he podido descargarlas.. puedes hacerme el favor de ponerlas en descargas en algun lugar o alguna Nube..

    • Nilmar Sánchez Muguercia dice:

      La lentitud se debe a que actualmente me encuentro en fase de Tesis de Grado y distribuir el tiempo entro los 2 temas se hace complejo. Veremos que podemos hacer con las opciones que nos pides.

  2. JANSG dice:

    Ok Te enntiendo .. complicado.. gracias por explicarme.. espero que me ayudes,, con lo de los softwares., OK.

  3. JANSG dice:

    Oj he descargado el IDE dos veces y la descarga después que termina. que vas a instalar esta corrupta .. no deja descompactar el .jar y cuando lo corres con la maquina vitual de java no deja instalar completo.. ok..

    • Nilmar Sánchez Muguercia dice:

      Si muchisimas gracias por el reporte, el IDE será sustituido, no nos percatamos del error. Eso es lo que se quiere que la comunidad sea la que construya el desarrollo, su propio desarrollo.

  4. Nilmar Sánchez Muguercia dice:

    Actualizada versión de IDE Spket 1.6.23, pues la anterior tenia probelmas!!!

Dejar un comentario

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.