Vaadin Web应用开发教程(26):UI组件-LoginForm组件

LoginForm组件专门用来接受用户输入用户名和密码，并可以自动记住用户输入的用户名和密码。其基本用法如下:

[java]
// A wrapper with a caption for the login form
Panel loginPanel = new Panel("Login");
loginPanel.setWidth("250px");

LoginForm login = new LoginForm();
loginPanel.addComponent(login);

// A wrapper with a caption for the login form
Panel loginPanel = new Panel("Login");
loginPanel.setWidth("250px");

LoginForm login = new LoginForm();
loginPanel.addComponent(login);

LoginForm组件内部实现使用了iframe 和静态HTML支持其功能。如果你想定制LoginForm的外观可以重载getLoginHtml()方法。
下面介绍如何定制LoginForm组件。

[java]
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;
    }

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’

[java]
@Override
protected 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>"
补充：Web开发 , 其他 ,