primefaces
प्राइमफेस शोकेस का उपयोग कैसे करें

इसके शोकेस में प्राइमफेस पैनलग्रिड घटक का उदाहरण।

प्राइमफेस घटकों के प्रदर्शन आप यहां पा सकते हैं और प्रलेखन यहां है

फ्रंट को एक XHTML फ़ाइल के रूप में सहेजने की आवश्यकता है। इस फ़ाइल में JSF, JSTL, JSP, HTML, CSS, jQuery, javaScript और इसकी रूपरेखा और अधिक फ्रंट-एंड प्रौद्योगिकियाँ हो सकती हैं। कृपया, JSF और JSP प्रौद्योगिकियों को एक साथ न मिलाएं। यह एक अच्छा दृष्टिकोण नहीं है।

ध्यान दें कि आपको शुरुआत में सी, एफ, एच, पी, पे और जैसे नामस्थानों को परिभाषित करना होगा।

<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>

बैक-एंड को JSF फ़ाइलों के रूप में सहेजने की आवश्यकता है। इस फ़ाइल में ज्यादातर जावा शामिल है, लेकिन फ्रंट-एंड के लिए जावास्क्रिप्ट कॉल हो सकते हैं। वर्ग के एनोटेशन को स्प्रिंग कॉन्फ़िगरेशन से बदला जा सकता है। दृश्य वर्ग जिसका उपयोग सीमांत ईएल (अभिव्यक्ति भाषा) में डेटा की सेवा के लिए किया जाता है।

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;
        }
    }

सेवा वर्ग DB से डेटा परोसता है, लेकिन इसका उपयोग डेटा बनाने और शुरू करने के लिए PF शोकेस के अधिकांश उदाहरणों में किया जाता है। ध्यान दें कि पीएफ शोकेस में कोड के सबसे उपयोगी उदाहरण फ्रंटेंड हैं।

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);
    }
}

नोट: यदि आपके पास पर्याप्त प्रासंगिक अनुभव है, तो कृपया इस दस्तावेज़ में सुधार करें।