Sencha Touch meets TYPO3Nils Dehl, Senior Developer / TrainerTwitter: @nilsdehl
Agenda About me Introduce Sencha Touch TYPO3 meets Sencha Touch  Demo  TYPO3 side  Sencha Touch side  Demo
Nils Dehl Senior Developer Trainer Sencha Meetup Frankfurt Conference Talks Sencha Forum: mrsunshine @nilsdehl
dkd Internet Service GmbH We   plan   build   run   complex Websites based on TYPO3 CMS specialized also in   Ruby on Rail...
Sencha Touch 2
Sencha Touch 2 HTML5 mobile application framework works on iOS, Android, BlackBerry, Kindle Fire, ... Features   Smoother ...
TYPO3   meetsSencha Touch
TYPO3 meets Sencha Touch manage content in TYPO3   menu‘s from pages   content     text     text + image     news display ...
Demo
TYPO3
Render JSON Content json_content extension registers a new cObject type JSON_CONTENT configured by TypoScript used in cust...
Page type for JSON CE‘s    jsonCEsPage = PAGEjsonCEsPage {  typeNum = 1000     config {    additionalHeaders = Content-typ...
Page type for JSON CE‘s         fieldRendering {        image {                    split{            token =,            c...
Page type for JSON pages  jsonPages < jsonCEsPagejsonPages {  typeNum = 1001  10 {    table = pages    select {      selec...
/index.php?id=51&type=1001    {        "success": true,        "items": [            {                "uid": "52",        ...
/index.php?id=53&type=1000{    success: true,    items: [        {             uid: "213",             pid: "53",         ...
Sencha Touch
Sencha Touch App MVC uses TYPO3 API to load   Pages   Content from a page   by page id and page type
Displaying Pages Model List View Controller Store
Model    Ext.define(T3.model.Page, {	   extend: Ext.data.Model,	 config: {	 	 fields: [	 	 	 {	 	 	 	 name:     uid,	 	 	 ...
Store   Ext.define(T3.store.Pages, {	 extend: Ext.data.Store,	 config: {	 	 model: T3.model.Page,	 	 proxy: {	 	 	 type: j...
View - List    Ext.define(T3.view.PagesList, {	   extend: Ext.dataview.List,	 config: {	 	 store: Pages,	 	 itemTpl: {titl...
Controller    Ext.define(T3.controller.Pages, {	   extend: Ext.app.Controller,	   config: {	   	 refs: {	   	 	 contentVie...
Displaying Content Elements Model Data View Controller Store
DataView render CE‘s    Ext.define(T3.view.ContentList, {	   extend: Ext.dataview.DataView,	  config: {	  	 store: Content...
Sencha.io src cloud service src.sencha.io resize images   altering sizes   percentage sizing data URLs domain sharding
Template using src.sencha.ioitemTpl: [<tpl if="ctype == textpic">,	 <tpl for="images">,    <img src="http://src.sencha.io/...
Demo
+
dkd     development     kommunikation     designthank you.
???
mail@nils-dehl.de       @nilsdehlflickr.com/photos/nils-dehl/
Sencha Touch meets TYPO3
Sencha Touch meets TYPO3
Sencha Touch meets TYPO3
Sencha Touch meets TYPO3
Sencha Touch meets TYPO3
Sencha Touch meets TYPO3
Sencha Touch meets TYPO3
Upcoming SlideShare
Loading in …5
×

Sencha Touch meets TYPO3

2,169 views
2,057 views

Published on

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.

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

No Downloads
Views
Total views
2,169
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sencha Touch meets TYPO3

  1. 1. Sencha Touch meets TYPO3Nils Dehl, Senior Developer / TrainerTwitter: @nilsdehl
  2. 2. Agenda About me Introduce Sencha Touch TYPO3 meets Sencha Touch Demo TYPO3 side Sencha Touch side Demo
  3. 3. Nils Dehl Senior Developer Trainer Sencha Meetup Frankfurt Conference Talks Sencha Forum: mrsunshine @nilsdehl
  4. 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. 5. Sencha Touch 2
  6. 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, ...
  7. 7. TYPO3 meetsSencha Touch
  8. 8. 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
  9. 9. Demo
  10. 10. TYPO3
  11. 11. Render JSON Content json_content extension 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
  12. 12. Page type for JSON CE‘s jsonCEsPage = PAGEjsonCEsPage {  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 {
  13. 13. 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 = |,          }        }      }    }  }
  14. 14. Page type for JSON pages jsonPages < jsonCEsPagejsonPages {  typeNum = 1001  10 {    table = pages    select {      selectFields = uid, pid, title    }  }}
  15. 15. /index.php?id=51&type=1001 { "success": true, "items": [ { "uid": "52", "pid": "51", "title": "History" }, { "uid": "53", "pid": "51", "title": "Community" } ], "total": 2}
  16. 16. /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}
  17. 17. Sencha Touch
  18. 18. Sencha Touch App MVC uses TYPO3 API to load Pages Content from a page by page id and page type
  19. 19. Displaying Pages Model List View Controller Store
  20. 20. Model Ext.define(T3.model.Page, { extend: Ext.data.Model, config: { fields: [ { name: uid, type: int }, { name: pid, type: int }, { name: title, type: string } ] }});
  21. 21. 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 } } }});
  22. 22. View - List Ext.define(T3.view.PagesList, { extend: Ext.dataview.List, config: { store: Pages, itemTpl: {title}, items: [ { xtype: titlebar, title: Pages, docked: top } ] }});
  23. 23. 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); }
  24. 24. Displaying Content Elements Model Data View Controller Store
  25. 25. 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> ], }});
  26. 26. Sencha.io src cloud service src.sencha.io resize images altering sizes percentage sizing data URLs domain sharding
  27. 27. Template using src.sencha.ioitemTpl: [<tpl if="ctype == textpic">, <tpl for="images">, <img src="http://src.sencha.io/{.}" />, </tpl>,</tpl>]
  28. 28. Demo
  29. 29. +
  30. 30. dkd development kommunikation designthank you.
  31. 31. ???
  32. 32. mail@nils-dehl.de @nilsdehlflickr.com/photos/nils-dehl/

×