Damos una nueva vuelta de tuerca en esta travesía por #TypeScript, RequireJS y Bootstrap que tan entretenido nos tiene, y ahora vamos crear el código para un componente de mensajes, de forma que podemos reutilizarlo en nuestros proyectos. Se trata de tener la opción de crear mensajes al usuario en lugar de los alerts de javascript. Para poner los formularios bonitos, emplearemos Bootstrap, y para preparar el ejemplo, de nuevo utilizamos la plantilla de TypeScript, RequireJS, jQuery, Bootstrap y HandleBarsJS.
El hecho de crear este componente es para poder reutilizarlo también en futuros proyectos, por lo que el código lo tienes disponible en GitHub. El componente dispondrá de un formulario para alertas, otro para login, otro para cambiar de login, y otro más para dar dos opciones al usuario.
Un aspecto simple para probar el componente de mensajes
El código HTML que vamos a utilizar es bastante simple, pues vamos a crear una serie de botones con los que podremos probar la funcionalidad del componente msgbox.
<div id="contenedor" class="container"> <a href="#" class="btn btn-default" id="simple">Simple</a> <a href="#" class="btn btn-info" id="timer5sec">Simple con 5 seg timer</a> <a href="#" class="btn btn-info" id="yesno">Si-No</a> <a href="#" class="btn btn-info" id="login">Login</a> <a href="#" class="btn btn-info" id="cambiapass">Cambia Pass</a> </div>
Sin complejidad.
Si entras en detalle en el proyecto, podrás comprobar que para mejorar los estilos de los formularios hemos utilizado Bootstrap-extra.css, que corresponde con el código CSS de esta página: http://www.bootply.com/s6x5oKLiDG.
Preparando las interfaces
Trabajar con TypeScript me ha hecho recapacitar sobre la utilidad de las interfaces, y para controlar todo lo que podemos hacer en nuestro componente, qué mejor que preparar unas interfaces, en el fichero interfaces.ts. Vamos a definir una llamada IAlert con los distintos parámetros que se emplearán cuando llamemos a una alerta, otra para el cambio de clave, y una tercera para el formulario de si-no-cancelar.
Además, en caso de que necesitemos ampliar jQuery, este archivo es donde lo podemos hacer (tal cual vimos en las anteriores entradas).
Preparando las plantillas
Las plantillas quedarán guardadas dentro del directorio templates, y las nombraremos como cambiapass.hbs, login.hbs, msgbox.hbs y yesno.hbs. Sólo vamos a ver el código de una de ellas, que podemos ver que es HTML para ser leido mediante HandleBarsJS, lo que nos permite flexibilizar mucho.
<div id="msgbox" class="modal fade">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header {{ modal_header_class }}">
{{#if boton_cerrar}}
<button type="button" class="close" data-dismiss="modal">×</button>
{{/if}}
<h3 class="modal-title">{{ titulo }}</h3>
</div>
<div class="modal-body">
{{ mensaje }}
</div>
<div class="modal-footer">
<a href="#" class="btn {{ btn_class }}" data-dismiss="modal" id="btn_login">{{ txt_boton_cerrar }}</a>
</div>
</div>
</div>
</div>
Config.ts y app.ts
La configuración de RequireJS config.ts no es demasiado compleja puesto que el componente a crear no hace falta incluirlo, y app.ts es una llamada a MenuApp, que veremos en la parte 2.
Eventos
Una de las características pendientes de analizar es el tema de gestión de eventos, de forma que es muy importante que el componente pueda enviar eventos al objeto que los está usando. Por ejemplo, cuando hacemos login queremos que nos devuelva los valores del formulario, para generar la cadena de parámetros a enviar al servidor.
Para permitir eventos he utilizado las explicaciones de http://stackoverflow.com/questions/12881212/does-typescript-support-events-on-classes , lo que se hace con una clase que facilita las cosas, y permite las funciones on, off y trigger. Si revisas el código, podrás comprobar cómo se hace uso de los genéricos en TypeScript.
La interfaz necesaria ILiteEvent<T> la hemos incluido en interfaces.ts, mientras que la clase la hemos guardado en LiteEvent.ts. Para utilizar esta clase, sólo es necesario poner las referencias y hacer el correspondiente require.
Para hacer uso de LiteEvent, dentro de msgobx.ts se define una propiedad privada y una pública (que llama a la privada) para mejorar el control de los eventos. Se usa una por cada funcionalidad., y cuando se quiera lanzar un evento, se usa trigger, y se incluye el valor a traspasar con el evento (si procede).
Quizás pueda parecer lioso el uso de la clase LiteEvent, pero te aseguro que hace su trabajo, y es bastante útil, puesto que los valores o decisiones que se tomen dentro del componente querrán trasladarse a otro lado para su uso.
Y aquí lo dejo por hoy, y te emplazo a la segunda parte dónde se detalla msgbox.ts, y también cómo es el código de menu.ts.
Happy coding!