AxureRP8実際の戦闘マニュアルケース2（テキストボックス：境界線の色が変わります）
ケース2.テキストボックス：境界線の色が変わる
ケースソース：
Baiduログインインターフェース
ケース効果：
- カーソルがテキストボックスに入ると（図1-6）
ケースの説明：
ログインインターフェースには、ユーザー名とパスワードの入力ボックスがあります。フォーカスが入力ボックスに入ると、入力ボックスのフレームと内部アイコンが青になり、フォーカスが失われると灰色に戻ります。
コンポーネントの準備：
- ページ上：（図1-7）
名前が含まれています：
- 長方形（アカウント入力境界用）：Border01
- 長方形（パスワード入力ボーダー用）：Border02
思考分析：
- 入力ボックスのスタイルは2つの異なる状態で切り替えることができます。これは、インタラクティブスタイルで実現できます（操作ステップ1）。
- テキストボックスにフォーカスが移ると、選択したスタイルが表示されます（操作手順2〜3）。
- テキストボックスがフォーカスを失うと、選択されていないスタイルが表示されます（操作手順4〜5）。
操作手順：
1.コンポーネント「Border01」と「Border02」のインタラクティブスタイルを水色のボーダーとテキストに設定します。
2.アカウント入力テキストボックスを設定します[フォーカスが取得されたとき]、[選択]コンポーネント "Border01";
- イベント相互作用設定：（図1-8）
- ユースケースアクションの設定：（図1-9）
3.前のステップを参照して、パスワード入力テキストボックスを設定します[フォーカスを取得するとき]、[チェック]コンポーネント「Border02」;
4. [フォーカスが失われたとき]アカウント入力テキストボックスを設定し、[Border01]コンポーネントを[チェック解除]します。
- イベント相互作用設定：（図1-10）
- ユースケースアクションの設定：（図1-11）
5.前のステップを参照して、パスワード入力テキストボックスを設定します[フォーカスが失われたとき]、コンポーネント[Border02]の[チェックを外します]。
追加のメモ：
- この場合、「入力ボックス」とは、テキストボックスコンポーネントではなく、長方形の境界線とテキストボックスで構成されるコンテンツのグループを指します。
- 今回は「FontAwesome4.4.0」アイコンフォントコンポーネントライブラリを使用しているので、フォントファイルサポートをインストールし、Webフォントを設定する必要があります。（ケース1の補足説明を参照）
特記事項：このチュートリアルの関連資料は、ナビゲーションメニューの[Online Reading]ページからダウンロードしてください。
再版してください：Axureオリジナルチュートリアルネットワーク » AxureRP8実際の戦闘マニュアルケース2（テキストボックス：境界線の色の変更）