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
<Button text="Sign up for Groceries"></Button>
@@ -579,7 +579,7 @@ <h4 class="exercise-start">
579
579
}
580
580
</code></pre>
581
581
<p>Next, find the first <code><TextField></code> in your component’s <code>template</code> and replace it with the code below, which adds a new <code>text</code> attribute:</p>
<p>In <code>app/app.component.ts</code>, find the find the first <code><TextField></code>, and replace it with the <code><TextField></code> below, which introduces a new <code>[(ngModel)]</code> attribute:</p>
<p>Instead of storing data on the <code>AppComponent</code> directly, you’re now using the <code>User</code> model object, which is reusable outside of this page and even outside of this application. You instantiate an instance of the <code>User</code> class in a new <code>constructor</code> function, which Angular 2 invokes when it bootstraps your application.</p>
673
673
<p>Your final step is to use this new model object in your template. To do that, replace the two existing <code><TextField></code>s with the code shown below, which updates the <code>[(ngModel)]</code> bindings to point at the new <code>User</code> object:</p>
<p>TODO: Better explanation. Move the full template into the login.html file and use <code>templateUrl</code>. </p>
679
679
<p>If you got lost during this section, here’s a copy-and-paste friendly version of the full <code>app.component.ts</code> you should have at this point:</p>
@@ -1314,7 +1314,7 @@ <h4 class="exercise-start">
1314
1314
<h2id="plugins-and-npm-modules">Plugins and npm modules</h2>
1315
1315
<p>As you build more complex apps, you'll likely run into functionality that is not implemented in the NativeScript modules. But no worries, as NativeScript lets you leverage <ahref="https://www.npmjs.com/">npm</a> (node package manager) to import npm modules into your apps. Alternately, you can install NativeScript plugins, which are simply npm modules that can access native code and use Android and iOS SDKs, if required. </p>
1316
1316
<p>In this chapter, you'll install and use and external email validator module to verify the format of email addresses as they are entered on the registration screen. Then, you'll add a NativeScript plugin, <ahref="https://www.npmjs.com/package/nativescript-social-share">NativeScript social share</a>, to let users share their grocery lists using their device's native sharing widget.</p>
1317
-
<h3id="using-an-npm-module-in-your-app">Using an npm module in your app</h3>
1317
+
<h3id="using-npm-modules">Using npm modules</h3>
1318
1318
<p>It would be nice to be able to make sure people are entering well-formatted email addresses into your app on the registration screen. You could write this functionality yourself, but validating email addresses is <ahref="http://stackoverflow.com/questions/46155/validate-email-address-in-javascript">surprisingly tricky</a>, and it's a lot easier to use one of many npm modules that already provide this validation. For Groceries let's see how to add this <ahref="https://www.npmjs.com/package/email-validator">email-validator module</a> to test for valid addresses.</p>
1319
1319
<h4class="exercise-start">
1320
1320
<b>Exercise</b>: Install the email validator module
@@ -1376,7 +1376,7 @@ <h4 class="exercise-start">
1376
1376
<blockquote>
1377
1377
<p><strong>WARNING</strong>: Not all npm modules work in NativeScript apps. Specifically, modules that depend on Node.js or browser APIs will not work, as those APIs do not exist in NativeScript. The NativeScript wiki contains a <ahref="https://github.com/NativeScript/NativeScript/wiki/supported-npm-modules">list of some of the more popular npm modules that have been verified to work in NativeScript apps</a>.</p>
1378
1378
</blockquote>
1379
-
<h3id="using-a-nativescript-plugin-in-your-app">Using a NativeScript plugin in your app</h3>
<p>NativeScript plugins are npm modules that have the added ability to run native code and use iOS and Android frameworks. Because NativeScript plugins are just npm modules, a lot of the techniques you learned in the previous section still apply. The one big difference is in the command you use to install plugins. Let's look at how it works by installing the NativeScript social share plugin.</p>
1381
1381
<h4class="exercise-start">
1382
1382
<b>Exercise</b>: Install the social sharing plugin
<p>The beauty of NativeScript is that you can write a native iOS or Android app in JavaScript, XML, and CSS without touching Swift, Objective-C, or Java, if you choose. But what if you want to present a different, more platform-specific UI to your users? Or if you want to access an iOS or Android API that NativeScript doesn't expose through a NativeScript module or plugin?</p>
1437
+
<p>NativeScript gives you the option to dig into native code as needed, and to do so without leaving JavaScript. To show how this works in action, let's tweak a few of the UI elements in your app using native code.</p>
<p>Ask the reader to remember that the hint text color in the app doesn’t look good.</p>
1440
+
<p>Show images.</p>
1441
+
<p>Explain how NativeScript doesn’t currently expose a way to style a text field’s hint color (although <ahref="https://github.com/NativeScript/NativeScript/issues/712">there is an open issue requesting the feature</a>).</p>
1442
+
<p>Show how you can Google something like “style UITextField hint text” and find iOS code that accomplishes that task.</p>
1443
+
<h4class="exercise-start">
1444
+
<b>Exercise</b>: ???
1445
+
</h4>
1446
+
1447
+
<p>Open <code>app/utils/hint-util.ts</code> and paste in the following code:</p>
1448
+
<pre><codeclass="lang-TypeScript">import {Color} from "color";
1449
+
import {TextField} from "ui/text-field";
1450
+
1451
+
declare var NSAttributedString: any;
1452
+
declare var NSDictionary: any;
1453
+
declare var NSForegroundColorAttributeName: any;
1454
+
1455
+
export function setHintColor(args: { view: TextField, color: Color }) {
<p>Finally, add a call to the new <code>setTextFieldColors()</code> in <code>toggleDisplay()</code>, immediately after the existing <code>this.isLoggingIn = !this.isLoggingIn</code> line:</p>
@@ -92,7 +92,7 @@ To fix this, you need to switch to Angular 2’s two-way data binding syntax.
92
92
In `app/app.component.ts`, find the find the first `<TextField>`, and replace it with the `<TextField>` below, which introduces a new `[(ngModel)]` attribute:
@@ -198,9 +198,9 @@ Instead of storing data on the `AppComponent` directly, you’re now using the `
198
198
Your final step is to use this new model object in your template. To do that, replace the two existing `<TextField>`s with the code shown below, which updates the `[(ngModel)]` bindings to point at the new `User` object:
Copy file name to clipboardExpand all lines: src/chapters/chapter5.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ As you build more complex apps, you'll likely run into functionality that is not
4
4
5
5
In this chapter, you'll install and use and external email validator module to verify the format of email addresses as they are entered on the registration screen. Then, you'll add a NativeScript plugin, [NativeScript social share](https://www.npmjs.com/package/nativescript-social-share), to let users share their grocery lists using their device's native sharing widget.
6
6
7
-
### Using an npm module in your app
7
+
### Using npm modules
8
8
9
9
It would be nice to be able to make sure people are entering well-formatted email addresses into your app on the registration screen. You could write this functionality yourself, but validating email addresses is [surprisingly tricky](http://stackoverflow.com/questions/46155/validate-email-address-in-javascript), and it's a lot easier to use one of many npm modules that already provide this validation. For Groceries let's see how to add this [email-validator module](https://www.npmjs.com/package/email-validator) to test for valid addresses.
10
10
@@ -87,7 +87,7 @@ In general npm modules greatly expand the number of things you're able to do in
87
87
88
88
> **WARNING**: Not all npm modules work in NativeScript apps. Specifically, modules that depend on Node.js or browser APIs will not work, as those APIs do not exist in NativeScript. The NativeScript wiki contains a [list of some of the more popular npm modules that have been verified to work in NativeScript apps](https://github.com/NativeScript/NativeScript/wiki/supported-npm-modules).
89
89
90
-
### Using a NativeScript plugin in your app
90
+
### Using NativeScript plugins
91
91
92
92
NativeScript plugins are npm modules that have the added ability to run native code and use iOS and Android frameworks. Because NativeScript plugins are just npm modules, a lot of the techniques you learned in the previous section still apply. The one big difference is in the command you use to install plugins. Let's look at how it works by installing the NativeScript social share plugin.
0 commit comments