Upload
grgur-grisogono
View
3.398
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Nils Dehl at ModUX 2013 http://moduxcon.com
Citation preview
Sencha Touch meets TYPO3
Nils Dehl, Senior Developer / Sencha Trainer
Mail: [email protected]: mrsunshineTwitter: @nilsdehl
Sencha Touch
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, ...
TYPO3
free open source content management system (CMS)PHP basedhighly !exible and extendable
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
bene"t -> we don’t have static content in JS "les
TYPO3
Render content and pages as JSON
json_content extension for TYPO3
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>']
Make data offline available
page and content repository
contains all app related page and content records
uses of!ine store to persist data in localstorage
"lter repositories by page id
create automatically view stores
bind to views to show the data
d dkdevelopmentkommunikationdesign
thank you.
? ??