1
|
- An introduction to ExtJS and Catalyst
- Perl Mova conference 2008
- Kyiv, Ukraine
- Peter Edwards, Dragonstaff Ltd.
|
2
|
- 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
|
- ExtJS overview
- Catalyst overview
- Putting them together
- Conclusion
|
4
|
- 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
|
- Works with other Javascript libraries
- YUI, JQuery, Prototype for legacy code
|
6
|
|
7
|
- Data grid
- sort
- columns
- editable
- data
source
|
8
|
|
9
|
|
10
|
- 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
|
- 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
|
- 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
|
|
14
|
- 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
- automated testing framework
- 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
|
- 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
|
- 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
|
|
18
|
|
19
|
|
20
|
- Catalyst + ExtJS = quick easy Web 2.0 apps
- Thank you
- and any questions?
|