技術

使用 JSF 中的數據表。

內森·利馬

2022年12日至15日

預定義表示例。
在本實驗中，我們將看到一個簡單的示例，展示如何使用 DataTable 組件，該元素允許我們將數據錶鍊接到我們的頁面，如下所示：

對於第一個示例，只有預填充的組件將從我們的 bean 類鏈接，稍後它將展示如何動態操作其信息。

首先，我們創建一個具有以下結構的 JSF 項目：

正如我們所看到的，創建了 2 個 java 類，一個對應於 person 類，它允許我們處理要在表中顯示的人員，另一個對應於 bean，它允許我們使用相應的對象來管理表。列和記錄。
Person.java 類為我們提供了要在表中顯示的人員的基本數據，這裡我們添加相應的 set 和 get 方法，以及帶參數的構造函數來直接填充人員。

TablaBean.java 類引用表和其中的人員管理，顯示的記錄存儲在 ArrayList 人員類型中，出於本指南的目的，該類型填充在構造函數中。

在index.xhtml中，我們創建了DataTable組件，我們直接在值中將人員列表與var =“data”中引用的bean的屬性在相應的列中關聯起來，data是表示數據的元素表中每一行的 Person 對象。

運行時我們會看到這樣的東西

正如我們所看到的，信息是以表格模式呈現的，因為我們還沒有鏈接CSS樣式，我們只欣賞行和列的結構，沒有任何設計，但是我們可以向表格添加“邊框”屬性和邊距有這樣的東西：

最後我們知道我們可以利用以更結構化的方式呈現信息。

DataTable 中的數據管理示例。
在本節中，我們將繼續前面的示例，在該示例中我們將了解如何操作表數據來執行註冊、修改或刪除信息等常見過程。

增加人數。
為了註冊人員，我們將修改我們的index.xhtml頁面，我們將鏈接人員註冊表單。我們通過鏈接網格面板中的輸入和選擇組件來做到這一點，該網格面板與不同數據發送到的“myPerson”對象適當關聯。一個新人在我們的系統中註冊。

正如我們所看到的，這些新元素是在 DataTable 獲得如下結果之前添加的：

修改索引後，讓我們在 TableBean.java 類中進行必要的更改，因為在本例中我們將繼續使用默認範圍級別，因此讓我們將人員列表設為靜態，以便可以毫無問題地對其進行操作，我們另外消除列表填充，因為我們的想法是能夠通過註冊表單來註冊人員。

正如我們所看到的，當將列表定義為靜態時，我們在類級別創建其實例，我們不在構造函數中執行此操作，因為這將由我們的 jsf 在不同場合調用，這將導致列表的新實例，從而導致我們會丟失其中可能包含的信息。

此外，我們添加了一個 Person 類型的對象來管理註冊數據，並添加了“aggregarPersona()”方法，該方法允許向列表添加新元素並從 jsf 按鈕調用，稍後我們生成一個新的實例“minhaPersona”對象將允許清理註冊表。

運行系統時我們會看到以下行為：

最初表單是空的，我們的表的標題也被顯示，但沒有任何內容（記住我們消除了列表中的填充），因此當還沒有人註冊時標題不會顯示，所以我們使用“ render” 屬性，我們驗證列表的長度是否大於零，否則它不應該顯示標題。（這個屬性的操作後面會詳細講）

當我們添加人員時，他們會存儲在列表中並顯示在數據表中

排除人員。
在我們成功地將人員註冊到列表中後，我們可以將其從列表中刪除，為此，我們將在數據表中添加一個新的操作列，其中將包含指向我們將在 bean 中創建的方法“eliminarPerson()”的鏈接

為此，我們修改index.xhtml，在“Sex”列之後添加“Actions”列

正如我們所看到的，我們使用一個組件在操作中，我們調用方法“eliminarPersona()”，我們將向該方法發送值“data”作為參數，記住數據相當於在特定行中顯示的列表的對象。

之後，在 TablaBean.java 類中，我們添加“eliminarPersona()”方法，該方法接收我們要刪除的 person 對像作為參數，這對應於我們從 jsf 發送的“數據”，相當於我們要刪除的行中的人，因此將其從列表中刪除。

運行系統時我們會出現以下情況：

並且每次我們通過對應的鏈接刪除一條記錄，表就會更新

編輯人員。
成功註冊並從列表中刪除人員後，我們可以修改它們，因為當我們想要更新某些數據時，我們將修改我們的表，使其可編輯，為此我們將再次使用“rendered”屬性，該屬性將顯示或隱藏可編輯的選項，具體取決於用戶的決定。

正如我們在每一列中看到的，添加了一個組件由於“rendered”屬性允許存儲 true 或 false 數據以顯示或隱藏隨附組件，因此默認情況下將隱藏該屬性。

在我們的例子中，“data.edit”調用我們在 Person 類中添加的布爾變量（edit），如果該屬性為 true 那麼它將顯示允許編輯，但如果該屬性為 true false （不是 true），那麼它將顯示

必須分別對職業、工資和性別欄進行同樣的操作，而不是添加後者將添加一個因為在表單中我們使用以下路徑的選擇組合：

同樣，渲染的屬性必然會顯示組合或顯示標籤（視情況而定）。

隨後，“操作”列被修改，之前我們只有一個“刪除”鏈接，現在我們將添加 2 個鏈接，一個用於“編輯”，另一個用於在編輯信息後“保存”信息。

正如我們所看到的，現在有 3 個鏈接分別用於編輯、保存和刪除方法，但是編輯和保存具有渲染屬性，這使得 3 個鏈接一次只能看到其中的 2 個（請記住，渲染的鏈接包含 true 或 false取決於條件），因此默認情況下，刪除鏈接將始終顯示，因為它沒有渲染屬性，而編輯和保存永遠不會同時出現。（允許您在鏈接之間添加空格）

在圖形級別的內部，數據表將如下所示：

雖然以圖形方式您可以看到所有組件，但重要的是要非常清楚地表示渲染的屬性將僅根據當時的 true 或 false 值顯示組件。

修改完index.xhtml後，現在是時候修改Person.java類了，其中添加了上面提到的渲染所使用的“edit”屬性。

正如我們所看到的，一個新的布爾屬性鏈接到其各自的 set 和 get 。此外，為了適應練習的結構，我們將該屬性添加到參數化構造函數中，儘管此時練習中不再使用它。

這樣，每次在index.xhtml中完成render=”#{data.edit}”時，它都會調用這個變量，這將允許根據情況顯示或隱藏組件。

最後，在前面的更改之後，我們繼續修改 Bean 類，其中必須添加從“Actions”字段調用的相應刪除和保存方法。

正如我們所看到的，editPersona() 方法接收一個 person 對象（來自 jsf 調用，就像在 delete 方法中完成的那樣），並且通過向其發送值 true 來修改其“edit”屬性，這將允許此記錄隱藏並顯示和進行所需的更改。

另一方面，savePersona() 方法將負責將列表中所有對象的每個“edit”屬性更改為 false，以便使用人員的值而不是可編輯元素來恢復 dataTable。

運行系統時我們會出現以下情況：

當按下編輯時，系統更改為：

可以看出，當單擊編輯鏈接時，可編輯組件會自動顯示，而不可編輯組件則被隱藏，同樣編輯鏈接也會消失，為保存鏈接讓路，如上所述。

準備好了！！！

在我的博客和頻道上，我一直在分享有關這種出色的編程語言的材料，您可以找到許多文章和 從頭開始的視頻我向您展示如何下載開始編程所需的工具，我們越來越多地了解基本概念，了解 面向對象的編程概念標準，主題數據結構、數據庫訪問等、構建 具有用戶界面的應用程序.

您還可以找到一個 從頭開始的課程，我教如何在 Android 上創建移動應用程序 通過不斷更新的分步視頻序列。

現在我也將從頭開始，我們將進入 java 企業版的世界，向您展示如何設置開發環境以及如何使用 java 創建您的第一個 Web 應用程序。

這就是為什麼我邀請您訪問 codejavu.blogspot.com，訪問 我的頻道 Cristian Henao 他們非常了解新的續集