For the second installment in the dynamic small view using yml:a talks, I wanted to take you through another implementation of the yml:a tag created during some head pounding platform work.
The Problem
The My Yahoo! small view of an application can’t automatically refresh itself with fresh content. If a user never goes to the large view of your application, they will always see the same stale content in the small view on their My Yahoo! page. If your application relies on fresh content being presented to the user, you need a way of updating the small view content from the small view.
The Solution
Basically, what you are trying to do to make this happen is to find a way to make a request to a server side script which will, in turn, instantiate a new Yahoo! session and set the small view content. Again, because of the AJAXian behavior that can be accomplished using the yml:a tag, it’s the perfect candidate for our needs.
There are two methods that we’ve used for this task. The first one uses the tab example I spoke about in my last post. Each time a tab (which is a stylized yml:a tag) is clicked, yml:a will call a server side script to rebuild the tab group. While this is occurring, new content can be cached for the user’s small view.
The second method, and the one that I’ll go over in depth, is to includ a yml:a link on your small view to “Update Small View”. I like the idea of updating the small view automatically using the tab method, but I also like having this option available to users so that if they see something that is out of the ordinary they can refresh to update their view at will. Let’s look at a code implementation behind this example.
First things first, when the large view of your application loads, you’ll need to set the small view. For our needs, all we’re going to insert in the small view (from PHP) is the yml:a link to update:
<?php
require_once('Yahoo.inc');
//define constants to store your API Key (Consumer Key) and Shared Secret (Consumer Secret)
define(“API_KEY”,“YOUR KEY”);
define(“SHARED_SECRET”,“YOUR KEY”);
//initializes session and current user
$yahoo_session = YahooSession::requireSession(API_KEY, SHARED_SECRET);
$yahoo_user = $yahoo_session->getSessionedUser();
//set the small view
$uid = $yahoo_user->guid;
$yml = “<div id=’containerHolder’></div><yml:a params=\”updateSmall.php?uid=”.$uid.“\” replace=\”containerHolder\”><span style=\”color:#fff;\”>Click Here to Refresh Your View</span></yml:a>”;
$yahoo_user->setSmallView($yml);
?>
As we can see, the small view will now have a refresh link on it which in turn calls updateSmall.php through an AJAX request with the user id of the person that clicked on the link, then replaces the DOM element with the id of containerHolder. In updateSmall.php, we’ll capture the user id passed in to us, instantiate a 2-legged OAuth session, then use that id to update the small view cache of the user and finally dump out the new small view content that will be replaced. This would look something like:
<?php
require_once('Yahoo.inc');
define("API_KEY","YOUR KEY");
define("SHARED_SECRET","YOUR KEY");
$uid = $_REQUEST['uid'];
$yahoo_session = new YahooApplication(API_KEY, SHARED_SECRET);
$small_view = ‘Hey, this is my new small view!’;
if (!$yahoo_session->setSmallView($uid, $small_view)){
echo “ERR: $uid <br />”;
}
echo $small_view;
?>
That’s it, you should now have an easy method for updating the small view for the user using yml:a, as well as updating their small view cache so that they will see the new small view if they refresh the page.
– Jonathan LeBlanc
One Comment, Comment or Ping
It was brought to my attention that this sample was failing when the ajax request was being made. I adjusted the sample so that the container to be replaced was in the small view, removed the view on the yml:a tag, and removed the html container from the top. This should make the sample functional. Thanks and good catch Hamish.
February 27th, 2009
Reply to “Updating your YAP small view using yml:a”
You must be logged in to post a comment.