How can I customize an existing data-win-control?

Question

Hi. I'm trying to figure out how can I give some custom behavior (auto rotate items) to the WinJS.UI.FlipView. Is it possible?.

I've just started creating my own custom UI namespace and trying to derive from WinJS.UI.FlipView but I get confused and I don't really know if its the correct way.

WinJS.Namespace.define("MyApp", {
    UI: {
        FlipView: WinJS.Class.derive(WinJS.UI.FlipView, function (options) {

            .....

        }, {
	   ......
	})
    }
});

Could do you give me some clues?

Thanks a lot.

Answer 1

Hi

Here is the FlipView code sample.

http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4/view/SourceCode

It provide a good way for you purpose.

Thanks

Answer 2

There are no walkthroughs or examples of trying to create your own version of the flip view control.  You should rotate the data before you provide it to the flip view.  It may be possible to create your own flipview class but it would be tedious and you would not have the benefit of the built in controls.

---

Jeff Sanders (MSFT)

Answer 3

Thanks for the responses, I though that could be possible to encapsulate FlipView plus my own customized behavior (autorotate, preview selection, etc) into a new control using inheritance.

Answer 4

You can easily do this.  

WinJS.Namespace.define is just a very thin wrapper around Object.defineProperty.  You can use it directly to modify the Flipview if you want. For example:

Object.defineProperty(WinJS.UI.FlipView.prototype, 'myNewFunction', {
  value: function() {
    console.log("I'm a new FlipView function!");
  }
});

Of course this will mean modifying all FlipViews and perhaps that is not what you want.  You can extend the FlipView in normal JavaScript:

function ExtendedFlipView() {
  WinJS.UI.FlipView.apply(this, arguments);
}

ExtendedFlipView.prototype = WinJS.UI.FlipView.prototype;
ExtendedFlipView.prototype.constructor = ExtendedFlipView;

ExtendedFlipView.prototype.myNewFunction = function() {
  console.log('This has all of the functionality of FlipView, plus more!');
};

I don't know whether you can then use this with the data-win-control html attribute.  I would assume so, since it's just a string. To do this you just need to make it part of the global scope.  I use Application as my top level object and make everything else a property of that.  So I would do something like this:

WinJS.Namespace.defineWithParent(Application, 'ExtendedFlipView', ExtendedFlipView);

Answer 5

Rather than modify the control, what about simply calling 'next' on the control based on a timer.

-Jeff

---

Jeff Sanders (MSFT)

Answer 6

I can confirm that the method I describe above does indeed work.  It's missing one piece though:

WinJS.Utilities.markSupportedForProcessing.(ExtendedFlipView);

That part is required for some reason for it to process the element as a WinControl.