Typ3 and Flex bridge

1. „Waiting to start“-Folie
Die wird vor der Präsentation
gezeigt.
Vielleicht ein Waschsalon. Eine
Waschmaschine, die sich dreht?
Source: nplus - any given saturday (afternoon) http://www.youtube.com/watch?v=QrDsoj61bZc

2. Building bridges between AS3 & Typo3.

3. Building bridges between AS3 & Typo3.
‣ Studied MediaDesign at Bauhaus University in Weimar
‣ Founded wwsc Märkte & Medien GmbH in Y2K
‣ Today: Eight co-workers/each mad for T3 and AS3

4. Building bridges between AS3 & Typo3.
Table of contents
1. Introduction
2. How it works
3. Real world example
4. Short Demo/Code example of a AS3-Project
5. Timetable
6. Discussion

5. Building bridges between AS3 & Typo3.
Introduction

6. Building bridges between AS3 & Typo3.
Introduction
Expected aud ience for this talk:
• Intermediate Typo3-User with some
ActionScript3-Experience

7. Building bridges between AS3 & Typo3.
Introduction
This talk:
• What this talk is not about:
(Flash vs. HTML(5) vs. SEO vs. Accesibility)

8. Building bridges between AS3 & Typo3.
Introduction
e best of both worlds.
So metimes you want th
• A rich user interface (RIA)
• You want to provide access to widgets, etc
• A persistent CMS
• A backup HTML for SEO/ etc.

9. Building bridges between AS3 & Typo3.
Introduction
„Typ o3 is a great framework to
mana ge any kind o f content !“

10. Building bridges between AS3 & Typo3.
Introduction
t:
Our great goal is to provide a library tha
• Provides a fast access to T3-Contents
• Comes with support for the main extension (e.g.
tt_news)
• Is able to expand own AS3-Classes with T3-DB-Support
• Uses as many T3-Functions as possible

11. Building bridges between AS3 & Typo3.
How it works

12. Building bridges between AS3 & Typo3.
What you need
• Download the getting started package
• A working Typo3-setup with the t3flex-T3Ext installed
• You might want to setup permissions in Typo3
• Include T3Flex-Library (AS3-swc) in your Flex-Project

13. Building bridges between AS3 & Typo3.
What you get
• Access to your T3-Datastructures in AS3-Projects
(CRUD)
• Easy-to-learn syntax (incl. ASDoc)
• UserRights can be set over FrontEnd-User-Rights
and T3-Setup
• A lot of Typo3-Objects are translated to AS3-Classes

14. Building bridges between AS3 & Typo3.
How it works
T3Flex-Brigde
Communication via XML and HTTP-Requests
T3Flex Extension T3Flex-Library (swc)
ToDo‘s What you get
e.g.:
• install extension Access to classes for
/pages
include the ext-Temp
late tt_content/fe_user/tv
•
• (setup access rights)

15. Building bridges between AS3 & Typo3.
AS3-Classes
public class T3Flex t3Standards (extensions)
T3Configuration T3DbElement tt_news
T3FlexEvents T3tt_content cal
Bulkloader T3Fe_User TemplaVoilá
DataService T3Image
DB-Helper T3Pages
T3Pagetree

16. Building bridges between AS3 & Typo3.
Basic syntax
public class T3Flex t3Standards (extensions)
T3DbElement
T3obj.getChildren(callBack:Function)
T3obj.getChildFromUid(uid:uint,callBack:Function)
T3obj.updateRecord(callBack:Function)
T3obj.updateOneDataField(callBack:Function)
T3obj.addARelation(class:Class,callBack:Function)
T3obj.removeRecord(callBack:Function)

17. Building bridges between AS3 & Typo3.
Handle MM-Relations
// class T3tt_news extends T3DbElement
// load all tt_news with given category UID
function getAllNewsOfCatUid(newsCatId:uint, callBack:Function):void
{
this.uid= newsCatId;! !
this.fields.SELECT_FOREIGN_TABLE = true;
this.fields.FOREIGN_TABLE = "tt_news";
fields.SELECT_MM_COLUMN="category";
var myDbHelper:DbHelper = new DbHelper;
! myDbHelper.SELECT_MM_CLASS= T3tt_news;
! ! !
myDbHelper.getMMForUid(this,callBack);
}

18. Building bridges between AS3 & Typo3.
Complex SQL-Queries

19. Building bridges between AS3 & Typo3.
Complex SQL-Queries

20. Building bridges between AS3 & Typo3.
Complex SQL-Queries
// class myProjects.as
// load all Projects including AREA from DB
// AREAS are a MM-Relation in Typo3
private function getAllProjectsWithAreas():void
{
// create T3DBObject to define the uid of query
var myStoredQuery:T3DBElement = new T3DBElement();
myStoredQuery.uid = 2;
// send request to T3Flex
var t3FlexDbHelper:DbHelper = new DbHelper();
t3FlexDbHelper.getStoredQuery
(myStoredQuery,callback);
}

21. Building bridges between AS3 & Typo3.
Complex SQL-Queries
// class myProjects.as
// load all Projects including AREA from DB
// AREAS are a MM-Relation in Typo3
private function getAllProjectsWithAreas():void
{
// create T3DBObject to define the uid of query
var myStoredQuery:T3DBElement = new T3DBElement();
myStoredQuery.uid = 2;
// send request to T3Flex
var t3FlexDbHelper:DbHelper = new DbHelper();
t3FlexDbHelper.getStoredQuery
(myStoredQuery,callback);
}
!

22. Building bridges between AS3 & Typo3.
Examples

23. Building bridges between AS3 & Typo3.
Landesentwicklungsgesellschaft Thüringen mbH

24. Building bridges between AS3 & Typo3.
Languages of Emotion - Berlin

25. Building bridges between AS3 & Typo3.
Code

26. Building bridges between AS3 & Typo3.
Timetable

27. Building bridges between AS3 & Typo3.
Timetable
Q4- 2009
Closed alpha
Q1- 2010
Public beta
Q2- 2010
Release of V.1

28. Building bridges between AS3 & Typo3.
ToDoS
Next up:
• Do more demoProjects and involve
external programmers (You?)
• Reduce footprint & cleanup
• Enable caching of queries (server-side)
• Complete documentation
• Implement Workspaces
• Typo3-Logging
• Lazy loading

29. Building bridges between AS3 & Typo3.
What do you think

30. Building bridges between AS3 & Typo3.
Stay in touch !
Updates/Blog/Documentation via:
www.t3flex.com
Follow T3Flex:
www.twitter.com/T3Flex
Contact me:
Follow me:
k kosack@wwsc.de
ww w.twitter.com/reimar
Reimar Kosack