在JSF 2.0页面中开始使用SVG图形对象 [英] Getting started with SVG graphics objects in JSF 2.0 pages

问题描述

我想要做的是创建带有交互式SVG内容的网页。我曾经作为一个Java桌面应用程序使用Batik渲染我的SVG并收集像mouseclick这样的UI事件。现在我想以同样的方式在我的JSF（Primefaces）Web应用程序中使用这些SVG图形文件。

试着开始，我发现这是行不通的：
$ b

< h：graphicImage id = gloobvalue =images / sprinkverks.svg
alt =Graphic Goes Here/>

我不介意做一些阅读学习曲线。只是有些令人惊讶的是，一些谷歌搜索没有什么用处。

我发现的结果表明我必须用f：verbatim标记就好像我手动编码HTML一样。然后我必须添加一些脚本来捕获SVG事件并将它们反馈回AJAX代码。如果我必须尽我所能，但我希望能有一种更简单和自动化的方式。

所以问题是：

1. 如何首先获取图像渲染？


2. 如何从SVG部分获取DOM事件返回到支持bean？

非常感谢任何指针。

如何让图片呈现

< h：graphicImage> 只是呈现HTML < img> 元素。这对于当前浏览器中的SVG对象不起作用。您需要 < object type =image / svg + xml的> 。自JSF 1.2以来，不需要 < f：verbatim> ugliness。在Facelets中，您可以像纯HTML一样内联EL：

 < object type =image / svg + xmldata = ＃{bean.svgUrl} > 
  

标准JSF实现，但是不提供呈现< object> ，所以你必须这样做简单的香草HTML方式。我检查了 PrimeFaces ， OpenFaces 和 RichFaces ，但没有人提供一个组件，它的目标是嵌入SVG对象。 PrimeFaces的 < p：media> 和RichFaces < a4j：mediaOutput> ，但就是这样。 blockquote>

如何从页面的SVG部分获取DOM事件返回到支持bean？

您最好的办法是编写一些JavaScript代理隐藏的JSF ajax表单。将必要的数据写入隐藏字段并触发< f：ajax> 更改或操作。你可以在这个答案。

What I want to do is create web pages with interactive SVG content. I had this working as a Java desktop application using Batik to render my SVG and collect UI events like mouseclick. Now I want to use those SVG graphics files in my JSF (Primefaces) web application in the same way.

Trying to get started, I found this didn't work:

<h:graphicImage id="gloob" value="images/sprinkverks.svg" alt="Graphic Goes Here"/>

I don't mind doing some reading to get up the learning curve. It was just a bit surprising that some google searches didn't turn up anything useful.

What I did find suggested that I would have to do this with the f:verbatim tag as if I were hand-coding the HTML. I would then have to add some script to capture the SVG events and feed them back into the AJAX code. If I have to do all that I will, but I was hoping there would be an easier and automated way.

So the questions are:

1. How to get the image to render in the first place?
2. How to get the DOM events from the SVG portion of the page back to the backing beans?

Much thanks for any pointers.

解决方案

How to get the image to render in the first place?

The <h:graphicImage> just renders a HTML <img> element. This doesn't work for SVG objects in current browsers. You need <object type="image/svg+xml">. Since JSF 1.2, there's no need for the <f:verbatim> ugliness. On Facelets you can just inline EL in plain HTML like so:

<object type="image/svg+xml" data="#{bean.svgUrl}">

The standard JSF implementation however doesn't offer an UI component which renders an <object>, so you have got to do it the plain vanilla HTML way. I've checked at PrimeFaces, OpenFaces and RichFaces, but no one offer a component yet which is targeted on embedding SVG objects. PrimeFaces has a <p:media> and RichFaces an <a4j:mediaOutput> for movie objects, but that's it.

---

How to get the DOM events from the SVG portion of the page back to the backing beans?

Your best bet is to write some JavaScript which delegates to a hidden JSF ajax form. Write the necessary data to the hidden fields and trigger the <f:ajax> change or action. You can find a similar example in this answer.

这篇关于在JSF 2.0页面中开始使用SVG图形对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！