Primefaces ile örnek uygulama

1. PrimeFaces'in en son sürüm jar doyasını WEB-INF/lib altına atıyoruz.
2. Bir web sayfası yaratıyoruz. Örneğin home.xhtml.
3. Sayfa başındaki html tagına xmlns:p="http://primefaces.org/ui" eklediğimizde primefaces componentleri kullanılmaya hazır oluyor.

4. Veritabanından kimlik numarası ve isim gösteren bir ekran yapalım.

<p:outputLabel value="Çalışanlar"></p:outputLabel>

<p:dataTable value="#{viewEmployeeManagedBean.employees}" var="item" id="empList" paginator="true" rows="10">

          <p:column>
              <f:facet name="header">
                  <h:outputText value="kimlik no."/>                                    
               </f:facet>
               <h:outputText value="#{item.id}" /> 
          </p:column>
               <p:column>
                  <f:facet name="header">
                       <h:outputText value="adı" />
                  </f:facet>
                  <h:outputText value="#{item.name}"/>                          

          </p:column>
      </p:dataTable>

           

5. Veritabanındaki kisileri temsil edecek bir entity class yazalım.

Bu örneğin Employee.java adında bir POJO olsun.
6. Veritabanındaki kişileri gösterecek bir de ManagedBean yazalım.
Bu da ViewEmployeeManagedBean.java olsun.
Scope'u session scope olarak kalsın.

7. Bir akordiyon panel içine koyalım.

            <p:accordionPanel activeIndex="0">

                <p:tab title="Hoşgeldiniz">

                    <p:outputLabel value="Hoşgeldiniz !!!"></p:outputLabel>

                </p:tab>

                <p:tab title="Çalışanlar">
                     <p:dataTable value="#{viewEmployeeManagedBean.employees}" var="item" id="empList" paginator="true" rows="10">
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="kimlik no."/>                                    
                            </f:facet>
                            <h:outputText value="#{item.id}" /> 
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="adı" />
                            </f:facet>
                            <h:outputText value="#{item.name}"/>                          

                        </p:column>

                    </p:dataTable>

                </p:tab>

            </p:accordionPanel>

      




8. Ekranın en tepesine bir tool bar ekleyelim.

           <h:form>
                <p:toolbar>
                    <p:toolbarGroup align="right">
                        <p:commandButton type="push" value="Yeni" image="ui-icon-document" />
                        <p:commandButton type="push" value="Aç" image="ui-icon-folder-open" />
                    </p:toolbarGroup>
                    <p:toolbarGroup align="left">
                        <p:menuButton value="Menü">
                            <p:menuitem value="Anasayfa" url="#" />
                            <p:menuitem value="Çıkış yap" url="#" />
                        </p:menuButton>
                    </p:toolbarGroup>
                </p:toolbar>

            </h:form>

9.