本格派エンジニアの工具箱

第35回 Appcelerator Cloud Servicesと連携するモバイルアプリの作成

この記事を読むのに必要な時間:およそ 6 分

MyFirstAppの実行例

タブを構成するApplicationTabGroup.jsは次のようになります。

function ApplicationTabGroup(Window1, Window2) {
    //create module instance
    var self = Ti.UI.createTabGroup();
	
    //create app tabs
    var win1 = new Window1('ログイン/アウト');
    var win2 = new Window2('ユーザの追加');
    
    var tab1 = Ti.UI.createTab({
	    title: 'ログイン/アウト',
	    icon: '/images/KS_nav_views.png',
	    window: win1
	});
    win1.containingTab = tab1;
    
    var tab2 = Ti.UI.createTab({
	    title: 'ユーザの追加',
	    icon: '/images/KS_nav_ui.png',
	    window: win2
	});
    win2.containingTab = tab2;
	
    self.addTab(tab1);
    self.addTab(tab2);
	
    return self;
};

module.exports = ApplicationTabGroup;

ApplicationTabGroupのコンストラクタにはタブに表示する2つのウィンドウ(ここではLoginWindowとAddWindow)を渡せばいいので,app.jsは次のようになります。

//bootstrap and check dependencies
if (Ti.version < 1.8 ) {
    alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');
}

// This is a single context application with mutliple windows in a stack
(function() {
    //determine platform and form factor and render approproate components
    var osname = Ti.Platform.osname,
	version = Ti.Platform.version,
	height = Ti.Platform.displayCaps.platformHeight,
	width = Ti.Platform.displayCaps.platformWidth;

    Window1 = require('ui/handheld/LoginWindow');
    Window2 = require('ui/handheld/AddWindow');
    
    var ApplicationTabGroup = require('ui/common/ApplicationTabGroup');
    new ApplicationTabGroup(Window1, Window2).open();
})();

ここまでできたら,MyFirstAppをAndroid端末かエミュレータにインストールして実行してみましょう。最初は図4のようにログイン/ログアウトタブが表示されます。ユーザの追加タブは図5のようになっています。ここで任意のユーザ情報を入力して[追加]ボタンをクリックすると,ユーザが作成されて図6のように表示されます(ユーザの作成に失敗するとエラーが表示されます⁠⁠。

図4 ログイン/ログアウト画面

図4 ログイン/ログアウト画面

図6 ユーザ追加画面

図5 ユーザ追加画面

図6 ユーザの追加に成功

図6 ユーザの追加に成功

ユーザを追加した場合,自動的にそのユーザでログインしたいる状態になります。ログイン/ログアウトタブに戻って,[ログアウト]ボタンをクリックすると,ログアウト処理が実行されて図7のように表示されま。再び,今作成したユーザ名とパスワードでログインしてみましょう。ログインに成功すれば図8のように表示されるはずです。

図7 ログアウトに成功

図7 ログアウトに成功

図8 ログインに成功

図8 ログインに成功

さて,この時点でACSのMy AppsページにはMyFirstAppが自動的に登録されているはずです。そこから管理画面にアクセスして,Usersの情報を表示させると,図9のようにアプリで追加したユーザが正しく登録されていることを確認できます。

図9 ACSの管理画面でもユーザ情報を確認できる

図9 ACSの管理画面でもユーザ情報を確認できる

著者プロフィール

杉山貴章(すぎやまたかあき)

ONGS Inc.所属のプログラマ兼テクニカルライター。雑誌,書籍,Webメディアで多数の著作をもつ。

著書