BlackBerry Java Application UI and Navigation バージョン: 5.0 開発ガイド 公開: 2010-06-07 SWD-810476-0607021351-020 目次 1 標準の BlackBerry UI と一貫性のある UI の作成......................................... 5 2 BlackBerry デバイスユーザーの入力とナビゲーション..................................... タッチパネル.......................................................................... トラックボールまたはトラックパッド.................................................... トラックボールの感度.............................................................. トラックボールの動き.............................................................. トラックホイール...................................................................... キーボード............................................................................ BlackBerry デバイスの操作方法......................................................... 6 6 8 9 9 9 10 10 3 画面.................................................................................. Screen クラス......................................................................... 描画領域の管理........................................................................ 画面移行の作成........................................................................ コードサンプル:画面移行の作成.................................................... 画面の向きと方向の指定................................................................ タッチパネルの向きの取得.......................................................... タッチパネルの方向の制限.......................................................... タッチパネルの描画領域のサイズが変更された場合の通知の受信........................ 11 11 12 14 15 16 17 17 18 4 加速度計.............................................................................. 加速度計データの種類.................................................................. 加速度計データの取得.................................................................. 特定の間隔での加速度計データの取得.................................................... アプリケーションがフォアグラウンドで実行されている場合の加速度計への問い合わせ........ アプリケーションがバックグラウンドで実行されている場合の加速度計への問い合わせ........ 加速度計読み取り値のバッファへの格納.................................................. バッファからの加速度計読み取り値の取得................................................ 加速度計からの読み取りが行われた時期の取得............................................ 19 19 19 20 21 22 22 23 23 5 イベント.............................................................................. ナビゲーションイベントへの応答........................................................ 入力方式の種類の特定.................................................................. タッチパネルイベントへの応答.......................................................... 24 24 24 25 ユーザーが画面をタッチしている間のシステムイベントへの応答............................ 画面上で指を上にすばやくスライドさせる操作への応答.................................... 画面上で指を下にすばやくスライドさせる操作への応答.................................... 画面上で指を左にすばやくスライドさせる操作への応答.................................... 画面上で指を右にすばやくスライドさせる操作への応答.................................... 画面をクリックする操作への応答........................................................ 画面をすばやく 2 回タッチする操作への応答............................................. 画面上でアイテムにタッチしてドラッグする操作への応答.................................. 画面を軽くタッチする操作への応答...................................................... スクロール操作への応答................................................................ 画面上の 2 か所に同時にタッチする操作への応答......................................... イベントインジェクション.............................................................. 26 26 27 28 28 29 30 30 31 32 32 33 6 UI コンポーネントの配置............................................................... UI コンポーネントの配置............................................................... アイコン配列設定の作成................................................................ アイコン配列設定の作成............................................................ 一時的に表示される一対のマネージャでのフィールドの表示................................ 画面の上下に ButtonField および LabelField を一時的に表示......................... 34 35 35 37 39 40 7 UI コンポーネント..................................................................... 画面への UI コンポーネントの追加...................................................... テキスト行へのフィールドの整列........................................................ オートコンプリートテキストフィールド.................................................. データセットからのオートコンプリートテキストフィールドの作成...................... データソースからのオートコンプリートテキストフィールドの作成...................... データソースおよびオートコンプリートテキストフィールドを含むフィールドの使用...... ボタン................................................................................ 対策:ボタンの実装................................................................ ボタンの作成...................................................................... チェックボックス...................................................................... 対策:チェックボックスの実装...................................................... チェックボックスの作成............................................................ ビットマップの作成.................................................................... カスタムフィールドの作成.............................................................. Web コンテンツを表示するフィールドの作成.............................................. 43 43 43 43 44 46 48 50 50 51 51 52 52 54 54 58 ブラウザフィールドへの HTML コンテンツの表示...................................... ブラウザフィールドへの Web ページの HTML コンテンツの表示......................... アプリケーションへのリソースからの HTML コンテンツの表示.......................... ブラウザフィールドの設定.......................................................... ブラウザフィールドの Web アドレスへのフォームデータの送信......................... ダイアログボックス.................................................................... ダイアログボックスの作成.......................................................... ドロップダウンリスト.................................................................. 対策:ドロップダウンリストの実装.................................................. ドロップダウンリストの作成........................................................ ラベル................................................................................ 対策:ラベルの実装................................................................ テキストラベルの作成.............................................................. リスト................................................................................ 対策:リストの実装................................................................ リストボックスの作成.............................................................. オプションボタン...................................................................... 対策:オプションボタンの実装...................................................... オプションボタンの作成............................................................ 進行状況インジケータ.................................................................. 対策:進行状況インジケータの実装.................................................. 進行状況インジケータの作成........................................................ ピッカーダイアログボックス............................................................ 対策:ピッカーダイアログボックスの実装............................................ 日付ピッカーの作成................................................................ ファイルピッカーの作成............................................................ 検索フィールド........................................................................ 対策:検索フィールドの実装........................................................ 検索フィールドの作成.............................................................. スピンボックス........................................................................ 対策:スピンボックスの実装........................................................ スピンボックスの作成.............................................................. テキストフィールド.................................................................... 対策:テキストフィールドの実装.................................................... テキストフィールドの作成.......................................................... 58 59 61 62 64 66 67 69 69 70 72 73 73 73 74 74 76 76 77 79 79 80 80 82 82 85 88 89 89 91 92 93 95 97 97 日付フィールドの作成.............................................................. 98 パスワードフィールドの作成........................................................ 99 ツリービュー.......................................................................... 99 対策:ツリービューの実装.......................................................... 100 ツリービューを表示するフィールドの作成............................................ 100 8 メニュー項目.......................................................................... メニューの作成........................................................................ コードサンプル:メニューの作成.................................................... 対策:メニューの実装.................................................................. BlackBerry Device Software アプリケーションへのメニュー項目の追加..................... BlackBerry Device Software アプリケーションへのメニュー項目の追加................. メニューの表示方法の変更.............................................................. メニューの表示方法の変更.......................................................... コードサンプル:メニューの表示方法の変更.......................................... メニュー項目へのアイコンの追加........................................................ メニュー項目へのアイコンの追加.................................................... コードサンプル:メニュー項目へのアイコンの追加.................................... 102 102 103 104 105 105 106 106 108 109 110 111 9 カスタムフォント...................................................................... 113 BlackBerry Java アプリケーションにおけるカスタムフォントのインストールと使用.......... 113 コードサンプル:BlackBerry Java アプリケーションにおけるカスタムフォントのインストール と使用................................................................................ 114 10 スペルチェック........................................................................ 116 スペルチェック機能の追加.............................................................. 116 スペルチェックイベントのリスン........................................................ 117 11 関連リソース.......................................................................... 119 12 用語集................................................................................ 120 13 ご意見の提供.......................................................................... 121 14 ドキュメント改訂履歴.................................................................. 122 15 商標などに関する情報.................................................................. 127 開発ガイド 標準の BlackBerry UI と一貫性のある UI の作成 標準の BlackBerry UI と一貫性のある UI の 作成 1 標準 MIDP API および BlackBerry® UI API を使用して、BlackBerry® Java® Application の UI を作成 できます。 BlackBerry UI API の UI コンポーネントは、BlackBerry® Device Software アプリケーションと一貫性 のあるレイアウトおよび動作を提供する目的で設計されています。 • • • 画面コンポーネントでは、標準の画面レイアウト、デフォルトのメニュー、および BlackBerry デバイス ユーザーがエスケープキーを押したとき、トラックホイール、トラックボール、またはトラックパッド をクリックしたとき、または画面にタッチしたときの標準の動作を提供できます。 フィールドコンポーネントでは、日付の選択、オプションボタン、チェックボックス、リスト、テキスト フィールド、ラベル、およびプログレスバーの各コントロールに対する標準の UI 要素を提供できます。 レイアウトマネージャを使用すると、アプリケーションで BlackBerry デバイス画面上のコンポーネ ントを一般的な方法(水平、垂直、左から右のフローなど)で並べ替えできるようになります。 BlackBerry UI API を使用すると、テーブル、グリッド、その他の特化機能を含む UI を作成できます。 標準の Java イベントモデルを使用して、特定の種類のイベントの取得および応答を行えます。 BlackBerry デバイスアプリケーションでは、ユーザーイベント(ユーザーによるトラックボールのクリックやキー ボードの入力など)やシステムイベント(グローバルアラート、クロック変更、USB ポートの接続など) の受信および応答を行えます。 5 BlackBerry デバイスユーザーの入力とナビゲーション 開発ガイド BlackBerry デバイスユーザーの入力とナビゲー ション 2 BlackBerry® デバイスには、入力とナビゲーションのためのキーボード、トラックホイール、トラック ボール、またはトラックパッド、およびエスケープキーが付いています。 SurePress™ タッチパネルを搭 載する BlackBerry デバイスの場合、パネルをクリックすることは、トラックボールやトラックホイール をクリックすることと同じです。 BlackBerry® Java® Application では、次の説明にできる限り近い入力およびナビゲーションモデルを使 用する必要があります。 • • トラックホイール、トラックボール、トラックパッド、またはタッチパネルをクリックすると、一般的に メニューが呼び出されます。 エスケープキーを押すと、操作がキャンセルされるか、前の画面に戻ります。エスケープキーを繰り返 し押すと、ホームスクリーンに戻ります。エスケープキーを押したままにすると、ブラウザまたはメ ディアアプリケーションが終了します。 デフォルトでは、この機能はカスタマイズされない状態で BlackBerry 画面のオブジェクトに入ってい ますが、メニュー項目や追加の UI 、およびナビゲーションロジックを追加する必要があります。 タッチパネル SurePress™ タッチパネル付き BlackBerry® デバイスでは、デバイス上のアプリケーションを指で操作で きます。 ユーザーは、タッチパネル上でさまざまな操作を実行することで、テキストを入力したり、画 面間を移動したりできます。 ユーザーは、ショートカットバーのアイコンをクリックしたり、メニューキーを押したりすることで操作 を実行することもできます。 タッチパネル付き BlackBerry デバイスでは、次の操作を実行できます。 操作 結果 画面を軽くタッチする この操作を実行すると、アイテムがハイライトされます。 テキストフィールドでカーソルの近くを押すと、カーソルの周りに 枠線だけの四角形が表示されます。 この四角形を使用すると、カー ソル位置の移動が簡単になります。 6 タッチパネル 開発ガイド 操作 結果 画面をタップする BlackBerry® Maps や BlackBerry® Browser など、フル画面表示を サポートするアプリケーションでは、この操作によってショート カットバーの表示/非表示の切り替えができます。 Web ページ、地図、画像、またはプレゼンテーション添付ファイル でこの操作を実行すると、Web ページ、地図、画像、またはプレゼ ンテーション添付ファイルにズームインします。 ショートカットバーでは、この操作を実行すると、アイコンが表す アクションについて説明するツールチップが表示されます。 画面をすばやく 2 回タップする 指でアイテムに触れ続ける メッセージリストで送信者または件名に触れ続けると、送信者また は件名を検索できます。 画面上でアイテムにタッチしてド この操作を実行すると、画面上の内容がドラッグした方向に従って ラッグする 移動します。 例えば、ユーザーがメニューにタッチしてドラッ グすると、メニュー項目のリストも同じ方向に移動します。 画面上の 2 か所に同時にタッ チする 画面をクリックする(押す) テキストフィールドでは、枠線だけの四角形とカーソルが同じ方向 に移動します。 この操作を実行すると、タッチした 2 か所の間にあるメッセージな ど、アイテムのリストやテキストがハイライトされます。 ハイラ イトされたテキストやアイテムを追加したり、選択から除外した りするには、画面の別の場所をタッチします。 この操作により、アクションが開始されます。 例えば、ユーザーが リストの項目をクリックすると、その項目に関連付けられた画面が 表示されます。 この操作は、トラックボール、トラックホイール またはトラックパッドのクリックに相当します。 地図、画像、またはプレゼンテーション添付ファイルでこの操作を 実行すると、地図、画像、またはプレゼンテーション添付ファイル にズームインします。 Web ページでこの操作を実行すると、Web ページへのズームインまたはリンク先への移動が実行されます。 テキストフィールドで、カーソルが配置されます。 フィールドにテ キストが含まれる場合は、カーソルの周りに枠線だけの四角形が表 示されます。 指を上または下にすばやくスライ 指を上にすばやくスライドさせると、次の画面が表示されます。 指 ドさせる を下にすばやくスライドさせると、前の画面が表示されます。 7 トラックボールまたはトラックパッド 開発ガイド 操作 結果 キーボードが表示されている場合は、指を下にすばやくスライドさ せるとキーボードが非表示になり、ショートカットバーが表示され ます。 指を左または右にすばやくスライ この操作を実行すると、次の画像/メッセージまたは前の画像/メッ ドさせる セージが表示されます。カレンダーでは、次の/前の日、週、または 月が表示されます。 指を上または下にスライドさせる カメラでは、指を上にスライドさせると被写体にズームインし ます。 指を下にスライドさせると被写体からズームアウトします。 任意の方向に指をスライドさせる この操作は、地図または Web ページの表示範囲を移動します。 画 像にズームインしている場合は、この操作で画像の表示範囲も移動 します。 エスケープキーを押す この操作は、テキストまたはアイテムのリストからハイライトを消 します。 Web ページ、地図、または画像では、この操作により 1 レベルだけ ズームアウトします。 エスケープキーを 2 回押すと元のズームレ ベルに戻ります。 トラックボールまたはトラックパッド トラックボールまたはトラックパッド付き BlackBerry® デバイスでは、トラックボールまたはトラック パッドがユーザーナビゲーションの主要コントロールになります。 ユーザーは次のアクションを実行で きます。 • • • トラックボールを回すか、トラックパッド上で指をスライドさせてカーソルを動かす。 トラックボールまたはトラックパッドをクリックし、デフォルトアクションを実行したり、コンテキスト メニューを開く。 Shift キーを押しながらトラックボールまたはトラックパッドをクリックし、テキストやメッセージ リストのメッセージをハイライトする。 トラックボールまたはトラックパッド付き BlackBerry デバイスには、トラックボールまたはトラック パッドの左にメニューキーが付いています。 メニューキーを押すと、使用可能なアクションをすべて含 むメニューが開きます。 8 開発ガイド トラックホイール トラックボールの感度 トラックボールの感度は、システムがナビゲーションイベントとして移動を識別し、ナビゲーションイベ ントをソフトウェアレイヤへ送り出すために必要となるトラックボールの動きの量を指します。 BlackBerry® デバイスハードウェアでは、ティックという単位を使用してトラックボールの物理的な動き を測定します。 軸上のティック数がシステムまたは BlackBerry のしきい値を超えると、ナビゲーショ ンイベントがソフトウェアレイヤに送られ、システムでティック数がゼロにリセットされます。 一定の アイドル時間が経過した後も、ティック数はゼロにリセットされます。 TrackBall API を使用して、トラックボールの感度を設定できます。 トラックボールの感度を高く設定する とティックのしきい値は小さくなります(トラックボールの小さな動きでもナビゲーションイベントが 生成されます)。 トラックボールの感度を低く設定するとティックのしきい値は大きくなります(ナビ ゲーションイベントを生成するにはトラックボールを大きく動かす必要があります)。 トラックボールの動き Trackball API を使用して、BlackBerry® デバイスのハードウェアからソフトウェアレイヤに送信されるト ラックボールの動きのデータをフィルタにかけることができます。 Trackball API では、動きの "ノイ ズ" や不要な動きをフィルタで除去できます。 Trackball API を使用して、トラックボールの動きの速さなどの設定を変更することもできます。 トラッ クボールの動きの速さの設定を大きくすると、その結果として、ユーザーがトラックボールを回し 続けている間、BlackBerry デバイスのハードウェアで検出される速度よりも速くトラックボールが 動いていると ソフトウェアレイヤが識別する場合があります。 ユーザーがトラックボールを止めずに 回すと、トラックボールの感度は一時的に上がります。 トラックホイール BlackBerry® Pearl™ 8100 Series 以前の BlackBerry® デバイスでは、トラックホイールがユーザーナビ ゲーションの主要コントロールとして使用されていました。 トラックホイールは、BlackBerry® デバイス の右側にあります。 ユーザーは次のアクションを実行できます。 • • • トラックホイールを回してカーソルを縦に動かす Alt キーを押しながらトラックホイールを回して、カーソルを横に動かす トラックホイールをクリックして、アクションを開始したり、メニューを開いたりする 9 キーボード 開発ガイド キーボード ユーザーは主にテキストを入力する目的でキーボードを使用します。 タッチパネルなしの BlackBerry® デバイスでは、ユーザーはキーボードを使用して画面を移動することもできます(地図を移動する場合な ど)。 ただし、キーボードを使用したナビゲーションは、トラックホイール、トラックボール、およびト ラックパッドを使用したナビゲーションの代替手段と考えてください。 トラックホイールまたはトラックボール付き BlackBerry デバイスには、QWERTY キーボードまたは SureType® キーボードが付いています。 トラックパッド付き BlackBerry デバイスには、QWERTY キー ボードが付いています。 どちらの種類のキーボードにも文字キーとモディファイアキーがあります。 文 字キーは、BlackBerry デバイスに文字を送信するキーです。これには、テキストキー、メニューキー、 エスケープキーが含まれます。 モディファイアキーは、文字キーの機能を変化させます。 モディファイ アキーには、Shift キーと Alt キーが含まれます。 SurePress™ タッチパネル付き BlackBerry デバイスでは、ほとんどの場合、QWERTY キーボードはワイド ビューで表示され、SureType® キーボードはポートレートビューで表示されます。 BlackBerry デバイスの操作方法 BlackBerry の機種 操作方法 BlackBerry® BlackBerry® BlackBerry® BlackBerry® BlackBerry® 7100 Series 8700 Series 8800 Series Bold™ 9000 スマートフォン Bold™ 9650 スマートフォン トラックホイール トラックホイール トラックボール トラックボール トラックパッド BlackBerry® BlackBerry® BlackBerry® BlackBerry® BlackBerry® BlackBerry® BlackBerry® BlackBerry® Bold™ 9700 スマートフォン Curve™ 8300 Series Curve™ 8500 Series Curve™ 8900 スマートフォン Pearl™ 8100 Series Pearl™ Flip 8200 Series Storm™ 9500 Series Tour™ 9630 スマートフォン トラックボール トラックパッド トラックボール トラックボール トラックボール タッチパネル トラックボール 10 画面 開発ガイド 画面 3 BlackBerry® デバイスの UI のメインコンポーネントは Screen オブジェクトです。 BlackBerry デバイスでは複数の画面を同時に開くことができますが、一度に表示できるのは 1 画面だけ です。 BlackBerry® Java® Virtual Machine では、一連の Screen オブジェクトが順番に表示スタックに 保持されます。 スタックの最上位にある画面が、BlackBerry デバイスのユーザーに対して表示されるア クティブな画面です。 BlackBerry デバイスアプリケーションで画面を表示するときは、その画面がスタッ クの最上位にプッシュされます。 BlackBerry デバイスアプリケーションで画面を閉じると、その画面 はスタックの最上位から削除され、スタックの次の画面が表示されます。このとき、必要に応じて再描画 が実行されます。 表示スタックには、各画面は 1 回のみ現れます。 BlackBerry デバイスアプリケーションでスタックに プッシュした画面が既に存在する場合は、BlackBerry JVM からランタイム例外がスローされます。 BlackBerry デバイスアプリケーションでは、ユーザーが画面の操作を終了したときに画面を表示スタッ クから削除し、BlackBerry デバイスアプリケーションでメモリを効率的に使用できるようにする必要が あります。 各画面は個別のスレッドを使用するため、同時に使用するモーダル画面は少数に抑えてくだ さい。 UI API によって単純な Screen オブジェクトが初期化されます。 画面の作成後は、フィールドやメニュー を追加し、画面を表示スタックにプッシュすることでユーザーに表示できます。 必要に応じて、BlackBerry デバイスの UI を変更し、新しいフィールドタイプを実装できます。 また、カスタムのナビゲーション も追加できます。 Screen クラスには、各国語キーボードでの入力など、複雑な入力方式で必要となる多義性は実装されてい ません。 異なる入力方法を統合するには、Field クラス、またはそのサブクラスの 1 つを拡張でき ます。 Screen オブジェクトをテキストの入力には使用しないでください。 Screen クラス クラス 説明 Screen Screen クラスを使用して画面を作成し、レイアウトマネージャを使 用して UI コンポーネントを画面上に配置できます。 Field スー パークラスの定数で定義されているスタイルを使用して、画面の特定 のタイプを定義できます。 11 描画領域の管理 開発ガイド クラス 説明 FullScreen FullScreen クラスを使用して空白の画面を作成し、そこに標準の垂 MainScreen 直方向のレイアウトで UI コンポーネントを追加できます。 水平方 向や斜め方向など、別のレイアウトスタイルを使用する場合は Screen クラスを使用し、そこにレイアウトマネージャを追加できます。 MainScreen クラスを使用して、次の標準 UI コンポーネントを含む 画面を作成できます。 • デフォルトの画面タイトル(タイトル後に SeparatorField) • メインのスクロール可能なセクション(VerticalFieldManager 内) • [閉じる]メニュー項目を持つデフォルトのメニュー • BlackBerry® デバイスのユーザーが[閉じる]メニュー項目をク リックした場合、またはエスケープキーを押した場合のデフォルト の「閉じる」処理 BlackBerry デバイスアプリケーションの最初の画面には、他の BlackBerry デバイスアプリケーションとの統一のために MainScreen オブジェクトを使用することをお勧めします。 描画領域の管理 Graphics オブジェクトは、BlackBerry® デバイスアプリケーションで使用できる描画領域全体を表し ます。 この領域を制限するには、領域を XYRect オブジェクトに分割します。 各 XYPoint は画面上のポ イントを表し、X 座標と Y 座標で構成されています。 1. 次のクラスをインポートします。 • net.rim.device.api.ui.Graphics • net.rim.device.api.ui.XYRect • net.rim.device.api.ui.XYPoint 2. XYPoint オブジェクトを作成し、 四角形の左上と右下のポイントを表します。XYPoint オブジェクトを 使用して XYRect オブジェクトを作成し、四角形のクリッピング領域を作成します。 XYPoint bottomRight = new XYPoint(50, 50); XYPoint topLeft = new XYPoint(10, 10); XYRect rectangle = new XYRect(topLeft, bottomRight); 12 開発ガイド 描画領域の管理 3. Graphics.pushContext() を呼び出し、 領域の開始位置で描画オフセットを調整しない描画コールを実行 します。Graphics.pushContext() を呼び出して、 四角形のクリッピング領域をコンテキストスタックに プッシュします。Graphics.drawRect() を呼び出して四角形を描画し、Graphics.fillRect() を呼び出して 四角形を塗りつぶします。Graphics.popContext() を呼び出して、現在のコンテキストをコンテ キストスタックからポップします。 graphics.pushContext(rectangle, 0, 0); graphics.fillRect(10, 10, 30, 30); graphics.drawRect(15, 15, 30, 30); graphics.popContext(); graphics.drawRect(15, 15, 30, 30); graphics.pushContext(rectangle, 0, 0); graphics.fillRect(10, 10, 30, 30); graphics.drawRect(15, 15, 30, 30); graphics.popContext(); graphics.drawRect(15, 15, 30, 30); 4. pushRegion() を呼び出して、領域の開始位置で描画オフセットを調整することを指定します。 Graphics.drawRect() を呼び出して四角形を描画し、 Graphics.fillRect() を呼び出して四角形を塗りつ ぶします。Graphics.popContext() を呼び出して、現在のコンテキストをコンテキストスタックからポッ プします。 graphics.pushRegion(rectangle); graphics.fillRect(10, 10, 30, 30); graphics.drawRect(15, 15, 30, 30); graphics.popContext(); 5. スタックにプッシュする Graphics オブジェクトの一部を指定します。 6. pushContext()(または pushRegion())を呼び出した後、反転する Graphics オブジェクトの一部を提供 します。 graphics.pushContext(rectangle); graphics.invert(rectangle); graphics.popContext(); 7. translate() を呼び出します。XYRect の起点が (1, 1) から (20, 20) に変換されます。変換後、XYRect オブジェクトの下の部分がグラフィックコンテキストの境界を超過し、その部分がクリッピングされ ます。 XYRect rectangle = new XYRect(1, 1, 100, 100); XYPoint newLocation = new XYPoint(20, 20); rectangle.translate(newLocation); 13 画面移行の作成 開発ガイド 画面移行の作成 画面移行を作成し、BlackBerry® デバイスでアプリケーションを開くか閉じるときに表示する視覚効果を 適用できます。 net.rim.device.api.ui.TransitionContext クラスを使用して、アプリケーションに次のタ イプの画面移行を作成できます。 移行 説明 TRANSITION_FADE この移行では、フェードインまたはフェードアウトによって画面の 表示を切り替えます。 この画面移行では、画面の不透明度を 変更することでフェードの視覚効果を作り出します。 この移行では、デバイスのディスプレイ上をスライドさせることで 画面の表示を切り替えます。 属性を使用して、新しい画面と現在の 画面の両方をスライドするか、両方の画面が動くように見える効果 を作成するか、新しい画面が現在の画面の上をスライドすることを 指定できます。 この移行では、デバイスのディスプレイをワイプすることで画面の 表示を切り替えます。 この移行では、デバイスのディスプレイのズームインまたはズーム アウトによって画面の表示を切り替えます。 移行しません。 TRANSITION_SLIDE TRANSITION_WIPE TRANSITION_ZOOM TRANSITION_NONE 各画面移行タイプには、画面移行の視覚効果をカスタマイズできる属性があります。 例えば、スライド 効果をカスタマイズし、デバイスのディスプレイの下から上に画面をスライドさせることができます。 画面移行をカスタマイズしなかった場合、アプリケーションではデフォルトの属性が使用されます。 デ フォルトの属性の詳細については、BlackBerry® Java® Development Environment の API リファレンス を参照してください。 画面移行を作成したら、UiEngineInstance.setTransition() を呼び出してアプリケーション内で移行を登録 してから、削除する画面と表示する画面、移行を発生させるイベント、および表示する移行を指定する必 要があります。 画面移行の使用方法をデモするサンプルアプリケーションをダウンロードするには、 www.blackberry.com/ go/screentransitionssample にアクセスしてください。 画面移行の詳細については、BlackBerry Java Development Environment の API リファレンスを参照してください。 注: BlackBerry デバイスで設定されたテーマによって、ユーザーがアプリケーションを開くときの視覚 効果が制御されます。 詳細については、『 BlackBerry Theme Studio ユーザーガイド』を参照してくだ さい。 14 開発ガイド 画面移行の作成 コードサンプル:画面移行の作成 以下のコードサンプルは、スライド移行およびフェード移行を表すものです。 ユーザーがアプリケーショ ンを開くと、BlackBerry® デバイス上に最初の画面が表示され、ボタンが表示されます。 ユーザーがこ のボタンをクリックすると、2 番目の画面が右側からスライド表示されます。 2 番目の画面は 2 秒後に 自動的に画面からフェードアウトします。 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; import net.rim.device.api.ui.decor.*; public class ScreenTransitionSample extends UiApplication implements FieldChangeListener { private Screen _secondaryScreen; private Runnable _popRunnable; public static void main(String[] args) { ScreenTransitionSample theApp = new ScreenTransitionSample (); theApp.enterEventDispatcher(); } public ScreenTransitionSample () { _secondaryScreen = new FullScreen(); _secondaryScreen.setBackground( BackgroundFactory.createSolidBackground(Color.LIGHTBLUE) ); LabelField labelField = new LabelField("The screen closes automatically in two seconds by using a fade transition"); _secondaryScreen.add(labelField); TransitionContext transition = new TransitionContext(TransitionContext.TRANSITION_SLIDE); transition.setIntAttribute(TransitionContext.ATTR_DURATION, 500); transition.setIntAttribute(TransitionContext.ATTR_DIRECTION, TransitionContext.DIRECTION_RIGHT); transition.setIntAttribute(TransitionContext.ATTR_STYLE, TransitionContext.STYLE_PUSH); UiEngineInstance engine = Ui.getUiEngineInstance(); engine.setTransition(null, _secondaryScreen, UiEngineInstance.TRIGGER_PUSH, transition); transition = new TransitionContext(TransitionContext.TRANSITION_FADE); transition.setIntAttribute(TransitionContext.ATTR_DURATION, 500); transition.setIntAttribute(TransitionContext.ATTR_KIND, TransitionContext.KIND_OUT); engine.setTransition(_secondaryScreen, null, UiEngineInstance.TRIGGER_POP, transition); MainScreen baseScreen = new MainScreen(); baseScreen.setTitle("Screen Transition Sample"); ButtonField buttonField = new ButtonField("View Transition", ButtonField.CONSUME_CLICK) ; buttonField.setChangeListener(this); baseScreen.add(buttonField); pushScreen(baseScreen); 15 画面の向きと方向の指定 開発ガイド _popRunnable = new Runnable() { public void run() { popScreen(_secondaryScreen); } }; } } public void fieldChanged(Field field, int context) { pushScreen(_secondaryScreen); invokeLater(_popRunnable, 2000, false); } 画面の向きと方向の指定 タッチパネルアプリケーションでは、画面の向きと方向の両方を考慮することになります。 向きは、画 面の縦横比に関連しています。 方向は、画面の描画領域に関連しています。 向き タッチパネル搭載 BlackBerry® デバイスのユーザーは、デバイスを回すことで画面の方向を変更でき ます。 BlackBerry ロゴが上部になるように BlackBerry デバイスを持っている場合、画面はポートレ イトビューになります。 デバイスを左または右に 90 度に回転させると、画面はワイドビューになります。 net.rim.device.api.system.Display クラスを使用して、画面の向きを取得できます。 Display クラスに は、タッチパネル搭載デバイスでの情報の表示方向に対応する定数があります。 例えば、ポートレイト ビュー、ワイドビュー、スクエアに対応する定数は、Display.ORIENTATION_PORTRAIT、 Display.ORIENTATION_LANDSCAPE、Display.ORIENTATION_SQUARE です。 画面の向きを確認するには、Display.getOrientation() メソッドを呼び出します。 このメソッドでは、 BlackBerry デバイスの方向に対応する整数が返されます。 向きの変化を検知するため、Screen.sublayout() を上書きできます。 このメソッドでは、super.sublayout () を呼び出して、幅と高さの変化を監視します。 方向 タッチパネル搭載の BlackBerry デバイスでは、情報をさまざまな方向で画面に表示できます。 方向と は、BlackBerry ロゴの位置との相対で表した画面の描画領域の上部を指します。 描画領域の上部が BlackBerry ロゴが付けられた側にある場合は、方向が北になります。描画領域の上部が BlackBerry ロ ゴの左側にある場合は、方向が西になります。描画領域の上部が BlackBerry ロゴの右側にある場合は、 方向が東になります。 net.rim.device.api.system.Display クラス、net.rim.device.api.ui.Ui クラス、および net.rim.device.api.ui.UiEngineInstance クラスを使用して、BlackBerry デバイスで情報を表示する方向を 制御できます。 Display クラスには、デバイスで情報を表示する方向に対応する定数があります。 例え ば、北、西、東の方向に対応する定数は、Display.DIRECTION_NORTH、Display.DIRECTION_WEST、 Display.DIRECTION_EAST です。 16 画面の向きと方向の指定 開発ガイド net.rim.device.api.ui.Ui クラスのオブジェクトを作成して、Ui.getUiEngineInstance() を呼び出し、 UiEngineInstance クラスのオブジェクトを取得できます。 方向を表す Display クラスの定数を使用して UiEngineInstance.setAcceptableDirections() を呼び出すと、BlackBerry デバイスで情報を表示する方向が 設定されます。 コードサンプル:画面の向きの取得 switch(Display.getOrientation()) { case Display.ORIENTATION_LANDSCAPE: Dialog.alert("Screen orientation case Display.ORIENTATION_PORTRAIT: Dialog.alert("Screen orientation case Display.ORIENTATION_SQUARE: Dialog.alert("Screen orientation default: Dialog.alert("Screen orientation } is landscape"); break; is portrait"); break; is square"); break; is not known"); break; コードサンプル:BlackBerry API アプリケーションでのポートレートビューの強制 // Use code like this before invoking UiApplication.pushScreen() int direction = Display.DIRECTION_NORTH; Ui.getUiEngineInstance().setAcceptableDirections(direction); コードサンプル:MIDlet アプリケーションでのワイドビューの強制 // Use code like this before invoking Display.setCurrent() in the MIDlet constructor DirectionControl dc = (DirectionControl) ((Controllable) Display.getDisplay(this)). getControl("net.rim.device.api.lcdui.control.DirectionControl"); int directions = DirectionControl.DIRECTION_EAST | DirectionControl.DIRECTION_WEST; dc.setAcceptableScreenDirections(directions); タッチパネルの向きの取得 1. net.rim.device.api.system.Display クラスをインポートします。 2. net.rim.device.api.system.Display.getOrientation() を呼び出します。 int orientation = Display.getOrientation(); タッチパネルの方向の制限 1. 次のクラスをインポートします。 • net.rim.device.api.ui.Ui • net.rim.device.api.ui.UiEngineInstance 2. net.rim.device.api.ui.Ui.getUiEngineInstance() を呼び出します。 17 開発ガイド 画面の向きと方向の指定 UiEngineInstance _ue; _ue = Ui.getUiEngineInstance(); 3. net.rim.device.api.ui.UiEngineInstance.setAcceptableDirections(byte flags) を呼び出し、 画面の方向を 示す引数を渡します。 _ue.setAcceptableDirections(Display.DIRECTION_WEST); タッチパネルの描画領域のサイズが変更された場合の通知の受信 1. 次のクラスをインポートします。 • javax.microedition.lcdui.Canvas • net.rim.device.api.ui.component.Dialog 2. javax.microedition.lcdui.Canvas を拡張します。 3. Canvas.sizeChanged(int, int) を上書きします。 protected void sizeChanged(int w, int h) { Dialog.alert("The size of the Canvas has changed"); } 18 加速度計 開発ガイド 加速度計 4 タッチパネル搭載 BlackBerry® デバイスには、BlackBerry デバイスの向きと加速を感知するように設計 された加速度計が搭載されています。 BlackBerry デバイスのユーザーが BlackBerry デバイスを動かす と、加速度計は、x、y、および z 軸に沿った 3D 空間の動きを感知します。 デバイスのユーザーは、デ バイスの向きを変えることで、BlackBerry デバイスアプリケーションの画面の表示方向をポートレート ビューおよびワイドビューに切り替えることができます。 net.rim.device.api.system パッケージの Accelerometer API を使用して、BlackBerry デバイスの向き と加速に応答させることができます。 例えば、ユーザーが BlackBerry デバイスを動かしたり回転させた りする速度に応じて、画面上で移動するオブジェクトの方向と速度を変化させるゲームアプリケーション を作成することができます。 加速度計の使用方法をデモするサンプルアプリケーションをダウンロードするには、 www.blackberry.com/ go/accelerometersample にアクセスしてください。 サンプルアプリケーションの詳細については、 www.blackberry.com/go/devguides にアクセスし、『 Accelerometer Sample Application Overview(加 速度計サンプルアプリケーションの概要)』を参照してください。 加速度計データの種類 BlackBerry® デバイスアプリケーションでは、加速度計からデータを取得できます。 データの種類 説明 orientation acceleration 底部に対する BlackBerry デバイスの向きです。 BlackBerry デバイスの回転加速度です。 加速度計から取得するデータの種類に関する詳細は、BlackBerry® Java® Development Environment の API リファレンスを参照してください。 加速度計データの取得 加速度計は、BlackBerry® デバイスユーザーが BlackBerry デバイスを動かすときに、x、y、z 軸の動作 方向と速度を追跡するように設計されています。 x 軸は、BlackBerry デバイスの幅と平行な向き です。 y 軸は、BlackBerry デバイスの長さと平行な向きです。 z 軸は、BlackBerry デバイスの奥行き (前面から背面)と平行な向きです。 加速度計の x、y、z 軸の詳細については、BlackBerry® Java® Development Environment の API リファレンスで net.rim.device.api.system.AccelerometerSensor クラス を参照してください。 19 開発ガイド 特定の間隔での加速度計データの取得 加速度計を搭載する BlackBerry デバイスの加速に反応する BlackBerry デバイスアプリケーションを 作成することができます。 例えば、ゲームアプリケーションで、BlackBerry デバイスユーザーが BlackBerry デバイスを動かし、迷路内を移動する物体の方向と速度をコントロールできます。 net.rim.device.api.system パッケージの Accelerometer API を使用して、BlackBerry デバイスの加速に 反応させることができます。 最初に、net.rim.device.api.system.AccelerometerSensor.isSupported() を呼 び出して、BlackBerry デバイスが加速度計をサポートするかどうかを確認する必要があります。 このメ ソッドが true という値を返した場合、BlackBerry デバイスは加速度計をサポートします。 AccelerometerData クラスを使用して、ユーザーが BlackBerry デバイスを動かした方向を識別でき ます。 AccelerometerData.getOrientation() を呼び出すと、BlackBerry デバイスの方向に応じて、 AccelerometerSensor クラス定数のいずれかが返されます。 例えば、AccelerometerData.getOrientation() が AccelerometerSensor.ORIENTATION_LEFT_UP という値を返した場合、BlackBerry デバイスの左側が上方向を 向いています。 AccelerometerSensor クラスを使用して、BlackBerry デバイスから加速度データを取得できます。 AccelerometerSensor.openRawDataChannel() を呼び出すと、 net.rim.device.api.system.AccelerometerSensor.Channel クラスのオブジェクトが返されます。 AccelerometerSensor.Channel クラスにより、加速度計への接続を確立できます。 AccelerometerSensor.Channel.getLastAccelerationData() を呼び出すことで、加速度計からデータを取得で きます。 加速度計への接続を維持すると、BlackBerry デバイスのバッテリーの電力が消費されます。 BlackBerry デバイスアプリケーションで加速度計からデータを取得する必要がなくなったときは、 AccelerometerSensor.Channel.close() を呼び出して接続を切断する必要があります。 コードサンプル:加速度計からのデータの取得 short[] xyz = new short[3]; while( running ) { channel.getLastAccelerationData(xyz); } channel.close(); 特定の間隔での加速度計データの取得 アプリケーションがフォアグラウンドで実行されている場合に加速度計へのチャネルを開く BlackBerry® デバイスアプリケーションでは、そのアプリケーションがバックグラウンドになるとチャネルが一時停止 し、加速度計への問い合わせが行われなくなります。 BlackBerry データベースアプリケーションで、 短い間隔で、または BlackBerry デバイスが移動中ではないときに AccelerometerSensor.Channel. getLastAccelerationData(short[]) を呼び出すと、メソッドから重複する値が返される場合があります。 1. 次のクラスをインポートします。 • net.rim.device.api.system.AccelerometerSensor.Channel; • net.rim.device.api.system.AccelerometerSensor; 20 開発ガイド アプリケーションがフォアグラウンドで実行されている場合の加速度計への問い合わせ 2. 加速度計へのチャネルを開きます。チャネルが開いている場合、BlackBerry デバイスアプリケーショ ンは、加速度計に情報の問い合わせを行います。 Channel rawDataChannel = AccelerometerSensor.openRawDataChannel ( Application.getApplication() ); 3. 加速度計データを格納する配列を作成します。 short[] xyz = new short[ 3 ]; 4. スレッドを作成します。 while( running ) { 5. Channel.getLastAccelerationData(short[]) を呼び出して、加速度計からデータを取得します。 rawDataChannel.getLastAccelerationData( xyz ); 6. Thread.sleep() を呼び出して、加速度計への問い合わせを実行する間隔をミリ秒単位で指定します。 Thread.sleep( 500 ); 7. Channel.close() を呼び出して、加速度計へのチャネルを閉じます。 rawDataChannel.close(); アプリケーションがフォアグラウンドで実行されている場合 の加速度計への問い合わせ 1. 次のクラスをインポートします。 • net.rim.device.api.system.AccelerometerChannelConfig • net.rim.device.api.system.AccelerometerSensor.Channel 2. 加速度計から移動速度のデータを取得するチャネルを開きます。 Channel channel = AccelerometerSensor.openRawAccelerationChannel ( Application.getApplication()); 3. Thread.sleep() を呼び出して、加速度計への問い合わせを実行する間隔をミリ秒単位で指定します。 short[] xyz = new short[ 3 ]; while( running ) { channel.getLastAccelerationData( xyz ); Thread.sleep( 500 ); } 4. Channel.close() を呼び出して、加速度計へのチャネルを閉じます。 channel.close(); 21 開発ガイド アプリケーションがバックグラウンドで実行されている場合の加速度計への問い合わせ アプリケーションがバックグラウンドで実行されている場合 の加速度計への問い合わせ 1. 次のクラスをインポートします。 • net.rim.device.api.system.AccelerometerChannelConfig; • net.rim.device.api.system.AccelerometerSensor.Channel; 2. 加速度計へのチャネルの設定を作成します。 AccelerometerChannelConfig channelConfig = new AccelerometerChannelConfig ( AccelerometerChannelConfig.TYPE_RAW ); 3. AccelerometerChannelConfig.setBackgroundMode(Boolean) を呼び出して、バックグラウンドのアプリケー ションに対するサポートを指定します。 channelConfig.setBackgroundMode( true ); 4. AccelerometerSensor.openChannel() を呼び出して、加速度計へのバックグラウンドチャネルを開きます。 Channel channel = AccelerometerSensor.openChannel( Application.getApplication(), channelConfig ); 5. Thread.sleep() を呼び出して、加速度計への問い合わせを実行する間隔をミリ秒単位で指定します。 short[] xyz = new short[ 3 ]; while( running ) { channel.getLastAccelerationData( xyz ); Thread.sleep( 500 ); } 6. Channel.close() を呼び出して、加速度計へのチャネルを閉じます。 channel.close(); 加速度計読み取り値のバッファへの格納 1. 次のクラスをインポートします。 • net.rim.device.api.system.AccelerometerChannelConfig; • net.rim.device.api.system.AccelerometerSensor.Channel; 2. 加速度計へのチャネルの設定を作成します。 AccelerometerChannelConfig channelConfig = new AccelerometerChannelConfig ( AccelerometerChannelConfig.TYPE_RAW ); 22 開発ガイド バッファからの加速度計読み取り値の取得 3. AccelerometerChannelConfig.setSamplesCount() を呼び出して、 バッファに格納する加速度計読み取り値 の数を指定します。バッファの各要素には、x、y、および z 軸の加速度計読み取り値と、読み取りが発 生した時期が保持されています。 channelConfig.setSamplesCount( 500 ); 4. AccelerometerSensor.openChannel() を呼び出して、加速度計へのチャネルを開きます。 Channel bufferedChannel = AccelerometerSensor.openChannel ( Application.getApplication(), channelConfig ); バッファからの加速度計読み取り値の取得 1. 次のクラスをインポートします。 • net.rim.device.api.system.AccelerometerData; • net.rim.device.api.system.AccelerometerSensor.Channel; 2. 加速度計データについてバッファを問い合わせます。 AccelerometerData accData = bufferedChannel.getAccelerometerData(); 3. AccelerometerData.getNewBatchLength() を呼び出して、最後の問い合わせ以降に取得された読み取り値 の数を取得します。 int newBatchSize = accData.getNewBatchLength(); 4. AccelerometerData.getXAccHistory()、AccelerometerData.getYAccHistory()、および AccelerometerData.getZAccHistory() を呼び出して、 各軸のバッファから加速度計データを取得します。 short[] xAccel = accData.getXAccHistory(); short[] yAccel = accData.getYAccHistory(); short[] zAccel = accData.getZAccHistory(); 加速度計からの読み取りが行われた時期の取得 1. net.rim.device.api.system.AccelerometerData クラスをインポートします。 2. 加速度計データについてバッファを問い合わせます。 AccelerometerData accData; accData = bufferedChannel.getAccelerometerData(); 3. AccelerometerData.getSampleTsHistory() を呼び出します。 long[] queryTimestamps = accData.getSampleTsHistory(); 23 開発ガイド イベント イベント 5 ナビゲーションイベントへの応答 Screen ナビゲーションメソッドを使用して、BlackBerry® デバイスアプリケーションを作成できます。 既存の BlackBerry デバイスアプリケーションが TrackwheelListener インターフェイスを実装している場 合、BlackBerry デバイスアプリケーションを更新して、Screen ナビゲーションメソッドを使用します。 1. net.rim.device.api.ui.Screen クラスをインポートします。 2. ナビゲーションイベントは、net.rim.device.api.ui.Screen クラス (またはそのサブクラスの 1 つ)を拡 張し、次のナビゲーションメソッドを上書きすることで管理します。 navigationClick(int status, int time) navigationUnclick(int status, int time) navigationMovement(int dx, int dy, int status, int time) 入力方式の種類の特定 1. 以下の 1 つまたは複数のクラスをインポートします。 • net.rim.device.api.ui.Screen • net.rim.device.api.ui.Field 2. 3. 4. 5. net.rim.device.api.system.KeypadListener インターフェイスをインポートします。 net.rim.device.api.system.KeypadListener インターフェイスを実装します。 Screen クラス、 Field クラス、 またはその両方を拡張します。 navigationClick、 navigationUnclick、 または navigationMovement のいずれかのメソッドの実装で、ビット 単位の AND 演算を status パラメータに対して実行し、イベントに関する詳細情報を得ます。 navigationClick(int status, int time) メソッドを実装して、 トラックホイールまたは 4 ウェイナビゲー ション入力デバイス (トラックボールなど)によって、イベントがトリガーされるかどうかを指定します。 public boolean navigationClick(int status, int time) { if ((status & KeypadListener.STATUS_TRACKWHEEL) == KeypadListener.STATUS_TRACKWHEEL) { //Input came from the trackwheel } else if ((status & KeypadListener.STATUS_FOUR_WAY) == KeypadListener.STATUS_FOUR_WAY) { //Input came from a four way navigation input device } return super.navigationClick(status, time); } net.rim.device.api.system.KeypadListener クラスのステータス変更子の詳細については、 BlackBerry® Java® Development Environment の API リファレンスを参照してください。 24 開発ガイド タッチパネルイベントへの応答 タッチパネルイベントへの応答 BlackBerry® デバイスユーザーは、トラックボールの BlackBerry デバイスと同じ操作を、タッチパネル のデバイスで実行できます。 例えば、BlackBerry デバイスユーザーは、タッチパネルを使用してメニュー を開き、オプションのリストをスクロールして、オプションを選択できます。 バージョン 4.7 よりも前の BlackBerry® Java® Development Environment を使用して BlackBerry デバ イスアプリケーションを作成した場合、BlackBerry デバイスユーザーがタッチパネルに触れたときにア プリケーションが応答するように、アプリケーションの .jad ファイルを変更することができます。 .jad ファイルで、RIM-TouchCompatibilityMode オプションを false に設定します。 バージョン 4.7 以降の BlackBerry JDE を使用して BlackBerry デバイスアプリケーションを作成した 場合、net.rim.device.api.ui.Screen クラス、net.rim.device.api.ui.Field クラス、または Field クラスの サブクラスの 1 つを拡張して、touchEvent() メソッドを上書きすることで、BlackBerry デバイスユー ザーがタッチパネルで実行する操作を、アプリケーションに識別させることができます。 touchEvent() メソッド内で、TouchEvent.getEvent() が返した値と、net.rim.device.api.ui.TouchEvent クラスおよび net.rim.device.api.ui.TouchGesture クラスから取得した定数を比較します。 TouchEvent クラスには、タッチパネルでユーザーが実行できるさまざまな操作を表す定数があります。 例えば、クリック、タッチ、移動を表す定数は、TouchEvent.CLICK、TouchEvent.DOWN、および TouchEvent.MOVE です。 TouchGesture クラスには、タッチパネルでユーザーが実行できるさまざまなジェスチャーを表す定数があ ります。 例えば、タップとスワイプのジェスチャーを表す定数は、TouchGesture.TAP と TouchGesture.SWIPE です。 コードサンプル:ユーザーがタッチパネルで実行する操作の識別 次のコードサンプルでは、switch ステートメントを使用して操作を識別します。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.CLICK: Dialog.alert("A click action occurred"); return true; case TouchEvent.DOWN: Dialog.alert("A down action occurred"); return true; case TouchEvent.MOVE: Dialog.alert("A move action occurred"); return true; } return false; } 25 開発ガイド ユーザーが画面をタッチしている間のシステムイベントへの応答 ユーザーが画面をタッチしている間のシステムイベントへの応 答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen • net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() を呼び出します。 4. TouchEvent.getEvent() に返される値が TouchEvent.CANCEL と等しいことを確認します。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.CANCEL: Dialog.alert("System event occurred while processing touch events"); return true; } return false; } 画面上で指を上にすばやくスライドさせる操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.TouchGesture • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen • net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() を呼び出します。 26 開発ガイド 画面上で指を下にすばやくスライドさせる操作への応答 4. TouchGesture.getSwipeDirection() から返される値が TouchGesture.SWIPE_NORTH と等しいことを確認し ます。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.GESTURE: TouchGesture gesture = message.getGesture(); switch(gesture.getEvent()) { case TouchGesture.SWIPE: if(gesture.getSwipeDirection() == TouchGesture.SWIPE_NORTH) { Dialog.alert("Upward swipe occurred"); return true; } } return false; } } 画面上で指を下にすばやくスライドさせる操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.TouchGesture • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen • net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() を呼び出します。 4. TouchGesture.getSwipeDirection() から返される値が TouchGesture.SWIPE_SOUTH と等しいことを確認し ます。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.GESTURE: TouchGesture gesture = message.getGesture(); switch(gesture.getEvent()) { case TouchGesture.SWIPE: if(gesture.getSwipeDirection() == TouchGesture.SWIPE_SOUTH) { Dialog.alert("Downward swipe occurred"); return true; } 27 画面上で指を左にすばやくスライドさせる操作への応答 開発ガイド } } } return false; 画面上で指を左にすばやくスライドさせる操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.TouchGesture • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen • net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() を呼び出します。 4. TouchGesture.getSwipeDirection() から返される値が TouchGesture.SWIPE_EAST と等しいことを確認し ます。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.GESTURE: TouchGesture gesture = message.getGesture(); switch(gesture.getEvent()) { case TouchGesture.SWIPE: if(gesture.getSwipeDirection() == TouchGesture.SWIPE_EAST) { Dialog.alert("Eastward swipe occurred"); return true; } } return false; } } 画面上で指を右にすばやくスライドさせる操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.TouchGesture 28 開発ガイド • • • • 画面をクリックする操作への応答 net.rim.device.api.ui.Field net.rim.device.api.ui.Manager net.rim.device.api.ui.Screen net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() を呼び出します。 4. TouchGesture.getSwipeDirection() から返される値が TouchGesture.SWIPE_WEST と等しいことを確認し ます。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.GESTURE: TouchGesture gesture = message.getGesture(); switch(gesture.getEvent()) { case TouchGesture.SWIPE: if(gesture.getSwipeDirection() == TouchGesture.SWIPE_WEST) { Dialog.alert("Westward swipe occurred"); return true; } } return false; } } 画面をクリックする操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen • net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() を呼び出します。 4. TouchEvent.getEvent() から返される値が TouchEvent.CLICK と等しいことを確認します。 29 開発ガイド 画面をすばやく 2 回タッチする操作への応答 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.CLICK: Dialog.alert("CLICK occurred"); return true; } return false; } 画面をすばやく 2 回タッチする操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.TouchGesture • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen • net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchGesture.TAP イベントのオカレンスを確認し、 TouchGesture.getTapCount から 2 が返されることを確認します。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.GESTURE: TouchGesture gesture = message.getGesture(); switch(gesture.getEvent()) { case TouchGesture.TAP: if(gesture.getTapCount() == 2) { Dialog.alert("Double tap occurred"); return true; } } } return false; } 画面上でアイテムにタッチしてドラッグする操作への応答 1. 次のクラスをインポートします。 30 開発ガイド • • • • • 画面を軽くタッチする操作への応答 net.rim.device.api.ui.TouchEvent net.rim.device.api.ui.Field net.rim.device.api.ui.Manager net.rim.device.api.ui.Screen net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() を呼び出します。 4. TouchEvent.getEvent() から返される値が TouchEvent.MOVE と等しいことを確認します。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.MOVE: Dialog.alert("Move event occurred"); return true; } return false; } 画面を軽くタッチする操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.TouchGesture • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen • net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() を呼び出します。 4. TouchEvent.getEvent() により返される値が TouchEvent.DOWN と等しいことを確認します。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.DOWN: Dialog.alert("Touch occurred"); return true; 31 スクロール操作への応答 開発ガイド } } return false; スクロール操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.TouchGesture • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen 2. Manager クラスを拡張するクラスを作成します。 public class newManager extends Manager { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getEvent() から返される値が TouchEvent.MOVE と等しいことを確認します。 protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.MOVE: return true; } return false; } 画面上の 2 か所に同時にタッチする操作への応答 1. 次のクラスをインポートします。 • net.rim.device.api.ui.TouchEvent • net.rim.device.api.ui.Field • net.rim.device.api.ui.Manager • net.rim.device.api.ui.Screen • net.rim.device.api.ui.component.Dialog 2. Manager クラス、 Screen クラス、 Field クラス、 または Field のサブクラスの 1 つを拡張するクラスを 作成します。 public class newButtonField extends ButtonField { 3. touchEvent(TouchEvent message) メソッドの実装で、TouchEvent.getX(1)、TouchEvent.getY(1)、 TouchEvent.getX(2)、 TouchEvent.getY(2) のメソッドの呼び出し時にゼロより大きな値が返されるかど うかを確認します。 32 開発ガイド イベントインジェクション protected boolean touchEvent(TouchEvent message) { switch(message.getEvent()) { case TouchEvent.MOVE: if(message.getX(1) > 0 && message.getY(1) > 0) { Dialog.alert("First finger touched/moved"); } if(message.getX(2) > 0 && message.getY(2) > 0) { Dialog.alert("Second finger touched/moved"); } return true; } return false; } イベントインジェクション EventInjector クラスおよびその内部クラスを使用して、UI イベントをプログラムにより生成することが できます。 BlackBerry® Device Software バージョン 5.0 以降を実行する、タッチパネル付き BlackBerry® デバイスでは、読み取りやタップなどのタッチイベントを挿入できます。 いずれかの EventInjector 内部クラスを使用してイベントをモデル化し、invokeEvent() メソッドを使用してイベント を挿入できます。 イベントは、現在選択中の、入力を受け取ることのできるアプリケーションに送られ ます。 イベントインジェクションを使用して、テストを自動化できます。 イベントインジェクションを使用 して、周辺機器に BlackBerry デバイスとの通信方法を提供することもできます。 音声入力などのアク セシブルアプリケーションでも使用できます。 イベントインジェクションの使用方法をデモするサンプル アプリケーションについては、 www.blackberry.com/go/toucheventinjectorsampleapp にアクセスして Touch Event Injector サンプルアプリケーションをダウンロードしてください。 サンプルアプリケー ションの詳細については、 www.blackberry.com/go/docs/developers にアクセスし、『 Touch Event Injector Sample Application Overview(タッチイベントインケクタのサンプルアプリケーション概 要)』を参照してください。 33 UI コンポーネントの配置 開発ガイド UI コンポーネントの配置 6 BlackBerry® API レイアウトマネージャを使用して、アプリケーション画面上に UI コンポーネントを配 置することができます。 以下のクラスは、net.rim.device.apu.ui パッケージに付属の Manager クラスを 拡張し、アプリケーション画面上の UI コンポーネントに事前定義されたレイアウトを提供します。 レイアウトマネージャ 説明 FlowFieldManager このレイアウトマネージャは、画面のサイズに応じて、UI コンポー ネントを垂直に配置し、次に水平に配置します。 最初の UI コン ポーネントは画面の左上隅に配置されます。以降のコンポーネント は、最初のコンポーネントの右側に、画面の端に到達するまで水平 方向に並べて配置されます。 UI コンポーネントが最初の行に収ま らなくなった場合、その次の UI コンポーネントは、最初の行の下 にある行に配置されます。この行の高さは、最初の行に含まれるコ ンポーネントのうち、最も高いコンポーネントの高さに合わせられ ます。 垂直のスタイルビット(例えば、Field.FIELD_TOP、 Field.FIELD_BOTTOM、または Field.FIELD_VCENTER)を適用して、行内 で UI コンポーネントを垂直に整列させることができます。 このレイアウトマネージャは、画面の左端で始まり、右端で終了する 単一の行に UI コンポーネントを水平に配置します。 このレイア ウトマネージャでは UI コンポーネントが水平に配置されるため、 水平のスタイルビット(例えば、Field.FIELD_LEFT、 Field.FIELD_HCENTER、または Field.FIELD_RIGHT)を UI コンポーネ ントに適用することはできません。 垂直のスタイルビット(例え ば、Field.FIELD_TOP、Field.FIELD_BOTTOM、または Field.FIELD_VCENTER)は適用できます。 HorizontalFieldManager UI コンポーネントが、画面の使用可能な幅に収まらない場合は、 Manager.HORIZONTAL_SCROLL スタイルビットを使用して、水平方向にス クロールできるようにする必要があります。 これを行わない場合、 使用可能な画面の幅に収まる最大数の UI コンポーネントが表示さ れ、残りは表示されません。 UI コンポーネントは存在しますが、 表示されません。 この状況では、ユーザーの予期しないスクロール 動作が作成される可能性があります。 34 UI コンポーネントの配置 開発ガイド レイアウトマネージャ 説明 VerticalFieldManager このレイアウトマネージャは、画面の一番上で始まり、一番下で終 了する単一の列に、UI コンポーネントを垂直に配置します。 この レイアウトマネージャは、項目を垂直に配置するように設計さ れているため、垂直のスタイルビット(例えば、Field.FIELD_TOP、 Field.FIELD_BOTTOM、または Field.FIELD_VCENTER)を UI コンポーネ ントに適用することはできません。 水平のスタイルビット(例え ば、Field.FIELD_LEFT、Field.FIELD_HCENTER、または Field.FIELD_RIGHT)は適用できます。 その他のレイアウトマネージャを使用して、アプリケーション内で UI コンポーネントを配置することが できます。 例えば、GridFieldManager レイアウトマネージャを使用すると、画面上の行と列に UI コン ポーネントを配置して、グリッドを作成できます。 EyelidFieldManager レイアウトマネージャを使用する と、画面の一番上と一番下に一時的に表示される一対のマネージャ上に、UI コンポーネントを表示でき ます。 UI コンポーネントの配置 1. 必要なクラスとインターフェイスをインポートします。 net.rim.device.api.ui.container.HorizontalFieldManager; net.rim.device.api.ui.component.ButtonField; 2. HorizontalFieldManager のインスタンスを作成します。 HorizontalFieldManager _fieldManagerBottom = new HorizontalFieldManager(); 3. add() を呼び出して画面に HorizontalFieldManager を追加します。 myScreen.add(_fieldManagerBottom); 4. ButtonField のインスタンスを作成します。 ButtonField mySubmitButton = new ButtonField("Submit"); 5. ButtonField を HorizontalFieldManager に追加します。 _fieldManagerBottom.add(mySubmitButton); アイコン配列設定の作成 注: BlackBerry® Java® Development Environment バージョン 5.0 以前でアイコン配列設定を作成する 方法については、 http://www.blackberry.com/knowledgecenterpublic にアクセスし、DB-00783 を参照 してください。 35 開発ガイド アイコン配列設定の作成 GridFieldManager クラスを使用して、画面上で行と列にフィールドを配置し、グリッドを作成できます。 グリッドの作成時に、行と列の数を指定できます。 グリッドの作成後は、グリッドに含まれる行と列の 数を変更できません。 グリッドはゼロを起点とし、最初のセルは行 0、列 0 に配置されます。 テキストの方向が左から右で あるロケールでは、最初のセルがグリッドの左上隅に配置されます。 テキストの方向が右から左であるロケールでは、最初のセルがグリッドの右上隅に配置されます。 順番に(テキストの方向が左から右のロケールでは、左から右および上から下、テキストの方向が右から 左のロケールでは、右から左および上から下)、またはグリッド内の行と列を指定して、グリッドにフィール ドを追加できます。 フィールドの削除、フィールドの挿入、行と列の間隔の指定、およびグリッドのプ ロパティの取得が可能です。 グリッドに定義されている見出し行または見出し列はありません。 グリッドの最初の行または最初の列 でフィールドの外観を変更して、見出しの表示方法をエミュレートできます。 グリッドの幅または高さが画面の表示範囲よりも大きい場合は、グリッドを横または縦にスクロールでき ます。 列の幅を指定するには、GridFieldManager.setColumnProperty() を呼び出します。行の高さを指定するに は、GridFieldManager.setRowProperty() を呼び出します。 以上のメソッドを呼び出す場合には、 GridFieldManager プロパティを指定する必要があります。 36 アイコン配列設定の作成 開発ガイド プロパティ 説明 FIXED_SIZE 幅または高さはピクセルで表示される固定値です。 幅または高さは、列内または行内のフィールドの最大優先 サイズに基づく優先サイズです(PREFERRED_SIZE がデ フォルトのプロパティです)。 幅または高さは最大サイズを上限とする優先サイズです。 幅または高さは使用可能な画面領域に合わせて調整されます。 PREFERRED_SIZE PREFERRED_SIZE_WITH_MAXIMUM AUTO_SIZE アイコン配列設定の作成 1. 必要なクラスとインターフェイスをインポートします。 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。このサンプルでは、手順 3 で説明する GridScreen クラス がカスタム画面を示します。 class GridFieldManagerDemo extends UiApplication { public static void main(String[] args) { GridFieldManagerDemo theApp = new GridFieldManagerDemo(); theApp.enterEventDispatcher(); } GridFieldManagerDemo() { pushScreen(new GridScreen()); } } 3. MainScreen クラスを拡張してカスタム画面のフレームワークを作成します。 class GridScreen extends MainScreen { public GridScreen() { } } 37 アイコン配列設定の作成 開発ガイド 4. 画面コンストラクタ内で、setTitle() を呼び出し、画面のタイトルセクションに表示するテキストを 設定します。 setTitle("GridFieldManager Demo"); 5. 画面コンストラクタ内で、GridFieldManager クラスのインスタンスを作成します。行数、列数、グリッ ドスタイルを指定します(net.rim.device.api.ui.Manager から継承したスタイルを使用)。デフォルト のスタイルを使用するには、スタイルに 0 を指定します。 GridFieldManager grid; grid = new GridFieldManager(2,3,0); 6. 画面コンストラクタ内で GridFieldManager.add() を呼び出して、 グリッドにフィールドを追加します。 grid.add(new grid.add(new grid.add(new grid.add(new grid.add(new LabelField("one")); LabelField("two")); LabelField("three")); LabelField("four")); LabelField("five")); 7. 画面コンストラクタ内で GridFieldManagerset() メソッドを呼び出して、グリッドのプロパティを指定 します。 grid.setColumnPadding(20); grid.setRowPadding(20); 8. 画面コンストラクタ内で Screen.add() を呼び出して、画面にグリッドを追加します。 add(grid); 終了後の必要事項: グリッドは作成後に変更できます。 例えば、フィールドの追加、フィールドの削除、グリッドのプロパ ティの変更などが可能です。 コードサンプル:アイコン配列設定の作成 /* * GridFieldManagerDemo.java * * Research In Motion Limited proprietary and confidential * Copyright Research In Motion Limited, 2009 */ import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; public class GridFieldManagerDemo extends UiApplication { public static void main(String[] args) { GridFieldManagerDemo theApp = new GridFieldManagerDemo(); 38 開発ガイド 一時的に表示される一対のマネージャでのフィールドの表示 theApp.enterEventDispatcher(); } GridFieldManagerDemo() { pushScreen(new GridScreen()); } } class GridScreen extends MainScreen { public GridScreen() { setTitle("GridFieldManager Demo"); GridFieldManager grid = new GridFieldManager(2,3,0); grid.add(new LabelField("one")); grid.add(new LabelField("two")); grid.add(new LabelField("three")); grid.add(new LabelField("four")); grid.add(new LabelField("five")); grid.setColumnPadding(20); grid.setRowPadding(20); add(grid); // The grid looks like this: // | one | two | three // | four | five | // insert a cell first row, second column grid.insert(new LabelField("insert"), 0, 1); // The grid now looks like this: // | one | insert | two // | three | four | five // delete a cell second row, second column grid.delete(1,1); // The grid now looks like this: // | one | insert | two // | three | | five // Add field to first unoccupied cell grid.add(new LabelField("new")); // The grid now looks like this: // | one | insert | two // | three | new | five } } 一時的に表示される一対のマネージャでのフィールドの表示 EyelidFieldManager クラスを使用して、画面の一番上および一番下に一時的に表示される一対のマネージャ にフィールドを表示できます。 39 開発ガイド 一時的に表示される一対のマネージャでのフィールドの表示 デフォルトでは、BlackBerry® デバイスユーザーがトラックボールを動かした場合、またはタッチパネル 付きのデバイスではタッチイベントが行われた場合に、フィールドが表示されます。 一定時間アクティ ビティがない場合には、フィールドが自動的に非表示になります(デフォルトでは 1.2 秒)。 以上のデ フォルトプロパティは上書きできます。 フィールドの数およびサイズには制限がありません。 マネージャに含まれるフィールドが多すぎて画面 に収まらない場合は、一番上のマネージャと一番下のマネージャが重ねて表示されます。このとき、一番 上のマネージャが前面に表示されます。 画面の上下に ButtonField および LabelField を一時的に表示 1. 必要なクラスとインターフェイスをインポートします。 import import import import import net.rim.device.api.system.*; net.rim.device.api.ui.*; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.extension.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する EyelidFieldManagerDemoScreen クラスは カスタム画面を示しています。 public class EyelidFieldManagerDemo extends UiApplication { public static void main(String[] args) { EyelidFieldManagerDemo app = new EyelidFieldManagerDemo(); app.enterEventDispatcher(); } public EyelidFieldManagerDemo() { pushScreen(new EyelidFieldManagerDemoScreen()); } } 3. MainScreen クラスを拡張してカスタム画面のフレームワークを作成します。 class EyelidFieldManagerDemoScreen extends MainScreen { { public EyelidFieldManagerDemoScreen() { } } 4. 画面コンストラクタ内で、setTitle() を呼び出し、画面のタイトルセクションに表示されるテキストを 指定します。 40 開発ガイド 一時的に表示される一対のマネージャでのフィールドの表示 setTitle("EyelidFieldManager Demo"); 5. 画面コンストラクタ内で、EyelidFieldManager クラスのインスタンスを作成します。 EyelidFieldManager manager = new EyelidFieldManager(); 6. 画面コンストラクタ内で、EyelidFieldManager.addTop() を呼び出して、LabelField オブジェクトを EyelidFieldManager の一番上のマネージャに追加します。 manager.addTop(new LabelField(“Hello World”)); 7. 画面コンストラクタ内で、HorizontalFieldManager オブジェクトを作成します。 HorizontalFieldManager.add() を呼び出して、 HorizontalFieldManager にボタンを追加します。 EyelidFieldManager.addBottom() を呼び出して、 HorizontalFieldManager を EyelidFieldManager の一番下 のマネージャに追加します。 HorizontalFieldManager buttonPanel = new HorizontalFieldManager (Field.FIELD_HCENTER | Field.USE_ALL_WIDTH); buttonPanel.add(new SimpleButton(“Button 1”)); buttonPanel.add(new SimpleButton(“Button 2”)); manager.addBottom(buttonPanel); 8. 画面コンストラクタ内で、EyelidFieldManager.setEyelidDisplayTime() を呼び出して、アクティビティな しでマネージャのペアが消えるまでの待機時間(秒)を指定します。 manager.setEyelidDisplayTime(3); 9. 画面コンストラクタ内で add() を呼び出して、画面に EyelidFieldManager を追加します。 add(manager); コードサンプル:画面の上下に ButtonField および LabelField を一時的に表示 import net.rim.device.api.system.*; import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; import net.rim.device.api.ui.extension.container.*; public class EyelidFieldManagerDemo extends UiApplication { public static void main(String[] args) { EyelidFieldManagerDemo app = new EyelidFieldManagerDemo(); app.enterEventDispatcher(); } public EyelidFieldManagerDemo() { pushScreen(new EyelidFieldManagerDemoScreen()); } } class EyelidFieldManagerDemoScreen extends MainScreen 41 開発ガイド { 一時的に表示される一対のマネージャでのフィールドの表示 public EyelidFieldManagerDemoScreen() { setTitle(“EyelidFieldManager Demo”); EyelidFieldManager manager = new EyelidFieldManager(); manager.addTop(new LabelField(“Hello World”)); HorizontalFieldManager buttonPanel = new HorizonalFieldManager (Field.FIELD_HCENTER | Field.USE_ALL_WIDTH); buttonPanel.add(new SimpleButton(“Button 1”)); buttonPanel.add(new SimpleButton(“Button 2”)); manager.addBottom(buttonPanel); manager.setEyelidDisplayTime(3); add(manager); } } 42 開発ガイド UI コンポーネント UI コンポーネント 7 画面への UI コンポーネントの追加 1. 次のクラスをインポートします。 • net.rim.device.api.ui.component.CheckboxField • net.rim.device.api.ui.container.MainScreen 2. UI コンポーネントのインスタンスを作成します。 CheckboxField myCheckbox = new CheckboxField("First checkbox", true); 3. Screen クラスの拡張に UI コンポーネントを追加します。 mainScreen.add(myCheckbox); テキスト行へのフィールドの整列 フラグ Field.FIELD_LEADING を使用して、Field オブジェクトをテキスト行の自然な開始位置に整列させる ことができるアプリケーションを作成できます。 例えば、Field を整列フラグ Field.FIELD_LEADING で 作成し、Field を VerticalFieldManager に追加した場合に、英語または中国語のロケールを使用してアプ リケーションを起動すると、Field が画面の左側に整列されます。 アラビア語またはヘブライ語のロ ケールを使用してアプリケーションを起動すると、Field は画面の右側に整列されます。 オートコンプリートテキストフィールド オートコンプリートテキストフィールドを使用して、BlackBerry® デバイスのユーザーが入力する内容を 予測し、ユーザーが入力を完了する前に語句を表示できます。 AutoCompleteField オブジェクトを作成する場合、BasicFilteredList オブジェクトを関連付ける必要があ ります。 BasicFilteredList には、語句のリストを作成するために比較するデータオブジェクトへの参照 が保持されます。 データオブジェクト内で比較するフィールドと、一致が見つかった場合に表示する フィールドを設定できます。 例えば、ユーザーが入力するテキストを DATA_SOURCE_CONTACTS データソース 内の DATA_FIELD_CONTACTS_BIRTHDAY フィールドと比較し、対応する DATA_FIELD_CONTACTS_NAME_FULL フィール ドの値を返すことができます。 BasicFilteredList にバインドして AutoCompleteField で使用できるデータは 4 種類あります。 比較する文字列は、次のいずれかの方法で指定できます。 • • • リテラル文字列の配列 toString() をサポートするオブジェクトの配列 BlackBerry デバイス上のデータソース(連絡先、メモ、タスク、各種メディアファイルなど) 43 オートコンプリートテキストフィールド 開発ガイド • オブジェクトの配列と、インデックスが対応する文字列の配列 オートコンプリートテキストフィールドでは、デフォルトで比較処理から返された文字列のセットがド ロップダウンリストに表示されます。 このリストの表示は、オートコンプリートテキストフィールドの 作成時にスタイルフラグを指定することで設定できます。 リストの表示方法と、ユーザーがリストを操 作する方法を変更できます。 データセットからのオートコンプリートテキストフィールドの作成 1. 必要なクラスとインターフェイスをインポートします。 import import import import net.rim.device.api.ui.UiApplication; net.rim.device.api.ui.container.MainScreen; net.rim.device.api.ui.component.AutoCompleteField; net.rim.device.api.collection.util.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。コンストラクタ内で、pushScreen() を呼び出して、アプリケーションのカスタ ム画面を表示します。手順 3 で説明する HomeScreen クラスはカスタム画面を示しています。 public class AutoCompleteFieldApp extends UiApplication { public static void main(String[] args) { AutoCompleteFieldApp app = new AutoCompleteFieldApp(); app.enterEventDispatcher(); } AutoCompleteFieldApp() { pushScreen(new HomeScreen()); } } 3. MainScreen クラスを拡張してカスタム画面を作成します。 class HomeScreen extends MainScreen { public HomeScreen() { } } 4. コンストラクタ内で、BasicFilteredList オブジェクトを作成します。String 配列を作成して、配列で 比較する文字列を格納します。この例では、 文字列は曜日です。addDataSet() を呼び出して、配列内の データを BasicFilteredList にバインドします。 44 開発ガイド オートコンプリートテキストフィールド BasicFilteredList filterList = new BasicFilteredList(); String[] days = {"Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunda "}; filterList.addDataSet(1,days,"days",BasicFilteredList.COMPARISON_IGNORE_CASE); 5. コンストラクタ内で、AutoCompleteField オブジェクトを作成します。BasicFilteredList のインスタ ンスを AutoCompleteField コンストラクタに渡し、BasicFilteredList をオートコンプリートテキスト フィールドにバインドします。add() を呼び出して画面にフィールドを追加します。 AutoCompleteField autoCompleteField = new AutoCompleteField(filterList); add(autoCompleteField); コードサンプル:データセットからのオートコンプリートフィールドの作成 import net.rim.device.api.ui.UiApplication; import net.rim.device.api.ui.container.MainScreen; import net.rim.device.api.ui.component.AutoCompleteField; import net.rim.device.api.collection.util.*; public class AutoCompleteFieldApp extends UiApplication { public static void main(String[] args) { AutoCompleteFieldApp app = new AutoCompleteFieldApp(); app.enterEventDispatcher(); } AutoCompleteFieldApp() { HomeScreen scr = new HomeScreen(); this.pushScreen(scr); } } class HomeScreen extends MainScreen { public HomeScreen() { BasicFilteredList filterList = new BasicFilteredList(); String[] days = {"Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday","Sunday"}; filterList.addDataSet(1,days,"days",BasicFilteredList COMPARISON_IGNORE_CASE); AutoCompleteField autoCompleteField = new AutoCompleteField(filterList); add(autoCompleteField); } } 45 オートコンプリートテキストフィールド 開発ガイド データソースからのオートコンプリートテキストフィールドの作成 1. 必要なクラスとインターフェイスをインポートします。 import import import import net.rim.device.api.ui.UiApplication; net.rim.device.api.ui.container.MainScreen; net.rim.device.api.ui.component.AutoCompleteField; net.rim.device.api.collection.util.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する HomeScreen クラスはカスタム画面を示 しています。 public class AutoCompleteFieldApp extends UiApplication { public static void main(String[] args) { AutoCompleteFieldApp app = new AutoCompleteFieldApp(); app.enterEventDispatcher(); } public AutoCompleteFieldApp() { pushScreen(new HomeScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。 class HomeScreen extends MainScreen { public HomeScreen() { } } 4. 画面コンストラクタ内で、BasicFilteredList オブジェクトを作成します。addDataSource() を呼び出 して、 データソースを BasicFilteredList にバインドします。この例では、データは連絡先情報、データ ソースは連絡先リストです。addDataSource() に渡す最初の引数は、固有の ID です。2 番目の引数 は、BasicFilteredList オブジェクトをデータソースにバインドします。3 番目の引数は、比較対象と なるデータソースフィールドを指定します。4 番目の引数は、一致が見つかった場合に使用可能になる データソースフィールドを指定します。この例では、 比較対象のフィールドは、一致が見つかった場合 に使用可能になるフィールドと同じです。5 番目の引数は、プライマリ表示フィールドを指定し ます。6 番目の引数は、セカンダリ表示フィールドを指定します。このフィールドを使用しない場合 は、-1 に設定します。最後の引数は、BasicFilteredList の名前を指定します。null を指定すると、自 動的に値が生成されます。 46 開発ガイド オートコンプリートテキストフィールド BasicFilteredList filterList = new BasicFilteredList(); filterList.addDataSource( 1, BasicFilteredList.DATA_SOURCE_CONTACTS, BasicFilteredList.DATA_FIELD_CONTACTS_NAME_FULL | BasicFilteredList.DATA_FIELD_CONTACTS_COMPANY | BasicFilteredList.DATA_FIELD_CONTACTS_EMAIL, BasicFilteredList.DATA_FIELD_CONTACTS_NAME_FULL | BasicFilteredList.DATA_FIELD_CONTACTS_COMPANY | BasicFilteredList.DATA_FIELD_CONTACTS_EMAIL, BasicFilteredList.DATA_FIELD_CONTACTS_NAME_FULL, -1, null); 5. 画面コンストラクタ内で、AutoCompleteField オブジェクトを作成します。手順 4 で作成した BasicFilteredList オブジェクトを AutoCompleteField コンストラクタに渡して、 BasicFilteredList を 自動入力テキストフィールドにバインドします。add() を呼び出して画面にフィールドを追加します。 AutoCompleteField autoCompleteField = new AutoCompleteField(filterList); add(autoCompleteField); コードサンプル:データソースからのオートコンプリートフィールドの作成 import net.rim.device.api.ui.UiApplication; import net.rim.device.api.ui.container.MainScreen; import net.rim.device.api.ui.component.AutoCompleteField; import net.rim.device.api.collection.util.*; public class AutoCompleteFieldApp extends UiApplication { public static void main(String[] args) { AutoCompleteFieldApp app = new AutoCompleteFieldApp(); app.enterEventDispatcher(); } AutoCompleteFieldApp() { HomeScreen scr = new HomeScreen(); this.pushScreen(scr); } } class HomeScreen extends MainScreen { public HomeScreen() { BasicFilteredList filterList = new BasicFilteredList(); filterList.addDataSource(1, BasicFilteredList.DATA_SOURCE_CONTACTS, BasicFilteredList.DATA_FIELD_CONTACTS_NAME_FULL | BasicFilteredList.DATA_FIELD_CONTACTS_COMPANY | 47 オートコンプリートテキストフィールド 開発ガイド BasicFilteredList.DATA_FIELD_CONTACTS_EMAIL, BasicFilteredList.DATA_FIELD_CONTACTS_NAME_FULL | BasicFilteredList.DATA_FIELD_CONTACTS_COMPANY | BasicFilteredList.DATA_FIELD_CONTACTS_EMAIL, BasicFilteredList.DATA_FIELD_CONTACTS_NAME_FULL, BasicFilteredList.DATA_FIELD_CONTACTS_NAME_FULL, null); AutoCompleteField autoCompleteField = new AutoCompleteField(filterList); add(autoCompleteField); } } データソースおよびオートコンプリートテキストフィールドを含むフィール ドの使用 AutoCompleteField クラスおよび BasicFilteredList クラスを使用して、自動入力テキストフィールドに ユーザーが入力したテキストと、指定されたデータソース内のフィールドの値を比較できます。 AutoCompleteField クラスのコンストラクタに引数として渡す BasicFilteredList オブジェクトを使用 して、使用するフィールドとそのデータソースを指定します。 データソース フィールド DATA_SOURCE_APPOINTMENTS • • • • DATA_FIELD_APPOINTMENTS_ALL DATA_FIELD_APPOINTMENTS_ATTENDEES DATA_FIELD_APPOINTMENTS_ORGANIZER DATA_FIELD_APPOINTMENTS_SUBJECT DATA_SOURCE_CONTACTS • • • • • • • • • • • • DATA_FIELD_CONTACTS_ADDRESS_ALL DATA_FIELD_CONTACTS_ADDRESS_HOME DATA_FIELD_CONTACTS_ADDRESS_WORK DATA_FIELD_CONTACTS_ANNIVERSARY DATA_FIELD_CONTACTS_BIRTHDAY DATA_FIELD_CONTACTS_CATEGORIES DATA_FIELD_CONTACTS_COMPANY DATA_FIELD_CONTACTS_EMAIL DATA_FIELD_CONTACTS_FAX DATA_FIELD_CONTACTS_JOB_TITLE DATA_FIELD_CONTACTS_NAME_FULL DATA_FIELD_CONTACTS_NAME_FIRST 48 開発ガイド データソース フィールド • • • • • • • • • • • DATA_FIELD_CONTACTS_NAME_LAST DATA_FIELD_CONTACTS_NOTES DATA_FIELD_CONTACTS_PAGER DATA_FIELD_CONTACTS_PHONE_ALL DATA_FIELD_CONTACTS_PHONE_HOME DATA_FIELD_CONTACTS_PHONE_HOME2 DATA_FIELD_CONTACTS_PHONE_MOBILE DATA_FIELD_CONTACTS_PHONE_OTHER DATA_FIELD_CONTACTS_PHONE_WORK DATA_FIELD_CONTACTS_PHONE_WORK2 DATA_FIELD_CONTACTS_PIN DATA_SOURCE_MEMOS • DATA_FIELD_MEMOS_TITLE DATA_SOURCE_MESSAGES • • • • DATA_FIELD_MESSAGES_ALL DATA_FIELD_MESSAGES_RECIPIENT DATA_FIELD_MESSAGES_SENDER DATA_FIELD_MESSAGES_SUBJECT DATA_SOURCE_MUSIC • • • • • • DATA_FIELD_MUSIC_ALL DATA_FIELD_MUSIC_ALBUM DATA_FIELD_MUSIC_ARTIST DATA_FIELD_MUSIC_GENRE DATA_FIELD_MUSIC_PLAYLIST DATA_FIELD_MUSIC_SONG DATA_SOURCE_PICTURES • DATA_FIELD_PICTURES_TITLE DATA_SOURCE_RINGTONES • DATA_FIELD_RINGTONES_TITLE DATA_SOURCE_TASKS • DATA_FIELD_TASKS_TITLE DATA_SOURCE_VIDEOS • DATA_FIELD_VIDEOS_TITLE DATA_SOURCE_VOICENOTES • DATA_FIELD_VOICENOTES_TITLE 49 ボタン 開発ガイド ボタン ボタンを使用して、ユーザーがダイアログボックスから操作を実行できるようにします。 メニューには 通常、画面に関連した操作が含まれています。 ユーザーはボタンを使用して次の操作を実行できます。 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス ボタンをハイラ イトする。 • • 操作を実行する。 トラックホイールまたはトラック ボールを回します。 トラックパッド上で指をスライド させます。 ボタンをクリックするか Enter キーを 押します。 ボタンに軽くタッチします。 画面をクリックします。 対策:ボタンの実装 • • • アプリケーション画面ではボタンを使用しないでください。画面に関連する操作を提供するには、可 能であればアプリケーションメニューを使用します。画面上のカーソル位置にかかわらず、ユーザー は即座にメニューを起動できます。ボタンの位置は固定されており、関連する操作を実行するにはユー ザーはボタンをハイライトする必要があります。ボタンを使用する場合は、その操作のメニュー項目 をアプリケーションメニューにも追加します。 機能をオンまたはオフにするようなオプションには、可能であればチェックボックスまたはオプショ ンボタンを使用します。 デフォルトのボタンには、ユーザーが頻繁に選択する可能性の高いボタンを使用します。データの削除 や変更に関連する操作を実行するボタンを、デフォルトのボタンとして使用しないでください。 ラベルのガイドライン • 50 ラベルは明瞭かつ簡潔にまとめます。 チェックボックス 開発ガイド • • • • • ラベルは可能であれば 1 単語でまとめます。ボタンのサイズはラベルの長さに応じて変化します。 ラベルが長過ぎると、テキストが切り捨てられていることを示す省略記号 (...)が表示されます。複数 の単語で構成されるラベルを作成する場合は、文章と同様のスタイルで大文字と小文字を使用します。 関連する操作を表すラベルには動詞を使用します(例:[キャンセル]、 [削除]、 [破棄]、または [保存])。 必要な場合は、画面の他の場所に、より説明的なテキストを組み込みます(例えば、アプリケーション メッセージ内)。 ラベルに[はい]や[いいえ]は使用しないでください。 ラベルに記号やグラフィックは使用しないでください。 ラベルに句読点は使用しないでください。ユーザーがボタンをクリックした後に別の操作を実行する 必要があることを示すには、ボタンラベルに省略記号を記述します。 ボタンの作成 1. net.rim.device.api.ui.component.ButtonField クラスをインポートします。 2. スタイルパラメータを使用して、ButtonField のインスタンスを作成します。 ButtonField mySubmitButton = new ButtonField("Submit"); チェックボックス チェックボックスは、ユーザーがオン/オフを切り替えられるオプションに使用します。 ユーザーはチェックボックスを使用して次の操作を実行できます。 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス チェックボックスを 選択する。 スペースキーを押すか、トラックホ イール、トラックボール、またはト ラックパッドをクリックします。 画面をクリックします。 51 開発ガイド チェックボックス 対策:チェックボックスの実装 • • • • • チェックボックスを使用して、ユーザーが複数のオプションを選択できるようにします。 チェックボックスを作成するには CheckboxField クラスを使用します。 ユーザーがチェックボックスを選択しているときにはアクションを開始しないようにしてください。 例えば、新規画面を開かないようにします。 チェックボックスを垂直に整列させます。 チェックボックスは論理的にグループ化して整列させます(例えば、関連したオプションをまとめた り、最も一般的なオプションを先頭に並べます)。アルファベット順は特定の言語にしか当てはまら ないので、チェックボックスはアルファベット順に並べないようにします。 ラベルのガイドライン • • • • • ラベルは明瞭かつ簡潔にまとめます。ユーザーがそのチェックボックスを選択したときの実行内容を ラベルが明確に表していることを確認します。 ラベルには可能であれば肯定的な表現を使用します。例えば、機能のオン/オフを切り替えるオプショ ンの場合は、 「オフ」ではなく「オン」というラベルを作成します。 ラベルはチェックボックスの右側に配置します。 タイトルと同様のスタイルで大文字と小文字を使用します。 文末に句読点を使用しないでください。 チェックボックスの作成 1. 必要なクラスとインターフェイスをインポートします。 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する MyUiScreen クラスはカスタム画面を示 しています。 public class MyUi extends UiApplication { public static void main(String[] args) { MyUi theApp = new MyUi(); theApp.enterEventDispatcher(); } public MyUi() { 52 チェックボックス 開発ガイド } } pushScreen(new MyUiScreen()); 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。画面コンストラクタ内 で setTitle() を呼び出して、画面のタイトルを指定します。 class MyUiScreen extends MainScreen { public MyUiScreen() { setTitle("UI Component Sample"); } } 4. 画面のコンストラクタ内で CheckboxField クラスを使用してチェックボックスを作成します。 CheckboxField コンストラクタ内で、 チェックボックスのラベルを指定し、ブール値を使用してチェッ クボックスがデフォルトで選択されるかどうかを示します(例えば、true はチェックボックスがデ フォルトで選択されることを示します)。add() を呼び出して画面にチェックボックスを追加します。 add(new CheckboxField("First Check Box", true)); add(new CheckboxField("Second Check Box", false)); 5. チェックボックスのデフォルト動作を変更するには、Field クラスから継承されるスタイルを使用し ます。例えば、 ユーザーが変更できないチェックボックスを作成するには、READONLY スタイルを使用し ます。 add(new CheckboxField("First Check Box", true, this.READONLY)); 6. アプリケーションを閉じる前に変更を保存するかどうかをユーザーに確認するデフォルト機能を上書 きするには、 MainScreen クラスの拡張で、 MainScreen.onSavePrompt() メソッドを上書きします。以下の コードサンプルでは、戻り値が true です。これは、アプリケーションを閉じる前にユーザーにプロン プトが表示されないことを示します。 public boolean onSavePrompt() { return true; } コードサンプル:チェックボックスの作成 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; public class MyUi extends UiApplication { public static void main(String[] args) { MyUi theApp = new MyUi(); theApp.enterEventDispatcher(); 53 開発ガイド ビットマップの作成 } public MyUi() { pushScreen(new MyUiScreen()); } } class MyUiScreen extends MainScreen { public MyUiScreen() { setTitle("UI Component Sample"); add(new CheckboxField("First Check Box", true)); add(new CheckboxField("Second Check Box", false)); } public boolean onSavePrompt() { return true; } } ビットマップの作成 1. net.rim.device.api.ui.component.BitmapField クラスをインポートします。 2. BitmapField のインスタンスを作成します。 BitmapField myBitmapField = new BitmapField(); カスタムフィールドの作成 カスタムフィールドには、カスタムコンテキストメニュー項目とカスタムレイアウトだけを追加できます。 1. 次のクラスをインポートします。 • net.rim.device.api.ui.Field • java.lang.String • net.rim.device.api.ui.Font • java.lang.Math • net.rim.device.api.ui.Graphics 2. net.rim.device.api.ui.DrawStyle インターフェイスをインポートします。 3. Field クラスまたはそのいずれかのサブクラスを拡張します。このとき、DrawStyle インターフェイス を実装してカスタムフィールドの特性を指定し、描画スタイルを有効にします。 public class CustomButtonField extends Field implements DrawStyle { public static final int RECTANGLE = 1; public static final int TRIANGLE = 2; 54 カスタムフィールドの作成 開発ガイド } public static final int OCTAGON = 3; private String _label; private int _shape; private Font _font; private int _labelHeight; private int _labelWidth; 4. コンストラクタを実装して、カスタムボタンのラベル、形状、およびスタイルを定義します。 public CustomButtonField(String label) { this(label, RECTANGLE, 0); } public CustomButtonField(String label, int shape) { this(label, shape, 0); } public CustomButtonField(String label, long style) { this(label, RECTANGLE, style); } public CustomButtonField(String label, int shape, long style) { super(style); _label = label; _shape = shape; _font = getFont(); _labelHeight = _font.getHeight(); _labelWidth = _font.getAdvance(_label); } 5. layout() を実装して、フィールドデータの配置を指定します。最も複雑な計算は、paint() 内ではな く、layout() 内で行います。フィールドのマネージャが layout() を呼び出して、使用可能な領域に フィールドの内容を配置する方法を決定します。Math.min() を呼び出し、指定された幅と高さよりも 小さなフィールドと、最適なフィールドの幅と高さを返します。Field.setExtent(int,int) を呼び出 し、フィールドに対して必要なサイズを設定します。 protected void layout(int width, int height) { _font = getFont(); _labelHeight = _font.getHeight(); _labelWidth = _font.getAdvance(_label); width = Math.min( width, getPreferredWidth() ); height = Math.min( height, getPreferredHeight() ); setExtent( width, height ); } 6. getPreferredWidth() を実装し、フィールドラベルの相対的なサイズを使用して、ラベルがコンポーネ ントのサイズを超えないようにします。switch ブロックを使用して、カスタムフィールドの形状に基 づいた最適な幅を特定します。形状の種類ごとに if ステートメントを使用してサイズを比較し、 カスタムフィールドに対して最適な幅を特定します。 public int getPreferredWidth() { switch(_shape) { case TRIANGLE: 55 カスタムフィールドの作成 開発ガイド } } if (_labelWidth < _labelHeight) { return _labelHeight << 2; } else { return _labelWidth << 1; } case OCTAGON: if (_labelWidth < _labelHeight) { return _labelHeight + 4; } else { return _labelWidth + 8; } case RECTANGLE: default: return _labelWidth + 8; 7. getPreferredHeight() を実装し、フィールドラベルの相対的なサイズを使用して、最適な高さを特定し ます。switch ブロックを使用して、カスタムフィールドの形状に基づいた最適な高さを特定します。 形状の種類ごとに if ステートメントを使用してサイズを比較し、カスタムフィールドに対して最適 な高さを特定します。 public int getPreferredHeight() { switch(_shape) { case TRIANGLE: if (_labelWidth < _labelHeight) { return _labelHeight << 1; } else { return _labelWidth; } case RECTANGLE: return _labelHeight + 4; case OCTAGON: return getPreferredWidth(); } return 0; } 8. paint() を実装します。フィールドのマネージャにより paint() が呼び出され、フィールドの領域が 無効としてマークされた場合に、フィールドが再描画されます。switch ブロックを使用して、カスタ ムフィールドの形状に基づいてカスタムフィールドを再描画します。三角形または八角形の形状を持 つフィールドについては、フィールドの幅を使用してラインの開始点および終了点の水平位置と垂直 位置を計算します。graphics.drawLine() を呼び出し、開始点と終了点を使用して、カスタムフィールド を定義するラインを描画します。四角形の形状を持つフィールドについては、graphics.drawRect() を 呼び出し、フィールドの幅と高さを使用してカスタムフィールドを描画します。graphics.drawText() を呼び出し、フィールドの幅を使用して、フィールドの領域にテキストの文字列を描画します。 protected void paint(Graphics graphics) { int textX, textY, textWidth; int w = getWidth(); switch(_shape) { 56 カスタムフィールドの作成 開発ガイド case TRIANGLE: int h = (w>>1); int m = (w>>1)-1; graphics.drawLine(0, h-1, m, 0); graphics.drawLine(m, 0, w-1, h-1); graphics.drawLine(0, h-1, w-1, h-1); textWidth = Math.min(_labelWidth,h); textX = (w - textWidth) >> 1; textY = h >> 1; break; case OCTAGON: int x = 5*w/17; int x2 = w-x-1; int x3 = w-1; graphics.drawLine(0, x, 0, x2); graphics.drawLine(x3, x, x3, x2); graphics.drawLine(x, 0, x2, 0); graphics.drawLine(x, x3, x2, x3); graphics.drawLine(0, x, x, 0); graphics.drawLine(0, x2, x, x3); graphics.drawLine(x2, 0, x3, x); graphics.drawLine(x2, x3, x3, x2); textWidth = Math.min(_labelWidth, w - 6); textX = (w-textWidth) >> 1; textY = (w-_labelHeight) >> 1; break; case RECTANGLE: default: graphics.drawRect(0, 0, w, getHeight()); textX = 4; textY = 2; textWidth = w - 6; break; } graphics.drawText(_label, textX, textY, (int)( getStyle() & DrawStyle.ELLIPSIS | DrawStyle.HALIGN_MASK ), textWidth ); } 9. Field set() メソッドおよび get() メソッドを実装します。Field.getLabel()、Field.getShape()、 Field.setLabel(String label)、 および Field.setShape(int shape) の各メソッドを実装して、カスタム フィールドのインスタンス変数を返します。 public String getLabel() { return _label; } public int getShape() { return _shape; } public void setLabel(String label) { _label = label; _labelWidth = _font.getAdvance(_label); updateLayout(); } 57 Web コンテンツを表示するフィールドの作成 開発ガイド public void setShape(int shape) { _shape = shape; } Web コンテンツを表示するフィールドの作成 ブラウザフィールドへの HTML コンテンツの表示 1. 必要なクラスとインターフェイスをインポートします。 import net.rim.device.api.browser.field2.*; import net.rim.device.api.ui.*; import net.rim.device.api.ui.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 に記述されている BrowserFieldDemoScreen クラス がカスタム画面を表します。 public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } } 3. MainScreen クラスを拡張してカスタム画面を作成します。 class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { } } 4. 画面コンストラクタ内で、BrowserField クラスのインスタンスを作成します。 BrowserField myBrowserField = new BrowserField(); 5. 画面コンストラクタ内で add() を呼び出して、画面に BrowserField オブジェクトを追加します。 add(myBrowserField); 58 Web コンテンツを表示するフィールドの作成 開発ガイド 6. 画面コンストラクタ内で BrowserField.requestContent() を呼び出し、HTML コンテンツを指定して表示 します。 myBrowserField.displayContent("<html><body><h1>Hello World!</h1></body></html>", "http://localhost"); コードサンプル:ブラウザフィールドへの HTML コンテンツの表示 import net.rim.device.api.browser.field2.*; import net.rim.device.api.ui.*; import net.rim.device.api.ui.container.*; public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } } class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { BrowserField myBrowserField = new BrowserField(); add(myBrowserField); myBrowserField.displayContent("<html><body><h1>Hello World!</h1></body></html>", "http://localhost"); } } ブラウザフィールドへの Web ページの HTML コンテンツの表示 1. 必要なクラスとインターフェイスをインポートします。 import import import import net.rim.device.api.browser.field2.*; net.rim.device.api.system.*; net.rim.device.api.ui.*; net.rim.device.api.ui.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 に記述されている BrowserFieldDemoScreen クラス がカスタム画面を表します。 59 開発ガイド Web コンテンツを表示するフィールドの作成 public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } } 3. MainScreen クラスを拡張してカスタム画面のフレームワークを作成します。 class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { } } 4. 画面コンストラクタ内で、BrowserField クラスのインスタンスを作成します。 BrowserField myBrowserField = new BrowserField(); 5. 画面コンストラクタ内で add() を呼び出して、画面に BrowserField オブジェクトを追加します。 add(myBrowserField); 6. 画面コンストラクタ内で BrowserField.requestContent() を呼び出し、HTML コンテンツの場所を指定 して表示します。 myBrowserField.requestContent("http://www.blackberry.com"); コードサンプル:ブラウザフィールドへの Web ページの HTML コンテンツの表示 import net.rim.device.api.browser.field2.*; import net.rim.device.api.system.*; import net.rim.device.api.ui.*; import net.rim.device.api.ui.container.*; public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } 60 Web コンテンツを表示するフィールドの作成 開発ガイド } class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { BrowserField myBrowserField = new BrowserField(); add(myBrowserField); myBrowserField.requestContent("http://www.blackberry.com"); } } アプリケーションへのリソースからの HTML コンテンツの表示 1. 必要なクラスとインターフェイスをインポートします。 import import import import net.rim.device.api.browser.field2.*; net.rim.device.api.system.*; net.rim.device.api.ui.*; net.rim.device.api.ui.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 に記述されている BrowserFieldDemoScreen クラス がカスタム画面を表します。 public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } } 3. MainScreen クラスを拡張してカスタム画面を作成します。 class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { } } 4. 画面コンストラクタ内で、BrowserField クラスのインスタンスを作成します。 61 開発ガイド Web コンテンツを表示するフィールドの作成 BrowserField myBrowserField = new BrowserField(); 5. 画面コンストラクタ内で add() を呼び出して、画面に BrowserField オブジェクトを追加します。 add(myBrowserField); 6. 画面コンストラクタ内で BrowserField.requestContent() を呼び出して、アプリケーションのリソース の場所を指定し、HTML コンテンツを表示します。 myBrowserField.requestContent("local:///test.html"); 注: BrowserField クラスは、フォルダ構造を使用してリソースにアクセスしません。BrowserField クラスは、指定されたファイル名に適合する最初に見つかったリソースを表示します。 コードサンプル:アプリケーションへのリソースからの HTML コンテンツの表示 import net.rim.device.api.browser.field2.*; import net.rim.device.api.system.*; import net.rim.device.api.ui.*; import net.rim.device.api.ui.container.*; public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } } class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { BrowserField myBrowserField = new BrowserField(); add(myBrowserField); myBrowserField.requestContent("local:///test.html"); } } ブラウザフィールドの設定 1. 必要なクラスとインターフェイスをインポートします。 import net.rim.device.api.browser.field2.*; import net.rim.device.api.ui.*; import net.rim.device.api.ui.container.*; 62 Web コンテンツを表示するフィールドの作成 開発ガイド 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 に記述されている BrowserFieldDemoScreen クラス がカスタム画面を表します。 public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } } 3. MainScreen クラスを拡張してカスタム画面のフレームワークを作成します。 class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { } } 4. 画面コンストラクタ内で、BrowserFieldConfig クラスのインスタンスを作成します。 BrowserFieldConfig myBrowserFieldConfig = new BrowserFieldConfig(); 5. 画面コンストラクタ内で、BrowserFieldConfig.setProperty() を呼び出して、BrowserField のプロパティ を指定します。setProperty() の 1 つめのパラメータはプロパティを、2 つめのパラメータはこのプ ロパティの値を表します。例えば、次のコードは BrowserField オブジェクトの NAVIGATION_MODE プロ パティを指定します。 myBrowserFieldConfig.setProperty(BrowserFieldConfig.NAVIGATION_MODE, BrowserFieldConfig.NAVIGATION_MODE_POINTER); 6. 画面コンストラクタ内で、定義した設定を使用する BrowserField クラスのインスタンスを作成します。 BrowserField browserField = new BrowserField(myBrowserFieldConfig); コードサンプル:ブラウザフィールドの設定 import import import public net.rim.device.api.browser.field2.*; net.rim.device.api.ui.*; net.rim.device.api.ui.container.*; class BrowserFieldDemo extends UiApplication 63 Web コンテンツを表示するフィールドの作成 開発ガイド { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } } class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { BrowserFieldConfig myBrowserFieldConfig = new BrowserFieldConfig(); myBrowserFieldConfig.setProperty(BrowserFieldConfig NAVIGATION_MODE,BrowserFieldConfig.NAVIGATION_MODE_POINTER); BrowserField browserField = new BrowserField(myBrowserFieldConfig); } } ブラウザフィールドの Web アドレスへのフォームデータの送信 1. 必要なクラスとインターフェイスをインポートします。 import import import import import import import net.rim.device.api.browser.field2.*; net.rim.device.api.io.http.*; net.rim.device.api.system.*; net.rim.device.api.ui.*; net.rim.device.api.ui.container.*; java.lang.*; java.util.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 に記述されている BrowserFieldDemoScreen クラス がカスタム画面を表します。 public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { 64 Web コンテンツを表示するフィールドの作成 開発ガイド } } pushScreen(new BrowserFieldDemoScreen()); 3. MainScreen クラスを拡張してカスタム画面を作成します。 class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { } } 4. 画面コンストラクタ内で、BrowserField クラスのインスタンスを作成します。 BrowserField browserField = new BrowserField(); 5. 画面コンストラクタ内で add() を呼び出して、画面に BrowserField オブジェクトを追加します。 add(browserField); 6. 画面コンストラクタ内で、フォームデータの送信先となる Web ページのベース Web アドレスを含む String オブジェクトを作成します。 String baseURL = "http://www.blackberry.com"; 7. 画面コンストラクタ内で、アプリケーションから Web ページに送信されるフォームデータを表す String を作成します。 String postData = "fieldname1=value1&fieldname2=value2"; 8. 画面コンストラクタ内で、Hashtable オブジェクトを作成して、フォームデータのヘッダー情報を格納 します。 Hashtable header = new Hashtable(); 9. 画面コンストラクタ内で、Hashtable.put() を呼び出して、フォームデータのヘッダー情報を指定します。 header.put("Content-Length", "" + postData.length()); header.put("Content-Type", "application/x-www-form-urlencoded"); 10. 画面コンストラクタ内で、BrowserField.requestContent() を呼び出して、フォームデータを Web ページ に送信し、その Web ページを表示します。 browserField.requestContent(baseURL, postData.getBytes(), new HttpHeaders(header)); コードサンプル:ブラウザフィールドでの Web アドレスへのフォームデータの送信 import import import import net.rim.device.api.browser.field2.*; net.rim.device.api.io.http.*; net.rim.device.api.system.*; net.rim.device.api.ui.*; 65 開発ガイド ダイアログボックス import net.rim.device.api.ui.container.*; import java.lang.*; import java.util.*; public class BrowserFieldDemo extends UiApplication { public static void main(String[] args) { BrowserFieldDemo app = new BrowserFieldDemo(); app.enterEventDispatcher(); } public BrowserFieldDemo() { pushScreen(new BrowserFieldDemoScreen()); } } class BrowserFieldDemoScreen extends MainScreen { public BrowserFieldDemoScreen() { BrowserField browserField = new BrowserField();} add(browserField); String baseURL = "http://www.blackberry.com"; String postData = "fieldname1=value1&fieldname2=value2"; Hashtable header = new Hashtable(); header.put("Content-Length", "" + postData.length()); header.put("Content-Type", "application/x-www-form-urlencoded"); browserField.requestContent(baseURL, postData.getBytes(), new HttpHeaders(header)); } } ダイアログボックス ダイアログボックスを使用して次の操作を実行できます。 • • • ユーザーが開始したタスクを完了するために必要な情報を入力するように求めるプロンプトを表示し ます。 緊急情報または重要な操作の状態をユーザーに通知します。 予期しないまたは潜在的に有害な状態または状況をユーザーに警告します。 ダイアログボックスはモーダルです。BlackBerry® デバイスの通常の動作を中断して、スタックの一番上 にプッシュされます。 ダイアログボックスには、ダイアログボックスの種類を示すインジケータ、メッ セージ、ユーザーが操作を実行できるボタンが含まれています。 ダイアログボックスのサイズは、 BlackBerry デバイスの画面によって変化します。 必要に応じてスクロール矢印が表示されます。 ユー ザーが BlackBerry デバイスで選択するテーマにより、ダイアログボックスの表示スタイルが決まります。 66 開発ガイド ダイアログボックス ダイアログボックスの作成 通知ダイアログボックスを使用して、BlackBerry® デバイスをオフにするといった重要な操作や、無効な 入力情報といったエラーを、ユーザーに通知します。 感嘆符(!)インジケータが、通知ダイアログボッ クスに表示されます。 通知ダイアログボックスを閉じるには、[OK]をクリックするか、エスケープキー を押します。 他の種類のダイアログボックスの詳細については、BlackBerry® Java® Development Environment の API リファレンスを参照してください。 1. net.rim.device.api.ui.component.Dialog クラスをインポートします。 2. 表示する通知テキストを指定して、通知ダイアログボックスを作成します。 Dialog.alert("Specify the alert text that you want to display.") 対策:ダイアログボックスの実装 • • • • • ダイアログボックスのコントロールには、常にボタンを使用します。リンクなどのコントロールは使 用しないでください。 ダイアログボックスの種類に適した標準のインジケータを使用します。ダイアログボックスでは複数 のインジケータを使用しないでください。 ダイアログボックスにメッセージまたはボタン全体を表示できない場合は、スクロール矢印を組み込 みます。標準のコンポーネントを使用している場合は、必要に応じてスクロール矢印が自動的に表示 されます。 エスケープキーを使用してユーザーがいつでもダイアログボックスを閉じることができるようにし ます。ユーザーがエスケープキーを押してダイアログボックスを閉じた場合は、他の操作を実装しない でください。例えば、ダイアログボックスでユーザーが設定を変更できる場合でも、ユーザーがエス ケープキーを押したら変更内容は反映しないでください。必要な場合は、後でダイアログボックスを 表示します。 アプリケーション画面にダイアログボックスが表示されているときユーザーが終話/電源キーを押した 場合は、ホームスクリーンまたはアプリケーションリストを表示します。ユーザーがアプリケーショ ンに戻った場合は、ダイアログボックスを再表示します。 67 開発ガイド • • • ダイアログボックス 可能であればユーザーが選択したテーマの表示スタイルを継承します。アプリケーションでテーマの 表示スタイルを継承しない場合は、一貫したスタイルをユーザーに提供してください。 コントラストが高くフォーカスを簡単に識別できるようなハイライトの色 (例えば、 青色の背景に白色 のテキスト)を選択します。すべてのコントロールに同じ色のハイライトを使用します。 色の値はハードコードしないでください。選択した色の値が、ユーザーの選択したテーマに適用でき ない可能性があります。 レイアウトのためのガイドライン • • • • • • • ダイアログボックスは画面の中央に配置します。BlackBerry® デバイスの標準のコンポーネントを使 用している場合は、ダイアログボックスは自動的に中央に配置されます。 作成するダイアログボックスの幅と高さは、画面の 90% 以下にします。BlackBerry デバイスの標準 のコンポーネントを使用している場合は、ダイアログボックスの最適なサイズが自動的に計算されます。 ダイアログボックスインジケータは、ダイアログボックスメッセージとともに中央に縦向きで配置し ます。 メッセージはインジケータの右側、ボタンの上部に表示します。 確認が必要な操作に関するボタンを最初に配置します。例えば、 [破棄]や[キャンセル]より前に[保 存]を配置します。 ボタンはダイアログボックスの中央に横向きで配置します。 ダイアログボックス内でボタンは縦方向に並べます。縦方向のレイアウトにすることで、ボタンを横 に伸ばして、ボタンラベルのローカライズに対応できます。 メッセージのためのガイドライン • • • • • • • • 具体的に記述します。ダイアログボックスを表示する理由と解決方法を明確に記述する文章を、可能 であれば短く一文にまとめます。 メッセージには可能であれば完結した文章を使用します。 ユーザーが理解しやすい言葉を使用します。例えば、 「ディスクへのファイル書き込み時にエラーが発 生しました」ではなく「メディアカードがいっぱいなのでファイルを保存できませんでした」という表 現を使用します。 メッセージはなるべく前向きな内容にし、ユーザーを責めて不快感を与えないようにします。エラー や予期していない状態の発生について、ユーザーを責めるようなメッセージは記述しないでくだ さい。それよりも、問題の解決方法を具体的にユーザーに伝えます。 ユーザーを言い表すときは二人称を使用します。 文章と同様のスタイルで大文字と小文字を使用します。 メッセージには感嘆符(!)を使用しないでください。 処理中(例えば、 「しばらくお待ちください...)であることを示す場合以外は、メッセージに省略記号 (...)を使用しないでください。 ボタンのためのガイドライン • • 68 デフォルトのボタンには、ユーザーが頻繁にクリックする可能性の高いボタンを使用します。データ の削除や変更に関連する操作を実行するボタンを、デフォルトのボタンとして使用しないでくだ さい。ただし例外として、データの削除や変更に関連する度合いが軽微な操作(単一項目の削除など) をユーザーが実行し、その後一般的なユーザー操作が続く場合は使用することができます。 ダイアログボックス内のボタン数は最大 3 つにしてください。3 つを超える場合は、代わりにアプリ ケーション画面でオプションボタンを使用することを検討してください。 ドロップダウンリスト 開発ガイド • • • • • • トラックホイール、トラックボール、またはトラックパッド付き BlackBerry デバイスの場合は、ボタ ンのショートカットキーを提供します。通常、ボタンラベルの最初の文字をショートカットキーにし ます。 ラベルは明瞭かつ簡潔にまとめます。 ラベルは可能であれば 1 単語でまとめます。ボタンのサイズはラベルの長さに応じて変化します。 ラベルが長過ぎると、テキストが切り捨てられていることを示す省略記号 (...)が表示されます。複数 の単語で構成されるラベルを作成する場合は、文章と同様のスタイルで大文字と小文字を使用します。 ラベルに [はい]や[いいえ] は使用しないでください。またラベルには、関連する操作を表す動詞を使用 します (例:[キャンセル]、 [削除]、 [破棄]、または [保存])。この方法により、ボタンクリック時の処理 内容をユーザーが簡単に理解できます。必要な場合は、画面の他の場所に、より説明的なテキストを組 み込みます(例えば、アプリケーションメッセージ内)。 ラベルに記号やグラフィックを使用しないでください。 ラベルに句読点は使用しないでください。関連操作の実行には追加情報が必要であることを示すに は、ボタンラベルに省略記号を使用します。 ドロップダウンリスト ドロップダウンリストを使用して、相互排他的な値のセットを提供します。 ユーザーは、ドロップダウンリストを使用して次の操作を実行できます。 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス ドロップダウン リストの値をクリッ クする。 スペースキーを押すか、トラックホ イール、トラックボール、またはト ラックパッドをクリックします。 画面をクリックします。 対策:ドロップダウンリストの実装 • スペースに制約がある場合に複数の選択肢を組み込むには、ドロップダウンリストを使用します。ス ペースに制約がない場合は、使用可能なオプションをユーザーが画面上で確認できるように、オプショ ンボタンの使用を検討してください。 69 開発ガイド • • • • • ドロップダウンリスト ObjectChoiceField クラスを使用してドロップダウンリストを作成します。 デフォルトの値には、ユーザーが頻繁にクリックする可能性の高い値を使用します。 ユーザーがリスト内をスクロールする形式の場合は、デフォルトのフォーカスとしてハイライトオプ ションを使用します。 ユーザーが値をクリックする必要がない場合は、ドロップダウンリストに [なし] の値を含めます。 [な し]の値は常にリストの最上部に配置します。 値は論理的にグループ化して整列させます(例えば、関連した値をまとめたり、最も一般的な値を先頭 に並べます)。アルファベット順は特定の言語にしか当てはまらないので、値はアルファベット順に並 べないようにします。 ラベルのガイドライン • • • • ドロップダウンリストおよびドロップダウンリストの値のラベルは、明瞭かつ簡潔にまとめます。ユー ザーがその値をクリックしたときの実行内容をラベルが明確に表していることを確認します。ドロッ プダウンリストの幅は、値ラベルの長さに基づいて変化します。ラベルが長過ぎると、テキストが切り 捨てられていることを示す省略記号(...)が表示されます。 ラベルはドロップダウンリストの左側に配置します。 ドロップダウンリストのラベル、およびドロップダウンリストの値ラベルには、タイトルと同様のスタ イルで大文字と小文字を使用します。 ドロップダウンリストのラベルの末尾にはコロン(:)を使用します。 ドロップダウンリストの作成 1. 必要なクラスとインターフェイスをインポートします。 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する MyUiScreen クラスはカスタム画面を示 しています。 public class MyUi extends UiApplication { public static void main(String[] args) { MyUi theApp = new MyUi(); theApp.enterEventDispatcher(); } public MyUi() { 70 ドロップダウンリスト 開発ガイド } } pushScreen(new MyUiScreen()); 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。画面コンストラクタ内 で setTitle() を呼び出して、画面のタイトルを指定します。 class MyUiScreen extends MainScreen { public MyUiScreen() { setTitle("UI Component Sample"); } } 4. 画面コンストラクタ内で ObjectChoiceField クラスを使用して、語句のリストを表示するドロップダウ ンリストを作成します。ドロップダウンリストに表示する項目を格納する String 配列を作成し ます。ドロップダウンリストに表示するデフォルト項目を格納する int を作成します。 ObjectChoiceField コンストラクタ内で、 ドロップダウンリストのラベル、表示する項目の配列、および デフォルト項目を指定します。以下のコードサンプルでは、デフォルトで Wednesday が表示され ます。add() を呼び出して画面にドロップダウンリストを追加します。 String choices[] = {"Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"}; int iSetTo = 2; add(new ObjectChoiceField("First Drop-down List",choices,iSetTo)); 5. 画面コンストラクタ内で NumericChoiceField クラスを使用して、数値のリストを表示する 2 つ目のド ロップダウンリストを作成します。NumericChoiceField コンストラクタ内で、ドロップダウンリストの ラベル、ドロップダウンリストに表示する最初と最後の数値、数値のリストに使用するインクリメ ント、およびデフォルトの数値を指定します。以下のコードサンプルでは、数値パラメータが int オ ブジェクトに格納されます。ドロップダウンリストには 1 から 31 までの数値が含まれ、デフォルト で数値 10 が表示されます。add() を呼び出して画面に 2 つ目のドロップダウンリストを追加します。 int iStartAt = 1; int iEndAt = 31; int iIncrement = 1; iSetTo = 10; add(new NumericChoiceField("Numeric Drop-Down List",iStartAt,iEndAt,iIncrement,iSetTo)); 6. アプリケーションを閉じる前に変更を保存するかどうかをユーザーに確認するデフォルト機能を上書 きするには、 MainScreen クラスの拡張で、 MainScreen.onSavePrompt() メソッドを上書きします。以下の コードサンプルでは、戻り値が true です。これは、アプリケーションを閉じる前にユーザーにプロン プトが表示されないことを示します。 public boolean onSavePrompt() { return true; } 71 開発ガイド コードサンプル:ドロップダウンリストの作成 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; public class MyUi extends UiApplication { public static void main(String[] args) { MyUi theApp = new MyUi(); theApp.enterEventDispatcher(); } public MyUi() { pushScreen(new MyUiScreen()); } } class MyUiScreen extends MainScreen { public MyUiScreen() { setTitle("UI Component Sample"); String choices[] = {"Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"}; int iSetTo = 2; add(new ObjectChoiceField("First Drop-down List",choices,iSetTo)); int iStartAt = 1; int iEndAt = 31; int iIncrement = 1; iSetTo = 10; add(new NumericChoiceField("Numeric Drop-Down List",iStartAt,iEndAt,iIncrement,iSetTo)); } public boolean onSavePrompt() { return true; } } ラベル ラベルを使用して、コントロールを識別するテキストを表示します。 72 ラベル リスト 開発ガイド 対策:ラベルの実装 • • • • • LabelField クラスを使用してラベルを作成します。 ラベルは明瞭かつ簡潔にまとめます。 ラベルは論理的にグループ化して整列させます(例えば、関連した項目をまとめたり、最も一般的な項 目を先頭に並べます)。アルファベット順は特定の言語にしか当てはまらないので、値はアルファベット 順に並べないようにします。 タイトルと同様のスタイルで大文字と小文字を使用します。 ラベルの末尾にはコロン(:)を使用します。 テキストラベルの作成 1. net.rim.device.api.ui.component.LabelField クラスをインポートします。 2. LabelField のインスタンスを作成して、画面にテキストラベルを追加します。 LabelField title = new LabelField("UI Component Sample", LabelField.ELLIPSIS); リスト リストを使用して、ユーザーがハイライトして開くことのできる項目を表示します。 ユーザーは、リスト内で次の操作を実行できます。 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス リスト内の項目をハ イライトする。 • • トラックホイールまたはトラック ボールを回します。 トラックパッド上で指をスライド させます。 項目を軽くタッチします。 73 リスト 開発ガイド 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス リスト内の項目を開 く。 項目をクリックするか、Enter キーを 押します。 画面をクリックします。 対策:リストの実装 • ListField クラスを使用してリストを作成します。 リストボックスの作成 リストボックスを使用してリストを表示します。ユーザーは、このリストから 1 つ以上の値を選択でき ます。 1. 次のクラスをインポートします。 import import import import import net.rim.device.api.system.*; net.rim.device.api.ui.*; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; java.util.Vector; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。コンストラクタ内で、pushScreen を呼び出して、アプリケーションのカスタ ム画面を表示します。手順 3 で説明する CreateMenuScreen クラスはカスタム画面を示しています。 public class ListFields extends UiApplication { public static void main(String[] args) { ListFields theApp = new ListFields(); theApp.enterEventDispatcher(); } public ListFields() { pushScreen(new ListFieldScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。コンストラクタ内で setTitle() を呼び出して、 画面のタイトルを表示します。add() を呼び出して画面にテキストフィール ドを表示します。addMenuItem() を呼び出して、MainScreen で作成されるメニューにメニュー項目を 追加します。 class ListFieldScreen extends MainScreen { private ListField _listField; 74 リスト 開発ガイド } private Vector _listElements; public ListFieldScreen() { setTitle("List Field Sample"); } 4. 画面コンストラクタ内で、リストボックスを作成します。Vector クラスを使用して、リストボックス に追加する項目の配列を作成します。ListField() クラスを使用して、リストボックスを作成します。 add() を呼び出して画面にリストボックスを追加します。手順 4 で説明する initializeList() を呼 び出して、リストボックスを追加します。 _listElements = new Vector(); _listField = new ListField(); ListCallback _callback = new ListCallback(); _listField.setCallback(_callback); add(_listField); initializeList(); 5. String オブジェクトを使用して、リストボックスに表示する項目を指定するメソッドを作成します。 addElement() を呼び出して、 リストに項目を追加します。setSize() を呼び出して、リストボックスの 項目の数を指定します。 private void initializeList() { String itemOne = "List item one"; String itemTwo = "List item two"; _listElements.addElement(itemOne); _listElements.addElement(itemTwo); reloadList(); } private void reloadList() { _listField.setSize(_listElements.size()); } 6. ListFieldCallback インターフェイスを実装するクラスを作成します。drawListRow() を実装して、画面 にリストボックスの項目を追加します。get() を実装して、指定された索引でリストボックスの項目 を返します。indexOfList() を実装して、特定のストリングについて最初に出現するものを返します。 getPreferredWidth() を実装して、 リストボックスの幅を取得します。 private class ListCallback implements ListFieldCallback { public void drawListRow(ListField list, Graphics g, int index, int y, int w) { String text = (String)_listElements.elementAt(index); g.drawText(text, 0, y, 0, w); } public Object get(ListField list, int index) { return _listElements.elementAt(index); 75 オプションボタン 開発ガイド } } public int { return } public int { return } indexOfList(ListField list, String prefix, int string) _listElements.indexOf(prefix, string); getPreferredWidth(ListField list) Display.getWidth(); オプションボタン オプションボタンを使用して、相互排他的であるが関連する選択肢を示します。 ユーザーはオプションボタンについて次の操作を実行できます。 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス オプションボタンを 選択する。 スペースキーを押すか、トラックホ イール、トラックボール、またはト ラックパッドをクリックします。 画面をクリックします。 対策:オプションボタンの実装 • • • • • 76 スペースに制約がない場合に複数の選択肢を組み込むには、オプションボタンを使用します。スペース に制約がある場合は、代わりにドロップダウンリストの使用を検討してください。 オプションボタンを作成するには RadioButtonField クラスを使用します。 オプションボタンのコンテンツがどのような状況にも当てはまることを確認します。オプションボタ ンのコンテンツが状況に応じて変化しないようにしてください。 ユーザーがオプションボタンを選択したときにアクションを開始しないようにします。例えば、新規 画面を開かないようにします。 オプションボタンは縦に並べます。 開発ガイド • オプションボタン 値は論理的にグループ化して整列させます(例えば、関連する値をまとめたり、最も一般的な値を先頭 に並べます)。アルファベット順は特定の言語にしか当てはまらないので、オプションボタンはアル ファベット順に並べないようにします。 ラベルのガイドライン • • • • ラベルは明瞭かつ簡潔にまとめます。ユーザーがそのオプションボタンを選択したときの実行内容を ラベルが明確に表していることを確認します。ラベルは長過ぎると折り返されます。 ラベルはオプションボタンの右側に配置します。 タイトルと同様のスタイルで大文字と小文字を使用します。 文末に句読点を使用しないでください。 オプションボタンの作成 RadioButtonGroup クラスを使用して、オプションボタンのグループを作成できます。 ユーザーは、オプ ションボタンのグループから 1 つのオプションだけを選択できます。 1. 必要なクラスとインターフェイスをインポートします。 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する MyUiScreen クラスはカスタム画面を示 しています。 public class MyUi extends UiApplication { public static void main(String[] args) { MyUi theApp = new MyUi(); theApp.enterEventDispatcher(); } public MyUi() { pushScreen(new MyUiScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。画面コンストラクタ内 で setTitle() を呼び出して、画面のタイトルを指定します。 class MyUiScreen extends MainScreen { public MyUiScreen() { 77 オプションボタン 開発ガイド } } setTitle("UI Component Sample"); 4. 画面コンストラクタ内で、RadioButtonGroup クラスを使用してオプションボタンのグループを作成し ます。RadioButtonField クラスを使用して、グループに追加するオプションボタンを作成します。 RadioButtonField コンストラクタ内で、 オプションボタンのラベルとグループを指定し、デフォルトで 選択されるオプションをブール値で示します(例えば、true はデフォルトでそのオプションが選択さ れることを示します)。add() を呼び出して画面にオプションボタンを追加します。 RadioButtonGroup rbg = new RadioButtonGroup(); add(new RadioButtonField("Option 1",rbg,true)); add(new RadioButtonField("Option 2",rbg,false)); 5. アプリケーションを閉じる前に変更を保存するかどうかをユーザーに確認するデフォルト機能を上書 きするには、 MainScreen クラスの拡張で、 MainScreen.onSavePrompt() メソッドを上書きします。以下の コードサンプルでは、戻り値が true です。これは、アプリケーションを閉じる前にユーザーにプロン プトが表示されないことを示します。 public boolean onSavePrompt() { return true; } コードサンプル:オプションボタンの作成 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; public class MyUi extends UiApplication { public static void main(String[] args) { MyUi theApp = new MyUi(); theApp.enterEventDispatcher(); } public MyUi() { pushScreen(new MyUiScreen()); } } class MyUiScreen extends MainScreen { public MyUiScreen() { setTitle("UI Component Sample"); RadioButtonGroup rbg = new RadioButtonGroup(); add(new RadioButtonField("Option 1",rbg,true)); add(new RadioButtonField("Option 2",rbg,false)); } 78 進行状況インジケータ 開発ガイド } public boolean onSavePrompt() { return true; } 進行状況インジケータ 進行状況インジケータを使用して、操作の状態を示します。 進行状況インジケータには、次の 2 種類が あります。 • • 操作の継続時間が明確である場合は、限定的な進行状況インジケータを使用します。限定的な進行状 況インジケータには、操作の内容を示すラベルと操作の進行に合わせて左から右に進む水平なバーが あります。バーには、 操作がどれだけ完了したかを示す割合が表示されます。ブラウザでは、進行状況 インジケータは、合計キロバイトのうち BlackBerry® デバイスがダウンロードしたキロバイト数も示 します。限定的な進行状況インジケータを非表示にするには、終話キーを押します。ユーザーが終話 キーを押しても操作は継続しますが、ユーザーは同時に他のタスクを実行できます。 操作の継続時間が不明である場合は、無期限の進行状況インジケータを使用します。進行状況は、ス テータスダイアログボックスを使用して、または Precision テーマの場合は時計のアニメーション カーソルを、Dimension テーマの場合は砂時計のアニメーションカーソルを使用して、示すことができ ます。アプリケーションが無期限の進行状況インジケータを表示している間、ユーザーは他の操作を 実行することはできません。 限定的な進行状況インジケータ 無期限の進行状況インジケータ 対策:進行状況インジケータの実装 • • 操作が 2 秒以内に完了しない場合は、常に進行状況を示します。 操作の継続時間が明確である場合は、限定的な進行状況インジケータを使用します。 79 ピッカーダイアログボックス 開発ガイド • • • • 操作の継続時間が不明である場合は、無期限の進行状況インジケータを使用します。 進行状況インジケータを作成するには GaugeField クラスを使用します。 終話キーを使用してユーザーがいつでも限定的な進行状況インジケータを非表示にできるようにします。 ユーザーにとって役立つ進行状況情報を提供します。例えば、ユーザーが Web ページをロードしている 場合は、BlackBerry® デバイスにロードしたデータ量(8KB/10KB など) を示します。デバイスにアプリ ケーションをダウンロードしている場合は、進行状況を割合で示します。できるだけ正確な進行状況 情報を示します。 無期限の進行状況を示すには、Precision テーマの場合は時計アイコンを、Dimension テーマの場合は 砂時計アイコンを使用します。 進行中の操作について役立つメッセージを提供できる場合は、ステータスダイアログボックスを使用 して無期限の進行状況を示します。ガベージコレクションを示すには、Precision テーマの場合は時 計のアニメーションカーソルを、Dimension テーマの場合は砂時計のアニメーションカーソルを使用 します。 可能であればユーザーが選択したテーマの表示スタイルを継承します。アプリケーションでテーマの 表示スタイルを継承しない場合は、一貫したスタイルをユーザーに提供してください。 • • • ラベルのガイドライン • ラベルは明瞭かつ簡潔にまとめます(例えば、 「データをロードしています」や「アプリケーションリスト を作成しています」)。 文章と同様のスタイルで大文字と小文字を使用します。 ダイアログボックスメッセージの末尾には省略記号(...)を使用します。 • • 進行状況インジケータの作成 1. net.rim.device.api.ui.component.GaugeField クラスをインポートします。 2. GaugeField のインスタンスを作成します。 GaugeField percentGauge = new GaugeField("Percent: ", 1, 100, 29, GaugeField.PERCENT); ピッカーダイアログボックス ピッカーダイアログボックスを使用すると、ユーザーはリストから項目を簡単に選択することができます。 ピッカーの種類 説明 ファイル このピッカーを使用すると、ユーザーは BlackBerry® デバイスでファイルを 閲覧できます。 80 ピッカーダイアログボックス 開発ガイド ピッカーの種類 説明 場所 このピッカーを使用すると、ユーザーは定義されたリストから場所を選択でき ます。 例えば、ユーザーは、GPS の場所や以前に選択した場所を選択できます。 日付 このピッカーを使用すると、ユーザーは特定の年月日を選択できます。 例え ば、ユーザーがクレジットカードの有効期限を示す月と年を選択することを 許可できます。 時刻 このピッカーを使用すると、ユーザーは特定の時分秒を選択できます。 81 ピッカーダイアログボックス 開発ガイド ピッカーの種類 説明 対策:ピッカーダイアログボックスの実装 FilePicker、LocationPicker、および DateTimePicker クラスを使用してピッカーダイアログボックスを作成 します。 ファイルピッカーダイアログボックスのためのガイドライン • • 適切なデフォルトフォルダからユーザーが閲覧を開始できるようにします。アプリケーションにデ フォルトフォルダがなく、BlackBerry デバイスにメディアカードが挿入されている場合は、ルート フォルダから閲覧を開始できるようにします。 さまざまな種類のファイルがアプリケーションでサポートされており、BlackBerry デバイスにメディ アカードが挿入されている場合は、/Media Card/BlackBerry から閲覧を開始できるようにします。 さまざまな種類のファイルがアプリケーションでサポートされているが、BlackBerry デバイスにメ ディアカードが挿入されていない場合は、/Device Memory/home/user から閲覧を開始できるように します。 日付ピッカーの作成 1. 必要なクラスとインターフェイスをインポートします。 import import import import import net.rim.device.api.ui.*; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.picker.*; java.util.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。コンストラクタ内で、pushScreen() を呼び出して、アプリケーションのカスタ ム画面を表示します。手順 3 で説明する DatePickScreen クラスはカスタム画面を示しています。 public class DatePick extends UiApplication { public static void main(String[] args) 82 ピッカーダイアログボックス 開発ガイド { } DatePick theApp = new DatePick(); theApp.enterEventDispatcher(); } public DatePick() { pushScreen(new DatePickScreen()); } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。コンストラクタ内で、 setTitle() を呼び出して、 画面にタイトルを表示します。add() を呼び出して、画面にリッチテキスト フィールドを表示します。 class DatePickScreen extends MainScreen { public DatePickScreen() { setTitle("Date Picker Sample"); add(new RichTextField("Trying Date Picker")); } } 4. invokeLater() を呼び出して、アプリケーションのイベントキューにコードのセクションを追加し ます。Runnable オブジェクトを作成して、パラメータとして invokeLater() に渡します。Runnable の定 義内で、run() を上書きします。 class DatePickScreen extends MainScreen { public DatePickScreen() { setTitle("Date Picker Sample"); add(new RichTextField("Trying Date Picker")); UiApplication.getUiApplication().invokeLater(new Runnable() { public void run() { } }); } } 5. run() 内で、DateTimePicker.getInstance() を呼び出して DateTimePicker オブジェクトを返します。 doModal() を呼び出して、 日付ピッカーを表示します。getDateTime() を呼び出して、ユーザーが選択する 日付と時刻を表す Calendar オブジェクトを返します。getTime() を使用して、日付と時刻を Date オ ブジェクトとして返します。Dialog.alert() を使用して、選択された日付と時刻を表示します。 class DatePickScreen extends MainScreen { public DatePickScreen() { 83 ピッカーダイアログボックス 開発ガイド } } setTitle("Date Picker Sample"); add(new RichTextField("Trying Date Picker")); UiApplication.getUiApplication().invokeLater(new Runnable() { public void run() { DateTimePicker datePicker = DateTimePicker.getInstance(); datePicker.doModal(); Calendar cal = datePicker.getDateTime(); Date date = cal.getTime(); Dialog.alert("You selected " + date.toString()); } }); コードサンプル:日付ピッカーの作成 import net.rim.device.api.ui.*; import net.rim.device.api.ui.picker.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; import net.rim.device.api.database.*; import net.rim.device.api.io.*; import java.util.*; public class DatePick extends UiApplication { public static void main(String[] args) { DatePick theApp = new DatePick(); theApp.enterEventDispatcher(); } public DatePick() { pushScreen(new DatePickScreen()); } } class DatePickScreen extends MainScreen { public DatePickScreen() { setTitle("Date Picker Sample"); add(new RichTextField("Trying Date Picker")); UiApplication.getUiApplication().invokeLater(new Runnable() { public void run() { DateTimePicker datePicker = DateTimePicker.getInstance(); datePicker.doModal(); Calendar cal = datePicker.getDateTime(); Date date = cal.getTime(); 84 ピッカーダイアログボックス 開発ガイド } } }); } Dialog.alert("You selected " + date.toString()); ファイルピッカーの作成 1. 必要なクラスとインターフェイスをインポートします。 import import import import import net.rim.device.api.ui.*; net.rim.device.api.ui.picker.*; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; java.util.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する FilePickScreen クラスはカスタム画面 を示しています。 public class FilePick extends UiApplication { public static void main(String[] args) { FilePick theApp = new FilePick(); theApp.enterEventDispatcher(); } public FilePick() { pushScreen(new FilePickScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。画面コンストラクタ内 で setTitle() を呼び出して、画面のタイトルを指定します。add() を呼び出して画面にラベルフィール ドを追加します。 class FilePickScreen extends MainScreen { public FilePickScreen() { setTitle("File Picker Sample"); add(new LabelField("Trying File Picker")); } } 85 開発ガイド ピッカーダイアログボックス 4. 画面コンストラクタ内で invokeLater() を呼び出して、アプリケーションのイベントキューにコード のセクションを追加します。Runnable オブジェクトを作成して、パラメータとして invokeLater() に 渡します。 class FilePickScreen extends MainScreen { public FilePickScreen() { setTitle("File Picker Sample"); add(new LabelField("Trying File Picker")); UiApplication.getUiApplication().invokeLater(new Runnable() { public void run() { } }); } } 5. Runnable の定義内で、run() を上書きします。run() 内で、 FilePicker.getInstance() を呼び出して FilePicker オブジェクトを返します。手順 6 で説明する FilePickListener オブジェクトを作成し ます。setListener() を呼び出して、ファイルピッカーにリスナを登録します。show() を呼び出して、 画面にファイルピッカーを表示します。 class FilePickScreen extends MainScreen { public FilePickScreen() { setTitle("File Picker Sample"); add(new LabelField("Trying File Picker")); UiApplication.getUiApplication().invokeLater(new Runnable() { public void run() { FilePicker fp = FilePicker.getInstance(); FilePickListener fileListener = new FilePickListener(); fp.setListener(fileListener); fp.show(); } }); } } 6. Dialog.alert を呼び出して、どのファイルが選択されたかを示すメッセージを表示するダイアログボッ クスを作成します。selectionDone() を上書きして、 FilePicker.Listener インターフェイスを実装する クラス内で Dialog.alert を呼び出します。ユーザーがファイルピッカーを使用してファイルを選 択すると、アプリケーションにより selectionDone() が呼び出されます。 86 開発ガイド ピッカーダイアログボックス class FilePickListener implements FilePicker.Listener { public void selectionDone(String str) { Dialog.alert("You selected " + str); } } コードサンプル:ファイルピッカーの作成 import net.rim.device.api.ui.*; import net.rim.device.api.ui.picker.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; import net.rim.device.api.io.*; public class FilePick extends UiApplication { public static void main(String[] args) { FilePick theApp = new FilePick(); theApp.enterEventDispatcher(); } public FilePick() { pushScreen(new FilePickScreen()); } } class FilePickScreen extends MainScreen { public FilePickScreen() { setTitle("File Picker Sample"); add(new LabelField("Trying File Picker")); UiApplication.getUiApplication().invokeLater(new Runnable() { public void run() { FilePicker fp = FilePicker.getInstance(); FilePickListener fileListener = new FilePickListener(); fp.setListener(fileListener); fp.show(); } }); } } class FilePickListener implements FilePicker.Listener { public void selectionDone(String str) { 87 検索フィールド 開発ガイド } } Dialog.alert("You selected " + str); 検索フィールド 検索フィールドを使用すると、ユーザーがアプリケーション内の項目を検索できます。 複数の BlackBerry® デバイスアプリケーションに検索フィールドが含まれます。 例えば、タスクリストでは、ユーザーが検 索フィールドを使用して特定のタスクを検索できます。 ユーザーが検索フィールドにテキストを入力すると、そのテキストから始まる項目が検索、表示され ます。 ユーザーが検索フィールドに複数の単語を入力すると、アプリケーションでは両方の単語と一 致する結果が表示されます。 例えば、ユーザーが「ca ba」と入力した場合、アプリケーションでは「ca」 で始まる単語と「ba」で始まる単語を含むすべての項目(「call back」など)が返されます。 ユーザーは、検索フィールドで次の操作を実行できます。 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス 検索結果でハイラ イトされている項目 を開く。 検索フィールド内の テキストを 削除する。 Enter キーを押すか、トラックホ イール、トラックボール、またはト ラックパッドをクリックします。 エスケープキーを押す。 画面をクリックします。 エスケープキーを押す。 ユーザーが特定の値を簡単に入力できるように、オートコンプリートをサポートするフィールドを作成で きます。 ユーザーが入力すると、値の候補がドロップダウンリストに表示されます。 ユーザーは、値を クリックするか、入力を続けてリスト内の値を制限できます。 88 検索フィールド 開発ガイド 対策:検索フィールドの実装 • • • • • • • • • 項目の制約リストがある場合は、検索フィールドを組み込みます。 検索フィールドを作成するには KeywordFilterField クラスを使用します。 AutoCompleteField クラスおよび BasicFilteredList クラスを使用してオートコンプリートフィールド を作成します。 ユーザーが入力した検索テキストを、エスケープキーを使用して削除できるようにします。 デフォルトのフォーカスを、検索フィールドおよびリストの最初の項目に設定します。 先頭の文字が、入力した検索テキストに一致する単語を、検索結果に表示します。 検索フィールドが含まれる画面にはショートカットキーを割り当てないでください。ショートカット キーを使用する必要があり、かつ項目の制約リストがある場合は、別の検索機能を組み込みます。例え ば、ユーザーはメッセージリストのメッセージを、S キーを押すかメニューを使用して検索できます。 検索フィールドは、アプリケーション画面のタイトルバーに配置します。 検索フィールドでは大文字と小文字を区別しないようにしてください。 ラベルのガイドライン • • 検索フィールドのラベルには[検索:]を使用します。 検索フィールドにはプロンプトテキストを組み込まないでください。 検索フィールドの作成 net.rim.device.api.ui.component パッケージ内の KeywordFilterField クラスを使用するアプリケーション を作成できます。これにより、単一のテキスト入力フィールドと選択可能な要素のリストで構成された UI フィールドが提供されます。 ユーザーが検索フィールドにテキストを入力すると、リスト内の要素の うち検索テキストで始まる要素が、アプリケーションにより抽出されます。 KeywordFilterField クラスの 使用方法の詳細については、BlackBerry® Java® Development Environment のバージョン 4.3.1 以降に 付属の Keyword Filter Field サンプルアプリケーションを参照してください。 1. 必要なクラスとインターフェイスをインポートします。 import import import import net.rim.device.api.collection.util.SortedReadableList; net.rim.device.api.io.LineReader; net.rim.device.api.ui.component.KeywordFilterField; net.rim.device.api.ui.component.KeywordProvider; 89 開発ガイド 検索フィールド import java.io.InputStream; import java.lang.String; import java.util.Vector; 2. 変数を作成します。以下のコードサンプルでは、CountryList が SortedReadableList クラスを拡張し、 KeywordProvider インターフェイスを実装します。 private KeywordFilterField _keywordField; private CountryList _CountryList; private Vector _countries; 3. 選択可能なテキストアイテムのリストを作成するには、テキストファイルから取得したデータを持つ ベクトルを入力します。 _countries = getDataFromFile(); 4. SortedReadableList クラスを拡張するクラスのインスタンスを作成します。 _CountryList = new CountryList(StringComparator.getInstance(true),_countries); 5. リストの要素を指定するには、KeywordFilterField オブジェクトの新しいインスタンスを作成します。 _keywordField = new KeywordFilterField(); 6. KeywordFilterField.setList() を呼び出します。 _keywordField.setList(_CountryList, _CountryList); 7. KeywordFilterFIeld の入力フィールドのラベルを設定します。 _keywordField.setLabel("Search: "); 8. アプリケーションのメイン画面を作成し、メイン画面に KeywordFilterField を追加します。 KeywordFilterDemoScreen screen = new KeywordFilterDemoScreen(this,_keywordField); screen.add(_keywordField.getKeywordField()); screen.add(_keywordField); pushScreen(screen); 9. テキストファイルのデータを含む Country オブジェクトのベクトルを取得して返すメソッドを作成する には、メソッドの署名で、Vector を戻り値のタイプとして指定します。 public Vector getDataFromFile() 10. 新しい Vector オブジェクトへの参照を作成して格納します。 Vector countries = new Vector(); 11. テキストファイルへの入力ストリームを作成します。 InputStream stream = getClass().getResourceAsStream("/Data/CountryData.txt"); 12. 入力ストリームから、CRLF 区切りの行を読み取ります。 90 開発ガイド スピンボックス LineReader lineReader = new LineReader(stream); 13. ファイルの終端を示すフラグに到達するまで、入力ストリームから 1 行ずつデータを読み取ります。 各行が解析され、Country オブジェクトの構築に使用されるデータが抽出されます。 for(;;){ //Obtain a line of text from the text file String line = new String(lineReader.readLine()); //If we are not at the end of the file, parse the line of text if(!line.equals("EOF")) { int space1 = line.indexOf(" "); String country = line.substring(0,space1); int space2 = line.indexOf(" ",space1+1); String population = line.substring(space1+1,space2); String capital = line.substring(space2+1,line.length()); // Create a new Country object countries.addElement(new Country(country,population,capital)); } else { break; } } // end the for loop return countries; 14. 選択可能なテキストアイテムのリストにキーワードを追加するには、SortedReadableList.doAdd (element) を呼び出します。 SortedReadableList.doAdd(((Country)countries.elementAt(i)) getCountryName()) ; 15. 選択可能なテキストアイテムのリストを更新するには、KeywordFilterField.updateList() を呼び出し ます。 _keywordField.updateList(); 16. BlackBerry デバイスのユーザーが KeywordFilterField に入力したキーワードを取得するには、 KeywordFilterField.getKeyword() を呼び出します。 String userTypedWord = _keywordField.getKeyword(); スピンボックス スピンボックスを使用すると、ユーザーが、順序付けられたリストから項目を簡単に選択できます。 例 えば、スピンボックスを使用して、ユーザーが数値を検索したり、曜日を変更したりできるようにします。 91 スピンボックス 開発ガイド 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス リスト内の項目を検 索する。 • • リストから項目を選 択する。 別のスピンボックス に移動する。 トラックボールを上または下に回 します。 トラックパッド上で指を上または 下にスライドさせます。 指をすばやくスライドさせます。 トラックボールまたはトラックパッド [OK]をクリックします。 をクリックします。 • トラックボールを左または右に回 スピンボックスをタッチします。 します。 • トラックパッド上で指を左または 右にスライドさせます。 対策:スピンボックスの実装 • • • • • • • • 92 スピンボックスは連続した項目のリストに使用します。 非連続の項目や間隔が不規則な項目にはドロップダウンリストを使用します。非連続の項目でもリスト が短い場合は、スピンボックスを使用することでよりインタラクティブな操作性をユーザーに提供する ことができます。 他のコントロールが画面に複数表示される場合は、スピンボックスは使用しないでください。 スピンボックスを作成するには SpinBoxField クラスおよび SpinBoxFieldManager クラスを使用します。 スピンボックスは可能であれば画面ではなくダイアログボックスに追加します。タッチパネル付き BlackBerry デバイスの場合、ユーザーがリストから項目を選択するには[OK]をクリックする必要があ ります。 ユーザーがスピンボックスをハイライトしたときに 3 ~ 5 個の項目が縦に表示されるようにします。 規則的に連続した項目のパターン(例えば、5、10、15)を使用して、ターゲット項目を見つけるのに必要 なスクロール数をユーザーが予測できるようにします。 横方向にスクロールして複数のスピンボックスを表示するような設計にはしないでください。必要に 応じて、スピンボックスを複数のフィールドに分割します。 スピンボックス 開発ガイド • スピンボックス内のテキストが長い場合は、省略記号(...)を使用します。 スピンボックスの作成 1. 必要なクラスとインターフェイスをインポートします。 import import import import import net.rim.device.api.ui.UiApplication; net.rim.device.api.ui.component.Dialog; net.rim.device.api.ui.component.TextSpinBoxField; net.rim.device.api.ui.container.MainScreen; net.rim.device.api.ui.container.SpinBoxFieldManager; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する HomeScreen クラスはカスタム画面を示 しています。 public class SpinBoxApp extends UiApplication { public static void main(String[] args) { SpinBoxApp app = new SpinBoxApp(); app.enterEventDispatcher(); } public SpinBoxApp() { pushScreen(new HomeScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。スピンボックス内の各 フィールドに対して変数を宣言し、スピンボックスのフィールドマネージャに変数を宣言します。 class HomeScreen extends MainScreen { TextSpinBoxField spinBoxDays; TextSpinBoxField spinBoxMonths; SpinBoxFieldManager spinBoxMgr; public HomeScreen() { } } 4. 画面コンストラクタ内で、スピンボックスのフィールドごとに String オブジェクトの配列を作成し ます。 93 開発ガイド スピンボックス final String[] DAYS = {"Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"}; final String[] MONTHS = {"January","February","March","April","May","June","July","Au ust","September","October","November","December"}; 5. 画面コンストラクタ内で、スピンボックスのフィールドマネージャの新しいインスタンスと、2 つのス ピンボックスフィールドを作成します。各スピンボックスのフィールドコンストラクタに、適切なスト リングの配列を引数として渡します。 spinBoxMgr = new SpinBoxFieldManager(); spinBoxDays = new TextSpinBoxField(DAYS); spinBoxMonths = new TextSpinBoxField(MONTHS); 6. 画面コンストラクタ内で、スピンボックスフィールドをスピンボックスのフィールドマネージャに追加 します。add() を呼び出して、マネージャおよびマネージャに含まれるフィールドを画面に追加します。 spinBoxMgr.add(spinBoxDays); spinBoxMgr.add(spinBoxMonths); add(spinBoxMgr); コードサンプル:スピンボックスの作成 import net.rim.device.api.ui.UiApplication; import net.rim.device.api.ui.container.MainScreen; import net.rim.device.api.ui.container.SpinBoxFieldManager; import net.rim.device.api.ui.component.Dialog; import net.rim.device.api.ui.component.TextSpinBoxField; public class SpinBoxApp extends UiApplication { public static void main(String[] args) { SpinBoxApp app = new SpinBoxApp(); app.enterEventDispatcher(); } public SpinBoxApp() { HomeScreen homeScreen = new HomeScreen(); pushScreen(homeScreen); } } class HomeScreen extends MainScreen { TextSpinBoxField spinBoxDays; TextSpinBoxField spinBoxMonths; SpinBoxFieldManager spinBoxMgr; public HomeScreen() { final String[] DAYS = {"Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"}; 94 テキストフィールド 開発ガイド final String[] MONTHS = {"January","February","March","April","May","June","July","August","Septe ber","October","November","December"}; spinBoxMgr = new SpinBoxFieldManager(); spinBoxDays = new TextSpinBoxField(DAYS); spinBoxMonths = new TextSpinBoxField(MONTHS); spinBoxMgr.add(spinBoxDays); spinBoxMgr.add(spinBoxMonths); add(spinBoxMgr); } } public void close() { Dialog.alert("You selected " + (String)spinBoxDays.get(spinBoxDays.getSelectedIndex()) + " and " + (String)spinBoxMonths.get(spinBoxMonths.getSelectedIndex())); super.close(); } テキストフィールド ユーザーはテキストフィールドを使用してテキストを入力することができます。 テキストフィールド 説明 の種類 メールアドレス 日付と時刻 スペースキーを押すことで、メールアドレスフィールドに @ マークまたはピリオ ドを挿入することができます。 BlackBerry® デバイスにトラックホイールまたはトラックボールが付いている場 合は、キーボードを使用するかトラックホイールまたはトラックボールを縦に回 転させることで、日付または時刻を変更することができます。 BlackBerry デバイスにトラックパッドが付いている場合は、キーボードを使用する かトラックパッドで指を縦にスライドさせることで、日付または時刻を変更する ことができます。 数字 BlackBerry デバイスにタッチパネルが付いている場合は、[日付または時刻] フィールドをクリックして指を上下にスライドさせることで、日付または時刻を 変更することができます。 BlackBerry デバイスにタッチパネルが付いていない場合、数字フィールドに入 力すると BlackBerry デバイスにより NUM ロックモードに切り替えられるので、 数字入力時に Alt キーを押す必要がありません。 95 テキストフィールド 開発ガイド テキストフィールド 説明 の種類 パスワード 電話番号 BlackBerry デバイスにタッチパネルが付いている場合は、数字フィールドへの入 力時に数字キーボードが表示されます。 ユーザーがパスワードフィールドに入力すると、テキストではなくアスタリスク (*)が表示されます。 パスワードフィールドでは、切り取り、コピー、貼り 付け、または AutoText を使用することはできません。 SureType® テクノロジを搭載した BlackBerry デバイスの場合、マルチタップが パスワードフィールドのデフォルトの入力方式です。 BlackBerry デバイスにタッチパネルが付いていない場合は、電話番号フィールド に入力すると BlackBerry デバイスにより NUM ロックモードに切り替えられるの で、番号入力時に Alt キーを押す必要がありません。 また、電話番号フィール ドでユーザーが次の操作を実行できるように設定できます。 • • • • • 国際電話番号用のプラス記号(+)を入力します。 マイナス記号 (-)、ピリオド (.)、かっこ (())、 およびスペースなどの書式設定文 字を入力します。 シャープ(#)記号またはアスタリスク(*)を入力します。 カンマ(,)を入力して一時停止状態であることを示すか、感嘆符を入力して待 機状態であることを示します。 Alt キーと E、X、または T を押して内線であることを示します。 BlackBerry デバイスにタッチパネルが付いている場合は、電話番号フィールドへ の入力時に番号キーボードが表示されます。 また、電話番号フィールドでユー ザーが次の操作を実行できるように設定できます。 • • • テキスト 96 シャープ(#)記号またはアスタリスク(*)を入力します。 アスタリスク(*)キーを押したままにすることで、一時停止状態または内線で あることを示します。 シャープ記号(#)キーを押したままにすることで、待機状態または内線である ことを示します。 テキストフィールドにはテキストを入力します。 ユーザーはテキストの切り取 り、コピー、および貼り付けができます。 カーソルが行末に達すると、テキスト は次の行に折り返されます。 テキストフィールド 開発ガイド テキストフィールド 説明 の種類 Web アドレス また、BlackBerry デバイスでは電話番号、Web ページ、およびメールアドレスを リンクに自動変換できます。 ユーザーはスペースキーを押すことで、アドレスフィールドにピリオド(.)を挿 入できます。 対策:テキストフィールドの実装 • • • • • テキストフィールドを作成するには RichTextField クラスを使用します。 ユーザーが入力するテキストを考慮して、テキストフィールドの種類を選択します。テキスト入力時 に画面に適切な入力インジケータを表示するために、最適なテキストフィールドを使用することが重 要です。例えば、ユーザーが電話番号フィールドにテキストを入力する場合は、NUM ロックインジケータ が画面の右上隅に表示されます。また、選択したフィールドは、SureType® テクノロジを搭載した BlackBerry デバイスにおけるフィールドのデフォルト入力方式にも影響を与えます。 カスタムフィールドを作成するよりは、可能であれば既存のフィールドを使用または拡張し、適切なデ フォルト設定がフィールドに継承されるようにします。 フォーカスを適切に設定します。フォーカスは、できるだけユーザーが最初に使用する可能性の高い フィールドに設定します。 プロンプトテキストは、画面スペースに制約がありラベルまたは手順説明を記述できない場合にのみ 使用します。フィールドに表示されたプロンプトテキストは、ユーザーが入力すると画面から消えます。 ラベルのガイドライン • • • • ラベルは明瞭かつ簡潔にまとめます。ラベルは折り返さないようにします。 タイトルと同様のスタイルで大文字と小文字を使用します。 フィールドのラベルの末尾にはコロン(:)を使用します。 プロンプトテキストを使用する場合は、簡潔に記述します。文章と同様のスタイルで大文字と小文字 を使用します。 テキストフィールドの作成 書式設定が可能な読み取り専用テキストフィールドの作成 1. net.rim.device.api.ui.component.RichTextField クラスをインポートします。 2. RichTextField のインスタンスを作成します。 RichTextField rich = new RichTextField("RichTextField"); 97 テキストフィールド 開発ガイド 書式設定を持たず、フィルタリングを受け付ける編集可能なテキストフィールドの作成 1. 次のクラスをインポートします。 • net.rim.device.api.ui.component.BasicEditField • net.rim.device.api.ui.component.EditField 2. BasicEditField のインスタンスを作成します。 BasicEditField bf = new BasicEditField("BasicEditField: ", "", 10, EditField.FILTER_UPPERCASE); 特殊文字を使用できる編集可能なテキストフィールドの作成 1. net.rim.device.api.ui.component.EditField クラスをインポートします。 2. EditField のインスタンスを作成します。 EditField edit = new EditField("EditField: ", "", 10, EditField.FILTER_DEFAULT); AutoText のテキストフィールドの作成 テキストフィールドで AutoText がサポートされている場合は、ユーザーがスペースキーを 2 回押すと BlackBerry® デバイスはピリオドを挿入し、ピリオドの次の文字を大文字にして、AutoText アプリケー ションでの定義に従って単語を置換します。 1. 次のクラスをインポートします。 • net.rim.device.api.ui.component.AutoTextEditField • net.rim.device.api.ui.autotext.AutoText • net.rim.device.api.ui.component.BasicEditField 2. AutoTextEditField のインスタンスを作成します。 AutoTextEditField autoT = new AutoTextEditField("AutoTextEditField: ", ""); 日付フィールドの作成 1. 必要なクラスとインターフェイスをインポートします。 import import import import net.rim.device.api.ui.*; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; java.lang.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する MyUiScreen クラスはカスタム画面を示 しています。 98 開発ガイド ツリービュー public class MyUi extends UiApplication { public static void main(String[] args) { MyUi theApp = new MyUi(); theApp.enterEventDispatcher(); } public MyUi() { pushScreen(new MyUiScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。画面のコンストラクタ 内で setTitle() を呼び出して、画面のタイトルを指定します。 class MyUiScreen extends MainScreen { public MyUiScreen() { setTitle("UI Component Sample"); } } 4. 画面のコンストラクタ内で DateField クラスを使用して日付フィールドを作成します。 System.currentTimeMillis() から返される値をパラメータとして指定し、 現在の時刻を返します。日付 と時刻の両方を表示するには DateField.DATE_TIME スタイルを使用します。他のスタイルを使用して、 日付のみまたは時刻のみを表示することもできます。 add(new DateField("Date: ", System.currentTimeMillis(), DateField.DATE_TIME)); パスワードフィールドの作成 1. net.rim.device.api.ui.component.PasswordEditField クラスをインポートします。 2. PasswordEditField のインスタンスを作成します。 例えば、 次のインスタンスでは、PasswordEditField のデフォルトの初期値を指定できるコンストラクタ を使用します。 PasswordEditField pwd = new PasswordEditField("PasswordEditField: ", ""); ツリービュー ツリービューを使用してフォルダなどのオブジェクトを階層表示します。 ツリービューのオブジェクトはノードです。 最上位のノードはルートノードです。 ツリーのノードの下 には子ノードを作成できます。 子ノードを持つノードを親ノードと呼びます。 99 ツリービュー 開発ガイド ユーザーはツリービューで次の操作を実行できます。 操作 タッチパネルなし BlackBerry デバイス タッチパネル付き BlackBerry デバイス 階層でプラス記号 スペースキーを押すか、トラックホ (+)またはマイナス イール、トラックボール、またはト 記号(-)を使用 ラックパッドをクリックします。 してオブジェクトを 展開または折りたた む。 画面をクリックします。 対策:ツリービューの実装 • • • ツリービューを作成するには TreeField クラスを使用します。 トラックボールまたはトラックパッド付き BlackBerry デバイスで、ユーザーが親ノードをクリック して複数の操作を実行できる場合は、コンテキストメニューを組み込みます。例えば、 サブフォルダと ファイルを含むフォルダをユーザーがクリックした場合、コンテキストメニューを表示して、フォルダ を展開するかファイルを表示するかを選択できるようにします。 ルートノードは、ツリー全体に対する操作をユーザーが実行する必要がある場合にのみ組み込み ます。それ以外の場合はルートノードは組み込みません。 ツリービューを表示するフィールドの作成 ツリービューを使用して、フォルダ構造などのオブジェクトを階層表示します。 TreeField にはノードを 格納できます。 最上位のノードはルートノードです。 ツリーのノードの下には子ノードを作成でき ます。 子ノードを持つノードを親ノードと呼びます。 1. 必要なクラスとインターフェイスをインポートします。 import import import import 100 net.rim.device.api.ui.component.TreeField; net.rim.device.api.ui.component.TreeFieldCallback; net.rim.device.api.ui.container.MainScreen; java.lang.String; 開発ガイド ツリービュー 2. TreeFieldCallback インターフェイスを実装します。 3. TreeField オブジェクトの TreeField.setExpanded() を呼び出して、フォルダを折りたたみ可能にする か指定します。TreeField オブジェクトを作成し、この TreeField オブジェクトに複数の子ノードを 作成します。フォルダを折りたたみ可能にするには、node4 をパラメータに使用して TreeField.setExpanded() を呼び出します。 String fieldOne = new String("Main folder"); ... TreeCallback myCallback = new TreeCallback(); TreeField myTree = new TreeField(myCallback, Field.FOCUSABLE); int node1 = myTree.addChildNode(0, fieldOne); int node2 = myTree.addChildNode(0, fieldTwo); int node3 = myTree.addChildNode(node2, fieldThree); int node4 = myTree.addChildNode(node3, fieldFour); ... int node10 = myTree.addChildNode(node1, fieldTen); myTree.setExpanded(node4, false); ... mainScreen.add(myTree); 4. ノードが変更された場合に TreeField を再描画するには、TreeFieldCallback インターフェイスを実 装するクラスを作成し、TreeFieldCallback.drawTreeItem メソッドを実装します。 TreeFieldCallback.drawTreeItem メソッドでは、 ツリーノードの各ノード位置で String を描画するた めに Cookie を使用します。TreeFieldCallback.drawTreeItem メソッドは Graphics.drawText() を呼び 出して String を描画します。 private class TreeCallback implements TreeFieldCallback { public void drawTreeItem(TreeField _tree, Graphics g, int node, int y, int width, int indent) { String text = (String)_tree.getCookie(node); g.drawText(text, indent, y); } } 101 開発ガイド メニュー項目 メニュー項目 8 メニューの作成 MainScreen クラスでは、BlackBerry® デバイスアプリケーションの標準コンポーネントを提供します。 これには、デフォルトメニューが含まれます。 1. 必要なクラスとインターフェイスをインポートします。 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する CreateMenuScreen クラスはカスタム画 面を示しています。 public class CreateMenu extends UiApplication { public static void main(String[] args) { CreateMenu theApp = new CreateMenu(); theApp.enterEventDispatcher(); } public CreateMenu() { pushScreen(new CreateMenuScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。画面コンストラクタ内 で setTitle() を呼び出して、画面のタイトルを指定します。add() を呼び出して画面にテキスト フィールドを追加します。addMenuItem() を呼び出して、 MainScreen で作成されるメニューにメニュー 項目を追加します。 class CreateMenuScreen extends MainScreen { public CreateMenuScreen() { setTitle("Create Menu Sample"); add(new RichTextField("Create a menu")); addMenuItem(_viewItem); } } 102 開発ガイド メニューの作成 4. MenuItem クラスを使用して、 メニュー項目を作成します。run() を上書きして、 ユーザーがメニュー項 目をクリックした場合に実行される操作を指定します。ユーザーがメニュー項目をクリックすると、 アプリケーションで Menu.run() が呼び出されます。 private MenuItem _viewItem = new MenuItem("More Info", 110, 10) { public void run() { Dialog.inform("Display more information"); } }; 5. close() を上書きして、ユーザーが[閉じる] メニュー項目をクリックした場合にダイアログボックスを 表示します。[閉じる]メニュー項目は、MainScreen で作成されるメニューにデフォルトで含まれてい ます。super.close() を呼び出して、 アプリケーションを閉じます。ユーザーがダイアログボックスを 閉じると、アプリケーションで MainScreen.close() が呼び出され、アプリケーションが閉じられます。 public void close() { Dialog.alert("Goodbye!"); super.close(); } コードサンプル:メニューの作成 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; public class CreateMenu extends UiApplication { public static void main(String[] args) { CreateMenu theApp = new CreateMenu(); theApp.enterEventDispatcher(); } public CreateMenu() { pushScreen(new CreateMenuScreen()); } } class CreateMenuScreen extends MainScreen { public CreateMenuScreen() { setTitle("Create Menu Sample"); add(new RichTextField("Create a menu")); addMenuItem(_viewItem); } private MenuItem _viewItem = new MenuItem("More Info", 110, 10) 103 対策:メニューの実装 開発ガイド { } public void run() { Dialog.inform("Display more information"); } }; public void close() { Dialog.alert("Goodbye!"); super.close(); } 対策:メニューの実装 • • • • • • • • • 常にフルメニューを提供します。 ユーザーがメニューキーを押してフルメニューを開き、ハイライトされたメニュー項目のアクション を開始できるようにします。また、ユーザーがメニューキーを押したままにすることで、アプリケー ションを切り替えるダイアログボックスを開けるようにします。 デフォルトメニュー項目には、ユーザーが選択する可能性の高い項目を組み込みます。 デフォルトメニュー項目およびその他の頻繁に使用するメニュー項目は、メニューの中央に配置します。 メニュー項目の順序が、他の BlackBerry® デバイスアプリケーションのメニュー項目の順序と一貫性 があることを確認します。 使用方法または機能が共通であるメニュー項目をグループ化し、可能な場合は、作成したグループを ユーザーにテストしてもらいます。 メニュー項目のグループ間にセパレーターを挿入します。 競合する操作のメニュー項目同士を近くに配置しないようにします。例えば、 [削除]メニュー項目の 近くに[開く]メニュー項目を配置しないようにします。 常に [アプリケーション切り替え]および [閉じる] メニュー項目を含めます。これらのメニュー項目は メニューの末尾に配置します。標準コンポーネントを使用する場合は、これらのメニュー項目は自動 的に組み込まれます。 ラベルのガイドライン • • • • • 104 ラベルの長さは最大 12 文字で、明瞭かつ簡潔にまとめます。ラベルが長過ぎると、テキストが切り 捨てられていることを示す省略記号(...)が表示されます。 ラベルには動詞を使用します。 ラベルではタイトルと同様のスタイルで大文字小文字を使用します。 ユーザーがメニュー項目をクリックした後に別の操作を実行する必要があることを示すには、メニュー 項目ラベルに省略記号を記述します。例えば、 ユーザーがカレンダーで [指定日に移動...]メニュー項 目をクリックした場合は、表示される画面で日付を指定する必要があります。 ラベルにはアスタリスク(*)などの記号は使用しないでください。 開発ガイド BlackBerry Device Software アプリケーションへのメニュー項目の追加 BlackBerry Device Software アプリケーションへのメニュー 項目の追加 net.rim.blackberry.api.menuitem パッケージ内の Menu Item API を使用して、BlackBerry® Device Software アプリケーションにメニュー項目を追加できます。 例えば、BlackBerry デバイスのアドレス 帳アプリケーションに「販売注文を表示」という名前のメニュー項目を追加して、ユーザーがこのメニュー 項目をクリックした場合に、CRM アプリケーションが開き、その連絡先の販売注文のリストが表示される ようにすることができます。 ApplicationMenuItemRepository クラスでは、メニュー項目を表示する BlackBerry Device Software アプ リケーションを指定する定数を提供します。 例えば、MENUITEM_MESSAGE_LIST 定数では、メッセージアプ リケーションにメニュー項目を表示することを指定します。 BlackBerry Device Software アプリケーションへのメニュー項目の追加 1. 必要なクラスとインターフェイスをインポートします。 import import import import net.rim.blackberry.api.menuitem.*; net.rim.blackberry.api.pdap.*; net.rim.device.api.ui.*; net.rim.device.api.ui.component.*; 2. ApplicationMenuItem 抽象クラスを拡張して、メニュー項目を作成します。ApplicationMenuItem() コ ンストラクタを整数で上書きして、メニュー内でのメニュー項目の位置を指定します。大きな数字を 指定するほど、メニュー項目がメニューの下部に配置されます。 public class SampleMenuItem extends ApplicationMenuItem { SampleMenuItem() { super(20); } } 3. toString() を実装して、メニュー項目のテキストを指定します。 public String toString() { return "Open the Contacts Demo application"; } 4. getInstance() を呼び出して、アプリケーションリポジトリを取得します。 ApplicationMenuItemRepository repository = ApplicationMenuItemRepository.getInstance(); 5. クラスのインスタンスを作成して、MenuItem クラスを拡張します。 105 メニューの表示方法の変更 開発ガイド ContactsDemoMenuItem contactsDemoMenuItem = new ContactsDemoMenuItem(); 6. ApplicationMenuItemRepository.addMenuItem() を呼び出して、メニュー項目を関連する BlackBerry® デ バイスアプリケーションリポジトリに追加します。 repository.addMenuItem(ApplicationMenuItemRepository MENUITEM_ADDRESSCARD_VIEW, contactsDemoMenuItem); 7. run() を実装して、メニュー項目の動作を指定します。以下のコードサンプルでは、ユーザーが新規メ ニュー項目をクリックし、Contact オブジェクトが存在する場合に、 ContactsDemo アプリケーションに よりイベントが受け取られ、ContactsDemo.enterEventDispatcher() が呼び出されます。 public Object run(Object context) { BlackBerryContact c = (BlackBerryContact)context; if ( c != null ) { new ContactsDemo().enterEventDispatcher(); } else { throw new IllegalStateException( "Context is null, expected a Contact instance"); } Dialog.alert("Viewing an email message in the email view"); return null; } メニューの表示方法の変更 net.rim.device.api.ui.component パッケージ内の Menu クラスを使用して、メニューの背景、境界、およ びフォントを変更できます。 例えば、BlackBerry® デバイスアプリケーションの他の部分と同じような 見た目と使用感になるようにメニューの表示方法を変更できます。 メニューの表示方法を変更すると、 その BlackBerry デバイスアプリケーションの表示方法が BlackBerry デバイスで設定されているテーマ より優先されます。 メニューの表示方法の変更 1. 必要なクラスとインターフェイスをインポートします。 import import import import import 106 net.rim.device.api.ui.*; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.decor.*; net.rim.device.api.system.*; 開発ガイド メニューの表示方法の変更 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する CreateCustomMenuScreen クラスはカスタ ム画面を示しています。 public class CreateCustomMenu extends UiApplication { public static void main(String[] args) { CreateCustomMenu theApp = new CreateCustomMenu(); theApp.enterEventDispatcher(); } public CreateCustomMenu() { pushScreen(new CreateCustomMenuScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。画面コンストラクタ内 で setTitle() を呼び出して、画面のタイトルを指定します。add() を呼び出して画面にテキスト フィールドを追加します。 class CreateCustomMenuScreen extends MainScreen { Background _menuBackground; Border _menuBorder; Font _menuFont; CreateCustomMenuScreen() { setTitle("Custom Menu Sample"); add(new RichTextField("Creating a custom menu")); } } 4. 画面のコンストラクタ内でメニュー表示を指定します。XYEdges オブジェクトを作成して、ボーダーの 余白をメニューの周囲に作成します。四隅が丸いボーダーを作成するには createRoundedBorder() を 呼び出します。メニューの背景色を透明にするには createSolidTransparentBackground() を呼び出し ます。 XYEdges thickPadding = new XYEdges(10, 10, 10, 10); _menuBorder = BorderFactory.createRoundedBorder(thickPadding, Border.STYLE_DOTTED); _menuBackground = BackgroundFactory.createSolidTransparentBackground(Color LIGHTSTEELBLUE, 50); 5. 画面のコンストラクタ内で FontFamily オブジェクトを使用して、メニューのフォントを指定します。 BlackBerry® デバイスからフォントを取得するには、forName() を呼び出します。フォントのスタイル およびサイズを指定するには、getFont() を呼び出します。 107 メニューの表示方法の変更 開発ガイド try { FontFamily family = FontFamily.forName("BBCasual"); _menuFont = family.getFont(Font.PLAIN, 30, Ui.UNITS_px); } catch(final ClassNotFoundException cnfe) { UiApplication.getUiApplication().invokeLater(new Runnable() { public void run() { Dialog.alert("FontFamily.forName() threw " + cnfe.toString()); } }); } 6. screen クラスで makeMenu() を上書きして、 メニュー表示を適用します。setBackground()、setBorder ()、 および setFont() を呼び出して、手順 4 と 5 で指定したメニュー表示を適用します。 protected void makeMenu(Menu menu, int context) { menu.setBorder(_menuBorder); menu.setBackground(_menuBackground); menu.setFont(_menuFont); super.makeMenu(menu, context); } コードサンプル:メニューの表示方法の変更 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; import net.rim.device.api.ui.decor.*; import net.rim.device.api.system.*; public class CreateCustomMenu extends UiApplication { public static void main(String[] args) { CreateCustomMenu theApp = new CreateCustomMenu(); theApp.enterEventDispatcher(); } public CreateCustomMenu() { pushScreen(new CreateCustomMenuScreen()); } } class CreateCustomMenuScreen extends MainScreen { Border _menuBorder; Background _menuBackground; 108 開発ガイド } メニュー項目へのアイコンの追加 Font _menuFont; CreateCustomMenuScreen() { setTitle("Custom Menu Sample"); add(new RichTextField("Creating a custom menu")); XYEdges thickPadding = new XYEdges(10, 10, 10, 10); _menuBorder = BorderFactory.createRoundedBorder(thickPadding, Border.STYLE_DOTTED); _menuBackground = BackgroundFactory.createSolidTransparentBackground(Color LIGHTSTEELBLUE, 50); try { FontFamily family = FontFamily.forName("BBCasual"); _menuFont = family.getFont(Font.PLAIN, 30, Ui.UNITS_px); } catch(final ClassNotFoundException cnfe) { UiApplication.getUiApplication().invokeLater(new Runnable() { public void run() { Dialog.alert("FontFamily.forName() threw " + cnfe.toString()); } }); } } protected void makeMenu(Menu menu, int context) { menu.setBorder(_menuBorder); menu.setBackground(_menuBackground); menu.setFont(_menuFont); super.makeMenu(menu, context); } メニュー項目へのアイコンの追加 net.rim.device.api.ui パッケージ内の MenuItem を使用して、メニュー項目にアイコンを追加できます。 BlackBerry® デバイスは、アイコンのサイズを計算し、メニューをレイアウトするときにメニュー項目の 左または右にアイコンの中心を合わせます。 アイコンは、テキストの方向に応じて、メニュー項目テ キストの左または右に整列されます(例えば、テキストの方向が左から右の場合、アイコンはテキストの 左に整列されます)。 必要に応じて、BlackBerry デバイスは、BlackBerry デバイスアプリケーションが 使用するデフォルトのフォントの高さに合わせてアイコンの高さと幅のサイズを変更します。 BlackBerry デバイスが画像のサイズを変更する場合、画像の縦横比は保持されます。 注: 事前定義されたメニュー項目(例えば、MenuItem.SAVE_CLOSE)にアイコンを追加することはできませ ん。 109 メニュー項目へのアイコンの追加 開発ガイド メニュー項目へのアイコンの追加 開始前の必要事項: プロジェクトにアイコンを追加します。 1. 必要なクラスとインターフェイスをインポートします。 import import import import import net.rim.device.api.ui.*; net.rim.device.api.ui.component.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.image.*; net.rim.device.api.system.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する AddIconScreen クラスはカスタム画面 を示しています。 public class AddIcon extends UiApplication { public static void main(String[] args) { AddIcon theApp = new AddIcon(); theApp.enterEventDispatcher(); } public AddIcon() { pushScreen(new AddIconScreen()); } } 3. MainScreen クラスを拡張してアプリケーションのカスタム画面を作成します。画面コンストラクタ内 で setTitle() を呼び出して、画面のタイトルを指定します。add() を呼び出して画面にテキスト フィールドを追加します。addMenuItem() を呼び出して、 MainScreen で作成されるメニューにメニュー 項目を追加します。 class AddIconScreen extends MainScreen { public AddIconScreen() { setTitle("Menu Icon Sample"); add(new RichTextField("Add an icon to a menu")); addMenuItem(_viewItem); } } 4. 画面コンストラクタ内で、Image クラスを使用して、メニュー項目に追加するアイコンを指定します。 createImage() を呼び出して、 メニュー項目のアイコンを作成します。setIcon() を呼び出して、メニュー 項目にアイコンを追加します。 110 開発ガイド メニュー項目へのアイコンの追加 Image menuIcon = ImageFactory.createImage(Bitmap.getBitmapResource("View.jpg")); _viewItem.setIcon(menuIcon); 5. screen クラス内で MenuItem クラスを使用して、メニュー項目を作成します。run() を上書きして、 ユーザーがメニュー項目をクリックした場合に実行される操作を指定します。 private MenuItem _viewItem = new MenuItem("More Info", 110, 10) { public void run() { Dialog.inform("Display more information"); } }; コードサンプル:メニュー項目へのアイコンの追加 import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; import net.rim.device.api.ui.image.*; import net.rim.device.api.system.*; public class AddIcon extends UiApplication { public static void main(String[] args) { AddIcon theApp = new AddIcon(); theApp.enterEventDispatcher(); } public AddIcon() { pushScreen(new AddIconScreen()); } } class AddIconScreen extends MainScreen { public AddIconScreen() { setTitle("Menu Icon Sample"); add(new RichTextField("Add an icon to a menu")); Image menuIcon = ImageFactory.createImage(Bitmap.getBitmapResource("View.jpg")); _viewItem.setIcon(menuIcon); addMenuItem(_viewItem); } private MenuItem _viewItem = new MenuItem("More Info", 110, 10) { public void run() { Dialog.inform("Display more information"); 111 メニュー項目へのアイコンの追加 開発ガイド } 112 }; } カスタムフォント 開発ガイド カスタムフォント 9 net.rim.device.api.ui パッケージの FontManager クラスは、TrueType フォントを BlackBerry® デバイス にインストールおよびアンインストールするために使用できる定数とメソッドを提供します。 TrueType フォントファイルの最大許容サイズは 60KB です。 フォントを利用できるのが、フォントをイ ンストールするアプリケーションなのか、BlackBerry デバイス上のすべてのアプリケーションなのかを 指定できます。 また、FontManager クラスでは、BlackBerry デバイスアプリケーションのデフォルトフォントを設定する メソッドも利用できます。 BlackBerry Java アプリケーションにおけるカスタムフォント のインストールと使用 1. 必要なクラスとインターフェイスをインポートします。 import import import import import net.rim.device.api.system.*; net.rim.device.api.ui.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.component.*; java.util.*; 2. UiApplication クラスを拡張してアプリケーションフレームワークを作成します。main() 内で、新しい クラスのインスタンスを作成し、enterEventDispatcher() を呼び出してアプリケーションがイベントを 受信できるようにします。アプリケーションコンストラクタ内で、pushScreen() を呼び出し、アプリ ケーションのカスタム画面を表示します。手順 3 で説明する FontLoadingDemoScreen クラスはカスタ ム画面を示しています。 public class FontLoadingDemo extends UiApplication { public static void main(String[] args) { FontLoadingDemo app = new FontLoadingDemo(); app.enterEventDispatcher(); } public FontLoadingDemo() { pushScreen(new FontLoadingDemoScreen()); } } 3. MainScreen クラスを拡張してカスタム画面を作成します。setTitle() を呼び出して、画面のタイトル セクションに表示されるテキストを設定します。新しい LabelField オブジェクトを作成します。こ のオブジェクトにカスタムフォントを適用します。 113 開発ガイド コードサンプル:BlackBerry Java アプリケーションにおけるカスタムフォントのインストールと使用 class FontLoadingDemoScreen extends MainScreen { public FontLoadingDemoScreen() { setTitle("Font Loading Demo"); LabelField helloWorld = new LabelField("Hello World"); } } 4. 画面コンストラクタ内で、FontManager.getInstance() メソッドを呼び出して FontManager オブジェクト への参照を取得し、次に load() メソッドを呼び出してフォントをインストールします。IF ステート メント内で load() 呼び出しをラップし、インストールが正常に実行されたかどうかを確認します。 フォントが正しくインストールされたかどうかを示すフラグが、load() メソッドにより返されます。 次のコードは、アプリケーションによってのみ使用できるフォントを指定します。 if (FontManager.getInstance().load("Myfont.ttf", "MyFont", FontManager.APPLICATION_FONT) == FontManager.SUCCESS) { } 5. 画面コンストラクタ内で、手順 5 で作成した IF ステートメントの try/catch ブロックで、先ほどイ ンストールしたフォントに Font オブジェクトを作成します。setFont() メソッドを呼び出して、手 順 5 で作成した LabelField にフォントを適用します。 try { FontFamily family = FontFamily.forName("MyFont"); Font myFont = family.getFont(Font.PLAIN, 50); helloWorld.setFont(myFont); } catch (ClassNotFoundException e) { System.out.println(e.getMessage()); } 6. 画面コンストラクタ内で add() を呼び出して、画面に LabelField を追加します。 add(helloWorld); コードサンプル:BlackBerry Java アプリケーションにおける カスタムフォントのインストールと使用 import import import import import public 114 net.rim.device.api.system.*; net.rim.device.api.ui.*; net.rim.device.api.ui.container.*; net.rim.device.api.ui.component.*; java.util.*; class FontLoadingDemo extends UiApplication 開発ガイド { コードサンプル:BlackBerry Java アプリケーションにおけるカスタムフォントのインストールと使用 public static void main(String[] args) { FontLoadingDemo app = new FontLoadingDemo(); app.enterEventDispatcher(); } public FontLoadingDemo() { pushScreen(new FontLoadingDemoScreen()); } } class FontLoadingDemoScreen extends MainScreen { public FontLoadingDemoScreen() { setTitle("Font Loading Demo"); LabelField helloWorld = new LabelField("Hello World"); if (FontManager.getInstance().load("Myfont.ttf", "MyFont", FontManager.APPLICATION_FONT) == FontManager.SUCCESS) { try { FontFamily typeface = FontFamily.forName("Charming"); Font myFont = typeface.getFont(Font.PLAIN, 50); helloWorld.setFont(myFont); } catch (ClassNotFoundException e) { System.out.println(e.getMessage()); } } add(helloWorld); } } 115 開発ガイド スペルチェック スペルチェック 10 net.rim.blackberry.api.spellcheckパッケージ内の項目を使用して、アプリケーションにスペルチェッカー 機能を追加できます。 SpellCheckEngineインターフェイスを使用すると、アプリケーションで UI フィール ドの値のスペルをチェックし、BlackBerry® デバイスのユーザーに、スペルを修正するオプションを表示 できます。 SpellCheckUI インターフェイスを使用すると、BlackBerry デバイスのユーザーが SpellCheckEngine の実装を操作することでスペルの問題を解決できる UI をアプリケーションで提供でき ます。 Spell Check API の使用方法に関する詳細については、BlackBerry® Java® Development Environment 4.3.1 以降および BlackBerry® Java® Plug-in for Eclipse® に付属する Spell Check のサンプルアプ リケーションを参照してください。 スペルチェック機能の追加 1. 次のクラスをインポートします。 • net.rim.blackberry.api.spellcheck.SpellCheckEngineFactory • java.lang.StringBuffer 2. 次のインターフェイスをインポートします。 • net.rim.blackberry.api.spellcheck.SpellCheckEngine • net.rim.blackberry.api.spellcheck.SpellCheckUI • net.rim.blackberry.api.spellcheck.SpellCheckUIListener 3. スペルチェックオブジェクト用の変数を作成します。 SpellCheckEngine _spellCheckEngine; SpellCheckUI _spellCheckUI; 4. createSpellCheckUI() を呼び出します。 _spellCheckUI = SpellCheckEngineFactory.createSpellCheckUI(); 5. スペルチェックイベントの発生をアプリケーションに通知するには、addSpellCheckUIListener() を呼 び出します。このとき、SpellCheckUIListener オブジェクトをパラメータとして使用します。 _spellCheckUI.addSpellCheckUIListener(new SpellCheckUIListener()); 6. アプリケーションに UI フィールドのスペルチェックを実行させ、BlackBerry デバイスユーザーにス ペルの修正候補を提示するには、SpellCheckEngine オブジェクトを取得して getSpellCheckEngine() を 呼び出します。 _spellCheckEngine = _spellCheckUI.getSpellCheckEngine(); 116 開発ガイド スペルチェックイベントのリスン 7. スペルに誤りのある単語の修正候補を使用するには、SpellCheckEngine.learnCorrection() を呼び出し ます。パラメータとして new StringBuffer(text)、new StringBuffer(correction) を使用します。ここで、 text はスペルに誤りのある単語を表し、 correction は修正候補の単語を表します。 _spellCheckEngine.learnCorrection(new StringBuffer(text), new StringBuffer (correction)); 8. フィールドに対してスペルチェック処理を実行するには、SpellCheckUI.spellCheck() を呼び出し ます。このとき、 field をパラメータとして使用します。 _spellCheckUI.spellCheck(field); 9. スペルに誤りのある単語を正しいスペルとして受け入れるには、SpellCheckEngine.learnWord() を呼び 出します。このとき、学習する単語をパラメータとして使用します。 _spellCheckEngine.learnWord(new StringBuffer(word)); スペルチェックイベントのリスン 1. 次のクラスをインポートします。 • java.lang.StringBuffer • net.rim.device.api.ui.UiApplication • net.rim.device.api.ui.Field 2. 次のインターフェイスをインポートします。 • net.rim.blackberry.api.spellcheck.SpellCheckUIListener • net.rim.blackberry.api.spellcheck.SpellCheckEngine 3. SpellCheckEngine が新しい単語を学習すると、SpellCheckUIListener.LEARNING_ACCEPT 定数を返すメソッ ドを作成します。 public int wordLearned(SpellCheckUI ui, StringBuffer word) { UiApplication.getUiApplication().invokeLater(new popUpRunner("Word learned")); return SpellCheckUIListener.LEARNING_ACCEPT; } 4. SpellCheckEngine が単語の修正を学習すると、SpellCheckUIListener.LEARNING_ACCEPT 定数を返すメソッ ドを作成します。 public int wordCorrectionLearned(SpellCheckUI ui, StringBuffer word, StringBuffer correction){ UiApplication.getUiApplication().invokeLater(new popUpRunner("Correction learned")); return SpellCheckUIListener.LEARNING_ACCEPT; } 5. SpellCheckEngine がスペルに誤りのある単語を見つけると、SpellCheckUIListener.ACTION_OPEN_UI 定数 を返すメソッドを作成します。 117 開発ガイド スペルチェックイベントのリスン public int misspelledWordFound(SpellCheckUI ui, Field field, int offset, int len){ UiApplication.getUiApplication().invokeLater(new popUpRunner("Misspelled word found")); return SpellCheckUIListener.ACTION_OPEN_UI; } 118 開発ガイド 関連リソース 関連リソース 11 BlackBerry® デバイスの UI およびナビゲーション開発の詳細については、 www.blackberry.com/go/ docs/developers にアクセスし、次のリソースを参照してください。 • • • • • • • • • • BlackBerry® Java® Development Environment の API リファレンス BlackBerry Java Application Fundamentals Guide(BlackBerry Java Application 基本ガイド) BlackBerry Java Application 開発ガイド BlackBerry Java Application Accessibility Development Guide(BlackBerry Java Application 表 示設定開発ガイド) BlackBerry Java Application Integration Development Guide (BlackBerry Java Application 統合 開発ガイド) BlackBerry Java Application Multimedia Development Guide(BlackBerry Java Application マル チメディア開発ガイド) BlackBerry Java Development Environment Transitioning to Touch Screen Development Technical Note(BlackBerry Java Development Environment タッチパネルへの移行 - 開発テクニカルノート) BlackBerry Java Development Environment Sample Application Overviews(BlackBerry Java Development Environment サンプルアプリケーションの概要) BlackBerry Developer Zone: www.blackberry.com/developers BlackBerry 開発者用ダウンロードサイト: www.blackberry.com/developers/downloads 119 開発ガイド 用語集 用語集 12 3D 3 次元 API Application Programming Interface(アプリケーションプログラミングインターフェイス) JVM Java® Virtual Machine(Java 仮想マシン) MIDP Mobile Information Device Profile(携帯端末向けに定義された Java 実行環境の仕様) 120 開発ガイド ご意見の提供 ご意見の提供 13 このドキュメントに関するご意見をお寄せいただく場合は、次のサイトにアクセスしてください: www.blackberry.com/docsfeedback 121 ドキュメント改訂履歴 開発ガイド ドキュメント改訂履歴 日付 説明 2010 年 4 月 6 日 次のトピックを追加: • • • • • • • • • • • • • • • • • • 14 UI コンポーネントの配置 オートコンプリートテキストフィールド ボタン チェックボックス ダイアログボックス ドロップダウンリスト BlackBerry デバイスの操作方法 キーボード ラベル リスト オプションボタン ピッカーダイアログボックス 進行状況インジケータ 検索フィールド スピンボックス テキストフィールド トラックボールまたはトラックパッド ツリービュー 次のコードサンプルを追加: • • • • • 122 コードサンプル:ブラウザフィールドの設定 コードサンプル:チェックボックスの作成 コードサンプル:ドロップダウンリストの作成 コードサンプル:オプションボタンの作成 コードサンプル:アプリケーションへのリソースからの HTML コンテンツの表示 ドキュメント改訂履歴 開発ガイド 日付 説明 • • • コードサンプル:ブラウザフィールドへの HTML コンテンツの 表示 コードサンプル:ブラウザフィールドへの Web ページの HTML コンテンツの表示 コードサンプル:ブラウザフィールドでの Web アドレスへの フォームデータの送信 次のトピックを変更: • • • • • • • チェックボックスの作成 日付フィールドの作成 ドロップダウンリストの作成 オプションボタンの作成 画面をすばやく 2 回タッチする操作への応答 画面の向きと方向の指定 スペルチェック 次のトピックを削除: • • • • • • • • • 2009 年 11 月 9 日 対策:サブメニューの実装 コードサンプル:サブメニューの作成 コードサンプル:画面上の絶対位置でのラベルの表示 レイアウトマネージャの作成 画面の作成 サブメニューの作成 画面上の絶対位置でのフィールドの表示 画面上の絶対位置でのラベルの表示 MainScreen を使用する場合の画面ナビゲーションの提供 次のトピックを追加: • • • • アイコン配列設定の作成 アイコン配列設定の作成 ファイルピッカーの作成 データソースおよびオートコンプリートテキストフィールドを 含むフィールドの使用 123 ドキュメント改訂履歴 開発ガイド 日付 説明 次のコードサンプルを追加: • • 2009 年 10 月 6 日 コードサンプル:アイコン配列設定の作成 コードサンプル:ファイルピッカーの作成 次のトピックを追加: • • • • • • • • 対策:サブメニューの実装 データセットからのオートコンプリートテキストフィールドの 作成 データソースからのオートコンプリートテキストフィールドの 作成 日付ピッカーの作成 スピンボックスの作成 画面移行の作成 カスタムフォント BlackBerry Java アプリケーションにおけるカスタムフォント のインストールと使用 次のコードサンプルを追加: • • • • • 2009 年 8 月 14 日 次のトピックを追加: • • • • • 124 コードサンプル:データセットからのオートコンプリート フィールドの作成 コードサンプル:データセットからのオートコンプリート フィールドの作成 コードサンプル:画面移行の作成 コードサンプル:スピンボックスの作成 コードサンプル:BlackBerry Java アプリケーションにおける カスタムフォントのインストールと使用 メニュー項目へのアイコンの追加 メニュー項目へのアイコンの追加 メニューの表示方法の変更 メニューの表示方法の変更 ブラウザフィールドの設定 ドキュメント改訂履歴 開発ガイド 日付 説明 • • • • • • ブラウザフィールドへの HTML コンテンツの表示 メニューの作成 サブメニューの作成 Web コンテンツを表示するフィールドの作成 画面上の絶対位置でのフィールドの表示 画面の上下に ButtonField および LabelField を一時的に表示 • • アプリケーションへのリソースからの HTML コンテンツの表示 ブラウザフィールドへの Web ページの HTML コンテンツの表示 • • • • 画面上の絶対位置でのラベルの表示 一時的に表示される一対のマネージャでのフィールドの表示 イベントインジェクション ブラウザフィールドの Web アドレスへのフォームデータの送信 次のコードサンプルを追加: • • • • • • • コードサンプル:メニュー項目へのアイコンの追加 コードサンプル:メニューの表示方法の変更 コードサンプル:日付ピッカーの作成 コードサンプル:メニューの作成 コードサンプル:サブメニューの作成 コードサンプル:画面の上下に ButtonField および LabelField を一時的に表示 コードサンプル:画面上の絶対位置でのラベルの表示 次のトピックを変更: • • BlackBerry Device Software アプリケーションへのメニュー項 目の追加 BlackBerry Device Software アプリケーションへのメニュー項 目の追加 125 ドキュメント改訂履歴 開発ガイド 日付 126 説明 • タッチパネルの描画領域のサイズが変更された場合の通知の受信 • • • • 加速度計データの取得 特定の間隔での加速度計データの取得 画面の向きと方向の指定 加速度計読み取り値のバッファへの格納 開発ガイド 商標などに関する情報 商標などに関する情報 15 ©2010 Research In Motion Limited. All rights reserved. BlackBerry®、RIM®、Research In Motion®、SureType®、SurePress™、および関連する商標、名称、およびロゴは、Research In Motion Limited の所有物であり、米国、 およびその他の国において登録または使用されています。 Eclipse は、Eclipse Foundation, Inc. の商標です。 Java は、Sun Microsystems, Inc. の商標 です。 TrueType は、Apple Inc. の商標です。 その他すべての商標は各社の所有物です。 本書は、参照用として本書で取り上げるすべての文書(提供される文書または www.blackberry.com/go/ docs で参照可能な文書)を含めて「現状のまま」または「参照可能な形で」提供されるか、またはアク セスすることができ、Research In Motion Limited およびその関連会社(「RIM」)はいかなる条件付け、 承認、表明、または保証もしないものとし、RIM は本書の誤記、技術的な誤りまたはその他の誤り、エ ラー、遺漏について何ら責任を負いません。 RIM の所有権、機密情報および/または企業秘密を保護するた め、本書では一部の RIM テクノロジの側面を一般化された用語で記述している場合があります。 RIM は、本書に含まれる情報を定期的に変更する権利を留保します。ただし、RIM には、本書への変更、更 新、拡張、または他の追加を適時ユーザーに提供する義務はないものとします。 本書は、第三者をソースとする情報、ハードウェアまたはソフトウェア、製品またはサービス(コンポー ネントや、著作権保護されたコンテンツなど)、および/または第三者の Web サイト(これらをまとめて 「サードパーティ製品およびサービス」という)への参照を含んでいる可能性があります。 RIM は、サー ドパーティ製品およびサービスの内容、正確性、著作権遵守、互換性、性能、信頼性、適法性、品格、リ ンク、他の側面などに限定することなく、サードパーティ製品およびサービスを一切管理することはな く、責任も負いません。 本書においてサードパーティ製品およびサービスを参照することは、RIM がサー ドパーティ製品およびサービスまたは第三者を保証することを意味するものではありません。 該当する司法管轄地域の適用法で明確に禁じられている場合を除き、本書で参照されているソフトウェ ア、ハードウェア、サービス、またはサードパーティ製品およびサービスについて、耐久性、特定の目的 または使用に対する適合、商品性、適性品質、権利侵害の不存在、品質満足度、権原、または制定法、慣 習法、取引過程、商慣習から生じる、本書またはその使用に関する、または性能または性能の不履行に 関する条件付け、承認、表明、保証などに限定することなく、明示的または黙示的に、いかなる条件 付け、承認、表明、または保証も除外されます。 ユーザーは、国や地域によって異なる他の権利を有する 場合もあります。 一部の司法管轄地域では、黙示的な保証および条件の除外事項または限定事項は禁止 されています。 法律で認められている範囲で、本書に関連する黙示的な保証または条件は、上記に定める ように除外できないが限定できる場合、ユーザーが本書または該当する対象物を初めて入手してから 90 日間に限定されます。 該当する司法管轄地域の適用法で認められている最大限の範囲で、本書またはその使用に関連して、また は本書で参照されているソフトウェア、ハードウェア、サービス、またはサードパーティ製品およびサー ビスの性能または性能の不履行に関連して、直接的、必然的、典型的、偶発的、間接的、特殊的、懲罰 的、または加重的損害、金銭的損失による損害(利益または収益の損失、予想される貯蓄の未達成、事業 の中断、ビジネス情報の消失、ビジネス機会の喪失、データの破損または消失、データの送受信の失敗、 RIM 製品またはサービスと併用したアプリケーションに関連する問題、ダウンタイムコスト、RIM 製品 またはサービスあるいはその一部の使用機会や通信サービスの使用機会の喪失、代替品コスト、保険料、 127 開発ガイド 商標などに関する情報 設備費、保守費、資本コストなど)に限定することなく、損害を予想できたかどうかを問わず、RIM が損 害の可能性について勧告を受けていた場合を含め、いかなる場合においても、RIM はいかなる損害の責任 も負わないものとします。 該当する司法管轄地域の適用法で認められている最大限の範囲で、契約、不法行為、またはユーザーに 対する過失責任または厳格責任について、RIM は他のいかなる義務、責務、または責任も負わないものと します。 本書の限定事項、除外事項、および免責事項は、(A)訴訟原因、請求、またはユーザーによる行為(契約 違反、過失、不法行為、厳格責任、その他の法理論など)の性質に関係なく、この契約の基本目的または 本書に記載されている救済策の根本的違反または不履行を免れるため、(B)RIM およびその関連会社、そ の後継者、譲受人、代理業者、納入業者(通信サービスプロバイダを含む)、認可された RIM 販売業者 (通信サービスプロバイダを含む)およびその取締役、従業員、および請負業者に適用されます。 上記に定める限定事項および除外事項に加えて、いかなる場合においても、RIM の取締役、従業員、代理 業者、販売業者、納入業者、請負業者または RIM の関連会社は、本書に起因または関連する責任を負わ ないものとします。 ユーザーは、サードパーティ製品およびサービスの加入、インストール、または使用前に、通信サービス プロバイダがサードパーティ製品およびサービスのすべての機能をサポートすることに同意していること を確認する責任を負います。 一部の通信事業者は、BlackBerry® Internet Service への加入によるイ ンターネット閲覧機能を提供しない場合があります。 利用、ローミング、サービスプラン、機能について は、通信事業者にお問い合わせください。 RIM 製品およびサービスにおけるサードパーティ製品および サービスのインストールまたは使用には、第三者の権利を侵害または妨害しないように、特許、商標、著 作権、または他のライセンスが必要になる場合があります。 ユーザーは、サードパーティ製品およびサー ビスを使用するかどうかを決定し、使用するためにサードパーティライセンスが必要かどうかを確認する 責任を負います。 必要な場合、ユーザーはライセンスを取得する責任を負います。 ユーザーは、必要な ライセンスをすべて取得するまで、サードパーティ製品およびサービスをインストールまたは使用しては なりません。 RIM 製品およびサービスで提供されるサードパーティ製品およびサービスは、ユーザーの 便宜のために「現状のまま」提供され、RIM は明示的にも黙示的にもいかなる条件付け、承認、表明、 または保証もしないものとし、RIM はそれに関連するいかなる責任も負わないものとします。 ユーザー によるサードパーティ製品およびサービスの使用は、ライセンスまたは RIM との他の契約で明示的に対 象になっている場合を除き、個別のライセンスおよび第三者との他の該当契約の条件に従うものとし、そ の制約を受けるものとします。 本書に記載されている特定の機能は、BlackBerry® Enterprise Server、BlackBerry® Desktop Software、BlackBerry® Device Software の最小限度のバージョンを必要とします。 RIM 製品またはサービスの使用条件は、個別のライセンスまたは RIM との他の該当契約に定められてい ます。 本書の内容は、本書以外に RIM 製品またはサービスの一部に対して RIM が提供した文書による 明示的な契約または保証を破棄するものではありません。 Research In Motion Limited 295 Phillip Street Waterloo, ON N2L 3W8 Canada 128 開発ガイド 商標などに関する情報 Research In Motion UK Limited Centrum House 36 Station Road Egham, Surrey TW20 9LF United Kingdom Published in Canada 129
© Copyright 2025 ExpyDoc