Animating the progress bar

[11年前 に Johh Linton によって更新されました。]

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?

[11年前 に Hitoshi Ozawa によって更新されました。]

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

[11年前 に Johh Linton によって更新されました。]

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.

[11年前 に Hitoshi Ozawa によって更新されました。]

How about the demo source below?

https://github.com/liferay/alloy-ui/blob/master/demos/progressbar/index.html

[11年前 に Johh Linton によって更新されました。]

Hi Hitoshi,

That demo is very useful

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.

[11年前 に Hitoshi Ozawa によって更新されました。]

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.

[11年前 に Johh Linton によって更新されました。]

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

[11年前 に Hitoshi Ozawa によって更新されました。]

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.

[10年前 に Dave Weitzel によって更新されました。]

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

<div id="myProgressBar" class="aui-progress-success"></div>
<script>
YUI().use(
  'aui-progressbar',
  function(Y) {
    new Y.ProgressBar(
      {
        boundingBox: '#myProgressBar',
        label: '25%',
        max: 100,
        min: 0,
        on: {
          complete: function(e) {
            this.set('label', 'Complete!');
          },
          valueChange: function(e) {
            this.set('label', e.newVal + '%');
          }
        },
        value: 25,
        width: 700
      }
    ).render();
  }
);
</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?