Loading AlloyUI Modules with AUI Script

Follow these steps to load modules with <aui:script>:

1. Add the following declaration to your portlet’s JSP:

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

2. Add the <aui:script> tag and use the use attribute to load AlloyUI/YUI modules:

   <aui:script use="aui-base">
       A.one('#someNodeId').on(
           'click',
           function(event) {
               alert('Thank you for clicking.')
           }
       );
   </aui:script>
   

This loads the aui-base AlloyUI component and makes it available to the code inside the aui:script.

In the browser, the aui:script translates to the full JavaScript shown below:

<script type="text/javascript">
    AUI().use("aui-base",
        function(A){
            A.one('#someNodeId').on(
                'click',
                function(event) {
                    alert('Thank you for clicking.')
                }
            );
        }
    );
</script>

Wonderful! Now you know how to load AUI/YUI modules in AUI scripts.

Related Topics

• Using External JavaScript Libraries
• Loading AMD Modules
• Loading ES2015 and Metal.js Modules with AUI Script