My Yahoo!’s implementation of the Yahoo! Application Platform (YAP) is usually perceived as a mixed bag with the developers and partners we’ve been working with. On the one hand this is the implementation of the platform on Yahoo! and on the other developers feel restricted because the small view that displays on My Yahoo! only allows HTML, CSS and YML. Some developers have gone the route of just placing glorified ads or static content on their small views. Enter the yml:a tag…one of the most powerful tools at a developer’s disposal on the platform.
The yml:a tag can be seen as a replacement to the normal HTML anchor tag, but it is much more than that. Including AJAX functionality with DOM insert / replace techniques, this tag can mimic a dynamic environment to allow developers a greater degree of flexibility.
So, I can spout off all of the promotional material I want, but what use is it without examples to back it up. This code sample will provide all of the functionality of a dynamic tab set within the small view, where the tabs are defined as yml:a tags:
<?php
require_once('Yahoo.inc');
if ($_GET['tabNum']){
echo build_tabs($_GET['tabNum']);
} else {
//define application key constants
define("API_KEY","YOUR KEY HERE");
define("SHARED_SECRET","YOUR KEY HERE");
//initialize 2-legged OAuth session
$yahooSession = new YahooApplication(API_KEY, SHARED_SECRET);
//set up static html / style block
$tabNum = ($_GET['tabNum']) ? $_GET['tabNum'] : 1;
$tabCode = "<style>
div.pad5{ padding:5px }
div.tabGroup{ position:relative; border-bottom:0; }
div.tabGroup div{ background-color:#fff; float:left; width:50px; border:1px solid #795089;
border-bottom:0; padding:5px 10px; text-align:center;
font:bold 12px arial,helvetica,sans-serif; cursor:pointer; }
div.tabGroup div a{ color:#795089; text-decoration:none; }
div.tabGroup div.selected{ background-color:#795089; }
div.tabGroup div.selected a{ color:#fff; }
div.tabGroup div:hover{ background-color:#e2ceea; }
div.tabGroup div.selected:hover{ background-color:#795089; }
div.tabContent{ border:1px solid #795089; border-top:10px solid #795089; padding:5px 10px; }
div.myBox{ width:232px; height:44px; background-image:url(http://l.yimg.com/a/i/ww/beta/y3.gif); }
</style>";
$tabCode .= "<div class='pad5'>" . build_tabs($tabNum) . '</div>';
$guid = "YOUR GUID";
if (!$yahooSession->setSmallView($guid, $tabCode)){
echo "UNABLE TO SET SMALL VIEW";
}
echo "LARGE VIEW CONTENT";
}
function build_tabs($tabNum){
$tabCode = "<div id='tabContainer'><div class='tabGroup'>";
//create tab set using the tabNum as the selected tab
for ($i = 1; $i < 4; $i++){
$isSelected = ($i === intval($tabNum)) ? 'selected' : '';
$tabCode .= "<div class=\"$isSelected\"><yml:a params=\"?tabNum=$i\"
replace=\"tabContainer\">Tab $i</yml:a></div>";
}
//create tab content
$tabContent = '';
switch($tabNum){
case 1: $tabContent = 'Hi <yml:name uid="viewer" />! This is tab content 1!'; break;
case 2: $tabContent = 'Here is my profile badge:<br /><yml:user-badge />'; break;
case 3: $tabContent = 'My Pics:<br /><yml:image
src="http://farm1.static.flickr.com/195/449142212_c2e72f83d7.jpg"
height="166" width="250" alt="Faceball" />'; break;
default: break;
}
//build tab content with defined string
$tabCode .= "<br style='clear:both'></div><div class='tabContent'>$tabContent</div></div>";
return $tabCode;
}
?>
Let’s break the code down into the pertinent parts and explain what the heck is going on. This code can be placed as the landing page for your application full view. What will happen is that it will generate a new small view which will display the tabs as yml:a tags. When a tab is clicked, yml:a will send an AJAX request to this same file, but will pass in a numeric query parameter (defined as ‘tabNum’) which will signal which tab has been clicked. The if / else statement at the top will control that flow. If tabNum is not defined, the core container and CSS will be created and the small view will be set using setSmallView. If tabNum is set, just the build_tabs function will be called to recreate the tab container and return it. Essentially, the yml:a tag is just replacing its own container with a new tab view in order to make it look like a new tab has been clicked, without refreshing the page, resetting the css or re-encoding the small view.
Let’s look specifically at the yml:a tag within the build_tabs function, where each tab is defined as:
<yml:a params=”?tabNum=$i” replace=”tabContainer”>Tab $i</yml:a>
The params attribute specifies that the same file will be called (since no file is defined) and will pass one query parameter, the tab number. The replace attribute specifies the id of the DOM element that will be replaced in the small view once the AJAX request successfully returns. In this case we are replacing the entire tab container, the div with the id of “tabContainer”.
That’s all there is to it. That’s one of the many dynamic things you can do with the yml:a tag.
Links:
- Tab tutorial on YDN
- yml:a tag description and samples
– Jonathan LeBlanc
3 Comments, Comment or Ping
I really liked this post. Can I copy it to my site? Thank you in advance.
May 10th, 2009
I’m glad you enjoyed it, and sure thing – that would be fine as long as you don’t mind linking back here please.
- Jon
May 11th, 2009
Reply to “Building a dynamic small view on YAP using yml:a”
You must be logged in to post a comment.