読者です 読者をやめる 読者になる 読者になる

TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

ナビバーのボタンクリックで画面遷移出来るようになりました!

Titanium Mobile javascript

前回ブログ書いたすぐ後に

TitaniumMobileで、window.animate({transition:xxxx},function(){}); ってやればコールバック関数呼び出せるんだー もっと早くこれに気づいてれば、この1ヶ月こんなに悩むことなかったけどこれで光が見えてきた!!
twitterより

ということをつぶやいたのですが、Windowのアニメーション処理が完了した後に、コールバック関数を呼び出すことで長いこと悩んでいたナビバー上に配置したボタン(下記キャプチャの赤色で囲んだ箇所)のクリックで画面遷移出来るようになりました!
iOSシミュレータ

関連するソース抜粋しながら簡単に解説を

makeButtonBarメソッド内で、clickイベントの処理をしています。e.indexの値をチェックしてどちらのボタンが押されたのかチェックした上で以下を処理します

  • 現在表示するべきページ数(current_page)の値を増減
  • newerEntry()かolderEntry()を呼び出してWebViewの中身を書き換える
EntrySummary = function(){}
EntrySummary.prototype = {
  makeButtonBar:function(){
    var self = this;
    var webview = null;

    self.button_bar.addEventListener('click',function(e){
      if(e.index===0){
      	webview = self.newerEntry();
	self.current_page--;
      }else{
      	webview = self.olderEntry();
	self.current_page++;
      }

その後が今回ずっとはまっていた所なのですが、window.animate()を利用して画面遷移しているのですが遷移完了したタイミングで、handleButtonBarProperty()というメソッドを呼び出します。

このhandleButtonBarPropertyが行う処理は、現在のページ数を確認した上で、ナビバー上のボタンをenableにするかdisableにするか処理を行います。

      self.first_window.animate({
	transition: Titanium.UI.iPhone.AnimationStyle.CURL_UP,
	view:webview
      },
	function(){
	  self.handleButtonBarProperty();
	}
      );
    }); 
  },
  handleButtonBarProperty:function(){
    var self = this;
    var newer_button_prop,older_button_prop;
    if(self.current_page===1){
      newer_button_prop = false;
      older_button_prop = true;
    }else if(self.current_page===self.number_of_entry){
      newer_button_prop = true;
      older_button_prop = false;
    }else{
      newer_button_prop = true;
      older_button_prop = true;
    }
    self.buttons[0].enabled = newer_button_prop;
    self.buttons[1].enabled = older_button_prop;
    self.button_bar.labels = self.buttons;
    self.first_window.addEventListener('open', function(e){
      self.buttons[0].enabled = newer_button_prop;
      self.buttons[1].enabled = older_button_prop;
      self.button_bar.labels = self.buttons;
    });
    self.first_window.setTitleControl(self.button_bar);
  },

例えば現在2ページ目のエントリを表示してて、newerボタンがクリックされた時は、1番最初のページに遷移するので、遷移完了したタイミングでnewerボタンをdisableにします

window.addEventListener('open'...とかは本来要らないように見えますが何故かこのおまじないをいれないと意図したように表示されません。(このあたりの話はTi.UI.ButtonBarのenabledを設定するのページがとても参考になりました)

これでアプリ完成の目処がたってきたのですが、先日発売された@donayamaさんが書かれたTitanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)を読んでいるうちに、これまで書いたコードで意図がわかりづらいと感じる部分が出てきたので、リファクタリングすることにしました