开发者

How to render a chart inside a tabView with PrimeFaces

开发者 https://www.devze.com 2023-04-11 10:29 出处:网络
I need to display a lot of charts on some kind of status page. The charts should be grouped in tabView and accordionPanel. This setup works nice with PrimeFaces 2.2.1. Because of some features of the

I need to display a lot of charts on some kind of status page. The charts should be grouped in tabView and accordionPanel. This setup works nice with PrimeFaces 2.2.1. Because of some features of the new version (and because the charts are no longer Flash) I am trying to migrate to PrimeFaces 3 (3.0.M3 at the moment).

<p:tabView>  
  <p:tab title="One">  
    <p:pieChart value="#{myBean.myChartOne}" />
  </p:tab>
  <p:tab title="Two">  
    <p:pieChart value="#{myBean.myChartTwo}" />
  </p:tab>
</p:tabView>

With PrimeFaces 3 the charts don't show up. There is a bug report describing this problem and stating that there should be lazy loading for charts in 3.0 M4.

Update:

I am now using PrimeFaces 3.0 M4-snapshot with lazy lo开发者_如何学编程ading charts. It looks like this:

<p:tabView>  
      <p:tab>
        <p:accordionPanel>  
            <p:tab title="All time">  
                <p:commandButton value="load chart" type="button" onclick="onTimeChartAll.init(); buttonOnTimeChartAll.disable();"
                    widgetVar="buttonOnTimeChartAll"/>
                <p:pieChart value="#{myBean.onTimeChartAll}" lazy="true" 
                    widgetVar="onTimeChartAll" />
            </p:tab>
            <p:tab title="30 Days">  
                <p:commandButton value="load chart" type="button" onclick="onTimeChart30Days.init();buttonOnTimeChart30Days.disable();"
                    widgetVar="buttonOnTimeChart30Days"/>
                <p:pieChart value="#{myBean.onTimeChart30Days}" lazy="true" widgetVar="onTimeChart30Days" />
            </p:tab>
        </p:accordionPanel>
    </p:tab>
    [...] <!-- and so on -->
</p:tabView>

I can open a tab and click on the button to load the chart. Now I want to find a solution to automatically load the chart when a tab is opened. The Is there a solution to automatically load the chart, when the tab is opened? For p:accordionPanel and p:tabView there is the onTabShow attribute, but I think I would need it for p:tab. Or is there a possibility to address the widgetVar of the currently opened tab via onTabShow and var?


The primefaces project lead just wrote a blog post saying that this should be fixed in 3.0.M4:

We are glad to share that upcoming PrimeFaces 3.0.M4 has a generic solution for this, so on page you don’t need to deal with these as PrimeFaces handles these under the hood for you.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号