Sunday, May 27, 2007

TabView Widget

ကိုယ့္ဘေလာ့ရဲ႕ပို႔စ္ေတြ၊ ကြန္မန္႔ေတြ ဒါမွမဟုတ္ တျခားဘေလာ့ေတြရဲ႕ပို႔စ္ေတြကို Tab ကေနၾကည့္လို႔ရေအာင္လုပ္ထားႏိုင္တဲ့ Widget ေလးပါ။ ကၽြန္ေတာ္ကိုယ္တိုင္ေရးတာေတာ့ ဘယ္ဟုတ္ပါ့မလဲေနာ္ (လူတိုင္းလဲ သိေလာက္ပါတယ္)။ Hoctro ရဲ႕ဖန္တီးထားတဲ့ Widget တစ္ခုပါ။ Yahoo! ရဲ႕ TabView Widget ကိုအေျခခံၿပီး ေရးထားတာျဖစ္ပါတယ္။ အဲဒီလိုျဖစ္ေအာင္ သူ႔ရဲ႕ပို႔စ္ ၄ ခုကို ဖတ္လိုက္ရပါတယ္။ နည္းနည္းေတာင္ မူးသြားတယ္ဗ်ာ။ သူ႔ဆီက ခြင့္ျပဳခ်က္ေတာင္းၿပီး ဒီမွာ ဘာသာျပန္ေပးလိုက္ပါတယ္။ ဖတ္တဲ့လူေတြ အဆင္ေျပေအာင္ ပို႔စ္တစ္ခုထဲမွာေပါင္းေရးလိုက္ပါမယ္။

အဆင့္-၁
ေအာက္မွာျပထားတဲ့ Javascript ကုဒ္ေတြကို </head> ရဲ႕အေပၚနားမွာ ကူးထည့္လိုက္ပါ။ ဒါမွမဟုတ္ အဲဒီကုဒ္ေတြကို js ဖိုင္အေနနဲ႔ hosting တစ္ခုမွာတင္ထားၿပီး ေခၚသံုးလဲရပါတယ္။ကၽြန္ေတာ္ကေတာ့ တန္းပလိတ္ထဲမွာပဲ အဲဒီကုဒ္ေတြအကုန္လံုးကို ကူးထည့္ထားပါတယ္။

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.

// "cb" is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {

// search function requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. type: type of return data, either "comments" or "posts",
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.

search: function(query, type, start, increment, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/' + type + '/default?alt=json-in-script&start-index='
+ start + '&max-results=' + increment + '&callback=' + func + '&orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},

// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&callback=' + func + '&orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},

// getTotalResults needs the json object, and it'll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},

// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},

// getLink return a href link if "name" matches the content inside "a" tags) of the link
getLink: function(entry, name) {
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},

// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},

// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},

// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},

// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + " Widget by <a href='http://hoctro.blogspot.com" + "'>Hoctro</a>";
}
};
</script>


အဆင့္-၂
ၿပီးရင္ေတာ့ ေအာက္ကကုဒ္ေတြကုိ ခုနထည့္ထားတဲ့ javascript ရဲ႕ေအာက္နားမွာပဲ ထပ္ထည့္လိုက္ပါဦး။ </head> ရဲ႕အေပၚမွာပဲ ရွိေနရမွာကိုသတိျပဳပါ။

<link href='http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js' type='text/javascript'/>



<style type='text/css'>

.yui-content {
padding:1em; /* pad content container */
}

.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}

.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}

/* top oriented */

.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}

.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>


အဆင့္-၃
ေနာက္တစ္ဆင့္အေနနဲ႔ တန္းပလိတ္ရဲ႕ ကိုယ္ထားခ်င္တဲ့ေနရာမွာ widget ကုဒ္ေတြထည့္ရပါမယ္။ ကၽြန္ေတာ့ဘေလာ့ကလို ပို႔စ္ေတြရဲ႕အေပၚမွာ ထားခ်င္ရင္ေဟာဒီကုဒ္ေတြကို အရင္ရွာပါ။

<b:section class='main' id='main' maxwidgets='4' showaddelement='yes'>


အဲဒီေအာက္မွာမွေအာက္က widget ကုဒ္ေတြကိုထည့္လိုက္ပါ။ (expend widget template ဆိုတဲ့ checkbox ကိုႏွိပ္ဖို႔ မေမ့ပါနဲ႔။)

<b:widget id='HTML102' locked='false' title='MultiTab Widget' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'
></h2>
</b:if>
<div id='doc'>
<div>
<h2>Hoctro's Place</h2>
<div class='yui-navset' id='multiTab1'/>
</div>

<div>
<h2>Friends Posts</h2>
<div class='yui-navset' id='multiTab2'/>
</div>

</div>
<div id='103'/>
</div>

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
var p1 = document.createElement('h6');
document.getElementById('103').appendChild(p1);
p1.innerHTML = cb.txt('TabView');

function listOneTab(json, tabView, title, act) {
var label = '';
var text = '';
var nPost = 10;

if (title == "")
label += cb.getLabelFromURL(json);
else
label += title;

text += "<div id='" + label + "'><ul>";

var numberPost = (json.feed.entry.length <= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i < numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "<a href='" + cb.getLink(entry, "alternate")
+ "'>" + cb.getTitle(entry) + "</li>";
}

text += '</ul></div>';

tabView.addTab( new YAHOO.widget.Tab({
label: label,
content: text,
active : act
}));


}

var blog1 = "hoctro.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];
function listTab1(json) {
listOneTab(json, tabView1, "", false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, "Latest Posts", true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');

// Latest Comments
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');

// Preferred Labels
for (var i=0; i < labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');


var tabView2 = new YAHOO.widget.TabView('multiTab2');

function listLatestPostsTab2a(json) {
listOneTab(json, tabView2, "Hackosphere", true);}
cb.search( "hackosphere.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2a');

function listLatestPostsTab2b(json) {
listOneTab(json, tabView2, "Beautiful Beta", false);}
cb.search( "beautifulbeta.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2b');

function listLatestPostsTab2c(json) {
listOneTab(json, tabView2, "Blogger Hacked", false);}
cb.search( "blogger-hacked.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2c');

function listLatestPostsTab2d(json) {
listOneTab(json, tabView2, "Phydeaux", false);}
cb.search( "phydeaux3.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2d');

function listLatestPostsTab2e(json) {
listOneTab(json, tabView2, "Blog U", false);}
cb.search( "bloggeruniversity.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2e');

function listLatestPostsTab2f(json) {
listOneTab(json, tabView2, "Purple Moggy", false);}
cb.search( "purplemoggy.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2f');

function listLatestPostsTab2h(json) {
listOneTab(json, tabView2, "The Last Word", false);}
cb.search( "lastword.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2h');



</script>
</b:includable>
</b:widget>


ၿပီးရင္ အေပၚကကုဒ္ထဲက

<h2>Hoctro's Place</h2>


ဆိုတဲ့ေနရာမွာ ကိုယ္ႀကိဳက္တာေျပာင္းထည့္လိုက္ေပ့ါ။

var labels1 = ["JSON Hacks", "Label Hacks",
"Free Templates", "Notable Hacks"];


ကိုလည္းကုိယ့္ေလဘယ္ကိုယ္ထည့္ရဦးမယ္။

ေနာက္ၿပီး

blog1 = "hoctro.blogspot.com";


ဆိုတဲ့ေနရာမွာ ကိုယ့္ဘေလာ့လိပ္စာကို ထည့္ပါ။ မဟုတ္ရင္ေတာ့ ကုိယ့္ဘေလာ့ကဟာေတြ ေပၚမွာမဟုတ္ဘူး။

var tabView2 = new YAHOO.widget.TabView('multiTab2');

function listLatestPostsTab2a(json) {
listOneTab(json, tabView2, "Hackosphere", true);}
cb.search( "hackosphere.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2a');


အဲဒီေနရာေတြမွာေတာ့ ကိုယ္ထည့္ခ်င္တဲ့ ဘေလာ့ဂါေတြရဲ႕နာမည္နဲ႔ လိပ္စာေတြ ေျပာင္းထည့္ေပးလိုက္ရံုပါပဲ။ ဥပမာ ကိုမ်ိဳးေက်ာ္ထြန္းရဲ႕ဘေလာ့ကို ထည့္ခ်င္တယ္ဆိုပါစို႔။

function listLatestPostsTab2a(json) {
listOneTab(json, tabView2, "MyoKyawHtun", true);}
cb.search( "myochauhtun.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2a');


ဆိုၿပီးထည့္လိုက္ရံုပဲ။ သူ႔ေအာက္က က်န္တဲ့ Tab ေတြမွာလဲ ထည့္ခ်င္တဲ့လိပ္စာေတြ ေျပာင္းထည့္ေပးလိုက္ရင္ အိုေကၿပီ။

ကၽြန္ေတာ္ေရးထားတာ ရွဳပ္ေနေသးတယ္ဆိုရင္ေတာ့ သူ႔မူရင္း အဂၤလိပ္လိုေရးထားတဲ့ပို႔စ္ကို သြားၾကည့္လိုက္ပါ။

Introducing TabView Widget-Part 1
Introducing TabView Widget-Part 2
Latest Post of TabView Application



Technorati:, ,

6 comments:

Myo Kyaw Htun said...

Cool! bro! :D

Wai Yan said...

Hoctro ထြင္ထားတဲ့ Widget ကုိစမ္းသံုးၾကည့္ထားတာပါ။ ဘယ္လိုေနလဲေတာ့မသိဘူး။ loading ၾကာသြားမယ္ထင္တယ္။

I'm not u said...

အကိုေရ ကြ်န္ေတာ္ေတာ႔ ဒီဟာေလးကို ၾကိဳက္တယ္
အပ်င္းၾကီးဖို႔အတြက္လုပ္ထားၾကည္႔တယ္
အဲးဒီ ဟာကို blog ရဲ႕ေအာက္မွာလုပ္ခ်င္ရင္
ဘယ္လိုလုပ္လဲး မသိဘူး ခင္ဗ်
ေက်းဇူးပါပဲး

MyTH59 said...

ကိုေ၀ယံလင္းေရ။ အရမ္းအသံုး၀င္တဲ့ Widget ေလးပါပဲ။ ေက်းဇူးပါခင္ဗ်ာ။

MyTH59 said...

ကုိေ၀ယံလင္းေရ။ ကၽြန္ေတာ္ဘေလာ့ဂ္မွာ ဒီပို႕စ္ကို လင့္ခ္ထားပါတယ္ခင္ဗ်ာ.. ေက်းဇူးေနာ္

Wai Yan said...

ရပါတယ္ ကိုမ်က္လံုး။ ေက်းဇူးတင္ပါတယ္ခင္ဗ်ာ။