CatalystX::ExtJS::Tutorial - Introduction to CatalystX::ExtJS
version 2.1.3
CatalystX::ExtJS::Tutorial::Direct
These tasks are referenced from the tutorials above.
In order to run the examples we need to bootstrap a Catalyst application.
First go to your working directory and run:
# catalyst.pl MyApp
This will create a basic Catalyst application. Open up lib/MyApp.pm and add Unicode to the list of plugins (after Static::Simple).
lib/MyApp.pm
Unicode
Static::Simple
Next we need a view. We will go with a Template::Alloy view which will take care of rendering the HTML and JavaScript sources. Create lib/MyApp/View/TT.pm with:
lib/MyApp/View/TT.pm
package MyApp::View::TT; use Moose; extends 'Catalyst::View::TT::Alloy'; __PACKAGE__->config( { CATALYST_VAR => 'c', INCLUDE_PATH => [ MyApp->path_to( 'root', 'src' ) ] } ); 1;
The JavaScript sources should be generated through the view we just created. For this to work, we need a controller, which handles that. We can use the Root controller which was created when we created MyApp. Open up lib/MyApp/Controller/Root.pm and change the index subroutine to:
Root
MyApp
lib/MyApp/Controller/Root.pm
index
sub index :Path :Args(0) { }
This removes the Catalyst welcome message and a request to / will run the index template (which we will create later) via the TT view.
/
Now it's time to build some HTML and JavaScript. Add this to root/src/index:
root/src/index
<html> <head> <title>Ext.Direct and Catalyst</title> <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css" /> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script> <script type="text/javascript" src="/api/src"></script> </head> <body>Hello World!</body> </html>
To have access to the API we need to add a new controller. Create lib/MyApp/Controller/API.pm and paste:
lib/MyApp/Controller/API.pm
package MyApp::Controller::API; use Moose; extends q(CatalystX::Controller::ExtJS::Direct::API); 1;
Now we create an action which will route any request to /js/* to the according template in root/src/js.
/js/*
root/src/js
sub js : Path : Args { my ($self, $c, $template) = @_; $c->stash->{template} = $template; }
To play around with actual data, we need to set up a model. We will be using DBIx::Class as ORM which means we have to set up a DBIC schema first.
Create the file lib/MyApp/Schema.pm and paste the following:
lib/MyApp/Schema.pm
package MyApp::Schema; use Moose; extends 'DBIx::Class::Schema'; __PACKAGE__->load_namespaces; 1;
Now we need a result class which describes the user object. Create lib/MyApp/Schema/Result/User.pm:
lib/MyApp/Schema/Result/User.pm
package MyApp::Schema::Result::User; use Moose; extends 'DBIx::Class::Core'; __PACKAGE__->table('user'); __PACKAGE__->add_columns( id => { is_auto_increment => 1, data_type => 'integer' }, qw(email first last) ); __PACKAGE__->set_primary_key('id'); 1;
To glue the DBIC schema and Catalyst together we create a model called MyApp::Model::DBIC. Paste the following in lib/MyApp/Model/DBIC.pm:
MyApp::Model::DBIC
lib/MyApp/Model/DBIC.pm
package MyApp::Model::DBIC; use Moose; extends 'Catalyst::Model::DBIC::Schema'; # we connect to an in-memory database # which means that the database is reset # with every start of the application __PACKAGE__->config({ schema_class => 'MyApp::Schema', connect_info => ['dbi:SQLite:dbname=:memory:'] }); # this initializes the empty sqlite database # and inserts one record after BUILD => sub { my $self = shift; my $schema = $self->schema; $schema->deploy; $schema->resultset('User')->create({ email => 'onken@netcubed.de', first => 'Moritz', last => 'Onken' }); }; 1;
Moritz Onken <onken@netcubed.de>
This software is Copyright (c) 2011 by Moritz Onken.
This is free software, licensed under:
The (three-clause) BSD License
To install CatalystX::ExtJS, copy and paste the appropriate command in to your terminal.
cpanm
cpanm CatalystX::ExtJS
CPAN shell
perl -MCPAN -e shell install CatalystX::ExtJS
For more information on module installation, please visit the detailed CPAN module installation guide.