TabView Widget - Bagian 2

This hack is courtesy of Hoctro, translated to Indonesian by Bikinblogger.

Kawan-kawan, langkah gua selanjutnya adalah menyempurnakan the TabView widget dengan nambahin dua tab default yang gunanya buat nunjukin komentar maupun tulisan terbaru dari sebuah blog. Gua juga udah memodifikasi kode tertentu jadi elu ntar bisa punya berbagai blog yang muncul dengan view yang berbeda-beda. Kalo elu udah nginstal widget ini seblon hari Sabtu, 19 Mei 2007, coba elu instal lagi tiga langkah terdahulu.

Multiple TabView....

Tapi tunggu dulu anak muda, ada sebuah keterangan sedikit tentang hal yang menyangkut "commenting out" dari sebuah template Blogger.

Kalo elu pengen ngeluarin sejumlah kode yang berada diantara <script> and </script>, elu bisa nggunain // buat kode tunggal, atau /* */ buat kode multiple.

Untuk kode template diluar Javascript seperti html tags, gunain ini nih <!-- -->

Nha sekarang, buat ngeliat hasil dari multiple tab views, di langkah nomer 3 dari tutorial "TabView Widget - Pengantar" tutorial, tinggal elu ilangin <!-- in front of and -->

setelah kode yang tercetak tebel dibawah sehingga kodenya akan berbentuk seperti ini

<div>
<h2>Hoctro's Place</h2>
<div class='yui-navset' id='multiTab1'/>
</div>


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

dan jangan lupa di deket bagian paling bawah elu ilangin /* in front of and dan */
setelah kode tebel dibawah sehingga segmennya akan terlihat seperti ini:

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


var blog2 = "hackosphere.blogspot.com";
var tabView2 = new YAHOO.widget.TabView('multiTab2');
var labels2 = ['Neo','Widgets', "Blogger Power"];
function listTab2(json) {
listOneTab(json, tabView2, "", false);
}
function listLatestPostsTab2(json) {
listOneTab(json, tabView2, "Latest Posts", true);
}
function listLatestCommentsTab2(json) {
listOneTab(json, tabView2, "Latest Comments", false);
}
// Activating calls!
// Latest Posts
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');

// Latest Comments
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');

// Preferred Labels
for (var i=0; i < labels2.length; i++)
if (labels2[i]) cb.searchLabel("hackosphere.blogspot.com", labels2[i], 'listTab2');

</script>

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

Sekarang elu bakalan ngelihat penampakan tab view yang lain, yang memperlihatkan Post2,komentar2 terakhir si Hackosphere dan sejumlah watch list dari label-label yang menarik.

Penampakan tab view yang laen....

Seperti yang elu bisa lihat, Gua sengaja bikin ini agak mudah buat elu untuk nambahin tab view yang baru, dengan cara ngilangin comments. Tapi proses buat nambahin view yang baru dari program memang agak ruwet, jadi elu musti agak konsentrasi biar jadinya bener. Gua sih percaya, kalo elu tertarik baca artikel ini,pasti elu udah gape buat bikin. (Gua sih pengennya nggunain penyelesaian yang paling manteb, yaitu dengan nulis sebuah pseudocope class, tapi sayangnya gua masih kurang pengalaman buat ngoprek json dan array menjadi sebuah parameter by reference. Jadi hadapilah kenyataan dengan pemecahan masalah yang agak konvensiaonal macem gini.)

Nambahin sebuah tab view baru ke dalam widget adalah sebuah proses tiga tahap, dan gua bakalin ngajarin elu secara bertahap.

Langkah 1.

Kalo elu belum pernah nginstal TabView widget, tolong diinstal dulu.

Sekarang kita coba nambahin view ketiga dari blog lain dengan tujuan untuk melacak perkembangan terbaru dari blognya si Hans' Beautiful Beta blog, dan ini bakalan banyak melibatkan buanyak cut-and-paste, modifikasi dan juga logika eluh. MAri kita namain id dari "div" yang bakal kita bikin ini sebagai multiTab3.

Langkah 2: Nambahin kode HTML buat nampung/ngandangin judul dan tabview

Di bagian ini memungkinkan elu untuk menyususn tampilan dari tab views, baik itu vertikal, atau seperti tabel 2 kolom, ato apapun yang elu pengenin.

Di kode pada langkah nomer 3 di bagian 1, cut dan paste kode dibawah ini tepat di sebelahnya.

<div>
<h2>Hoctro's Place</h2>
<div class='yui-navset' id='multiTab1'/>
</div>


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

lalu gantiin isi h2 dan id-nya menjadi (yang ditebelin):

<div>
<h2>Beautiful Beta</h2>
<div class='yui-navset' id='multiTab3'/>
</div>

Langkah 3: Tambahin kode Javascrip buat bikin view baru
Di langkah kode nomer 3 di bagian 1, cut dan paste kode dibawah tepat setelahnya.

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');

Lha yang bakal kita kerjain sekarang ini kerjaan kuli nih, karena kita pengen menggandakan apapun dari "1" ke "3", atau merubah nama blog, seperti

blog1 -> blog3
hoctro.blogspot.com -> beautifulbeta.blogspot.com
tabView1 -> tabView3
multiTab1 -> multiTab3
labels1 -> labels3

dan seterusnya.

Tapi tenang dulu jangan panik, di bawah ini gua udah nemuin solusinya biar gak jadi kuli, dengan ngganti semua yang tercetak tebal dibawah:

var blog3 = "beautifulbeta.blogspot.com";
var tabView3 = new YAHOO.widget.TabView('multiTab3');
var labels3 = ['hacks', 'tutorials','widgets', 'gadgets']; // These are Hans' labels.
function listTab3(json) {
listOneTab(json, tabView3, "", false);
}
function listLatestPostsTab3(json) {
listOneTab(json, tabView3, "Latest Posts", true);
}
function listLatestCommentsTab3(json) {
listOneTab(json, tabView3, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog3, "posts", 1, 25, 'listLatestPostsTab3');

// Latest Comments
cb.search( blog3, "comments", 1, 25, 'listLatestCommentsTab3');

// Preferred Labels
for (var i=0; i < labels3.length; i++)
if (labels3[i]) cb.searchLabel(blog3, labels3[i], 'listTab3');

Gua juga nyadarin kalo kode html di langkah nomer 2 bisa elu tarok dimanapun, jadi gua baru aja mindahin tab view hoctro.blogspot.com gua ke depan widget blog, dan berhasil dengan mantabhnya.

Gitu aja men! Cobain deh !

Selamat mencoba.