diff --git a/ApiReference/ui/list-view/HOW-TO.md b/ApiReference/ui/list-view/HOW-TO.md
index dc81f6c1b..817e242ee 100644
--- a/ApiReference/ui/list-view/HOW-TO.md
+++ b/ApiReference/ui/list-view/HOW-TO.md
@@ -70,6 +70,7 @@ 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
@@ -77,6 +78,7 @@ 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,11 +92,13 @@ 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.
@@ -102,7 +106,7 @@ The event will be raise when an item inside the ListView is tapped.
listView.on(listViewModule.ListView.itemTapEvent, function (args) {
var tappedItemIndex = args.index;
var tappedItemView = args.view;
- // Do someting
+ // Do something
});
```
### LoadMoreItems event
diff --git a/cookbook/localization.md b/cookbook/localization.md
index 708259ad7..01c325268 100644
--- a/cookbook/localization.md
+++ b/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
---
diff --git a/core-concepts/DataBinding.md b/core-concepts/DataBinding.md
new file mode 100644
index 000000000..f7e8fcd4c
--- /dev/null
+++ b/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
+
@@ -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.
\ No newline at end of file
+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.
diff --git a/start/getting-started/chapter-2.md b/start/getting-started/chapter-2.md
index 98228696b..7bc4c1e9b 100644
--- a/start/getting-started/chapter-2.md
+++ b/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 `` component on the screen:
-
-
+
+
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:
-
-
+
+
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:
-
-
+
+
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:
-
-
+
+
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.
diff --git a/start/getting-started/chapter-3.md b/start/getting-started/chapter-3.md
index 02c9b554e..6ed44556f 100644
--- a/start/getting-started/chapter-3.md
+++ b/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.
-
+
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.
-
-
+
+
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.
-
-
+
+
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.
-
+
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 `"user@domain.com"`, and because you bound the email address text field to that property using ``, when you run this app you'll see "user@domain.com" appear on the front end.
-
-
+
+
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.
\ No newline at end of file
+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.
diff --git a/start/getting-started/chapter-4.md b/start/getting-started/chapter-4.md
index bb5aef031..6761f1c95 100644
--- a/start/getting-started/chapter-4.md
+++ b/start/getting-started/chapter-4.md
@@ -172,8 +172,8 @@ exports.signIn = function() {
This code handles both a successful and unsuccessful login. On success, you call the frame module's `navigate()` method to navigate the user to the (currently empty) list page. On failure, you use the dialog module to show the user an error message. Try inputting some invalid credentials to see what the dialog looks like.
-
-
+
+
With that, the login page is completely functional. Now that you have user management working in your NativeScript app, let's move onto the page where users will manage their grocery list. To do that, you need a module that shows items in a list, which is exactly what the ListView module does.
@@ -258,8 +258,8 @@ exports.loaded = function(args) {
Here, you're creating a new Observable object called `pageData`, which you set as the page's `bindingContext` in the `load()` function. Inside the Observable, you set a single `"groceryList"` property to be a new instance of the ObservableArray class. Notice how the `"groceryList"` property corresponds to ``, and each array entry's `"name"` property corresponds to ``. If you run your app you'll see the list screen shows the hardcoded data:
-
-
+
+
Now that we have items on the screen let's look at how you can tie this list to a backend instead of hardcoded data. To do so you'll switch the list page to use a view model, much like you did with the login page.
@@ -363,8 +363,8 @@ The code to make an HTTP call should look familiar, as it leverages the same fet
If you load the app and log in with email address "tj.vantoll@gmail.com" and password "password", you should see a list of groceries that looks something like this:
-
-
+
+
The cool thing here is the code you didn't have to write. Notice that there is no need to refresh the UI, or manually access the ListView UI component—all the view model does is push the JSON response to the ObservableArray, and the UI takes care of itself.
@@ -471,8 +471,8 @@ viewModel.add = function(grocery) {
If you build and rerun your app, you'll find that you can add a grocery item and it will appear immediately in your list—and, all of this is completely driven by a backend service. Pretty cool, huh?
-
-
+
+
Let's look at how you can polish this page with a NativeScript module for showing activity indicators.
@@ -507,8 +507,8 @@ In the code above you add a new `"isLoading"` flag to the list page's Observable
You control where the ActivityIndicator displays by setting its `rowSpan` and `colSpan` attributes. In this case `rowSpan="2" colSpan="2"` makes the ActivityIndicator take up both rows and both columns of its parent GridLayout. Here's what the new ActivityIndicator looks like:
-
-
+
+
The list page is now more user friendly, but we can improve the experience with one of the more powerful NativeScript modules: the animation module.
@@ -567,8 +567,8 @@ First, in CSS, you assign an `opacity` of `0` to the grocery list ``.
The result of this code is a nice fade-in animation:
-
-
+
+
The animation module is a lot of fun to play with, and it’s easy to use too. All you need to do is get a reference to an element using `getViewById()`, and then call that element’s `animate` method. You may want to take a few minutes to look through our [animation samples]({{site.baseurl}}/ui/animation#examples) and try a few of these animations for yourself in Groceries.
diff --git a/start/getting-started/chapter-5.md b/start/getting-started/chapter-5.md
index 3ca7f692b..090191d83 100644
--- a/start/getting-started/chapter-5.md
+++ b/start/getting-started/chapter-5.md
@@ -88,8 +88,8 @@ exports.register = function() {
In this function, the user submits an email and password, and the value is sent to the view model for validation. If it passes, registration can proceed, otherwise you show an alert:
-
-
+
+
In general npm modules greatly expand the number of things you're able to do in your NativeScript apps. Need date and time formatting? Use [moment](https://www.npmjs.com/package/moment). Need utility functions for objects and arrays? Use [lodash](https://www.npmjs.com/package/lodash) or [underscore](https://www.npmjs.com/package/underscore). This code reuse benefit gets even more powerful when you bring NativeScript plugins into the picture.
@@ -165,11 +165,11 @@ This code takes the groceries from the grocery list view model, converts the dat
Now when you run the app, you'll see a new button at the top of the screen. When you tap it, the native iOS or Android sharing widget will show to let you post your groceries to your social networks, or send them via email, message, or any other method you prefer.
-
-
+
+
Pretty cool, huh? The ability to use npm modules greatly expands the number of things you're able to do in a NativeScript app. Need to compose emails in your app? Try out the [NativeScript email plugin](https://www.npmjs.com/package/nativescript-email). Need to use the clipboard in your app? Try out the [NativeScript clipboard plugin](https://www.npmjs.com/package/nativescript-clipboard).
If you're looking for NativeScript plugins start by searching both the [NativeScript Plugins Marketplace](http://plugins.telerik.com/nativescript) and [npm](https://www.npmjs.com/search?q=nativescript). If you don't find the plugin you need, you can [request the plugin on our ideas portal](https://nativescript.ideas.aha.io/), or you can take a stab at [creating the plugin yourself](https://docs.nativescript.org/plugins).
-Between NativeScript modules, npm modules, and NativeScript plugins, the NativeScript framework provides a lot of functionality you can use to build your next app. However, we've yet to talk about NativeScript's most powerful feature: the ability to directly access iOS and Android APIs in JavaScript. Let's look at how it works.
\ No newline at end of file
+Between NativeScript modules, npm modules, and NativeScript plugins, the NativeScript framework provides a lot of functionality you can use to build your next app. However, we've yet to talk about NativeScript's most powerful feature: the ability to directly access iOS and Android APIs in JavaScript. Let's look at how it works.
diff --git a/start/getting-started/chapter-6.md b/start/getting-started/chapter-6.md
index 0ba753263..261ff8b2c 100644
--- a/start/getting-started/chapter-6.md
+++ b/start/getting-started/chapter-6.md
@@ -58,7 +58,7 @@ Ok, let's break down what just happened, starting with the `if (page.ios)` check
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:
-
+
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).
@@ -101,7 +101,7 @@ With this code you're primarily adding an `` to the existing ListView tem
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:
-
+
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.
@@ -145,7 +145,7 @@ This code probably looks fairly familiar by now. You're again calling the fetch
If you run your app on Android you should be able to delete items from the list.
-
+
Now that you have built the interface for Android's tappable icon, let's add a swipe delete interface for iOS.
@@ -182,7 +182,7 @@ if (page.ios) {
This code gets a reference to the page's `` 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:
-
+
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.
diff --git a/start/introduction.md b/start/introduction.md
index b5e049c38..c5f450af0 100644
--- a/start/introduction.md
+++ b/start/introduction.md
@@ -19,7 +19,7 @@ Develop your business logic with **JavaScript** or **TypeScript**, design and st
You can develop for **Android 4.2 or later** and **iOS 7.1 or later**.
-
+
1. Write your **application code** once using the **NativeScript modules** and the **NativeScript runtimes**.("view");
+view.className = "transparent";
+```
+
+All keyframes defined in CSS can be accessed with code by using the **getKeyframeAnimationWithName** method. This allows further customization of animation properties:
+
``` JavaScript
-view.animate({
- scale: { x: 2, y: 2},
- duration: 3000
+var view = page.getViewById("view");
+var animationInfo = page.getKeyframeAnimationWithName("bounce");
+animationInfo.duration = 2000;
+var keyframeAnimation = keyframeAnimation.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
+animation.play(view).then(() => {
+ console.log("Played with code!");
});
```
``` TypeScript
-view.animate({
- scale: { x: 2, y: 2},
- duration: 3000
+let view = page.getViewById("view");
+let animationInfo = page.getKeyframeAnimationWithName("bounce");
+animationInfo.duration = 2000;
+let keyframeAnimation = keyframeAnimation.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
+animation.play(view).then(() => {
+ console.log("Played with code!");
});
```
-## Rotate
-
+# Animations with code
+
+In case you need to animate a **single** [`View`]({{site.baseurl}}/ApiReference/ui/core/view/View.md) and you don't need to be able to **cancel** the animation, you can simply use the shortcut **View.animate** method which accepts an [`AnimationDefinition`]({{site.baseurl}}/ApiReference/ui/animation/AnimationDefinition.md), immediately starts the animation and returns its finished promise.
+
``` JavaScript
view.animate({
- rotate: 360,
- duration: 3000
+ translate: { x: 0, y: 100},
+ duration: 1000,
+ curve: enums.AnimationCurve.easeIn
});
```
``` TypeScript
view.animate({
- rotate: 360,
- duration: 3000
+ translate: { x: 0, y: 100},
+ duration: 1000,
+ curve: enums.AnimationCurve.easeIn
});
```
-## Multiple Properties
-
+## The AnimationDefinition interface
+
+The [`AnimationDefinition`]({{site.baseurl}}/ApiReference/ui/animation/AnimationDefinition.md) interface is central for defining an animation for **one or more properties** of a **single** [`View`]({{site.baseurl}}/ApiReference/ui/core/view/View.md). The animatable properties are:
+
+ - opacity
+ - backgroundColor
+ - translateX and translateY
+ - scaleX and scaleY
+ - rotate
+
+The [`AnimationDefinition`]({{site.baseurl}}/ApiReference/ui/animation/AnimationDefinition.md) interface has the following members:
+
+ - target: The view whose property is to be animated.
+ - opacity: Animates the opacity of the view. Value should be a number between 0.0 and 1.0.
+ - backgroundColor: Animates the backgroundColor of the view.
+ - translate: Animates the translate affine transform of the view. Value should be a [`Pair`]({{site.baseurl}}/ApiReference/ui/animation/Pair.md).
+ - scale: Animates the scale affine transform of the view. Value should be a [`Pair`]({{site.baseurl}}/ApiReference/ui/animation/Pair.md).
+ - rotate: Animates the rotate affine transform of the view. Value should be a number specifying the rotation amount in degrees.
+ - duration: The length of the animation in milliseconds. The default duration is 300 milliseconds.
+ - delay: The amount of time, in milliseconds, to delay starting the animation.
+ - iterations: Specifies how many times the animation should be played. Default is 1. iOS animations support fractional iterations, i.e. 1.5. To repeat an animation infinitely, use Number.POSITIVE_INFINITY
+ - curve: An optional animation curve. Possible values are contained in the [AnimationCurve enumeration]({{site.baseurl}}/ApiReference/ui/enums/AnimationCurve/README.md). Alternatively, you can pass an instance of type [`UIViewAnimationCurve`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/c/tdef/UIViewAnimationCurve) for iOS or [`android.animation.TimeInterpolator`](http://developer.android.com/reference/android/animation/TimeInterpolator.html) for Android.
+
+ All members of the interface are **optional** and have default values with the following exceptions:
+
+ - target is only optional when calling the **animate** method of a [`View`]({{site.baseurl}}/ApiReference/ui/core/view/View.md) instance since it is set automatically for you.
+ - You must specify at least one property among opacity, backgroundColor, scale, rotate and translate.
+
+## The Animation Class
+
+The [`Animation`]({{site.baseurl}}/ApiReference/ui/animation/Animation.md) class represents a **set** of one or more [`AnimationDefinitions`]({{site.baseurl}}/ApiReference/ui/animation/AnimationDefinition.md) which can be played either **simultaneously or sequentially**. **This class is typically used when you need to animate several views together**. The constructor of the the [`Animation`]({{site.baseurl}}/ApiReference/ui/animation/Animation.md) class accepts an array of [`AnimationDefinitions`]({{site.baseurl}}/ApiReference/ui/animation/AnimationDefinition.md) and a boolean parameter indicating whether to play the animations sequentially. Creating an instance of the [`Animation`]({{site.baseurl}}/ApiReference/ui/animation/Animation.md) class does not start the animation playback. The class has four members:
+
+ - play: a method that starts the animation and returns the instance it was called on for fluent animation chaining.
+ - cancel: a void method which stops the animation.
+ - finished: a promise which will be resolved when the animation finishes or rejected when the animation is cancelled or stops for another reason.
+ - isPlaying: a boolean property returning true if the animation is currently playing.
+
+## Animating multiple properties
+
+It is easy to animate multiple properties at once, just pass the desired animatable properties and the corresponding values when calling the animate function:
+
``` JavaScript
view.animate({
backgroundColor: new color.Color("#3D5AFE"),
@@ -207,8 +481,12 @@ view.animate({
});
```
-## Chaining with Promises
-
+
+
+## Chaining animations with Promises
+
+The animate method returns a promise that can be used to chain animations. Here is an example:
+
``` JavaScript
view.animate({ opacity: 0 })
.then(function () { return view.animate({ opacity: 1 }); })
@@ -242,8 +520,151 @@ view.animate({ opacity: 0 })
});
```
+
+
+# Examples
+
+The full source code for all samples is located [`here`](https://github.com/NativeScript/animation-demo).
+
+## Opacity
+
+
+
+``` JavaScript
+view.animate({
+ opacity: 0,
+ duration: 3000
+});
+```
+``` TypeScript
+view.animate({
+ opacity: 0,
+ duration: 3000
+});
+```
+``` CSS
+.view {
+ animation-name: opacity;
+ animation-duration: 3;
+}
+@keyframes opacity {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+```
+
+## Background Color
+
+
+
+``` JavaScript
+view.animate({
+ backgroundColor: new colorModule.Color("#3D5AFE"),
+ duration: 3000
+});
+```
+``` TypeScript
+view.animate({
+ backgroundColor: new colorModule.Color("#3D5AFE"),
+ duration: 3000
+});
+```
+``` CSS
+.view {
+ animation-name: backgroundColor;
+ animation-duration: 3;
+}
+@keyframes backgroundColor {
+ from { background-color: white; }
+ to { background-color: #3D5AFE; }
+}
+```
+
+## Translate
+
+
+
+``` JavaScript
+view.animate({
+ translate: { x: 100, y: 100},
+ duration: 3000
+});
+```
+``` TypeScript
+view.animate({
+ translate: { x: 100, y: 100},
+ duration: 3000
+});
+```
+``` CSS
+.view {
+ animation-name: translate;
+ animation-duration: 3;
+}
+@keyframes translate {
+ from { transform: translate(0, 0); }
+ to { transform: translate(100, 100); }
+}
+```
+
+## Scale
+
+
+
+``` JavaScript
+view.animate({
+ scale: { x: 2, y: 2},
+ duration: 3000
+});
+```
+``` TypeScript
+view.animate({
+ scale: { x: 2, y: 2},
+ duration: 3000
+});
+```
+``` CSS
+.view {
+ animation-name: scale;
+ animation-duration: 3;
+}
+@keyframes scale {
+ from { transform: scale(1, 1); }
+ to { transform: scale(2, 2); }
+}
+```
+
+## Rotate
+
+
+
+``` JavaScript
+view.animate({
+ rotate: 360,
+ duration: 3000
+});
+```
+``` TypeScript
+view.animate({
+ rotate: 360,
+ duration: 3000
+});
+```
+``` CSS
+.view {
+ animation-name: rotate;
+ animation-duration: 3;
+}
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+```
+
## Chaining with Animation Set
-
+
+
+
``` JavaScript
var definitions = new Array();
definitions.push({ target: view1, translate: { x: 200, y: 0 }, duration: 3000 });
@@ -276,7 +697,9 @@ animationSet.play().then(() => {
```
## Multiple Views
-
+
+
+
``` JavaScript
var definitions = new Array();
var a1 = {
@@ -352,7 +775,9 @@ animationSet.play().then(() => {
```
## Reusing Animations
-
+
+
+
``` JavaScript
var animation1 = view.createAnimation({ opacity: 0 });
var animation2 = view.createAnimation({ opacity: 1 });
@@ -388,7 +813,9 @@ animation1.play()
```
## Slide-in Effect
-
+
+
+
``` JavaScript
var item = new imageModule.Image();
item.src = "~/res/icon_100x100.png";
@@ -417,7 +844,9 @@ wrapLayout.addChild(item);
```
## Infinite
-
+
+
+
``` JavaScript
animationSet = new animationModule.Animation([{
target: view,
@@ -445,3 +874,4 @@ animationSet.play().catch((e) => {
// Call animationSet.cancel() to stop it;
```
+
diff --git a/ui/icon-fonts.md b/ui/icon-fonts.md
index 00afc46bf..2fe6bcf06 100644
--- a/ui/icon-fonts.md
+++ b/ui/icon-fonts.md
@@ -13,10 +13,10 @@ While bitmap images are great, they present challenges in designing mobile appli
Choose or generate an icon font that best matches your needs. Two popular icon fonts are [IcoMoon](https://icomoon.io/) and [Font Awesome](https://fortawesome.github.io/Font-Awesome/). Once you have downloaded the icon font to your machine, locate the [TrueType](https://en.wikipedia.org/wiki/TrueType) font file with extension **.ttf**. In your NativeScript application **app** folder create a folder called **fonts** and place the **.ttf** there. Follow the instructions on the icon font webpage to determine the hex codes of each font glyph, i.e. icon. Add a **Label** component to your NativeScript app and bind the Label's **text** property to a one-letter string generated from the character code of the icon you want to show, i.e. `String.fromCharCode(0xe903)`. Do not forget to set the Label's **font-family** to the name of your font either through CSS, XML or code-behind.
## Icon Font
-
+
## Fonts Folder
-
+
## app.css
``` CSS
@@ -92,6 +92,6 @@ TODO...
{% endangular %}
## Sample App
-
+
[Sample Application](https://github.com/NativeScript/icon-fonts)
diff --git a/ui/keyboard.md b/ui/keyboard.md
index 285b2b5dc..b7e01760e 100644
--- a/ui/keyboard.md
+++ b/ui/keyboard.md
@@ -12,19 +12,19 @@ All widgets that inherit from [`EditableTextBase`]({{site.baseurl}}/ApiReference
- datetime
- Android: [TYPE_CLASS_DATETIME](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_DATETIME) | [TYPE_DATETIME_VARIATION_NORMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_DATETIME_VARIATION_NORMAL)
- iOS: [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
- - 
+ - 
- phone
- Android: [TYPE_CLASS_PHONE](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_PHONE)
- iOS: [UIKeyboardTypePhonePad](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
- - 
+ - 
- number
- Android: [TYPE_CLASS_NUMBER](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_NUMBER) | [TYPE_NUMBER_VARIATION_NORMAL](http://developer.android.com/intl/es/reference/android/text/InputType.html#TYPE_NUMBER_VARIATION_NORMAL) | [TYPE_NUMBER_FLAG_SIGNED](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_SIGNED) | [TYPE_NUMBER_FLAG_DECIMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_DECIMAL)
- iOS: [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
- - 
+ - 
- url
- Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_URI](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_URI)
- iOS: [UIKeyboardTypeURL](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
- - 
+ - 
- email
- Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_EMAIL_ADDRESS](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
- iOS: [UIKeyboardTypeEmailAddress](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
@@ -36,20 +36,20 @@ All widgets that inherit from [`EditableTextBase`]({{site.baseurl}}/ApiReference
- done
- Android: [IME_ACTION_DONE](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_DONE)
- iOS: [UIReturnKeyDone](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
- - 
+ - 
- next
- Android: [IME_ACTION_NEXT](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_NEXT)
- iOS: [UIReturnKeyNext](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
- - 
+ - 
- go
- Android: [IME_ACTION_GO](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_GO)
- iOS: [UIReturnKeyGo](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
- - 
+ - 
- search
- Android: [IME_ACTION_SEARCH](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEARCH)
- iOS: [UIReturnKeySearch](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
- - 
+ - 
- send
- Android: [IME_ACTION_SEND](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEND)
- iOS: [UIReturnKeySend](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
- - 
\ No newline at end of file
+ - 
diff --git a/ui/layout-containers.md b/ui/layout-containers.md
index ce249acf8..39c69a752 100644
--- a/ui/layout-containers.md
+++ b/ui/layout-containers.md
@@ -42,7 +42,7 @@ None.
TODO...
{% endangular %}
-
+
### Sample (margin)
{% nativescript %}
@@ -59,7 +59,7 @@ TODO...
TODO...
{% endangular %}
-
+
## [DockLayout]({{site.baseurl}}/ApiReference/ui/layouts/dock-layout/HOW-TO.md)
The DockLayout is a layout that provides an docking mechanism for child elements to the left, right, top, bottom or center of the layout. To define the docking side of a child element, use its `dock` property. To dock a child element to the center of the DockLayout, it must be the last child of the DockLayout and the `stretchLastChild` property of the DockLayout must be set to `true`.
@@ -91,7 +91,7 @@ The DockLayout is a layout that provides an docking mechanism for child elements
TODO...
{% endangular %}
-
+
### Sample (stretchLastChild="true")
{% nativescript %}
@@ -110,7 +110,7 @@ TODO...
TODO...
{% endangular %}
-
+
### Sample (multiple child elements on one side)
{% nativescript %}
@@ -129,7 +129,7 @@ TODO...
TODO...
{% endangular %}
-
+
## [GridLayout]({{site.baseurl}}/ApiReference/ui/layouts/grid-layout/HOW-TO.md)
The GridLayout is a layout that arranges its child elements in a table structure of rows and columns. A cell can contain multiple child elements, they can span over multiple rows and columns, and even overlap each other. The GridLayout has one column and one row by default. To add additional columns and rows, you have to specify column definition items (separated by commas) to the `columns` property and row definition items (separated by commas) to the `rows` property of the GridLayout. The width of a column and the height of a row can be specified as an absolute amount of pixels, as a percentage of the available space or automatically:
@@ -171,7 +171,7 @@ The GridLayout is a layout that arranges its child elements in a table structure
TODO...
{% endangular %}
-
+
### Sample (star-sizing)
- Columns: One star plus two stars is equal to three stars. (\* + 2\* = 3\*). Divide GridLayout width (300) by 3 to get 100. So first column is 1 x 100 = 100 pixels wide and second column is 2 x 100 = 200 pixels wide. 100 + 200 = 300.
@@ -192,7 +192,7 @@ TODO...
TODO...
{% endangular %}
-
+
### Sample (fixed and auto)
- The first column and the first row are `auto`. This means that they are measured with infinite available space and then sized to their content.
@@ -213,7 +213,7 @@ TODO...
TODO...
{% endangular %}
-
+
### Sample (no width & horizontalAlignment != stretch)
When the GridLayout has no explicit `width` set and its `horizontalAlignment` is not `stretch`, the star columns will not occupy the entire available space (300 from parent StackLayout).
@@ -234,7 +234,7 @@ When the GridLayout has no explicit `width` set and its `horizontalAlignment` is
TODO...
{% endangular %}
-
+
### Sample (column stretching)
Label 3 is has fixed width of 150 pixels. Label 1 is given more space than it actually needs, because Label 3 stretches the auto column.
@@ -253,7 +253,7 @@ Label 3 is has fixed width of 150 pixels. Label 1 is given more space than it ac
TODO...
{% endangular %}
-
+
### Sample (complex)
@@ -273,7 +273,7 @@ TODO...
TODO...
{% endangular %}
-
+
## [StackLayout]({{site.baseurl}}/ApiReference/ui/layouts/stack-layout/HOW-TO.md)
The StackLayout stacks its child elements below or beside each other, depending on its orientation. It is very useful to create any kinds of lists.
@@ -303,7 +303,7 @@ None.
TODO...
{% endangular %}
-
+
### Sample (orientation="horizontal")
{% nativescript %}
@@ -322,7 +322,7 @@ TODO...
TODO...
{% endangular %}
-
+
### Sample (horizontal alignment of children)
{% nativescript %}
@@ -341,7 +341,7 @@ TODO...
TODO...
{% endangular %}
-
+
### Sample (vertical alignment of children)
{% nativescript %}
@@ -360,7 +360,7 @@ TODO...
TODO...
{% endangular %}
-
+
## [WrapLayout]({{site.baseurl}}/ApiReference/ui/layouts/wrap-layout/HOW-TO.md)
The WrapLayout is similar to the StackLayout, but it does not just stack all child elements to one column/row, it wraps them to new columns/rows if no space is left. The WrapLayout is often used with items of the same size, but this is not a requirement.
@@ -391,7 +391,7 @@ None.
TODO...
{% endangular %}
-
+
### Sample (orientation="vertical")
{% nativescript %}
@@ -410,7 +410,7 @@ TODO...
TODO...
{% endangular %}
-
+
### Sample (itemWidth="30" itemHeight="30")
{% nativescript %}
@@ -429,4 +429,4 @@ TODO...
TODO...
{% endangular %}
-
+
diff --git a/ui/styling.md b/ui/styling.md
index 3c2e85e7c..17ad1d16c 100644
--- a/ui/styling.md
+++ b/ui/styling.md
@@ -13,7 +13,8 @@ This article includes the following topics:
* [Introduction](#introduction)
* [Applying CSS Styles](#applying-css-styles)
* [Supported Selectors](#supported-selectors)
-* [Supported Properties](#supported-properties)
+* [Supported CSS Properties](#supported-css-properties)
+* [Accessing NativeScript component properties with CSS](#accessing-nativeScript-component-properties-with-css)
* [Using Fonts](#using-fonts)
* [Import External CSS](#import-external-css)
@@ -166,7 +167,7 @@ btn.id = "login-button"