Начало работы с графическими объектами SVG на страницах JSF 2.0

Question

Я хочу создать веб-страницы с интерактивным контентом SVG. Я работал в качестве настольного Java-приложения, используя Batik для рендеринга моего SVG и сбора событий пользовательского интерфейса, таких как щелчок мышью. Теперь я хочу использовать эти SVG-графические файлы в моем веб-приложении JSF (Primefaces) таким же образом.

Пытаясь начать, я обнаружил, что это не работает:

Я не возражаю читать, чтобы подняться до уровня обучения. Было немного удивительно, что некоторые поиски в Google не дали ничего полезного.

То, что я нашел, подсказало, что мне придется делать это с тегом f: verbatim, как если бы я вручную кодировал HTML. Затем мне нужно было бы добавить сценарий для захвата событий SVG и передачи их обратно в код AJAX. Если бы мне пришлось делать все, что я буду делать, но я надеялся, что будет более простой и автоматизированный способ.

Итак, вопросы:

1. Как заставить изображение отображаться в первую очередь?
2. Как получить события DOM из SVG-части страницы обратно в бэк-бины?

Большое спасибо за любые указатели.

Answer 1

Как заставить изображение отображаться в первую очередь?

<h:graphicImage> просто отображает элемент HTML <img>.Это не работает для объектов SVG в текущих браузерах.Вам нужно <object type="image/svg+xml">.Начиная с JSF 1.2, не нужно для безобразия <f:verbatim>.В Facelets вы можете просто встроить EL в обычный HTML следующим образом:

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

Стандартная реализация JSF , однако, , не предлагает компонента пользовательского интерфейса, который отображает <object>, поэтомунадо сделать это простым ванильным HTML способом.Я проверил на PrimeFaces , OpenFaces и RichFaces , но никто пока не предлагает компонент, который предназначен для встраивания объектов SVG.PrimeFaces имеет <p:media> и RichFaces <a4j:mediaOutput> для объектов фильма, но это все.

---

Как получить события DOMиз SVG-части страницы обратно в бэк-бины?

Лучше всего вам написать JavaScript, который делегирует скрытую форму AJAX JSF.Запишите необходимые данные в скрытые поля и запустите изменение или действие <f:ajax>.Подобный пример вы можете найти в этом ответе .

Answer 2

Вы можете попробовать какой-нибудь микс между ItsNat и JSF, например, используя iframe, чтобы содержать сгенерированную ItsNat разметку, содержащую SVG.ItsNat предоставляет множество возможностей для интеграции SVG в веб-приложениях, в чистом виде SVG или SVG, встроенных в HTML, включая события SVG и Batik (кстати, события SVG в апплете Batik будут исправлены в ItsNat 1.1).

Идея: использовать атрибут сеанса для совместного использования объекта моста между JSF и ItsNat