Presentation about integration between Magnolia CMS and flash front-end to get a full Flash CMS! You can work directly from flash application and edit your contents in-place.

1. Managing content of flash-powered
websites with Magnolia
16 september 2010

2. 0. about us
1. introduction
2. the solution
3. results
4. demo time
5. Q&A
Copyright 2010 OpenMind 2

3. 0. about us
Copyright 2010 OpenMind 3

4. OpenMind and the open source
OpenMind s.r.l. (www.openmindonline.it) is one of the most active Italian
company on open source projects, focused on j2ee technologies:
www.openmindlab.com
Openmind manages the Openmindlab initiative, to promote our opensource
projects (openutils). Some magnolia related projects:
media module, simple cache module,
criteria API, groovy module, messaging module,
stripes and struts integration modules, …
From ohloh:
• 12 active developers on open source communities
• 29 person years effort provided
• 118,9 K code lines generated
0. about us
Copyright 2010 OpenMind 4

5. We are working with
0. about us
Copyright 2010 OpenMind 5

6. 1. introduction
Copyright 2010 OpenMind 6

7. Stakeholders – Piaggio Group, the client
PIAGGIO GROUP is the largest
European manufacturer of two-
wheeled motor vehicles and one of
the world's leaders in its sector.
The Group is also a major
international player in the
commercial vehicle market.
Brands
1. introduction
Copyright 2010 OpenMind 7

8. Stakeholders – Van Gogh Creative, the web agency
Vangogh Creative is an
emerging web-agency
http://www.vangogh-creative.it/
With strong experience
in:
Music
Fashion
Automotive
Flash addicted!
1. introduction
Copyright 2010 OpenMind 8

9. Piaggio Group Goals
Unique communication strategy for all the brands and markets
Partnership with unique communication agency for the entire
group
Increase brand positioning (Vespa, Motoguzzi, Scarabeo, Piaggio)
Increase position on web search results
Increase traffic to the web sites
Reduce tech costs
Contents editing and publishing without technical skills
Aggressive on the time table for the go live
Save money
1. introduction
Copyright 2010 OpenMind 9

10. Piaggio Group Requirements
Use flash to deliver a strong emotional experience
Manage contents by a simple-to-use CMS
Centralized content management
Preview environment
High-capacity / high-availability system
1. introduction
Copyright 2010 OpenMind 10

11. Business Opportunity by our point of view
Enter the markets where flash solutions are attractive
Reduce project cost for front end delivery
Flash is still the choice for the web in fashion, design, architecture,
videogame, movie, product presentation, and so on …
we want to be there too
There are no enterprise level CMS that manages in “simple is
beautiful” way both html and flash contents
1. introduction
Copyright 2010 OpenMind 11

12. Copyright 2010 OpenMind 12

13. 2. the solution
Copyright 2010 OpenMind 13

14. Server side architecture overview
simple cache module
flash module
custom template
renderer media spring
module MVC
server-side swfaddress
spring
Magnolia integration
layer
2. the solution
Copyright 2010 OpenMind 14

15. Client side architecture overview
html page
JS (swfaddress, swfobject, analytics)
swfaddress analytics
integration integration
content
handler
http status handler actual content
navigation
handler
flash movie VG framework 2. the solution
Copyright 2010 OpenMind 15

16. Flash module

swfaddress server-side support (manage swfaddress redirects)

custom template and paragraph renderer that choose template to apply by uri
extension without using subtemplating

.html for html ouput

.xml for xml contents

.sec for tree structure infos

bypass flash mode

custom tags to render

html page structure with swfaddress, swfobject, … (sensible to bypass flash
mode)

xml content file structure

nodedata values (media, grids, …) in xml page contents

authoring and permissions info in xml page contents
2. the solution
Copyright 2010 OpenMind 16

17. Communication flow – 1
Consider following request:
http://www.motoguzzi.it/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic.html
Html version of the page is rendered (demo)
In the head tag swfaddress and swfobject javascript libraries are included.
In the body current page contents and navigation links are rendered.
If the request is coming from javascript / flash enabled browser (not a spider for
instance) swfaddress-optimizer script extracts path, query string and hash
information from uri, sends them to server via XmlHttpRequest and evaluates the
response.
On the server side a filter intercepts the request coming from swfaddress, builds and
returns the javascript statement to redirect the browser to the root of the domain
with the right hash value (and keeping query string values).
2. the solution
Copyright 2010 OpenMind 17

18. Communication flow – 2
swfaddress request:
Host www.motoguzzi.it
Path /
Query string sa=/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic
Content-Type application/x-swfaddress
and filter response:
location.replace("/#/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic")
When swfaddress evaluates filter response, the user is redirected to
http://www.motoguzzi.it/#/motoguzzi/IT/it/moto/nakes/V7-classic/V7-Classic
2. the solution
Copyright 2010 OpenMind 18

19. Communication flow – 3
www.motoguzzi.it/ is rendered as any other page (communication flow - 1), but
before the end of the body tag, a script replaces the main div contents with the swf
application (unique for entire site).
When swf movie is starting, it preloads the site tree (n levels deep under language
page) and some other resources (pngs, swfs, flvs).
Swf application then reads from browser address bar (through swfaddress AS api)
the hash value (/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic) which identifies
the current page path.
This value has a double use: to highlight right menu paths to the page and to build
the request to the server for contents:
http://www.motoguzzi.it/motoguzzi/IT/it/moto/naked/V7-classic/V7-Classic.xml
Xml contents are then rendered by the swf application.
The last step is the call from swf application to javascript analytics function.
2. the solution
Copyright 2010 OpenMind 19

20. Authoring support
In authoring environment each html page loads the magnolia javascripts needed to
work with dialogs, preview mode and paragraphs related operations.
Some information are added to xml contents file:

environment (edit / preview / public)

current user

current user permissions on page

xml declaration for buttons
<page loggedUser="admin" mode="edit" permissions="W">
<buttons>
<button align="L" onclick="mgnlPreview(true)" label="Preview" />
<button align="L" onclick="MgnlAdminCentral.showTree('website', '/motoguzzi/IT/it/home')"
label="AdminCentral" />
<button align="R" onclick="mgnlOpenDialog('/motoguzzi/IT/it/home','','','headers','website')" label="Proprietà
header" />
</buttons>
…
Swf application renders magnolia green bars (main or paragraphs bars) and binds
calls to ExternalInterface.call(“[button's onclick attribute value]”) to the buttons.
2. the solution
Copyright 2010 OpenMind 20

21. 3. results
Copyright 2010 OpenMind 21

22. Business results - Piaggio
Unique authoring platform for their sites with same authoring
experience both for traditional html sites and full-flash sites
For full-flash sites, flash front end is decoupled from CMS
SEO enabled sites
Highly optimized platform to deliver contents on a cheap hardware
and network infrastructure
On time on the go live plan
3. results
Copyright 2010 OpenMind 22

23. Business results – Van Gogh
Powerful AS framework integrated with a CMS platform
Frontend release process mostly independent from CMS release
process
Tech solution to support their creativity
3. results
Copyright 2010 OpenMind 23

24. Business results - Openmind
New Magnolia module
Strong case history to open new ways on the market
Strong partnership with a sexy agency
More efficiency on front end delivery
3. results
Copyright 2010 OpenMind 24

25. 4. demo
Copyright 2010 OpenMind 25

26. And what about mobile?
We know Flash on iPhone and iPad is not permitted!
This is not a limit … this is a big opportunity for us and Magnolia.
We built a new Magnolia Module to catch this opportunity, but this
is another story 
Copyright 2010 OpenMind 26

27. 5. q&a
Copyright 2010 OpenMind 27

28. Thank you!
manuel.molaschi@openmindonline.it
www.openmindonline.it
www.openmindlab.com
Copyright 2010 OpenMind 28