sencha touch meets typo3 cms

36
Sencha Touch meets TYPO3 Nils Dehl, Senior Developer / Sencha Trainer Mail: [email protected] Forum: mrsunshine Twitter: @nilsdehl

Upload: nils-dehl

Post on 19-May-2015

618 views

Category:

Technology


2 download

DESCRIPTION

You're tired of managing your app text and image app content inline in static JavaScript files? You'd like to reuse the content of your website in your mobile app? This session is about how to build mobile web applications with the JavaScript framework Sencha Touch and manage its content with the TYPO3 CMS. In this talk we will look into Sencha Touch development and talk about how to load dynamic content from a Content Management System. We will also look into the needed implementation on both the client app and the CMS server side. We also learn how to use cloud webservices to optimize the content for the mobile web.

TRANSCRIPT

Page 1: Sencha Touch meets TYPO3 CMS

Sencha Touch meets TYPO3

Nils Dehl, Senior Developer / Sencha Trainer

Mail: [email protected]: mrsunshineTwitter: @nilsdehl

Page 2: Sencha Touch meets TYPO3 CMS

Sencha Touch

Page 3: Sencha Touch meets TYPO3 CMS

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, ...

Page 4: Sencha Touch meets TYPO3 CMS
Page 5: Sencha Touch meets TYPO3 CMS
Page 6: Sencha Touch meets TYPO3 CMS
Page 7: Sencha Touch meets TYPO3 CMS
Page 8: Sencha Touch meets TYPO3 CMS

TYPO3

free open source content management system (CMS)PHP basedhighly !exible and extendable

Page 9: Sencha Touch meets TYPO3 CMS
Page 10: Sencha Touch meets TYPO3 CMS
Page 11: Sencha Touch meets TYPO3 CMS
Page 12: Sencha Touch meets TYPO3 CMS

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

Page 13: Sencha Touch meets TYPO3 CMS

TYPO3

Page 14: Sencha Touch meets TYPO3 CMS

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 15: Sencha Touch meets TYPO3 CMS

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 16: Sencha Touch meets TYPO3 CMS

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 17: Sencha Touch meets TYPO3 CMS

Page type for JSON pages

jsonPages < jsonCEsPagejsonPages {  typeNum = 1001

  10 {    table = pages    select {      selectFields = uid, pid, title    }   }}

Page 18: Sencha Touch meets TYPO3 CMS

/index.php?id=51&type=1001

{ "success": true, "items": [ { "uid": "52", "pid": "51", "title": "History" }, { "uid": "53", "pid": "51", "title": "Community" } ], "total": 2}

Page 19: Sencha Touch meets TYPO3 CMS

/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}

Page 20: Sencha Touch meets TYPO3 CMS

Sencha Touch

Page 21: Sencha Touch meets TYPO3 CMS

Sencha Touch App

MVC

uses TYPO3 API to load

pages

content from a page

by page id and page type

Page 22: Sencha Touch meets TYPO3 CMS

Displaying Pages

Model

List View

Controller

Store

Page 23: Sencha Touch meets TYPO3 CMS

Model

Ext.define('T3.model.Page', { extend: 'Ext.data.Model',

config: { fields: [ { name: 'uid', type: 'int' }, { name: 'pid', type: 'int' }, { name: 'title', type: 'string' } ] }});

Page 24: Sencha Touch meets TYPO3 CMS

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' } } }});

Page 25: Sencha Touch meets TYPO3 CMS

View - List

Ext.define('T3.view.PagesList', { extend: 'Ext.dataview.List',

config: { store: 'Pages', itemTpl: '{title}', items: [ { xtype: 'titlebar', title: 'Pages', docked: 'top' } ] }});

Page 26: Sencha Touch meets TYPO3 CMS

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); }

Page 27: Sencha Touch meets TYPO3 CMS

Displaying Content Elements

Model

Data View

Controller

Store

Page 28: Sencha Touch meets TYPO3 CMS

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>' ], }});

Page 29: Sencha Touch meets TYPO3 CMS

Sencha.io src cloud service

src.sencha.io

resize images

altering sizes

percentage sizing

data URLs

domain sharding

Page 30: Sencha Touch meets TYPO3 CMS

Template using src.sencha.io

itemTpl: ['<tpl if="ctype == \'textpic\'">', '<tpl for="images">', '<img src="http://src.sencha.io/{.}" />', '</tpl>','</tpl>']

Page 31: Sencha Touch meets TYPO3 CMS

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

Page 34: Sencha Touch meets TYPO3 CMS

d dkdevelopmentkommunikationdesign

thank you.

Page 35: Sencha Touch meets TYPO3 CMS

? ??

Page 36: Sencha Touch meets TYPO3 CMS

@nilsdehl

slideshare.net/nilsdehl/

[email protected]