NativeScript - Modules

A NativeScript Module contains a set of related functionalities packaged as single library. Let us learn the modules provided by NativeScript framework.

It contains core functionalities of the NativeScript framework. Let us understand the core modules in this chapter.

Application

Application contains platform specific implementation of mobile application. Simple core module is defined below −

const applicationModule = require("tns-core-modules/application");

Console

Console module is used to log message. It has the following methods −

console.log("My FirstApp project"); 
console.info("Native apps!"); 
console.warn("Warning message!"); 
console.error("Exception occurred");

application-settings

application-settings module contains method to manage application settings. To add this module, we need to add the following code −

const appSettings = require("tns-core-modules/application-settings");

Few methods available in the application-setting are as follows −

  • setBoolean(key: string, value: boolean) - set boolean object

  • setNumber(key: string, value: number) - set number object

  • setString(key: string, value: string) - sets string object

  • getAllKeys() - Contains all stored keys

  • hasKey(key: string) - check whether a key present or not

  • clear - clears stored values

  • remove - remove any entry based on key.

A simple example using application setting is as follows −

function onNavigatingTo(args) { 
   appSettings.setBoolean("isTurnedOff", false);
   appSettings.setString("name", "nativescript"); 
   appSettings.setNumber("locationX", 54.321); 
   const isTurnedOn = appSettings.getBoolean("isTurnedOn"); 
   const username = appSettings.getString("username"); 
   const locationX = appSettings.getNumber("locationX"); 
   // Will return "not present" if there is no value for "noKey" 
   const someKey = appSettings.getString("noKey", "not present"); 
}
exports.onNavigatingTo = onNavigatingTo; 
function onClear() {
   // Removing a single entry via its key name 
   appSettings.remove("isTurnedOff"); 
   // Clearing the whole settings 
   appSettings.clear(); 
}

http

This module is used for handling http request and response. To add this module in your application, add the following code −

const httpModule = require("tns-core-modules/http");

We can send data using the following methods −

getString − It is used to make request and downloads the data from URL as string. It is defined below −

httpModule.getString("https://.../get").then(
   (r) => { 
      viewModel.set("getStringResult", r); 
   }, (e) => 
   { 
   }
);

getJSON − It is used to access data from JSON. It is defined below −

httpModule.getJSON("https://.../get").then((r) => { 
}, (e) => { 
});

getImage − downloads the content from specified URL and return ImageSource object. It is defined below −

httpModule.getImage("https://.../image/jpeg").then((r) => { 
}, (e) => { 
});

getFile − It has two arguments URL and file path.

  • URL − downloads the data.

  • File path − save URL data into the file. It is defined below −

httpModule.getFile("https://").then((resultFile) => { 
}, (e) => { 
});

request − It has options argument. It is used to request options and return HttpResponse object. It is defined below −

httpModule.request({ 
   url: "https://.../get", 
   method: "GET" 
}).then((response) => { 
}, (e) => { 
});

Image-source

image-source module is used save image. We can add this module using the below statement −

const imageSourceModule = require("tns-core-modules/image-source");

If you want to load images from resource, use the below code −

const imgFromResources = imageSourceModule.fromResource("icon");

To add image from local file, use the below command −

const folder = fileSystemModule.knownFolders.currentApp(); 
const path = fileSystemModule.path.join(folder.path, "images/sample.png"); 
const imageFromLocalFile = imageSourceModule.fromFile(path);

To save image to the file path, use the below command −

const img = imageSourceModule.fromFile(imagePath); 
const folderDest = fileSystemModule.knownFolders.documents(); 
const pathDest = fileSystemModule.path.join(folderDest.path, "sample.png"); 
const saved = img.saveToFile(pathDest, "png"); if (saved) { 
   console.log(" sample image saved successfully!"); 
}

Timer

This module is used to execute code at specific time intervals. To add this, we need to use require −

const timerModule = require("tns-core-modules/timer");

It is based on two methods −

setTimeout − It is used to delay the execution. It is represented as milliseconds.

setInterval − It is used to apply recurring at specific intervals.

Trace

This module is useful for debugging. It gives the logging information. This module can be represented as −

const traceModule = require("tns-core-modules/trace");

If you want to enable in your application then use the below command −

traceModule.enable();

ui/image-cache

image-cache module is used to handle image download requests and caches downloaded images. This module can be represented as shown below −

const Cache = require("tns-core-modules/ui/image-cache").Cache;

connectivity

This module is used to receive the connection information of the connected network. It can be represented as −

const connectivityModule = require("tns-core-modules/connectivity");

Functionality Modules

Functionality modules include lot of system/platform specific modules. Some of the important modules are as follows −

platform − Used to display the information about your device. It can be defined as given below −

const platformModule = require("tns-core-modules/platform");

fps-meter − Used to capture frames per second. It can be defined as given below −

const fpsMeter = require("tns-core-modules/fps-meter");

file-system − Used to work with your device file system. It is defined below −

const fileSystemModule = require("tns-core-modules/file-system");

ui/gestures − Used to work with UI gestures.

UI module

UI module includes the UI component and its related functionality. Some of the important UI modules are as follows −

  • frame

  • page

  • color

  • text/formatted-string

  • xml

  • styling

  • animation

Advertisements