Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Johh Linton
Animating the progress bar
March 23, 2013 11:33 PM
Answer

Johh Linton

Rank: New Member

Posts: 6

Join Date: March 23, 2013

Recent Posts

The api docs for the progress bar says that the animation can be done using the animation utility: http://alloyui.com/api/classes/ProgressBar.html

How is this done? Is there a code example?
Hitoshi Ozawa
RE: Animating the progress bar
March 24, 2013 6:20 AM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7954

Join Date: March 23, 2010

Recent Posts

The "real" world example in the Alloy UI page is just showing static values too.

http://alloyui.com/examples/progress-bar/real-world/

Check the yui documents

http://yuilibrary.com/gallery/show/progress-bar

http://lipm-bioinfo.toulouse.inra.fr/download/FATAL/FATAL/web/js/yahoo/examples/progressbar/pb_basic.html
Johh Linton
RE: Animating the progress bar
March 24, 2013 3:48 PM
Answer

Johh Linton

Rank: New Member

Posts: 6

Join Date: March 23, 2013

Recent Posts

The YUI documents you linked are for a gallery component by apipkin and the YUI2 progress bar. Is the alloyui progress bar based on these 2?

I understand that apipkin's progress bar supports animation (by looking at the source), but I have been looking at AlloyUI's progress bar source and it does not seem to have any references to animation besides the comments.
Hitoshi Ozawa
RE: Animating the progress bar
March 24, 2013 9:09 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7954

Join Date: March 23, 2010

Recent Posts

How about the demo source below?

https://github.com/liferay/alloy-ui/blob/master/demos/progressbar/index.html
Johh Linton
RE: Animating the progress bar
March 25, 2013 3:05 AM
Answer

Johh Linton

Rank: New Member

Posts: 6

Join Date: March 23, 2013

Recent Posts

Hi Hitoshi,

That demo is very useful emoticon

Unfortunately, it does not seem to plug the anim module into the progress bar widget at all. Animation is achieved using the async queue, which means we need to do animation manually.

My initial thought was to hope that it supports true animation.

For example, if initially, the progress bar is 0%.
I then set('value', 40) or click the set 50% button.
If the widget takes anim, then it would automatically animate from 0% to 40%. However, it does not seem to have built in anim support as the documentation said.
Hitoshi Ozawa
RE: Animating the progress bar
March 25, 2013 7:17 AM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7954

Join Date: March 23, 2010

Recent Posts

That's why I'm using jQuery. :-)

I tried introducing Alloy UI to some people but they weren't able to get too far with with documentation. Most people were looking to something they can just copy and paste to a jsp file to get the widget working in the widget. It's unfortunate that Alloy UI doesn't have too much other documentation.
Johh Linton
RE: Animating the progress bar
March 25, 2013 3:18 PM
Answer

Johh Linton

Rank: New Member

Posts: 6

Join Date: March 23, 2013

Recent Posts

Hi Hitoshi,

JQuery is good because it offers so much more components and interesting widgets compared to YUI. However, I always felt JQuery to be less centralized. YUI is very nice in that every thing is in one place and almost everything is available through the gallery. The combo loader is very nice too, so that is why I went with YUI for my project.

Having said that, perhaps AUI is a bit young at the moment. In addition, I couldn't really see if there's a way to use AUI components in a YUI project. I guess I will give AUI a miss for now.

Thanks for your help emoticon
Hitoshi Ozawa
RE: Animating the progress bar
March 25, 2013 3:26 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7954

Join Date: March 23, 2010

Recent Posts

Having said that, perhaps AUI is a bit young at the moment. In addition, I couldn't really see if there's a way to use AUI components in a YUI project. I guess I will give AUI a miss for now.


It's been "young" for quite a while. Developers aren't going to use it if they couldn't use it within 10 minutes. Liferay.com now has many new employees and they should ask them to create an actual usable portlet they can upload to Marketplace to see if the documentation and quality meets everybody's standards. If they can't, they should teach the new employee and ask them to update the document and software so the next person will be able to do it. That's what we do.
Dave Weitzel
RE: Animating the progress bar
May 16, 2013 2:44 PM
Answer

Dave Weitzel

Rank: Regular Member

Posts: 187

Join Date: November 18, 2009

Recent Posts

As others have commented the documentation looks great but actually doesn't tell you everything.

How do you add the static a progress bar as described on http://alloyui.com/examples/progress-bar/real-world/ into normal portlet's jsp page?

I realize that the AUI team is moving/has moved a long time ago) into a generic replacement/extension of YUI which I personally feel is a detriment to Liferay as it has taken away their original purpose which was to make creating consistent looking user interfaces in Liferay portlets easy.

This is a classic example.

I have put the following on my page and nothing shows

 1
 2<div id="myProgressBar" class="aui-progress-success"></div>
 3<script>
 4YUI().use(
 5  'aui-progressbar',
 6  function(Y) {
 7    new Y.ProgressBar(
 8      {
 9        boundingBox: '#myProgressBar',
10        label: '25%',
11        max: 100,
12        min: 0,
13        on: {
14          complete: function(e) {
15            this.set('label', 'Complete!');
16          },
17          valueChange: function(e) {
18            this.set('label', e.newVal + '%');
19          }
20        },
21        value: 25,
22        width: 700
23      }
24    ).render();
25  }
26);
27</script>


What am I missing?

Of course this is also another example of Non-responsive user interfaces (fixed width), do we know if we will get a responsive version of AUI with 6.2?