last update: 09-Aug-2010
Typo3 CMS - homebase of t3 development.
www.typo3.org
Adobe Flex - general info and resources on Flex RIA development
flex.org
FLEX code EXAMPLES - A bunch of examples for Adobe Flex and ActionScript
http://blog.flexexamples.com/
You can also check:
http://www.typo3flash.nl (mostly dutch)
My personal site:
www.robbertstreng.nl
This TYPO3 CMS module can be used to compile and embed SWF files and integrates Adobe's open source FLEX3 SDK.
The extension module was created for the need of a more productive worktool that could manage all aspects of creating complex flex applications.
In short: the module creates a shell for the use of the Flex SDK on your webserver or local production machine. TYPO3 is used for creating, editing and templating code files like MXML and actionscript. After that TYPO3 CMS combines the content elements and other assets and creates the templated source code.
Then an ant build file created by TYPO3 and delegates the compiler actions to ant builder. (See the illustration below).
At this moment the extension is in beta. It can be improved in many ways. If you have a request or want to share your code improvements, just send me an email (robbert monkeytail buiswerk dot info) and your in! If you find a bug, please report it at the typo3 forge page at the t3flextoolkit section.
|
 |
The main goal is to use many of the great features in TYPO3 CMS to setup and handle a flash based project in a more stuctured and dynamic way. This enables you building projects online with one or more developers in a non-liniar way.
The extension uses a TYPO3 session webservice system based on AMFPHP 1.9. You are able to connect to the TYPO3 tables via the Flex RemoteObject. In this way you can get any content element or other data in asynchronic way. The development at this stage includes a first version of the codegenerator that creates cairngorm framework folders, classes en amf services.
When editing code online you can use simple markers to make dynamic code templates that will be parsed at the compling stage of the project. That's when you hit the compile button ;-).This can be very useful for manage assets the has to be embedded ad static object in you final SWF file. If you use this markers, you can export a project easy. In this way your content and code can be recycled by exporting it to a T3D export. When your export is imported in a other typo3 installation the relations to content and assets will not be corrupted.
Sample markers are:
###PACKAGE###
###CLASS###
###SRCDIR###
###SELF###
You can also template relative values like:
###HOME###
this replaces the TYPO3 api lib t3lib_div :: getIndpEnv('TYPO3_SITE_URL')
To parse values from the TSCONFIG or content elements from the pagetree use:
###PAGECONTENT_TEXT:KEY###
###PAGECONTENT_IMAGE:KEY###
###PAGETS:mycustomTsConfigValue###
outline document 
T3X_t3flextoolkit-0_0_1-z-200812232309.t3x |
 |
Editarea editor as MXML and Actionscript editor |
|
 |
module screenshot |
Features:
Project manager
- Asset management by Typoscript and Content Object Linking [in progress]
- SWC management
Class editor
- Syntax highlighter, search, undo and redo functions (see http://www.cdolivet.net/editarea/)
- TYPO3 CMS version control on content, source and assets
- Fast flashVars pipeline
- TYPO3 CMS export/import of all aspects of your dynamic application
Pi Plugins
- Embed fast with flashVar iteration from typoscript objects.
- AMF service browser [in progress]
Dynamic code creation
- AMFPHP service editor by BE [in progress]
- Class templating by marker tags
Compiler
- Compiler directives by AID (application id)
|
 |
compiler shell for Adobe's FLEX SDK compiler.(mxmlc) |
Go to adobe.com, get Flexbuilder or download the trail version. Install Flexbuilder on your local production mac or pc.
Stepbystep: labs.adobe.com/wiki/index.php/Flex_3:Release_Notes
WINDOWS / MACOSX
labs.adobe.com/wiki/index.php/Flex_3:Release_Notes
DEBIAN SETUP
see: blog.apterainc.com/software/setting-up-a-flex-development-enviroment-in-gnulinux/
Nothing special has to be done for this extension, but fileadmin/flexfiles has to be writeable.
If you do not have a typo3 installation yet, download a installer or package at the typo3.org website at the download section.
Requirements:
Installing the extension:
- FIRST get a clean TYPO3 installation
- Get the extension
- Go to extension manager > import extensions
- Browse to the folder where you downloaded the extension
- Press upload
- Press the install button
Now go to installed extensions and open the extension config by clicking on the text next to the install/deinstall button.
Now the ext. manager shows the default settings. Press update. It's important not to skip this, because Typo3 need this config settings to function. So leave the defaults or edit the values and then press the update at the bottom of the formlist.
Before you create a project, you must know that a project only can function properly if it is created at the root level of the page-tree. The folders en code files are created as from the pagetree order.
- Press the world icon on the pagetree rootnode and select new in the context menu.
- Select FLEX PROJECT in the type list, now you are getting the project config flexform.
There are a number of tabs here, for now you can leave the settings as the default. Just give it a name and [I named it FRONT_BANNER] click 'save'. In the Pagetree you can see the new project appear. [see video example]
|
 |
|
 |
Before creating your main class, make a project first. See the previous section howto.
Making a new class, is like making a new page in TYPO3, click on the root icon of your project. Now in the wizzard you select mxml from template. After that a class creation form shows. Now in the form you can select the MAIN template in the class creation form and fill in the classname Main. You do not have to give it a extension name. This pagetype MXML will do.
You can include a SWC files created by Flash or from a Flexbuilder library project. Just upload the library into the flexform and you can use all the classes within the SWC file. This makes it much more efficient because you can use a big library without the need of creating the files in the cms. [see illustration below]
|
 |
|
 |
You can manage the extra compiler options at the compiler settings tab of the project properties. Note that the SWC resources that are attached to the project are included automaticly.
To change the global path to the mxmlc compiler for your project, go to installed extensions section of the extension manager and then click on the extension title [t3flextoolkit]. When it's opens select info, and change the path at the mxmlc path field. After you clicked update you will notice that al projects will now use the new compiler path.
When a project is compiled, the result file is places at the project deploy dir. You can set this at the compiler tab (first tab) of the project settings. By default it's put in fileadmin/flexfiles/swf/ folder.
The swf files are called page_[uid].swf where uid is the pid of the project. So if you project uid is 40 for example, the swf file created by mxmlc compiler is page_40.swf. The fact that the filename contains 'page' at the first part has no paticulair reason. It just refer to a typoe 'page'. In future versions this can be customized in any deploy name.
Now you compiled the file, you want to embed it in the html page. The typoscript needed for this is very simple (see below).
The extension templates the swfobject engine.This example shows how can define some extra css options via the style property, like css style: style="width:100px". You can see that it's also simple to inject flashvar via typoscript setup. just add properties at the flashVars object.
Disclaimer:
Warning: This software is in beta. Please make sure you backup your stuff, before using the extension and start this tutorial.
In no event will we be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.
We make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.