Project

General

Profile

Trying to use WAnimation to make new rows of a WTableView fade-in

Added by Tristan Lanfrey about 11 years ago

Hi,

I'm trying to get new rows added to a WTableView's model to fade-in. My approach is to hijack (ok, re-use) the StyleClassRole data to hold a Wt::WAnimation. So whwnever I have some new data to add to my model, I do something like:

      std::vector<Wt::WStandardItem *> items;
      items.reserve(this->columnCount());
      std::generate_n(std::back_inserter(items), this->columnCount(),
                      bl::bind(bl::new_ptr<Wt::WStandardItem>())); // that's boost lambda here
      BOOST_FOREACH(Wt::WStandardItem* item, items)
      {
        // set whatever relevant data in DisplayRole
        // ...
        // tell delegate we want to fade-in 
        item->setData(Wt::WAnimation(Wt::WAnimation::Fade,
                                     Wt::WAnimation::EaseInOut),
                      Wt::StyleClassRole);
      }
      this->invisibleRootItem()->appendRow(items);

I have implemented a delegate that derives from WItemDelegate and basically wraps WItemDelegate::update():

      Wt::WWidget* AnimatedItemDelegate::update(Wt::WWidget* widget,
                                                const Wt::WModelIndex& index,
                                                Wt::WFlags<Wt::ViewItemRenderFlag> flags)
      {
        Wt::WWidget* w = Wt::WItemDelegate::update(widget, index, flags);

        const boost::any data = index.data(Wt::StyleClassRole);
        if (!data.empty() && (data.type() == typeid(Wt::WAnimation)))
        {
          w->animateShow(boost::any_cast<Wt::WAnimation>(data));
        }
        return w;
      }

Using this delegate for my WTableView I thought that whenever new data was to be displayed it would fade-in. But it's not.

Any idea how this fade-in could be done for the contents of a WTableView (and/or a WTreeView while we're at it)?

Also, bonus question: is there something in Wt to allow a a background color transition? If yes, can it be combined with a WAnimation?

I guess this could be done via some Javascript magic, but I have no idea where to start, any pointers?

Thanks!


Replies (1)

RE: Trying to use WAnimation to make new rows of a WTableView fade-in - Added by Koen Deforche almost 11 years ago

Hey,

I just tried what you did and that works for me (it should work equally well in a WTreeView I guess). So I'm not sure why it does not work in your case. Just to be sure: it should only work with CSS3-capable browsers (WebKit/Firefox).

As to the second question: Wt uses a number of style classes to do the animation and uses CSS3 animations. But the easier technique to extend is using CSS3 transitions (which are slightly different). See also here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

You then need to make sure you add (or remove) a style class on a widget that changes the background-color, while the widget has a 'transition: background-color' set.

Regards,

koen

    (1-1/1)