Prime/Facelets render problem from Win to Mac

fabio@beoni.net · 23 Mar 2010, 10:54

Hello,

I'm testing Prime component, I did a sample page with the Accordion.

The problem is:

On Windows/Firefox 3.6 I can see the component on the page, but when I run the same project on my Mac/Firefox 3.6 or Chrome 4 the component is not visible on the page.

Note: there is the html right, but looks like the javascript or CSS are not used...

This is the code:

Code: Select all

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xml:p="http://primefaces.prime.com.tr/ui"
      xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
  <title></title>

  <p:resources />

</head>
    <body>

        <h:form id="form1" prependId="false">

            <p:accordionPanel id="acc">
                <p:tab title="First">
                    <h:outputText value="First Tab" />
                </p:tab>
            </p:accordionPanel>

         </h:form>

    </body>
</html>

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>

    <context-param>
	<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
	<param-value>.xhtml</param-value>
    </context-param>

    <servlet>
        <servlet-name>Resource Servlet</servlet-name>
        <servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Resource Servlet</servlet-name>
        <url-pattern>/primefaces_resource/*</url-pattern>
    </servlet-mapping>
</web-app>

Ben Utzer · 23 Mar 2010, 11:08

It doesn't render on Win Xp / Safari / Chrome either. Oh, and there's also a render bug with carousel in Chrome and Safari:

fabio@beoni.net · 23 Mar 2010, 11:49

it has a good render if you use JSP instead of xhtml....

Ben Utzer · 23 Mar 2010, 12:19

In Firefox the javascript to render the carousel or the accordion is not rendered in cdata area while in Safari and Chrome it is, so I guess this is the root of the problems.

fabio@beoni.net · 23 Mar 2010, 12:50

Yes, you are right...
the html output is different! And the difference is //<![CDATA[

Maybe there is a new version of the prime.jar ?

Chrome:

Code: Select all

<script type="text/javascript"> 
//<![CDATA[
PrimeFaces.onContentReady('j_id15', function() {
j_id15_widget = new PrimeFaces.widget.AccordionPanel('j_id15_container',{collapsible:true,width:'100%',expandItem:[],expandable:true,animationSpeed:0.1});});
//]]>
</script>

Firefox:

Code: Select all

<script type="text/javascript">PrimeFaces.onContentReady('toUpdate2', function() {
toUpdate2_widget = new PrimeFaces.widget.Panel('toUpdate2', {});});</script><div id="toUpdate2" class="pf-panel"><div id="toUpdate2_bd" class="pf-panel-bd"><script type="text/javascript">PrimeFaces.onContentReady('j_id15', function() {
j_id15_widget = new PrimeFaces.widget.AccordionPanel('j_id15_container',{collapsible:true,width:'100%',expandItem:[],expandable:true,animationSpeed:0.1});});</script>

fabio@beoni.net · 23 Mar 2010, 13:26

I'm sorry... on my Mac Accordion is not visible also in Chrome and Safari...

Any suggestion?

23 Mar 2010, 13:45

Try enforcing the content type with;

Code: Select all

<f:view contentType="text/html">
...Page content
</f:view>

Safari and Chrome are webkit based so their behavior is same on this.

I also use Mac and Accordion works fine with FF, Safari or Chrome in my case. But this setting is there for sure.

Ben Utzer · 23 Mar 2010, 14:11

Thx, for me this did the trick. Eclipse tells me that "contentType" is an undefined attribute though.

fabio@beoni.net · 23 Mar 2010, 14:15

I tried this:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>

[b]<f:view contentType="text/html">[/b]

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xml:p="http://primefaces.prime.com.tr/ui"
      xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
  <title></title>

  <p:resources />

</head>
    <body>

        <h:form id="form1" prependId="false">

            <p:accordionPanel id="acc">
                <p:tab title="First">
                    <h:outputText value="First Tab" />
                </p:tab>
            </p:accordionPanel>

         </h:form>

    </body>
</html>

[b]</f:view>[/b]

And also this:

Code: Select all

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xml:p="http://primefaces.prime.com.tr/ui"
      xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
  <title></title>

  <p:resources />

</head>
    <body>

[b]<f:view contentType="text/html">[/b]


        <h:form id="form1" prependId="false">

            <p:accordionPanel id="acc">
                <p:tab title="First">
                    <h:outputText value="First Tab" />
                </p:tab>
            </p:accordionPanel>

         </h:form>

[b]</f:view>[/b]

    </body>
</html>

But is the same.... maybe some configuration missing?

Why Chrome render Javascript tag with //<![CDATA[ ??

Ben Utzer · 23 Mar 2010, 14:25

You need this namespace declaration: xmlns:f="http://java.sun.com/jsf/core".
The way the javascript is rendered with Chrome is correct, since Facelets uses xhtml and only with CDATA it is correct xml.

Prime/Facelets render problem from Win to Mac

Who is online