Introducción al Desarrollo de Aplicaciones con Groovy y Grails (Parte 5)

June 3rd, 2009 by juanmendez

Modificación de las Vistas Generadas por Grails

En muchas ocasiones no es suficiente la funcionalidad que genera automáticamente el marco de trabajo Grails. En la presente sección realizaremos algunas modificaciones a las pantallas generadas por la herramienta.

Vamos a la carpeta ‘grails-app/views‘, notese que hay una carpeta por cada tabla creada, en estas carpetas estará en código seudo-HTML para cada una de nuestras vistas en la aplicación.

El siguiente paso es modificar algunas de las vistas para ver su funcionamiento, para nuestro ejemplo vamos a modificar la vista que muestra la lista de “issues”, abrimos el archivo ‘grails-app/views/issue/list.gsp‘, pero, primero vamos a crear un nuevo tag dinamico para nuestra aplicación (ud puede ver mas de los tags en http://grails.org/Dynamic+Tag+Libraries).

Teniendo como base la carpeta de nuestro proyecto ejecutamos el comando:

> grails create-tag-lib Misc

Una vez ejecutado este comando se creara el archivo ‘grails-app/taglib/MiscTagLib.groovy ‘ y a este le vamos a añadir las siguientes líneas de código:

Descargamos la siguiente imagen: http://openclipart.org/people/hrum/hrum_cocktail.png y la copiamos en la carpeta issuetracker\web-app\images (es recomendable reducir el tamaño de la imagen para una mejor visualización).

Ahora modificamos el archivo ‘grails-app/views/issue/list.gsp ‘ de la siguiente forma: (Nótense las líneas 27, y 39 a la 43.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="main" />
        <title>Issue List</title>
    </head>
    <body>
        <div class="nav">
            <span class="menuButton"><a class="home" href="${resource(dir:'')}">Home</a></span>
            <span class="menuButton"><g:link class="create" action="create">New Issue</g:link></span>
        </div>
        <div class="body">
            <h1>Issue List</h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="list">
                <table>
                    <thead>
                        <tr>
                   	        <g:sortableColumn property="id" title="Id" />
                   	        <th>Component</th>
                   	        <g:sortableColumn property="type" title="Type" />
                   	        <g:sortableColumn property="submitter" title="Submitter" />
                   	        <g:sortableColumn property="description" title="Description" />
                   	        <g:sortableColumn property="status" title="Status" />
                   	        <g:sortableColumn property="bounty" title="Bounty" />
                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${issueInstanceList}" status="i" var="issueInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                            <td><g:link action="show" id="${issueInstance.id}">${fieldValue(bean:issueInstance, field:'id')}</g:link></td>
                            <td>${fieldValue(bean:issueInstance, field:'component')}</td>
                            <td>${fieldValue(bean:issueInstance, field:'type')}</td>
                            <td>${fieldValue(bean:issueInstance, field:'submitter')}</td>
                            <td>${fieldValue(bean:issueInstance, field:'description')}</td>
                            <td>${fieldValue(bean:issueInstance, field:'status')}</td>
                            <td>
                            	<g:repeat times="${issueInstance.bounty}">  
   									<img src="${createLinkTo(dir:'images', file:'hrum_cocktail.png')}" alt="${issueInstance.bounty} beers"/>  
   								</g:repeat>  
                            </td>
                        </tr>
                    </g:each>
                    </tbody>
                </table>
            </div>
            <div class="paginateButtons">
                <g:paginate total="${issueInstanceTotal}" />
            </div>
        </div>
    </body>
</html>