Erste Schritte mit SVG-Grafiken-Objekte in JSF-2.0-Seiten

Was ich will zu tun ist, erstellen Sie web-Seiten mit interaktiven SVG-Inhalte. Ich hatte diese arbeiten als ein Java-desktop-Anwendung mit Batik zum Rendern der SVG und sammeln UI-Ereignisse wie Mausklick. Nun möchte ich diese verwenden, um SVG-Grafiken Dateien in meiner JSF (Primefaces) web Anwendung in der gleichen Weise.

Versuchen, um zu beginnen, fand ich dies nicht funktioniert hat:

<h:graphicImage id="gloob" value="images/sprinkverks.svg"
alt="Grafik Geht Hier"/>

Ich nichts dagegen tun, etwas zu Lesen, um die Lernkurve. Es war nur ein wenig verwunderlich, dass einige der google-Suche nicht wieder bis alles, was nützlich ist.

Was ich gefunden habe vorgeschlagen, dass ich tun müsste, wäre dies mit dem f:verbatim-tag, wie wenn ich von hand-Codierung des HTML-Codes. Ich müsste dann fügen Sie einige Skript zum erfassen der SVG-Veranstaltungen und füttern Sie Sie zurück in die AJAX-code. Wenn ich all das tun, was ich will, aber ich hatte gehofft, es wäre ein einfacher und automatisiert.

Also die Fragen sind:

  1. Wie man das Bild Rendern in den ersten Platz?
  2. Wie man die DOM-Ereignisse aus dem SVG-Bereich der Seite zurück zu den backing beans?

Viel Dank für jegliche Hinweise.

InformationsquelleAutor AlanObject | 2010-12-25
  1. 6

    Wie man das Bild Rendern in den ersten Platz?

    Den <h:graphicImage> nur rendert ein HTML - <img> element. Dies funktioniert nicht für SVG-Objekten in aktuellen Browsern. Sie müssen <object type="image/svg+xml">. Seit JSF 1.2 gibt es keine Notwendigkeit für die <f:verbatim> Hässlichkeit. Auf der Facelets-Sie können nur inline-EL in plain HTML zum Beispiel so:

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

    Den standard-JSF-Implementierung jedoch nicht bieten eine UI-Komponente, welche macht ein <object>, so dass Sie zu tun haben es die plain-vanilla-HTML Weg. Ich habe bei PrimeFaces, OpenFaces und RichFaces, aber niemand bieten eine Komponente noch die gezielte einbetten von SVG-Objekten. PrimeFaces hat eine <p:Medien> und RichFaces eine <a4j:mediaOutput> für Film-Objekte, aber das ist es.

    Wie man die DOM-Ereignisse aus dem SVG-Bereich der Seite zurück zu den backing beans?

    Ihre beste Wette ist, um einige JavaScript schreiben, welches die Delegierten zu einem versteckten JSF-ajax-Formular. Schreiben Sie die erforderlichen Daten ein, um die versteckten Felder aus und lösen Sie das <f:ajax> änderung oder Aktion. Finden Sie ein ähnliches Beispiel in diese Antwort.

    InformationsquelleAutor BalusC
  2. 2

    Könnten Sie versuchen, eine Art Mischung zwischen ItsNat und JSF, zum Beispiel mit einem iframe enthalten ItsNat generierte markup mit SVG. ItsNat bietet viele Möglichkeiten zur Einbindung von SVG in web-Anwendungen, Reine SVG oder SVG inline in HTML, einschließlich SVG-Veranstaltungen und-Batik - (durch die Art und Weise SVG-events in Batik-applet werden behoben, ItsNat 1.1).

    Idee: verwenden Sie eine session-Attribut zu teilen eine Brücke Objekt zwischen JSF und ItsNat

    InformationsquelleAutor jmarranz
Schreibe einen Kommentar