Feature/css animations

ApiReference/ui/list-view/HOW-TO.md

@@ -70,13 +70,15 @@ listView.on(listViewModule.ListView.itemLoadingEvent, function (args) {
     args.view.text = colors[args.index];
 });
 ```
+
 > Note, that changing the array after the list view is shown will not update the UI.
 You can force-update the UI using the refresh() method.
 ``` JavaScript
 colors.push("yellow");
 // Manually trigger the update so that the new color is shown.
 listView.refresh();
 ```
+
 ### Using ListView with ObservableArray
 ``` JavaScript
 var colors = new observableArray.ObservableArray(["red", "green", "blue"]);
@@ -90,19 +92,21 @@ listView.on(listViewModule.ListView.itemLoadingEvent, function (args) {
     indexes[args.index] = true;
 });
 ```
+
 > When using ObservableArray the list view will be automatically updated when items are added or removed form the array.
 ``` JavaScript
 colors.push("yellow");
 // The ListView will be updated automatically.
 ```
+
 ## Responding to other events
 ### ItemTap event
 The event will be raise when an item inside the ListView is tapped.
 ``` JavaScript
 listView.on(listViewModule.ListView.itemTapEvent, function (args) {
     var tappedItemIndex = args.index;
     var tappedItemView = args.view;
-    // Do someting
+    // Do something
 });
 ```
 ### LoadMoreItems event

cookbook/localization.md

@@ -3,7 +3,7 @@ title: Localization
 description: Localize your app with ng2-translate
 position: 1
 slug: localization
-previous_url: /testing
+previous_url: /localization
 environment: angular
 ---
 

core-concepts/DataBinding.md

@@ -0,0 +1,99 @@
+---
+title: Data Binding
+description: NativeScript Documentation - Data Binding
+position: 4
+slug: binding
+previous_url: /bindings
+environment: angular
+--- 
+
+#Data Binding
+
+DataBinding is a core concept for both NativeScript and Angular frameworks. By default `Data Binding` stands for a connection (`binding`) between `Data Model` (Model) and `User Interface` (UI). Since this `binding` involves mostly `data` we use therm `Data Binding` to denote such connection or relationship.
+
+There are several ways of data flows (data bindings).
+
+* one-way data binding - this is the most popular way of binding from Model to UI. A good example of such binding is a text stored in Model and displayed on UI in a text area control.
+* one-way to source (to model) - this is a way of binding which updates Model due to some action on UI. The best example for this is an event like button click (tap).
+* two-way data binding - this is a way of binding that combines both previous ways of binding. A tipical example is a text box field that reads its value from Model, but also changes the Model based on user input.
+
+`NativeScript-angular` plugin simplifies the way which data binding will be used. NativeScript part of the binding infrastructure is used to bind Model values to the real native elements (Android and iOS). Angular 2 part is used to provide correct binding context, change detection and notifications. In order to use data binding within NativeScript-Angular application generally do not differ from a standart Angular 2 web application.
+
+Let's see some examples how to use data binding with `NativeScript-Angular` plugin.
+
+* one-way data binding - surround target (UI) property with square brackets 
+```XML
+<Label [text]='model.mytext' ></Label>
+```
+```TypeScript
+this.model.mytext = 'Lorem ipsum ...';
+// this is the component where label is added
+```
+* one-way to source data binding - surround source event with brackets
+```XML
+<Button (tap)='onButtonTap()'></Button>
+```
+```TypeScript
+onButtonTap = function () {
+	console.log('Button tapped');
+}
+// onButtonTap is a function inside component class where Button is placed
+```
+* two-way data binding - surround target property with square and normal brackets
+
+In Angular 1.x two-way data binding was the default way of binding. However with Angular 2 the state of `two-way data binding` is not the same - due to too many performance problems caused by the uncertaincy of what or who caused the change of the value within Model which sometimes results in way too many changes (and change notifications). So Angular 2 does not have two-way data binding by default, instead it uses events to notify Model that something is changed.
+
+```XML
+<TextField [(ngModel)]='model.mytext'></TextField>
+```
+```TypeScript
+this.model.mytext = 'Lorem Ipsum ...';
+```
+There are some limitations when using two-way data binding with Angular 2. Two-way binding is initialized with `ngModel` directive instead of the name of the property. This under the hood creates two simple data bindings one-way and one-way to source:
+
+```XML
+<TextField [(ngModel)]='model.mytext' ></TextField>
+// becomes
+<TextField [ngModel]='model.mytext' (ngModelChange)='model.mytext=$event.value' ></TextField>
+```
+
+This is the way Angular 2 supports two-way data binding. It generally works in almost all cases with the limitation that we could use only one property with two-way data binding (in the case of TextField this is the `text` property). `ngModel` directive also provide an interface for safely updating property in both directions. For all NativeScript controls `NativeScript-Angular` plugin provides the underlying infrastructure to support native controls via `ngModel` directive (the same way as Angular 2 syntax). It is done by using a single value property for every control that could be used with `ngModel` syntax. Following is the list of available properties:
+
+* TextField, TextView, SearchBar - text property
+* DatePicker - date property
+* TimePicker - time property
+* ListPicker, SegmentedBar - selectedIndex property
+* Switch - checked property
+* Slider - value property
+
+Angular mustache (`{{ }}`) syntax for binding is also supported within a NativeScript-Angular application. It's just another way of one-way binding placed in the middle of a text.
+
+```XML
+<Label text='{{model.deliveryHour}}:{{deliveryMinute}}'></Label>
+```
+```TypeScript
+this.model.deliveryHour = 10;
+this.model.deliveryMinute = 25;
+```
+
+> Note: Notice that property text of the Label element in previous example is not surrounded by any brackets.
+
+### Data converters
+
+Often data within Data Model is stored in a way that is optimized for best performance of tasks like search, replace and so on. Unfortunately the way like computers store data differs a lot with a human readable format. Probably the best example is `Date object`. In JavaScript `Date` actually is a very big number that represents milliseconds from 01.01.1970 which does not speak much to any human. Here comes the use of data converters which basically are functions that formats the data (from Model) in a human readable format (display in UI). Angular 2 uses same concept and named it `pipe` (like UNIX pipe) - value is passed to the pipe function which transforms it and the final result is displayed to the user. Using `pipe` is simple and with the same syntax like UNIX pipe.
+
+```XML
+<Label [text]='model.deliveryDate | date:"fullDate"' ></Label>
+```
+```TypeScript
+this.model.deliveryDate = new Date(2016, 2, 24);
+// this will display Thursday, March 24, 2016 for en-US locale
+```
+
+Pipes like pipes in UNIX can be chained and used one after another, while each pipe receives the result of the previous pipe or value of the property:
+
+```XML
+<Label [text]='model.deliveryDate | date:"fullDate" | testPipe' ></Label>
+```
+
+> Note: Pipes do not work with `one-way to source` and `two-way` binding syntax.

releases/Cross-Platform Modules.md

@@ -10,6 +10,12 @@ previous_url: /Changelogs/Cross-Platform Modules
 Cross Platform Modules Changelog
 ==============================
 
+##1.7.1 (2016, March 22)
+
+### Fixed
+
+- [(#1614)](https://github.com/NativeScript/NativeScript/issues/1614) App crashes after a while leaving it open and re-selecting it on Android
+
 ##1.7.0 (2016, March 16)
 
 ### Fixed

start/getting-started/chapter-0.md

@@ -21,15 +21,15 @@ This guide will walk you through building [Groceries](https://github.com/NativeS
 
 If you follow along to the end, here's what the finished app will look like on iOS:
 
-![login]({{site.baseurl}}/img/cli-getting-started/chapter0/ios/1.png)
-![register]({{site.baseurl}}/img/cli-getting-started/chapter0/ios/2.png)
-![list]({{site.baseurl}}/img/cli-getting-started/chapter0/ios/3.png)
+![login](../../img/cli-getting-started/chapter0/ios/1.png)
+![register](../../img/cli-getting-started/chapter0/ios/2.png)
+![list](../../img/cli-getting-started/chapter0/ios/3.png)
 
 And here's what the app will look like on Android:
 
-![]({{site.baseurl}}/img/cli-getting-started/chapter0/android/1.png)
-![]({{site.baseurl}}/img/cli-getting-started/chapter0/android/2.png)
-![]({{site.baseurl}}/img/cli-getting-started/chapter0/android/3.png)
+![](../../img/cli-getting-started/chapter0/android/1.png)
+![](../../img/cli-getting-started/chapter0/android/2.png)
+![](../../img/cli-getting-started/chapter0/android/3.png)
 
 ### Prerequisites
 

start/getting-started/chapter-1.md

@@ -108,7 +108,7 @@ tns run ios --emulator
 
 If all went well, you should see something like this:
 
-![iOS login]({{site.baseurl}}/img/cli-getting-started/chapter1/ios/1.png)
+![iOS login](../../img/cli-getting-started/chapter1/ios/1.png)
 
 Next, run your app on an Android emulator with the following command:
 
@@ -122,7 +122,7 @@ tns run android --emulator
 
 If all went well, you should see your app running in an Android emulator:
 
-![Android login]({{site.baseurl}}/img/cli-getting-started/chapter1/android/1.png)
+![Android login](../../img/cli-getting-started/chapter1/android/1.png)
 
 <div class="exercise-end"></div>
 
@@ -168,10 +168,6 @@ E/TNS.Native( 2063): File: "/data/data/org.nativescript.groceries/files/app/./vi
 
 > **TIP**: When you're trying to debug a problem, you can also try adding `console.log()` statements in your JavaScript code—exactly as you would in a browser-based application.
 
-If you find continuously running `tns run` from the terminal to be tedious, you may be interested in trying one of the following workflows:
+If you find it tedious to continuously run `tns run` from the terminal, you may be interested in using `tns livesync` instead. The `tns livesync` command instantly transfers XML, CSS, and JavaScript files to a running NativeScript app. If you set the command's `--watch` flag (`tns livesync ios --emulator --watch` or `tns livesync android --emulator --watch`), the NativeScript CLI will watch your app for changes, and apply those changes automatically after you save files. Be warned, however, that the `livesync` command does not show `console.log()` output or stack traces on iOS simulators. So during iOS debugging you may want to switch back to `tns run`.
 
-* The `tns livesync` command instantly transfers XML, CSS, and JavaScript files to a running NativeScript app. If you set the command's `--watch` flag (`tns livesync ios --emulator --watch` or `tns livesync android --emulator --watch`), the NativeScript CLI will watch your app for changes, and apply those changes automatically after you save files. Be warned, however, that the `livesync` command currently does not show `console.log()` output or stack traces. So during debugging you may want to switch back to `tns run`.
-* For Sublime Text users, [this build script](http://developer.telerik.com/featured/a-nativescript-development-workflow-for-sublime-text/) lets you type `Cmd`/`Ctrl` + `B` to start a build without returning to the terminal.
-* Emil Öberg's [nativescript-emulator-reload npm module](https://github.com/emiloberg/nativescript-emulator-reload) adds a Gulp watcher that relaunches the emulator after every change you make.
-
-Now that you've created an app, configured your environment, and set up your app to run on iOS and Android, you're ready to start digging into the files that make up a NativeScript app.
+Now that you've created an app, configured your environment, and set up your app to run on iOS and Android, you're ready to start digging into the files that make up a NativeScript app.

start/getting-started/chapter-2.md

@@ -113,8 +113,8 @@ NativeScript UI components provide attributes to let you configure their behavio
 
 After you [run your app](#development-workflow) with this change, you will see a single `<Button>` component on the screen:
 
-![login 1]({{site.baseurl}}/img/cli-getting-started/chapter2/ios/1.png)
-![login 1]({{site.baseurl}}/img/cli-getting-started/chapter2/android/1.png)
+![login 1](../../img/cli-getting-started/chapter2/ios/1.png)
+![login 1](../../img/cli-getting-started/chapter2/android/1.png)
 
 Currently you only see a single button because you need to tell NativeScript how to layout your page’s UI components. Let's look at how to use NativeScript layouts to arrange these components on the screen.
 
@@ -158,8 +158,8 @@ The stack layout is a UI component, and as such, it has attributes just like the
 
 After you run your app with this change, you'll see that your login page's UI components stack up:
 
-![login 2]({{site.baseurl}}/img/cli-getting-started/chapter2/ios/2.png)
-![login 2]({{site.baseurl}}/img/cli-getting-started/chapter2/android/2.png)
+![login 2](../../img/cli-getting-started/chapter2/ios/2.png)
+![login 2](../../img/cli-getting-started/chapter2/android/2.png)
 
 Although the UI components are in the correct order, they could use some spacing and color to make the app look a bit nicer. To do that let's look at another NativeScript feature: CSS.
 
@@ -257,8 +257,8 @@ NativeScript uses the `class` attribute for adding CSS class names to UI compone
 
 With these changes in place, you'll notice that the app looks halfway decent now, and also has a distinctly different look on iOS and Android:
 
-![login 1]({{site.baseurl}}/img/cli-getting-started/chapter2/ios/3.png)
-![login 1]({{site.baseurl}}/img/cli-getting-started/chapter2/android/3.png)
+![login 1](../../img/cli-getting-started/chapter2/ios/3.png)
+![login 1](../../img/cli-getting-started/chapter2/android/3.png)
 
 Feel free to take some time to play with the look of this app before moving on. You can try adding some additional CSS class names, or adding some page-specific styles in your `login.css` file. When you're ready, let's move on and add an image to this login screen.
 
@@ -296,8 +296,8 @@ Although more complex than putting an image directly in the `app` folder, using
 
 Once these files are in place the NativeScript framework knows how to pick the correct file; all you have to do is reference the image using `res://` and its base file name—i.e. `res://logo`. Here's what your login screen should look like on iOS and Android:
 
-![login 4]({{site.baseurl}}/img/cli-getting-started/chapter2/ios/4.png)
-![login 4]({{site.baseurl}}/img/cli-getting-started/chapter2/android/4.png)
+![login 4](../../img/cli-getting-started/chapter2/ios/4.png)
+![login 4](../../img/cli-getting-started/chapter2/android/4.png)
 
 At this point your UI looks good, but the app still doesn't actually do anything. Let's look at how you can use JavaScript to add some functionality.
 

start/getting-started/chapter-3.md

@@ -39,7 +39,7 @@ exports.loaded = function() {
 
 When you run the app with this change, NativeScript triggers the `loaded()` function you created in the code-behind file, and you should see the word “hello” logged in your terminal.
 
-![]({{site.baseurl}}/img/cli-getting-started/chapter3/terminal-1.png)
+![](../../img/cli-getting-started/chapter3/terminal-1.png)
 
 This simple example shows you how you can append attributes to UI components to run functions in the view's accompanying JavaScript file. Let's use another one of these attributes: `tap`.
 
@@ -69,8 +69,8 @@ exports.register = function() {
 
 At this point, if you run your app and tap either of the buttons, you will see the appropriate alerts pop up. 
 
-![login 5]({{site.baseurl}}/img/cli-getting-started/chapter3/ios/1.png)
-![login 5]({{site.baseurl}}/img/cli-getting-started/chapter3/android/1.png)
+![login 5](../../img/cli-getting-started/chapter3/ios/1.png)
+![login 5](../../img/cli-getting-started/chapter3/android/1.png)
 
 Now that you can see tap gestures working, let's make them do something more interesting than open alerts.
 
@@ -102,8 +102,8 @@ This function uses the [frame module]({{site.baseurl}}/ApiReference/ui/frame/REA
 
 If you run your app and click the “Sign up for Groceries” button, you will be sent to the registration screen, which we have pre-built for you.
 
-![navigate]({{site.baseurl}}/img/cli-getting-started/chapter3/ios/2.gif)
-![navigate]({{site.baseurl}}/img/cli-getting-started/chapter3/android/2.gif)
+![navigate](../../img/cli-getting-started/chapter3/ios/2.gif)
+![navigate](../../img/cli-getting-started/chapter3/android/2.gif)
 
 Now that you can access the registration page, go ahead and sign up for an account to use for the rest of this tutorial.
 
@@ -164,7 +164,7 @@ exports.signIn = function() {
 
 To see how this works in action, run the app, type some text in the email address text field, and tap the “Sign in” button. If all went well, you should see the text you typed logged in your terminal.
 
-![]({{site.baseurl}}/img/cli-getting-started/chapter3/terminal-2.png)
+![](../../img/cli-getting-started/chapter3/terminal-2.png)
 
 By accessing UI elements in JavaScript, you can control how those elements look and behave on the front end. However, accessing these UI components individually is a very manual process, and it makes it hard to track the state of the UI. This is where view models come in.
 
@@ -216,9 +216,9 @@ What's going on here?
 
 Simply put, properties placed on a page's binding context are available to XML elements using the `{% raw %}{{ propertyName }}{% endraw %}` syntax. Because JavaScript sets the view model's `email` to `"[email protected]"`, and because you bound the email address text field to that property using `<TextField text="{% raw %}{{ email }}{% endraw %}">`, when you run this app you'll see "[email protected]" appear on the front end.
 
-![]({{site.baseurl}}/img/cli-getting-started/chapter3/ios/3.png)
-![]({{site.baseurl}}/img/cli-getting-started/chapter3/android/3.png)
+![](../../img/cli-getting-started/chapter3/ios/3.png)
+![](../../img/cli-getting-started/chapter3/android/3.png)
 
 What's really cool is that the binding is two-way. Meaning, when the user types text in these text fields, those changes are immediately applied to your view model.
 
-To use these values, and to make this login functional by tying your app into a backend service, you're going to need the ability to make HTTP calls. And to make HTTP calls in NativeScript you use the NativeScript fetch module. Let's look at how NativeScript modules work.
+To use these values, and to make this login functional by tying your app into a backend service, you're going to need the ability to make HTTP calls. And to make HTTP calls in NativeScript you use the NativeScript fetch module. Let's look at how NativeScript modules work.