Vaadin Web应用开发教程(26):UI组件-LoginForm组件
LoginForm组件专门用来接受用户输入用户名和密码，并可以自动记住用户输入的用户名和密码。其基本用法如下:
// A wrapper with a caption for the login formPanel loginPanel = new Panel("Login");loginPanel.setWidth("250px"); LoginForm login = new LoginForm();loginPanel.addComponent(login);
LoginForm组件内部实现使用了iframe 和静态HTML支持其功能。 如果你想定制LoginForm的外观可以重载getLoginHtml()方法。
下面介绍如何定制LoginForm组件。
class MyLoginForm extends LoginForm { String usernameCaption; String passwordCaption; String submitCaption; public MyLoginForm(String usernameCaption, String passwordCaption, String submitCaption) { this.usernameCaption = usernameCaption; this.passwordCaption = passwordCaption; this.submitCaption = submitCaption; }然后重载getLoginHTML()方法：
HTML body 部分包含Form定义，包含在一个iframe 中。form 和button 必需定义对应的javascripts 响应用户点击”submit’
@Overrideprotected byte[] getLoginHTML() { // Application URI needed for submitting form String appUri = getApplication().getURL().toString() + getWindow().getName() + "/"; String x, h, b; // XML header, HTML head and body x = "<!DOCTYPE html PUBLIC \"-//W3C//DTD " + "XHTML 1.0 Transitional//EN\" " + "\"http://www.w3.org/TR/xhtml1/" + "DTD/xhtml1-transitional.dtd\">\n"; h = "<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>"; b = "<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'>" + "<table>" + "<tr><td>" + usernameCaption + "</td>" + "<td><input class='v-textfield' style='display:block;'" + " type='text' name='username'></td></tr>" + "<tr><td>" + passwordCaption + "</td>" + " <td><input class='v-textfield'" + " style='display:block;' type='password'" + " name='password'></td></tr>" + "</table>" + "<div>" + "<div onclick='document.forms[0].submit();'" + " tabindex='0' class='v-button' role='button'>" + "<span class='v-button-wrap'>" + "<span class='v-button-caption'>" + submitCaption + "</span>" + "</span></div></div></form></div></body>"; return (x + "<html>" + h + b + "</html>").getBytes();} 