Catalyst Web Framework – Segunda Parte
by Joel Gómez on Mar.26, 2010, under Catalyst
En el Post anterior jugamos un poco con la creación del proyecto, controladora y vista. Ahora vamos a divertirnos con la modificación de nuestro Helper (Ayudante o Auxiliar de Vistas) TTSite para la inclusión de Javascript y Css.
Helper TTSite encapsula los trozos de lógica correspondientes a la presentación y al acceso a datos y componentes que necesite una vista, haciendo que la vista permanezca de esta forma mucho más simple, reutilizable y mantenible. La lógica de presentación se encarga de formatear datos a través de Template Toolkit para que sean visualizados en una página, mientras que el acceso a datos o componentes implica la obtención de datos. TTSite tiene como debilidad que no podemos incluir Javascript’s o Css’s de manera razonable a una vista en particular (digo razonable porque si tratan de incluirlo entonces éste quedará fuera de la etiqueta
de nuestro html generado). Por tal motivo tendremos que hacer unas pequeñas y sencillas modificaciones al Helper.Antes de proseguir con el ejemplo práctico es obligatorio explicar los Actions Types
Los Actions Types es la forma mediante el cual Catalyst puede leer a la URL en la Controladora para luego hacer Match con los métodos dentro de ella. Los diferentes Actions son los siguientes:
Path
sub metodo : Path(’save’) { }
Hace Match con el método save de la controladora http://localhost:3000/controlador/save esta también se puede usar de forma relativa al controlador en uso
sub metodo : Path(‘/save’) { }
Hace Match con http://localhost:3000/save
Local
sub metodo : Local { }
Hace Match con http://localhost:3000/controlador/metodo no hace falta colocarle los argumentos
Global
sub metodo : Global { }
Es similar a la anterior solo que nuestra URL es http://localhost:3000/metodo se ignora el nombre de la controladora
Regex
sub metodo : Regexp(^save) { }
Este hace uso de expresiones regulares para hacer match con la URL de manera Global, el resultado puede ser el siguiente:
http://localhost:3000/save
http://localhost:3000/save_usuario
http://localhost:3000/save_evento
LocalRegexp
sub metodo : LocalRegexp(^save) { }
Igual que el anterior pero ahora de manera local, la URL puede ser
http://localhost:3000/controlador/save
http://localhost:3000/controlador/save_usuario
http://localhost:3000/controlador/save_evento
Private
sub metodo : Private { }
Este nunca hará Match por la URL, es decir, no se puede acceder a este método mediante la URL, es privado de la controladora.
Buildin-in Actions Special
Estas son acciones predefinida por Catalyst, las cuales son: index, auto, begin, end y default
default
Si Catalyst no consigue o no hace Match con un método en la controladora entonces el método default será ejecutado
index
Este método se ejecuta si el usuario trata de acceder a un método solo colocando en la URL el nombre de la controladora.
Ej, http://localhost:3000/controlador
begin
Una vez que el nombre del controlador ha sido identificado y antes de hacer Match con cualquier otro entonces el método begin se ejecutará
end
Catalyst llamará al método end luego que hace Match con el método pasado por URL y ejecute su contenido
auto
Este método se ejecuta exactamente después del begin pero justo antes de procesar el método que hace Match con la URL
Ahora si podemos para a la práctica
Por ejemplo, Si quiero usar la vista error.tt2 (ubicada en root/src) la cual es propia de TTSite que se utiliza principalmente para cuando se produce algún error en nuestra aplicación entonces debemos hacer lo siguiente:
1.- Modificación al archivo html (ubicado en root/lib/site)
1 [%#
2
3 Parametros (en orden de aparición):
4 js_local : un bloque de javascript que se incluye inline en head
5 js_ext : un arreglo de archivos de js a enlazar
6 css_ext : un arreglo de archivos de CSS a enlazar
7 ccs_local : un bloque de CSS que se incluye en línea
8 title : titulo personalizado de la vista
9
10 -%]
Este es un comentario al principio del archivo para los momentos de olvidos 
12 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
13 <html>
14 <head>
15 <title>[% title %]</title>
16 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
17 [% FOR sc = js_ext %]
18 <script type="text/javascript" src="[% sc %]"></script>
19 [% END %]
20
21 [% IF js_local %]
22 <script type="text/javascript">[% js_local %]</script>
23 [% END %]
24
25 [% FOR sc = css_ext %]
26 <link rel="stylesheet" type="text/css" media="screen" href="[% sc %]">
27 [% END %]
28
29 </head>
30 <body>
31 [% content %]
32 </body>
33 </html>
Nótese que el archivo tiene bastante sintaxis de Template Toolkit, el cual nos hace el pase de valores desde la vista hacia la controladora a través del Helper. Además, con esto lo que en realidad estamos haciendo es que en cualquier vista puedo incluir Javascript y/o Css y no tenemos que incluirlo en todas las vistas de la aplicación.
2.- Modificación al archivo error.tt2 (ubicado root/src)
1 [% js_local = BLOCK %]
2 $("document").ready(function(){
3 $("div#mainerror").corner();
4 });
5 [% END %]
6 [% js_ext = [
7 '/static/js/jquery-1.4.2.js',
8 '/static/js/jquery.corner.js'
9 ]
10 %]
11
12 [% css_ext = [
13 '/src/ttsite.css',
14 ]
15 %]
16
17 [% title = "Mi Título" %]
El código que acabamos de ver lo ubicaremos en la primera línea del archivo, éste cumple con la finalidad de utlizar las variables con formato de Template Toolkit que habiamos colocado en el archivo html (ubicado root/lib/site)
19 <div id="mainerror">
20 <img src="/static/images/warning80×67.png" alt="error">
21 <p>
22 An error has occurred. We’re terribly sorry about that, but it’s
23 one of those things that happens from time to time. Let’s just
24 hope the developers test everything properly before release…
25 </p>
26 <p>
27 Here’s the error message, on the off-chance that it means something
28 to you: <span class="error"><a>[% error %]</a></span>
29 </p>
30 </div>
Nótese que he creado una carpeta en root/static llamada js donde se almacenarán todos los javascript y descargué una imagen y la coloqué en la carpeta root/static/images
3.- Modificación al archivo ttsite.css (ubicacion root/src)
En este archivo es donde esté escrito en Template Toolkit lo reemplazamos por el valor que deseado, En mi archivo ttsite.css modifiqué lo siguiente:
[% site.col.page %] del body reemplazado por #FFFFFF
[% site.col.head %] del header reemplazado por #E3E6EA
[% site.col.line %] del header reemplazado por #F08900
[% site.col.head %] del footer reemplazado por #E3E6EA
[% site.col.line %] del footer reemplazado por #F08900
[% site.col.message %] del message reemplazado por #66AA66
[% site.col.error %] del error reemplazado por #CC4444
Este es el estilo que aplico a un div que coloqué en el archivo error.tt2 y conjuntamente con el Framework Javascript jQuery y con la librería jquery-corner.js saldrá un div centrado en la página con los bordes redondeados
47 div#mainerror{
48 background-color: #E3E6EA;
49 padding: 15px;
50 width: 60%;
51 left: 20%;
52 top: 20%;
53 position: absolute;
54 border: 1px solid #000000;
55 }
4.- Modificamos nuestra controladora llamada Root.pm ubicada en lib/evento/Controller
En el método default eliminamos o comentamos con # la dos líneas que aparecen allí y nuestro método quedará así:
36 sub default : Path {
37 my ( $self, $c ) = @_;
38
39 $c->stash->{error} = ‘Not Found (404)‘;
40 $c->stash->{template} = ‘error.tt2‘;
41
42 }
Con esto, lo que estamos haciendo es pasarle a la vista error.tt2 la variable error, luego guardamos y solo resta colocar en nuestro navegador una URL que no exista como por ejemplo http://localhost:3000/registro/adios
Con esto considero suficiente la segunda parte del tuto, en la siguiente entrega (haré una pausa por la semana mayor) vamos hacer una página de acceso a usuarios usando base de datos.
Descargue el ejemplo Aquí
Abril 4th, 2010 on 6:35 AM
Muy bueno el tutorial….!
Abril 5th, 2010 on 11:37 AM
Hola recien comienzo hoy a conocer catalyst y me parece que tienes unos tutoriales muy buenos… Excelente Joel. Espero la siguiente entrega del acceso a usuarios.
Abril 5th, 2010 on 11:41 AM
Me gustaria que me explicaras un poco las diferencias entre catalyst y codiigniter.
Abril 5th, 2010 on 2:07 PM
Hola muy bueno tu post. Podrias hacer un crud en catalyst… para entender a fondo como se maneja. Gracias.
Abril 6th, 2010 on 1:29 PM
Muchas gracias por tu comentario… La idea principal del tutorial es hacer una pequeña aplicación que le he denominado “eventos”. No te preocupes que haremos bastantes ejemplos al respecto.. Ya estoy haciendo la tercera parte así que no te preocupes
Abril 6th, 2010 on 8:11 PM
Bueno super,, yo uso mucho CGI-Application y veo que tiene algo similar .. pero aguanta aguanta,, No olvides que tenemos que sacar el proyecto de la web Catalys en español para darle fuerza y fama al mejor frameworks en Perl, todos los que quieran participar del proyecto deberian ser bienvenidos
Abril 7th, 2010 on 5:40 AM
Esta bien, ya estoy haciendo algunos contactos para la gestión del dominio y del hosting.