| title | contributors | |||
|---|---|---|---|---|
Playground Tutorial |
|
The NativeScript Playground is a place in the cloud where you can just play around with NativeScript and Vue.js from your browser until you figure out the basics. Fire the link and start dragging and dropping component code around the place.
You can work in the Playground for as long as you like. You can use it to just get a taste of NativeScript development or to develop your entire project inside. However, when you get to the point where you are ready to put your app out there, you need to jump on the more advanced wagon and install NativeScript tools locally and then pick a template to start with.
This page consists of two parts:
- Part 1: Getting familiar with the Playground
- Part 2: Building an app
- The bare Vue.js template
- Basic design
- Basic functionality: Add tasks
- Basic functionality: View, complete, and delete tasks from the To Do tab
- Basic functionality: View, return to active tasks, and delete tasks from the Completed tab
- Advanced design: Styled input field and button
- Advanced design: Styled tab navigation
- Advanced design: Styled active tasks
- Advanced design: Styled completed tasks
Firing this link gets you to a simple code editor in the cloud where a very basic NativeScript + Vue.js template is pre-loaded for you.
TIP: Head to Sample Tasks for the Playground for ideas about how to get started in the Playground.
If this is your first time here, the Playground prompts you to install a couple of mobile apps—the NativeScript Playground and the NativeScript Preview. Together they let you see your code changes applied in real time on device. No code building and bundling required.
You can ignore this step but without it, you'll miss most of the fun and excitement of playing around with Vue.js and NativeScript.
Keep the apps running while you're experimenting with the code.
The left sidebar offers a file explorer and a Components panel. Most of your effort on your app will happen in app.js and app.css, containing the app functionality and taking care of the app styles, respectively. No need to deep dive in any other files for now.
The Components panel provides quick access to already pre-configured code for all available NativeScript UI components.
From the top of the page, you can push changes to the preview apps on your device, save, and download your code.
The bottom of the page is your best friend providing real-time error reports and device logs.
Just click a component from the Components panel and drag it to the code editor, somewhere inside the template block. Releasing the mouse button inserts some pre-written sample code for the respective component. Any methods that go with it (such as what happens on button or item tap) are automatically added at the top of the page before the template block.
TIP: Use the search of the Components panel to quickly find the element that you want to use. The search works only with the title of the component and not the actual name used in the code. For example: the search finds text field but does not find textfield.
For most UI components to work, you need to drop them inside the <Page> block, preferably inside a layout component. Layouts tell your app how to position the UI components on the screen.
NOTE: Right now, there's nothing stopping you from dropping the code at a place that will cause your app to crash or simply not load. In those cases, check the Errors and Device Logs tabs for more information.
After you place the code in a valid spot, hit Preview (or Ctrl+S or Cmd+S) and see your app refresh on your device screen in an instant.
In some cases, when you interact with the app, it will close unexpectedly. Just fire it up again and inspect the crash report.
If at any point you stop seeing your changes applied on the device, click QR code and re-scan the QR code with the Playground app.
So, the component runs and shows on your screen. You're excited but you want to make it your own. Hack away at the default code suggested by the Playground. Fix sizes and labels, remove or add elements.
Go to app.css and switch up the styling a bit. Experiment with colors and font sizes.
If you want to explore the NativeScript Playground, you can start by creating a simple to-do app with the following requirements:
- Basic design
- Two-tab layout
- One tab shows active tasks and lets you add new tasks
- Second tab lists completed tasks
- Basic functionality
- Add tasks: Users can add tasks as text
- View tasks: Newly added tasks are listed as active and can be tapped
- Complete tasks: Tapping an active task shows an action dialog with options
- Delete tasks: Tapping an active or completed task shows an action dialog with options
- Advanced design
- Input and button for adding tasks are styled
- Tabs are styled
- Active tasks are styled
- Completed tasks are styled
TIP: All sections of this tutorial contain a Some NativeScript basics and Requirement implementation sub-sections. You can skip the basics sub-section and jump straight to the implementation for a more hands-on approach.
All development effort for this tutorial happens in app.js and app.css, containing the app functionality and taking care of the app styles, respectively.
The app.js for your newly created Vue.js project consists of a simple template declaration without any functionality. As you drag and drop user interface components to the app, the Playground also adds a methods block and populates it with code containing actual app functionality.
In app.js, you'll be working in the template block to design the user interface or in the methods block to build the app functionality. The template block requires NativeScript-compatible XML. The methods block accepts both Vue.js and NativeScript JavaScript code.
Here's how your app will look at the start and at the end of this section.
| Initial screen | Tab 1 | Tab 2 |
|---|---|---|
 |
 |
 |
The <Page> element is the top-level user interface element of every NativeScript+Vue.js app. All other user interface elements are nested within.
The <ActionBar> element shows an action bar for the <Page>. A <Page> cannot contain more than one <ActionBar>.
Typically, after the <ActionBar>, you will have navigation components (such as a drawer or a tab view) or layout components. These elements control the layout of your app and let you determine how to place other user interface elements inside.
Use the <TabView> component to create a two-tab app.
- Remove the default
<ScrollView>block and all its contents that come with the template.<ScrollView>components are top-level layout containers for scrollable content. - Drag and drop the
<TabView>component in its place.
The Playground doesn't apply code formatting and doesn't take care of indentation when inserting new components. - Configure the height of the
<TabView>to fill the screen (set it to 100%).
On an iOS device the default height setting causes the tabs to show somewhere around the middle of the screen. - Change the titles of the
<TabViewItem>elements and their contents to reflect their purpose.
At this point, text content for the tabs is shown in<Label>components with no styling and formatting. Apply thetextWrap="true"property to the respective<Label>components to improve the visualization of the text.
At the end of this stage, your code should resemble this sample:
const Vue = require("nativescript-vue");
new Vue({
template: `
<Page class="page">
<ActionBar title="My Tasks" class="action-bar" />
<TabView height="100%">
<TabViewItem title="To Do">
<Label text="This tab will list active tasks and will let users add new tasks." textWrap="true" />
</TabViewItem>
<TabViewItem title="Completed">
<Label text="This tab will list completed tasks for tracking." textWrap="true" />
</TabViewItem>
</TabView>
</Page>
`,
}).$start();Here's how your app will look at the start and at the end of this section.
| Initial screen | Tab 1 - No tasks | Tab 1 - Added tasks |
|---|---|---|
|
 |
 |
The layout components let you arrange the various UI widgets of your app. Whenever you need to place more than one UI widget on your app screen, you are likely to use one of the available layout options. The <StackLayout> and the <GridLayout> are basic but versatile options, letting you position elements vertically or in a table-like layout, respectively. While the
<StackLayout> displays elements in their natural sequence, the <GridLayout> lets you choose the exact positions of your elements in the grid.
Use a <GridLayout> to arrange a <TextField> and a <Button> on the page. The latter two form the input functionality of the app.
Use a <ListView> to show tasks below the input field.
- Delete the
<Label>component from the first<TabViewItem>block for the first tab. - Drag and drop a
<StackLayout>component within the<TabViewItem>block for the first tab.
The default code creates a colorful vertical stack. - Delete all
<Label>components from the<StackLayout>block. - Drag and drop a
<GridLayout>component within the<StackLayout>block for the first tab.
The default code creates a colorful table that shows how to position elements and merge grid cells. - Delete all
<Label>components from the<GridLayout>block. - Configure the
<StackLayout>.- Remove background color.
- Set width and height.
- Configure the
<GridLayout>.- Set the grid to consist of two columns and one row.
- Set the width of the grid to 100% so that it takes the entire width of the screen.
- Remove any additional settings for the grid.
- Drag and drop a
<TextField>and a<Button>within the<GridLayout>block.
The Playground adds JavaScript code to your code for the first time. Note thedata()andmethodsblocks added above thetemplateblock. In next implementation steps, you will need to add code to these sections to create some of the app functionality. - Drag and drop a
<ListView>below the grid.
The default code creates a list of countries and country flag icons. - Configure the positioning of the elements within the grid.
- Set the
<TextField>to inhabit the first column and the first row. - Set the
<Button>to inhabit the second column and the first row.
- Set the
- Clean up sample code from the
<TextField>and the<ListView>. Set a height for the<ListView>. - Log newly added tasks in the console.
- Add newly added tasks into the array of tasks. Use
unshiftto place new items at the top of the page. - Clear the text field after input.
- List task name on the screen.
At the end of this stage, your code should resemble this sample:
const Vue = require("nativescript-vue");
new Vue({
data() {
return {
todos: [],
textFieldValue: "",
}
},
methods: {
onItemTap(args) {
console.log('Task with index: ' + args.index + ' tapped'); // Logs tapped tasks in the console for debugging.
},
onButtonTap() {
if (this.textFieldValue === "") return; // Prevents users from entering an empty string.
console.log("New task added: " + this.textFieldValue + "."); // Logs the newly added task in the console for debugging.
this.todos.unshift({ name: this.textFieldValue }); // Adds tasks in the ToDo array. Newly added tasks are immediately shown on the screen.
this.textFieldValue = ""; // Clears the text field so that users can start adding new tasks immediately.
},
},
template: `
<Page class="page">
<ActionBar title="My Tasks" class="action-bar" />
<TabView height="100%">
<TabViewItem title="To Do">
<!-- Positions an input field, a button, and the list of tasks in a grid. -->
<StackLayout orientation="vertical" width="100%" height="100%">
<GridLayout columns="2*,*" rows="auto" width="100%">
<TextField row="0" col="0" v-model="textFieldValue" hint="Type new task..." editable="true" @returnPress="onButtonTap" /> <!-- Configures the text field and ensures that pressing Return on the keyboard produces the same result as tapping the button. -->
<Button row="0" col="1" text="Add task" @tap="onButtonTap" />
</GridLayout>
<ListView for="todo in todos" @itemTap="onItemTap" height="100%"> <!-- Make sure to set a height or your list will not show on iOS. -->
<v-template>
<Label :text="todo.name" />
</v-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Completed">
<Label text="This tab will list completed tasks for tracking." textWrap="true" />
</TabViewItem>
</TabView>
</Page>
`,
}).$start();Here's how your app will look at the start and at the end of this section.
| Tab 1 - Added tasks | Tab 1 - Item tapped | Tab 2 - Completed tasks |
|---|---|---|
|
 |
 |
Out-of-the-box, the <ListView> component detects a tap gesture for every item and emits an event for it. The event carries information about the index of the tapped array item and the array item itself. To let the user choose the outcome of a tap gesture and expand the functionality of your add, you can tie a dialog to the event.
dialogs is a globablly available module that provides several configurable dialog types for apps: alert, action, prompt, login, confirmation. This implementation relies on action() to let the user choose if they want to mark a task as completed or delete it from the list of active tasks.
- In the second
<TabViewItem>block, drag and drop a<ListView>element, clean up its contents and set a height for it. - In the newly added
<ListView>element show items from an array of completed tasks (dones).
<ListView for="done in dones" @tap="onDoneTap" height="100%"> <!-- Make sure to set a height or your list will not show on iOS. -->
<v-template>
<Label :text="done.name" />
</v-template>
</ListView>- Modify the
onItemTapmethod.
- Method shows an
action()dialog. - Method logs user selection in the console for debugging.
- Based on user selection, the method moves elements from the
todosarray to thedonesarray, deletes elements from thetodosarray, or dismisses the dialog. Usesplice()to avoid leaving holes in the array andunshift()to make sure that recently completed tasks are shown on top.
onItemTap(args) {
action('What do you want to do with this task?', 'Cancel', ['Mark completed', 'Delete forever'])
.then(result => {
console.log(result); // Logs the selected option for debugging.
switch (result) {
case 'Mark completed':
this.dones.unshift(args.item); // Places the tapped active task at the top of the completed tasks.
this.todos.splice(args.index, 1); // Removes the tapped active task.
break;
case 'Delete forever':
this.todos.splice(args.index, 1); // Removes the tapped active task.
break;
case 'Cancel' || undefined: // Dismisses the dialog.
break;
}
})
},At the end of this stage, your code should resemble this sample:
const Vue = require("nativescript-vue");
new Vue({
data() {
return {
todos: [],
dones: [],
textFieldValue: "",
}
},
methods: {
onItemTap(args) {
action('What do you want to do with this task?', 'Cancel', ['Mark completed', 'Delete forever'])
.then(result => {
console.log(result); // Logs the selected option for debugging.
switch (result) {
case 'Mark completed':
this.dones.unshift(args.item); // Places the tapped active task at the top of the completed tasks.
this.todos.splice(args.index, 1); // Removes the tapped active task.
break;
case 'Delete forever':
this.todos.splice(args.index, 1); // Removes the tapped active task.
break;
case 'Cancel' || undefined: // Dismisses the dialog.
break;
}
})
},
onButtonTap() {
console.log("New task added: " + this.textFieldValue + "."); // Logs the newly added task in the console for debugging.
this.todos.unshift({ name: this.textFieldValue }); // Adds tasks in the ToDo array. Newly added tasks are immediately shown on the screen.
this.textFieldValue = ""; // Clears the text field so that users can start adding new tasks immediately.
},
},
template: `
<Page class="page">
<ActionBar title="My Tasks" class="action-bar" />
<TabView height="100%">
<TabViewItem title="To Do">
<!-- Positions an input field, a button, and the list of tasks in a grid. -->
<StackLayout orientation="vertical" width="100%" height="100%">
<GridLayout columns="2*,*" rows="auto" width="100%">
<TextField row="0" col="0" v-model="textFieldValue" hint="Type new task..." editable="true" @returnPress="onButtonTap" /> <!-- Configures the text field and ensures that pressing Return on the keyboard produces the same result as tapping the button. -->
<Button row="0" col="1" text="Add task" @tap="onButtonTap" />
</GridLayout>
<ListView for="todo in todos" @itemTap="onItemTap" height="100%"> <!-- Make sure to set a height or your list will not show on iOS. -->
<v-template>
<Label :text="todo.name" />
</v-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Completed">
<ListView for="done in dones" @tap="onDoneTap" height="100%"> <!-- Make sure to set a height or your list will not show on iOS. -->
<v-template>
<Label :text="done.name" />
</v-template>
</ListView>
</TabViewItem>
</TabView>
</Page>
`,
}).$start();Here's how your app will look at the start and at the end of this section.
| Tab 2 - Completed tasks | Tab 2 - Item tapped | Tab 1 - Active tasks |
|---|---|---|
 |
 |
 |
This implementation step does not require any additional knowledge.
For the second tab, modify the onDoneTap method:
-
Method shows an
action()dialog. -
Method logs user selection in the console for debugging.
-
Based on user selection, the method moves elements from the
donesarray to thetodosarray, deletes elements from thedonesarray, or dismisses the dialog. Usesplice()to avoid leaving holes in the array andunshift()to make sure that recently completed tasks are shown on top.onDoneTap(args) { action('What do you want to do with this task?', 'Cancel', ['Mark to do', 'Delete forever']) .then(result => { console.log(result); // Logs the selected option for debugging. switch (result) { case 'Mark to do': this.todos.unshift(args.item); // Places the tapped completed task at the top of the to do tasks. this.dones.splice(args.index, 1); // Removes the tapped completed task. break; case 'Delete forever': this.dones.splice(args.index, 1); break; case 'Cancel'||undefined: break; } }) },
At the end of this stage, your code should resemble this sample:
const Vue = require("nativescript-vue");
new Vue({
data() {
return {
todos: [],
dones: [],
textFieldValue: "",
}
},
methods: {
onItemTap(args) {
action('What do you want to do with this task?', 'Cancel', ['Mark completed', 'Delete forever'])
.then(result => {
console.log(result); // Logs the selected option for debugging.
switch (result) {
case 'Mark completed':
this.dones.unshift(args.item); // Places the tapped active task at the top of the completed tasks.
this.todos.splice(args.index, 1); // Removes the tapped active task.
break;
case 'Delete forever':
this.todos.splice(args.index, 1);
break;
case 'Cancel' || undefined:
break;
}
})
},
onDoneTap(args) {
action('What do you want to do with this task?', 'Cancel', ['Mark to do', 'Delete forever'])
.then(result => {
console.log(result); // Logs the selected option for debugging.
switch (result) {
case 'Mark to do':
this.todos.unshift(args.item); // Places the tapped completed task at the top of the to do tasks.
this.dones.splice(args.index, 1); // Removes the tapped completed task.
break;
case 'Delete forever':
this.dones.splice(args.index, 1); // Removes the tapped completed task.
break;
case 'Cancel'||undefined:
break;
}
})
},
onButtonTap() {
console.log("New task added: " + this.textFieldValue + "."); // Logs the newly added task in the console for debugging.
this.todos.unshift({ name: this.textFieldValue }); // Adds tasks in the ToDo array. Newly added tasks are immediately shown on the screen.
this.textFieldValue = ""; // Clears the text field so that users can start adding new tasks immediately.
}
},
template: `
<Page class="page">
<ActionBar title="My Tasks" class="action-bar" />
<TabView height="100%">
<TabViewItem title="To Do">
<!-- Positions an input field, a button, and the list of tasks in a grid. -->
<StackLayout orientation="vertical" width="100%" height="100%">
<GridLayout columns="2*,*" rows="auto" width="100%">
<TextField row="0" col="0" v-model="textFieldValue" hint="Type new task..." editable="true" @returnPress="onButtonTap" /> <!-- Configures the text field and ensures that pressing Return on the keyboard produces the same result as tapping the button. -->
<Button row="0" col="1" text="Add task" @tap="onButtonTap" />
</GridLayout>
<ListView for="todo in todos" @itemTap="onItemTap" height="100%" > <!-- Make sure to set a height or your list will not show on iOS. -->
<v-template>
<Label :text="todo.name" />
</v-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Completed">
<ListView for="done in dones" @itemTap="onDoneTap" height="100%" > <!-- Make sure to set a height or your list will not show on iOS. -->
<v-template>
<Label :text="done.name" />
</v-template>
</ListView>
</TabViewItem>
</TabView>
</Page>
`,
}).$start()Here's how your app will look at the start and at the end of this section.
| Tab 1 - No style | Tab 1 - Styled | Tab 1 - Styled |
|---|---|---|
|
 |
 |
When you work with NativeScript and Vue.js, you can use application-wide CSS or inline CSS to style your app. Application-wide CSS is applied first and is handled in app.css in the root of your project. See also: Styling.
With type selectors, you can select a UI component and apply styling to it. To select a type, use the component name as provided in the code. For example, to select the tab view, use TabView.
In app.css, change the font size, the color, and the margins around the <TextField>.
TextField {
font-size: 20;
color: #53ba82;
margin-top: 10;
margin-bottom: 10;
margin-right: 5;
margin-left: 20;
}- In
app.json line 63, add anidfor the button.
<Button id="add-task-button" row="0" col="1" text="Add task" @tap="onButtonTap" />- In
app.css, create a style for the button. Modify the style to create a colorful button with rounded corners.
#add-task-button {
font-size: 20;
font-weight: bold;
color: white;
background-color: #53ba82;
margin-top: 20;
margin-bottom: 10;
margin-right: 20;
margin-left: 5;
border-radius: 20px;
}Here's how your app will look at the start and at the end of this section.
| Tabs - No style | Tabs Styled |
|---|---|
|
 |
<TabView> provides some styling properties out of the box. You can apply a text transform to each tab titles (textTransform) and change the font size and color globally (tabTextFontSize, tabTextColor, selectedTabTextColor). You can also change the background color of your tabs (tabBackgroundColor).
NOTE: Currently,
tabTextFontSizedoes not work on iOS and you cannot change the font size of tab titles on iOS.
In app.js, on line 57, add the selectedTabTextColor and tabTextFontSize property. If you're testing this on iOS, the font size will not change but should work fine on Android.
<TabView height="100%" selectedTabTextColor="#53ba82" tabTextFontSize="20" >In app.js, on lines 58 and 73, apply the textTransform property. You can use this property only on the <TabViewItem> level.
<TabViewItem title="To Do" textTransform="uppercase" ><TabViewItem title="Completed" textTransform="uppercase">Here's how your app will look at the start and at the end of this section.
| Active tasks - No style | Active tasks - no separator | Active tasks - styled active tasks |
|---|---|---|
|
 |
 |
<ListView> and <Label> have out of the box style properties that you can use to control elements such as the list separator or the text wrap from app.js. To change the font style, color, and positioning of text, you need to use CSS in app.css.
To implement a style particularly for the text of active tasks, you can set an id for the <Label> element.
- In
app.js, on line 67, set anidfor the<Label>that represents active tasks and enable text wrapping. Enabling text wrapping ensures that longer text shows properly in your list
<Label id="active-task" :text="todo.name" textWrap="true" />- On line 65, add the
separatorColorproperty and set it totransparent. This way, the separator will no longer appear in your list.
<ListView for="todo in todos" @itemTap="onItemTap" height="100%" separatorColor="transparent">- In
app.css, create the style for active tasks. Set font size, color, and some padding to position the text on the page. Play with margins and paddings until you get a result that works for you.
#active-task {
font-size: 20;
font-weight: bold;
color: #53ba82;
margin-left: 20;
padding-top: 5;
padding-bottom: 10;
}Here's how your app will look at the start and at the end of this section.
| Completed tasks - No style | Completed tasks - Styled |
|---|---|
 |
 |
This section applies the basic NativeScript knowledge from Advanced design: Styled active tasks.
- In
app.js, on line 76, set anidfor the<Label>that represents completed tasks and enable text wrapping. Enabling text wrapping ensures that longer text shows properly in your list
<Label id="completed-task" :text="done.name" textWrap="true" />- On line 74, set an
id, add theseparatorColorproperty, and set it totransparent. This way, the separator will no longer appear in your list. You can use theidto style the margins for the<ListView>.
<ListView id="completed-list" for="done in dones" @itemTap="onDoneTap" height="100%" separatorColor="transparent" >- In
app.css, create the style for completed tasks. Set font size, color, text decoration, and some padding to position the text on the page. Play with margins and paddings until you get a result that works for you.
#completed-task {
font-size: 20;
color: #d3d3d3;
margin-left: 20;
padding-top: 5;
padding-bottom: 10;
text-decoration: line-through;
}- Create a style for the entire
<ListView>and set a top margin for it. This way, text will not show directly below the action bar. Play with the top margin until you get a result that works for you.
#completed-list {
margin-top: 20;
}