I sort of got it to work eventually...
I replaced the use of
<aui:script> with just ordinary HTML's
<script> tags.
The portlet however, even after reload in Liferay, doesn't use the new code immediately; took me a few refresh of the page before the new JS kicked in. I assume a clear cache might do the trick; I suspect my browser, Safari 5.1, may be doing some caching + optimisation of JS scripts.
I also found this to be useful in helping me understand how AUI's Node is related to HTML's DOM nodes:
Liferay's Blog - Alloy UI - Working with elements and eventsThe above article also serves as intro. to using Alloy UI.
Here is a sample JSP (
view.jsp) that should work:
1<script type="text/javascript">
2 var portletNamepsace = '<portlet:namespace />';
3 // alert('From view.jsp\n' + portletNamepsace);
4</script>
5 6<aui:form id="my-aui-form">
7 <aui:input type="textarea" label="My Data"
8 rows="5" cols="30"
9 id="my-aui-textarea" name="aui-text" />
10 <span id="<portlet:namespace />aui-char-count"></span> character(s) remaining.
11</aui:form>
This in conjunction with project/docroot/js/main.js:
1AUI().ready('node', 'aui-char-counter', function(A) {
2
3 // alert('From main.js\n' + portletNamepsace);
4
5 var maxTextLength = 148;
6
7 var auiTextAreaIDWithNSpace = '#' + portletNamepsace + 'my-aui-textarea';
8 var auiCountAreaIDWithNSpace = '#' + portletNamepsace + 'aui-char-count';
9
10 var auiTextAreaNode = new A.one(auiTextAreaIDWithNSpace);
11 if (auiTextAreaNode === null) {
12 alert('From main.js\n' + 'AUI Text Area node not found.');
13 }
14
15 var auiCountAreaNode = new A.one(auiCountAreaIDWithNSpace);
16 if (auiCountAreaNode === null) {
17 alert('From main.js\n' + 'AUI Count Text node not found.');
18 }
19
20 auiCountAreaNode.set('text',
21 (maxTextLength - (auiTextAreaNode.get('text').length)));
22
23 var auiTextCounter = new A.CharCounter( {
24 input: auiTextAreaIDWithNSpace,
25 counter: auiCountAreaIDWithNSpace,
26 maxLength: maxTextLength
27 });
28});
In
liferay-portlet.xml, I have
main.js as:
1<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
I think the above code works because the
<script> tag is parsed before
main.js, since
main.js is in footer. Assuming entire JavaScript is executing in a single space, what I have in
<script> tag is also visible in
main.js.
