Upload
nils-dehl
View
1.875
Download
8
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
Sencha Touch meets TYPO3
Nils Dehl, Senior Developer / Trainer
Twitter: @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 Rails
Sencha Touch / ExtJS
Sencha Touch 2
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, ...
TYPO3 meets
Sencha Touch
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
Demo
TYPO3
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
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 {
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 = |, } } } } }
Page type for JSON pages
jsonPages < jsonCEsPagejsonPages { typeNum = 1001
10 { table = pages select { selectFields = uid, pid, title } }}
/index.php?id=51&type=1001
{ "success": true, "items": [ { "uid": "52", "pid": "51", "title": "History" }, { "uid": "53", "pid": "51", "title": "Community" } ], "total": 2}
/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}
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', type: 'int' }, { name: 'pid', type: 'int' }, { name: 'title', type: 'string' } ] }});
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' } } }});
View - List
Ext.define('T3.view.PagesList', { extend: 'Ext.dataview.List',
config: { store: 'Pages', itemTpl: '{title}', items: [ { xtype: 'titlebar', title: 'Pages', docked: 'top' } ] }});
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); }
Displaying Content Elements
Model
Data View
Controller
Store
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>' ], }});
Sencha.io src cloud service
src.sencha.io
resize images
altering sizes
percentage sizing
data URLs
domain sharding
Template using src.sencha.io
itemTpl: ['<tpl if="ctype == \'textpic\'">', '<tpl for="images">', '<img src="http://src.sencha.io/{.}" />', '</tpl>','</tpl>']
Demo
d dkdevelopmentkommunikationdesign
thank you.
? ??
@nilsdehl
flickr.com/photos/nils-dehl/