JavaFX: JavaFX UIコンポーネントの操作

30 埋込みプラットフォームのUIコントロール

幅広いデスクトップ機能に加え、JavaFX Software Development Kit (SDK)には、タッチ対応デバイス用として設計されたUIコントロールの新しい操作機能が導入されています。

この章では、埋込み環境でのJavaFX UIコントロールの使用について詳しく説明します。

埋込みランタイム機能

JavaFX UIコントロールには埋込み環境で機能する追加のパブリックAPIは含まれていませんが、開発者がタッチ対応デバイス用のJavaFXアプリケーションでデスクトップ・コントロールを使用できるように実装が大幅に変更されています。

タッチ対応デバイスのサポート

JavaFX SDKには、タッチ対応デバイス用のUIコントロールの追加操作機能としてジェスチャとタッチが導入されています。ジェスチャはタッチスクリーン・アクションとトラックパッド・アクションの両方に対して生成できますが、タッチはタッチスクリーン・アクションに対してのみ対応しています。現在のリリースのJavaFX SDKでは、シングルポイント・タッチのみとスワイプ・ジェスチャのみがサポートされています。

JavaFXでのジェスチャおよびタッチ・イベントの処理の詳細は、「イベントの処理」の「タッチ対応デバイスからのイベントの使用」を参照してください。

仮想キーボード

仮想キーボードは、ハードウェア・キーボードがないデバイスでテキストを入力できるようにするコントロールです。これは、ハードウェア・デバイスと同じように動作しますが、スペースの制約のために数字と記号が1タップ分、離れている点が異なります。図30-1に、仮想キーボードの例を示します。

図30-1 仮想キーボード

「図30-1 仮想キーボード」の説明

仮想キーボードは、テキスト入力フィールドにフォーカスが合うと自動的に表示されます。キーボードが表示されている間はキーボードに関連付けられたコントロールが表示されたままであることに注意してください。親ステージを押し上げる必要はありません。キーボードが下部領域からせり上がり、親ステージを押し上げることにより、キーボードが関連付けられているコントロールが画面に表示された状態を維持します。

仮想キーボードが表示されたら、適切なキーをタップして文字を入力できます。この後、キーに関連付けられた文字がコントロールに送信されます。アルファベット、数値および記号文字を入力できます。キーボードを切り替えるには、[ABC/!#123]キーと[Shift]キーを使用する必要があります。使用頻度が低い文字にアクセスするには、図30-2に示すように、適切なキーを長めに押してからポップアップ・メニューからターゲット・キーを選択します。

図30-2 使用頻度が低い文字の入力

「図30-2 使用頻度が低い文字の入力」の説明

表30-1に、タッチ対応デバイスの仮想キーボードで実行可能なナビゲート・アクションをリストします。

表30-1 仮想キーボードでのナビゲーション

アクション	キーのシーケンス
文字を入力します。	アルファベット・キーボードで、文字キーを入力します。数値/代替キーボードで、[ABC]キーをタップしてから、文字キーを入力します。
1つの大文字を入力します。	アルファベット・キーボードで、[Shift]キーを1回タップしてから、文字キーを入力します。
複数の大文字を入力します。	アルファベット・キーボードで、[Shift]キーを2回タップしてから、文字キーをタップします。
数字を入力します。	数値/代替キーボードで、数字を入力します。アルファベット・キーボードで、[!#123]キーをタップしてから、目的の任意の数字を入力します。
代替記号を入力します。	数値/代替キーボードで、代替記号を入力します。アルファベット・キーボードで、[!#123]キーをタップしてから、代替記号を入力します。
文字を削除します。	[Backspace]キーをタップし、カレットの左側にある文字を削除します。
入力データを確定します。	[Enter]キーをタップし、入力データを確定します。
仮想キーボードを非表示にします。	キーボードの一番下の行の一番左側の[Hide]ボタンをタップします。

アプリケーションのUIインタフェースで電子メール・アドレス、URL、または数値記号のみを入力する必要がある場合、代替キーボード・レイアウトの1つを設定できます。この設定は、例30-1に示すように、特定のテキスト・コントロールに対して定義されます。

例30-1 仮想キーボードの電子メール・レイアウトの設定

final TextField emailAddress = new TextField("myEmail@example.com");
text.getProperties().put("vkType", "email");

現在、vkTypeプロパティは、numeric、url、emailおよびtextの各値をサポートしています。最後の値がデフォルトのレイアウトに相当します。

図30-3に、キーボードの電子メール・レイアウトを示します。文字、数字および代替記号に加えて、このレイアウトには、電子メール・アドレスを素早く入力する上で特に役立つ[@]および[.com] ([.org])キーが用意されています。

図30-3 仮想キーボードの電子メール・レイアウト

「図30-3 仮想キーボードの電子メール・レイアウト」の説明

図30-4に示す仮想キーボードのURLレイアウトには、[Space]キーがありません。かわりに、「www.」および「http//」を入力する機能が用意されています。

図30-4 仮想キーボードのURLレイアウト

「図30-4 仮想キーボードのURLレイアウト」の説明

一部のUIでは、ユーザーが数字のみを入力することが想定されています。図30-5に、このタスクを実装する仮想キーボードの簡易数値レイアウトを示します。このレイアウトには、[Shift]キーや代替記号がありません。

図30-5 仮想キーボードの数値レイアウト

「図30-5 仮想キーボードの数値レイアウト」の説明

埋込みプラットフォームのUIコントロールの外観

embedded.cssスタイル・シートは、タッチ対応プラットフォームに特化して設計されています。これは、modena.cssスタイル・シートを補足し、そのスタイルの一部をオーバーライドします。UAStylesheetLoaderクラスは、タッチ対応プラットフォームが検出されたときにCSSファイルを切り替えてUIコントロールのスタイルを管理します。

embedded.cssスタイル・シートは、次のコントロールの外観を変更します。

ScrollBar、ScrollPane - スクロール要素を再定義します
TextArea、TextField、PasswordField、DatePicker - カレットを視覚化します
ContextMenu - 水平コンテキスト・メニューを導入します

スクロール・コントロール

モバイル・タッチ・プラットフォームのスクロール・ペインでは、スクロール・ビュー・コンテンツを対象としたタッチ・ジェスチャの結果としてスクロールが実行されます。コンテンツの方がスクロール・ペインより大きい場合でも、ユーザーがスクロール・ペインで作業をしていない間はスクロール・バーは表示されません。スクロール・バーはタッチ・ジェスチャが実行された後に自動的に表示されますが、スクロール用に使用するアクティブなコントロールとしてではなく、コンテンツのサイズと位置を示すインジケータとしてのみ表示されます。スクロール・バーが表示される場合、図30-6に示すように、表示コンテンツに重なって表示され、デスクトップ・プラットフォームの場合のように別の場所には表示されません。

図30-6 デスクトップ環境と埋込み環境でのスクロール・ペインの外観

「図30-6 デスクトップ環境と埋込み環境でのスクロール・ペインの外観」の説明

スクロール・バーは、コンテンツのスクロールが止まると自動的に消えます。

テキスト入力コントロール

タッチ対応プラットフォームでは、TextArea、TextFieldおよびPasswordFieldは、ユーザーが単一行または複数行テキストを入力できる四角形の領域として実装されます。テキスト・コントロールの使用方法は、すべてのプラットフォームで共通です。ただし、埋込み環境の場合、ナビゲーションやテキスト選択を簡素化するためにカレットが使用されます。仮想キーボードを使用して、文字をテキストコントロールに入力します。

図30-7に、タッチ対応プラットフォームで動作するTextFieldSampleアプリケーションを示します。カレットは、仮想キーボードを使用して記号を入力する場所を示します。TextFieldSample.javaのコードを参照してください。

図30-7 TextFieldコントロールの外観

「図30-7 TextFieldコントロールの外観」の説明

仮想キーボードは、テキスト入力フィールドにフォーカスが合うと自動的に表示され、デバイスが回転するとそれに反応します。仮想キーボードは、TextField、TextArea、PasswordFieldおよび他のUIコントロールの編集状態が有効である場合にユーザーがこれらのコントロールにテキストを入力する必要があるときに表示されます。キーボードを非表示にするには、[Hide]ボタンをタップするか、コントロールの外側をタップします。

コンテキスト・メニュー

埋込み環境の場合、メニュー項目の水平レイアウトを実現するためにコンテキスト・メニューのデフォルトの外観が変更されています。

コンテキスト・メニューは、ユーザーがタップ・アンド・ホールドすると呼び出されます。クリップボードに何もない場合、コンテキスト・メニューには「選択」および「すべて選択」メニュー項目が表示されます。クリップボードに何かある場合、コンテキスト・メニューは図30-8に示すようになります。

図30-8 コンテキスト・メニューの外観

「図30-8 コンテキスト・メニューの外観」の説明

テキスト・コントロール内のテキストを選択すると、図30-9に示すように、「切取り」、「コピー」、「貼付け」および「すべて選択」項目が表示されます。

図30-9 選択を実行した後のコンテキスト・メニューの外観

「図30-9 選択を実行した後のコンテキスト・メニューの外観」の説明

JavaFX SDKには、タッチ対応プラットフォームの別のスタイル・シートもあります。embedded-qvga.cssファイルは、QVGA画面がある埋込みデバイスのCSSスタイルを定義します。これは特に、TextFieldおよびTextAreaコントロールの代替パディングを指定します。

埋込みプラットフォームで使用可能なUIコントロール機能

前述の項で説明した視覚的な変更に加えて、UIコントロールの動作を変更してシングル・ポイント・タッチとスワイプ・ジェスチャに対応します。表30-2では、これらの変更を示しています。

表30-2 埋込みランタイムに固有の機能

UIコントロール	ユーザー・アクション	タッチのサポート
`Button`、`Hyperlink`、`MenuButton`、`ToggleButton`	タップします。	ボタンをアクティブ化します。
`CheckBox`	タップします。	チェック・ボックスの選択状態と選択解除状態を切り替えます。
`ComboBox`	ドロップダウン・アイコンをタップします。	アクティブ・リストの表示と非表示を切り替えます。アクティブ・リストが開くときに、テキスト・フィールドに表示されている項目を選択します。
	テキスト・フィールドをタップします。	編集不可能なコンボ・ボックスの場合、アクティブ・リストを表示します。編集可能なコンボ・ボックスの場合、テキスト・フィールドにカレットを配置します。
	リスト内の項目をタップします。	アクティブ・リストが閉じ、値をコミットします。
	リストの外をタップします。	リストを閉じます。
	ドラッグします。	ドラッグ・ジェスチャに応じてコンテンツを連続的にスクロールします。
	ドロップします。	スクロールを停止します。
	スワイプします。	高速化されたスクロールを行います。
`ListView`	ドラッグします。	ドラッグ・ジェスチャに応じてコンテンツを連続的にスクロールします。
	ドロップします。	スクロールを停止します。
	スワイプします。	高速化されたスクロールを行います。
	タップします。	項目を選択し、それに関連付けられたアクションをアクティブ化します。コンテンツがスクロールされている場合、スクロールを停止します。
	ダブルタップします。	有効な場合、インライン編集モードになります。
`TextField`、`TextArea`、`PasswordField`	タップします。	カレットを設定します。
	ダブルタップします。	コンテンツを選択します。
	タップ・アンド・ホールドします。	コンテキスト・メニューを開きます。
	スワイプします。	高速化されたスクロールを行います。
	ドラッグします。	ドラッグ・ジェスチャに応じてコンテンツを連続的にスクロールします。
	ドロップします。	スクロールを停止します。ユーザーがコンテンツをスクロールしすぎて`TextArea`の枠線を超えると、ドロップ・ジェスチャによってコンテンツが放され、`TextArea`の枠線になめらかに戻ります。
`RadioButton`	タップします。	ラジオ・ボタンが選択されている場合、アクションは実行されません。選択が解除されている場合は、タップによって選択され、グループ内の他のラジオ・ボタンの選択が解除されます。
`ScrollBar`、`ScrollView`	ドラッグします。	ドラッグ・ジェスチャに応じてコンテンツを連続的にスクロールします。
	ドロップします。	スクロールを停止します。
	スワイプします。	高速化されたスクロールを行います。
	タップします。	項目を選択し、それに関連付けられたアクションをアクティブ化します。コンテンツがスクロールされている場合、スクロールを停止します。
`TableView`、`TreeView`	タップします。	セルを選択するか、セルがアクション可能な場合はアクションを呼び出します。ツリー・ビューのノードを展開または縮小します。
	ダブルタップします。	選択したセルが編集をサポートしている場合、編集に切り替えます。
	ドラッグします。	ドラッグ・ジェスチャに応じてコンテンツを連続的にスクロールします。
	ドロップします。	スクロールを停止します。
	スワイプします。	コンテンツの高速化されたスクロールを行います。
`ColorPicker`	カラー・パレットの「色」フィールドまたは「カスタム・カラー」領域で色を短くタップします。	カラー・チューザで色を更新します。カラー・パレットを閉じます。色を適用します。
	パレットの外をタップします。	パレットを閉じます。
	「カスタム・カラー」ダイアログ・ウィンドウの「色」フィールド内の任意の場所をタップします。	「RGB」、「HSB」および「Web」ペインの値を更新します。カラー・プレビューで「新規の色」を更新します。
	「カスタム・カラー」ダイアログ・ウィンドウの「色相」バー内の任意の場所をタップします。	「RGB」、「HSB」および「Web」ペインの値を更新します。「カスタム・カラー」ダイアログ・ウィンドウで「新規の色」を更新します。
	スライダ上の任意の場所をタップするか、スライダを左右にドラッグします。	ダイアログ・ウィンドウを閉じます。カラー・パレットを閉じます。カラー・チューザを更新します。色を適用します。
`Pagination`	ページ・ボタンをタップします。	選択したページを開きます。
	「次」ボタンをタップし、左にスワイプします。	次のページを開きます。
	「前」ボタンをタップし、右にスワイプします。	前のページを開きます。
`DatePicker`	日付フィールドをタップします。	フィールド内にカレットを表示します。仮想キーボードが表示されます。
	カレンダ・アイコンをタップします。	カレンダの表示と非表示を切り替えます。
	[LEFT]または[RIGHT]カレンダ矢印をタップします。	前または次の年月を表示します。
	カレンダ内の任意の日付をタップします。	選択した日付でフィールドを更新し、カレンダを閉じます。
	カレンダの外をタップします。	フィールドを更新せずにカレンダを閉じます。

表30-2で説明したすべてのアクションは、タッチ対応プラットフォームでアプリケーションを実行すると有効になり、追加コードを必要としません。

埋込みタッチ・プラットフォームで使用不可能なUIコントロール機能

次のリストは、埋込みプラットフォームで現在無効なUIコントロールの機能を示しています。

列のサイズ変更、列の再配置、および表ビューでのデータ・ソート
リスト・ビューおよびツリー・ビューでの複数選択
パスワード・フィールドでのテキスト・コピーのサポート

埋込みタッチ・プラットフォームで使用不可能な他の機能

埋込みプラットフォームでは、次のJavaFX機能はサポートされません。

一部の埋込みプラットフォームでは、デスクトップ・インタラクションに関連するStageクラスの機能は使用できません。たとえば、これらのプラットフォームでは、Stageウィンドウにはタイトルや装飾がなく、このウィンドウのサイズをユーザーが変更することはできません。
Webコンポーネント – APIを介してWebビューアおよび完全参照機能を備えたユーザー・インタフェース・コンポーネント。詳細は、JavaFXアプリケーションへのHTMLコンテンツの追加を参照してください。
メディア – JavaFX用のJava APIを介して使用可能なメディア機能。詳細は、JavaFXアプリケーションへのメディア・アセットの組込みを参照してください。