You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>This file contains an Angular 2 component, which is the primary building block you’ll use to build your NativeScript applications. Let’s break down what’s going on in this file.</p>
276
276
<p>First, you again use TypeScript’s <code>import</code> command to bring in externally defined functionality—in this case, the <code>Component</code> class from Angular 2 itself. In Angular 2 a component manages a view, or a piece of the user interface that the user sees. A component be used to define an individual UI element, or an entire page, and eventually we’ll add a bunch of logic to these components and use them to build an entire app. But for now this component is simple for the purpose of demonstration.</p>
277
277
<p>Notice the interesting way that the <code>Component</code> class is used—with the syntax <code>@Component</code>. This is a <ahref="https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Decorators.md">TypeScript decorator</a>, which allows you to annotate a TypeScript class or method with additional information. For now, you can think of it as a way of adding some metadata configuration to the currently empty <code>AppComponent</code> class. Specifically, the <code>@Component</code> decorator’s <code>template</code> property tells NativeScript how to render this component on the screen. In fact, the <code><label text="hello NativeScript"></label></code> syntax is why you saw “hello NativeScript” when you ran this app earlier.</p>
278
-
<p>However, this syntax may look a bit odd if you come from a web development background. On the web, the <code><label></code> HTML element doesn’t have a <code>text</code> attribute, so what’s going on here. Let’s dive into this by looking at how NativeScript UI components work.</p>
<p>However, this syntax may look a bit odd if you come from a web development background. On the web, the <code><label></code> HTML element doesn’t have a <code>text</code> attribute, so what’s going on here. Let’s dive into this by looking at how NativeScript UI elements work.</p>
<p>The primary difference between building an Angular 2 app for the web and an Angular 2 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 <code><div></code> and <code><span></code> simply do not work.</p>
281
+
<p>No worries though, as NativeScript provides an <ahref="http://docs.nativescript.org/ui/ui-views">extensive suite of UI elements</a>, each of which are implemented with native iOS and Android controls. For instance, the <ahref="http://docs.nativescript.org/ui/ui-views#label"><code><label></code> control</a> our previous example used is actually rendered as a <ahref="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/"><code>UILabel</code></a> on iOS and an <ahref="http://developer.android.com/reference/android/widget/TextView.html"><code>android.widget.TextView</code></a> on Android. The great thing about using NativeScript though, is that this native details are transparent to use as a developer. You type <code><label></code> and let NativeScript handle the rendering details.</p>
282
+
<p>Let’s return back to building Groceries. The first screen of Groceries is intended to be a login screen, so let’s replace the current <code><label></code> with something that resembles your typical login screen in a mobile app.</p>
283
+
<h4class="exercise-start">
284
+
<b>Exercise</b>: Add UI elements to <code>app.component.ts</code>
285
+
</h4>
286
+
287
+
<p>Open <code>app/app.component.ts</code> and replace the existing <code>@Component</code> with the following code:</p>
<button text="Sign up for Groceries"></button>
298
+
`
299
+
})
300
+
</code></pre>
301
+
<divclass="exercise-end"></div>
302
+
303
+
<blockquote>
304
+
<p><strong>NOTE</strong>: Notice the back-tick character (`) used with the <code>template</code> property. This character is used to define an <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">ES2015 template literal</a>, which TypeScript supports, and which allows you to write multi-line strings without using messy string concatenation.</p>
305
+
</blockquote>
306
+
<p>This code adds two new NativeScript UI elements: a <ahref="http://docs.nativescript.org/ApiReference/ui/text-field/how-to.html">text field</a> and a <ahref="http://docs.nativescript.org/ApiReference/ui/button/how-to.html">button</a>. Much like HTML elements, NativeScript UI elements provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:</p>
307
+
<ul>
308
+
<li><code><text-field></code><ul>
309
+
<li><code>hint</code>: Shows placeholder text that tells the user what to type.</li>
310
+
<li><code>keyboardType</code>: The type of keyboard to present to the user for input. <code>keyboardType="email"</code> shows a keyboard optimized for entering email addresses. NativeScript currently supports <ahref="http://docs.nativescript.org/ui/keyboard.html">five types of keyboards</a> for text fields.</li>
311
+
<li><code>autocorrect</code>: 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.</li>
312
+
<li><code>autocapitalizationType</code>: Determines how the operating system should autocapitalize user input. <code>autocapitalizationType="none"</code> turns autocapitalization off altogether. NativeScript supports <ahref="{{site.baseurl}}/ApiReference/ui/enums/AutocapitalizationType/README.html">four autocapitalization types</a> on text fields.</li>
313
+
<li><code>secure</code>: A boolean attribute that determines whether the TextField's text should be masked, which is commonly done on password fields.</li>
314
+
</ul>
315
+
</li>
316
+
<li><code><button></code><ul>
317
+
<li><code>text</code>: Controls the text displayed within the button.</li>
318
+
</ul>
319
+
</li>
320
+
</ul>
321
+
<p>After you <ahref="#development-workflow">run your app</a> you may expect to see a polished login screen, but instead you will see a single <code><Button></code> component on the screen:</p>
<p>The reason for this is you you need to tell NativeScript how to layout your page’s UI elements. Let's look at how to use NativeScript layouts to arrange these components on the screen.</p>
325
+
<blockquote>
326
+
<p><strong>TIP</strong>: The NativeScript docs include a <ahref="{{site.baseurl}}/ui-with-xml">full list of the UI components and attributes</a> with which you can build your apps. You can even <ahref="{{site.baseurl}}/ui-with-xml#custom-components">build your own, custom UI components</a>.</p>
Copy file name to clipboardExpand all lines: src/chapters/chapter2.md
+51-2Lines changed: 51 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -111,8 +111,57 @@ First, you again use TypeScript’s `import` command to bring in externally defi
111
111
112
112
Notice the interesting way that the `Component` class is used—with the syntax `@Component`. This is a [TypeScript decorator](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Decorators.md), which allows you to annotate a TypeScript class or method with additional information. For now, you can think of it as a way of adding some metadata configuration to the currently empty `AppComponent` class. Specifically, the `@Component` decorator’s `template` property tells NativeScript how to render this component on the screen. In fact, the `<label text="hello NativeScript"></label>` syntax is why you saw “hello NativeScript” when you ran this app earlier.
113
113
114
-
However, this syntax may look a bit odd if you come from a web development background. On the web, the `<label>` HTML element doesn’t have a `text` attribute, so what’s going on here. Let’s dive into this by looking at how NativeScript UI components work.
114
+
However, this syntax may look a bit odd if you come from a web development background. On the web, the `<label>` HTML element doesn’t have a `text` attribute, so what’s going on here. Let’s dive into this by looking at how NativeScript UI elements work.
115
115
116
-
### Adding UI components
116
+
### Adding UI elements
117
117
118
+
The primary difference between building an Angular 2 app for the web and an Angular 2 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.
118
119
120
+
No worries though, as NativeScript provides an [extensive suite of UI elements](http://docs.nativescript.org/ui/ui-views), each of which are 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 though, is that this native details are transparent to use as a developer. You type `<label>` and let NativeScript handle the rendering details.
121
+
122
+
Let’s return back to building Groceries. The first screen of Groceries is intended to be a login screen, so let’s replace the current `<label>` with something that resembles your typical login screen in a mobile app.
123
+
124
+
<h4class="exercise-start">
125
+
<b>Exercise</b>: Add UI elements to <code>app.component.ts</code>
126
+
</h4>
127
+
128
+
Open `app/app.component.ts` and replace the existing `@Component` with the following code:
> **NOTE**: Notice the back-tick character (\`) used with the `template` property. This character is used to define an [ES2015 template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), which TypeScript supports, and which allows you to write multi-line strings without using messy string concatenation.
148
+
149
+
This code adds two new NativeScript UI elements: a [text field](http://docs.nativescript.org/ApiReference/ui/text-field/how-to.html) and a [button](http://docs.nativescript.org/ApiReference/ui/button/how-to.html). Much like HTML elements, NativeScript UI elements provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:
150
+
151
+
-`<text-field>`
152
+
-`hint`: Shows placeholder text that tells the user what to type.
153
+
-`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.
154
+
-`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.
155
+
-`autocapitalizationType`: Determines how the operating system should autocapitalize user input. `autocapitalizationType="none"` turns autocapitalization off altogether. NativeScript supports [four autocapitalization types]({{site.baseurl}}/ApiReference/ui/enums/AutocapitalizationType/README.html) on text fields.
156
+
-`secure`: A boolean attribute that determines whether the TextField's text should be masked, which is commonly done on password fields.
157
+
-`<button>`
158
+
-`text`: Controls the text displayed within the button.
159
+
160
+
After you [run your app](#development-workflow) you may expect to see a polished login screen, but instead you will see a single `<Button>` component on the screen:
161
+
162
+
163
+
164
+
165
+
The reason for this is you you need to tell NativeScript how to layout your page’s UI elements. Let's look at how to use NativeScript layouts to arrange these components on the screen.
166
+
167
+
> **TIP**: The NativeScript docs include a [full list of the UI components and attributes]({{site.baseurl}}/ui-with-xml) with which you can build your apps. You can even [build your own, custom UI components]({{site.baseurl}}/ui-with-xml#custom-components).
0 commit comments