CODEWITHSUNDEEP
liferayliferay-6alloy-ui
FeinesFabi
FeinesFabi

Reputation: 1207

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

Upvotes: 0

Views: 1553

Answers (2)

user3439139
user3439139

Reputation: 11

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.

Upvotes: 0

Pankaj Kathiriya
Pankaj Kathiriya

Reputation: 4210

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.

Upvotes: 4

Related Questions