How can you transition between views containing Scrollviews in Famo.us?

Question

I am looking to re-tool my mobile web application to make use of Famo.us. It's all quite standard with scrollviews embedded in standard surfaces. If anyone could help me figure out how to transition between surfaces containing Scrollviews, I'd sincerely appreciate it.

So far I have a basic series of Scrollviews nested in surfaces and have them transitioning sequentially when clicked. It's based on the RenderController example included in the Famo.us examples Github repo.

var mainContext = Engine.createContext();
var renderController = new RenderController();
var surfaces = [];
var counter = 0;
var temp = [];

for (var i = 0; i < 10; i++) {
    var scrollview = new Scrollview();
    scrollview.sequenceFrom(temp);
    for (var i = 0, temp; i < 40; i++) {
        temp = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });
    temp.pipe(scrollview);
    }
    surfaces.push(scrollview);
}

renderController.show(surfaces[0]);

Engine.on("click", function() {
    var next = (counter++ + 1) % surfaces.length;
    this.show(surfaces[next]);
}.bind(renderController));

mainContext.add(new Modifier({origin: [.5, .5]})).add(renderController);

This results in nothing displayed on the screen bar the header (header is not included in this code example), if i add temp directly to the surfaces object after each iteration however, i get each element of the scrollview displayed individually as a separate surface and can transition between all 40.

If you want to get this question reopened (two more votes needed), I recommend explaining what you've tried in order to accomplish this, what results you're getting, and how they differ from the desired results. Please read this advice on [ask] good questions and Jon Skeet's blog post [Writing the perfect question](http://msmvps.com/blogs/jon_skeet/archive/2010/08/29/writing-the-perfect-question.aspx). Pay special attention to the "Golden Rule", though I highly advise you to read the entire article. — Adi Inbar, Apr 25 '14 at 19:01
I modified my post to clarify the question and highlight the progress made thus far. Hopefully this will suffice. — patrickjquinn, Apr 26 '14 at 17:38

score 2 · Answer 1 · answered Apr 25 '14 at 14:49

2

You must not have seen the examples posted on the GitHub account.. These examples are simple uses for most of the objects, excluding the physics engine.

https://github.com/Famous/examples/tree/master/src/examples

The tab view you are trying to achieve can be easily created using the RenderController class. From the example.js for RenderController..

* RenderController is a dynamic view that can show or hide
* different renerables with transitions.

You simply define the Views you want in the controller and the RenderController shows one view at a time, with any transition you want.

Good Luck!

answered Apr 25 '14 at 14:49

johntraver

3,612
18
17

Thanks or the help, still getting to grips with the syntax of Famo.us, coming from a classic JS, jQuery, Angular background. Found the repo and have amended my post above to reflect the current level of progress and so it isnt considered 'spam'. – patrickjquinn Apr 25 '14 at 18:29
I see you edited the question with help from my answer. So by listview you mean Scrollview? It is still unclear what you are looking for. Did you get your example working? – johntraver Apr 25 '14 at 18:57
Yes sorry, i am getting my platform paradigms mixed up apparently, so the idea is having multiple tabs, each tab contains a Scrollview with elements taken from a JSON object. Think of the tweetus example. Basically build several Scrollviews and add them to the surfaces object and transition between each of these 'surfaces' when a tab is clicked. So far ive managed to get the code example working but it treats each nested element as a surface of its own. Ill put the full code example into jsFiddle and link the results :) – patrickjquinn Apr 25 '14 at 21:00

score 0 · Answer 2 · answered Jan 16 '15 at 15:26

Here is my implementation. I was need it because my scrollView has only 1 huge surface which I wanted to smoothly scroll.

this.scrollTo = function (delta, duration, callback) {
    if (delta == 0) {
        if (callback) callback();
        return;
    }

    for (var i = 0; i < Math.abs(delta) ; ++i) {
        (function (i) {
            setTimeout(function () {
                currentClass.scrollView.setPosition(Math.round(currentClass.scrollView.getPosition()) + Math.sign(delta));
            }, duration / Math.abs(delta) * i);
        })(i);
    }

    setTimeout(function () {
        if (callback) callback();
    }, duration);
};

where currentClass.scrollView is your scrollView

How can you transition between views containing Scrollviews in Famo.us?

2 Answers2