How to activate pages in lifecycle events

General
1

Hello!

When the enteringBackground event is performed, I want the function on the current page to be executed.

If the page is page2 when the enteringBackground event is performed, I would like to execute the {page2} function.

Even if it is not Activated Handler, I want to know if there is a way to do it!

<App>
    <JavaScript>
    var Lifecycle = require('FuseJS/Lifecycle');
    var Observable = require('FuseJS/Observable');

    Lifecycle.on("enteringForeground", function() {
      console.log("on enteringForeground");
    });
    Lifecycle.on("enteringInteractive", function() {
        console.log("on enteringInteractive");
    });
    Lifecycle.on("exitedInteractive", function() {
        console.log("on exitedInteractive");
    });
    Lifecycle.on("enteringBackground", function() {
        console.log("on enteringBackground");
    });

    function page1() {
      console.log('page1 activated');
    }
    function page2() {
      console.log('page2 activated');
    }

    module.exports = {
      page1, page2
    }
    </JavaScript>

    <DockPanel Placed="{placed}">
        <PageControl>
            <Panel>
                <Activated Handler="{page1}" Path="Local"/>
                <Text Value="page1"/>
            </Panel>
            <Panel>
                <Activated Handler="{page2}" Path="Local"/>
                <Text Value="page2"/>
            </Panel>
        </PageControl>
    </DockPanel>
</App>
2

Thank you for taking the time to make a clear, complete, minimal reproduction!

Now, there’s no direct way for you to make the Activated trigger pulse upon lifecycle events, so we need to find a way around this. An obvious choice would be tracking the currently active page, so that you can call the necessary function from JavaScript.

I came up with this, based on your code:

<App>
    <JavaScript>
    var Lifecycle = require('FuseJS/Lifecycle');
    var Observable = require('FuseJS/Observable');

    Lifecycle.on("enteringForeground", function() {
      console.log("on enteringForeground");
    });
    Lifecycle.on("enteringInteractive", function() {
        console.log("on enteringInteractive");
        switch (activeIndex.value) {
            case 0:
                page1();
            break;
            case 1:
                page2();
            break;
            default:
                console.log("unknown active page index: " + activeIndex.value);
            break;
        }
    });
    Lifecycle.on("exitedInteractive", function() {
        console.log("on exitedInteractive");
    });
    Lifecycle.on("enteringBackground", function() {
        console.log("on enteringBackground");
    });

    function page1() {
      console.log("page1 activated");
    }
    function page2() {
      console.log("page2 activated");
    }

    var activeIndex = Observable(0);

    module.exports = {
      page1: page1,
      page2: page2,
      activeIndex: activeIndex
    }
    </JavaScript>

    <DockPanel>
        <PageControl ActiveIndex="{activeIndex}">
            <Panel ux:Name="one">
                <Activated Handler="{page1}" Path="Local"/>
                <Text Value="page1"/>
            </Panel>
            <Panel ux:Name="two">
                <Activated Handler="{page2}" Path="Local"/>
                <Text Value="page2"/>
            </Panel>
        </PageControl>
    </DockPanel>
</App>

Hope this helps!

3

Your advice solved the problem. thank you for helping!