post thumbnail

Sinatra desde Cero: Vistas

Publicado Por: Alberto Grespan, El 31/10/2013


Detalles del Curso:

Dificultad: Novato

Duración: 30 min


La serie de Sinatra desde Cero, buscará otorgarte el conocimiento necesario para que puedas desarrollar tus propias aplicaciones Web haciendo uso de esta magnifica herramienta.

En este cuarto capítulo te enseñaremos a como utilizar las vistas en Sinatra. Cuando nos referimos a vistas pueden ser: simples archivos estáticos con representación de un "markup" HTML, vistas con código en linea dentro del archivo principal del proyecto o archivos específicos de vistas donde se pueden utilizar diferentes tipos de lenguajes para representar el "markup". Además aprenderemos a pasarle información de manera dinámica a las vistas.

Para comprender correctamente todo lo que hablaremos en esta serie, es conveniente tener un conocimiento básico sobre el lenguaje de Ruby. Podrás conseguir toda la información desees aquí


Vistas como archivos estáticos.

Las vistas como archivos estáticos, no permiten que se les pase ningún tipo de información proveniente de un controlador, por esto su nombre contiene la palabra estáticas. En pocas palabras es una representación HTML de una información. Normalmente estas vistas son utilizadas para la creación de secciones dentro de las páginas web; algo como: "Acerca de", "Nosotros", "La empresa", entre otras… Esta información cambia muy poco en el tiempo y por esa razón se utilizan archivos estáticos para crearlas.

Podemos ver con este pequeño ejemplo como se utilizan:

Primero debemos crear el servidor y agregar la ruta y el verbo adecuado para servir nuestra vista estática.

require 'sinatra'

get '/nosotros.html' do
  "cargando pagina estatica."
end

Segundo debemos crear una carpeta que se llame public en la raíz del proyecto, para posteriormente agregar la vista estática.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> <title>Nosotros | codehero.co</title>
  </head>
  <body>
    <h1>Codehero.co</h1>
  </body>
</html>

Si utilizamos la herramienta tree para ver la estructura del proyecto podemos observar:

.
├── public
│   └── nosotros.html
└── server.rb

1 directory, 2 files

Por lo que pueden observar es bastante sencillo crear y utilizar vistas estáticas. Por otro lado ¿qué ocurre cuando no se encuentra el archivo nosotros.html? Pues simplemente veremos en pantalla el mensaje "cargando pagina estatica." que escribimos en la ruta.


Vistas en línea.

Las vistas en linea o lineales es un tipo de vista que podría o no encontrarse en un archivo externo pero por lo general cuando se decide utilizar este tipo de vistas se coloca todo el código que la comprende en el mismo archivo principal donde se encuentran las rutas. Si llegáramos a realizar una aplicación muy pequeña, 1 o 2 vistas puede que se nos haga más sencillo hacer esto, aunque personalmente prefiero que los archivos estén bien ordenados y delegar las funciones de la aplicación correctamente. Mi recomendación es no utilizar este tipo de vistas.

Independientemente de mi opinión estas vistas existen y las podemos utilizar de la siguiente manera:

require 'sinatra'

get '/index' do
  erb :index
end


__END__

@@index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vista lineal</title>
  </head>
  <body>
    <h1>Hola mundo desde la vista lineal!</h1>
  </body>
</html>

Lo primero que debemos observar es que la ruta tiene un tipo de "template" llamado erb. Lo segundo es que el nombre de la vista es de tipo "symbol" (:índex). Lo tercero es que se está delimitando el código de la ruta y la vista con __END__ y la cuarta anotación es que la vista se llama con @@index.


Vistas externas

Las vistas externas son el tipo de vistas que acostumbramos a usar en la mayoría de nuestros proyectos; ya sea para separaras bien el código y mantenerlo ordenado o porque es un estándar de un framework. Estas vistas al igual que en las vistas en línea usan un tipo de lenguaje de "template" sea erb, haml, builder, liquid, markdown, etc… para trabajar con parámetros e información que reciben desde los controladores. Sinatra busca las vistas externas en una carpeta llamada views que se debe encontrar en la raíz del proyecto.

Hagamos una pequeña prueba:

require 'sinatra'

get '/contacto' do
  erb :contacto
end

En la carpeta views debemos crear un archivo llamado contacto y agregar un "markup" en HTML. se debe tener presente que el archivo aunque tenga "markup" HTML debe tener extensión .erb ya que le estamos diciendo a Sinatra que ese es el "markup" que utilizaremos.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vista de Contacto</title>
  </head>
  <body>
    <h1>Hola, desde la vista de contacto</h1>
  </body>
</html>

La estructura del proyecto es la siguiente:

.
├── public
│   └── nosotros.html
├── server.rb
└── views
    └── contacto.erb

La ubicación de la carpeta de las vistas puede ser modificada si no es del agrado de ustedes de la siguiente manera set :views, File.dirname(__FILE__) + '/su_directorio_de_preferencia'

Si llegaran a crear subcarpetas dentro de views como podría ser views/usuarios deben especificar la ruta a la vista que quieren utilizar.

get '/:usuarios/' do
  erb '/usuarios/index'.to_sym
end

Paso de parámetros a las vistas

El paso de parámetros a las vistas es algo sumamente normal en una aplicación ya que son estos los que convierten una vista "estática" en dinámica. En Sinatra es relativamente sencillo realizar un paso de parámetros. Supongamos que estamos buscando en una base de datos el nombre de un usuario y lo queremos mostrar en una vista.

require 'sinatra'

get '/usuario' do
  @nombre = "alberto"
  erb :usuario
end

Podemos observar que la variable nombre contiene una @. Este carácter permite que el contenido de la variable se encuentre visible en las vistas. Luego de la misma manera que hicimos anteriormente agregamos la vista.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vista de mostrar usuario</title>
  </head>
  <body>
  <h1>Hola, <%= @nombre %></h1>
  </body>
</html>

Aquí la única diferencia notable con respecto de la vista de contacto es que utilizamos unos caracteres especiales asociados a .erb para poder hacer visible el contenido de la variable. De esta manera al acceder a la ruta /usuario en nuestro navegador podremos ver que despliega el contenido esperado.


Conclusión

En este cuarto capítulo, hemos aprendido cuales son los tipos y como funcionan las vistas en Sinatra, es muy importante que revisen detalles a cerca de el lenguaje de templating .erb ya que les ayudará a entender varios detalles que veremos más adelante. Si te surge algún tipo de duda no te detengas y déjanos un comentario, que gustosamente lo responderemos.

¡Hasta el próximo capítulo!


¿Te ha gustado esta publicación?

Compártela:

Por Alberto Grespan

Conoce más sobre este autor aquí


comments powered by Disqus