Liferay 登录页面分析

代码片段：

 作为任何网站，登录页面都是不可缺少的一部分，比如对应如下图的登录页面：

对应的代码片段在 ROOT应用下的/html/portlet/login/login.jsp中：

1. <aui:form action="<%= loginURL %>" method="post" name="fm"> 
2.         <aui:input name="redirect" type="hidden" value="<%= redirect %>" /> 
3.  
4.         ... 
5.             <aui:input label="<%= loginLabel %>" name="login" showRequiredLabel="<%= false %>" type="text" value="<%= login %>"> 
6.                 <aui:validator name="required" /> 
7.             </aui:input> 
8.  
9.             <aui:input name="password" showRequiredLabel="<%= false %>" type="password" value="<%= password %>"> 
10.                 <aui:validator name="required" /> 
11.             </aui:input> 
12.  
13.             <span id="<portlet:namespace />passwordCapsLockSpan" style="display: none;"><liferay-ui:message key="caps-lock-is-on" /></span> 
14.  
15.             <c:if test="<%= company.isAutoLogin() && !PropsValues.SESSION_DISABLED %>"> 
16.                 <aui:input checked="<%= rememberMe %>" inlineLabel="left" name="rememberMe" type="checkbox" /> 
17.             </c:if> 
18.         </aui:fieldset> 
19.  
20.         <aui:button-row> 
21.             <aui:button type="submit" value="sign-in" /> 
22.         </aui:button-row> 
23.     </aui:form> 

其中第5行的<%= loginLabel %>对应的代码为：

1. <% 
2.             String loginLabel = null; 
3.  
4.             if (authType.equals(CompanyConstants.AUTH_TYPE_EA)) { 
5.                 loginLabel = "email-address"; 
6.             } 
7.             else if (authType.equals(CompanyConstants.AUTH_TYPE_SN)) { 
8.                 loginLabel = "screen-name"; 
9.             } 
10.             else if (authType.equals(CompanyConstants.AUTH_TYPE_ID)) { 
11.                 loginLabel = "id"; 
12.             } 
13.             %> 

它取决于你的认证类型，是邮件还是名字，还是id,因为我们设置的是email,所以图中的loginLabel="email-address".

元素字面内容设定：

这几个元素的literal内容都定义在：

1. <% 
2.         String redirect = ParamUtil.getString(request, "redirect"); 
3.  
4.         String login = LoginUtil.getLogin(request, "login", company); 
5.         String password = StringPool.BLANK; 
6.         boolean rememberMe = ParamUtil.getBoolean(request, "rememberMe"); 
7.  
8.         if (Validator.isNull(authType)) { 
9.             authType = company.getAuthType(); 
10.         } 
11.         %> 

对于"登录"的字面内容，其实现代码如下：

1. public static String getLogin( 
2.             HttpServletRequest request, String paramName, Company company) 
3.         throws SystemException { 
4.  
5.         String login = request.getParameter(paramName); 
6.  
7.         if ((login == null) || (login.equals(StringPool.NULL))) { 
8.             login = GetterUtil.getString( 
9.                 CookieKeys.getCookie(request, CookieKeys.LOGIN, false)); 
10.  
11.             if (PropsValues.COMPANY_LOGIN_PREPOPULATE_DOMAIN && 
12.                 Validator.isNull(login) && 
13.                 company.getAuthType().equals(CompanyConstants.AUTH_TYPE_EA)) { 
14.  
15.                 login = "@" + company.getMx(); 
16.             } 
17.         } 
18.  
19.         return login; 
20.     } 

可以看出，字面内容默认为 @+company.getMx() ，也就是我们这里@liferay.com

校验字段：

值得一提的是，用户名和密码框架都会被校验，因为启用了validator :<aui:validator name="required" />

这个标记定义在aui.tld中，如下：

1. <tag> 
2.     <name>validator</name> 
3.     <tag-class>com.liferay.taglib.aui.ValidatorTagImpl</tag-class> 
4.     <body-content>JSP</body-content> 
5.     <attribute> 
6.         <name>errorMessage</name> 
7.         <required>false</required> 
8.         <rtexprvalue>true</rtexprvalue> 
9.         <type>java.lang.String</type> 
10.     </attribute> 
11.     <attribute> 
12.         <name>name</name> 
13.         <required>true</required> 
14.         <rtexprvalue>true</rtexprvalue> 
15.         <type>java.lang.String</type> 
16.     </attribute> 
17. </tag> 

具体表单校验逻辑都在aui-form-validator.js文件中。比如我们故意不填写某个字段:

则会执行如下的校验：

1.     RULES: { 
2.  ... 
3.         required: function(val, node, ruleValue) { 
4.             var instance = this; 
5.  
6.             if (A.FormValidator.isCheckable(node)) { 
7.                 var name = node.get(NAME); 
8.                 var elements = instance.getElementsByName(name); 
9.  
10.                 return (elements.filter(':checked').size() > 0); 
11.             } 
12.             else { 
13.                 return !!val; 
14.             } 
15.         } 
16.     } 
17. }; 

如果不满足这个rule，则显示如下的文本内容，这个文本定义在：

1. YUI.AUI.defaults.FormValidator = { 
2.     STRINGS: { 
3. ... 
4.         rangeLength: 'Please enter a value between {0} and {1} characters long.', 
5.         required: 'This field is required.', 
6.         url: 'Please enter a valid URL.' 
7.     }, 

我们可以试验下，果然内容显示为：