Search code examples
liferayliferay-6alloy-ui

How to Include AlloyUI

I have some troubles including AlloyUI in my Liferay Portlet. Following this article, I have generated the following jsp:

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<input type="text" id="some-input" />
<span id="counter"></span> character(s) remaining

<aui:script>
YUI().use(
  'aui-char-counter',
  function(Y) {
    new Y.CharCounter(
      {
        counter: '#counter',
        input: '#some-input',
        maxLength: 10
      }
    );
  }
);
</aui:script>

But the rendered page looks like this:

field not working

I made sure that the taglib is correctly defined in the web.xml:

<taglib>
    <taglib-uri>http://liferay.com/tld/aui</taglib-uri>
    <taglib-location>/WEB-INF/tld/aui.tld</taglib-location>
</taglib>

AUI does work, when I include it in the jsp as follows:

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui/aui-min.js" rel="stylesheet"></link>


<input type="text" id="some-input" />
<span id="counter"></span> character(s) remaining

<script>
YUI().use(
  'aui-char-counter',
  function(Y) {
    new Y.CharCounter(
      {
        counter: '#counter',
        input: '#some-input',
        maxLength: 10
      }
    );
  }
);
</script>

field working

I'm using Liferay 6.1.20 EE GA2

Solution

  • Liferay uses (also referred to asAUI) library developed on top of Yahoo UI (also referred to as ) library.

    The instance terms for both these libraries are different i.e. AUI for Alloy-UI and YUI for the other.

    Replacing these terms in your code will resolve your issue i.e. have AUI instead of YUI.