Behavioral components for NativeScript Views

Package implements Strategy pattern to assign behavioral algorithms to NativeScript Views

Goal

The main goal of a project is to separate development process by two stages: desing and coding.

Demo

This repository is a source for npm package nativescript-behavior and a demo NatiteScript application.

Demo App shows how to unlock the NativeScript clicker achievement with Behavior components and without Model-View-ViewModel.

Installation

$ npm install --save joos-inheritance
$ npm install --save nativescript-behavior

Initialize module

To initialize the module you must require() it in your app/app.js:

require("nativescript-behavior");

Create behavioral algorithm

Algorithm is a ConcreteStrategy in terms of Strategy pattern. It must be a "subclass" of main Behavior "class". So, instance of ConcreteBehavior must be instance of main Behavior class.

Concrete behavior code must be in it's own file, it must be available for require() and module must export algorithm in exports.Behavior property.

var JooS = require("joos-inheritance");
var Behavior = require("nativescript-behavior").Behavior;

/**
 * @class ConcreteBehavior
 * @extends Behavior
 */
var ConcreteBehavior = JooS.Reflect(
    Behavior,
    /** @lends ConcreteBehavior.prototype */
    {
        onTap: function() {
            console.log(this.someProperty);
        },
        __constructor: function(contextView) {
            this.__constructor.__parent(contextView);
            this.someProperty = "someValue";
            this.nsObject.addEventListener("tap", this.onTap, this);
        },
        __destructor: function() {
            this.nsObject.removeEventListener("tap", this.onTap, this);
            this.__destructor.__parent();
        }
    }
);

exports.Behavior = ConcreteBehavior;

or

var Behavior = require("nativescript-behavior").Behavior;

var ConcreteBehavior = (function (_super) {
    __extends(ConcreteBehavior, _super);
    function ConcreteBehavior() {
        _super.apply(this, arguments);
        this.someProperty = "someValue";
        this.nsObject.addEventListener("tap", this.onTap, this);
    }

    ConcreteBehavior.prototype.onTap = function() {
        console.log(this.someProperty);
    };

    ConcreteBehavior.prototype.__destructor = function() {
        this.nsObject.removeEventListener("tap", this.onTap, this);
        _super.prototype.__destructor.apply(this, arguments);
    };

    return ConcreteBehavior;
})(Behavior);

exports.Behavior = ConcreteBehavior;

Put this code in ~/components/concreteBehavior.js for example

Create new CSS class for a view-with-behavior

Use a custom joos-behavior style property. It was implemented in this package to assign behaviors to views.

Page {
  joos-behavior: "nativescript-behavior/lib/page"
}

.concrete-behavior {
  joos-behavior: "~/components/concreteBehavior";
}

Put this code in your /app/app.css file

Also, you can assign behavior via concreteView.style.joosBehavior = "~/components/concreteBehavior.js" or concreteView.joosBehavior = "~/components/concreteBehavior.js"

Assign class to a view

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <StackLayout>
    <Button class="concrete-behavior" text="Tap me!" />
  </StackLayout>
</Page>

Behavior will be attached immediately after setting joosBehavior style property and detached after setting this property to undefined

Also, behavior will be detached after Layout.removeChild(contextView); and attached back after Layout.addChild(contextView);

Tap the button

That's it =)

Features

• Behaviors have parents and can interact with its siblings with this.parent.notify(eventData) method.
• Behaviors can add/remove/toggle className of it's nsObject and set/remove attributes value