Upload
andrea-di-giorgi
View
1.303
Download
2
Embed Size (px)
DESCRIPTION
My speech at 2001 Liferay Italy Symposium. Talking about AlloyUI (the Javascript library built by Liferay on top of YUI3) and how to use it in Liferay plugins.
Citation preview
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