I want to create a GWT widget that has a rectangle div element (looks like a button) along with some text to the right of that. I want to be able to select this widget so that when I click on either the div/button or the text, the entire widget is selected.
Any suggestions on implementing this? If there was an easy way to nest multiple items, like a Button and a Label, inside of a GWT Button, that would probably work. I am thinking of creating a class that extends Composite and holds a Button and a Label, but I am not sure how to make both of those be selected when my entire new widget is selected.
Do you know how to draw what you are trying to make in plain HTML?
If so, you can simply subclass Widget, and create the elements required, along with the specific styling - there is no need to build multiple other widgets. Then, just add a click handler on your new widget, and you'll know when anyone clicks on any of the content inside the widget.
Likewise, if you use a HTMLPanel (wrapped, as you say, in a Composite) or something to contain both a Label and a Button, you could add a click handler to the panel, and you would know when either of the other widgets were clicked on, since the click event will "bubble" - if nothing prevents it, it will keep firing on each element, then its parent, so that everything knows about the click. However, nesting widgets will make your new widget somewhat more expensive to create than simple creating the HTML, so be sure this is what you would prefer to do.
In either case, you'll use Widget.addDomHandler(...) to actually add the click handler. To make life easier, you can create a new method, implementing HasClickHandlers, and declaring the new method like this:
#Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
As requested, a very short (more comments than code) example widget that seems to do what is described:
public class ButtonWithText extends Widget implements HasClickHandlers {
public ButtonWithText(String text, String buttonLabel) {
// Start with a <div></div> wrapper
setElement(Document.get().createDivElement());
// Insert a <span> for the text, allowing us to change the text later
Element textElement = Document.get().createSpanElement();
textElement.setInnerText(text);
// Create a button element as well
Element buttonElement = Document.get().createButtonElement();
buttonElement.setInnerText(buttonLabel);
// Attach both to the div we already created
getElement().appendChild(textElement);
getElement().appendChild(buttonElement);
// Note that we could have done all of the above with SafeHtmlTemplate
// to let us write a string, or could do the escaping ourselves and just
// make a simple HTML string in code. I find making DOM elements like
// this easier to read, but many people prefer the template approach.
// When considering a template tool, also look into the new library
// Elemento to see what it offers.
}
#Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
}
Here is the project, running for you to see it https://viola.colinalworth.com/proj/54177c9456d1c4f777d17dc660005643/project/client/SampleEntryPoint.java - you can click either on the text, or on the button, and the popup appears as expected.
Related
I want the event handler to be added to one parent that contains many buttons. That event listener then analyzes bubbled events to find a match on child nodes which I can target. With other words, right now I do this:
for(Object button: menuButtons) {
button.setOnAction(handler);
}
Now I have all buttons attached to an event handler, great but not what I want. I just want them to have one handler on the parent and use that to somehow fire the different buttons. Is it possible?
One way is to make your own Button class to apply the listener for you:
public class MyButton extends Button {
public MyButton(MyHandler handler) {
super();
setOnAction(handler);
}
}
Then in your parent code:
MyHandler handler = new MyHandler(...);
MyButton menuButton1 = new MyButton(handler);
MyButton menuButton2 = new MyButton(handler);
...
I'm not sure why you want to do this though, because the handler will receive events from all the buttons. You'll have to distinguish between them.
Edit: Actually, after reading the question again I'm not sure if this is what you're asking for. You want to apply the listener to the parent and have it indirectly be passed to the buttons? I'm not sure if that is possible. It would depend on what type of object the parent is, and even then if the parent was to receive events it wouldn't be able to know what buttons were clicked (unless you do some ugly stuff maybe, like checking the coordinates of the touch with the coordinates of the buttons, but I don't think that's worth it). With this solution you are keeping it to one MyHandler object, but that was the case in your original solution too.
I just created my own Container, its structure looks like this:
Container
|- TabsContainer
|-Button1
|-Button2
|-Button3
...
It should be like this:
and be positioned at the bottom of the screen, like this:
in every Form I create.
When I add this custom Container to the 4 of my Forms, I still want all of the buttons to do the exact same thing. How could I do this? And In what function? before?
I already tried onPostShow()of my login Screen by getting all of them with their unique component root and adding an actionListener, but it did not work.
Furthermore the tabs are no "blank containers" but still depicting the buttons, but they should not. See here:
How can I solve these two issues?
To get this to work globally, you need to add the actionListenerdirectly to the buttons.
After creating your Container and adding the Buttons, right click on them one after the other and select Event -> Action Event. This will generate onComponentAction method where you can write your code for that button.
You should get something similar to this:
#Override
protected void onContainer_Button1Action(Component c, ActionEvent event) {
//Write all you want this button to do here
}
I'm sure you're trying to avoid code repetition, as mentioned in your previous question. Using universal container is more secure and less prone to errors than the earlier method.
Codename One also supports the EmbeddedContainer functionality in the old GUI builder. So you can create a Container instance for the 6 tabs (in the add new GUI element menu pick "Container") and add them to the tabs as an EmbeddedContainer UI. Note that this isn't supported by the new GUI builder which is based on a more traditional GUI builder approach and it might make navigation behavior in the app somewhat "odd".
In the new GUI builder you can just write generic code to map to this as the form would just map directly to a single class.
I'm very new at coding Java and Netbeans. So basically, I have a "save" button and three text fields, I want to enable the Button when these three text fields are edited and disable the button when one of them is empty. Also I'm wondering where I should put my codes. Since it's Netbeans I'm only familiar with ActionPerformed methods, there you can set an action when a button is pressed.
If you can keep it simple it would be appreciated!
public project() {
initComponents();
//Here I want the window to appear in the middle of the screen
setLocationRelativeTo(null);
if(txfField1.getText().equals("")){
btnSave.setEnabled(false);
}
else {
btnSave.setEnabled(true);
}
}
I tried with this code on only one of the three text fields and It does not work, the button is always enabled. The button is initially disabled. Additionally I have also tried to put my code below this method:
public class project extends javax.swing.JFrame {
You can use event handlers to change the state of the button. For example, if you have one text field and you want to change the state of the button depending on the data inside the text field, you could use something like
if (!jTextField1.getText().equals("")) {
jButton1.setEnabled(true);
} else {
jButton1.setEnabled(false);
}
and the event handler you can use
private void jTextField1KeyTyped(java.awt.event.KeyEvent evt) {
You can generate this automatically in Netbeans by going to the event tab when you have clicked on a component in the design view.
It seems in your example you have the right idea, however you need to update the button using events such as key pressing, key releasing etc
You can add it in onblur() method of those text boxes.
If it can, you can add a validation with an error message on click of save button, which might be more meaningful.
I want a complex dialog to appear when the user clicks some button my plugin adds, but I could not find any existing dialog type which supports adding arbitrary controls.
Instead, I was thinking about creating a wizard with just one page - that would probably look good enough but it doesn't feel right. Is there a better way to create a dialog with complex controls?
You want to subclass org.eclipse.jface.dialogs.TrayDialog. This will give you a dialog with a button bar and the slide out tray that will appear when you click the help button. According to the Javadoc of TrayDialog:
It is recommended to subclass this class instead of Dialog in all cases except where the dialog should never show a tray
You put your complex code in the createDialogArea(Composite parent) method. If you want everything to look right make sure you use the composite returned from calling super instead of using the parent. This will make sure the margins are set to the default. For instance:
protected Control createDialogArea(Composite parent) {
Composite parentWithMargins = (Composite) super.createDialogArea(parent);
/*
* Add your code here parenting off of parentWithMargins
*/
return parentWithMargins;
}
If I create a set of actions to be used in a JFace application and I assign images to those actions, those images show up in both the toolbar (where I want them) and in the menus (where I don't want them).
Other than supplying two completely separate sets of actions (which eliminates part of the point of actions in the first place), how can I arrange to have those images displayed ONLY in the toolbar, and have the menus display only text?
I ran into this problem as well (except I wanted different text for the toolbar and menu.) I ended up using the same action, but two different instances of it.
// Use this one in the menu
Action a = new Action();
// Use this one in the toolbar
Action a2 = new Action();
a2.setImageDescriptor(img);
Alternately, you could store the image descriptor in the action for the toolbar version and set it to null for the menu version.
I haven't checked this myself, but give this method a looksee:
public int getStyle() { ... }
It's defined in the Action class, and it appears to return the type of interface element that the Action is graphically represented as. So then you could override the getImageDescriptor() method:
public ImageDescriptor getImageDescriptor() {
if (getStyle() == AS_DROP_DOWN_MENU)
return null; // No icon in a menu
return someImageDescriptor; // Actual icon
}
I ended up essentially duplicating the actions, making pairs, one with an image, one without, thereby eliminating the benefit of actions in the first place (sigh). On the other hand, since each action does just invoke a single method in the controller to perform the work, it's not too insidious and grouping the pairs together makes it reasonably clear what's going on.