We Keep Coding

How to use (browser)autocomplete with Vaadin 10 TextField

I try to build an reservation Form with vaadin 10 while building it i encounterd the problem, that the autocompletion we know from every form on te web doesn't work. I put in an name field the name press submit an the next time i want to re-enter the name i need to write it out again.
My code looks like that (shortend):
TextField name = new TextField();
Button save = new Button("submit");
save.addClickListener(event -> save());
name.setAutocomplete(Autocomplete.ON);
add(name);
add(save);
i had the hopes that Autocomplete.On does the magic for me but it seems not to work. Maybe the way the save methode works screw things up?
the methode is rather big i just simplify it
private void save() {
--save everything to db
--remove all fields
--replace the fields with text saying reservation done
}

found out that someone created issue https://github.com/vaadin/vaadin-text-field/issues/156
seems to be an Shadow DOM limitation
Related issues:
https://bugs.chromium.org/p/chromium/issues/detail?id=746593
https://bugs.webkit.org/show_bug.cgi?id=172567
Edit:
for auto completion for my loginForm i got it working with adding
class xyz extends Div implements PageConfigurator{
...
#Override
public void configurePage(InitialPageSettings settings) {
settings.addInlineWithContents(
InitialPageSettings.Position.PREPEND,
"window.customElements=window.customElements||{};
window.customElements.forcePolyfill=true;
window.ShadyDOM={force:true};",
InitialPageSettings.WrapMode.JAVASCRIPT);
}

I came across this issue recently with Vaadin 14 and a custom login form.
Chrome only offers auto-filling fields (and also save login details) if it can see the input tags with name attributes in the Light DOM, but Vaadin creates TextFields with all of its elements inside of a Shadow DOM hidden.
Solution is to create a reference with <input slot="input"> inside the parent <vaadin-text-field> as part of Light DOM. All the styles and everything will still be in the Shadow DOM but Chrome now can see the input fields for auto-completion.
Kotlin code:
val username = TextField().apply {
element.setAttribute("name", "username")
element.appendChild(Element("input").setAttribute("slot", "input"))
}
val password = PasswordField().apply {
element.setAttribute("name", "password")
element.appendChild(Element("input").setAttribute("slot", "input"))
}
add(username, password)

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.

Wicket DropDownChoice NOT working correctly with PropertyModels

I have been trying to debug why my DropDownChoice in a simple form with just the DropDown and a Submit Button hasn't been working correctly for hours now.
It has a very weird behaviour. Where the first value selected in the drop down choice is sent successfully to the server after which any other choice select is not updated by the model. ie if I have a List persons, and I select the 2nd person, it submits this successfully. However, on select of another person and trying to submit it again it keeps showing the first selected option.
Snippets of code here:
ChoiceRenderer<Empowerment> empowermentChoiceRenderer = new ChoiceRenderer<>("name", "id");
final DropDownChoice<Empowerment> empowermentDropDownChoice =
new DropDownChoice<>("empowerment", new PropertyModel<Empowerment>(this, "empowerment"), empowermentList, empowermentChoiceRenderer);
empowermentDropDownChoice.setRequired(true);
add(empowermentDropDownChoice);
Only way I am able to get a decent behaviour is if I set the empowerment variable above to null. In this case, on submit the empowerment is reinitialised to null and then a new submit works correctly.
empowerment is just a JPA entity.
I'll be glad to know if this is a known issue. I experienced it in wicket 6.9.1 and wicket 6.12

Finally, found the solution to the problem. Above code is correct, but problem lied in the entity class itself - Empowerment needs to implement Equals and Hashcode correctly.
The DropDownChoice works just fine after this.

Add an OnChangeAjaxBehavior to your DropDownChoice. This will update the model value on every selection change you make on the drop down:
empowermentDropDownChoice .add(new OnChangeAjaxBehavior() {
#Override
protected void onUpdate(AjaxRequestTarget art) {
//just model update
}
});

How to fill a web form using Java (Don't want to submit it, but just want to fill up the fields from database)

There is a requirement to fill a webform of some particular site of which HTML source I have available. I want to fill the fields on this form from the database records. I don't want to POST the request to the server as the application user would first verify the filled data and will submit the form manually.
Is there any way in java through which I can achieve this? I have already achieved this in VB .Net but want to include as a part of bigger application which is already developed in java and implements a business logic.
You help would be appreciated.
Thanks,
SRA

Java would be running on the server.
In that case, you just modify the server so that it generates the HTML with the <input> elements prefilled with the values from the database; e.g. using the value attributes. It is a little bit more complicated for selectors, where you have to make sure that one of the choices is preselected.

So, you need to access DB and you also need to fill web form from the client side. If you use Selenium it will be this scenario:
User starts your program. Program opens browser window, logs in and fills form. User checks data and presses "send"-button. Browser window automatically closed by program (potentially possible to keep browser window open, but it's better to clean resources and finish program).
Code sample:
public static void main(String[] args) throws InterruptedException {
webDriver = new FirefoxDriver();
try {
processPage();
} finally {
webDriver.quit();
}
}
private static void processPage() throws InterruptedException {
webDriver.get("http://some_page_url");
// Page element search example
List<WebElement> elements = webDriver.findElements(By.xpath(XPATH_STR));
// Fill page here
}

How to use GWT fileupload?

I have some queries when trying to implement a fileupload widget in my application. After many tries, it just doesn't seem to work.
Hence, I tried getting working solutions to see if I can understand anything from there.
http://code.google.com/p/faculty-gwt/source/checkout
However, I tried uploading a file using this and it seems that I am getting error messages too. and what is that textbox and listbox suppose to do? It is meant for showing an example of validating an input before submitting?
Can someone guide me along to solve this? Thanks.

Never tried to use the link you provided, but this is what i did to use a a GWT FileUpload widget:
I built a File Upload widget using the uibinder:
<g:FormPanel ui:field="docForm">
<g:FlowPanel ui:field="inputPane">
/*other displayed info*/
<g:FileUpload ui:field="DocPath"/>
/*other displayed info*/
</g:FlowPanel>
</g:FormPanel>
(Per the GWT api, FileUpload widgets can only be used from a FormPanel)
Make sure you set these in the FormPanel, otherwise you'll probably have issues:
yourFormPanel.setEncoding(FormPanel.ENCODING_MULTIPART);
yourFormPanel.setMethod(FormPanel.METHOD_POST);
That widget is dropped into my container page, then added to the display panel:
private FileUploadWidget createNewUploader(){
FileUploadWidget uploader = new FileUploadWidget(/*my constructor params*/);
uploader.addChangeHandler(new ChangeHandler() {
#Override
public void onChange(ChangeEvent event) {
DocPanel.add(createNewUploader());
}
});
return uploader;
}
My OnChange event is so that I have a new, blank uploader available when i use the current one.
and when I'm ready to submit:
private void processUpload(FileUploadWidget upload, int id) {
upload.setId(id);
//Don't bother to submit an empty one.
if (upload.IsFileSelected())
upload.Submit();
}