Ví dụ bảng được xác định trước.
Trong phòng thí nghiệm này, chúng ta sẽ thấy một ví dụ đơn giản chỉ ra cách sử dụng thành phần DataTable, thành phần này cho phép chúng ta liên kết một bảng dữ liệu với trang của mình như thế này:
Đối với ví dụ đầu tiên này, chỉ thành phần được điền sẵn sẽ được liên kết từ lớp bean của chúng ta, sau đó nó sẽ chỉ ra cách thao tác thông tin của nó một cách linh hoạt.
Ban đầu, hãy tạo một dự án JSF với cấu trúc sau:
Như chúng ta có thể thấy, 2 lớp java được tạo, một lớp tương ứng với lớp người cho phép chúng tôi xử lý những người mà chúng tôi sẽ hiển thị trong bảng của mình và lớp kia tương ứng với bean sẽ cho phép chúng tôi quản lý bảng của mình với các lớp tương ứng. cột và bản ghi.
Lớp Person.java cung cấp cho chúng ta dữ liệu cơ bản của người mà chúng ta sẽ hiển thị trong bảng, ở đây chúng ta thêm các phương thức set và get tương ứng, cũng như một hàm tạo với các tham số để điền trực tiếp vào mọi người.
Lớp TablaBean.java đề cập đến bảng và việc quản lý những người trong đó, các bản ghi được hiển thị được lưu trữ trong kiểu ArrayList người, với mục đích của hướng dẫn này, được điền vào hàm tạo.
Trong index.xhtml, chúng tôi tạo thành phần DataTable mà chúng tôi liên kết trực tiếp danh sách những người trong giá trị và trong các cột tương ứng, các thuộc tính của bean được tham chiếu trong var="data", dữ liệu là thành phần đại diện cho dữ liệu của đối tượng Person trong mỗi dòng từ bảng.
Khi chạy nó ta sẽ được như thế này
Như chúng ta thấy, thông tin được trình bày ở chế độ bảng, do chúng ta chưa liên kết các kiểu CSS, chúng ta chỉ đánh giá cao cấu trúc theo hàng và cột mà không có bất kỳ kiểu thiết kế nào, tuy nhiên chúng ta có thể thêm thuộc tính “đường viền” cho bảng và một lề có nội dung như thế này:
Cuối cùng chúng ta biết rằng chúng ta có thể tận dụng
Ví dụ quản lý dữ liệu trong DataTable.
Trong phần này, chúng ta sẽ tiếp tục với ví dụ trước, nơi chúng ta sẽ xem cách thao tác dữ liệu bảng để thực hiện các quy trình phổ biến như đăng ký, sửa đổi hoặc xóa thông tin.
Thêm người.
Để đăng ký người, chúng tôi sẽ sửa đổi trang index.xhtml mà chúng tôi sẽ liên kết biểu mẫu đăng ký người. Chúng tôi làm điều này bằng cách liên kết các thành phần đầu vào và lựa chọn trong bảng lưới được liên kết hợp lệ với đối tượng “myPerson” mà dữ liệu khác nhau được gửi tới.
Như chúng ta thấy những phần tử mới này được thêm vào trước khi DataTable nhận được kết quả như sau:
Sau khi sửa đổi chỉ mục, hãy thực hiện các thay đổi cần thiết trong lớp TableBean.java, bởi vì trong ví dụ này, chúng tôi sẽ tiếp tục sử dụng mức phạm vi mặc định, vì vậy hãy tạo danh sách những người tĩnh để có thể thao tác dễ dàng, chúng tôi sẽ bổ sung loại bỏ phần đệm danh sách vì ý tưởng là có thể đăng ký mọi người thông qua biểu mẫu đăng ký.
Như chúng ta có thể thấy khi định nghĩa danh sách là tĩnh, chúng ta tạo thể hiện của nó ở cấp độ lớp, chúng ta không làm điều này trong hàm tạo vì điều này sẽ được gọi vào những dịp khác nhau bởi jsf của chúng ta, điều này sẽ gây ra một thể hiện mới của danh sách. chúng tôi để mất thông tin mà nó có thể chứa.
Ngoài ra, chúng tôi đã thêm một đối tượng kiểu Người để có thể quản lý dữ liệu đăng ký và thêm phương thức “aggregarPersona()” cho phép thêm một phần tử mới vào danh sách và được gọi từ nút jsf, sau đó chúng tôi tạo một phiên bản mới của đối tượng “minhaPersona” sẽ cho phép làm sạch biểu mẫu đăng ký.
Khi chạy hệ thống, chúng ta sẽ thấy hành vi sau:
Ban đầu, biểu mẫu trống và tiêu đề của bảng của chúng tôi cũng được hiển thị nhưng không có bất kỳ nội dung nào (hãy nhớ rằng chúng tôi đã loại bỏ việc điền vào danh sách), do đó, tiêu đề không hiển thị khi chưa có người đăng ký, vì vậy chúng tôi sử dụng “ rendered” trong đó chúng tôi xác thực rằng độ dài của danh sách lớn hơn 0, nếu không, nó sẽ không hiển thị các tiêu đề. (Hoạt động của tài sản này sẽ được thảo luận chi tiết sau)
Khi chúng tôi thêm người, họ được lưu trữ trong danh sách và được trình bày trong DataTable
Loại trừ mọi người.
Sau khi chúng tôi đã đăng ký thành công những người trong danh sách của mình, chúng tôi có thể xóa họ khỏi danh sách đó, vì điều này, chúng tôi sẽ thêm một cột hành động mới trong bảng dữ liệu của mình sẽ chứa một liên kết đến phương thức “eliminarPerson()” mà chúng tôi sẽ tạo trong bean của mình
Đối với điều này, chúng tôi sửa đổi index.xhtml trong đó sau cột “Giới tính”, chúng tôi sẽ thêm cột “Hành động”
Như chúng ta có thể thấy, chúng ta sử dụng một thành phần
Sau đó, trong lớp TablaBean.java, chúng ta thêm phương thức “eliminarPersona()” nhận đối tượng người mà chúng ta muốn xóa làm tham số, điều này tương ứng với “dữ liệu” mà chúng ta gửi từ jsf và tương đương với người trong dòng mà chúng tôi muốn xóa, vì vậy hãy xóa người đó khỏi danh sách.
Khi chạy hệ thống ta sẽ có như sau:
Và mỗi khi chúng tôi xóa một bản ghi thông qua liên kết tương ứng, bảng sẽ được cập nhật
Chỉnh sửa Người.
Sau khi đã đăng ký thành công và xóa những người khỏi danh sách của chúng tôi, chúng tôi có thể sửa đổi họ, vì điều đó chúng tôi sẽ sửa đổi bảng của mình để nó có thể chỉnh sửa được khi chúng tôi muốn cập nhật một số dữ liệu, vì vậy chúng tôi sẽ sử dụng lại thuộc tính “kết xuất” sẽ hiển thị hoặc ẩn các tùy chọn có thể chỉnh sửa tùy thuộc vào những gì người dùng quyết định.
Như chúng ta có thể thấy trong mỗi cột, một thành phần được thêm vào
Trong trường hợp của chúng tôi, “data.edit” thực hiện cuộc gọi đến một biến boolean (chỉnh sửa) mà chúng tôi đã thêm vào lớp Person, nếu thuộc tính là true thì nó sẽ hiển thị
Điều tương tự cũng phải được thực hiện đối với các cột nghề nghiệp, tiền lương và giới tính tương ứng, thay vì thêm một
Tương tự như vậy, thuộc tính được hiển thị bị ràng buộc để hiển thị kết hợp hoặc hiển thị nhãn tùy từng trường hợp.
Sau đó, cột “Hành động” được sửa đổi, nơi trước đây chúng tôi chỉ có một liên kết đến “Xóa”, bây giờ chúng tôi sẽ thêm 2 liên kết nữa, một để “chỉnh sửa” và một để “lưu” thông tin sau khi chỉnh sửa.
Như chúng ta có thể thấy, bây giờ có 3 liên kết cho các phương thức chỉnh sửa, lưu và xóa tương ứng, tuy nhiên, chỉnh sửa và lưu có thuộc tính được hiển thị, chỉ hiển thị 2 trong số 3 liên kết tại một thời điểm (hãy nhớ rằng liên kết được hiển thị chứa true hoặc false tùy thuộc vào điều kiện ) nên theo mặc định, liên kết xóa sẽ luôn xuất hiện vì liên kết này không có thuộc tính được hiển thị, trong khi chỉnh sửa và lưu sẽ không bao giờ được nhìn thấy cùng nhau. (cho phép bạn thêm khoảng cách giữa các liên kết)
Bên trong ở mức đồ họa, dataTable sẽ trông như thế này:
Mặc dù về mặt đồ họa, bạn có thể thấy tất cả các thành phần cùng nhau, nhưng điều quan trọng là phải làm rõ rằng thuộc tính được kết xuất sẽ chỉ hiển thị các thành phần tùy thuộc vào giá trị đúng hoặc sai tại thời điểm đó.
Sau khi sửa đổi index.xhtml, bây giờ là lúc sửa đổi lớp Person.java, trong đó thuộc tính “chỉnh sửa” được sử dụng bởi kết xuất được đề cập ở trên được thêm vào.
Như chúng ta có thể thấy, một thuộc tính boolean mới được liên kết với set và get tương ứng của nó. Ngoài ra, để phù hợp với cấu trúc của bài tập, chúng tôi đã thêm thuộc tính vào hàm tạo được tham số hóa, mặc dù tại thời điểm này nó không còn được sử dụng trong bài tập.
Bằng cách này, mỗi khi rendered=”#{data.edit}” được thực hiện trong index.xhtml, nó sẽ gọi biến này, cho phép hiển thị hoặc ẩn các thành phần tùy theo trường hợp.
Cuối cùng, và đã có những thay đổi trước đó, chúng tôi tiến hành sửa đổi lớp Bean nơi chúng tôi phải thêm các phương thức tương ứng để xóa và lưu được gọi từ trường “Hành động”.
Như chúng ta có thể thấy, phương thức editPersona() nhận một đối tượng người (từ lệnh gọi jsf, giống như nó được thực hiện trong phương thức xóa) và thuộc tính “chỉnh sửa” của nó được sửa đổi bằng cách gửi cho nó giá trị true, điều này sẽ cho phép bản ghi này để che giấu
Mặt khác, phương thức savePersona() sẽ chịu trách nhiệm thay đổi từng thuộc tính “chỉnh sửa” của tất cả các đối tượng trong danh sách thành false để dataTable được khôi phục với các giá trị của người chứ không phải với các phần tử có thể chỉnh sửa.
Khi chạy hệ thống ta sẽ có như sau:
Và khi nhấn chỉnh sửa, hệ thống sẽ thay đổi thành:
Có thể thấy, khi nhấp vào liên kết chỉnh sửa, các thành phần có thể chỉnh sửa sẽ tự động được hiển thị trong khi những phần không thể chỉnh sửa sẽ bị ẩn đi, tương tự như vậy, liên kết chỉnh sửa sẽ biến mất để nhường chỗ cho liên kết lưu như đã giải thích ở trên.
Và sẵn sàng!!!
Trên blog và trên kênh của tôi, tôi đã chia sẻ tài liệu về ngôn ngữ lập trình tuyệt vời này, bạn có thể tìm thấy nhiều bài viết và video từ đầuTôi chỉ cho bạn cách tải xuống các công cụ cần thiết để bắt đầu lập trình, chúng ta sẽ đi sâu hơn vào các khái niệm cơ bản, đi qua khái niệm lập trình hướng đối tượngtiêu chuẩn, chủ đềcấu trúc dữ liệu, truy cập vào cơ sở dữ liệu trong số những thứ khác, để xây dựng ứng dụng có giao diện người dùng.
Ngoài ra, bạn có thể tìm thấy một khóa học từ đầu nơi tôi dạy cách tạo ứng dụng di động trên Android thông qua một chuỗi video từng bước được cập nhật liên tục.
Và bây giờ tôi cũng sẽ bắt đầu trình tự từ đầu nơi chúng ta sẽ bước vào thế giới của phiên bản java Enterprise, chỉ cho bạn cách thiết lập môi trường phát triển và cách tạo các ứng dụng web đầu tiên của bạn bằng java.
Đó là lý do tại sao tôi mời bạn truy cập codejavu.blogspot.com, để truy cập kênh của tôi Cristian Henao và rằng họ rất ý thức về các phần tiếp theo mới
Nó cũng có thể làm bạn quan tâm.
Có bất cứ điều gì bạn muốn thêm hoặc nhận xét về mục này? thoải mái làm….và nếu bạn thích nó, tôi mời bạn chia sẻ nó Y Đăng ký bằng cách nhấp vào nút “Tham gia trang web này” để nghe thêm các bài đăng như thế này 😉