Generating Histogram through Java and PrimeFaces

问题

I am having trouble in generating histogram through java prime faces.I have this xhtml file.

<!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"  
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">Charts - Bar</h1>
        <div class="entry">
            <p>BarChart displays a CartesianChartModel.</p>

            <p:barChart id="basic" value="#{ChartBean.categoryModel}" legendPosition="ne"
                        title="Basic Bar Chart" min="0" max="200" style="height:300px"/>




        </div>

    </ui:define>
</html>

I also have this ChartBean.java file which has ChartBean.categoryModel defined above

package exmpl;



    //package org.primefaces.examples.view;  

    import java.io.Serializable;  


import java.util.ArrayList;

import exmpl.controller.QueryBean;

    import org.primefaces.model.chart.CartesianChartModel;  
import org.primefaces.model.chart.ChartSeries;  

    public class ChartBean implements Serializable {  

        private CartesianChartModel categoryModel;  

        public ChartBean() {  
            System.out.print("Inside constructir");
            createCategoryModel();  
        }  

        public CartesianChartModel getCategoryModel() {  
            return categoryModel;  
        }  

        private void createCategoryModel() {  

            System.out.print("Inside Function Category Model");
            QueryBean obj = new QueryBean();
            ArrayList<Integer> employeeage = obj.employeeAge();

            System.out.print("After accessing QueryBean");

            ArrayList<Integer> grp1 = new ArrayList<Integer>();
            ArrayList<Integer> grp2 = new ArrayList<Integer>();
            ArrayList<Integer> grp3 = new ArrayList<Integer>();
            ArrayList<Integer> grp4 = new ArrayList<Integer>();
            ArrayList<Integer> grp5 = new ArrayList<Integer>();
            ArrayList<Integer> grp6 = new ArrayList<Integer>();
            ArrayList<Integer> grp7 = new ArrayList<Integer>();
            for(Integer i : employeeage)
                {
                if(i.intValue() > 0 && i.intValue() <= 20 )
                    {
                    grp1.add(i);
                    }
                else if(i.intValue() > 20  && i.intValue() <= 40 )
                    {
                    grp2.add(i);
                    }
                else if(i.intValue() > 40 && i.intValue() <= 50 )
                    {
                    grp3.add(i);
                    }
                else if(i.intValue() > 50 && i.intValue() <= 60 )
                    {
                    grp4.add(i);
                    }
                else if(i.intValue() > 60 && i.intValue() <= 70 )
                    {
                    grp5.add(i);
                    }
                else if(i.intValue() > 70 && i.intValue() <= 80 )
                    {
                    grp6.add(i);
                    }
                else 
                    {
                    grp7.add(i);
                    }
                }

            int size1 = grp1.size();
            int size2 = grp2.size();
            int size3 = grp3.size();
            int size4 = grp4.size();
            int size5 = grp5.size();
            int size6 = grp6.size();
            int size7 = grp7.size();
            categoryModel = new CartesianChartModel();  

            ChartSeries employee = new ChartSeries();  
            patient.setLabel("Employees");  

            employee.set("0-20", size1);  
            employee.set("21-40", size2);  
           employee.set("41-50", size3);  
            employee.set("51-60", size4);  
            employee.set("61-70", size5);  
            employee.set("71-80", size6);
            employee.set("80+", size7);

            categoryModel.addSeries(employee);  

        }  
    }

ALso the ui.xhtml template in the first xhtml looks like this

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

<f:view contentType="text/html">

        <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>PrimeFaces - ShowCase</title>
            <!-- <link rel="shortcut icon" type="image/png" href="#{request.contextPath}/images/favicon.png" /> -->
        </f:facet>

        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

                <ui:insert name="head"></ui:insert>

        <script type="text/javascript">
            $(function() {$('.sidebar a').hover(function() {$(this).toggleClass('ui-state-hover');})});
        </script>

        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-12200033-3']);
            _gaq.push(['_trackPageview']);

            (function() {
              var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
              ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();

          </script>
        </h:head>

        <h:body>

                <div id="header" class="ui-widget ui-widget-header">
                        <div id="logo">
                                <img src="#{request.contextPath}/images/logo.png" alt="Logo"/>
                        </div>


                            </div>

        <div id="page" class="ui-widget">
            <div id="sidebar" class="ui-widget-content ui-corner-bottom ui-helper-clearfix ui-shadow">


                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title ui-state-highlight">Charts</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>

                                    <li><a href="#{request.contextPath}/ui/barChart.jsf">Bar</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                </ul>
                           </td>

                         </tr>
                         </table>
            </div>
            </div>
            <div id="content">
                <div class="post">
                    <ui:insert name="content">...</ui:insert>
                </div>
            </div>

            <div style="clear: both;"></div>
        </div>


        <ui:insert name="footer">
            <div id="footer" class="ui-widget ui-widget-header ui-corner-all">
                <p class="copyright">Running #{build.primefacesVersion} on #{build.jsfVersion}</p>
            </div>
        </ui:insert>

        <ui:insert name="status">
            <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
                <f:facet name="start">
                    <p:graphicImage value="/images/loading.gif" />
                </f:facet>

                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>
        </ui:insert>

        <ui:insert name="highlight">
            <script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
            <script language="javascript">
                SyntaxHighlighter.all();
            </script>
        </ui:insert>

        </h:body>


</f:view>
</html>

Now the problem is that when I run the above files nothing happens and no display is visible.I am new to this and hence unable to point where I am making an error.Can anyone help me in this?

UPDATE: When I run above xhtml file I do not even see inside constructor printed on console which is written on ChartBean() constructor

回答1:

Of course you can't see the output from the constructor as it is really never called using the provided code. To make your bean accessible in your xhtml page, you must use @Named or @ManagedBean annotation. When you do this, instance of the bean will be created when you refer to it in xhtml(based on its scope).

       @ManagedBean
       @ViewScoped
       public class ChartBean implements Serializable { 
          ...
       }

Then you can use it in your xhtml like this:

      #{chartBean.categoryModel}

来源：https://stackoverflow.com/questions/23093641/generating-histogram-through-java-and-primefaces

标签

jsf

primefaces

histogram