初回起動時に出るウィザード画面の実装をCommandパターンで実装してみた

本題の前に最近の個人的な状況

本業の方で新しく取り組もうとしていることがあって、その関連資料とか本を読むのに集中していたため、ここ数日全くコード書けない状況続いてましたがそちらの目処がたったので、今朝からこれまで作っているアプリの実装を再開しました

アプリ起動後、ローカル側にキャッシュしてる情報と、サーバから新規に取得した情報の扱いについて、半月程まえに考えていた部分で煮詰まっていたことがあって、その解決の手法になりそうな事を試すためのサンプルを作っていたので、今回それについて取り上げようと思います

初回起動時に出るウィザード画面っぽいやつ

言葉でいうより、この↓画面キャプチャー見れば伝わると思います

この類実装する場合に、Ti.UI.Window or Ti.UI.Viewを4つ準備して・・・みたいなアプローチもあるかと思うのですが、その場合

• 最初の画面から最後のページに遷移させたいケース
• 最後のページから前のページに戻って、さらに前のページに戻って、そこから最後のページに戻りたい
• 最初は4画面のウィザードっぽいのを考えていたけど、やっぱり3画面にしたいとか、5画面にしたくなったらどうしよう・・

というケースを考えると、ちょっとゾッとするんじゃないかと思います

この類のウィザード画面っぽい画面遷移の実装をGoFのCommandパターン適用してみたら、自分としては見通しよいコードになりました。

ソースコードは GitHubにあります

画面数を増やしたい or 減らしたくなったら

画面上に表示する文字と、画面遷移の対応関係はcoffee/command.coffeeの中で処理してます

具体的には

class Command
  constructor:(obj) ->
    @items = obj
    @menuList = [
      description:"ようこそ"
      backCommand:null
      nextCommand:1
    ,
      description:"この画面では基本的な操作方法について解説します"
      backCommand:0
      nextCommand:2
    ,
      description:"応用編について解説します"
      backCommand:1
      nextCommand:3
    ,
      description:"更に踏み込んだTIPSについて解説します"
      backCommand:2
      nextCommand:4
    ,
      description:"アプリ起動します"
      backCommand:3
      nextCommand:null
    ]

という @menuList という配列の中を適宜修正すればOKな作りになってます

見通しよいコードだけど、1つ大きな課題が

動作するのですが、画面に配置してるボタンをタッチしても遷移されない時があるので、その原因追求は出来てません・・

イベントリスナー周りかなと思ってるのですが誰かこの辺り心当たりあったら教えてもらえればと思いますm(__)m