DEFINE { Mysite, {
VIEW: { Ext JS },
MODEL: { Drupal },
STORE: { Drupal },
TITLE: “
”}};
// @Presenter: Eugene Heng
Themin...
Sencha Ext JS
• JavaScript application framework for building interactive web
applications
• Improve user interaction for ...
GUI in Sencha Ext JS
• http://www.sencha.com/products/extjs/examples/
Ext JS includes a set of GUI-based form controls (or...
Sencha Model-View-Controller (MVC) File
Structure
• Model – View – Controller (MVC)
Framework
• View: Graphical UI
• Model...
Common Setup for Drupal with Ext JS
• Ext JS as Client Side Frontend providing the GUI
• Drupal as Server Backend supplyin...
Ext JS <-> Drupal, using services module
Services
Module
MySQL
Controllers JS
?
Store 1 JS
Model JS
REST
(JSON)
Views
JS
C...
Ext Module
EXT
Module
MySQL
Controllers JS
?
Store 1 JS
Model JS
REST
(JSON)
Views
JS
Content
Type 1
Content
Type 2
CT1.js...
Ext Module Functionalities
• Loading of the Ext JS library files.
• Automatic generation of JS code for Ext Model and Stor...
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 int...
What is Next?
Extend Ext module to support Sencha Touch code
generation.
Other possible extension: Integrated with Service...
Upcoming SlideShare
Loading in …5
×

Implemeting Sencha Ext JS in Drupal

1,636
-1

Published on

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

No Downloads
Views
Total Views
1,636
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Implemeting Sencha Ext JS in Drupal

  1. 1. DEFINE { Mysite, { VIEW: { Ext JS }, MODEL: { Drupal }, STORE: { Drupal }, TITLE: “ ”}}; // @Presenter: Eugene Heng Theming Drupal with Sencha Ext JS
  2. 2. 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.
  3. 3. 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
  4. 4. 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
  5. 5. 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. Drupal Site nodes.json Dir file file file file B A C My Drupal page mysite.php Request content Request page Ext JS code
  6. 6. Ext JS <-> Drupal, using services module Services 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 Custom Module CT2.json Data 1 Data 2 Model 1 JS Model 2 JS
  7. 7. 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 Custom Module CT2.json Data 1 Data 2 Model 1 JS Model 2 JS
  8. 8. 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.
  9. 9. File Layout for Ext Module • Custom Module • Ext JS File Layout /
  10. 10. Demo
  11. 11. 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?
  12. 12. What is Next? Extend Ext module to support Sencha Touch code generation. Other possible extension: Integrated with Services API?

×