Flash templates for Joomla! Using XML for data-exchange Herman Peeren Dutch Joomla!Days, June 13, 2009
Herman Peeren <ul><li>Creating is manipulating </li></ul><ul><li>Standards, interfaces and Open Source </li></ul><ul><li>w...
<ul><li>Flash (dis)advantages - and solutions </li></ul><ul><li>data-exchange with J-AMFPHP </li></ul><ul><li>using XML fo...
Flash (dis)advantages <ul><li>great scaling to screen </li></ul><ul><li>browser independant </li></ul><ul><li>alpha-transp...
IE-6 CSS-bugs: who cares? <ul><li>Some of my customer’s websites still have  > 15% IE6 -visitors! (yes, in 2009) </li></ul...
<ul><li>Part of overriding mod_mainmenu: </li></ul><ul><li>//geef class=&quot;itemNrX&quot; mee aan li- en anker-tag (met ...
More HTML in Flash textfield <ul><li>FPXHTMLRENDER 1.2.2: sourceforge.net/projects/fpxhtmlrender </li></ul><ul><li>beware ...
Google in the Middle Ages Isidorus of Seville (560 - 636)
Better SEO: HTML-layer <ul><li>make a HTML-layer  under  a Flash-layer </li></ul><ul><li>easy to do with a CMS </li></ul><...
More SEO for Flash <ul><li>Flash Actionscript cooperates very well with JavaScript  </li></ul><ul><li>You can track events...
data-exchange with J-AMFPHP <ul><li>AMF: Action Message Format = a  binary  format for data exchange with Flash </li></ul>...
Using XML for data exchange <ul><li>broader standard, which can also be used to exchange data with other programs </li></u...
reading XML into Flash <ul><li>Easy loading of XML-files in Flash </li></ul><ul><li>SOAP also standard available </li></ul...
Producing your own XML <ul><li>When only needing very few data once, you could directly query the Joomla!-database… </li><...
using feeds in Joomla!  to produce XML (1) <ul><li>One way: from Joomla! to Flash </li></ul><ul><li>Project: FlashFeed (no...
using feeds in Joomla!  to produce XML (2): menus <ul><li>modules  like mod_mainmenu cannot have a XML-view… </li></ul><ul...
using feeds in Joomla!  to produce XML (3): example <ul><li>Jonathan Byrd (from his administrator/components/com_menu/cont...
using feeds in Joomla!  to produce XML (4): example <ul><li>Produces this XML (kind of RSS): </li></ul><ul><li><?xml versi...
webservices <ul><li>Goal: bidirectional XML data-exchange </li></ul><ul><li>XML-RPC </li></ul><ul><li>SOAP: envelope and w...
Flash and XML-RPC: 2 projects <ul><li>XML-RPC-lib (Pedro Ornelas): members.netmadeira.com/killer/xmlrpc </li></ul><ul><li>...
Joomla! en SOAP <ul><li>JMSOAP: Joomla SoapServer API unfortunately now only for Joomla1.0 </li></ul><ul><li>you can use o...
TODO, under construction <ul><li>Joomla! component for menu-syndication </li></ul><ul><li>Joomla! SOAP-plugin (and REST) <...
Upcoming SlideShare
Loading in …5
×

Flash Templates- Joomla!Days NL 2009 #jd09nl

3,069 views

Published on

Presentation on Joomla!Days Netherlands by Herman Peeren

Published in: Technology, Art & Photos
  • Be the first to comment

Flash Templates- Joomla!Days NL 2009 #jd09nl

  1. 1. Flash templates for Joomla! Using XML for data-exchange Herman Peeren Dutch Joomla!Days, June 13, 2009
  2. 2. Herman Peeren <ul><li>Creating is manipulating </li></ul><ul><li>Standards, interfaces and Open Source </li></ul><ul><li>why I like Joomla! </li></ul><ul><li>and Flash… </li></ul><ul><li>[email_address] </li></ul>
  3. 3. <ul><li>Flash (dis)advantages - and solutions </li></ul><ul><li>data-exchange with J-AMFPHP </li></ul><ul><li>using XML for data-exchange </li></ul><ul><li>reading XML into Flash </li></ul><ul><li>using feeds from Joomla! to produce XML </li></ul><ul><li>using webservices for two-way exchange </li></ul><ul><li>TODO, under construction </li></ul>Flash templates for Joomla! Agenda:
  4. 4. Flash (dis)advantages <ul><li>great scaling to screen </li></ul><ul><li>browser independant </li></ul><ul><li>alpha-transparancy; no matte -drama </li></ul><ul><li>font embedding </li></ul><ul><li>movement & sound </li></ul><ul><li>Actionscript: familiar and mature language </li></ul><ul><li>SEO more difficult </li></ul><ul><li>less CSS-support </li></ul><ul><li>no back-button </li></ul><ul><li>no easy event tracking </li></ul><ul><li>you need extra provisions in case Flash Player is missing </li></ul>+ -
  5. 5. IE-6 CSS-bugs: who cares? <ul><li>Some of my customer’s websites still have > 15% IE6 -visitors! (yes, in 2009) </li></ul><ul><li>professional websites/webapplications cannot ignore IE6, UNFORTUNATELY. </li></ul><ul><li>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. </li></ul>
  6. 6. <ul><li>Part of overriding mod_mainmenu: </li></ul><ul><li>//geef class=&quot;itemNrX&quot; mee aan li- en anker-tag (met X = hoeveelste item) bij level==1 (hoogste niveau) </li></ul><ul><li>$x=1; </li></ul><ul><li>if (($node->name() == 'ul') && ($node->attributes('class')!='menualgemeen')) { </li></ul><ul><li>foreach ($node->children() as $child) </li></ul><ul><li>{ </li></ul><ul><li>if (($child->name() == 'li') &&($child->attributes('level')==1)) { </li></ul><ul><li>//hang die class aan de li </li></ul><ul><li>if ($child->attributes('class')) { </li></ul><ul><li>$child->addAttribute('class', $child->attributes('class').' itemNr'.$x); </li></ul><ul><li>} else { </li></ul><ul><li>$child->addAttribute('class', 'itemNr'.$x); </li></ul><ul><li>} </li></ul><ul><li>//en aan de bijbehorende anchor-tag TO AVOID MULTIPLE CLASSES BUG </li></ul><ul><li>foreach ($child->children() as $grchild) </li></ul><ul><li>{ </li></ul><ul><li>if ($grchild->name() == 'a') { </li></ul><ul><li>$grchild->addAttribute('class', 'itemNr'.$x); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>$x++; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Excursion: template override to avoid multiple classes bug
  7. 7. More HTML in Flash textfield <ul><li>FPXHTMLRENDER 1.2.2: sourceforge.net/projects/fpxhtmlrender </li></ul><ul><li>beware of the mafia... </li></ul><ul><li>To use with Joomla! back-end, see: stevenstark.com/images/flash+cms.pdf </li></ul>
  8. 8. Google in the Middle Ages Isidorus of Seville (560 - 636)
  9. 9. Better SEO: HTML-layer <ul><li>make a HTML-layer under a Flash-layer </li></ul><ul><li>easy to do with a CMS </li></ul><ul><li>you can even put some EXTRA text there </li></ul><ul><li>BTW: trick of using content double in a template can sometimes be handy </li></ul>
  10. 10. More SEO for Flash <ul><li>Flash Actionscript cooperates very well with JavaScript </li></ul><ul><li>You can track events and trigger JavaScript to make bookmarkable URLs, get conversion code etc. </li></ul><ul><li>nice article about this subject (in Dutch): </li></ul><ul><li>http://naarvoren.nl/artikel/flash_en_javascript </li></ul>
  11. 11. data-exchange with J-AMFPHP <ul><li>AMF: Action Message Format = a binary format for data exchange with Flash </li></ul><ul><li>can communicate with webservices </li></ul><ul><li>AMF and PHP: amfphp.org; used in J-AMFPHP </li></ul><ul><li>at this moment THE way to exchange data between Joomla! and Flash </li></ul><ul><li>figo.tandolin.co.za/adobe-air/how-to-use-jamfphp-for-joomla-remoting.htm </li></ul>
  12. 12. Using XML for data exchange <ul><li>broader standard, which can also be used to exchange data with other programs </li></ul><ul><li>looking for a more universal interface </li></ul>
  13. 13. reading XML into Flash <ul><li>Easy loading of XML-files in Flash </li></ul><ul><li>SOAP also standard available </li></ul><ul><li>good book: Flash XML Applications by Joachim Bernhard Schnier, ISBN 9780240809175 </li></ul>
  14. 14. Producing your own XML <ul><li>When only needing very few data once, you could directly query the Joomla!-database… </li></ul><ul><li><?PHP //maak xml-bestand voor Flash </li></ul><ul><li>header (&quot;content-type:text/xml&quot;); </li></ul><ul><li>print('<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>'); </li></ul><ul><li>print('<links>'); </li></ul><ul><li>//algemeen: database connectie e.d. </li></ul><ul><li>require_once(&quot;configuration.php&quot;); </li></ul><ul><li>$config=new JConfig; </li></ul><ul><li>$connection=mysql_connect($config->host, $config->user, $config->password); </li></ul><ul><li>mysql_select_db($config->db, $connection); </li></ul><ul><li>$query_a=&quot;select * from &quot;.$config->dbprefix.&quot;menu where name='&quot;; etcetera </li></ul><ul><li>and make some custom XML </li></ul>
  15. 15. using feeds in Joomla! to produce XML (1) <ul><li>One way: from Joomla! to Flash </li></ul><ul><li>Project: FlashFeed (now: version 0.04) on www.youcanjoomla.com </li></ul><ul><li>Includes Actionscript 2 and 3 classes and a component to create feeds of articles and blog-views </li></ul><ul><li>but no menus (yet) </li></ul>
  16. 16. using feeds in Joomla! to produce XML (2): menus <ul><li>modules like mod_mainmenu cannot have a XML-view… </li></ul><ul><li>So, you have to make a component to make a feed from your menus </li></ul><ul><li>an attempt in that direction: Byrd Web Design, com_menu_to_xml </li></ul><ul><li>you only need a front-end: component under constuction. </li></ul>
  17. 17. using feeds in Joomla! to produce XML (3): example <ul><li>Jonathan Byrd (from his administrator/components/com_menu/controller.php): </li></ul><ul><li>$db->setQuery( &quot;SELECT name, link FROM #__menu WHERE menutype='&quot;. $type->menutype .&quot;'&quot; ); </li></ul><ul><li>$items = $db->loadObjectList(); </li></ul><ul><li>$file= fopen( JPATH_COMPONENT_SITE.DS.'XML'.DS.$type->menutype.&quot;.xml&quot;, &quot;w&quot; ); </li></ul><ul><li>$_xml = &quot;<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>&quot;; </li></ul><ul><li>$_xml .= &quot; <menu> &quot;; </li></ul><ul><li>foreach( $items as $item ) { </li></ul><ul><li>$ss=&quot;_parent&quot;; </li></ul><ul><li>$url = str_replace( '&', '&amp;', $item->link ); </li></ul><ul><li>$name = str_replace( '&', '&amp;', $item->name ); </li></ul><ul><li>$_xml .= &quot; <item item_url=&quot;&quot;. $url .&quot;&quot; item_label=&quot;&quot;. $name .&quot;&quot; item_url_target=&quot;&quot;. $ss .&quot;&quot;>&quot;. $name .&quot;</item> &quot;; </li></ul><ul><li>} </li></ul><ul><li>$_xml .= &quot;</menu>&quot;; </li></ul>
  18. 18. using feeds in Joomla! to produce XML (4): example <ul><li>Produces this XML (kind of RSS): </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><menu> </li></ul><ul><li><item item_url=&quot;index.php?option=com_content&amp;view=frontpage&quot; item_label=&quot;Home&quot; item_url_target=&quot;_parent&quot;>Home</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_content&amp;view=article&amp;id=5&quot; item_label=&quot;Joomla! Licentie&quot; item_url_target=&quot;_parent&quot;>Joomla! Licentie</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_content&amp;view=section&amp;id=3&quot; item_label=&quot;FAQ&quot; item_url_target=&quot;_parent&quot;>FAQ</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_content&amp;view=article&amp;id=19&quot; item_label=&quot;Joomla! overzicht&quot; item_url_target=&quot;_parent&quot;>Joomla! overzicht</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_content&amp;view=article&amp;id=22&quot; item_label=&quot;Wat is nieuw in 1.5?&quot; item_url_target=&quot;_parent&quot;>Wat is nieuw in 1.5?</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_content&amp;view=section&amp;id=4&quot; item_label=&quot;Meer over Joomla!&quot; item_url_target=&quot;_parent&quot;>Meer over Joomla!</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_weblinks&amp;view=categories&quot; item_label=&quot;Weblinks&quot; item_url_target=&quot;_parent&quot;>Weblinks</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_newsfeeds&amp;view=categories&quot; item_label=&quot;Nieuws feeds&quot; item_url_target=&quot;_parent&quot;>Nieuws feeds</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=1&quot; item_label=&quot;Het nieuws&quot; item_url_target=&quot;_parent&quot;>Het nieuws</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_facileforms&quot; item_label=&quot;Contact&quot; item_url_target=&quot;_parent&quot;>Contact</item> </li></ul><ul><li><item item_url=&quot;index.php?option=com_jumi&amp;fileid=1&quot; item_label=&quot;Hello Jumi!&quot; item_url_target=&quot;_parent&quot;>Hello Jumi!</item> </li></ul><ul><li></menu> </li></ul>
  19. 19. webservices <ul><li>Goal: bidirectional XML data-exchange </li></ul><ul><li>XML-RPC </li></ul><ul><li>SOAP: envelope and wsdl </li></ul><ul><li>RESTful webservices: resources </li></ul><ul><li>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 . </li></ul>
  20. 20. Flash and XML-RPC: 2 projects <ul><li>XML-RPC-lib (Pedro Ornelas): members.netmadeira.com/killer/xmlrpc </li></ul><ul><li>XML-RPC client for actionscript: sourceforce.net/projects/xmlrpcflash </li></ul>
  21. 21. Joomla! en SOAP <ul><li>JMSOAP: Joomla SoapServer API unfortunately now only for Joomla1.0 </li></ul><ul><li>you can use other PHP SOAP-projects within Joomla! Possibilities: NuSoap, Pear::SOAP and PHP5 SOAP. </li></ul><ul><li>I am working on a Joomla-plugin </li></ul>
  22. 22. TODO, under construction <ul><li>Joomla! component for menu-syndication </li></ul><ul><li>Joomla! SOAP-plugin (and REST) </li></ul><ul><li>re-use by standardisation </li></ul><ul><li>standard Actionscript classes to consume webservices (maybe also using AMF?) </li></ul>

×