廣告
預定義表示例。
在本實驗中,我們將看到一個簡單的示例,展示如何使用 DataTable 組件,該元素允許我們將數據錶鍊接到我們的頁面,如下所示:
![](https://1.bp.blogspot.com/-6jFC3MsdYpY/XVBXBs2vYsI/AAAAAAAAFSs/PBitmP-b7dIY2X1FyIdG5qE_CCk2U6c2QCLcBGAs/s320/1.jpg)
對於第一個示例,只有預填充的組件將從我們的 bean 類鏈接,稍後它將展示如何動態操作其信息。
首先,我們創建一個具有以下結構的 JSF 項目:
![](https://1.bp.blogspot.com/-Yvdtvhb1Jhs/XVBXD-UMiZI/AAAAAAAAFTY/yKH94-k8Lh83RL6yoUWW7wkLykghWcDsACLcBGAs/s320/2.jpg)
正如我們所看到的,創建了 2 個 java 類,一個對應於 person 類,它允許我們處理要在表中顯示的人員,另一個對應於 bean,它允許我們使用相應的對象來管理表。列和記錄。
Person.java 類為我們提供了要在表中顯示的人員的基本數據,這裡我們添加相應的 set 和 get 方法,以及帶參數的構造函數來直接填充人員。
TablaBean.java 類引用表和其中的人員管理,顯示的記錄存儲在 ArrayList 人員類型中,出於本指南的目的,該類型填充在構造函數中。
在index.xhtml中,我們創建了DataTable組件,我們直接在值中將人員列表與var =“data”中引用的bean的屬性在相應的列中關聯起來,data是表示數據的元素表中每一行的 Person 對象。
運行時我們會看到這樣的東西
![](https://1.bp.blogspot.com/-_EmidoL5mkY/XVBXHXxnExI/AAAAAAAAFUI/zN2ff4dRY9oJiudtlcb4IIIgBsj-Czz4QCLcBGAs/s400/6.jpg)
正如我們所看到的,信息是以表格模式呈現的,因為我們還沒有鏈接CSS樣式,我們只欣賞行和列的結構,沒有任何設計,但是我們可以向表格添加“邊框”屬性和邊距有這樣的東西:
最後我們知道我們可以利用
DataTable 中的數據管理示例。
在本節中,我們將繼續前面的示例,在該示例中我們將了解如何操作表數據來執行註冊、修改或刪除信息等常見過程。
增加人數。
為了註冊人員,我們將修改我們的index.xhtml頁面,我們將鏈接人員註冊表單。我們通過鏈接網格面板中的輸入和選擇組件來做到這一點,該網格面板與不同數據發送到的“myPerson”對象適當關聯。一個新人在我們的系統中註冊。
![](https://1.bp.blogspot.com/-avA4bmAQ3uI/XVBXJPtxunI/AAAAAAAAFUU/7fGG7EKRqpcIZtkNTOWdhoTCpdu6TbeqACLcBGAs/s640/9.jpg)
正如我們所看到的,這些新元素是在 DataTable 獲得如下結果之前添加的:
![](https://1.bp.blogspot.com/-CBjkXUPesT8/XVBXCCL3QCI/AAAAAAAAFSw/AA6k6rBeuQUX8-Ro4jeqrZHYQgZF4zOqgCLcBGAs/s400/10.jpg)
修改索引後,讓我們在 TableBean.java 類中進行必要的更改,因為在本例中我們將繼續使用默認範圍級別,因此讓我們將人員列表設為靜態,以便可以毫無問題地對其進行操作,我們另外消除列表填充,因為我們的想法是能夠通過註冊表單來註冊人員。
![](https://1.bp.blogspot.com/-LDeYdKsQpwg/XVBXCVoJjII/AAAAAAAAFS4/qNytc116e0gNnOSbsiPLvx1bFwFNJ1I2gCLcBGAs/s640/11.jpg)
正如我們所看到的,當將列表定義為靜態時,我們在類級別創建其實例,我們不在構造函數中執行此操作,因為這將由我們的 jsf 在不同場合調用,這將導致列表的新實例,從而導致我們會丟失其中可能包含的信息。
此外,我們添加了一個 Person 類型的對象來管理註冊數據,並添加了“aggregarPersona()”方法,該方法允許向列表添加新元素並從 jsf 按鈕調用,稍後我們生成一個新的實例“minhaPersona”對象將允許清理註冊表。
運行系統時我們會看到以下行為:
![](https://1.bp.blogspot.com/-OueB5eSBbdM/XVBXCQ98BCI/AAAAAAAAFS0/nkzOyp5xwXwQhXuJa4A0lwBYm-T42c0UACLcBGAs/s400/12.jpg)
最初表單是空的,我們的表的標題也被顯示,但沒有任何內容(記住我們消除了列表中的填充),因此當還沒有人註冊時標題不會顯示,所以我們使用“ render” 屬性,我們驗證列表的長度是否大於零,否則它不應該顯示標題。 (這個屬性的操作後面會詳細講)
![](https://1.bp.blogspot.com/-09WN_MWGfoY/XVBXCuh-2DI/AAAAAAAAFS8/9cH6lYpTx0YHLZdeAAFpxzMqk6vtma7nACLcBGAs/s640/13.jpg)
當我們添加人員時,他們會存儲在列表中並顯示在數據表中
![](https://1.bp.blogspot.com/-bab5JGC0-9A/XVBXCx7ctyI/AAAAAAAAFTA/iCqJou4_86oFMPJMIr_a-Dk3DjiCAXAkwCLcBGAs/s400/14.jpg)
排除人員。
在我們成功地將人員註冊到列表中後,我們可以將其從列表中刪除,為此,我們將在數據表中添加一個新的操作列,其中將包含指向我們將在 bean 中創建的方法“eliminarPerson()”的鏈接
為此,我們修改index.xhtml,在“Sex”列之後添加“Actions”列
![](https://1.bp.blogspot.com/-Oh0PfQAeKFA/XVBXC4SWR2I/AAAAAAAAFTE/fpgeptCqi6kPXR9xLeBMafR0kWm6Mio6gCLcBGAs/s640/15.jpg)
正如我們所看到的,我們使用一個組件
之後,在 TablaBean.java 類中,我們添加“eliminarPersona()”方法,該方法接收我們要刪除的 person 對像作為參數,這對應於我們從 jsf 發送的“數據”,相當於我們要刪除的行中的人,因此將其從列表中刪除。
![](https://1.bp.blogspot.com/--CLv6XWQ1l0/XVBXDES6svI/AAAAAAAAFTI/uVPK39aYHVoWANvCcOc5XcyNDq297ASSACLcBGAs/s640/16.jpg)
運行系統時我們會出現以下情況:
![](https://1.bp.blogspot.com/-G_JeZPUd06A/XVBXDaDg81I/AAAAAAAAFTM/9BaMiyQpOR4jcEGIpR1KTuRME4Q8ng-ngCLcBGAs/s400/17.jpg)
並且每次我們通過對應的鏈接刪除一條記錄,表就會更新
![](https://1.bp.blogspot.com/-oxxuzTsxt7o/XVBXDVOfPhI/AAAAAAAAFTQ/e2NMUczZt0Qc_z1fq9-ezJjYoQw4d83MgCLcBGAs/s400/18.jpg)
編輯人員。
成功註冊並從列表中刪除人員後,我們可以修改它們,因為當我們想要更新某些數據時,我們將修改我們的表,使其可編輯,為此我們將再次使用“rendered”屬性,該屬性將顯示或隱藏可編輯的選項,具體取決於用戶的決定。
![](https://1.bp.blogspot.com/-WAoS8VoFhVU/XVBXDxYZM0I/AAAAAAAAFTU/FVNsdfrDYOMBEE4DThMA1Z7sEkRySIpMACLcBGAs/s640/19.jpg)
正如我們在每一列中看到的,添加了一個組件
在我們的例子中,“data.edit”調用我們在 Person 類中添加的布爾變量(edit),如果該屬性為 true 那麼它將顯示
必須分別對職業、工資和性別欄進行同樣的操作,而不是添加
![](https://1.bp.blogspot.com/-XyYchscZYHw/XVBXD1vP5BI/AAAAAAAAFTc/M0fyr3UMHaYltRm2IUe6OGq7Wgp35EM3QCLcBGAs/s640/20.jpg)
同樣,渲染的屬性必然會顯示組合或顯示標籤(視情況而定)。
隨後,“操作”列被修改,之前我們只有一個“刪除”鏈接,現在我們將添加 2 個鏈接,一個用於“編輯”,另一個用於在編輯信息後“保存”信息。
![](https://1.bp.blogspot.com/-scSVIGsOJBg/XVBXEbBLm-I/AAAAAAAAFTg/CXOJ5GiAHFcGoU6DZdlpagMSIyrlApdEgCLcBGAs/s640/21.jpg)
正如我們所看到的,現在有 3 個鏈接分別用於編輯、保存和刪除方法,但是編輯和保存具有渲染屬性,這使得 3 個鏈接一次只能看到其中的 2 個(請記住,渲染的鏈接包含 true 或 false取決於條件),因此默認情況下,刪除鏈接將始終顯示,因為它沒有渲染屬性,而編輯和保存永遠不會同時出現。 (允許您在鏈接之間添加空格)
在圖形級別的內部,數據表將如下所示:
![](https://1.bp.blogspot.com/-Toucn1Pe4gw/XVBXEoQo0aI/AAAAAAAAFTk/3iWQ-CwM0Y4lfo1le-Q7K3zS7edPdUe7gCLcBGAs/s640/22.jpg)
雖然以圖形方式您可以看到所有組件,但重要的是要非常清楚地表示渲染的屬性將僅根據當時的 true 或 false 值顯示組件。
修改完index.xhtml後,現在是時候修改Person.java類了,其中添加了上面提到的渲染所使用的“edit”屬性。
![](https://1.bp.blogspot.com/-hO96FPe2zDo/XVBXFmc4GZI/AAAAAAAAFTo/guH3ganP_qo34wvqMsfhbdlQM8wzjEbkACLcBGAs/s640/23.jpg)
正如我們所看到的,一個新的布爾屬性鏈接到其各自的 set 和 get 。此外,為了適應練習的結構,我們將該屬性添加到參數化構造函數中,儘管此時練習中不再使用它。
這樣,每次在index.xhtml中完成render=”#{data.edit}”時,它都會調用這個變量,這將允許根據情況顯示或隱藏組件。
最後,在前面的更改之後,我們繼續修改 Bean 類,其中必須添加從“Actions”字段調用的相應刪除和保存方法。
![](https://1.bp.blogspot.com/-vmOz0l7u5EU/XVBXF4hOJHI/AAAAAAAAFTw/PNjo0wpf0p4VZbjmZB26TLscRmqELxq4QCLcBGAs/s400/24.jpg)
正如我們所看到的,editPersona() 方法接收一個 person 對象(來自 jsf 調用,就像在 delete 方法中完成的那樣),並且通過向其發送值 true 來修改其“edit”屬性,這將允許此記錄隱藏
另一方面,savePersona() 方法將負責將列表中所有對象的每個“edit”屬性更改為 false,以便使用人員的值而不是可編輯元素來恢復 dataTable。
運行系統時我們會出現以下情況:
![](https://1.bp.blogspot.com/-2FM2xKBvlzE/XVBXFz7cxnI/AAAAAAAAFTs/lyyaf8W2vKAH-2daDSWKsD_7HF9x3x_ZACLcBGAs/s640/25.jpg)
當按下編輯時,系統更改為:
![](https://1.bp.blogspot.com/-7HZtaeYo4bo/XVBXGIHW8XI/AAAAAAAAFT0/ayZCf3clY3YAQlASsDnkWy24JuNilaPDwCLcBGAs/s640/26.jpg)
可以看出,當單擊編輯鏈接時,可編輯組件會自動顯示,而不可編輯組件則被隱藏,同樣編輯鏈接也會消失,為保存鏈接讓路,如上所述。
準備好了!!!
在我的博客和頻道上,我一直在分享有關這種出色的編程語言的材料,您可以找到許多文章和 從頭開始的視頻我向您展示如何下載開始編程所需的工具,我們越來越多地了解基本概念,了解 面向對象的編程概念標準, 主題數據結構、數據庫訪問等、構建 具有用戶界面的應用程序.
您還可以找到一個 從頭開始的課程,我教如何在 Android 上創建移動應用程序 通過不斷更新的分步視頻序列。
現在我也將從頭開始,我們將進入 java 企業版的世界,向您展示如何設置開發環境以及如何使用 java 創建您的第一個 Web 應用程序。
這就是為什麼我邀請您訪問 codejavu.blogspot.com,訪問 我的頻道 Cristian Henao 他們非常了解新的續集
您可能也感興趣。
您對此條目有什麼要添加或評論的嗎?隨意做….如果你喜歡它,我邀請你分享它 是 單擊“加入此網站”按鈕進行訂閱,以收聽更多類似的帖子 😉