Skip to content

Commit 52c7e71

Browse files
tjvantolltjvantoll
committed
Finishing up my first pass through chapter 6
1 parent 2ee1daf commit 52c7e71

File tree

2 files changed

+144
-1
lines changed

2 files changed

+144
-1
lines changed

‎index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1488,7 +1488,71 @@ <h4 class="exercise-start">
14881488
<p>TODO: Insert gifs</p>
14891489
<p>Transition to Android API discussion.</p>
14901490
<h3 id="accessing-android-apis">Accessing Android APIs</h3>
1491+
<p>Talk about Googling the same sort of thing for Android APIs (setting the hint color).</p>
1492+
<h4 class="exercise-start">
1493+
<b>Exercise</b>: ???
1494+
</h4>
1495+
1496+
<p>Open <code>app/utils/hint-util.ts</code> and replace the existing contents of the file with the following code:</p>
1497+
<pre><code class="lang-TypeScript">import {Color} from &quot;color&quot;;
1498+
import {TextField} from &quot;ui/text-field&quot;;
1499+
1500+
declare var android: any;
1501+
declare var NSAttributedString: any;
1502+
declare var NSDictionary: any;
1503+
declare var NSForegroundColorAttributeName: any;
1504+
1505+
export function setHintColor(args: { view: TextField, color: Color }) {
1506+
if (args.view.android) {
1507+
args.view.android.setHintTextColor(args.color.android);
1508+
}
1509+
if (args.view.ios) {
1510+
var dictionary = new NSDictionary(
1511+
[args.color.ios],
1512+
[NSForegroundColorAttributeName]
1513+
);
1514+
args.view.ios.attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(
1515+
args.view.hint, dictionary);
1516+
}
1517+
}
1518+
</code></pre>
1519+
<div class="exercise-end"></div>
1520+
1521+
<p>Talk about what just happened.</p>
1522+
<p>TODO: Insert gifs</p>
1523+
<p>Transition to status bar discussion</p>
14911524
<h3 id="customizing-the-status-bar">Customizing the status bar</h3>
1525+
<p>Talk about status bars.</p>
1526+
<h4 class="exercise-start">
1527+
<b>Exercise</b>: ???
1528+
</h4>
1529+
1530+
<p>Open <code>app.main.ts</code> and replace the contents of the file with the following code:</p>
1531+
<pre><code class="lang-TypeScript">import {nativeScriptBootstrap} from &quot;nativescript-angular/application&quot;;
1532+
import {AppComponent} from &quot;./app.component&quot;;
1533+
import {setStatusBarColors} from &quot;./utils/status-bar-util&quot;;
1534+
1535+
setStatusBarColors();
1536+
nativeScriptBootstrap(AppComponent);
1537+
</code></pre>
1538+
<p>Next, open <code>app/platform.ios.css</code> and paste in the following code:</p>
1539+
<pre><code class="lang-CSS">Page {
1540+
margin-top: -20;
1541+
}
1542+
</code></pre>
1543+
<div class="exercise-end"></div>
1544+
1545+
<p>Talk about what just happened.</p>
1546+
<p>TODO: Insert images</p>
1547+
<p>And... that&#39;s it! You&#39;ve created a functional, cross-platform, backend-driven app to manage your grocery list. In the process you&#39;ve created a unique UI for Android and iOS, leveraged NativeScript plugins and npm modules, learned how to log in and register, managed backend services, created a list with add and delete functionality, and more. </p>
1548+
<p>Congratulations! Feel free to <a href="https://twitter.com/intent/tweet?text=I%20just%20built%20an%20iOS%20and%20Android%20app%20using%20@NativeScript%20%F0%9F%8E%89.%20You%20can%20too!%20http://docs.nativescript.org/start/getting-started%20%23opensource">share your accomplishment on Twitter</a> or <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdocs.nativescript.org%2Fstart%2Fgetting-started&amp;p%5B">Facebook</a> to impress your friends 😀.</p>
1549+
<blockquote>
1550+
<p><strong>TIP</strong>:</p>
1551+
<ul>
1552+
<li>If you&#39;re curious about how NativeScript makes it possible to directly invoke iOS and Android APIs, you can read about <a href="http://developer.telerik.com/featured/nativescript-works/">“How NativeScript Works”</a> on our blog.</li>
1553+
<li>Remember that the <a href="https://github.com/NativeScript/sample-Groceries/tree/angular-end">Groceries app&#39;s “angular-end” branch</a> has the final state of this tutorial. Feel free to refer back to it at any time.</li>
1554+
</ul>
1555+
</blockquote>
14921556

14931557
</div>
14941558
<div class="chapter">

‎src/chapters/chapter6.md‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,83 @@ Transition to Android API discussion.
7878

7979
### Accessing Android APIs
8080

81-
### Customizing the status bar
81+
Talk about Googling the same sort of thing for Android APIs (setting the hint color).
82+
83+
<h4 class="exercise-start">
84+
<b>Exercise</b>: ???
85+
</h4>
86+
87+
Open `app/utils/hint-util.ts` and replace the existing contents of the file with the following code:
88+
89+
``` TypeScript
90+
import {Color} from "color";
91+
import {TextField} from "ui/text-field";
92+
93+
declare var android: any;
94+
declare var NSAttributedString: any;
95+
declare var NSDictionary: any;
96+
declare var NSForegroundColorAttributeName: any;
97+
98+
export function setHintColor(args: { view: TextField, color: Color }) {
99+
if (args.view.android) {
100+
args.view.android.setHintTextColor(args.color.android);
101+
}
102+
if (args.view.ios) {
103+
var dictionary = new NSDictionary(
104+
[args.color.ios],
105+
[NSForegroundColorAttributeName]
106+
);
107+
args.view.ios.attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(
108+
args.view.hint, dictionary);
109+
}
110+
}
111+
```
112+
113+
<div class="exercise-end"></div>
114+
115+
Talk about what just happened.
116+
117+
TODO: Insert gifs
118+
119+
Transition to status bar discussion
120+
121+
### Customizing the status bar
122+
123+
Talk about status bars.
124+
125+
<h4 class="exercise-start">
126+
<b>Exercise</b>: ???
127+
</h4>
128+
129+
Open `app.main.ts` and replace the contents of the file with the following code:
130+
131+
``` TypeScript
132+
import {nativeScriptBootstrap} from "nativescript-angular/application";
133+
import {AppComponent} from "./app.component";
134+
import {setStatusBarColors} from "./utils/status-bar-util";
135+
136+
setStatusBarColors();
137+
nativeScriptBootstrap(AppComponent);
138+
```
139+
140+
Next, open `app/platform.ios.css` and paste in the following code:
141+
142+
``` CSS
143+
Page {
144+
margin-top: -20;
145+
}
146+
```
147+
148+
<div class="exercise-end"></div>
149+
150+
Talk about what just happened.
151+
152+
TODO: Insert images
153+
154+
And... that's it! You've created a functional, cross-platform, backend-driven app to manage your grocery list. In the process you've created a unique UI for Android and iOS, leveraged NativeScript plugins and npm modules, learned how to log in and register, managed backend services, created a list with add and delete functionality, and more.
155+
156+
Congratulations! Feel free to [share your accomplishment on Twitter](https://twitter.com/intent/tweet?text=I%20just%20built%20an%20iOS%20and%20Android%20app%20using%20@NativeScript%20%F0%9F%8E%89.%20You%20can%20too!%20http://docs.nativescript.org/start/getting-started%20%23opensource) or [Facebook](https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdocs.nativescript.org%2Fstart%2Fgetting-started&p%5B) to impress your friends 😀.
157+
158+
> **TIP**:
159+
> * If you're curious about how NativeScript makes it possible to directly invoke iOS and Android APIs, you can read about [“How NativeScript Works”](http://developer.telerik.com/featured/nativescript-works/) on our blog.
160+
> * Remember that the [Groceries app's “angular-end” branch](https://github.com/NativeScript/sample-Groceries/tree/angular-end) has the final state of this tutorial. Feel free to refer back to it at any time.

0 commit comments

Comments
 (0)