Beginner’s Guide to NativeScript: Creating a Multi-page Application
In the previous post of my Beginner’s Guide to NativeScript series, we kicked things off by focusing on the high-level benefits of using NativeScript, along with a simple demo app to get us started.
If you haven’t read this introduction, and you’re unfamiliar with NativeScript, I’d suggest taking a look:
In this post, we’ll learn how to modify our previous app into a multi-page application. The concepts we’ll cover in this post include:
- Understanding an app’s structure
- Adding pages to the structure
- Navigating between different pages
Let’s go through these concepts one by one and create a multi-page application.
Concepts
1. Structure of NativeScript Apps
The app that have we created in the previous post consists of the following structure:
Let’s go through this one by one:
1. app: This is an important folder where we write most of our code. The app folder contains all our JavaScript files.
2. hooks: Let's say we start writing our application in TypeScript instead of JavaScript—the hooks folder contains the TypeScript hook to convert the TS files into JS files before the application builds.
3. node_modules: These are the external packages needed to run the app. Every package from Node Package Manager is going to be installed here.
4. platform: These are platform-specific folders that NativeScript uses to organize all the files associated with the platform-named folders. The platform could be Android or iOS, in the case of building mobile apps.
5. package.json: The package.json file is used to contain the package information.
2. Adding Pages to the Structure
In the package.json file, the command can indicate which file is the entry file of this application.
An entry file is the only file that runs and is responsible for running the other files in the application.
"main": "app.js"By default, app.js is the entry file, but the only purpose it generally has is to pass the control over to other files. It actually is looking for a file, app-root.xml, as you can see in the code below:
application.run({ moduleName: "app-root" });But what does this app-root.xml file contain? The app-root.xml file loads a frame, which is the view on the page.
Note: Remember, each page in the app is going to be loaded in a
Frame, in NativeScript terminology.
<Frame defaultPage="main-page"></Frame>As we can see here, the Frame is setting the defaultPage as main-page.
The main-page is not a folder, but instead a collection of HTML, CSS and JS files all named main-page, but with .html, .css and .js extensions respectively.
To create another page, say beta, we will create a file beta.js
and import all NativeScript modules required to create the view into it.
var frame = require("ui/frame");
var Page = require("ui/page").Page;
var StackLayout = require("ui/layouts/stack-layout").StackLayout;
var Label = require("ui/label").Label;
var Button = require("ui/button").Button;Once this is done, we’ll create the page view and return the page object:
exports.createPage = function() {// Create the components for this pagevar page = new Page();
var layout = new StackLayout();
var mainLabel = new Label();
var bButton = new Button();// Assign our page title
page.actionBar.title = "Beta Test";// Setup our welcome labelmainLabel.text = "Lets run a Beta Test!";
mainLabel.cssClass = "beta";// Setup our Go Back button
bButton.text = "Go Back";
bButton.on("tap", function () {
frame.topmost().goBack();
});// Add our layout items to our StackLayout
// This is same as appending DOM Elements after creating themlayout.addChild(mainLabel);
layout.addChild(bButton);// Assign our layout to the page.
page.content = layout;// Return our created page return page;};
3. Navigation
Finally, we’ll redirect to the beta.js file with the click of a button. To do this, on the main-view-model.js file, you can change the code to the following:
const Observable = require("tns-core-modules/data/observable").Observable;var frame = require('ui/frame');function createViewModel() { const viewModel = new Observable();
viewModel.onTap = () => {
frame.topmost().navigate('beta');
}; return viewModel;
}exports.createViewModel = createViewModel;
The function frame.topmost.navigate() decides where to navigate the user.
We need to pass the page name beta inside the navigate function, which redirects the page corresponding to the argument passed to it.
frame.topmost().navigate('beta');If everything is ready, we can build the app by using the following commands:
# For Android
tns run android# For iOS
tns run ios
And boom! We can now see our app running and navigating to a different page.
Conclusion
In this post, we’ve extended our NativeScript app from a single page to a multi-page application. Along the way, we learned about structuring folders and how to bootstrap applications in NativeScript. With this knowledge, you can start creating applications with multiple pages and allow users to easily navigate between them.
In upcoming posts of this series, we’re going to learn more about layouts and working with CSS, which will make this app more user-friendly.
If you liked the article, please clap your heart out. Tip — Your 50 claps will make my day!
Want to know more about me? Please check out my website. If you’d like to get updates, follow me on Twitter and Medium. If anything isn’t clear or you want to point out something, please comment down below.
Editor’s Note: Heartbeat is a contributor-driven online publication and community dedicated to providing premier educational resources for data science, machine learning, and deep learning practitioners. We’re committed to supporting and inspiring developers and engineers from all walks of life.
Editorially independent, Heartbeat is sponsored and published by Comet, an MLOps platform that enables data scientists & ML teams to track, compare, explain, & optimize their experiments. We pay our contributors, and we don’t sell ads.
If you’d like to contribute, head on over to our call for contributors. You can also sign up to receive our weekly newsletters (Deep Learning Weekly and the Comet Newsletter), join us on Slack, and follow Comet on Twitter and LinkedIn for resources, events, and much more that will help you build better ML models, faster.
