Better to use widgets. I am using HTMLPanel to wrap my divs. My example
has clickable image with text which is ready for internationalization.
Actually 3 images where 2 are for some common background and the third
gives item specific image. You also better make cursor to be a pointer
when mouse goes over so user understands that it is clickable area(see
.center:hover). I implemented on GWT 2.2 using UIBinder
In UIBinder
<ui:image field="glass_ball"
src="../../resources/glass_ball.png"/>
<ui:image field="shine" src="../../resources/shine.png"/>
<ui:image field="isite_exit"
src="../../resources/isite_exit.png"/>
<ui:style src = "../../resources/defines.css"
type="com.idirect.webnms.isite.client.common.top.TopBarView.UIStyle">
.center {
width:60px;
text-align:center;
font-size: 12px;
font-family: arial;
}
.center:hover {
text-decoration: underline;
cursor: pointer;
cursor: hand;
color: orange;
}
@sprite .glassBackground {
gwt-image: "glass_ball";
margin-top: 8px;
line-height: 8em;
}
@sprite .shine {
gwt-image: "shine";
}
@sprite .backgroundExit {
gwt-image: "isite_exit";
}
</ui:style>
<g:HTMLPanel ui:field='cmd_exit'
addStyleNames='{style.center}'>
<div>
<div
class='{style.glassBackground}'>
<div class =
'{style.shine}'>
<div
class='{style.backgroundExit}'>
</div>
</div>
</div>
<div>
<ui:msg
description='Top bar, command exit'>Log out</ui:msg>
</div>
</div>
</g:HTMLPanel>
In my client Java code I have click handler registration and remove
logic. In general you should remove handler when Window closing
@UiField
HTMLPanel cmd_exit;
private HandlerRegistration regCmdExitClick;
if(regCmdExitClick == null) {
regCmdExitClick = cmd_exit.addDomHandler(new ClickHandler()
{
public void onClick(final ClickEvent event) {
//my logout logic
if(regCmdExitClick != null) {
regCmdExitClick.removeHandler();
regCmdExitClick = null;
}
}
}, ClickEvent.getType());
}
Hope it helps
-Sergey
-----Original Message-----
From: [email protected]
[mailto:[email protected]] On Behalf Of varakumar pjd
Sent: Tuesday, March 29, 2011 2:30 AM
To: Google Web Toolkit
Subject: How to add ClickHandler for Div Element?
Hi,
I created a div element and appended it to a text box as a
child. It is working fine. Now I want to add click handler for that
div element. Can you please suggest me for this problem.
Thanks,
Vara Kumar PJD
--
You received this message because you are subscribed to the Google
Groups "Google Web Toolkit" group.
To post to this group, send email to
[email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
</PRE><BR><span
style='font-size:8.0pt;font-family:"Arial","sans-serif";color:#003366'>
_____________________________________________________<BR>
This electronic message and any files transmitted with it contains<BR>
information from iDirect, which may be privileged, proprietary<BR>
and/or confidential. It is intended solely for the use of the individual<BR>
or entity to whom they are addressed. If you are not the original<BR>
recipient or the person responsible for delivering the email to the<BR>
intended recipient, be advised that you have received this email<BR>
in error, and that any use, dissemination, forwarding, printing, or<BR> copying
of this email is strictly prohibited. If you received this email<BR>
in error, please delete it and immediately notify the sender.<BR>
_____________________________________________________
</SPAN><PRE>
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
