Implemeting Sencha Ext JS in Drupal
- 1. DEFINE { Mysite, { VIEW: { Ext JS }, MODEL: { Drupal }, STORE: { Drupal }, TITLE: “ ”}}; // @Presenter: Eugene Heng Theming Drupal with Sencha Ext JS
- 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. 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. 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. 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. 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. 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. 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. File Layout for Ext Module • Custom Module • Ext JS File Layout /
- 10. Demo
- 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. What is Next? Extend Ext module to support Sencha Touch code generation. Other possible extension: Integrated with Services API?