PDA

View Full Version : [INFOREQ] Entering invalid number in Number Field, JavaScritpException



nbuesing
6 Jan 2012, 8:52 AM
GXT 3.0.0-beta2

When I enter an invalid number in a number field, for example "3.4.5.6", instead of the the mark invalid actually getting called, it throws an exception.

Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): Object doesn't support this property or method
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
at com.google.gwt.dom.client.Node$.appendChild$(Node.java)
at com.sencha.gxt.widget.core.client.form.error.SideErrorHandler.markInvalid(SideErrorHandler.java:116)
at com.sencha.gxt.widget.core.client.form.Field.markInvalid(Field.java:446)
at com.sencha.gxt.widget.core.client.form.Field.markInvalid(Field.java:253)
at com.sencha.gxt.widget.core.client.form.Field.forceInvalid(Field.java:128)
at com.sencha.gxt.widget.core.client.form.NumberField.onCellParseError(NumberField.java:86)
at com.sencha.gxt.widget.core.client.form.ValueBaseField$1.onParseError(ValueBaseField.java:44)
at com.sencha.gxt.widget.core.client.event.ParseErrorEvent.dispatch(ParseErrorEvent.java:85)
at com.sencha.gxt.widget.core.client.event.ParseErrorEvent.dispatch(ParseErrorEvent.java:1)
at com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java:1)
at com.google.web.bindery.event.shared.EventBus.dispatchEvent(EventBus.java:40)
at com.google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193)
at com.google.web.bindery.event.shared.SimpleEventBus.fireEvent(SimpleEventBus.java:88)
at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:127)
at com.sencha.gxt.cell.core.client.AbstractEventInputCell.fireEvent(AbstractEventInputCell.java:41)
at com.sencha.gxt.cell.core.client.form.TriggerFieldCell.finishEditing(TriggerFieldCell.java:205)
at com.sencha.gxt.widget.core.client.form.Field.finishEditing(Field.java:205)
at com.sencha.gxt.widget.core.client.grid.editing.GridInlineEditing.onEnter(GridInlineEditing.java:283)

Colin Alworth
6 Jan 2012, 9:55 AM
I am unable to reproduce this at http://www.sencha.com/examples-dev/#ExamplePlace:formsexample or http://www.sencha.com/examples-dev/#ExamplePlace:basicbinding - can you offer a quick sample of how you are creating the number field so it causes this issue?

nbuesing
6 Jan 2012, 10:25 AM
Actually, something you reminded me from my other post and our custom BigDecimalPropertyEditor made me think that was the issue (even though it wasn't part of the stack trace, that GWT provided). It was in my parseString() method.

So, this is a non-issue, but rather I need need to do more investigation if I get an UmbrellaException; I would have expected a NumberFormatException from my BigDecimalPropertyEditor.

Colin Alworth
6 Jan 2012, 10:30 AM
I believe that all exceptions thrown by NumberPropertyEditor.parseString are ignored, to allow multiple ways of parsing an inputted value. If you want custom behavior in that area, consider directly overriding the parse(String) method, and throwing a ParseException to make the error visible.

Of course, if you are calling parseString(String) yourself, then you need to catch any exception that it emits.

pacmendoza
8 Aug 2013, 10:28 PM
Has this been resolved? I'm getting a similar error. Instead of a stacktrace, I get an error icon beside the field (which i'm expecting) but no error message is display.

I tried overridding onCellParseError to check if the error message is set and I can confirm that it is correct. I'm wondering why it is not being displayed.

The demo (3.0.0-rc2) is working just fine. What has changed since?

Using gxt 3.0.1.

Colin Alworth
9 Aug 2013, 6:22 AM
pacmendoza, no issue was ever filed as nbuesing discovered that it was likely an issue in his own code. Do you have a test case that demonstrates your issue?

pacmendoza
11 Aug 2013, 1:58 PM
Hi Colin, I just tried it again on the 3.0.1 examples and it is working fine. I'm still puzzled why I'm having this issue.

I'm using the UI binder approach, without any customisation. I noticed that I am using an HTML Panel parent container where the examples are using a vertical panel. Does this have any effect? I'm also not using any container and widget tags like in the example.
45293
Initially I used the NumberField of type BigDecimal but changed it to Integer to be closer to the example provided (i.e. age field) but I'm still getting the same issue. There is no stack trace, just an error icon with no message.

For my scenario, I just entered ... as input to the field and was expecting a validation error like below:
45294

Colin Alworth
12 Aug 2013, 2:17 PM
It is hard to say what could be causing your issue without a runnable code sample. The error tooltip is generated by the side error handler - if you are using different error support, something else might be happening instead.

Can you put together a class implementing EntryPoint that can be run on its own to demonstrate the issue?

pacmendoza
12 Aug 2013, 4:32 PM
This is a stripped down version of the code in question. I just extracted these from the code base. I have not run it in isolation.

Java file:


public class InvoiceFieldView implements IsWidget, EntryPoint {

private static final String TWO_DECIMAL_FORMAT = "0.00";

public static Binder uiBinder = GWT.create(Binder.class);

private VerticalPanel vp;

@UiField(provided = true)
NumberField<BigDecimal> invoiceCostTextField;

@Override
public void onModuleLoad() {
RootPanel.get().add(asWidget());
}

@Override
public Widget asWidget() {
invoiceCostTextField = new NumberField<BigDecimal>(new NumberPropertyEditor.BigDecimalPropertyEditor());
invoiceCostTextField.setSelectOnFocus(true);
invoiceCostTextField.setFormat(getFormat(TWO_DECIMAL_FORMAT));

vp = uiBinder.createAndBindUi(this);

return vp;
}

interface Binder extends UiBinder<VerticalPanel, InvoiceFieldView> {
}
}


UI binding:


<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:gwt='urn:import:com.google.gwt.user.client.ui'
xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form" >

<ui:style>
.container {
border: .1em solid #a9bfd3;
padding: .5em;
margin: 0.5em;
overflow: auto;
width: 76em;
background-color: white;
}

.quoted-invoice-cost-label {
font-weight: bold;
float: left;
margin: 0 2.75em;
}

.quoted-cost-input-field {
float: left;
margin: 0 2em .75em;
}

.float-left {
float: left;
}

</ui:style>

<gwt:HTMLPanel>
<div class="{style.container}">
<div class="{style.float-left}">
<div class="{style.float-left}">
<gwt:Label text="BigDecimal Field"
addStyleNames="{style.quoted-invoice-cost-label}"/>
<div style="clear:both"/>
<form:NumberField width="10em" ui:field="invoiceCostTextField"
addStyleNames="{style.quoted-cost-input-field}"/>
</div>
</div>
</div>
</gwt:HTMLPanel>
</ui:UiBinder>

Colin Alworth
13 Aug 2013, 1:07 PM
I have not run it in isolation.
I could try to run it, but if the bug doesn't occur, then where are we left? Verify that the bug still exists, and please document the steps you are using to reproduce this issue, expected and actual results, as well as the browser you are using.

pacmendoza
15 Aug 2013, 7:52 PM
I have tried running the application in isolation and found that the error is now being rendered but the field is broken after I focus in and out of the field after the error.

I have deployed it in Google so you can try it: http://pacmapp.appspot.com

The HTML Panel seems to be causing this error. When I replaced it with a vertical panel, like in the example, it works fine.

Let me know if you can reproduce the issue or if you need more information.

Colin Alworth
23 Aug 2013, 8:35 AM
Neither HTMLPanel nor VerticalPanel are GXT classes - if they are somehow causing this, you might want to see about reporting this to GWT instead.

That said, when I run the sample linked, I cannot reproduce this. Steps I followed (based on the original report, since you didn't supply anything specific):
* Open the link
* Enter invalid text such as 1.2.3.4.5 into the field
* Click out of the field
* Expect that the field is blank (clear on parse error seems to be enabled, the default) and is marked invalid
* Expect that an error icon is visible
* Hover over the error icon
* Expect a tooltip with contents like "1.2.3.4.5 is not a valid number"

45506

pacmendoza
1 Sep 2013, 4:04 PM
Hi Colin, you are right. Perhaps this is a GWT issue after all.

The error message not displaying in our app may be something specific to our application. We are mixing GXT 2.x and GXT 3 components in the same page. This is something I cannot easily isolate in the starter project I shared. I cannot even reproduce it in the starter project. I do not know if this is caused by GWT or GXT or the combination of GXT versions or project configuration or something else. It is unfortunate that this post does not provide you with enough information to reproduce this issue on your side. Therefore, I will no longer pursue this.

By the way, after the error message is displayed, if you tab in and out of the field, you will notice that the field size changes.
45642
I appreciate your time to look into this. Thank you very much.

Colin Alworth
9 Sep 2013, 7:19 AM
I can definitly see the issue with tabbing in/out of the field, but I can't see what other code might play into that without a runnable test sample that I can reproduce locally.

I'm going to mark this as needs info - if you can put together a real test case that we can run, we can see about reopening it.

pacmendoza
9 Sep 2013, 1:35 PM
My issue now is about the field being resized and is no longer about the error message not being displayed. Is this still relevant to this post?

Do you need the code and ui binding file I used for the sample app?



<?xml version="1.0" encoding="UTF-8"?>
<!--
When updating your version of GWT, you should also update this DTD reference,
so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN"
"http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module rename-to='gxt_project'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>

<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<!-- <inherits name='com.google.gwt.user.theme.clean.Clean'/> -->
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->

<!-- Other module inherits -->
<inherits name='com.sencha.gxt.ui.GXT' />

<!-- GXT Stylesheet -->
<stylesheet src="reset.css" />

<!-- Specify the app entry point class. -->
<!-- <entry-point class='com.sensha.gxt.project.client.GXT_Project'/> -->
<entry-point class='com.sensha.gxt.project.client.BigDecimalNumberFieldHtmlPanel'/>

<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>

</module>




package com.sensha.gxt.project.client;

import java.math.BigDecimal;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.shared.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.widget.core.client.form.NumberField;
import com.sencha.gxt.widget.core.client.form.NumberPropertyEditor;

public class BigDecimalNumberFieldHtmlPanel implements IsWidget, EntryPoint {

interface MyUiBinder extends UiBinder<HTMLPanel, BigDecimalNumberFieldHtmlPanel> {

}

private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

private HTMLPanel panel;

@UiField(provided = true)
NumberField<BigDecimal> field;

public Widget asWidget() {
if (panel == null) {
field = new NumberField<BigDecimal>(new NumberPropertyEditor.BigDecimalPropertyEditor());
panel = uiBinder.createAndBindUi(this);
}
return panel;
}

public void onModuleLoad() {
RootPanel.get().add(asWidget());
}

}




<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:gwt='urn:import:com.google.gwt.user.client.ui'
xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form" >

<ui:style>
.container {
border: .1em solid #a9bfd3;
padding: .5em;
margin: 0.5em;
overflow: auto;
width: 76em;
background-color: white;
}

.quoted-invoice-cost-label {
font-weight: bold;
float: left;
margin: 0 2.75em;
}

.quoted-cost-input-field {
float: left;
margin: 0 2em .75em;
}

.float-left {
float: left;
}

</ui:style>

<gwt:HTMLPanel>
<div class="{style.container}">
<div class="{style.float-left}">
<div class="{style.float-left}">
<gwt:Label text="BigDecimal Field"
addStyleNames="{style.quoted-invoice-cost-label}"/>
<div style="clear:both"/>
<form:NumberField width="10em" ui:field="field"
addStyleNames="{style.quoted-cost-input-field}"/>
</div>
</div>
</div>
</gwt:HTMLPanel>
</ui:UiBinder>


You should be able to run the code above. Let me know if you need more information.