Agiliza la construcción de formularios con Simple Form

SIMPLEFORM

¿Qué es?

• Componente que agiliza la construcción de los formularios
• Es una Gema

Instalación:

1. Añadir: gem ‘simple_form’ en el gemfile.
2. Usar el comando bundle install (o bi)
3. Correr el generador usando: rails generate simple_form:install en el CMD
   Este proceso generará una preconfiguración del simple form usando plantillas.

Generar un form

• Generaremos un scaffold para el modelo User como hemos visto anteriormente. En este caso usando los atributos first_name, last_name, address, about_me y phone.
• Podemos ver que ahora, en las invocaciones, en lugar de erb, llamará a HAML
• Es posible añadirle cosas extra a los atributos creados. Por ejemplo, un label, que cambiará el nombre que se muestra en el form de la página web. Más de esto se puede ver en la documentación de simple form.

Es posible hacer la conversión de HTML a HAML usando la herramienta HTML2HAML

Si tienen algun problema instalando simple_form como:

Running via Spring preloader in process 33127
Could not find generator 'simple_form:install'. 
Run `rails generate --help` for more options.

Intenten apagando spring y prendiendolo

spring stop

spring start

rails generate simple_form:install

La forma más rápida para generar las vistas con el modelo Book seria:
1.- Borrar la carpeta las vistas de books
2.- Volver a correr el comando del scaffold con flags especificas:

rails g scaffold Book title author description:text isbn page_count:integer --migration=false --skip --force

Y listo…el comando anterior nos crearía solo los archivos faltantes, que en este caso son las vistas.

Mi archivo quedó diferente:

= form_for @user do |f|
  - if @user.errors.any?
    #error_explanation
      %h2= "#{pluralize(@user.errors.count, "error")} prohibited this user from being saved:"
      %ul
        - @user.errors.full_messages.each do |msg|
          %li= msg

  .field
    = f.label :first_name
    = f.text_field :first_name
  .field
    = f.label :last_name
    = f.text_field :last_name
  .field
    = f.label :address
    = f.text_field :address
  .field
    = f.label :about_me
    = f.text_area :about_me
  .field
    = f.label :phone
    = f.number_field :phone
  .actions
    = f.submit 'Save'

mi GemFile

gem 'bootsnap', '>= 1.4.2', require: false

gem 'hamlit'
gem "simple_form"

comando de terminal:

rails generate simple_form:install

Hice algo mal o es una nueva versión?

https://erb2slim.com/

En esta pagina se puede hacer el parseo de ERB a SLIM que es otro motor de templates, sin embargo tambien sirve para convertir a HAML

La pagina: https://htmltohaml.com/ ya no existe.

el partial de _form de libros lo podríamos colocar en haml de la siguiente manera:

-# frozen_string_literal: true
= simple_form_for(@book) do |form|
  - if book.errors.any?
    #error_explanation
      %h2
        = pluralize(book.errors.count, "error")
        prohibited this book from being saved:
      %ul
        - book.errors.full_messages.each do |message|
          %li= message
  .field
    = form.label :title
    = form.text_field :title
  .field
    = form.label :author
    = form.text_field :author
  .field
    = form.label :description
    = form.text_area :description
  .field
    = form.label :isbn
    = form.text_field :isbn
  .field
    = form.label :pages_count
    = form.number_field :pages_count
  .actions
    = form.submit

Simple Form es una dependencia que ayuda con la creación de formulario manteniendo la estructura MVC.

Para instalar la gema hay que añadir gem 'simple-form' a la lista de dependencias en el Gemfile y después ejecutar el comando bundle install

Una vez instalado hay que ejecutar el comando rails g simple_form:install para que la dependencia se configure con una serie de plantillas y un inicializador.

Este comando crea tres archivos: el inicializador, que es una pre configuración de la librería; el archivo de internacionalización, y la plantilla del formulario que para generar los scaffolds utilizando haml.

Al crear un nuevo scaffold se aprecia que para la creación de las vistas ya no utilizó erb, sino haml.

Al comparar las plantillas generadas con haml con las previamente generadas con erb, se observa que las de haml tienen una estructura mucho más limpia y fácil de leer con muchas menos líneas de código.

Existen conversores de HAML a HTML, en caso de que usar la nueva sintaxis se dificulte.

Después de generar modelo User con scaffold se debe reiniciar el servidor de lo contrario (en mi caso) se muestra un error al entrar a /users/new:

undefined method `simple_form_for’ for #<#Class:0x00:0x000>
Did you mean? simple_format

Esta fue mi manera de solucionar el cambio de HTML/ERB a HAML:

= simple_form_for(@book) do |f|
  - if book.errors.any?
    #error_explanation
      %h2
        = pluralize(book.errors.count, "error")
        prohibited this book from being saved:
      %ul
        - book.errors.each do |error|
          %li= error.full_message

  .form-inputs
    = f.input :title, label: 'Titulo'
    = f.input :author, label: 'Autor'
    = f.input :description, label: 'Descripccion'
    = f.input :isbn, label: 'ID'
    = f.input :page_count, label: 'Cantidad de paginas'

  .form-actions
    = f.button :submit

Tuve que modificar una parte, para poder instalar Simple Form, en la siguiente direcciòn: https://rubygems.org/gems/simple_form/version/5.1.0, hay un campo de nombre GEMFILE copiar el contenido y pegarlo en el GEMFILE

gem ‘simple_form’, ‘~> 5.1’

al especificar la versiòn ya me dejo instalarlo con.

bundle install

Gracias.

This is my code

-# frozen_string_literal: true
= simple_form_for(@book) do |f|
  = f.error_notification
  = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?

  .form-inputs
    = f.input :title
    = f.input :author
    = f.input :description
    = f.input :isbn
    = f.input :pages_count

  .form-actions
    = f.button :submit

Así quedó mi archivo: _form.html.haml

= simple_form_for(@book) do |f|
  = f.error_notification
  = f.error_notification message: f.object.erros[:base].to_sentence if f.object.errors[:base].present?

  .form-inputs
    = f.input :title
    = f.input :author
    = f.input :description
    = f.input :isbn
    = f.input :pages_count
  
  .form-actions
    = f.button :submit

Así quedo mi código:

= simple_form_for(@book) do |f|
  = f.error_notification 
  = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?

  .form-inputs 
    = f.input :title, label: 'Titulo'
    = f.input :author, label: 'Autor'
    = f.input :description, label: 'Descripción'
    = f.input :isbn, label: 'Identificador'
    = f.input :pages_count, label: 'Paginas'
    
  .form-actions 
    = f.button :submit```

Aquí dejo mi formulario de books con haml. Por cierto hay que tener cuidado con la identación como el profesor comento así es como se separa.

= simple_form_for(@book) do |book|
  = book.error_notification
  = book.error_notification message: book.object.errors[:base].to_sentence if book.object.errors[:base].present?

  .form-inputs
    = book.input :title , label: "Titulo"
    = book.input :author, label: "Autor"
    = book.input :description , label: "Resúmen"
    = book.input :isbn , label: "isbn"
    = book.input :pages, label: "N páginas"


  .form-actions
    = book.button :submit>

De igual manera cambie el archivo new.html.erb a new.html.haml de books que es donde se hace la renderización al formulario.

%h1 New Book

= render ‘form’

= link_to ‘Back’, books_path

Considero que HAML esta muy bien para paginas sencillas, pero según estuve buscando para ingresar otro atributos como aria attributes, se hace en una especie de JSON, que en los personal no me cuadra mucho como se ve. Cuestion de gustos supongo(?)

Con el comando:

bundle exec rake hamlit:erb2haml

Quedó así books:

= form_with(model: book, local: true) do |form|
  - if book.errors.any?
    #error_explanation
      %h2
        = pluralize(book.errors.count, "error")
        prohibited this book from being saved:
      %ul
        - book.errors.full_messages.each do |message|
          %li= message
  .field
    = form.label :title
    = form.text_field :title
  .field
    = form.label :author
    = form.text_field :author
  .field
    = form.label :description
    = form.text_area :description
  .field
    = form.label :isbn
    = form.text_field :isbn
  .field
    = form.label :pages_count
    = form.number_field :pages_count
  .actions
    = form.submit