We Keep Coding

JAVA gwt - saving info after refreshing page

At the moment , im working with java gwt and i stopped studdenly because one problem occured. I want that my information (for example string) will save after refresh button is clicked.
// user enters something in TextArea textArea1 object
Window.addWindowClosingHandler(new Window.ClosingHandler() {
public void onWindowClosing(Window.ClosingEvent closingEvent) {
//maybe there is a function or what
pleaseSaveInfomation(textArea1);
}
});
I tried this , but i know how to implement it correctly to my source code:
https://stackoverflow.com/a/14220746/5010218
The last(worst) chance is to store data from textArea in file.txt , after refreshing i could read info from file and thats all. But maybe GWT has a specific handler/method/class or what to handle this.
Thats for your opinion and help.

I had the same problem. You can easily overcome it with this.
import com.google.gwt.storage.client.Storage;
private Storage stockStore = null;
stockStore = Storage.getLocalStorageIfSupported();
Please read documentation
http://www.gwtproject.org/doc/latest/DevGuideHtml5Storage.html#UsingStorage

When a browser close a window (because of a refresh, or the user has closed the window, changed the url, etc), a script is not allowed to prevent this action. It's not specific to GWT.
However, you can suggest to the browser-agent to show a confirmation to the user. You can do this with the message property of the closing event.
In GWT:
Window.addWindowClosingHandler(new Window.ClosingHandler() {
public void onWindowClosing(Window.ClosingEvent closingEvent) {
closingEvent.setMessage("Confirm ?");
}
});
You shouldn't rely on this event to store your data, as a lot of condition can prevent you to do this. You should maybe periodically store a draft to the local-storage or to the server.

You probably want to store your data in sessionStorage. In GWT, this the Storage class.

Moxieapps file uploader for GWT adding multiple upload buttons

The GWT web app I'm building has a page where users can upload CSV files. The upload code uses the Moxieapps GWT Uploader, which mostly works great.
However, I've discovered a strange scenario, where navigating away from the page and back to it adds the upload button again. So the third time I visit the page, the upload section will look like this:
And the relevant part of the generated HTML viewed in an inspector shows that both the input and the div containing the "button" get added over and over (though there is only ever one dropzone):
I've gone over my code many times to see whether I was doing something that could be causing this, but haven't found anything. You don't actually manually add the button or the input; this is done automatically by the framework. The fileUploader gets initialised only once (this being GWT client code, I've debugged using the inspector as well as logging statements to the console to confirm this):
fileUploader.setButtonDisabled(true).setFileTypes("*.csv")
.setUploadURL(getBaseUrl() + "/fileUpload.upload")
.setButtonText("<span class=\"buttonText\">Select CSV file to upload</span>")
.setFileSizeLimit(FILE_SIZE_LIMIT)
.setButtonCursor(CustomUploader.Cursor.HAND)
.setButtonAction(CustomUploader.ButtonAction.SELECT_FILE)
.setUploadProgressHandler(new UploadProgressHandler() {...})
.setUploadSuccessHandler(...)
// etc. with other handlers
The method setButtonText() is called from a couple of other places, and the text changes as it should, but only on the last button (if there are several). Otherwise, there's nothing in my code that could possibly be adding the button as far as I can tell.
Has anyone else encountered this issue? Is there some property I need to set to prevent this? Could it be a bug in the moxieapps code?

After writing out my question, and adding "Could it be a bug in the moxieapps code?" at the end, I followed up on that suspicion, and it turns out that it is indeed a bug in the org.moxieapps.gwt.uploader.client.Uploader class.
The input and the "select file" button are added in the onLoad() method of that class without a check whether they may have been added already.
It looks like there hasn't been any active development on this framework for some time, so I thought it was time for a custom override version. I've tested this and it works:
package yourpackagename.client.override;
import java.util.Iterator;
import org.moxieapps.gwt.uploader.client.Uploader;
import com.google.gwt.user.client.ui.FileUpload;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.WidgetCollection;
/**
* The sole reason this class exists is to fix a bug in the moxieapps uploader
* (org.moxieapps.gwt.uploader-1.1.0.jar) where it adds a new upload input and
* button each time its <code>onLoad()</code> method is called, i.e. every time
* you navigate away from the page and then back to it.
*/
public class CustomUploader extends Uploader {
#Override
protected void onLoad() {
boolean hasFileUploadAlready = false;
WidgetCollection children = getChildren();
for (Iterator<Widget> iterator = children.iterator(); iterator.hasNext();) {
Widget eachWidget = iterator.next();
if (eachWidget instanceof FileUpload) {
hasFileUploadAlready = true;
}
}
// Only call the super method if there isn't already a file upload input and button
if (!hasFileUploadAlready) {
super.onLoad();
}
}
}
Instead of referencing the org.moxieapps.gwt.uploader.client.Uploader, I've changed the references to point to my custom uploader class, which will now check for an existing FileUpload child widget, and simply skip the original onLoad() code if it finds such a widget.
Might be a bit of a crowbar approach, but it works (and in my case, changing the maven-managed JAR file is not very practical). Hopefully, this will be useful to anyone else coming across this problem.

GWT CK EDITOR - Rendering issue

I am using gwt-ckeditor in my application. I am using GWT 2.5 and I have embedded CKEDITOR in GWT. I have some fields in form containing CKEditor as well. When I navigate from one form to another, it does not sustain its value. I dont want to save it. But I want to sustain it atleast for my validations to get complete. How can I acheive this functionality ? Please let me know. As Whenever it is getting detached it is losing its values.

Yeah I was also facing the same issue. CKeditor is actually extended from IFrame and that is why when it is detached from the form or widget, it will loose all the information. To sustain its value , you have to manually code it.
private String ckValue ;
CkEditor ckeditor = new CkEditor(new CkConfig());
ckeditor.addAttachHandler(new AttachHandler(){
public void onAttach(Event value){
setCkValue(value);
}
});
public void setCkValue(String ckValue){
this.ckValue = ckValue;
}
public String getCkValue(){
return ckValue;
}

Calling a Javascript function from Wicket

I want to pass the output of a block of javascript code in html to its corresponding wicket component. I tried AbstractDefaultAjaxBehaviour and it doesn't seem to work.
Here's what I'm working with:
HTML
// In <body>
<div wicket:id="container">
<script type="text/javascript" wicket:id="channelScript">
function initChannel() {
window.alert('got it');
}
</script>
</div>
private WebMarkupContainer container = new WebMarkupContainer("container");
private Label channelScript = new Label("channelScript", "initChannel();");
add(container);
final AbstractDefaultAjaxBehavior channel = new AbstractDefaultAjaxBehavior() {
protected void respond(final AjaxRequestTarget target) {
channelScript.setEscapeModelStrings(false);
target.add(channelScript); // initChannel is not triggerred
}
};
container.add(channel);
I also tried this:
add(new AjaxEventBehavior("onload") {
#Override
protected void onEvent(AjaxRequestTarget target) {
channelScript.setEscapeModelStrings(false);
target.add(new Label(channelScript));
}
}
Please what am I doing wrong? Thanks
UPDATE
I will be passing series of variables from wicket to JS such that every javascript output is displayed using wicket component. I just realized that I will have to make do with dom ready state to begin the interaction. So that's fine. But then I'm still confused and clueless about how the wicket component will change state to receive updated response from javascript. Is there a wicket component that triggers itself asynchronously?

Don't use a Label as script container. Wicket has some proper ways to do that.
The following code would be on option (assuming that you are on wicket 1.5)
#Override
public void renderHead(final Component component, final IHeaderResponse response)
{
super.renderHead(component, response);
response.renderJavaScript("initChannel();", "myScriptID");
}
If you want to perform a script after you site was fully loaded, you can use this:
response.renderOnLoadJavaScript("doSomething();");
In wicket 1.4 this works differently. You have to use HeaderContributors there.

You're doing it wrong because you set a wicket:id on your <script> part, thus, Wicket will replace it with your Label's content (the javascript function call). Your javascript function is never available because it is never sent to the client. The "good" way of doing what you want is to remove the wicket:id from your script tag and in your behavior use the special method target.appendJavascript("initChannel();"); (or prependJavascript) instead of playing with escaping on a Label.
Please note that your first method may never work if you never "fire" the ajax behavior, the second one should work when the navigator has finished loading the DOM and trigger the "onload" event on your page (but I am not sure the behavior is correctly binded, never tried this...)
An additional note is that the Javascript you wrote is polluting the global namespace of the window, if you consider using this in a real project, please consider reading documentation regarding namespacing of javascript.

I've been working on a Wicket 6 extension called wicket-js which allows you to do this in a very convenient and clean way.
Code for your use case could look something like this
add(new JsBehavior() {
#Override
protected IJavaScript domReadyJs() {
return new JsCall("initChannel");
}
});
which translates into what #Till has already provided as a native Wicket solution.
If you want the alert in there you could do this
add(new JsBehavior() {
#Override
protected IJavaScript domReadyJs() {
return new JsStatements(
new JsCall("alert", "got it"),
new JsCall("initChannel")
);
}
});

How to both start a file download and close a (jQuery) dialog in Wicket?

In a Wicket app, I have a modal dialog that contains a simple form and a button. User enters values (report parameters), and then clicks the button which starts the download of a report file (typically a PDF). (All form values are required, and Wicket's validation mechanism is used to make sure user entered them before the download can start.)
Maybe this is better explained with a picture:
I'm using here a jQuery UI Dialog (instead of Wicket's ModalWindow which felt a lot clumsier and uglier from user's perspective).
Everything is pretty much working, except closing the dialog when/after clicking the download button.
Current version (irrelevant bits omitted):
public class ReportDownloadLink extends Link {
public ReportDownloadLink(String id, ReportDto report) {
super(id);
this.report = report;
}
#Override
public void onClick() {
IResourceStream resourceStream = new AbstractResourceStreamWriter() {
#Override
public void write(OutputStream output) {
try {
reportService.generateReport(output, report);
} catch (ReportGenerationException e) {
// ...
}
}
#Override
public String getContentType() {
// ...
}
};
ResourceStreamRequestTarget target =
new ResourceStreamRequestTarget(resourceStream, report.getFileName());
getRequestCycle().setRequestTarget(target);
}
The dialog is a Wicket Panel (which makes use of ReportDownloadLink above), which we put in a certain div, and then when a report is selected in a list, the dialog is opened from an AjaxLink's onClick() quite simply like this:
target.appendJavascript(String.format("showReportExportDialog('%s')", ... ));
Which calls this JS function:
function showReportExportDialog(dialogTitle) {
$("#reportExportPanelContainer").dialog(
{modal:true, draggable:true, width: 320, height: 330, title: dialogTitle}
);
}
Some options:
Make ReportDownloadLink extend something else than Link, perhaps, and/or find an appropriate method to override which would allow me to execute the tiny bit of JavaScript needed to close the jQuery Dialog.
Investigate jQuery + Wicket libraries (such as jqwicket or wiquery) that supposedly make these two work better together.
Latest thing I tried was overriding method getOnClickScript() in ReportDownloadLink which seemed promising (according to the Javadocs, it returns "Any onClick JavaScript that should be used"):
#Override
protected CharSequence getOnClickScript(CharSequence url) {
return "closeDownloadDialog()";
}
Thing is, this causes onClick() not to be called at all, i.e., the download doesn't start.
Could I perhaps override some more "ajaxy" class from Wicket (than Link) to combine these things: first init the download, then call the JS for closing the dialog?
Any recommendations or experiences from similar cases? Note that I want to keep using the jQuery dialog here, even though it makes things like these more complicated. Using a DownloadLink (see related question) is fine too in case that makes things easier.
NB: if you recommend JQWicket or wiQuery, please provide an example of how to do this.

Maybe you can try to bind the close modal code to the button "click" event using only JQuery, in your modal panel page, add something similar to ${"#mySubmit").click(myCloseModalFunction). It should keep Wicket default's behavior and add modal closing in the mix.
The other way is to override the getOnClickScript(...) method but the javascript has to return true in order for the browser to call the continue link evaluation and load the corresponding href. If you return false, the evaluation stops. I would suggest something like
#Override
protected CharSequence getOnClickScript(CharSequence url) {
return "closeDownloadDialog();return true;";
}
Hope it helps...

See https://cwiki.apache.org/WICKET/ajax-update-and-file-download-in-one-blow.html for inspiration.