child-page.js

var pageModule = require("ui/page");
var stackModule = require("ui/panels/stack-panel");
var buttonModule = require("ui/button");
var labelModule = require("ui/label");
var geometryModule = require("utils/geometry");
var enums = require("ui/enums");
var colorModule = require("color");

var frameModule = require("ui/frame");
var applicationModule = require("application");

//Create a specific native class, that will get passed to the custom button, added to the navbar:
var EventHandler = NSObject.extend(
                                    {
                                        clicked: function() { console.log("Right button is doing an action!"); }
                                    },
                                    {
                                        exposedMethods: { clicked: "v" }
                                    }
                                );

function createPage() {
    var titleLabel = new labelModule.Label();
    titleLabel.horizontalAlignment = enums.HorizontalAlignment.center;
    titleLabel.margin = new geometryModule.Thickness(20, 20, 20, 20);
    titleLabel.text = "Child page";

    var btn = new buttonModule.Button();
    btn.text = "BACK";
    btn.horizontalAlignment = enums.HorizontalAlignment.center;
    btn.on("click", function () {
        frameModule.topmost().goBack();
    });


    var panel = new stackModule.StackPanel();
    panel.style.backgroundColor = new colorModule.Color("#ff0000");
    panel.addChild(titleLabel);
    panel.addChild(btn);

    var page = new pageModule.Page();
    page.content = panel;

    if (applicationModule.ios) {

        var theNavBarController = frameModule.topmost().ios.controller;
        var theNavBar = theNavBarController.navigationBar;

        //Play with the attributes of the NavBar:
        theNavBar.tintColor = new colorModule.Color("#FFFF00").ios;
        theNavBar.barStyle = UIBarStyle.UIBarStyleBlack;

        //Change the text in the middle of the navbar:
        page.ios.title = "My Page";

        // ********************************************
        // Add a button to the right side of the navbar
        // ********************************************

        //Create an instance of the EventHandler native class;
        // Set it as a property of the page so that it does not get GC-ed:
        page.forwardButtonHandler = EventHandler.alloc().init();

        // Create the button and set it as a rightBarButtonItem:
        var barForwardButton = UIBarButtonItem.alloc().initWithTitleStyleTargetAction("DO AN ACTION!", UIBarButtonItemStyle.UIBarButtonItemStyleBordered, page.forwardButtonHandler, NSSelectorFromString("clicked"));
        page.ios.navigationItem.rightBarButtonItem = barForwardButton;
    }

    return page;
}
exports.createPage = createPage;