how to show error message in mail LoginDialog example

[gsidhu007]

I want to show error message to the user once user hits the login button and login is validated against the server. If server returns an invalid user then I want to display an error message underneath the password and above the reset/login buttons so that user knows what went wrong.

I tried adding another label field which I hide initially and once login fails then I show it and then I set the fieldLabel of the TextField. But, problem is that field label is aligned to the left along with the other labels instead of taking the entire space including the label and text field area.

Also, How can I make it to appear red and with a different font.

Here are the code snipets:

1. Added following to the constructor of LoginDialog to add errorMessage field.


errorMessage = new LabelField();
errorMessage.hide();
add(errorMessage);

2. Added following to show the error label once login request fails from server:


buttonBar.getStatusBar().clear();
buttonBar.enable();


userName.focus();
errorMessage.show();
errorMessage.setFieldLabel(message);
errorMessage.setLabelStyle("font-weight:bold;color:red");

[alka_jan1980]

I am alson trying to create the same login page. Can you help me?

[skanberg]

I have done something like that:

This code is used in a Dialog.



LayoutContainer panel = new LayoutContainer();
FormLayout layout = new FormLayout();
layout.setPadding(20);
panel.setLayout(layout);

username = new TextField<String>();
username.setFieldLabel("Username");
panel.add(username);

password = new TextField<String>();
password.setPassword(true);
password.setFieldLabel("Password");
panel.add(password);

errorPanel = new LayoutContainer();
Text text = new Text("Invalid username/password");
text.setStyleName("error-label");
errorPanel.add(text);
errorPanel.setVisible(false);

AdapterField adapter = new AdapterField(errorPanel);
adapter.setHideLabel(true);
panel.add(adapter);

add(panel);

buttonBar = new StatusButtonBar();
setButtonBar(buttonBar);


When you need to display the error message use:

errorPanel.setVisible(true);

The style for the error panel:



.error-label {
color: red;
}

[alka_jan1980]

can you send me the whole sample code as attachement. i want to get started quickly and understand the concept.

[skanberg]

can you send me the whole sample code as attachement. i want to get started quickly and understand the concept.

No, but take a look at the mail sample application.

[alka_jan1980]

i saw mail sample application but not able to see the sources. It just ask for username/password which i am giving <admin/admin> after that it runs the application. How to get access to the sources to have some idea.

[alka_jan1980]

I am just looking for login page demo .... just to get familarity with the flow and components. I wanted RPC mechanism to be used for checking data transfer.

[skanberg]

i saw mail sample application but not able to see the sources. It just ask for username/password which i am giving <admin/admin> after that it runs the application. How to get access to the sources to have some idea.

The source are available in the GXT package in the samples/mail directory. If you want to learn RPC Google has great tutorials: http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=GettingStartedRPC

/Fredrik

[gsidhu007]

The following code worked perfectly for me. Thanks a lot!


I have done something like that:

This code is used in a Dialog.



LayoutContainer panel = new LayoutContainer();
FormLayout layout = new FormLayout();
layout.setPadding(20);
panel.setLayout(layout);

username = new TextField<String>();
username.setFieldLabel("Username");
panel.add(username);

password = new TextField<String>();
password.setPassword(true);
password.setFieldLabel("Password");
panel.add(password);

errorPanel = new LayoutContainer();
Text text = new Text("Invalid username/password");
text.setStyleName("error-label");
errorPanel.add(text);
errorPanel.setVisible(false);

AdapterField adapter = new AdapterField(errorPanel);
adapter.setHideLabel(true);
panel.add(adapter);

add(panel);

buttonBar = new StatusButtonBar();
setButtonBar(buttonBar);


When you need to display the error message use:

errorPanel.setVisible(true);

The style for the error panel:



.error-label {
color: red;
}