I need to "emulate" this:
document.getElementsByTagName("body")[0].onclick = function gameOver() { ...}
in vaadin 7, to display a dialog box when the user clicks anywhere on the web page
My code:
//...
#Override
protected void init(VaadinRequest request) {
Label labelH1 = new Label("<span style=\"color:SteelBlue;\">M</span>atching "
+ "<span style=\"color:Purple;\">G</span>ame!", ContentMode.HTML);
labelH1.setStyleName("h2");
Label labelH4 = new Label("Click on the extra smiling face on the <span>left</span>.",
ContentMode.HTML);
labelH4.setStyleName("h4");
CssLayout layout = new CssLayout();
AbsoluteLayout leftLayout = new AbsoluteLayout();
leftLayout.setId("leftSide");
AbsoluteLayout rightLayout = new AbsoluteLayout();
rightLayout.setId("rightSide");
layout.addComponent(labelH1);
layout.addComponent(labelH4);
layout.addComponent(leftLayout);
layout.addComponent(rightLayout);
setContent(layout);
}
You can use the click listener on the current UI. As following:
UI.getCurrent().addClickListener(new ClickListener()
{
#Override
public void click(com.vaadin.event.MouseEvents.ClickEvent event)
{
// You can show the dialouge box or any other of your desired task here ...!!!
System.out.println("UI is clicked");
}
});
Related
I want to drag a text box from vertical layout container and drop it in a flow layout container. On drop, it should appear as a Rich Text Area. Please find the code below. I tried to debug the code and it is getting entered only inside dragging. Debugging is not coming inside droptarget. Can you please help me?
final TextButton textButton = new TextButton();
textButton.setText("Text Box");
DragSource source = new DragSource(textButton) {
#Override
protected void onDragStart(DndDragStartEvent event) {
super.onDragStart(event);
}
};
DropTarget dropTarget = new DropTarget(flowLayoutContainer);
dropTarget.setOperation(Operation.COPY);
dropTarget.addDropHandler(new DndDropHandler() {
#Override
public void onDrop(DndDropEvent event) {
final RichTextArea textBox1 = new RichTextArea();
flowLayoutContainer.add(textBox1);
}
});
I have a Navigator class and a custom DialogBox class which is descended from GridPane.
public DialogBox(final JDialog jdialog) {
Label lblKeyName = new Label("Enter New Key");
Label lblKeyType = new Label("Select Key Type");
TextField txtKeyName = new TextField();
ComboBox cboKeyType = new ComboBox();
txtKeyName.getText();
Button btnOk = new Button("OK");
Button btnCancel = new Button("Cancel");
btnOk.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
//TODO: Somehow return the values in the ComboBox and TextField
}
});
btnCancel.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
jdialog.setVisible(false);
}
});
txtKeyName.prefWidth(300);
cboKeyType.prefWidth(300);
this.add(lblKeyName, 0, 0);
this.add(lblKeyType, 0, 1);
this.add(txtKeyName, 1, 0);
this.add(cboKeyType, 1, 1);
this.add(btnOk, 0, 2);
this.add(btnCancel, 1, 2);
}
This is the constructor for my DialogBox.
JFXPanel fxPanel = new JFXPanel();
testBox = new DialogBox(jdialog);
fxPanel.setScene(new Scene(testBox));
jdialog.add(fxPanel);
jdialog.setVisible(true);
How can I retrieve the values in the TextField and ComboBox? I can slightly recall a long ago class where the professor mentioned a technique involving the calling class (Navigator in this case) implementing an Interface and then passing itself to the DialogBox class to retrieve values. Unfortunately I have not found anything and cannot remember how it is done.
Assuming that the dialog is modal, basically, once btnOk or btnCancel button is pressed you need to change some kind of state flag which you can interrogate to determine how the dialog was closed...
// This will also handle the use case where the user presses the "x" button...
private boolean wasCancelled = true;
//...
public boolean wasCancelled() {
return wasCancelled;
}
In you action listeners, you need to set the state appropriately.
btnOk.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
wasCancelled = false;
jdialog.setVisible(false);
}
});
btnCancel.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
wasCancelled = true;
jdialog.setVisible(false);
}
});
Now, once the dialog returns, you need to check this flag...
jdialog.add(fxPanel);
jdialog.setVisible(true);
if (!jdialog.wasCancelled()) {
//...
}
You then need to supply "getter" methods to allow a caller to extract the values from the dialog...
public String getKey() {
return txtKeyName.getText();
}
public String getType() {
return cboKeyType.getSelectionModel().getValue();
}
This will mean you will need to create these two fields as instance variables
I'm creating ContentPanel and hide it:
final ContentPanel infoPanel = new ContentPanel();
final TabPanel infoTabPanel = new TabPanel();
...
//Adding TabItems with some forms
infoPanel.add(infoTabPanel);
infoPanel.hide();
add(infoPanel);
Then in some Event Listener I try to show this hidden panel:
infoPanel.show();
infoPanel.layout();
But this panel is shown without any data. Only if I click on tabs data appears.
So how to hide/show this panel correctly?
EDITED:
I'm using GXT 2.2.4.
I'm creating ContentPanel with TabPanel which contains FormPanel and hide ContentPanel.
Then in Event Listener I try to show this hidden panel, but it is shown without form. Only if I click on tabs form appears.
Here is code:
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
final ContentPanel infoPanel = new ContentPanel();
infoPanel.setAutoHeight(true);
final TabPanel infoTabPanel = new TabPanel();
infoTabPanel.setAutoHeight(true);
final FormPanel testForm = new FormPanel();
FieldSet fieldSet = new FieldSet();
fieldSet.setHeading("Information");
FormLayout fLayout = new FormLayout();
fieldSet.setLayout(fLayout);
LabelField field1 = new LabelField();
LabelField field2 = new LabelField();
field1.setFieldLabel("Field1:");
field1.setName("field1");
fieldSet.add(field1);
field2.setFieldLabel("Field2:");
field2.setName("field2");
fieldSet.add(field2);
testForm.add(fieldSet);
TabItem formTab = new TabItem("Form Tab");
formTab.add(testForm);
infoTabPanel.add(formTab);
TabItem longText = new TabItem("Long Text");
longText.addStyleName("pad-text");
longText.addText("Long Text" + "<br>" + "Long TextLong Text");
infoTabPanel.add(longText);
infoPanel.add(infoTabPanel);
infoPanel.hide();
Button buttonShow = new Button("show");
buttonShow.addSelectionListener(new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
infoPanel.show();
}
});
Button buttonHide = new Button("hide");
buttonHide.addSelectionListener(new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
infoPanel.hide();
}
});
add(infoPanel);
add(buttonShow);
add(buttonHide);
}
Which GXT version do you have? I can't reproduce your problem on GXT 3.x. I wrote a little example code which does exactly what you're asking for.
public void onModuleLoad() {
final ContentPanel infoPanel = new ContentPanel();
final TabPanel infoTabPanel = new TabPanel();
infoTabPanel.add(new TextButton("moo"), "moo");
infoTabPanel.add(new TextButton("boo"), "boo");
infoPanel.add(infoTabPanel);
infoPanel.hide();
VerticalLayoutContainer vlc = new VerticalLayoutContainer();
vlc.setPixelSize(300, 250);
TextButton buttonShow = new TextButton("show");
buttonShow.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
infoPanel.show();
}
});
TextButton buttonHide = new TextButton("hide");
buttonHide.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
infoPanel.hide();
}
});
vlc.add(infoPanel, new VerticalLayoutData(1, 1));
vlc.add(buttonShow);
vlc.add(buttonHide);
RootPanel.get().add(vlc);
}
OK I see.
OK I see, since clicking on the tab makes it appear, why don't you programmatically select the tab in your listener?
infoTabPanel.setSelection(formTab);
http://dev.sencha.com/deploy/gxt-2.2.5/docs/api/com/extjs/gxt/ui/client/widget/TabPanel.html#setSelection(com.extjs.gxt.ui.client.widget.TabItem)
---------below didn't work------------
so try infoPanel.repaint();
I have a MenuButton which consists of a Image and a Text under the image. The whole thing is build like this:
ImageResource icon = ...;
final Element span = DOM.createSpan();
Image image = new Image(icon);
span.insertFirst(image.getElement());
Element div = DOM.createDiv();
div.setInnerHTML(text);
span.insertAfter(div, span);
image.sinkEvents(Event.ONCLICK);
getElement().insertFirst(span);
The click event is set in the presenter like this:
...
private void bindEvents() {
display.getButton().addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("test");
}
});
The click event works just partly, when I click on the text under the image the click event works fine but when I click on the Image no click is performed!?
A different approach:
FlowPanel myButton = new FlowPanel();
myButton.add(new Image(icon));
myButton.add(new Label(myButtonText));
ClickHandler h = new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
// do something
}
};
myButton.addDomHandler(h, ClickEvent.getType());
This will catch a click event on both image and the text under it.
I'm learning JavaFX and this is just a small programming question.
I have 3 buttons in a VBox. And I want to apply the same 3 effects on all buttons after I put them in the Vbox. But when I use a for loop and getChildren() on the VBox, they are returned as 'Nodes'. I can't use the Button.getText() to find out the text of the button.
Is there a way I can getText of a Node? Or maybe convert the current Node to a Button and get the text that way?
VBox vbox = new VBox();
Button option1 = new Button("Single Player");
Button option2 = new Button("Network Player");
Button option3 = new Button("View Rules");
vbox.getChildren().add(option1);
vbox.getChildren().add(option2);
vbox.getChildren().add(option3);
for (final Node button : vbox.getChildren()) {
button.setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent arg0) {
button.setEffect(addEffect(Color.web("#53CFA6"), .8, 10));
}
});
button.setOnMouseExited(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent arg0) {
button.setEffect(addEffect(Color.web("#FF6800"), .8, 10));
}
});
button.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent arg0) {
button.setEffect(addEffect(Color.web("#E62800"), .8, 10));
//Need to use button.getText()
//Button button; button.getText() works
}
});
}
there is two options:
1. Convert types. Easy, but not safe.
If you sure you wouldn't add other children to this VBox you can just convert Node to Button:
for (Node node : vbox.getChildren()) {
if (node instanceof Button) {
final Button button = (Button) node;
// all your logic
}
2. Use Factory pattern. Best suites, IMHO.
introduce method createButton which will setup button as you need:
private Button createButton(String name) {
final Button button = new Button(name);
button.setOnMouseEntered(...);
button.setOnMouseExited(...);
button.setOnMouseClicked(...);
return button;
}
and you code will look next way:
Button option1 = createButton("Single Player");
Button option2 = createButton("Network Player");
Button option3 = createButton("View Rules");
vbox.getChildren().addAll(option1, option2, option3);
3. Introduce your own Button class. Better if you plan to extend buttons logic.
public void FancyButton extends Button {
public FancyButton(String name) {
super(name);
//handlers logic here
}
}
You can get text from button and assign it to a string variable by this code :-
String Val = ((Button)event.getSource()).getText();