AlloyUI

 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!

Blogs
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.
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).
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
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.ImageViewerFrame.html
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.html

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
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
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
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
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.
You can download the latest YUI in http://yuilibrary.com/downloads/#yui3
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?
Hi jin,
check this link you will find the war file of AlloyUI
http://www.liferay.com/community/forums/-/message_boards/message/7063664?_19_redirect=%2Fcommunity%2Fforums%2F-%2Fmessage_boards%2Fsearch%3F_19_redirect%3D%252Fcommunity%252Fforums%26_19_breadcrumbsCategoryId%3D0%26_19_breadcrumbsMessageId%3D0%26_19_searchCategoryId%3D0%26_19_threadId%3D0%26_19_keywords%3Dautocomplete%2Bin%2BalloyUI