Question

我最近升级到Primefaces 5.0并且正在转换我的图表以适应5.0中的新图表api，当我遇到一个相当恼人的问题时，我的一个Line Charts只拒绝在这个特定页面上呈现。

更具体地说：

LineChart我没有在特定页面上工作。

如果放在另一页上，图表可以正常工作。

如果放在没有删除所有其他内容的特定页面上，它仍然无效。

如果图表放在特定页面和任何其他页面上，则两个页面上的图表都将起作用...

- 不工作我的意思是，不是正常出现，而是在页面上显示大致相当于图表大小的空白区域。此外，使用此损坏的图表导航到视图会阻止我切换到其他页面，几乎就像所有内容都冻结一样。

我100％确定我的bean不会导致问题，因为我能够成功创建图表，而不是在特定页面上。

我一直试图找出问题超过10个小时无济于事。希望有人能弄清楚出了什么问题。

的index.xhtml：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>Arbitrage Online: Member's Area</title>
        <h:outputStylesheet library="css" name="layout.css"/>
        <h:outputScript library="js" name="functions.js"/>
    </h:head>

    <h:body id="body"  styleClass="body">

        <p:layout fullPage="true" widgetVar="layoutWdgt">

            <p:layoutUnit position="north" size="60" gutter="0" styleClass="headerArea">
                    <ui:include src="template/header.xhtml" />
            </p:layoutUnit>

            <p:layoutUnit position="west" size="278" gutter="0" styleClass="menuArea">
                <ui:include src="template/menu.xhtml" />
            </p:layoutUnit>

            <p:layoutUnit position="center" gutter="0" styleClass="contentArea">
                <h:panelGroup id="contentAreaPanel">
                    <ui:include src="#{navigationBean.pageName}.xhtml" />
                </h:panelGroup>
            </p:layoutUnit>

            <p:layoutUnit position="south" size="47" gutter="0" styleClass="footerArea">
                <p:outputPanel  styleClass="copyright">Copyright © Arbitrage Online, 2014. All rights reserved.</p:outputPanel>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

menu.html：

 <ui:composition 
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <h:form id="menuForm">
        <p:menu style="width:100%;" styleClass="leftMenu">
            <p:menuitem value="Overview" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/overview')}"  styleClass="ui-state-active" style="border-top: none !important;" icon="ui-icon-home24" update=":contentAreaPanel"/>
            <p:menuitem value="Add Items" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/addAmazonItems')}"  icon="ui-icon-home"  update=":contentAreaPanel"/> 
            <p:menuitem value="Manage Items" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/manageAmazon')}"  icon="ui-icon-disk"  update=":contentAreaPanel"/> 
            <p:menuitem value="View eBay Results" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/manageEbay')}"  icon="ui-icon-home"  update=":contentAreaPanel"/> 
            <p:menuitem value="Manage Snipes" onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/overview')}"  icon="ui-icon-home"  update=":contentAreaPanel"/> 
            <p:menuitem value="Manage Excludes"  onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}"  icon="ui-icon-home" update=":contentAreaPanel" /> 
            <p:menuitem value="Submit a Ticket"  onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}"  icon="ui-icon-home" update=":contentAreaPanel" /> 
            <p:menuitem value="View Tutorials"  onclick="selectMenuitemLink(this)" action="#{navigationBean.nagivate('template/header')}" style="border-bottom: none !important;" icon="ui-icon-home" update=":contentAreaPanel" /> 
        </p:menu>
    </h:form> 

 </ui:composition>

它没有处理的特定页面（manageAmazon.xhtml）：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <h:form id="amazonItemForm" onreset="#{amazonTableBean.populateTableItems()}" >
                <h:outputText value="Manage Amazon Products" styleClass="addItemsTitle" />

        <h:panelGroup id="manageAmazonPanel" layout="block" styleClass="manageAmazonTablePanel" >
              <p:dataTable  var="amazonItem" value="#{manageItemsBean.amazonItemList}" scrollHeight="700" scrollable="true" styleClass="manageAmazonTable" rowExpandMode="single" widgetVar="manageAmazonWidget">
           <p:column style="width:16px" styleClass="rowToggle">
                <p:rowToggler />
            </p:column>
            <p:column headerText="Product Identifier" sortBy="#{amazonItem.itemASIN}" filterBy="#{amazonItem.itemASIN}" filterMatchMode="contains" >
                    <h:outputText value="#{amazonItem.itemASIN}" />
            </p:column>
            <p:column headerText="Product Name" sortBy="#{amazonItem.itemName}" filterBy="#{amazonItem.itemName}" filterMatchMode="contains" colspan="3">
                    <h:outputText value="#{amazonItem.itemName}"/>
            </p:column>
            <p:column headerText="Product Rank" sortBy="#{amazonItem.itemRank}">
                    <h:outputText value="#{amazonItem.itemRank}"/>
            </p:column>
            <p:column headerText="New Price" sortBy="#{amazonItem.newPrice}">
                    <h:outputText value="$#{amazonItem.newPrice}"/>
            </p:column>
            <p:column headerText="Used Price" sortBy="#{amazonItem.usedPrice}">
                    <h:outputText value="$#{amazonItem.usedPrice}"/>
            </p:column>
        <p:column headerText="Collectible Price" sortBy="#{amazonItem.collPrice}">
                    <h:outputText value="$#{amazonItem.collPrice}"/>
            </p:column>


            <p:rowExpansion>

            <p:outputPanel deferred="true" layout="block" styleClass="singleItemPanel">
                <h:panelGroup layout="block" styleClass="singleItemName">            
                    <p:inplace id="nameInplace" editor="true" styleClass="singleItemNameContent"  >  
                        <p:inputText value="#{amazonItem.itemName}" required="true"/>  
                        <p:ajax event="save"  partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'name')}" update="nameInplace"/>
                    </p:inplace>  
                </h:panelGroup>            

                <h:panelGroup layout="block" styleClass="singleItemImage">
                    <h:graphicImage value="#{amazonItem.imageUrl}" styleClass="singleItemImageContent"/>
                </h:panelGroup>

                <h:panelGroup layout="block" styleClass="singleItemId">
                     <h:outputText value="Product ID: #{amazonItem.itemASIN}" styleClass="singleItemIdContent"/>
                </h:panelGroup>  

                <h:panelGroup layout="block" styleClass="singleItemRank">
                    <h:outputText value="Product Rank: #{amazonItem.itemRank}" styleClass="singleItemRankContent"/>
                </h:panelGroup>      

                <h:panelGroup layout="block" styleClass="singleItemNewPrice">
                   <h:outputText value="New Price: " styleClass="singleItemRankContent"/>
                   <h:outputText value="$#{amazonItem.newPrice}" styleClass="singleItemNewPriceContent"/>
                </h:panelGroup>   

                <h:panelGroup layout="block" styleClass="singleItemUsedPrice">
                   <h:outputText value="Used Price: " styleClass="singleItemRankContent"/>
                   <h:outputText value="$#{amazonItem.usedPrice}" styleClass="singleItemUsedPriceContent"/>
                </h:panelGroup>   

                <h:panelGroup layout="block" styleClass="singleItemCollPrice">
                   <h:outputText value="Collectible Price: " styleClass="singleItemRankContent"/>
                   <h:outputText value="$#{amazonItem.collPrice}" styleClass="singleItemCollPriceContent"/>
                </h:panelGroup>   


                <h:panelGroup layout="block" styleClass="singleItemMaxBids"> 
                   <h:outputText value="Max Bids: " styleClass="singleItemRankContent"/>
                    <p:inplace id="bidsInplace" editor="true" styleClass="singleItemMaxBidsContent">  
                        <p:inputText value="#{amazonItem.maxBids}" required="true"/>  
                        <p:ajax event="save"  partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'bids')}" update="bidsInplace"/>
                    </p:inplace>  
                </h:panelGroup>  

                <h:panelGroup layout="block" styleClass="singleItemNetProfits"> 
                   <h:outputText value="Net Profits (%): " styleClass="singleItemRankContent"/>
                    <p:inplace id="profitsInplace" editor="true" styleClass="singleItemNetProfitsContent"  >  
                        <p:inputText value="#{amazonItem.netProfits}" required="true"/>  
                        <p:ajax event="save"  partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'profits')}" update="profitsInplace"/>
                    </p:inplace>  
                </h:panelGroup>  

                <h:panelGroup layout="block" styleClass="singleItemInclude"> 
                   <h:outputText value="Include Keywords: " styleClass="singleItemRankContent"/>
                    <p:inplace id="includeInplace" editor="true" styleClass="singleItemIncludeContent"  >  
                        <p:inputText value="#{amazonItem.includeKeywords}" required="true"/>  
                        <p:ajax event="save"  partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'include')}" update="includeInplace"/>
                    </p:inplace>  
                </h:panelGroup>  

                <h:panelGroup layout="block" styleClass="singleItemExclude">            
                   <h:outputText value="Exclude Keywords: " styleClass="singleItemRankContent"/>
                    <p:inplace id="excludeInplace" editor="true" styleClass="singleItemExcludeContent">  
                        <p:inputText value="#{amazonItem.excludeKeywords}" required="true"/>  
                        <p:ajax event="save"  partialSubmit="true" listener="#{manageItemsBean.inplaceEdit(amazonItem ,'exclude')}" update="excludeInplace"/>
                    </p:inplace>  

                </h:panelGroup>         

            </p:outputPanel>

            <p:chart type="line" model="#{manageItemsBean.createAmazonPriceChart(amazonItem)}"/>
            
            </p:rowExpansion>
        </p:dataTable>
        </h:panelGroup>

    </h:form>
</ui:composition>

它所使用的随机页面（overview.xhtml）。我稍微更改了图表的代码以在此页面上测试它，因为此页面没有（amazonItem）。这样做的图表在这个页面上工作，但它仍然在另一个页面上产生了同样的问题：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

</ui:composition>

Answer 1

这是由不包含图表的原始页面引起的。只加载基本素数js，不包括图表js。因此，当您动态更改包含时，它不会被加载。在这种情况下，手动添加它可以解决问题

<link rel="stylesheet" href="/javax.faces.resource/charts/charts.css.jsf?ln=primefaces"/> <h:outputScript library="primefaces" name="charts/charts.js"/>

Actualy这是在我的应用程序启动当前显示的页面时加载的，而不是在应用程序运行后我有新页面时加载的。希望这有帮助。

LineChart不能为Primefaces 5.0渲染

1 个答案: