事前定義されたテーブルの例。
このラボでは、DataTable コンポーネントの使用方法を示す簡単な例を見ていきます。この要素を使用すると、次のようにデータ テーブルをページにリンクできます。
この最初の例では、以前に設定されたコンポーネントのみが Bean クラスからリンクされ、後でその情報を動的に操作する方法が示されます。
最初に、次の構造を持つ JSF プロジェクトを作成します。
ご覧のとおり、2 つの Java クラスが作成されます。1 つはテーブルに表示する人物を処理できるようにする person クラスに対応し、もう 1 つはそれぞれのメソッドでテーブルを管理できるようにする Bean に対応します。列とレコード。
Person.java クラスは、表に表示する人の基本データを提供します。ここでは、対応する set メソッドと get メソッド、および人を直接入力するためのパラメーターを持つコンストラクターを追加します。
TablaBean.java クラスは、テーブルとそのテーブル内の人物の管理を参照します。表示されるレコードは、このガイドの目的のためにコンストラクターに入力される ArrayList 人物タイプに格納されます。
Index.xhtml では、DataTable コンポーネントを作成します。このコンポーネントに、人物のリストを値に直接関連付け、それぞれの列に var=”data” で参照される Bean の属性を関連付けます。data はデータを表す要素です。表の各行の Person オブジェクトの値。
実行すると次のようになります
ご覧のとおり、CSS スタイルをまだリンクしていないため、情報はテーブル モードで表示されます。デザインの種類はなく、行と列の構造のみを理解していますが、テーブルに「border」プロパティを追加して、次のようなマージンがあります:
を利用できることがついにわかりました
DataTable でのデータ管理の例。
このセクションでは、前の例に引き続き、情報の登録、変更、削除などの一般的なプロセスを実行するためにテーブル データを操作する方法を説明します。
人を追加します。
人物を登録するには、人物登録フォームのリンク先となるindex.xhtmlページを変更します。これを行うには、さまざまなデータが送信される「myperson」オブジェクトに正式に関連付けられたグリッド パネル内の入力コンポーネントと選択コンポーネントをリンクします。属性を登録すると、ボタンが関連付けられ、「addPerson()」メソッドを呼び出します。新しい人がシステムに登録されました。
ご覧のとおり、これらの新しい要素は、DataTable が次のような結果を取得する前に追加されます。
インデックスを変更した後、TableBean.java クラスに必要な変更を加えます。この例では引き続きデフォルトのスコープ レベルを使用するため、問題なく操作できるように人のリストを静的にします。さらに、登録フォームを通じてユーザーを登録できるようにすることが目的であるため、リストのパディングを削除します。
ご覧のとおり、リストを静的として定義するときは、そのインスタンスをクラス レベルで作成します。コンストラクターではこれを行いません。これは、JSF によってさまざまな機会に呼び出され、リストの新しいインスタンスが生成されるためです。含まれている可能性のある情報が失われる可能性があります。
さらに、登録データを管理できるように Person 型のオブジェクトを追加し、リストに新しい要素を追加できるようにする「aggregarPersonala()」メソッドを追加しました。このメソッドは、jsf ボタンから呼び出されます。後で、次の新しいインスタンスを生成します。 「minhaPessoa」オブジェクト。登録フォームのクリーニングを可能にします。
システムを実行すると、次の動作が見られます。
最初はフォームは空で、テーブルのヘッダーも表示されますが、コンテンツはありません (リストへの入力を省略したことを思い出してください)。そのため、まだ登録されている人がいない場合はヘッダーが表示されないため、 「rendered」プロパティでは、リストのサイズがゼロより大きいことを検証します。そうでない場合は、ヘッダーを表示すべきではありません。 (このプロパティの操作については後で詳しく説明します)
人を追加すると、リストに保存され、DataTable に表示されます。
人物を削除します。
リストにユーザーを正常に登録したら、リストからユーザーを削除できます。これを行うには、Bean 内に作成する「eliminateperson()」メソッドへのリンクを含む新しいアクション列を dataTable に追加します。
これを行うには、index.xhtml を変更して、「Sex」列の後に「Actions」列を追加します。
ご覧のとおり、コンポーネントを使用します
その後、TablaBean.java クラスに、削除したい人物オブジェクトをパラメータとして受け取る「eliminarPersonala()」メソッドを追加しました。これは、jsf から送信する「データ」に対応し、削除したい行を選択し、リストから削除します。
システムを実行すると、次のようになります。
対応するリンクを通じてレコードを削除するたびに、テーブルが更新されます
人物を編集します。
リストから人々を正常に登録して削除した後、それらを変更できます。このためにテーブルを変更して、データの一部を更新したいときに編集できるようにします。このために、「レンダリング」プロパティを再度使用します。または、ユーザーの決定に応じて編集可能なオプションを非表示にします。
各列でわかるように、コンポーネントが追加されています。
この例では、「data.edit」は Person クラスに追加したブール変数 (edit) を呼び出します。プロパティが true の場合は、
職業、給与、性別の各列についても同じことを行う必要があります。
同様に、レンダリングされたプロパティは、場合に応じてコンボを表示するかラベルを表示するようにバインドされています。
次に、「アクション」列が変更されます。以前は「削除」へのリンクのみでしたが、さらに 2 つのリンクが追加されます。1 つは「編集」、もう 1 つは編集後に情報を「保存」します。
ご覧のとおり、編集、保存、および削除メソッドにそれぞれ 3 つのリンクがありますが、編集と保存には、一度に 3 つのリンクのうち 2 つだけを表示するレンダリング プロパティがあります (レンダリングには true または false が含まれることに注意してください)条件付き) )、デフォルトでは、レンダリングされたプロパティがないため、削除リンクは常に表示されますが、編集と保存が同時に表示されることはありません。 (リンク間にスペースを追加できます)
内部的には、グラフィカル レベルで dataTable は次のようになります。
すべてのコンポーネントをグラフィカルにまとめて表示できますが、レンダリングされるプロパティには、その時点の true または false の値に応じてコンポーネントのみが表示されることを明確にすることが重要です。
Index.xhtml を変更したら、次は Person.java クラスを変更して、上記のレンダラーで使用される「edit」プロパティを追加します。
ご覧のとおり、新しいブール属性はそれぞれの set および get にリンクされています。さらに、演習の構造を調整するために、パラメーター化されたコンストラクターにプロパティを追加しましたが、演習のこの時点では使用されなくなりました。
このようにして、index.xhtml で rendered=”#{data.edit}” が実行されるたびに、この変数が呼び出され、場合に応じてコンポーネントを表示または非表示にすることができます。
最後に、前回の変更により、削除および保存時に「アクション」フィールドから呼び出される対応するメソッドを追加する必要がある Bean クラスの変更を開始しました。
ご覧のとおり、editPersonala() メソッドは person オブジェクトを (delete メソッドで行われるように、jsf 呼び出しから) 受け取り、値 true を送信することでその「edit」プロパティが変更されます。これにより、このレコードが非表示になります。の
一方、savePersonala() メソッドは、リスト内のすべてのオブジェクトの各「edit」プロパティを false に変更する役割を果たします。これにより、dataTable は編集可能な要素ではなく人々の値で復元されます。
システムを実行すると、次のようになります。
そして、編集を押すと、システムは次のように変わります。
ご覧のとおり、編集リンクをクリックすると、編集可能なコンポーネントが自動的に表示され、編集不可能なコンポーネントは非表示になります。同様に、上で説明したように、編集リンクは消えて保存リンクが現れます。
そして準備完了!!!
私のブログとチャンネルでは、この素晴らしいプログラミング言語に関する資料を共有してきました。多くの記事や記事を見つけることができます。 ゼロからのビデオプログラミングを開始するために必要なツールをダウンロードする方法を説明します。基本的な概念、 オブジェクト指向プログラミングの概念規格、 トピックデータ構造、特にデータベースへのアクセス、構築まで ユーザーインターフェイスを備えたアプリケーション.
また、 Android でモバイル アプリを作成する方法をゼロから教えるコース 常に更新されるステップバイステップのビデオ シーケンスを通じて。
そして今度は、Java Enterprise Edition の世界に入り、開発環境をセットアップする方法と、Java を使用して最初の Web アプリケーションを作成する方法を示すシーケンスを最初から開始します。
だからこそ、codejavu.blogspot.com にアクセスしてください。 私のチャンネル クリスティアン・ヘナオ そして彼らは新しい続編を非常に意識しているとのこと
あなたも興味を持つかもしれません。
このエントリについて何か追加またはコメントしたいことがありますか?自由にやってください…気に入っていただけましたら、ぜひシェアしてください Y このような投稿をもっと聞くには、「このサイトに参加する」ボタンをクリックして購読してください 😉