| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.2.1.1.0) E77398-02 |
|
 前 |
 次 |
inputTextなど)、値の選択(inputNumber、inputRange、inputColor、inputDateおよびselectコンポーネントなど)、テキストの編集(richTextEditorなど)、およびファイルのロード(inputFileなど)を行えます。
この章の内容は次のとおりです。
サイズが大きくなる可能性のある項目リスト、またはオブジェクト間の関係を表す可能性のある(別のオブジェクトの外部キーである属性を表すリストを作成する場合など)項目リストから選択する入力コンポーネントを使用する場合には、値リスト・コンポーネントを使用できます。これらのコンポーネントの詳細は、 「値リスト・コンポーネントの使用方法」を参照してください。
入力コンポーネントは、様々な形式のユーザー入力を受け入れます。最も一般的な形式は、フォームの内部に表示され、フォームの送信時に送信されるテキスト、数値、日付および選択リストです。入力された値または選択は、さらに処理される前に検証および変換できます。図11-1は、ADF Facesの標準入力コンポーネントを示しています。
図11-1 ADF Faces入力コンポーネント
ADF Faces入力コンポーネントには、図11-2に示すように、ユーザーが1つまたは複数の値を選択できるいくつかのコンポーネントも含まれます。
図11-2 コンポーネントの選択
多くの場合、入力コンポーネントは、ユーザー入力用のフォームの作成に使用されます。たとえば、File Explorerアプリケーションには、ユーザーが新規ファイルを作成できるフォームが含まれます。図11-3に示すように、入力コンポーネントでは、ユーザーが名前やサイズの入力、権限の選択、キーワードとファイルの説明の追加を行うことができます。アスタリスクで示されているように、「名前」フィールドは必須です。ユーザーが値を入力しなかった場合は、エラー・メッセージが表示されます。その検証および関連エラー・メッセージは、コンポーネントごとに構成することも(required属性またはrequiredMessageDetail属性を設定して)、サーバーで処理することもできます(showRequired属性を設定して)。
図11-3 入力コンポーネントを使用したフォーム
richTextEditorコンポーネントには、ユーザーに単純なテキスト以外を入力させる場合に必要になる、異なるフォント、サイズ、行揃えおよびその他の編集機能を使用した書式設定可能な、多数の行にわたるリッチ・テキスト入力が用意されています。たとえば、richTextEditorをWebベースのディスカッション・フォーラムで使用して、図11-4に示すように、ユーザーが公開する必要のあるテキストを書式設定できるようにすることができます。
図11-4 ディスカッション・フォーラムで使用されるrichTextEditor
inputFileコンポーネントでは、ユーザーはアプリケーション・サーバーにアップロードするローカル・ファイルを参照できます。たとえば、電子メール・メッセージでは、図11-5に示すようにユーザーがメッセージにファイルを添付できます。
図11-5 fileUploadコンポーネント
ADF Faces選択コンポーネントを使用すると、ユーザーは値を入力するかわりに項目のリストから選択できるようになります。ADF Facesは、単一選択の選択リストと複数選択の選択リストの両方を提供します。単一選択リストは、図11-6に示すように、オンライン食品注文での目的の飲料など、リストから1つの値を選択するために使用します。
図11-6 ユーザーはselectOneChoiceコンポーネントから1つの値を選択できる
ADF単一選択コンポーネントには、ドロップダウン・リスト(図11-6を参照)、リスト・ボックス、ラジオ・ボタンおよびチェックボックスがあります。
ADF複数選択コンポーネントでは、ユーザーはリストの値を複数選択できます。たとえば、1つの飲料タイプを選択するかわりに、selectManyChoiceコンポーネントでは、図11-7に示すようにユーザーが複数の飲料を選択できます。
図11-7 ユーザーはselectManyChoiceコンポーネントから複数の値を選択できる
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ビジネス・コンポーネントに基づくか、その他のビジネス・サービスに基づくかを問いません)。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされた基本的なページの作成」の章を参照してください。
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内の任意のフィールドで機能させることができます。
多くの場合、JDeveloperを使用してformコンポーネントを追加します。ただし、手動でのformの追加や、特定の属性値を使用したformの構成が必要な場合があります。
始める前に:
formコンポーネントに関する知識が役立つ場合があります。詳細は、「formの定義」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
ページにformを追加する手順:
ページのセクションで値を個別に送信できることが必要な場合は、formコンポーネント内にsubformコンポーネントを追加する必要があります。
始める前に:
formおよびsubformに関する知識が役立つ場合があります。詳細は、「formの定義」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
formコンポーネントをページに追加する必要があります。手順は、「ページへのformの追加方法」を参照してください。
ページにsubformを追加する手順:
ボタン・コンポーネントを追加し、af:resetListenerを使用してそのボタンが他の入力コンポーネントをデフォルト値にリセットするように構成します。リセット・ボタンは、そのformまたはsubform内のコンポーネントでのみ機能します。
始める前に:
formコンポーネントに関する知識が役立つ場合があります。詳細は、「formの定義」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
resetListenerを使用してボタンをページに追加するには:
ピッカー、スライダ、スピン・ボックスなど、入力コンポーネントには多くのバリエーションがありますが、inputTextコンポーネントは、値入力のための基本的な入力コンポーネントです。inputTextコンポーネントは、1行の入力フィールドとして定義することも、rows属性を1より大きい値に設定してテキスト領域として定義することもできます。ただし、リッチ・テキストを入力できるようにする場合は、「richTextEditorコンポーネントの使用方法」で説明されているように、richTextEditorコンポーネントの使用を検討してください。
autoComplete属性を使用して、inputTextコンポーネントでオートコンプリートを使用できます。trueに設定されている場合、コンポーネントは以前のエントリを記憶し、ユーザーがそれらのエントリと一致する値から始まる値を入力したときにそれらのエントリを表示します。
secret属性をtrueに設定することで、パスワードなどの入力値を非表示にできます。その他のADF Facesコンポーネントと同じように、inputTextコンポーネントではラベル、テキストおよびメッセージがサポートされています。このコンポーネントをラベルなしで表示する場合は、simple属性をtrueに設定します。図11-8に、1行のinputTextコンポーネントを示します。
図11-8 1行のinputTextコンポーネント
rows属性を使用して、inputTextコンポーネントで複数行のテキストを表示できます。rows属性を1より大きい値に設定し、simple属性をtrueに設定した場合、inputTextコンポーネントは、dimensionsFrom属性を使用してそのコンテナに合せて拡大するように構成できます。コンポーネントが拡大される方法の詳細は、「ジオメトリ管理およびコンポーネントの拡大」を参照してください。図11-10に、複数行のinputTextコンポーネントを示します。
複数のinputTextコンポーネントを追加して、入力フォームを作成できます。図11-9に、2つのinputTextコンポーネントを使用した入力フォームを示します。
図11-9 inputTextコンポーネントで作成したフォーム
コマンド・コンポーネントと連携して、inputTextコンポーネントに特定のテキストを挿入するinsertTextBehaviorタグも構成できます。入力するテキストには、簡単な文字列、またはその他のコンポーネントの値(selectOneChoiceコンポーネントで選択したリスト項目など)を指定できます。たとえば、図11-10は、ユーザーがすでにテキストを入力したinputTextコンポーネントを示しています。
図11-10 テキストが入力済のinputTextコンポーネント
この後、ユーザーがドロップダウン・リストから追加テキストを選択し、コマンド・ボタンをクリックすると、図11-11に示すように、inputTextコンポーネントにそのテキストが表示されます。
図11-11 テキストが挿入済のinputTextコンポーネント
「Webページ上のコンテンツの編成」で説明されている任意のレイアウト・コンポーネントに、inputTextコンポーネントを使用できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「inputTextコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputTextコンポーネントを追加する手順:
insertTextBehaviorタグは、コマンド・コンポーネントと連携して、inputTextコンポーネントに特定のテキストを挿入します。入力するテキストには、簡単な文字列、またはその他のコンポーネントの値(selectOneChoiceコンポーネントで選択したリスト項目など)を指定できます。inputTextコンポーネントにテキストを挿入できるようにするには、テキストの挿入に使用されるコマンド・コンポーネントの子としてinsertTextBehaviorタグを追加します。
注意:
insertTextBehaviorタグでは、サーバー側イベントの配信が自動的に取り消されます。親コマンド・コンポーネントのactionListenerまたはaction属性は無視されます。サーバー側機能をトリガーする必要もある場合は、サーバー側イベントを配信するためにカスタム・クライアント・リスナーを追加する必要があります。詳細は、「クライアントからサーバーへのカスタム・イベントの送信」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「inputTextコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
insertTextBehaviorタグを追加する前に、「inputTextコンポーネントの追加方法」の説明に従ってinputTextコンポーネントを作成する必要があります。clientComponent属性をtrueに設定します。
テキスト挿入動作を追加する手順:
スライダ・コンポーネントを使用すると、スライダ上の位置が値に対応している1つまたは2つのマーカーがあるスライダを作成できます。スライダの値が表示され、一方にはマイナス・アイコンが、もう一方にはプラス・アイコンがあります。ユーザーはマーカーを選択し、スライダ上を移動させて値を選択します。図11-12(水平レイアウト)および図11-13(垂直レイアウト)に示すように、inputNumberSliderコンポーネントにはマーカーが1つあり、ユーザーはスライダから値を1つ選択できます。
図11-12 水平レイアウトのinputNumberSlider
図11-13 垂直レイアウトのinputNumberSlider
図11-14に示すように、inputRangeSliderコンポーネントにはマーカーが2つあり、ユーザーは範囲のエンド・ポイントを選択できます。
図11-14 水平レイアウトのinputRangeSlider
また、inputNumberSliderおよびinputRangeSliderコンポーネントを構成すると、図11-15に示すように再生/一時停止ボタンを追加し、スライダがコンポーネントの増分値の中をアニメーションで移動するようにできます。
図11-15 再生/一時停止ボタン付きのinputRangeSlider
図11-16に示すように、inputNumberSpinboxは、数値用の入力フィールド、および入力フィールドの現在の値を増減させるための上矢印キーと下矢印キーのセットを作成する入力コンポーネントです。
図11-16 inputNumberSpinbox
inputNumberSliderまたはinputRangeSliderコンポーネントを追加する際には、表示される数値の範囲と増分を決定できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「数値入力コンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputNumberSliderまたはinputRangeSliderコンポーネントを追加する手順:
inputNumberSpinboxコンポーネントを使用すると、ユーザーは一連の数値をスクロールして値を選択できるようになります。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「数値入力コンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputNumberSpinboxコンポーネントを追加する手順:
inputColorコンポーネントでは、ユーザーがパレットから色を選択できます。これは、色のコードを入力するテキスト入力フィールドを表します。図11-17に示すように、ポップアップのパレットから色を選択するためのボタンも表示します。
図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コンポーネントを使用すると、ユーザーによる入力テキスト・フィールドへの値の入力や、カラー・チューザからの色の選択が可能になります。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「カラー・チューザおよび日付チューザの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
inputColorコンポーネントを追加する手順:
Label: コンポーネントのラベルを指定します。
Compact: 図11-20に示すように、入力テキスト・フィールドを表示しない場合はtrueに設定します。
図11-20 CompactモードのinputColorコンポーネント
inputDateコンポーネントを使用すると、ユーザーは日付の入力または選択を実行できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「カラー・チューザおよび日付チューザの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
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);
}
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コンポーネント内のカスタム・タイム・ゾーン・リストを示します。
図11-21 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コンポーネント内のカスタム・タイム・ゾーン・リスト
getCustomTimeZoneSelectItemsヘルパーELメソッドは、入力パラメータ・リストがタイムゾーン・オフセットによって保存されていることを前提としています。getCustomTimeZoneSelectItemsメソッドの詳細は、ADF Faces APIのドキュメントを参照してください。
選択コンポーネントを使用すると、ユーザーは項目のリストやグループから、単一または複数の値を選択できるようになります。ADF Facesには、単純なブール・ラジオ・ボタンから、ユーザーが複数の項目を選択できるリスト・ボックスまで、様々な選択コンポーネントがあります。選択コンポーネント内の項目のリストは、複数のselectItemコンポーネントで構成されています。
selectItemコンポーネントを除くすべての選択コンポーネントは、ValueChangeEventおよびAttributeChangeEventイベントを送信します。selectItemコンポーネントは、AttributeChangeEventイベントのみを送信します。これらのイベント用に、valueChangeListenerハンドラまたはattributeChangeListenerハンドラ(あるいはその両方)を作成する必要があります。
selectBooleanCheckboxコンポーネント値は、常にオブジェクトではなくブール値に設定する必要があります。図11-23に示すように、選択状態と選択解除状態を切り替えます。
図11-23 selectBooleanCheckboxコンポーネント
selectBooleanCheckboxコンポーネントには、図11-24に示すように、そのコンポーネントが選択されてもクリアされてもいないことを示す第3の混合状態も存在します。混合状態のチェック・ボックスをクリックすると、そのボックスは選択された状態になります。チェック・ボックスは選択された状態とクリアされた状態の間で切り替わりますが、クリックや他のクリック操作によって混合状態に戻ることはありません。
図11-24 混合状態のselectBooleanCheckboxコンポーネント
selectBooleanRadioコンポーネントにはブール値の選択肢が表示され、常にブール値に設定する必要があります。selectBooleanCheckboxコンポーネントとは異なり、selectBooleanRadioコンポーネントを使用すると、同じgroup属性を使用してselectBooleanRadioコンポーネントをグループ化できます。
たとえば、ユーザーが10歳から18歳までの年齢かどうかを決定する1つのブール値と、ユーザーが19歳から100歳までの年齢かどうかを決定する別のブール値があるとします。図11-25に示すように、2つのselectBooleanRadioコンポーネントをページの任意の場所に配置でき、これらは隣り合っている必要はありません。ページ内での物理的な配置にかかわらず、同じgroup値を共有するかぎり、これらの選択は相互に排他的になります。
ヒント:
各selectBooleanRadioコンポーネントは、一意のブール値にバインドされている必要があります。
図11-25 selectBooleanRadioコンポーネント
selectOneRadioコンポーネントを使用して、図11-26に示すように、ユーザーが単一値を選択できるラジオ・ボタンのリストを作成します。
図11-26 selectOneRadioコンポーネント
selectManyCheckboxコンポーネントを使用して、図11-27に示すように、ユーザーが1つ以上の値を選択できるチェックボックスのリストを作成します。
図11-27 selectManyCheckboxコンポーネント
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属性が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属性はクライアントから返された内容をデコードするかわりにモデルからアクセスされます。値がリクエスト・スコープに格納される場合、その値は空になります。リクエスト・スコープには値を格納しないでください。
ポストバックでは、コンバータはコールされません。ポストバックをコンバータに依存している場合は、遅延コンテンツ配信を使用しないでください。
スクリーン・リーダー・モードでは、contentDelivery属性は無視されます。selectItemコンポーネントは、ページのレンダリング時に必ず作成されます。
selectManyShuttleおよびselectOrderShuttleコンポーネントを使用すると、ユーザーが一方のリスト・ボックスからもう一方のリスト・ボックスに項目を移動するための2つのリスト・ボックスおよびボタンを作成できます。ユーザーは、先行(「使用可能な値」)リスト・ボックスと後続(「選択した値」)リスト・ボックスの間を移動させる単一の項目または複数の項目を選択できます。どちらのコンポーネントでも、コントロールの上にラベルを表示する場合には、それらをpanelFormLayoutコンポーネント内に配置します。
図11-34に、selectManyShuttleコンポーネントを示します。
図11-34 selectManyShuttleコンポーネント
図11-35に示すように、selectOrdershuttleコンポーネントには、ユーザーが「選択した値」リスト・ボックスの値を並べ替えるために使用する上矢印および下矢印ボタンを追加で含めることができます。リストを並べ替えると、ValueChangeEventイベントが送信されます。readOnly属性をtrueに設定した場合は、並べ替える値が、後続リスト(「選択した値」)に表示される選択済の値であることを確認します。
図11-35 selectOrderShuttleコンポーネント
他の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に示すように、ユーザーは、リスト・ボックス内の項目の並替えのみを実行できます。
図11-36 並替え専用モードの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コンポーネントは、書式設定されたテキストを使用できる入力フィールドを提供します。ラベル、テキストおよびメッセージもサポートされています。ユーザーは、フォント名、サイズ、スタイルの変更、順序付けられたリストの作成、およびテキストの両端の調整を実行でき、その他の様々な機能も使用できます。richTextEditorコンポーネントは、HTMLソース・ファイルの編集にも使用できます。2つのコマンド・ボタンを使用して、標準の書式設定されたテキストの編集とHTMLソース・ファイルの編集を相互に切り替えられます。図11-38に、標準のリッチ・テキスト編集モードのリッチ・テキスト・エディタ・コンポーネントを示します。
図11-38 標準の編集モードのrichTextEditorコンポーネント
図11-39に、ソース・コード編集モードのエディタを示します。
図11-39 ソース編集モードのrichTextEditor
次にサポートされているその他の機能を示します。
フォント・タイプ
フォント・サイズ
リンク付け/リンク解除
スタイルのクリア
元に戻す/やり直し
太字/イタリック/下線
下付き/上付き
調整(左、中央、右、均等)
順序付けられたリスト/順序付けられていないリスト
インデント
文字色/背景色
リッチ・テキスト編集モード/ソース・コード編集モード
リッチ・テキスト編集ツールバーのインライン表示モード/ポップアップ表示モード
リッチ・テキスト・エディタの値(入力されたテキスト)は、整形式の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コンポーネント
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-41 richTextEditorコンポーネントのツールバー
図11-42に、カスタマイズされているツールバーを示します。ツールバー・ボタンの多くは削除されており、カスタム・ツールバー・ボタンおよびメニューのあるツールバーが追加されています。
図11-42 カスタマイズされたrichTextEditorのツールバー
図11-43に示すように、richTextEditorが不要で、ツールバーをインラインで表示しているとき(デフォルトの動作)に、ツールバーをポップアップ・モードで表示するように構成できます。
図11-43 ポップアップに設定されたツールバー表示モード
richTextEditorコンポーネントを追加した後で、テキストを特定の場所に挿入できるように構成し、ツールバーをカスタマイズすることもできます。詳細は、「richTextEditorコンポーネントへのテキストの挿入機能を追加する方法」および「ツールバーのカスタマイズ方法」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「richTextEditorコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
richTextEditorコンポーネントを追加する手順:
ヒント:
richTextEditorコンポーネントの幅は、全幅または100%に設定できます。ただし、これが確実に機能するのは、エディタがジオメトリ管理の親コンポーネントに配置されている場合のみです。panelFormLayoutまたはpanelGroupLayoutなどの配置レイアウト・コンテナに配置されていると、機能しない場合があります。詳細は、「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
richTextEditorコンポーネントにテキストを挿入できるようにするには、テキストの挿入に使用されるコマンド・コンポーネントの子としてrichTextEditorInsertBehaviorタグを追加します。
始める前に:
リッチ・テキスト・エディタ・コンポーネントに関する知識が役立つ場合があります。詳細は、「richTextEditorコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
「richTextEditorコンポーネントの追加方法」の説明に従い、richTextEditorコンポーネントを作成する必要があります。clientComponent属性をtrueに設定します。
テキスト挿入動作を追加する手順:
作成するカスタム・ファセットに、追加するツールバーおよびツールバー・ボタンを配置します。次に、含まれている項目の表示方法および表示場所を決定するキーワードとともに、ツールバーの属性からファセットを参照します。
richTextEditorコンポーネントにテキストを挿入できるようにするには、テキストの挿入に使用されるコマンド・コンポーネントの子としてrichTextEditorInsertBehaviorタグを追加します。
始める前に:
リッチ・テキスト・エディタ・コンポーネントに関する知識が役立つ場合があります。詳細は、「richTextEditorコンポーネントの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
ツールバーをカスタマイズする手順:
inputFileコンポーネントを使用すると、ユーザーにファイルのアップロード機能および更新機能を提供できます。このコンポーネントを使用すると、ユーザーはローカル・ファイルを選択し、サーバー上の選択可能な場所にアップロードできます(ファイルをサーバーからユーザーにダウンロードするには、「ファイルをダウンロードするためのアクション・コンポーネントの使用方法」を参照してください)。
inputFileコンポーネントにより、ファイルのアップロード時に標準のValueChangeEventイベントが送信され、ロード・プロセスが透過的に管理されます。inputFileコンポーネントのvalueプロパティは、ファイルのアップロード時に、org.apache.myfaces.trinidad.model.UploadedFileクラスのインスタンスに設定されます。
アップロード・プロセスを開始するには、まず、アップロードを許可するようにページのフォームを構成する必要があります。次に、図11-44に示すように、ファイルのアップロードに使用できるコマンド・ボタンなどのアクション・コンポーネントを作成します。
図11-44 inputFileコンポーネント
ファイルがアップロードされ、(最初のロードが成功した後またはその値が初期値として指定された後に)inputFileの値がnull以外の場合は、「更新」ボタンを作成できます。図11-45に示されているように、このボタンは「参照」ボタンのかわりに表示されます。これにより、ユーザーはinputFileコンポーネントの値を変更できます。
図11-45 更新モードのinputFileコンポーネント
uploadType属性にautoまたはmanualを設定すると、図11-46に示されているように、ファイルのアップロード中に進行状況バーが表示されます。
図11-46 進行状況バーのあるinputFileコンポーネント
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コンポーネントを示します。
図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;
}
Javaクラスは、inputFileコンポーネントにバインドする必要があります。このクラスにより、アップロードしたファイルの値が含まれます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「ファイルのアップロード機能の使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
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アップレットが使用されます。
図11-52 HTML5以外のブラウザのinputFileコンポーネント
HTML5をサポートしていないブラウザでJavaも使用できない場合は、inputFileコンポーネントにドロップ・セクションは表示されません。
注意:
OracleAS Single Sign-On (SSO)を使用している場合、Oracle HTTP Serverのシングル・サインオンを有効にするmod_osso.confファイルを構成する必要がある場合があります。このファイルは、ORACLEOHS_HOME/ohs/conf/にあります。ここで、ORACLEOHS_HOMEはOracle HTTP Serverがインストールされているホーム・ディレクトリです。アップロード・アプレットが非HTML5ブラウザで適切に機能するようにするには、構成が必要です。
次のパラメータを使用してmod_osso.confファイルを更新します。
OssoSecureCookies off OssoHTTPOnly Off Header unset Pragma OssoSendCacheHeaders off
OracleAS Single Sign-Onの詳細は、『Oracle Platform Security Servicesによるアプリケーションの保護』を参照してください。
単一ファイル・アップロード・モードの場合、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 JDeveloperおよびApplication Development Frameworkリリース・ノートを参照してください。
すべてのファイルをアップロードしたら、必ずフォームを送信する必要があります。これを行わないと、inputFileコンポーネントのデータはサーバーにアップロードされません。inputFileコンポーネントでautoSubmitがtrueに設定されている場合は、すべてのファイルのアップロードが終わるとフォームが自動的に送信されます。フォームの送信が完了すると、inputFileコンポーネントがリフレッシュされてドロップ・セクションのファイル・リストが空になり、さらにファイルをアップロードできるようになります。アップロードされたファイルのリストを表示するには、例11-1に示すように、ValueChangeListenerを追加するか、値をマネージドBeanにバインドします。
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コンポーネントを示します。
図11-54 カスタマイズされたinputFileコンポーネント
JavaScript APIメソッドを使用して、inputFileコンポーネントの動作をカスタマイズできます。詳細は、Oracle ADF Faces JavaScript APIリファレンスを参照してください。
af:codeEditorコンポーネントを使用すると、ブラウザ内でコード編集を実行できるほか、Fusion Webアプリケーションで実行時にプログラム・コードを表示および編集できます。コード・エディタ・コンポーネントの入力フィールドはテキストを受け入れます。また、ツールバー、キーワードの構文的な色分け、コード補完、基本検証、エラーのハイライト、ログ用のメッセージ・ペインなど、いくつかの一般的なコード編集機能も備えています。コード・エディタを使用すると、ユーザーはエラーや警告に対して個別のIDEソフトウェアを実行してプログラム・コードをテストする必要がなくなります。
コード・エディタ・コンポーネントは、図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に、クリティカル・エラー、エラー、警告および情報の各マーカーが表示されたコード・エディタを示します。
図11-61 コード・エディタでのマーカーの使用
codeEditorコンポーネントを追加する場合は、language属性を使用してコード・エディタで使用するプログラミング言語を構成します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、「コード・エディタの使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「入力コンポーネントおよびフォームの追加機能」を参照してください。
codeEditorコンポーネントを追加するには:
