BASE UI->Tag Groups（Titaniumの勉強メモ） #JavaScript

入門になったら、勉強がなかなか進まなくて、KitchenSinkのサンプルソースを追って勉強しようかと思っています。興味のある方は一緒に勉強しましょう。コミュニケーションの場になればなあと思います。

■ソースのURL：
https://github.com/appcelerator/KitchenSink/blob/master/Resources/examples/tab_groups.js

/Resources/examples/tab_groups.js

var win = Titanium.UI.currentWindow;

// get tab group object
var tabGroup = win.tabGroup;

//
//  ADD/REMOVE TAB
//
var addTabButton = Titanium.UI.createButton({
    title:'Add/Remove Tab',
    top:10,
    height:40,
    width:200
});

// create button event listener
// ===========================================================================
// addTab(tabObject)及びremoveTab(tabOjbect)によるTabの追加と削除のサンプルです。
// ===========================================================================
addTabButton.addEventListener('click', function(e)
{
    if (tabGroup.tabs.length == 5)
    {
        var win = Ti.UI.createWindow({title:'New Tab Window',barColor:'#000'});
        var newtab = Titanium.UI.createTab({  
            icon:'../images/tabs/KS_nav_mashup.png',
            title:'New Tab',
            win:win
        });
        tabGroup.addTab(newtab);
    }
    else
    {
        var newtab = tabGroup.tabs[5];
        tabGroup.removeTab(newtab);
    }
});

//
// ANIMATE TAB GROUP
//
var animateTabButton = Titanium.UI.createButton({
    title:'Animate Tab Group',
    top:60,
    height:40,
    width:200
});

var transformed = false;

// create button event listener
// ===========================================================================
// 2DMatrixによるアニメーション及びもとに戻すサンプルです。
// ===========================================================================
animateTabButton.addEventListener('click', function(e)
{
    if (transformed === false)
    {
        var transform = Ti.UI.create2DMatrix();
        transform = transform.scale(0.6);
        transform = transform.rotate(45);
        tabGroup.animate({transform:transform,duration:1000});

        transformed = true;
    }
    else
    {
        var transform = Ti.UI.create2DMatrix();
        tabGroup.animate({transform:transform,duration:1000});

        transformed = false;
    }
});


//
// CLOSE/OPEN TAB GROUP WITH ANIMATION 
// 
var closeTabGroupButton = Titanium.UI.createButton({
    title:'Close/Animate Tab Group',
    top:110,
    height:40,
    width:200
});
// ===========================================================================
// アニメーション実行後の処理としてTabGroupをcloseするサンプルです。
// ===========================================================================
closeTabGroupButton.addEventListener('click', function(e)
{
    tabGroup.animate({opacity:0,duration:1000}, function()
    {
        tabGroup.close();        
    });

});

//
// SET ACTIVE TAB (INDEX)
// 
var setActiveTabButton = Titanium.UI.createButton({
    title:'Set Active Tab (Index)',
    top:160,
    height:40,
    width:200
});
// ===========================================================================
// indexにより該当Tabをアクティブにするサンプルです。
// ===========================================================================
setActiveTabButton.addEventListener('click', function(e)
{
    tabGroup.setActiveTab(1);
});

//
// SET ACTIVE TAB (OBJECT)
// 
var setActiveTabObjectButton = Titanium.UI.createButton({
    title:'Set Active Tab (Object)',
    top:210,
    height:40,
    width:200
});
// ===========================================================================
// tabオブジェクトにより該当Tabをアクティブにするサンプルです。
// ===========================================================================
setActiveTabObjectButton.addEventListener('click', function(e)
{
    tabGroup.setActiveTab(tabGroup.tabs[1]);
});

//
// CUSTOMIZATION SWITCH - this allows or disables the ability for users to re-order tabs
//
var customizationButton = Titanium.UI.createButton({
    title:'Switch customization off',
    top:260,
    height:40,
    width:200
});
// ===========================================================================
// tabGroup.allowUserCustomizationで何の動きをするか不明なサンプルです。
// ===========================================================================
customizationButton.addEventListener('click', function(e)
{
    var text = 'Switch customization ';
    if (tabGroup.allowUserCustomization) {
        tabGroup.allowUserCustomization = false;
        text += 'on';
    }
    else {
        tabGroup.allowUserCustomization = true;
        text += 'off';
    }
    customizationButton.title = text;
});


//
// CURRENT TAB GROUP
//
// ===========================================================================
// Labelを作成するサンプルです。
// ===========================================================================
var openLabel = Titanium.UI.createLabel({
    text:'Tab Group has ' + Titanium.UI.currentTabGroup.tabs.length + ' tabs',
    color:'#999',
    font:{
        fontFamily:'Helvetica Neue',
        fontSize:15
    },
    textAlign:'center',
    top:310,
    width:'auto',
    height:'auto'
});

// add views based on platform
// ===========================================================================
// Titanium.Platform.nameにより処理を分けるサンプルです。
// ===========================================================================
if (Titanium.Platform.name == 'iPhone OS')
{
    win.add(addTabButton);
    win.add(animateTabButton);
    win.add(closeTabGroupButton);
    win.add(customizationButton);
}

win.add(setActiveTabButton);
win.add(setActiveTabObjectButton);
win.add(openLabel);

サンプルから勉強になった内容：

下記の内容を上記のソースから探すことが出来れば、上記のソースがもう理解できた証だと思います。後はどのように組み合わせて自分のソースの中に入れれば良いかを考えればよいと思います。

currentWindowの取得の仕方
Buttonの作成の仕方
Buttonへclickイベントの追加の仕方
Windowの作成の仕方
Tabの作成の仕方
TabとTabGroupの依存関係
TabGroupはさいだ５つのTabを表示することができ、６以上になると最後のTabに応じたWindowの中で、TableViewのTableViewRowの形で表示される。

tabGroup.tabs.lengthでTabGroupのTabの個数を取得する
tabGroup.tabs配列のindexを使いtabGroupからTabを取得する方法
tabGroup.removeTab(tabObject)でtabGroupから該当のTabを削除する方法。
2DMatrixオブジェクトの作成の仕方
transform(scaleとrotateを指定した2DMatrixオブジェクト)とduration(アニメーションの継続時間)属性を持つオブジェクトをTabGroupのanimateメソッドの引数として渡し、TabGroupのアニメーションをする方法と新たに2DMatrixオブジェクトを生成し、そのままTabGroupのanimateメソッドの引数として渡したら、もとに戻すアニメーションの仕方。
TabGroupのanimateメソッドに{opacity:0,duration:1000}オブジェクトとfunction()を渡し、アニメーションした後にfunction()の中に定義された処理を実行する方法。
tabGroup.setActiveTab(index)のように直接Tabのindexを指定し、indexに応じたタブをアクティブにする方法。
tabGroup.setActiveTab(tabGroup.tabs[index])のようにindexを使い、tabGroup.tabs配列から取得したindexに応じたタブをアクティブにする方法。
button.title=textの形でbuttonのテキストを設定する方法。
Labelの作成の仕方。　text,color:'#999',font:{fontFamily:'',fontSize:15},textAlign:'center',top:310,width:'auto',height:'auto'
Platformの名前の取得の仕方、及びPlatformのな前により処理を切り替える方法。

不明点：

分かる方はぜひコメントをお願いします。

tabGroup.allowUserCustomization = trueは何の動きをするのですか？
tabGroup.allowUserCustomization = falseは何の動きをするのですか？