Skip to content
2 changes: 1 addition & 1 deletion getting-started-vue/05.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ dones: [],

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 app, you can tie a dialog to the event.

[`dialogs`](https://docs.nativescript.org/api-reference/modules/_ui_dialogs_) is a globally available module that provides several configurable dialog types for apps: alert, action, prompt, login, confirmation. This lesson explores the use of [`action()`](https://nativescript-vue.org/en/docs/elements/dialogs/action/) to let the user choose if they want to mark a task as completed or delete it from the list of active tasks.
[`DialogStrings`](https://docs.nativescript.org/api-reference/modules/dialogstrings.html) is a globally available module that provides several configurable dialog types for apps: alert, action, prompt, login, confirmation. This lesson explores the use of [`action()`](https://nativescript-vue.org/en/docs/elements/dialogs/action/) to let the user choose if they want to mark a task as completed or delete it from the list of active tasks.
Use an `action()` dialog to prompt users to select what they want to do with an active task: complete it, delete it, or dismiss the dialog.

<hr data-action="start" />
Expand Down
4 changes: 2 additions & 2 deletions getting-started-vue/07.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

### Step 15. Remove existing CSS

When you work with NativeScript and Vue.js, you can use application-wide CSS, scoped 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. This tutorial does not explore application-wide CSS. See also: [Styling](https://docs.nativescript.org/ui/styling).
When you work with NativeScript and Vue.js, you can use application-wide CSS, scoped 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. This tutorial does not explore application-wide CSS. See also: [Styling](https://docs.nativescript.org/ui-and-styling.html#css).

Scoped CSS is applied to the scope of the current `.vue` file only and is handled in its `<style scoped>` block. This tutorial relies almost exclusively on scoped CSS and inline CSS. See also: [Scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html).

Expand Down Expand Up @@ -99,4 +99,4 @@ TextField {
}
```

<hr data-action="end" />
<hr data-action="end" />
4 changes: 2 additions & 2 deletions getting-started-vue/12.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

Congratulations! You successfully built a ToDo application with NativeScript and Vue.js. If you’re looking to learn more, here are a few features you can try implementing on your own:

* Save the users’ todos so they don’t go away every time the app restarts. You can use the [NativeScript application settings module](https://docs.nativescript.org/ns-framework-modules/application-settings).
* Save the users’ todos so they don’t go away every time the app restarts. You can use the [NativeScript application settings module](https://v7.docs.nativescript.org/ns-framework-modules/application-settings).
* Allow users to share their lists using the [NativeScript social share plugin](https://market.nativescript.org/plugins/nativescript-social-share).

> **TIP:**
> * You can always browse the [code samples in the NativeScript Marketplace](https://market.nativescript.org/?tab=samples&framework=all_frameworks&category=all_samples) to come up with even more things to try out in your app.
> * The final state of this tutorial is available [here](https://play.nativescript.org/?template=play-vue&id=S3fNJW&v=2), in case you got lost at any point.
> * The final state of this tutorial is available [here](https://play.nativescript.org/?template=play-vue&id=S3fNJW&v=2), in case you got lost at any point.
30 changes: 15 additions & 15 deletions groceries-js/2.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Let’s get started by looking at how to add user interface components.

The primary difference between building an app for the web and an app with NativeScript is in the UI elements that you use. NativeScript apps do not use a browser and do not have a DOM; therefore, elements like `<div>` and `<span>` simply do not work.

Instead, NativeScript provides an [extensive suite of UI elements](http://docs.nativescript.org/ui/ui-views), each of which is implemented with native iOS and Android controls. For instance, the [`<Label>` control](http://docs.nativescript.org/ui/ui-views#label) our previous example used is actually rendered as a [`UILabel`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) on iOS and an [`android.widget.TextView`](http://developer.android.com/reference/android/widget/TextView.html) on Android. The great thing about using NativeScript is these native details are transparent to use as a developer. You type `<Label>` and let NativeScript handle the rendering details.
Instead, NativeScript provides an [extensive suite of UI elements](https://docs.nativescript.org/ui-and-styling.html#components), each of which is implemented with native iOS and Android controls. For instance, the [`<Label>` control](https://docs.nativescript.org/ui-and-styling.html#label) our previous example used is actually rendered as a [`UILabel`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) on iOS and an [`android.widget.TextView`](http://developer.android.com/reference/android/widget/TextView.html) on Android. The great thing about using NativeScript is these native details are transparent to use as a developer. You type `<Label>` and let NativeScript handle the rendering details.

Let’s put this into action by adding some new UI components to start building the Groceries UI.

Expand Down Expand Up @@ -55,18 +55,18 @@ Let’s put this into action by adding some new UI components to start building

<hr data-action="end" />

The code above adds two new NativeScript UI components: a [text field](https://docs.nativescript.org/angular/code-samples/ui/text-field) and a [button](https://docs.nativescript.org/angular/code-samples/ui/button). Much like HTML elements, NativeScript UI components provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:
The code above adds two new NativeScript UI components: a [text field](https://docs.nativescript.org/ui-and-styling.html#textfield) and a [button](https://docs.nativescript.org/ui-and-styling.html#button). Much like HTML elements, NativeScript UI components provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:

- `<TextField>`
- `hint`: Shows placeholder text that tells the user what to type.
- `keyboardType`: The type of keyboard to present to the user for input. `keyboardType="email"` shows a keyboard optimized for entering email addresses. NativeScript currently supports [five types of keyboards](http://docs.nativescript.org/ui/keyboard.html) for text fields.
- `keyboardType`: The type of keyboard to present to the user for input. `keyboardType="email"` shows a keyboard optimized for entering email addresses. NativeScript currently supports five types of keyboards for text fields: `datetime`, `phone`, `number`, `url`, and `email`.
- `autocorrect`: A boolean attribute that determines whether the mobile operating system should autocorrect user input. In the case of email address text fields, the autocorrect behavior is undesirable.
- `autocapitalizationType`: Determines how the operating system should autocapitalize user input. `autocapitalizationType="none"` turns autocapitalization off altogether. NativeScript supports [four autocapitalization types](http://docs.nativescript.org/api-reference/modules/_ui_enums_.autocapitalizationtype.html) on text fields.
- `autocapitalizationType`: Determines how the operating system should autocapitalize user input. `autocapitalizationType="none"` turns autocapitalization off altogether. NativeScript supports four autocapitalization types on text fields: `none`, `words`, `sentences`, and `allcharacters`.
- `secure`: A boolean attribute that determines whether the text field’s text should be masked, which is commonly done on password fields.
- `<Button>`
- `text`: Controls the text displayed within the button.

There are [many UI components](https://docs.nativescript.org/angular/ui/components) you can use to build NativeScript apps, and you might want to take some time to explore all that’s out there.
There are [many UI components](https://docs.nativescript.org/ui-and-styling.html#components) you can use to build NativeScript apps, and you might want to take some time to explore all that’s out there.

Next, let’s focus on the other new UI component in the above example—`<StackLayout>`—and discuss how to organize your UI components in NativeScript apps.

Expand All @@ -76,11 +76,11 @@ Next, let’s focus on the other new UI component in the above example—`<Stack

Because NativeScript does not use a browser to render UI components, web layout concepts like `display: block` and `display: inline` do not work in NativeScript apps.

Instead, NativeScript provides several different layout UI components that allow you to position your components using native Android and iOS layout mechanisms. Although there are [several layout containers in NativeScript](https://docs.nativescript.org/angular/ui/layout-containers), there are three you’ll primarily use.
Instead, NativeScript provides several different layout UI components that allow you to position your components using native Android and iOS layout mechanisms. Although there are [several layout containers in NativeScript](https://docs.nativescript.org/ui-and-styling.html#layout-containers), there are three you’ll primarily use.

* The [`<StackLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#stack-layout) lets you stack child UI elements either vertically or horizontally.
* The [`<GridLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#grid-layout) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
* The [`<FlexboxLayout>`](https://docs.nativescript.org/angular/code-samples/ui/layouts#flexbox-layout-one) lets you arrange UI components using the syntax as `display: flex` on web.
* The [`<StackLayout>`](https://docs.nativescript.org/ui-and-styling.html#stacklayout) lets you stack child UI elements either vertically or horizontally.
* The [`<GridLayout>`](https://docs.nativescript.org/ui-and-styling.html#gridlayout) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
* The [`<FlexboxLayout>`](https://docs.nativescript.org/ui-and-styling.html#flexboxlayout) lets you arrange UI components using the syntax as `display: flex` on web.

Let’s add one more layout example to your app and then discuss how all this works.

Expand Down Expand Up @@ -120,15 +120,15 @@ The other layout component in this example is the `<FlexboxLayout>` control. Wit

Your next step will be centering the `<StackLayout>` using flexbox syntax, but to do that you’ll need to learn a new NativeScript concept—CSS.

> **TIP:** Learning NativeScript layouts can be tricky, especially if you come from a web development background. Reading the [documentation](https://docs.nativescript.org/ui/layouts) is a good place to start.
> **TIP:** Learning NativeScript layouts can be tricky, especially if you come from a web development background. Reading the [documentation](https://docs.nativescript.org/ui-and-styling.html#layout-containers) is a good place to start.

### Step 5. Styling your app using CSS

NativeScript uses a [subset of CSS](http://docs.nativescript.org/styling) to change the visual appearance of your UI components.
NativeScript uses a [subset of CSS](https://docs.nativescript.org/ui-and-styling.html#css) to change the visual appearance of your UI components.

Why a subset? In NativeScript you’re building native iOS and Android apps, and some CSS properties either aren’t possible to replicate with native iOS and Android APIs, or would incur too great of a performance penalty. Don’t worry though; most common CSS properties are supported, and the CSS language syntax is the same—so styling native apps in NativeScript really does feel like styling web apps.

> **TIP**: The NativeScript docs have [a full list of the supported CSS properties you can use](http://docs.nativescript.org/ui/styling#supported-css-properties).
> **TIP**: The NativeScript docs have [a full list of the supported CSS properties you can use](https://docs.nativescript.org/ui-and-styling.html#supported-css-properties).

Let’s look at how CSS in NativeScript works, and start to make this Groceries app look good in the process.

Expand Down Expand Up @@ -183,7 +183,7 @@ Flexbox syntax can be tricky to learn, regardless of whether you’re using flex

NativeScript’s styling infrastructure makes it possible to create and use CSS themes for your native applications, much like you would use a framework like Bootstrap on the web.

The NativeScript project provides a [core theme](https://docs.nativescript.org/ui/theme) that you can add to any of your projects. The theme includes two color schemes, light and dark, as well as a series of convenience class names to help you build elegant user interfaces quickly. Let’s look at how to add the Core theme to Groceries, and how to use it to make your login screen look good.
The NativeScript project provides a [core theme](https://v7.docs.nativescript.org/ui/theme) that you can add to any of your projects. The theme includes two color schemes, light and dark, as well as a series of convenience class names to help you build elegant user interfaces quickly. Let’s look at how to add the Core theme to Groceries, and how to use it to make your login screen look good.

<hr data-action="start" />

Expand Down Expand Up @@ -252,7 +252,7 @@ TextField {

The first thing to note here are the class names `form`, `input`, `input-border`, `btn`, and `btn-primary`. These are all class names from the NativeScript Core Theme, and each apply a set of CSS rules to help your UI components look good by default.

> **NOTE**: Refer to the [NativeScript Core theme documentation](https://docs.nativescript.org/ui/theme) for a full list of theme class names and how to use them in your apps.
> **NOTE**: Refer to the [NativeScript Core theme documentation](https://v7.docs.nativescript.org/ui/theme) for a full list of theme class names and how to use them in your apps.

One other thing to note before we move on—NativeScript’s CSS implementation allows you to select CSS rules by class names much like you do in web apps. In this example you use a `.btn-primary` selector to alter the app’s main button background color.

Expand All @@ -274,7 +274,7 @@ The second way is to point at an image that lives within your app's `app` folder
<Image src="~/images/logo.png"/>
```

The third way is to use platform-specific image resources, which you can [learn more about on the NativeScript documentation](https://docs.nativescript.org/ui/images#load-images-from-a-resource). Let’s add a logo image to the Groceries app so you can see how this works.
The third way is to use platform-specific image resources, which you can [learn more about on the NativeScript documentation](https://v7.docs.nativescript.org/ui/images#load-images-from-a-resource). Let’s add a logo image to the Groceries app so you can see how this works.

<hr data-action="start" />

Expand Down
4 changes: 2 additions & 2 deletions groceries-js/3.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ exports.signIn = function() {

#### Background: Component Inheritance

All NativeScript UI components, including `<Page>`, inherit from the [`View` class](http://docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html), which gives them a number of methods for working the UI. In this case you use the [`getViewById()` method](http://docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html#getviewbyid) to get a reference to the email text field by its `id` attribute.
All NativeScript UI components, including `<Page>`, inherit from the [`View` class](https://docs.nativescript.org/api-reference/classes/view.html), which gives them a number of methods for working the UI. In this case you use the [`getViewById()` method](https://docs.nativescript.org/api-reference/classes/view.html#getviewbyid) to get a reference to the email text field by its `id` attribute.

#### End Background

Expand Down Expand Up @@ -226,7 +226,7 @@ Next, look in the `app/views/shared/view-models` folder, which contains a few vi

#### Background: The Fetch module

Note that the `register()` function uses the config module to get the path to the backend, as well as the [fetch module](https://docs.nativescript.org/ns-framework-modules/fetch) to make HTTP calls.
Note that the `register()` function uses the config module to get the path to the backend, as well as the [fetch module](https://v7.docs.nativescript.org/ns-framework-modules/fetch) to make HTTP calls.

``` JavaScript
var config = require("../../shared/config");
Expand Down
Loading