Skip to content

Commit

Permalink
Reroute the cookbook articles
Browse files Browse the repository at this point in the history
  • Loading branch information
ErjanGavalji committed May 5, 2016
1 parent 1f41bee commit f7fe64d
Show file tree
Hide file tree
Showing 11 changed files with 102 additions and 104 deletions.
100 changes: 49 additions & 51 deletions core-concepts/modules.md

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions releases/Cross-Platform Modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -674,7 +674,7 @@ application.ios.removeNotificationObserver(observer, UIDeviceBatteryLevelDidChan
- [(#261)](https://github.com/NativeScript/NativeScript/issues/261) WebView crash when navigating back

### Breaking changes
- [(#304)](https://github.com/NativeScript/NativeScript/issues/304) ActionBar/NavigationBar is now defined using the `page.actionBar` instead of `page.optionsMenu`. [See an example...](../ApiReference/ui/action-bar/HOW-TO.md)
- [(#304)](https://github.com/NativeScript/NativeScript/issues/304) ActionBar/NavigationBar is now defined using the `page.actionBar` instead of `page.optionsMenu`. [See an example...](../cookbook/ui/action-bar)

### Known issues
- ```tns debug ios``` command is not working. The workaround is to use ```tns debug ios --framework-path "__path to the iOS runtime__"```. A fix for this is coming in 1.2.1 which will be released in the week of July, 27th.
Expand All @@ -690,7 +690,7 @@ application.ios.removeNotificationObserver(observer, UIDeviceBatteryLevelDidChan

- [(#221)](https://github.com/NativeScript/NativeScript/pull/221) view parent exposed in itemLoading event

- [(#214)](https://github.com/NativeScript/NativeScript/pull/214) Repeater component added. [Read more...](../ApiReference/ui/repeater/HOW-TO.md)
- [(#214)](https://github.com/NativeScript/NativeScript/pull/214) Repeater component added. [Read more...](../cookbook/ui/repeater)

- [(#207)](https://github.com/NativeScript/NativeScript/pull/207) Optimizations

Expand Down
2 changes: 1 addition & 1 deletion releases/breaking-changes.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ NSDecimalNumber is marshalled as Objective-C object wrapper instead of JavaScrip

### 1.2.0 (2015, July 24)

There are changes in how the **Android ActionBar/IOS NavigationBar** is configured. Ut is now defined with `page.actionBar` instead of `page.optionsMenu`. [See an example...](http://docs.nativescript.org/ApiReference/ui/action-bar/HOW-TO.md)
There are changes in how the **Android ActionBar/IOS NavigationBar** is configured. Ut is now defined with `page.actionBar` instead of `page.optionsMenu`. [See an example...](http://docs.nativescript.org/cookbook/ui/action-bar)

### 0.10.0 (2015, April 17)

Expand Down
12 changes: 6 additions & 6 deletions tutorial/chapter-2.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ var applicationModule = require("application");
application.start({ moduleName: "views/login/login" });
```

Here, you're requiring, or importing, the [NativeScript application module]({{site.baseurl}}/ApiReference/application/HOW-TO). Then, you call its `start()` method with the starting screen of your app (the login screen), which lives in your app's `views/login` folder.
Here, you're requiring, or importing, the [NativeScript application module]({{site.baseurl}}/cookbook/application). Then, you call its `start()` method with the starting screen of your app (the login screen), which lives in your app's `views/login` folder.

> **TIP**: JavaScript modules in NativeScript follow the [CommonJS specification](http://wiki.commonjs.org/wiki/CommonJS). This means you can use the [`require()` method](http://wiki.commonjs.org/wiki/Modules/1.1#Module_Context) to import modules, as is done above, as well as use the `export` keyword to expose a module's properties and methods, which we'll look at later in this chapter. These are the same constructs Node.js uses for JavaScript modules, so if you know how to use Node.js modules, you already know how to use NativeScript modules.
Expand Down Expand Up @@ -138,11 +138,11 @@ Currently you only see a single button because you need to tell NativeScript how

NativeScript provides several different layout containers that allow you to place UI components precisely where you want them to appear.

- The [Absolute Layout]({{site.baseurl}}/ApiReference/ui/layouts/absolute-layout/HOW-TO.html) lets you position elements using explicit x and y coordinates. This is useful when you need to place elements in exact locations, for example showing an activity indicator widget in the top-left corner of your app.
- The [Dock Layout]({{site.baseurl}}/ApiReference/ui/layouts/dock-layout/HOW-TO.html) is useful for placing UI elements at the outer edges of your app. For example, a container docked at the bottom of the screen would be a good location for an ad.
- The [Grid Layout]({{site.baseurl}}/ApiReference/ui/layouts/grid-layout/HOW-TO.html) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
- The [Stack Layout]({{site.baseurl}}/ApiReference/ui/layouts/stack-layout/HOW-TO.html) lets you stack child UI components either vertically or horizontally.
- The [Wrap Layout]({{site.baseurl}}/ApiReference/ui/layouts/wrap-layout/HOW-TO.html) lets child UI components flow from one row or column to the next when space is filled.
- The [Absolute Layout]({{site.baseurl}}/cookbook/ui/layouts/absolute-layout) lets you position elements using explicit x and y coordinates. This is useful when you need to place elements in exact locations, for example showing an activity indicator widget in the top-left corner of your app.
- The [Dock Layout]({{site.baseurl}}/cookbook/ui/layouts/dock-layout) is useful for placing UI elements at the outer edges of your app. For example, a container docked at the bottom of the screen would be a good location for an ad.
- The [Grid Layout]({{site.baseurl}}/cookbook/ui/layouts/grid-layout) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
- The [Stack Layout]({{site.baseurl}}/cookbook/ui/layouts/stack-layout) lets you stack child UI components either vertically or horizontally.
- The [Wrap Layout]({{site.baseurl}}/cookbook/ui/layouts/wrap-layout) lets child UI components flow from one row or column to the next when space is filled.

For your login screen, all you need is a simple `<StackLayout>` to stack the UI components on top of each other. In later sections, you'll use some of the more advanced layouts.

Expand Down
8 changes: 4 additions & 4 deletions tutorial/chapter-4.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Next, take a look in the `app/shared/view-models` folder, which contains a few v

> **NOTE**: In a larger app, it's pretty common to place code that interacts with the backend in separate files, and not directly in the view models. But in our case, the connection code lives directly in the view model for simplicity—which is perfectly reasonable for small apps.
Note that the `register()` function uses the config module to get the path to the backend, as well as the [fetch module]({{site.baseurl}}/ApiReference/fetch/HOW-TO.html) 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]({{site.baseurl}}/cookbook/fetch) to make HTTP calls.

``` JavaScript
var config = require("../../shared/config");
Expand Down Expand Up @@ -154,7 +154,7 @@ To utilize the `Promise` that the view model's `login()` function returns, you n

In the case of Groceries, when the login works you're going to navigate the user to the list page, which you'll be building momentarily, and which will let the user add and remove groceries from a list. To do the navigation you'll use the same frame module you used earlier in this guide.

The trickier situation is handling login failures, and for that you're going to use the dialog module. You can use this module to show [several types]({{site.baseurl}}/ApiReference/ui/dialogs/HOW-TO.html) of popup UIs in your app, including action sheets, confirmation boxes, alert boxes, and prompts. It is a highly customizable module, and it lets you control the buttons in your alerts, their text, and the messaging in the alert itself. The dialog module's code is in the `node_modules/tns-core-modules/ui` folder with other UI widgets. Let's see how to use this widget on the login page.
The trickier situation is handling login failures, and for that you're going to use the dialog module. You can use this module to show [several types]({{site.baseurl}}/cookbook/ui/dialogs) of popup UIs in your app, including action sheets, confirmation boxes, alert boxes, and prompts. It is a highly customizable module, and it lets you control the buttons in your alerts, their text, and the messaging in the alert itself. The dialog module's code is in the `node_modules/tns-core-modules/ui` folder with other UI widgets. Let's see how to use this widget on the login page.

<h4 class="exercise-start">
<b>Exercise</b>: Handle an error with a dialog window
Expand Down Expand Up @@ -227,7 +227,7 @@ Open `app/views/list/list.xml` and paste in the code below, which creates the li
> **NOTE**: Notice that this page is going to use a `<GridLayout>` to layout the UI components on the screen. As you add more UI components, you'll start dividing the screen into rows and columns, but for now you're just going to let the `<ListView>` take up the full screen (which is the default behavior of a `<GridLayout>` with no attributes).
As discussed earlier, even though you're using `<ListView>` in XML, the ListView module is still a NativeScript module. You can find its implementation in the `node_modules/tns-core-modules/ui/list-view` folder. If you want to, you could construct a ListView in pure JavaScript code in the code-behind file as shown in [this example]({{site.baseurl}}/ApiReference/ui/list-view/HOW-TO.html). For most situations using the NativeScript UI modules in XML is easier, so we'll be sticking with XML usage throughout this tutorial.
As discussed earlier, even though you're using `<ListView>` in XML, the ListView module is still a NativeScript module. You can find its implementation in the `node_modules/tns-core-modules/ui/list-view` folder. If you want to, you could construct a ListView in pure JavaScript code in the code-behind file as shown in [this example]({{site.baseurl}}/cookbook/ui/list-view). For most situations using the NativeScript UI modules in XML is easier, so we'll be sticking with XML usage throughout this tutorial.

Note the use of `<ListView.itemTemplate>`. This tag gives you the ability to control how each of the ListView's items displays within the list. For now you're using a simple `<Label>` UI component to display the `{% raw %}{{ name }}{% endraw %}` of each grocery.

Expand Down Expand Up @@ -590,7 +590,7 @@ The animation module is a lot of fun to play with, and it’s easy to use too. A

Now that you have the login, registration, and list pages complete, let’s enhance the app's functionality as a grocery list management tool. In the next chapters you'll add functionality such as email validation, social sharing, and more. And you'll use one of NativeScript's most useful features to do so: npm modules.

> **TIP**: There are several modules that come out of the box with your NativeScript installation that we did not have time to cover in this guide—including a [location service]({{site.baseurl}}/ApiReference/location/HOW-TO), a [file-system helper]({{site.baseurl}}/ApiReference/file-system/HOW-TO), a [timer module]({{site.baseurl}}/ApiReference/timer/HOW-TO), a [camera module]({{site.baseurl}}/ApiReference/camera/HOW-TO), a [color module]({{site.baseurl}}/ApiReference/color/HOW-TO), and a whole lot more. Make sure to peruse the “Modules API” of the docs, or just look around `node_modules/tns-core-modules` to see all of what's available.
> **TIP**: There are several modules that come out of the box with your NativeScript installation that we did not have time to cover in this guide—including a [location service]({{site.baseurl}}/cookbook/location), a [file-system helper]({{site.baseurl}}/cookbook/file-system), a [timer module]({{site.baseurl}}/cookbook/timer), a [camera module]({{site.baseurl}}/cookbook/camera), a [color module]({{site.baseurl}}/cookbook/color), and a whole lot more. Make sure to peruse the “Modules API” of the docs, or just look around `node_modules/tns-core-modules` to see all of what's available.
<div class="next-chapter-link-container">
<a href="/tutorial/chapter-5">Continue to Chapter 5—Plugins and npm Modules</a>
Expand Down
12 changes: 6 additions & 6 deletions tutorial/ng-chapter-2.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ Open `app/app.component.ts` and replace the existing `@Component` with the follo
> **WARNING**: Take special care to properly close all your UI elements and _not_ use self-closing declarations like `<Button text="Sign in" />`. The limitation is related to the [parse5 library](https://github.com/inikulin/parse5) Angular 2 uses to parse templates, and you can read [details about the issue on GitHub](https://github.com/NativeScript/nativescript-angular#known-issues).
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:
This code adds two new NativeScript UI elements: a [text field](http://docs.nativescript.org/cookbook/ui/text-field) and a [button](http://docs.nativescript.org/cookbook/ui/button). 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:

- `<TextField>`
- `hint`: Shows placeholder text that tells the user what to type.
Expand All @@ -197,11 +197,11 @@ What went wrong? In NativeScript whenever you use more than one UI element, you

NativeScript provides several different layout containers that allow you to place UI elements precisely where you want them to appear.

- The [Absolute Layout](http://docs.nativescript.org/ApiReference/ui/layouts/absolute-layout/HOW-TO.html) lets you position elements using explicit x and y coordinates. This is useful when you need to place elements in exact locations, for example showing an activity indicator widget in the top-left corner of your app.
- The [Dock Layout](http://docs.nativescript.org/ApiReference/ui/layouts/dock-layout/HOW-TO.html) is useful for placing UI elements at the outer edges of your app. For example, a container docked at the bottom of the screen would be a good location for an ad.
- The [Grid Layout](http://docs.nativescript.org/ApiReference/ui/layouts/grid-layout/HOW-TO.html) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
- The [Stack Layout](http://docs.nativescript.org/ApiReference/ui/layouts/stack-layout/HOW-TO.html) lets you stack child UI elements either vertically or horizontally.
- The [Wrap Layout](http://docs.nativescript.org/ApiReference/ui/layouts/wrap-layout/HOW-TO.html) lets child UI elements flow from one row or column to the next when space is filled.
- The [Absolute Layout](http://docs.nativescript.org/cookbook/ui/layouts/absolute-layout) lets you position elements using explicit x and y coordinates. This is useful when you need to place elements in exact locations, for example showing an activity indicator widget in the top-left corner of your app.
- The [Dock Layout](http://docs.nativescript.org/cookbook/ui/layouts/dock-layout) is useful for placing UI elements at the outer edges of your app. For example, a container docked at the bottom of the screen would be a good location for an ad.
- The [Grid Layout](http://docs.nativescript.org/cookbook/ui/layouts/grid-layout) lets you divide your interface into a series of rows and columns, much like a `<table>` in HTML markup.
- The [Stack Layout](http://docs.nativescript.org/cookbook/ui/layouts/stack-layout) lets you stack child UI elements either vertically or horizontally.
- The [Wrap Layout](http://docs.nativescript.org/cookbook/ui/layouts/wrap-layout) lets child UI elements flow from one row or column to the next when space is filled.

For your login screen, all you need is a simple `<StackLayout>` for stacking the UI elements on top of each other. In later sections, you'll use some of the more advanced layouts.

Expand Down
4 changes: 2 additions & 2 deletions tutorial/ng-chapter-4.md
Original file line number Diff line number Diff line change
Expand Up @@ -708,8 +708,8 @@ If you try out your app you should now see a nice fade-in animation:

Now that you have functional login and list pages, lets enhance the apps functionality as a grocery list management tool. In the next chapters you'll add functionality such as email validation, social sharing, and more. And you’ll use one of NativeScript's most useful features to do so: npm modules.

> **TIP**: There are several modules that come out of the box with your NativeScript installation that we did not have time to cover in this guideincluding a [location service](https://docs.nativescript.org/ApiReference/location/HOW-TO), a [file-system helper](https://docs.nativescript.org/ApiReference/file-system/HOW-TO), a [timer module](https://docs.nativescript.org/ApiReference/timer/HOW-TO), a [camera module](https://docs.nativescript.org/ApiReference/camera/HOW-TO), and a whole lot more. Make sure to peruse the “Modules API” of the NativeScript documentation, or just look around your `node_modules/tns-core-modules` folder to see all of what’s available.
> **TIP**: There are several modules that come out of the box with your NativeScript installation that we did not have time to cover in this guideincluding a [location service](https://docs.nativescript.org/cookbook/location), a [file-system helper](https://docs.nativescript.org/cookbook/file-system), a [timer module](https://docs.nativescript.org/cookbook/timer), a [camera module](https://docs.nativescript.org/cookbook/camera), and a whole lot more. Make sure to peruse the “Modules API” of the NativeScript documentation, or just look around your `node_modules/tns-core-modules` folder to see all of what’s available.

<div class="next-chapter-link-container">
<a href="ng-chapter-5">Continue to Chapter 5Plugins and npm Modules</a>
</div>
</div>
Loading

0 comments on commit f7fe64d

Please sign in to comment.