Five Hidden Gems of
AlloyUI Andrea Di Giorgi R&D Engineer, SMC TREVISO Srl
Five Hidden Gems of AlloyUI
AlloyUI in Liferay
DOM & Eventi
Plugins
Widgets
CSS Forms & Layout
AlloyUI in Liferay
<aui:script> function <portlet:namespace />sayHello() { alert('Hello, World!'); } <portlet:namespace />sayHello(); </aui:script>
<aui:script>
http://issues.liferay.com/browse/LPS-7018
AlloyUI in Liferay
<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>
<aui:script>
<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>
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>
AlloyUI in Liferay
<aui:script use="…"> <script type="text/javascript"> AUI().use('aui-base', 'aui-io', function(A) { // ... function _1_WAR_myportlet_sayGoodbye() { alert('Goodbye, World!'); } _1_WAR_myportlet_sayGoodbye(); var c = A.one('#_1_WAR_alloyuigemsportlet_content'); if (c) { alert(c.html()); } // ... }); </script>
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.
AlloyUI in Liferay
<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>
Liferay.provide(obj, methodName, methodFn, modules)
http://issues.liferay.com/browse/LPS-9371
DOM & Eventi
<aui:script use="aui-base"> A.one('#<portlet:namespace />center').center(); </aui:script>
nel document (default)
Centrare un elemento
<aui:script use="aui-base"> A.one('#<portlet:namespace />center').center(window); </aui:script>
nel viewport
<aui:script use="aui-base"> A.one('#<portlet:namespace />center').center( '#<portlet:namespace />container'); </aui:script>
in un altro elemento
DOM & Eventi
<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>
Simulare radio buttons
DOM & Eventi
<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>
Event delegation
var list = A.one('#<portlet:namespace />radioList'); list.append('<li>Item ' + (list.all('li').size() + 1) + '</li>');
DOM & Eventi
<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>
aui-io-request
Caricamento AJAX in un elemento
DOM & Eventi
<aui:script use="aui-io-plugin"> A.one('#<portlet:namespace />wrapper').plug(A.Plugin.IO, { uri: '<%= loadContentURL %>' }); </aui:script>
aui-io-plugin
Caricamento AJAX in un elemento
<aui:script use="aui-io-plugin"> A.one('#<portlet:namespace />wrapper').load('<%= loadContentURL %>'); </aui:script>
DOM & Eventi
<aui:script use="aui-io-plugin"> A.one('#<portlet:namespace />wrapper').load( '<%= loadContentURL %>', function() { this.get('node').prepend('<h5>Test</h5>'); } ); </aui:script>
aui-io-plugin, callback
Caricamento AJAX in un elemento
DOM & Eventi
<aui:script use="aui-io-plugin"> A.one('#<portlet:namespace />wrapper').load( '<%= loadContentURL %> .load-partial', { where: 'outer' } ); </aui:script>
aui-io-plugin, config
Caricamento AJAX in un elemento
DOM & Eventi
"loading" overlay di attesa (disattivabile)
codice Javascript valutato automaticamente
1 riga di codice per rieseguire la chiamata AJAX
aui-io-plugin
Caricamento AJAX in un elemento
Plugins
Per aggiungere funzionalità a oggetti
Perché possono essere sganciati (unplugged)
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
Perché i plugins?
node.unplug(plugin);
node.plug(plugin, configurationAttributes);
Plugins
<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>
Creare un nuovo plugin
Widgets
Widgets
Modulo aui-autocomplete
Sorgente dati: array, AJAX, callback
Selezioni multiple
A.AutoComplete
Widgets
Modulo aui-dialog
Pulsanti configurabili
Draggable, resizable, modal
Contenuto: selettore CSS, nodo creato on-the-fly o
caricato tramite AJAX (A.Plugin.IO)
A.Dialog
Widgets
Modulo aui-overlay
"Tooltip" esteso
Contenuto: selettore CSS, nodo creato on-the-fly o
caricato tramite AJAX (A.Plugin.IO)
A.OverlayContextPanel
CSS Forms & Layout
<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>
Layout multi-colonna
10, 15, 20, 25, 28, 30, 33, 35,
40, 45, 50, 55, 60, 62, 65, 66,
70, 75, 80, 85, 90, 95
CSS Forms & Layout
Forms
Elementi
aui:input
aui:select e aui:option
aui:button
aui:a
Contenitori
aui:form
aui:panel
aui:fieldset e aui:legend
aui:field-wrapper
aui:button-row
Util
aui:model-context
CSS Forms & Layout
no <portlet:namespace />
traduzione etichette
no BeanParamUtil (e aui:model-context)
sensibile a portal/portlet-model-hints.xml
sensibile al tema
Maggiore astrazione
Forms
helpMessage
prefix, suffix, etc.
Funzionalità aggiuntive
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
