sencha touch meets typo3 cms

Sencha Touch meets TYPO3

Nils Dehl, Senior Developer / Sencha Trainer

Mail: nd@dkd.deForum: 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

Demo

+

d dkdevelopmentkommunikationdesign

thank you.

? ??

@nilsdehl

slideshare.net/nilsdehl/

nd@dkd.de