Form in Window

[Downlord]

Hello!

It's really frustrating.. I want to create a login form that's nested in a window. Same like the mail-example, for which the source code unfortunately isn't available.

When I add a FormPanel to the window, i got some nasty results. When adding the fields to the window, they are displayed, but not buttons. When placing in the FormPanel, the fields aren't visible, but the button is.

I don't want to spend hours to get that, and I couldn't found any threads or docs about that.

Lets take the following code as initial position


public void onModuleLoad() {

/* The login window */
Window window = new Window();
window.setLayout(new FormLayout(LabelAlign.LEFT));
window.setHeading("User Login");
window.setSize(300, 150);
window.setShadow(true);
window.setFrame(true);
window.setClosable(false);
window.show();

/* Form objects */
TextField<String> fieldLoginName = new TextField<String>();
fieldLoginName.setFieldLabel("Login Name");
fieldLoginName.setAllowBlank(false);
fieldLoginName.setAutoWidth(true);

TextField<String> fieldPassword = new TextField<String>();
fieldPassword.setFieldLabel("Password");
fieldPassword.setAllowBlank(false);
fieldPassword.setAutoWidth(true);
fieldPassword.setPassword(true);

window.add(fieldLoginName);
window.add(fieldPassword);
}

ty for helping

[sven]

As you ordered your code, you need to call


window.layout()

But try this better ordered code:




public void onModuleLoad() {

/* The login window */
Window window = new Window();
window.setLayout(new FormLayout(LabelAlign.LEFT));
window.setHeading("User Login");
window.setSize(300, 150);
window.setShadow(true);
window.setFrame(true);
window.setClosable(false);


/* Form objects */
TextField<String> fieldLoginName = new TextField<String>();
fieldLoginName.setFieldLabel("Login Name");
fieldLoginName.setAllowBlank(false);
fieldLoginName.setAutoWidth(true);

TextField<String> fieldPassword = new TextField<String>();
fieldPassword.setFieldLabel("Password");
fieldPassword.setAllowBlank(false);
fieldPassword.setAutoWidth(true);
fieldPassword.setPassword(true);

window.add(fieldLoginName);
window.add(fieldPassword);
window.show();
}

[EagleEye666666]

Hello!

It's really frustrating.. I want to create a login form that's nested in a window. Same like the mail-example, for which the source code unfortunately isn't available.

When I add a FormPanel to the window, i got some nasty results. When adding the fields to the window, they are displayed, but not buttons. When placing in the FormPanel, the fields aren't visible, but the button is.

I don't want to spend hours to get that, and I couldn't found any threads or docs about that.

Lets take the following code as initial position


public void onModuleLoad() {

/* The login window */
Window window = new Window();
window.setLayout(new FormLayout(LabelAlign.LEFT));
window.setHeading("User Login");
window.setSize(300, 150);
window.setShadow(true);
window.setFrame(true);
window.setClosable(false);
window.show();

/* Form objects */
TextField<String> fieldLoginName = new TextField<String>();
fieldLoginName.setFieldLabel("Login Name");
fieldLoginName.setAllowBlank(false);
fieldLoginName.setAutoWidth(true);

TextField<String> fieldPassword = new TextField<String>();
fieldPassword.setFieldLabel("Password");
fieldPassword.setAllowBlank(false);
fieldPassword.setAutoWidth(true);
fieldPassword.setPassword(true);

window.add(fieldLoginName);
window.add(fieldPassword);
}

ty for helping

like sven showed, first you need to fill the window with all the stuff and last thing what u are doing is to show it.

And there are ALL examples as Source code, when u are downloading GXT you are already downloading all example code :)

I really recommend to add this source code as projects within your workspace, like this you can all the time directly check the example code and work on your stuff, in connection with using the Example Explorer in the web.

[Downlord]

Shame on me, i only had a look in the online content, not in the zip file :">
By placing window.show at the end of the whole thing, adding a button works now :-)

Now I need the whole thing in a form that's not visible (heading etc.) but the mail example should help me to get that :-)

Ty for help

[sven]

http://extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/ContentPanel.html#setHeaderVisible(boolean)

[Downlord]

Ok, i got the form in the window, the fields and the buttons and it works fine so far :-)

But it should be possible to submit the form by pressing enter. I'm sure the solution is anywhere out there, but I only found ext-js examples.

Adding a KeyListener for each formfield works, BUT 1. I don't know if its the best solution? 2. I get a nasty double-ding (sound) when pressing enter, which source i can't find out...

lets have a look


public void onModuleLoad() {

/* The login window */
Window window = new Window();
window.setLayout(new FormLayout(LabelAlign.LEFT));
window.setHeading("User Login");
window.setSize(300, 150);
window.setShadow(true);
window.setFrame(true);
window.setClosable(false);

/* Login form */
final FormPanel loginForm = new FormPanel();
loginForm.setHeaderVisible(false);
loginForm.setBodyBorder(false);
loginForm.setBorders(false);
loginForm.setAutoWidth(true);
loginForm.setAutoHeight(true);

/* Form objects */
KeyListener enterListener = new KeyListener() {
public void componentKeyUp(ComponentEvent ce) {
if(ce.getKeyCode() == 13)
loginForm.submit();
}
};

TextField<String> fieldLoginName = new TextField<String>();
fieldLoginName.setFieldLabel("Login Name");
fieldLoginName.setAllowBlank(false);
fieldLoginName.setAutoWidth(true);
fieldLoginName.addKeyListener(enterListener);

TextField<String> fieldPassword = new TextField<String>();
fieldPassword.setFieldLabel("Password");
fieldPassword.setAllowBlank(false);
fieldPassword.setAutoWidth(true);
fieldPassword.setPassword(true);
fieldLoginName.addKeyListener(enterListener);

Button submitButton = new Button("Login", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent be) {
loginForm.submit();
}
});

loginForm.add(fieldLoginName);
loginForm.add(fieldPassword);
loginForm.add(submitButton);

window.add(loginForm);
window.show();

RootPanel.get().add(window);
}

How would you solve it? The mail example uses a keylistener, too, and runs onSubmit() which does... i don't know what.

[EagleEye666666]

It is up to you to fill the form submit with logic... what u want to do etc....
loggin in out ... sth...

the form submit depends on how your underlaying server is looking... the mail example login is just a fake login... which forces to type in sth...

you can submit a form in 2 ways:

sending requst via ActionURL just set
manuelly invoking some RPC calls by using a form listener


via URL:

form = new FormPanel();
form.setAction("HERE UR SERVER URL or other recipient of your form request");
form.setEncoding(Encoding.MULTIPART); // << example for fileupload ...
form.setMethod(Method.POST); // << POST or GET
// to listen for a response if the submit was successfully for example:
form.addListener(Events.Submit, new Listener<FormEvent>(){
public void handleEvent(FormEvent be) {
GWT.log(be.resultHtml,null); // << contains the response
}
});

and in case of very own doing for the form.... just add the listener and perform your RPC call there...

[Downlord]

ty for that, but my question was how to get the enter key to submit the form :-)

[EagleEye666666]

ty for that, but my question was how to get the enter key to submit the form :-)

uhm when

Window window = new Window(){

protected void onKeyPress(WindowEvent we) {
if (we.getKeyCode()== KeyboardListener.KEY_ENTER) {
onSubmit();
}
super.onKeyPress(we);
}

};

in onSubmit() you should check if the form is valid.

like this is have done it. but iam creating my own widget inherit of the Dialog class (which is a better class for ur case i guess.)