CatalystX::ExtJS::Tutorial - Introduction to CatalystX::ExtJS
version 1.122000
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. First of all we need to extract the ExtJS sources to root/static/ext/. Then we build the file root/src/index:
root/static/ext/
root/src/index
<html> <head> <title>Ext.Direct and Catalyst</title> <link rel="stylesheet" type="text/css" href="/static/ext/resources/css/ext-all.css" /> <script type="text/javascript" src="/static/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/static/ext/ext-all-debug.js"></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) 2010 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.