11 入力コンポーネントの使用およびフォームの定義
inputText
など)、値の選択(inputNumber
、inputRange
、inputColor
、inputDate
およびselect
コンポーネントなど)、テキストの編集(richTextEditor
など)、およびファイルのロード(inputFile
など)を行えます。この章の内容は次のとおりです。
サイズが大きくなる可能性のある項目リスト、またはオブジェクト間の関係を表す可能性のある(別のオブジェクトの外部キーである属性を表すリストを作成する場合など)項目リストから選択する入力コンポーネントを使用する場合には、値リスト・コンポーネントを使用できます。これらのコンポーネントの詳細は、 「値リスト・コンポーネントの使用方法」を参照してください。
入力コンポーネントおよびフォームについて
ADFの入力コンポーネントは、入力データをアプリケーションに送信する手段になります。新規ファイルを作成する、フォームにリッチ・テキスト・エディタを追加する、複数の選択リストを提供するなど、ユーザーから入力データを収集する組込み機能を提供するフォームで、各種の入力コンポーネントを使用できます。
入力コンポーネントは、様々な形式のユーザー入力を受け入れます。最も一般的な形式は、フォームの内部に表示され、フォームの送信時に送信されるテキスト、数値、日付および選択リストです。入力された値または選択は、さらに処理される前に検証および変換できます。図11-1は、ADF Facesの標準入力コンポーネントを示しています。
ADF Faces入力コンポーネントには、図11-2に示すように、ユーザーが1つまたは複数の値を選択できるいくつかのコンポーネントも含まれます。
入力コンポーネントのユースケースと例
多くの場合、入力コンポーネントは、ユーザー入力用のフォームの作成に使用されます。たとえば、File Explorerアプリケーションには、ユーザーが新規ファイルを作成できるフォームが含まれます。図11-3に示すように、入力コンポーネントでは、ユーザーが名前やサイズの入力、権限の選択、キーワードとファイルの説明の追加を行うことができます。アスタリスクで示されているように、「名前」フィールドは必須です。ユーザーが値を入力しなかった場合は、エラー・メッセージが表示されます。その検証および関連エラー・メッセージは、コンポーネントごとに構成することも(required
属性またはrequiredMessageDetail
属性を設定して)、サーバーで処理することもできます(showRequired
属性を設定して)。
図11-3 入力コンポーネントを使用したフォーム
richTextEditor
コンポーネントには、ユーザーに単純なテキスト以外を入力させる場合に必要になる、異なるフォント、サイズ、行揃えおよびその他の編集機能を使用した書式設定可能な、多数の行にわたるリッチ・テキスト入力が用意されています。たとえば、richTextEditor
をWebベースのディスカッション・フォーラムで使用して、図11-4に示すように、ユーザーが公開する必要のあるテキストを書式設定できるようにすることができます。
図11-4 ディスカッション・フォーラムで使用されるrichTextEditor
inputFile
コンポーネントでは、ユーザーはアプリケーション・サーバーにアップロードするローカル・ファイルを参照できます。たとえば、電子メール・メッセージでは、図11-5に示すようにユーザーがメッセージにファイルを添付できます。
ADF Faces選択コンポーネントを使用すると、ユーザーは値を入力するかわりに項目のリストから選択できるようになります。ADF Facesは、単一選択の選択リストと複数選択の選択リストの両方を提供します。単一選択リストは、図11-6に示すように、オンライン食品注文での目的の飲料など、リストから1つの値を選択するために使用します。
ADF単一選択コンポーネントには、ドロップダウン・リスト(図11-6を参照)、リスト・ボックス、ラジオ・ボタンおよびチェックボックスがあります。
ADF複数選択コンポーネントでは、ユーザーはリストの値を複数選択できます。たとえば、1つの飲料タイプを選択するかわりに、selectManyChoice
コンポーネントでは、図11-7に示すようにユーザーが複数の飲料を選択できます。
ADF複数選択コンポーネントには、ドロップダウン・リスト、チェックボックス、チェックボックス・リスト、シャトルおよび順序付け済シャトルが含まれます。
ベスト・プラクティス:
選択リストまたは値リスト(LOV)コンポーネントを使用して、リストを表示できます。LOVコンポーネントは、選択リストが大きい場合に使用する必要があります。LOVコンポーネントは、ListOfValueModel
クラスを使用したモデルドリブンであり、APIを使用してプログラムで構成できます。これらは、問合せパネルを含むこともあるポップアップ・ウィンドウの内部の選択リストを表します。選択リストは、単純に静的な値リストを表示します。LOVコンポーネントは単一選択であり、1つのオプションしか選択できないため、複数選択には使用しないでください。LOVコンポーネントの使用の詳細は、 「値リスト・コンポーネントの使用方法」を参照してください。
フォーム・コンポーネントには、その他のコンポーネント用のコンテナがあります。form
コンポーネントは、埋め込まれた入力コンポーネントからの値を送信できるリージョンを表します。1ページ当たりでサポートされるフォーム・コンポーネントは1つのみです。ADF Facesには、form内で個別にコンポーネント値を送信できるサブリージョンを定義することで柔軟性を高めるsubform
コンポーネントも用意されています。
注意:
af:autoSuggestBehavior
タグによって提案項目のリストを表示するように構成された入力コンポーネントを使用していて、AdfCustomEvent
タグを使用してカスタム・イベントをサーバーに送信する場合、サーバー・リスナーは実行されません。これは、af:autoSuggestBehavior
タグがリクエスト値の適用フェーズ後に入力値のライフ・サイクルに割り込み、レスポンスのレンダリング・フェーズに移るためです。
入力コンポーネントおよびフォームの追加機能
入力コンポーネントを実装する前に、他のADF Faces機能を理解することが役立つ場合があります。また、ページに入力コンポーネントまたはフォームを追加した後で、検証やアクセシビリティなどの機能を追加することが必要になる場合があります。入力コンポーネントで使用できる他の機能へのリンクを次に示します。
-
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。「EL書式タグの使用方法」を参照してください。
-
クライアント・コンポーネント: 入力コンポーネントはクライアント・コンポーネントにすることができます。クライアントでコンポーネントを処理するには、「ADF Facesクライアント側アーキテクチャの使用方法」を参照してください。
-
JavaScript API: すべての入力コンポーネントには、プロパティ値を設定または取得するために使用できるJavaScriptクライアントAPIがあります。「Oracle ADF Faces JavaScript APIリファレンス」を参照してください。
-
イベント: 入力コンポーネントは、なんらかのロジックを実行することでアプリケーションで対応できるサーバー側とクライアント側両方のイベントを起動します。「イベントの処理」を参照してください。
-
検証および変換を入力コンポーネントに追加できます。「入力の検証および変換」を参照してください。
-
ヒントとメッセージを表示でき、入力コンポーネントにオンライン・ヘルプを関連付けることができます。「ヒント、メッセージおよびヘルプの表示」を参照してください。
-
特定の入力コンポーネントをページの他のコンポーネントより前に検証することが必要になる場合があります。「immediate属性の使用」を参照してください。
-
選択コンポーネントから行った選択に基づいてページの他のコンポーネントを更新できます。「最適化されたライフサイクルの使用」を参照してください。
-
scrollComponentIntoViewBehavior
タグをrichTextEditorコンポーネントとともに使用すると、ユーザーはコンポーネント内の特定の領域にジャンプできます。「scrollComponentIntoViewBehaviorタグの使用方法」を参照してください。 -
スキンを使用して、必須および変更済通知に使用するアイコンを変更できます。「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
-
入力コンポーネントをアクセス可能にできます。「アクセス可能なADF Facesページの開発」を参照してください。
-
文字列を値として受け取る属性に値を入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、これらの文字列の翻訳を管理できます。「ページの国際化およびローカライズ」を参照してください。
-
アプリケーションでADFモデルを使用する場合は、自動的にバインドされるフォームを、データ・コントロールを使用して作成できます(ADFビジネス・コンポーネントに基づくか、その他のビジネス・サービスに基づくかを問いません)。『Application Development FrameworkによるFusion Webアプリケーションの開発』で、「データバインドされた基本的なページの作成」を参照してください。
formの定義
ADFのシャトル・コンポーネントをページに追加すると、使用可能な値リスト・ボックスからユーザーが1つまたは複数を選択し、選択済の値リスト・ボックスにそれを追加できるようになります。
formは、他のコンポーネントのコンテナとして機能するコンポーネントです。フォーム内で送信アクションが発生すると、変更された入力値が送信されます。たとえば、入力コンポーネントと選択コンポーネントで構成される入力フォーム、および送信コマンド・ボタンを作成し、すべてをform内に配置できます。ユーザーが複数の入力フィールドに値を入力して送信ボタンをクリックすると、それらの新しい入力値が送信されて処理されます。
JDeveloperでJSFページを作成すると、デフォルトで、ページにform
コンポーネントが自動的に挿入されます。ページにコンポーネントを追加すると、form
コンポーネント内に挿入されます。
ヒント
ページにaf:form
タグがない状態で、そのページにADF Facesコンポーネントをドラッグ・アンド・ドロップすると、JDeveloperにより、コンポーネントをformコンポーネントで囲むよう要求されます。
次の例に、2つの入力コンポーネント、およびクリックされると両方の入力値が送信されて処理される送信ボタンを示します。
<af:form id="f1"> <af:panelFormLayout id="pfl1"> <af:inputText value="#{myBean.firstName}" label="#{FirstName}" id="it1"> </af:inputText> <af:inputText value="#{myBean.lastName}" label="#{LastName}" id="it2"> </af:inputText> <af:button text="Submit" id="b1"/> </af:panelFormLayout> </af:form>
ページに使用できるform
コンポーネントは1つのみであるため、入力値を送信できる個別のリージョンを作成するには、form内にsubformを使用します。リージョンにおいて、subform内の値は、subform内のコンポーネントが値の送信を行う場合にのみ検証および処理されます。また、subform内に別のsubformをネストさせて、値を送信できるネストしたリージョンを作成することもできます。subformの詳細は、「サブフォームを使用したページでのセクションの作成」を参照してください。
次の例、それぞれ独自の入力コンポーネントとボタン(送信ボタンなど)を含む2つのsubformを持つformを示します。送信ボタンをクリックすると、そのsubform内の入力値のみが送信されて処理されます。
<af:form id="f1"> <af:subform id="s1"> <af:panelFormLayout id="pfl1"> <af:inputText value="#{myBean.firstName}" label="#{FirstName}" id="it1"> </af:inputText> <af:inputText value="#{myBean.lastName}" label="#{LastName}" id="it2"> </af:inputText> <af:button text="Submit" id="b1"/> </af:panelFormLayout> </af:subform> <af:subform id="s2"> <af:panelFormLayout id="pfl2"> <af:inputText value="#{myBean.primaryPhone}" label="#{PrimaryPhone}" id="it3"> </af:inputText> <af:inputText value="#{myBean.cellPhone}" label="#{CellPhone}" id="it4"> </af:inputText> <af:button text="Submit" id="b2"/> </af:panelFormLayout> </af:subform> </af:form>
基本的なボタンの他に、form内にその他のコマンド・コンポーネントを追加して、そのform内の任意のフィールドで機能させることができます。
ページへのformの追加方法
多くの場合、JDeveloperを使用してformコンポーネントを追加します。ただし、手動でのformの追加や、特定の属性値を使用したformの構成が必要な場合があります。
始める前に:
formコンポーネントに関する知識が役立つ場合があります。「formの定義」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
ページにformを追加する手順:
ページへのsubformの追加方法
ページのセクションで値を個別に送信できることが必要な場合は、formコンポーネント内にsubformコンポーネントを追加する必要があります。
始める前に:
formおよびsubformに関する知識が役立つ場合があります。「formの定義」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
formコンポーネントをページに追加する必要があります。手順は、「ページへのformの追加方法」を参照してください。
ページにsubformを追加する手順:
formをリセットするボタンの追加方法
ボタン・コンポーネントを追加し、af:resetListener
を使用してそのボタンが他の入力コンポーネントをデフォルト値にリセットするように構成します。リセット・ボタンは、そのformまたはsubform内のコンポーネントでのみ機能します。
始める前に:
formコンポーネントに関する知識が役立つ場合があります。「formの定義」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
resetListenerを使用してボタンをページに追加するには:
inputTextコンポーネントの使用方法
ADF inputTextコンポーネントはテキスト入力フィールドです。これらのコンポーネントを使用すると、ユーザーがテキスト入力データを送信できるようになります。ユーザーは、1行の入力テキストまたは複数行の入力テキストを入力できます。
ピッカー、スライダ、スピン・ボックスなど、入力コンポーネントには多くのバリエーションがありますが、inputText
コンポーネントは、値入力のための基本的な入力コンポーネントです。inputText
コンポーネントは、1行の入力フィールドとして定義することも、rows
属性を1より大きい値に設定してテキスト領域として定義することもできます。ただし、リッチ・テキストを入力できるようにする場合は、「richTextEditorコンポーネントの使用方法」で説明されているように、richTextEditor
コンポーネントの使用を検討してください。
autoComplete
属性を使用して、inputText
コンポーネントでオートコンプリートを使用できます。true
に設定されている場合、コンポーネントは以前のエントリを記憶し、ユーザーがそれらのエントリと一致する値から始まる値を入力したときにそれらのエントリを表示します。
secret
属性をtrue
に設定することで、パスワードなどの入力値を非表示にできます。その他のADF Facesコンポーネントと同じように、inputText
コンポーネントではラベル、テキストおよびメッセージがサポートされています。このコンポーネントをラベルなしで表示する場合は、simple
属性をtrue
に設定します。図11-8に、1行のinputText
コンポーネントを示します。
rows
属性を使用して、inputText
コンポーネントで複数行のテキストを表示できます。rows
属性を1より大きい値に設定し、simple
属性をtrueに設定した場合、inputText
コンポーネントは、dimensionsFrom
属性を使用してそのコンテナに合せて拡大するように構成できます。コンポーネントが拡大される方法の詳細は、「ジオメトリ管理およびコンポーネントの拡大」を参照してください。図11-10に、複数行のinputText
コンポーネントを示します。
複数のinputText
コンポーネントを追加して、入力フォームを作成できます。図11-9に、2つのinputText
コンポーネントを使用した入力フォームを示します。
コマンド・コンポーネントと連携して、inputText
コンポーネントに特定のテキストを挿入するinsertTextBehavior
タグも構成できます。入力するテキストには、簡単な文字列、またはその他のコンポーネントの値(selectOneChoice
コンポーネントで選択したリスト項目など)を指定できます。たとえば、図11-10は、ユーザーがすでにテキストを入力したinputText
コンポーネントを示しています。
図11-10 テキストが入力済のinputTextコンポーネント
この後、ユーザーがドロップダウン・リストから追加テキストを選択し、コマンド・ボタンをクリックすると、図11-11に示すように、inputText
コンポーネントにそのテキストが表示されます。
図11-11 テキストが挿入済のinputTextコンポーネント
inputTextコンポーネントの追加方法
「Webページ上のコンテンツの編成」で説明されている任意のレイアウト・コンポーネントに、inputText
コンポーネントを使用できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「inputTextコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputTextコンポーネントを追加する手順:
inputTextコンポーネントへのテキストの挿入機能の追加方法
insertTextBehavior
タグは、コマンド・コンポーネントと連携して、inputText
コンポーネントに特定のテキストを挿入します。入力するテキストには、簡単な文字列、またはその他のコンポーネントの値(selectOneChoice
コンポーネントで選択したリスト項目など)を指定できます。inputText
コンポーネントにテキストを挿入できるようにするには、テキストの挿入に使用されるコマンド・コンポーネントの子としてinsertTextBehavior
タグを追加します。
注意:
insertTextBehavior
タグでは、サーバー側イベントの配信が自動的に取り消されます。親コマンド・コンポーネントのactionListener
またはaction
属性は無視されます。サーバー側機能をトリガーする必要もある場合は、サーバー側イベントを配信するためにカスタム・クライアント・リスナーを追加する必要があります。「クライアントからサーバーへのカスタム・イベントの送信」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「inputTextコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
insertTextBehavior
タグを追加する前に、「inputTextコンポーネントの追加方法」の説明に従ってinputText
コンポーネントを作成する必要があります。clientComponent
属性をtrue
に設定します。
テキスト挿入動作を追加する手順:
数値入力コンポーネントの使用方法
ADF数値入力コンポーネントは、数値の入力フィールドです。これらのコンポーネントを使用すると、ユーザーが数値入力データを送信できるようになります。数値コンポーネントには、水平および垂直レイアウトでのinputNumberSliderと、inputRangeSlider、inputNumberSpinboxなどがあります。
スライダ・コンポーネントを使用すると、スライダ上の位置が値に対応している1つまたは2つのマーカーがあるスライダを作成できます。スライダの値が表示され、一方にはマイナス・アイコンが、もう一方にはプラス・アイコンがあります。ユーザーはマーカーを選択し、スライダ上を移動させて値を選択します。図11-12(水平レイアウト)および図11-13(垂直レイアウト)に示すように、inputNumberSlider
コンポーネントにはマーカーが1つあり、ユーザーはスライダから値を1つ選択できます。
図11-12 水平レイアウトのinputNumberSlider
図11-13 垂直レイアウトのinputNumberSlider
図11-14に示すように、inputRangeSlider
コンポーネントにはマーカーが2つあり、ユーザーは範囲のエンド・ポイントを選択できます。
また、inputNumberSlider
およびinputRangeSlider
コンポーネントを構成すると、図11-15に示すように再生/一時停止ボタンを追加し、スライダがコンポーネントの増分値の中をアニメーションで移動するようにできます。
図11-16に示すように、inputNumberSpinbox
は、数値用の入力フィールド、および入力フィールドの現在の値を増減させるための上矢印キーと下矢印キーのセットを作成する入力コンポーネントです。
図11-16 inputNumberSpinbox
inputNumberSliderまたはinputRangeSliderコンポーネントの追加方法
inputNumberSlider
またはinputRangeSlider
コンポーネントを追加する際には、表示される数値の範囲と増分を決定できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「数値入力コンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputNumberSliderまたはinputRangeSliderコンポーネントを追加する手順:
inputNumberSpinboxコンポーネントの追加方法
inputNumberSpinbox
コンポーネントを使用すると、ユーザーは一連の数値をスクロールして値を選択できるようになります。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「数値入力コンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputNumberSpinboxコンポーネントを追加する手順:
カラー・チューザおよび日付チューザの使用方法
ADFのinputColorおよびinputDateコンポーネントを使用すると、フォームにカラー・パレットとポップアップ・カレンダを追加できます。
inputColor
コンポーネントでは、ユーザーがパレットから色を選択できます。これは、色のコードを入力するテキスト入力フィールドを表します。図11-17に示すように、ポップアップのパレットから色を選択するためのボタンも表示します。
図11-17 ポップアップのchooseColorコンポーネントが含まれるinputColorコンポーネント
「図11-17 ポップアップのchooseColorコンポーネントが含まれるinputColorコンポーネント」の説明
デフォルトでは、ポップアップのコンテンツ配信は遅延です。ユーザーがボタンをクリックすると、inputColor
コンポーネントがPPRリクエストを受信し、レンダラがchooseColor
コンポーネントをpopup
コンポーネントに表示します。
パフォーマンスのヒント:
inputColor
コンポーネントのclientComponent
属性がtrue
に設定されている場合、ポップアップおよびchooseColor
コンポーネントは即時に配信されます。カラー・パレットが大きい場合、これは初期ページ・ロードのパフォーマンスに悪影響を与えることがあります。
デフォルトの色のコード形式は16進の色の形式です。ただし、ColorConverter
クラスを使用して書式設定をオーバーライドできます。
inputDate
コンポーネントを使用すると、図11-18に示すように、日付を入力するためのテキスト入力フィールドと、ポップアップ・カレンダから日付を選択するためのボタンを作成できます。デフォルトの日付フォーマットは、現在のロケールに適切な省略の日付フォーマットです。たとえば、米語(ENU)のデフォルトの書式はmm/dd/yy
です。ただし、この書式は日時コンバータを使用してオーバーライドできます(コンバータの使用方法の詳細は、「変換の追加」を参照してください)。
図11-18 inputDateコンポーネント
日時コンバータを追加して、日付と時間の両方を表示するように構成すると、ユーザーが時間を入力するための追加のコントロールのある日付ピッカーがモーダル・ダイアログとして表示されます。また、コンバータがタイム・ゾーンを表示するように構成されている場合、図11-19に示すようにタイム・ゾーン・ドロップダウン・リストがダイアログに表示されます。
図11-19 日時コンバータが使用されている場合のモーダル・ダイアログ
inputColorコンポーネントの追加方法
inputColor
コンポーネントを使用すると、ユーザーによる入力テキスト・フィールドへの値の入力や、カラー・チューザからの色の選択が可能になります。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「カラー・チューザおよび日付チューザの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputColorコンポーネントを追加する手順:
inputDateコンポーネントの追加方法
inputDate
コンポーネントを使用すると、ユーザーは日付の入力または選択を実行できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「カラー・チューザおよび日付チューザの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputDateコンポーネントを追加する手順:
InputDateコンポーネントのデフォルト値を含めることに関する必知事項
DefaultValue
属性を使用して、日付または日付と時間の両方のデフォルト値を表示するようにinputDate
コンポーネントを構成できます。この属性に指定した値は、日付と時刻のデフォルト値を表示するために使用されます。以下のいずれかの値を指定可能です。
-
デフォルトの日時: ユーザー指定の日時をデフォルトの日時として表示します。
-
デフォルトの日付のみ: ユーザーが指定した日付をデフォルトの日付として表示します。
注意:
デフォルトの日時が指定されていない場合、今日の日付と現在の時間がデフォルトの日時として表示されます。
日付と時間は、EL式またはリテラル値として指定できます。
次の例は、testInput
バッキングBeanによって定義されたEL式を使用して、inputDate
コンポーネントの日時のデフォルト値を指定する方法を示しています。
<af:inputDate label="Date with default value" simple="true" id="inputDate" DefaultValue="#{testInput .defaultVal}"> <af:convertDateTime type="both" dateStyle="full" pattern="yyyy-MM-dd HH:mm:ss"/> </af:inputDate>
次の例は、日時のデフォルト値をリテラル値として指定する方法を示しています。
<af:inputDate label="Date with default value" simple="true" id="inputDate" DefaultValue="2019-01-01 05:05:05" > <af:convertDateTime type="both" dateStyle="full" pattern="yyyy-MM-dd HH:mm:ss"/> </af:inputDate>
次の例は、日付のデフォルト値のみをリテラル値として指定する方法を示しています。
<af:inputDate label="Date with default value" simple="true" id="inputDate" DefaultValue="2019-01-01" > </af:inputDate>
InputDateコンポーネントの時間値の設定に関する必知事項
ユーザーが日付ピッカーで日付を選択すると、ページでは同じピッカー内にデフォルトの時間値が自動的に設定されます。dateSelectionEventHandler
メソッドを使用して、ユーザーが日付を選択したときの、inputDate
コンポーネントのデフォルトの時間値を設定できます。日付選択通知を受け取るには、次のサンプルに示すように、まずdateSelection
イベントのクライアント・リスナーを登録する必要があります。
<af:inputDate id="inputDate" <af:clientListener type="dateSelection" method="dateSelectionEventHandler"/> <af:convertDateTime type="both" dateStyle="short"/> </af:inputDate>
inputDateコンポーネントなしでのタイム・ゾーンの選択に関する必知事項
デフォルトでは、関連付けられたコンバータがタイム・ゾーンを表示するように構成されている場合、たとえばコンバータのパターンにタイム・ゾーン・プレースホルダ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
コンポーネントは更新されていないように見えます。次の例では、バッキングBeanに、バインディング属性を使用したinputDate
コンポーネントへの参照があります。ユーザーが新しいタイム・ゾーンを選択すると、IDが設定され、コードがinputDate
のコンバータを取得し、そのタイム・ゾーンをクリアします。ページがレンダリングされる場合、コンバータのタイム・ゾーンのローカル値はnullであるため、#{demoInput.preferredTimeZone}
と評価され、更新されたタイム・ゾーンを取得します。
<af:selectOneChoice label="Select a new timezone" id="soc1" 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); }
chooseDateコンポーネントの複数選択サポートに関する必知事項
chooseDate
コンポーネントのロード・イベントと選択イベントのサポートにより、イベント・ハンドラを呼び出すクライアント・イベント・リスナーを定義し、使用する選択修飾子キー([Ctrl]キーと[Shift]キー)に基づいて日付選択を処理できます。
ユーザーが最初にchooseDate
コンポーネントを開くとき、またはユーザーがカレンダの月をナビゲートするときに、コンポーネントはAdfChooseDateLoadEvent
を生成します。その後、ユーザーが日付を選択すると、chooseDate
コンポーネントにより、選択した日付とともにAdfDateSelectionEvent
が生成されます。生成された選択イベントには、イベント・ハンドラが処理できる選択修飾子キー情報が含まれます。
AdfDateSelectionEvent
APIには、選択イベントと相互作用するための次のメソッドがあります。
-
getSelectedDate ()
:AdfDateSelectionEvent
の生成時にユーザーがクリックしたカレンダの日付セルの日付を取得します。 -
getModifiers()
: 選択修飾子キーのリストを次の定数値とともに返します。-
AdfRichChooseDate.SINGLE_SELECTION
: デスクトップのデフォルト。1つの日付のみを選択するという、ユーザーの意図を反映します。前に選択した日付が選択解除され、現在の日付が選択されます。 AdfRichChooseDate.MULTI_SELECTION
: タッチ・デバイスでのみデフォルト設定されます。追加の日付を選択するという、ユーザーの意図を反映します。前に選択した日付が選択されたままになり、現在の日付が選択に追加されます。現在の日付がすでに選択されている場合は、選択解除/切替えを行います。これは、選択イベントがキューに入っている間にコントロール/コマンド修飾子が押されるとトリガーされます。-
AdfRichChooseDate.RANGE_SELECTION
: 日付の範囲を選択するという、ユーザーの意図を反映します。前に選択した日付が選択されたままになり、最後に選択した日付から現在までの日付がすべて選択されます。これは、選択イベントがキューに入っている間にシフト修飾子が押されるとトリガーされます。
-
また、RichChooseDate
クライアント・コンポーネントのAPI setSelectedDates()
と、コンポーネントのロード・イベントおよび選択イベントによって、chooseDate
コンポーネントに複数選択機能を実装できます。生成されたイベント・ソースでsetSelectedDates()
をコールすると、このコンポーネントにより、指定した日付が選択されます。ロード・イベントおよび選択イベントを使用して、ユーザー・クリック(およびキー修飾子)をリスニングし、日付選択の独自のコレクションを作成して、setSelectedDates()
メソッドを介してコンポーネントに戻す必要があります。
たとえば、日付の選択イベントおよびロード・イベントに登録するには、chooseDate
コンポーネントのクライアント・リスナーを作成します。
<af:chooseDate id="chooseDate" > <af:clientListener type="dateSelection" method="dateSelectionEventHandler"/> <af:clientListener type="load" method="chooseDateLoadHandler"/> <af:convertDateTime type="both" dateStyle="short"/> </af:chooseDate>
その後、選択修飾子キーに基づいて、選択された日付を処理するイベント・ハンドラを定義できます。次のサンプルでは、[Ctrl]キー(MULTI_SELECTION
)を押したときに、選択した日付をコレクションに追加します。[Ctrl]キーを押しながらクリックしないと、前のコレクションはクリアされ、選択した日付が追加されます。また、[Shift]キー(RANGE_SELECTION
)を押しながらクリックすると、範囲内のすべての日付が選択されます。
<af:resource type="javascript"> var dates = []; var minDate; var maxDate ; function dateSelectionEventHandler(event) { var eventSource = event.getSource(); var selectedDate = event.getSelectedDate(); var modifier = event.getModifiers(); // ctrl or command is pressed if (modifier.indexOf(AdfRichChooseDate.MULTI_SELECTION ) != -1 ) { dates.push(selectedDate); } else if (modifier.indexOf(AdfRichChooseDate.RANGE_SELECTION) != -1) // shift is pressed { if ( !minDate || ( minDate.getTime() > selectedDate.getTime())) { minDate = selectedDate; } if (!maxDate || ( maxDate.getTime() < selectedDate.getTime() )) // single click { maxDate = selectedDate; } var timeDiff = Math.abs(maxDate.getTime() - minDate.getTime()); var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)) +1; dates = [] for (var i = 0; i < diffDays; i++) { var selDate = new Date(minDate.getFullYear(),minDate.getMonth(), minDate.getDate() + i, 0,0,0,0 ); if (!eventSource.isDisabled(selDate)) { dates.push(selDate); } } } else if (modifier.indexOf(AdfRichChooseDate.SINGLE_SELECTION ) != -1 ) { minDate = null; maxDate = null; dates = []; dates.push(selectedDate) } eventSource.setSelectedDates(dates); } function chooseDateLoadEventHandler(event) { var eventSource = event.getSource(); eventSource.setSelectedDates(dates); } </af:resource>
カスタム・タイム・ゾーン・リストの作成に関する必知事項
Time Zone List属性を使用すると、inputDate
コンポーネントにタイム・ゾーンのカスタム・リストを表示するように構成できます。
次の例に示すinputDate
コンポーネントでは、testInput
バッキングBeanによって米国の3つのタイム・ゾーンのみを表示するように定義されたカスタム・タイム・ゾーン・リストが使用されています。
<af:inputDate id="idtzl" label="InputDate with timezoneList set" timeZoneList="#{testInput.timezoneList}"> <af:convertDateTime type="both" timeStyle="full" timeZone="#{testInput.timezone}/> </af:inputDate> testInput.java public void setTimezoneList(List<String> _timezoneList) { this._timezoneList = _timezoneList; } public List<String> getTimezoneList() { return _timezoneList; } private List<String> _timezoneList = new ArrayList<String> (Arrays.asList("America/Los_Angeles", "America/Denver", "America/New_York"));
図11-21に、バッキングBeanによって定義された、inputDate
コンポーネント内のカスタム・タイム・ゾーン・リストを示します。
getCustomTimeZoneSelectItems
ヘルパーELメソッドを使用して、カスタム・タイム・ゾーンをSelectItems
のリストとして取得することもできます。そのリストを、次の例に示されているように、selectOneChoice
などのコンポーネントに対して使用できます。
<af:selectOneChoice label="Select a timezone" id="soctzlel" value="America/New_York"> <f:selectItems value="#{af:getCustomTimeZoneSelectItems('America/New_York', testInput.timezoneList)}" id="tzonesel" /> </af:selectOneChoice>
図11-22に、getCustomTimeZoneSelectItems
メソッドによって定義された、selectOneChoice
コンポーネント内のカスタム・タイム・ゾーン・リストを示します。
図11-22 selectOneChoiceコンポーネント内のカスタム・タイム・ゾーン・リスト
「図11-22 selectOneChoiceコンポーネント内のカスタム・タイム・ゾーン・リスト」の説明
getCustomTimeZoneSelectItems
ヘルパーELメソッドは、入力パラメータ・リストがタイムゾーン・オフセットによって保存されていることを前提としています。getCustomTimeZoneSelectItems
メソッドの詳細は、ADF Faces APIのドキュメントを参照してください。
選択コンポーネントの使用方法
フォームにADFの選択コンポーネントを追加すると、ユーザーが1つまたは複数の入力値を選択できるようになります。選択コンポーネントとしては、selectBooleanCheckbox、selectBooleanRadio、selectManyCheckboxなどがあります。
選択コンポーネントを使用すると、ユーザーは項目のリストやグループから、単一または複数の値を選択できるようになります。ADF Facesには、単純なブール・ラジオ・ボタンから、ユーザーが複数の項目を選択できるリスト・ボックスまで、様々な選択コンポーネントがあります。選択コンポーネント内の項目のリストは、複数のselectItem
コンポーネントで構成されています。
selectItem
コンポーネントを除くすべての選択コンポーネントは、ValueChangeEvent
およびAttributeChangeEvent
イベントを送信します。selectItem
コンポーネントは、AttributeChangeEvent
イベントのみを送信します。これらのイベント用に、valueChangeListener
ハンドラまたはattributeChangeListener
ハンドラ(あるいはその両方)を作成する必要があります。
selectBooleanCheckbox
コンポーネント値は、常にオブジェクトではなくブール値に設定する必要があります。図11-23に示すように、選択状態と選択解除状態を切り替えます。
selectBooleanCheckbox
コンポーネントには、図11-24に示すように、そのコンポーネントが選択されてもクリアされてもいないことを示す第3の混合状態も存在します。混合状態のチェック・ボックスをクリックすると、そのボックスは選択された状態になります。チェック・ボックスは選択された状態とクリアされた状態の間で切り替わりますが、クリックや他のクリック操作によって混合状態に戻ることはありません。
selectBooleanRadio
コンポーネントにはブール値の選択肢が表示され、常にブール値に設定する必要があります。selectBooleanCheckbox
コンポーネントとは異なり、selectBooleanRadio
コンポーネントを使用すると、同じgroup
属性を使用してselectBooleanRadio
コンポーネントをグループ化できます。
たとえば、ユーザーが10歳から18歳までの年齢かどうかを決定する1つのブール値と、ユーザーが19歳から100歳までの年齢かどうかを決定する別のブール値があるとします。図11-25に示すように、2つのselectBooleanRadio
コンポーネントをページの任意の場所に配置でき、これらは隣り合っている必要はありません。ページ内での物理的な配置にかかわらず、同じgroup
値を共有するかぎり、これらの選択は相互に排他的になります。
ヒント
各selectBooleanRadio
コンポーネントは、一意のブール値にバインドされている必要があります。
selectOneRadio
コンポーネントを使用して、図11-26に示すように、ユーザーが単一値を選択できるラジオ・ボタンのリストを作成します。
selectManyCheckbox
コンポーネントを使用して、図11-27に示すように、ユーザーが1つ以上の値を選択できるチェックボックスのリストを作成します。
selectOneListbox
コンポーネントを使用すると、図11-28に示すように、ユーザーは影付きのボックスに表示された項目のリストから値を1つ選択できるコンポーネントを作成できます。
図11-28 selectOneListboxコンポーネント
selectManyListbox
コンポーネントは、ユーザーが項目リストから多くの値を選択できるコンポーネントを作成するものです。図11-29に示すように、このコンポーネントには、チェック・ボックスのリストの先頭に表示される「すべて」チェック・ボックスが含まれます。
図11-29 selectManyListboxコンポーネント
selectOneChoice
コンポーネントを使用すると、ユーザーが項目のドロップダウン・リストから値を1つ選択できるメニュー形式のコンポーネントを作成できます。selectOneChoice
コンポーネントは、ドロップダウン・リストの項目が比較的少ない場合に使用します。
ベスト・プラクティス:
多数の項目が必要な場合は、inputComboboxListOfValues
コンポーネントを使用します。「値リスト・コンポーネントの使用方法」を参照してください。
図11-30に、selectOneChoice
コンポーネントを示します。
図11-30 selectOneChoiceコンポーネント
図11-31に示すように、selectOneChoice
コンポーネントは、コンパクト・モードで表示されるように構成できます。コンパクト・モードでは、入力フィールドが小さなアイコンに置き換えられます。
図11-31 コンパクト・モードのselectOneChoiceコンポーネント
ユーザーがアイコンをクリックすると、図11-32に示されているようにドロップダウン・リストが表示されます。
図11-32 コンパクト・モードのselectOneChoiceコンポーネントのリスト
selectManyChoice
コンポーネントを使用すると、ユーザーが項目のドロップダウン・リストから複数の値を選択できるメニュー形式のドロップダウン・コンポーネントを作成できます。このコンポーネントは、選択項目のリストの先頭に表示される「すべて」選択項目を含めるように構成できます。図11-33に示すように、選択肢の数が15より多い場合は、スクロールバーが表示されます。
図11-33 selectManyChoiceコンポーネント
デフォルトでは、すべてのselectItem
子コンポーネントは、ページがレンダリングされるときに、selectManyChoice
コンポーネントの作成時に作成されます。ただし、リスト項目がアクセスされる方法が低速な場合は、パフォーマンスが低下することがあります。この遅延は、ユーザーが項目を1回選択し、その後のアクセス時に変更しない可能性が高い場合に、特に問題になることがあります。
たとえば、ページに表示される内容のフィルタに使用されるselectManyChoice
コンポーネントがあり、子selectItem
コンポーネントの値がWebサービスからアクセスされるとします。ユーザーが、ページにアクセスするたびに選択内容を変更する可能性が低いことも想定します。デフォルトでは、ページがレンダリングされるたびに、ユーザーが実際に参照する必要があるかどうかにかかわらず、すべてのselectItems
を構築する必要があります。かわりに、selectManyChoice
コンポーネントのcontentDelivery
属性をimmediate
(デフォルト)からlazy
に変更できます。lazy
設定により、selectItem
コンポーネントはユーザーがドロップダウンをクリックしたときにのみ作成されます。
immediate
とlazy
のどちらでも、ユーザーが選択を行うと、選択されたselectItem
コンポーネントの値がフィールドに表示されます。ただし、遅延コンテンツ配信が使用されている場合は、その後のアクセス時に、選択された値をselectItem
コンポーネントから取得する(これにより、これらのコンポーネントの作成が必要になります)かわりに、値がlazySelectedLabel
属性から取得されます。この属性は、通常、選択された項目を表すStrings
の配列を返すメソッドにバインドされます。selectItem
コンポーネントは、ユーザーがドロップダウンを使用してこれらを表示または変更するまで作成されません。
selectManyChoice
コンポーネントでlazy
配信メソッドを使用する場合は、制限事項があります。selectManyChoice
コンポーネントのコンテンツ配信とその制限事項の詳細は、「SelectManyChoiceコンポーネントのcontentDelivery属性に関する必知事項」を参照してください。
次のコンポーネントの場合、コントロールの上にラベルを表示させるには、これらをpanelFormLayout
コンポーネント内に配置します。
-
selectOneChoice
-
selectOneRadio
-
selectOneListbox
-
selectManyChoice
-
selectManyCheckbox
-
selectManyListbox
次のコンポーネントでは、セキュリティ上の理由から、属性disabled
、immediate
、readOnly
、required
、requireMessageDetail
およびvalue
をクライアント上のJavaScriptから設定することはできません(詳細は、「クライアントでのプロパティ値の設定方法」を参照してください)。
-
selectOneChoice
-
selectOneRadio
-
selectOneListbox
-
selectBooleanRadio
-
selectBooleanCheckbox
-
selectManyChoice
-
selectManyCheckbox
-
selectManyListbox
選択コンポーネントの使用方法
選択コンポーネントの追加手順は、どのコンポーネントでも同じです。まず、選択コンポーネントを追加して属性を構成します。次に、リスト内の個々の項目用に任意の数のselectItem
コンポーネントを追加して構成します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「選択コンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
選択コンポーネントを使用する手順:
SelectManyChoiceコンポーネントのcontentDelivery属性に関する必知事項
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
の値をリクエスト・スコープに格納することはできません。ポストバックでは、value属性はクライアントから返された内容をデコードするかわりにモデルからアクセスされます。値がリクエスト・スコープに格納される場合、その値は空になります。リクエスト・スコープには値を格納しないでください。 -
ポストバックでは、コンバータはコールされません。ポストバックをコンバータに依存している場合は、遅延コンテンツ配信を使用しないでください。
シャトル・コンポーネントの使用方法
ADFのシャトル・コンポーネントは、2つのリスト・ボックスと、そのボックス間でアイテムを移動するボタンで構成されます。使用可能な値リスト・ボックスからユーザーが1つまたは複数を選択し、選択済の値リストにそれを追加できます。
selectManyShuttle
およびselectOrderShuttle
コンポーネントを使用すると、ユーザーが一方のリスト・ボックスからもう一方のリスト・ボックスに項目を移動するための2つのリスト・ボックスおよびボタンを作成できます。ユーザーは、先行(「使用可能な値」)リスト・ボックスと後続(「選択した値」)リスト・ボックスの間を移動させる単一の項目または複数の項目を選択できます。どちらのコンポーネントでも、コントロールの上にラベルを表示する場合には、それらをpanelFormLayout
コンポーネント内に配置します。
図11-34に、selectManyShuttle
コンポーネントを示します。
図11-35に示すように、selectOrdershuttle
コンポーネントには、ユーザーが「選択した値」リスト・ボックスの値を並べ替えるために使用する上矢印および下矢印ボタンを追加で含めることができます。リストを並べ替えると、ValueChangeEvent
イベントが送信されます。readOnly
属性をtrue
に設定した場合は、並べ替える値が、後続リスト(「選択した値」)に表示される選択済の値であることを確認します。
他のselectMany
コンポーネント同様、これらのコンポーネントのvalue
属性は、含まれるselectItem
コンポーネントの1つの値と一致する値のList
またはArray
である必要があります。selectItems
の1つの値がList
またはArray
にある場合、その項目は後続リストに表示されます。selectManyListbox
コンポーネントをselectManyShuttle
に直接変換することもできます。リストボックスでどの項目が選択されているかを確認するvalue
にかわり、これがselectOrderShuttle
コンポーネントの後続リストに表示される項目の選択に影響します。
その他の選択コンポーネント同様、項目のリストまたは配列は、selectManyShuttle
またはselectOrderShuttle
コンポーネントにネストしているselectItem
コンポーネントで構成されています。次の例に、ユーザーがファイル・タイプのリストから上位5つのファイル・タイプを選択できるselectOrderShuttle
コンポーネントのサンプルを示します。
<af:selectOrderShuttle value="#{helpBean.topFive}" leadingHeader="#{explorerBundle['help.availableFileTypes']}" trailingHeader="#{explorerBundle['help.top5']}" simple="true" id="sos1"> <af:selectItem label="XLS" id="si1"/> <af:selectItem label="DOC" id="si2"/> <af:selectItem label="PPT" id="si3"/> <af:selectItem label="PDF" id="si4"/> <af:selectItem label="Java" id="si5"/> <af:selectItem label="JWS" id="si6"/> <af:selectItem label="TXT" id="si7"/> <af:selectItem label="HTML" id="si8"/> <af:selectItem label="XML" id="si9"/> <af:selectItem label="JS" id="si10"/> <af:selectItem label="PNG" id="si11"/> <af:selectItem label="BMP" id="si12"/> <af:selectItem label="GIF" id="si13"/> <af:selectItem label="CSS" id="si14"/> <af:selectItem label="JPR" id="si15"/> <af:selectItem label="JSPX" id="si16"/> <f:validator validatorId="shuttle-validator"/> </af:selectOrderShuttle>
selectOrdershuttle
コンポーネントのreorderOnly
属性をtrue
に設定すると、移動機能が無効にされ、「選択した値」リスト・ボックスのみが表示されます。図11-36に示すように、ユーザーは、リスト・ボックス内の項目の並替えのみを実行できます。
selectManyShuttleまたはselectOrderShuttleコンポーネントの追加方法
シャトル・コンポーネントの追加手順は、どちらのコンポーネントも同じです。まず、選択コンポーネントを追加して属性を構成します。次に、リスト内の個々の項目用に任意の数のselectItem
コンポーネントを追加して構成します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「シャトル・コンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
selectManyShuttleまたはselectOrderShuttleコンポーネントを追加する手順:
選択イベントのクライアント・リスナーの使用方法に関する必知事項
項目の選択のイベントに応答して処理を実行するJavaScriptコードを作成することで、ユーザーが選択された各項目をあるリストから別のリストに移動する前に、その項目に関する情報をユーザーに提供できます。たとえば、コードでその項目に関する追加情報を取得し、ユーザーが項目を移動するかどうかの選択を行えるようにポップアップとして表示できます。図11-37に、ユーザーがMeyersを選択し、ポップアップがこの選択に関する追加情報を提供するselectManyShuttle
コンポーネントを示します。
図11-37 selectionListenerが含まれるselectManyShuttle
この機能は、selectManyShuttle
またはselectOrderShuttle
コンポーネントにクライアント・リスナーを追加し、このイベントを処理するJavaScriptメソッドを作成して実装します。JavaScriptコードは、ユーザーがリストから項目を選択すると実行されます。イベントのクライアント・リスナーの詳細は、「クライアント・イベントのリスニング」を参照してください。
選択イベントを処理するシャトル・コンポーネントにクライアント・リスナーを追加する方法:
次の例では、AdfShuttleUtils.getLastSelectionChange
をコールして、最後に選択された項目の値が取得されています
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コンポーネントの使用方法
ADFのrichTextEditorコンポーネントを使用すると、フォーマットされた入力コンテンツをユーザーが編集、追加できるようになります。richTextEditorには、コンテンツを書式設定するオプションがいくつか用意されています。
richTextEditor
コンポーネントは、書式設定されたテキストを使用できる入力フィールドを提供します。ラベル、テキストおよびメッセージもサポートされています。ユーザーは、フォント名、サイズ、スタイルの変更、順序付けられたリストの作成、およびテキストの両端の調整を実行でき、その他の様々な機能も使用できます。richTextEditor
コンポーネントは、HTMLソース・ファイルの編集にも使用できます。2つのコマンド・ボタンを使用して、標準の書式設定されたテキストの編集とHTMLソース・ファイルの編集を相互に切り替えられます。図11-38に、標準のリッチ・テキスト編集モードのリッチ・テキスト・エディタ・コンポーネントを示します。
図11-39に、ソース・コード編集モードのエディタを示します。
次にサポートされているその他の機能を示します。
-
フォント・タイプ
-
フォント・サイズ
-
リンク付け/リンク解除
-
スタイルのクリア
-
元に戻す/やり直し
-
太字/イタリック/下線
-
下付き/上付き
-
調整(左、中央、右、均等)
-
順序付けられたリスト/順序付けられていないリスト
-
インデント
-
文字色/背景色
-
リッチ・テキスト編集モード/ソース・コード編集モード
-
リッチ・テキスト編集ツールバーのインライン表示モード/ポップアップ表示モード
リッチ・テキスト・エディタの値(入力されたテキスト)は、整形式の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
コンポーネントは、追加の情報の表示やユーザー・インタフェース要素の追加に使用できるフッター・ファセットを提供します。たとえば、図11-40では、フッター・ファセットに文字カウンタを持つrichTextEditor
コンポーネントを示します。
図11-40 フッター・ファセットに文字カウンタを持つrichTextEditorコンポーネント
「図11-40 フッター・ファセットに文字カウンタを持つrichTextEditorコンポーネント」の説明
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などに保持されている事前フォーマット済テキストを指定できます。
デフォルトでは、richTextEditor
コンポーネントのツールバーでは、図11-41に示すように、ユーザーはフォント、フォントのサイズと太さ、テキストの文字位置、表示モードなどの多くの側面を変更できます。
図11-42に、カスタマイズされているツールバーを示します。ツールバー・ボタンの多くは削除されており、カスタム・ツールバー・ボタンおよびメニューのあるツールバーが追加されています。
図11-43に示すように、richTextEditor
が不要で、ツールバーをインラインで表示しているとき(デフォルトの動作)に、ツールバーをポップアップ・モードで表示するように構成できます。
richTextEditorコンポーネントの追加方法
richTextEditor
コンポーネントを追加した後で、テキストを特定の場所に挿入できるように構成し、ツールバーをカスタマイズすることもできます。「richTextEditorコンポーネントへのテキストの挿入機能を追加する方法」および「ツールバーのカスタマイズ方法」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「richTextEditorコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
richTextEditorコンポーネントを追加する手順:
ヒント
richTextEditor
コンポーネントの幅は、全幅または100%に設定できます。ただし、これが確実に機能するのは、エディタがジオメトリ管理の親コンポーネントに配置されている場合のみです。panelFormLayout
またはpanelGroupLayout
などの配置レイアウト・コンテナに配置されていると、機能しない場合があります。「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
richTextEditorコンポーネントへのテキストの挿入機能を追加する方法
richTextEditor
コンポーネントにテキストを挿入できるようにするには、テキストの挿入に使用されるコマンド・コンポーネントの子としてrichTextEditorInsertBehavior
タグを追加します。
始める前に:
リッチ・テキスト・エディタ・コンポーネントに関する知識が役立つ場合があります。「richTextEditorコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
「richTextEditorコンポーネントの追加方法」の説明に従い、richTextEditor
コンポーネントを作成する必要があります。clientComponent
属性をtrue
に設定します。
テキスト挿入動作を追加する手順:
ツールバーのカスタマイズ方法
作成するカスタム・ファセットに、追加するツールバーおよびツールバー・ボタンを配置します。次に、含まれている項目の表示方法および表示場所を決定するキーワードとともに、ツールバーの属性からファセットを参照します。
richTextEditor
コンポーネントにテキストを挿入できるようにするには、テキストの挿入に使用されるコマンド・コンポーネントの子としてrichTextEditorInsertBehavior
タグを追加します。
始める前に:
リッチ・テキスト・エディタ・コンポーネントに関する知識が役立つ場合があります。「richTextEditorコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
ツールバーをカスタマイズする手順:
UIWebViewユーザー・エージェントのrichTextEditorについて
UIWebView
は、iOSアプリケーションで使用されるユーザー・インタフェース制御です。開発者はADFアプリケーション内にWebブラウザを埋め込むことができ、アプリケーションを終了せずにWebページにアクセスできます。
ADF Facesは、ADF FacesアプリケーションのrichTextEditor
に対して、デフォルトのUIWebView
ユーザー・エージェントをサポートするようになりました。UIWebView
ユーザー・エージェントは、異なるHTMLページにアクセスするときにアプリケーションがWebサーバーに対して自身を識別するために送信する短い文字列です。
ADFアプリケーションがWebサイトに接続すると、HTTPヘッダーにUser-Agent
フィールドが含まれます。ユーザー・エージェント・フィールドの内容はアプリケーションによって異なります。各アプリケーションには、独自の特徴的なユーザー・エージェントがあります。基本的に、ユーザー・エージェントはブラウザ・バージョンとデバイスのオペレーティング・システムを識別します。
Webサーバーはこの情報を使用して、様々なWebページを様々なWebブラウザやオペレーティング・システムに提供できます。たとえば、Webサイトからモバイル・ブラウザにモバイル・ページを送信したり、サポートされているブラウザに、ブラウザをアップグレードしてください
というメッセージを送信したりできます。次の例に、アプリケーションの典型的なUIWebView
ユーザー・エージェントを示します。
Mozilla/5.0 (iPhone; CPU iPhone OS 8_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12D508
注意:
Oracle ADFは、デスクトップ・デバイス用とモバイル・デバイス用に異なるブラウザをサポートしています。サポートされているブラウザのリストについては、OTNのドキュメント・ページhttp://www.oracle.com/technetwork/developer-tools/jdev/documentation/index.html
で、ご使用のリリースに対応した動作保証情報リンクをクリックしてください。
ファイルのアップロード機能の使用方法
ADFでは、単一または複数のファイルをアップロードして入力を提供できます。すでに発行したファイルを更新することもできます。
inputFile
コンポーネントを使用すると、ユーザーにファイルのアップロード機能および更新機能を提供できます。このコンポーネントを使用すると、ユーザーはローカル・ファイルを選択し、サーバー上の選択可能な場所にアップロードできます(ファイルをサーバーからユーザーにダウンロードするには、「ファイルをダウンロードするためのアクション・コンポーネントの使用方法」を参照してください)。
inputFile
コンポーネントにより、ファイルのアップロード時に標準のValueChangeEvent
イベントが送信され、ロード・プロセスが透過的に管理されます。inputFile
コンポーネントのvalue
プロパティは、ファイルのアップロード時に、org.apache.myfaces.trinidad.model.UploadedFile
クラスのインスタンスに設定されます。
アップロード・プロセスを開始するには、まず、アップロードを許可するようにページのフォームを構成する必要があります。次に、図11-44に示すように、ファイルのアップロードに使用できるコマンド・ボタンなどのアクション・コンポーネントを作成します。
ファイルがアップロードされ、(最初のロードが成功した後またはその値が初期値として指定された後に)inputFile
の値がnull以外の場合は、「更新」ボタンを作成できます。図11-45に示されているように、このボタンは「参照」ボタンのかわりに表示されます。これにより、ユーザーはinputFile
コンポーネントの値を変更できます。
uploadType
属性にautoまたはmanualを設定すると、図11-46に示されているように、ファイルのアップロード中に進行状況バーが表示されます。
readOnly
プロパティをtrue
に設定すると、特定のファイルのみをロードできるようにコンポーネントを指定することもできます。図11-47に示すように、このモードでは、指定されたファイルのみをロードできます。
図11-47 読取り専用モードのinputFileコンポーネント
inputFile
コンポーネントでは、デフォルトでファイルを1つのみアップロードできますが、複数のファイルをアップロードするように構成することもできます。図11-48に、複数のファイルをアップロードするように構成されたinputFile
コンポーネントを示します。
図11-48 複数ファイル用のinputFileコンポーネント
ユーザーは、「参照」ボタンで表示される「ファイルのアップロード」ダイアログで複数のファイルを選択するか、コンポーネントのドロップ・セクションに複数のファイルをドラッグ・アンド・ドロップできます。ドロップ・セクションにファイルが表示されたら、図11-49に示すように、「アップロード」をクリックしてファイルをアップロードします。
図11-49 アップロード準備のできたファイルを表示したinputFileコンポーネント
JavaScript APIを使用すると、カスタム・ユーザー・インタフェース要素を使用するようにinputFile
コンポーネントを構成できます。たとえば、図11-50に、選択したファイルの簡単な説明を入力するために使用できる説明フィールドを持つinputFile
コンポーネントを示します。
inputFile
コンポーネントを構成するために使用できるJavascript APIの詳細は、Oracle ADF Faces JavaScript APIリファレンスのクラスAdfFileUploadManager
のドキュメントを参照してください。
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
インタフェースのインスタンスです。このため、ファイルがアップロードされると、inputFile
コンポーネントの値はorg.apache.myfaces.trinidad.model.UploadedFile
のインスタンスになります。したがって、値(つまりファイル自体)にアクセスする必要がある場合は、このインタフェース用のAPIを使用する必要があります。binding
属性を通じてコンポーネントにアクセスすると、コンポーネントにのみアクセスし、アップロード・ファイルにはアクセスしません。
注意:
org.apache.myfaces.trinidad.model.UploadedFile
インタフェースのAPIを使用すると、ファイルの実際のバイト・ストリーム、ファイル名、MIMEタイプおよびサイズを取得できます。APIを使用して、ファイルのアップロード元に関するパス情報をクライアントから取得することはできません。
アップロードされたファイルは、ファイルとしてファイル・システムに格納できますが、メモリーに格納することもできます。この違いがAPIよって表面化されることはありません。フィルタを使用すると、リクエストの完了後、確実にUploadedFile
コンテンツがクリーン・アップされます。このため、複数のリクエストにわたってUploadedFile
オブジェクトを有効にキャッシュすることはできません。ファイルを保持する必要がある場合は、リクエストが完了する前にファイルを永続記憶域にコピーする必要があります。
たとえば、例11-1
に示すように、ファイルを保存するかわりに、マネージドBeanをValueChangeEventイベントへのレスポンスとして使用し、ファイルのアップロードが成功したという内容のメッセージを追加します。
また、例11-2に示すように、値をマネージドBeanに直接バインドすることでアップロードを処理できます。
注意:
inputFile
コンポーネントを使用して複数のファイルをアップロードする場合、event.getNewValue()
の戻り型はUploadedFile
ではなく、List<UploadedFile>
になります。また、マネージドBeanの値バインディングも、UploadedFile
ではなく、List<UploadedFile>
になります。
例11-1 アップロード・メッセージを表示するためのvalueChangeListenerの使用
JSF Page Code -----> <af:form usesUpload="true" id="f1"> <af:inputFile label="Upload:" valueChangeListener="#{managedBean.fileUploaded}" id="if1"/> <af:button 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() } } }
例11-2 例11-13 マネージドBeanへの値のバインド
JSF Page Code ----> <af:form usesUpload="true"> <af:inputFile label="Upload:" value="#{managedBean.file}" id="if1"/> <af:button 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; }
inputFileコンポーネントの使用方法
Javaクラスは、inputFile
コンポーネントにバインドする必要があります。このクラスにより、アップロードしたファイルの値が含まれます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「ファイルのアップロード機能の使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputFileコンポーネントを追加する手順:
複数のファイルをアップロードするようにinputFileコンポーネントを構成する方法
inputFile
コンポーネントで複数のファイルをアップロードするには、uploadType
およびmaximumFiles
属性を使用します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「ファイルのアップロード機能の使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
複数のファイルをアップロードするようにinputFileコンポーネントを構成するには:
アップロードされたファイルをドロップ・セクションから削除するか、アップロード中のファイルのアップロードを取り消すには、ファイル名およびプログレス・バーの横にある「取消」アイコンをクリックします。すべてのファイルのアップロードを取り消すには、図11-51に示すように「アップロードの停止」ボタンをクリックします。
図11-51 inputFileコンポーネントでアップロード中のファイル
一時的なファイルの格納に関する必知事項
ADF Facesではアップロードされるファイルが(ディスクまたはメモリーに)一時的に格納されるため、アップロード・ファイルでハード・ドライブやメモリーを一杯にしようとするサービス拒否攻撃を未然に防ぐため、デフォルトでは、許容される着信アップロード・リクエストのサイズが制限されています。デフォルトでは、1つのリクエストで最初の100KBがメモリーに格納されます。これが一杯になると、ディスク領域が使用されます。この場合も、デフォルトでは、すべてのファイルに対し、1つのリクエストで2,000KBのディスク領域に制限されます。これらの制限を超えると、フィルタによりEOFException
がスローされます。
ファイルは、デフォルトで、java.io.File.createTempFile()
メソッドによって使用される一時ディレクトリに格納されます。これは通常、システム・プロパティjava.io.tmpdir
によって定義されます。明らかに、これは一部のアプリケーションでは不十分であるため、次の例に示すように3つのサーブレット・コンテキスト初期化パラメータを使用して、これらの値を構成できます。
<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
クラスを置き換えると、前述の例にリストされているパラメータは無関係になり、デフォルトのUploadedFileProcessor
クラスによってのみ処理されます。
<uploaded-file-processor>
要素は、oracle.adf.view.rich.webapp.UploadedFileProcessor
インタフェースを実装するクラスの名前である必要があります。このAPIにより、個々のアップロード・ファイルが着信リクエストから取得される際に処理され、そのコンテンツを残りのリクエストで使用できるようになります。大部分のアプリケーションは、デフォルトのUploadedFileProcessor
クラスで十分ですが、大規模ファイルのアップロードをサポートする必要のあるアプリケーションでは、リクエスト中にADF Facesで一時記憶域を処理するかわりに、ファイルをただちに最終的な宛先に格納することでパフォーマンスを向上させます。
複数のファイルのアップロードに関する必知事項
inputFile
コンポーネントは、HTML5を使用してドラッグ・アンド・ドロップ機能や複数ファイルのアップロードをサポートします。HTML5をサポートしないブラウザでは、図11-52に示すように、ドラッグ・アンド・ドロップ機能と複数ファイルのアップロードにJavaアップレットが使用されます。
HTML5をサポートしていないブラウザでJavaも使用できない場合は、inputFile
コンポーネントにドロップ・セクションは表示されません。
単一ファイル・アップロード・モードの場合、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の動作保証情報に関するページを参照してください。
http://www.oracle.com/technetwork/developer-tools/jdev/ documentation/index.html
すべてのファイルをアップロードしたら、必ずフォームを送信する必要があります。これを行わないと、inputFile
コンポーネントのデータはサーバーにアップロードされません。inputFile
コンポーネントでautoSubmit
がtrue
に設定されている場合は、すべてのファイルのアップロードが終わるとフォームが自動的に送信されます。フォームの送信が完了すると、inputFile
コンポーネントがリフレッシュされてドロップ・セクションのファイル・リストが空になり、さらにファイルをアップロードできるようになります。アップロードされたファイルのリストを表示するには、例11-1
に示すように、ValueChangeListenerを追加するか、値をマネージドBeanにバインドします。
inputFileコンポーネントのユーザー・インタフェースのカスタマイズに関する必知事項
inputFile
コンポーネントのユーザー・インタフェースは、displayMode
属性を使用してカスタマイズできます。displayMode
属性をnone
に設定すると、ユーザー・インタフェースが表示されないため、ファイルをアップロードするAPIを起動するためのカスタム・ユーザー・インタフェースを開発者が作成する必要があります。この属性をdropArea
に設定すると、ファイルのドラッグ・アンド・ドロップをサポートするドロップ領域がレンダリングされます。カスタム・ユーザー・インタフェースの残りの部分を追加するのは、開発者の責任です。inputFile
コンポーネントのカスタム・インタフェースは、それが複数のファイルをアップロードするように構成されている場合にのみ表示されます。
図11-53に、displayMode
の値が異なるinputFile
コンポーネントを示します。
図11-53 inputFileコンポーネントのdisplayMode属性の値
次の例に、displayMode
がdropArea
に設定され、ファイルの参照とアップロードのために入力フィールドおよびボタンを追加してカスタマイズされた、inputFile
コンポーネントを示します。アップロードされるファイルの説明を入力するために、inputText
コンポーネントが追加されています。
<af:inputFile binding="#{editor.component}" id="bound1" immediate="true" maximumFiles="-1"valueChangeListener="#{demoFile.fileUpdate}" displayMode="dropArea" uploadType="manual"contentStyle="width:200px; height:100px"/> <af:panelFormLayout maxColumns="2" rows="1"> <input type="file" id="dmoTpl:cidf1"/> <af:inputText clientComponent="true" id="cidd1" label="Please Enter a Description"/> </af:panelFormLayout> <af:panelFormLayout maxColumns="2" rows="2"> <af:panelLabelAndMessage for="cidn1" label="Filename:" id="plm1"> <af:outputText clientComponent="true" id="cidn1"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage for="cids1" label="Filesize:" id="plm2"> <af:outputText clientComponent="true" id="cids1"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage for="cidp1" label="% Complete:" id="plm3"> <af:outputText clientComponent="true" id="cidp1"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage for="cidst1" label="Status:" id="plm4"> <af:outputText clientComponent="true" id="cidst1"/> </af:panelLabelAndMessage> </af:panelFormLayout> <af:panelFormLayout maxColumns="2" rows="1"> <af:button id="cup1" text="Upload"> <af:clientListener method="uploadClick" type="click"/> </af:button> <af:button id="cl1" text="Clear"> <af:clientListener method="clearQueue" type="click"/> </af:button> </af:panelFormLayout>
図11-54に実行時のinputFile
コンポーネントを示します。
JavaScript APIメソッドを使用して、inputFile
コンポーネントの動作をカスタマイズできます。「Oracle ADF Faces JavaScript APIリファレンス」を参照してください。
コード・エディタの使用
コード・エディタを使用して、ユーザーは実行時に出先でコードを編集できます。これはADF af:codeEditorコンポーネントを使用して実現されます。
af:codeEditor
コンポーネントを使用すると、ブラウザ内でコード編集を実行できるほか、Fusion Webアプリケーションで実行時にプログラム・コードを表示および編集できます。コード・エディタ・コンポーネントの入力フィールドはテキストを受け入れます。また、ツールバー、キーワードの構文的な色分け、コード補完、基本検証、エラーのハイライト、ログ用のメッセージ・ペインなど、いくつかの一般的なコード編集機能も備えています。コード・エディタを使用すると、ユーザーはエラーや警告に対して個別のIDEソフトウェアを実行してプログラム・コードをテストする必要がなくなります。
コード・エディタ・コンポーネントは、図11-55に示すように、JavaScript、XML、Groovyの各言語をサポートします。
図11-55 JavaScript、XMLおよびGroovyをサポートするコード・エディタ・コンポーネント
「図11-55 JavaScript、XMLおよびGroovyをサポートするコード・エディタ・コンポーネント」の説明
コード・エディタ・コンポーネントには、次の機能があります。
-
行番号付け
-
元に戻す操作および操作の再実行(キーボード・ショートカット[Ctrl]+[Z]および[Ctrl]+[Y]を使用しても実行可能)
-
特定の行へのジャンプ
-
検索および置換
-
テキストの色分け
-
構文や検索した用語のハイライト
-
コード補完
-
自動インデント
-
自動書式設定
-
エラー・メッセージ用のメッセージ・ペイン
-
1000行を超えるコードを持つ大きなファイルのサポート
コード・エディタでコードを追加または編集するには、エディタ領域をクリックして入力を開始するだけです。[Ctrl]+[Space]を押すと、コード補完のヒントのコンテキスト・リストが表示されます。その他のエディタ機能を使用するには、F2を押して、編集モードを有効化します。編集モードに入ると、ユーザーは[Tab]を使用してコードの行をインデントすることができ、[Shift]+[Tab]を使用して逆インデントすることができます。編集モードが無効な場合、[Tab]および[Shift]+[Tab]はコンポーネント間のナビゲーションを可能にします。
ユーザーは、ツールバー(図11-56を参照)を使用して、変更の取消しと再実行、テキストの検索と置換、および特定の行番号へのジャンプ操作を実行できます。
図11-56 コード・エディタのツールバー
文字列を検索するには、「検索」フィールドに検索条件を入力し、「次を検索」または「前を検索」アイコンをクリックして、コード・エディタ内の検索文字列の位置を特定します。図11-57に、コード・エディタで文字列検索に使用される、ツールバーの「検索」フィールドを示します。
図11-57 コード・エディタのツールバーの「検索」フィールドの使用
大/小文字を区別して文字列を検索したり、検索した用語を置換したりするには、「検索と置換」アイコンから「検索と置換」ダイアログを開いて、図11-58に示すような操作をダイアログから実行します。
図11-58 コード・エディタの「検索と置換」ダイアログの使用
注意:
「完全一致」チェック・ボックスが選択されている場合は、「検索と置換」ダイアログでエディタの英語以外の文字列を検索することはできません。ただし、「すべて置換」ボタンを使用する場合は、「完全一致」チェック・ボックスが選択されていても、英語以外の文字列のすべてのインスタンスを置換できます。
特定の行番号にジャンプするには、図11-59に示すように、「指定行に移動」フィールドに数字を入力して、「指定行にジャンプ」をクリックします。
図11-59 コード・エディタの「指定行に移動」の機能の使用
コード・エディタ・コンポーネントでは、すべての警告とエラーを付属のメッセージ・ペインにリストするように構成できます。図11-60に、サーバーで実行されているXMLパーサーで検出されたすべてのXMLエラーをリストしたメッセージ・ペインを示します。
図11-60 コード・エディタのメッセージ・ペイン
メッセージ・ペインは、コード・エディタのテキスト領域の下にある編集不可能な領域です。コードのコンパイルの検証サポートや、エラーまたは警告メッセージなど、コードに関するステータス情報の表示に使用されます。メッセージ・ペインのメッセージをクリックすると、コード・エディタの対応する各コード行に移動できます。
また、プログラムを使用して様々なタイプのマーカーを追加するようにコード・エディタを構成することもできます。図11-61に、クリティカル・エラー、エラー、警告および情報の各マーカーが表示されたコード・エディタを示します。
codeEditorコンポーネントの追加方法
codeEditor
コンポーネントを追加する場合は、language
属性を使用してコード・エディタで使用するプログラミング言語を構成します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「コード・エディタの使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「入力コンポーネントおよびフォームの追加機能」を参照してください。
codeEditorコンポーネントを追加するには: