liferay - 如何包含 AlloyUI

Question

我在 Liferay Portlet 中遇到了一些问题，包括 AlloyUI。在this article之后，我生成了以下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>

但是渲染的页面是这样的：

我确保 taglib 在以下位置正确定义web.xml：

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

当我将 AUI 包含在 jsp 中时，AUI 确实有效，如下所示：

<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>

我正在使用 Liferay 6.1.20 EE GA2

Answer 1

Liferay 使用在 Yahoo UI（也称为yui ）库之上开发的alloy-ui（也称为）库。AUI

这两个库的实例术语是不同AUI的，即 Alloy-UI 和YUI另一个。

在您的代码中替换这些术语将解决您的问题，即拥有AUI而不是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.