Sinatra desde Cero: 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

12345 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.

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

. ├── public │   └── nosotros.html └── server.rb 1 directory, 2 files

123456 ├──public│  └──nosotroshtml└──serverrb 1directory,2files

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

12345 require'sinatra' get'/index'do  erb:indexend

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

12345 require'sinatra' get'/contacto'do  erb:contactoend

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.

La estructura del proyecto es la siguiente:

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

123456 ├──public│  └──nosotroshtml├──serverrb└──views  └──contactoerb

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

123 get'/:usuarios/'do  erb'/usuarios/index'to_symend

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

123456 require'sinatra' get'/usuario'do  @nombre="alberto"  erb:usuarioend

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.

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!