5/26/2018 Catalyst Extjs

1/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 1

Getting started with

ExtJS and Catalyst

An introduction to ExtJS and CatalystPerl Mova conference 2008

Kyiv, Ukraine

Peter Edwards, Dragonstaff Ltd.

5/26/2018 Catalyst Extjs

2/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 2

About me

Name: Peter Edwards

Day job: IT consultant developer

Web applications using Catalyst

MiltonKeynes.pm perlmonger peterdragon on Perlmonks.org

CPAN: PEDWARDS

peter@dragonstaff.comWonders: is this the venue?

5/26/2018 Catalyst Extjs

3/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 3

Contents

ExtJS overview

Catalyst overview

Putting them together

Example applicationConclusion

Download this presentation from

http://perl.dragonstaff.co.uk

http://perl.dragonstaff.co.uk/http://perl.dragonstaff.co.uk/

5/26/2018 Catalyst Extjs

4/20Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 4

ExtJS overview

What is ExtJS? (extent) http://extjs.com

Cross-browser Javascript library for web pages Internet Explorer 6+, Firefox 1.5+, Safari 2+, Opera 9+

Web 2.0 effects with little code Abstracted handling of HTML elements, DOM,

event handling and Ajax

Widgets

window, layout, tabs, form, toolbar, menu, tree,data grid, combobox

http://extjs.com/learn/Ext_Extensions

http://extjs.com/http://extjs.com/learn/Ext_Extensionshttp://extjs.com/learn/Ext_Extensionshttp://extjs.com/

5/26/2018 Catalyst Extjs

5/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 5

ExtJS structure

Works with other Javascript libraries YUI, JQuery, Prototype for legacy code

5/26/2018 Catalyst Extjs

6/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 6

ExtJS in action

Feedviewer panes

toolbar

5/26/2018 Catalyst Extjs

7/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 7

ExtJS in action

Data grid sort

columns

editable

data

source

5/26/2018 Catalyst Extjs

8/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 8

ExtJS in action

Combobox

5/26/2018 Catalyst Extjs

9/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 9

ExtJS in action

Desktop

5/26/2018 Catalyst Extjs

10/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 10

Start using ExtJS

Learning resources http://extjs.com/learn/

reference manual http://extjs.com/deploy/ext/docs/

Download and install http://extjs.com/download

e.g. to /var/www/html/ext-2.0

Add stylesheet and libraries to web page header

http://extjs.com/learn/http://extjs.com/deploy/ext/docs/http://extjs.com/downloadhttp://extjs.com/downloadhttp://extjs.com/deploy/ext/docs/http://extjs.com/learn/

5/26/2018 Catalyst Extjs

11/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 11

Start using ExtJS

Use named DIVs to identify content to enhance ...

Write Javascript to tell ExtJS what to do E.g. create layout with one panel Note prototype object-based approach to standardise JS objects and avoid memory

leaks (http://extjs.com/learn/Manual:Intro:Class_Design)

Thescreen = function(){return {init: function(){var layout = new Ext.BorderLayout(document.body, {center: {autoScroll: true,minTabWidth: 50,preferredTabWidth: 150,titlebar: true

}});

layout.beginUpdate();layout.add('center', new Ext.ContentPanel('content', {title:'ExtJS demo app'}));layout.endUpdate();}

}}();Ext.EventManager.onDocumentReady(Thescreen.init, Thescreen, true);

http://extjs.com/learn/Manual:Intro:Class_Designhttp://extjs.com/learn/Manual:Intro:Class_Design

5/26/2018 Catalyst Extjs

12/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 12

Catalyst overview

What is Catalyst? Model-View-Controller perl framework for web apps

Model

data objects, business logic View

HTML templates or JSON or CSV or

Controller

parse request, map to action handler

5/26/2018 Catalyst Extjs

13/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 13

Catalyst overview

5/26/2018 Catalyst Extjs

14/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 14

Catalyst structure

Catalyst does most of the hard work for you URI parsing; map to chained handler routines

request/response objects, context setup, data stash

plugins for sessions, authentication, data stores etc.

logging, exception handling, debug

External configuration files via Config::Any YAML, Perl,

automated testing framework Test::WWW::Mechanize

test server, mod_perl, FastCGI

helpers to generate new model/view/controller code$ catalyst.pl My::App

$ scripts/myapp_create.pl controller My::Controller

5/26/2018 Catalyst Extjs

15/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 15

Catalyst learning

Book by Jonathon Rockway http://www.packtpub.com/

catalyst-perl-web-application/book

CPAN

http://search.cpan.org/perldoc?Catalyst::Manual Mailing lists

http://lists.scsys.co.uk/mailman/listinfo/catalyst http://lists.scsys.co.uk/mailman/listinfo/dbix-class

IRC #catalyst on irc.perl.org

Recent talk on writing a Catalyst Moose-based Wiki http://www.jrock.us/fp2008/catalyst/start.html

http://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://search.cpan.org/perldoc?Catalyst::Manualhttp://lists.scsys.co.uk/mailman/listinfo/catalysthttp://lists.scsys.co.uk/mailman/listinfo/dbix-classhttp://www.jrock.us/fp2008/catalyst/start.htmlhttp://www.jrock.us/fp2008/catalyst/start.htmlhttp://lists.scsys.co.uk/mailman/listinfo/dbix-classhttp://lists.scsys.co.uk/mailman/listinfo/dbix-classhttp://lists.scsys.co.uk/mailman/listinfo/dbix-classhttp://lists.scsys.co.uk/mailman/listinfo/catalysthttp://search.cpan.org/perldoc?Catalyst::Manualhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/bookhttp://www.packtpub.com/%0Bcatalyst-perl-web-application/book

5/26/2018 Catalyst Extjs

16/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 16

Putting them together

An example Catalyst application with ExtJS http://www.dragonstaff.co.uk/extjs/home

Source codesee comments in files $ svn co http://dev.catalystframework.org/repos/Catalyst/trunk/examples/ExtJS

Accompanying Catalyst advent calendar article http://catalyst.perl.org/calendar/2007/1

Features

Model: SQLite database View: Template::Toolkit templates containing Ext JS

ExtJS: layout, panels, tabs, styles, toolbar

http://www.dragonstaff.co.uk/extjs/homehttp://catalyst.perl.org/calendar/2007/1http://catalyst.perl.org/calendar/2007/1http://www.dragonstaff.co.uk/extjs/home

5/26/2018 Catalyst Extjs

17/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 17

Example application

5/26/2018 Catalyst Extjs

18/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 18

Example application

5/26/2018 Catalyst Extjs

19/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 19

Example application

5/26/2018 Catalyst Extjs

20/20

Getting started with ExtJS Javascript screen library and Catalyst Perl frameworkPerl Mova 2008, Kyiv, Ukraine 20

Conclusion

Catalyst + ExtJS = quick easy Web 2.0 apps

Thank you

and any questions?

Download this presentation fromhttp://perl.dragonstaff.co.uk

http://perl.dragonstaff.co.uk/http://perl.dragonstaff.co.uk/