フォーラム

ホーム » Alloy UI » English

構造的に表示 平面上に表示 ツリー上に表示
スレッド [ 前へ | 次へ ]
toggle
Johh Linton
Animating the progress bar
2013/03/23 23:33
答え

Johh Linton

ランク: New Member

投稿: 6

参加年月日: 2013/03/23

最近の投稿

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
2013/03/24 6:20
答え

Hitoshi Ozawa

ランク: Liferay Legend

投稿: 7990

参加年月日: 2010/03/23

最近の投稿

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
2013/03/24 15:48
答え

Johh Linton

ランク: New Member

投稿: 6

参加年月日: 2013/03/23

最近の投稿

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
2013/03/24 21:09
答え

Hitoshi Ozawa

ランク: Liferay Legend

投稿: 7990

参加年月日: 2010/03/23

最近の投稿

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
2013/03/25 3:05
答え

Johh Linton

ランク: New Member

投稿: 6

参加年月日: 2013/03/23

最近の投稿

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
2013/03/25 7:17
答え

Hitoshi Ozawa

ランク: Liferay Legend

投稿: 7990

参加年月日: 2010/03/23

最近の投稿

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
2013/03/25 15:18
答え

Johh Linton

ランク: New Member

投稿: 6

参加年月日: 2013/03/23

最近の投稿

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
2013/03/25 15:26
答え

Hitoshi Ozawa

ランク: Liferay Legend

投稿: 7990

参加年月日: 2010/03/23

最近の投稿

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
2013/05/16 14:44
答え

Dave Weitzel

ランク: Regular Member

投稿: 186

参加年月日: 2009/11/18

最近の投稿

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?