Sencha Touch Meets TYPO3 CMS

  • 3,231 views
Uploaded on

Nils Dehl at ModUX 2013 …

Nils Dehl at ModUX 2013
http://moduxcon.com

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,231
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Sencha Touch meets TYPO3 Nils Dehl, Senior Developer / Sencha Trainer Mail: nd@dkd.de Forum: mrsunshine Twitter: @nilsdehl
  • 2. Sencha Touch
  • 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. TYPO3 free open source content management system (CMS) PHP based highly flexible and extendable
  • 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. TYPO3
  • 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. 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. 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. Page type for JSON pages jsonPages < jsonCEsPage jsonPages {   typeNum = 1001   10 {     table = pages     select {       selectFields = uid, pid, title     }   } }
  • 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. /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. Sencha Touch
  • 14. Sencha Touch App MVC uses TYPO3 API to load pages content from a page by page id and page type
  • 15. Displaying Pages Model List View Controller Store
  • 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. 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. View - List Ext.define('T3.view.PagesList', { extend: 'Ext.dataview.List', config: { store: 'Pages', itemTpl: '{title}', items: [ { xtype: 'titlebar', title: 'Pages', docked: 'top' } ] } });
  • 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. Displaying Content Elements Model Data View Controller Store
  • 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. Sencha.io src cloud service src.sencha.io resize images altering sizes percentage sizing data URLs domain sharding
  • 23. Template using src.sencha.io itemTpl: [ '<tpl if="ctype == 'textpic'">', '<tpl for="images">', '<img src="http://src.sencha.io/{.}" />', '</tpl>', '</tpl>' ]
  • 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. Demo
  • 26. +
  • 27. d dkdevelopment kommunikation design thank you.
  • 28. ? ??
  • 29. @nilsdehl slideshare.net/nilsdehl/ nd@dkd.de