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

Like this? Share it with your network

Share

5 Hidden Gems of Alloy UI

on

  • 1,468 views

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.

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.

Statistics

Views

Total Views
1,468
Views on SlideShare
1,468
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

5 Hidden Gems of Alloy UI Presentation Transcript

  • 1. Five Hidden Gems of AlloyUI Andrea Di Giorgi R&D Engineer, SMC TREVISO Srl
  • 2. Five Hidden Gems of AlloyUI  AlloyUI in Liferay  DOM & Eventi  Plugins  Widgets  CSS Forms & Layout
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Widgets
  • 20. Widgets A.AutoComplete  Modulo aui-autocomplete  Sorgente dati: array, AJAX, callback  Selezioni multiple
  • 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. Widgets A.OverlayContextPanel  Modulo aui-overlay  "Tooltip" esteso  Contenuto: selettore CSS, nodo creato on-the-fly o caricato tramite AJAX (A.Plugin.IO)
  • 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. 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. 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. 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