IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Servlets/JSP Java Discussion :

info bulles jsp


Sujet :

Servlets/JSP Java

  1. #1
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Septembre 2003
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2003
    Messages : 506
    Par défaut 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

  2. #2
    Membre émérite
    Avatar de yolepro
    Profil pro
    Architecte de système d'information
    Inscrit en
    Mai 2002
    Messages
    918
    Détails du profil
    Informations personnelles :
    Âge : 46
    Localisation : France

    Informations professionnelles :
    Activité : Architecte de système d'information

    Informations forums :
    Inscription : Mai 2002
    Messages : 918
    Par défaut
    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.

  3. #3
    Membre confirmé Avatar de MicroPuce
    Inscrit en
    Mai 2004
    Messages
    262
    Détails du profil
    Informations forums :
    Inscription : Mai 2004
    Messages : 262
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  4. #4
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Septembre 2003
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2003
    Messages : 506
    Par défaut
    D'abord merci pour ces réponses

    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

  5. #5
    Membre confirmé Avatar de MicroPuce
    Inscrit en
    Mai 2004
    Messages
    262
    Détails du profil
    Informations forums :
    Inscription : Mai 2004
    Messages : 262
    Par défaut
    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....

  6. #6
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Septembre 2003
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Septembre 2003
    Messages : 506
    Par défaut
    hmm, cette réponse me fait moyen plaisir

    ok, je te remercie pour ces réponses

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. IDE / JSP / Infos Bulles
    Par domiq44 dans le forum Struts 1
    Réponses: 0
    Dernier message: 08/09/2011, 09h19
  2. Info-bulles ?
    Par Neilos dans le forum Windows
    Réponses: 3
    Dernier message: 05/09/2006, 15h21
  3. Info bulle sur un TImage
    Par Dauphin dans le forum C++Builder
    Réponses: 4
    Dernier message: 30/09/2004, 13h56
  4. [BPW] Programmation d'info-bulles
    Par Alcatîz dans le forum Turbo Pascal
    Réponses: 6
    Dernier message: 15/05/2004, 18h14
  5. Réponses: 3
    Dernier message: 11/03/2004, 16h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo