Discussion :

[zolotaya]

Bonjour à tous,

J'ai un problème et je ne sais pas trop comment m'y prendre. Je viens donc ici avant tout pour avoir des pistes de reflections et des idées pour la réalisation.

Je souhaite pouvoir associé des images à des mots dans un editeur de texte simple.
J'ai donc d'un coter un ensemble d'images dans un repertoire (ex : chat.jpeg, chien.png, java.jpg, duke.png); de l'autre ma jtextArea.

Ce que je souhaite faire c'est :

Quand un mot saisie dans la JTextArea est présent dans le repertoire (ex : chat) l'image du chat apparait au dessus du mot saisie.

Garder tous mots alignés de façon à pouvoir lire correctement le texte saisie

Pouvoir continuer à éditer mon texte "normalement"

Quelqu'un aurait'il une idée pour faire cela ?

Je vous remercie par avances pour vos idées.
Guillaume

[joel.drigo]

Salut,

Déjà, à mon avis, oublie le JTextArea : la gestion du document est associée à l'UI et ne laisse que peu de latitudes pour personnaliser. Opte plutôt pour JEditorPane, ou à la rigueur un JTextPane.

Il y plusieurs aspects à considérer :

1. Traiter la frappe au fur et à mesure (détecter les ajouts de mots, modifications ou suppressions) : voir la classe DocumentFilter
2. Repérer les mots et leur associer une image
   
   • le plus simple étant de faire de la concaténation entre un chemin de dossier et un mot, et de chercher si un fichier existe avec une extension dans une liste fixée (jpg, jpeg, png...)
   • mais si on doit associer au mot "chats" l'image "chat.jpeg", ceci ne fonctionne plus. Et encore moins si en tapant "canard", ou "colvert", on doit afficher "duck.png" !
     
     • On peut résoudre ça par exemple en ajoutant des mots clefs à l'image (dans les métadatas), ou dans un fichier à part (xml par exemple), et en indexant les chemins de fichier image en mémoire sur ces mots (dans des Map par exemple).
     • Plus overkill peut-être,, intégrer un moteur de recherche, style lucène (qui traitera facilement les pluriels, les genres, les synonymes...), ou elasticsearch (je n'ai jamais pratiqué, donc je ne sais pas si on peut l'embarquer facilement ?)...
3. Intégrer une image dans le texte, sans modifier la présentation du texte
   A priori, je ne sais pas quel est plus simple parmi les différentes options qui se présentent :
   
   • traiter le tout en StyledDocument : la difficulté étant de ne pas perturber l'alignement et la justification, donc à priori, déterminer la largeur du mot dans ses polices et styles, et faire que l'image ait cette largeur (y compris si le style ou la police change à posteriori).
   • utiliser le format HTML. Utiliser le format html peut peut-être aider à gérer automatiquement l'alignement : il faudrait que tu testes d'abord avec un fichier html fixe et des styles (en se limitant au niveau de css que le JEditorPane sait traiter naturellement, sinon tu seras obligé de le modifier, ou de prendre une API qui le traite). A partir du moment où tu réussi à le faire en html statique, tu pourras commencer à le faire avec un JEditorPane avec contenu text/html.
   • Personnellement, pour avoir fait des choses similaires, je partirais directement sur une solution avec JEditorPane, mes propres EditorKit et ViewFactory, pour gérer mon propre format, et utiliser mon propre javax.swing.text.View pour afficher et surtout dimensionner l'image par rapport au texte. Commence donc par regarder comment tout ça fonctionne et comment on peut le personnaliser
   
   A noter toutefois qu'un problème peut se poser pour les petits mots : l'image risque d'être très étroite (la solution peut être d'opter pour une autre solution (comme les tooltips par exemple), voire combiner plusieurs solutions).
4. Faire que çà ne dérange pas la frappe : ce n'est pas le plus difficile, à priori. Il faut juste replacer la vue pour que le curseur ne bouge pas à l'insertion d'une image: commencer par regarder JViewPort.scrollRectToVisible().

[zolotaya]

Bonjour Joel,

Merci pour ta réponse.
Je ne connaisais pas la classe DocumentFilter, je pense en effet qu'elle me sera fort utile!
Pour le point 2, je pense partir directement sur une map <mot> <image> avec soit mes imageIcon pré-chargé lors du lancement de l'application, soit les chemins vers les images. Je testerai et ferai mon choix en fonction de la mémoire utilisé et du nombre de mot chargés. Je pense qu'il ne devrait pas y en avoir des milliers. Dans tous les cas, je reseterai sur le cas classique : canard != canards != colvert ...

Je t'ai mis une image du résultat que je souhaiterai obtenir (pour être sur d'être bien compris).


L'idée est donc d'avoir une zone de saisie (la zone blanche) et une zone ou s'affiche les images (les images seront forcément de petite taille). Si l'image est plus large que le mot, l'image est centré dans sa zone, si le mot est plus large, c'est l'image qui est centrée.

L'avantage de partir sur du HTML est je pense la possibilié de personnalisation et le fait que ce soit "assez simple". J'ai juste encore un peu de mal à voir comment je peux traiter le texte à la volée à savoir transformer un mot genre "chat" en une structure HTML du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div span=mot><div span=image><img src=chat.jpeg /></div><div span=texte>chat</div></div>

et à gérer les séparateurs de mots (ici espace, apostrophe, point, virgule ...).

Juste pour savoir si j'ai bien compris le principe, c'est bien cette partie de transformation du texte que je peux déporter dans mes propres EditorKit / ViewFactory ?

Guillaume.

[joel.drigo]

L'avantage de partir sur du HTML est je pense la possibilié de personnalisation et le fait que ce soit "assez simple". J'ai juste encore un peu de mal à voir comment je peux traiter le texte à la volée à savoir transformer un mot genre "chat" en une structure HTML du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div span=mot><div span=image><img src=chat.jpeg /></div><div span=texte>chat</div></div>

et à gérer les séparateurs de mots (ici espace, apostrophe, point, virgule ...).

Juste pour savoir si j'ai bien compris le principe, c'est bien cette partie de transformation du texte que je peux déporter dans mes propres EditorKit / ViewFactory ?

En fait je parlais de EditorKit/ViewFactory pour faire ton propre format/modèle. Java fournit déjà un HtmlEditorKit : simplement il est limité (je ne sais plus quel version de html, la 3 peut être bien, et les css, la 1 à priori, et encore, ça marche surtout lorsque les styles sont dans l'attribut style il me semble) Mais on peut partir de HTMLEditorKit pour l'adapter et gérer la version de html/css qu'on veut (c'est une implémentation comme ça que j'utilise moi-même dans l'application que je développe professionnellement (un éditeur html en fait), et que j'étends justement pour traiter les tags object qui ne sont pas traités nativement ).

Le problème avec html/css (pour le coup, je maîtrise beaucoup moins - pas assez en tout cas pour savoir faire la présentation que tu recherches sans y réfléchir et faire des essais - et probablement que si j'avais à le faire professionnellement je le demanderais à mes collègues dont c'est le métier),

1. peut-on faire la présentation que tu souhaites (et avec quoi : html span, div, img ? css ? quelle version de css ? etc...)
2. est-ce que ce dont on a besoin est supporté directement par le HTMLEditorKit ou faut il l'étendre (ajouter des View) ? Peut-on étendre des View déjà existantes (mieux, et très probable), ou faut-il faire une vue à zéro (beaucoup de boulot pour tout bien gérer).

En tout cas tout ce qui est caractère est déjà traité par le HTMLEditorKit : les P, les SPAN, les DIV, les IMG c'est sûr. C'est surtout sur les attributs css d'alignement un peu particulier que je suis dans le doute.
Le plus simple étant de faire le doc HTML et de l'afficher dans un JEditorPane : tu verras tout de suite ce que ça donne. Ensuite, va voir le source de HTMLEditorKit.HTMLFactory.createView(Element) pour voir ce qui est géré en matière de tag html, ce qui te permettra de voir les classes utilisés pour le View, et de voir qu'est-ce qu'il manque et comment l'implémenter rapidement pour avoir la présentation que tu cherches à avoir.

[zolotaya]

Merci beaucoup pour ces précisions.
Je passe la discussion en résolu même si je commence tout juste à voir comment faire mais je pense avoir les informations et pistes princpales.
Je viendrai compléter quand j'aurai réussi à m'approcher du résultat souhaité ou j'ouvrirai une/des nouvelles discussions si je rencontre des problèmes lors de l'implémentation.

Guillaume.

[joel.drigo]

Salut,

J'ai fait un petit poc pour illustrer la solution à base de mon propre format (editorkit/viewfactory personalisé), en Java 8. Ce n'est pas complètement au point, mais c'est pour voir le principe.