Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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();
}