Component

async load(): Promise<void>

The load method is executed, when the component is instantiated and loaded for first time. The load method will be called before the data binding phase and is the best place to implement any data loading logic. Avoid direct manipulation of UI elements via Dom selectors in this method as they may be be overruled after the data binding phase complete. The load method is called only once during the Tasks life cycle - e.g. if the user navigates back to the same view, the load method will not be called again.

import {Component} from '@dms'
import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@Component
export class Component{
  
  customerList: ko.ObservableArray<Customer>
  
  async load(): Promise<void> {
    //load all customers from the database
    const customers = await Customer.query().executeSelect();      
    //assign the list to observable
    this.customerList(customers);   
  }
}

▶️ async resume(): Promise<void>

The resume method is executed, every time the component is about to be displayed on the screen, just after the component method has been executed. Note that unlike the load method, the resume method is called every time, when the component is about to be displayed.

import {Component} from '@dms'
import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@Component
export class Component{
  
  customerList: ko.ObservableArray<Customer>
  
  async resume(): Promise<void> {
    // this will be called every time the view is about to be dusplayed
    //load all customers from the local on-device database
    const customers = await Customer.query().executeSelect();      
    //assign the list to observable
    this.customerList(customers);   
  }
}

▶️ async show(): Promise<void>

The show method is executed, every time the component is about to be displayed on the screen, after the data bind phase finishes. This method allows the developer to implement logic executed after the complete UI of the component has been rendered.

import {Component} from '@dms'
import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@Component
export class Component{
  
  
  async show(): Promise<void> {
    console.log('show method was called');    
  }
}

▶️ async validate(): Promise<boolean>

The validate method is intended for execution, every time the system is about to leave the view. This happens when a navigation to another view is about to happen because of call to UserInterfaceService.navigate or UserInterfaceService.launchTask is made. NOTE: the validate method of the component is not called automatically. The developer must call the method in the containing view's validate method and evaluate the result

import {View, Component} from '@dms'
import { UserInterfaceService } from '@dms';
import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@View
export class MyView {

  MyComponent: MyComponent;
    
  constructor(
      private UserInterfaceService: UserInterfaceService
   ){
  }
  
  async validate(): Promise<boolean> {
   return MyComponent.validate();
  }
}

▶️async commit(): Promise<boolean>

The commit method is intended for execution after successful execution of the validate method, every time the system is about to leave the view. This happens when a navigation to another view is about to happen because of call to UserInterfaceService.navigate or UserInterfaceService.launchTask is made.

NOTE: the commit method of the component is not called automatically. The developer must call the method in the containing view's commit method and evaluate the result

import {View, Component} from '@dms'
import { UserInterfaceService } from '@dms';
import { Customer } from '@dms-bo';
import * as ko from 'knockout';

@View
export class MyView {
  
  constructor(
      private UserInterfaceService: UserInterfaceService
   ){
  }
  ...
  async commit(): Promise<boolean> {
    return MyComponent.commit();
  }
}

PreviousView NextIntroducton

Last updated 3 years ago