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

TitaniumMobile勉強記

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

050-エントリ一詳細ページのイベントハンドラの処理その3

Googleの検索で、「Titanium xxxx」みたいな感じで思いつく限りのキーワードを入れて関連しそうな情報をチェックしたり、Githubでお手本になりそうなソースを探したりと色々なことをやってきて、これ以上進展がないかなーと思ってました。

そんな状況の中で、昨日ふと”Titanium.UI.createButtonBar” というキーワードを思いついて一番上に表示されたのがこちらでした
Ti.UI.ButtonBarのenabledを設定する

newer(もしくはolder)ボタンを画面上部に配置していますが、各ボタンのenabledを制御すれば自分がやりたいことが実現できるわけだしこのアイデアを流用することにしました。

実装にあたっては、上記ページの情報に加えて、AppceleratorのDeveloperCenterのサイトでButtonBar ignores enabled property on labelsというのがあったのでこちらも参考にしました。

こんな感じのコードで動作するようになりました。

// 一番最後のページを生成するlastPage()のみ抜粋
  lastPage:function(){
    var self = this;
    var webview = null;

    var operationButtons = [
      {
	title:'newer',
	width:100,
	enabled:false
      },
      {
	title:'older',
	width:100,
	enabled:true
      }
    ];
    var button_bar = Titanium.UI.createButtonBar({
      labels:operationButtons,
      style:Ti.UI.iPhone.SystemButtonStyle.BAR
    });

    button_bar.labels = operationButtons;

    /*
      ボタンバーに対してclickイベントリスナーを設定。ただこれだけでは
      ダメみたいで、Windowに対してopenイベントリスナーも設定必要みたい
     */
    button_bar.addEventListener('click',function(e){
      webview = self.newerEntry();
      self.first_window.animate({
      	transition: Titanium.UI.iPhone.AnimationStyle.CURL_UP,
      	view:webview
      });

    });
    self.first_window.addEventListener('open', function(e){
      operationButtons[1].enabled = (operationButtons[1].enabled==false)?false:true;
      button_bar.labels = operationButtons;
    });
    /*
      ボタンバーのプロパティ、イベントリスナーの設定をすべて終えたら
      最後にWindowのsetTitleControlメソッドを使ってボタンバーの設置をする
     */
    self.first_window.setTitleControl(button_bar);
  }

実際にエミュレータ上で画面遷移繰り返す中で気づいたのですが

  • newer or olderのどちらのボタンがクリックされたのか
  • 現在何ページ目を表示しているか

という「状態」を常にチェックしないといけません。

考慮しないといけない「状態」っていうのがおそらく

現在のページ数 newerクリックした時のボタン状態 olderクリックした時のボタン状態
1ページ disable enable
2ページ enable→disable enable
3ページ以降 enable enable
最終ページの1つ前 enable enable→disableへ
最終ページ enable disable

のはず。現在はfirstPage(),lastPage(),middlePage()の中で、現在のページ数チェックとどのボタンクリックしたのか判定しているため基本同じようなコードが存在して、スパゲッティコードになりそうなので、この部分の設計をしっかりしておかないと、後々大変になりそうなので、ここはちょっとじっくり考えることにします。