| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
前 |
次 |
この章では、データの入力、値の選択、テキストの編集およびファイルのロードに使用される入力コンポーネントについて説明します。
この章では、次の項目について説明します。
入力コンポーネントは、様々な形式のユーザー入力を受け入れます。最も一般的な形式はテキスト、数値、日付および選択リストで、フォーム内に表示され、フォームの送信時に送信されます。入力された値や選択内容は、検証および変換され、さらに処理されます。たとえば、File Explorerアプリケーションには、ユーザーによる新しいファイルの作成が可能なフォームが含まれます。図9-1に示すように、ユーザーは入力コンポーネントを使用して、名前やサイズの入力、権限の選択、キーワードおよび説明の追加を行います。
テキスト、数値、日付または色の入力に使用される標準の入力コンポーネントに加え、ADF Facesには、その他の機能を持つ入力タイプ・コンポーネントも用意されています。inputFileコンポーネントを使用すると、ユーザーはロードするファイルを参照できます。
richTextEditorコンポーネントには、異なるフォント、サイズ、行揃えおよびその他の編集機能を使用した書式設定可能な、多数の行にわたるリッチ・テキスト入力が用意されています。richTextEditorコンポーネントは、コマンド・コンポーネントとともに使用でき、特定のテキストをコンポーネントに挿入することもできます。挿入テキストは事前にフォーマットできます。また、エディタのツールバーに表示されるボタンをカスタマイズできます。
選択コンポーネントを使用すると、値を入力するかわりに、または値の入力に加えて、ユーザーが項目のリストから選択できるようになります。たとえば、selectOneChoiceコンポーネントを使用すると、ユーザーはドロップダウン・リストから入力内容を選択でき、selectOneRadioコンポーネントを使用すると、ラジオ・ボタンのグループから選択できるようになります。
リストの表示には、選択コンポーネントまたは値リスト(LOV)コンポーネントを使用できます。LOVコンポーネントは、選択リストが大きい場合に使用します。LOVコンポーネントは、ListOfValueModelクラスを使用したモデル駆動型で、APIを使用してプログラムで構成されます。選択リストは、ポップアップ・ウィンドウ内に表示され、問合せパネルが含まれていることもあります。選択リストは単に値の静的リストを表示します。LOVコンポーネントの使用の詳細は、第11章「値リスト・コンポーネントの使用方法」を参照してください。
selectItemコンポーネントは別の選択コンポーネント内で使用され、そのコンポーネントの選択可能な個々の項目を表します。たとえば、selectOneRadioコンポーネントでは、各ラジオ・ボタンにselectItemコンポーネントを使用します。ラジオ・ボタンの選択内容がコーヒー、紅茶、牛乳の場合、コーヒー、紅茶、牛乳のそれぞれにselectItemコンポーネントを使用します。
フォーム・コンポーネントには、その他のコンポーネント用のコンテナがあります。formコンポーネントは、埋め込まれた入力コンポーネントからの値を送信できるリージョンを表します。formコンポーネントをネストさせることはできません。ただし、subformコンポーネントを使用して、form内で個別にコンポーネント値を送信できるサブリージョンを定義することで、さらに柔軟性を高められます。resetButtonコンポーネントを使用すると、ユーザーは、formまたはsubform内の入力値を簡単に以前の状態にリセットできるようになります。
すべての入力および選択コンポーネントは、ValueChangeEventおよびAttributeChangeEventイベントを送信します。対応するイベントに応じて機能を提供するには、valueChangeListenerおよびattributeChangeListenerメソッドを作成します。
すべての入力コンポーネント、選択コンポーネント(selectItemを除く)およびリッチ・テキスト・エディタ・コンポーネントには、changed属性があり、この属性がtrueに設定されていると、valueフィールドの変更時に変更インジケータ・アイコンが表示されます。このインジケータを使用すると、ユーザーは、どの入力値が変更されたか、ページに複数のコンポーネントがある場合に、どのコンポーネントが便利かを簡単に確認できます。デフォルトで、変更インジケータは通常コンポーネントの左側に表示されます。市区町村が入力されて郵便番号が自動的に生成されるなど、別のフィールド値の変更によりフィールドの値が自動的に変更される場合は、郵便番号フィールドにも変更インジケータが表示されます。図9-2に、チェック・ボックスおよび入力コンポーネントに表示された変更済インジケータを示します。
入力コンポーネントの大半は、ラベルのみを表示する機能もあり、コンポーネントにマウスを置くまでは値を変更できると表示されません。ユーザーが値を変更すると、その新しい値は読取り専用として表示されます。図9-3に、アクセス時のみ編集できるように構成されているselectManyChoiceコンポーネントを示します。
入力コンポーネントにも、ツールチップ、エラーや検証のメッセージ、およびコンテキスト依存ヘルプを表示できます。詳細は、第17章「ヒント、メッセージおよびヘルプの表示」を参照してください。
すべての入力コンポーネントには、プロパティ値を設定または取得するのに使用可能なJavaScriptクライアントAPIがあります。詳細は、ADF Faces JavaScript APIのドキュメントを参照してください。
formは、その他のコンポーネントのコンテナとして機能するコンポーネントです。フォーム内で送信アクションが発生すると、変更された入力値が送信されます。たとえば、入力コンポーネントと選択コンポーネントで構成される入力フォーム、および送信コマンド・ボタンを作成し、すべてをform内に配置できます。ユーザーが複数の入力フィールドに値を入力して送信ボタンをクリックすると、それらの新しい入力値が送信されて処理されます。
JDeveloperでJSFページを作成すると、デフォルトで、ページにformコンポーネントが自動的に挿入されます。ページにコンポーネントを追加すると、formコンポーネント内に挿入されます。
|
ヒント: ページに |
例9-1に、2つの入力コンポーネント、およびクリックされると両方の入力値が送信されて処理される送信ボタンを示します。
例9-1 入力コンポーネントのコンテナとしてのADF Facesのform
<af:form>
<af:panelFormLayout>
<af:inputText value="#{myBean.firstName}"
label="#{First Name}"
</af:inputText>
<af:inputText value="#{myBean.lastName}"
label="#{Last Name}"
</af:inputText>
<f:facet name="footer">
<af:commandButton text="Submit"/>
</f:facet>
</af:panelFormLayout>
</af:form>
ページに使用できるformコンポーネントは1つのみであるため、入力値を送信できる個別のリージョンを作成するには、form内にsubformを使用します。リージョンにおいて、subform内の値は、subform内のコンポーネントが値の送信を行う場合にのみ検証および処理されます。また、subform内に別のsubformをネストさせて、値を送信できるネストしたリージョンを作成することもできます。subformの詳細は、4.5項「サブフォームを使用したページでの領域の作成」を参照してください。
例9-2に、それぞれに独自の入力コンポーネントと送信ボタンを含む2つのsubformがあるformを示します。送信ボタンをクリックすると、そのsubform内の入力値のみが送信されて処理されます。
例9-2 form内のADF Facesのsubform
<af:form>
<af:subform>
<af:panelFormLayout>
<af:inputText value="#{myBean.firstName}"
</af:inputText>
<af:inputText value="#{myBean.lastName}"
</af:inputText>
<f:facet name="footer">
<af:commandButton text="Submit"/>
</f:facet>
</af:panelFormLayout>
</af:subform>
<af:subform>
<af:panelFormLayout>
<af:inputText value="#{myBean.primaryPhone}"
</af:inputText>
<af:inputText value="#{myBean.cellPhone}"
</af:inputText>
<f:facet name="footer">
<af:commandButton text="Submit"/>
</f:facet>
</af:panelFormLayout>
</af:subform>
</af:form>
基本的な送信ボタンの他に、form内にその他のコマンド・コンポーネントを追加して、そのform内の任意のフィールドで機能させることができます。ADF Facesには、resetButtonコンポーネントという特殊なコマンド・コンポーネントがあり、これをクリックすると、form内のすべての入力および選択コンポーネントがリセットされます。つまり、値の編集が可能なすべてのコンポーネントが、現在のモデルの値で更新されます。resetButtonコンポーネントでは、検証や変換でエラーがなく、サーバーへの部分的または完全な送信が成功している以前の状態に入力コンポーネントがリセットされ、この点でHTMLのリセットと異なります。たとえば、ユーザーが値Aを入力して送信ボタンをクリックし、値をAからBに変更してresetButtonコンポーネントをクリックすると、値Aがリストアされます。
多くの場合、JDeveloperを使用してformコンポーネントを追加します。ただし、手動でのformの追加や、特定の属性値を使用したformの構成が必要な場合があります。
ページにformを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「フォーム」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開きます。ここでは、オプションで次の内容を設定できます。
defaultCommand: [Enter]キーが押され、form内にフォーカスがある場合に、アクションを起動する必要のあるコマンド・コンポーネントのID属性を指定します。
usesUpload: formでファイルのアップロードをサポートするかどうかを指定します。ファイルのアップロードの詳細は、9.9項「ファイルのアップロード機能の使用方法」を参照してください。
targetFrame: 新しいページを表示するかどうかを指定します。使用可能な値は、HTMLのターゲット属性の有効な値です。デフォルトは、_selfです。
ページのセクションで値を個別に送信できることが必要な場合は、formコンポーネント内にsubformコンポーネントを追加する必要があります。
ページにsubformを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、formコンポーネントの子として、ページに「サブ・フォーム」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタを使用して、次の設定を行います。
default: subformで値を送信済であると仮定するかどうかを指定します。デフォルト値falseに設定すると、その他のsubformコンポーネントが送信されていない場合にのみ、そのsubformコンポーネントは送信済とみなされます。trueに設定すると、そのsubformコンポーネントは値を送信済とみなされます。
|
ヒント:
|
default Command: [Enter]キーが押され、subform内にフォーカスがある場合に、アクションを起動する必要のあるコマンド・コンポーネントのID属性を指定します。
formまたはsubformに、resetButtonコンポーネントを追加できます。リセット・ボタンは、そのformまたはsubform内のコンポーネントでのみ機能します。
ページにリセット・ボタンを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「Reset Button」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタを使用して、次の設定を行います。
text: ボタンのテキスト・ラベルを指定します。
disabled: ボタンを無効にするかどうかを指定します。たとえば、ボタンを無効化する必要のある特定の状況を判断するEL式を入力できます。
ピッカー、スライダ、スピン・ボックスなど、入力コンポーネントには多くのバリエーションがありますが、inputTextコンポーネントは、値入力のための基本的な入力コンポーネントです。inputTextコンポーネントは、1行の入力フィールドとして定義することも、rows属性を1より大きい値に設定してテキスト領域として定義することもできます。ただし、複数行のテキスト入力を作成する場合は、9.8項「richTextEditorコンポーネントの使用方法」で説明されているように、richTextEditorコンポーネントの使用を検討します。
secret属性をtrueに設定することで、パスワードなどの入力値を非表示にできます。その他のADF Facesコンポーネントと同じように、inputTextコンポーネントではラベル、テキストおよびメッセージがサポートされています。このコンポーネントをラベルなしで表示する場合は、simple属性をtrueに設定します。図9-4に、1行のinputTextコンポーネントを示します。
rows属性を使用すると、inputTextコンポーネントに複数行のテキストを表示できます。rows属性を1より大きい数に設定し、simple属性をtrueに設定すると、dimensionsFrom属性を使用して、inputTextコンポーネントがそのコンテナに合うように拡大されるように構成できます。コンポーネントが拡大される方法の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。図9-6に、複数行のinputTextコンポーネントを示します。
複数のinputTextコンポーネントを追加して、入力フォームを作成できます。図9-5に、2つのinputTextコンポーネントを使用した入力フォームを示します。
コマンド・コンポーネントと連携して、inputTextコンポーネントに特定のテキストを挿入するinsertTextBehaviorタグも構成できます。入力するテキストには、簡単な文字列、またはその他のコンポーネントの値(selectOneChoiceコンポーネントで選択したリスト項目など)を指定できます。たとえば、図9-6は、ユーザーがすでにテキストを入力したinputTextコンポーネントを示しています。
この後、ユーザーがドロップダウン・リストから追加テキストを選択し、コマンド・ボタンをクリックすると、図9-7に示すように、inputTextコンポーネントにそのテキストが表示されます。
第8章「Webページ上のコンテンツの編成」で説明されている任意のレイアウト・コンポーネントに、inputTextコンポーネントを使用できます。
inputTextコンポーネントを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「入力テキスト」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いて次の設定を行います。
label: ラベルとして使用するテキストを指定するための値を入力します。
使用するテキストがリソース・バンドルに格納されている場合は、ドロップダウン・リストを使用して「テキスト・リソースの選択」を選択します。「テキスト・リソースの選択」ダイアログを使用して、既存のバンドル内の適切なテキストを検索するか、既存のバンドル内に新しいエントリを作成します。リソース・バンドルの使用方法の詳細は、第21章「ページの国際化およびローカライズ」を参照してください。
value: コンポーネントの値を指定します。値のELバインディングが、setメソッドではなくgetメソッドが指定されているBeanプロパティを指していて、それが値の編集が可能なコンポーネントの場合、コンポーネントは読取り専用モードでレンダリングされます。
「外観」セクションを開き、次の設定を行います。
columns: フィールドに入力可能な最大の文字数を入力し、テキスト・コントロールのサイズを指定します。
rows: 表示される行数を入力し、テキスト・コントロールの高さを指定します。デフォルト値は1で、1行の入力フィールドを生成します。行数は、ブラウザのデフォルトのフォント・サイズに基づいて見積られます。2以上に設定する場合は、wrap属性も設定する必要があります。
secret: 1行のテキスト・コントロールにのみ適用されるブール値を指定します。trueに設定されている場合、secret属性により、テキストの実際の値がユーザーには非表示になります。
wrap: 複数行のテキスト・コントロールで使用されるテキストの折返しタイプを指定します。この属性は、1行のコンポーネントでは無視されます。デフォルトでは属性がsoftに設定されており、複数行のテキストは視覚的には折り返されますが、送信される値に改行は含まれません。この属性をoffに設定すると折返しは無効にされ、複数行のテキストは水平にスクロールして表示されます。hardに設定すると、行の折返しに必要な改行がテキストの値に含まれます。
showRequired: フィールドが必須であることを視覚的に表示するかどうかを指定します。required属性をtrueに設定しても、視覚的な表示が行われることに注意してください。showRequired属性を使用するのは、別のフィールドの値が変更された場合にのみフィールドが必須になるときです。
changed: フィールドの値が変更された場合に、青丸を表示するかどうかを指定します。これをtrueに設定する場合は、changedDesc属性も設定する必要があります。
changedDesc: 変更されたアイコン上にマウスが置かれた場合に、ツールチップに表示するテキストを指定します。デフォルトで、テキストは「変更済」です。このテキストは、異なる値を指定することでオーバーライドできます。
accessKey: フィールドにアクセスするために押すキーを指定します。
labelAndAccessKey: ラベルとアクセス・キーを別々に指定するかわりに、2つを結合して、アクセス・キーがラベルの一部になるようにします。アクセス・キーとして使用する文字の前にアンパサンド(&)を付けます。
たとえば、フィールドのラベルが「Description」で、Dをアクセス・キーにする場合は、&Descriptionと入力します。
|
注意: 値はXMLのページ・ソースに格納されるため、アンパサンド(&)文字をエスケープする必要があります。そのため、ソース・ページでは、アンパサンドを意味する文字 |
simple: ラベルを表示しない場合にtrueに設定します。
Placeholder: 入力コンポーネントが空でフォーカスが設定されていない場合に、コンポーネントに表示されるテキストを指定します。コンポーネントにフォーカスが設定されるか、値が入力されると、プレースホルダ・テキストは非表示になります。
プレースホルダ・テキストは、ユーザーが入力コンポーネントに入力する必要のある内容を知らせる目的で使用されます。
「動作」セクションを開き、次の設定を行います。
required: 値が必要かどうかを指定します。trueに設定されている場合、値を入力する必要があることをユーザーに知らせるために視覚的に表示されます。値が入力されない場合、例外が発生し、コンポーネントの検証が失敗します。
readOnly: コントロールを、値の編集が可能なフィールドとして表示するか、出力スタイルのテキスト・コントロールとして表示するかを指定します。
autoSubmit: 値が変更されたらコンポーネントを自動的に送信するかどうかを指定します。autoSubmit属性の使用の詳細は、4.3項「最適化されたライフサイクルの使用」を参照してください。
autoTab: 現在のコンポーネントの最大長に達した場合に、フォーカスを次のタブ位置に自動的に移動するかどうかを指定します。
Usage: HTML5ブラウザでの入力コンポーネントのレンダリング方法を指定します。有効な値は、auto、textおよびsearchです。デフォルトはautoです。
使用方法のタイプがsearchの場合、入力コンポーネントはHTML5の検索入力タイプとしてレンダリングされます。一部のHTML5ブラウザでは、検索テキストの消去に使用できる「取消」アイコンが追加される場合があります。
maximumLength: テキスト・コントロールに入力できる1行当たりの最大文字数を指定します。これには、改行を表す文字も含まれます。0以下に設定されている場合、maximumLength属性は無視されます。Internet Explorerのようなブラウザでは、改行は2文字として扱われます。
converter: コンバータ・オブジェクトを指定します。詳細は、6.3項「変換の追加」を参照してください。
validator: EL式を使用して、バリデータ・メソッドへのメソッド参照を指定します。詳細は、6.5項「検証の追加」を参照してください。
「その他」セクションを開き、次の設定を行います。
dimensionsFrom: inputTextコンポーネントでジオメトリ管理をどのように処理するかを指定します。この属性には、次のいずれかを設定します。
auto: inputTextコンポーネントの親コンポーネントで子の拡大ができる場合は、rows属性が1より大きい数に設定されており、simple属性がtrueに設定されているかぎり、親コンポーネントに合せてinputTextコンポーネントが拡大されます。親コンポーネントで拡大できない場合は、inputTextコンポーネントがコンテンツからディメンションを取得します。
content: inputTextコンポーネントがコンポーネント・コンテンツからディメンションを取得します。これはデフォルト設定です。
parent: inputTextコンポーネントがinlineStyle属性からディメンションを取得します。inlineStyleに値が存在しない場合、サイズは親コンテナによって決定されます。
editable: コンポーネントを常に編集可能として表示するかどうかを指定します。そのようにする場合は、alwaysを選択します。ユーザーがマウスを置くまで値を読取り専用として表示する場合は、onAccessを選択します。値を祖先コンポーネントから継承する場合は、inheritを選択します。
|
注意:
|
insertTextBehaviorタグは、コマンド・コンポーネントと連携して、inputTextコンポーネントに特定のテキストを挿入します。入力するテキストには、簡単な文字列、またはその他のコンポーネントの値(selectOneChoiceコンポーネントで選択したリスト項目など)を指定できます。inputTextコンポーネントにテキストを挿入できるようにするには、テキストの挿入に使用されるコマンド・コンポーネントの子としてinsertTextBehaviorタグを追加します。
|
注意:
|
開始前
insertTextBehaviorタグを追加する前に、9.3.1項「inputTextコンポーネントの追加方法」の説明に従って、inputTextコンポーネントを作成する必要があります。clientComponent属性をtrueに設定します。
テキスト挿入動作を追加する手順:
テキストを挿入するためにユーザーがクリックするコマンド・コンポーネントを追加します。手順は、18.2.1項「コマンド・ボタンおよびコマンド・リンクの使用方法」を参照してください。
コンポーネント・パレットの「操作」パネルから、「テキストの挿入動作」をコマンド・コンポーネントの子としてドラッグ・アンド・ドロップします。
テキスト挿入動作ダイアログで、次の内容を入力します。
for: ドロップダウン矢印を使用して「編集」を選択し、テキストを挿入するinputTextコンポーネントに移動して選択します。
value: 挿入するテキストの値を入力します。静的テキストを挿入する場合は、そのテキストを入力します。ユーザーが別のコンポーネントの値(selectOneChoiceコンポーネントの値など)を挿入できるようにする場合は、その値に解決されるEL式を入力します。例9-3に、ドロップダウン・リストの値または静的テキストの値を挿入できるinputTextコンポーネントのページ・コードを示します。
例9-3 insertTextBehaviorタグの使用
<af:inputText clientComponent="true" id="idInputText" label="String value" value="#{demoInput.value}" rows="10" columns="60"/> <af:selectOneChoice id="targetChoice" autoSubmit="true" value="#{demoInput.choiceInsertText}" label="Select text to insert"> <af:selectItem label="Some Text." value="Some Text."/> <af:selectItem label="0123456789" value="0123456789"/> <af:selectItem label="~!@#$%^*" value="~!@#$%^*"/> <af:selectItem label="Two Lines" value="\\nLine 1\\nLine 2"/> </af:selectOneChoice> <af:commandButton text="Insert Selected Text" id="firstButton" partialTriggers="targetChoice"> <af:insertTextBehavior for="idInputText" value="#{demoInput.choiceInsertText}"/> </af:commandButton> <af:commandButton text="Insert Static Text"> <af:insertTextBehavior for="idInputText" value="Some Static Text."/> </commandButton>
デフォルトでは、コマンド・コンポーネントをクリックしてアクション・イベントがトリガーされるとテキストが挿入されます。ただし、プロパティ・インスペクタでinsertTextBehaviorコンポーネントのtriggerType属性のドロップダウン・メニューからイベントを選択することで、これを別のクライアント・イベントに変更できます。
スライダ・コンポーネントを使用すると、スライダ上の位置が値に対応している1つまたは2つのマーカーがあるスライダを作成できます。スライダの値が表示され、一方にはマイナス・アイコンが、もう一方にはプラス・アイコンがあります。ユーザーはマーカーを選択し、スライダ上を移動させて値を選択します。図9-8(水平レイアウト)および図9-9(垂直レイアウト)に示すように、inputNumberSliderコンポーネントにはマーカーが1つあり、ユーザーはスライダから値を1つ選択できます。
図9-10に示すように、inputRangeSliderコンポーネントにはマーカーが2つあり、ユーザーは範囲のエンド・ポイントを選択できます。
また、inputNumberSliderおよびinputRangeSliderコンポーネントを構成すると、図9-11に示すように再生/一時停止ボタンを追加し、スライダがコンポーネントの増分値の中をアニメーションで移動するようにできます。
図9-12に示すように、inputNumberSpinboxは、数値用の入力フィールド、および入力フィールドの現在の値を増減させるための上矢印キーと下矢印キーのセットを作成する入力コンポーネントです。
inputNumberSliderまたはinputRangeSliderコンポーネントを追加する際には、表示される数値の範囲と増分を決定できます。
inputNumberSliderまたはinputRangeSliderコンポーネントを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに入力数値スライダまたは範囲入力スライダをドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いて、次の属性を設定します(inputRangeSliderコンポーネントの場合は、「データ」セクションも開きます)。
label: コンポーネントのラベルを指定します。
minimum: 選択可能な最小値を指定します。この値は、スライダの開始値です。
maximum: 選択可能な最大値を指定します。この値は、スライダの終了値です。
minimumIncrement: 最小の増分値を指定します。これは、ユーザーがプラスまたはマイナスのアイコンをクリックすると適用される増分です。
majorIncrement: 大きい方の2つの目盛り間の距離を指定します。この値では、ラベル付きの値が表示されるようにします。たとえば、図9-10のinputRangeSliderコンポーネントのmajorIncrement値は5.0です。0未満の場合、大きい方の増分値は表示されません。
minorIncrement: 小さい方の2つの目盛り間の距離を指定します。0未満の場合、小さい方の増分値は表示されません。
value: コンポーネントの値を指定します。valueのELバインディングが、setメソッドではなくgetメソッドが指定されているBeanプロパティを指している場合、コンポーネントは読取り専用モードでレンダリングされます。
「外観」セクションを開き、「向き」を設定して、コンポーネントを水平または垂直レイアウトのどちらにするかを指定します。この項のその他の属性の詳細は、9.3.1項「inputTextコンポーネントの追加方法」を参照してください。
「その他」セクションを開き、AnimationIntervalをミリ秒単位の値に設定します。デフォルト値は0です。
値がゼロより大きい場合は、コンポーネントの下に再生ボタンが表示されます。クリックすると、スライダが増分値の中をアニメーションで移動し、増分のたびに指定時間(ミリ秒単位)停止します。アニメーションの再生中、再生ボタンは一時停止ボタンに変化します。このボタンを押すと、アニメーションは現在の増分値で停止します。
たとえば、図9-11のinputRangeSliderコンポーネントのanimationInterval値は999です。
inputNumberSpinboxコンポーネントを使用すると、ユーザーは一連の数値をスクロールして値を選択できるようになります。
inputNumberSpinboxコンポーネントを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「入力数値スピンボックス」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタの「データ」セクションを開き、次の設定を行います。
value: コンポーネントの値を指定します。valueのELバインディングが、setメソッドではなくgetメソッドが指定されているBeanプロパティを指している場合、コンポーネントは読取り専用モードでレンダリングされます。
minimum: 入力フィールドで許可される最小値を指定します。
maximum: 入力フィールドで許可される最大値を指定します。
stepSize: スピン・ボックスが入力フィールドの数値を増減する際の増分を指定します。
「外観」セクションを開き、属性を設定します。これらの属性設定の詳細は、9.3.1項「inputTextコンポーネントの追加方法」を参照してください。
ユーザーがマウスを置くまでスピンボックスの値を読取り専用として表示する場合は、「その他」セクションを開き、「編集可能」をonAccessに設定します。コンポーネントを常に編集可能として表示する場合は、alwaysを選択します。値を祖先コンポーネントから継承する場合は、inheritを選択します。
|
注意:
|
inputColorコンポーネントを使用すると、色のコードを入力するためのテキスト入力フィールドと、パレットから色を選択するためのボタンを作成できます。デフォルトの色のコード形式は16進の色の形式です。ただし、ColorConverterクラスを使用して書式設定をオーバーライドできます。
デフォルトで、inputColorコンポーネントにより、ユーザーがパレットから色を選択できるようにするchooseColorコンポーネントが開かれます。図9-13に、ポップアップ・ダイアログのchooseColorコンポーネントが含まれるinputColorコンポーネントを示します。
inputDateコンポーネントを使用すると、図9-14に示すように、日付を入力するためのテキスト入力フィールドと、ポップアップ・カレンダから日付を選択するためのボタンを作成できます。デフォルトの日付フォーマットは、現在のロケールに適切な省略の日付フォーマットです。たとえば、米語(ENU)のデフォルトの書式はmm/dd/yyです。ただし、この書式は日時コンバータを使用してオーバーライドできます(コンバータの使用方法の詳細は、6.3項「変換の追加」を参照してください)。
日時コンバータを追加して、日付と時間の両方を表示するように構成すると、ユーザーが時間を入力するための追加のコントロールのある日付ピッカーがモーダル・ダイアログとして表示されます。また、コンバータがタイムゾーンを表示するように構成されている場合、図9-15に示すように、ダイアログ内にタイムゾーン・ドロップダウン・リストが表示されます。
inputColorコンポーネントを使用すると、ユーザーによる入力テキスト・フィールドへの値の入力や、カラー・チューザからの色の選択が可能になります。
inputColorコンポーネントを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「入力色」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いて次の設定を行います。
label: コンポーネントのラベルを指定します。
compact: 図9-16に示すように、入力テキスト・フィールドを表示しない場合はtrueに設定します。
「データ」セクションを開き、次の属性を設定します。
value: コンポーネントの値を指定します。valueのELバインディングが、setメソッドではなくgetメソッドが指定されているBeanプロパティを指している場合、コンポーネントは読取り専用モードでレンダリングされます。
colorData: 標準のカラー・パレットに表示される色のリストを指定します。表示される色の数は、49(7色x7色)、64(8色x8色)または121(11色x11色)です。この属性に設定される数値により、width属性の有効な値が決定されます。たとえば、colorData属性を49に設定した場合、幅は7にする必要があります。数が幅に合っていない場合、リストの余分な色要素は無視され、欠落している色要素は色なしとして表示されます。色のリストは、クライアント側ではタイプTrColorの配列であることが必要です。
customColorData: カスタム定義の色のリストを指定します。色の数は7、8、11のいずれかです。色のリストは、クライアント側ではタイプTrColorの配列であることが必要です。サーバー側では、java.awt.Colorオブジェクトのリストであるか、16進の色の文字列であることが必要です。
defaultColor: #000000など、16進の色のコードを使用してデフォルトの色を指定します。
「外観」セクションを開き、次の属性を設定します。
width: セルにおける標準のパレットの幅を指定します。有効な値は7、8および11で、colorDataおよびcustomColorData属性の値に対応します。
customVisible: 「カスタム・カラー」ボタンおよびカスタム・カラー行を表示するかどうかを指定します。trueに設定すると、「カスタム・カラー」ボタンおよびカスタム・カラー行がレンダリングされます。
defaultVisible: 「デフォルト」ボタンを表示するかどうかを指定します。trueに設定すると、「デフォルト」ボタンがレンダリングされます。「デフォルト」ボタンを使用すると、ユーザーはdefaultColor属性の値として、簡単に色のセットを選択できるようになります。
lastUsedVisible: 「最終使用」ボタンを表示するかどうかを指定します。trueに設定すると、「最終使用」ボタンがレンダリングされ、ユーザーは前回使用した色を選択できるようになります。
Placeholder: 入力コンポーネントが空でフォーカスが設定されていない場合に、コンポーネントに表示されるテキストを指定します。コンポーネントにフォーカスが設定されるか、値が入力されると、プレースホルダ・テキストは非表示になります。
プレースホルダ・テキストは、ユーザーが入力コンポーネントに入力する必要のある内容を知らせる目的で使用されます。
「動作」セクションを開き、次の属性を設定します。
chooseId: 色の値の選択に使用できるchooseColorコンポーネントのIDを指定します。設定しない場合、inputColorコンポーネントには、chooseColorコンポーネントが使用された独自のデフォルトのポップアップ・ダイアログが使用されます。
Usage: HTML5ブラウザでの入力コンポーネントのレンダリング方法を指定します。有効な値は、auto、textおよびsearchです。デフォルトはautoです。
使用方法のタイプがsearchの場合、入力コンポーネントはHTML5の検索入力タイプとしてレンダリングされます。一部のHTML5ブラウザでは、検索テキストの消去に使用できる「取消」アイコンが追加される場合があります。
ユーザーがマウスを置くまでコンポーネントの値を読取り専用として表示する場合は、「その他」セクションを開き、「編集可能」をonAccessに設定します。コンポーネントを常に編集可能として表示する場合は、alwaysを選択します。値を祖先コンポーネントから継承する場合は、inheritを選択します。
|
注意:
|
inputDateコンポーネントを使用すると、ユーザーは日付の入力または選択を実行できます。
inputDateコンポーネントを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「入力日」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタの「共通」セクションで、次の設定を行います。
label: コンポーネントのラベルを指定します。
value: コンポーネントの値を指定します。valueのELバインディングが、setメソッドではなくgetメソッドが指定されているBeanプロパティを指している場合、コンポーネントは読取り専用モードでレンダリングされます。
「データ」セクションを開き、次の属性を設定します。
minValue: 日付値に許可される最小値を指定します。タグで固定値に設定されている場合、この値はISO 8601の日付として解析されます。ISO 8601の日付は、yyyy-MM-dd(2002-02-15など)の形式です。この他すべての使用方法では、java.util.Dateオブジェクトが必要です。
maxValue: 日付値に許可される最大値を指定します。タグで固定値に設定されている場合、この値はISO 8601の日付として解析されます。ISO 8601の日付は、yyyy-MM-dd(2002-02-15など)の形式です。この他すべての使用方法では、java.util.Dateオブジェクトが必要です。
disableDays: org.apache.myfaces.trinidad.model.DateListProviderインタフェースの実装へのバインディングを指定します。getDateListメソッドによって、無効に指定される個々のjava.util.Dateオブジェクトのリストが生成されます。日付は、指定されたベース・カレンダのコンテキストに存在する必要があります。
|
パフォーマンスのヒント: このバインディングには、定期的なラウンドトリップが必要です。特定の曜日(土曜日および日曜日など)のみを無効にする場合は、 |
disableDaysOfWeek: 各週に無効の状態でレンダリングする必要のある曜日を空白で区切ったリストで指定します。リストには、sun、mon、tue、wed、thu、fri、satの1つ以上の略語を含める必要があります。デフォルトでは、すべての曜日が有効です。
disableMonths: 各年に無効の状態でレンダリングする必要のある月を空白で区切ったリストで指定します。リストには、jan、feb、mar、apr、may、jun、jul、aug、sep、oct、nov、decの1つ以上の略語を含める必要があります。デフォルトでは、すべての月が有効です。
「動作」セクションを開き、次の属性を設定します。
ChooseId: 日付値の選択に使用できるchooseDateコンポーネントのidを指定します。設定しない場合、inputDateコンポーネントには、chooseDateコンポーネントが使用された独自のポップアップ・ダイアログが使用されます。
Usage: HTML5ブラウザでの入力コンポーネントのレンダリング方法を指定します。有効な値は、auto、textおよびsearchです。デフォルトはautoです。
使用方法のタイプがsearchの場合、入力コンポーネントはHTML5の検索入力タイプとしてレンダリングされます。一部のHTML5ブラウザでは、検索テキストの消去に使用できる「取消」アイコンが追加される場合があります。
「外観」セクションを開き、次の設定を行います。
Editable: ユーザーがマウスを値の上に移動するまでコンポーネントの値を読取り専用にする場合は、onAccessに設定します。コンポーネントを常に編集可能として表示する場合は、alwaysを選択します。値を祖先コンポーネントから継承する場合は、inheritを選択します。
|
注意:
|
Placeholder: 入力コンポーネントが空でフォーカスが設定されていない場合に、コンポーネントに表示されるテキストを指定します。コンポーネントにフォーカスが設定されるか、値が入力されると、プレースホルダ・テキストは非表示になります。
プレースホルダ・テキストは、ユーザーが入力コンポーネントに入力する必要のある内容を知らせる目的で使用されます。
タイム・ソーンのプレースホルダzをコンバータのパターンに含めるなど、関連するコンバータがタイム・ゾーンのドロップダウン・リストを表示するように構成されている場合、inputDateコンポーネントはデフォルトでタイム・ゾーンのドロップダウン・リストを表示します。エンド・ユーザーが変更できるのは、このリストを使用したタイム・ゾーンのみです。このリストは、一般的なタイム・ゾーンを表示するように構成されます。
ただし、inputDateコンポーネントの外部でタイム・ゾーンのリストを表示する必要が生じる場合もあります。たとえば、「アプリケーション・プリファレンス」ページで、アプリケーションのすべてのinputDatesを表示するのに使用されるタイム・ゾーンをユーザーが選択できるselectOneChoiceコンポーネントを使用するとします。バッキングBeanでは、タイム・ゾーンのIDとjava.util.TimeZoneオブジェクト間の変換が処理されます。アプリケーションのinputDateインスタンスのコンバータでは、タイム・ゾーンをそのタイム・ゾーンのオブジェクトにバインドします。
このリストには、DateTimeUtilsクラスのAPIまたはコンポーネントのEL式のいずれかを使用してアクセスできます。
DateTimeUtilsクラスのメソッドは次のとおりです。
getCommonTimeZoneSelectItems (): 一般的に使用されるタイム・ゾーンのリストを返します。
getCommonTimeZoneSelectItems (String timeZoneId): 一般的に使用されるタイム・ゾーンのリストを返します(リストの一部の場合は、指定のタイム・ゾーンを含む)。
ELを使用してリストにアクセスするには、次の式のいずれかを使用します。
af:getCommonTimeZoneSelectItems
次に例を示します。
<f:selectItems value="#{af:getCommonTimeZoneSelectItems()}" id="tzones2" />
af:getMergedTimeZoneSelectItems (id)
次に例を示します。
<f:selectItems value="#{af:getMergedTimeZoneSelectItems(demoInput.preferredTimeZoneId)}" id="tzones" />
inputDateコンポーネントとそのタイム・ゾーンの選択リストを同じページで使用している場合は、inputDateのタイム・ゾーンのローカル値をクリアし、その選択の値バインディングが優先されるようにします。それ以外の場合は、NULL意外のローカル値が優先され、inputDateコンポーネントは更新されない場合があります。例9-4では、inputDateコンポーネントへのバインディング属性を使用してバッキングBeanに参照が含まれます。ユーザーが新しいタイム・ゾーンを選択すると、IDが設定され、inputDateのコンバータがコードで取得されてタイム・ゾーンがクリアされます。ページがレンダリングされると、コンバータのタイム・ゾーンのローカル値がNULLになるため、#{demoInput.preferredTimeZone}が評価され、更新されたタイム・ゾーンが取得されます。
例9-4 inputDateとタイム・ゾーンの選択リストの併用
<af:selectOneChoice label="Select a new timezone"
value="#{demoInput.preferredTimeZoneId}" autoSubmit="true">
<f:selectItems
value="#{af:getMergedTimeZoneSelectItems(demoInput.preferredTimeZoneId)}"
id="tzones" />
</af:selectOneChoice>
<af:inputDate label="First inputDate with timezone bound" id="bound1"
partialTriggers="tzpick" binding="#{demoInput.boundDate1}">
<af:convertDateTime type="both" timeStyle="full"
timeZone="#{demoInput.preferredTimeZone}"/>
</af:inputDate>
DemoInputBean.java
public void setPreferredTimeZoneId(String _preferredTimeZoneId)
{
TimeZone tz = TimeZone.getTimeZone(_preferredTimeZoneId);
setPreferredTimeZone (tz);
this._preferredTimeZoneId = _preferredTimeZoneId;
}
public void setPreferredTimeZone(TimeZone _preferredTimeZone)
{
this._preferredTimeZone = _preferredTimeZone;
DateTimeConverter conv1 = (DateTimeConverter)
_boundDate1.getConverter();
conv1.setTimeZone(null);
}
選択コンポーネントを使用すると、ユーザーは項目のリストやグループから、単一または複数の値を選択できるようになります。ADF Facesには、単純なブール・ラジオ・ボタンから、ユーザーが複数の項目を選択できるリスト・ボックスまで、様々な選択コンポーネントがあります。選択コンポーネント内の項目のリストは、複数のselectItemコンポーネントで構成されています。
selectItemコンポーネントを除くすべての選択コンポーネントは、ValueChangeEventおよびAttributeChangeEventイベントを送信します。selectItemコンポーネントは、AttributeChangeEventイベントのみを送信します。これらのイベント用に、valueChangeListenerハンドラまたはattributeChangeListenerハンドラ(あるいはその両方)を作成する必要があります。
selectBooleanCheckboxコンポーネント値は、オブジェクトではなく常にブールに設定する必要があります。図9-17に示すように、選択された状態と未選択の状態が切り替えられます。
selectBooleanRadioコンポーネントではブール選択が表示され、常にブールに設定する必要があります。selectBooleanCheckboxコンポーネントとは異なり、selectBooleanRadioコンポーネントでは、同じgroup属性を使用して、selectBooleanRadioコンポーネントをグループ化できます。
たとえば、ユーザーの年齢が10～18才かどうかを決定するブールと、19～100才かどうかを決定するブールがあるとします。図9-18に示すように、2つのselectBooleanRadioコンポーネントはページの任意の場所に配置できるため、横に並べて配置する必要はありません。同じgroup値を共有しているかぎり、ページ内での物理的な配置にかかわらず、選択は相互に排他的になります。
|
ヒント: 各 |
ユーザーが１つの値を選択できるラジオ・ボタンのリストを作成するには、図9-19に示すように、selectOneRadioコンポーネントを使用します。
ユーザーが1つ以上の値を選択できるチェック・ボックスのリストを作成するには、図9-20に示すように、selectManyCheckboxコンポーネントを使用します。
selectOneListboxコンポーネントを使用すると、図9-21に示すように、ユーザーは影付きのボックスに表示された項目のリストから値を1つ選択できるコンポーネントを作成できます。
selectManyListboxコンポーネントは、ユーザーが項目リストから多くの値を選択できるコンポーネントを作成するものです。図9-22に示すように、このコンポーネントには、チェック・ボックスのリストの先頭に表示される「すべて」チェック・ボックスが含まれます。
selectOneChoiceコンポーネントを使用すると、ユーザーが項目のドロップダウン・リストから値を1つ選択できるメニュー形式のコンポーネントを作成できます。selectOneChoiceコンポーネントは、ドロップダウン・リストの項目が比較的少ない場合に使用します。
|
ベスト・プラクティス: 多数の項目が必要な場合は、かわりに |
図9-23に、selectOneChoiceコンポーネントを示します。
図9-24に示すように、selectOneChoiceコンポーネントは、コンパクト・モードで表示されるように構成できます。コンパクト・モードでは、入力フィールドが小さなアイコンに置き換えられます。
ユーザーがアイコンをクリックすると、図9-25に示されているようにドロップダウン・リストが表示されます。
selectManyChoiceコンポーネントを使用すると、ユーザーが項目のドロップダウン・リストから複数の値を選択できるメニュー形式のドロップダウン・コンポーネントを作成できます。このコンポーネントは、選択項目のリストの先頭に表示される「すべて」選択項目を含めるように構成できます。図9-26に示すように、選択肢の数が15より多い場合は、スクロールバーが表示されます。
デフォルトでは、ページがレンダリングされる際にselectManyChoiceコンポーネントが構築されると、すべてのselectItem子コンポーネントが構築されます。ただし、リスト項目のアクセス方法が遅いと、パフォーマンスが妨害される場合があります。このような遅延は、ユーザーが項目を選択して、後でアクセスした際に変更しない可能性がある場合に特に問題になります。たとえば、ページに表示する内容をフィルタするのにselectManyChoiceコンポーネントを使用し、selectItem子コンポーネントの値にWebサービスからアクセスするとします。また、ページにアクセスするたびに、ユーザーがその選択を変更しない可能性があるとします。デフォルトでは、ページがレンダリングされるたびに、ユーザーが実際にそれらを表示する必要があるかに関係なく、すべてのselectItemsを構築する必要があります。かわりに、selectManyChoiceコンポーネントのcontentDelivery属性をimmediate(デフォルト)からlazyに変更できます。lazy設定では、ユーザーがドロップダウンをクリックした場合にのみselectItemコンポーネントが構築されます。
immediateおよびlazyの両方で、ユーザーが選択した際に、選択したselectItemコンポーネントの値がフィールドに表示されます。ただし、コンテンツの遅延配信が使用されると、後にアクセスした際に、選択した値がselectItemコンポーネント(これらのコンポーネントの構築が必要)ではなく、lazySelectedLabel属性から取得されます。通常、この属性は、選択した項目を表すStringsの配列を返すメソッドにバインドされます。selectItemコンポーネントは、ユーザーがドロップダウンを使用してそれらを表示または変更するまで構築されません。
selectManyChoiceコンポーネントのlazy配信メソッドの使用には制限があります。selectManyChoiceコンポーネントのコンテンツ配信および制限の詳細は、9.6.2項「SelectManyChoiceコンポーネントのcontentDelivery属性について」を参照してください。
次のコンポーネントの場合、コントロールの上にラベルを表示させるには、これらをpanelFormLayoutコンポーネント内に配置します。
selectOneChoice
selectOneRadio
selectOneListbox
selectManyChoice
selectManyCheckbox
selectManyListbox
次のコンポーネントでは、セキュリティ上の理由から、属性disabled、immediate、readOnly、required、requireMessageDetailおよびvalueをクライアント上のJavaScriptから設定することはできません(詳細は、3.7.1項「クライアントでのプロパティ値の設定方法」を参照してください)。
selectOneChoice
selectOneRadio
selectOneListbox
selectBooleanRadio
selectBooleanCheckbox
selectManyChoice
selectManyCheckbox
selectManyListbox
選択コンポーネントの追加手順は、どのコンポーネントでも同じです。まず、選択コンポーネントを追加して属性を構成します。次に、リスト内の個々の項目用に任意の数のselectItemコンポーネントを追加して構成します。
選択コンポーネントを使用する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに選択コンポーネントをドラッグ・アンド・ドロップします。
selectBooleanCheckboxおよびselectBooleanRadioコンポーネント以外のすべての選択コンポーネントで、マネージドBeanの値にバインドするか、静的リストを作成するかを選択するダイアログが開きます。ダイアログの2番目のページで、次のプロパティを設定できます。
label: リストのラベルを入力します。
requiredMessageDetail: ユーザーが選択を行わない場合に表示するメッセージを入力します。メッセージの詳細は、17.3項「検証および変換用のヒントとエラー・メッセージの表示」を参照してください。
validator: マネージドBeanの検証メソッドに解決されるEL式を入力します(詳細は、第6章「入力の検証および変換」を参照してください)。
value: コンポーネントの値を指定します。valueのELバインディングが、setメソッドではなくgetメソッドが指定されているBeanプロパティを指している場合、コンポーネントは読取り専用モードでレンダリングされます。
|
注意:
|
valueChangeListener: 値変更イベントを処理するマネージドBeanのリスナーに解決されるEL式を入力します。
プロパティ・インスペクタの「外観」セクションを開き、表9-1に説明されている属性を設定します。ここで説明するのは、選択コンポーネントに固有の属性のみであることに注意してください。多くの属性は、テキスト入力コンポーネントと同じです。詳細は、9.3.1項「inputTextコンポーネントの追加方法」を参照してください。
表9-1 選択コンポーネントの外観属性
| コンポーネント | 属性 |
|---|---|
|
|
layout: |
|
|
size: リストに表示する項目の数に設定します。リスト内の項目数が |
|
|
selectAllVisible: |
|
|
mode: |
|
|
unselectedLabel: |
プロパティ・インスペクタの「動作」セクションを開き、表9-2に説明されている属性を設定します。ここで説明するのは、選択コンポーネントに固有の属性のみであることに注意してください。多くの属性は、テキスト入力コンポーネントと同じです。詳細は、9.3.1項「inputTextコンポーネントの追加方法」を参照してください。
表9-2 選択コンポーネントの動作属性
| コンポーネント | 属性 |
|---|---|
|
ブール選択コンポーネントを除くすべて |
valuePassThru: クライアントに値をパススルーするかどうかを指定します。 選択コンポーネントがADFモデル・バインディングを使用している場合、この値は無視されます。 |
|
|
group: 同じ |
ユーザーがマウスを置くまでselectOneChoiceまたはselectManyChoiceコンポーネントの値を読取り専用として表示する場合は、「その他」セクションを開き、「編集可能」をonAccessに設定します。コンポーネントを常に編集可能として表示する場合は、alwaysを選択します。値を祖先コンポーネントから継承する場合は、inheritを選択します。
|
注意:
|
ページがレンダリングされるたびにselectManyChoiceのselectItem子コンポーネントを構築しない場合は、次のようにします。
選択した項目のラベルを格納し、これらのラベルを文字列の配列としても返すことができるロジックを作成します。
「その他」セクションを開き、contentDeliveryをlazyに設定します。
選択した項目の配列を返すメソッドにLazySelectedLabelをバインドします。
コンテンツの遅延配信の使用には制限があることに注意してください。selectManyChoiceコンポーネントのコンテンツ配信の詳細は、9.6.2項「SelectManyChoiceコンポーネントのcontentDelivery属性について」を参照してください。
ブール・コンポーネントの場合は、ブール・コンポーネントの子として、任意の数のselectItemコンポーネントをドラッグ・アンド・ドロップします。これらはリストの項目を表します(その他の選択コンポーネントの場合は、手順2のダイアログにより自動的に追加されます)。
selectItemコンポーネントが選択された状態で、プロパティ・インスペクタの「共通」セクションを開き、設定されていない場合はvalue属性に値を入力します。これが送信される値です。
「外観」セクションを開き、設定されていない場合はlabel属性の値を入力します。これがリストに表示されるテキストです。
項目が無効化された状態でリストに表示されるようにする場合は、「動作」セクションを開いて、「無効」をtrueに設定します。
selectManyChoiceコンポーネントのcontentDelivery属性がimmediate(デフォルト)に設定されている場合は、次のようになります。
ページへの最初のアクセス:
ページがレンダリングされると、selectManyChoiceおよびすべてのselectItemコンポーネントが構築されます。項目が多い場合や、selectItemコンポーネントの値にWebサービスなどからアクセスすると、これによりパフォーマンスの問題が発生する場合があります。
selectManyChoiceコンポーネントによってレンダリングされると、まだ選択されていないため、フィールドには何も表示されません。
ユーザーがドロップダウンをクリックすると、すべての項目が表示されます。
ユーザーが項目を選択すると、選択したselectItemコンポーネントの対応するラベルがフィールドに表示されます。
ページが送信されると、値がモデルにポストバックされます。
以降のアクセス: ページがレンダリングされると、selectManyChoiceおよびすべてのselectItemコンポーネントが構築されます。選択したselectItemコンポーネントのラベルがフィールドに表示されます。これにより、ページに最初にアクセスした場合と同じパフォーマンスの問題が発生します。
selectManyChoiceコンポーネントのcontentDelivery属性がlazyに設定されている場合は、次のようになります。
ページへの最初のアクセス:
ページがレンダリングされると、selectManyChoiceが構築されますが、selectItemコンポーネントは構築されません。
selectManyChoiceコンポーネントによってレンダリングされると、まだ選択されていないため、フィールドには何も表示されません。
ユーザーがドロップダウンをクリックすると、selectItemコンポーネントが構築されます。これが発生している間、ユーザーにはビジー・スピナーが表示されます。コンポーネントが構築されると、すべての項目が表示されます。
ユーザーが項目を選択すると、選択したselectItemコンポーネントの対応するラベルがフィールドに表示されます。
ページが送信されると、値がモデルにポストバックされます。
以降のアクセス:
ページが最初にレンダリングされるときは、selectManyChoiceコンポーネントのみが構築されます。この時点では、選択した項目の表示にlazySelectedLabel属性の値が使用されます。
ユーザーがドロップダウンをクリックすると、selectItemコンポーネントが構築されます。これが発生している間、ユーザーにはビジー・スピナーが表示されます。コンポーネントが構築されると、すべての項目が表示されます。
selectItemコンポーネントが構築されると、selectManyChoiceコンポーネントの動作は、contentDelivery属性がimmediateに設定された場合のようになり、selectItemコンポーネントの実際の値を使用して、選択した項目を表示します。
selectManyChoiceコンポーネントでコンテンツの遅延配信を使用する場合の制限事項は、次のとおりです。
selectManyChoiceの値をリクエスト・スコープに格納することはできません。ポストバック時に、値属性は、クライアントから返されるものをデコードするのではなく。モデルからアクセスされます。値がリクエスト・スコープに保存されている場合、値は空になります。値はリクエスト・スコープに保存しないでください。
ポストバック時に、コンバータはコールされません。ポストバックにコンバータを利用している場合は、コンテンツの遅延配信を使用しないでください。
画面がレンダリング・モードの場合、contentDelivery属性は無視されます。selectItemコンポーネントは、ページがレンダリングされると常に構築されます。
selectManyShuttleおよびselectOrderShuttleコンポーネントを使用すると、ユーザーが一方のリスト・ボックスからもう一方のリスト・ボックスに項目を移動するための2つのリスト・ボックスおよびボタンを作成できます。ユーザーは、先行(Available values)リスト・ボックスと後続(Selected values)リスト・ボックスの間を移動させる単一の項目または複数の項目を選択できます。どちらのコンポーネントでも、コントロールの上にラベルを表示する場合には、それらをpanelFormLayoutコンポーネント内に配置します。
図9-27に、selectManyShuttleコンポーネントを示します。
図9-28に示すように、selectOrdershuttleコンポーネントには、ユーザーが「選択した値」リスト・ボックスの値を並べ替えるために使用する上矢印および下矢印ボタンを追加で含めることができます。リストを並べ替えると、ValueChangeEventイベントが送信されます。readOnly属性をtrueに設定した場合は、並べ替える値が、後続リスト(「選択した値」)に表示される選択済の値であることを確認します。
その他のselectManyコンポーネント同様、これらのコンポーネントのvalue属性は、含まれているselectItemコンポーネントのうちの1つの値に対応する値のリストまたは配列であることが必要です。selectItemsの1つの値がリストまたは配列にある場合、その項目は後続リストに表示されます。selectManyListboxコンポーネントはselectManyShuttleに直接変換できるため、valueによってリスト・ボックスに選択される項目が決まるのではなく、selectOrderShuttleコンポーネントの後続リストにどの項目が表示されるかが影響を受けます。
その他の選択コンポーネント同様、項目のリストまたは配列は、selectManyShuttleまたはselectOrderShuttleコンポーネントにネストしているselectItemコンポーネントで構成されています。例9-5に、ユーザーがファイル・タイプのリストから上位5つのファイル・タイプを選択できるselectOrderShuttleコンポーネントのサンプルを示します。
例9-5 selectOrderShuttleのJSFページ・コード
<af:selectOrderShuttle value="#{helpBean.topFive}"
leadingHeader="#{explorerBundle['help.availableFileTypes']}"
trailingHeader="#{explorerBundle['help.top5']}"
simple="true">
<af:selectItem label="XLS"/>
<af:selectItem label="DOC"/>
<af:selectItem label="PPT"/>
<af:selectItem label="PDF"/>
<af:selectItem label="Java"/>
<af:selectItem label="JWS"/>
<af:selectItem label="TXT"/>
<af:selectItem label="HTML"/>
<af:selectItem label="XML"/>
<af:selectItem label="JS"/>
<af:selectItem label="PNG"/>
<af:selectItem label="BMP"/>
<af:selectItem label="GIF"/>
<af:selectItem label="CSS"/>
<af:selectItem label="JPR"/>
<af:selectItem label="JSPX"/>
<f:validator validatorId="shuttle-validator"/>
</af:selectOrderShuttle>
selectOrdershuttleコンポーネントのreorderOnly属性をtrueに設定すると、移動機能が無効にされ、「選択した値」リスト・ボックスのみが表示されます。図9-29に示すように、ユーザーは、リスト・ボックス内の項目の並替えのみを実行できます。
シャトル・コンポーネントの追加手順は、どちらのコンポーネントも同じです。まず、選択コンポーネントを追加して属性を構成します。次に、リスト内の個々の項目用に任意の数のselectItemコンポーネントを追加して構成します。
selectManyShuttleまたはselectOrderShuttleコンポーネントを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページにシャトルを複数選択またはオーダー・シャトルを選択をドラッグ・アンド・ドロップします。
マネージドBeanの値にバインドするか、静的リストを作成するかを選択するダイアログが表示されます。ダイアログの2番目のページでは、次の設定が可能です。
label: リストのラベルを入力します。
requiredMessageDetail: ユーザーが選択を行わない場合に表示するメッセージを入力します。メッセージの詳細は、17.3項「検証および変換用のヒントとエラー・メッセージの表示」を参照してください。
size: リストの表示サイズ(項目の数)を指定します。指定するサイズは、10から20項目の範囲である必要があります。属性が設定されていない場合、または10より小さい値の場合、サイズはデフォルトまたは最小値の10になります。指定された属性値が20項目より多い場合、サイズは最大値の20になります。
validator: マネージドBeanの検証メソッドに解決されるEL式を入力します。
value: コンポーネントの値を指定します。valueのELバインディングが、setメソッドではなくgetメソッドが指定されているBeanプロパティを指している場合、コンポーネントは読取り専用モードでレンダリングされます。
valueChangeListener: 値変更イベントを処理するマネージドBeanのリスナーに解決されるEL式を入力します。
プロパティ・インスペクタで「外観」セクションを開き、次の設定を行います。
layout: コンポーネントを水平または垂直レイアウトのどちらにするかを指定します。デフォルトはhorizontalで、先行および後続のリスト・ボックスは相互に隣り合って表示されます。verticalに設定すると、先行のリスト・ボックスは後続のリスト・ボックスの上に表示されます。
leadingHeader: シャトル・コンポーネントの先行リストのヘッダー・テキストを指定します。
leadingDescShown: trueに設定すると、先行のリスト・ボックスの下部に選択された項目の説明が表示されます。
trailingHeader: シャトル・コンポーネントの後続リストのヘッダーを指定します。
trailingDescShown: trueに設定すると、後続のリスト・ボックスの下部に選択された項目の説明が表示されます。
「動作」セクションを開き、オプションで次の属性を設定します。
valuePassThru: クライアントに値をパススルーするかどうかを指定します。valuePassThruがfalseの場合、この値およびオプションの値は、索引に変換されてからクライアントに送信されます。そのため、valuePassThruがfalseの場合、値またはオプション、あるいはその両方としてカスタム・オブジェクトを使用するときに、独自のコンバータを記述する必要はありません。クライアント側での実際の値を知る必要がある場合は、valuePassThruをtrueに設定できます。これにより、カスタム・コンバータが使用可能な場合は、カスタム・コンバータを使用して、クライアントに値が渡されます。カスタム・コンバータは、カスタム・オブジェクトを使用する場合に必要です。デフォルトはfalseです。
reorderOnly(selectOrderShuttleコンポーネントのみ): シャトル・コンポーネントを並替え専用モードにするかどうかを指定します(ユーザーは値リストの順序を変更できますが、追加や削除はできません)。
構造ウィンドウでselectItemコンポーネントの1つを選択し、プロパティ・インスペクタで必要な属性を設定します。
|
ヒント: 先行または後続のリスト・ボックスに説明を表示することを選択した場合は、各 |
項目選択のイベントに対応して処理を実行するJavaScriptコードを作成することで、ユーザーが一方のリストからもう一方のリストに項目を移動する前に、選択されたそれぞれの項目に関する情報をユーザーに提供できます。たとえば、コードで項目に関する追加の情報を取得し、ユーザーが項目を移動するかどうかの選択を支援するポップアップとして表示できます。図9-30に、selectManyShuttleコンポーネントを示します(ユーザーはMeyersを選択しており、ポップアップでこの選択に関する追加の情報が提供されています)。
この機能は、selectManyShuttleまたはselectOrderShuttleコンポーネントにクライアント・リスナーを追加し、このイベントを処理するJavaScriptメソッドを作成して実装します。JavaScriptコードは、ユーザーがリストから項目を選択すると実行されます。イベントのクライアント・リスナーの使用方法の詳細は、3.2項「クライアント・イベントのリスニング」を参照してください。
選択イベントを処理するシャトル・コンポーネントにクライアント・リスナーを追加する方法:
コンポーネント・パレットの「操作」パネルから、「クライアント・リスナー」をシャトル・コンポーネントの子としてドラッグ・アンド・ドロップします。
「クライアント・リスナーの挿入」ダイアログで、「メソッド」フィールドに関数名(次の手順でこの関数を実装します)を入力し、タイプ・ドロップダウンから「propertyChange」を選択します。
たとえば、関数としてshowDetailsを入力した場合、JDeveloperにより、例9-6に太字で示されたコードが入力されます。
例9-6 選択を登録するためのclientListenerの使用
<af:selectManyShuttle value="#{demoInput.manyListValue1}"
valuePassThru="true" ...>
<af:clientListener type="propertyChange" method="showDetails"/>
<af:selectItem label="coffee" value="bean" />
...
</af:selectManyShuttle>
このコードにより、showDetails関数は、プロパティ値が変更されるたびにコールされます。
JavaScriptで、前の手順で入力された関数を実装します。この関数により、次の操作が実行されます。
イベントのソースを取得して、シャトル・コンポーネントを取得します。
クライアントJavaScript APIコールを使用して、選択した項目の情報を取得します。
例9-7では、AdfShuttleUtils.getLastSelectionChangeをコールして、最後に選択された項目の値が取得されています。
例9-7 選択の処理に使用されるJavaScriptメソッドshowDetailsのサンプル
function showDetails(event)
{
if(AdfRichSelectManyShuttle.SELECTION == event.getPropertyName())
{
var shuttleComponent = event.getSource();
var lastChangedValue = AdfShuttleUtils.getLastSelectionChange(shuttleComponent, event.getOldValue());
var side = AdfShuttleUtils.getSide(shuttleComponent, lastChangedValue);
if(AdfShuttleUtils.isSelected(shuttleComponent, lastChangedValue))
{
//do something...
}
else
{
//do something else
}
if(AdfShuttleUtils.isLeading(shuttleComponent, lastChangedValue))
{
//queue a custom event (see serverListener) to call a java method on the server
}
}
}
richTextEditorコンポーネントは、書式設定されたテキストを使用できる入力フィールドを提供します。ラベル、テキストおよびメッセージもサポートされています。ユーザーは、フォント名、サイズ、スタイルの変更、順序付けられたリストの作成、およびテキストの両端の調整を実行でき、その他の様々な機能も使用できます。richTextEditorコンポーネントは、HTMLソース・ファイルの編集にも使用できます。2つのコマンド・ボタンを使用して、標準の書式設定されたテキストの編集とHTMLソース・ファイルの編集を相互に切り替えられます。図9-31に、標準のリッチ・テキスト編集モードのリッチ・テキスト・エディタ・コンポーネントを示します。
図9-32に、ソース・コード編集モードのエディタを示します。
次にサポートされているその他の機能を示します。
フォント・タイプ
フォント・サイズ
リンク付け/リンク解除
スタイルのクリア
元に戻す/やり直し
太字/イタリック/下線
下付き/上付き
調整(左、中央、右、均等)
順序付けられたリスト/順序付けられていないリスト
インデント
文字色/背景色
リッチ・テキスト編集モード/ソース・コード編集モード
リッチ・テキスト・エディタの値(入力されたテキスト)は、整形式XHTMLフラグメントです。値の書式設定を可能にするために、ブラウザ固有の要件で値の一部が変更される場合があります。また、セキュリティ上の理由から、スクリプト関連タグや属性などの一部の機能が削除されます。このコンポーネントにより、ユーザーによる最小限の変更のみが記録されるという保証はありません。エディタでXHTMLドキュメントを編集しているため、次の要素が変更される可能性があります。
意味のない空白
要素の最小化
要素タイプ
属性の順序
文字エンティティの使用
エディタでサポートされているのは、次の例外を除いて4つのHTMLタグのみです。
script、noscript
frame、frameset、noframes
フォーム関連要素(input、select、optgroup、option、textarea、form、button、label、isindex)
ドキュメント関連要素(html、head、body、meta、title、base、link)
richTextEditorコンポーネントでは、コンテンツを取得するタグ(applet、iframe、object、imgおよびaなど)もサポートされています。ブラウザで許可されているのは同じドメインのコンテンツとの対話のみであるため、iframeタグの場合は、コンテンツがページのその他の部分と対話できないようにする必要があります。ただし、ページのこの部分はアプリケーションの管理外です。
richTextEditorコンポーネントではpxやemなどのフォント単位はサポートされていませんが、HTML仕様に説明されているように1から7のフォント・サイズはサポートされています。埋込みタグや未知のタグ(<foo>など)はサポートされていません。
クライアント側では、richTextEditorコンポーネントで、getValueおよびsetValueメソッドがサポートされていません。クライアント上のコンポーネントの値が、サーバー上の値と同一であるという保証はありません。そのため、richTextEditorでは、クライアント側のコンバータおよびバリデータがサポートされていません。それでも、サーバー側のコンバータおよびバリデータは機能します。
リッチ・テキスト・エディタでは、ValueChangeEventおよびAttributeChangeEventイベントが送信されます。必要に応じて、これらのイベント用にvalueChangeListenerおよびattributeChangeListenerハンドラを作成します。
コマンド・コンポーネントと連携して、richTextEditorコンポーネントに特定のテキストを挿入するrichTextEditorInsertBehaviorタグも構成できます。入力するテキストには、簡単な文字列、またはマネージドBeanなどに保持されている事前フォーマット済テキストを指定できます。
デフォルトでは、図9-33に示すように、フォントのサイズや太さ、テキストの文字位置、表示モードなどのテキストの多くの要素をrichTextEditorコンポーネントのツールバーで変更できます。
図9-34に、カスタマイズされているツールバーを示します。ツールバー・ボタンのほとんどが削除されており、カスタム・ツールバー・ボタンのあるツールバーとメニューが追加されています。
richTextEditorコンポーネントを追加すると、テキストを特定の場所に挿入し、ツールバーもカスタマイズできるように構成できます。詳細は、9.8.2項「richTextEditorコンポーネントへのテキストの挿入機能の追加方法」および9.8.3項「ツールバーのカスタマイズ方法」を参照してください。
richTextEditorコンポーネントを追加する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「リッチ・テキスト・エディタ」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタの「共通」セクションを開き、value属性を設定します。
「外観」セクションを開き、次の設定を行います。
rows: 表示される文字の概数で編集ウィンドウの高さを指定します。
columns: 表示される文字の概数で編集ウィンドウの幅を指定します。
label: コンポーネントのラベルを指定します。
「動作」セクションを開き、次の設定を行います。
editMode: WYSIWYGまたはソース・モードを使用してエディタを表示するかどうかを選択します。
contentDelivery: コンポーネントが最初にレンダリングされる際に、エディタ内のデータをフェッチするかどうかを指定します。contentDelivery属性の値がimmediateの場合、レンダリングされる際に、データがフェッチされてコンポーネントに表示されます。値がlazyに設定されている場合は、データがフェッチされて後続のリクエスト中にクライアントに送信されます。詳細は、10.1.1項「コンテンツの配信」を参照してください。
|
ヒント:
|
richTextEditorコンポーネントにテキストを挿入できるようにするには、テキストの挿入に使用されるコマンド・コンポーネントの子としてrichTextEditorInsertBehaviorタグを追加します。
開始前に
9.3.1項「inputTextコンポーネントの追加方法」の説明に従って、richTextEditorコンポーネントを作成する必要があります。clientComponent属性をtrueに設定します。
テキスト挿入動作を追加する手順:
テキストを挿入するためにユーザーがクリックするコマンド・コンポーネントを追加します。手順は、18.2.1項「コマンド・ボタンおよびコマンド・リンクの使用方法」を参照してください。
コンポーネント・パレットの「操作」パネルから、「リッチ・テキスト・エディタの挿入動作」をコマンド・コンポーネントの子としてドラッグ・アンド・ドロップします。
リッチ・テキスト・エディタの挿入動作ダイアログで、次の内容を入力します。
for: ドロップダウン矢印を使用して「編集」を選択し、テキストを挿入するrichTextEditorコンポーネントに移動して選択します。
value: 挿入するテキストの値を入力します。静的テキストを挿入する場合は、そのテキストを入力します。ユーザーが別のコンポーネントの値(selectOneChoiceコンポーネントの値など)を挿入できるようにする場合は、その値に解決されるEL式を入力します。ユーザーに事前フォーマット済テキストを入力させる場合は、そのテキストに解決されるEL式を入力します。たとえば、例9-8は、demoInputマネージドBeanの属性の値としての事前フォーマット済テキストを示しています。
例9-8 マネージドBeanの事前フォーマット済テキスト
private static final String _RICH_INSERT_VALUE =
"<p align=\"center\" style=\"border: 1px solid gray;
margin: 5px; padding: 5px;\">" +
"<font size=\"4\"><span style=\"font-family: Comic Sans MS,
Comic Sans,cursive;\">Store Hours</span></font><br/>\n" +
"<font size=\"1\">Monday through Friday 'til 8:00 pm</font><br/>\n" +
"<font size=\"1\">Saturday & Sunday 'til 5:00 pm</font>" +
"</p>";
例9-9に、テキストがrichTextEditorInsertBehaviorタグからどのように参照されるかを示します。
例9-9 richTextEditorInsertBehaviorタグの使用
<af:richTextEditor id="idRichTextEditor" label="Rich text value" value="#{demoInput.richValue2}"/> . . . </af:richTextEditor> <af:commandButton text="Insert Template Text"> <af:richTextEditorInsertBehavior for="idRichTextEditor" value="#{demoInput.richInsertValue}"/> </af:commandButton>
デフォルトでは、コマンド・コンポーネントをクリックしてアクション・イベントがトリガーされるとテキストが挿入されます。ただし、triggerType属性のドロップダウン・メニューからイベントを選択することで、これを別のクライアント・イベントに変更できます。
作成するカスタム・ファセットに、追加するツールバーおよびツールバー・ボタンを配置します。次に、含まれている項目の表示方法および表示場所を決定するキーワードとともに、ツールバーの属性からファセットを参照します。
ツールバーをカスタマイズする手順:
コンポーネント・パレットのJSFページで、「コア」パネルから、追加するツールバーの各セクションのファセットをドラッグ・アンド・ドロップします。たとえば、図9-34に示されているカスタム・ボタンを追加するには、2つの<f:facet>タグを追加します。各ファセットには、ページに対する一意な名前を付けてください。
|
ヒント: ADF Facesの今後のリリースと競合が生じないようにするには、すべてのファセット名を |
コンポーネント・パレットの「ADF Faces」ページの「共通コンポーネント」パネルから、「ツールバー」を各ファセットにドラッグ・アンド・ドロップして、ツールバー・ボタンおよびその他のコンポーネントを追加し、必要に応じて構成します。ツールバーとツールバー・ボタンの詳細は、ツールバーの使用方法に関する項を参照してください。
richTextEditorコンポーネントを選択し、プロパティ・インスペクタの「その他」セクションで、toolboxLayout属性のドロップダウン・アイコンをクリックし、「編集」を選択して「プロパティの編集: ToolboxLayout」ダイアログを開きます。この属性の値は、カスタム・ファセット名のリストに、カスタム・ファセット内のコンテンツを表示する順序で設定する必要があります。これらのファセットのみでなく、次のキーワードを使用して、デフォルトのツールバーのすべてまたは一部を含めることもできます。
all: デフォルトのツールバーのすべてのツールバー・ボタンおよびテキストです。allを入力すると、カスタム意外のボタンのキーボードは無視されます。
font: フォント選択およびフォント・サイズのボタンです。
history: 元に戻すおよび繰り返しのボタンです。
mode: リッチ・テキスト・モードおよびソース・コード・モードのボタンです。
color: 前景および背景色のボタンです。
formatAll: 太字、イタリック、下線、上付き文字、下付き文字および取消し線のボタンです。formatAllを指定すると、formatCommonおよびformatUncommonは無視されます。
formatCommon: 太字、イタリックおよび下線のボタンです。
formatUncommon: 上付き文字、下付き文字および取消し線のボタンです。
justify: 左端揃え、中央端揃え、右端揃えおよび両端揃えのボタンです。
list: 箇条書きおよび番号付きリストのボタンです。
indent: インデント解除およびインデントのボタンです。
link: リンクの追加および削除のボタンです。
たとえば、customToolbar1およびcustomToolbar2という名前の2つのファセットを作成し、デフォルトのツールバー全体をカスタム・ツールバーの間に表示させる場合は、次のリストを入力します。
customToolbar1
all
customToolbar2
ツールバーのレイアウトは、次のキーワードを使用して決定することもできます。
newline: 新しい行の次の名前付きファセット(またはtoolboxLayout属性のリストの次のキーワード)にツールバーを配置します。たとえば、customToolbar2ファセットのツールバーを新しい行に表示させる場合、次のリストを入力します。
customToolbar1
all
newline
customToolbar2
かわりに、フォント、色および共通の書式設定のボタン以外のデフォルトのツールバーを使用せずに、これらのボタンを新しい行に表示させたい場合は、次のリストを入力します。
customToolbar1
customToolbar2
newline
font
color
formatCommon
stretch: 使用可能なすべての領域を埋めるために拡大されるspacerコンポーネントを追加して、次の名前付きファセット(またはデフォルトのツールバーの次のキーワード)がツールバーに右揃えで表示されるようにします。
inputFileコンポーネントを使用すると、ユーザーにファイルのアップロード機能および更新機能を提供できます。このコンポーネントを使用すると、ユーザーはローカル・ファイルを選択して、サーバーの選択可能な場所にアップロードできます。サーバーからユーザーにファイルをダウンロードするには、18.4.1項「ファイルをダウンロードするためのコマンド・コンポーネントの使用方法」を参照してください。
inputFileコンポーネントにより、ファイルのアップロード時に標準のValueChangeEventイベントが送信され、ロード・プロセスが透過的に管理されます。inputFileコンポーネントのvalueプロパティは、ファイルのアップロード時に、org.apache.myfaces.trinidad.model.UploadedFileクラスのインスタンスに設定されます。
アップロード・プロセスを開始するには、図9-35に示すように、コマンド・ボタンなどのアクション・コンポーネントを作成します。
ファイルがアップロードされ、inputFileの値がnull以外の場合は、最初のロードが成功した後またはその値が初期値として指定された後に、「更新」ボタンを作成できます(図9-36に示されているように、このボタンは「参照」ボタンのかわりに表示されます)。これにより、inputFileコンポーネントの値を変更できます。
readOnlyプロパティをtrueに設定すると、特定のファイルのみをロードできるようにコンポーネントを指定することもできます。図9-37に示すように、このモードでは、指定されたファイルのみをロードできます。
inputFileコンポーネントでは、デフォルトで1つのファイルをアップロードできますが、複数のファイルをアップロードするように構成することもできます。図9-38に、複数のファイルをアップロードするように構成されたinputFileコンポーネントを示します。
ユーザーは、「参照」ボタンで表示される「ファイルのアップロード」ダイアログで複数のファイルを選択するか、コンポーネントのドロップ・セクションに複数のファイルをドラッグ・アンド・ドロップできます。ドロップ・セクションにファイルが表示されたら、図9-39に示すように、「アップロード」をクリックしてファイルをアップロードします。
セキュリティ上の理由から、次の属性をクライアントから設定することはできません。
disabled(unsecureプロパティが設定されている場合)。詳細は、3.7.2項「無効なプロパティを保護しない方法」を参照してください。
immediate
readOnly
requiredMessageDetail
value
inputFileコンポーネントは、h:formタグまたはaf:formタグのいずれかに配置できますが、いずれの場合も、ファイルのアップロードをサポートできるようにformタグを設定する必要があります。JSFの基本的なHTML h:formを使用する場合は、enctypeをmultipart/form-dataに設定します。これにより、リクエストがマルチパート・リクエストになり、サーバーへのファイルのアップロードがサポートされます。ADF Facesのaf:formタグを使用している場合は、usesUploadをtrueに設定することにより、enctypeをmultipart/form-dataに設定するのと同じ機能が実行され、ファイルのアップロードがサポートされます。
ADF Facesフレームワークでは、ファイルの汎用アップロードが実行されます。アップロード後にファイルを処理(たとえば、xmlファイル、pdfファイルなどの処理)するには、actionListenerまたはアクション・メソッドを作成する必要があります。
inputFileコンポーネントのvalueは、org.apache.myfaces.trinidad.model.UploadedFileインタフェースのインスタンスです。このAPIを使用すると、ファイル名、MIMEタイプ、サイズだけでなく、ファイルの実際のバイト・ストリームを取得できます。
|
注意: APIを使用して、ファイルのアップロード元に関するパス情報をクライアントから取得することはできません。 |
アップロードされたファイルは、ファイルとしてファイル・システムだけでなく、メモリーにも格納できますが、この違いがAPIよって表面化されることはありません。フィルタを使用すると、リクエストの完了後、確実にUploadedFileコンテンツがクリーン・アップされます。このため、通常はリクエスト全体でUploadedFileオブジェクトをキャッシュすることはできません。ファイルを保持する必要がある場合は、リクエストが完了する前にファイルを永続記憶域にコピーする必要があります。
たとえば、例9-10に示すように、ファイルを保存するかわりに、マネージドBeanをValueChangeEventイベントへのレスポンスとして使用し、ファイルのアップロードが成功したという内容のメッセージを追加します。
例9-10 アップロード・メッセージを表示するためのvalueChangeListenerの使用
JSF Page Code ----->
<af:form usesUpload="true" id="f1">
<af:inputFile label="Upload:"
valueChangeListener="#{managedBean.fileUploaded}" id="if1"/>
<af:commandButton text="Begin" id="b1"/>
</af:form>
Managed Bean Code ---->
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ValueChangeEvent;
import org.apache.myfaces.trinidad.model.UploadedFile;
public class ABackingBean
{
...
public void fileUploaded(ValueChangeEvent event)
{
UploadedFile file = (UploadedFile) event.getNewValue();
if (file != null)
{
FacesContext context = FacesContext.getCurrentInstance();
FacesMessage message = new FacesMessage(
"Successfully uploaded file " + file.getFilename() +
" (" + file.getLength() + " bytes)");
context.addMessage(event.getComponent().getClientId(context), message);
// Here's where we could call file.getInputStream()
}
}
}
また、例9-11に示すように、値をマネージドBeanに直接バインドすることでアップロードを処理できます。
例9-11 マネージドBeanへの値のバインド
JSF Page Code ---->
<af:form usesUpload="true">
<af:inputFile label="Upload:" value="#{managedBean.file}" id="if1"/>
<af:commandButton text="Begin" action="#{managedBean.doUpload}" id="b1"/>
</af:form>
Managed Bean Code ---->
import org.apache.myfaces.trinidad.model.UploadedFile;public class AManagedBean
{
public UploadedFile getFile()
{
return _file;
}
public void setFile(UploadedFile file)
{
_file = file;
}
public String doUpload()
{
UploadedFile file = getFile();
// ... and process it in some way
}
private UploadedFile _file;
}
|
注意:
|
Javaクラスは、inputFileコンポーネントにバインドする必要があります。このクラスにより、アップロードしたファイルの値が含まれます。
inputFileコンポーネントを追加する手順:
入力ファイルの値を保持するJavaクラスを作成します。org.apache.myfaces.trinidad.model.UploadedFileインタフェースのインスタンスであることが必要です。
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「入力ファイル」をドラッグ・アンド・ドロップします。
valueを手順1で作成したクラスに設定します。
ユーザーがマウスを置くまでコンポーネントの値を読取り専用として表示する場合は、「その他」セクションを開き、「編集可能」をonAccessに設定します。コンポーネントを常に編集可能として表示する場合は、alwaysを選択します。値を祖先コンポーネントから継承する場合は、inheritを選択します。
|
注意:
|
コンポーネント・パレットから、ページにコマンド・コンポーネントをドラッグ・アンド・ドロップします。これは、アップロード・プロセスの開始に使用されます。
コマンド・コンポーネントが選択された状態で、actionListener属性を、アップロード後にファイルを処理するリスナーに設定します。
inputFileコンポーネントで複数のファイルをアップロードするには、uploadTypeおよびmaximumFiles属性を使用します。
複数のファイルをアップロードするようにinputFileコンポーネントを構成するには:
フォームで、inputFileコンポーネントを選択します。
プロパティ・インスペクタで「外観」セクションを開き、次の設定を行います。
autoHeightRows: inputFileコンポーネントの高さを決定するための行数を指定します。値は、rowsの値以下である必要があります。
rows: ドロップ・セクションに表示されるファイル数を指定します。デフォルトでは、これは5に設定されています。
「拡張」セクションを開き、maximumFiles属性を設定して、ユーザーがアップロードできるファイルの最大数を指定します。デフォルトでは、これは1に設定され、1ファイルのみのアップロードが許可されています。
「動作」セクションを開き、uploadType属性を設定して、ファイルを自動的にアップロードするか、ファイルをアップロードするためにユーザーが「アップロード」ボタンをクリックする必要があるかを指定します。
表9-3に、uploadType属性に指定可能な値を示します。
表9-3 inputFileコンポーネントのuploadTypeの値
| 値 | 説明 |
|---|---|
|
|
1ファイルのみをアップロードします。ドロップ・セクション(ユーザーがファイルをドラッグ・アンド・ドロップできる場所)は表示されません。 |
|
|
ドロップ・セクションが表示されます。複数のファイルをアップロードできます。ファイルがドロップ・セクションに表示されると、すぐにアップロードが開始されます。
|
|
|
ドロップ・セクションが表示されます。複数のファイルをアップロードできます。アップロードは、「アップロード」ボタンをクリックすると開始されます。
|
|
|
複数のファイルをアップロードします。ファイルがドロップ・セクションに表示されると、すぐにアップロードが開始されます。デフォルトでは、
|
|
|
複数のファイルをアップロードします。アップロードは、「アップロード」ボタンをクリックすると開始されます。
|
アップロードされたファイルをドロップ・セクションから削除するか、アップロード中のファイルのアップロードを取り消すには、ファイル名およびプログレス・バーの横にある「取消」アイコンをクリックします。すべてのファイルのアップロードを取り消すには、図9-40に示すように「アップロードの停止」ボタンをクリックします。
ADF Facesではアップロードされるファイルが(ディスクまたはメモリーに)一時的に格納されるため、アップロード・ファイルでハード・ドライブやメモリーを一杯にしようとするDoS攻撃を未然に防ぐため、デフォルトでは、許容される着信アップロード・リクエストのサイズが制限されています。デフォルトでは、1つのリクエストで最初の100KBがメモリーに格納されます。これが一杯になると、ディスク領域が使用されます。この場合も、デフォルトでは、すべてのファイルに対し、1つのリクエストで2,000KBのディスク領域に制限されます。これらの制限を超えると、フィルタによりEOFExceptionがスローされます。
デフォルトで、ファイルはjava.io.File.createTempFile()が使用する一時ディレクトリに格納され、通常はシステム・プロパティjava.io.tmpdirによって定義されます。一部のアプリケーションには明らかに不十分であるため、例9-12に示すように、3つのサーブレット・コンテキスト初期化パラメータを使用して、これらの値を構成できます。
例9-12 ファイルのアップロード・サイズおよびディレクトリを定義するパラメータ
<context-param>
<!-- Maximum memory per request (in bytes) -->
<param-name>org.apache.myfaces.trinidad.UPLOAD_MAX_MEMORY</param-name>
<!-- Use 500K -->
<param-value>512000</param-value>
</context-param>
<context-param>
<!-- Maximum disk space per request (in bytes) -->
<param-name>org.apache.myfaces.trinidad.UPLOAD_MAX_DISK_SPACE</param-name>
<!-- Use 5,000K -->
<param-value>5120000</param-value>
</context-param>
<context-param>
<!-- directory to store temporary files -->
<param-name>org.apache.myfaces.trinidad.UPLOAD_TEMP_DIR</param-name>
<!-- Use a TrinidadUploads subdirectory of /tmp -->
<param-value>/tmp/TrinidadUploads/</param-value>
</context-param>
<context-param>
<!-- Maximum file size that can be uploaded.-->
<param-name>org.apache.myfaces.trinidad.UPLOAD_MAX_FILE_SIZE</param-name>
<!-- Use 5,000K -->
<param-value>5120000</param-value>
</context-param>
<!-- This filter is always required; one of its functions is
file upload. -->
<filter>
<filter-name>trinidad</filter-name>
<filter-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</filter-class>
</filter>
org.apache.myfaces.trinidad.webapp.UploadedFileProcessorクラス全体をtrinidad-config.xml構成ファイルの<uploaded-file-processor>要素に置き換えることで、ファイルのアップロード・プロセスをカスタマイズできます。UploadedFileProcessorクラスを置き換えると、例9-12にリストされているパラメータは無関係になり、デフォルトのUploadedFileProcessorクラスによってのみ処理されます。
<uploaded-file-processor>要素は、oracle.adf.view.rich.webapp.UploadedFileProcessorインタフェースを実装するクラスの名前である必要があります。このAPIにより、個々のアップロード・ファイルが着信リクエストから取得される際に処理され、そのコンテンツを残りのリクエストで使用できるようになります。大部分のアプリケーションは、デフォルトのUploadedFileProcessorクラスで十分ですが、大規模ファイルのアップロードをサポートする必要のあるアプリケーションでは、リクエスト中にADF Facesで一時記憶域を処理するかわりに、ファイルをただちに最終的な宛先に格納することでパフォーマンスを向上させます。
inputFileコンポーネントは、HTML5を使用してドラッグ・アンド・ドロップ機能や複数ファイルのアップロードをサポートします。HTML5をサポートしないブラウザでは、図9-41に示すように、ドラッグ・アンド・ドロップ機能と複数ファイルのアップロードにJavaアップレットが使用されます。
HTML5をサポートしていないブラウザでJavaも使用できない場合は、inputFileコンポーネントにドロップ・セクションは表示されません。
|
注意: OracleAS Single Sign-On (SSO)を使用している場合、Oracle HTTP Serverのシングル・サインオンを有効にする 次のパラメータを使用して
OracleAS Single Sign-Onの詳細は、『Oracle Fusion Middlewareアプリケーション・セキュリティ・ガイド』のOracleAS SSOを使用したシングル・サインオンの構成に関する章を参照してください。 |
単一ファイル・アップロード・モードの場合、inputFileコンポーネントでアップロードできるのは、2GB未満のファイルのみです。複数ファイル・アップロード・モードでは、inputFileコンポーネントはファイルを2 GBのサイズのチャンクに分割することにより、デフォルトで2 GBより大きいファイルをアップロードできます。チャンクのサイズは、web.xmlのパラメータorg.apache.myfaces.trinidad.UPLOAD_MAX_CHUNK_SIZEで制御できます。2 GBがデフォルト値であり、最大値でもあります。次に例を示します。
<context-param>
<!-- Maximum file chunk size that can be uploaded.-->
<param-name>org.apache.myfaces.trinidad.UPLOAD_MAX_CHUNK_SIZE</param-name>
<!-- Use 1,000 MB as chunk size -->
<param-value>1000000000</param-value>
</context-param>
チャンク機能を使用した大きなファイルのアップロードは、すべてのブラウザでサポートされているわけではありません。詳細は、Oracle Technology NetworkのOracle JDeveloperリリース・ノートを参照してください。
すべてのファイルをアップロードしたら、必ずフォームを送信する必要があります。これを行わないと、inputFileコンポーネントのデータはサーバーにアップロードされません。inputFileコンポーネントでautoSubmitがtrueに設定されている場合は、すべてのファイルのアップロードが終わるとフォームが自動的に送信されます。フォームの送信が完了すると、inputFileコンポーネントがリフレッシュされてドロップ・セクションのファイル・リストが空になり、さらにファイルをアップロードできるようになります。アップロードされたファイルのリストを表示するには、例9-10に示すように、ValueChangeListenerを追加するか、値をマネージドBeanにバインドします。
af:codeEditorコンポーネントを使用すると、ブラウザ内でコード編集を実行できるほか、Fusion Webアプリケーションで実行時にプログラム・コードを表示および編集できます。コード・エディタ・コンポーネントの入力フィールドはテキストを受け入れます。また、ツールバー、キーワードの構文的な色分け、基本検証、エラーのハイライト、ログ用のメッセージ・ペインなど、いくつかの一般的なコード編集機能も備えています。コード・エディタを使用すると、ユーザーはエラーや警告に対してIDEソフトウェアを実行してプログラム・コードをテストする必要がなくなります。
コード・エディタ・コンポーネントは、図9-42に示すように、JavaScript、XML、Groovyの各言語をサポートします。
コード・エディタ・コンポーネントには、次の機能があります。
行番号付け
元に戻す操作および操作の再実行(キーボード・ショートカット[Ctrl]+[Z]および[Ctrl]+[Y]を使用しても実行可能)
特定の行へのジャンプ
検索および置換
テキストの色分け
構文や検索した用語のハイライト
自動インデント
自動書式設定
エラー・メッセージ用のメッセージ・ペイン
1000行を超えるコードを持つ大きなファイルのサポート
ユーザーは、ツールバー(図9-43を参照)を使用して、変更の取消しと再実行、テキストの検索と置換、および特定の行番号へのジャンプ操作を実行できます。
文字列を検索するには、「検索」フィールドに検索条件を入力し、「次を検索」または「前を検索」アイコンをクリックして、コード・エディタ内の検索文字列の位置を特定します。図9-44に、コード・エディタで文字列検索に使用される、ツールバーの「検索」フィールドを示します。
大/小文字を区別して文字列を検索したり、検索した用語を置換したりするには、「検索と置換」アイコンから「検索と置換」ダイアログを開いて、図9-45に示すような操作をダイアログから実行します。
|
注意: 「完全一致」チェック・ボックスが選択されている場合は、「検索と置換」ダイアログでエディタの英語以外の文字列を検索することはできません。ただし、「すべて置換」ボタンを使用する場合は、「完全一致」チェック・ボックスが選択されていても、英語以外の文字列のすべてのインスタンスを置換できます。 |
特定の行番号にジャンプするには、図9-46に示すように、「指定行に移動」フィールドに数字を入力して、「指定行にジャンプ」をクリックします。
コード・エディタ・コンポーネントでは、すべての警告とエラーを付属のメッセージ・ペインにリストするように構成できます。図9-47に、サーバーで実行されているXMLパーサーで検出されたすべてのXMLエラーをリストしたメッセージ・ペインを示します。
メッセージ・ペインは、コード・エディタのテキスト領域の下にある編集不可能な領域です。コードのコンパイルの検証サポートや、エラーまたは警告メッセージなど、コードに関するステータス情報の表示に使用されます。メッセージ・ペインのメッセージをクリックすると、コード・エディタの対応する各コード行に移動できます。
また、プログラムを使用して様々なタイプのマーカーを追加するようにコード・エディタを構成することもできます。図9-48に、エラー、クリティカル、警告、情報の各マーカーが表示されたコード・エディタを示します。
codeEditorコンポーネントを追加する場合は、language属性を使用してコード・エディタで使用するプログラミング言語を構成します。
codeEditorコンポーネントを追加するには:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページにコード・エディタ・コンポーネントをドラッグ・アンド・ドロップします。
プロパティ・インスペクタの「共通」セクションを開いて、Languageを設定します。有効な値は、javascript、groovyおよびxmlです。
「外観」セクションを開き、次の設定を行います。
LineNumbers: コード・エディタに行番号を表示するかどうかを指定します。
有効な値は、yesおよびnoです。
simple: ラベルを表示しない場合にtrueに設定します。
「動作」セクションを開き、次のように設定します。
ReadOnly: コード・エディタ内のコードを編集可能にするか、出力スタイルのテキストとして表示するかを指定します。
Disabled: コード・エディタを無効にするかどうかを指定します。
