Skip to content
This repository was archived by the owner on Nov 17, 2022. It is now read-only.

Commit dadebbd

Browse files
committed
add relative image url
1 parent 34163bc commit dadebbd

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

start/getting-started/chapter-6.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Ok, let's break down what just happened, starting with the `if (page.ios)` check
5858
5959
Within the if block, you start by getting a reference to the `UINavigationBar`, and then you set its [`barStyle` property](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIKitDataTypesReference/index.html#//apple_ref/c/tdef/UIBarStyle) to `UIBarStyle.UIBarStyleBlack`, which (counter intuitively) makes the iOS status bar use white text. This produces the look shown below:
6060

61-
![The iOS actionbar with updated colors]({{site.baseurl}}/img/cli-getting-started/chapter6/ios/1.png)
61+
![The iOS actionbar with updated colors](../../img/cli-getting-started/chapter6/ios/1.png)
6262

6363
Learning how to transfer iOS and Android APIs into valid NativeScript code can take a little trial and error to get right. You can always refer to the NativeScript docs for detailed discussions of how to handle the code conversion. Here are the [docs for Android](/runtimes/android/marshalling/java-to-js.html), and here are the [docs for iOS](/runtimes/ios/marshalling/Marshalling-Overview.html).
6464

@@ -101,7 +101,7 @@ With this code you're primarily adding an `<Image>` to the existing ListView tem
101101

102102
For the image itself, the `ios:visibility="collapsed"` attribute sets the image's `visibility` CSS property to `"collapsed"`, which hides it. Because the attribute was prefixed with `ios:`, that CSS property is only applied on iOS; therefore the button displays on Android devices, but not on iOS ones. The trash can image itself has already been placed in the app for you, and can be found in appropriate sizes in the four drawable folders in `/app/App_Resources/Android`. Here's what the trash can UI looks like on Android:
103103

104-
![Trash can icons on Android]({{site.baseurl}}/img/cli-getting-started/chapter6/android/1.png)
104+
![Trash can icons on Android](../../img/cli-getting-started/chapter6/android/1.png)
105105

106106
Finally, make the trash actually delete items. To do that you'll need to implement the `tap="delete"` handler in the list code-behind file.
107107

@@ -145,7 +145,7 @@ This code probably looks fairly familiar by now. You're again calling the fetch
145145

146146
If you run your app on Android you should be able to delete items from the list.
147147

148-
![deleting from a list on Android]({{site.baseurl}}/img/cli-getting-started/chapter6/android/2.gif)
148+
![deleting from a list on Android](../../img/cli-getting-started/chapter6/android/2.gif)
149149

150150
Now that you have built the interface for Android's tappable icon, let's add a swipe delete interface for iOS.
151151

@@ -182,7 +182,7 @@ if (page.ios) {
182182

183183
This code gets a reference to the page's `<ListView>` id and then passes that reference to the swipe-to-delete module's `enable()` function. The `enable()` function also takes a callback, so you additionally pass an inline function that calls the view model's `delete()` function that you built in the previous section. Here's what the swipe-to-delete functionality looks like on iOS:
184184

185-
![deleting from a list on iOS]({{site.baseurl}}/img/cli-getting-started/chapter6/ios/2.gif)
185+
![deleting from a list on iOS](../../img/cli-getting-started/chapter6/ios/2.gif)
186186

187187
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.
188188

0 commit comments

Comments
 (0)