No es muy difícil darse cuenta de que nuestra versión de Sudoku on Rails necesita urgentemente un lavado de cara. Nos gustaría darle algo de vida al aspecto de la aplicación, y a eso nos vamos a dedicar en esta nueva edición del tutorial. Gracias a la separación de la vista del resto de nuestra aplicación, podremos hacerlo sin escribir ni una línea de código.

El nuevo aspecto final podéis verlo aquí y podéis descargar el nuevo código desde aquí

Cómo sirve Rails nuestras páginas

Todo lo que cuelga del directorio public/ de nuestro proyecto Rails es servido de manera similar a como lo haría un servidor web tradicional. De hecho, es servidor por el servidor web bajo el que corramos nuestra aplicación, sin pasar por el intérprete Ruby.

Para el caso del contenido dinámico (y como ya vimos en el post anterior) cuando se invoca una acción de un controlador se sirve un fichero .rhtml, la vista por defecto que se sirve es views/layouts/controlador/accion.rhtml, o bien en nuestro controlador podemos indicar otra vista mediante render_action_. Estos ficheros .rhtml consisten en fragmentos de HTML mezclados con código Ruby.

Pero esto no es todo, el código generado por nuestra vista o layout no es lo que se envía al navegador. De momento basta con que sepamos que podemos definir una plantilla o vista a nivel de aplicación (app/views/layouts/application.rhtml) en la que se encaje el texto HTML generado por las vistas de cualquier controlador usando el tag content_for_layout

Obviamente, RoR no acaba aquí sino que va bastante más lejos, pero de momento nos bastará con quedarnos con esto.

Estrategia para trabajar lo menos posible

Para nuestro lavado de cara, nos bastará con realizar nuestro diseño (o bien, como en este caso, fusilar uno de OSWD ) y copiar los recursos estáticos en su correspondiente subidrectorio, public/images y public/stylesheets por lo general). Luego, sólo tenemos que generar algo parecido alindex.html de nuestro diseño usando application.rhtml y recordar incluir la hoja de estilos no con una referencia directa sino con stylesheet_link_tag. Igualmente si incluyésemos imágenes, usaríamos image_tag, tal y como nos explican en esta página del wiki de RoR

Por cierto, hemos usado este tema diseñado por Minimal Laboo

Páginas adicionales estáticas

En nuestra nueva versión, queremos tener una pequeña página que de alguna información sobre el juego del sudoku. Esta página en teoría sería contenido meramente estático así que podríamos incluirla directamente como public/acerca.html y hacer referencia a ella desde nuestras plantillas.

Pero esta página tendría que ser un fichero HTML estático, de forma que no podríamos aprovechar la descomposición de la que hemos hablado antes (una plantilla principal RHTML + código RHTML generado por el controlador). Si decidimos cambiar el aspecto de nuestra aplicación modificando application.rhtml, tendremos que editar a mano este fichero. Mala cosa.

La posibilidad más sencilla para salir al paso de este problema es inventarnos una nueva acción de nuestro controlador, llamada acerca, cuyo código es trivial:

    def acerca

    end

Por defecto, Rails cargará la vista acerca.rhtml donde, sin complicarnos la vida, escribimos en HTML tradicional una pequeña descripción del juego y ponemos algunos enlaces (en el código que os podeis descargar veréis que en la acción se hace una cosita más: se borra el contenido de flash[:note] para no repetir el último mensaje visualizado por el controlador)

De esta manera, nuestra página “Acerca de…” (que por lo demás no tiene contenido dinámico) tendrá el aspecto global de nuestra aplicación de manera inmediata. El inconveniente es que esta página es servida por Rails, no por el servidor web, y supondrá una carga adicional en nuestro servidor.