I am trying to create a tooltip / popover over a button that has pull-right class set(pull-right basically sets the flow to right). The tooltip/popover crashes when trying to do a placement left. Any suggestions/ help?
/* The widget updateStatusDate is a button that floats right*/
Tooltip tooltip = new Tooltip("Date : " + timeOfOperation + " Comment : " + comment);
setUpdateStatusDate("Last Updated by : " + userName);
tooltip.setWidget(updateStatusDate); tooltip.setPlacement(Placement.LEFT);
tooltip.reconfigure();
Given your code, I have put its simplified version into my project and it works without problems. You can copy it to your project and check if it works:
#Override
public void onModuleLoad() {
// essentials from questioned code
Tooltip tooltip = new Tooltip("text");
Button updateStatusDate = new Button("test button");
tooltip.setWidget(updateStatusDate);
tooltip.setPlacement(Placement.LEFT);
tooltip.reconfigure();
// change style for the rootPanel, so the button flows to the center
// it is just for fast and short code example, do not do this in your regular project
com.google.gwt.dom.client.Style.TextAlign center = TextAlign.CENTER;
RootPanel.get().getElement().getStyle().setTextAlign(center);
//add button
RootPanel.get().add(updateStatusDate);
}
My Bootstrap version is: 2.3.2.0-SNAPSHOT, and my GWT version is 2.5.1.
Related
Followed the example at https://docs.mapbox.com/help/tutorials/building-a-store-locator/
Worked well. However, the example popup stays in place on mouse exit until your mouseover another marker. Trying to get the popup to disappear on mouseleave.
The popup code from the example is:
/* Create a Mapbox GL JS `Popup`.
**/
function createPopUp(currentFeature) {
var popUps = document.getElementsByClassName('mapboxgl-popup');
if (popUps[0]) popUps[0].remove(0);
var popup = new mapboxgl.Popup({closeOnClick: false})
.setLngLat(currentFeature.geometry.coordinates)
.setHTML('<h3>' + currentFeature.properties.address + '</h4>' +
'<h4>' + currentFeature.properties.sites + '</h4>')
.addTo(map);
}
I think the answer lies in this other post but I dont know how to "move the mouseover declaration" as suggested in the context of my code.
Thanks
In the Borland VCL library, almost all controls had a hint property. During runtime, when you position mouse over the respective control, a small box with the hint text pops up and disappears again when you move the mouse, like the help messages in Windows Explorer and other programs, when mouse cursor is being held over a button.
Is there a similar concept in JavaFX (actually, I am using ScalaFX)?
Of course, I can create a new stage without decorations, add some mouse listeners etc., but is it not already available somewhere?
You can use a Tooltip control.
Usage Sample
If you want the tooltip on a Control, for example a button, set the tooltip:
button.setTooltip(
new Tooltip("Button of doom")
);
Otherwise, for other node types like shapes, install the tooltip:
Circle circle = new Circle(15, 15, 42);
Tooltip.install(
circle,
new Tooltip("Circle of light")
);
Tutorial
Oracle have a tutorial dedicated just to Tooltips.
As you can see above, you can set a "graphic" on a tooltip, which can be an image (or any other node), it's pretty flexible.
Tooltip Styling
Tooltip background (with JavaFX CSS)
Other Options
If Tooltip isn't what you are looking for, there are other ways to show popups:
JavaFX 2 custom popup pane
This code creates a GRAPHIC based Tooltip. Take a look at the commented htmlStr..... you can play with it as well as thisToolTip.setStyle..... and see what happens. You can change the styles in htmlStr and the string for setStyle. However I was not able to make the size of the tool tip and the pane match. So there is a border, but I made the color of both background colors to cornsilk. It gives an illusion that there is no border. But it is not true. See the code, if you find it useful, use it.
private Tooltip createToolTip(String htmlStr) {
Tooltip thisToolTip = new Tooltip();
// String htmlStr = "<body style=\"background-color:cornsilk; "
// + "border-style: none;\"> <u><b><font color=\"red\">Click Mouse's right button to see options</font></b></u><br><br>(3) Subha Jawahar of Chennai<br> now # Chennai<br>Female <-> Married <-> Alive<br>Period : 1800 to 2099<br>D/o Dr. Subbiah [2] - <br> <b>Spouse :</b> Jawahar Rajamanickam [7] <br><br><b>Children :</b><br><br>Rudhra Jawahar [9]<br>Mithran Jawahar [10]<br><br></body>\n";
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.loadContent(htmlStr);
thisToolTip.setStyle("\n"
+ " -fx-border-color: black;\n"
+ " -fx-border-width: 1px;\n"
+ " -fx-font: normal bold 12pt \"Times New Roman\" ;\n"
+ " -fx-background-color: cornsilk;\n"
+ " -fx-text-fill: black;\n"
+ " -fx-background-radius: 4;\n"
+ " -fx-border-radius: 4;\n"
+ " -fx-opacity: 1.0;");
thisToolTip.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
thisToolTip.setGraphic(browser);
thisToolTip.setAutoHide(false);
thisToolTip.setMaxWidth(300);
thisToolTip.setGraphicTextGap(0.0);
return thisToolTip;
}
I am working on Netbeans building a JavaFX application.
I started using ControlsFX (http://fxexperience.com/controlsfx/)
I have implemented a simple Dialog that uses custom AbstractDialogAction s as I want specific number of buttons to appear.
I do this like this:
Action a = new AbstractDialogAction(" button a ", Dialog.ActionTrait.CLOSING) {
#Override
public void execute(ActionEvent ae) {
}
};
ArrayList<Action> actions = new ArrayList<>();
actions.add(a);
actions.add(b); // other button
actions.add(c); // another button
dialog.actions(actions);
Action response = dialog.showConfirm();
Dialog is shown correctly with the given buttons.
My question is how to force the Dialog to close when a button is pressed ?
I thought setting a Dialog.ActionTrait.CLOSING would do the trick, but the Dialog stays open.
From eugener in ControlsFX mailing list
public void execute(ActionEvent ae) {
if (ae.getSource() instanceof Dialog ) {
((Dialog) ae.getSource()).setResult(this);
}
}
The above sets the result of the Dialog to be the current Action and closes the Dialog
But maybe that is a little redundant as I can simply call:
((Dialog) ae.getSource()).hide();
.hide() hides the Dialog and also sets the current action as the result.
I can't suggest which is a better solution (hide() was suggested by jewelsea)
In addition I would suggest to always override the toString() method of class AbstractDialogAction, in order to get readable result from:
Action response = dialog.showConfirm();
System.out.println("RESPONSE = "+ response.toString());
Hide the dialog to close it => dialog.hide()
I have a loading popup that I need to display on the top of the page, even if the user scroll down.
What I tried so far is to set the popup position as follows
setPopupPosition(Window.getClientWidth()/2 , 0);
The popup shows up on the absolut top.
The situation can be resolved easily if you view it from a different angle: Not the popup position should adjust to the page - instead, the page should scroll behind the centering popup, e.g.:
final ScrollPanel scrollPanel = new ScrollPanel();
RootLayoutPanel.get().add(scrollPanel);
pagePanel = new FlowPanel();
scrollPanel.setWidget(pagePanel);
pagePanel.add(...);
Now add the entire page contents to pagePanel (instead of adding them directly to rootPanel).
Then you can create popups like this:
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(...);
popupPanel.center();
You'll still have to re-center the popup when the window resizes, but apart from that, the popup will always be at the center in front of the scrolling page.
To achieve this you can implement Window.addWindowScrollHandler. It will always be on top whatever you do.
DialogBox dialog = new DialogBox();
dialog.setWidget(...);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
dialog.setPopupPosition((Window.getClientWidth() - widthOfDialog) / 2, event.getScrollTop());
}
});
Hope this helps.. Thanks..
The solution that worked for me is this
setPopupPosition(Window.getClientWidth()/2 , Window.getScrollTop());
I'm using a GWT library (gwt-openlayers) which allows me to create a map popup containing arbitrary HTML, similar to Google Maps. I need this HTML to contain a GWT Button widget.
I'm creating some HTML elements on-the-fly like this:
Element outerDiv = DOM.createDiv();
outerDiv.getStyle().setOverflow(Overflow.HIDDEN);
outerDiv.getStyle().setWidth(100, Unit.PCT);
outerDiv.appendChild(new HTML(mapPOI.getHtmlDetails()).getElement());
Button popupButton = new Button("View Property");
popupButton.getElement().getStyle().setFloat(com.google.gwt.dom.client.Style.Float.RIGHT);
outerDiv.appendChild(popupButton.getElement());
Then I'm getting the source HTML for these elements by calling
String src = outerDiv.toString();
and inserting this html into my map marker. Now my map marker displays the content ok, including the button. However, the button won't respond to any events! From what I can gather, this is because the buttons onAttach() method is never being called.
Is there a better way to do this?
Thanks,
Jon
~~~~EDIT~~~~
I'm now trying a new way of doing this, which seems to be the accepted method looking at other similar posts.
First I'm creating my div:
String divId = "popup-" + ref;
String innerHTML = "<div id=\"" +divId + "\"></div>";
Then I'm adding this to my map popup and displaying it (which adds it to the DOM). After the popup has been displayed, I'm getting the Element as follows and trying to wrap a HTMLPanel around it:
Element element = Document.get().getElementById(divId);
HTMLPanel popupHTML = HTMLPanel.wrap(element);
My div element is successfully retrieved. However, HTMLPanel.wrap(element); doesn't complete. The reason for this is that wrap(..) calls RootPanel.detachOnWindowClose(Widget widget), which includes the following assertions:
assert !widgetsToDetach.contains(widget) : "detachOnUnload() called twice "
+ "for the same widget";
assert !isElementChildOfWidget(widget.getElement()) : "A widget that has "
+ "an existing parent widget may not be added to the detach list";
I put some breakpoints in and it seems that the 2nd assertion is failing!
Does anybody have any idea why this might be the case? Should failing this assertion really result in a complete failure of the method (no return)?
Your first approach is good, you just need to register onClick event for your button like this:
DOM.sinkEvents(popupButton.getElement(), Event.ONCLICK);
DOM.setEventListener(popupButton.getElement(), new EventListener() {
#Override
public void onBrowserEvent(Event event) {
//implement the logic after click
}
});
I have checked this, it works 100%!
You might try something like
RootPanel.get("idOfYourMapMarker").add(popupButton);
See RootPanel.get()
Unfortunately, RootPanels are AbsolutePanels which aren't so nice for layout but could work if you just have a simple button to add. You could also try RootLayoutPanel which will give you a LayoutPanel (also not so nice when you just want things to flow). You might end up creating a container widget that does the layout for you, and adding that to the RootPanel.
SimplePanel is a DIV. Perhaps that can be used instead?
You added the element, but you have to keep the hierarchy of the actual GWT Widgets too.
I don't see a clean way to do this, but you could use something like jQuery to grab the button by and ID and add a click handler back to it that would call the original click handler.
private static native void registerEvents(String buttonId, MyClass instance)/*-{
var $ = $wnd.$;
//check click
$('#'+buttonId).live('click', function(e) {
e.preventDefault();
instance.#com.package.MyClass::handleButtonClick(Lcom/google/gwt/event/dom/client/ClickEvent;)(null);
});
}-*/;
Call this registerEvents() either in your onAttach or constructor.
I once had a similar problem. You can use the gwt-openlayer's MapWidget as follows:
private MapWidget createMapWidget() {
final MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setDisplayProjection(DEFAULT_PROJECTION);
defaultMapOptions.setNumZoomLevels(TOTAL_ZOOM_LEVELS);
MapWidget mapWidget = new MapWidget(MAP_WIDGET_WIDTH, MAP_WIDGET_HEIGHT, defaultMapOptions);
map = mapWidget.getMap();
return mapWidget;
}
And then add it to any panel be it vertical or horizontal.
MapWidget mapWgt = createMapWidget();
VerticalPanel mainPanel = new VerticalPanel();
mainPanel.add(mapWgt);
...
... add whatever you want
...
You can finally add the created Panel(containing the MapWidget and the gwt widget) to the PopupPanel. Also, you should now be able to add handlers to the gwt button.