[JSF 1.2] Chargement dynamique d'images

Version imprimable

18/09/2007, 10h37
mow

[JSF 1.2] Chargement dynamique d'images

Bonjour,

OBJECTIF
Afficher une image générée dynamiquement sur une page JSF
J'ai essayé d'aborder le problème de différentes façons mais jusqu'à présent je n'ai toujours pas trouvé de solutions :

> Essai 1
J'ai tenté d'insérer grossièrement le flux XML de l'image dans la page JSF. Sans succès pas de reconnaissance de la part du navigateur de l'image SVG.
Si je charge uniquement le flux XML le navigateur affiche correctement l'image.

> Essai 2
Utiliser les balises OBJECT ou EMBED... je n'arrive pas à les combiner avec JSF il n'existe pas de balises JSF équivalentes...

> Essai 3
Après avoir généré mon image SVG, je la convertis en PNG. A partir de là je cherche à mettre l'url de la balise graphicImage et là ça pose problème.
En fait pour obtenir l'image PNG , j'ai été obligé de sauvegarder les fichiers SVG et PNG sur le disque.
Jusque là ça va, là ou ça flanche c'est à la mise à jour de l'url de l'objet graphicImage. C'est une URL et il le gère à partir de la racine de mon application (serveur J2EE - Glassfish)
Je pourrais m'amuser à sauvegarder (j'avoue je n'ai pas essayé !!) à l'emplacement de mes pages JSF mais je trouve que c'est trop de bidouille !!
Il y a -t-il moyen d'affecter à la balise graphicImage juste un flux ?...

...
...

Une autre solution possible serait de créer un rendererkit pour le flux XML de mon image. Au départ je trouvais ça trop lourd aujourd'hui je me dis qu'il n'y a peut être que ça qui marcherait. Le hic : je n'ai pas envie de m'y lancer pour rien.

Voilà, je suis désolé d'avoir été aussi long mais je suis à court d'idées. Je serais intéressé par toutes les propositions que vous aurez à me faire même si je crains de toutes les connaître déjà ; par contre je pense que dans mes différentes tentatives il y a des choses que j'aurais pu mieux faire ou approfondir....

Merci d'avance,
Mow

Bonjour, je vais tenter de répondre point par point sur tes essais:

> Essai1:
Très grossier effectivement. Pas tous les navigateurs ne sont capable d'afficher une flux svg imbriquée dans ton xhtml. Tu peux trouver plein d'exemple d'embed dans SVG test suites.

> essai2:
Une possibilité, Object, comme tu l'a essayé. Problème, aucun composant standard ne génère une balise Object. T'as là 2 possibilités.

La première est de créer un composant "object" qui va te générer une balise Object. Créer un composant JSF perso n'est pas bien difficile. Le plus dur est d'oser le pas :D. Pour créer un composant, il te faut l'objet composant, éventuellement une taglib (si tu utilise JSP, pas besoin avec facelets), définir ton composant en trois lignes de xml dans un META-INF/faces-config.xml, éventuellement, pour faire propre, un renderer, mais c'est pas indispensable, le composant peut se charger du rendering.

La deuxième possibilité, moins propre, est d'aller à la bourrin avec un <f:verbatim>autour te la partie ouvrante statique de ton Object, puis un h:outputText pour l'output de l'url et finalement un deuxième f:verbatim pour la partie fermante. Ca donnerais un truc dans ce gout:
Code:

1 2 3 4 5 <f:verbatim> <object data=" </f:verbatim> <h:outputText value="..."/> <f:verbatim>" width="80" height="60" type="image/svg+xml"/></f:verbatim>
Une variante serait d'utiliser un outputText avec un escape="false" pour créer à l'intérieur la balise Object:

Code:

<h:outputText escape="false" value='<object data="#{...}" width="80" height="60" type="image/svg+xml"/>"/>

Moche dans les deux cas...

>essai 3
h:graphicImage est pour moi probablement le meilleur résultat. Tu pointe le h:graphicImage non pas sur un png comme tu le fais, mais tu peux le pointer directement sur un flux svg (les w3c a défini qu'on pouvait utiliser le tag <image> pour du svg). Comme ton svg c'est du xml, tu peux créer un jsp (jsf) qui ne fait que générer le flux. T'as plus qu'à pointer le h:graphicImage dessus.

Si tu préfère vraiment la génération png (support des "vieux" browsers), tu peux soit t'orienter vers le composant mediaOutput que fourni la libraire richfaces (attention, grosse tartine d'ajax qui arrive avec) ou alors créer un composant perso qui te balance le flux binaire sur l'outputStream de la requete. T'as alors plus qu'à créer, comme pour du svg, un fichier jsf qui n'inclu que l'output de l'image en utilisant ce composant perso. Exemple:

fichier machin.jsf:

Code:

<h:graphicImage url="/image/picture.jsf" />

fichier /images/picture.jsf (version svg):
Code:

1 2 3 4 5 6 7 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> <svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360"> .....
Fichier images/picture.jsf, version binaire

Code:

<custom:binaryOutput value="#{monBean.fluxPng}" contentType="image/png"/>

(Cette dernière méthode fonctionne de manière confirmée à mon boulot, 3 fois pas de code pour le faire :D)

26/09/2007, 18h05
mow

tchize_,
Avant tout merci pour le temps que tu as pris pour me répondre j'ai du attendre longtemps mais cela a fini par intéresser quelqu'un !!!

Le truc c'est que j'ai pu me débrouiller en partant de l'essai 3.
Grace à la propriete des "docroot alternatifs", j'ai pu m'en tirer en sauvant le fichier généré en PNG avec Batik. J'ai laissé un post à ce sujet... tu le trouveras ici.

Par contre, je vais essayer ta méthode j'y avais pensé mais je n'ai pas essayé pensant que le serveur ne me laisserait pas modifier le picture.jsf

Autre chose ta taglib Custom, elle est proprietaire j'imagine...
Je vais aussi essayer de suivre ton conseil... franchir le pas en ce qui concerne la création d'un composant JSF....
Mais bon je promets rien.... Allez on va essayer quand même...:roll:

Je te tiens au courant...

Merci,
Mow

Citation:

Envoyé par mow

Autre chose ta taglib Custom, elle est proprietaire j'imagine..

Juste la taglib dans laquelle to met ton propre composant, tu l'appelle comme tu veux :)

J'ai déjà fait au boulot un composant jsf pour faire du rendu binaire. Basiquement, le composant en lui meme fait à peine quelques ligne et doit se résumer à un "encodeBegin()" dans lequel je fait en gros
Code:

1 2 context.getExternalContext().getResponse().getOutputStream().write(component.getValue()); context.responseComplete()/*Arrêt là le processus JSF, on a effectué un rendu directement dans le stream*/
Le truc *chiant* avec un composant perso, si tu utilise pas facelets, c'est qu'il te faut te casser le cul à écrire aussi une taglib. Mais comme au boulot, c'est du facelet, le composant a été écrit en 15 minutes :p

27/09/2007, 10h56
mow

Ok, vive les trucs chiants - j'utilise pas facelets

Pour info, je pourrais voiur sur le net mais peux-tu m'en dire plus sur facelets ?
Que gangne-t-on en plus à l'utiliser ??

Merci,
Mow
27/09/2007, 11h43
tchize_
En gros, ce que tu gagne avec facelets:

Système de templates
Possibilité sans accro de mélanger sur html et des tags JSF. (En JSP obligé de passer par desu f:verbatim)
Tu peux mettre des expression language partout
ex:
Code:

1 2 3 <head><title>Profil de #{user.name}</title></head> <body> ....
Facilité d'ajout de nouveaux tags de composants (suffit de donner dans un fichier xml le type et le renderer, pas besoin de faire plus)
Création de composant composites (utilisation d'un template facelet comme étant un composant)
Pas besoin de tag view, tout est une vue
Utilisation de xml avec namespace au lieu d'un fichier jsp illisible
Tu peux avoir JSP et facelets en même temps
Plus rapide que JSP, pas besoin de compilation et de création d'un "servlet" pour chaque JSP

Ce que tu perd:
Tous les tags non-jsf ne sont plus disponibles, Facelets n'utilise pas les taglibs standards. La JSTL core est convertie en facelets, donc t'as des bases quand meme.
Pas de scriptlets possibles
27/09/2007, 14h56
mow

Tout cela est fort intéressant - J'ai l'impression qu'on y gagne plus à l'utiliser !

Le seul hic peut être ce serait la "non creation" de servlet je pense que cela peut être embetant de ne pas avoir accès au contexte fourni par la servlet ?

Mow
27/09/2007, 15h06
romaintaz

Je ne pense pas. Tu devrais avoir tout ce dont tu as besoin dans le FacesContext...
15/07/2008, 16h31
bassbaki

ça ne marche pas : inclure SVG dans JSF

Salut,
j'ai essayé la solution 2 :

Code:

<h:outputText escape="false" value='<object data="img/graphe.svg" width="80" height="60" type="image/svg+xml"/>"/>

Mais ça n'a pas marché et il m'envoie : objet introuvable

La solution 3 :

Code:

<h:graphicImage url="/image/picture.jsf" />

ne trouve pas l'image et m'affiche une croix rouge pour indiquer que l'image est introuvable.

Si j'ajoute le type dans la page :

Code:

<jsp:directive.page contentType="image/svg+xml;charset=UTF-8" pageEncoding="UTF-8"/>

il me demande d'enregistrer la page.

Il me reste d'essayer de créer le composant mais comme je n'ai jamais fait, j'hésite encore.

Merci de m'aider pour résoudre mon problème et inclure mon graphe svg dans ma page jsf pour le changer ensuite dynamiquement avec un flux XML.
16/07/2008, 10h10
bassbaki

SVG, jsf et flux XML

J'ai reussi à integrer l'image en utilisant

Code:

<embed width="550" height="300" type="image/svg+xml" src="img/graphe.svg" name="tReel"></embed>

Mais il faut que je réussisse maintenant à envoyer le flux de données pour changer ma courbes dynamiquement.

Bonne journée
04/08/2008, 16h47
bassbaki
Bonjour,
Je reviens vers vous de nouveau puisque je ne réussi pas à envoyer un flux XML à partir de ma base de données.

Plus clairement : dans mon projet jsf, je dois afficher une courbe en temps réel en utilisant le svg. les données sont mises à jours régulièrement dans une base de données.
Est-ce-que quelqu'un a une idée comment faire?

Sinon j'ai essayé plusieurs méthodes mais je tourne en boucle et je ne réussi pas à avancer dans mon projet :
1ère méthode :
- j'ai inséré le graphe.svg dans ma page jsp comme suit :
  
  Code:
  
  <embed width="550" height="300" type="image/svg+xml" src="img/graphe.svg" name=""></embed>
  
  et j'ai intégré du java Script dans ma page jsp pour chercher les coordonnées de la courbe à partir d'un fichier xml :
  Code:
  
  1 2 3 4 5 6 <?xml version="1.0" encoding="iso-8859-1"?> <SVGrealtime> <text id="hist_0" x="10" y="10.470"></text> <text id="hist_1" x="15" y="100.470"></text> ...... </SVGrealtime>
  Le problème est que je ne sais pas comment je peux faire pour modifier les données du fichier xml à partir de ma BDD. En d'autres termes, je ne réussi pas à accéder à l'url du fichier.xml à partir de mon bean.
  Si je fais
  
  Code:
  
  File SVGOutputFile = new File("web/fichier.xml");
  
  il va chercher web/fichier.xml dans jboss-4.0.3SP1/bin et non pas dans le war qui est dans jboss-4.0.3SP1\server\default\deploy.
  
  et si je fais
  
  Code:
  
  File SVGOutputFile = new File("web/fichier.xml").toURI();
  
  il m'envoie une erreur :
  Code:
  
  1 2 3 4 cannot resolve symbol symbol : method toURI () [javac] location: class java.net.URL
  Ma question est comment je peux accéder à ce fichier sur le serveur.
2ème méthode :
- j'ai essayé d'utiliser le xslt avec saxon.jar mais je n'ai pas réussi à avancer non plus.
  j'ai crée dans le même répertoire un fichier.xsl qui contient un lien vers mon fichier.xml mais c'est tout.
  comment je peux creuser plus dans cette direction?
3ème méthode :
- Est ce qu'on peut utiliser
  Code:
  
  1 2 doGet(HttpServletRequest request, HttpServletResponse response)
  en JSF? et ce que ça peut m'aider dans mon problème.