Sencha Touch meets TYPO3 CMS

How to build mobile web applications with the JavaScript Framework Sencha Touch and feed it with content from TYPO3.
After a introduction to Sencha Touch we will showcase some apps we builded.
On a example we will talk about how to develop Sencha Touch applications. See how we can feed the app with content from TYPO3 and use a cloud service to optimize content images for mobile devices.

Transcript

1. Sencha Touch meets TYPO3 Nils Dehl, Senior Developer / Trainer Twitter: @nilsdehl
2. Agenda About me Introduce Sencha Touch TYPO3 meets Sencha Touch Demo TYPO3 side Sencha Touch side Demo
3. Nils Dehl Senior Developer Trainer Sencha Meetup Frankfurt Conference Talks Sencha Forum: mrsunshine @nilsdehl
4. dkd Internet Service GmbH We plan build run complex Websites based on TYPO3 CMS specialized also in Ruby on Rails Sencha Touch / ExtJS
5. Sencha Touch 2
6. Sencha Touch 2 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, ...
14. TYPO3 meets Sencha Touch
15. TYPO3 meets Sencha Touch manage content in TYPO3 menu‘s from pages content text text + image news display content in mobile Sencha Touch web application
16. Demo
17. TYPO3
18. Render JSON Content json_content extension registers a new cObject type JSON_CONTENT con gured by TypoScript used in custom page types renders content as JSON object optional JSONP wrap for cross domain api calls
19. 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 {
20. 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 = |, } } } } }
21. Page type for JSON pages jsonPages < jsonCEsPage jsonPages { typeNum = 1001 10 { table = pages select { selectFields = uid, pid, title } } }
22. /index.php?id=51&type=1001 { "success": true, "items": [ { "uid": "52", "pid": "51", "title": "History" }, { "uid": "53", "pid": "51", "title": "Community" } ], "total": 2 }
23. /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 }
24. Sencha Touch
25. Sencha Touch App MVC uses TYPO3 API to load Pages Content from a page by page id and page type
26. Displaying Pages Model List View Controller Store
27. Model Ext.define('T3.model.Page', { extend: 'Ext.data.Model', config: { fields: [ { name: 'uid', type: 'int' }, { name: 'pid', type: 'int' }, { name: 'title', type: 'string' } ] } });
28. 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' } } } });
29. View - List Ext.define('T3.view.PagesList', { extend: 'Ext.dataview.List', config: { store: 'Pages', itemTpl: '{title}', items: [ { xtype: 'titlebar', title: 'Pages', docked: 'top' } ] } });
30. 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); }
31. Displaying Content Elements Model Data View Controller Store
32. 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>' ], } });
33. Sencha.io src cloud service src.sencha.io resize images altering sizes percentage sizing data URLs domain sharding
34. Template using src.sencha.io itemTpl: [ '<tpl if="ctype == \'textpic\'">', '<tpl for="images">', '<img src="http://src.sencha.io/{.}" />', '</tpl>', '</tpl>' ]
35. Demo
36. +
37. d d k development kommunikation design thank you.
38. ? ? ?
39. @nilsdehl flickr.com/photos/nils-dehl/ mail@nils-dehl.de