Successfully reported this slideshow.
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>
<aui:script>
function <portlet:namespace />sayHello() {
alert('Hello, World!');
}
<portlet...
AlloyUI in Liferay
<aui:script>
<aui:script>
function <portlet:namespace />sayGoodbye() {
alert(Goodbye, World!');
}
<port...
AlloyUI in Liferay
<aui:script use="…">
<aui:script use="aui-base,aui-io">
function <portlet:namespace />sayGoodbye() {
al...
AlloyUI in Liferay
<script type="text/javascript">
<aui:script use="…">
AUI().use('aui-base', 'aui-io', function(A) {
// ....
AlloyUI in Liferay
<aui:script>
function <portlet:namespace />alertMe() {
AUI().use('aui-base', function(A) {
var c = A.on...
AlloyUI in Liferay
Liferay.provide(obj, methodName, methodFn, modules)
<aui:script>
Liferay.provide(window, '<portlet:name...
DOM & Eventi
Centrare un elemento

nel document (default)
<aui:script use="aui-base">
A.one('#<portlet:namespace />center'...
DOM & Eventi
Simulare radio buttons
<aui:script use="aui-base">
var list = A.one('#<portlet:namespace />radioList');

list...
DOM & Eventi
Event delegation
<aui:script use="aui-base">
var list = A.one('#<portlet:namespace />radioList');

list.addCl...
DOM & Eventi
Caricamento AJAX in un elemento

aui-io-request
<liferay-portlet:renderURL var="loadContentURL"
windowState="...
DOM & Eventi
Caricamento AJAX in un elemento

aui-io-plugin
<aui:script use="aui-io-plugin">
A.one('#<portlet:namespace />...
DOM & Eventi
Caricamento AJAX in un elemento

aui-io-plugin, callback
<aui:script use="aui-io-plugin">
A.one('#<portlet:na...
DOM & Eventi
Caricamento AJAX in un elemento

aui-io-plugin, config
<aui:script use="aui-io-plugin">
A.one('#<portlet:name...
DOM & Eventi
Caricamento AJAX in un elemento

aui-io-plugin
 "loading" overlay di attesa (disattivabile)
 codice Javascr...
Plugins
Perché i plugins?
 Per aggiungere funzionalità a oggetti
node.plug(plugin, configurationAttributes);

 Perché po...
Plugins
Creare un nuovo plugin
<aui:script use="aui-base">
function MySimplePlugin(config) {
var host = config.host;
host....
Widgets
Widgets
A.AutoComplete
 Modulo aui-autocomplete
 Sorgente dati: array, AJAX, callback
 Selezioni multiple
Widgets
A.Dialog
 Modulo aui-dialog
 Pulsanti configurabili
 Draggable, resizable, modal
 Contenuto: selettore CSS, no...
Widgets
A.OverlayContextPanel
 Modulo aui-overlay
 "Tooltip" esteso
 Contenuto: selettore CSS, nodo creato on-the-fly o...
CSS Forms & Layout
Layout multi-colonna
<aui:layout>
<aui:column columnWidth="25" first="true">
<p>Lorem ipsum dolor sit a...
CSS Forms & Layout
Forms

Contenitori

Elementi

aui:form

aui:input

aui:panel

aui:select e aui:option

aui:fieldset e a...
CSS Forms & Layout
Forms

Maggiore astrazione
 no <portlet:namespace />
 traduzione etichette
 no BeanParamUtil (e aui:...
Riferimenti
Web

alloy.liferay.com
deploy.alloyui.com/api
AlloyUI docs

yuilibrary.com/yui/docs/api
YUI3 docs

deploy.allo...
5 Hidden Gems of Alloy UI
5 Hidden Gems of Alloy UI
Upcoming SlideShare
Loading in …5
×

5 Hidden Gems of Alloy UI

2,690 views

Published on

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.

Published in: Technology
  • Be the first to comment

5 Hidden Gems of Alloy UI

  1. 1. Five Hidden Gems of AlloyUI Andrea Di Giorgi R&D Engineer, SMC TREVISO Srl
  2. 2. Five Hidden Gems of AlloyUI  AlloyUI in Liferay  DOM & Eventi  Plugins  Widgets  CSS Forms & Layout
  3. 3. 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
  4. 4. 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>
  5. 5. 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>
  6. 6. 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>
  7. 7. 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.
  8. 8. 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
  9. 9. 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>
  10. 10. 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>
  11. 11. 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>');
  12. 12. 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>
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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
  17. 17. 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
  18. 18. 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>
  19. 19. Widgets
  20. 20. Widgets A.AutoComplete  Modulo aui-autocomplete  Sorgente dati: array, AJAX, callback  Selezioni multiple
  21. 21. 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)
  22. 22. Widgets A.OverlayContextPanel  Modulo aui-overlay  "Tooltip" esteso  Contenuto: selettore CSS, nodo creato on-the-fly o caricato tramite AJAX (A.Plugin.IO)
  23. 23. 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
  24. 24. 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
  25. 25. 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.
  26. 26. 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

×