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

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

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

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

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

поэтому вопросы:

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

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

6
html jsf jsf-2 svg

2 ответов

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

на <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 an <a4j:mediaOutput> для объектов кино, но это все.

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

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

5

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

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

2