Difficulty: 2 out of 5 stars
It was because of working with Corizon that I became more interested in creating Mash-ups*.
During the last 2 years, I’ve seen a lot of mash-up tools, From the easy (”Lego-like”) Popfly from Microsoft which is recently discontinued, to large handy API’s or serverside Java frameworks; such as the nice but heavy SiteMesh framework.
But it was the Corizon mash-up toolkit that I started to realize, coding mash-ups can have it’s ups and downs.

In my opinion creating a mash-up should be easy & fast. Not buggy and heavy (running 2 or 3 Tomcat servers in the background *kuch*). Also it’s an unwritten rule that for a mash-up you should not first destroy and rebuild it’s components before you gonna mix them up. This means you can only mash-up content what’s in your maintenance and when one of your components changes, your mash-up is broken.
It’s not a wonder that I became extremely positive about YQL, when I first saw this working.
And now, after Fronteers 2009, where I had a presentation and talk with Chris Heilmann from Yahoo.

With YQL (Yahoo Query Language), you can make the same mash-ups, client or serverside and you don’t need thousands lines of code.
Why you should use YQL for a mash-up?

• You won’t use your own bandwidth, but the bandwidth from Yahoo.
• It’s easy, just the basic SQL knowledge is required.
• It’s lightweight.
• It’s fast.

But like every Mashup tool, there are also downside’s. So it’s good to consider:

Why you shouldn’t use YQL for a mash-up?

• When one of the including components is slow or has timeouts, you result object will be null.

Mash-ups with YQL

Ok enough with the theory. Let’s practice with a simple YQL mash-up. As you might know, I like videogames. So I want to have a website with the release dates of games on my website, which I can watch on YouTube. Fokzine Games (http://games.fok.nl/overzicht.php?action=release) has a nice game release list.

• For using this tutorial, you will need a Yahoo Developer Account, which you can create for free.
• Unless you like to write full XPath lines without any help,
  you’ll also need Mozilla Firefox browser with the Firebug plugin installed.

1. Register your Yahoo Dev account.
   Go to the below URL, register your Yahoo account and login
   to the YQL console: http://developer.yahoo.com/yql
2. Query the content.
   YQL is quite similar to SQL. To query content (the videogame
   release list) from an external website, I will select all the HTML nodes from an URL. With Xpath I can point to the part of the website I will need. (Now you’ll need Firebug, inspect the website, till you’ll reach the table tag of the release list. – In top of your Firebug screen, you will see the full Xpath line.
   – Just right click, and “Copy Xpath”. This will be your YQL query for selecting the table tag on Fok.nl Game Release Page:

   select * from html where url ='http://games.fok.nl/overzicht.php?action=release' and xpath ='//*[@id="itemtext"]'
   //or select the tr tag on Fok.nl Game Release page
   //(note that I removed “tbody” from the xpath line to make it work)
   select * from html where url ='http://games.fok.nl/overzicht.php?action=release' and xpath ='/html/body/div[4]/table/tr/td[2]/div[2]/div/table/tr'
   

   Hit enter (or press “Test”) and you can switch between formatted view or tree view to see the result. Result can be in XML of JSON.
   Also note that you can copy the REST URL Query, from the console:
   
   http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20′http%3A%2F%2Fgames.fok.nl%2Foverzicht.php%3Faction%3Drelease’%20and%20xpath%20%3D%20′%2Fhtml%2Fbody%2Fdiv%5B4%5D%2Ftable%2Ftr%2Ftd%5B2%5D%2Fdiv%5B2%5D%2Fdiv%2Ftable%2Ftr’&format=xml
   
   

3. How the retrieved XML looks like:

   <query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"yahoo:count="50" yahoo:created="2009-09-25T12:14:12Z"yahoo:lang="en-US" yahoo:updated="2009-09-25T12:14:12Z"
   yahoo:uri="http://query.yahooapis.com/v1/yql?q=select+*+from+html+where+url+%3D+%27http%3A%2F%2Fgames.fok.nl%2Foverzicht.php%3Faction%3Drelease%27+and+xpath+%3D+%27%2Fhtml%2Fbody%2Fdiv%5B4%5D%2Ftable%2Ftr%2Ftd%5B2%5D%2Fdiv%5B2%5D%2Fdiv%2Ftable%2Ftr%27">
   <diagnostics>
   <publiclyCallable>true</publiclyCallable>
   <url execution-time="263" proxy="DEFAULT"><![CDATA[http://games.fok.nl/overzicht.php?action=release]]></url>
   <user-time>272</user-time>
   <service-time>263</service-time>
   <build-version>3130</build-version>
   </diagnostics>
   <results>
    <tr bgcolor="#E0E0E0">
     <td>
      <img alt="PC" src="http://images.fok.nl/ads/games/IB_PC.png"/>
     </td>
     <td>
      <p>29-09-2009</p>
     </td>
     <td>
      <a class="invisiblelink" href="gameinfo.php?gameid=9985">Tales of Monkey Island episode 3</a>
     </td>
    </tr>
     ..
   </results>
   </query>

   How your JSON (Javascript object looks like:

   releaseList({
    "query":{
    "count":"50",
    "created":"2009-09-25T12:10:17Z",
    "lang":"en-US",
    "updated":"2009-09-25T12:10:17Z",
    "uri":"http://query.yahooapis.com/v1/yql?q=select+*+from+html+where+url+%3D+%27http%3A%2F%2Fgames.fok.nl%2Foverzicht.php%3Faction%3Drelease%27+and+xpath+%3D+%27%2Fhtml%2Fbody%2Fdiv%5B4%5D%2Ftable%2Ftr%2Ftd%5B2%5D%2Fdiv%5B2%5D%2Fdiv%2Ftable%2Ftr%27",
    "diagnostics":{
     "publiclyCallable":"true",
     "url":{
      "execution-time":"28",
      "proxy":"DEFAULT",
      "content":"http://games.fok.nl/overzicht.php?action=release"
     },
    "user-time":"36",
    "service-time":"28",
    "build-version":"3130"
    },
   "results":{
    "tr":[{
    "bgcolor":"#E0E0E0",
    "td":[.. ]
    }
   ..
    ]
   }}});

4. Use the YQL widget.
   Create a new HTML page. In this page, you’ll include the YQL JS Widget:
   http://github.com/sh1mmer/dotnet-yql-tutorial/blob/master/yql_js_widget.js
   This is a pre-made Javascript widget. If you check out the links on the end of this article, you can check out other implementations as well. (Such as Dojo-YQL or JQuery YQL).
   For this article, we will use vanilla Javascript.
5. Create the Mash-up.
   The only think what you’ll need now is the logic to implement the previous made YQL query, to have the YQL results in your Document Object Model (DOM).
   With the Firebug plug-in, you can check the “Net” tab, to see if the correct object is retrieved. You can walk through the results, and implement it in your Javascript to do fancy things with it.

<html>
<head>
<title>YQL - Game Release</title>
</head>
<body>
<script type="text/javascript" src="yql-js-widget.js" ></script>
<script type="text/javascript">
var config = {};
var format = '<li class="{td[0].img.alt}">{td[1].p} - <a href="http://games.fok.nl/{td[2].a.href}" target="_blank">{td[2].a.content}</a> - <a href="http://www.youtube.com/results?search_query={td[2].a.content}" target="_blank">Watch on YouTube</a></li>';
var gameQuery = "select * from html where url = 'http://games.fok.nl/overzicht.php?action=release' and xpath = '/html/body/div[4]/table/tr/td[2]/div[2]/div/table/tr'";
yqlWidget.push(gameQuery, config, format, "widgetContainer");
yqlWidget.render();
</script><ul id="widgetContainer"></ul>
</body>
</html>

Well that’s it. See how easy it is to create a nice Mash-up? As long as you can reach the DOM, you can mash-up everything. Below my article, I’ve written some nice links. If you liked my article or you would like to discuss with me about YQL or Mash-up technologies; feel free to add me on LinkedIn or Twitter.

• YQL Community: http://github.com/yql/
• YQL video by Jonathan LeBlanc: http://developer.yahoo.com/yui/theater/video.php?v=leblanc-yql

* In webdevelopment, a mashup is a web page or application that combines
data or functionality from two or more external sources to create a new
service. An example of a Mash-up is a Google Map combined with Wikipedia
town information and a (accuweather.com) Weather indicator.

org.tigris.subversion.javahl.ClientException - svn: Unable to open an ra_local session to URL svn: Unable to open repository 'file:///D:/SvnData/Repositories/Project' svn: Expected FS format between '1' and '3'; found format '4'

Got a similair error exception in Aptana?

When you install Aptana 1.5 version, you’ll notice that the included Subclipse plugin is 1.4.x.

With Subversion 1.6.x. installed on your system, the Subclipse plugin in Aptana won’t work. Since Subversion client & Subclipse (& for example Tortoise SVN), all need to be from the same version.
So the solution is to upgrade Supclipse to 1.6.x.
However it bugged me, to do so.
Here is the complete solution:

1. Verify Aptana 1.4.x version: In Aptana click:
   Help > About Aptana Studio > Installation Details
   Subclipse 1.4.x. should be in this installed sofware list.
   Shutdown Aptana.
2. Go to your installation folder of Aptana, for example:
   C:\Program Files\Aptana\
3. In the features folder, remove all the folders and jars with subversion or subclipse in the file name:
   C:\Program Files\Aptana\features\
4. In the plugin folder, remove all the folders and jars with subversion or subclipse in the file name:
   C:\Program Files\Aptana\plugins\
5. From now, there is no Subclipse installed in your Aptana. Let’s install 1.6.x.
   In Aptana click: Help > Install New Software
6. Add the following software site, and name it ‘Subclipse’: http://subclipse.tigris.org/update_1.6.x
7. Select the “Core SVN Kit” and “Subclipse” checkboxes, and press “Next”
8. Incase you’ll get the following error: “The operation cannot be completed. See the details.”;
   uncheck: “Subclipse Integration for Mylyn… “
9. Incase you’ll have problems with “Accepting the agreements”, because the “Finish” button does not appear after checking “agree”. Retry the above 3 steps, but make sure, you uncheck the Mylyn on the first window (”Available software”), instead of pressing “Next” first.
10. Restart Aptana & Done! Your SVN should work right now. To verify Aptana 1.6.x version, repeat step 1.

1. Download and install subversion
   http://subversion.tigris.org/servlets/ProjectDocumentList?folderID=8100
2. Download and install Tortoise SVN for windows:
   http://sourceforge.net/projects/tortoisesvn/files/Application/1.6.5/TortoiseSVN-1.6.5.16974-win32-svn-1.6.5.msi/download
3. Create a new repository
   Create a folder using Windows Explorer, let’s say it’s called D:\Repositories\Standard. (Note that in this case I called the project “Standard”,
   but you can use whatever you want.)
   This folder should be located on your USB Drive, because this is the part that you’ll be dragging around with you.
   Open that folder and right click on the client area, select TortoiseSVN and then Create repository here. Choose the native file system option.
4. Create a working copy
   Right click on the My Documents folder (or any folder of your choosing), and select SVN Checkout from the popup menu.
   In this example, I’ve called the repository that I created in step 2 Standard.
   In the URL of repository field, fill in a URL that points to the newly created repository, i.e. file:///F:/Repositories/Standard.
   (Make sure you are pointing to the correct drive. In my case the USB stick is F:)
   A window should pop up stating that it has completed at revision 0.
5. Use it
   Now go into your recently checked out folder, and right click on them and from the TortoiseSVN menu, select Add.
   This command will mark the files for addition to the repository.
   To complete the add, right on the client area and select SVN Commit. This will add all the files marked for addition to the repository and commit new versions of files already in the repository.

So that’s all, you’ll now have a SVN Repo on your USB drive, which you can cary arround.

Bad luck! I lost the installation zip and the plugin is not available online anymore.
Though you can not install it now via the Joomla Installation manager I can get the module or plugin working.

Let’s say we have a plugin called: myPlugin (type=system), I had it installed on Joomla website X.
I need to install this plugin on Joomla website Y. I can copy from X the files to Y, that’s no big deal. However, the Joomla manager does not recognize your new transfered files.

With my below logics, you can get a broken plugin to work in Joomla. Or even create your own plugins!

• Copy the myPlugin.php and myPlugin.xml from the plugin/system/ folder of server X. (Note the folder ’system’, in my case the plugin type is called ’system’)
• Open up the myPlugin.xml file. If you don’t have the xml file anymore, so only the php file, it’s still fine.
  You can create the XML file by yourself. It should have the same file name as the PHP file, but with XML extension.

  Usually the xml file should look something like this:

  <?xml version="1.0" encoding="utf-8"?>
  <install version="1.5" type="plugin" group="system">
      <name>System - MyPlugin</name>
      <author>Leee Boonstra</author>
      <creationDate>August 2009</creationDate>
      <copyright>(C) 2009 Lee Boonstra</copyright>
      <license>GNU/GPL</license>
      <authorEmail>mailadres@mail.com</authorEmail>
      <authorUrl>http://www.ladysign.nl</authorUrl>
      <version>1.0</version>
      <description>The description of myPlugin</description>
      <files>
          <filename plugin="myPlugin">myPlugin.php</filename>
      </files>
      <languages>
  	<language tag="en-GB">language/en-GB/en-GB.plg_system_myPlugin.ini</language>
      </languages>
      <params addpath="/plugins/system">
  	<param name="myPluginFormField" type="text" size="20" label="PARAM_LABEL_FORMFIELD" default="" description="PARAM_DESC_FORMFIELD"/>
   </params>
  </install>

In this case myPlugin contains a form with a field: myPluginFormField, which will be a parameter used in the actual myPlugin.php file).
Now copy both files over to server of Joomla website Y.

• Within the XML file you can see in which folder the language files are stored. (see the language tag).
  You can look up the language files on the server of Joomla Website X and copy them over to the same path on the server of website Y.
  Incase you don’t have the language files, you can create your own. (Unless you don’t care to read uppercase-code-labels in your Administration
  panel instead of real translations.)

  en-GB.plg_system_myPlugin.ini

  PARAM_LABEL_FORMFIELD=Form Field
  PARAM_DESC_FORMFIELD=Please fill in some text.

• After copying over all the required files, you will notice that the plugin is not visible in your Joomla plugin manager.
  So how to proceed?

  Well Joomla stores the installed plugin information in your database! Knowing this, it’s not so hard to enable your plugin.
  Open your database structure for website X in for example phpMyAdmin.
  Open the plugins table (jos_plugins).

• Export the row of the to be copied plugin: (myPlugin).
  It’s also possible to write this SQL by yourself, it should look like this:

  INSERT INTO `jos_plugins` (`id`, `name`, `element`, `folder`, `access`, `ordering`, `published`, `iscore`, `client_id`, `checked_out`, `checked_out_time`, `params`) VALUES
  (37, 'System - MyPlugin', 'myPlugin', 'system', 0, 0, 1, 0, 0, 0, '0000-00-00 00:00:00', 'myPluginFormField=\n');

  (In my database the parameter myPluginFormField has no value stored yet.)

• Before running the above SQL query on the database of server Y, make sure that the table prefix (’jos_’) is similar to server Y. Also the ‘id’ number is an increment to the id number of the last jos_plugin table row on database of server Y.
• That did the trick. Open your plugin manager in Joomla Admin panel, and you can see that the plugin is finally visible and enabled.

Now when you know my above logics, you can understand that creating your own plugins in Joomla is not that hard at all.

Yes, Mootools and jQuery can conflict each other, when you load both on your page.
Ofcourse, they can use same method names, therefore one of both could break.
In my case, I received in Joomla 1.5 errors for removing handlers.

See, I’m a fan of jQuery, that doesn’t say that I dislike MooTools, but when you create a nice Template for Joomla 1.5 and you decide to use jQuery, the hell breaks open when implementing:

<jdoc:include type="head" />

This, is because Joomla 1.5 uses MooTools and Caption javascript frameworks, for the backend admin panel, but also some components may require it.
In this case I would say, fuck it. – I want to have my own choice of which framework I would like to use.
So stick together with jQuery and wrote the following lines in the top of my index.php template:

$headerstuff = $this->getHeadData();
$headerstuff['scripts'] = array();
$this->setHeadData($headerstuff);

Goodbye MooTools and Caption frameworks. – My conflicts are solved!