如何将HTML代码导入JSF页面? [英] How import a HTML code to JSF page?
问题描述
我正在尝试导入此页面到我的JSF页面，该页面将具有数据库来获取数据，从而更具交互性.
I'm trying to import this page to my JSF page which is gonna have database to get the data, to be more interactive.
所以我做到了:
<!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>
但是当我尝试运行时，出现此错误:
But when I try to run gives me this error:
Error Parsing /showroom/report.xhtml: Error Traced[line: 71] The content of elements must consist of well-formed character data or markup.
引用的行是:
for (var i = 0; i < data.length; i++) {
我不知道这是怎么回事，我总是将HTML代码导入JSF，并且从未发生此错误.
I don't know what's wrong with this, I always import the HTML code to JSF and never happens this error.
如何解决这个问题?
推荐答案
这不是HTML代码，这是JavaScript代码. JavaScript语言具有多个运算符，它们是XML中的特殊字符(Facelets是XHTML + XML基于视图的技术)，例如<，>和&.需要将它们转义到<，>和&，以防止XML解析器将它们从字面上解释为XML.
This is not HTML code, this is JavaScript code. The JavaScript language has several operators which are special characters in XML (Facelets is a XHTML+XML based view technology), such as <, > and &. They needs to be escaped to <, > and & to prevent the XML parser from literally interpreting them as XML.
for (var i = 0; i < data.length; i++) {
另一种方法是将整个JS代码包装在<![CDATA[ ... ]]>块中.
An alternative is to wrap the entire JS code inside a <![CDATA[ ... ]]> block.
但是，更好的方法是将该JS代码放入其自己的JS文件中，并通过<h:outputScript>将其包括在内，例如
Better, however, is to put that JS code in its own JS file and include it by <h:outputScript>, e.g.
<h:outputScript name="global.js" />
另请参见:
- Mozilla开发人员文档-为XHTML编写JavaScript
- Mozilla developer documentation - Writing JavaScript for XHTML
See also:
无关与具体问题无关，您没有从JSF资源管理中受益.我建议更换
Unrelated to the concrete problem, you're not taking benefit of JSF resource management. I'd suggest to replace
<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" />
这样，您就无需摆弄容易出错的URI相对路径.
This way you don't need to fiddle with error prone URI-relative paths.
更新:根据注释，您希望将一些Java变量传递给脚本文件.您可以通过将Java对象(可以是javabean或Map<String, Object>)打印为JSON对象来实现，就像它是一个全局JS变量一样.
Update: as per comments, you'd like to pass some Java variables to the script file. You could do that by printing a Java object (which can be a javabean or a Map<String, Object>) as JSON object as if it is a global JS variable.
<h:outputScript>var data = ${bean.dataAsJson};</h:outputScript>
带有(借助于 Gson )
public String getDataAsJson() {
return gson.toJson(someBeanOrSomeMap);
}
(或只是在托管bean的(后)构造过程中已经创建了JSON对象)
该脚本将能够以data.someBeanPropertyOrMapKey身份进行访问.
The script will be able to access it as data.someBeanPropertyOrMapKey.
这篇关于如何将HTML代码导入JSF页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
