If the button is clicked, I want to add a Label to page and fade it in via an CSS animation. I thougt, I could just create and add the label with the CSS class "hidden" attached, which has the opacity = 0 and after that remove the class and CSS will do the rest.
But i was wrong. GWT seems to execute the code in the onClick() in some kind of bulk mode -> The label gets added already without the "hidden" class. How can i prevent or do it that better? If I add/remove the "hidden" class manually in the browser, the animation works finde.
The java code looks like this:
Button submitButton = new Button("send");
submitButton.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Label l = new Label("test");
l.addStyleName("hidden");
RootPanel.get().add(l);
l.removeStyleName("hidden");
}
});
RootPanel.get().add(submitButton);
Das CSS sieht folgendermaßen aus:
.gwt-Label{
transition-property: opacity;
transition-duration: 1s;
}
.hidden{
opacity:0;
}
Probably you have to add some delay function before remove hidden class.
Here you have example (in JS but it's only to show):
http://jsfiddle.net/matku/PXnPZ/
$(".myElement").delay(50).queue( function(){
$(this).removeClass("hidden");
});
And another way I found on google:
http://map-notes.blogspot.com/2012/11/fade-animation.html
Related
There is input text field and submit button. I would like to show button text field not empty and otherwise button should be not visible.
TextArea<String> textMessageField = new TextArea<>("textMessage", textMessageModel);
Button submitBtn = new Button("saveReminderButton") {
#Override
protected void onConfigure() {
super.onConfigure();
String text = textMessageField.getModelObject();
setVisible(text != null && !text.isEmpty());
}
};
textMessageField.add(new OnChangeAjaxBehavior() {
#Override
protected void onUpdate(AjaxRequestTarget target) {
target.add(submitBtn);
}
});
submitBtn.setOutputMarkupId(true);
I'm trying to use setVisible method in onConfigure but it doesnt work. I tried to use instead setEnabled and it was working but I need the same functionality with hide/show button
Since you make the button invisible you need to use submitBtn.setOutputMarkupPlaceholderTag(true); instead of submitBtn.setOutputMarkupId(true);
This is important because without setOutputMarkupPlaceholderTag(true) Wicket Wicket will render nothing for this component. With setOutputMarkupPlaceholderTag(true) it will render <htmlElement id="someId"></htmlElement>. This way Wicket Ajax could find it in the DOM and replace it with the HTML of the visible one.
I have created a click handler on a gwt label, but it fails to fire. Whats wrong? Same method works for other widgets like icon etc.
#UiField Label fileName;
---
---
public void addClickHandler() {
fileName.sinkEvents(Event.ONCLICK);
handler = this.addHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
event.preventDefault();
event.stopPropagation();
Window.alert("UI clicked");
}
}, ClickEvent.getType());
}
As I pointed out in comment. Reason why it is not working is because you are adding native event handler to this, and as i but you need to sink DOM events on element to be able to handle them. As you did not do this for this element but for Label it won't work.
As You want to handle click element on Label, you need to add your handler to fileName and that will work
I have a transparent image on a Button (no text), which is placed on a Composite. Since the Composite is white (created with FormToolkit#createComposite(parent, SWT.NONE)), I'd like the Button background to be the same color. How do I do it?
The Label does the trick, but doesn't have the shadows like Button does when I'm clicking on it..
The background color of a Button is determined by the OS. In fact, the documentation for Control.setBackground() states that:
Note: This operation is a hint and may be overridden by the platform. For example, on Windows the background of a Button cannot be changed.
That said, one possible way to circumvent this is to override the paint event as shown here: Changing org.eclipse.swt.widgets background color in Windows. When I tried this out the results were a bit wonky.
The safest and most consistent approach would be to use a label like in your second image, but have different images to display on various mouse events to emulate how a button behaves.
Those images can emulate the shadow just by adding whatever shape of shadow you want to the image itself. That shadow can also change for each image to give the impression that the button is being pressed or not.
For example, I'm thinking something along the lines of:
public class MyButton {
private final Label buttonLabel;
public MyButton(final Composite parent, final Theme theme) {
buttonLabel = new Label(parent, SWT.NONE);
buttonLabel.setImage(theme.getUpImage());
buttonLabel.addMouseListener(new MouseAdapter() {
#Override
public void mouseDown(final MouseEvent mouseEvent) {
buttonLabel.setImage(theme.getButtonPressedImage());
}
#Override
public void mouseUp(final MouseEvent mouseEvent) {
buttonLabel.setImage(theme.getButtonUpImage());
}
});
buttonLabel.addMouseTrackListener(new MouseTrackAdapter() {
#Override
public void mouseEnter(final MouseEvent mouseEvent) {
buttonLabel.setImage(theme.getButtonHoverImage());
}
#Override
public void mouseExit(final MouseEvent mouseEvent) {
buttonLabel.setImage(theme.getButtonUpImage());
}
});
}
}
Where the Theme just has all of the images already conveniently loaded.
You'll also need to make sure that the parent Composite has the background mode set to force its background color:
parent.setBackgroundMode(SWT.INHERIT_FORCE);
Obviously the drawback to this approach is that you have to handle the mouse click logic yourself (ie. mouseDown isn't really clicked until the mouse is released, so you'll have to handle the state of the button in each listener method).
I am new to Java and JavaFX and I am just wondering if the webview of JavaFX can run javascript in itself apart from the communcation it has with the java code. Can I for example run a javascript alert statement in the webview when the window loads and actually get an alert in the webview as I would in a normal browser. I know that I can capture this alert event with my java code by
webEngine.setOnAlert
but I actually want javascript events to happen in the webview window itself as they would in a normal browser.
The reason that I am asking this simple question is because I am using a webview with a textarea where I want to enable spell checking. I have a javascript spell checker that works perfectly in normal browsers where I get the red underline when I type something wrong, but I want to get it to work in the JavaFX webview also.
I am thankful for any help I can get!
WebView JavaScript Callback Handler Example
Here is some sample code for displaying a JavaFX dialog based on a JavaScript trigger command. The sample code is for a JavaScript confirm handler, but code for an alert handler would function similarly.
In the sample screenshot, the yellow bar on the left will display a JavaFX label based on the result of a confirmation dialog triggered by a JavaScript function invoked from the WebView which covers the rest of the screen.
The confirmation dialog is rendered in JavaFX over the top of the WebView, preventing interaction with the WebView while the dialog is displayed. The styling of the confirmation dialog, is just a sample, it might be styled any way you wish using css, and the layout may be changed in code as well (or you could define dialog layout in FXML markup instead if you preferred).
WebViewConfirm.java
import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.event.*;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.effect.BoxBlur;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.web.WebView;
import javafx.stage.*;
import javafx.util.Callback;
/**
* Demonstrates a modal WebView confirm box in JavaFX.
* Dialog is rendered upon a blurred background.
* Dialog is translucent.
* Requires JavaFX 2.2
* To test, run the program, then click the "Try it" button in the Result textarea.
*/
public class WebViewConfirm extends Application {
public static void main(String[] args) { launch(args); }
#Override public void start(final Stage primaryStage) {
// initialize the stage
primaryStage.setTitle("Modal Confirm Example");
final WebView webView = new WebView();
webView.getEngine().load("http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm");
// layout the stage - a vbox to show confirmation results and a webview to generate confirmations.
final VBox confirmationResults = new VBox();
confirmationResults.getStyleClass().add("confirmation-results");
confirmationResults.setMinWidth(150);
HBox layout = new HBox();
layout.getChildren().addAll(confirmationResults, webView);
primaryStage.setScene(new Scene(layout));
primaryStage.show();
primaryStage.getScene().getStylesheets().add(getClass().getResource("modal-dialog.css").toExternalForm());
// show the confirmation dialog each time a new page is loaded and
// record the confirmation result.
webView.getEngine().setConfirmHandler(new Callback<String, Boolean>() {
#Override public Boolean call(String msg) {
Boolean confirmed = confirm(primaryStage, msg);
confirmationResults.getChildren().add(new Label("Confirmed? " + confirmed));
return confirmed;
}
});
}
private Boolean confirm(final Stage parent, String msg) {
final BooleanProperty confirmationResult = new SimpleBooleanProperty();
// initialize the confirmation dialog
final Stage dialog = new Stage(StageStyle.TRANSPARENT);
dialog.initOwner(parent);
dialog.initModality(Modality.WINDOW_MODAL);
dialog.setScene(
new Scene(
HBoxBuilder.create().styleClass("modal-dialog").children(
LabelBuilder.create().text(msg).build(),
ButtonBuilder.create().text("OK").defaultButton(true).onAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
// take action and close the dialog.
confirmationResult.set(true);
parent.getScene().getRoot().setEffect(null);
dialog.close();
}
}).build(),
ButtonBuilder.create().text("Cancel").cancelButton(true).onAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
// abort action and close the dialog.
confirmationResult.set(false);
parent.getScene().getRoot().setEffect(null);
dialog.close();
}
}).build()
).build()
, Color.TRANSPARENT
)
);
// allow the dialog to be dragged around.
final Node root = dialog.getScene().getRoot();
final Delta dragDelta = new Delta();
root.setOnMousePressed(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
// record a delta distance for the drag and drop operation.
dragDelta.x = dialog.getX() - mouseEvent.getScreenX();
dragDelta.y = dialog.getY() - mouseEvent.getScreenY();
}
});
root.setOnMouseDragged(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
dialog.setX(mouseEvent.getScreenX() + dragDelta.x);
dialog.setY(mouseEvent.getScreenY() + dragDelta.y);
}
});
// style and show the dialog.
dialog.getScene().getStylesheets().add(getClass().getResource("modal-dialog.css").toExternalForm());
parent.getScene().getRoot().setEffect(new BoxBlur());
dialog.showAndWait();
return confirmationResult.get();
}
// records relative x and y co-ordinates.
class Delta { double x, y; }
}
modal-dialog.css
/**
* modal-dialog.css
* place in same directory as WebViewConfirm.java
* ensure your build system copies the file to your build output directory
*/
.root {
-fx-glass-color: rgba(95, 158, 160, 0.9);
}
.modal-dialog {
-fx-padding: 20;
-fx-spacing: 10;
-fx-alignment: center;
-fx-font-size: 20;
-fx-background-color: linear-gradient(to bottom, derive(-fx-glass-color, 20%), -fx-glass-color);
-fx-border-color: derive(-fx-glass-color, -20%);
-fx-border-width: 5;
-fx-background-insets: 12;
-fx-border-insets: 10;
-fx-border-radius: 6;
-fx-background-radius: 6;
}
.modal-dialog:pressed {
-fx-cursor: move;
}
.modal-dialog .button:pressed {
-fx-cursor: default;
}
.confirmation-results {
-fx-background-color: cornsilk;
-fx-padding: 5;
}
Possible answer to your question
Your question isn't exactly clear to me, but I think if you popup a ControlsFX dialog box, you will achieve what you want. You could use either a standard Dialog (which functions like Internet Explorer's JavaScript alert dialog) or a light-weight dialog (which functions like Firefox's JavaScript alert dialog) - see the ControlsFX features page for more information.
ControlsFX is Java 8 based, but for JavaFX 2.2, there are numerous topics on StackOverflow regarding showing dialogs in JavaFX, (for example: How to create and show common dialog (Error, Warning, Confirmation) in JavaFX 2.0?). The sample code above is an example of dialog usage in JavaFX 2.2
Comments on additional points raised in your question
if the webview of JavaFX can run javascript in itself apart from the communcation it has with the java code
Yes WebView can process JavaScript.
Can I for example run a javascript alert statement in the webview when the window loads and actually get an alert in the webview as I would in a normal browser.
Yes, if you have set up an alert handler for your WebView so that it functions like a "normal browser", popping up a dialog on receiving a JavaScript alert command. Note that "normal browsers" do not modify the web page document object model based on a JavaScript alert function, instead they popup a native dialog - the dialog is not really part of the web page.
I actually want javascript events to happen in the webview window itself as they would in a normal browser.
"Normal" browsers handle alerts differently depending on their UI model. For example in Firefox the alert dialog will appear in the current browser tab window, and in Internet Explorer the alert dialog will appear above the Internet Explorer window. The JavaFX alert handler is flexible enough that you can handle the alert pretty much however you want.
Hi is there any way to create something similar to Window.alert() in GWT?
Basically I wanted to customize the Window.alert()'s "Ok" button to say something else but
as I researched there is no way to customize the alert boxes.
Thanks.
Window.alert() is already available in GWT. It opens a native dialog box which contais OK button localized by the browser's locale. This alert box can not be changed.
Use PopupPanel or DecoratedPopupPanel.
You could use the PopupPanel.
I usually code a generic dialog box, that is created once and when I need it again the html content and title is replaced. You can also add a OK/Cancel button combination, this all is rather straightforward.
private DialogBox dialog = null;
private HTML dialogHtml = new HTML();
public void onDialog(final String title, final String html) {
if (dialog == null) {
dialog = new DialogBox();
dialog.getElement().getStyle().setZIndex(99);
dialog.setWidth("500px");
dialog.setGlassEnabled(true);
dialog.setAnimationEnabled(true);
dialog.setModal(true);
VerticalPanel vp = new VerticalPanel();
vp.add(dialogHtml);
HorizontalPanel hp = new HorizontalPanel();
hp.setWidth("100%");
Button close = new Button("close");
close.setWidth("200px");
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
dialog.hide();
}
});
hp.add(close);
hp.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_CENTER);
hp.getElement().getStyle().setMarginTop(40, Unit.PX);
vp.add(hp);
vp.setSpacing(10);
dialog.add(vp);
}
dialogHtml.setHTML(html);
dialog.setHTML(title); // the actual title
dialog.show();
dialog.center();
}
The HTML content is something very simple, i.e.
<div style="width: 500px; overflow: auto;">...</div>