2012年

1月

11日

イベントを設定すべし!

あたらしいTitaniumの本が登場しました

Titanium SDK API 解説書ページを表示する


イベントを設定すべし!資料
TS_Android_4.pdf
PDFファイル 1.2 MB

SDK1.8による変更作業

ここまでの完成ソース

■ app.jss

jsコードを外部化すべし!」の完成ソース「app.jss(Titanium Mobile SDK 1.8以降)」を参照

イベントリスナーとアラート

ここまでの完成ソース

■ common.js


// 共通の定義

var win = Ti.UI.currentWindow;

// Menuの設定
win.activity.onCreateOptionsMenu = function(e) {
        var menu = e.menu;
        var login = menu.add({ title: 'Login' });
        var logout = menu.add({ title: 'Logout' });

        //ダイアログ(作成内容はここから)
        var alertDialog = Ti.UI.createAlertDialog({
                buttonNames: ['OK']
        });
        
        //Loginのイベントリスナー
        login.addEventListener('click', function(e) {
                //ログインのダイアログ
                alertDialog.setTitle('Login');
                alertDialog.setMessage('ログインをクリック');
                alertDialog.show();
/* コメント var loginAlert = Ti.UI.createAlertDialog({
                        title: 'Login',
                        message: 'ログインをクリック',
                        buttonNames: ['OK']
                });
*/
                //ログインダイアログ表示
                alertDialog.show();
                //loginAlert.show(); コメント

        });
        //Logoutのイベントリスナー
        logout.addEventListener('click', function(e) {

                //ログアウトのダイアログ
                alertDialog.setTitle('Logout');
                alertDialog.setMessage('ログアウトをクリック');
                alertDialog.show();
/* コメント var logoutAlert = Ti.UI.createAlertDialog();
                logoutAlert.setTitle('Logout');
                logoutAlert.setMessage('ログアウトをクリック');
                logoutAlert.setButtonNames(['OK']);
*/
                //ログインダイアログ表示
                alertDialog.show();
                //logoutAlert.show(); コメント

        });
}

■ win1.js


// win1の内容を記述

Ti.include('common.js');

// label1の作成
var label1 = Titanium.UI.createLabel({
        id: 'label1',
        text: 'ハロー!文字を表示するラベルです。'
});

// win1にlabel1を追加する
win.add(label1);

//win1のイベントリスナー(作成内容はここから)
win.addEventListener('click', function(e) {
        alert('クリック');
});

タブとウィンドウの表示

ここまでの完成ソース

■ win2.js


// win2の内容を記述

Ti.include('common.js');

// view2の作成
var view2 = Titanium.UI.createView({
        id: 'view2'
});
 
// label2の作成
var label2 = Titanium.UI.createLabel({
        id: 'label2',
        text: 'ビューに追加されたラベルです。'
});

//button2でtab1を表示(作成内容はここから)
var button2 = Ti.UI.createButton({
        id: 'button2',
        title: 'タブ1を表示'
});
button2.addEventListener('click', function(e) {
        win.tabGroup.setActiveTab(0);
});

//button3で新しいwindowを表示
var button3 = Ti.UI.createButton({
        id: 'button3',
        title: '新しいウィンドウ'
});
button3.addEventListener('click', function(e) {
        var win3 = Ti.UI.createWindow({
                className: 'win',
                title: '新しいウィンドウ',
                url: 'win3.js'
        });
        win3.open();
        win.tabGroup.tabs[0].addEventListener('click', function(e) {
                win3.close();
        });
});
 
view2.add(label2);
view2.add(button2);
view2.add(button3);
win.add(view2);

■ win2.jss


#view2 {
        background-color: blue;
        height: 300px;
}

#label2 {
        color: #fff;
        top: 50px;
}

#button2 {
        top: 100px;
        width: 200px;
}

#button3 {
        top: 200px;
        width: 200px;
}

■ win3.js


//新しいwindow

var win = Ti.UI.currentWindow;

//ラベル
var label3 = Ti.UI.createLabel({
        id: 'label3',
        text: '新しいウィンドウが表示されました'
});

//ウィンドウを閉じる
var button4 = Ti.UI.createButton({
        id: 'button4',
        title: '閉じる'
});
button4.addEventListener('click', function(e) {
        win.close();
});

win.add(label3);
win.add(button4);

■ win3.jss


#label3 {
        top: 100px;
        color: #000;
}

#button4 {
        top: 200px;
        width: 200px;
}

■ app.jss


@import 'win1.jss';
@import 'win2.jss';
@import 'win3.jss';

.win {
        background-color: #fff; 
}

イベントの種類の確認

完成ソース

■ win1.js

// win1の内容を記述

Ti.include('common.js');

// label1の作成
var label1 = Titanium.UI.createLabel({
        id: 'label1',
        text: 'ハロー!文字を表示するラベルです。'
});

// win1にlabel1を追加する
win.add(label1);

//win1のイベントリスナー
/*win.addEventListener('click', function(e) {
        alert('クリック');
});
*/
win.addEventListener('click', function(e) {
        Ti.API.warn('クリック' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('dblclick', function(e) {
        Ti.API.warn('ダブルクリック' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('touchstart', function(e) {
        Ti.API.warn('タッチスタート' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('touchmove', function(e) {
        Ti.API.warn('タッチしながら移動' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('touchend', function(e) {
        Ti.API.warn('タッチ終了' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('touchcancel', function(e) {
        Ti.API.warn('タッチ中止' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('singletap', function(e) {
        Ti.API.warn('シングルタップ' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('doubletap', function(e) {
        Ti.API.warn('ダブルタップ' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('twofingertap', function(e) {
        Ti.API.warn('二本指でのタップ' + ' x:' + e.x + ' y:' + e.y);
});
win.addEventListener('swipe', function(e) {
        Ti.API.warn('スワイプ' + ' x:' + e.x + ' y:' + e.y);
});

2 コメント