ZK's onClick$loginButton throws NullPointerException

Question

I am trying to capture the login info inputted by user. But the button's on-click handler throws a NullPointerException. Not sure what am I doing incorrectly here.

login.zul

<?page title="Login Test" contentType="text/html;charset=UTF-8"?>
<zk>
    <style>
        body{ background:url('images/login-pg-bg.png')no-repeat center
        center fixed; }
    </style>
    <window id="window" border="normal" width="320px"
        apply="foo.FooComposer" position="center"
        mode="overlapped" focus="true">
        <!-- Content Division element to display custom messages-->
        <div height="30px" align="center">
            <label
                style="color:#FF0000;font-weight:bold;font-family:Verdana;font-size: 14px;"
                id="msg">

            </label>
        </div>

        <!-- USERNAME -->
        <label value="User Name"
            style="color:#606060;font-weight:bold;font-family:Verdana; font-size: 14px;">
        </label>
        <textbox id="username" value="" constraint="no empty" />

        <!-- PASSWORD -->
        <label value="Password"
            style="color:#606060;font-weight:bold;font-family:Verdana; font-size: 14px;">
        </label>
        <textbox id="password" value="" type="password"
            constraint="no empty" />
        <separator bar="false" />
        <separator bar="false" />

        <!-- LOGIN BUTTON -->
        <box orient="horizontal">
            <button id="register" label="Register"
                style="color:#3333FF;font-weight:bold;font-family:Verdana; font-size: 14px;">
            </button>
            <button id="loginButton" label="Login"
                style="color:#3333FF;font-weight:bold;font-family:Verdana; font-size: 14px;">
            </button>
        </box>
        <separator bar="false" />
        <separator bar="true" />

        <!-- COPYRIGHT INFO -->
        <div align="center">
            <!-- 
                <label
                style="color:#3333FF;font-weight:bold;font-family:Verdana; font-size: 14px;"
                id="copyright" value="Copyright © 2020 COPYRIGHT TEXT" />
            -->
        </div>
    </window>
</zk>

FooComposer:

package foo;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Label;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Window;


public class FooComposer extends GenericForwardComposer<Component> {

    private static final long serialVersionUID = 1218526917089196484L;

    /** 1. The login window. */
    private Window window;

    /** 2. The login button. */
    @SuppressWarnings("unused")
    private static Button loginButton;

    /** 3. The custom message to display */
    public static Label msg;

    /** 4. The username. */
    private static Textbox username;

    /** 5. The password. */
    private static Textbox password;

    /**
     * CODE TO EXECUTE WHEN THE LOGIN WINDOW IS CREATED
     */
    public void onCreate$window() {
        System.out.println("INSIDE FOOCOMPOSER'S ONCREATE..");
        window.doOverlapped();
        window.setPosition("center");
        window.setSizable(true);
    }

    /**
     * CODE TO EXECUTE WHEN THE LOGIN/SIGN-IN BUTTON IS CLICKED
     *
     * @throws Exception the exception
     */
    public void onClick$loginButton() throws Exception {
        System.out.println("SIGN IN BUTTON CLICKED!");
         System.out.println("==>" + username.getText()); // throws java.lang.NullPointerException
        //System.out.println("==>" + password.getText());
        //System.out.println(System.getProperty(username.getValue()));
    }
}

I get a NullPointerException when I input something on the username and the password field and click the Login button.

Line which throws the exception:

System.out.println(username.getText());

EDIT:

• Code to ZUL Page
• Code to Composer

Answer 1

Make your member variables in FooComposer non-static. Please check this fiddle.