Sencha Touch meets TYPO3 CMS

822 views

Published on

You're tired of managing your app text and image app content inline in static JavaScript files? You'd like to reuse the content of your website in your mobile app? This session is about how to build mobile web applications with the JavaScript framework Sencha Touch and manage its content with the TYPO3 CMS.

In this talk we will look into Sencha Touch development and talk about how to load dynamic content from a Content Management System.

We will also look into the needed implementation on both the client app and the CMS server side. We also learn how to use cloud webservices to optimize the content for the mobile web.

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

  • Be the first to like this

No Downloads
Views
Total views
822
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sencha Touch meets TYPO3 CMS

  1. 1. Sencha Touch meets TYPO3 Nils Dehl, Senior Developer / Sencha Trainer Mail: nd@dkd.de Forum: mrsunshine Twitter: @nilsdehl
  2. 2. Sencha Touch
  3. 3. Sencha Touch HTML5 mobile application framework works on iOS, Android, BlackBerry, Kindle Fire, ... Features Smoother Scrolling and Animations Adaptive Layouts Native Packaging Components: Lists, Dataviews, Toolbars, Charts, ...
  4. 4. TYPO3 free open source content management system (CMS) PHP based highly flexible and extendable
  5. 5. TYPO3 meets Sencha Touch manage content in TYPO3 generate menu‘s from pages content: text + image, news, products display content in mobile Sencha Touch app benefit -> we don’t have static content in JS files
  6. 6. TYPO3
  7. 7. Render content and pages as JSON json_content extension for TYPO3 registers a new cObject type JSON_CONTENT configured by TypoScript used in custom page types renders content as JSON object optional JSONP wrap for cross domain api calls
  8. 8. Page type for JSON CE‘s jsonCEsPage = PAGE jsonCEsPage {   typeNum = 1000       config {     additionalHeaders = Content-type:application/json     disableAllHeaderCode = 1     xhtml_cleaning = 0     admPanel = 0     debug = 0     tx_realurl_enable = 0     absRefPrefix = http://typo3.local/typo3senchatouch/   }      10 = JSON_CONTENT   10 {     table = tt_content     select {       selectFields = uid, pid, CType, header, bodytext, image     }     fieldRendering {
  9. 9. Page type for JSON CE‘s fieldRendering {       image {                  split{           token =,           cObjNum = 1           1 = COA           1 {             5 = IMG_RESOURCE             5 {               file{                 import.current = 1                 import = uploads/pics/               }             }             wrap = |,           }         }       }     }   }
  10. 10. Page type for JSON pages jsonPages < jsonCEsPage jsonPages {   typeNum = 1001   10 {     table = pages     select {       selectFields = uid, pid, title     }   } }
  11. 11. /index.php?id=51&type=1001 { "success": true, "items": [ { "uid": "52", "pid": "51", "title": "History" }, { "uid": "53", "pid": "51", "title": "Community" } ], "total": 2 }
  12. 12. /index.php?id=53&type=1000 { success: true, items: [ { uid: "213", pid: "53", CType: "text", header: "TYPO3: Inspiring People to Share", bodytext: "The real driving force behind TYPO3’s development is its expanding,...", image: null }, { uid: "214", pid: "53", CType: "textpic", header: "Community Events", bodytext: "There are a number of recurring TYPO3 events and conferences. ...", image: "uploads/pics/team-t3board10.jpg," } ], total: 2 }
  13. 13. Sencha Touch
  14. 14. Sencha Touch App MVC uses TYPO3 API to load pages content from a page by page id and page type
  15. 15. Displaying Pages Model List View Controller Store
  16. 16. Model Ext.define('T3.model.Page', { extend: 'Ext.data.Model', config: { fields: [ { name: 'uid', type: 'int' }, { name: 'pid', type: 'int' }, { name: 'title', type: 'string' } ] } });
  17. 17. Store Ext.define('T3.store.Pages', { extend: 'Ext.data.Store', config: { model: 'T3.model.Page', proxy: { type: 'jsonp', extraParams: { id: 51, type: 1001 }, url: 'http://typo3.local/typo3senchatouch/', reader: { type: 'json', idProperty: 'uid', rootProperty: 'items' } } } });
  18. 18. View - List Ext.define('T3.view.PagesList', { extend: 'Ext.dataview.List', config: { store: 'Pages', itemTpl: '{title}', items: [ { xtype: 'titlebar', title: 'Pages', docked: 'top' } ] } });
  19. 19. Controller Ext.define('T3.controller.Pages', { extend: 'Ext.app.Controller', config: { refs: { contentView: 'contentlist' }, control: { 'pageslist': { itemtap: 'onPageItemTap' } } }, onPageItemTap: function(list, index, target, record) { var store = Ext.getStore('Content'), proxy = store.getProxy(), view = this.getContentView(), parentView = view.up('container'); proxy.setExtraParam( 'id', record.get('uid')); store.load(); view.down('titlebar').setTitle(record.get('title')); parentView.setActiveItem(view); }
  20. 20. Displaying Content Elements Model Data View Controller Store
  21. 21. DataView render CE‘s Ext.define('T3.view.ContentList', { extend: 'Ext.dataview.DataView', config: { store: 'Content', styleHtmlContent: true, itemTpl: [ '<div class="ce">', ' <h1>{header}</h1>', ' <div class="bodytext">{bodytext}</div>', ' <div class="images">', ' <tpl if="ctype == 'textpic'">', ' <tpl for="images">', ' <img href="http://src.sencha.io/{.}" alt="" />', ' </tpl>', ' </tpl>', ' </div>', '</div>' ], } });
  22. 22. Sencha.io src cloud service src.sencha.io resize images altering sizes percentage sizing data URLs domain sharding
  23. 23. Template using src.sencha.io itemTpl: [ '<tpl if="ctype == 'textpic'">', '<tpl for="images">', '<img src="http://src.sencha.io/{.}" />', '</tpl>', '</tpl>' ]
  24. 24. Make data offline available page and content repository contains all app related page and content records uses offline store to persist data in localstorage filter repositories by page id create automatically view stores bind to views to show the data
  25. 25. Demo
  26. 26. +
  27. 27. d dkdevelopment kommunikation design thank you.
  28. 28. ? ??
  29. 29. @nilsdehl slideshare.net/nilsdehl/ nd@dkd.de

×