02_good_constructor.js

constructor() {
    this.appendChild(this.createLoginContainer());
    this.addEventHandlers();
}

private api.ui.button.Button createLoginButton() {
    var button = new api.ui.button.Button();
    button.addClass("login-button");
    button.hide();

    return button;
}

private api.ui.text.TextInput createTextInput(cls: string, message: string) {
    var input = new api.ui.text.TextInput(cls);
    input.setPlaceholder(_i18n(message));

    return input;
}

private api.dom.DivEl createLoginContainer() {
    var div = new api.dom.DivEl("login-container");

    this.userIdInput = this.createTextInput('input-view', 'userid or e-mail');
    this.passwordInput = this.createTextInput('input-view', 'password');

    div.appendChild(this.userIdInput);
    div.appendChild(this.passwordInput);
    div.appendChild(this.createLoginButton());

    return div;
}

private void addEventHandlers() {
    this.onShown((event) => {
        this.userIdInput.giveFocus();
    });

    this.onSubmit((event) => {
        if (this.userIdInput.getValue() && this.passwordInput.getValue()) {
            this.submitForm();
        }
    });
}