Transcript
Page 1: Flash Templates- Joomla!Days NL 2009 #jd09nl

Flash templates for Joomla!Using XML for data-exchange

Herman PeerenDutch Joomla!Days, June 13, 2009

Page 2: Flash Templates- Joomla!Days NL 2009 #jd09nl

Herman Peeren

• Creating is manipulating• Standards, interfaces and Open Source• why I like Joomla!• and Flash…

[email protected]

Page 3: Flash Templates- Joomla!Days NL 2009 #jd09nl

• Flash (dis)advantages - and solutions• data-exchange with J-AMFPHP• using XML for data-exchange• reading XML into Flash• using feeds from Joomla! to produce XML• using webservices for two-way exchange• TODO, under construction

Flash templates for Joomla!Agenda:

Page 4: Flash Templates- Joomla!Days NL 2009 #jd09nl

Flash (dis)advantages

• great scaling to screen• browser independant• alpha-transparancy; no matte-

drama• font embedding• movement & sound• Actionscript: familiar and

mature language

• SEO more difficult• less CSS-support• no back-button• no easy event tracking• you need extra provisions

in case Flash Player is missing

+ -

Page 5: Flash Templates- Joomla!Days NL 2009 #jd09nl

IE-6 CSS-bugs: who cares?• Some of my customer’s websites still have > 15% IE6-

visitors! (yes, in 2009)

• professional websites/webapplications cannot ignore IE6, UNFORTUNATELY.

• peekaboo-bug, multiple classes bug, ID-class bug, box model bug, double margin float bug, haslayout-problems, no png-(alpha)transparancy, no min/max-width/height, etc.

Page 6: Flash Templates- Joomla!Days NL 2009 #jd09nl

Part of overriding mod_mainmenu:

//geef class="itemNrX" mee aan li- en anker-tag (met X = hoeveelste item) bij level==1 (hoogste niveau)$x=1;if (($node->name() == 'ul') && ($node->attributes('class')!='menualgemeen')) {foreach ($node->children() as $child){if (($child->name() == 'li') &&($child->attributes('level')==1)) {//hang die class aan de liif ($child->attributes('class')) {$child->addAttribute('class', $child->attributes('class').' itemNr'.$x);} else {$child->addAttribute('class', 'itemNr'.$x);} //en aan de bijbehorende anchor-tag TO AVOID MULTIPLE CLASSES BUGforeach ($child->children() as $grchild){if ($grchild->name() == 'a') {$grchild->addAttribute('class', 'itemNr'.$x);}}$x++;}}}

Excursion: template override to avoid multiple classes bug

Page 7: Flash Templates- Joomla!Days NL 2009 #jd09nl

More HTML in Flash textfield

• FPXHTMLRENDER 1.2.2:sourceforge.net/projects/fpxhtmlrender

• beware of the mafia...• To use with Joomla! back-end, see:

stevenstark.com/images/flash+cms.pdf

Page 8: Flash Templates- Joomla!Days NL 2009 #jd09nl

Google in the Middle Ages

Isidorus of Seville(560 - 636)

Page 9: Flash Templates- Joomla!Days NL 2009 #jd09nl

Better SEO: HTML-layer

• make a HTML-layer under a Flash-layer• easy to do with a CMS• you can even put some EXTRA text there• BTW: trick of using content double in a

template can sometimes be handy

Page 10: Flash Templates- Joomla!Days NL 2009 #jd09nl

More SEO for Flash

• Flash Actionscript cooperates very well with JavaScript

• You can track events and trigger JavaScript to make bookmarkable URLs, get conversion code etc.

• nice article about this subject (in Dutch): http://naarvoren.nl/artikel/flash_en_javascript

Page 11: Flash Templates- Joomla!Days NL 2009 #jd09nl

data-exchange with J-AMFPHP• AMF: Action Message Format = a binary

format for data exchange with Flash• can communicate with webservices• AMF and PHP: amfphp.org; used in J-AMFPHP• at this moment THE way to exchange data

between Joomla! and Flash• figo.tandolin.co.za/adobe-air/how-to-use-

jamfphp-for-joomla-remoting.htm

Page 12: Flash Templates- Joomla!Days NL 2009 #jd09nl

Using XML for data exchange

• broader standard, which can also be used to exchange data with other programs

• looking for a more universal interface

Page 13: Flash Templates- Joomla!Days NL 2009 #jd09nl

reading XML into Flash• Easy loading of XML-files in Flash• SOAP also standard available• good book: Flash XML Applications by Joachim

Bernhard Schnier, ISBN 9780240809175

Page 14: Flash Templates- Joomla!Days NL 2009 #jd09nl

Producing your own XML

• When only needing very few data once, you could directly query the Joomla!-database…<?PHP //maak xml-bestand voor Flashheader ("content-type:text/xml");print('<?xml version="1.0" encoding="utf-8"?>');print('<links>');//algemeen: database connectie e.d.require_once("configuration.php");$config=new JConfig;$connection=mysql_connect($config->host, $config->user, $config->password);mysql_select_db($config->db, $connection);$query_a="select * from ".$config->dbprefix."menu where name='";etcetera

• and make some custom XML

Page 15: Flash Templates- Joomla!Days NL 2009 #jd09nl

using feeds in Joomla! to produce XML (1)

• One way: from Joomla! to Flash• Project: FlashFeed (now: version 0.04) on

www.youcanjoomla.com• Includes Actionscript 2 and 3 classes and a

component to create feeds of articles and blog-views

• but no menus (yet)

Page 16: Flash Templates- Joomla!Days NL 2009 #jd09nl

using feeds in Joomla! to produce XML (2): menus

• modules like mod_mainmenu cannot have a XML-view…

• So, you have to make a component to make a feed from your menus

• an attempt in that direction: Byrd Web Design, com_menu_to_xml

• you only need a front-end: component under constuction.

Page 17: Flash Templates- Joomla!Days NL 2009 #jd09nl

using feeds in Joomla! to produce XML (3): example

Jonathan Byrd (from his administrator/components/com_menu/controller.php):

$db->setQuery( "SELECT name, link FROM #__menu WHERE menutype='". $type->menutype ."'" );$items = $db->loadObjectList();

$file= fopen( JPATH_COMPONENT_SITE.DS.'XML'.DS.$type->menutype.".xml", "w" );$_xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";$_xml .= "\r\n<menu>\r\n";

foreach( $items as $item ) {$ss="_parent";$url = str_replace( '&', '&amp;', $item->link );$name = str_replace( '&', '&amp;', $item->name );$_xml .= "\t<item item_url=\"". $url ."\" item_label=\"". $name ."\" item_url_target=\"". $ss ."\">". $name ."</item>\r\n";}$_xml .= "</menu>";

Page 18: Flash Templates- Joomla!Days NL 2009 #jd09nl

using feeds in Joomla! to produce XML (4): example

Produces this XML (kind of RSS):

<?xml version="1.0" encoding="utf-8"?><menu>

<item item_url="index.php?option=com_content&amp;view=frontpage" item_label="Home" item_url_target="_parent">Home</item><item item_url="index.php?option=com_content&amp;view=article&amp;id=5" item_label="Joomla! Licentie" item_url_target="_parent">Joomla! Licentie</item><item item_url="index.php?option=com_content&amp;view=section&amp;id=3" item_label="FAQ" item_url_target="_parent">FAQ</item><item item_url="index.php?option=com_content&amp;view=article&amp;id=19" item_label="Joomla! overzicht" item_url_target="_parent">Joomla! overzicht</item><item item_url="index.php?option=com_content&amp;view=article&amp;id=22" item_label="Wat is nieuw in 1.5?" item_url_target="_parent">Wat is nieuw in 1.5?</item><item item_url="index.php?option=com_content&amp;view=section&amp;id=4" item_label="Meer over Joomla!" item_url_target="_parent">Meer over Joomla!</item><item item_url="index.php?option=com_weblinks&amp;view=categories" item_label="Weblinks" item_url_target="_parent">Weblinks</item><item item_url="index.php?option=com_newsfeeds&amp;view=categories" item_label="Nieuws feeds" item_url_target="_parent">Nieuws feeds</item><item item_url="index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=1" item_label="Het nieuws" item_url_target="_parent">Het nieuws</item><item item_url="index.php?option=com_facileforms" item_label="Contact" item_url_target="_parent">Contact</item><item item_url="index.php?option=com_jumi&amp;fileid=1" item_label="Hello Jumi!" item_url_target="_parent">Hello Jumi!</item>

</menu>

Page 19: Flash Templates- Joomla!Days NL 2009 #jd09nl

webservices• Goal: bidirectional XML data-exchange• XML-RPC• SOAP: envelope and wsdl• RESTful webservices: resources• XML-RPC in Joomla 1.6 on the right spot at

last: receiving data in a controller, producing data in a view, possibly using a common model.

Page 20: Flash Templates- Joomla!Days NL 2009 #jd09nl

Flash and XML-RPC: 2 projects

• XML-RPC-lib (Pedro Ornelas): members.netmadeira.com/killer/xmlrpc

• XML-RPC client for actionscript: sourceforce.net/projects/xmlrpcflash

Page 21: Flash Templates- Joomla!Days NL 2009 #jd09nl

Joomla! en SOAP

• JMSOAP: Joomla SoapServer APIunfortunately now only for Joomla1.0

• you can use other PHP SOAP-projects within Joomla! Possibilities: NuSoap, Pear::SOAP and PHP5 SOAP.

• I am working on a Joomla-plugin

Page 22: Flash Templates- Joomla!Days NL 2009 #jd09nl

TODO, under construction

• Joomla! component for menu-syndication• Joomla! SOAP-plugin (and REST)• re-use by standardisation• standard Actionscript classes to consume

webservices (maybe also using AMF?)