NativeScript - template-hello-world-ts

• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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

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

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>

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()
}

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`
    }
  }
}