The Perl and Raku Conference 2025: Greenville, South Carolina - June 27-29 Learn more

 / 
CatalystX-ExtJS-2.1.3
River stage one • 1 direct dependent • 1 total dependent
/ CatalystX::ExtJS::Tutorial

NAME

CatalystX::ExtJS::Tutorial - Introduction to CatalystX::ExtJS

VERSION

version 2.1.3

INTRODUCTION

TUTORIALS

CatalystX::ExtJS::Tutorial::Direct

FIRST STEPS

These tasks are referenced from the tutorials above.

Step 1: Bootstrap Catalyst

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).

Step 2: Add the Template View

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:


            

              
              
package MyApp::View::TT;
use Moose;
extends 'Catalyst::View::TT::Alloy';
__PACKAGE__->config( {
        CATALYST_VAR => 'c',
        INCLUDE_PATH => [ MyApp->path_to( 'root', 'src' ) ]
    } );
1;

Step 3: Adjust the Root Controller

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:


            

              
              
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.

Step 4: Add the index Template

Now it's time to build some HTML and JavaScript. Add this to 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>

Step 5: Add the Direct API Controller

To have access to the API we need to add a new controller. Create lib/MyApp/Controller/API.pm and paste:


            

              
              
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.


            

              
              
sub js : Path : Args {
   my ($self, $c, $template) = @_;
   $c->stash->{template} = $template;
}

Step 6: Add a DBIC Model

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:


            

              
              
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:


            

              
              
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:


            

              
              
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;

AUTHOR

Moritz Onken <onken@netcubed.de>

COPYRIGHT AND LICENSE

This software is Copyright (c) 2011 by Moritz Onken.

This is free software, licensed under:


            

              
              
The (three-clause) BSD License