Agile Applications with ExtJS & Zend Framework

Agile
Applications
with ExtJS & Zend Framework
Chris Cornutt - Dutch PHP Conference 2012
https://github.com/enygma/Agile-ExtJS-ZF
Thursday, June 7, 2012

View Slide

The ExtJS
Framwork

View Slide

“Ext JS 4 is a pure JavaScript
application framework that works
everywhere from IE6 to Chrome 11. It
enables you to create the best cross-
platform applications using nothing
but a browser, and has a phenomenal
API.”
- sencha.com

View Slide

What it Is
A full-stack Javascript framework
Complete with widgets, MVC & event
handling
Large

View Slide

What it Isn’t
Easy to learn
Bug free
Lightweight

View Slide

Key Parts
Controllers
Views
Models
Stores
(of MVC)

View Slide

In the Box
Event handling
Auto-loading (lazy)
Generated DOM
Theming via CSS/LESS

View Slide

Widgets
Toolbar
Menus
Date/color Pickers
Multiple Layout Types
Data Grids
Charting
Form Handling
Data Tree
...among others.

View Slide

Widgets - Toolbar/Menu
Can be used either as a generic container
or as a true “toolbar”

View Slide

Widgets - Pickers
Opens popup for “picker” element, built-in
are color & date.

View Slide

Widgets - Data Grid
Most used widget type, provides much
more than just row display.

View Slide

Widgets - Charting
Types of Graphs:
- Bar
- Line
- Pie
- Gauge
- Radar
- Scatter
- Series

View Slide

Widgets - Tree

View Slide

Widgets - Forms

View Slide

Layout Types
Absolute
Accordion
Anchor
Border
Card
Column
Fit
Table
Vbox
Hbox
Absolutely positioned elements
Panels that slide in and out
Items are “anchored” to the parent ‘s sides
Regions are assigned and ﬁlled (N/S/E/W)
Tab panel or Wizard using “card” panels
Columns of elements
Elements ﬁt to the size of the parent
Rows and cells
Items aligned vertically
Items aligned horizontally

View Slide

Controllers
Extends “Ext.app.Controller”
Loads for models, views and stores
init()
Handles actions
“Controllers are the glue that binds an application together. All they really
do is listen for events (usually from views) and take some action.”

View Slide

Example - Controller
Ext.define(‘example.controller.Index’, {
extend: ‘Ext.app.Controller’,
models: [
‘User’
],
stores: [
‘index.User’
],
views: [
‘Userlist’
],
init: function() {
console.log(‘Init controller!’);
}
});

View Slide

Controllers
init()
control()
refs
getter/setters
Common Methods/Properties

View Slide

Ext.define(‘example.controller.Index’, {
extend: ‘Ext.app.Controller’,
refs: [
{
ref: ‘list’,
selector: ‘grid’
}
],
models: [
‘User’
],
stores: [
‘index.User’
],
views: [
‘Userlist’
],
init: function() {
console.log(‘Init controller!’);
this.control({
‘button’: { click: this.refreshGrid }
});
},
refreshGrid: function() {
this.getList().store.load();
}
});

View Slide

Model
Extends “Ext.data.Model”
Defines fields and their types
Can have methods of its own
Setting validations
“A Model represents some object that your application manages. For
example, one might define a Model for Users, Products, Cars, or any other
real-world object that we want to model in the system. Models are
registered via the model manager, and are used by stores, which are in
turn used by many of the data-bound components in Ext.”

View Slide

Example - Model
Ext.define(‘example.model.Message’, {
extend: ‘Ext.data.Model’,
fields: [
{ name: ‘message’, type: ‘string’ },
{ name: ‘username’, type: ‘string’ },
{ name: ‘id’, type: ‘int’ }
]
initComponent: function() {
console.log(‘Init Message model!’);
this.callParent(arguments);
}
});

View Slide

Models
ﬁelds
validations (and validate)
belongsTo/hasMany/associations
proxy
Common Methods/Properties

View Slide

Store
Extends “Ext.data.Store”
Client-side data resource
Data set locally or through a Proxy
AutoLoad/AutoSync
“The Store class encapsulates a client side cache of Model objects. Stores
load data via a Proxy, and also provide functions for sorting, ﬁltering and
querying the model instances contained within it.”

View Slide

Example - Store
Ext.define(‘example.store.User’, {
extend: ‘Ext.data.Store’,
model: ‘example.model.User’,
console.log(‘Init User store!’);
}
});

View Slide

Views
Extends whatever panel/widget type you need
Can be aliased
initComponent
Nested views/widgets
“The View uses an Ext.XTemplate as its internal templating mechanism,
and is bound to an Ext.data.Store so that as the data in the store changes
the view is automatically updated to reﬂect the changes. The view also
provides built-in behavior for many common events that can occur for its
contained items including click, doubleclick, mouseover, mouseout, etc. as
well as a built-in selection model.”

View Slide

Example - View
Ext.define(‘example.view.index.Buttons’, {
extend: ‘Ext.Panel’,
alias: ‘widget.buttonpanel’,
items: [
{
xtype: ‘button’,
text: ‘Click Me!’,
handler: function() {
}
}
],
console.log(‘Init User store!’);
}
});

View Slide

The Zend
Framework

View Slide

Controllers
Types: Front, Action, Router_Rewrite,
Dispatcher_Standard
Augmented by “action helpers”
init(), preDispatch() methods run ﬁrst
Accessors for request, parameters, arguments
“The Zend_Controller system is designed to be lightweight, modular,
and extensible. It is a minimalist design to permit ﬂexibility and some
freedom to users while providing enough structure so that systems
built around Zend_Controller share some common conventions and
similar code layout.”

View Slide

class ExampleController extends Zend_Controller_Action
{
public function init()
{
// called at controller object create
}
public function indexAction()
{
// called when request is “/example/index”
}
}
?>

View Slide

Model
Open ended for your interface
Can use things like Zend_Db_Table
...or Doctrine
Relationships (_dependentTables,
_referenceMap)
“The model captures the domain logic of the application — those
actions a user might want to request — with a strong separation from
the way that the user requests them and sees the results.”

View Slide

Example - Model
class Application_Model_Chatmessage extends Zend_Db_Table_Abstract
{
protected $_name = ‘chat_messages’;
public function init()
{
// called when object is created
}
public function getLatest($limit=10)
{
// get 10 latest chat messages
}
}
?>

View Slide

View
“View helpers”
Partials
Work with template engines (like Twig)
“Views deﬁne exactly what is presented to the user. Usually controllers
pass data to each view to render in some format. Views will often
collect data from the user, as well. This is where you're likely to ﬁnd
HTML markup in your MVC applications.”

View Slide

Example - View

My Application

output; ?>


View Slide

Zend + Ext JS

View Slide

ZF Controller
Ext Controller
ZF View
Ext Store
Ext View
ZF Model
Ext Model
ZF Data Source

View Slide

The usual stuff is easy...
Custom plugins (like a RowExpander)
HTML5 Features (File drag, local storage, form
ﬁelds)
Still need Javascript knowledge
In Ext JS...

View Slide

Can be over-complicated
Very ﬂexible (both good and bad?)
Don’t expect a “do it all for me” framework
Single-page versus Multiple Pages?
In Zend Framework...

View Slide

Example Time!

View Slide

Creating a basic application
Setting up a Model and Store
Widget Examples
Working with Layouts
Grids & Database Backend
Simple User System
Unit Testing with Jasmine
Advanced App - Real-time Chat

View Slide

To the Cloud...er
Code!

View Slide

Chris Cornutt
@enygma
@phpdeveloper / @phpquickfix
https://joind.in/6220
Thanks!

View Slide

Agile Applications with ExtJS & Zend Framework

Agile Applications with ExtJS & Zend Framework

Chris Cornutt

More Decks by Chris Cornutt

Other Decks in Technology

Featured

Transcript