Una primera aproximación a TypeScript
Cuando en newuibcn empezamos el reto de empezar a construir aplicaciones en SAPUI5, pronto nos dimos cuenta que el trabajar con lenguajes no tipados no era lo nuestro (nuestro orígenes son en entorno .NET, y el hecho de trabajar con un lenguaje no tipado, se nos antojaba ‘extraño’.)
Por suerte, nos topamos con Typescript. ¿ Y qué es TypeScript ?
TypeScript. Una primera aproximación.
TypeScript es un lenguaje de programación libre y de código abierto desarrollado por Microsoft. Es un superconjunto de JavaScript, que esencialmente añade tipado estático y objetos basados en clases, y que al ser compilado genera código Javascript nativo. ¿ Suena bien verdad ?
No pretendemos que este Post sea un tutorial de TypeScript. Encontrareis tutoriales muy buenos por la red. Un buen punto de partida para empezar lo encontrareis en el sitio oficial de TypeScript (http://www.typescriptlang.org) con una muy buena documentación de referencia y multitud de ejemplos)
Ejemplo ‘HelloWorld’: TypeScript + SAPUI5
IDE: Visual Studio 2013
El objetivo marcado para este post, es construir una aplicación típica de HelloWorld en SAPUI5, utilizando TypeScript para su desarrollo. El ejemplo consiste en la visualización de un botón en nuestro browser, que al pulsarlo nos muestre un mensaje de bienvenida.
Para el desarrollo de dicho ejemplo utilizaremos Visual Studio 2013 Ultimate como IDE. ¿ Sólo podemos utilizar TypeScript en Visual Studio ? Por supuesto que No! Encontrareis plugins de TypeScript para otros entornos como Eclipse, WebStorm, etc… Cada cual que use el que le sea más familiar.
Antes de empezar, decir que Visual Studio ya tiene un template por defecto para desarrollar en Visual Studio a partir de la versión 2013 Update 2. Para versiones anteriores de Visual Studio , podreís descargaros templates para el desarrollo en TypeScript en la web de Microsoft.
¿ Preparados ?, empecemos ya!
Primero, crearemos un nuevo proyecto en Visual Studio, y elegiremos ‘Aplicación HTML con TypeScript’. Seleccionamos una carpeta, y le damos un nombre a nuestro Proyecto:
Index.html
Una vez creado el proyecto, procedemos a editar el proyecto Index.html:
A continuación, pasemos a detallar varias consideraciones a tener en cuenta:
- Cargamos el framework de SAPUI5 ‘online’ (resources) a través de la url: ‘https://sapui5.hana.ondemand.com/resources/sap-ui-core.js’. También podríamos ‘cargarlo’ en local, pero eso nos obligaría tener todos los archivos que componen el framework de SAPUI5, qué tienen un peso considerable, y que no es justificable para un ejemplo como es el caso que nos ocupa. Para proyectos de mayor envergadura, si se recomienda tener el framework en local (carpeta resources), para así tener nuestro proyecto desligado del cambio de versiones de la versión oficial, o de los molestos ‘deprecated’ de métodos o clases que se producen regularmente al cambiar de versión.
- Otro aspecto a resaltar, es que indicamos que el framework se cargue de forma asíncrona (A través de: data-sap-ui-preload=»async»). ¿ Que utilidad tiene esto ? Pues nos permite mostrar un spin o algún objeto similar, para indicar al usuario que se está en un proceso de carga o inicialización y que debe esperar unos instantes, evitando así que durante unos instantes nuestro navegador muestre una pantalla en blanco dando la sensación de que la aplicación está ‘congelada’ o ‘colgada’ . También podemos ‘aprovechar’ el tiempo de carga para obtener datos de algún BackEnd si es necesario también de forma asíncrona (que no se muestra en este ejemplo), y así, una vez cargado el framework de SAPUI5 y obtenidos los datos necesarios de nuestro BackEnd, se renderizará nuestro HTML, ahorrando tiempos de carga.
- Definimos un ‘prefijo’ para todo el ámbito de la aplicación. Así, cuando referenciemos nuestras vistas, o carguemos los archivos necesarios mediante ‘requires’, sea independiente de la ruta relativa y podamos trabajar con una ruta absoluta. Para definir el prefijo: data-sap-ui-resourceroots='{
«newuibcn» : «./»
}’
Bootstrapper.ts
A continuación, crearemos el archivo bootstrapper.ts, que contendrá la clase ‘iniciadora’ de nuestra aplicación.
Para crear un nuevo archivo en TypeScript, nos situamos encima de nuestro proyecto en el Explorador de Soluciones, y hacemos ‘click’ con el botón contextual:
y seleccionamos: Agregar -> Archivo TypeScript. A continuación nos pedirá un nombre para nuestro archivo (bootstrapper). El código que añadiremos en el archivo bootstrapper.ts es el siguiente:
Pasemos a continuación a detallar los aspectos mas destacados del código:
- declare var sap: es una declaración para que el compilador de TypeScript no nos indique que el prefijo .sap (p.ej: sap.ui.view) es un error.
- creamos una clase Bootstrapper, que contiene un único método llamado init. Obsérvese que en él hacemos la carga de nuestra vista. La creación de la vista se ejecturá cuando el core del framework sea cargado completamente, mediante la asignación de una función de callback, mediante su asociación al método attachInitEvent del objeto de tipo sap.ui.core.Core, que obtenemos a través de sap.ui.getCore().
- El método init es declarado como estático, para poder llamarlo a continuación directamente, sin necesidad de instanciar un objeto de tipo Bootstrapper.
- Obsérvese que en la creación de la vista, lo hacemos a través del prefijo ‘newuibcn’, que corresponde al nodo raíz de nuestro proyecto.
- Después de la definición de la clase Bootstrapper, añadimos la llamada Bootstrapper.init(); que se ejecuta directamente al cargar el archivo bootstrapper.js, con lo cual se ejecutará automáticamente el código de creación de la vista y su inserción en el elemento ‘content’ de nuestro HTML.
main.view.ts y main.controller.ts
A continuación, procederemos a crear nuestra vista, que contendrá un simple botón.
Para tener una mejor organización de nuestro código , crearemos una carpeta llamada views, donde alojaremos nuestro archivo correspondiente a la vista (main.view.ts) y a su correspondiente controlador (main.controller.ts).
Observemos que se define un elemento module , que podría asociarse al concepto de namespace en .NET o package en Java.
A continuación definimos nuestra clase (MainView), donde definimos los 2 métodos necesarios para la creación de una vista: getControllerName y createContent. Podríamos definir una interface tipo ISapView, e implementarla en la clase, pero eso ya lo dejamos para ‘juguéis’ vosotros mismos.
Una vez definido nuestra clase, al final del archivo asociamos la vista SAPUI5 con una instancia de la clase que acabamos de crear, y ‘voilà!’, ya tendremos asociada nuestra nueva clase a la vista SAPUI5.
Ya para terminar, definimos el controlador:
Para no extendernos en nuestra explicación, observamos que la creación del controlador sigue la misma filosofía que en el paso previo de creación de la vista.
Hasta aquí nuestro ejemplo de creación de SAPUI5 con Typescript. Esperemos que os pueda servir de ayuda para iniciaros en el desarrollo de SAPUI5 con Typescript!!
Podéis descargaros el código fuente aquí
