Say, I don't like to use Anchor or Hyperlink, but prefer to use Clickable Label.
But After add ClickHandler for Label, & when I mouse over, there no little hand popup as we often see when using HyperLink or Anchor. So,
how to make the little hand pop up when using ClickHandler for Label?
you can acheive that in two ways:
With Gwt alone
lable.getElement().getStyle().setCursor(Cursor.POINTER);
and by adding css style to the lable(preffered)
lable.addStyleName(mylableStyle);
.mylableStyle {
cursor: pointer;
}
Related
I am using the GWT to build the radio button , but when i display it shows one after another (in row).
Is there any way to stack the radio buttons in the group vertically?
It depends on the Panel you are adding it to. If you want things to line up vertically without any hassle, add each radio button to a VerticalPanel.
The reason it lines up is because GWT generates RadioButtons as HTML <span> elements, which by default has the CSS display set to inline.
If you prefer not to use a VerticalPanel, you can make RadioButtons have display:block;
One way is to wrap each RadioButton in a SimplePanel.
Another way is to set their display css attribute to block.
GWT RadioButton has a default provided CSS class for styling the RadioButton gwt-RadioButton
Example :
.gwt-RadioButton
{
display : block;
}
I am looking for tooltip/widget/popup panel like this one
Any idea for such tooltip in GWT ?? I tried ballon widget in gwt,but that does not help me,i need a tooltip like the one above that should also be selectable!
PopupPanel is certainly your best start. PopupPanel will get you an undecorated square box like your example, with user interaction.
Depending on your design requirements you can setup the content with straight HTML (embed an HTMLPanel, with the HTML as contents, inside a PopupPanel), or lay it out using the GWT layout tool.
Also look over: DecoratedPopupPanel for some ideas about decorating the border of your panel with css rules. This may help with the little triangle pointer at the top.
One more hint: you might end up embedding a FocusPanel in your PopupPanel if you need to track events outside specific GUI elements.
I'm creating a popup panel whit same text, i would like to disable the background and make it grey. I read about setGlassEnabled but it doesn't work, can someone help? ps. the popup is correctly visualized.
PopupPanel popup = new PopupPanel(infoType);
popup.center();
popup.setGlassEnabled(true);
popup.show();
The glass panel has no default style, so it's transparent by default. If you want the background to be grayed out, you need to add some CSS styling to the glass panel.
Also, setGlassEnabled only enables the glass panel for the next time the popup is shown, and in your case, the popup is already showing when you call show (because of the previous call to center), so it's a no-op and the glass panel actually isn't used. Move your call to center to after the call to setGlassEnabled and/or call hide before setGlassEnabled.
Putting the following code at the top of your dialog constructor appears to fix the issue for me.
setGlassEnabled(true);
Style glassStyle = getGlassElement().getStyle();
glassStyle.setProperty("width", "100%");
glassStyle.setProperty("height", "100%");
glassStyle.setProperty("backgroundColor", "#000");
glassStyle.setProperty("opacity", "0.45");
glassStyle.setProperty("mozOpacity", "0.45");
glassStyle.setProperty("filter", " alpha(opacity=45)");
The javadoc for setGlassEnabled() is a bit misleading by saying that "the background will be blocked with a semi-transparent pane". In fact all it will do is apply a full-screen div with a default style name of 'gwt-PopupPanelGlass' (as of GWT 2.4, at least). If, say, your project <inherits> a theme such as com.google.gwt.user.theme.clean.Clean, then clean.css supplies the semi-transparent pane you were expecting:
.gwt-PopupPanelGlass {
background-color: #000;
opacity: 0.3;
filter: alpha(opacity=30);
}
Otherwise, as previously described, you'll have to roll your own.
i was wondering on how to position a decorator panel that wraps around a table. i made a flextable and used the function 'setStyleName' that links to another css file. in the css file, i used absolute positioning with .position as the selector
.position
{
position:absolute;
right:0px;
}
however, every time i used the command position:absolute, the flextable will move but the decorator panel (the blue line) doesn't. it just becomes a blue dot. its probably wrapping around something that is 1px by 1px or something. help would be greatly appreciated as ive been super stuck. thanks!
Set position:absolute for the decorator panel instead of the table.
I don't know what are you to achieve, but maybe you should use "float: right" instead (if you want the panel to stick to the right side of the parent element)
once again I've got a question. Since I am using Google Web Toolkit (GWT) at work (along with Java Servlets), I am currently building some user interface with GWT (in Java).
I've got some trouble though. I am using a SplitLayoutPanel which contains a ScrollPanel on the left and another one on the right.
In the left ScrollPanel there's a VerticalPanel with several Labels, which differ in their width. What I want to accomplish, is: if the Label's text doesn't fit in one line, it should display as many characters as possible and have a "..." in the end, if it's not fully displayed.
I am about to add a CustomEvent EventHandler for the Label, which can be fired whenever the Label needs to change its content. Now the problem however is, that I'd need to fire the event whenever the ScrollPanel or its inner VerticalPanel is resized (by dragging the SplitLayoutPanel-Splitter).
Now the question: is it possible to override some sort of "onResize"-Event or at least "onMouseMove"-Event inside the VerticalPanel, so that I could fire the "changeLabelSize()"-method for each Label inside of this VerticalPanel?
How would I go about it? Thank you all for your time in advance! Please ask for anything unclear, so I can clarify it.
Best regards,
Igor.
This can be done easily with the CSS property text-overflow: ellipsis;.
Supported by IE7-, Safari and Konqueror.
And it can be emulated in Firefox.