NativeScript Part 2

Introduction:

Welcome to part 2 of our NativeScript series. By now you should have a working installation of NativeScript with an Android emulator and are ready to dive into some actual code.

Note: If you don’t have a working installation yet, head to part 1 of the series for a quick setup guide.

In the following posts in the series we will build a multiple selection quiz game where users can select from a list of available quizzes (loaded from our server) and see how they are ranked against the current average.

While our app will run on both iOS and Android we will focus on the Android development (as iOS development requires a Macintosh).

The final product will look something like this.

1

For the current part of our tutorial we will be focused on the first view – our welcome screen.

Setting Up Our Project

NativeScript CLI provides us with an easy way to start a project –

`tns create <projectName> –template <templateName>`

 

There are several built in templates provided by the NativeScript team, but for our example we will use a custom template (which already includes our images and some base files). For custom templates we simply provide the url of the Git repository (Github in our case).

So let us start by creating out project:

tns create quizMonkey –template https://github.com/gnesher/nativescript-workshop-template

If all goes well you should see a message similar to this:

2

A new folder by your app’s name will be created at the containing folder, and it will hold the application skeleton.

Start your emulator/simulator.

CD to your newly created folder:

3

And run tns run android

Assuming all went well, the emulator should start and you will see an empty application (during the first run a few additional packages will be installed, so it might take a minute or two depending on your connection speed). The result should look like this:

4

NativeScript supports live reloading, so let’s open our favourite IDE and edit ‘welcome-view.xml’ by changing our label from text=”welcome” to text=”welcome to Quiz Monkey”

Save and look for the change in your emulator.

Note: sometimes hot-reloading does not work when changing xml/css files, in these cases you can make a small change on a js file (add a space for example) to prompt it.

Before we move forward let us quickly review the folder structure

Within our app folder we have pre populated two folders:

  • Views – will contain our individual views, currently contain a single empty view called welcome-view
  • Shared – shared logic for our app. Also includes the mockData folder with some mock questions for our quiz.
  • App_Resources – contains our images in multiple size formats (to fit different device resolutions). There are several tools that help creating the different size images such as – http://nsimage.brosteins.com/

 

Creating our first view – the Welcome Page

Our welcome-view currently contains a single xml file. Open it in your editor of choice and change the label to contain the following text – “Welcome To Quiz Monkey!”

1

<Page xmlns=”http://schemas.nativescript.org/tns.xsd”&gt;

<Label text=”Welcome to Quiz Monkey!”></Label>

</Page>

 

Note: Have a look at app-root.xml this is where we define which view loads on app start. At the moment we load the welcome-view but during the development we may switch to different views to speed up the development.

Save welcome-view.xml and see how it looks on your emulator – you will notice that there’s an action bar with your app name – let’s hide it by adding the following property to the page tag

2

Page xmlns=”http://schemas.nativescript.org/tns.xsd&#8221;

actionBarHidden=“true”>

So far we only have a static XML file which isn’t very useful. In order to hook it up to our Javascript we use the ‘loaded’ event which triggers the selected function from our JavaScript file (file names must be identical). Let’s start by adding the following property to the XML file

3

<Page xmlns=”http://schemas.nativescript.org/tns.xsdloaded=“onPageLoaded” actionBarHidden=”true”>

Now create a new file in the same folder named ‘welcome-view.js’. In the new file, export a function called ‘onPageLoaded’ and have it log something to the console:

4

exports.onPageLoaded = function() {

console.log(“welcome page loaded”);

};

After saving, you’ll see your log in the terminal:

5

* If you don’t see the console.log try restarting the tns compiler.

Note: You can start your application in debug mode, which allows you to use Chrome for debugging. Simply run tns debug android and you will be prompted with alink you can copy/paste into the browser. Visual Studio Code users can also debug using their IDE. See here for more details.

Before we can start adding more elements to our page we need to decide how NativeScript will organise the elements by selecting one of the provided layout containers (you can learn about other layouts in the following link).

For now we will use the StackLayout. By default it stacks items vertically (but it can also stack them horizontally by specifying its orientation to horizontal).

Add the StackLayout element to the root of the Page, and place in it the label and a new button:

5

<Button text=”Start Here”/>

Your .xml file should now look similar to this:

6

<Page xmlns=”http://schemas.nativescript.org/tns.xsd&#8221;

loaded=”onPageLoaded”

actionBarHidden=”true”>

<StackLayout orientation=”vertical”>

<Label text=”Welcome to Quiz Monkey!”/>

<Button text=”Start Here”/>

</StackLayout>

</Page>

Now add a tap event handler to the by adding the following property:

7

<Button text=”Start Here” class=”navigationButton” onTap=“onButtonTapped”/>

In our JS file, add an export for the ‘onTap’ function, which will only write to the console for now:

8

exports.onButtonTapped = function() {

console.log(“start button tapped”);

};

Run the application and try tapping the button, you should see our console.log in the command prompt

Add styles

Styling is an important aspect of any mobile application. The simplify the process of styling your app Nativescript decided to use a subset of CSS which should be familiar to most web developers.

A complete list of supported CSS commands can be found here

Now let’s Add some design to our app. We start by adding the the following classes to welcome-view.xml:

  1. For the StackLayout add a welcome-stackLayoutContainer class
  2. For the Label add a welcome-text class
  3. And for the Button add a navigationButton class

9

<Page xmlns=”http://schemas.nativescript.org/tns.xsd&#8221;

loaded=”onPageLoaded”

actionBarHidden=”true”

class=”welcome-pageContainer imageBackgroundContainer”>

<StackLayout class=”welcome-stackLayoutContainer”

orientation=”vertical”>

<Label text=”Welcome to Quiz Monkey!”

class=”welcome-text”/>

<Button text=”Start Here”

class=”navigationButton”

onTap=”onButtonTapped”/>

</StackLayout>

</Page>

 

Create a new css file called ‘welcome-view.css’ within the views/welcome-view folder and paste the following code:

10

.welcome-pageContainer{

padding: 25;

background-image: url(“res://monkeybackground”);

}

.welcome-text{

font-size: 45;

vertical-align: center;

text-align: center;

white-space: normal;

margin-bottom: 20;

color: rgb(49, 2, 2);

}

.welcome-stackLayoutContainer{

vertical-align: bottom;

}

* You may have noticed that our background image is located in “res://” this is our resource folder. NativeScript will choose which version (size) of image it will display based on your phone.

* It’s also worth noting that we don’t add the image extension (NativeScript support either png or jpg and will add the extension automatically.

The CSS we just added is only applied to the welcome-page, but we also need to add some global CSS for the app. To do that paste the following styles inside the ‘app.css’ file which holds style common to the entire app:

11

.imageBackgroundContainer{

background-repeat: no-repeat;

background-position: center;

background-size: cover;

}

.navigationButton{

background-color: white;

border-color: black;

border-width: 1;

border-radius: 50%;

}

You should now have a nice-looking non-functional welcome view:

6

Join us next month for the third part of the series where we will add the quiz list and question page. Until then feel free to contact us if you have a question / ran into a problem while following the post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: