Category: nativescript

NativeScript – Quick Guide ”; Previous Next NativeScript – Introduction Generally, developing a mobile application is a complex and challenging task. There are many frameworks available to develop a mobile application. Android provides a native framework based on Java language and iOS provides a native framework based on Objective-C/Shift language. However, to develop an application that support both operating systems, we need to code in two different languages using two different frameworks. To overcome this complexity, mobile frameworks supports this feature. The main reason behind to use cross-platform or hybrid framework is easier to maintain a single code base. Some of the popular frameworks are NativeScript, Apache Cordova, Xamarin, etc. Overview of JavaScript Frameworks JavaScript is a multi-paradigm language. It supports functional programming, object-oriented and prototype based programming. JavaScript was initially used for the client-side. Nowadays, JavaScript is used as a server-side programming language as well. JavaScript frameworks are a type of tool that makes working with JavaScript easier and smoother. Using this framework, programmers can easily code the application as a device responsive. Responsiveness is one of the reasons behind why this framework is becoming very popular. Let us have a look at some of the popular JS frameworks − Angular One of the most powerful, efficient, and open-source JavaScript frameworks is Angular. We can build mobile and desktop applications. Google uses this framework. It is used for developing a Single Page Application (SPA). Vue.js VueJS is a progressive JavaScript framework used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development. It can be easily integrated into big projects for front-end development without any issues. It is dual integration mode is one of the most attractive features for the creation of high-end SPA or Single Page Application. React ReactJS is JavaScript library used for building reusable UI components. It is developed by Facebook. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it. Node.js Node.js is an open source, cross-platform runtime environment for developing server-side and networking applications. It is built on Google Chrome’s JavaScript Engine (V8 Engine). Node.js applications are written in JavaScript, and can be run on OS X, Microsoft Windows,and Linux. It provides a rich library of various JavaScript modules which simplifies the development of web applications. Overview of NativeScript NativeScript is an open source framework used for creating native iOS and android mobile applications. It is a JIT compiled framework. NativeScript code runs on JS virtual machine. It uses V8 engine runtime for both Android and iOS platforms. NativeScript uses XML, JS and CSS for development. It has a WebIDE known as PlayGround. This PlayGround supports easy working interface, easy to manage projects, hot reload and debug on devices. NativeScript allows developers to create native, cross-platform apps quickly and efficiently and save on the costs of development, testing, and training. Hence, Native apps will continue to be rich and strong for years to come to make better and easier to use. Features NativeScript has vibrant community support. Some of the salient features of NativeScript listed below − Extensible Hot Module Replacement Easy to setup We can build rich animations, graphs, charts and lists Developers can use any view as the root of an application Lazy coding Benefits NativeScript helps small or large scale companies to build cross-platform mobile apps. Some of the key benefits are − Developers can reuse existing tools and code Easy to modify, troubleshoot and update newer versions Development experience is good so we don’t have to spend time to learn new tools Platform-specific APIs from JavaScript, eliminating the need to learn Cordova plugins Ease authentication with different sign-on providers NativeScript – Installation This section explains about how to install NativeScript on your machine. Prerequisites Before moving to installation, we need the following prerequisites − Node.js Android iOS Verify Node.js Node.js is a JavaScript runtime engine build on top of Google Chrome’s internal JavaScript engine, v8. NativeScript uses Node.js extensively for various purpose like creating the starter template application, compiling the application, etc., It is mandatory to have Node.js on your machine. Hopefully, you have installed Node.js on your machine. If it is not installed then visit the link, https://nodejs.org/ and download the latest LTS package and install it. To verify if Node.js is properly installed, type the below command on your terminal − node –version You could see the version. As of now, the current stable “LTS” version of node is 12.14.0. CLI setup NativeScript CLI is a terminal/command line based application and allows you to create and develop NativeScript application. Node.js package manager npm is used to install NativeScript CLI on your machine. Use the below command to install NativeScript CLI − npm install -g nativescript After executing this command, we could see the following output − setupcli We have installed the latest NativeScript CLI, tns in our system. Now, type the below command in your terminal − tns This will list out quick-start guide. You could see the following output − cli We can use tns to create and develop application even without any additional setup. But, we could not able to deploy the application in real device. Instead we can run the application using NativeScript PlayGround iOS / Android application. We will check it in the upcoming chapters. Installing NativeScript playground App Go to your iOS App store or Google Play Store and search NativeScript Playground app. Once the application is listed in the search result, click the install option. It will install the

NativeScript – Creating an Application in Android ”; Previous Next Create and publish your app makes your Android application available to all users. Google Play is a robust publishing platform. It helps you to publish and distribute your Android applications to all the users around the whole world. This chapter explains about how to publish your Native app in Google Play. NativeScript Sidekick SideKick is a GUI client and supports all kind of OS. It simplifies NativeScript CLI process and helps to create mobile application. Publish your app from Sidekick to Google Play Console Downloading and installing sidekick depends on your OS. Follow the below steps to run your app in Sidekick. Step 1: Launch Sidekick Let us Launch Sidekick. It looks similar to the below image − Step 2: Build your device Now, open your app from your device and select build option from the toolbar and select Android. You will get a response similar to the below image − Step 3: Properties Click properties tab and add your android configuration. Screen looks similar to the below one − Step 4: Plugins Sidekick helps to find which plugins you depend on for your application. Click on plugins tab and it will list out the following − Step 5: Android Certificates Click cogwheel icon from android and choose browse option, then select a certificate stored on your file system. It is shown below − After selecting that, close the dialog box. Step 6: Build your application Finally click local build option from build type and select release option from configuration. After that build your application. Step 7: Application package Once build is completed, it will generate a path and apk file. Save the location of the application package. This apk file is used to upload it to the Google Play store. Step 8: Publish in Google Play Select publish option from the toolbar and select Google Play. Then, add Manage Android Certificates for Google Play Store dialog. It is shown below − After that, select Build type and provide Service Account JSON key then select Alpha, Beta or Production tracks finally click upload. Publish your app in Google Play To publish your app in Google Play console, you must meet the following prerequisites. Prerequisites You must be registered in Google Play You have a valid Google Play self-signed code signing identity Procedure for publish your app Below steps are helpful to understand how to release your app in Google Play store. Step 1: Login Google Play console Open Google Play console and login with your account. Step 2: Create an app Go to the All applications tab and click Create Application and create a new app. Now, add default language,application title finally click proceed to go further. Step 3: Fill required fields Move to store listing tab and fill the required fields, then complete the needed assets and save all the changes. Step 4: Price and distribution Go to Pricing & distribution tab, complete all the settings and save all the changes. Step 5: Release your app Choose App releases tab and select Alpha, Beta. It is used for testing your application. And, select Production tracks. It is used for publishing your app to Google Play. Finally add the application package (apk). Step 6: Review your app This is your final step. In the Review, verify if there are any issues. If no issues, then confirm rollout to publish your app. Print Page Previous Next Advertisements ”;

NativeScript – Angular Application ”; Previous Next Let us create a simple bare bone application to understand the work flow of the NativeScript application. Creating the Application Let us learn how to create simple application using NativeScript CLI, tns. tns provides a command create to used to create a new project in NativeScript. The basic syntax to create a new application is as below − tns create <projectname> –template <template_name> Where, Projectname is the Name of the project. template_name is Project template. NativeScript provides lot of startup template to create different type of application. Use Angular based template. Let us create a new directory named NativeScriptSamples to work on our new application. Now, open a new terminal then move to our directory and type the below command − tns create BlankNgApp –template tns-template-blank-ng Where, tns-template-blank-ng refers a blank mobile application based on AngularJS. Output ….. ….. ….. Project BlankNgApp was successfully created. Now you can navigate to your project with $ cd BlankNgApp After that you can preview it on device by executing $ tns preview Now, our first mobile application, BlankNgApp is created. Structure of the Application Let us understand the structure of the NativeScript application by analyzing our first application BlankNgApp in this chapter. NativeScript application is organized into multiple sections and they are as follows − Configuration section Node modules Android sources iOS Sources Application source code The general structure of the application is as follows − │ angular.json │ LICENSE │ nsconfig.json │ package-lock.json │ package.json │ tsconfig.json │ tsconfig.tns.json │ tsfmt.json │ webpack.config.js │ ├───App_Resources │ ├───Android │ │ │ └───iOS │ ├───hooks │ ├───node_modules | └───src │ app.css │ main.ts │ package.json │ └───app │ app-routing.module.ts │ app.component.html │ app.component.ts │ app.module.ts │ └───home home-routing.module.ts home.component.html home.component.ts home.module.ts Let us understand each section of the application and how it helps us to create our application. Configuration section All the files in the root of the application are configuration files. The format of the configuration files are in JSON format, which helps the developer to easily understand the configuration details. NativeScript application relies on these files to gets all available configuration information. Let us go through all the configuration files in this section. package.json package.json files sets the identity (id) of the application and all the modules that the application depends on for its proper working. Below is our package.json − { “nativescript”: { “id”: “org.nativescript.BlankNgApp”, “tns-android”: { “version”: “6.3.1” }, “tns-ios”: { “version”: “6.3.0” } }, “description”: “NativeScript Application”, “license”: “SEE LICENSE IN <your-license-filename>”, “repository”: “<fill-your-repository-here>”, “dependencies”: { “@angular/animations”: “~8.2.0”, “@angular/common”: “~8.2.0”, “@angular/compiler”: “~8.2.0”, “@angular/core”: “~8.2.0”, “@angular/forms”: “~8.2.0”, “@angular/platform-browser”: “~8.2.0”, “@angular/platform-browser-dynamic”: “~8.2.0”, “@angular/router”: “~8.2.0”, “@nativescript/theme”: “~2.2.1”, “nativescript-angular”: “~8.20.3”, “reflect-metadata”: “~0.1.12”, “rxjs”: “^6.4.0”, “tns-core-modules”: “~6.3.0”, “zone.js”: “~0.9.1” }, “devDependencies”: { “@angular/compiler-cli”: “~8.2.0”, “@ngtools/webpack”: “~8.2.0”, “nativescript-dev-webpack”: “~1.4.0”, “typescript”: “~3.5.3” }, “gitHead”: “fa98f785df3fba482e5e2a0c76f4be1fa6dc7a14”, “readme”: “NativeScript Application” } Here, Identity of the application (nativescript/id) − Sets the id of the application as org.nativescript.BlankNgApp. This id is used to publish our app to the Play Store or iTunes. This id will be our Application Identifier or Package Name. Dependencies (dependencies) − Specifies all our dependent node modules. Since, the default NativeScript implementation depends on Angular Framework, Angular modules are included. Development dependencies − Specifies all the tools that the application depends on. Since, we are developing our application in TypeScript, it includes typescript as one of the dependent modules. angular.json − Angular framework configuration information. nsconfig.json − NativeScript framework configuration information. tsconfig.json, tsfmt.json & tsconfig.tns.json − TypeScript language configuration information webpack.config.js − WebPack configuration written in JavaScript. Node modules As NativeScript project are node based project, it stores all its dependencies in the node_modules folder. We can use npm (npm install) or tns to download and install all the application dependency into the node_moduels. Android source code NativeScript auto-generates the android source code and place it in App_ResourcesAndroid folder. It will be used to create android application using Android SDK iOS source code NativeScript auto-generates the iOS source code and place it in App_ResourcesiOS folder. It will be used to create iOS application using iOS SDK and XCode Application source code The actual application code is placed in src folder. Our application has below files in src folder. └───src │ app.css │ main.ts │ package.json │ └───app │ app-routing.module.ts │ app.component.html │ app.component.ts │ app.module.ts │ └───home home-routing.module.ts home.component.html home.component.ts home.module.ts Let us understand the purpose of all files and how they are organized in this section − Step 1 main.ts – Entry point of the application. // this import should be first in order to load some required settings (like globals and reflect-metadata) import { platformNativeScriptDynamic } from “nativescript-angular/platform”; import { AppModule } from “./app/app.module”; platformNativeScriptDynamic().bootstrapModule(AppModule); Here, we have set the AppModule as the bootstrapping module of the application. Step 2 app.css – Main style sheet of the application is as shown below − @import “~@nativescript/theme/css/core.css”; @import “~@nativescript/theme/css/brown.css”; /* Place any CSS rules you want to apply on both iOS and Android here. This is where the vast majority of your CSS code goes. */ Here,

NativeScript – Widgets ”; Previous Next NativeScript provides a large set of user interface components and are called as ‘widgets’. Each widget does a special task and comes with a set of methods. Let’s understand NativeScript widgets in detail in this section. Button Button is a component to execute tap event action. When a user taps the button it performs the corresponding actions. It is defined below − <Button text=”Click here!” tap=”onTap”></Button> Let us add the button in our BlankNgApp as below − Step 1 Open the srcapphomehome.component.html. This is the UI design page of our home component. Step 2 Add a button inside the GirdLayout component. The complete code is as follows − <ActionBar> <Label text=”Home”></Label> </ActionBar> <GridLayout> <button text=”Click Here!”></button> </GridLayout> Output Below is the output of the button − Step 3 We can style the button using CSS as specified below − <ActionBar> <Label text=”Home”></Label> </ActionBar> <GridLayout> <button text=”Click Here!” class=”-primary”></button> </GridLayout> Here, −primary class is used to represent the primary button. Output Below is the output of ButtonPrimary − Step 4 NativeScript provides formatted option to provide custom icons in the button. The sample code is as follows − <GridLayout> <Button class=”-primary”> <FormattedString> <Span text=”&#xf099;” class=”fa”></Span> <Span text=” Button.-primary with icon”></Span> </FormattedString> </Button> </GridLayout> .fa { font-family: “FontAwesome”, “fontawesome-webfont”; } Here, &#xf099 specifies the location of the icon in the font, FontAwesome. Download the latest Font Awesome font and place the fontawesome-webfont.ttf in srcfonts folder. Output Below is the output of ButtonPrimary − Step 5 Rounded button can be created using the below syntax − <Button text=”Button.-primary.-rounded-sm” class=”-primary -rounded-sm”></Button> Output Below is the output of ButtonPrimary − Label Label component is used to display static text. Change the home page as below − <GridLayout> <Label text=”NativeScript is an open source framework for creating native iOS and Android apps in TypeScript or JavaScript.” textWrap=”true”> </Label> </GridLayout> Here, textWrap wraps the content of the label, if the label extends beyond the screen width. Output Below is the output of Label − TextField TextField component is used to get information from user. Let us change our home page as specified below − <GridLayout> <TextField hint=”Username” color=”lightblue” backgroundColor=”lightyellow” height=”75px”> </TextField> </GridLayout> Here, color represent text color backgroundColor represent background of the text box height represent the height of the text box Output Below is the output of Text Field − TextView TextView Component is used to get multi-line text content from the user. Let us change our home page as specified below − <GridLayout> <TextView loaded=”onTextViewLoaded” hint=”Enter text” returnKeyType=”done” autocorrect=”false” maxLength=”100″> </TextView> </GridLayout> Here, maxLength represent maximum length accepted by TextView. Output Below is the output of TextView − SearchBar This component is used for search any queries or submit any request. It is defined below − <StackLayout> <SearchBar id=”bar” hint=”click here to search …”></SearchBar> <StackLayout> We can apply styles − <StackLayout> <SearchBar id=”bar” hint=”click here to search …” color=”green” backgroundColor=”green”></SearchBar> </StackLayout> Below is the output of SearchBarStyle − Switch Switch is based on toggle to choose between options. Default state is false. It is defined below − <StackLayout> <Switch checked=”false” loaded=”onSwitchLoaded”></Switch> </StackLayout> The output for the above program is shown below − Slider Slider is a sliding component to pick a numeric range. It is defined below − <Slider value=”30″ minValue=”0″ maxValue=”50″ loaded=”onSliderLoaded”></Slider> The output for the above program is given below − Progress Progress widget indicates progress in an operation. Current progress is represented as bar. It is defined below − <StackLayout verticalAlign=”center” height=”50″> <Progress value=”90″ maxValue=”100″ backgroundColor=”red” color=”green” row=”0″></Progress> </StackLayout> Below is the output of Progress widget − ActivityIndicator ActivityIndicator shows a task in a progress. It is defined below − <StackLayout verticalAlign=”center” height=”50″> <ActivityIndicator busy=”true” color=”red” width=”50″ height=”50″></ActivityIndicator> </StackLayout> Below is the output for ActivityIndicator − Image Image widget is used to display an image. It can be loaded using ‘ImageSource’ url. It is defined below − <StackLayout class=”m-15″ backgroundColor=”lightgray”> <Image src=”~/images/logo.png” stretch=”aspectFill”></Image> </StackLayout> The output for Image Widget is as shown below − WebView WebView shows web pages. Web pages can be loaded using URL. It is defined below − <WebView row=”1″ loaded=”onWebViewLoaded” id=”myWebView” src=”http://www.google.com”></WebView> The output for the above code is as shown below − DatePicker DatePicker component is used to pick date. It is defined below − <StackLayout class=”m-15″ backgroundColor=”lightgray”> <DatePicker year=”1980″ month=”4″ day=”20″ verticalAlignment=”center”></DatePicker> </StackLayout> The output of DatePicker component is as shown below − TimePicker TimePicker component is used to pick the time. It is defined below − <StackLayout class=”m-15″ backgroundColor=”lightgray”> <TimePicker hour=”9″ minute=”25″ maxHour=”23″ maxMinute=”59″ minuteInterval=”5″> </TimePicker> </StackLayout> Below is the output of TimePicker component − Print Page Previous Next Advertisements ”;

NativeScript – Modules ”; Previous Next 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 Print Page Previous Next Advertisements ”;

NativeScript – Installation ”; Previous Next This section explains about how to install NativeScript on your machine. Prerequisites Before moving to installation, we need the following prerequisites − Node.js Android iOS Verify Node.js Node.js is a JavaScript runtime engine build on top of Google Chrome’s internal JavaScript engine, v8. NativeScript uses Node.js extensively for various purpose like creating the starter template application, compiling the application, etc., It is mandatory to have Node.js on your machine. Hopefully, you have installed Node.js on your machine. If it is not installed then visit the link, https://nodejs.org/ and download the latest LTS package and install it. To verify if Node.js is properly installed, type the below command on your terminal − node –version You could see the version. As of now, the current stable “LTS” version of node is 12.14.0. CLI setup NativeScript CLI is a terminal/command line based application and allows you to create and develop NativeScript application. Node.js package manager npm is used to install NativeScript CLI on your machine. Use the below command to install NativeScript CLI − npm install -g nativescript After executing this command, we could see the following output − setupcli We have installed the latest NativeScript CLI, tns in our system. Now, type the below command in your terminal − tns This will list out quick-start guide. You could see the following output − cli We can use tns to create and develop application even without any additional setup. But, we could not able to deploy the application in real device. Instead we can run the application using NativeScript PlayGround iOS / Android application. We will check it in the upcoming chapters. Installing NativeScript playground App Go to your iOS App store or Google Play Store and search NativeScript Playground app. Once the application is listed in the search result, click the install option. It will install the NativeScript Playground app in our device. NativeScript Playground application will be helpful for testing your apps in Android or iOS device without deploying the application in the real device or emulator. This will reduce the time to develop the application and easy way to kick-start the development of our mobile application. Android and iOS setup In this chapter, let us learn how to setup the system to build and run iOS and Android apps either in emulator or in real device. Step 1: Windows dependency Execute the below command in your windows command prompt and run as administrator − @powershell -NoProfile -ExecutionPolicy Bypass -Command “iex ((new-object net.webclient).DownloadString(”https://www.nativescript.org/setup/win”))” After this command, Scripts being downloaded then install the dependencies and configure it. Step 2: macOS dependency To install in macOS, you must ensure that Xcode is installed or not. Xcode is mandatory for NativeScript. If Xcode is not installed, then visit the following link https://developer.apple.com/xcode/ and download; then install it. Now execute the following command in your terminal − sudo ruby -e “$(curl -fsSL https://www.nativescript.org/setup/mac)” After executing the above command, script will install the dependencies for both iOS and Android development. Once it is done, close and restart your terminal. Step 3: Android dependency Hopefully, you have configured the following prerequisites − JDK 8 or higher Android SDK Android Support Repository Google Repository Android SDK Build-tools 28.0.3 or higher Android Studio If the above prerequisites are not configured, then visit the following link https://developer.android.com/studio/install and install it. Finally, Add JAVA_HOME and ANDROID_HOME in your environment variables. Step 4: Verify dependencies Now everything is done. You can verify the dependency using the below command − tns doctor This will verify all the dependency and summarize the result as below − √ Getting environment information No issues were detected. √ Your ANDROID_HOME environment variable is set and points to correct directory. √ Your adb from the Android SDK is correctly installed. √ The Android SDK is installed. √ A compatible Android SDK for compilation is found. √ Javac is installed and is configured properly. √ The Java Development Kit (JDK) is installed and is configured properly. √ Local builds for iOS can be executed only on a macOS system. To build for iOS on a different operating system, you can use the NativeScript cloud infrastructure. √ Getting NativeScript components versions information… √ Component nativescript has 6.3.0 version and is up to date. √ Component tns-core-modules has 6.3.2 version and is up to date. √ Component tns-android has 6.3.1 version and is up to date. √ Component tns-ios has 6.3.0 version and is up to date. If you find any issues, please correct the issues before proceeding to develop the application. Print Page Previous Next Advertisements ”;

NativeScript – Layout Containers ”; Previous Next NativeScript provides collection of container component for the sole purpose of laying out UI widget component. Layout containers act as the parent component and can have one or more child components. All child components of a layout container can be arranged based on the technique provided by its parent layout container. NativeScript supports six layouts containers and they are as follows − Absolute layout container Dock layout container Grid layout container Stack layout container Wrap layout container FlexBox layout container Let us learn all the layout container concepts in detail in this chapter. Absolute Layout AbsoluteLayout container is the simplest layout container in NativeScript. AbsoluteLayout does not enforce any constraint on its children and will place its children inside it using 2-dimensional coordinate system with top-left corner as origin. AbsoluteLayout uses four properties of its children to position them and they are as follows − top − Defines the placement of the child from origin moving downwards in y direction. left − Defines the placement of the child from origin moving sidewards in x direction. width − Defines the width of the child. height − Defines the height of the child. Let us add AbsoluteLayout container in the home page of our application as below − <ActionBar> <Label text=”Home”></Label> </ActionBar> <AbsoluteLayout width=”200″ height=”300″ backgroundColor=”blue”> <Label text=”Top Left” left=”0″ top=”0″ width=”100″ height=”150″ backgroundColor=”green”> </Label> <Label text=”Top Right” left=”100″ top=”0″ width=”100″ height=”150″ backgroundColor=”blue”></Label> <Label text=”Bottom Left” left=”0″ top=”150″ width=”100″ height=”150″ backgroundColor=”orange”> </Label> <Label text=”Bottom Right” left=”100″ top=”150″ width=”100″ height=”150″ backgroundColor=”red”></Label> </AbsoluteLayout> Output The output of the AbsoluteLayout is as given below − DockLayout Docklayout container component enables its children to dock inside it. Each side of the container (top, bottom, left, right) can dock a child component. DockLayout container uses the dock property of its children to correctly dock them. The possible values of the dock property is as follows − top − Layout container dock the child component at the top corner. bottom − Layout container dock the child component at the bottom corner. left − Layout container dock the child component at the left corner. right − Layout container dock the child component at the right corner. By default, DockLayout container docks its last child component. It can override by setting its stretchLastChild property to zero. Let us add DockLayout container in the home page of our application as below − <ActionBar> <Label text=”Home”></Label> </ActionBar> <DockLayout width=”250″ height=”300″ backgroundColor=”blue” stretchLastChild=”false”> <Label text=”left” dock=”left” width=”50″ backgroundColor=”green”></Label> <Label text=”top” dock=”top” height=”50″ backgroundColor=”orange”></Label> <Label text=”right” dock=”right” width=”50″ backgroundColor=”red”></Label< <Label text=”bottom” dock=”bottom” height=”50″ backgroundColor=”orange”></Label> </DockLayout> Output Below is the output for DockLayout − GridLayout GridLayout container component is one of the complex layout container and arranges child elements in tabular format with rows and columns. By default, it has one row and one column. It has the following properties − columns − Used to represent the default width of each column separated by ,. The possible values are number, * and auto keyword. Where, number indicates an absolute column width. indicates the width of a column relative to other columns. It can be preceded by number to indicate how many times the column width should be relative to other column. For example, 2* indicate the width the column should be 2 times the width of the smallest column. auto indicates the width of the column as wide as its widest child. For example, *,2* means two columns and second will be twice the size of first column. rows − Used to represent the default height of each row separated by ,. Value representation is similar to columns. GridLayout uses the below specified properties of its children to layout them − row − Row number col − Column number rowSpan − total number of rows that child content spans within a layout. colSpan − total number of columns that child content spans within a layout. Let us add GridLayout container in the home page of our application as below − <ActionBar> <Label text=”Home”></Label> </ActionBar> <GridLayout columns=”50, auto, *” rows=”50, auto, *” width=”210″ height=”210″ backgroundColor=”blue”> <Label text=”Row: 0; Column 0″ row=”0″ col=”0″ backgroundColor=”green”></Label> <Label text=”Row: 0; Column 1″ row=”0″ col=”1″ colSpan=”1″ backgroundColor=”brown”></Label> <Label text=”Row: 1; Column 0″ row=”1″ col=”0″ rowSpan=”1″ backgroundColor=”red”></Label> <Label text=”Row: 1; Column 1″ row=”1″ col=”1″ backgroundColor=”orange”></Label> </GridLayout> Output Below is the output for GridLayout − StackLayout StackLayout organizes its children in a one-dimensional line either horizontally or vertically. It can be sized based on the space in the layout using layout options. It has orientation property that can be used to specify direction, horizontal or vertical. Let us add StackLayout container in the home page of our application as below − <ActionBar> <Label text=”Home”></Label> </ActionBar> <StackLayout orientation=”vertical” width=”200″ height=”200″ backgroundColor=”blue”> <Label text=”Label1″ width=”50″ height=”50″ backgroundColor=”green”></Label> <Label text=”Label2″ width=”50″ height=”50″ backgroundColor=”brown”></Label> <Label text=”Label3″ width=”50″ height=”50″ backgroundColor=”red”></Label> <Label text=”Label4″ width=”50″ height=”50″ backgroundColor=”orange”></Label> </StackLayout> Output The output for StackLayout is as shown below − WrapLayout WrapLayout is used to wrap contents on new rows or columns. It has the following three properties − orientation − display either horizontally or vertically. itemWidth − layout width for each child. itemHeight − layout height for each child. Let us add WrapLayout container in the home page of our application as below − <ActionBar> <Label text=”Home”></Label> </ActionBar> <WrapLayout orientation=”horizontal” width=”200″ height=”200″ backgroundColor=”blue”> <Label text=”Label1″ width=”70″

NativeScript – Architecture ”; Previous Next NativeScript is an advanced framework to create mobile application. It hides the complexity of creating mobile application and exposes a rather simple API to create highly optimized and advanced mobile application. NativeScript enables even entry level developers to easily create mobile application in both Android and iOS. Let us understand the architecture of the NativeScript framework in this chapter. Introduction The core concept of NativeScript framework is to enable the developer to create hybrid style mobile application. Hybrid application uses the platform specific browser API to host a web application inside a normal mobile application and provides system access to the application through JavaScript API. NativeScript invests heavily on the JavaScript language to provide an efficient framework for developers. Since JavaScript is de-facto standard for client side programming (Web development) and every developer is well aware of the JavaScript language, it helps developers to easily get into the NativeScript framework. At the low level, NativeScript exposes the native API through a collection of JavaScript plugins called Native plugins. NativeScript builds on the foundation of Native plugins and provides many high level and easy to use JavaScript Modules. Each module does a specific functionality like accessing a camera, designing a screen, etc. All these modules can be combined in multiple ways to architect a complex mobile application. Below diagram shows the high level overview of the NativeScript framework − NativeScript Application − NativeScript framework allows developer to use either Angular style application or Vue Style application. JavaScript Modules − NativeScript framework provides a rich set of JavaScript modules clearly categorized as UI Modules, Application Modules, Core Modules, etc. All modules can be accessed by application at any time to write any level of complex application. JavaScript plugins − NativeScript framework provides a large collection of JavaScript plugins to access the platform related functionality. Modules uses the JavaScript plugins to provide platform specific functionality. Native plugins− Native plugins are written in platform specific language to wrapper the system functionality which will be further used by JavaScript plugin. Platform API − API provided by platform vendors. In short, NativeScript application is written and organized using modules. Modules are written in pure JavaScript and the modules access the platform related functionality (whenever needed) through plugins and finally, the plugins bridge the platform API and JavaScript API. Workflow of a NativeScript Application As we learned earlier, NativeScript application is composed of modules. Each and every module enables a specific feature. The two important categories of module to bootstrap a NativeScript application are as follows − Root Modules Page Modules Root and Page modules can be categorized as application modules. The application module is the entry point of the NativeScript application. It bootstraps a page, enables the developer to create user interface of the page and finally allows execution of the business logic of the page. An application module consists of below three items − User interface design coded in XML (e.g. page.xml/page.component.html) Styles coded in CSS (e.g. page.css/page.component.css) Actual business logic of the module in JavaScript (e.g. page.js/page.component.ts) NativeScript provides lot of UI components (under UI Module) to design the application page. UI Component can be represented in XML format or HTML format in Angular based application. Application module uses the UI Component to design the page and store the design in separate XML, page.xml/page.component.html. The design can be styled using standard CSS. Application modules stores the style of the design in separate CSS, page.css/page.component.css. The functionality of the page can be done using JavaScript/TypeScript, which has full access to the design as well as the platform features. Application module uses a separate file, page.js/page.component.ts to code the actual functionality of the page. Root Modules NativeScript manages the user interface and user interaction through UI containers. Every UI container should have a Root Module and through which the UI container manages UI. NativeScript application have two type of UI containers − Application Container − Every NativeScript application should have one application container and it will be set using application.run() method. It initializes the UI of the application. Model View Container − NativeScript manages the Modal dialogs using model view container. A NativeScript application can have any number of model view container. Every root module should have only one UI Component as its content. The UI component in turn can have other UI components as its children. NativeScript provides a lot of UI component like TabView, ScrollView, etc., with child feature. We can use these as root UI component. One exception is Frame, which does not have child option but can be used as root component. Frame provides options to load Page Modules and options to navigate to other page modules as well. Page Modules In NativeScript, each and every page is basically a Page Module. Page module is designed using the rich set of UI components provided by NativeScript. Page modules are loadedinto the application through Frame component (using its defaultPage attribute or using navigate() method), which in turn loaded using Root Modules, which again in turn loaded using application.run() while the application is started. The work flow of the application can be represented as in the below diagram − The above diagram is explained in detail in the following steps − NativeScript Application starts and calls application.run() method. application.run() loads a Root module. Root Module is designed using any one of the UI component as specified below − Frame TabView SideDrawer Any Layout View Frame component loads the specified page (Page module) and gets rendered. Other UI components will be rendered as specified in the Root Module. Other UI component also has option to load Page Modules as its main content.

NativeScript Tutorial PDF Version Quick Guide Resources Job Search Discussion NativeScript is an open source framework for creating native iOS and Android apps in Angular, TypeScript, or JavaScript. It was developed by Progress Telerik. NativeScript allows you to build web and mobile apps from a single code-base. This tutorial walks through the basics of NativeScript framework, installation of NativeScript CLI, setting up Android Studio and iOS to develop NativeScript based application, architecture of NativeScript framework and finally conclude with developing all type of web and mobile apps. Audience This tutorial is prepared for professionals who are aspiring to make a career in the field of mobile applications. This tutorial is intended to make you comfortable in getting started with NativeScript framework and its various functionalities. Prerequisites This tutorial is written assuming that the readers are already aware about what a Framework is and that the readers have a sound knowledge on Object Oriented Programming and basic knowledge on Android and iOS development, JavaScript and Angular. If you are a beginner to any of these concepts, we suggest you to go through tutorials related to these first, before you start with NativeScript. Print Page Previous Next Advertisements ”;

Discuss NativeScript ”; Previous Next NativeScript is an open source framework for creating native iOS and Android apps in Angular, TypeScript, or JavaScript. It was developed by Progress Telerik. NativeScript allows you to build web and mobile apps from a single code-base. This tutorial walks through the basics of NativeScript framework, installation of NativeScript CLI, setting up Android Studio and iOS to develop NativeScript based application, architecture of NativeScript framework and finally conclude with developing all type of web and mobile apps. Print Page Previous Next Advertisements ”;