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.

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:

But what does this app-root.xml file contain? The app-root.xml file loads a frame, which is the view on the page.

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.

Once this is done, we’ll create the page view and return the page object:

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:

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.

If everything is ready, we can build the app by using the following commands:

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.

Fritz

Our team has been at the forefront of Artificial Intelligence and Machine Learning research for more than 15 years and we're using our collective intelligence to help others learn, understand and grow using these new technologies in ethical and sustainable ways.

Comments 0 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

wix banner square