Creating components with the Ixxus Web Framework is easy. A component consists of a PHP Component class, an XSL for the view, and optionally CSS and JavaScript depending on the behaviour of your component.

In this example, I will be creating a simple Twitter feed component that will display a configurable number of Tweets from a configurable screen name. I am using the Arc90_Service_Twitter class as the service interface to Twitter. You can use any PHP API or write your own service layer.

Installing the API

If you wish to use an existing PHP API, simply copy the classes into the IXXUS.framework/src/external/php (if you want to make it available globally across all projects) or WebServer/sites/<site name>/src/external (if you want to only use it for a specific website) directory.

For this example, download the Arc90 Service code and place the unzipped code into IXXUS.framework/src/external/php/Arc90.

Creating the Component Class

Now your Twitter service API of choice is installed, the first step is to create the Twitter Component class that will perform the service request. As this component will simply be responsible for retrieving the data, only the getData method needs to be implemented. This method creates a new DOMDocument object to hold the XML response from Twitter and returns this object on success. On failure it throws an exception which is logged but caught by the component controller so that the page as a whole can still be rendered.

<?php
require_once('Arc90/Service/Twitter.php');

class Ixxus_Component_Twitter extends Component {
 public function getData() {
 // Create a container DOM object for the Twitter XML response
 $this->data = new DOMDocument();
 // Create an instance of the Twitter service
 $twitter = new Arc90_Service_Twitter();

 // Retrieve the XML response from Twitter. In this case, the user timeline is requested.
 // The count and screen_name parameters are passed from the Component constructor. 
 $response = $twitter->getUserTimeline("xml", array("count" => $this->options["items"], "screen_name" => $this->options["screen_name"]));
 if(!$response->isError()) {
 // On success, load the XML response into the DOM
 $this->data->loadXML($response->getData());
 // Log a debug message if debugging is switched on
 ErrorHandler::logMessage("[Arc90_Service_Twitter.getUserTimeline] Twitter service successful.", LOG_DEBUG);
 } else {
 // Throw an exception if there was a problem
 throw new Exception("[Arc90_Service_Twitter.getUserTimeline] Twitter service failed. Returned: ".$response->http_code);
 }

 // Return the data to the component controller
 return $this->data;
 }
}

To see the exact details of the getUserTimeline method and the XML response, please refer to the Twitter API documentation.

Creating the view

This component will product the following XML:

<component type="ixxus.component.twitter" id="twitter" class="Twitter">
 <options>
 <items>2</items>
 <screen_name>ixxus</screen_name>
 </options>

<statuses>
 <!-- Twitter XML response. See http://apiwiki.twitter.com/Twitter-REST-API-Method%3A-statuses-user_timeline -->
 </statuses>
</component>

We are going to create a simple unordered list of tweets in the view. To do this, you need to create a new XSL in the components directory.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet 
 version="1.0"
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

 <!-- Only match if statuses have been returned -->
 <xsl:template match="component[@type='ixxus.component.twitter']/statuses">
 <ul class="twitter listing">
 <xsl:apply-templates select="status" mode="ixxus.component.twitter"/>
 </ul>
 </xsl:template>

 <xsl:template match="statuses/status" mode="ixxus.component.twitter">
 <li>
 <img class="author" src="{user/profile_image_url}" alt="{user/name}" />
 <p><xsl:value-of select="text"/></p>
 </li>
 </xsl:template>
</xsl:stylesheet>

Putting it all together

Now that a component controller and view have been created, the new component can now be used easily from within a page controller. To do this, the new component is included into the page and added to the page controller by implementing the createComponents method.

<?php
require(APP::$IXXUS_FRAMEWORK_DIRECTORY."/component/twitter.php");

class Ixxus_Controller_Home extends IxxusPage {
 protected function createComponents() {
 parent::createComponents();
 // Add 1 or more components to this controller
 $this->addComponent(new Twitter("twitter", array("items" => 2, "screen_name" => "mattdunn2009")));
 }

 protected function getData() {
 // If necessary, get any data for this controller
 }
}

Finally, to render the component add an apply-template to the relevant layout XSL stylesheet. For example:

<xsl:apply-templates select="component[@type='ixxus.component.twitter']"/>

Final thoughts

There may also be JavaScript and CSS files that can be used and packaged up with the component. These are placed into the appropriate component directories and added as appropriate to the content build file which is used by the content builder utility in the Ixxus Web Framework. The details of how this works is out of scope for this article but will be covered in a future item.

There are also an number of improvements that can be made to this example.

  • Add caching using the built-in framework caching mechanism
  • Use the web.config to configure the component
  • Add a date range to limit the number of Tweets or to show only recent Tweets