The Hello World extension demonstrates how a component and a plugin can be combined to display content. The extension will translate the text "Hello Linkr" into any of the specified languages using Google Translate.

This tutorial is divided into two parts: the component part and the plugin part.

Part 1: The component

For documentation on building a Joomla! component, follow this link .

For this example, the component will follow the MVC design. Since this extension does nothing else outside Linkr, it will have one controller. Moreover, the only task for the controller will be to display the translated text. So, no view is needed here. The controller needs to be able to send text over an AJAX request. Here's one way to do it:

// Hello Linkr controller
class Hello_linkrController extends JController
{
  function display()
  {
    // Get model
    $hello = & $this->getModel( 'hello' );
 
    // Get the language we're translating into
    $lang = JRequest::getVar( 'lang', 'hr' );
 
    // Get translation
    $trans = $hello->getTranslation( $lang );
 
    // Since this is an AJAX request,
    // we don't need a view to display the result.
    // In this example, we will simply echo it
    // and shutdown the Joomla! application.
    echo $trans;
 
    // Quit Joomla!
    global $mainframe;
    $mainframe->close();
  }
}

This can be done in a number of ways, and you should find the one that fits best into your extension.

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 >