View Full Version : ext.ux.pwd.PasswordField

28 Jun 2008, 10:10 PM
UPDATE 05/12/2008 : Fixed validate onBlur bug
UPDATE 25/10/2008 : Fixed set value bug
UPDATE 18/10/2008 : Fixed resize bug with formdata 100%
UPDATE 1/7/2008 : Added to source/download : Apache License, Version 2.0

Another User Extension contribution - PasswordField (see screen shot attached). Credit goes to http://extjs.com/forum/showthread.php?t=20417 for providing the concept and idea - though not much was shared other than the images.

Add the PasswordField.jar to your lib and the following line to your gwt.xml

<inherits name='ext.ux.pwd.PasswordField'/>
The code snip below shows how to use it within a normal FormPanel or FormLayout.

Grant :D

final PasswordField pw1PwdFld = new PasswordField();
pw1PwdFld.setEmptyText("Enter a strong password");
pw1PwdFld.setFieldLabel("Secure Password");

30 Jun 2008, 8:30 AM
Nice work. So If I wanted to use this, what type of licensing is this?

30 Jun 2008, 1:40 PM
Oops, I've updated the download and the source has Apache License, Version 2.0...

17 Oct 2008, 4:55 PM
updated to fix a formdata 100% resize bug

27 Oct 2008, 1:07 PM
fixed a setvalue bug that correctly clears invalid state

28 Oct 2008, 9:02 AM
Nicely done! Thanks for sharing ^.^

I did notice that if you start a password with an upper-case letter, using Shift, then type in a lower-case character it will throw up that CAPSLOCK mask.

28 Oct 2008, 1:13 PM
detecting capslock is a fudge as there is no actual way to test if the capslocks key is down - as such it just checks to see if the new section entered entered are all upper without shift being pressed and then shows the CAPSLOCK! mask...

All just a trick really and perhaps there is some logic issues... :-?

29 Oct 2008, 3:10 AM
detecting capslock is a fudge as there is no actual way to test if the capslocks key is down - as such it just checks to see if the new section entered entered are all upper without shift being pressed and then shows the CAPSLOCK! mask...

All just a trick really and perhaps there is some logic issues... :-?

The mask remains if you type a UpperCase letter and a lowercase after first one. For example...

Password fires the mask and it remains active
pAsSwOrD don't fires the mask

12 Nov 2008, 11:04 AM
nice job(just looked at the pics and idea), iam gonna think to implement this. :)


13 Nov 2008, 10:28 PM
I was developing some small application using GWT-Ext and was not aware of this PasswordField but now I got to know about it.Please can you tell me where do I need to copy password.jar file I mean which folder???:)

14 Nov 2008, 1:13 AM
I was developing some small application using GWT-Ext and was not aware of this PasswordField but now I got to know about it.Please can you tell me where do I need to copy password.jar file I mean which folder???:)

lib folder of your application + adding to the classpath.

14 Nov 2008, 1:39 AM
hard to say, what folders do you have?

17 Nov 2008, 3:36 AM
Thanks a lot for your reply I have added the password.jar files to my Web Apps Library now its working fine.Also when I was working on the same I got another way to make the password field but don't know whether its correct or not but its working here is what I have done :

final TextField passwordField = new TextField("Password","password",130);

this works well with my application without adding password.jar file to my web apps directory a simple and yet easy solution for password....:):):)

19 Nov 2008, 4:50 AM
gslender, do you think its possible to add this PasswordField only as informative? Not a mandatory condition.

I dunno if I explain right... lets say that I set a STRONG password as PasswordField level. If the user types a lower password the field becomes invalid. I would like to be able to allow for example LOW level passwords and let the bar have a max to STRONG and just use the bar as informative.

19 Nov 2008, 6:20 AM
sure, doesn't it do that if you set autovalidate to false and don't call isvalid? I think it only does validation checks if you ask it to... if I'm wrong, let me know and I'll fix it to make sure it does work... :D:D

19 Nov 2008, 11:36 PM
Maybe its my implementation but I try something like this and continues doing the validation:

password = new PasswordField();

4 Dec 2008, 12:26 AM
Seems that the field validates always the Strength of the password. I don't see a method to skip the "forceInvalid" and make the password field as only informative.

5 Dec 2008, 1:08 AM
Latest 5/12 release contains a fix for setValidateOnBlur(Boolean). When set false, it will ignore validate and make password informative.

Sorry for taking so long to fix this. :">

5 Dec 2008, 1:16 AM
It's not needed to say sorry :P I'm really grateful for all the work that you all are doing with GXT ^^

I'll test right now and I'll give feedback.

Thanks for the work.

5 Dec 2008, 2:15 AM
Its not working for me. I have been having a look on the source code and I see this piece:

public boolean isValid() {
if (disabled) {
return true;
return validateValue(getRawValue());
}I suppose that here is the fix in order to make the field be informative but as my IDE says the disabled field means that the field its disabled. How does this fix the enableValidateOnBlur(false) thing?

Maybe u wanted to use the field this.validateOnBlur from the Field class?

5 Dec 2008, 2:23 AM
Ok, I guess you are calling isValid on the form or the field and its doing the right thing, which is to validate. So what you really want is a never validate option - which doesn't exist.

I was only fixing the validate on blur problem when isValid wasn't being called (ie even when not calling validate, it would validate).

Have I summerized it correctly? :-?:-?

If so, I'll proceed and update it right now and add a setAllowScoreFail(boolean) which, when set to true, should do what you need and allow the pwd fld to never invalidate even if the pwd scores below the allowed values...

Sounds good ?

5 Dec 2008, 2:42 AM
Hmmm, thinking in what you say I see that its true that my app have a bad code that is the call of validate on this passwordField (while it should only validate the confirmPassword).

I'll change this option and see what its happening.

About the setAllowScoreFail(boolean) I don't know if is an option needed for other ones. Maybe is usefull thinking in that if someone adds a "informative" PasswordField into a FormPanel and then uses the method FormPanel.isValid() the PasswordField isValid will be called.

12 Dec 2008, 4:33 AM
I guess what u guess are talking about :D a confirm field. connected to the password field.

I am using your nice widget already.

Some additional feature would be to extend this field with and extra field to let the user retype the password set via a flag attribute and builtin validator. Just some idea.

final TextField<String> retype = new TextField<String>();
retype.setValidator(new Validator<String, Field<String>>(){
public String validate(Field<String> field, String value) {
if(pwdfld.getValue().equals(value)) // pwdfld = your Password Textfield
return null;
return "Value do not match the password!"; // I know bad english :D

I do know it is more than jut one field and than there can be problems to customize the layout of this 2 fields.

It just came to my mind and iam using such field extra.

20 Dec 2008, 11:11 AM
I have problem with the PasswordField you should also overwrite the setValue() and getValue() methods...

Cuz the FormBinding is not working...
The field is not getting updated. :(

Code of the Formbinding method:

* Updates the field's value with the model value.
public void updateField() {
Object val = model.get(property);
if (convertor != null) {
val = convertor.convertModelValue(val);

EDIT: i have overwritten these setValue/getValue.
It is still not working the binding to that field. Iam trying to find out why.

EDIT2: ok thinking about it, problems were this set/get for the Value... but also for the binding the getName/setName which is used to bind the property. I overwrote them as well... BUT the real problem (i think) is the EventListener of the FormBinding i will have to manually bind it... and use your getInputField() method right? This listener listen on the Change event of the field.

* Creates a new binding instance.
* @param field the bound field for the binding
public FieldBinding(Field field, String property) {
this.field = field;
this.property = property;

changeListener = new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {

modelListener = new ChangeListener() {
public void modelChanged(ChangeEvent event) {
if (event.type == ChangeEventSource.Update) onModelChange((PropertyChangeEvent) event);

But the big problem is the change event the Change Event of the PasswordField Component will never happen... so the FormBinding does not work.

Edit3: ok solved, i had to add costum binding and use this inputfield method

binding = new FormBinding(form,true);
binding.addFieldBinding(new FieldBinding(form.getPassword().getInputField(),"password"));

than the overwriting of the set/getValue and set/getName arent not necessary.


Sorry for confusing :D

3 Jan 2009, 4:00 PM
Hi gslender,

I was having an issue with the regex in this in GXT 1.2.1 and GWT 1.5.3 so I changed it to Javascript compatible regex.

Not sure if anyone else is or will have issues, but this is what worked for me:

boolean lowletters = false;
if (value.matches("^.*[a-z].*$")) { // at least one lower case
// letter
score += 2;
lowletters = true;
boolean upletters = false;
if (value.matches("^.*[A-Z].*$")) { // at least one upper case
// letter
score += 5;
upletters = true;

boolean numbers = false;
if (value.matches("^.*[0-9].*$")) { // at least one number
score += 5;
numbers = true;

boolean specials = false;
if (value.matches("^.*[-!\\\"#$%&'()*+,./:;<=>[email protected]\\[\\]\\^_`{|\\\\}~].*$")) { // at least one of
// -!"#$%&'()*+,./:;<=>[email protected][]^_`{|\}~
score += 5;
specials = true;

3 Jan 2009, 7:56 PM
Mmm, so I wonder which Regex is supposed to work?

It seems odd that Java regex is not the same outcome in GWT.. I know its target is Javascript, but I would have thought Google would have handled the Regex differences - does anyone know for sure what is supposed to happen in Java vs GWT etc...

3 Jan 2009, 8:08 PM
Some of the reading I did to pinpoint this stated
Since your java
source is churned into javascript by gwt, a regex string literal in
your source code will become a regex string literal -in javascript-. I didn't dig much further into it after that...


3 Jan 2009, 9:19 PM
true - but did you also read this... !!

...and the GWTShell executes your *Java* code, so the regexps have to
be Java-regexp-compatible for your app to work in Hosted Mode.

In a few words:
- if you use JavaScript-only regexp constructs, your app will fail in
Hosted Mode, so developping and debugging will become a pain
- if you use Java-only regexp constructs, your app will run in Hosted
Mode but will fail in "web mode"

So you should base your developments on the JavaScript regexp syntax;
and if it fails in Hosted Mode, then find an alternate that's still
JavaScript-compaible and happens to also be Java-compatible. If you
base your devs on the Java regexp syntax, you'll only notice the
incompatibilities when testing in web mode, which generally happen
late in the development process...

So not really the simplest solution isn't it?

13 Jan 2009, 7:26 AM
bad class file: C:\Program Files\Google Web Toolkit\PasswordField\PasswordField.jar(ext/ux/pwd/client/PasswordField.class)
class file has wrong version 50.0, should be 49.0
Please remove or make sure it appears in the correct subdirectory of the classpath.
import ext.ux.pwd.client.PasswordField;
1 error

I'm using Netbeans and gxt1.2.1 with gwt1.5.3

I added the <inherits name='ext.ux.pwd.PasswordField'/>

and the lib! I'm a bit lost can someone help please?

13 Jan 2009, 7:32 PM
this might be due to the version of the JVM/JDK - you are using v5.x and the lib was built using v6.x

I'll try and rebuild for v5.x and repost

11 Feb 2009, 1:58 AM
this might be due to the version of the JVM/JDK - you are using v5.x and the lib was built using v6.x

I'll try and rebuild for v5.x and repost

I had to upgrade to v6.x It Rocks!! Thanks man for this lovely option.

Best regards