• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 Implemeting Sencha Ext JS in Drupal
 

Implemeting Sencha Ext JS in Drupal

on

  • 1,314 views

 

Statistics

Views

Total Views
1,314
Views on SlideShare
1,314
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

     Implemeting Sencha Ext JS in Drupal Implemeting Sencha Ext JS in Drupal Presentation Transcript

    • 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. Drupal Site nodes.json Dir file file file file B A C My Drupal page mysite.php Request content Request page Ext JS code
    • 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
    • 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
    • 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?