Lección 4. Crear la vista para el nuevo sitio web y el controlador para los ítemesYa hemos montado una interfaz para "administrar" nuestras tablas, ahora lo interesante sería mostrar la información en una página web y, de ser posible, con una bonita presentación. Bien, crearemos un controlador para mostrar los artículos de cada
feed que añadamos y estableceremos algunos comportamientos.
Creamos el controlador y le llamaremos
items. Ejecutamos
script/proyecto1_create.pl controller itemsYa tenemos dentro de la carpeta /lib/Proyecto1/Controller/ el controlador
items.pm. Así mismo, el
framework ha creado el correspondiente test en la carpeta
t/controller_items.tAbrimos
/lib/Proyecto1/Controller/items.pm y veremos:
Using perl Syntax Highlighting
sub index \:Path :Args(0) {
my ( $self, $c ) = @_;
$c->response->body('Matched Proyecto1::Controller::items in items.');
}
Coloreado en 0.002 segundos, usando
GeSHi 1.0.8.4
El
$c->response->body('Matched Proyecto1::Controller::items in items.') es el mensaje que se mostrará en el navegador, es un mensaje creado automáticamente por Catalyst.
Ahora bien, si tratamos de ingresar vía web a la página
items no se nos mostrará nada, nos saldrá el bonito '
Page not found' definido en el controlador
Root.pm.
Para que podamos ver el mensaje que crea el
framework por defecto para cada controlador (
Matched Proyecto1::Controller::items in items.), es necesario que se añada la Vista. Catalyst nos permite emplear diversos tipos de vistas, desde las típicas HTML hasta la generación de documentos PDF. Este procedimiento se realiza una sola vez si solo queremos generar páginas HTML; si queremos generar otro tipo de salida sí es necesario añadir la correspondiente vista.
A continuación, crearemos una vista HTML. Disponemos de varias herramientas ("
templates") para generar HTML: Template::Toolkit (TT); Mason 2; HTML::Template, entre otros. Nosotros usaremos Template::Toolkit (TT), ya que él por si mismo es un
framework para generar HTML y, como dicen ellos en su web, se puede procesar todo tipo de textos: HTML, XML, CSS, JavaScript. Destacar que podemos trabajar de dos maneras con TT: fácil y más fácil. Al ejecutar la fácil (
script/proyecto1_create.pl view HTML TT) nos crea la vista y nada más, hay que ir definiendo las estructuras de los directorios donde estarán todos los
templates (archivos) HTML, en la medida que el usuario quiera trabajar la visualización. La más fácil es que nos cree las estructuras de directorios y nos instale un diseño de página para mostrar los datos. Usaremos la segunda opción,
script/proyecto1_create.pl view HTML TTSiteCon TTSite le hemos dicho que cree toda la "lógica" de la web. Por tanto, ahora tenemos los siguientes directorios y archivos en nuestra aplicación:
Using text Syntax Highlighting
created " ../lib/Proyecto1/View/HTML.pm"
created " ../root/lib"
created " ../root/src"
created " ../root/lib/config"
created " ../root/lib/config/main"
created " ../root/lib/config/col"
created " ../root/lib/config/url"
created " ../root/lib/site"
created " ../root/lib/site/wrapper"
created " ../root/lib/site/layout"
created " ../root/lib/site/html"
created " ../root/lib/site/header"
created " ../root/lib/site/footer"
created " ../root/src/welcome.tt2"
created " ../root/src/message.tt2"
created " ../root/src/error.tt2"
created " ../root/src/ttsite.css"
Coloreado en 0.000 segundos, usando
GeSHi 1.0.8.4
Todos las plantillas que usaremos tendrán la extensión tt2. Dentro pondremos código HTML y TT.
Ahora podremos hacer unos pequeños cambios en
Root.pm para mostrar la página de inicio que aporta por defecto el TT, así como la página de errores.
Cambiamos
$c->response->body( $c->welcome_message ); por
$c->stash->{ template } = 'welcome.tt2';Cambiamos en
Root.pm que el manejo de errores use el
template que nos ha creado TT; para ello sustituimos:
$c->response->body( 'Page not found' );
$c->response->status(404);por esto:
$c->stash->{ template } = 'error.tt2';Hasta este momento parece que no hemos hecho muchas cosas, ya que aún no hemos escrito apenas código en la aplicación y ahora es que llegamos (por fin) a modificar la primera línea. Hemos hecho mucho y por eso creo que este es de los mejores
framework que hay en la actualidad para la programación web.
Tiene automatizado una gran cantidad de tareas que con solo una instrucción tenemos un servidor web instalado y ejecutando nuestra aplicación. Sin tener que modificar archivos del servidor web con que se trabaje, y claro que se tendrá en algún momento, si así lo requiere el proyecto, configurar un servidor web.
Dejamos a la libertad del lector explorar el contenido de cada archivo que se han creado con TTSite. Seguro que surgirán dudas, así que no duden en preguntar.
A manera de resumen, esto es todo lo que hemos hecho hasta el momento:
- Añadido modelo, vista y controlador:
- script/proyecto1_create.pl model DB DBIC::Schema Proyecto1::Schema \create=static naming=current use_namespaces=1 \ components=TimeStamp dbi:mysql:proyecto1 'usuario' 'clave' '{ AutoCommit => 1 }'
- script/proyecto1_create.pl view HTML TTSite
- script/proyecto1_create.pl controller items
- Hemos usado el servidor web incorporado (built in testserver), al cual se le pueden pasar algunos parámetros como -r para 'restart' de forma automática cuando hacemos cambios en la aplicación. -d para ver el modo depurado por pantalla.
script/proyecto1_server.pl
Finalmente, tenemos en nuestra aplicación:
Using text Syntax Highlighting
.-----------------------------------------------------------------+----------.
| Class | Type |
+-----------------------------------------------------------------+----------+
| Proyecto1::Controller::AutoCRUD::AJAX | instance |
| Proyecto1::Controller::AutoCRUD::DisplayEngine::ExtJS2 | instance |
| Proyecto1::Controller::AutoCRUD::DisplayEngine::Skinny | instance |
| Proyecto1::Controller::AutoCRUD::Root | instance |
| Proyecto1::Controller::AutoCRUD::Static | instance |
| Proyecto1::Controller::Root | instance |
| Proyecto1::Controller::items | instance |
| Proyecto1::Model::AutoCRUD::StorageEngine::DBIC | instance |
| Proyecto1::Model::DB | instance |
| Proyecto1::Model::DB::Feed | class |
| Proyecto1::Model::DB::FeedItem | class |
| Proyecto1::View::AutoCRUD::JSON | instance |
| Proyecto1::View::AutoCRUD::TT | instance |
| Proyecto1::View::HTML | instance |
'-----------------------------------------------------------------+----------'
Coloreado en 0.000 segundos, usando
GeSHi 1.0.8.4
La próxima entrega cargaremos y mostraremos los ítemes.