モバイル端末の小さいスクリーンは時々、ユーザーが何らかのアクションを起こしたときに、デフォルトで、タッチインターフェースが、コンテンツ、オプション、アクションを非表示にし、オーバーレイでのみ表示するように命令します。Sencha Touch 2は、オーバーレイコンテンツを表現するために、3つの主要なコンポーネントを提供します。
このガイドでは、Sencha Architectでこれらの3つのタイプのオーバーレイを定義して、呼び出す方法を説明します。
Panel
パネル を、他のコンテンツのフローにおける通常のコンテナとして使用します。これは、オーバーレイとして使用するには、とても良いコンテナです。 なぜなら、特定のcontext属性を矢印で示して配置することができるからです。例えば、タップ時に最初の引数としてボタンを渡してパネルの `showBy` メソッドを呼び出すツールバーボタンがあるとします。 この場合、パネルはボタンの近くに、ボタンを矢印で指すように表示されます。
Panel は、他のコンテンツのフローにおいて通常のコンテナとして使用することができます。これは、オーバーレイとして使用するには、とても良いコンテナです。 なぜなら、特定のcontext属性を矢印で示して配置することができるからです。例えば、ツールバーボタンがあって、タップすると、そのボタン自体を最初の引数としてパネルの `showBy` メソッドが呼び出されたとします。この場合、パネルはボタンの近くに、ボタンを指し示す矢印付きで表示されます。Architectで、この動作を作成してみましょう。
Architectを起動して、新規にSencha Touch 2プロジェクトを開始し、プロジェクトのSettingsにURL接頭辞を設定して始めましょう。
Viewコンポーネント
プロジェクトにContainerを追加して、Toolbarをその上にドラッグします。ツールバー上にButtonをドラッグします。 ボタンのtextコンフィグを削除し、iconClsコンフィグをsettingsに設定します。
次に、Panelを最上位コンポーネントとして作成するために、キャンバス上の空のエリアにドラッグします。追加したPanelのuserClassNameを“SettingsPanel”に変更し、userAliasをsettingsに設定します。4つのCheckboxをPanelにドラッグします。**注意:**_各チェックボックスには Field というラベルが付いています。_
ここまでで、パネルは通常のコンテナのように見えます。centerd、modal、hideOnMaskTapの各コンフィグにチェックを入れて、このパネルを浮き上がるオーバーレイにします。widthを240に設定します。キャンバス上のパネルは、このように見えているはずです。
振る舞い
パネルのオーバーレイを表示するために、イベントハンドラをツールバーのボタンに追加します。インスペクタから、ツールバーのボタン(MyButton)を選択し、ConfigからEventsアイテムを探します。追加ボタン(“+”)をクリックして、Basic Event Bindingを選択します。 また、イベントの種類でtapを選択します。ここで、インスペクタはこのように見えているはずです。
インスペクタで、ボタンの新しい子コンポーネントであるtapをダブルクリックして、コードエディタを開きます。 そして、次のコードを入力します。
var settings = button.settingsPanel;
if (!settings) {
settings = button.settingsPanel = Ext.widget('settings');
}
settings.showBy(button);このコードでは、設定パネルがインスタンス化済みかどうかを確認します。まだであれば、先に設定した userAlias を参照して作成します。その後、showBy メソッドを呼び出してボタンをコンテキスト要素として渡します。
このプロジェクトをブラウザで保存しプレビューしている場合、矢印のポインタで settings ボタンをタップすると settings パネルが表示されます。このパネルは、モーダルであり、パネルの外の暗いエリアをタップすると、パネルを非表示にします。
ActionSheet
次に一般的なオーバーレイの種類は Action Sheet です。ActionSheetsはmodalで、スクリーンの下部からスライドします。 また通常、実行するアクションの選択のための一連のボタンを含みます。サンプルを作成してみましょう。
Architectを起動して、新規にSencha Touch 2プロジェクトを開始し、プロジェクトのSettingsにURL接頭辞を設定して始めましょう。
Viewコンポーネント
キャンバスにContainerをドラッグして、さらにその上にToolbarをドラッグします。ツールバーにButtonをドラッグし、ボタンのtextコンフィグを削除します。 また、ボタンのiconClsコンフィグをreplyに設定します。以下のように、キャンバスにおいて、ボタンのアイコンが矢印になりました。
ActionSheetコンポーネントをキャンバスの空のエリアにドラッグして、ActionSheetを最上位クラスとして作成します。ActionSheetが、ボタンとともにインスペクタに追加されることに注目してください。ActionSheetのuserClassNameをReplyOptionsに設定して、userAliasをreplyOptionsに設定します。
アクションシートの最初のボタンのtextコンフィグをReplyに設定します。アクションシートに2つめのボタンを追加して、textコンフィグをReply Allに設定します。3つ目のボタンを追加し、textコンフィグをCancelに、uiコンフィグをdeclineに設定します。
振る舞い
ツールバーのボタンに、ReplyOptionsアクションシートを開くためのイベントハンドラを追加します。同様に、Cancelボタンにはシートを閉じるためのイベントハンドラを追加します。
インスペクタから、ツールバーのボタン(MyButton)を選択し、ConfigからEventsアイテムを探します。追加ボタン(“+”)をクリックして、Basic Event Bindingを選択します。 また、イベントの種類でtapを選択します。インスペクタで、ボタンの新しい子コンポーネントであるtapをダブルクリックして、コードエディタを開きます。 そして、次のコードを入力します。
var sheet = button.actionSheet;
if (!sheet) {
sheet = button.actionSheet = Ext.Viewport.add(Ext.widget('replyOptions'));
}
sheet.show();このコードは、シートが既に生成されているかどうかを確認します。作成されていない場合は、シートが前に設定したuserAliasを参照して生成され、アプリケーションのメインのExt.Viewportに追加されます。そして、スクリーンの下部からスライドするための、シートのshow()メソッドを呼び出します。
最後に、インスペクタからCancelボタンを選択し、イベントの種類でtapを選択し、次のコードを追加します。
this.hide();このコードは、ActionSheetを非表示にします。 なぜなら、ボタンのイベントハンドラは、最上位クラスのスコープで実行されるからです。この場合、キーワードthisがActionSheetのインスタンスに該当します。
このプロジェクトをブラウザで保存・プレビューして、ツールバーのボタンを押して、ActionSheetを表示します。シートのCancelボタンをクリックして、ActionSheetを非表示にします。もしこれが、本番のアプリケーションなら、同様に、タップイベントリスナを、ReplyとReply Allボタンに追加することになります。
Picker
3つ目のオーバーレイの種類は、Pickerです。ActionSheetによく似ていますが、これはmodalであり、スクリーンの下部からスライドします。 ボタンの代わりに、スピナーでvalueオプションのリストを表示します。さらに、ユーザーの選択を処理するための、change イベントも公開しています。
Pickerは、一般的に直接作成されません。その代わり通常は、Select Fields や Date Picker Fields によって暗黙のうちに使用されます。このようなフィールドをユーザーがタップすると、Sencha Touch フレームワークは自動的に Picker を生成して表示します。でも、ここでは万一必要な場合のため、Architect を使用してカスタムピッカーを作成してみましょう。
Architectを起動して、新規にSencha Touch 2プロジェクトを開始し、プロジェクトのSettingsにURL接頭辞を設定して始めましょう。
Viewコンポーネント
最上位にContainerを作成し、そこにButtonを追加します。キャンバスのボタンをダブルクリックし、テキストをChoose Two Numbersに変更します。
ツールボックスからPickerコンポーネントをキャンバスの空のエリアにドラッグして、ピッカーを最上位クラスとして作成します。ピッカーのuserClassNameをNumbersPickerに、userAliasをnumbersPickerにそれぞれ変更します。
Pickerは、インスペクタに子供としてPickerスロットが提供されることに注意してください。このスロットは、ピッカー内のシングルスピナーのリストに対応します。ピッカーは、nameコンフィグによって区別される複数のスロットを持つことが出来ます。
ConfigからSlotsアイテムの右にある追加ボタン(“+”)をクリックして、2つ目のスロットを作成します。インスペクタで、1つ目のスロットを選択して、nameコンフィグをnumber1に設定します。2つ目のスロットのnameコンフィグをnumber2に設定します。これらのnameコンフィグは、ピッカーのchangeイベントハンドラで使用されます。
（注意：デフォルトでは、各スロットには 3 つの数値リストのオプションが用意されています。このサンプルでは、デフォルトのオプションを使用しますが、本番のアプリケーションでは、おそらくカスタマイズすることになるでしょう。各スロットの、dataコンフィグの値に変更を加えることで、カスタマイズできます。）
再び、NumberPickerを選択して、useTitlesコンフィグにチェックを入れてください。 これで、ピッカーに各スロットのタイトルが表示されます。キャンバスで、1つ目のスロットのタイトルをダブルクリックして、Number 1に変更します。 次に、2つ目のスロットのタイトルをNumber 2に変更します。現在、キャンバスのピッカーは、このように見えているはずです。
振る舞い
Choose Two Numbers ボタンに、ピッカーの作成、表示と、ユーザーの選択を処理する change イベントをリッスンするための、イベントハンドラを追加します。
インスペクタから、Chose Two Numbersボタンを選択して、ConfigパネルからEventsアイテムを探します。追加ボタン(“+”)をクリックして、Basic Event Bindingを選択します。 また、イベントの種類でtapを選択します。インスペクタで、ボタンの新しい子コンポーネントであるtapをダブルクリックして、コードエディタを開きます。 そして、次のコードを入力します。
var picker = button.numberPicker;
if (!picker) {
picker = button.numberPicker = Ext.Viewport.add({
xtype: 'numbersPicker',
listeners: {
change: function(picker, values) {
var n1 = values.number1,
n2 = values.number2;
Ext.Msg.alert(
'Numbers Selected',
'You chose the numbers ' + n1 + ' and ' + n2 +
', which add up to ' + (n1 + n2) + '.'
);
}
}
});
}
picker.setValue({
number1: 1,
number2: 1
});
picker.show();このコードは、ピッカーが作成されたかどうかを確認します。作成されていない場合は、xtypeを使用し、前に設定したuserAliasを参照してピッカーを作成します。また、ピッカーの `change` イベントにリスナも追加します。 これは、ポップアップのアラートメッセージで 2 つのスロットから選択された値を表示します。それから、両方のスロットの初期値に1を設定し、ピッカーで表示します。
このプロジェクトをブラウザで保存とプレビューします。Choose Two Numbersボタンをタップしてピッカーを表示させます。 それから、スピナースロットで2つの数値を選択して、Doneをタップすると、メッセージが表示されます。