Using Alloy UI in your Application

*Alloy UI : Liferay의 User Interface framework이다. Liferay portal에서 사용되고 있기도 하고, Javascript 코드를 줄여줌으로써 page load time에 영향을 적게 준다.

목표 : Alloy UI module을 사용해보고, Alloy UI를 이용해서 form validation을 하는 법을 배운다. 그리고 Alloy UI를 이용해서 event handling 하는 법, DOM node manipulation 하는 법을 배운다.

AUI code 해석

// Full code 
<aui:script use="aui-char-counter">
AUI().use(
  function(A) {
    new A.CharCounter(
      {
        counter: '#counter',
        input: '#<portlet:namespace />message',
        maxLength: 140
      }
    );
  }
);
</aui:script>

AUI().use(
  'aui-char-counter',
  function(A) {

  }
);

-> 'aui-char-counter' module을 load

new A.CharCounter(
  {

  }
);

-> function(A) 내부에 코딩함으로써 character counter instance 생성

counter: '#counter',
input: '#<portlet:namespace />message',
maxLength: 140

-> Character counter 인스턴스의 attribute 설정