Blogs

Visiting Barcelona

Jorge Ferrer

Modified

3/17/10 3:24 PM

Less Than a Minute Read

contentNode.html('<div class="loading-animation"></div>'); var myRequest = A.io.request('test.html', { on: { success: function(event, id, xhr) { contentNode.html(this.get('responseData')); } } }); }

It's a trivial process, but when you see it so often, you start to think that it's one of those patterns that could imagine yourself sitting in a padded room chanting over and over.

So we created a handy little plugin that handles this for us, and in a much nicer way. What this plugin does is does an ajax request the same as A.io.request, but also adds a loading mask to the area that we want to load content into. As soon as the content is ready, it parses through it and looks for any javascript that may be inside of it and executes it, and sets the content into our area.

var contentNode = A.one('#myNode');

if(contentNode) {
 contentNode.plug(A.Plugin.IO, { uri: 'test.html' });
}

And that's it.

Here's what it looks like:

It basically will mask any existing content, and add a loading indicator that is centered above it.

Here is some of the cool stuff about the plugin (and all plugins in Alloy):

1. It has it's own namespace

This means that this plugin lives inside of it's own area on the node so that it won't clobber with other plugins. Here's a good reason. A.Plugin.IO inherits all of the methods and properties that are on A.io.request, so you can call things like .start(), .stop() (to start and stop the request of course), or .set('uri', 'new_test.html'), or .set('dataType', 'json') and everything else we covered in the <a href="http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-ajax?_33_redirect=%2Fweb%2Fnathan.cavanaugh%2Fblog">last post</a>.

If all of that was placed on the main object, then it would conflict with any methods that might exist already on that node, or maybe another plugin.

So instead, it's placed in a namespace, and you can access that like so:

 
  
            
      
  
             
  li {padding-bottom:10px}

            
    So if you want to set the dataType on the plugin to json, you can do: 
  
             
  
            
             
      
   
  
             Finally returned from Liferay's annual employee retreat!  It was a fun-filled week and it's great to put a face with all the names I interact with on a daily basis.  I hope to see many of our community members in the coming weeks and months as well at our various events.  If you have a chance to attend a Liferay event

contentNode.io.set('dataType', 'json');
 (Symposium, Roadshow, or any other event), I highly encourage you to do so, because our employees and community members are some of the most kind, smart, and humble folks I've ever met in my 13 years of being in this industry.  Now.. on to the links! 
  
          
            
   Juan 
  
            
    or if you want to stop the connection:

 and other French community members are working on revamping the French forums
contentNode.io.stop();

to give much-needed structure and visibility.

Liferay made an appearance at the Lakers vs. Clippers game, wearing the new Liferay comic shirts. There were lots of laughs, I spilled my popcorn into the player's tunnel, and in the end an exciting buzzer-beater win by the Lakers. Too bad security confiscated our giant Liferay banner we wanted to hold up :(

A blog dedicated to Liferay technologies? Sweetness! In this week's installment, Daniel discusses an AlloyUI Hello World.

Nate and Eduardo attended YUIConf 2010 and did a presentation on AlloyUI and the components donated to the YUI3 Gallery.

If you missed it, Eduardo did an awesome hour-long presentation and demo of AlloyUI as part of the Liferay LIVE series. Also discussed some much-needed Calendar improvements. Replays will be made available soon. Liferay LIVE is taking a couple of weeks off for the holiday season, but will be back on January 12 to discuss Staging. Following that, there will be a discussion of the Liferay Community by me which you won't want to miss! Be sure to register and attend (it's free).

A handful of nice, informative blog posts: Olaf on UTF-8, Barrie on a simple way to embed portlets into Web Content, Jonas on multi-language screennames.

Need to define quotas for your Document Library? Look no further... Thanks Tarkan!

Wondering why your Liferay tickets weren't being solved last week? We produced this video at the retreat instead :)

Lastly, a shameless plug for my recently published "Liferay Essentials" DZone Refcard. It's hard to squeeze good developer docs in 6 pages, but I tried to hit all the high points. Best part is it's free!

I don't usually post on Fridays, because half the world has checked out from their professional lives by the time I post, but I missed the last week due to the Liferay retreat, so..