ADF Twitter timeline

Yesterday I was playing with twitter widgets, specifically I was trying to add the timeline to my blog, Is quite simple and these are the steps.

Log-in on your twitter account and go to "setup" menu item.

Now go to "Widgets" option and try to create a new one.

You can create timeline by user or by hashtag, in this example is created with #webcenter hashtag.

After the creation, the page will give you the HTML code to embed the timeline on your website. We have to look the <a> tag and save the "href" and "data-widget-id"

<a class="twitter-timeline" href="https://twitter.com/search?q=%23webcenter" data-widget-id="385306900536885248">Tweets sobre "#webcenter"</a>

Now we have the HTML to add the timeline in any page, but this won't work on an ADF application. Lets move this code to a TaskFlow, the first step is to create a JSF fragment for our taskflow that handles the HTML code provided by twitter. This is my fragment code:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:trh="http://myfaces.apache.org/trinidad/html">
  <af:panelGroupLayout id="pgl1" layout="vertical">
    <a class="twitter-timeline" href="${pageFlowScope.href}" data-widget-id="${pageFlowScope.id}">Tweets by @${pageFlowScope.referer}</a>
    <trh:script generatesContent="true" id="jsTwitter">
    !function(d,s,id)
    {
        var js, fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'https';
        if(!d.getElementById(id))
        {
            js=d.createElement(s);
            js.id=id;
            js.src="https://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }
    (document,"script","twitter-wjs");
    </trh:script>
  </af:panelGroupLayout>
</jsp:root>

As you see, href and id are taskflow input parameters, when you add the taskflow on your page you have to add the parameters that were kept from last step.

Create a TaskFlow with the previous view as main view. Also add the both parameters as input for the taskflow.

After all, you only have to drop your TaskFlow as a region on a test page, this is my sample configuration:

Finally this is the result of the ADF TaskFlow after loading the twitter timeline.

Download the sample (link) and export as a ADF TaskFlow for the use on your ADF application.