1	Getting started with ExtJS and Catalyst An introduction to ExtJS and Catalyst Perl Mova conference 2008 Kyiv, Ukraine Peter Edwards, Dragonstaff Ltd.
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.com
3	Contents ExtJS overview Catalyst overview Putting them together Example application Conclusion
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
5	ExtJS structure Works with other Javascript libraries YUI, JQuery, Prototype for legacy code
6	ExtJS in action Feed viewer panes toolbar
7	ExtJS in action Data grid sort columns editable data source
8	ExtJS in action Combobox
9	ExtJS in action Desktop
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 <link rel="stylesheet" type="text/css" href="/ext-1.1/resources/css/ext-all.css" /> <script type="text/javascript" src="/ext-1.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="/ext-1.1/ext-all.js"></script>
11	Start using ExtJS Use named DIVs to identify content to enhance <div id="container"><div id="content" class="welcome"> ... </div></div> 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) <script type="text/javascript"> 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); </script>
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
13	Catalyst overview
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
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
16	Putting them together An example Catalyst application with ExtJS http://www.dragonstaff.co.uk/extjs/home Source code – see 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
17	Example application
18	Example application
19	Example application
20	Conclusion Catalyst + ExtJS = quick easy Web 2.0 apps Thank you and any questions?