- 1. Javier E. Prez P. Noviembre 2007 Desarrollo de aplicaciones
web usando Catalyst y jQuery
2. Puntos a tratar
- Requisitos de instalacin.
- Creacin de: Controlador, Modelo, Vista.
- Conexin a base de datos (DBIC).
- Trabajando con plantillas (TT, TTSite)
- Trabajando con formularios (FormBuilder).
- Autorizacin, autenticacin.
- Proyectos nacionales desarrollados usando catalyst.
3. Qu es Catalyst?
- Framework Web escrito usando perl.
- Servidor de pruebas integrado.
4. Metodologa MVC
-
-
- De donde se almacenan los datos.
-
-
- Generalmente base de datos.
-
-
- La presentacin de los datos.
-
-
- HTML, JSON, RSS, XML, etc.
-
-
- Quin maneja las transacciones entre la solicitud del usuario,
el proceso y salida de informacin.
5. Ventajas de su uso 6. Ventajas de su uso
- Despacho del URL, se trabaja basado en segmentos en vez de
querystring's.
http://www.google.com/search
?hl=es&client=iceweasel-a&q=catalyst&btnG=Buscarhttp://www.administracion.com/usuario
?id=11222333&accion=eliminar QueryString
http://www.google.com/search/
lenguale/es/cliente/iceweasel-a/q/catalyst/Buscarhttp://www.administracion.com/usuario
/11222333/eliminar Basado en segmentos (segment based) 7.
- Est respaldado por la gran cantidad de mdulos que hospeda
cpan.
there's nothing magical about catalyst, it doesn't get in your
way,it just dispatches urls to actions Ventajas de su uso use
PDF::CreateSimple; sub pdf : Local { my ($self,$c,$mensaje) = @_; #
Heredamos el mdulo como lo haramos con cualquier aplicacin CGI my
$pdfFile =
PDF::CreateSimple->new("root/reporte.pdf",undef,'LETTER'); #
Pasamos algunos parametros (Esto no es catalyst, es perl)
$pdfFile->drawText($mensaje,'Verdana',10,200,450,'black',3);
$pdfFile->drawText('Generado con
Catalyst','Verdana',10,200,400,'black',3);
$pdfFile->drawImage('root/images/catalyst-logo.png',250,300); #
esto no enva el pdf para descargar, sino que lo guarda en el disco
$pdfFile->closeFile;# Ahora enviamos al navegador a que muestre
el archivo recin guardado $c->res->redirect("/archivo.pdf");
} 8.
-
- (There Is More Than One Way To Do It)
9. Requisitos de instalacin
- Paquetes en debian / ubuntu :
-
- El resto que se necesite.
-
-
- Por ejemplo, en la shell:cpan CGI::FormBuilder
-
-
- usar dh_make para convertir modulos de perl a paquetes debian y
as instalarlos.
10.
- Estructura establecida de los directorios manteniendo un
orden.
11. Creando un proyecto
- Nos cambiamos de directorio de trabajo al recien creado (nombre
del proyecto)
- Corremos el servidor de pruebas
-
- $ perl script/proyecto_server.pl
12. Creando controlador
- perl script/sistap_create.plcontroller unesco_area
- lib/sistap/Controller/unesco_area.pm
package sistap::Controller::unesco_area; use strict; use
warnings; use base'Catalyst::Controller'; subindex : Private { my(
$self, $c ) = @_; $c->response->body( 'Hola mundo' ); }
subsaludo : Local { my( $self, $c ) = @_; $c->response->body(
'Hola mundo... de nuevo' ); } 1; 13. Mtodos de despacho
-
- Reconoce el nombre de la accin como primer argumento del
controlador.
- Path(: Path('foo/bar') { })
-
- Se especifica una ruta absoluta a despachar.
-
- Despacha el primer nivel (como si fuera controlador)
-
- Especial para funciones reservadas en catalyst (default, index,
begin, end, auto) , no es despachada por url.
- Regex( : Regex('^item(d+)/orden(d+)$') { } )
-
- Despacha segn una expresin regular dada (en todo el
sistema)
-
- No usa ModRewrite para esto.
-
- item4/orden243es capturada con esa expresin.
- LocalRegex( : LocalRegex('^widget(d+)$') { } )
-
- Igual que Regex pero solo es interpretada en el controlador
donde est definida.
-
- widget23es reconocido con la expresin del ejemplo.
-
- Se realiza una cadea entre diferentes acciones
-
- Se combina con Chained para reconocer la cadena
sub saludo: Local{ my ( $self, $c ) = @_;
$c->res->body('dvst'); } 14. Metodos de despacho
- Chained / CaptureArgs() / Args()
subwiki : PathPart('wiki') Chained('/') CaptureArgs(1) { my(
$self, $c, $page_name ) = @_; # carga la pgina de nombre $page_name
y coloca el objeto en el stash $c->stash->{var1} =
$page_name; } subrev : PathPart('rev') Chained('wiki')
CaptureArgs(1) { my( $self, $c, $revision_id ) = @_; #Usa el objeto
de pgina que est en el stash y obtiene el nmero# de revisin
$revision_id. $c->stash->{var2} = $revision_id; } subview :
PathPart Chained('rev') Args(0) { my( $self, $c ) = @_; #Muestra la
revisin de la pgina en pantalla, my $salida ; $salida ="Esta
pantalla muestra la revision: ". $c->stash->{var2} ; $salida
.=" de la pagina: ".$c->stash->{var1} ;
$c->res->body($salida); } URL:
http://localhost:3000/wiki/principal/rev/4/viewSalida por pantalla:
Esta pantalla muestra la revision: 4 de la pagina: principal
subview : PathPart Chained('wiki') Args(0) { my( $self, $c ) = @_;
#Muestra la revisin de la pgina en pantalla, my $salida ; $salida
="Esta pantalla muestra la revision: ". $c->stash->{var2} ;
$salida .=" de la pagina: ".$c->stash->{var1} ;
$c->res->body($salida); } 15. Creando un modelo(DBIx::Class
-> Catalyst::Model::DBIC::Schema)
- Necesitamos esquema. (archivo lib/sistapDB.pm)
package sistapDB ; =head1 NAMEsistapDB - DBIC Schema Class =cut
# Nuetro esquema necesita heredar desde 'DBIx::Class::Schema' use
base qw/DBIx::Class::Schema/ ; # Se necesitan cargas las clases de
modelo de base de datos ac __PACKAGE__->load_classes({ sistapDB
=> [qw/ unesco_area unesco_subarea unesco_categoria /] }); 1 ;
16. Creando un modelo
- Se crea una clase por tabla
-
- (archivo lib/sistapDB/unesco_area.pm)
- usamos DBIx::Class::Schema::Loader
package sistapDB::unesco_area; use baseqw/DBIx::Class/;# Se
cargan componentes requeridos por DBIC
__PACKAGE__->load_components( qw/PK::Auto Core/ ); # Se asigna
el nombre de la base de datos__PACKAGE__->table(
'sta_unesco_area' ); # Se listan los campos de la tabla
__PACKAGE__->add_columns( qw/id codigo nombre descripcion activo
/ ); # Se indica la llave primaria de la tabla
__PACKAGE__->set_primary_key( qw/id/ ); # Asignamos las
relaciones__PACKAGE__->has_many(subareas =>
'sistapDB::unesco_subarea','id_unesco_area' ); 1 ; 17. Creando un
modelo
-
- Resultado :(Archivo: lib/sistap/Model/sistapDB)
-
- .script/sistap_create.pl modelsistapDBDBIC::Schema
-
- sistapDB dbi:Pg:dbname=sistap 'usuario' 'clave' '{ AutoCommit
=> 1 } '
-
- package DBIC::Model:: sistapDB ;
-
- use base 'Catalyst::Model::DBIC::Schema';
-
- schema_class => ' sistapDB ',
18. Trabajando con relaciones package sistapDB::unesco_area;
#... Se hereda clase ; Carga de componentes ; nombre de la tabla ;
nombre columnas ; llave primaria
__PACKAGE__->add_columns(qw/id_area nombre/); # empezamos a
declarar las relaciones a nivel de ORM __PACKAGE__->has_many(
subareas => 'sistapDB::unesco_subarea',' id_area '); package
sistapDB::unesco_subarea; #... igual que arriba
__PACKAGE__->add_columns(qw/id_subareaid_areanombre/); #
empezamos a declarar las relaciones a nivel de ORM
__PACKAGE__->belongs_to( area => 'sistapDB::unesco_area','
id_area '); __PACKAGE__->has_many( categorias =>
'sistapDB::unesco_subarea',' id_subarea '); package
sistapDB::unesco_categoria; #... igual que arriba
__PACKAGE__->add_columns(qw/id_categoriaid_subareanombre/); #
empezamos a declarar las relaciones a nivel de ORM
__PACKAGE__->belongs_to( subarea =>
'sistapDB::unesco_subarea',' id_subarea '); 19. Usando DBIC en el
controlador
-
- find( SELECT .. LIMIT 1 ) : Obtiene un (1) registro (hash) segn
patrn de busqueda
-
- $area =$c->model(sistapDB::unesco_area)->find(3);
-
- $persona =c->model(sistapDB::personas)->find({ nombre
=> { ILIKE => '%javier%' }})
-
- search(SELECT *): Obtiene un arreglo de registros
-
- @productos =$c->model(sistapDB::productos)->search({
codigo => 've' , tipo => 'abc' });
-
- create(INSERT): Crea un nuevo registro segn el hash
pasado.
-
- my $campos = { codigo => $c->req->param("codigo"),
nombre => $c->req->param(nombre)};
-
- $registro
=$c->model(sistapDB::productos)->create($campos);
-
- # al asignar la creacin del registro a una variable, se obtiene
el ResourceSet de la operacin
-
- $registro->id ; # se obtiene el id del registro recien
insertado.
-
- update : Actualiza el ResourceSet
-
- $equipo = $c->model(sistapDB::equipos)->find(3);
-
- $equipo->dominio(administracion);
-
- delete: Elimina los registros del resourceSet
-
- $c->model(sistapDB::equipos)->search({tipo =>
'ups'})->delete;
20. Vistas
- ClearSilver (yahoo, google)
21. Vistas (TTSite -> Catalyst::Helper::View::TTSite)
-
- Configuracin de variables (colores, rutas predefinidas, etc) a
ser usadas.
-
-
- heade r: Encabezado (h1 con nombre de pgina)
-
-
- html : Esqueleto base (Incluye ttsite.css)
-
-
- layout : Cuerpo (body) del documento.
-
-
- wrapper : Quin se encarga de acoplarlos.
-
- perl script/sistap_create view TTSite TTSite
. |--lib ||--config |||-- col |||-- main ||`-- url |`--site ||--
footer ||-- header ||-- html ||-- layout |`-- wrapper `---src |--
error.tt2 |-- message.tt2 |-- ttsite.css `-- welcome.tt2 22. Vistas
(Template Toolkit)
- perl script/sistap_create view TT TT
- Por defecto, las plantillas se almacenan en root
- $c->stash->{variable} && [% variable %]
23. Vistas (JSON)
- perl script/sistap_create view JSON JSON
my@estados = $c->model ( "sistapDB::paises"
)->find($id_pais)->estados( undef ,{ order_by=> ' nombre '
}) ; $c->stash ->{estados} = [ map{
{id_estado=>$_->id_estado,nombre_estado=>$_->nombre}
}@estados]; $c->forward (' sistap::View::JSON '); my@estados =
$c->model ( "sistapDB::paises"
)->find($id_pais)->estados()->all ; $c->stash
->{estados} =@estados; $c->forward (' sistap::View::JSON ');
24. Vistas
- Al trabajar con varias vistas, si no se especifica cual usar
por defecto, podemos tener problemas.
--- name: sistap default_view: TT authentication: ... 25.
Generacin de formularios Catalyst::Controller::FormBuilder 26.
Generacin de formularios
- Se compone en varios archivos para mayor mantenimiento y
abstrabcin de conceptos.
-
-
- root/forms/nombre/comun.fb
-
-
- lib/sistap/Controller/nombre.pm
27. FormBuilder en Catalyst(CGI::FormBuilder) Descripcin del
formulario (root/forms/unesco_subarea/comun.fb)
- Definicin de elementos y sus atributos.
- Validaciones (Cliente y Servidor)
- Facilmente aplicable a plantillas.
-
- action: /unesco_subarea/operaciones
28. FormBuilder en Catalyst(CGI::FormBuilder) Controlador
(lib/sistap/Controller/unesco_subarea)
-
- package sistap::Controller::unesco_subarea;
-
- use base 'Catalyst::Controller ::FormBuilder ';
-
- sub principal :
Path('/mantenimiento/unesco_subarea')Form('unesco_subarea/comun'){
-
- my $form = $self->formbuilder;
-
- $form->field( name => 'id_unesco_area',
-
- { $_->id_area => $_->nombre }
-
- } $c->model(sistapDB::unesco_area)->all ]
-
- if ($form->submitted && $form->validate){
-
-
$c->model(sistapDB::unesco_subarea)->create($form->fields)
;
29. FormBuilder en Catalyst(CGI::FormBuilder) Plantilla
(root/src/unesco_subarea/comun.tt)
-
-
-
- [% FormBuilder.field.tOperacion.field -%]
-
- [% FormBuilder.field.id_institucion.field -%]
-
-
-
-
-
- [% FormBuilder.field.nombre.label -%]
-
- [% FormBuilder.field.nombre.field -%]
-
- [% FormBuilder.field.siglas.label -%]
-
- [% FormBuilder.field.siglas.field -%]
30. Variables de session 31. Agregando mdulos(Catalyst::Plugin)
lib/sistap.pm
-
- useCatalyst::Runtime'5.70';
-
- Authentication::Store::DBIC
-
- Authentication::Credential::Password
-
- __PACKAGE__->config ( name => 'sistap',
-
- session => { flash_to_stash => 1 },
-
- form => { messages => ':es_ES' }
-
- __PACKAGE__->setup ( qw/RequireSSL/ );
-
-
- Modo verboso en consola cuando se usa servidor de pruebas.
-
-
- Se usa para cargar informacin de proyecto.yml
-
-
- Para que reconozca archivos estaticos (imagenes, css, js) y no
trate despacha las rutas si hay coincidencia.
-
- Authentication/Autorization*
-
-
- Autenticacin (Quin tiene acceso?)
-
-
- Autorizacin (de qu tiene acceso?)
-
-
- Ejectos integrados de script.aculo.us
-
-
- uso de Data::Dumper para obtener estructuras completas de
data.
32. Uso de sesiones
- Agregar plugin de session
- Variables de session slo para el usuario que ejecuta la
accin.
-
- $c->session->{id} = hey ;
-
- delete($c->session->{id}) ;
-
- $c->session->{id} = undef ;
- Variable de session para todos los usuarios
-
- $c->store_session_data(key,value)
-
- $c->store_session_data(color,azul)
-
- $c->get_session_data(key)
-
- $c->get_session_data(color)
-
- $c->delete_session_data(key)
33. uso de Flash(BTW: nada que ver con adobe )
-
- Debe estar cargado plugin de sesion ( Catalyst::Plugin::Session
)
-
- $c->flash->{error} = Pagina invalida
34. Qu es jQuery?
- Gran cantidad de plugins.
-
- etc ( http://jquery.com/plugins/ )
35. jQuery
-
- < scripttype = "text/javascript" src = "[%
c.uri_for('/js/jquery-latest.pack-1_2_1.js') %]" > script
>
-
- < script type = "text/javascript">jQuery.noConflict () ;
script >
-
- < scripttype = "text/javascript" >
-
-
-
- // El cdigo a ejecutarse cuando se cargue todo el documento
ac
-
-
- // ac tambin puede haber cdigo, pero no si se disparar an
cuando
-
-
- // el documento no est cargado
36. jQuery: Selectores
- Bsicamente jQuery( selector CSS o xpath )
- jQuery ( "#txt_pais" ). val ( jQuery ( "#modal_pais :selected"
). text ())
-
- Antes:document.getElementById(txt_pais).value =
document.getElementById("modal_pais").options[document.getElementById("modal_pais").selectedIndex].text
- jQuery(".jd_menu li ul li
ul").parent().addClass("flecha_menu");
-
- Antes: Posiblemente usara un id por cada elemento y sabiendo
quin merece la imagen, se la asigno, sino, del lado del
servidor.
- jQuery("table.cebra tr:even").addClass("resaltado");
-
- Antes: Si se construye la tabla de forma dinmica (php, perl,
python, etc), controlar el nmero del registro y asignar la clase
correspondiente.
- jQuery("input[@type=text]:visible").eq(0).focus()
-
- Antes: Seguro hara lo mismo pero a pie, pasar por todo el
fomulario buscando los elementos visibles y luego situarme en el
primer elemento.
37. Ajax (ahah) 38. Ajax (ahah)
-
- perl script/sistap_create view JSON JSON
- La informacin a enviar como respuesta est en el stash.
-
- $c->stash->{salida} = hey;
- jQuery captura los datos.
- jQuery.getJSON( url , param , function(jsonData){
-
- if (jsonData.salida == hey ){
-
-
- alert(error al obtener la data);
39. Ajax (JSON)
-
- jQuery.getJSON( url , parametros , function(jsonData){ //
trabajamos con el resultado... jsonData });
my$id_pais=$c->req->param ( pais_id ); my@estados =
$c->model ( "sistapDB::paises" )->find($id_pais)->estados(
undef ,{ order_by=> ' nombre ' }) ; $c->stash ->{estados}
= [ map{
{id_estado=>$_->id_estado,nombre_estado=>$_->nombre}
}@estados]; $c->forward (' sistap::View::JSON ');
-
- jQuery.getJSON([% c.uri_for('controlador/accion/') %] , param ,
function(jsonData){
-
-
- for (i= 0 ; jsonData.estados.lenght ; i++){
-
-
- // tengo jsonData.estados[i].id_estado y
jsonData.estados[i].nombre_estado
-
-
-
- console.info(hubo un error al traer la data);
-
-
-
- // incluso se puede capturar si se acab el tiempo de sesin
-
-
-
- // de usuario segn respuesta y se recarga la pgina.
40. jQuery: plugins
-
- http://stilbuero.de/jquery/tabs/
-
- http://jdsharp.us/jQuery/plugins/jdMenu/
-
- http://jquery.com/demo/thickbox/
-
- http://www.malsup.com/jquery/form/
- Interfaces(interfaces es para para jQuery, lo que
script.aculo.us es para prototype)
-
- http://interface.eyecon.ro/
-
- http://jquery.com/plugins/
41. Depuracin 42. Depuracin
- javascript (firebug) : console.info()
43. Depuracin
- Catalyst : $c->log->debug()
44. Depuracin
- DBIC: export DBIC_TRACE=1=/tmp/salida.txt
45. Consejos
- Usar uri_for (en las plantillas y controlador).
-
- $c->res->redirect( $c->uri_for('/a/b/c') );
- Usar relaciones en ORM (DBIC).
- Usar Template Toolkit para generar maestros.
- Usar Flash + redirect para mensajes a usuario.
- Usar Ajax solo cuando sea justificado.(No AJfiXiar el
sitio)
-
- Servidor web(apache: AddDefaultCharset utf8)
-
- Archivo(Usar un editor que lo soporte, como vim )
- Usar la funcin jQuery en vez de la funcin annima ($)
46. Proyectos libres nacionales desarrollados usando Catalyst( Que
conozco hasta ahora )
-
-
http://search.cpan.org/~bureado/Debian-Package-HTML-0.1/lib/Debian/Package/HTML.pm
-
- http://blog.bureado.com.ve/?p=307
-
-
http://sistemas.fsl.fundacite-merida.gob.ve/projects/sistap
-
- http://sistemas.fsl.fundacite-merida.gob.ve/projects/tegz
47. Preguntas? 48. Gracias por su atencin