info bulles jsp

Bonjour,

je développe une application J2EE, et je cherche à faire une info-bulle.
J'ai déjà trouvé des scripts javascripts, pour des info-bulles qui peuvent contenir tout "truc" html....
Mais est-ce que ça existe pour une info-bulle contenant des "truc" Jsp, à savoir des données qui seront cherchées par des appels de méthodes java ... ? En gros du contenu dynamique ?

merci :)

Bonjour,

Si tu as un script (javascript) pour faire des infos bulle, rien ne t'empeche d'inserer du java dedans. Par contre, ce java sera executé coté serveur donc il n'y aura pas le dynamisme d'un javascript au sein meme d'une "request".
Mais montre nous un peu plus précisement ce que tu as et ce que tu veux, ca sera plus simple pour te répondre.

Salut, du code jsp sera de toute facon de l'html pour le client, sinon, revoir le principe client/serveur des applis web ;)
Et pour répondre à ta question, voici le code que j'utilise, j'insere un .js dans mon entete ainsi que du CSS.
Le .js contient :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
IE4 = (document.all) ? 1 : 0;
NS4 = (document.layers) ? 1 : 0;
VERSION4 = (IE4 | NS4) ? 1 : 0;
if (!VERSION4) event = null;
function helpGetOffset(obj, coord) {
    var val = obj["offset"+coord] ;
    if (coord == "Top") val += obj.offsetHeight;
    while ((obj = obj.offsetParent )!=null) {
        val += obj["offset"+coord];
        if (obj.border && obj.border != 0) val++;
	}
	return val;
}
function helpOut (element){
    ptrLayer = document.getElementById(element);
    ptrLayer.style.visibility = "hidden";
} 
 
function helpOver (event,element,texte) {
    var ptrObj, ptrLayer;
    if (IE4) {
	    ptrObj = event.srcElement;
	    //ptrLayer = document.all.helpBox;
	}
	else {
	    ptrObj = event.target;
	    //ptrLayer = document.getElementById(element);
	}
    ptrLayer = document.getElementById(element);
    //alert ("ptrLayer.parent : "+ptrLayer.parentNode);
	//if (!ptrObj.onmouseout) ptrObj.onmouseout = helpDown;
	var str = '<DIV CLASS="helpBoxDIV">'+texte+'</DIV>';
	ptrLayer.innerHTML = str;
    var top, left;
    top = helpGetOffset (ptrObj,"Top") + 2;
    left = helpGetOffset (ptrObj,"Left")+4;
    //alert("top : "+top+"|| left : "+left);
	ptrLayer.style.top  = top+"px";
	ptrLayer.style.left = left+"px";
	ptrLayer.style.visibility = "visible";
}

Dans l'entete HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="javascript1.2" type="text/javascript" src="javascript/infobulle.js"></script>
<style type="text/css">
div.helpBoxDIV {
    white-space:nowrap;
    padding: 2px;
    background: #FFFFCF;
    border: 1px solid #000000;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
}
</style>

Ensuite, je me suis écris un tag qui insere mon infobulle et qui est compatible avec les EL (marre des copié/collé ;) ), voici le code du tag:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
public class ToolTipTag extends TagSupport {
    //the id for DHTML
    String id;
    String text;
    String href;
    String cssClass;
    String cssId;
    Logger logger = Logger.getLogger(ToolTipTag.class);
    /**
     * @return Returns the cssClass.
     */
    public String getCssClass() {
        return this.cssClass;
    }
 
    /**
     * @param cssClass The cssClass to set.
     */
    public void setCssClass(String cssClass) {
        this.cssClass = cssClass;
    }
 
    /**
     * @return Returns the cssId.
     */
    public String getCssId() {
        return this.cssId;
    }
 
    /**
     * @param cssId The cssId to set.
     */
    public void setCssId(String cssId) {
        this.cssId = cssId;
    }
 
    /**
     * @return Returns the href.
     */
    public String getHref() {
        return this.href;
    }
 
    /**
     * @param href The href to set.
     */
    public void setHref(String href) {
        this.href = href;
    }
 
    /**
     * @return Returns the id.
     */
    public String getId() {
        return this.id;
    }
 
    /**
     * @param id The id to set.
     */
    public void setId(String id) {
        this.id = id;
    }
 
    /**
     * @return Returns the text.
     */
    public String getText() {
        return this.text;
    }
 
    /**
     * @param text The text to set.
     */
    public void setText(String text) {
        this.text = text;
    }
 
    /**
     * @see javax.servlet.jsp.tagext.TagSupport#doEndTag()
     */
    public int doEndTag() throws JspException {
        JspWriter writer = pageContext.getOut();
        try {
            writer.write("</a>");
        } catch (IOException ioe) {
            throw new JspException(ioe);
        } 
 
        return TagSupport.EVAL_PAGE;
 
    }
 
    /**
     * @see javax.servlet.jsp.tagext.TagSupport#doStartTag()
     */
    public int doStartTag() throws JspException {
 
        String text_ = text!=null?(String)ExpressionEvaluatorManager.evaluate("text", this.text, String.class,this, super.pageContext ):null;
        String id_ = getId_(id);
        String href_ = href!=null?(String)ExpressionEvaluatorManager.evaluate("href", this.href, String.class,this, super.pageContext ):null;
        String cssClass_ =cssClass!=null?(String)ExpressionEvaluatorManager.evaluate("cssClass", this.cssClass, String.class,this, super.pageContext ):null;
        String cssId_ = cssId!=null?(String)ExpressionEvaluatorManager.evaluate("cssId", this.cssId, String.class,this, super.pageContext ):null;
        JspWriter writer = pageContext.getOut();
 
        try {
            writer.write("<div id='infobulle"+id_+"' style='position:absolute;z-index: 1000;top: 0px;left: 0px;'></div>\n");
            writer.write("<a ");
            if (href_!=null&&!"".equals(href_))
                writer.write("href='"+href_+"' "); 
            if (cssClass_!=null&&!"".equals(cssClass_))
                writer.write("class='"+cssClass_+"' ");
            if (cssId_!=null&&!"".equals(cssId_))
                writer.write("id='"+cssId_+"' ");
            
            writer.write("onmouseover=\"javascript:helpOver(event,'infobulle"+id_+"','"+text_+"')\" ");
            writer.write("onmouseout=\"javascript:helpOut('infobulle"+id_+"')\">");
        } catch (IOException ioe) {
            throw new JspException(ioe);
        }
 
        return TagSupport.EVAL_BODY_INCLUDE;
    }
 
    /**
     * get the id with expression language or generate automatically if null
     * @param id2 the id to extract (if present)
     * @return a generated id or extracted id
     * @throws JspException 
     */
    private String getId_(String id2) throws JspException {
        String result =null;
        if (id2!=null) {
            result = (String)ExpressionEvaluatorManager.evaluate("id", this.id, String.class,this, super.pageContext );
            logger.debug("id is extract from EL : "+ result);
        }
        else {
            String sToolTipId = (String)pageContext.getAttribute("toolTipId");
            int iToolTipId = sToolTipId==null?0:Integer.parseInt(sToolTipId)+1;
            result=String.valueOf(iToolTipId);
            pageContext.setAttribute("toolTipId",result);
            logger.debug("id is set to : "+result);
        }
 
        return result;
    }
 
}

Et en utilisation, ça donne :

Code:

1
2
3
4
5
6
<rv:toolTip 
  href="${Le lien, s'il y en a un}"
  text="${le texte de l'infobulle}" 
  cssClass="si y a un style à appliquer">
    Le texte sur lequel l'infobulle doit apparaitre
</rv:toolTip>

J'ai pos mis la déclaration dans la taglib mais y a rien de compliqué. J'ai testé mon tag avec IE6, FF et Opera...
Vala, ça devrait marcher et désolé si c'est un pneu long :mouarf:

D'abord merci pour ces réponses

Citation:

du code jsp sera de toute facon de l'html pour le client

oui, je sais bien, je voulais juste préciser que ce ne serait pas de l'html statique, mais bel et bien du code dynamique (à savoir des infos qui seront recherchées dans une base de données par exemple via des classes java)...

Pour un peu plus de précisions, ma page A affiche via un tag une information sur un utilisateur (dans un cadre pour visualiser) . Et dans ce cadre, j'affiche un lien, qui doit, lorsqu'on le survole, affiche une info-bulle avec bp plus d'informations sur cet utilisateur :)
on m'a suggérer de rappatrier sur ma page A toutes les infos de l'utilisateur; comme ça lors du survol je les ai déjà et je n'ai plus besoin d'aller les chercher... Le truc, c'est que je me demande si c'est justement possible d'aller les chercher , entre le survole du lien et l'affichage de l'info bulle...

Je sais pas si c tres clair :D

Si c'est bien ce que je pense, alors non, tu ne pourras pas aller chercher tes infos "entre le survol du lien et l'affichage de l'info bulle".
Il faut que toutes tes infos soit déjà dispo dans la page HTML lorsque l'utilisateur la consulte, et lorsqu'il survole ton lien, les infos s'affichent dans l'info bulle.
C'est ce que je fais avec mon tag tooltip.
Je pense pas qu'y ai d'autres solution....

hmm, cette réponse me fait moyen plaisir :D

ok, je te remercie pour ces réponses :)