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/

mail@nils-dehl.de