Getting started with Catalyst and extjs

1,667 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,667
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Getting started with Catalyst and extjs

  1. 1. Getting started with ExtJS and Catalyst An introduction to ExtJS and Catalyst Perl Mova conference 2008 Kyiv, Ukraine Peter Edwards, Dragonstaff Ltd.Getting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 1
  2. 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 Wonders: is this the venue?Getting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 2
  3. 3. Contents ➔ ExtJS overview ➔ Catalyst overview ➔ Putting them together ➔ Example application ➔ Conclusion Download this presentation from http://perl.dragonstaff.co.ukGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 3
  4. 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_ExtensionsGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 4
  5. 5. ExtJS structure ● Works with other Javascript libraries – YUI, JQuery, Prototype for legacy codeGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 5
  6. 6. ExtJS in action ● Feed viewer – panes – toolbarGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 6
  7. 7. ExtJS in action ● Data grid – sort – columns – editable – data sourceGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 7
  8. 8. ExtJS in action ● ComboboxGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 8
  9. 9. ExtJS in action DesktopGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 9
  10. 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>Getting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 10
  11. 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>Getting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 11
  12. 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 handlerGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 12
  13. 13. Catalyst overviewGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 13
  14. 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::ControllerGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 14
  15. 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.htmlGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 15
  16. 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, toolbarGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 16
  17. 17. Example applicationGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 17
  18. 18. Example applicationGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 18
  19. 19. Example applicationGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 19
  20. 20. Conclusion ● Catalyst + ExtJS = quick easy Web 2.0 apps ● Thank you ● and any questions? Download this presentation from http://perl.dragonstaff.co.ukGetting started with ExtJS Javascript screen library and Catalyst Perl framework – Perl Mova 2008, Kyiv, Ukraine 20

×