Contents コアコンセプトカードの生成 Step 1 card Step 2 card Step 3 card Navigationビューの生成ナビゲーションの制御 Step 1のボタンアクション Step 2のボタンアクション Step 3のボタンアクションアクションを見る

モバイルアプリでのナビゲーションビューの利用

ナビゲーションビューコンテナは Sencha Touch 2 で最も便利で多彩な要素の１つです。ナビゲーションのためのタイトルバーと戻るボタンを自動的に維持しながら、ユーザーのステップが動的な一連のカードを介するインターフェイスを簡単に作成することができます。

このガイドは、シンプルなウィザードに似たインターフェイスを構築するために、Sencha Architect のNavigationビューを作成して操作する方法を紹介します。ArchitectでSencha Touchのプロジェクトを立ち上げ、URL prefixを設定し、下記手順を行う前にプロジェクトを保存します。

このチュートリアルで完成したプロジェクトファイルはここにあります。

コアコンセプト

Navigationビューについて理解する上で最も重要なことは、Tab Panelなどの他のカードレイアウトコンポーネントとは異なり、最初から複数のカードを追加してはならない、ということです。もし、そのようにした場合、最後のカードがデフォルトで表示されるでしょう。

その代わりに、通常、最初に表示される子カードのみ、Navigationビューと共に定義します。次に、特定のユーザーイベントに応答して、アプリケーションが動的に生成し、新しい子カードをビューのナビゲーションスタックへプッシュします。

これは、Navigationビューから独立し、それぞれが最上位のコンポーネントとして可能なナビゲーションカードを定義することを意味します。最上位で作成されるため、個別にインスタンス化できるクラスとして定義されます。

またこれは、イベントハンドラを使用し、若干の JavaScript コードを書いてカードをインスタンス化し、そのカードをナビゲーションスタックへプッシュする必要があることも意味しています。xtype（Architect では userAlias とも呼ばれる）を使用してカードをインスタンス化し、適切なタイミングでナビゲーションスタックへ追加するには、ナビゲーションビューの Push メソッドを使用します。

カードの生成

ナビゲーションのカードとなる各コンポーネントを定義することから始めます。最初のカードは、Step 1 と呼ばれ、ユーザーに数字を尋ねます。2 番目のカードは、Step 2 と呼ばれ、ユーザーに 2 つ目の数字を尋ねます。3 番目のカードは、Step 3 と呼ばれ、ユーザーが計算を実行するために、数学的な演算子を選択することができるでしょう。

Step 1 card

最初のカードを作成します。

ツールボックスからキャンバスにフォームパネルをドラッグします。
userClassName設定にStep1Panelをセットします。
userAliasにstep1を設定します – 後でxtypeによってStep1のパネルを参照するときにこの値を使用します。
フォームパネルにFieldSetを追加します。
FieldSetのタイトルをダブルクリックし、“Enter a number”に変更します。
いずれかのフィールドを削除します。
残りのフィールドを選択し、右クリックして、Transform > Ext.field.Numberを選択してnumberフィールドに変換します。
フィールドのname設定にnumber1を設定し、label設定をクリアにします。
ボタンをフォームパネルへドラッグします。
ボタンをダブルクリックし、テキストにNextをセットします。
ボタンのui設定でforwardをセットし、右向きの外観を与えます。

Step 2 card

2番目のカードは、最初のカードととてもよく似たものになるので、上記をすべて繰り返すよりも時間の節約のため、Step 1のパネルを複製します。Step 1のパネルを選択して右クリックしてDuplicateを選択し、複製されたコンポーネントを選択します。

userClassNameをStep2Panelに変更します。
userAliasをstep2に変更します。
fieldsetのタイトルをEnter another numberに変更します。
フィールドのnameをnumber2に変更します。

Step 3 card

3つ目のカードも、先ほどと同じようにStep2パネルを複製します。

userClassNameをStep3Panelに変更します。
userAliasをstep3に変更します。
fieldsetのタイトルをChoose an operationに変更します。
ボタンのテキストをCalculate!に変更します。
最後のステップなので、ボタンのui設定をconfirmにセットします。
fieldsetからnumberフィールドを削除し、4つのラジオボタンを追加します。
各ラジオボタンのname設定にoperationを指定し、単一のラジオグループとして機能するようにします。
最初のラジオボタンのlabelにAdd、valueにaddを与えます。
2番目のラジオボタンのlabelにSubtract、valueにsubtractを与えます。
3番目のラジオボタンのlabelにMultiply、valueにmultiplyを与えます。
4番目のラジオボタンのlabelにDivide、valueにdivideを与えます。
最初のラジオボタンの checked 設定に true をセットして、デフォルトで選択状態にします。

Navigationビューの生成

カードを定義したので、次にそれを表示するNavigationビューを作成してみましょう。

最上位にNavigationビューをドラッグします。
userClassNameにMainNavを設定します。
インスペクタのナビゲーションビューを右クリックし、アプリが起動した際にそれがすぐ表示されるように、 Mark as Initial Viewを選択します。
ナビゲーションビューにはデフォルトで Step 1 カードを表示する必要があるので、[Project Inspector（プロジェクトインスペクタ）] で Step1Panel を MainNav へドラッグし、Link を選択します。これにより、ナビゲーションビューの中に Step1Panel を参照するリンクインスタンスが生成されます。
新しいインスタンスのリンクを選択し、title設定をStep 1にセットして、ナビゲーションビューのタイトルバーに表示させます。

アプリケーションのビューが作成されましたので、いくつか動作を追加してみましょう。

ナビゲーションの制御

コントローラを作成することにより、アプリケーションの動作を実装します。プロジェクトにコントローラを追加するには、[Project Inspector（プロジェクトインスペクタ）] の右上にある追加ボタン (「+」) をクリックし、[Controller（コントローラ）] を選択します。インスペクタでコントローラを選択し、userClassNameにMainNavControllerを設定します。

Step 1のボタンアクション

次に、Step 1カードの次へボタンにコントローラアクションを作成します。

コントローラを選択して、Actions設定を探し、追加ボタン (“+”) をクリックして新しいController Actionを追加します。
target typeにExt.Buttonを選択します。
イベント名にtapを選択します。
インスペクタで新しいtapコントローラアクションを選択します。
fn設定をonStep1SubmitTapに変更します。
controlQueryをstep1 buttonに変更します。（この controlQuery は、xtype が step1 のコンテナ内の任意のボタンに tap イベント処理を行うための Component Query Selector です）
インスペクタでコントローラのアクションをダブルクリックして、コードエディタで次のJavaScriptコードを入力します。
```
button.up('navigationview').push({
    xtype: 'step2',
    title: 'Step 2'
});
```

このコードでは、ボタンの親の navigationview を見つけ、ナビゲーションスタックの最後に新しい Step2Panel カードをプッシュし、ビュー内を自動的にアニメーション化します。Step2PanelのuserAliasを設定することで、以前に割り当てたxtypeからStep2Panelコンポーネントを参照します。新しいstep2インスタンスが表示されるときに、タイトルバーにもまた“Step 2”を与えます。

Step 2のボタンアクション

Step 2 のボタンのコントローラアクションも、Step 1 のボタンとほぼ同一になるはずです。Step 1 のボタンのアクションと同様の手順に従ってください。ただし、以下の手順だけは異なります。

コントローラアクションのfn設定にonStep2ButtonTapを設定します。
controlQueryをstep2 buttonに設定します。
代わりにStep 3を参照するように、ハンドラのコードを変更します。
```
button.up('navigationview').push({
    xtype: 'step3',
    title: 'Step 3'
});
```

Step 3のボタンアクション

Step 3 のボタンのコントローラアクションに関しても同様の手順に従ってください。ただし、以下の手順だけは異なります。

コントローラアクションのfn設定にonStep3ButtonTapを設定します。
controlQueryをstep3 buttonに設定します。

インスペクタでコントローラアクションをダブルクリックし、コードエディタを使用してハンドラコードを挿入します。

var mainNav = button.up('navigationview'),
    num1 = mainNav.child('step1').getValues().number1,
    num2 = mainNav.child('step2').getValues().number2,
    operation = mainNav.child('step3').getValues().operation,
    result;

switch (operation) {
    case 'add':
        result = num1 + num2;
        break;
    case 'subtract':
        result = num1 - num2;
        break;
    case 'multiply':
        result = num1 * num2;
        break;
    case 'divide':
        result = num1 / num2;
        break;
}

Ext.Msg.alert('Your result is: ' + result);

一言で言えば、このコードは各ステップのフォームを見て、名前でそれらのフィールドの値を求めます。そして、２つの入力された数字に演算子を適用することで、数学的に計算を行い、アラートポップアップで表示します。

アクションを見る

アプリケーションは完全に機能しています。プロジェクトを保存し、プレビューするために、WebKit ベースのブラウザまたはモバイルデバイス上で動作を確認します。ユーザーが次のステップに進むたびに、Navigation ビューのタイトルバーが自動的に更新されて現在のカードのタイトルが表示され、戻るボタンも自動的に更新されて前のステップに戻れるようになっていることに注意してください。

Navigationビューは、いくつかの有用なオプションをサポートしています。たとえば、ArchitectでNavigationビューを選択し、useTitleForBackButtonText設定をtrueに設定します。保存して、再度プレビューを見ると、戻るボタンは静的なラベルではなく、前のカードのタイトルを表示します。

また、インスペクタの中で Navigation ビューを選択し、Config の中から Navigation Bar の項目を探して、追加ボタンをクリックすれば、Navigation ビューの上部にあるタイトルバーを制御することもできます。次に、選択してNavigationバーの子や項目を追加するなどの設定をすることもできます。

今、Sencha Architectを使ったSencha Touch 2のNavigation Viewコンテナを作成して操作する方法を理解しました。タッチアプリで共通の、シーケンシャルなUIナビゲーション構造を作成するとき、これは非常に便利でしょう。

Last updated

12月 18, 2014

Architect Guides