« Back

AlloyUI

Company Blogs March 14, 2010 By Nate Cavanaugh Staff

 Hi all, there has been quite a long delay since the last blog post. For those of you who weren't able to check out the webinar, the reasons behind the long silence in my blog postings has been due to the work on the AlloyUI framework.

Over the past 6 months, Eduardo Lundgren and I have been furiously working away building a unified UI library on top of the revolutionary YUI3.

So today, I wanted to answer a few questions about it (in case you have yet to check out the webinar), and to also prep for the coming weeks and blog posts.

The simplest way to describe Alloy is that it's a library of tools, a collection of frameworks, put together and built into one unit. We're taking years of building UIs and the problems we've kept solving and boiling that knowledge down, and releasing it as a separate project.

One of the most common questions I get is: "So what about jQuery and jQuery UI?" You will still be able to use jQuery and jQuery UI (or any javascript or front end library of your choice) in Liferay.

We have however stopped using it for our portlets and plugins, and are instead building everything on top of Alloy.

Liferay is a platform, first and foremost. As such, we want people building on that platform to use the tools they feel most comfortable building with, be it Icefaces, Vaadin, jQuery, dojo, etc.

Much in the same way that in OSX, developers can use other windowing and widget toolkits, such as Swing, to build applications. However, if you want to really leverage the power of the operating system, and really want to have the nicest looking applications, you're going to use Cocoa.

That's what we want to accomplish with Alloy.

Another question I've gotten is why YUI3? There are numerous other javascript libraries on the market, why build on top of one that is a relative newcomer?

One of the questions we definitely asked ourselves was how many existing components and widgets does the library have? But what was a much more important factor was how quickly could quality production level widgets be built?

How clear was the thinking behind the widgeting system? How much documentation was there for it?

These were questions that YUI3 had great answers for. Answers so great that Eduardo and I were able to build roughly 60 utilities and widgets in about 6 months time.

We also looked at the team behind the library, and the types of problems they were solving. Instead of being run by an ivory tower, or an unmanageably large committee, it's developed by a productive "pizza-sized" team thats renowned for leading front end innovation on the web.

They're truly solving problems ranging from the small to the large, which runs very closely to how Liferay works. We wanted a system that could be used on the small scale (let's say you only want to sprinkle in very simple interaction to a website for mainly displaying content), or on the large scale (as in an application interface).

YUI3 is designed to be stretched to those different scenarios seamlessly.

The other question I've gotten is "can it be used outside of Liferay?" and the answer is a resounding yes. We have actually developed Alloy in entirely different repository of our SVN, and maintain it as a third party project that Liferay consumes.

We're doing this because we feel that the patterns we're solving with this aren't specific to Liferay, but are common across the web, and are useful for multiple people.

But this also allows non-Liferay developers to get involved and contribute ideas and solutions so that the pool of ideas doesn't stagnate, but is continually refreshed with fresh input.

However, as great as all of this sounds, there is one area where people people may be concerned, which is documentation.

We are currently working on generated API documentation (another benefit of YUI is that they release many of their build tools, one of them being their documentation builder), and we're aiming to have those done this week.

We also have quite a few demos available in the downloadable zip that contains examples along with code on the demo page to get them to run, but in all honesty, we could do a lot to improve them (and are in fact working on them).

There's also the YUI documentation on http://developer.yahoo.com/yui/3 which all applies to Alloy (since Alloy is built on top of YUI, Alloy only adds to YUI and doesn't take anything away).

However, that can be a lot to wade through, so over the next two weeks, I'm going to post a series of 10 blog posts going over how to do tasks you're familiar with, as well as some that are brand new.

So here's what we'll learn:

1. Working with elements and events

2. Ajax

3. Plugins

4. Widgets

5. Utilities

6. Animation, Drag & Drop

7. Layouts & Forms in CSS

8. Using Alloy taglibs in JSPs

9. Advanced beauties (we'll look at DelayedTask, AOP, OverlayManager, Queue & AsyncQueue, and DataSet)

10. Odds and ends (a few like Char Counter, History, Cache, Profiler, and DataType parsing)

After all 10 posts, I'm hoping you'll have a more thorough understanding of Alloy, and hopefully some ideas on how it can help you.

These are going to be written from a very technical point of view, so if all of my talks so far have been too light on exact details, be prepared for actual code to make it's way in.

Looking forward to seeing you here!

Threaded Replies Author Date
Thank You, Sir. A neat introduction and still... Bavithra Rajendran March 14, 2010 11:06 PM
Nate, Alloy is beautiful. You guys have done a... Erik Andersson March 15, 2010 3:29 AM
Hi Nate, I'm looking forward to see more of... Sampsa Sohlman March 15, 2010 7:29 AM
I found that having gone through some YUI3... Erik Andersson March 15, 2010 8:05 AM
Hey Nate, I'm looking forward for the... Thiago Leão Moreira March 15, 2010 8:38 AM
very nice! looking forward to the rest of your... Wilson Man March 15, 2010 9:36 AM
Looks promising and indeed documentation is... Corné Aussems March 15, 2010 1:07 PM
Thank you, Nate. I attended your Webinar. Could... Xinsheng Chen March 15, 2010 1:10 PM
Thank you, Nate. Alloy UI is beautiful. Jonas Yuan March 15, 2010 2:32 PM
Great news, this is really exciting! But I... raphael bauduin March 18, 2010 8:13 AM
AlloyUI seems great. Thank you!. BTW, I'm the... Sebastián Gurin June 2, 2010 7:28 AM
An improvised home page for my YUI3 and alloyUI... Sebastián Gurin September 2, 2010 6:12 AM
Thanks for the extra links although I had seen... Dave Weitzel September 2, 2010 7:08 AM
Hi, I was trying to implement multiple... M. Ahamed Maqbool July 26, 2010 1:59 AM
Nate, I don't see all 10 blog posts that you... Dave Weitzel September 1, 2010 12:32 PM
Can you please give me some tips how to user... Manikandan S October 11, 2010 10:48 PM
Is there an easy way to upgrade the YUI version... Jin Joo January 20, 2011 11:15 AM
You can download the latest YUI in... Manikandan S January 20, 2011 8:27 PM
Hi Mani, I did download the latest YUI library... Jin Joo January 20, 2011 8:39 PM
Hi jin, check this link you will find the war... Manikandan S January 21, 2011 12:39 AM
Hello, I have the same problem - I need to... gofri _ February 24, 2011 6:29 AM
Hi Nathan, Thanks for your great work. Could... Alexandre FILLATRE March 7, 2014 6:01 AM

Thank You, Sir. A neat introduction and still learning a lot to have a thorough understanding of Alloy. Looking forward to read and learn a lot.
Posted on 3/14/10 11:06 PM.
Nate, Alloy is beautiful. You guys have done a great job. Looking forward to the upcoming posts.
Posted on 3/15/10 3:29 AM.
Hi Nate, I'm looking forward to see more of your blog posts. I have looked the alloy-0.1a.zip since you made it available at Symposium and after that followed your work from your svn. The lack of the documentation has slowed down my interest. So documentation is what you need. May be to put own Liferay community with forums and wiki to handle that.
Posted on 3/15/10 7:29 AM.
I found that having gone through some YUI3 stuff at the YUI theater, diving into Alloy was quite straight forward (js-part being YUI3). But I agree with Sampsa, Alloy would benefit a lot from having more documentation as well as forums, wikis and such. I'm sure this is planned to come, hopefully it won't be too far down the road (?). Also, being easily extended by widgets, I think a place for the community to share Alloy widgets would be a great addition to the project (as well as Liferay).
Posted on 3/15/10 8:05 AM.
Hey Nate,

I'm looking forward for the series... specially for AOP, this one I would like to take a closer look.
Posted on 3/15/10 8:38 AM.
very nice! looking forward to the rest of your blogs regarding alloy!
Posted on 3/15/10 9:36 AM.
Looks promising and indeed documentation is much needed Looking forward to more blogs.
Posted on 3/15/10 1:07 PM.
Thank you, Nate. I attended your Webinar. Could you provide examples of AlloyUI use in Liferay 6.0?
Posted on 3/15/10 1:10 PM.
Thank you, Nate.

Alloy UI is beautiful.
Posted on 3/15/10 2:32 PM.
Great news, this is really exciting!

But I didn't find the license. I'd be interested to use it in http://www.myowndb.com (which is open source under the AGPL, find the code at http://github.com/dedomenon ).

The demo pages are quite slow to load, but I guess that'll be corrected before the GA release. Oh, and it's a pitty the charts require flash, I'd prefer to generate SVG charts.

But I'm very enthousiastic about this announcement. Looking forward to the future of this project!

RAph
Posted on 3/18/10 8:13 AM.
AlloyUI seems great. Thank you!. BTW, I'm the author of yui4java, a yui2 java API (based on java2script.sf.net a java to javascript translator similar to GWT). yui4java is a kind of a research project that brings YUI and other known javascript toolkits to java programmers. yui2 java api is almost complete, and now yui3 and yui3 gallery widgets are also ported. I will consider to port alloyIU as well, because, as a java programmer and liferay user, it would be interesting to be able to program all the GUI in java...

I really appreciate the opinion of alloyUI authors about a alloyUI java api inside liferay...

yui4java some demos:

yui2 widgets and utilities demos, with java source code available:
http://yui4java.sourceforge.net/yui/org.sgx.j2s.yui.test.yuidemo.Main.­html

an advance image viewer made with yui and raphaeljs 100% in java:
http://yui4java.sourceforge.net/yui/org.sgx.j2s.imageviewer.gui.ImageViewer­Frame.html
Posted on 6/2/10 7:28 AM.
Hi,

I was trying to implement multiple calendars when date picker is clicked. I could easily do it by changing 'numberOfMonths' in ui.datepicker.js in liferay 5.2.3.

But couldn't trace out in liferay 6.0.2. Could you help me?

Thanks,
Ahamed
Posted on 7/26/10 1:59 AM.
Nate,
I don't see all 10 blog posts that you mention - so perhaps you have covered this elsewhere. Am I missing some?
I am looking for an "exercise" in portlet UI using Alloy. For example I have just worked out how to get something like:
<aui:input name="aDate" value="<%= aDate %>" /> to display a date picker object. - have to add a model-bean tag before it.
however how can I customize this picker -
a) to only display future years or perhaps 50 in the past (eg for year of birth).
b) not display time?

I have looked at the input taglib and cant see how or where it gets date picker code?

Where are these tags documented? or even better narrated?

Thanks
Dave
Posted on 9/1/10 12:32 PM.
An improvised home page for my YUI3 and alloyUI java API is at http://yui4java.sourceforge.net/yui3.

Demos of YUI and alloyUI with java sourcecode included can be found at

http://yui4java.sourceforge.net/yui3/org.sgx.j2s.yui3.test.visual.VisualTester­.html

http://yui4java.sourceforge.net/yui3/org.sgx.j2s.aui.tests.VisualTester.htm­l

java doc with UML diagrams : http://yui4java.sourceforge.net/yui3/javadoc/index.html

project sources: http://yui4java.sourceforge.net/yui3.tar.gz

Remember this is a work in progress project. I'm working to release a final release... Regards
Posted on 9/2/10 6:12 AM in reply to Sebastián Gurin.
Thanks for the extra links although I had seen most of that at the Alloy site always nice to have source code and javadocs.

The main issue is in using the Alloy UI tags within Liferay jsp's and forms especially.

I did identify some of the parameters available through configuring the portlet-model-hints-ext.xml file I added show-time=false which worked and yearRangeStart and yearRangeEnd which didn't work!

I believe you also need to have yearRangeFuture (may already have it to say start form this year) and yearRangeLength, that way fields would always show say next 8 years as the years role by.

What I am not sure is how these properties can be passed to the underlying taglib code through the AUI form tag:

<aui:input name="aDate" value="<%= aDate %>" />

Thanks
Posted on 9/2/10 7:08 AM in reply to Sebastián Gurin.
Can you please give me some tips how to user Alloy outside the Liferay that is in AJAX?
Posted on 10/11/10 10:48 PM.
Is there an easy way to upgrade the YUI version that ships with Liferay to the latest version of YUI? I tried simply replacing the YUI files that ships with Liferay, but it didn't seem to work. Has anyone done this and gotten it to work?

I downloaded Liferay 6.0.5 that ships with YUI 3.2.0PR1. I'd like to upgrade to the most current YUI 3.3.0.
Posted on 1/20/11 11:15 AM.
You can download the latest YUI in http://yuilibrary.com/downloads/#yui3
Posted on 1/20/11 8:27 PM in reply to Jin Joo.
Hi Mani, I did download the latest YUI library (YUI 3.3.0). Then I replaced the YUI files that shipped with Liferay/AlloyUI being careful to leave he AUI files untouched. However, I encountered problems immediately after I did this. The "Add" and "Manage" pulldown menus stopped working. My question is: Has anyone upgraded to YUI 3.3.0 using AlloyUI successfully?
Posted on 1/20/11 8:39 PM in reply to Mani kandan.
Hi jin,
check this link you will find the war file of AlloyUI
http://www.liferay.com/community/forums/-/message_boards/message/7063664?_19_red­irect=%2Fcommunity%2Fforums%2F-%2Fmessage_boards%2Fsearch%3F_19_redirect%3D%252F­community%252Fforums%26_19_breadcrumbsCategoryId%3D0%26_19_breadcrumbsMessageId%­3D0%26_19_searchCategoryId%3D0%26_19_threadId%3D0%26_19_keywords%3Dautocomplete%­2Bin%2BalloyUI
Posted on 1/21/11 12:39 AM in reply to Jin Joo.
Hello, I have the same problem - I need to upgrade YUI but I can't see a good way to do it. Can someone give me advice?
The reason to upgrade is that carousel is not working in IE.
Posted on 2/24/11 6:29 AM in reply to Mani kandan.
Hi Nathan,
Thanks for your great work.

Could you please link your 10 related blog posts to this one ? I currently see no link to the next one to read.

Thanks.
Posted on 3/7/14 6:01 AM.