Hộp kiểm JSF được tạo kiểu bằng HTML và CSS
Bạn muốn định kiểu hộp kiểm của mình bằng mã HTML / CSS? Muốn thay đổi điều này:
để trông như thế này?
Đầu tiên, hãy viết mã sử dụng JSF 2.2 để hiển thị hộp kiểm.
Đây là mã JSF:
<h:body>
<h:form prependid="false">
<h:selectmanycheckbox value="#{dynamic.selectedOptions}" layout="pageDirection">
<f:selectitems value="#{dynamic.entities}" var="entity" itemlabel="#{entity.name}" itemvalue="#{entity.id}"></f:selectitems>
</h:selectmanycheckbox>
<h:commandbutton value="Go" action="#{dynamic.rawJSF()}">
<f:ajax execute="@form" render="@form"></f:ajax>
</h:commandbutton>
</h:form>
</h:body>Dưới đây là bean có phạm vi xem động (javax.faces.view.ViewScoped)
@Named
@ViewScoped
public class Dynamic implements Serializable{
private static final long serialVersionUID = 1L;
private List<entity> entities = new ArrayList<>();
private String[] selectedOptions;
public Dynamic() {
Random random = new Random();
for(int i = 0; i < 5; i++) {
Entity radio = new Entity();
radio.setId(i);
radio.setName("option " + (random.nextInt(999)));
entities.add(radio);
}
}
public void rawJSF() {
System.out.println("Printing selected options :");
if(selectedOptions != null) {
for(String s : selectedOptions) {
System.out.println("Entity with ID : " + s + " is selected");
}
}
}</entity>Getters và Setters cho các thực thể và các tùy chọn được chọn
Chạy mã ở trên sẽ cho chúng ta điều này:
Chúng tôi nhận được các thông báo sau được in ra khi chúng tôi chọn ba trong số các lựa chọn:
2018-06-30T21:23:09.976+0000|Info: Printing selected options :
2018-06-30T21:23:09.976+0000|Info: Entity with ID : 2 is selected
2018-06-30T21:23:09.976+0000|Info: Entity with ID : 4 is selectedBây giờ, tôi sẽ sử dụng mẫu HTML Metronic mà tôi đã mua trên Themeforest. Sử dụng mẫu này, các hộp kiểm bây giờ trông như thế này:
HTML cho các hộp kiểm ở trên trông như thế này:
<div class="m-checkbox-list">
<label class="m-checkbox">
<input type="checkbox">
Option 1
<span></span>
</label>
<label class="m-checkbox">
<input type="checkbox">
Option 2
<span></span>
</label>
<label class="m-checkbox">
<input type="checkbox" checked="checked">
Checked
<span></span>
</label>
</div>Đây là cách sử dụng mã HTML / CSS Metronic trong JSF. Đầu tiên, tôi sẽ cho bạn xem mã sau đó tôi sẽ giải thích nó.
Trang JSF mới: Khai báo CSS và JS
DynamicMetro Xem đậu có phạm vi:
<h:body>
<h:form prependid="false" styleclass="m--margin-40">
<div class="m-checkbox-list">
<ui:repeat var="entity" value="#{dynamicMetro.entities}">
<label class="m-checkbox" for="checkbox#{entity.id}">
<input id="checkbox#{entity.id}" type="checkbox" jsf:value="#{dynamicMetro.oneChecked[entity.id]}">
#{entity.name}
<span></span>
</label>
</ui:repeat>
</div>
<h:commandbutton value="Go" action="#{dynamicMetro.metronicJSF()}" styleclass="btn btn-warning">
<f:ajax execute="@form" render="@form"></f:ajax>
</h:commandbutton>
</h:form></h:body>@Named
@ViewScoped
public class DynamicMetro implements Serializable{
private static final long serialVersionUID = 1L;
private List<entity> entities = new ArrayList<>();
private Map<integer, boolean=""> oneChecked = new HashMap<>();
public DynamicMetro() {
Random random = new Random();
for(int i = 0; i < 5; i++) {
Entity radio = new Entity();
radio.setId(i);
radio.setName("option " + (random.nextInt(999)));
entities.add(radio);
oneChecked.put(radio.getId(), false);
}
}
public void metronicJSF() {
System.out.println("Printing selected options :");
for(Entry<integer, boolean=""> entry : oneChecked.entrySet()) {
System.out.println("Entity with ID : " + entry.getKey() + " is selected ? " + entry.getValue());
}
}</integer,></integer,></entity>Getters và Setters cho các thực thể và tùy chọn đã kiểm tra
Chọn các tùy chọn này và nhấn go:
Điều này sẽ in như sau:
2018-06-30T22:29:04.766+0000|Info: Printing selected options :
2018-06-30T22:29:04.766+0000|Info: Entity with ID : 0 is selected ? true
2018-06-30T22:29:04.766+0000|Info: Entity with ID : 1 is selected ? false
2018-06-30T22:29:04.766+0000|Info: Entity with ID : 2 is selected ? true
2018-06-30T22:29:04.766+0000|Info: Entity with ID : 3 is selected ? false
2018-06-30T22:29:04.766+0000|Info: Entity with ID : 4 is selected ? falseĐiều duy nhất ở đây cần giải thích là bản đồ oneChecked,. Bản đồ này giữ id của thực thể là khóa và boolean là giá trị của nó.
Phần JSF ( jsf:value="#{dynamicMetro.oneChecked[entity.id]}" ) đặt giá trị trong bản đồ cho thực thể tương ứng nếu được chọn thành true, nếu không thì là false.
Phần thưởng : Chỉ cho phép một lựa chọn được chọn (Radio):
Cập nhật mã JSF của bạn:
<div jsf:id="selectAnswer" class="m-checkbox-list">
<ui:repeat var="entity" value="#{dynamicMetro.entities}">
<label class="m-checkbox" for="checkbox#{entity.id}">
<input id="checkbox#{entity.id}" type="checkbox" jsf:value="#{dynamicMetro.oneChecked[entity.id]}" jsf:valuechangelistener="#{dynamicMetro.selectOnlyThis(entity.id)}">
<f:ajax event="click" execute="@this" render="selectAnswer"></f:ajax>
#{entity.name}
<span></span>
</label>
</ui:repeat>
</div>Áp dụng một phương thức Java mới:
public void selectOnlyThis(int id){
boolean oldChecked = oneChecked.get(id);
for(Entry<integer, boolean=""> entry : oneChecked.entrySet()){
oneChecked.put(entry.getKey(), false);
}
oneChecked.put(id, oldChecked ? false : true );
}</integer,>Có thể bạn quan tâm
