Part 2: The plugin

For documentation on writing a Joomla! plugin, follow this link .

Just like with the Foo plugin, we need to send the links to Linkr through plugin events. But this time, we're also going to include some scripts:

class plgContentHello_linkr extends JPlugin
{
  // ...
  // ... plugin code
  // ...
 
  /**
  * Javascript 
  */
  function onLinkrLoadJS( $version )
  {
    // Include the "hello_linkr.js" file.
    // TIP: add "?random-string" to
    // the filename to prevent caching
    // by the browser when testing.
    $doc = & JFactory::getDocument();
    $file = 'plugins/content/hello_linkr.js?'. time();
    $doc->addScript(JURI::root() . $file);
 
    // This is the AJAX endpoint
    // for the plugin. We'll store
    // this URL in the HelloLinkr object.
    $u = JURI::base() .
          'index.php?option=com_hello_linkr'.
          '&tmpl=component'.
          '&view=hello'.
          '&'. JUtility::getToken() .'=1';
 
    // Return the script to be added
    // in the document HEAD.
    return 'HelloLinkr.init("'. $u .'");';
  }
}

As you can see, the plugin waited until Linkr was ready to load the javascript files with the use of the onLinkrLoadJS event. Also, the plugin took this opportunity to set the AJAX request URL in the HelloLinkr object (on the client side).

Now, lets look at what is going on on the client side. If you glimpse into the plugin's PHP file (plugins/content/hello_linkr.php), you'll see that the "Hello Linkr" link is going to call the layout method of the HelloLinkr object when clicked. This method needs to load content into the Linkr page that will allow the user to translate the text:

var HelloLinkr =
{
  // ...
 
  // Displaying the layout
  layout : function()
  {
    // DIV container
    var div    = new Element('div', {
      styles : {
        padding : '20px 0 0 40px'
      }
    });
 
    // ... other code
    // see the plugin's javascript file
    // in "plugins/content/hello_linkr.js"
 
    // Display the content
    LinkrHelper.htmlLayout('Hello Linkr', div);
}
 

The layout is displayed through the htmlLayout method. Notice the use of "Elements ". You might prefer to use HTML strings instead:

var div = '<div>This is an HTML string</div>';
LinkrHelper.htmlLayout('Hello Linkr', div);

When the user selects a language from the dropdown list, a request is sent to the Hello_Linkr component on the server side (com_hello_world), which in turn, returns the translated text with it's single controller.

See the attachements below to try it yourself.

Compatible: Linkr 2.0+, Joomla! 1.5.1+

< Prev		Next >