Aprendiendo ERB y los ActionView:: Helpers.
Como utilizarlos al desarrollar las vistas de tu aplicación en Rails.
El framework Ruby On Rails utiliza el patrón de arquitectura de software MVC. En dicho framework, al realizarse una solicitud HTTP a una ruta definida, esta será redirigida a un action del controller correspondiente. Una vez allí, es procesada dependiendo de la lógica de negocios definida en el Modelo, y luego de eso, en el controller se retorna una respuesta al cliente(Browser comúnmente).
Por defecto, los controllers en Rails automáticamente renderizan vistas con nombres que correspondan a rutas validas. Por ejemplo, si tu tienes este código en tu BooksController:
class FilmssController < ApplicationControllerdef index; endend
Y lo siguiente en tu archivo de rutas:
resources :films, only: [:index, :show]
Y tienes un archivo de vista app/views/films/index.html.erb:
<h1>Las películas vienen pronto!</h1>
Rails automáticamente renderiza app/views/films/index.html.erb cuando tu navegues a /films podrás observar "Las películas vienen pronto!" en tu pantalla.
Esto unido al layout definido que se debe utilizar para mostrar la vista final. Por defecto el layout utilizado es /app/views/layouts/application.html.erb.
En dicho layout se tiene acceso a algunas herramientas útiles para renderizar la respuesta HTML final:
Asset Tags
Los Asset tag helpers proporcionan métodos para generar HTML que vincula las vistas a las fuentes, scripts(JS), stylesheets(CSS), imágenes, vídeos y audios. Entre ellos están:
javascript_include_tag:
Devuelve una etiqueta HTML script para cada una de las fuentes proporcionadas.
<%= javascript_include_tag 'application'%>En el documento HTML:
<script src=”/assets/application.self- 66347cf0a4cb1f26f76868b4697a9eee457c8c3a6da80c6fdd76ff77e911715e.js?body=1"></script>
Las fuentes pueden ser rutas a archivos JavaScript. Se supone que las rutas relativas, hacen referencia a assets/javascripts, se asume que las rutas completas son relativas a la raíz del documento. Las rutas relativas son idiomáticas, use las rutas absolutas solo cuando sea necesario. Al pasar rutas, la extensión “.js” es opcional.
stylesheet_link_tag:
Devuelve una etiqueta de enlace de hoja de estilo para las fuentes especificadas como argumentos.
Si no especifica una extensión, .css se agregará automáticamente.
<%= stylesheet_link_tag 'application', media: 'all'%>En el documento HTML:
<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1">
Se puede utilizar estos tags en layouts o en otras vistas, a pesar de eso, javascript_include_tag, stylesheet_link_tag, son utilizados comunmente en la sección <head> de un layout.
Añadir custom fonts a tu aplicación de Rails
Si estás cansado de utilizar los mismos tipos de fuente que vienen por defecto en el navegador, en este momento aprenderás a agregar fuentes que tu selecciones.
Lo primero es elegir cual fuente se adapta mejor a lo que quieres mostrar en el “look and feel” de tu aplicación. Personalmente utilizo el sitio web Google Fonts, ya que es muy sencillo obtener la fuente que quiera.
Una vez allí, lo siguiente es descargar la fuente seleccionada.
Para importar dicha fuente a tu aplicación de Rails, lo primero es crear la carpeta /app/assets/fonts.
Luego de esto, simplemente pega los archivos (.ttf ó .otf) dentro de dicha carpeta. Debe quedarte algo como esto:
Por último, en el archivo css que hayas definido para estilizar tu vista, debes definir:
@font-face { font-family: 'Nombre de la fuente'; src: url('/rutaa/archivodelafuente.extension_archivo')}h1 { font-family: 'Nombre de la fuente';}
En este ejemplo, estamos definiendo que las etiquetas h1 de nuestra vista van a utilizar la fuente ‘Roboto-Bold’
¿Qué es ERB?
ERB proporciona un sistema de plantillas fácil de usar pero potente para Ruby. Usando ERB, el código Ruby real se puede agregar a cualquier documento de texto simple con el fin de generar detalles de información del documento y / o control de flujo.
¿A qué no lo entendiste?
No pasa nada, simplemente es una mezcla de HTML y código Ruby (erb significa Ruby incrustado). Rails va a evaluar el código Ruby para añadir contenido al archivo dinámicamente, y va a enviar al browser un archivo de “HTML puro”.
Para entenderlo mejor, que tal si lo vemos en acción:
En el código de la vista:
<h3>Primer experimento con ERB</h3><p>La suma es:<%= 1 + 1 %></p>
En el browser:
Como lo puedes ver, en el browser, se mostró solamente el resultado de la operación. Esto es debido a que Rails realiza la ejecución del código Ruby que se encuentre dentro de
<%= %>y luego de obtener el resultado, envía los datos como clásico HTML.
Esa fue la presentación de una de las ventajas de erb, ahora bien, sin duda esto no se queda acá. Veamos lo que podemos realizar cuando utilizamos:
<% %>La diferencia en sintaxis, es solo el “=”, sin embargo, el código que definamos dentro de estas etiquetas se va a ejecutar sin ser mostrado en la vista. Por ejemplo, vamos a realizar la primera iteración utilizando erb:
En el código de la vista
<p>Iterar desde 0 a 5:<% (0..5).each do |i| %><%= "Numero: #{i}, " %><% end %></p>
En el browser:
WOW! Como lo puedes ver, acabamos de realizar una iteración en nuestra vista HTML. Nos damos cuenta que el código ruby dentro de “<% %>” no se ve en el browser, sin embargo se realizó la iteración y logramos observar los números correspondientes.
URL Helpers
En las vistas de Rails podemos utilizar helpers para hacer links y obtener URLS.
link_to
Crea un elemento anchor (<a>)del nombre dado, usando una URL creada por el conjunto de opciones:
<%=link_to "Listado de películas", controller: "films", action: "index"%>Esto genera en el browser:
<a href="/films">Listado de películas</a>El helper link_to puede ser utilizado con diferentes opciones, además que se le puede pasar un bloque donde todo el contenido sea “clickeable”.
current_page?
Este helper devuelve true si se cumple la condición que se le pase como parámetro. Ejemplo:
Aprovechemos la sintaxis de erb para realizar un clásico condicional de ruby
<% if current_page?(controller: 'films', action: 'index')%>
<h4>Estamos en la vista del action index renderizada por el film controller</h4>
<% else%>
<h4>Estamos en una vista diferente</h4>
<% end %>Otros helpers de assets
Image_tag
Devuelve una etiqueta de imagen HTML para src. La fuente puede ser una ruta completa, un archivo o un archivo adjunto de ActiveStorage.
<%= image_tag("movie_picture_1.jpg") %>en el browser:<img src="/assets/movie_picture_5-837b011061ebba6635bcbf66ace470d2f51ca165417fb3a8b09983a2d17de148.jpg">
Video_tag
Devuelve una etiqueta de video HTML para src.
<%= video_tag("sample_video.mp4", controls: true %>en el browser:<video controls="controls" src="/assets/sample_video-f25b31f155970c46300934bda4a76cd2f581acab45c49762832ffdfddbcf9fdd.mp4"></video>
image_path, video_path, audio_path
Estos helpers devuelven la ruta de acceso de un asset determinado.
image_path("http://www.example.com/img/edit.png")
# => "http://www.example.com/img/edit.png"video_path("http://www.example.com/vid/hd.avi")
# => http://www.example.com/vid/hd.avi
Por ejemplo podriamos realizar:
<%=link_to("Aca está el video con un link externo",video_path("sample_video.mp4"))%>En el HTML:<a href="/assets/sample_video-f25b31f155970c46300934bda4a76cd2f581acab45c49762832ffdfddbcf9fdd.mp4">Aca está el video con un link externo</a>
Number Helpers
Estos helpers se utilizan para convertir números en strings formateados. Existen métodos para números de teléfono, moneda, porcentajes, decimales, tamaño de archivos, entre otros. Acá te presento 3:
number_to_currency
Este método modifica el número que se le pase, a la moneda local definida en tu aplicación a través de locales. Si deseas saber mas de esto, haz clic acá.
<%= number_to_currency(1234567890.506) %>number_to_human_size
Este método modifica el número que se le pase, a un tamaño de archivo mucho mas entendible.
<%= number_to_human_size(1234567890)%>number_to_phone
Este método modifica el número que se le pase, a un número telefónico mucho mas entendible.
<%=number_to_phone(1235551234, area_code: true)%>
Hoy podemos decir que hemos aprendido la sintaxis básica de erb, su utilidad. Además de esto, los helpers que nos proporciona Rails para desarrollar las vistas de nuestra aplicación de una mejor manera. Puedes encontrar la documentación de dichos helpers al darle clic en cada sección de este artículo.
