Upload
drupalsydney
View
1.794
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
DEFINE { Mysite, {VIEW: { Ext JS },MODEL: { Drupal },STORE: { Drupal },TITLE: “
”}};
// @Presenter: Eugene Heng
Theming Drupal with
Sencha Ext JS
Sencha Ext JS
• JavaScript application framework for building interactive web applications
• Improve user interaction for your website by providing attractive graphical interface.
• Complement to core Drupal Theming: some of the graphical Interfaces (“widgets”) are not provided by Drupal core.
• From same organisation creating Sencha Touch.
GUI in Sencha Ext JS
• http://www.sencha.com/products/extjs/examples/
Ext JS includes a set of GUI-based form controls (or "widgets") for use within web applications:• text field and textarea input controls• date fields with a pop-up date-picker• numeric fields• list box and combo boxes• radio and checkbox controls• html editor control• grid control (with both read-only and edit modes, sortable data, lockable and
draggable columns, and a variety of other features)• tree control• tab panels• toolbars• desktop application-style menus• region panels to allow a form to be divided into multiple sub-sections• sliders• vector graphics charts
- “Ext JS” from Wikipedia
Sencha Model-View-Controller (MVC) File Structure
• Model – View – Controller (MVC) Framework
• View: Graphical UI
• Model: Data Structure
• Store: Data Source
• Controller: Logic
• http://docs.sencha.com/extjs/4.2.1/#!/guide/application_architecture
Common Setup for Drupal with Ext JS
• Ext JS as Client Side Frontend providing the GUI
• Drupal as Server Backend supplying the content
• Drupal page can be embedded within Ext JS Panel as HTML page.
DrupalSite
nodes.json
Dir
file
file
file
file
B
A
C
My Drupal pagemysite.php
Request content
Request page
Ext JS code
Ext JS <-> Drupal, using services module
ServicesModule
MySQL
Controllers JS
?
Store 1 JS
Model JS
REST (JSON) Views JS
Content Type 1
Content Type 2
CT1.json
?
Store 2 JS
B
A
C
Dir
file
file
file
file
CustomModule
CT2.json
Data 1
Data 2
Model 1 JS
Model 2 JS
Ext Module
EXT Module
MySQL
Controllers JS
?
Store 1 JS
Model JS
REST (JSON) Views JS
Content Type 1
Content Type 2
CT1.json
?
Store 2 JS
B
A
C
Dir
file
file
file
file
CustomModule CT2.json
Data 1
Data 2
Model 1 JS
Model 2 JS
Ext Module Functionalities
• Loading of the Ext JS library files.
• Automatic generation of JS code for Ext Model and Store definitions.
• A RESTful services API providing Create, Read, Update and Delete (CRUD) operations for all Models and Stores.
• Generation of MVC JS files according to JS files structure declared in custom module.
File Layout for Ext Module
• Custom Module
• Ext JS File Layout
/
Demo
Questions
• Do I need Ext JS on my Drupal site?
• Is Drupal Ext Module necessary for my site?
• How easy will it be to integrate Ext JS on my Drupal site?
• I am a Drupal developer, what other tools do I require?
What is Next?Extend Ext module to support Sencha Touch code generation.
Other possible extension: Integrated with Services API?