Catalyst
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í
Catalyst Web Framework – Primera Parte
by Joel Gómez on Mar.16, 2010, under Catalyst
¿Qué es un Framework?
Es un conjunto de herramientas que están integradas o hacen comunicación entre sí para la resolución de un trabajo en
particular.
¿Qué es MVC?
Es una metodología o estilo para construir aplicaciones que divide la implementación en “Modelo”, “Vista” y “Controlador”. El modelo es la representación de la información con el cual el sistema opera. La vista representa el modelo en un formato de salida para interactuar con el usuario (GUI). El controlador es la parte del sistema que responde a eventos del usuario e interactúa con el modelo con la información de entrada.
¿Qué es Catalyst Web Framework?
Es un Framework de código libre para aplicaciones web programado en Perl y hace uso de MVC. Catalyst no es un lenguaje de programación, es un Framework que integra un sin fin de módulos de Perl.
Instalando Catalyst Web Framework
Existen al menos dos maneras de instalarlo:
1.- Haciendo uso de los repositorios de su distribución:
# aptitude install libcatalyst-perl libcatalyst-engine-apache-perl libcatalyst-model-cdbi-perl libcatalyst-modules-extra-perl libcatalyst-modules-perl libcatalyst-view-tt-perl
Con el comando anterior estamos instalando tanto el Framework como algunos módulos extras para la conexión a bases de datos y generadores de vistas como Helpers
2.- Haciendo uso de CPAN
cpan -i Catalyst::Runtime Catalyst::Devel Task::Catalyst Catalyst::Model::DBIC::Schema Catalyst::View::TT DBD::SQLite DBIx::Class
Si es la primera vez que ejecutas CPAN entonces, éste le hará una serie de preguntas que no son del otro mundo y a las mayoría de las preguntas basta con darle <enter>
Comencemos entonces usar Catalyst
Lo primero que debemos hacer es ejecutar el siguiente comando para crear nuestro proyecto (por seguridad, no ejecute ningún comando de Catalyst como root ni tampoco edite los archivos como root):
# catalyst.pl evento
Tendremos como resultado lo siguiente:
created "evento" created "evento/script" created "evento/lib" created "evento/root" created "evento/root/static" created "evento/root/static/images" created "evento/t" created "evento/lib/evento" created "evento/lib/evento/Model" created "evento/lib/evento/View" created "evento/lib/evento/Controller" created "evento/evento.conf" created "evento/lib/evento.pm" created "evento/lib/evento/Controller/Root.pm" created "evento/README" created "evento/Changes" created "evento/t/01app.t" created "evento/t/02pod.t" created "evento/t/03podcoverage.t" created "evento/root/static/images/catalyst_logo.png" created "evento/root/static/images/btn_120x50_built.png" created "evento/root/static/images/btn_120x50_built_shadow.png" created "evento/root/static/images/btn_120x50_powered.png" created "evento/root/static/images/btn_120x50_powered_shadow.png" created "evento/root/static/images/btn_88x31_built.png" created "evento/root/static/images/btn_88x31_built_shadow.png" created "evento/root/static/images/btn_88x31_powered.png" created "evento/root/static/images/btn_88x31_powered_shadow.png" created "evento/root/favicon.ico" created "evento/Makefile.PL" created "evento/script/evento_cgi.pl" created "evento/script/evento_fastcgi.pl" created "evento/script/evento_server.pl" created "evento/script/evento_test.pl" created "evento/script/evento_create.pl"
Nos cambiamos a la carpeta que nos acaba de crear que es el mismo nombre del proyecto que se creó en el catalyst
# cd evento
# tree
. |-- Changes |-- Makefile.PL |-- README |-- evento.conf |-- lib | |-- evento | | |-- Controller | | | `-- Root.pm | | |-- Model | | `-- View | `-- evento.pm |-- root | |-- favicon.ico | `-- static | `-- images | |-- btn_120x50_built.png | |-- btn_120x50_built_shadow.png | |-- btn_120x50_powered.png | |-- btn_120x50_powered_shadow.png | |-- btn_88x31_built.png | |-- btn_88x31_built_shadow.png | |-- btn_88x31_powered.png | |-- btn_88x31_powered_shadow.png | `-- catalyst_logo.png |-- script | |-- evento_cgi.pl | |-- evento_create.pl | |-- evento_fastcgi.pl | |-- evento_server.pl | `-- evento_test.pl `-- t |-- 01app.t |-- 02pod.t `-- 03podcoverage.t
Con el comando “tree” nos muestra un árbol de directorios y archivos que están dentro de la carpeta evento (si no tienes el comando “tree” basta con instalarlo con: aptitude install tree)
En este momento ya podremos ver nuestro servidor de Catalyst ejecutando, hacemos el siguiente comando:
# script/evento_server -r
En nuestro navegador colocamos la siguiente direccion: http://localhost:3000 y nos mostrará la página de bienvenida de Catalyst
La opción -r es para que cuando modifiquemos un archivo del Framework que requiera reiniciar el servidor no lo tengamos que hacer nosotros mismo sino que Catalyst lo reiniciará automáticamente.
Pasemos ahora a crear un Controlador:
# script/evento_create.pl Controller registro
exists "/home/joelgomez/evento/script/../lib/evento/Controller" exists "/home/joelgomez/evento/script/../t" created "/home/joelgomez/evento/script/../lib/evento/Controller/registro.pm" created "/home/joelgomez/evento/script/../t/controller_registro.t"
Con nuestro servidor iniciado podremos colocar la siguiente dirección: http://localhost:3000/registro y nos mostrará una página web con:
Matched evento::Controller::registro in registro.
Esto, a parte de decirnos que vamos por buen camino, nos está diciendo lo que está programado en la controladora registro en el método index:
24 sub index : Path : Args(0) {
25 my ( $self, $c ) = @_;
26
27 $c->response->body(‘Matched evento::Controller::registro in registro.‘);
28 }
Nuestra controladora creada está ubicada en lib/evento/Controller y desde allí vamos a crear todos los método necesarios para nuestra aplicación.
Creación de vistas.
Para crear una vista es algo parecido a como hemos creado la controladora, vamos a usar TTSite como Helper, puesto que éste es mas flexible y usarlo es divertido, aunque tiene algunas limitaciones que más adelante iré detallando
# script/evento_create.pl View participante TTSite
exists "/home/joelgomez/evento/script/../lib/evento/View" exists "/home/joelgomez/evento/script/../t" created "/home/joelgomez/evento/script/../lib/evento/View/participante.pm" created "/home/joelgomez/evento/script/../root/lib" created "/home/joelgomez/evento/script/../root/src" created "/home/joelgomez/evento/script/../root/lib/config" created "/home/joelgomez/evento/script/../root/lib/config/main" created "/home/joelgomez/evento/script/../root/lib/config/col" created "/home/joelgomez/evento/script/../root/lib/config/url" created "/home/joelgomez/evento/script/../root/lib/site" created "/home/joelgomez/evento/script/../root/lib/site/wrapper" created "/home/joelgomez/evento/script/../root/lib/site/layout" created "/home/joelgomez/evento/script/../root/lib/site/html" created "/home/joelgomez/evento/script/../root/lib/site/header" created "/home/joelgomez/evento/script/../root/lib/site/footer" created "/home/joelgomez/evento/script/../root/src/welcome.tt2" created "/home/joelgomez/evento/script/../root/src/message.tt2" created "/home/joelgomez/evento/script/../root/src/error.tt2" created "/home/joelgomez/evento/script/../root/src/ttsite.css"
Debemos aclarar varias cositas hasta ahora: nuestros templates o vistas se almacenarán en root/src allí podremos crear las carpetas que nos sean necesarias para organizar mejor las vistas en caso de que la aplicación sea bastante grande. Vamos a crear un template llamado participante.tt2 y lo vamos a guardar en root/src/participante, por supuesto que la carpeta participante la tenemos que crear
# mkdir root/src/participante # cd root/src/participante # vim participante.tt2
Dentro de archivo participante.tt2 escribimos lo siguiente:
1 <p>Hola: [% nombre %] </p>
[% nombre %] Template Toolkit, esto nos ayudará bastante en el pase de variables desde la controlador hacia la vista, pueden echarle un vistazo desde su sitio oficial: http://template-toolkit.org/docs/index.html
Ahora, en nuestra controladora registro.pm ubicada en lib/evento/Controller escribimos el siguiente código debajo de la subrutina index:
30 sub saludo : Local {
31 my ( $self, $c) = @_;
32
33 $c->stash->{template} = “participante/participante.tt2“;
34 $c->stash->{nombre} = “Joel Gómez“;
35 }
En nuestro navegador colocamos la siguiente dirección: http://localhost:3000/registro/saludo Nótese que la url se descompone como servidor/controlador/método.
En nuestra subrutina saludo lo que estamos haciendo es diciéndole a Catalyst cual es la vista que va a usar para ese método y paso una variable llamada nombre para la vista.
Hasta aquí el primer tutorial de Catalyst Web Framework, en la siguente entrega voy a modificar el Helper TTSite y empezaremos a programar las vistas.
Descargue el ejemplo Aquí
