primefaces
Jak korzystać z gabloty Primefaces

Przykład składnika panelGrid Primefaces w jego prezentacji.

Prezentacja komponentów Primefaces, które można znaleźć tutaj, oraz dokumentacja znajdują się tutaj

Frontend należy zapisać jako plik XHTML. Ten plik może zawierać JSF, JSTL, JSP, HTML, CSS, jQuery, javaScript i jego framework oraz inne technologie front-end. Proszę nie mieszać razem technologii JSF i JSP. To nie jest dobre podejście.

Uwaga: na początku musisz zdefiniować przestrzenie nazw, takie jak c, f, h, p, pe itd.

<h:form id="form">
    <p:dataGrid var="car" value="#{dataGridView.cars}" columns="3" layout="grid"
        rows="12" paginator="true" id="cars"
        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="6,12,16">
 
        <f:facet name="header">
            Cars for Sale
        </f:facet>
 
        <p:panel header="#{car.id}" style="text-align:center">
            <h:panelGrid columns="1" style="width:100%">
                <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 
 
                <h:outputText value="#{car.year}" />
 
                <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                    <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
                    <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
                </p:commandLink>
            </h:panelGrid>
        </p:panel>
 
    </p:dataGrid>
 
    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dataGridView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/> 
                </f:facet>
 
                <h:outputText value="Id:" />
                <h:outputText value="#{dataGridView.selectedCar.id}" />
 
                <h:outputText value="Year" />
                <h:outputText value="#{dataGridView.selectedCar.year}" />
 
                <h:outputText value="Color:" />
                <h:outputText value="#{dataGridView.selectedCar.color}" style="color:#{dataGridView.selectedCar.color}"/>
 
                <h:outputText value="Price" />
                <h:outputText value="$#{dataGridView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>

Zaplecze należy zapisać jako pliki JSF. Ten plik zawiera głównie Javę, ale mogą być wywołania javaScript do Front-end. Adnotację klasy można zastąpić konfiguracją Spring. Klasa View , której używa się do udostępniania danych w Frontend EL (język wyrażeń).

package org.primefaces.showcase.view.data;
 
    import java.io.Serializable;
    import java.util.List;
    import javax.annotation.PostConstruct;
    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.ManagedProperty;
    import javax.faces.bean.ViewScoped;
    import org.primefaces.showcase.domain.Car;
    import org.primefaces.showcase.service.CarService;
     
    @ManagedBean
    @ViewScoped
    public class DataGridView implements Serializable {
         
        private List<Car> cars;
         
        private Car selectedCar;
         
        @ManagedProperty("#{carService}")
        private CarService service;
         
        @PostConstruct
        public void init() {
            cars = service.createCars(48);
        }
     
        public List<Car> getCars() {
            return cars;
        }
     
        public void setService(CarService service) {
            this.service = service;
        }
     
        public Car getSelectedCar() {
            return selectedCar;
        }
     
        public void setSelectedCar(Car selectedCar) {
            this.selectedCar = selectedCar;
        }
    }

Klasa usługi obsługuje dane z bazy danych, ale jest używana w większości przykładów w PF Showcase do inicjowania i tworzenia danych. Zauważ, że najbardziej przydatnymi przykładami kodu w gablocie PF są Frontend.

package org.primefaces.showcase.service;
 
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import org.primefaces.showcase.domain.Car;
 
@ManagedBean(name = "carService")
@ApplicationScoped
public class CarService {
     
    private final static String[] colors;
     
    private final static String[] brands;
     
    static {
        colors = new String[10];
        colors[0] = "Black";
        colors[1] = "White";
        colors[2] = "Green";
        colors[3] = "Red";
        colors[4] = "Blue";
        colors[5] = "Orange";
        colors[6] = "Silver";
        colors[7] = "Yellow";
        colors[8] = "Brown";
        colors[9] = "Maroon";
         
        brands = new String[10];
        brands[0] = "BMW";
        brands[1] = "Mercedes";
        brands[2] = "Volvo";
        brands[3] = "Audi";
        brands[4] = "Renault";
        brands[5] = "Fiat";
        brands[6] = "Volkswagen";
        brands[7] = "Honda";
        brands[8] = "Jaguar";
        brands[9] = "Ford";
    }
     
    public List<Car> createCars(int size) {
        List<Car> list = new ArrayList<Car>();
        for(int i = 0 ; i < size ; i++) {
            list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
        }
         
        return list;
    }
     
    private String getRandomId() {
        return UUID.randomUUID().toString().substring(0, 8);
    }
     
    private int getRandomYear() {
        return (int) (Math.random() * 50 + 1960);
    }
     
    private String getRandomColor() {
        return colors[(int) (Math.random() * 10)];
    }
     
    private String getRandomBrand() {
        return brands[(int) (Math.random() * 10)];
    }
     
    public int getRandomPrice() {
        return (int) (Math.random() * 100000);
    }
     
    public boolean getRandomSoldState() {
        return (Math.random() > 0.5) ? true: false;
    }
 
    public List<String> getColors() {
        return Arrays.asList(colors);
    }
     
    public List<String> getBrands() {
        return Arrays.asList(brands);
    }
}

UWAGA: Proszę poprawić tę dokumentację, jeśli masz wystarczającą ilość odpowiedniego doświadczenia.