Consideraciones antes de empezar:
Antes de empezar, debemos de tener en cuenta que esto es solo un preview del poder del Framework, ya que por el momento esta en desarrollo y esta en su etapa Alpha, así que por el momento solo los usuario que están trabajando conmigo para desarrollar mi proyecto de horas sociales tienen acceso al framework para probarlo e irlo depurando y agregándole nuevas características. Esperamos pronto liberar la primera versión beta para que puedan probarlo e implementarlo en sus proyectos, así que en este tema solo veremos como utilizar y demostrar lo fácil que es su uso ya puesto en marcha.
Otra punto a tomar en cuenta antes de empezar, es que vamos asumir que en nuestro proyecto de ASP.NET MVC 3 lo tenemos configurado y ya hemos añadido la referencia de la librería de Jerti Framework a nuestro solución en Visual Studio, en nuestro caso también hemos añadido el CSS base de Jerti por lo cual tendremos el estilo por defecto en nuestros vistas.
A su vez ya hemos agregados las librerias necesarias que se mencionaron en mi anterior post, que son esenciales para que funcione todo el framework, asi como la librería de JavaScript del Jerti Framework y hemos añadido las referencias de nuestros scripts en nuestra View o en el _Layout de nuestras vistas.
También para lograr todos los pasos es necesario tener conocimientos básicos sobre ASP.NET MVC 3 sobre los controladores, modelos y vistas de un proyecto ya que no se va a indagar tanto en eso.
Manos a la obra
Bueno, lo que vamos a intentar demostrar en este pequeño ejemplo es como hacer un formulario de login utilizando el framework, el cual implementara las validaciones del lado del cliente, validaciones del lado del servidor, y manejara cualquier excepción que se produzca mostrando los mensajes de error o formulario invalidado utilizando el sistema de notificaciones de Jerti (NotifySystem). Así que empecemos primero definiendo nuestro modelo de datos que utilizaremos para el formulario.
Modelo
Nuestro modelo para el formulario de Login nos quedara de la siguiente manera:
A nuestro modelo agregamos las validaciones correspondientes, para ello utilizamos los DataAnnotations que vienen en el espacio de nombres System.ComponentModel; Para definir las validaciones y presentación utilizaremos los siguientes atributos para nuestros campos:
- Required: Marca el campo como obligatorio en el formulario.
- Display: Este atributo nos permite definir el nombre que queremos que aparezca en el formulario.
Así que agregamos los atributos y el modelo nos quedaría de la siguiente manera:
Si se fijan, en el atributo Required, hemos definido el parametro ErrorMessage, aquí establecemos el mensaje de error que va a mostrar si el usuario dejara en blanco este campo en el formulario. Y definimos entre comilla la variable {0}, para indicarle al sistema que coloque el nombre a mostrar del campo (esto lo podremos ver en acción mas adelante).
Hasta aquí todo igual a como trabajamos normalmente en ASP.NET MVC 3, asi que ahorita vamos a utilizar un atributo que viene en el Jerti Framework (JF), el atributo se llama:
- TipoField: El cual define al campo que tipo de elemento HTML se va a generar en el formulario. Por el momento, los campos que se incluyen en el framework son los siguientes:
- Text
- ComboBox
- ReadOnly
- Password
- RadioButton
- Fecha
- Autocomplete
- AutocompleteWithCache
- Multiline
- Numeric
Por defecto, si nosotros no declaramos explicitamente el TipoField al campo, el sistema lo toma como si fuera un tipo TEXT. Ahora vamos a terminar de completar nuestro modelo y añadiendo el tipo de elemento HTML que queremos que se genere nos quedaria asi:
Entonces, lo que le indicamos al framework que sera el encargado de renderizar el código HTML, es que el campo USERNAME, renderize un elemento HTML de tipo TEXTO, y el campo PASSWORD, un elemento HTML de tipo PASSWORD.
Y con esto ya tendriamos listo y definido nuestro modelo para nuestra pagina de Login.
Controlador
En nuestro controlador creamos el método que va a llamar a nuestra vista que estará fuertemente tipada al modelo, para ello creamos un método en el controlador que queramos, en nuestro ejemplo, tenemos un controlador llamado AccountsController, allí definiremos nuestro método que se encargue de llamar a la vista. Definimos el método LogOn y llamamos a la vista, nos queda de la siguiente manera:
Si se fijan, definimos el atributo HttpGet, con el cual le indicamos al sistema que solo acepte solicitudes HTTP del tipo GET (mas adelante veremos porque hacemos esto).
Vista
Y por ultimo tenemos que generar la vista, que es lo que mostraremos al usuario, para crear una vista de manera rápida solo damos clic derecho sobre el nombre del método LogOn y en el menú contextual hacemos clic en la opción Add View y si nos muestra un dialogo donde definiremos las opciones de la siguiente manera:
Bueno básicamente lo que hicimos fue marcar la opción "Create a strongly-typed view" y buscar el nombre de la clase que definimos como nuestro modelo de datos. Esto es de suma IMPORTANCIA ya que el Framework esta fuertemente ligado al modelo ya que a partir del modelo obtiene las validaciones, los nombres de los campos y el tipo de campo; lo demás lo dejamos como aparece en la imagen.
Una damos en el boton de Add, nos crea nuestra vista con la estructura por defecto del ASP.NET MVC 3 y se muestra de la siguiente manera:
Bueno, como tenemos la estructura básica de la vista y arriba tenemos definido la instrucción @ModelType, el cual le indica a la vista que esta fuertemente-tipada al modelo LoginModel.
El poder del JF
Y ahorita llegamos a la parte mas esperada, el verdadero poder del JF, aquí en vez de escribir el código HTML y el código JavaScript para enviar los datos al servidor y validar, solo hacemos una llamada al método que se encarga de generar el código html y JavaScript por nosotros. Así que nosotros solo enlazamos los campos del modelo y el Framework hará el resto por nosotros.
Utilizando la funcion TableFieldsFor, nos generara un tabla HTML con nuestros campos, dentro de un Fieldset con su titulo. La funcion TableFieldsFor posee los siguiente parametros:
- IDForm: El nombre del identificador del FORM HTML donde contendra nuestros campos para poderlos enviar al servidor.
- Titulo: El titulo que se colocara al formulario (esto es opcional ya que se puede dejar en blanco)
Para poder crear la tabla con nuestros campos, primero crearemos el formulario HTML utilizando los Helper de ASP.NET MVC 3, y nos quedaria de la siguiente manera.
El primer parametro del helper BeginForm es el nombre del metodo en nuestro controlador, el segundo es el Controlador, y el ultimo le establecemos un ID al FORM HTML, es IMPORTANTE establecerle un nombre, ya que ese nombre se lo vamos a pasar al Helper del Jerti Framework para poder generar nuestros campos.
En el parametros uno y dos del BeginForm, establecemos a donde vamos a mandar los datos, por ello establecemos el metodo y el controlador que recibiran los datos delo usuario para ingresarlo a una base de datos o hacer las respectivas operaciones.
Una vez creamos el formulario, utilizamos el Helper del JF, y definimos nuestra tabla con los campos de la siguiente manera:
Si se fijan en el Helper del JF, le pasamos los 2 parametros (IDForm y Titulo) y luego con los metodos AddFieldFor, definimos por una expresion Lambda el campo que le vamos a pasar para que lo genere.
El orden en que quiero que aparezcan los campos estará definido por el orden en que los defina en la vista; Por ejemplo, si hubiera querido que el campo PASSWORD, saliera antes de USERNAME, lo hubiera definido antes que username y eso es todo.
Y eso es todo, si ejecutamos el proyecto vamos a tener lo siguiente:
Extender las propiedades de los campos que se van a generar
Bueno, el JF, nos permite extender algunos atributos HTML directamente; Por ejemplo, actualmente el JF nos permite extender las siguientes propiedades:
- Placeholder (HTML5): Es uno de los nuevos atributos de HTML5 para poner marcas de agua en nuestros campos.
- MaxLength: La longitud máxima que debe permitr el campo HTML
Para extender las propiedades de cada campo tenemos que instanciar la clase JertiOptionsFields, y usar los metodos:
- SetMaxLength
- SetMarcaDeAgua
Asi que vamos agregarle una longitud maxima a nuestros INPUT, asi como su marca de agua para que tenga una breve descripción del campo y nos quedaria de la siguiente manera:
Ahora si ejecutamos el proyecto, la pagina nos mostraría lo siguiente:
Y bien, hemos puesto una marca de agua sobre nuestros campos, y la longitud maxima de caracteres que aceptaran sera de 16 cada uno.
Creando el botón para enviar los datos
Ya tenemos listo nuestro formulario con las validaciones implementadas tanto del lado del cliente como del lado del servidor, ya que las validaciones se generan automáticamente al crear la tabla con nuestros campos, así que todas las validaciones que definamos en nuestro modelo serán implementadas en nuestros campos.
Por ultimo, para poder enviar los datos al servidor, necesitamos crear un boton; para ello el JF nos provee un método para poder asociar el botón al formulario con nuestros campos.
El método AddButtonDefault nos permite definir un botón por defecto para enviar nuestros datos. El JF generara el código HTML y el código JavaScript necesario para validar y enviar nuestros datos al servidor.
Así que utilizando nuestros método sobre la vista, nos quedaría de la siguiente manera:
El metodo AddButtonDefault posee 2 parametros:
- IDButton: El ID que le queremos colocar al boton cuando genere el codigo HTML
- Texto: la cadena de texto que queremos que nos muestre el boton
A su vez, tambien posee un metodo llamado SetIcon, el cual nos permite asociar un icono de tamaño 16x16 al boton, el parametro que solicita es el nombre de la class definida en el CSS del proyecto. (Asi como jQueryUI con sus iconos)
Ahora si corremos el proyecto nos quedaria de la siguiente manera:
Y eso es todo, ya tenemos el boton para enviar los datos y las validaciones, ahora si damos clic en el boton, veremos que se muestran los validaciones en los campos asi como una notificacion en el NotifySystem:
Y tenemos listo nuestro formulario, luego solo falta implementar la logica cuando se reciban los datos en el metodo del controlador que definimos, el JF tomara la direccion que se definio en el FORM para mandar todos los datos del form, vemos aqui una pequeña implementacion del metodo que aceptara los datos para verificar en la BD si es valido el usuario o no:
Finalizando
Ya con eso seria todo por el momento, estas son solo algunas de las características incluidas en el Framework, ya que hay algunos métodos adicionales que vienen incluidos, asi como otros Helpers para cargar vistas parciales con una pequeña animación.
Espero ir abarcando cada una de las características poco a poco, para mostrar lo fácil y sencillo que se vuelve hacer aplicaciones web con este framework y lo flexible que puede ser ya que a su vez puede ser extendido por el usuario para cosas mas complicadas.
Gracias por todo y hasta mi proximo post.
