devnexus-notes.md

<Page>
  <Label text="Hello World" />
</Page>

exports.pageLoaded = function(args) {
  console.log("loaded");
};

@import "nativescript-theme-core/css/core.light.css";

Image {
  height: 120;
  width: 120;
}

<Page>
  <Label text="I’m a details page!" />
</Page>

var observableModule = require("data/observable");

var page;

exports.onNavigatingTo = function(args) {
  page = args.object;
  page.bindingContext = observableModule.fromObject(page.navigationContext);
};

Make sure the following plugins are installed:

• Text to speech
• Explosion

Start

Use tns create to build an app. Open that app.

Explain folder structure

• app
• platforms
• package.json / node_modules

Switch to Pokemon app.

Explain tns run.

Open main-page.xml.

Make a simple change.

Show how NativeScript converts UI components from XML into native UI controls.

dx1

<ActionBar class="action-bar" title="Pokémon!"></ActionBar>

Open main-page.js

Add loaded="pageLoaded".

Look at console.

dx2

var Observable = require("data/observable").Observable;

exports.pageLoaded = function(args) {
  var page = args.object;
  var data = new Observable();
  data.set("name", "TJ");

  page.bindingContext = data;
};

<Label text="{{ name }}" />

dx3

var Observable = require("data/observable").Observable;
var pokemonService = require("./data/pokemon-service");

var allPokemon = [];
var pageData = new Observable();
pageData.set("allPokemon", allPokemon);

exports.pageLoaded = function(args) {
  var page = args.object;
  page.bindingContext = pageData;

  if (allPokemon.length == 0) {
    pokemonService.getPokemonList().then(function(data) {
      allPokemon = data;
      pageData.set("allPokemon", allPokemon);
    });
  }
};

dx4

<Page loaded="pageLoaded">
  <ActionBar class="action-bar" title="Pokémon!"></ActionBar>

  <ScrollView>
    <Repeater items="{{ allPokemon }}">
      <Repeater.itemsLayout>
        <FlexboxLayout class="container" />
      </Repeater.itemsLayout>
      <Repeater.itemTemplate>
        <Image src="{{ sprite }}" />
      </Repeater.itemTemplate>
    </Repeater>
  </ScrollView>
</Page>

dx5

.container {
  flex-wrap: wrap;
  justify-content: space-around;
}

tap="onImageTap"

dx6

exports.onImageTap = function(args) {
  console.log(args.object.bindingContext);
};

Attach debugging console

plugins

Show plugins.nativescript.org.

dx7

var TextToSpeech = require("nativescript-texttospeech");

dx8

var TTS = new TextToSpeech.TNSTextToSpeech();
TTS.speak({ text: args.object.bindingContext.name });

dx9

var explosion = require("nativescript-explosionfield");

dx10

explosion.explode(args.object);

dx11

var TTS = new TextToSpeech.TNSTextToSpeech();
TTS.speak({ text: "I’m going to blow up " + args.object.bindingContext.name });

setTimeout(function() {
  explosion.explode(args.object);
  setTimeout(function() {
    TTS.speak({ text: "Boom!" });
  }, 1250);
}, 2000);