vakrilov

Writing UI plugins for NativeScript

This article will guide you through the process of creating UI plugin and will try to explain new concepts on the way. All the code is in TypeScript and assume you are using NativeScript 3.0 or newer.

In this article you’ll create a simple button plugin to get an idea of how to build your own NativeScript UI plugins.

Before we start we need to create 4 files: my-button.d.ts, my-button-base.ts, my-button.android.ts and my-button.ios.ts.

vakrilov

<StackLayout>
    <ListView [items]="listItems" rowHeight="60" [itemTemplateSelector]="templateSelector">
        <template nsTemplateKey="odd" let-item="item">
            <StackLayout class="odd">
                <Image [src]="item.image"></Image>
                <Label [text]='item.date' textWrap="true" style="padding-left:10;"></Label>
            </StackLayout>
        </template>

        <template nsTemplateKey="even" let-item="item">

vakrilov

import {Directive, ViewContainerRef, TemplateRef, Inject} from '@angular/core';
import {Device, platformNames} from "platform";
import {DEVICE} from "nativescript-angular/platform-providers";

@Directive({ selector: "[ifAndroid]" })
export class IfAndroidDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.android) {
            container.createEmbeddedView(templateRef);
        }

vakrilov

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {Component} from "@angular/core";
import {RouterConfig} from "@angular/router";
import {NS_ROUTER_DIRECTIVES, nsProvideRouter} from "nativescript-angular/router";
import {Page} from "ui/page";
import {Color} from "color";

@Component({
    selector: "my-app",

vakrilov

label {
    vertical-align: center;
    text-align: center;
    color: #3C5AFD;
    font-size: 24;
    margin-bottom: 160;
}

vakrilov

@keyframes fly {
    0%   { transform: translate(0, 0), rotate(0); }
    15%  { transform: translate(60, 0), rotate(10); }
    35%  { transform: translate(-300, 0), rotate(50); }
    36%  { transform: translate(-300, -60), rotate(-30), scale(-0.7, 0.7); }
    60%  { transform: translate(300, -60), rotate(-30), scale(-0.7, 0.7); }
    61%  { transform: translate(300, 0), rotate(50), scale(1,1); }
    100%  { transform: translate(0, 0), rotate(0); }
}

vakrilov

import {Component} from 'angular2/core';

@Component({
    selector: 'app-test',
    template: `
    <ActionBar title="First Page Title"></ActionBar>
    <Button text="Hi there"></Button>
    `
})
export class AppComponent {

vakrilov

<Page loaded="pageLoaded">
  <ActionBar title="Title">
    <GridLayout>        
      <Button text="centerd" horizontalAlignment="center" />
    </GridLayout>
  </ActionBar>

  <StackLayout>
    <Button text="do nothing" />
  </StackLayout>

vakrilov

.title {
    font-size: 30;
    horizontal-align: center;
    margin:20;
}

vakrilov

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
	<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Set the text color used for ActionItems to white-->
    <item name="actionMenuTextColor">#FFFFFF</item>
    
    <!-- ... -->
  </style>
  
  <!-- ... -->