Integración de Selectize con RAILs y Webpacker

Contenido del curso

Introducción

Pruebas

Interacción dinámica

Notificaciones

Ciclos de vida

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:27

Integración de Selectize con RAILs y Webpacker

Curso Intermedio de Ruby on Rails

Clase 19 de 34

Clase 19 / 34

Recursos

Transformar los selects tradicionales de HTML en componentes interactivos y visualmente atractivos es una mejora significativa para cualquier aplicación web moderna. Con la librería Selectize, puedes lograrlo de forma sencilla integrándola con Rails y Webpacker, obteniendo plantillas personalizables y comportamientos dinámicos que enriquecen la experiencia del usuario.

¿Qué es Selectize y por qué usarlo en tus formularios?

Selectize es una librería de JavaScript que transforma los elementos select nativos en componentes con una interacción gráfica mucho más agradable [0:26]. Entre sus ventajas se encuentran:

Sistemas de plantillas que puedes diseñar y personalizar de forma individual.
Comportamientos dinámicos valiosos para aplicaciones web modernas.
Compatibilidad con jQuery, lo cual facilita su uso en proyectos que ya utilizan Bootstrap.

El proceso de instalación comienza desde la consola de comandos utilizando Yarn, el gestor de paquetes. Con el comando yarn add selectize se descarga e instala la librería en el proyecto [1:07].

¿Cómo se importa Selectize en el proyecto de Rails?

Una vez instalada la librería con Yarn, es necesario importarla dentro del archivo application.js, ubicado en la ruta app/javascript/packs/. En la línea correspondiente se agrega la declaración de importación [1:30]:

javascript import 'selectize'

Esta línea conecta la librería descargada con el sistema de assets de la aplicación a través de Webpacker, que actúa como el empaquetador de módulos JavaScript en Rails.

¿Cómo configurar Selectize con un namespace en CoffeeScript?

Para mantener el código organizado, se define un namespace llamado Misc dentro del archivo main.coffee [2:10]. Dentro de este namespace se crea la función selectize_by_scope, que recibe un selector CSS como parámetro y aplica la configuración de Selectize a todos los elementos contenidos en ese selector que tengan la clase .selectize.

Esta estrategia permite optimizar la configuración sin tener que aplicarla de forma individual a cada select. La función busca dentro del contenedor referenciado todos los elementos con la clase indicada, los itera y les aplica la transformación [2:48]:

coffeescript platzi.misc.selectize_by_scope = (scope) -> $(scope).find('.selectize').each -> $(this).selectize()

Para que esta función se ejecute automáticamente al cargar la aplicación, se invoca dentro de la función init pasando el body como contenedor principal [3:50]:

coffeescript platzi.misc.selectize_by_scope('body')

De esta forma, cualquier select en toda la página que tenga la clase selectize quedará transformado.

¿Cómo aplicar Selectize en un formulario de Rails?

En el formulario de tareas, por ejemplo, el campo de selección de categorías se puede selectizar agregando la clase correspondiente mediante el parámetro input_html [4:13]:

erb <%= f.input :category_id, input_html: { class: 'selectize' } %>

Al recargar la página, el select funciona correctamente, pero presenta problemas visuales porque el CSS de Selectize no es compatible de forma nativa con Bootstrap 4 [4:40].

¿Cómo solucionar los problemas de CSS entre Selectize y Bootstrap?

La comunidad ya ha resuelto esta incompatibilidad con un archivo CSS específico para Bootstrap 4. El proceso consiste en:

Obtener el archivo CSS desde el enlace proporcionado en los recursos de la clase [5:00].
Crear un nuevo archivo dentro de la carpeta stylesheets/source con el nombre selectize.bootstrap4.css [5:20].
Pegar el contenido del CSS descargado en ese archivo.
Importarlo desde el archivo principal de estilos usando la directiva @import [5:48].

css @import 'selectize.bootstrap4';

Es importante verificar que el nombre del archivo coincida exactamente con la referencia en la importación, ya que un simple typo puede provocar un error de tipo "File to import not found" [6:05]. Tras corregir cualquier error y refrescar la página, el Selectize queda completamente integrado con los estilos de Bootstrap, mostrando un componente funcional y visualmente coherente [6:25].

Esta integración sienta las bases para aplicar Selectize también dentro de formularios anidados, un tema que se aborda con el concepto de nested forms en Rails. Si has trabajado con selects complejos en tus proyectos, comparte tu experiencia y cuéntanos cómo los has resuelto.

Introducción

Curso Intermedio de Ruby on Rails: Migración y Optimización Avanzada

Migración de Rails a MongoDB con Mongoid y Pruebas Automatizadas

Gestión de Múltiples Versiones de MongoDB en Linux

Migración de Rails a MongoDB con Mongoid: Configuración Inicial

Migración de Modelos de Active Record a Mongoid

Migración completa de aplicaciones con MongoDB y Rails

Pruebas

Pruebas Automatizadas: Introducción a TDD y BDD en Desarrollo de Software

Creación de Fábricas Automatizadas con FactoryBot y Faker en Rails

Integración de Librerías para Pruebas Automatizadas en Rails

Pruebas de Modelos en Rails con Mongoid y RSpec

Pruebas de Validación y Guardado en Modelos Rails

Validación y Pruebas de Modelos en Ruby on Rails

Pruebas de Integración en Rails: Configuración y Ejecución Básica

Creación y prueba de tareas con métodos POST en Rails

Automatización de Pruebas con Headless Browser y Capybara en Rails

Pruebas de Sistema con KPIBara y WebDriver en Rails

Automatización de Pruebas de Sistema con Selenium y JavaScript

Interacción dinámica

Uso de CoffeeScript con Rails y Webpacker: Integración y Ejemplos

Integración de Selectize con RAILs y Webpacker

Formularios Anidados en Rails: Uso de Simple Form y Cocoon

Implementación Selectize en Formularios Dinámicos con Kokoon y CafeScript

Notificaciones

Envío de Emails Automático al Crear Tareas

Introducción a Service Objects en Ruby on Rails

Pruebas de TDD para Service Object de Notificaciones por Correo

Creación de Service Objects para Envío de Correos en Ruby on Rails

Procesos en Background con Sucker Punch en Rails

Pruebas con Doubles en Rails usando Sucker Punch

Ciclos de vida

Máquinas de Estado Finito: Conceptos y Aplicaciones Prácticas

Creación de Máquinas de Estados con AASM en Ruby on Rails

Creación de Service Object para Gestión de Estados de Tareas en Rails

Acciones de Controlador y Pruebas en Ruby on Rails

Integración de AJAX en Gestión de Estados de Tareas en Ruby on Rails

Cierre

Optimización de rendimiento en aplicaciones web con Ruby on Rails

Migración y Pruebas Automatizadas en Ruby on Rails

Integración de Selectize con RAILs y Webpacker