My speech at 2011 Liferay Italy Symposium. Talking about AlloyUI (the Javascript library built by Liferay on top of YUI3) and how to use it in Liferay plugins.

1. Five Hidden Gems of
AlloyUI
Andrea Di Giorgi
R&D Engineer, SMC TREVISO Srl

4. Five Hidden Gems of AlloyUI
 AlloyUI in Liferay
 DOM & Eventi
 Plugins
 Widgets
 CSS Forms & Layout

5. AlloyUI in Liferay
<aui:script>
<aui:script>
function <portlet:namespace />sayHello() {
alert('Hello, World!');
}
<portlet:namespace />sayHello();
</aui:script>
http://issues.liferay.com/browse/LPS-7018

6. AlloyUI in Liferay
<aui:script>
<aui:script>
function <portlet:namespace />sayGoodbye() {
alert(Goodbye, World!');
}
<portlet:namespace />sayGoodbye();
AUI().use('aui-base', 'aui-io', function(A) {
var c = A.one('#<portlet:namespace />content');
if (c) {
alert(c.html());
}
});
</aui:script>

7. AlloyUI in Liferay
<aui:script use="…">
<aui:script use="aui-base,aui-io">
function <portlet:namespace />sayGoodbye() {
alert('Goodbye, World!');
}
<portlet:namespace />sayGoodbye();
var c = A.one('#<portlet:namespace />content');
if (c) {
alert(c.html());
}
</aui:script>

8. AlloyUI in Liferay
<script type="text/javascript">
<aui:script use="…">
AUI().use('aui-base', 'aui-io', function(A) {
// ...
<aui:script use="aui-base,aui-io">
function _1_WAR_myportlet_sayGoodbye() {
function <portlet:namespace />sayGoodbye() {
alert('Goodbye, World!');
alert('Goodbye, World!');
}}
_1_WAR_myportlet_sayGoodbye();
<portlet:namespace />sayGoodbye();
var c c= =A.one('#_1_WAR_alloyuigemsportlet_content');
var
A.one('#<portlet:namespace />content');
if (c) { {
if (c)
alert(c.html());
alert(c.html());
}}
// ...
</aui:script>
});
</script>

9. AlloyUI in Liferay
<aui:script>
function <portlet:namespace />alertMe() {
AUI().use('aui-base', function(A) {
var c = A.one('#<portlet:namespace />content');
if (c) {
alert(c.html());
}
});
}
</aui:script>
Non scalabile.

10. AlloyUI in Liferay
Liferay.provide(obj, methodName, methodFn, modules)
<aui:script>
Liferay.provide(window, '<portlet:namespace />alertMe', function() {
var A = AUI();
var c = A.one('#<portlet:namespace />content');
if (c) {
alert(c.html());
}
},
[ 'aui-base' ]);
</aui:script>
http://issues.liferay.com/browse/LPS-9371

11. DOM & Eventi
Centrare un elemento
nel document (default)
<aui:script use="aui-base">
A.one('#<portlet:namespace />center').center();
</aui:script>
nel viewport
<aui:script use="aui-base">
A.one('#<portlet:namespace />center').center(window);
</aui:script>
in un altro elemento
<aui:script use="aui-base">
A.one('#<portlet:namespace />center').center(
'#<portlet:namespace />container');
</aui:script>

12. DOM & Eventi
Simulare radio buttons
<aui:script use="aui-base">
var list = A.one('#<portlet:namespace />radioList');
list.addClass('active');
list.all('li').on('click', function(event) {
event.currentTarget.radioClass('selected');
});
</aui:script>

13. DOM & Eventi
Event delegation
<aui:script use="aui-base">
var list = A.one('#<portlet:namespace />radioList');
list.addClass('active');
list.delegate('click', function(event) {
event.currentTarget.radioClass('selected');
},
'li');
</aui:script>
var list = A.one('#<portlet:namespace />radioList');
list.append('<li>Item ' + (list.all('li').size() + 1) + '</li>');

14. DOM & Eventi
Caricamento AJAX in un elemento
aui-io-request
<liferay-portlet:renderURL var="loadContentURL"
windowState="<%= LiferayWindowState.EXCLUSIVE.toString() %>"
>
<liferay-portlet:param name="jspPage" value="/content.jsp" />
</liferay-portlet:renderURL>
<aui:script use="aui-io-request">
var w = A.one('#<portlet:namespace />wrapper');
A.io.request('<%= loadContentURL %>', {
on: {
success: function() {
w.html(this.get('responseData'));
}
}
});
</aui:script>

15. DOM & Eventi
Caricamento AJAX in un elemento
aui-io-plugin
<aui:script use="aui-io-plugin">
A.one('#<portlet:namespace />wrapper').plug(A.Plugin.IO, {
uri: '<%= loadContentURL %>'
});
</aui:script>
<aui:script use="aui-io-plugin">
A.one('#<portlet:namespace />wrapper').load('<%= loadContentURL %>');
</aui:script>

16. DOM & Eventi
Caricamento AJAX in un elemento
aui-io-plugin, callback
<aui:script use="aui-io-plugin">
A.one('#<portlet:namespace />wrapper').load(
'<%= loadContentURL %>',
function() {
this.get('node').prepend('<h5>Test</h5>');
}
);
</aui:script>

17. DOM & Eventi
Caricamento AJAX in un elemento
aui-io-plugin, config
<aui:script use="aui-io-plugin">
A.one('#<portlet:namespace />wrapper').load(
'<%= loadContentURL %> .load-partial',
{ where: 'outer' }
);
</aui:script>

18. DOM & Eventi
Caricamento AJAX in un elemento
aui-io-plugin
 "loading" overlay di attesa (disattivabile)
 codice Javascript valutato automaticamente
 1 riga di codice per rieseguire la chiamata AJAX

19. Plugins
Perché i plugins?
 Per aggiungere funzionalità a oggetti
node.plug(plugin, configurationAttributes);
 Perché possono essere sganciati (unplugged)
node.unplug(plugin);
 Per incapsulare e condividere queste funzionalità fra oggetti
diversi
 Perché sono separati l'uno dall'altro mediante namespace
 Perché possono essere agganciati anche a NodeList, non solo a
Node

20. Plugins
Creare un nuovo plugin
<aui:script use="aui-base">
function MySimplePlugin(config) {
var host = config.host;
host.on('click', function(e) {
e.preventDefault();
this.next().toggle();
});
}
MySimplePlugin.NS = 'mysimpleplugin';
A.all('#<portlet:namespace />sections a').plug(MySimplePlugin);
</aui:script>

21. Widgets

22. Widgets
A.AutoComplete
 Modulo aui-autocomplete
 Sorgente dati: array, AJAX, callback
 Selezioni multiple

23. Widgets
A.Dialog
 Modulo aui-dialog
 Pulsanti configurabili
 Draggable, resizable, modal
 Contenuto: selettore CSS, nodo creato on-the-fly o
caricato tramite AJAX (A.Plugin.IO)

24. Widgets
A.OverlayContextPanel
 Modulo aui-overlay
 "Tooltip" esteso
 Contenuto: selettore CSS, nodo creato on-the-fly o
caricato tramite AJAX (A.Plugin.IO)

25. CSS Forms & Layout
Layout multi-colonna
<aui:layout>
<aui:column columnWidth="25" first="true">
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</aui:column>
<aui:column columnWidth="50">
<p>Integer non blandit risus. Etiam ut mauris odio...</p>
</aui:column>
<aui:column columnWidth="25" last="true">
<p>Quisque erat orci, accumsan id ultricies eget...</p>
</aui:column>
</aui:layout>
10, 15, 20, 25, 28, 30, 33, 35,
40, 45, 50, 55, 60, 62, 65, 66,
70, 75, 80, 85, 90, 95

26. CSS Forms & Layout
Forms
Contenitori
Elementi
aui:form
aui:input
aui:panel
aui:select e aui:option
aui:fieldset e aui:legend
aui:button
aui:field-wrapper
aui:a
aui:button-row
Util
aui:model-context

27. CSS Forms & Layout
Forms
Maggiore astrazione
 no <portlet:namespace />
 traduzione etichette
 no BeanParamUtil (e aui:model-context)
 sensibile a portal/portlet-model-hints.xml
 sensibile al tema
Funzionalità aggiuntive
 helpMessage
 prefix, suffix, etc.

28. Riferimenti
Web
alloy.liferay.com
deploy.alloyui.com/api
AlloyUI docs
yuilibrary.com/yui/docs/api
YUI3 docs
deploy.alloyui.com/docs
jQuery – YUI3 – AlloyUI Rosetta Stone
Demos
deploy.alloyui.com
Esempi sull'ultima build (alloy-1.0.1.zip per gli esempi sulla 1.0.1)
Blog
www.liferay.com/web/nathan.cavanaugh/blog
Twitter
@natecavanaugh
@eduardolundgren