5 hidden gems of alloy ui

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