GWT FileUpload comes as a widget that produces so that one can upload a file during form submit (at least it's how I understand it :) ) What I want to do is to make it a better-looking and get rid of standard "Browse..." button.
Since I don't have good GWT experience (and no JavaScript), I looked for existing solutions and found quite a good project - gwtupload. It's good, but I realized I'd love to have my own miniature version (and also, I was curious about how it works). So I browsed through code and tried to extract the magic part. I realized that GWT FileInput is used, but it's not shown, and Button clicks are delegated to this FileInput. The code I tried to extract (only the part that delegates the click) after reviewing sources of gwtupload contains this tricky elem.click() JSNI:
class MyUpload extends Composite {
private static native void clickOnInputFile(Element elem) /*-{
elem.click();
}-*/;
public MyUpload() {
final FileUpload upload = new FileUpload();
AbsolutePanel container = new AbsolutePanel();
// container.add(upload);
Button btn = new Button("My Browse..");
btn.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
clickOnInputFile(upload.getElement());
}
});
container.add(btn);
initWidget(container);
}
}
But this seems not to work: clicking on 'My Browse..' results in no effect (just in case I also tried running with un-commented container.add(upload) line) . Could you please help me in understanding what's wrong/missing in this code sample?
Thank you in advance.
P.S. I know that I have to place it on the FormPanel, and I know the rest about how to perform the actual submit/handling in Servlet; the only thing I want to do is this kind of decoration.
Since I have not received any answers, I had to have more investigation of this issue, so I performed a deeper code analysis of gwtupload project in order to understand how GWT FileUpload (which gets transformed into ) can be decorated.
It turned out that element.click() will only work in browsers which support #click() method (IE, Chrome, Safari). Actually, Manuel Carrasco Moñino - project author - mentions it within comments. There's second approach (for Firefox & Opera) that uses hack when FileInput is placed on transparent panel, which however is placed over some decorated button (using absolute positioning); comment by Manuel:
When the user puts his mouse over the button and clicks on it, what really happens is that the user clicks on the transparent file input showing the choose file dialog.
After that, the main work is correctly applying style attributes to elements.
Thus, there are two implementations of custom file upload component, and GWT deferred binding is used to instantiate them depending on Browser.
As for example I mention in my question, there're few fixes ("upload" has to be added to to the container, and it can be set to #setVisible(false)):
class MyUpload extends Composite {
private static native void clickOnInputFile(Element elem) /*-{
elem.click();
}-*/;
public MyUpload() {
final FileUploadWithMouseEvents upload = new FileUploadWithMouseEvents();
AbsolutePanel container = new AbsolutePanel();
container.add(upload);
upload.setVisible(false);
Button btn = new Button("My Browse..");
btn.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
clickOnInputFile(upload.getElement());
}
});
container.add(btn);
initWidget(container);
}
}
This example works fine in IE8.
P.S. Thanks to Manuel for his great library :)
Related
I have a problem with a Wicket Form. In my form if a User click twice quickly on a SubmitLink the onSubmit method called twice and there where 2 instances of an object. How can I prevent this? I have tried using a boolean variable
#Override
public void onSubmit(){
if(!submitted){
submitted = true;
dao.save(object);
setResponsePage(differentPage.class);
}
}
This method doesn't work for me. Can anyone help me please?
There are some work around To prevent double submit.
I guess you may not added renderStrategy.So first add setRenderStrategy in Your application class .
Direct, IRequestCycleSettings.RenderStrategy.ONE_PASS_RENDER. Everything is handled in one physical request. This is efficient, and is the best option if you want to do sophisticated clustering. It does not however, shield you from what is commonly known as the Double submit problem.
getRequestCycleSettings().setRenderStrategy(RequestCycleSettings.RenderStrategy.ONE_PASS_RENDER);
Probably above solution will work with your case. On top of that
You can disable the button on click submit or You can use some indicatorbutton link .
I resolve with this lines of code
save_btn = new AjaxSubmitLink("submit_btn", this) {
protected void onSubmit(AjaxRequestTarget art){
art.appendJavaScript("e.preventDefault();");
}
};
And the
getRequestCycleSettings().setRenderStrategy(RequestCycleSettings.RenderStrategy.ONE_PASS_RENDER);
of course
I'm wondering if there is a simple way in GWT to forbid History.back() (or .forward()) to lead to an external site, and define a fallback url if one of this happen.
For example :
Assuming that mysite.com#token, contains a component triggering a History.back().
I am on stackoverflow.com, I paste mysite.com#token in my browser, then click on my component which move me back to stackoverflow, is it possible that click goes in mysite.com instead as a back exit my site?
Thanks for your help!
Use this approach
Window.addWindowClosingHandler(new ClosingHandler() {
public void onWindowClosing(ClosingEvent event) {
event.setMessage("Do you want to leave this site");
}
});
I'm attempting to do something that seems like it should be quite common, so I'm surprised I'm having a hard time finding a solution.
I have a simple Eclipse RCP application. It consists of a view, containing a treeViewer that displays elements of an xml file hierarchically. The other side is an editor, which contains various fields such as textboxes, etc, for displaying and also modifying the xml values. The treeviewer displays icons alongside the element name, and what I'm trying to do is change the icon to a "modified" version of the icon whenever a change is made in the editor - signifying that a value of that element has been changed. This is very similar to how Eclipse, when integrated with subversion, shows that a file has been modified from the base revision in the Package Explorer.
I'll try to just show the parts of the code relevant to this specific issue and hope I don't leave anything out. This is the editor class:
public class XmlEditor extends EditorPart
{
protected boolean dirty = false;
public void setDirty(boolean value)
{
dirty = value;
firePropertyChange(PROP_DIRTY);
}
}
and this is the view with the tree:
public class TreeView extends ViewPart implements IPropertyChangeListener {
public void createPartControl(Composite parent) {
treeViewer = new TreeViewer(parent, SWT.BORDER | SWT.MULTI | SWT.V_SCROLL);
getSite().setSelectionProvider(treeViewer);
treeViewer.setLabelProvider(new TreeObjLabelProvider());
treeViewer.setContentProvider(new TreeObjContentProvider());
PlatformUI.getWorkbench().getWorkingSetManager().addPropertyChangeListener(this);
}
public void propertyChange(PropertyChangeEvent event) {
if (event.getProperty().equals(IWorkbenchPartConstants.PROP_DIRTY)) {
treeViewer.refresh();
}
}
}
In this scenario, TreeView::propertyChange() is not getting called, even though firePropertyChange() is getting fired. Any ideas why? I'm also open to any other ideas that don't involve PropertyChangeListener, it just seemed like this would be the easiest way at the time. Thank you.
Here's how I ended up solving the problem:
Changed TreeView to implement IPropertyListener instead of IPropertyChangeListener
Implemented the propertyChanged() method to perform a treeViewer.refresh()
In the XmlEditor::createPartControl() method I got a reference to the Treeview part and then added it to the property listeners like so:
TreeView treeView = (TreeView) getSite().getPage().findView(TreeView.ID);
addPropertyListener(treeView);
Now, TreeView::propertyChanged() gets called after firePropertyChanged(), just like I needed. It took quite a bit of experimentation to learn the difference between IPropertyListener and IPropertyChangeListener, addPropertyListener() and addPartPropertyListener().
Thanks to nitind for giving me a new perspective, and for showing me about Decorators, which is definitely the right way to go as opposed to changing the tree icon to a modified version.
You fired a property change in the editor part, which is unrelated to the working set manager. Nothing you've done connects the view to the editor. If you want the two to talk to each other, write them to talk to each other, or at least create and react to events from making the modifications you describe.
I'm also pretty certain that's not how SVN shows that a file has been modified.
SVN is probably supplying a Decorator: http://eclipse.org/articles/Article-Decorators/decorators.html
Add this bunch of code in your create part control this will may be help you
ResourcesPlugin.getWorkspace().addResourceChangeListener(new IResourceChangeListener() {
#Override
public void resourceChanged(IResourceChangeEvent event) {
treeViewer.refresh();
}
});
I am creating a web page with several tabs. To implement that I am using wicket AjaxTabbedPanel and several AbstractTab. In each tab I have tables with data and I am using a javascript script to make the tables sortable.
public TabbedPage() {
List<ITab> tabs = new ArrayList<ITab>();
tabs.add(new AbstractTab(new Model<String>("first tab")) {
public Panel getPanel(String panelId) {
return new TablePanel(panelId);
}
});
tabs.add(new AbstractTab(new Model<String>("second tab")) {
public Panel getPanel(String panelId) {
return new TablePanel(panelId);
}
});
add(new AjaxTabbedPanel("tabs", tabs));
}
When I load the page the table in the tab selected by default is sortable. However, as soon as I click any of the links to jump to other tabs (including the one of the tab already selected), none of the tables in any of the tabs allows me sort them (including the one that was previously working - the table in the default tab). If I refresh the page I can sort the table (of the tab selected in the moment of the refresh), but as soon as I click in any of links to switch tabs, the tables stop having the sortable capability again. Any ideas of why is this happening?
EDIT:
I just found that if I replace the AjaxTabbedPanel by TabbedPanel I don't have this problem. Although I'm still not sure why is that. Can anyone enlighten me?
add(new TabbedPanel("tabs", tabs));
Sorting the table by JavaScript is most likely a function called with a specific DOM-Id and seems to be executed 'onLoad'. it then accesses the currently displayed table and does it's work.
Changing the content of your Panel by Ajax doesn't trigger 'onLoad' so the function isn't executed again. TabbedPanel reloads the page and therefore executed your script.
Selecting a previous sortable table with AjaxTabbedPanel doesn't work because of the dynamically generated DOM-Ids.
Your solution is to add a AjaxCallDecorator to the links from AjaxTabbedPanel or to include the script or at least the function call to your tabbed panels.
At least this it what comes to mind without seeing any sources...
EDIT:
You might want to look at The Wicket Wiki. There's a description on how to call js after clicking an AjaxLink. That's exactly what should solve your problem.
Summary: Just add
link.add(new AttributeAppender("onclick", new Model("myTableSortingScript();"), ";"));
to the links generated by AjaxTabbedPanel.
In Wicket 6.0 you can run JavaScript on a component basis: Just override renderHead(IHeaderResponse response) for your component:
#Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);
response.render(new OnLoadHeaderItem("initalizeMe(\"" + getMarkupId() + "\");"));
}
initializeMe(mycomponentId) is executed every time the component is loaded by the AjaxTabbedPanel. This also works with the standard TabbedPanel.
No real idea since I'm not sure what the code is doing but I had a similar problem with my Panel Manager. Basically if you dynamically load HTML into a panel (a div or another element) using "innerhtml" script in the content will not be executed.
To get around this I scan the loaded content for "script" tags and append them using the DOM methods - this does run the script and makes it available. My "load" method is:
// Load Content
Panel.load = function(Content) {
// "null" the old (to clear it)
Panel.innerHTML = null;
// Load the content
Panel.innerHTML = Content;
// Load Scripts
var AllScripts = Panel.getElementsByTagName("script");
var AllScriptsCnt = AllScripts.length;
for (var Cnt = 0; Cnt < AllScriptsCnt; Cnt++){
var CurScript = document.createElement('script');
CurScript.type = "text/javascript";
CurScript.text = AllScripts[Cnt].text;
Panel.appendChild(CurScript);
};
};
Again, not sure if this is the issue, but it sounds pretty much on target from my experience.
i have this problem with my project these days. i'm developing a plugin in eclipse,
i need to write a text on the active window(coding area) when i click a button.
i use the following code in my button.java class
public class Button implements IWorkbenchWindowActionDelegate {
private IWorkbenchWindow window;
/**
* The constructor.
*/
public Button() {
}
/**
* The action has been activated. The argument of the
* method represents the 'real' action sitting
* in the workbench UI.
* #see IWorkbenchWindowActionDelegate#run
*/
public void run(IAction action) {
MessageDialog.openInformation(
window.getShell(),
"Button",
"Code of the Button goes here");
}
how can i do it inside the run method? here I'm displaying a message, instead of showing a message i want to display some text in the text editor pane. please help me to achieve this.
if you guys can please give me some links to understand about eclipse plug-in developments? any blog posts that are easy to understand will be much better?
You should do something like this. It is completely untested and you will need to add lots of null checks and try-catch blocks, but the code below gets the currently active editor and replaces the current selection with whatever is passed in as an argument:
void method (String text) {
IEditorPart part = Workbench.getInstance().getWorkbenchWindows()[0].getActivePage().getActiveEditor();
IEditorInput editorInput = part.getEditorInput();
if (part instanceof ITextEditor) {
ITextEditor textEditor = (ITextEditor) part;
IDocument doc = textEditor.getDocumentProvider().getDocument(editorInput);
ITextSelection sel = textEditor.getSelectionProvider().getSelection();
doc.replace(sel.getOffset(), sel.getLength(), text);
}
}
It is messy and complicated, but that's the Eclipse framework for you.
This might be a good place for you to look at Eclipse plugin development:
http://www.ibm.com/developerworks/views/opensource/libraryview.jsp?search_by=Create+commercial-quality+eclipse+ide
Developer Works in general has a lot of good content on Eclipse, so if this series is not exactly what you need, you can explore Developer Works for other things.
I'd recommend this one. It is a very good introductory tutorial