AlloyUI 2.5.0 Released

Community Blogs 2014/04/16 投稿者 Zeno Rocha Staff

 
We are happy to announce the release of AlloyUI 2.5.0! This release can be found on the CDN and via a downloadable .zip archive.
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Also the AlloyUI website has also been updated to reflect the changes in this release.

 

What's new?

It's been 6 months since 2.0.0 so, as you can imagine, lots of things changed since then.

About our dependencies, YUI has been updated from 3.11.0 to 3.16.0 (go to their releases page for changelog). I know you are all excited for Bootstrap 3.0.0, but I must say that we're still using Bootstrap 2.3.2 in this version. You'll need to await for AlloyUI 3 to use Bootstrap 3, but don't worry it will be available sooner than you think (go to master branch to see the work in progress). 

One of the things that we really improved in this release is the API Docs. Since last year we've been working hard to document all classes, attributes and methods. We're now really close from finishing this task (AUI-1048) and you can see the result online at alloyui.com/api.

Lastly, a big refactoring was also done in the entire code base regarding constants. Old browsers (IE) doesn't handle memory for strings in a good way, that's why we used constants for memory optimization which, nowadays, is not a big deal anymore (AUI-1163).

 

Button

  • We fixed a bug that duplicates icon due to labelHTML attribute added by YUI 3.15.0 (AUI-1211);
  • We fixed a bug in the Search Button Cancel when an input was removed from and placed back in DOM (AUI-1161).
 

Carousel

  • A new attribute was introduced to allow you pause the Carousel when mouse is over it (AUI-1192).
 

Collection

  • We fixed a bug where the map hashcode for object could conflict with string hashcode (AUI-1172).
 

Color Picker

  • We fixed a bug when adjusting the value via the slider. The newly selected color didn't get reflected in the results view. In addition, the background color of the slider was being set to colors with a value of less than 100 (AUI-1083);
  • We fixed a bug when user opens the palette for choosing custom color and types something in the HEX value text field, the view updates, but on closing the palette, the value was not being updated (AUI-1091).
 

DataTable

  • We fixed a bug when user edits a selectbox's data and creates an empty option or empty value, it couldn't be saved. Options with empty option-text or value were deleted (AUI-1194);
  • We fixed a bug when user edits a selectbox's data and try to add a new option, it failed. Nothing happened, just an error in the console (AUI-1195).
 

DataType

  • We fixed a bug when the mask which is triggered by an input text box contains "{{%b %e %m}}" and values below 10 were selected, the date which is output was incorrect (AUI-1027).
 

DatePicker

  • We fixed a bug when date disappears from input textbox when choosing the minimumDate (AUI-1177).
     

Diagram Builder

  • We fixed a bug when the browser window are scrollable and you drag a node to bottom of viewport and scroll in the same moment the node moved down to out of viewport (AUI-1203);
  • We fixed a bug when browser redirected page when trying to delete the selected connector (AUI-1191);
  • We fixed a bug where nodes couldn't be deleted (AUI-1111).
 

Event

  • We fixed a bug in the event-input condition for new loader (AUI-1217);
  • We fixed a bug where event-input could not support propertychange properly and cannot detect backspaces on IE9 (AUI-749).
 

Form Builder

  • We fixed a bug when a field defined with hidden attributes was cloned, the cloned field would show these hidden attributes (AUI-1208);
  • We fixed a bug when renaming a field label to contain an HTML tag caused the tag to be inserted in the DOM (AUI-1130);
  • We fixed a bug when correlating input sizes with similar inputs in other places (AUI-1124);
  • We fixed a bug when the option value of an element was changed and the predefined value refers to that value, the radio field would not have a value selected by default (AUI-1034).
 

Image Viewer

  • We fixed a bug when long file names extended beyond viewer (AUI-1175);
  • We fixed a bug when some elements were not visible when the user scrolls down on a page. The position of the elements were inconsistent, some are fixed, others are absolute (AUI-1106).
 

Modal

  • We fixed a bug when listeners after visibleChange were not executed with modal.destroyOnHide enabled (AUI-1107).
 

Pagination

  • We added an option to skip to first or last page (AUI-1264).
 

Palette

  • We fixed a bug when setting objects as items were not working properly (AUI-1033).
 

Popover

  • We decoupled animation logic from tooltip-base to a new widget called Widget Transition (AUI-1162);
  • We fixed a bug when popover would not center align after its first visible toggle (AUI-1096).
 

Rating

  • We fixed a bug when the rate average is a float number was not rounded (corresponding the rounding rules) just the decimal value would be removed (eg.: 1.5 -> 1). So the display of the rate was incorrect (AUI-1250);
  • We fixed a bug that was not allowing the user to navigate via the items using keyboard, nor to press Enter to vote (AUI-1132).
 

Scheduler

  • We updated the Scheduler View Table to show abbreviated weekday names (AUI-1085).
 

Toggler

  • We fixed a bug when absolutely positing elements that end up in an accordian would overflow from their container when sliding (AUI-1105).
 

Tooltip

  • We decoupled animation logic from tooltip-base to a new widget called Widget Transition (AUI-1162);
  • We updated tooltip to stay open when hovering over help box (AUI-1092).
 

Tree

  • We fixed a bug when TreeNode does not show "Load More Results" link (AUI-1156);
  • We fixed a bug when Tree hitarea icon were not changed when treeview was generated from markup (AUI-1141);
  • We fixed a bug when TreeNodeTask should have a state for when one of its children was unchecked (AUI-1138);
  • We fixed a bug when Treeview showed hit-place for dropping when dropping was forbidden (AUI-1114);
  • We added an option to prevent selecting all child nodes in radio and task (AUI-1044).
 

Widget

  • We enabled to use a function as value to widget position (AUI-1178);
  • We fixed a bug when the value of cssClass attribute always came from the config, ignoring the value assigned (AUI-1237);
  • We enabled to use a single value to set show and hide delay on transition (AUI-1179);
  • We decoupled animation logic from tooltip-base to a new widget called Widget Transition (AUI-1162);
 
 

Additional details

There were a total of 280 commits for this upcoming release by 21 contributors. You can check out all the details of this release candidate via the GitHub Comparison to 2.0.0.

Welcome our 6 new contributors: Bruno Coelho (@brunocoelho), István Tóbiás (@istvan-tobias)Maira Bello (@mairatma), Pablo Carvalho (@pablocp), Thiago Rocha (@thiago-rocha), and Travis Cory (@travisc5).

 

Say goodbye to Yogi Alloy

Community Blogs 2014/02/25 投稿者 Zeno Rocha Staff

When we first started AlloyUI 2.0 development we realized that we needed a better build tool for the project. Although Ant could do the job, it was not as fast and easy as NodeJS's solutions. So we decided to switch and rewrite all our automated tasks.

At that time, YUI was using Yogi to automate tasks via command line and as usual we decided to follow their path since our projects share a very similar architecture.

In December 26, 2012 Eduardo Lundgren made the first commit in this new project called Yogi Alloy that provided some common tasks for AlloyUI, Alloy Bootstrap, AlloyUI.com and Alloy API Docs development, since then more than 250 commits have been made.

As time passed by, we realized that we were creating a new task-runner in JavaScript and there were plenty other projects that we could build on top of, specially Grunt the most popular one with lots of plugins.

In July 23, 2013 we released the last version of Yogi Alloy and started focusing our work in Grunt tasks instead. All tasks were ported following similar APIs, new ones have been added, and now it's time to say goodbye to Yogi Alloy.

Our plans is to remove the project from GitHub and NPM in March 20, 2014. So if you're still using Yogi Alloy please try AlloyUI's Grunt tasks instead.

If you have any questions please leave a comment.

AlloyUI Presentation Agenda

Community Blogs 2013/08/06 投稿者 Zeno Rocha Staff

We're very happy to announce several talks focused on the AlloyUI project at Liferay official events. If you're coming to any of those conferences below, enjoy that time to get in touch with our team members!

 

Liferay Developer Conference (Berlin, Germany)

On October, 9-10 will happen the Liferay Developer Conference, the first of its kind. It's going to be specifically targeted at developers and IT technical staff, so be prepared to dive deep, get your hands dirty, and to have a lot of fun! 

Day 1 - Neil Griffin will show how to integrate JSF components with AlloyUI using Liferay Faces Alloy project at 10:00am and Zeno Rocha will be giving the closing keynote about Liferay's 6.2 UI revolution.

Day 2 - Iliyan Peychev will introduce AutoComplete for Velocity and FreeMarker languages at 10:00am, Nate Cavanaugh will talk about responsive web design at 11:00am and Zeno Rocha will give another talk about AlloyUI 2.0 at 11:40am.

More information: liferay.com/web/devcon2013

 

Liferay Symposium Spain (Madrid, Spain)

A week later Liferay's fourth annual Symposium in Spain will be held in Madrid. Iliyan Peychev and Zeno Rocha will be there to represent the AlloyUI team.

More information: liferay.com/web/spain2013

 

Liferay Symposium North America (San Francisco, USA)

From Europe to North America. Join Eduardo Lundgren and Jonathan Mak in a 3-hour workshop that will happen on Sunday, 20th October at 3:00pm about how to use AlloyUI 1.7 on portlet developmentBesides that Nathan Cavanaugh will talk about AutoComplete for Velocity and FreeMarker languages on Monday, 21nd October at 4:10pm. Finally on Tuesday, 22nd October, Nathan will present how Mobile Web Development works in Liferay at 9:50am and Zeno Rocha will be speaking about AlloyUI 2.0  at 10:50am. 

More information: liferay.com/web/northamerica2013

Let's build a better documentation for AlloyUI?

Community Blogs 2013/05/31 投稿者 Zeno Rocha Staff

When I first met the AlloyUI project was a little bit hard to understand all the functionalities it provides without looking to the source code. Then we made a new website that shows how can you use each component with some code snippets.

That was great, but how can you check which are the configuration options available for each component? For instance, you know that there are options like contentBox, height and width on Carousel, but they are not the only one, there are plenty more configurations that you could use.

That's why we have the API Docs, that is generated based on the source code, pretty similar to JavaDoc. The only problem was: most part of the source code doesn't have documentation at all, so the API Docs became outdated :(

We had to change that, so after a couple days of hard work we added the necessary markup for documentation on all attributes, properties and methods. So now we are able to document, we just need to actually explain how each part of the code works.

 

Current Status

At this moment, there's a total of 109 JavaScript files on AlloyUI core.

  • 29 are documented;
  • 64 needs to be documented;
  • 16 can't be documented.

To track what files are documented or not, we made public this status list on Github. If you want to join us on this quest to make AlloyUI better, make sure to check this list to find out what needs to be done.

 

Contributing

Let's say you want to help and just discovered that aui-autocomplete.js needs documentation. If you navigate through the code you'll see a lot of attributes, properties or methods that doesn't have description yet, for example:

All you need to do is understand what that piece of code stands for, explain it and send a pull request :)

 

Bonus

Additionally, if you have Yogi Alloy installed and want to check how the documentation will look in the website, you can run ya api-watch to generate the API Docs locally and watch for any changes.

 

New Theme

Together with all those new things, we're also introducing today a new theme for API Docs! Forget the old one:

And start using the new one today!

Conclusion

This task can't be done by a single person, there's a lot of code to document and we need your help. Here, at Liferay Brazil, we started this thing called Daily Docs, so everyday at 5pm an alarm rings and we need to stop everything to spend 10 minutes improving the documentation of a certain component. Those kind of initiatives could be very helpful, so if you care about this project, please join us :)

AlloyUI and the importance of CDN

Staff Blogs 2013/03/04 投稿者 Zeno Rocha Staff

Some weeks ago we announced the preview release of AlloyUI 2.0. One of the cool things about it is that now we have a pretty new CDN (Content Delivery Network). So instead of downloading AlloyUI to use in your local environment, you just to need copy and paste this line of code and start using it.

	<script src="http://cdn.alloyui.com/2.0.0pr2/aui/aui-min.js"></script>

But it was only available for AlloyUI 2.0, which is not integrated with Liferay yet, then Liferay community wouldn't benefit from it.

That's why today we have some news to share, all versions of AlloyUI are now available on CDN to use in production or to download as a zip file \o/

PS: Check this table if you don't know which version is being used by Liferay.

 

Why it's so important to use a file hosted on a CDN?

Basically for performance improvements, we'll dig into some of them.

 

Decrease latency

Let's say you are in China and your server is in Los Angeles. When you load a file the browsers sends a HTTP request that will go across the globe until reach your server and, as you can see, it takes time.

However if this file is hosted on a CDN it will be distributed across many different servers in the world. So when you make a request, it will look for the nearest server, which decreases latency time a lot.

Wikipedia: (Left) Traditional scheme of distribution - (Right) CDN scheme of distribution

 

More parallel downloads

Browsers can't handle too many parallel downloads per domain.

That's why hosting files in different domains is a good performance tip.

 

Cache

Let's say you visited a website that uses AlloyUI hosted on CDN, as soon as you load it your browser will automatically cache it in your machine. Then if you visit another website that uses AlloyUI too, you don't need to download all those files again because you already have cached them.

 

What's the real benefit?

Let's try those performance improvements in real life. My experiment will load the exact same file using a CDN and don't using it.

Didn't use CDN:

When you load this file, that is not hosted on a CDN with a 10mb internet connection, you take 1.27 seconds with 404ms of latency.

Use CDN:

But when you load this file, that is now hosted on a CDN with the same internet connection, you take 314ms with 155ms of latency.

That's a 75% decrease and this is only one file!

Now imagine a lot of modules and its dependencies being loaded, it will cause a significant difference.

 

Conclusion

And that's all folks! If you have any questions please comment below :)

I'm the #50 most active contributor on Github, so what?

Staff Blogs 2013/01/09 投稿者 Zeno Rocha Staff

OctoParty

Today, Paul Miller released a nice list of the ”Most active GitHub users”.

People started to talk about it and suddenly I received a lot of congratulations messages for being the #50 most active contributor on Github.

I was pretty happy because this is a chance to show how Liferay employees are strong in the open source community. But I was mostly surprised, since there’s almost 2 million users on Github and even because Linus Torvalds, creator of Linux, was behind me!

That was pretty nice for my ego, but let me explain what this ranking means for me.

Quantity != Quality

The first thing is, I’m not better than anyone.

Just because I made 100 commits more than Linus, it doesn’t make me a better contributor than him. Actually I could do 10,000 commits more than him and I would still not being a better contributor.

The only thing that these numbers shows is: those people on the list put a lot of effort on open source using Github.

And this is true, I've been working hard on the new AlloyUI and many other projects out there.

People just don’t get “commits”

We all have a lot of tasks to do daily, so how to deal with them using Git?

Let’s say you have a task called “Redesign my blog”.

Some people start coding it, making a lot of changes and when it’s finished: git add . && git commit -m "Redesigned my blog".

This is so wrong. What happens if you want to revert just a single improvement that was not so good there? You’ll need to revert the whole commit.

That’s why you have to break your tasks into sub tasks. It seems like a basic thing, but people just don’t do it.

1st place

If I had to guess who’s going to be in the top of this list, that would be TJ (@visionmedia).

He’s doing an incredible job in the NodeJS community, so congratulations man, you deserve it :)

該当件数: 6 件
ページごとのアイテム数 20
/ 1