Curso Play
Introducción
Básico
Intermedio

Añadiendo estilo

Por ahora nuestra página es bastante cutre. Play, a diferencia de otros frameworks como por ejemplo Richfaces, no trae elementos de interfaz gráfica. Esto puede parecer una desventaja, pero en realidad lo que permite es no atarte a utilizar un componente en concreto. En este tipo de framework puede ser muy complejo intentar modificar ese elemento visual para añadirle una funcionalidad que no tiene y te hace falta para tu aplicación.

En la actualidad existen muchas librerías javascript que te permiten tener una interfaz de usuario muy completa. Es mejor buscar entre las librerías disponible y encontrar la que mejor se adapta a tus necesidades. Normalmente este tipo de librerías tienen un mejor diseño y están mejor probadas para funcionar con todos los navegadores.

Por poner algunos ejemplos de librerías de este tipo:

Por ahora vamos únicamente a darle estilo a nuestra páginas y para ello ¿qué mejor que utilizar una librería de la propia gente de twitter?

Página principal de Bootstrap, from Twittter

Bootstrap está creado utilizando LESS, hojas de estilo dinámicas. Añade variable y funciones a las hojas de estilo tradicionales.También tienes un módulo en play para poder utilizar LESS http://www.playframework.org/modules/less

El ejemplo que utilizaremos para nuestra página será el que más se parece a la interfaz de twitter http://twitter.github.com/bootstrap/examples/container-app.html

Modificamos nuestra plantilla para adaptar el contenido

app/views/main.html

<!DOCTYPE html>



<html>
    <head>
        <title>#{get ‘title’ /}</title>
        <meta charset=“utf-8”>



    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"shortcut icon"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="na">href=</span><span class="s">"@{'/public/images/favicon.png'}"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"@{'/public/javascripts/jquery-1.5.2.min.js'}"</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">charset=</span><span class="s">"${_response_encoding}"</span><span class="nt">&gt;&lt;/script&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">media=</span><span class="s">"screen"</span> <span class="na">href=</span><span class="s">"@{'/public/stylesheets/main.css'}"</span><span class="nt">&gt;</span>
    #{get 'moreStyles' /}
    #{get 'moreScripts' /}
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>

  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"topbar"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fill"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>twitter-play<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"@{Timeline.index}"</span><span class="nt">&gt;</span>Inicio<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"@{Timeline.stats}"</span><span class="nt">&gt;</span>Estadísticas<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;form</span> <span class="na">action=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"pull-right"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Salir<span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/form&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page-header"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;h1&gt;</span>#{get 'title' /}<span class="nt">&lt;/h1&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"span10"</span><span class="nt">&gt;</span>#{doLayout /}<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"span4"</span><span class="nt">&gt;</span>#{get 'secondaryContent' /}<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>

    <span class="nt">&lt;footer&gt;</span>
        <span class="nt">&lt;p&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"http://axelhzf.github.com/play-curso/"</span><span class="nt">&gt;</span>Tutorial<span class="nt">&lt;/a&gt;</span> - <span class="nt">&lt;a</span>
                <span class="na">href=</span><span class="s">"https://github.com/axelhzf/play-curso"</span><span class="nt">&gt;</span>Código fuente<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/footer&gt;</span>

<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- /container --&gt;</span>




</body>
</html>

public/stylesheets/main.css

html,body {
    background-color: #eee;
}



body {
    padding-top: 40px;
    / 40px to make the container go all the way to the bottom of the topbar /
}



.container>footer p {
    text-align: center; / center align it with the container /
}



.container {
    width: 820px;
    / downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. /
}



/ The white background content wrapper /
.content {
    background-color: #fff;
    padding: 20px;
    margin: 0 -20px;
    / negative indent the amount of the padding to maintain the grid system /
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}



/ Page header tweaks /
.page-header {
    background-color: #f5f5f5;
    padding: 20px 20px 10px;
    margin: -20px -20px 20px;
}



/ Styles you shouldn’t keep as they are for displaying this base example only /
.content .span10,.content .span4 {
    min-height: 500px;
}
/ Give a quick and non-cross-browser friendly divider /
.content .span4 {
    margin-left: 0;
    padding-left: 19px;
    border-left: 1px solid #eee;
}



.topbar .btn {
    border: 0;
}



.tweet {
    padding: 5px 10px;
}



.tweet-author {
    font-weight: bold;
}



.tweet-date {
    font-size: 12px;
    color: #666;
}



.tweet-msg {
    margin: 5px 0;
}