Calendario de Actividades
Antes de empezar, déjenme recordarles la programación para liberar la primera BETA del Jerti Framework:
- Sábado 21/Jul/2012: Blog - Controles del JF para formularios
- Sábado 28/Jul/2012: Blog - Las vistas parciales a través del JF.
- Sábado 11/Ago/2012: Blog - Un ejemplo completo del JF utilizando los controles de Formulario y las Vistas parciales.
- Sábado 18/Ago/2012: Liberación de la Beta del JF v1.0 + Blog - Instalación en un proyecto ASP.NET MVC 3
Introducción
Bueno amigos, como verán, este día aprenderemos un poco sobre los controles que están incluidos en el Jerti Framework (JF) para formularios. Les explicare como aplicar el tipo de control en el modelo, los parámetros adicionales para cada tipo de control y a su vez veremos el código HTML que genera el JF para que todo funcione. Así que manos a la obra.
¿Controles?
Quizás alguien se pregunte, "¿Controles en HTML?, Si en HTML solo existen etiquetas", bueno déjenme aclararles un poco el termino "control" en el JF. Lo que pasa es que yo definí como "control", al conjunto de etiquetas HTML y código JavaScript que son necesario para mostrar la funcionalidad de un elemento en un formulario. Bajo este termino manejaremos el concepto de control en el JF.
En la primera versión del JF se han definido un conjunto de controles que son de los mas esenciales en todo los formularios web. Aunque recuerden que como el JF ha sido pensado para simplificar las tareas repetitivas en la construcción de un sitio web, no es que el JF haya creado los controles, sino que se implementan los widget de jQuery para poder generar el control. Por ejemplo: el control Date, utiliza el widget incluido en la librería de jQueryUI DatePicker, y lo que hace el JF, es generar el código JavaScript y el código HTML necesario para que tengamos la funcionalidad de un DatePicker sin agregar código por nuestra cuenta.
Presentación de los controles
Bueno, iniciemos entonces con la presentación de cada uno de los controles incluidos en el JF:
TEXT (Por defecto):
El control JFControlType.Text, es el control por defecto que aplica el JF a cada una de las propiedades del modelo. Si nosotros en nuestro modelo no declaramos explicitamente el tipo de control que queremos, el JF por defecto asumirá que es un control tipo TEXT.
EL MODELO
En el modelo básicamente el control lo declaramos de la siguiente manera:
VB:
VB:
C#:
LA VISTA
Este control tiene 2 parametros adicionales que se le pueden agregar a la hora de generar la etiqueta HTML y son las siguientes:
- SetMarcaDeAgua(string): Establece el atributo de Placeholder en la etiqueta HTML para mostrar una marca de agua sobre el control.
- SetMaxLength(integer): Establece el atributo de Maxlength en la etiqueta HTML generada, para limitar la cantidad de caracteres en una etiqueta INPUT.
Ahora veamos como se declara en nuestra vista el control:
VB:
C#:
MULTILINE:
El control JFControlType.Multiline, es un control de etiqueta TEXTAREA, que nos sirve cuando queremos textos multilineas en un formulario, como en el caso de la direccion de vivienda.
EL MODELO
VB:
C#:
LA VISTA
Ya en la vista, el control Multiline, posee los 2 metodos opcionales del control Text, y ademas añade un nuevo metodo:
- SetRowsTextArea(integer): Establece el atributo de rows, de la etiqueta TextArea para definir el numero de filas que queremos en la etiqueta.
Declarando el control en nuestra vista nos quedaria:
VB:
C#:
FECHA:
El control JFControlType.Fecha es el control que añade el widget DatePicker de jQueryUI a nuestro elemento HTML. El JF se encarga de agregar el codigo JavaScript necesario para que funcione el widget de jQueryUI y se muestre en nuestra pagina.
EL MODELO
VB:
LA VISTA
Los metodos de opciones adicionales del control de Fecha, son los 2 metodos del control Text, pero que tambien añade 1 metodo adicional, el cual es:- SetOptions(string): Este metodo nos permite añadir código JavaScript sobre parametros adicionales que le queramos establecer al DatePicker de jQueryUI. Por ejemplo si quisieramos establecer la fecha minima o maxima para el control DatePicker, lo hacemos desde este metodo.
VB:
C#:
TIEMPO:
El control JFControlType.Tiempo nos permite en nuestra etiqueta input, mostrar un widget de jQuery para seleccionar el tiempo en nuestro formulario. El widget de TimePicker es la extension del jQueryUI DatePicker creado por Trentrichardson.
EL MODELO
VB:
C#:
LA VISTA
Los metodos adicionales para este control son los mismos que el control de fecha. Incluye los 2 metodos del control Text, y el metodo del control Fecha (SetOptions), el cual le permite pasar parametros al widget de TimePicker.
VB:
C#:
COMBOBOX:
El control JFControlType.Combobox es una etiqueta SELECT, en el cual acepta 2 origenes de datos para mostrar su listado de opciones.
- Origen de datos estatico: Es una coleccion de la clase SelectListItem, el cual puede ser definido en el area de codigo de la vista.
- Origen de datos remoto: Permite recuperar la coleccion de datos que se cargara en el SELECT, de manera remota por medio de AJAX. Uno solo debera establecer la ruta donde tiene que ir a traer los datos para cargarlos en el select.
EL MODELO
VB:
C#:
LA VISTA
Los metodos adicionales son:
- loadItems(IEnumerable(Of SelectListItem)): Se le pasa la colección de items que sera cargado de forma estatica a la etiqueta de Select.
- SetSource(string, Optional boolean): Este metodo se utiliza para pasarle en el primer parametro la URL donde deberia ir a traer la coleccion que se agregara al control de tipo Combobox. El segundo parametro, es un parametro opcional, que tiene como valor por defecto True, y lo que le indica al control es si se cargaran los datos en el evento document.ready(), o si se cargara por un metodo adicional que establezca el desarrollador.
VB:
C#:
AUTOCOMPLETE:
El control JFControlType.AutoComplete permite a nuestras etiquetas INPUT, la opcion de autocomplementado, gracias al widget de jQueryUI Autocomplete.
Este control tiene 2 variaciones:
- Con Cache: Cuando se carga la pagina, recoge de la URL definida como SOURCE todos los valores posibles en la lista de Autocompletado y las almacena en un array de JavaScript. Eso quiere decir q ya no volvera hacer peticiones del lado del servidor para mostrar el listado de valores que coincidan con el texto en la etiqueta input.
- Sin cache: Por cada palabra escrita en la etiqueta input, se manda una solicitud al servidor para ver si coinciden los valores o no y poder mostrar una lista de valores sugeridos
EL MODELO (CON CACHE)
VB:
C#:
LA VISTA
Los metodos adicionales, son los mismo del control Text, y tambien los del control ComboBox, para establecer la URL donde se consultara los valores.
VB:
C#:
RADIOBUTTON:
El control JFControlType.RadioButton permite a nuestras etiquetas INPUT, mostrar los valores en forma de radio buttons.
Este control funciona muy parecido al Combobox, ya que se debe de establecer un origen de datos estatico para los valores que quiero mostrar en forma de radio button.
EL MODELO
VB:
C#:
LA VISTA
El metodo permitido es el mismo del Combobox (loadItems) en el cual se establece la coleccion de items que deseo generar con estilo RadioButton.
VB:
C#:
PASSWORD Y NUMERICO:
Los controles JFControlType.Password y JFControlType.Numerico son controles iguales que el control Text; con la diferencia que, al atributo TYPE de la etiqueta INPUT es cambiado a PASSWORD o NUMBER respectivamente. Asi que no dare un ejemplo porque es igual al control text.
Conclusiones
Bueno en este tema intentamos ver un poco sobres los controles que dispenomos para capturar los datos del usuario en nuestros formularios web. Realmente todo el codigo JavaScript y codigo HTML es generado por el JF para que no tengamos de preocuparnos del codigo necesario para que el Widget funcione.
Tambien si ustedes tiene sugerencia sobre algun control que seria bueno incluir en el JF, ustedes pueden comentar en el blog y vamos analizar un poco sobre la propuesta y ver si es viable poderlo incluir en el JF.
Saludos y hasta el proximo sabado con el tema de las Vistas parciales con el JF.
