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.

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
configured 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. dkd
development
kommunikation
design
thank you.

38. ???

39. mail@nils-dehl.de
@nilsdehl
flickr.com/photos/nils-dehl/