如何将HTML代码导入JSF页面？_Html_Jsf_Jsf 2_Glassfish 3

如何将HTML代码导入JSF页面？

html jsf jsf-2

如何将HTML代码导入JSF页面？,html,jsf,jsf-2,glassfish-3,Html,Jsf,Jsf 2,Glassfish 3,我正试图将其导入到我的JSF页面，该页面将有数据库来获取数据，以便更具交互性所以我这样做了： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.

我正试图将其导入到我的JSF页面，该页面将有数据库来获取数据，以便更具交互性

所以我这样做了：

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

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <h:outputScript>
            var chart;
            $(document).ready(function() {

                var colors = Highcharts.getOptions().colors,
                    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
                    name = 'Browser brands',
                    data = [{
                            y: 55.11,
                            color: colors[0],
                            drilldown: {
                                name: 'MSIE versions',
                                categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                                data: [10.85, 7.35, 33.06, 2.81],
                                color: colors[0]
                            }
                        }, {
                            y: 21.63,
                            color: colors[1],
                            drilldown: {
                                name: 'Firefox versions',
                                categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                                data: [0.20, 0.83, 1.58, 13.12, 5.43],
                                color: colors[1]
                            }
                        }, {
                            y: 11.94,
                            color: colors[2],
                            drilldown: {
                                name: 'Chrome versions',
                                categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                                    'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
                                data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
                                color: colors[2]
                            }
                        }, {
                            y: 7.15,
                            color: colors[3],
                            drilldown: {
                                name: 'Safari versions',
                                categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                                    'Safari 3.1', 'Safari 4.1'],
                                data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
                                color: colors[3]
                            }
                        }, {
                            y: 2.14,
                            color: colors[4],
                            drilldown: {
                                name: 'Opera versions',
                                categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
                                data: [ 0.12, 0.37, 1.65],
                                color: colors[4]
                            }
                        }];


                // Build the data arrays
                var browserData = [];
                var versionsData = [];

                for (var i = 0; i < data.length; i++) {

                    // add browser data
                    browserData.push({
                        name: categories[i],
                        y: data[i].y,
                        color: data[i].color
                    });

                    // add version data
                    for (var j = 0; j < data[i].drilldown.data.length; j++) {
                        var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
                        versionsData.push({
                            name: data[i].drilldown.categories[j],
                            y: data[i].drilldown.data[j],
                            color: Highcharts.Color(data[i].color).brighten(brightness).get()
                        });
                    }
                }

                // Create the chart
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'pie'
                    },
                    title: {
                        text: 'Browser market share, April, 2011'
                    },
                    yAxis: {
                        title: {
                            text: 'Total percent market share'
                        }
                    },
                    plotOptions: {
                        pie: {
                            shadow: false
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                        }
                    },
                    series: [{
                        name: 'Browsers',
                        data: browserData,
                        size: '60%',
                        dataLabels: {
                            formatter: function() {
                                return this.y > 5 ? this.point.name : null;
                            },
                            color: 'white',
                            distance: -30
                        }
                    }, {
                        name: 'Versions',
                        data: versionsData,
                        innerSize: '60%',
                        dataLabels: {
                            formatter: function() {
                                // display only if larger than 1
                                return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                            }
                        }
                    }]
                });
            });

    </h:outputScript>

    </h:head>
    <h:body>

    <script type="text/javascript" src="../../resources/javascript/highchart/highcharts.js"></script>
    <script type="text/javascript" src="../../resources/javascript/highchart/modules/exporting.js"></script>

    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

    </h:body>
</html>

参考行为：

                for (var i = 0; i < data.length; i++) {

for（变量i=0；i


我不知道这有什么问题，我总是将HTML代码导入JSF，从来没有发生过这种错误
如何解决这个问题？
这不是HTML代码，这是JavaScript代码。JavaScript语言有几个以XML表示的运算符（Facelets是一种基于XHTML+XML的视图技术），例如
和&
。需要将它们转义到
、
和&；
，以防止XML解析器将它们逐字解释为XML
for (var i = 0; i &lt; data.length; i++) {

另一种方法是将整个JS代码包装在
块中
然而，更好的方法是将JS代码放在自己的JS文件中，并通过
将其包括在内，例如
<h:outputScript name="global.js" />

（或者只是在托管bean（post）构造期间创建JSON对象）
脚本将能够作为数据访问它。someBeanPropertyOrMapKey
谢谢Bauke（好久不见我的朋友=]）。但是我不能将它们放在文件中，因为我要与数据库中的数据交互以形成图表。我不明白为什么会出现问题。如果你想将变量从Java传递到JS，只需创建一个全局JS对象，该对象将由独立脚本文件使用，或者让JS通过ajax获取。你能告诉我一些吗链接，我可以看到如何做到这一点？（两个建议似乎都符合我的需要）查看更新的答案，以获取创建全局JS变量的示例。这是最简单的。我正在尝试按照你说的做，但我仍然不明白。我即将完成此操作，请看这里：
<h:outputScript name="global.js" />

<script type="text/javascript" src="../../resources/javascript/highchart/highcharts.js"></script>
<script type="text/javascript" src="../../resources/javascript/highchart/modules/exporting.js"></script>

<h:outputScript name="javascript/highchart/highcharts.js" />
<h:outputScript name="javascript/highchart/modules/exporting.js" />

<h:outputScript>var data = ${bean.dataAsJson};</h:outputScript>

public String getDataAsJson() {
    return gson.toJson(someBeanOrSomeMap);
}