Primefaces UI使用小結

Primefaces UI使用小結

28 Jun 2013/in 開放平臺開發, 網站設計和開發 /by Hima

相較於Struts、SpringMVC等MVC框架，在國內的企業應用中JSF的使用確不多，或許是由於資料不多又或許是咱們對它的認知不夠，但有一點不能否認，JSF是被歸入Java EE 5規範的，而其它的卻沒有。以前使用JSF作過幾個項目，但這是第一次使用Primefaces UI（它是基於JSF Mojarra實現的一套很強大的UI，有社區版和商業版），由於在使用過程當中碰到不少「坎」，因此想寫篇博客將碰到的問題總結下，也但願能幫助到想使用或正在使用Primefaces UI的人。

        Primefaces UI在百度上基本搜不到有價值的信息，在整個解決問題的過程當中Google（記着要切換到英文去搜哦）幫了很大的忙，它在國內用的人就更少了。但回過頭去看，我真的很願意向你們推薦這款UI，超級贊！我目前使用的版本是Primefaces 3.5和JSF Mojarra-2.1.17，廢話少說進入正題。

1、ManagedBean的Scoped

        一、RequestScoped

        二、ViewScoped

        三、SessionScoped

        四、ApplicationScoped

        Request、Session、Application你們都比較熟悉，就很少說了，ViewScoped顧名思義視圖有效，或者說當前頁有效，由於Servlet規範裏並無View這個概念，因此它是JSF延伸出的一個概念，我的理解是爲Ajax準備的，你們必定要記住它哦，後續它可發揮了很大的做用。

2、Primefaces

       一、template的使用

       在如今Web開發中，特別是Ajax出現後，framesetframeiframe已經不是特別推薦使用了（固然也可使用），牛人能夠用DIV構建出任何想要的佈局，像咱們這些平民懂的分享牛人的成果就OK了，在Primefaces裏咱們能夠用p:layout佈局，並作成template，後面的每一個頁面只要繼承這個template，就能夠直接享用，以下圖

        二、ViewScoped的使用

        這個很重要，在項目開始時，由於SessionScoped的生命週期太長了不想用，因此大部分的ManagedBean都是用的RequestScoped，問題是一個接一個，如p:commandButton和p:commandLink的action和actionListener莫名其妙的不可進入，Ajax的使用也有時能夠有時不能夠，Scoped換成Session就一切都OK了，發現跟Bean的生命週期有關係，最後調試完，發現用ViewScoped最合適，生命週期比Request長比Session短，同時又能解決上述問題，由於Primefaces UI裏大量用到ajax通訊，這種場景最適合用ViewScoped。

        三、form的使用

        在使用中必定要避免form嵌套form的狀況，它會出現不少不能夠預知的狀況，如提交附件會出現問題，但並列form能夠放心的使用

        四、tree的使用

        如上圖的Left中能夠放置一個樹形菜單，使用過的人可能會和我碰到同樣的問題，那就是當我打開一個新頁面時，樹形菜單不能保持我打開頁面以前的狀態，解決方法：負責樹形菜單Node節點的Bean的Scoped要申明成SessionScoped，並在tree標籤上加屬性dynamic=」true」，如<p:tree value=」#{menuBean.root}」 var=」doc」 dynamic=」true」>

        五、confirmDialog的使用

        若是在使用confirmDialog時發現，彈出框被遮罩層給擋住了不可以使用，怎麼辦？解決方法：在confirmDialog標籤加屬性appendToBody=」true」，如<p:confirmDialog widgetVar=」startConfirm」 appendToBody=」true」 message=」Are you sure about starting the project?」 header=」Start project」 severity=」alert」>

        六、dialog的使用

        不得不提的一個組件，超級好用，個人應用裏大量用到了它，它用起來讓你的Web應用就像是一個Client應用，交互性和用戶體驗很是的好。你能夠將dialog看成一個提示框用，也能夠在dialog裏作一個複雜的表單，你能夠選擇遮罩也能夠不使用，若是要使用遮罩只需加上屬性modal=」true」

        七、panelpanelGridoutputPanelaccordionPaneltabView等的使用

        他們都是佈局展示相關的，用好來，效果很是的好，固然還有其它的。

        八、process和update屬性的使用

        前面說了Primefaces大量用到了Ajax，那就不得不提process和update，他們倆恰好相反，process指出要異步提交哪一部分的內容，update指出要異步更新哪一部分的內容，常常在一塊兒配合使用。功能很是的強大，若是有興之後能夠再詳細說說。

        九、fileUpload的使用

        在使用前要在Web.xml中加入以下部分：

      <filter>

            <filter-name>PrimeFaces FileUpload Filter</filter-name>

            <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>

      </filter>

      <filter-mapping>

            <filter-name>PrimeFaces FileUpload Filter</filter-name>

            <servlet-name>Faces Servlet</servlet-name>

      </filter-mapping>

        使用p:fileUpload的form必須加上屬性enctype=」multipart/form-data」，並且它不支持Ajax異步提交，因此對應的command要加上屬性ajax=」false」，如：

      <h:form id=」form-delivery-file」 enctype=」multipart/form-data」>

           <p:panelGrid columns=」2″>

               <p:outputLabel value=」Delivery File: 」 />

               <p:fileUpload id=」deliveryFile」 value=」#{projectBean.deliveryFileFromUi}」 mode=」simple」 storage=」file」 />

           </p:panelGrid>

           <p:commandButton value=」Submit」 ajax=」false」 style=」margin:0″ actionListener=」#{projectBean.deliveryFile}」 />

      </h:form>

        因爲時間問題，此次先寫到這，還有不少好用的組件，及在深刻使用過程當中碰到的問題和解決方法，後續再道來。想了解的朋友能夠先到Primefaces的官方網站一睹爲快：http://www.primefaces.org/showcase/ui/home.jsf