Flash templates for Joomla! Using XML for data-exchange Herman Peeren Dutch Joomla!Days, June 13, 2009

Herman Peeren Creating is manipulating Standards, interfaces and Open Source why I like Joomla! and Flash… [email_address]

Creating is manipulating

Standards, interfaces and Open Source

why I like Joomla!

and Flash…

[email_address]

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:

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 (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 + -

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

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.

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.

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 li if ($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 BUG foreach ($child->children() as $grchild) { if ($grchild->name() == 'a') { $grchild->addAttribute('class', 'itemNr'.$x); } } $x++; } } } Excursion: template override to avoid multiple classes bug

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 li

if ($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 BUG

foreach ($child->children() as $grchild)

{

if ($grchild->name() == 'a') {

$grchild->addAttribute('class', 'itemNr'.$x);

}

}

$x++;

}

}

}

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

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

Google in the Middle Ages Isidorus of Seville (560 - 636)

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

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

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

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

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

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

Using XML for data exchange broader standard, which can also be used to exchange data with other programs looking for a more universal interface

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

looking for a more universal interface

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

Easy loading of XML-files in Flash

SOAP also standard available

good book: Flash XML Applications by Joachim Bernhard Schnier, ISBN 9780240809175

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

When only needing very few data once, you could directly query the Joomla!-database…

<?PHP //maak xml-bestand voor Flash

header (&quot;content-type:text/xml&quot;);

print('<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>');

print('<links>');

//algemeen: database connectie e.d.

require_once(&quot;configuration.php&quot;);

$config=new JConfig;

$connection=mysql_connect($config->host, $config->user, $config->password);

mysql_select_db($config->db, $connection);

$query_a=&quot;select * from &quot;.$config->dbprefix.&quot;menu where name='&quot;; etcetera

and make some custom XML

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)

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)

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.

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.

using feeds in Joomla! to produce XML (3): example Jonathan Byrd (from his administrator/components/com_menu/controller.php): $db->setQuery( &quot;SELECT name, link FROM #__menu WHERE menutype='&quot;. $type->menutype .&quot;'&quot; ); $items = $db->loadObjectList(); $file= fopen( JPATH_COMPONENT_SITE.DS.'XML'.DS.$type->menutype.&quot;.xml&quot;, &quot;w&quot; ); $_xml = &quot;<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>&quot;; $_xml .= &quot;
<menu>
&quot;; foreach( $items as $item ) { $ss=&quot;_parent&quot;; $url = str_replace( '&', '&amp;', $item->link ); $name = str_replace( '&', '&amp;', $item->name ); $_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;; } $_xml .= &quot;</menu>&quot;;

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

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

$items = $db->loadObjectList();

$file= fopen( JPATH_COMPONENT_SITE.DS.'XML'.DS.$type->menutype.&quot;.xml&quot;, &quot;w&quot; );

$_xml = &quot;<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>&quot;;

$_xml .= &quot;
<menu>
&quot;;

foreach( $items as $item ) {

$ss=&quot;_parent&quot;;

$url = str_replace( '&', '&amp;', $item->link );

$name = str_replace( '&', '&amp;', $item->name );

$_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;;

}

$_xml .= &quot;</menu>&quot;;

using feeds in Joomla! to produce XML (4): example Produces this XML (kind of RSS): <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <menu> <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> <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> <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> <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> <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> <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> <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> <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> <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> <item item_url=&quot;index.php?option=com_facileforms&quot; item_label=&quot;Contact&quot; item_url_target=&quot;_parent&quot;>Contact</item> <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> </menu>

Produces this XML (kind of RSS):

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>

<menu>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<item item_url=&quot;index.php?option=com_facileforms&quot; item_label=&quot;Contact&quot; item_url_target=&quot;_parent&quot;>Contact</item>

<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>

</menu>

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 .

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 .

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

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

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

Joomla! en SOAP JMSOAP: Joomla SoapServer API unfortunately 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

JMSOAP: Joomla SoapServer API unfortunately 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

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?)

Joomla! component for menu-syndication

Joomla! SOAP-plugin (and REST)

re-use by standardisation

standard Actionscript classes to consume webservices (maybe also using AMF?)