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

June 3, 2009 – 11:20 am
Tags: , ,

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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

Ahora nuestro listado de Issues se verá de la siguiente forma:

  • Share/Bookmark

  1. One Response to “Introducción al Desarrollo de Aplicaciones con Groovy y Grails (Parte 5)”

  2. Excelente blog, realmente llegué por casualidad a tú blog, pero de verdad me ha gustado mucho, espero sigas así.

    Un saludo.

    By Alojado en on Jul 13, 2009

Post a Comment