WebCenter - Exposing Twitter Data in an ADF WSRP2 Portlet

How many times have you been asked to consume a web service and display it in a portal? Thankfully development tools have come a long way and it is now trivial to consume a service for display - even if the service consists of XML without an XSD. In this tutorial we will use JDeveloper to consume an XML feed from Twitter (RSS) and display it within WebCenter using ADF.

Check out the video below for a complete walkthrough. Source and steps are beneath the video. Happy coding!

Download the Twitter Fusion project source

Development Steps
1. Open Twitter and find an account that you would like to follow
2. View the RSS feed for that account and save it to a location on your local disk
3. Open JDeveloper
4. Create a new application called "Twitter Fusion" using the Application Template "Fusion Web Application (ADF)"
5. Navigate to "Application" -> "Project Properties" -> "Java EE Application" and update "Java EE Web Application Name" and "Java EE Web Context Root" to "twitter"
6. Add "WebCenter Portlet Creation Service" to the view project
7. Create folder in "Web Content" called "xsd", this will house the XSD file that let's JDeveloper understand the content coming from Twitter
8. Within the XSD folder create a new file "XML Schema from XML Document", name this file twitter.xsd, browse to the XML document that you saved from Twitter's RSS feed
9. Within the "Web Content" folder create a new JSF page, name it twitter.jspx
10. Run the JSF page and note the URL (http://x.x.x.x:7101/twitter/faces/xsd/twitter.xsd)
11. Using the path copy the URL to the XSD file
12. In the Model project create a new URL Data Control using the RSS feed as the URL and the URL to the XSD that was just created
13. Drill into the newly created Data Control DC_URL -> loadData() -> Return -> rss -> channel -> item and drag and drop the item node into the JSF page
14. On the ADF page select Table -> ADF Read-only Table from the options list
15. Enable "Row Selection" and "Sorting", remove description, guid and source
16. Navigate to the "af:table" node in Structure pane in JDeveloper and select "af:table"
17. In the Property Inspector pane under Apperance -> ColumnStretching select Last
18. On the JSF page click and drag the Title column to the far right of the page
19. Right click the JSF page and select Run to review the page
20. In JDeveloper right click twitter.jspx and select "Create Portlet Entry". Enter TwitterFusion in the first 4 fields and enter a description/
21. Right click twitter.jspx and select Run
22. In your browser adjust the URL to expose the WSDL for the WSRP entry for the new portlet - use the WSRP2 entry (http://x.x.x.x:7101/twitter/portlets/wsrp2?WSDL)
23. Open the Enterprise Manager instance for WebCenter
24. Navigate to the Register Producer section of Enterprise Manager and enter the WSRP2 URL from the WSDL displayed in your browser previously. Call the new entry Twitter Fusion
25. Open your WebCenter instance, navigate to a page and open composer. Select Portlets -> Twitter Fusioon -> and TwitterFusion to add the Twitter portlet to your page.


Great work! We need more of these.. ;) I have taken a different approach for creating custom portlets that are integrated with twitter, flikr and external RSS feed. As a number of clients use WebCenter/Spaces internally and our environments do not have access to external sites to pull the RSS feed. For json, Flikr I use JSONP approach to pull the data and use javascript to update the Dom. ie - "http://twitter.com/statuses/user_timeline/"+userName+".json?callback=twitterCallback2&count="+numTweets For XML, RSS feeds I use the google API to convert XML to JSON to follow the same approach using google as the proxy. "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+urlToXML Works quite well :) using the portlet to store custom variables like userName; numTweets; urlToXML.

Posted by John Sim on November 04, 2010 at 12:12 AM CDT #

@John your approach is more HTML and Javascript approach, you don't or rarely need for a server side code using your approach, I believe it's desirable if performance is an issue. But I believe the ADF way is easier, don't you think!

Posted by Amr Gawish on November 05, 2010 at 10:37 PM CDT #

Thanks for the comments John and Amr :-) Amr - great blog BTW at http://blog.amr-gawish.com/ John - really great post at http://www.bluestudios.co.uk/blog/?p=1148 with regard to using the WebCenter APIs. Look forward to seeing more updates.

Posted by john.brunswick on November 06, 2010 at 06:40 AM CDT #

@Amr - yup my approach is purely JS; Dom Manipulation. The downside to my approach is it relies on the client machine and the client having access to pull in the feed. But if the WebCenter machine is only internal and does not have access to external feeds my approach is an alternative solution as long as the client isn't blocked by proxy to access the feed. Another pro to using JS is that I can auto update the feed and regenerate the DOM without refreshing the page/portlet. Downside is javascript generation takes up additional browser resource whereas ADF pre-generates the feed. What would happen if the feed connection was slow? Would this slow down the site as it would have to wait to receive the feed before it could potentially pregenerate serverside page for the client?

Posted by John Sim on November 11, 2010 at 12:44 AM CST #

Hi John, Thanks for putting together a nice article. I have a question on integrating with Facebook. Is that possible using oracle web center? Your response to my email is appreciated. Thanks Andy

Posted by Andy K on January 17, 2011 at 03:29 AM CST #

Thanks for the kind words Andy. I would have to know more about your usecase, but WebCenter can definitely integrate with Facebook. Facebook uses a REST based approach for most of their integration and have focused on using Javascript to enable the communications - making it platform agnostic. Within your WebCenter application or portal you can expose Facebook data and write back to Facebook by passing in parameters (user name, etc) to Facebook. The Developer Guide at http://download.oracle.com/docs/cd/E14571_01/webcenter.1111/e10148/toc.htm contains details on the various APIs available. If you are familiar with JavaScript, you will not have an issue combining the WebCenter information into Facebook. To consume Facebook information in WebCenter you will need to be familiar with JSON, as most Facebook data is returned in that format. Facebook Development Guides / References http://developers.facebook.com/ http://developers.facebook.com/docs/reference/api/ http://developers.facebook.com/docs/reference/javascript/ If you are using Ensemble inside of WebCenter, you can also use technologies like PHP to create integations between WebCenter and Facebook https://github.com/facebook/php-sdk/ Good luck with the integration, hopefully the above comments and link provide a good starting point for your work. HTH!

Posted by john.brunswick on January 18, 2011 at 02:43 AM CST #

Post a Comment:
Comments are closed for this entry.

Enterprise 2.0 and Content Management


« August 2016