[[oktatas:telefon:nativescript|< NativeScript]]

====== NativeScript - template-hello-world-ts ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Indulás =====

  ns create HelloWorld --template @nativescript/template-hello-world-ts


===== Könyvtárszerkezet =====

<code>
app01/
  |-app/
  |  |-app-root.xml
  |  |-app.css
  |  |-app.ts
  |  |-main-pages.ts
  |  |-main-pages.xml
  |  `-man-view-model.ts
  |-App_Resources/
  |-hooks/
  |-node_modules/
  |-platforms/
  |-.editorconfig
  |-.gitignore
  |-nativescript.config.ts
  |-package-lock.json
  |-package.json
  |-references.d.ts
  |-tsconfig.json
  `-webpack.config.js
</code>


===== A főlap =====

<code xml app/main-page.xml>
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
    <ActionBar title="My App" icon="" />

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


<code javascript app/main-page.ts>
import { EventData, Page } from '@nativescript/core'
import { HelloWorldModel } from './main-view-model'

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

</code>


<code javascript app/main-view-model.ts>
import { Observable } from '@nativescript/core'

export class HelloWorldModel extends Observable {
  private _counter: number
  private _message: string

  constructor() {
    super()

    // Initialize default values.
    this._counter = 42
    this.updateMessage()
  }

  get message(): string {
    return this._message
  }

  set message(value: string) {
    if (this._message !== value) {
      this._message = value
      this.notifyPropertyChange('message', value)
    }
  }

  onTap() {
    this._counter--
    this.updateMessage()
  }

  private updateMessage() {
    if (this._counter <= 0) {
      this.message = 'Hoorraaay! You unlocked the NativeScript clicker achievement!'
    } else {
      this.message = `${this._counter} taps left`
    }
  }
}
</code>