DEV Community: Alex Ziskind

How to Add Shadows in NativeScript iOS Apps

Alex Ziskind — Sat, 30 Nov 2019 19:17:12 +0000

In this NativeScript tutorial, I'll show you five native iOS properties you can alter to create any kind of shadow in your iOS NativeScript apps.

If you prefer a video of the tutorial, here it is:

Introduction

In NativeScript 6, elevation for Android was enabled but this is still not supported in iOS. In this article, we'll show you a way in which you can create shadows in your NativeScript iOS applications. We'll look at 5 properties that you can use to create Native shadows for any view on iOS. We'll also see how you can create custom shapes from shadows. With these techniques, you'll be able to create shadows of any shape, size and depth.

Let's Get Right to It!

Starting out, we have the following simple app containing a button and two labels.

The code:

<!-- main-page.xml -->

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
  <Page.actionBar>
    <ActionBar title="My App" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>

  <StackLayout class="p-20">
    <Label text="Tap the button" class="h1 text-center"/>
    <Button text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>
    <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
  </StackLayout>
</Page>

// main-page.ts

import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { HelloWorldModel } from "./main-view-model";

export function navigatingTo(args: EventData) {
  const page = <Page>args.object;
  page.bindingContext = new HelloWorldModel();
}

// app.css

@import '~nativescript-theme-core/css/core.light.css';

.btn {
  font-size: 18;
}

We'll add a shadow to the button.

Let's start by adding a loaded event to our button:

<Button loaded="onBtnLoaded" text="TAP" tap="{{ onTap }}" class="btn btn-primary btn-active"/>

Next, install the following plugin. It contains type information about the native platforms as exposed by the NativeScript framework.

$ npm i tns-platform-declarations --save-dev

Before you can use the plugin, create a reference.d.ts file in the root directory of your project and add the following references:

// references.d.ts

/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />

Then add the following settings to your tsconfig.json file. We want to skip type checking of the declaration files since they are huge files and so will slow down builds.

// tsconfig.json

"compilerOptions": {
  ...
  "skipLibCheck": true
  ...
}

Now we can get started with adding a shadow for the button. We'll do it by manipulating the following 5 properties:

1 of 5: Color

Let's start with setting the shadow's color. There are different ways that we can set the color. We can use the Color module from the NativeScript framework as shown below.

// main-page.ts

import { EventData } from "tns-core-modules/data/observable";
import { Page, View } from "tns-core-modules/ui/page";
import { HelloWorldModel } from "./main-view-model";
import { isIOS } from "tns-core-modules/platform";
import { Color } from "tns-core-modules/color";

export function navigatingTo(args: EventData) {
  const page = <Page>args.object;
  page.bindingContext = new HelloWorldModel();
}

export function onBtnLoaded(args: EventData) {
  const view = args.object as View;

  if (isIOS) {
    const iosUIView = view.ios as UIView;
    iosUIView.layer.shadowColor = new Color('black').ios.CGColor;
  }
}

We use isIOS to ensure the code doesn't crash on Android since we are executing code that is specific to the iOS platform. After getting the NativeScript color, we convert it to an iOS color.

You can also get an iOS color using UIColor as shown below.

export function onBtnLoaded(args: EventData) {
  const view = args.object as View;

  if (isIOS) {
    const iosUIView = view.ios as UIView;
    iosUIView.layer.shadowColor = UIColor.blackColor.CGColor;
  }
}

2 of 5: Opacity

Next, let's set an opacity for the shadow.

export function onBtnLoaded(args: EventData) {
  const view = args.object as View;

  if (isIOS) {
    const iosUIView = view.ios as UIView;
    iosUIView.layer.shadowColor = UIColor.blackColor.CGColor;
    iosUIView.layer.shadowOpacity = .5;
  }
}

Setting the color and opacity are the minimum requirements needed to create a shadow. Let's see what we have so far:

Let's make the shadow a bit more visible:

iosUIView.layer.shadowOpacity = 1;

3 of 5: Radius

Next, let's add a radius to the shadow. A large value gives a more diffused shadow:

export function onBtnLoaded(args: EventData) {
  const view = args.object as View;

  if (isIOS) {
    const iosUIView = view.ios as UIView;
    iosUIView.layer.shadowColor = UIColor.blackColor.CGColor;
    iosUIView.layer.shadowOpacity = 1;
    iosUIView.layer.shadowRadius = 40;
  }
}

A smaller radius gives a tighter shadow:

iosUIView.layer.shadowRadius = 4;

4 of 5: Offset

Below, we set an offset on the shadow. This moves the shadow some distance away from the view.

export function onBtnLoaded(args: EventData) {
  const view = args.object as View;

  if (isIOS) {
    const iosUIView = view.ios as UIView;
    iosUIView.layer.shadowColor = UIColor.blackColor.CGColor;
    iosUIView.layer.shadowOpacity = 1;
    iosUIView.layer.shadowRadius = 4;
    iosUIView.layer.shadowOffset = CGSizeMake(10, 10);
  }
}

5 of 5: Path

To finish off, let's look at the shadow path. We can use this to draw different shapes.

export function onBtnLoaded(args: EventData) {
  const view = args.object as View;

  if (isIOS) {
    const iosUIView = view.ios as UIView;
    iosUIView.layer.shadowColor = UIColor.blackColor.CGColor;
    iosUIView.layer.shadowOpacity = 1;
    iosUIView.layer.shadowRadius = 4;
    iosUIView.layer.shadowOffset = CGSizeMake(10, 10);
    iosUIView.layer.shadowPath = UIBezierPath.bezierPathWithRect(CGRectMake(1, 1, 200, 200)).CGPath;
  }
}

The above code creates a square shadow.

As you can see, the shadow is a different shape from the button.

Let's see how we can create a different shaped view that has a shadow shaped in the same way. Modify the code as shown:

We start off by turning the button into an octagon:

<!-- main-page.xml -->

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
  <Page.actionBar>
    <ActionBar title="My App" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>

  <StackLayout class="p-20">
    <Label text="Tap the button" class="h1 text-center"/>
    <Button text="TAP" tap="{{ onTap }}" class="button"/>
    <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
  </StackLayout>
</Page>

// app.css

@import '~nativescript-theme-core/css/core.light.css';

.button {
  font-size: 18;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  background-color: brown;
  height: 200;
  weight: 200;
  color: white;
}

We set a polygon clip-path on the button that gives it an octagon shape.

To add a similarly shaped shadow to the view, modify the code as shown.

<!-- main-page.xml -->

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
  <Page.actionBar>
    <ActionBar title="My App" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>

  <StackLayout class="p-20">
    <Label text="Tap the button" class="h1 text-center"/>
    <AbsoluteLayout>
      <Label loaded="onShadowLoaded" class="shadow"/>
      <Button text="TAP" tap="{{ onTap }}" class="button"/>
    </AbsoluteLayout>
    <Label text="{{ message }}" class="h2 text-center" textWrap="true"/>
  </StackLayout>
</Page>

// app.css

@import '~nativescript-theme-core/css/core.light.css';

.shadow {
  height: 1;
  width: 1;
  background-color: white;
}

.button {
  font-size: 18;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  background-color: brown;
  height: 200;
  weight: 200;
  color: white;
}

// main-page.ts

import { EventData } from "tns-core-modules/data/observable";
import { Page, View } from "tns-core-modules/ui/page";
import { HelloWorldModel } from "./main-view-model";
import { isIOS } from "tns-core-modules/platform";
import { Color } from "tns-core-modules/color";

export function navigatingTo(args: EventData) {
  const page = <Page>args.object;
  page.bindingContext = new HelloWorldModel();
}

export function onShadowLoaded(args: EventData) {
  const view = args.object as View;

  if (isIOS) {
    const iosUIView = view.ios as UIView;
    iosUIView.layer.shadowColor = UIColor.blackColor.CGColor;
    iosUIView.layer.shadowOpacity = .7;
    iosUIView.layer.shadowRadius = 8;
    iosUIView.layer.shadowOffset = CGSizeMake(2, 2);
    iosUIView.layer.shadowPath = UIBezierPath.bezierPathWithCGPath(polygonPath(100, 100, 120, 8, 22)).CGPath;
  }
}

function radians(a) {
  let b = Math.PI * a / 180;
  return b;
}

function polygonPointArray(sides: number, x: number, y: number, radius: number, offset: number): CGPoint[] {
  let angleT = (360 / sides);
  let angle = radians(angleT);
  let cx = x; // x origin
  let cy = y; // y origin
  let r = radius; // radius of circle
  var i = 0;
  var points: CGPoint[] = [];
  while (i <= sides) {
    let xpo = cx + r * cos(angle * i - radians(offset));
    let ypo = cy + r * sin(angle * i - radians(offset));
    points.push(CGPointMake(xpo, ypo));
    i++;
  }
  return points;
}

We place the button inside an absolute layout and also add a Label. We'll create a shadow on this label, so we removed the loaded event from the button and put one on the label, then in main-page.ts, we implement the event handler.

If you run the app, you'll see the octagonal view with a similarly shaped shadow.

We hope you've enjoyed this short tutorial. We are creating a series of iOS-focused NativeScript tutorials, so look out for those. Here are some of the posts in the series. We'll be adding to the collection in the coming weeks.

How to Add SHADOWS in iOS
How to Use iOS Large Titles
How to Create iOS Podcast Cover Art Animation with Inheriting Shadow Color
How to Use iOS Collapsing SearchBar
Translucent Tabs in iOS

Let me know what you thought of this tutorial on Twitter: @digitalix or leave a comment down below. You can also send me your NativeScript related questions that I can answer in video form. If I select your question to make a video answer, I'll send you swag. Use the #iScriptNative hashtag.

For more tutorials on NativeScript, check out our courses on NativeScripting.com. We have a NativeScript Hands-On UI course that covers NativeScript user interface, views and components. You might also be interested in the following two courses on styling NativeScript applications: Styling NativeScript Core Applications and Styling NativeScript with Angular Applications.

How to Vertically Center Label Text in NativeScript Android

Alex Ziskind — Mon, 28 Oct 2019 17:38:23 +0000

The verticalAlignment property doesn't work with Label text in Android in your NativeScript apps. So how do you vertically center text in a NativeScript Label on Android? This short tutorial will show you a workaround that will accomplish this.

If you prefer watching a video of this tip, here it is:

Okay, Let's Do This

On Android, the vertical-align CSS property doesn't quite work for NativeScript Labels when it comes to centering text. This is really annoying, especially because it DOES work on iOS. Let's see how we can resolve this to get a consistent look across the two platforms.

First, let's look at the demo app.

Here's the code:

<!-- main-page.xml -->

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">

  <Page.actionBar>
    <ActionBar title="My App" icon="" class="action-bar">
    </ActionBar>
  <Page.actionBar>

  <StackLayout class="p-20">
    <Label text="Tap the button" class="h1 text-center" />
  </StackLayout>
</Page>

Notice we are using NativeScript theme classes here (h1 text-center).

And the styling:

// app.css

import '~nativescript-theme-core/css/core.light.css';

Label {
  background-color: aqua;
  height: 200;
  width: 300;
}

Here's the resulting app on iOS and Android:

As you can see, on iOS the label's text is centered vertically and horizontally while on Android it is centered horizontally but not vertically.

Let's try removing the text-center coming from the theme and see what we get.

<Label text="Tap the button" />

By removing text-center we've lost horizontal centering on both platforms. Let's try adding this back by using text-align in our styles:

Label {
  background-color: aqua;
  height: 200;
  width: 300;
  text-align: center;
  font-size: 30
}

With that, we get the same result as before:

To center the Android text vertically, you might think that setting a vertical-align: middle rule might work, but it wont. Neither will applying verticalAlign="middle" or verticalAlign="center" or verticalAlignment="middle" or verticalAlignment="center" attributes to the label.

As you can see, it's not so straightforward to get the Android Label's text to align vertically. To work around this, first add a loaded event on the Label.

<Label text="Tap the button" class="h1 text-center" loaded="onLabelLoaded" />

Then add the following to the Page's code file:

// main-page.ts

...
import { Label } from 'tns-core-modules/ui/label';
import { isAndroid } from 'tns-core-modules/platform';

...

export function onLabelLoaded(args: EventData) {
  const lbl = args.object as Label;
  if (isAndroid) {
    lbl.android.setGravity(17)
  }
}

In onLabelLoaded(), we first check to see if the code is running on Android and then set a gravity of 17 on the label (which we get from the event object that was passed into the function). setGravity() places an object within a potentially larger container, with the placement determined by the constant passed in. We pass the constant 17 into setGravity(), which will center the text, both vertically and horizontally, in its container (i.e. the Label). You can look at the documentation for other constants you can use.

Now if you run the app, the label's text should be aligned both vertically and horizontally on the two platforms:

And that's it! Hope you found that useful.

For more NativeSript tutorials, be sure to check out NativeScripting.com. We offer NativeScript courses for NativeScript Core, Angular and Vue.

Let me know if you enjoyed this tutorial on Twitter: @digitalix or comment down below. You can also send me your NativeScript related questions that I can answer in video form. If I select your question to make a video answer, I'll send you swag. Use the hashtag #iScriptNative.

When Should You Use Observable Arrays in NativeScript Core, Angular, and Vue?

Alex Ziskind — Mon, 07 Oct 2019 16:55:25 +0000

Typically we bind the ListView and Repeater components to a JavaScript array in NativeScript, but it's not always clear when you should use a regular JavaScript array or ObservableArray. What is so observable about it anyway? That's what we're going to find out here.

If you prefer watching a video of the tutorial instead, check it out below.

ObservableArray extends the functionality of the base JavaScript Array by providing the capability to detect and respond to changes of a collection of objects. It supports known Array methods such as concat, push, reduce, slice, splice, reverse etc.

In this article, we'll compare 3 apps—in NativeScript Core, Angular, and Vue—and show you which require the ObservableArray.

NativeScript Core

First up is NativeScript Core.

For the demo apps, we have 3 different flavors of the following app:

In the XML file, we have a simple UI with a Button and a ListView that is bound to itemsObs.

<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="navigatingTo"
  class="page">

  <StackLayout class="p-20">
      <Button text="Tap the button" tap="{{ onTap }}" class="btn btn-primary btn-active" />

      <ListView items="{{ itemsObs }}">
          <ListView.itemTemplate>
              <Label text="{{ $value }}" />
          </ListView.itemTemplate>
      </ListView>
  </StackLayout>

</Page>

Next, let's take a look at the View Model:

import { Observable } from 'tns-core-modules/data/observable';
import { ObservableArray } from 'tns-core-modules/data/observable-array';

export class HelloWorldModel extends Observable {

    // public items = ['item1', 'item2'];
    public itemsObs = new ObservableArray(['item1', 'item2']);

    private counter = 3;

    constructor() {
        super();
    }

    public onTap() {
        const newItem = 'item' + this.counter++;
        // this.items.push(newItem);
        this.itemsObs.push(newItem);
    }
}

We instantiate an ObservableArray object itemsObs with two strings. We then wire up onTap() to push a new string onto the ObservableArray when called. The result is that every time the button is tapped, an item will be added to the ListView. This happens because the array is Observable.

What Does that Mean Anyway?

An Observable emits items or sends notifications to its observers/subscribers when an event happens. In our case, the observer is the ListView that is bound to the ObservableArray and the event is a change in the data store. So whenever the data changes, the UI is notified and updates itself accordingly (adds an item to the ListView in our case). Very nifty, don't you think?

But Can't You Just Use a Regular Array?

Well, I'm glad you asked. Let's do a little experiment.

We are going to switch out our ObservableArray object for a regular array:

export class HelloWorldModel extends Observable {

    public items = ['item1', 'item2'];
    // public itemsObs = new ObservableArray(['item1', 'item2']);

    ...

    public onTap() {
        const newItem = 'item' + this.counter++;
        this.items.push(newItem);
        // this.itemsObs.push(newItem);
    }
}

Don't forget to make the change in the XML file:

<ListView items="{{ items }}">

If you run the app now, you will find that there is no change to the UI when the button is tapped. Items are getting added to the items array with each tap, but the change isn't reflected in the UI. There's nothing notifying the UI that things have changed.

NativeScript Angular

Moving on to NativeScript Angular...

Let's quickly look at the initial code:

<StackLayout>

  <Button (tap)="onTap()" class="btn btn-primary" style="background-color:red;"
    text="Tap the button"></Button>

  <ListView [items]="itemsObs">
      <ng-template let-item="item">
          <Label [text]="item"></Label>
      </ng-template>
  </ListView>

</StackLayout>

View Model:

import { Component } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";

@Component({
    selector: "ns-app",
    moduleId: module.id,
    templateUrl: "./app.component.html"
})
export class AppComponent {

    private counter = 3;

    // public items = ['item1', 'item2'];
    public itemsObs = new ObservableArray(['item1', 'item2']);

    public onTap() {
        const newItem = 'item' + this.counter++;
        // this.items.push(newItem);
        this.itemsObs.push(newItem);
    }
}

It's basically the same code we had previously, so we won't go over it again.

Note that we use the same ObservableArray as we did previously; from the tns-core-modules/data/observable-array module. We aren't using RxJS Observable.

If you take a look at the running app, you will see that the ListView updates with new items when you tap the button.

Using a Regular Array

Again, let's switch out the ObservableArray for a regular array and see what happens:

export class AppComponent {

    private counter = 3;

    public items = ['item1', 'item2'];
    // public itemsObs = new ObservableArray(['item1', 'item2']);

    public onTap() {
        const newItem = 'item' + this.counter++;
        this.items.push(newItem);
        // this.itemsObs.push(newItem);
    }
}

<ListView [items]="items">

If you test out the app, you will find that the ListView updates with new items when you tap the button. So with Angular, you don't need to use ObservableArray, you can just use a regular Array and save yourself the overhead of using the former.

NativeScript-Vue

Now onto our final experiment with NativeScript-Vue.

Again, the code:

<template>
    <Page>
        <ActionBar title="Welcome to NativeScript-Vue!" />
        <StackLayout>
            <Button @tap="onTap" class="btn btn-primary" :text="Tap the button"></Button>

            <ListView for="item in itemsObs">
                <v-template>
                    <Label :text="item" />
                </v-template>
            </ListView>
        </StackLayout>
    </Page>
</template>

<script lang="ts">
import { ObservableArray } from "tns-core-modules/data/observable-array";

    export default {
        data() {
            return {
                counter: 3,
                // items: ["item1", "item2"],
                itemsObs: new ObservableArray(["item1", "item2"])
            };
        },

        methods: {
            onTap() {
                const newItem = "item" + this.counter++;
                // this.items.push(newItem);
                this.itemsObs.push(newItem);
            }
        }
    };
</script>

<style scoped>
    ...
</style>

Run the app, and as usual tapping the button adds items to the ListView.

Using a Regular Array

Let's see what effect we'll get by using a regular array in the Vue app:

<template>
    <Page>
        <ActionBar title="Welcome to NativeScript-Vue!" />
        <StackLayout>
            <Button @tap="onTap" class="btn btn-primary" :text="Tap the button"></Button>

            <ListView for="item in items">
                <v-template>
                    <Label :text="item" />
                </v-template>
            </ListView>
        </StackLayout>
    </Page>
</template>

<script lang="ts">
import { ObservableArray } from "tns-core-modules/data/observable-array";

    export default {
        data() {
            return {
                counter: 3,
                items: ["item1", "item2"],
                // itemsObs: new ObservableArray(["item1", "item2"])
            };
        },

        methods: {
            onTap() {
                const newItem = "item" + this.counter++;
                this.items.push(newItem);
                // this.itemsObs.push(newItem);
            }
        }
    };
</script>

<style scoped>
    ...
</style>

Test the app and you'll find that the ListView does update with new items on tapping the button, so in Vue, you also don't need the ObservableArray.

In Summary

From what we've seen, you only need to use ObservableArray when using NativeScript Core. For Angular and Vue, you can just use the regular Array.

For more video tutorials about NativeScript, check out our courses on NativeScripting.com. We cover all flavors of NativeScript—Core, Angular and Vue.

Let me know what you thought of this tutorial on Twitter: @digitalix or leave a comment here. You can also send me your NativeScript related questions that I can answer in video form. If I select your question to make a video answer, I'll send you swag. Use the #iScriptNative hashtag.

NativeScript-Vue Class Components Examined

Alex Ziskind — Fri, 27 Sep 2019 02:29:10 +0000

Using class components in NativeScript-Vue with TypeScript? You need to know these five things. Warning: strong personal opinions follow, but there is no swearing ;)

Right Direction
Class Component Scaffolding
Five Things About Class Components in NativeScript-Vue
Related Videos

First, we're moving in the right direction...

Not only did NativeScript-Vue recently get TypeScript support, but as of version 5.2 of the NativeScript CLI, Vue is an officially supported UI library that can be used right out of the box. Yes, you can create and manage NativeScript-Vue apps using nothing but the NativeScript CLI.

But...

I was a bit surprised that after such a great addition to NativeScript-Vue by a community member (the addition of TypeScript support by Manuel Saelices), that the official version completely lacks TypeScript support for Vue at this time. I'm sure this will change very soon though.

Luckily, we can still use the Vue CLI to scaffold out our NativeScript apps. See this post for details on how to do this or you can watch the first video listed below in the Videos section.

Class Component Scaffolding

If you are here, then you must already have created a NativeScript-Vue app with TypeScript using the Vue CLI, and you've already installed vue-class-component and vue-property-decorator as dependencies. If not, then please see the start of this post.

Class component .vue files aren't that different from their object notation .vue files.

Here's an example we'll be working with:

<template>
  <StackLayout class="form">
    <StackLayout class="input-field">
      <Label text="First Name" class="label font-weight-bold m-b-5"/>
      <TextField v-model="firstName" hint="First Name" class="input input-border"/>
    </StackLayout>
  </StackLayout>
</template>

<script lang="typescript">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {

}
</script>

Two important things to note here are that we're exporting a class that inherits from Vue and that we've docorated the class with the @Component decorator, similar to how we'd do this in Angular.

Five Things About Class Components in NativeScript-Vue

If you are serious about using class components in your NativeScript VueJS apps with TypeScript, you need to know these five things. See the videos section below for a video tutorial on using these.

Props - data passed in as inputs to your Vue components
Data - this is local properties (or the state) of your Vue components
Watch - use this to spy on other properties and react to them being changed
Computed - don’t create and maintain another property! Use a computed to create a calculated property.
Methods - they do stuff! These are your event handlers and other class functions

NOTE: Before using the following, make sure you've added TypeScript and the extra libraries to your project as I show in the first video.

Props

By using the @Prop decorator from vue-property-decorator, we declare input properties just by decorating class properties.

<template>
  <StackLayout class="form">
    <StackLayout class="input-field">
      <Label text="First Name" class="label font-weight-bold m-b-5"/>
      <TextField v-model="firstName" hint="First Name" class="input input-border"/>
    </StackLayout>
  </StackLayout>
</template>

<script lang="typescript">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {
  @Prop() whatToSay: string;
}
</script>

If you're coming from the object notation Vue, then you're used to the code looking like so:

export default {
  props: {
    whatToSay: {
      type: String
    }
  }
};

Data

data is really simple with class components. It's just properties on the class:

<template>
  <StackLayout class="form">
    <StackLayout class="input-field">
      <Label text="First Name" class="label font-weight-bold m-b-5"/>
      <TextField v-model="firstName" hint="First Name" class="input input-border"/>
    </StackLayout>
  </StackLayout>
</template>

<script lang="typescript">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {
  @Prop() whatToSay: string;

  //Data
  counter = 1;
  firstName = "Donna";
  initialLastName = "Summer";
  lastName = this.initialLastName;
}
</script>

This is what data looks like with object notation - pretty ugly in my opinion:

data() {
    return {
      counter: 1,
      firstName: "Donna",
      initialLastName: "Summer",
      lastName: "Summer"
    };
  },

Watch

Watchers are probably the most complicated part because they are defined as class methods with a @Watch decorator. The @Watch decorator has to specify what property we're spying on.

<template>
  <StackLayout class="form">
    <StackLayout class="input-field">
      <Label text="First Name" class="label font-weight-bold m-b-5"/>
      <TextField v-model="firstName" hint="First Name" class="input input-border"/>
    </StackLayout>
  </StackLayout>
</template>

<script lang="typescript">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {
  @Prop() whatToSay: string;
  counter = 1;
  firstName = "Donna";
  initialLastName = "Summer";
  lastName = this.initialLastName;

  //Watch
  @Watch("firstName")
  onFirstNameChanged() {
    this.lastName = this.initialLastName + this.counter++;
  }
}
</script>

BUT, it's still way neater than it is with object notation, which looks like this:

watch: {
    firstName: {
      handler() {
        this.lastName = this.initialLastName + this.counter++;
        console.log("first name changed");
      }
    }
  }

The triple nested object just to define one single watch is making me want to vomit.

Computed

Computeds are my favorite because they are executed exactly how they should be in a class - as getter (and setter) properties.

<template>
  <StackLayout class="form">
    <StackLayout class="input-field">
      <Label text="First Name" class="label font-weight-bold m-b-5"/>
      <TextField v-model="firstName" hint="First Name" class="input input-border"/>
    </StackLayout>

    <StackLayout class="input-field">
      <Label text="Full Name" class="label font-weight-bold m-b-5"/>
      <Label :text="fullName"/>
    </StackLayout>
  </StackLayout>
</template>


<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {
  @Prop() whatToSay: string;
  counter = 1;
  firstName = "Donna";
  initialLastName = "Summer";
  lastName = this.initialLastName;

  //Computed
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  @Watch("firstName")
  onFirstNameChanged() {
    this.lastName = this.initialLastName + this.counter++;
  }
}
</script>

I'll spare you the gory details of how computeds are implemented in Vue with object notation.

Methods

Since we're using classes, guess what! Methods are just methods! Declare an event handler in the template, and then just write a method in your class.

<template>
  <StackLayout class="form">
    <StackLayout class="input-field">
      <Label text="First Name" class="label font-weight-bold m-b-5"/>
      <TextField v-model="firstName" hint="First Name" class="input input-border"/>
    </StackLayout>

    <StackLayout class="input-field">
      <Label text="Full Name" class="label font-weight-bold m-b-5"/>
      <Label :text="fullName"/>
    </StackLayout>

    <Button text="SPEAK" @tap="speak"/>
  </StackLayout>
</template>

<script lang="typescript">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {
  @Prop() whatToSay: string;

  counter = 1;
  firstName = "Donna";
  initialLastName = "Summer";
  lastName = this.initialLastName;

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  @Watch("firstName")
  onFirstNameChanged() {
    this.lastName = this.initialLastName + this.counter++;
  }

  //Method
  speak() {
    alert("This is " + this.fullName + " speaking. " + this.whatToSay);
  }
}
</script>

I know that class components aren’t for everyone and some people really love using pure JavaScript, that’s totally fine too. This is just another way to do it, and if you are going to be using TypeScript in your NativeScript-vue apps, then class components is a really good fit. I would even go so far as to say that at the moment, it doesn’t make much sense to use TypeScript unless you are using class components.

How to Build a Custom NativeScript Progress Bar

Alex Ziskind — Sat, 14 Sep 2019 12:58:24 +0000

In this series of written and video tutorials, I'll progressively improve the progress bar (see what I did there?) by adding JavaScript animation to its movement, and then using RxJS to animate it.

TJ VanToll wrote an excellent post on building a simple progress bar with just JavaScript and CSS in a NativeScript Angular application. After the post came out, Peter Staev tweeted that the template could be simplified a bit too.

Then it hit me; THIS MUST BE ANIMATED!

There are two animation approaches that I've been using for a while that I wanted to show with the progress bar:

Plain (brute force) JavaScript animation
Animation using RxJS

So I've written down these approaches in this post and created video recordings of all the approaches to go along with the post. You can jump between parts here:

TJ's Approach Modified
Peter's Simplified Template
Alex's JavaScript Animation Added
Alex's RxJS Animation Added
Alex's Animation in a Pipe (UPDATE!)

*Note The videos for each approach is included in each section and all the code can be found on GitHub.

TJ's Approach Modified

The progress bar in TJ's approach works well. However, the updates all arrive at a steady rate and the updates are tiny. This looks nice, but doesn't represent the real stresses that a progress bar might experience in the world. A more realistic progress bar would jump around to random points and update sporadically.

I've simulated that using a separate function that returns a random progress update between the current progress and 100 percent. Otherwise, the rest of the TypeScript code is pretty much the same as in TJ's post.

util.ts

export function getNewPercentValue(startingFrom: number): number {
  const newVal = Math.floor(Math.random() * 10) + startingFrom + 10;
  if (newVal > 100) {
    return 100;
  } else {
    return newVal;
  }
}

Oh and instead of background in the CSS, I've also used background-color, to make the CSS property more compatible with older versions of NativeScript. You can watch me build this progress bar from scratch in this video:

Peter's Simplified Template

Peter Staev suggested a more streamlined approach to the template.

Instead of using a binding to the GridLayout's columns attribute, where we have to do a crazy string concatenation to calculate new column widths, we can just directly bind internal StackLayout's style.width attribute to the percent and use an expression in the binding like this:

<GridLayout  class="progressbar">
    <StackLayout col="0" class="progressbar-value" [style.width]="percent + '%'"></StackLayout>
</GridLayout>

Here is a short video showing this new, simpler approach:

Alex's JavaScript Animation Added

Here is where the animation comes in. First, I wanted to show a plain, brute-force JavaScript animation technique that I've been using. This utilizes a reusable animate function that takes in an easing function, a step function (more on that later), and a duration for the animation.

The reusable animate function can be used for any JavaScript animation, not just the progress bar, and it can be part of a set of utility functions. But here, I've just put it inside my component file.

function animate(
  easing: (p: number) => number,
  step: (delta: number) => void,
  duration: number
) {
  var start = new Date();
  var id = setInterval(function() {
    var timePassed = new Date().valueOf() - start.valueOf();
    var progress = timePassed / duration;

    if (progress > 1) progress = 1;

    var delta = easing(progress);

    step(delta);

    if (progress == 1) {
      clearInterval(id);
    }
  }, 10);
}

This function is just an animation loop that calculates where in the animation we are currently. Then it runs our animation progress through the easing function. And finally it executes the step function that we passed in. The step function performs the visual update to our UI for every slice of the animation. Since the animate function doesn't care about what we're updating, it's the responsibility of the component to pass in the step function that will do the UI update. In our case, the step function just updates the percent.

Here is the updated component ngOnInit function that has our percent update loop:

public ngOnInit(): void {
        let percentCurrent = 0;

        let intervalId = setInterval(() => {
            const oldPercent = percentCurrent;
            percentCurrent = getNewPercentValue(percentCurrent);

            animate(
                d3.easeQuadOut,
                (delta) => {
                    const newWidth = amountFromTo({ from: oldPercent, to: percentCurrent })(delta);
                    this.percent = newWidth;
                },
                300);

            if (percentCurrent >= 100) {
                clearInterval(intervalId);
            }
        }, 1000);
    }

Notice that we are updating the percent inside the step function that we pass to the animate function as a parameter.
The full code listing is here, and the video explaining all this is here:

Alex's RxJS Animation Added

Most Angular applications these days take advantage of RxJS. We use RxJS for internal application stores as I show in the Application State chapter of the NativeScript with Angular Pro course. We also use RxJS for HTTP calls, and so on.

Since RxJS is so prevalent in our apps, we can leverage it for animations too! In the video below I walk you through adding reusable animation functions that are built on RxJS and use them to animate our progress bar.

Here is a set of reusable RxJS higher order functions that can be used to animate ANYTHING! They were inspired by this amazing talk by Ben Lesh.

const distance = (d: number) => (t: number) => t * d;

const msElapsed = (scheduler = asyncScheduler) =>
  defer(() => {
    const start = scheduler.now();
    return interval(0, scheduler).pipe(map(t => scheduler.now() - start));
  });

const duration = (ms, scheduler = asyncScheduler) =>
  msElapsed(scheduler).pipe(
    map(elapsedMs => elapsedMs / ms),
    takeWhile(t => t <= 1)
  );

const prevAndCurrent = (initialValue: number) => (
  source$: Observable<number>
) =>
  source$.pipe(
    startWith(initialValue),
    bufferCount(2, 1)
  );

const tween = (ms: number, easing: (t: number) => number) => (
  source$: Observable<number>
) =>
  source$.pipe(
    prevAndCurrent(0),
    takeWhile(([p, n]) => n <= 100),
    switchMap(([p, n]) =>
      duration(ms).pipe(
        map(easing),
        map(distance(n - p)),
        map(v => n + v)
      )
    )
  );

Now our initial progress update loop just has to update a BehaviorSubject called percent$

let percentCurrent = 0;
let intervalId = setInterval(() => {
  percentCurrent = getNewPercentValue(percentCurrent);
  this.percent$.next(percentCurrent);
  if (percentCurrent >= 100) {
    clearInterval(intervalId);
  }
}, 1000);

And our StackLayout's [style.width] attribute gets bound to a new Observable called percentAnimated$ using the async pipe for automatic subscription.

<GridLayout rows="50,50" class="progressbar">
    <StackLayout #pbVal col="0" class="progressbar-value" [style.width]="(percentAnimated$ | async) + '%'"></StackLayout>
    <Button text="go" row="1" (tap)="onTap()"></Button>
</GridLayout>

When we initialize our component, we can just derive the new percentAnimated$ observable from the percent$ BehaviorSubject, and pipe it through the tween animation function.

    public ngOnInit(): void {
        this.percentAnimated$ = this.percent$.pipe(
            tween(400, d3.easeQuadOut)
        );
    }

*Note I've made a few other updates in styling, and I added a button to trigger the progress. So please see the full code listing here.

You can see me adding the RxJS animation implementation in this video:

Abstracting To Angular Pipe

Now that we have all the code in place, wouldn't it be nice to create a reusable "thing" that we can plug into any RxJS Observable that we want to "tween"? As it happens, Angular comes with a built-in concept called a Pipe, which is just a class that implements the PipeTransform interface and is declared along-side other Components in a module. If you don't know about Pipes, I suggest reading up on them, and then coming back here to watch the video below.

In this bonus video, I show you how to abstract away the code we've written so far in this post and in the previous videos of the progress bar series. The code is abstracted away into an Angular Pipe, making it more easily consumable.

If you like this style of video tutorials, you might like our courses. The latest Hands-on UI course is a pretty popular starting point for those starting out learning NativeScript and how to work with UI.

Let me know if you enjoyed this short tutorial on Twitter: @digitalix, and what else you'd like to see in these tutorials.

NativeScript Fetch to HttpClient Conversion and Gotchas

Alex Ziskind — Sat, 07 Sep 2019 19:35:00 +0000

Converting fetch to HttpClient to make API calls is pretty straightforward. But sometimes it's not done correctly, especially when abusing the async pipe.

It may be beneficial to use HttpClient instead of the good old global fetch API that lives in a browser and NativeScript apps alike. When building Angular apps with NativeScript, using HttpClient has some added sugar like being able to use Http interceptors as well as getting an RxJS Observable as a result by default. But there are some things to watch out for when converting from using fetch to using HttpClient.

In this second part of the two-part video series, I first show you how to perform the conversion from the fetch API to using HttpClient in a NativeScript with Angular app. Then I show you some troubles you can face that may not be so obvious on the surface. And, of course, I'll show you how to eliminate those troubles.

This video builds upon what we've already done in part one: Easy Dev Backend for NativeScript apps.

You can find a lot more NativeScript Tutorials on my YouTube channel: https://www.youtube.com/channel/UCajiMK_CY9icRhLepS8_3ug

You'll find more content about NativeScript in our courses area on NativeScripting.com. The new Hands-on UI course is a pretty popular starting point for those starting out learning NativeScript and how to work with UI.

Easy Dev Backend for NativeScript Apps

Alex Ziskind — Sat, 07 Sep 2019 19:17:40 +0000

During development, I prefer using a local backend that I quickly spin up along with my NativeScript apps. Why? It's easy, it's offline, it gives me more control, and it allows me to reason about my app in a more realistic way during development.

This is part one of a two-part video series on using NativeScript with a local dev backend.

Part One

In this first video I use a collection of free and open source tools to get you up and running quickly and easily. We use Node and Express to run a local server, test out the API endpoints with Postman, and then convert the Hello World NativeScript with Angular app to fetch its data from this server. We even simulate a network delay and see how it effects loading and displaying of data.

I use a similar technique in the NativeScript with Angular Pro course and the NativeScript Core Pro course right here on NativeScripting.

This video comes in at fifteen minutes - a bit longer than usual. But it's definitely worth watching.

You can find a lot more NativeScript Tutorials on my YouTube channel: https://www.youtube.com/channel/UCajiMK_CY9icRhLepS8_3ug

Part Two

In the second part of the two-part series, I show how to convert a fetch API call to using HttpClient and RxJS Observables to get data for the details page, and some problems that one could face while doing this.
See part 2 here.

For more video tutorials about NativeScript, look at our courses on NativeScripting.com. The new Hands-on UI course is a pretty popular starting point for those starting out learning NativeScript and how to work with UI.

DEV Community: Alex Ziskind

How to Add Shadows in NativeScript iOS Apps

Introduction

Let's Get Right to It!

1 of 5: Color

2 of 5: Opacity

3 of 5: Radius

4 of 5: Offset

5 of 5: Path

How to Vertically Center Label Text in NativeScript Android

Okay, Let's Do This

When Should You Use Observable Arrays in NativeScript Core, Angular, and Vue?

NativeScript Core

What Does that Mean Anyway?

But Can't You Just Use a Regular Array?

NativeScript Angular

Using a Regular Array

NativeScript-Vue

Using a Regular Array

In Summary

NativeScript-Vue Class Components Examined

First, we're moving in the right direction...

But...

Class Component Scaffolding

Five Things About Class Components in NativeScript-Vue

Props

Data

Watch

Computed

Methods

Related Videos

NativeScript-Vue with TypeScript and Class Components

Using TypeScript Class Components in NativeScript Vue

Async/Await in NativeScript-Vue with TypeScript

How to Build a Custom NativeScript Progress Bar

Then it hit me; THIS MUST BE ANIMATED!

TJ's Approach Modified

util.ts

Peter's Simplified Template

Alex's JavaScript Animation Added

Alex's RxJS Animation Added

Abstracting To Angular Pipe

NativeScript Fetch to HttpClient Conversion and Gotchas

Easy Dev Backend for NativeScript Apps

Part One

Part Two