Sencha Touch meets TYPO3
Upcoming SlideShare
Loading in...5
×
 

Sencha Touch meets TYPO3

on

  • 2,087 views

How to build mobile web applications with the JavaScript Framework Sencha Touch and feed it with content from TYPO3. ...

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.

Statistics

Views

Total Views
2,087
Views on SlideShare
2,077
Embed Views
10

Actions

Likes
1
Downloads
11
Comments
0

2 Embeds 10

https://twitter.com 7
https://si0.twimg.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sencha Touch meets TYPO3 Sencha Touch meets TYPO3 Presentation Transcript

  • Sencha Touch meets TYPO3Nils Dehl, Senior Developer / TrainerTwitter: @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 meetsSencha 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 configured 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.ioitemTpl: [<tpl if="ctype == textpic">, <tpl for="images">, <img src="http://src.sencha.io/{.}" />, </tpl>,</tpl>]
  • Demo
  • +
  • dkd development kommunikation designthank you.
  • ???
  • mail@nils-dehl.de @nilsdehlflickr.com/photos/nils-dehl/