Your SlideShare is downloading. ×
0
Getting started with ExtJS and Catalyst <ul><ul><li>An introduction to ExtJS and Catalyst </li></ul></ul><ul><ul><li>Perl ...
About me <ul><li>Name: Peter Edwards </li></ul><ul><li>Day job: IT consultant developer </li></ul><ul><li>Web applications...
Contents <ul><li>ExtJS overview </li></ul><ul><li>Catalyst overview </li></ul><ul><li>Putting them together </li></ul><ul>...
ExtJS overview <ul><li>What is ExtJS? (“extent”)  http://extjs.com   </li></ul><ul><li>Cross-browser Javascript library fo...
ExtJS structure <ul><li>Works with other Javascript libraries </li></ul><ul><ul><li>YUI, JQuery, Prototype for legacy code...
ExtJS in action <ul><li>Feed viewer </li></ul><ul><ul><li>panes </li></ul></ul><ul><ul><li>toolbar </li></ul></ul>
ExtJS in action <ul><li>Data grid </li></ul><ul><ul><li>sort </li></ul></ul><ul><ul><li>columns </li></ul></ul><ul><ul><li...
ExtJS in action <ul><li>Combobox </li></ul>
ExtJS in action <ul><li>Desktop </li></ul>
Start using ExtJS <ul><li>Learning resources </li></ul><ul><ul><li>http:// extjs.com /learn/ </li></ul></ul><ul><ul><li>re...
Start using ExtJS <ul><li>Use named DIVs to identify content to enhance </li></ul><ul><li><div id=&quot;container&quot;><d...
Catalyst overview <ul><li>What is Catalyst? </li></ul><ul><li>Model-View-Controller perl framework for web apps </li></ul>...
Catalyst overview
Catalyst structure <ul><li>Catalyst does most of the hard work for you </li></ul><ul><ul><li>URI parsing; map to chained h...
Catalyst learning <ul><li>Book by Jonathon Rockway </li></ul><ul><ul><li>http://www.packtpub.com/catalyst-perl-web-applica...
Putting them together <ul><li>An example Catalyst application with ExtJS </li></ul><ul><ul><li>http://www.dragonstaff.co.u...
Example application
Example application
Example application
Conclusion <ul><li>Catalyst + ExtJS = quick easy Web 2.0 apps </li></ul><ul><li>Thank you </li></ul><ul><li>and any questi...
Upcoming SlideShare
Loading in...5
×

Catalyst and ExtJS

3,144

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,144
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Catalyst and ExtJS"

  1. 1. Getting started with ExtJS and Catalyst <ul><ul><li>An introduction to ExtJS and Catalyst </li></ul></ul><ul><ul><li>Perl Mova conference 2008 </li></ul></ul><ul><ul><li>Kyiv, Ukraine </li></ul></ul><ul><ul><li>Peter Edwards, Dragonstaff Ltd. </li></ul></ul>
  2. 2. About me <ul><li>Name: Peter Edwards </li></ul><ul><li>Day job: IT consultant developer </li></ul><ul><li>Web applications using Catalyst </li></ul><ul><li>MiltonKeynes.pm perlmonger </li></ul><ul><li>peterdragon on Perlmonks.org </li></ul><ul><li>CPAN: PEDWARDS </li></ul><ul><li>[email_address] </li></ul>Wonders: is this the venue?
  3. 3. Contents <ul><li>ExtJS overview </li></ul><ul><li>Catalyst overview </li></ul><ul><li>Putting them together </li></ul><ul><ul><li>Example application </li></ul></ul><ul><li>Conclusion </li></ul>Download this presentation from http://perl.dragonstaff.co.uk
  4. 4. ExtJS overview <ul><li>What is ExtJS? (“extent”) http://extjs.com </li></ul><ul><li>Cross-browser Javascript library for web pages </li></ul><ul><ul><li>Internet Explorer 6+, Firefox 1.5+, Safari 2+, Opera 9+ </li></ul></ul><ul><li>Web 2.0 effects with little code </li></ul><ul><li>Abstracted handling of HTML elements, DOM, event handling and Ajax </li></ul><ul><li>Widgets </li></ul><ul><ul><li>window, layout, tabs, form, toolbar, menu, tree, data grid, combobox http:// extjs.com/learn/Ext_Extensions </li></ul></ul>
  5. 5. ExtJS structure <ul><li>Works with other Javascript libraries </li></ul><ul><ul><li>YUI, JQuery, Prototype for legacy code </li></ul></ul>
  6. 6. ExtJS in action <ul><li>Feed viewer </li></ul><ul><ul><li>panes </li></ul></ul><ul><ul><li>toolbar </li></ul></ul>
  7. 7. ExtJS in action <ul><li>Data grid </li></ul><ul><ul><li>sort </li></ul></ul><ul><ul><li>columns </li></ul></ul><ul><ul><li>editable </li></ul></ul><ul><ul><li>data source </li></ul></ul>
  8. 8. ExtJS in action <ul><li>Combobox </li></ul>
  9. 9. ExtJS in action <ul><li>Desktop </li></ul>
  10. 10. Start using ExtJS <ul><li>Learning resources </li></ul><ul><ul><li>http:// extjs.com /learn/ </li></ul></ul><ul><ul><li>reference manual http:// extjs.com /deploy/ext/docs/ </li></ul></ul><ul><li>Download and install </li></ul><ul><ul><li>http://extjs.com/download </li></ul></ul><ul><ul><li>e.g. to /var/www/html/ext-2.0 </li></ul></ul><ul><li>Add stylesheet and libraries to web page header </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/ext-1.1/resources/css/ext-all.css&quot; /> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;/ext-1.1/adapter/ext/ext-base.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;/ext-1.1/ext-all.js&quot;></script> </li></ul>
  11. 11. Start using ExtJS <ul><li>Use named DIVs to identify content to enhance </li></ul><ul><li><div id=&quot;container&quot;><div id=&quot;content&quot; class=&quot;welcome&quot;> ... </div></div> </li></ul><ul><li>Write Javascript to tell ExtJS what to do </li></ul><ul><ul><li>E.g. create layout with one panel </li></ul></ul><ul><ul><li>Note prototype object-based approach to standardise JS objects and avoid memory leaks ( http:// extjs.com/learn/Manual:Intro:Class_Design ) </li></ul></ul><ul><li><script type=&quot;text/javascript&quot;> Thescreen = function(){ return { init: function(){ var layout = new Ext.BorderLayout(document.body, { center: { autoScroll: true, minTabWidth: 50, preferredTabWidth: 150, titlebar: true } }); </li></ul><ul><li>layout.beginUpdate(); layout.add('center', new Ext.ContentPanel('content', {title:'ExtJS demo app'})); layout.endUpdate(); } } }(); Ext.EventManager.onDocumentReady(Thescreen.init, Thescreen, true); </script> </li></ul>
  12. 12. Catalyst overview <ul><li>What is Catalyst? </li></ul><ul><li>Model-View-Controller perl framework for web apps </li></ul><ul><li>Model </li></ul><ul><ul><li>data objects, business logic </li></ul></ul><ul><li>View </li></ul><ul><ul><li>HTML templates or JSON or CSV or… </li></ul></ul><ul><li>Controller </li></ul><ul><ul><li>parse request, map to action handler </li></ul></ul>
  13. 13. Catalyst overview
  14. 14. Catalyst structure <ul><li>Catalyst does most of the hard work for you </li></ul><ul><ul><li>URI parsing; map to chained handler routines </li></ul></ul><ul><ul><li>request/response objects, context setup, data stash </li></ul></ul><ul><ul><li>plugins for sessions, authentication, data stores etc. </li></ul></ul><ul><ul><li>logging, exception handling, debug </li></ul></ul><ul><ul><li>External configuration files via Config::Any </li></ul></ul><ul><ul><ul><li>YAML, Perl, … </li></ul></ul></ul><ul><ul><li>automated testing framework </li></ul></ul><ul><ul><ul><li>Test::WWW::Mechanize </li></ul></ul></ul><ul><ul><li>test server, mod_perl, FastCGI </li></ul></ul><ul><ul><li>helpers to generate new model/view/controller code $ catalyst.pl My::App $ scripts/myapp_create.pl controller My::Controller </li></ul></ul>
  15. 15. Catalyst learning <ul><li>Book by Jonathon Rockway </li></ul><ul><ul><li>http://www.packtpub.com/catalyst-perl-web-application/book </li></ul></ul><ul><li>CPAN </li></ul><ul><ul><li>http://search.cpan.org/perldoc?Catalyst::Manual </li></ul></ul><ul><li>Mailing lists </li></ul><ul><ul><li>http://lists.scsys.co.uk/mailman/listinfo/catalyst </li></ul></ul><ul><ul><li>http://lists.scsys.co.uk/mailman/listinfo/dbix-class </li></ul></ul><ul><li>IRC </li></ul><ul><ul><li>#catalyst on irc.perl.org </li></ul></ul><ul><li>Recent talk on writing a Catalyst Moose-based Wiki </li></ul><ul><ul><li>http://www.jrock.us/fp2008/catalyst/start.html </li></ul></ul>
  16. 16. Putting them together <ul><li>An example Catalyst application with ExtJS </li></ul><ul><ul><li>http://www.dragonstaff.co.uk/extjs/home </li></ul></ul><ul><li>Source code – see comments in files </li></ul><ul><li>$ svn co http://dev.catalystframework.org/repos/Catalyst/trunk/examples/ExtJS </li></ul><ul><li>Accompanying Catalyst advent calendar article </li></ul><ul><ul><li>http://catalyst.perl.org/calendar/2007/1 </li></ul></ul><ul><li>Features </li></ul><ul><ul><li>Model: SQLite database </li></ul></ul><ul><ul><li>View: Template::Toolkit templates containing Ext JS </li></ul></ul><ul><ul><li>ExtJS: layout, panels, tabs, styles, toolbar </li></ul></ul>
  17. 17. Example application
  18. 18. Example application
  19. 19. Example application
  20. 20. Conclusion <ul><li>Catalyst + ExtJS = quick easy Web 2.0 apps </li></ul><ul><li>Thank you </li></ul><ul><li>and any questions? </li></ul>Download this presentation from http://perl.dragonstaff.co.uk
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×