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.

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, ...

8. TYPO3
free open source content management system (CMS)
PHP based
highly flexible and extendable

12. 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

13. TYPO3

14. 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

15. 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 {

16. 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 = |,
}
}
}
}
}

17. Page type for JSON pages
jsonPages < jsonCEsPage
jsonPages {
typeNum = 1001
10 {
table = pages
select {
selectFields = uid, pid, title
}
}
}

18. /index.php?id=51&type=1001
{
"success": true,
"items": [
{
"uid": "52",
"pid": "51",
"title": "History"
},
{
"uid": "53",
"pid": "51",
"title": "Community"
}
],
"total": 2
}

19. /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
}

20. Sencha Touch

21. Sencha Touch App
MVC
uses TYPO3 API to load
pages
content from a page
by page id and page type

22. Displaying Pages
Model
List View
Controller
Store

23. Model
Ext.define('T3.model.Page', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'uid',
type: 'int'
}, {
name: 'pid',
type: 'int'
}, {
name: 'title',
type: 'string'
}
]
}
});

24. 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'
}
}
}
});

25. View - List
Ext.define('T3.view.PagesList', {
extend: 'Ext.dataview.List',
config: {
store: 'Pages',
itemTpl: '{title}',
items: [
{
xtype: 'titlebar',
title: 'Pages',
docked: 'top'
}
]
}
});

26. 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);
}

27. Displaying Content Elements
Model
Data View
Controller
Store

28. 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>'
],
}
});

29. Sencha.io src cloud service
src.sencha.io
resize images
altering sizes
percentage sizing
data URLs
domain sharding

30. Template using src.sencha.io
itemTpl: [
'<tpl if="ctype == 'textpic'">',
'<tpl for="images">',
'<img src="http://src.sencha.io/{.}" />',
'</tpl>',
'</tpl>'
]

31. 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

32. Demo

33. +

34. d dkdevelopment
kommunikation
design
thank you.

35. ? ??

36. @nilsdehl
slideshare.net/nilsdehl/
nd@dkd.de