How to Include AlloyUI

Question

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:

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>

I'm using Liferay 6.1.20 EE GA2

Answer 1

Liferay uses alloy-ui (also referred to asAUI) library developed on top of Yahoo UI (also referred to as yui) 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.

Answer 2

The seed file declaration is all you need to access AlloyUI for this char counter code.

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

You shouldn't need the taglib reference in your web.xml. In fact, you're inhibiting access to the seed file. The taglib you're referencing may be inconsistent with the version of AlloyUI that is expected.

Also, accessing YUI's CharCounter is fine. See the API example at http://alloyui.com/api/classes/A.CharCounter.html.