LoginForm

First of all,

great work! guys. I love Vaadin. I am a java programmer with almost no knowledge of java script. I have been able to build a web application with Vaadin within just two weeks!

thanks for your work.

now, I’m having trouble customizing the look of LoginForm. It doesn’t seem to behave like the other UI components.

Can someone show me some example code how to put a background image on the LoginForm?

THanks.

Anybody willing to help me on this? or at least point me to the right direction?

LoginForm is (unfortunately) an exception to clean separation of web from UI API:s in Vaadin. It kind of goes back to traditional “web 1.0” in order to help the browsers to recognize and offer to remember the passwords.

There are two ways of customizing the looks:

  1. CSS. Use (for example) Firebug to look at the dom structure and apply CSS to customize the look and feel.

  2. Customize the component (in a really really ugly manner) by overriding getLoginHTML():

class MyLoginForm extends LoginForm {

        @Override
        protected byte[] getLoginHTML() {
            String appUri = getApplication().getURL().toString()
                    + getWindow().getName() + "/";

            return ("<!DOCTYPE html PUBLIC \"-//W3C//DTD "
                    + "XHTML 1.0 Transitional//EN\" "
                    + "\"http://www.w3.org/TR/xhtml1/"
                    + "DTD/xhtml1-transitional.dtd\">\n" + "<html>"
                    + "<head><script type='text/javascript'>"
                    + "var setTarget = function() {" + "var uri = '"
                    + appUri
                    + "loginHandler"
                    + "'; var f = document.getElementById('loginf');"
                    + "document.forms[0]
.action = uri;document.forms[0]
.username.focus();};"
                    + ""
                    + "var styles = window.parent.document.styleSheets;"
                    + "for(var j = 0; j < styles.length; j++) {\n"
                    + "if(styles[j]
.href) {"
                    + "var stylesheet = document.createElement('link');\n"
                    + "stylesheet.setAttribute('rel', 'stylesheet');\n"
                    + "stylesheet.setAttribute('type', 'text/css');\n"
                    + "stylesheet.setAttribute('href', styles[j]
.href);\n"
                    + "document.getElementsByTagName('head')[0]
.appendChild(stylesheet);\n"
                    + "}"
                    + "}\n"
                    + "function submitOnEnter(e) { var keycode = e.keyCode || e.which;"
                    + " if (keycode == 13) {document.forms[0]
.submit();}  } \n"
                    + "</script>"
                    + "</head><body onload='setTarget();' style='margin:0;padding:0; background:transparent;' class=\""
                    + ApplicationConnection.GENERATED_BODY_CLASSNAME
                    + "\">"
                    + "<div class='v-app v-app-loginpage' style=\"background:transparent;\">"
                    + "<iframe name='logintarget' style='width:0;height:0;"
                    + "border:0;margin:0;padding:0;'></iframe>"
                    + "<form id='loginf' target='logintarget' onkeypress=\"submitOnEnter(event)\" method=\"post\">"
                    + "<div>Nimi</div><div >"
                    + "<input class='v-textfield' style='display:block;' type='text' name='username'></div>"
                    + "<div>Salasana</div>"
                    + "<div><input class='v-textfield' style='display:block;' type='password' name='password'></div>"
                    + "<div><div onclick=\"document.forms[0]
.submit();\" tabindex=\"0\" class=\"v-button\" role=\"button\" ><span class=\"v-button-wrap\"><span class=\"v-button-caption\">Login</span></span></div></div></form></div>" + "</body></html>")
                    .getBytes();
        }