创建博客 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

流星永恒的博客

JSF,Facelets,Rich(Prime)Faces,和java的笔记

 
 
 

日志

 
 

Working towards RichFaces(4.2.2-Fianl) / PrimeFaces(3.3) compatibility  

2012-05-27 13:27:32|  分类: jsf2.0 |  标签: |举报 |字号 订阅

This article just a solution of conflict of jquery, not others, eg. skin issue and so on. Please note, I just want use richfaces push with primefaces, so not test other components of Richfaces(Why only do richfaces copmonents test not primefaces? you'll find the anwser after reading this article).

An article written by jboss richfaces developer illustrates richfaces resource mapping feature detailedly, before resolve the jQuery compaibility issue, you'd better read it.

Re-routing JSF resource requests with RichFaces Resource Mapping

In implentment jar of richfaces 4.2.2-Final and Primefaces 3.3-SNAPSHOT, you'll find that primefaces provided a jquery.js file, the file contains jquery 1.7.2 and some jquery ui script, meanwhile, richfacces provided a clean jquery file, but its version is 1.7.1. so two jquery files with different version conflicts each other.

After you read the article above, you've known, richfaces can re-routing resource with a little configuration, and a resource servlet to finish the work, and fortunately primefaces has no such resource resolver(after v2.x), I really love this non-invasive characteristic, so apparently, we must let richfaces use jquery file of primefaces, because the file contains jquery ui script, primefaces can't working without these ui script, let's start to config it.

Firstly, creat a directory/package named "META-INF" under your java source root directory, and create a directory named "richfaces" under "META-INF" directory, and the create a property file named "static-resource-mappings.properties" under META-INF, typed following lines in it.

jquery.js=org.richfaces.staticResource/jquery.js
primefaces\:jquery/jquery.js=org.richfaces.staticResource/jquery.js

 

Secondly, create a directory in your webroot named "resources" and create a directory named "org.richfaces.staticResource" under it.

Finally,  copy jquery.js from primefaces jar file and put in directory named "org.richfaces.staticResource", that is the anwser of the question why only need to test components of richfaces, becuase there is no change of primefaces, it use its own jquery script.


so your packaged directory structure should like following:

app.war
Working towards RichFaces(4.2.2-Fianl) / PrimeFaces(3.3) compatibility - yyq2007aa - 流星永恒的博客
 
When the page translated to html, you'll see there is only one jquery file loaded.
Working towards RichFaces(4.2.2-Fianl) / PrimeFaces(3.3) compatibility - yyq2007aa - 流星永恒的博客
 
And page looks normally too.
Working towards RichFaces(4.2.2-Fianl) / PrimeFaces(3.3) compatibility - yyq2007aa - 流星永恒的博客
 
Maybe not all components of richfaces and primefaces libraries can work together seamlessly, but you can use jsf components to combine them.
 
Before ending the article, provide the page code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Push Test</title>
        <style type="text/css">
            body {margin: 0px;}
        </style>
        <script type="text/javascript">
            //<![CDATA[           
            function handleMessage(data){
                var msg = jQuery("<div style='background-color:lightgreen; margin:2px 3px;'>"+data+"</div>");
                jQuery("#out1").append(msg);
            }
           
            function onSuccess(){
                jQuery("#out1").html("<span><font color='green'>Connected!!!</font></span>");
            }
            //]]>
        </script>
    </h:head>
    <h:body>
        <h:form>
            <a4j:push address="#{param.c}@chat" onsubscribed="onSuccess();" ondataavailable="handleMessage(event.rf.data)"/>
        </h:form>
        <rich:panel header="RichFaces Panel" style="width: 800px;">
            <h:panelGrid columns="2">
                <rich:calendar locale="en"/>
                <p:colorPicker mode="inline"/>
            </h:panelGrid>
            <p:separator/>
        </rich:panel>
        <p:dialog header="PrimeFaces Dialog(Messages from admin)"
                  closable="true"
                  height="200"
                  maximizable="true"
                  minimizable="true"
                  width="400"
                  position="center"
                  widgetVar="dlg1"
                  visible="true">
            <div id="out1"></div>
        </p:dialog>
    </h:body>
</html>

  评论这张
 
阅读(1165)| 评论(1)
推荐 转载

历史上的今天

最近读者

热度

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2014