PDA

View Full Version : [OPEN] [FIXED] Window blocks and Form label/field aligns



gslender
31 May 2008, 1:48 AM
The following snippet shows two (2) bugs

1) window blocks and stops UI in the login form. Once you show the window, and close it, the form is no longer visible

2) login form fields and labels are not aligned correctly


package com.mycompany.gxt.client;

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.KeyNav;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.Field;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.Validator;
import com.extjs.gxt.ui.client.widget.form.FormPanel.LabelAlign;
import com.extjs.gxt.ui.client.widget.layout.CenterLayout;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.Window;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class ModalCloseWindowTest implements EntryPoint {

public void onModuleLoad() {

ContentPanel cp = new ContentPanel();
cp.setHeading("Test");
cp.setSize(600,400);
Button test = new Button("test");
SelectionListener listener = new SelectionListener()
{
public void componentSelected(ComponentEvent be)
{
RegisterWindow rw = new RegisterWindow();
rw.show();
}
};
test.removeAllListeners();
test.addSelectionListener(listener);
cp.add(test);

LoginContainer lc = new LoginContainer();
cp.add(lc);

final Viewport vp = new Viewport();
vp.add(cp);
vp.layout();

RootPanel.get().add(vp);

}

public class RegisterWindow extends Window
{
public RegisterWindow()
{
super();
setClosable(true);
setModal(true);
setHeading("Registration");
setWidth(500);
setLayout(new FillLayout());


final FormPanel panel = new FormPanel();
panel.setHeaderVisible(false);
panel.setFieldWidth(300);
panel.setLabelWidth(100);
panel.setLabelAlign(LabelAlign.RIGHT);
panel.setButtonAlign(HorizontalAlignment.RIGHT);

final TextField firstnameTxtFld = new TextField();
firstnameTxtFld.setFieldLabel("First Name");
firstnameTxtFld.setEmptyText("Your first name");
firstnameTxtFld.setAllowBlank(false);
firstnameTxtFld.setSelectOnFocus(true);
panel.add(firstnameTxtFld);

final TextField lastnameTxtFld = new TextField();
lastnameTxtFld.setFieldLabel("Last Name");
lastnameTxtFld.setEmptyText("Your last name");
lastnameTxtFld.setAllowBlank(false);
lastnameTxtFld.setSelectOnFocus(true);
panel.add(lastnameTxtFld);

final TextField emailTxtFld = new TextField();
emailTxtFld.setFieldLabel("Email");
emailTxtFld.setEmptyText("A valid email address");
emailTxtFld.setAllowBlank(false);
emailTxtFld.setSelectOnFocus(true);
panel.add(emailTxtFld);

final TextField usernameTxtFld = new TextField();
usernameTxtFld.setFieldLabel("Username");
usernameTxtFld.setEmptyText("Provide a username");
usernameTxtFld.setAllowBlank(false);
usernameTxtFld.setSelectOnFocus(true);
panel.add(usernameTxtFld);

final TextField pwd1TxtFld = new TextField();
pwd1TxtFld.setPassword(true);
pwd1TxtFld.setAllowBlank(false);
pwd1TxtFld.setFieldLabel("Password");
pwd1TxtFld.setSelectOnFocus(true);
panel.add(pwd1TxtFld);

final TextField pwd2TxtFld = new TextField();
pwd2TxtFld.setPassword(true);
pwd2TxtFld.setFieldLabel("Password (again)");
pwd2TxtFld.setSelectOnFocus(true);
pwd2TxtFld.setValidator(new Validator(){
public String validate(Field field, String value) {
if (!value.equals((String)pwd1TxtFld.getValue())) return "Passwords do not match";
return null;
}});
panel.add(pwd2TxtFld);

final TextArea termsTxtArea = new TextArea();
termsTxtArea.setFieldLabel("Terms & <br>Conditions");
termsTxtArea.setValue("Standard Terms and Conditions\n\nPLEASE READ VERY CAREFULLY THESE TERMS AND CONDITIONS AND THE WEBSITE BEFORE REGISTERING. PARTICIPATION INDICATES THAT YOU ACCEPT THESE TERMS AND CONDITIONS. IF YOU DO NOT ACCEPT THESE TERMS AND CONDITIONS, PLEASE DO NOT REGISTER FOR OR PARTICIPATE IN THIS ONLINE PROGRAM.");
termsTxtArea.setReadOnly(true);
termsTxtArea.setHeight(200);
panel.add(termsTxtArea);

final CheckBox accepttermsChkBox = new CheckBox();
accepttermsChkBox.setFieldLabel("Agreement");
accepttermsChkBox.setBoxLabel("I accept the Terms & Conditions above");
panel.add(accepttermsChkBox);

final Button registerBtn = new Button("Register");
panel.addButton(registerBtn);

registerBtn.addSelectionListener(new SelectionListener()
{
public void componentSelected(ComponentEvent ce)
{
Boolean value = (Boolean)accepttermsChkBox.getValue();

}
});

add(panel);
}
}

public class LoginContainer extends LayoutContainer
{
public LoginContainer()
{
super();
setLayout(new CenterLayout());

final FormPanel panel = new FormPanel();
panel.setHeading("Login");
panel.setFrame(true);
panel.setFieldWidth(100);
panel.setLabelWidth(50);
panel.setLabelAlign(LabelAlign.RIGHT);
panel.setButtonAlign(HorizontalAlignment.RIGHT);
panel.setWidth(270);
panel.setStyleAttribute("padding", "20");

final TextField userTxtFld = new TextField();
userTxtFld.setFieldLabel("Username");
userTxtFld.setEmptyText("Username");
userTxtFld.setAllowBlank(false);
userTxtFld.setSelectOnFocus(true);
panel.add(userTxtFld);

final TextField pwdTxtFld = new TextField();
pwdTxtFld.setPassword(true);
pwdTxtFld.setFieldLabel("Password");
panel.add(pwdTxtFld);

final Button loginBtn = new Button("Login");
panel.addButton(loginBtn);

add(panel);

new KeyNav(panel) {
@Override
public void onEnter(ComponentEvent ce)
{
loginBtn.fireEvent(Events.Select, new ButtonEvent(loginBtn));
}
};
}
}
}

darrellmeyer
31 May 2008, 4:41 PM
1) window blocks and stops UI in the login form. Once you show the window, and close it, the form is no longer visible
Fix is in SVN.

2) login form fields and labels are not aligned correctly
You need to increase your label width.