Escuelita de Scala - Parte 5 - Typeahead con Bootstrap
Escuelita de Scala
- Parte 1 - Instalación
- Parte 2 - Configuración de Play Framework
- Parte 3 - Play MVC
- Parte 3a - Vistas
- Parte 4 - Modelos y servicios
- Parte 4a - ElasticSearch
- Parte 4b - MongoDB y Casbah
Para implementar Typeahead o Autocomplete, usamos el componente de Bootstrap Typeahead. Para integrarlo al servicio que genera la secuencia de datos sin embargo requiere de varias mejoras sustanciales. Se requiere:
- Buscar con autocomplete datos en /typeahead/{consulta}
- Seleccionar un valor
- Buscar el valor en ElasticSearch y retornar la ficha a MongoDB
- Presentar el documento en Bootstrap.
Vamos a revisar los primeros dos pasos
Consulta de Typeahead
Antes de iniciar, copiar los componentes de JavaScript que usaremos para implementar el cliente:
public/stylesheets
- boostrap css
- boostrap responsive css
- json2.js
- jquery
- bootstrap.min.js
- backbone.js
- underscore.js
- handlebars.js
Backbone
Application.js inicializa backbone, se crea un TypeaheadItems (controller) y se activa el routing. Backbone permite crear aplicaciones Single Page (SPA), donde podemos definir múltiples vistas y solo utilizar una página web física.
App.Controllers.TypeaheadItems contiene la ruta predeterminada. El método index llama a la vista con los valores retornados del service.
App.Collections.TypeaheadItems utiliza el patrón de Backbone para llamar servicios REST. En este caso se define el url “/typeahead/” + this.value. El modelo o client side data object es simple, solo definimos el nombre. Algunas opciones más avanzadas permite popular propiedades. Como queremos usar un ejemplo de Underscore, que viene siendo un tipo de .NET LINQ para JavaScript / Scala collections, el método toArray convierte el JSON en un array de JavaScript. El modelo de Backbone almacena todos los datos en attributes, esto a su vez pueden ser leidos con get o para escribir, set. Muy similar a un diccionario.
Para iniciar Backbone a nivel de la página nos aseguramos de ejecutar App.init.
Backbone view y otras pifias para implementar Bootstrap Typeahead
La vista principal, App.Views.Index, esta configurado para aplicar eventos al elemento con clase “search-query”. Backbone requiere siempre un elemento HTML el cual sera usado para implementar un render o alguna otra acción. Sin embargo, la instancia de Bootstrap Typeahead esta a nivel de JavaScript y se requiere instanciarla debidamente.
Hay otra variable auxiliar autocomplete en la vista Index. Al iniciar la vista, lo primero que se obtiene son los argumentos enviados, los cuales se acceden por options. Configuramos items y key , la siguiente linea, iniciamos typeahead y al fuente de datos se guarda como un array vacío.
Ahora, el evento que queremos suscribirnos (jQuery on para subscribir eventos), es el keyup. Otro nota importante es que le enviamos la instancia de la vista para poder usar esto dentro del closure del evento. Si obviamos esto, no es posible interactuar con la vista. Finalmente, render guarda cualquier valor de la fuente que no este nulo al objeto instanciado autocomplete.
Evento keyup
El evento keyup es controlado por el método typeaheadLookup. La variable self es la instancia de Bootstrap Typeahead. Si el input box no esta activo y tiene valor existente, entramos y hacemos un Backbone fetch. Es aqui donde el modelo de TypeaheadItems consulta al servicio REST, y mapea el resultado a un modelo. En el evento de éxito, usamos el método toArray para obtener el tipo de datos usado por el componente de Typeahead. Nos aseguramos que el evento se ejecuto con trigger, y nos subscribimos al evento de click. Tomar nota que es importante subscribirse a la clase ul.typeahead.dropdown-menu, ya que esta contiene la instancia con el valor seleccionado.
Selección del valor
En findRegPubItem, var self = obj.data , donde data es la instancia de la vista. Con esto enviamos el valor de la selección (obj.srcElement.innerText) a loadDocumentView, el cual se encarga de mostrar la vista de documento de sociedad anónima.