I am new in GWT world, previously I was working with JavaScript. I have some web-page where are multiple element. And I need to track which element was clicked using GWT.
I am using GWT 2.8.1
<div class="FileRow">
</div>
<div class="FileRow">
</div>
<div class="FileRow">
</div>
GWT realization
Integer tabIndex = 1, count = 1;
for (final FieldFileInfo info : clientData.getFileInfo()) {
final FlowPanel rowPanel = new FlowPanel();
rowPanel.setStyleName("FileRow");
final HyperlinkPanel fileLink = FileInfoParser.getLinkPanel(info);
fileLink.setStyleName("fileLink");
fileLink.setTabIndex(tabIndex++);
fileLink.setText("");
switch (info.getFileExtension()) {
case "png" :
fileLink.addStyleName("png");
fileLink.getElement().setId("png");
break;
case "jpg" :
fileLink.addStyleName("jpg");
fileLink.getElement().setId("jpg"+count);
break;
case "pdf" :
fileLink.addStyleName("pdf");
fileLink.getElement().setId("pdf");
break;
default :
fileLink.addStyleName("file");
fileLink.getElement().setId("file");
}
rowPanel.add(fileLink);
count++;
}
click realization
Element openPng = Document.get().getElementById("png");
Event.sinkEvents(openPng, Event.ONCLICK);
Event.setEventListener(openPng, new OpenModalHandler());
Now my click realization works only on first element with required ID. However in future there might be several elements with the same id and as a result I could not alert another elements.
Expected result is when I click on first element, GWT using Window.alert() show which element was clicked.
The answer is really simple.
To track which element was clicked I just modified case with:
fileLink.addClickHandler(new ClickHandlerData<Integer>(tabIndex) {
public void onClick(ClickEvent event) {
Window.alert("You clicked on " getData());
}
});
Also implement new class with ClickHandlerData
public abstract class ClickHandlerData<I> implements ClickHandler {
private I data;
public ClickHandlerData(I data) {
this.data = data;
}
public I getData() {
return data;
}
public void setData(I data) {
this.data = data;
}
}
Related
I have a Java file returning an ArrayList of Buttons with a button_text property
public void activate() throws Exception {
buttonsNode = getResource().adaptTo(Node.class).getNode("buttons");
buttons = new ArrayList<Button>();
try{
NodeIterator ni = buttonsNode.getNodes();
while (ni.hasNext()) {
Node n = (Node)ni.nextNode();
String button_text = n.getProperty("buttonText").getString();
Button bs = new Button(button_text);
buttons.add(bs);
}
}
catch(Exception e){
}
}
public ArrayList<Button> getButtonsListObject(){
return buttons;
}
public class Button {
String button_text;
public Button(String button_text) {
this.button_text = button_text;
}
public String getButtonText() {
return button_text;
}
}
If I put
<ul data-sly-list.button="${PillButtons.buttons}">
<li>${button}</li>
</ul>
in my HTL I just get a list with one item that is just the array in plain text: "[{ "buttonText": one},{ "buttonText": two},{ "buttonText": three}]"
And doing
<ul data-sly-list.button="${PillButtons.getButtonsListObject}">
<li>${button}</li>
</ul>
Returns a list with three items but they are all blank.
How do I properly access and print this ArrayList?
For the first attempt, I'm unsure where the ${PillButtons.buttons} is coming from, maybe you also have a String getButtons() that returns that JSON.
For the second one, you are using the right method in ${PillButtons.getButtonsListObject} (you could also use ${PillButtons.buttonsListObject} as HTL is smart enough to look for the getter) but you also need to print out <li>${button.buttonText}<li> to get the expected output.
I want make a validation when pulse close button of tab in eclipse RCP 4 application and if some validation fails then prevent de close.
If you don't want to use part.setDirty(true) together with an ISaveHandler like greg-449 montioned, you could listen to the model events and correct things there. Something in the direction of this:
public class PreventCloseAddon {
#PostConstruct
public void init(final IEventBroker eventBroker, final EPartService partService) {
EventHandler tbrHandler = new EventHandler() {
#Override
public void handleEvent(Event event) {
if (!UIEvents.isSET(event))
return;
Object element = event.getProperty(UIEvents.EventTags.ELEMENT);
if (element instanceof MPart) {
MPart part = (MPart) element;
if (!part.isToBeRendered()) {
// ... validate here ...
part.setToBeRendered(true);
partService.activate(part);
}
}
}
};
eventBroker.subscribe(UIEvents.UIElement.TOPIC_TOBERENDERED, tbrHandler);
}
}
You should be aware that the part will be rendered again with this code.
With wicket-dnd, is it possible to use dropTop() / dropBottom() with HTML tables? If so, what should the selector be?
I have an HTML table created via a ListView and have had success with dropCentre("tr"), but this is the only drop option that appears to work. Ideally, I would like to use dropTopAndBottom() and see a horizontal divider between table rows which indicates the drop target.
Update:
Here's the relevant code, simplified for for brevity. The table in question has a label per row and is added to a form.
// Container class for Wicket DND
final WebMarkupContainer dataWrapper = new WebMarkupContainer("dataWrapper");
dataWrapper.add(new WebTheme());
final ListView<BinaryData> data = new ListView<BinaryData>("data", list) {
#Override
protected void populateItem(final ListItem<BinaryData> item) {
final BinaryData data = item.getModelObject();
item.add(new Label("label", data.getLabel()));
}
#Override
protected ListItem<BinaryData> newItem(final int index, final IModel<BinaryData> itemModel) {
final ListItem<BinaryData> item = super.newItem(index, itemModel);
item.setOutputMarkupId(true);
return item;
}
};
dataWrapper.add(data);
dataWrapper.add(new DragSource(Operation.MOVE) {
#Override
public void onAfterDrop(final AjaxRequestTarget target, final Transfer transfer) {
}
}.drag("tr"));
dataWrapper.add(new DropTarget(Operation.MOVE) {
#Override
public void onDrop(final AjaxRequestTarget ajaxTarget, final Transfer transfer, final Location location) {
}
}.dropTopAndBottom("tr"));
form.add(dataWrapper);
And the markup:
<div wicket:id="dataWrapper">
<table>
<tbody>
<tr wicket:id="data">
<td wicket:id="label"></td>
</tr>
</tbody>
</table>
</div>
I am using Wicket-DND 0.6.0 and Wicket 6.6.0. When I drag a row using this code, I get the red cross icon displaying in the drag indicator.
wicket-dnd uses standard css selectors to determine drop locations.
The following is the modified TableExample in wicket-dnd-examples:
table.add(new DropTarget(Operation.MOVE)
{
#Override
public void onDrop(AjaxRequestTarget target, Transfer transfer, Location location)
throws Reject
// something was dropped
{
}.dropTopAndBottom("tr");
My problem was caused not by Wicket DND but by a apparently conflicting reference to JQuery UI in my markup (JQuery UI isn't required for Wicket DND, but was present for other components of my application).
Replacing this with a WiQuery-provided reference no longer results in any issues:
#Override
public void renderHead(final IHeaderResponse response) {
super.renderHead(response);
// Ensure that Wicket's jQuery library is always loaded, so we can invoke our own jQuery calls
response.render(JavaScriptReferenceHeaderItem.forReference(getApplication().getJavaScriptLibrarySettings().getJQueryReference()));
response.render(JavaScriptReferenceHeaderItem.forReference(CoreUIJavaScriptResourceReference.get()));
}
I am writing a GWT app that involves interacting with an external document in an iframe. As a proof of concept, I am trying to attach a click handler to a button.
The following works in javascript
var iframe = document.getElementById("rawJSIFrame");
var doc = iframe.contentDocument;
var body = doc.body;
var button = doc.getElementsByTagName("input").namedItem("submit");
button.onclick = function() {
alert("Clicked!");
};
Trying to do the equivalent in GWT, I did the following:
public void addClickHandlerToSubmitButton(String buttonElementName, ClickHandler clickHandler) {
IFrameElement iframe = IFrameElement.as(frame.getElement());
Document frameDocument = getIFrameDocument(iframe);
if (frameDocument != null) {
Element buttonElement = finder(frameDocument).tag("input").name(buttonElementName).findOne();
ElementWrapper wrapper = new ElementWrapper(buttonElement);
HandlerRegistration handlerRegistration = wrapper.addClickHandler(clickHandler);
}
}
private native Document getIFrameDocument(IFrameElement iframe)/*-{
return iframe.contentDocument;
}-*/;
The following is the ElementWrapper class:
public class ElementWrapper extends Widget implements HasClickHandlers {
public ElementWrapper(Element theElement) {
setElement(theElement);
}
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
}
The code to find the button works fine but the actual click event handler is not getting invoked. Has anybody had a similar issue before, and how did you resolve it?
Thanks in advance,
Tin
Hilbrand is right about the problem being that the GWT method onAttach() was not called.
I implemented your original solution, adding the following method to ElementWrapper:
public void onAttach() {
super.onAttach();
}
And called added wrapper.onAttach() after the ElementWrapper is created. Works like a charm!
I expect the problem is that the GWT method onAttach() is not called when you use the wrapping as in your first example. You can try to use the static wrap method on the Button widget. Although to use this the input must be of type button. Or have a look at the implementation of the wrap method. Here is the modified code when using the wrap method:
Element buttonElement = finder(frameDocument).tag("input").name(buttonElementName).findOne();
Button button = Button.wrap(buttonElement);
HandlerRegistration handlerRegistration = button.addClickHandler(clickHandler);
After researching this further, I found that the iframe is irrelevant. The same behaviour doesn't work on a normal button on the host page.
I basically fixed it by using JSNI to replicate part of GWT's event handling mechanism. The following works:
Element buttonElement = DOM.getElementById("externalButton");
new CustomElementWrapper(buttonElement).addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("GWT hooked into button");
}
});
Where CustomElementWrapper is:
public class CustomElementWrapper extends Widget implements HasClickHandlers {
private ClickEventManager clickEventManager;
public CustomElementWrapper(Element theElement) {
setElement(theElement);
clickEventManager = new ClickEventManager(theElement);
}
public HandlerRegistration addClickHandler(ClickHandler handler) {
//The 'right' way of doing this would be the code below. However, this doesn't work
// A bug in GWT?
//
// return addDomHandler(handler, ClickEvent.getType());
return clickEventManager.registerClickHandler(handler);
}
void invokeClickHandler() {
clickEventManager.invokeClickHandler();
}
public boolean isClickHandlerRegistered() {
return clickEventManager.isClickHandlerRegistered();
}
}
Finally, the ClickEventManager, where the actual work happens is:
public class ClickEventManager {
private boolean clickHandlerRegistered = false;
private ClickHandler clickHandler;
private Element element;
public ClickEventManager(Element element) {
this.element = element;
}
public void invokeClickHandler() {
//This shouldn't really be null but we are bypassing GWT's native event mechanism
//so we can't create an event
clickHandler.onClick(null);
}
public boolean isClickHandlerRegistered() {
return clickHandlerRegistered;
}
HandlerRegistration registerClickHandler(ClickHandler handler) {
clickHandler = handler;
if (!clickHandlerRegistered) {
registerClickHandlerInJS(element);
clickHandlerRegistered = true;
}
return new HandlerRegistration() {
public void removeHandler() {
//For now, we don't support the removal of handlers
throw new UnsupportedOperationException();
}
};
}
private native void registerClickHandlerInJS(Element element)/*-{
element.__clickManager = this;
element.onclick
= function() {
var cm = this.__clickManager;
cm.#com.talktactics.agent2.client.widgets.ClickEventManager::invokeClickHandler()();
}
}-*/;
}
Personally, I hate this solution because I appear to be duplicating GWT's event handling and quite possibly introducing nasty javascript memory leaks. Any ideas on why my first post doesn't work (remembering that the iframe aspect is a red herring), would be appreciated.
Thanks,
Tin
You may find this helpful:
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.ui.AbsolutePanel;
public class DirectPanel extends AbsolutePanel implements HasClickHandlers {
public DirectPanel(Element elem) {
super(elem.<com.google.gwt.user.client.Element> cast());
onAttach();
}
#Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
}
You will then be able to make arbitrary containers into widget containers:
Element root = Document.get().getElementById("target");
DirectPanel p = new DirectPanel(root);
Button register = new Button("Register");
register.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
// ...
}
});
p.add(register);
And bind events to arbitrary elements:
Element root = Document.get().getElementById("target");
DirectPanel p = new DirectPanel(root);
p.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
// ...
}
});
Specifically in your case, try this:
IFrameElement frm = Document.get().createIFrameElement();
Document d = frm.getContentDocument();
NodeList<Element> inputs = d.getElementsByTagName("input");
InputElement target = null;
for(int i = 0; i < inputs.getLength(); ++i) {
Element e = inputs.getItem(0);
if (e.getNodeName().equals("submit")) {
target = InputElement.as(e);
break;
}
}
if (target != null) {
DirectPanel p = new DirectPanel(target);
p.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
}
});
}
It's always mystified me that GWT makes doing this so difficult and poorly documented.
Instead of using iframes i suggest you simply make a http request from GWT via com.google.gwt.http.client.RequestBuilder. Like so:
private void getHtml(String url) {
RequestBuilder rb = new RequestBuilder(RequestBuilder.GET, url);
rb.setCallback(new RequestCallback() {
#Override
public void onResponseReceived(Request request, Response response) {
HTMLPanel html = new HTMLPanel(response.getText());
// Now you have a widget with the requested page
// thus you may do whatever you want with it.
}
#Override
public void onError(Request request, Throwable exception) {
Log.error("error " + exception);
}
});
try {
rb.send();
} catch (RequestException e) {
Log.error("error " + e);
}
}
You could use JSNI to reuse your JavaScript piece of code. Your javascript code would call a gwt method on an object that would throw it on behalf of the button in the iframe.
As to why GWT code does not work -- I guess that is because they use some layer on top of regular browser events that probably cannot span more than 1 frame. That's just a guess though. You could file this as a feature/bug request agains GWT team. If I am right your code looks just fine.
Please see my previous answer. A slight modification to your original solution will make it work.
I need a wizard which second page content depends on the first page's selection. The first page asks the user the "kind" of filter he wants to create and the second one asks the user to create one filter instance of the selected "kind".
JFace's wizards pages contents (createControl(...) method) are all created when the wizard is open and not when a given page is displayed (this allow JFace to know the wizard size I guess ??).
Because of this, I have to create my second page content BEFORE the wizard is opened BUT I can't since the second page's content depends on the first page selection.
For now the cleaner solution I found consists in creating all (seconds) pages before the wizard is open (with their content) and override the getNextPage() method in the first page's implementation.
The main drawback of that solution is that it can be be expensive when there are many second pages to create.
What do you think about that solution ? How do you manage your wizard's pages ? Is there any cleaner solution I missed ?
The approach is right if you are several other pages which are
completely different one with another
depends on the previous choices made in a previous page
Then you can add the next page dynamically (also as described here)
But if you have just a next page with a dynamic content, you should be able to create that content in the onEnterPage() method
public void createControl(Composite parent)
{
//
// create the composite to hold the widgets
//
this.composite = new Composite(parent, SWT.NONE);
//
// create the desired layout for this wizard page
//
GridLayout layout = new GridLayout();
layout.numColumns = 4;
this.composite.setLayout(layout);
// set the composite as the control for this page
setControl(this.composite);
}
void onEnterPage()
{
final MacroModel model = ((MacroWizard) getWizard()).model;
String selectedKey = model.selectedKey;
String[] attrs = (String[]) model.macroMap.get(selectedKey);
for (int i = 0; i < attrs.length; i++)
{
String attr = attrs[i];
Label label = new Label(this.composite, SWT.NONE);
label.setText(attr + ":");
new Text(this.composite, SWT.NONE);
}
pack();
}
As shown in the eclipse corner article Creating JFace Wizards:
We can change the order of the wizard pages by overwriting the getNextPage method of any wizard page.Before leaving the page, we save in the model the values chosen by the user. In our example, depending on the choice of travel the user will next see either the page with flights or the page for travelling by car.
public IWizardPage getNextPage(){
saveDataToModel();
if (planeButton.getSelection()) {
PlanePage page = ((HolidayWizard)getWizard()).planePage;
page.onEnterPage();
return page;
}
// Returns the next page depending on the selected button
if (carButton.getSelection()) {
return ((HolidayWizard)getWizard()).carPage;
}
return null;
}
We define a method to do this initialization for the PlanePage, onEnterPage() and we invoke this method when moving to the PlanePage, that is in the getNextPage() method for the first page.
If you want to start a new wizard based on your selection on the first page, you can use the JFace base class org.eclipse.jface.wizard.WizardSelectionPage.
The example below shows a list of available wizards defined by an extension point.
When you press Next, the selected wizard is started.
public class ModelSetupWizardSelectionPage extends WizardSelectionPage {
private ComboViewer providerViewer;
private IConfigurationElement selectedProvider;
public ModelSetupWizardSelectionPage(String pageName) {
super(pageName);
}
private class WizardNode implements IWizardNode {
private IWizard wizard = null;
private IConfigurationElement configurationElement;
public WizardNode(IConfigurationElement c) {
this.configurationElement = c;
}
#Override
public void dispose() {
}
#Override
public Point getExtent() {
return new Point(-1, -1);
}
#Override
public IWizard getWizard() {
if (wizard == null) {
try {
wizard = (IWizard) configurationElement
.createExecutableExtension("wizardClass");
} catch (CoreException e) {
}
}
return wizard;
}
#Override
public boolean isContentCreated() {
// TODO Auto-generated method stub
return wizard != null;
}
}
#Override
public void createControl(Composite parent) {
setTitle("Select model provider");
Composite main = new Composite(parent, SWT.NONE);
GridLayout gd = new GridLayout(2, false);
main.setLayout(gd);
new Label(main, SWT.NONE).setText("Model provider");
Combo providerList = new Combo(main, SWT.NONE);
providerViewer = new ComboViewer(providerList);
providerViewer.setLabelProvider(new LabelProvider() {
#Override
public String getText(Object element) {
if (element instanceof IConfigurationElement) {
IConfigurationElement c = (IConfigurationElement) element;
String result = c.getAttribute("name");
if (result == null || result.length() == 0) {
result = c.getAttribute("class");
}
return result;
}
return super.getText(element);
}
});
providerViewer
.addSelectionChangedListener(new ISelectionChangedListener() {
#Override
public void selectionChanged(SelectionChangedEvent event) {
ISelection selection = event.getSelection();
if (!selection.isEmpty()
&& selection instanceof IStructuredSelection) {
Object o = ((IStructuredSelection) selection)
.getFirstElement();
if (o instanceof IConfigurationElement) {
selectedProvider = (IConfigurationElement) o;
setMessage(selectedProvider.getAttribute("description"));
setSelectedNode(new WizardNode(selectedProvider));
}
}
}
});
providerViewer.setContentProvider(new ArrayContentProvider());
List<IConfigurationElement> providers = new ArrayList<IConfigurationElement>();
IExtensionRegistry registry = Platform.getExtensionRegistry();
IExtensionPoint extensionPoint = registry
.getExtensionPoint(<your extension point namespace>,<extension point name>);
if (extensionPoint != null) {
IExtension extensions[] = extensionPoint.getExtensions();
for (IExtension extension : extensions) {
IConfigurationElement configurationElements[] = extension
.getConfigurationElements();
for (IConfigurationElement c : configurationElements) {
providers.add(c);
}
}
}
providerViewer.setInput(providers);
setControl(main);
}
The corresponding wizard class looks like this:
public class ModelSetupWizard extends Wizard {
private ModelSetupWizardSelectionPage wizardSelectionPage;
public ModelSetupWizard() {
setForcePreviousAndNextButtons(true);
}
#Override
public boolean performFinish() {
// Do what you have to do to finish the wizard
return true;
}
#Override
public void addPages() {
wizardSelectionPage = new ModelSetupWizardSelectionPage("Select a wizard");
addPage(wizardSelectionPage);
}
}
Another alternative is to #Override setVisible. You can update page values or add additional widgets at that time.
I have a different solution.
If page depends on the result of page 1, create a variable and pass it into to first page, when that wizard page has the option from the user, then the last thing before the page is closed is to set the variable to the required value.
Then pass this variable to wizard, then pass it to the next wizard page. Then do a simple if statement and that way you get both choices together.
Remember that in most code there is only a small difference in the user options, so remember not to get bogged down in duplicating your code.