diff --git a/application-management.md b/application-management.md
index 456c2a324..0e0a3c46e 100644
--- a/application-management.md
+++ b/application-management.md
@@ -1,55 +1,80 @@
---
-nav-title: "Application Management"
-title: "Application Management"
-description: "Application Management"
+nav-title: Application Management
+title: Application Management
+description: Learn how to manage the life cycle of NativeScript applications from application start to storing user-defined settings.
position: 4
-
---
-# Application Start
-You are required to call the **start** method of the application module once you are ready with its initialization. This method doesn't do anything for an Android application at the moment but may do in the future. In an iOS application this call will start the UIApplication and will trigger its UI message loop.:
+
+# Application Management
+
+* [Start Application](#start-application)
+* [Use Application Callbacks](#use-application-callbacks)
+* [Persist and Restore Application Settings](#persist-and-restore-application-settings)
+
+## Start Application
+
+You must call the **start** method of the application module after the module initialization.
+
+This method is required for iOS application.
+
+### Example
+
``` JavaScript
+/*
+iOS calls UIApplication and triggers the application main event loop.
+*/
+
var application = require("application");
application.mainModule = "app/template-settings/main-page";
application.start();
```
``` TypeScript
+/*
+iOS calls UIApplication and triggers the application main event loop.
+*/
+
import application = require("application");
application.mainModule = "app/main-page";
application.start();
```
-# Using Application Callbacks
-Each NativeScript application has several important lifecycle events. You can use those events to perform all kinds of needed maintenance and housekeeping:
-+ onLaunch(context) - method called when application launch.
-+ onSuspend() - method called when the application is suspended.
-+ onResume() - method called when the application is resumed after it has been suspended.
-+ onExit() - method called when the application is about to exit.
-+ onLowMemory() - method called when there is low memory on the target device.
-+ onUncaughtError(error) - method called when there is an uncaught application error.
-Here is a code example that demonstrates how too use those callback functions:
+
+## Use Application Callbacks
+
+NativeScript applications have the following life cycle events.
+
++ `onLaunch(context)`: This method is called when application launch.
++ `onSuspend()`: This method is called when the application is suspended.
++ `onResume()`: This method is called when the application is resumed after it has been suspended.
++ `onExit()`: This method is called when the application is about to exit.
++ `onLowMemory()`: This method is called when the memory on the target device is low.
++ `onUncaughtError(error)`: This method is called when an uncaught application error is present.
+
+### Example
+
``` JavaScript
var application = require("application");
application.mainModule = "app/template-settings/main-page";
application.onLaunch = function (context) {
- // For Android applications the context is an android.content.Intent.
- // For iOS applications the context is undefined, i.e. there is no available context.
+ // For Android applications, the context is an android.content.Intent class.
+ // For iOS applications, the context is undefined.
if (application.android) {
- console.log("Launched Android application with intent: " + context);
+ console.log("Launched Android application with the following intent: " + context + ".");
}
else if (application.ios) {
- console.log("Launched iOS application");
+ console.log("Launched iOS application.");
}
};
application.onSuspend = function () {
- console.log("Application suspended");
+ console.log("Application suspended.");
};
application.onResume = function () {
- console.log("Application resumed");
+ console.log("Application resumed.");
};
application.onExit = function () {
- console.log("Application exit");
+ console.log("Application will exit.");
};
application.onLowMemory = function () {
- console.log("Application low memory");
+ console.log("Memory is low.");
};
application.onUncaughtError = function (error) {
console.log("Application error: " + error.name + "; " + error.message + "; " + error.nativeError);
@@ -60,63 +85,71 @@ application.start();
import application = require("application");
application.mainModule = "app/main-page";
application.onLaunch = function (context: any) {
- // For Android applications the context is an android.content.Intent.
- // For iOS applications the context is undefined, i.e. there is no available context.
+ // For Android applications, the context is an android.content.Intent class.
+ // For iOS applications, the context is undefined.
if (application.android) {
- console.log("Launched Android application with intent: " + context);
+ console.log("Launched Android application with the following intent: " + context + ".");
}
else if (application.ios) {
- console.log("Launched iOS application");
+ console.log("Launched iOS application.");
}
}
application.onSuspend = function () {
- console.log("Application suspended");
+ console.log("Application suspended.");
}
application.onResume = function () {
- console.log("Application resumed");
+ console.log("Application resumed.");
}
application.onExit = function () {
- console.log("Application exit");
+ console.log("Application will exit.");
}
application.onLowMemory = function () {
- console.log("Application low memory");
+ console.log("Memory is low.");
}
application.onUncaughtError = function (error: application.NativeScriptError) {
console.log("Application error: " + error.name + "; " + error.message + "; " + error.nativeError);
}
application.start();
```
-# Persist and Restore Application Settings
-To persist settings that the user has defined you have to use the local-settings module. The local-settings module is a static singleton hash table that stores key-value pairs for the application. The getter methods have two parameters -- a key and an optional default value to return if the specified key does not exist. The setter methods also have two parameters -- key and value. Here is an example of using the local settings-module and all of its available methods:
+
+## Persist and Restore Application Settings
+
+To persist user-defined settings, you need to use the `local-settings` module. The `local-settings` module is a static singleton hash table that stores key-value pairs for the application.
+
+The getter methods have two parameters: a key and an optional default value to return if the specified key does not exist.
+The setter methods have two required parameters: a key and value.
+
+### Example
+
``` JavaScript
var localSettings = require("local-settings");
-// Event handler for Page "loaded" event attached in main-page.xml
+// Event handler for Page "loaded" event attached in main-page.xml.
function pageLoaded(args) {
localSettings.setString("Name", "John Doe");
- console.log(localSettings.getString("Name")); // Prints "John Doe"
+ console.log(localSettings.getString("Name")); // Prints "John Doe".
localSettings.setBoolean("Married", false);
- console.log(localSettings.getBoolean("Married")); // Prints false
+ console.log(localSettings.getBoolean("Married")); // Prints false.
localSettings.setNumber("Age", 42);
- console.log(localSettings.getNumber("Age")); // Prints 42
- console.log(localSettings.hasKey("Name")); // Prints true
+ console.log(localSettings.getNumber("Age")); // Prints 42.
+ console.log(localSettings.hasKey("Name")); // Prints true.
localSettings.remove("Name"); // Removes the Name entry.
- console.log(localSettings.hasKey("Name")); // Prints false
+ console.log(localSettings.hasKey("Name")); // Prints false.
}
exports.pageLoaded = pageLoaded;
```
``` TypeScript
import observable = require("data/observable");
import localSettings = require("local-settings");
-// Event handler for Page "loaded" event attached in main-page.xml
+// Event handler for Page "loaded" event attached in main-page.xml.
export function pageLoaded(args: observable.EventData) {
localSettings.setString("Name", "John Doe");
- console.log(localSettings.getString("Name"));// Prints "John Doe"
+ console.log(localSettings.getString("Name"));// Prints "John Doe".
localSettings.setBoolean("Married", false);
- console.log(localSettings.getBoolean("Married"));// Prints false
+ console.log(localSettings.getBoolean("Married"));// Prints false.
localSettings.setNumber("Age", 42);
- console.log(localSettings.getNumber("Age"));// Prints 42
- console.log(localSettings.hasKey("Name"));// Prints true
+ console.log(localSettings.getNumber("Age"));// Prints 42.
+ console.log(localSettings.hasKey("Name"));// Prints true.
localSettings.remove("Name");// Removes the Name entry.
- console.log(localSettings.hasKey("Name"));// Prints false
+ console.log(localSettings.hasKey("Name"));// Prints false.
}
-```
+```
\ No newline at end of file
diff --git a/cli.md b/cli.md
deleted file mode 100644
index 2ab691d6e..000000000
--- a/cli.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-nav-title: "NativeScript CLI"
-title: "CLI"
-description: "NativeScript Documentation: Command-line Interface"
-position: 16
----
-
-# Command-line Interface
-
-Using a command line interface (CLI) is a very productive and simple way to use a developer framework. With the NativeScript CLI, it is possible to IDE to edit the application code and use the CLI to build and deploy the application to an emulator or on a real device.
-
-One of the goals with NativeScript is having tools that are very similar to existing ones to lower the learning curve. If you are familiar with the [Cordova Command-line interface (Cordova CLI)](http://cordova.apache.org/docs/en/3.6.0/guide_cli_index.md.html), you're ready to build your cross-platform application with the NativeScript CLI.
-
-#Prerequisites
-
-It is important to note that NativeScript is all about building applications for devices. Thus, to test and run our product, we need the respective Software Development Kits (SDKs) and build tools installed in accordance to their license terms. For example, on a MAC computer one can install Node.js, Xcode, Java, Android SDK and Apache Ant and then test their NativeScript project on both an iOS simulator and device(s) and Android emulator and device(s). On the other hand, there is no Xcode for Windows PC, hence only Android applications can be tested there, provided we have Java, the Android SDK and Apache Ant. The full requirements can be found in the [System Requirements section of the official NativeScript package readme file](https://www.npmjs.org/package/nativescript#system-requirements).
-
-#Installing the NativeScript CLI
-
-The [NativeScript CLI](https://www.npmjs.org/package/nativescript) is distributed as a Node.js NPM package. Thus, its installation is as simple as installing any other NPM package. It is recommended that you install it globally so that you can access it from any folder.
-
-The command `npm install -g nativescript` will add the `nativescript` (or its synonym, `tns`, used further for shortness) program available to your console.
-
-#Creating a project using the default template
-
-Navigate to a preferred 'projects' folder of yours and type `tns create HelloWorld`
-
-
-
-
-A new folder will get created, named `HelloWorld`. It contains some sample code, available at [github](https://github.com/NativeScript/template-hello-world).
-
-
-If you check the folder in Finder or Windows Explorer, you will notice it contains two folders: `app` and `platforms`.
-
-The latter is empty at this stage of the app creation. Once we start "enabling" our project with specific platforms (iOS and Android supported for the time being), the `platforms` folder will contain platform-specific versions of our project. Please note that this folder is automatically re-generated based on the cross-platform code changes, so please do not alter its content, because it will be replaced next time the app is build. Use this folder for debugging purposes only.
-
-The app folder contains the actual cross-platform code, the resources of our application and some pre-packed JavaScript modules, representing the NativeScript framework. The most important content in it are the:
-
-- `app` subfolder, which is our application code. Generally, any edits of the application logic go here. Please, check [the documentation](https://github.com/nativescript/docs) for the available APIs (cross-platform, android and iOS).
-
-- `App_Resources` subfolder, which contains some platform-specific resources. The structure and the usage of resources is still to be finalized, hence for the time being do not delete, move or rename any files from that folder. Modification of the images to fit your brand is perfectly fine.
-
-- `tns_modules` subfolder, containing cross-platform modules, pre-packed by Telerik. In the future, the CLI will allow modules to be added/updated via a special command in a plugin manner.
-
-#"Enabling" the project to a specific platform
-
-To run the already created project on an emulator or a physical device, first navigate to the project-folder you just created (i.e. `cd HelloWorld`).
-
-On a mac/windows/linux computer, type the command `tns platform add android`. Alternatively, on a mac computer type the command `tns platform add ios`.
-
-
-
-
-These will download the android or ios runtimes for NativeScript and will unfold them using the contained platform-specific project to the `platforms` folder. A runtime package contains a platform-specific (Eclipse for Android or XCode for iOS) template project and a set of binaries, allowing the NativeScript javascript code to be executed on the target device.
-
-#Populating the cross-platform code to platform-specific folders
-
-The next step is running the command `tns prepare android` (alternatively, `tns prepare ios`).
-
-In essence, this command copies the files in the `app/app`, `app/App_Resources` and `app/tns_modules` folders to the `platforms/[SpecifiedPlatform]` folder, following some logic.
-
-
-
-The `prepare` command is not run automatically during an `emulate` command call on purpose. The reason is that while debugging we might change the javascript in the platform-specific project (under the `platforms` folder) and we want to debug that code directly by running the emulate or run commands. If the prepare command was called, it would overwrite our changes.
-
-#Running the application
-
-- `tns emulate ios` - call this command on a Mac computer to get your project deployed and started on the iOS simulator
-- `tns emulate android` - call this command on a Mac/Windows/Linux computer to get your project deployed and started on the Android emulator
-- `tns run ios` - call this command on a Mac computer to get your project deployed and started on a device attached to your computer
-- `tns run android` - call this command on a Mac/Windows/Linux computer to get your project deployed and started on an Android device, attached to your computer.
-
-
-
-
diff --git a/getting-started.md b/getting-started.md
index 2be24d5de..15ca09062 100644
--- a/getting-started.md
+++ b/getting-started.md
@@ -1,213 +1,61 @@
---
-nav-title: "Getting Started With NativeScript"
-title: "Getting Started With NativeScript"
-description: "NativeScript Documentation: Getting Started"
+nav-title: Getting Started
+title: Getting Started
+description: Learn the basics of of how NativeScript work, how to set up your system and how to create your first Hello World app.
position: 2
---
-# Getting Started With NativeScript
-NativeScript framework enable developers to use pure JavaScript language to build native mobile applications running on the major mobile platforms - Apple iOS, Google Android. The applications UI stack is built using native UI components and because of that no compromises with the User Experience of the applications are done.
-
-## How It Works
-The native script architectures can be generally explained with this diagram:
-
-
-* **Native OS** - At the bottom level is the native OS (Android, iOS and soon Windows).
-* **NativeScript runtime** runs the JavaScript code of your application. The runtime also provides a way to call all the native APIs of the platform the app is running on. This means that you have access to all the native capabilities of the platform.
-* **NativeScript Modules** are a set of platform-agnostic libraries that are build on top of the runtime. These modules are wrap the platform specific code, providing a common API.
-* **Application Code** - your application's code. Building an application on top of the NativeScript modules means that you will not have write platform-specific code. This should be the case most of the time. However, you still have the option to reach the native API trough the NativeSctipt runtime.
-
-## Requirements
-Currently NativeScript can run on the following platforms:
-
-* Android 4.2+ (equivalent to Android API level 17+)
-* iOS 7.1+
-
-For NativeScript development you have the following options:
-
-* Using the [NativeScript Command-Line Interface](https://github.com/NativeScript/nativescript-cli)
-with a IDE or text editor of your choice.
-* Using [AppBuilder](http://docs.telerik.com/platform/appbuilder/nativescript/index) where you have all the features of [Telerik Platform](http://www.telerik.com/platform) at your disposal.
-
-## Example
-In the following example we will start with a empty NativeScript project and build a simple hello word sample application.
-
-### Creating Blank Project
-Let's start by creating a blank project. As we mentioned you can either use the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli) or NativeScript Blank project template in AppBuilder(available for JavaScript or TypeScript).
-Form here on we will be working in the `App` folder inside the project.
-
-### Adding UI
-The project we just created has a single empty page. The UI of the page is defined declaratively in the 'main-page.xml' file. In the project there are also `main-page.js` (or `main-page.ts`) and `main-page.css` files that will hold applications code and styles for this page.
-
-Let's add some UI in `main-page.xml`:
-```XML
-
-
-
-
-
-
-
-
-```
-We have added a title label, a button and a message label that we are going to use in the next section.
-Here is the result:
-
-
-*Note: UI declaration is covered in depth in the [UI with XML](ui-with-xml.md) article.*
-
-### Creating a View-Model
-[MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel) pattern is the preferred approach when developing mobile applications with NativeScript. In this section we will create and bind a view-model to the page we already have.
-The view-model will hold simple counter which will be used to update a message each time the user taps on the button.
-
-Create a `view-models` folder and `main-view-model.js` ( or `main-view-model.ts` if you are using TypeScript) file in it:
-``` JavaScript
-var observable = require("data/observable");
-
-var counter = 42;
-var mainViewModel = new observable.Observable();
-mainViewModel.set("message", counter + " taps left");
-mainViewModel.tapAction = function () {
- counter--;
- if (counter <= 0) {
- mainViewModel.set("message", "Hoorraaay! You unlocked the NativeScript clicker achievement!");
- }
- else {
- mainViewModel.set("message", counter + " taps left");
- }
-};
-exports.mainViewModel = mainViewModel;
-```
-``` TypeScript
-import observable = require("data/observable");
-
-export class HelloWorldModel extends observable.Observable {
- private counter: number;
- constructor() {
- super();
-
- this.counter = 42;
- this.set("message", this.counter + " taps left");
- }
-
- public tapAction() {
- this.counter--;
- if (this.counter <= 0) {
- this.set("message", "Hoorraaay! You unlocked the NativeScript clicker achievement!");
- }
- else {
- this.set("message", this.counter + " taps left")
- }
- }
-}
-export var mainViewModel = new HelloWorldModel();
-```
-
-The view-model is an instance of `Observable` type so that the UI can receive notification whenever the `message` property is set.
-
-Now that we have the main-view-model we will set it as a `bindingContext` of the main-page. We will do this by handling the `pageLoaded` event:
-
-main-page.xml:
-```XML
-
- ...
-
-```
-
-main-page.js (or main-page.ts):
-```JavaScript
-var vmModule = require("./view-models/main-view-model");
-function pageLoaded(args) {
- var page = args.object;
- page.bindingContext = vmModule.mainViewModel;
-}
-exports.pageLoaded = pageLoaded;
-
-```
-```TypeScript
-import observable = require("data/observable");
-import pages = require("ui/page");
-import vmModule = require("./view-models/main-view-model");
-
-// Event handler for Page "loaded" event attached in main-page.xml
-export function pageLoaded(args: observable.EventData) {
- // Get the event sender
- var page = args.object;
- page.bindingContext = vmModule.mainViewModel;
-}
-```
-
-The last thing we need to do is to bind the UI elements in the XML to the view-model:
-main-page.xml
-``` XML
-
-
-
-
- {%raw%}
- {%endraw%}
-
-
-```
-
-Here is the result:
-
-
-We used data-binding for the `tap` event of the button and the `text` of the message-label.
-*Note: Binding is covered in depth in the [Data Binding](bindings.md) article.*
-
-### Adding Styles
-The final step in this tutorial will be to style the application. Styling in NativeScript is done with a subset of the CSS syntax.
-For each page, the NativeScript runtime will automatically load and apply the CSS file that has the same name as the XML file for the page.
-
-We will add the CSS in `main-page.css`:
-```CSS
-.title {
- font-size: 30;
- horizontal-align: center;
- margin:20;
-}
-
-button {
- font-size: 42;
- horizontal-align: center;
-}
-
-.message {
- font-size: 20;
- color: #284848;
- margin:10 40;
- horizontal-align: center;
-}
-```
-
-Finally - replace the inline styles in the `main-page.xml` with `cssClass` attribute, so that the CSS classes we defined are applied:
-```XML
-
-
-
-
- {%raw%}
- {%endraw%}
-
-
-```
-
-Here is the result:
-
-
-*Note: CSS Styling is covered in depth in the [Styling](styling.md) article.*
-
-## Next Steps
-Read the advanced topics below or refer to the [Api Reference](ApiReference/) to continue wit NativeScript development:
-
-* [Application](application-management.md)
-* [Navigation](navigation.md)
-* [Layouts](layouts.md)
-* [Styling](styling.md)
-* [Binding](bindings.md)
-* [UI with XML](ui-with-xml.md)
-* [UI Views](ui-views.md)
-* [UI Dialogs](ui-dialogs.md)
-* [Location](location.md)
-* [Modules](modules.md)
+# Getting Started with NativeScript
+
+Are you a hybrid app developer looking for a way to create truly native apps? Are you a native app developer wondering how to expand the scope of his apps to the other popular platforms? Or perhaps you are a web developer searching for a way to transfer your existing skills to the world of mobile development?
+
+NativeScript lets you develop truly native apps for iOS and Android from a single code base of JavaScript or TypeScript, XML and CSS. NativeScript takes your cross-platform code and translates it into the language that your target platform speaks.
+
+* [How Does It Work](#how-does-it-work)
+* [How To Get Started](#how-to-get-started)
+* [What's Next](#whats-next)
+
+## How Does It Work
+
+
+
+1. Write your **application code** once using the **NativeScript modules** and the **NativeScript runtimes**. The modules expose the native device and platform capabilities of Android and iOS in a consistent manner and let you access them via non-platform-specific code. The modules let you access some native capabilities via platform-specific JavaScript code.
+1. Customize your app with platform-specific assets such as icons and splash screens.
+1. Build your app. When you build your app, the **NativeScript runtime** translates your non-platform specific code to the native language of your target platform and the **NativeScript tools** use the native platform SDKs and tools to build a native application package.
+1. Run your cross-platform native apps in the native emulators, on real devices or distribute them to testers and end users.
+
+## How To Get Started
+
+NativeScript strips the complexity from native development both in terms of required coding skills and system setup.
+
+To get started, you need JavaScript or TypeScript knowledge to implement your business logic, XML and CSS knowledge to design your UI and an idea for a mobile app. You do not need Java or Objective-C knowledge.
+
+Once you have your app idea, you can get started in three simple steps.
+
+1. Choose your tools and **[set up your system](quick-start/setup/quick-setup.md)**.
+ * If you are familiar with the Cordova CLI or if you want to develop and build your apps locally and free of charge, you can set up your system with the [NativeScript CLI](https://github.com/NativeScript/nativescript-cli).
+ * If you prefer to concentrate on development and build your apps with a third-party build service, you can use the [Telerik AppBuilder tools](http://www.telerik.com/appbuilder).
+1. Go through the **Hello World** tutorial for your preferred tool set. This quick start development guide will introduce you to the basic architecture of a NativeScript app, data binding and how to implement user interfaces and styling.
+ * [Hello World from the NativeScript CLI](/quick-start/hello-world/hello-world-ns-cli.md)
+ * [Hello World from AppBuilder](/quick-start/hello-world/hello-world-appbuilder.md)
+1. Explore the **[modules overview](modules.md)** and the **[API Reference](ApiReference/application/README.md)**. The extensive overview and API reference will introduce to the how-tos of NativeScript development. You will learn how to tap into the native capabilities that you want to implement inside your app.
+
+## What's Next
+
+When you become familiar with the basics, you can tackle any of the more advanced tasks.
+
+* [Application Management](application-management.md)
+* [Application Architecture and Navigation](navigation.md)
+* [Add Alerts and Notifications](ui-dialogs.html)
+* [Handle Events](events.md)
+* [Implement Gestures](gestures.md)
+* [Work With Location Services](location.md)
+* [Bind Data](bindings.md)
+* [Design the UI](ui-with-xml.md)
+* [Style Your App](styling.md)
+
+If you need even more native capabilities than the NativeScript modules provide, you can expand your development with any of the following options.
+
+* [iOS-Specific JavaScript Development](runtimes/ios/README.md)
+* [Android-Specific JavaScript Development](runtimes/android/README.md)
+* [Development with Native Libraries](https://github.com/NativeScript/nativescript-cli)
\ No newline at end of file
diff --git a/img/companions/android-code.png b/img/companions/android-code.png
new file mode 100644
index 000000000..a258d8618
Binary files /dev/null and b/img/companions/android-code.png differ
diff --git a/img/companions/ios-code.png b/img/companions/ios-code.png
new file mode 100644
index 000000000..9152c5d8a
Binary files /dev/null and b/img/companions/ios-code.png differ
diff --git a/index.md b/index.md
index 5e31c2c5b..1f073e3d0 100644
--- a/index.md
+++ b/index.md
@@ -1,33 +1,31 @@
---
-nav-title: "Welcome to NativeScript"
-title: "Welcome to NativeScript"
-description: "NativeScript Documentation introduction"
+nav-title: Welcome to NativeScript
+title: Welcome to NativeScript
+description: Meet NativeScript - an open-source framework for the cross-platform development of truly native apps.
position: 1
---
# Welcome to NativeScript
-NativeScript enables developers to build native application for iOS and Android while sharing the application code across the platforms. NativeScript aims to provide the highest amount of code reuse across platforms while delivering outstanding user experience and performance. With NativeScript, you will save significant effort when building rich native apps across multiple platforms.
+Develop your business logic with **JavaScript** or **TypeScript**, design and style your user interface using **XML** and **CSS** and let NativeScript translate your single-source application code into truly native apps for iOS or Android.
-A NativeScript application consists of pure JavaScript code, executing within native android and ios runtimes. NativeScript includes purposely built JavaScript modules, i.e. a NativeScript UI framework to enable cross-platform code.
+You can develop for **Android 4.2 or later** and **iOS 7.1 or later**.
-Use the [NativeScript CLI](cli.md) to create an application.
+* [How To Get Started](getting-started.md)
+* [API Reference](ApiReference/application/README.md)
+* [Application Management](application-management.md)
+* [Application Architecture and Navigation](navigation.md)
+* [Handle Events](events.md)
+* [Implement Gestures](gestures.md)
+* [Work With Location Services](location.md)
+* [Bind Data](bindings.md)
+* [Design the UI](ui-with-xml.md)
+* [Apply Layouts](layouts.md)
+* [Add Alerts and Notifications](ui-dialogs.html)
+* [Style Your App](styling.md)
-Read the advanced topics below or refer to the [Api Reference](ApiReference/) to build a powerful NativeScript application:
+If you need even more native capabilities than the NativeScript modules provide, you can expand your development with any of the following options.
-- [Getting started with NativeScript](getting-started.md)
-- [Modules](modules.md)
-- [Application Management](application-management.md)
-- [Navigation](navigation.md)
-- [Layouts](layouts.md)
-- [UI with XML](ui-with-xml.md)
-- [Views](ui-views.md)
-- [Dialogs](ui-dialogs.md)
-- [Data Binding](bindings.md)
-- [Styling](styling.md)
-- [Events](events.md)
-- [Properties](properties.md)
-- [Gestures](gestures.md)
-- [Location](location.md)
-
-To develop even more advanced applications or your own modules, platform-specific JavaScript is available. See more in the [android](runtimes/android) and [ios](runtimes/ios) topics
+* [iOS-Specific JavaScript Development](runtimes/ios/README.md)
+* [Android-Specific JavaScript Development](runtimes/android/README.md)
+* [Development with Native Libraries](https://github.com/NativeScript/nativescript-cli)
\ No newline at end of file
diff --git a/layouts.md b/layouts.md
index 851bcaa51..83b6338e8 100644
--- a/layouts.md
+++ b/layouts.md
@@ -1,78 +1,119 @@
---
-nav-title: "NativeScript Layouts"
-title: "Layouts"
-description: "NativeScript Documentation: Layouts"
-position: 6
+nav-title: The NativeScript Layout System
+title: The NativeScript Layout System
+description: Learn the basic principles of designing and positioning the UI elements inside your apps.
+position: 7
---
-[View]: ./ApiReference/ui/core/view/View.md
-[Layout]: ./ApiReference/ui/layouts/layout/Layout.md
-[AbsoluteLayout]: ./ApiReference/ui/layouts/absolute-layout/HOW-TO.md
-[DockLayout]: ./ApiReference/ui/layouts/dock-layout/HOW-TO.md
-[GridLayout]: ./ApiReference/ui/layouts/grid-layout/HOW-TO.md
-[StackLayout]: ./ApiReference/ui/layouts/stack-layout/HOW-TO.md
-[WrapLayout]: ./ApiReference/ui/layouts/wrap-layout/HOW-TO.md
+# The NativeScript Layout System
+
+NativeScript provides a recursive layout system which sizes and positions [views][views] on the screen.
-# Layout System
+* [Layouting](#layouting)
+ * [Measure Pass](#measure-pass)
+ * [Layout Pass](#layout-pass)
+ * [Alignment](#alignment)
+ * [Margins](#margins)
+* [Layouts](#layouts)
+ * [Layout Paddings](#layout-paddings)
+ * [Layout Containers](#layout-containers)
+
+## Layouting
-NativeScript framework comes with its own recursive layout system which size and position views on the screen. Layout is the process of measure and position the child views of a [Layout][Layout] container. Layout process is intensive and depends on the count of the children and the complexity of the layout container. The simple layout container as [AbsoluteLayout][AbsoluteLayout] can have better performance than more complex [Layout][Layout], such as [GridLayout][GridLayout].
-Layout system completes in two passes - measure pass and layout pass. Every [Layout][Layout] provides its own `onMeasure()` and `onLayout()` methods to achieve its own specific layout.
-In the measure pass each [View][View] is measured to get its desired size. Measure pass evaluates width, height, minWidth, minHeight, visibility and margins properties.
-In the second pass (layout pass) each [View][View] is placed in specific layout slot which is determined by view desired size, margins, horizontal and vertical alignments.
+Layouting is the process of measuring and positioning the child views of a [Layout][Layout] container. Layouting is an intensive process whose speed and performance depend on the count of the children and the complexity of the layout container. For example, a simple layout container such as [AbsoluteLayout][AbsoluteLayout] might perform better than a more complex layout container, such as [GridLayout][GridLayout].
-All [View][View] classes expose several properties that affects the layout:
+Layouting completes in two passes - a measure pass and a layout pass. Every layout container provides its own `onMeasure()` and `onLayout()` methods to achieve its own specific layouting.
+
+### Measure Pass
+
+During the measure pass, each [View][View] is measured to retrieve its desired size. The measure pass evaluates the following properties:
+
+* width
+* height
+* minWidth
+* minHeight
+* visibility
+* marginTop
+* marginRight
+* marginBotton
+* marginLeft
+
+### Layout Pass
+
+During the layout pass, each [View][View] is placed in a specific layout slot. This slot is determined by the desired size of the view (retrieved from the measure pass) and the following properties:
-- minWidth
-- minHeight
-- width
-- height
- marginTop
- marginRight
- marginBottom
- marginLeft
- horizontalAlignment
- verticalAlignment
-- visibility
-## Alignment Properties
+### Alignment
-Horizontal and vertical alignments takes effect only when element is given more size than it needs.
+Layouting applies horizontal and vertical alignment only when an element is allocated more size than it needs.
-The following table shows each value of `horizontalAlignment`:
+The following table shows the valid values of `horizontalAlignment`.
| Member | Description |
| ------- | ------------- |
-| left | View is aligned to the left of the parent element's layout slot.|
-| center | View is aligned to the center of the parent element's layout slot. |
-| right | View is aligned to the right of the parent element's layout slot. |
-| stretch | View is stretched to fill the parent element's layout slot. Explicit `width` take precedence. |
+| left | The view is aligned to the left of the layout slot of the parent element. |
+| center | The view is aligned to the center of the layout slot of the parent element. |
+| right | The view is aligned to the right of the layout slot of the parent element. |
+| stretch | The view is stretched to fill the layout slot of the parent element. `width` takes precedence, if set. |
-The following table shows each value of `verticalAlignment`:
+The following table shows the valid values of `verticalAlignment`.
| Member | Description |
| ------- | ----------- |
-| top | View is aligned to the top of the parent element's layout slot. |
-| center | View is aligned to the center of the parent element's layout slot. |
-| bottom | View is aligned to the bottom of the parent element's layout slot. |
-| stretch | View is stretched to fill the parent element's layout slot. Explicit `height` take precedence. |
+| top | The view is aligned to the top of the layout slot of the parent element. |
+| center | The view is aligned to the center of the layout slot of the parent element. |
+| bottom | The view is aligned to the bottom of the layout slot of the parent element. |
+| stretch | The view is stretched to fill the layout slot of the parent element. `height` takes precedence, if set. |
+
+### Margins
+
+The four margin properties (`marginTop`, `marginRight`, `marginBottom` and `marginLeft`) describe the distance between a view and its parent.
-## Margins Property
-There are four margin properties - `marginTop`, `marginRight`, `marginBottom` and `marginLeft`. They describe the distance between a view and its parent. When set through XML values can be uniformed meaning that value will be applied on all four side of the view, two values which is applied to (top, right) and (bottom, left) in that order or it could take the form of four distinct values, each value describing a distinct margin to apply to top, right, bottom and left (in that order).
+When you set margins through XML, you can choose between the following approaches.
-# Layout
-Layout is the base class for all views that provide layout. Inherited [Layout][Layout] classes are used to position elements. They support the base properties of [View][View] such as width, height, minWidth, alignments, etc. In addition layout class expose four padding properties which affects the size of the layout. Derived classes expose additional properties that enables most user interface scenarios.
+* **Set one value**: Provide a single value which will be applied on all sides of the view.
+* **Set two values**: Provide two values. The first value is applied to the top and the right side, the second value is applied to the bottom and the left side (in that order).
+* **Set four values**: Provide four values for each margin. The first value is applied to the top, the second value is applied to the right, the third value is applied to the bottom and the fourth value is applied to the left side (in that order).
-## Paddings Property
-There are four padding properties - `paddingTop`, `paddingRight`, `paddingBottom` and `paddingLeft`. They describe the distance between the layout container and its children. When set through XML values can be uniformed meaning that value will be applied on all four side of the view, two values which is applied to (top, right) and (bottom, left) in that order or it could take the form of four distinct values, each value describing a distinct padding to apply to top, right, bottom and left (in that order).
+## Layouts
-## Layout Containers
-NativeScript provides few predefined layouts and allows for defining custom layouts.
-The predefined layouts are:
+`Layout` is the base class for all views that provide positioning of child elements.
+
+You can use inherited [Layout][Layout] classes to position elements. They accept the base properties of [View][View] such as `width`, `height`, `minWidth`, alignments and others. In addition, `layout` exposes four padding properties which affect the size of the layout. Derived classes expose additional properties that enable most user interface scenarios.
+
+### Layout Paddings
+
+The four padding properties (`paddingTop`, `paddingRight`, `paddingBottom` and `paddingLeft`) describe the distance between the layout container and its children.
+
+When set paddings through XML, you can choose between the following approaches.
+
+* **Set one value**: Provide a single value which will be applied on all sides of the view.
+* **Set two values**: Provide two values. The first value is applied to the top and the right side, the second value is applied to the bottom and the left side (in that order).
+* **Set four values**: Provide four values for each padding. The first value is applied to the top, the second value is applied to the right, the third value is applied to the bottom and the fourth value is applied to the left side (in that order).
+
+### Predefined Layouts
+
+The following table shows predefined layouts that NativeScript provides.
| Layouts | Description | Screenshot |
| -------- | ------------ | ---------- |
-| [AbsoluteLayout][AbsoluteLayout] | Layout that lets you specify exact locations (left/top coordinates) of its children. | |
-| [DockLayout][DockLayout] | Layout that arranges its children at its outer edges, and allows its last child to take up the remaining space. | |
-| [GridLayout][GridLayout] | Defines a rectangular layout area that consists of columns and rows. | |
-| [StackLayout][StackLayout] | Layout that arranges its children horizontally or vertically. The direction can be set by orientation property. | |
-| [WrapLayout][WrapLayout] | Position children in rows or columns depending on orientation property until space is filled and then wraps them on new row or column. | |
\ No newline at end of file
+| [AbsoluteLayout][AbsoluteLayout] | This layout lets you set exact locations (left/top coordinates) for its children. | |
+| [DockLayout][DockLayout] | This layout arranges its children at its outer edges and allows its last child to take up the remaining space. | |
+| [GridLayout][GridLayout] | This layout defines a rectangular layout area that consists of columns and rows. | |
+| [StackLayout][StackLayout] | This layout arranges its children horizontally or vertically. The direction is set with the orientation property. | |
+| [WrapLayout][WrapLayout] | This layout positions its children in rows or columns, based on the orientation property, until the space is filled and then wraps them on a new row or column. | |
+
+[views]: ui-views.md
+[View]: ./ApiReference/ui/core/view/View.md
+[Layout]: ./ApiReference/ui/layouts/layout/Layout.md
+[AbsoluteLayout]: ./ApiReference/ui/layouts/absolute-layout/HOW-TO.md
+[DockLayout]: ./ApiReference/ui/layouts/dock-layout/HOW-TO.md
+[GridLayout]: ./ApiReference/ui/layouts/grid-layout/HOW-TO.md
+[StackLayout]: ./ApiReference/ui/layouts/stack-layout/HOW-TO.md
+[WrapLayout]: ./ApiReference/ui/layouts/wrap-layout/HOW-TO.md
\ No newline at end of file
diff --git a/modules.md b/modules.md
index 36d6ecc2f..f6dc6f351 100644
--- a/modules.md
+++ b/modules.md
@@ -1,67 +1,89 @@
---
-nav-title: "Modules"
-title: "Modules"
-description: "Moduels"
-position: 3
-
+nav-title: The NativeScript Modules
+title: The NativeScript Modules
+description: You can access the native device and platform capabilities of your target platform with the help of the NativeScript modules.
+position: 2
---
-# Overview
-NativeScript uses a modular design pattern. All functionality that NativeScript offers resides in different modules. Modules divide code into clusters that, by a certain criterion, belong together. For example, UI views such as buttons and labels each reside in their own module separating them from the rest of the code. In order to use something that a module contains, one needs to **require** the module in his own code.
-
-# Core Modules
-+ [application](./ApiReference/application/HOW-TO.md) - contains the application abstraction with all related methods.
-+ [console](./ApiReference/console/HOW-TO.md) - allows printing messages to the device's console.
-+ [local-settings](./ApiReference/local-settings/HOW-TO.md) - allows you to save and restore any kind of information related to your application.
-+ [color](./ApiReference/color/HOW-TO.md) - allows creating colors to be used when styling the UI.
-+ [http](./ApiReference/http/HOW-TO.md) - allows you to send web requests and receive the responses.
-+ [image-source](./ApiReference/image-source/HOW-TO.md) - contains the ImageSource class, which encapsulates the common abstraction behind a platform specific object (typically a Bitmap) that is used as a source for images.
-+ [timer](./ApiReference/timer/HOW-TO.md) - allows you to create, start, stop and react to timers.
-+ [trace](./ApiReference/trace/HOW-TO.md) - allows you to trace and print specific information based on categories.
-
-# Device Modules
-+ [camera](./ApiReference/camera/HOW-TO.md) - allows you to take pictrues with the device's camera.
-+ [location](./ApiReference/location/HOW-TO.md) - allows you to use the geolocation of the device.
-+ [platform](./ApiReference/platform/HOW-TO.md) - contains all kinds of information about the device, its operating system and software.
-+ [fps-meter](./ApiReference/fps-meter/HOW-TO.md) - allows you to capture the frames-per-second metrics of your application.
-+ [file-system](./ApiReference/file-system/HOW-TO.md) - provides high-level abstractions for file system entities such as files, folders, known folders, paths, separators, etc.
-
-# Data Modules
-+ [data/observable](./ApiReference/data/observable/HOW-TO.md) - contains the Observable class, which represents an observable object, or "data" in the model-view paradigm.
-+ [data/observable-array](./ApiReference/data/observable-array/HOW-TO.md) - contains the ObservableArray class, which is capable of detecting and responding to changes of a collection of objects.
-+ [data/virtual-array](./ApiReference/data/virtual-array/HOW-TO.md) - contains the VirtualArray class, which is an advanced array like class that helps loading items on demand.
-
-# Core UI Modules
-+ [ui/core/dependency-observable](./ApiReference/ui/core/dependency-observable/HOW-TO.md) - contains the DependencyObservable class, which represents an extended Observable object that uses Property instances for value backing mechanism.
-+ [text/formatted-string](./ApiReference/text/formatted-string/HOW-TO.md) - contains the FormattedString and Span classes, which are used to create a formatted (rich text) strings.
-
-# Layouts
-+ [ui/layouts/stack-layout](./ApiReference/ui/stack-layout/HOW-TO.md) - contains the StackLayout class, which is used to arrange children into single line.
-+ [ui/layouts/grid-layout](./ApiReference/ui/grid-layout/HOW-TO.md) - contains the GridLayout class, which represents a flexible grid area that consists of columns and rows.
-+ [ui/layouts/absolute-layout](./ApiReference/ui/absolute-layout/HOW-TO.md) - contains the AbsoluteLayout class, which is used to place child elements at arbitrary positions or to draw children in multiple layers.
-+ [ui/layouts/wrap-layout](./ApiReference/ui/wrap-layout/HOW-TO.md) - contains the WrapLayout class, which is used to place child elements at sequential positions from left to the right and then "wrap" the lines of children from top to the bottom.
-
-# Widgets
-+ [ui/page](./ApiReference/ui/page/HOW-TO.md) - contains the Page class, which represents a logical unit for navigation inside a Frame.
-+ [ui/frame](./ApiReference/ui/frame/HOW-TO.md) - contains the Frame class, which represents the logical View unit that is responsible for navigation within an application.
-+ [ui/activity-indicator](./ApiReference/ui/activity-indicator/HOW-TO.md) - contains the ActivityIndicator class, which represents a widget for showing that something is currently busy.
-+ [ui/button](./ApiReference/ui/button/HOW-TO.md) - contains the Button class, which represents a standard button widget.
-+ [ui/label](./ApiReference/ui/label/HOW-TO.md) - contains the Label class, which represents a standard label widget.
-+ [ui/text-field](./ApiReference/ui/text-field/HOW-TO.md) - contains the TextField class, which represents an editable single-line box.
-+ [ui/text-view](./ApiReference/ui/text-view/HOW-TO.md) - contains the TextView class, which represents an editable multi-line line box.
-+ [ui/list-view](./ApiReference/ui/list-view/HOW-TO.md) - contains the ListView class, which represents a standard list view widget.
-+ [ui/image](./ApiReference/ui/image/HOW-TO.md) - contains the Image class, which represents an image widget.
-+ [ui/progress](./ApiReference/ui/progress/HOW-TO.md) - contains the Progress class, which represents a component capable of showing progress.
-+ [ui/scroll-view](./ApiReference/ui/scroll-view/HOW-TO.md) - contains the ScrollView class, which represents a scrollable area that can have content that is larger than its bounds.
-+ [ui/search-bar](./ApiReference/ui/search-bar/HOW-TO.md) - contains the SearchBar class, which represents a standard search bar component.
-+ [ui/slider](./ApiReference/ui/slider/HOW-TO.md) - contains the Slider class, which represents a standard slider component.
-+ [ui/switch](./ApiReference/ui/switch/HOW-TO.md) - contains the Switch class, which represents a standard switch component.
-+ [ui/tab-view](./ApiReference/ui/tab-view/HOW-TO.md) - contains the TabView class, which represents a standard content component with tabs.
-+ [ui/web-view](./ApiReference/ui/web-view/HOW-TO.md) - contains the WebView class, which represents a standard browser widget.
-
-# Other Modules
-+ [ui/border](./ApiReference/ui/border/HOW-TO.md) - contains the Border class, which allows drawing borders around other elements.
-+ [ui/styling](./ApiReference/ui/styling/HOW-TO.md) - contains the Style class, which is resposndible for the visual appearance of elements.
-+ [ui/gestures](./ApiReference/ui/gestures/HOW-TO.md) - contains the GesturesObserver class, which lets you observe and respond to user gestures
-+ [ui/image-cache](./ApiReference/ui/image-cache/HOW-TO.md) - contains the Cache class, which handles image download requests and caches the already downloaded images.
-+ [ui/dialogs](./ApiReference/ui/dialogs/HOW-TO.md) - allows you to show different dialogs such as alerts, prompts, etc.
-+ [xml](./ApiReference/xml/HOW-TO.md) - contains the XmlParser class, which is a SAX parser using the easysax implementation
+
+# The NativeScript Modules
+
+To let you access the native device and platform capabilities of your target platform, NativeScript uses a modular design pattern. All device, platform or user interface functionalities reside in separate modules. To access the functionality provided by a module, you need to **require** the module.
+
+In your project, the files for each module reside in a dedicated subdirectory in the `tns_modules` directory. Each default module comes along with a `package.json` file which declares how the module should be called within your call and which file contains its respective code.
+
+For example:
+
+```JSON
+{ "name" : "button",
+ "main" : "button.js" }
+```
+
+* [Core Modules](#core-modules)
+* [Device Functionality Modules](#device-functionality-modules)
+* [Data Modules](#data-modules)
+* [User Interface Modules](#user-interface-modules)
+ * [Layouts](#layouts)
+ * [Widgets](#widgets)
+ * [Other UI Modules](#other-ui-modules)
+
+### Core Modules
+
++ [application](./ApiReference/application/HOW-TO.md): Provides the application abstraction with all related methods.
++ [console](./ApiReference/console/HOW-TO.md): Lets you print messages to the device console.
++ [local-settings](./ApiReference/local-settings/HOW-TO.md): Lets you save and restore any information related to your application.
++ [http](./ApiReference/http/HOW-TO.md): Lets you send web requests and receive the responses.
++ [image-source](./ApiReference/image-source/HOW-TO.md): Provides the `ImageSource` class which encapsulates the common abstraction behind a platform-specific object that is used as a source for images (typically a Bitmap).
++ [timer](./ApiReference/timer/HOW-TO.md): Lets you to create, start, stop and react to timers.
++ [trace](./ApiReference/trace/HOW-TO.md): Lets you trace and print specific information based on categories.
++ [ui/image-cache](./ApiReference/ui/image-cache/HOW-TO.md): Provides the `Cache` class which handles image download requests and caches the already downloaded images.
+
+### Device Functionality Modules
+
++ [camera](./ApiReference/camera/HOW-TO.md): Lets you take pictures with the device camera.
++ [location](./ApiReference/location/HOW-TO.md): Lets you use the geolocation sensors of the device.
++ [platform](./ApiReference/platform/HOW-TO.md): Provides information about the device, its operating system and software.
++ [fps-meter](./ApiReference/fps-meter/HOW-TO.md): Lets you capture the frames-per-second metrics of your application.
++ [file-system](./ApiReference/file-system/HOW-TO.md): Lets you work with the device file system. Provides high-level abstractions for file system entities such as files, folders, known folders, paths, separators, etc.
++ [ui/gestures](./ApiReference/ui/gestures/HOW-TO.md): Provides the `GesturesObserver` class which lets you observe and respond to user gestures.
+
+### Data Modules
+
++ [data/observable](./ApiReference/data/observable/HOW-TO.md): Provides the `Observable` class which represents an observable object or data in the MVVM paradigm.
++ [data/observable-array](./ApiReference/data/observable-array/HOW-TO.md): Provides the `ObservableArray` class which detects and responds to changes in a collection of objects.
++ [data/virtual-array](./ApiReference/data/virtual-array/HOW-TO.md): Provides the `VirtualArray` class which is an advanced array-like class that helps loading items on demand.
+
+### User Interface Modules
+
++ [ui/core/dependency-observable](./ApiReference/ui/core/dependency-observable/HOW-TO.md): Provides the `DependencyObservable` class which represents an extended `Observable` object that uses Property instances for value backing mechanism.
++ [ui/frame](./ApiReference/ui/frame/HOW-TO.md): Provides the `Frame` class which represents the logical `View` unit that is responsible for navigation within an application.
++ [ui/page](./ApiReference/ui/page/HOW-TO.md): Provides the `Page` class which represents a logical unit for navigation inside a `Frame`. NativeScript apps consist of pages.
++ [color](./ApiReference/color/HOW-TO.md): Lets you create colors which you can use when you style the UI.
++ [text/formatted-string](./ApiReference/text/formatted-string/HOW-TO.md): Provides the `FormattedString` and `Span` classes which you can use to create rich text formatted strings.
++ [xml](./ApiReference/xml/HOW-TO.md): Provides the `XmlParser` class which is a SAX parser using the easysax implementation.
++ [ui/styling](./ApiReference/ui/styling/HOW-TO.md): Provides the `Style` class which is responsible for the visual appearance of elements.
++ [ui/border](./ApiReference/ui/border/HOW-TO.md): Provides the `Border` class which lets you draw borders around other elements.
+
+#### Layouts
+
++ [ui/layouts/stack-layout](./ApiReference/ui/stack-layout/HOW-TO.md): Provides the `StackLayout` class which lets you arrange the children of the layout in single line.
++ [ui/layouts/grid-layout](./ApiReference/ui/grid-layout/HOW-TO.md): Provides the `GridLayout` class which lets you arrange the children of the layout in a flexible grid area with columns and rows.
++ [ui/layouts/absolute-layout](./ApiReference/ui/absolute-layout/HOW-TO.md): Provides the `AbsoluteLayout` class which lets you arrange the children of the layout at arbitrary positions or draw them in multiple layers.
++ [ui/layouts/wrap-layout](./ApiReference/ui/wrap-layout/HOW-TO.md): Provides the `WrapLayout` class which lets you arrange the children of the layout at sequential positions from left to right and then wrap the lines of children from top to bottom.
+
+#### Widgets
+
++ [ui/activity-indicator](./ApiReference/ui/activity-indicator/HOW-TO.md): Provides the `ActivityIndicator` class which represents a widget for showing that a service is currently busy.
++ [ui/button](./ApiReference/ui/button/HOW-TO.md): Provides the `Button` class which is a standard button widget.
++ [ui/label](./ApiReference/ui/label/HOW-TO.md): Provides the `Label` class which is a standard label widget.
++ [ui/text-field](./ApiReference/ui/text-field/HOW-TO.md): Provides the `TextField` class which represents an editable single-line box.
++ [ui/text-view](./ApiReference/ui/text-view/HOW-TO.md): Provides the `TextView` class which represents an editable multi-line line box.
++ [ui/list-view](./ApiReference/ui/list-view/HOW-TO.md): Provides the `ListView` class which represents a standard list view widget.
++ [ui/image](./ApiReference/ui/image/HOW-TO.md): Provides the `Image` class, which represents an image widget.
++ [ui/progress](./ApiReference/ui/progress/HOW-TO.md): Provides the `Progress` class which represents a progress or loading indicator.
++ [ui/scroll-view](./ApiReference/ui/scroll-view/HOW-TO.md): Provides the `ScrollView` class which represents a scrollable area that can show content which is larger than the visible area.
++ [ui/search-bar](./ApiReference/ui/search-bar/HOW-TO.md): Provides the `SearchBar` class which represents a standard search bar component.
++ [ui/slider](./ApiReference/ui/slider/HOW-TO.md): Provides the `Slider` class which represents a standard slider component.
++ [ui/switch](./ApiReference/ui/switch/HOW-TO.md): Provides the `Switch` class which represents a standard switch component.
++ [ui/tab-view](./ApiReference/ui/tab-view/HOW-TO.md): Provides the `TabView` class which represents a standard content component with tabs.
++ [ui/web-view](./ApiReference/ui/web-view/HOW-TO.md): Provides the `WebView` class which represents a standard browser widget.
++ [ui/dialogs](./ApiReference/ui/dialogs/HOW-TO.md): Lets you show various dialogs such as alerts, prompts, confirmations and others.
\ No newline at end of file
diff --git a/navigation.md b/navigation.md
index 432557829..22aafa731 100644
--- a/navigation.md
+++ b/navigation.md
@@ -1,32 +1,53 @@
---
-nav-title: "Navigation"
-title: "Navigation"
-description: "Navigation"
+nav-title: Application Architecture and Navigation
+title: Application Architecture and Navigation
+description: Learn the basic application structure of NativeScript apps and how to navigate inside your app.
position: 5
-
---
-# Overview
-Each NativeScript application is built upon the concept of pages (represented by the **Page** class). Pages are the different screens that your application offers. Each page has a **content** property which holds the root visual element of the page UI. Navigating between different pages is done with methods of the **Frame** class. The Frame class represents the logical unit that is responsible for navigation between different pages, i.e. going from one page to another, keeping a history stack for going back and so on.
-#Main Module
-Each application must have a single entry point, that is, the first screen that the user will see after starting the app. Specifying the main module of an application is done through the **mainModule** member of the application module:
-``` JavaScript
-var application = require("application");
-application.mainModule = "app/main-page";
-application.start();
-```
-``` TypeScript
-import application = require("application");
-application.mainModule = "app/main-page";
-application.start();
-```
-#Pages
-Pages can be defined in two different ways. If you decide to separate the user interface from the logic, you can create an XML file containing the layout of your page. When you specify **application.mainModule**, NativeScript will first look for an XML file with that name. If it finds such a file, it will parse it and create the UI described in it:
+
+# Application Architecture and Navigation
+
+NativeScript apps consist of pages which represent the separate application screens. Pages are instances of the [`page`](ApiReference/ui/page/Page.md) class of the [`Page`](ApiReference/ui/page/README.md) module. To navigate between pages, you can use the methods of the [`Frame`](ApiReference/ui/frame/Frame.md) class of the [`Frame`](ApiReference/ui/frame/README.md) sub-module of the UI module.
+
+> **TIP:** Instead of multiple pages, you can have a single page with a [tab view](ApiReference/ui/tab-view/README.md) and different UIs for each tab.
+
+* [Page Management](#page-management)
+ * [Define Page](#define-page)
+ * [Set Home Page](#set-home-page)
+* [Navigation](#navigation)
+ * [Set Topmost Frame](#topmost-frame)
+ * [Navigate by Page Name](#navigate-by-page-name)
+ * [Navigate with Factory Function](#navigate-with-factory-function)
+ * [Navigate and Pass Context](#navigate-and-pass-context)
+ * [Navigate Back](#navigate-back)
+* [Alternative App Architecture](#alternative-app-architecture)
+
+## Page Management
+
+### Define Page
+
+Pages represent the separate screens of your application. Each page is an instance of the [`page`](ApiReference/ui/page/Page.md) class of the [`Page`](ApiReference/ui/page/README.md) module. Each class instance inherits the [`content`](ApiReference/ui/content-view/ContentView.md) property which holds the root visual element of the UI.
+
+NativeScript provides three approaches to instantiating your pages.
+
+**Create the UI separately from the business logic**
+
+You can create the pages for your user interface separately from your business logic.
+
+To apply this approach, you need to create a separate `XML` file for each page to hold the layout of the page.
+
``` XML
```
-If you need to have additional logic (event handlers for example), you can also create a code-behind file with the same name as the XML file. After the XML file is parsed, NativeScript will look for this optional code-behind file:
+
+**Execute additional business logic on page load**
+
+NativeScript can automatically execute business code logic on page load.
+
+To apply this approach, you need to have a separate `XML` file for your page and a `JS` or a `TS` file which holds the business logic. The names of the `XML` and the `JS` or `TS` file must match.
+
``` JavaScript
function onPageLoaded(args) {
console.log("Page Loaded");
@@ -40,7 +61,12 @@ export function onPageLoaded(args: observableModule.EventData) {
console.log("Page Loaded");
}
```
-Alternatively, you can create the page entirely in the code-behind file:
+**Create page when executing business logic**
+
+You can create the page inside your business logic.
+
+To apply this approach, you need to create a function named `createPage` which will return an instance of your page. NativeScript considers `createPage` a factory function.
+
``` JavaScript
var pagesModule = require("ui/page");
var labelModule = require("ui/label");
@@ -65,9 +91,34 @@ export function createPage() {
return page;
}
```
-If creating the page entirely in code-behind, it is important that you create a function named exactly **createPage** which returns an instance of the page you created. By convention, NativeScript will look for a factory function called **createPage**.
-#Topmost Frame
-To perform navigation, you will need a reference to the topmost frame of the application:
+
+### Set Home Page
+
+Each application must have a single entry point - the home page.
+
+To set the home page for your app, you need to use the `mainModule` member of the [`Application`](ApiReference/application/README.md) module. When you define `application.mainModule`, NativeScript looks for an XML file with the specified name, parses it and draws the UI described in the file. Afterwards, if NativeScript finds a `JS` or a `TS` file with the same name, it executes the business logic in the file.
+
+``` JavaScript
+var application = require("application");
+application.mainModule = "app/main-page";
+application.start();
+```
+``` TypeScript
+import application = require("application");
+application.mainModule = "app/main-page";
+application.start();
+```
+
+## Navigation
+
+The [`Frame`](ApiReference/ui/frame/Frame.md) class represents the logical unit that is responsible for navigation between different pages. Typically, each app has one frame at the root level - the topmost frame.
+
+To navigate between pages, you can use the [`navigate`](ApiReference/ui/frame/README.md) method of the topmost frame instance.
+
+### Set Topmost Frame
+
+The topmost frame is the frame at the root level. Before you can perform any navigation in your app, you need to set the topmost frame.
+
``` JavaScript
var frameModule = require("ui/frame");
var topmost = frameModule.topmost();
@@ -76,16 +127,22 @@ var topmost = frameModule.topmost();
import frameModule = require("ui/frame");
var topmost = frameModule.topmost();
```
-#Navigating to a Module
-You can navigate to another page by using the **navigate** method of the topmost frame instance. The navigate method has different overloads which let you navigate to a page module by specifying its name (just like you specify application.mainModule):
+
+### Navigate by Page Name
+
+You can specify the page to which you want to navigate by its file name.
+
``` JavaScript
topmost.navigate("app/details-page");
```
``` TypeScript
topmost.navigate("app/details-page");
```
-#Navigating with a Factory Function
-Another overload which you can use to navigate is the one which accepts a factory function returning a page instance:
+
+### Navigate with Factory Function
+
+You can specify the page to which you want to navigate by a factory function which returns the page instance.
+
``` JavaScript
var factoryFunc = function () {
var label = new labelModule.Label();
@@ -107,8 +164,11 @@ var factoryFunc = function () {
};
topmost.navigate(factoryFunc);
```
-#Navigating with NavigationEntry
-In case you want to pass some state information, i.e. some kind of context, to the page you are navigating to, you should use the overload which accepts a NavigationEntry object. You can specify the page you want to navigate to by using either the **moduleName** string property or the *create* factory function property of the NavigationEntry class. You can also specify whether you want the transition to be animated. The overload that accepts a NavigationEntry is the one that gives you the finest control over navigation. In fact, all other overloads will ultimately call this one after constructing the appropriate NavigationEntry.
+
+### Navigate and Pass Context
+
+When you navigate to another page, you can pass context to the page with a [`NavigationEntry`](ApiReference/ui/frame/NavigationEntry.md) object. This approach provides finer control over navigation compared to other navigation approaches. For example, with `NavigationEntry` you can also animate the navigation.
+
``` JavaScript
var navigationEntry = {
moduleName: "app/details-page",
@@ -125,8 +185,15 @@ var navigationEntry = {
};
topmost.navigate(navigationEntry);
```
-#Navigating to another page and passing context
-Sometimes, the page being navigated to would have to receive information about the context in which this navigation happened. The best example would be a master-details scenario where there are two pages -- the main page containing a list of some entities and a details page which provides details about a particular entity. In this case, when navigating to the details page it is mandatory to transfer some primary key or ID information about the entity the details page should show. This is done with the help of the **context** property of a NavigationEntry:
+
+After you pass the context, you can implement additional business logic with the `onNavigatedTo` callback.
+
+#### Example
+
+In this example, this master-details app consists of two pages. The main page contains a list of entities. The details page shows information about the currently selected entity.
+
+When you navigate to the details page, you transfer a primary key or ID information about the selected entity.
+
``` JavaScript
function listViewItemTap(args) {
// Navigate to the details page with context set to the data item for specified index
@@ -145,7 +212,9 @@ export function listViewItemTap(args: listView.ItemEventData) {
});
}
```
-Once you pass this information, the best place to retrieve it and act accordingly is in the **onNavigatedTo** callback of the details page:
+
+With the **onNavigatedTo** callback, you show the details for the entity.
+
``` JavaScript
function pageNavigatedTo(args) {
var page = args.object;
@@ -160,13 +229,14 @@ export function pageNavigatedTo(args: observable.EventData) {
page.bindingContext = page.navigationContext;
}
```
-#Navigating Back
-The topmost frame keeps track of the pages the user has visited in a navigation stack. To go back to a previous page you should use the **goBackMethod** of the topmost frame instance:
+
+### Navigate Back
+
+The topmost frame tracks the pages the user has visited in a navigation stack. To go back to a previous page, you need to use the **goBackMethod** of the topmost frame instance.
+
``` JavaScript
topmost.goBack();
```
``` TypeScript
topmost.goBack();
-```
-#Alternatives
-Alternatively, if you do not want to have different pages and navigate between them, you can have a single page with a TabView. You can define a different UI for each tab and when the user selects a certain tab he will be presented with this UI.
+```
\ No newline at end of file
diff --git a/quick-start/hello-world/hello-world-appbuilder.md b/quick-start/hello-world/hello-world-appbuilder.md
new file mode 100644
index 000000000..e52f4650f
--- /dev/null
+++ b/quick-start/hello-world/hello-world-appbuilder.md
@@ -0,0 +1,325 @@
+---
+nav-title: Hello World from AppBuilder
+title: Hello World from AppBuilder
+description: Create your first NativeScript Hello World app in a few minutes with AppBuilder. See it in action on your device.
+position: 1
+---
+
+# Hello World from AppBuilder
+
+Have you set up your system to develop NativeScript apps with the AppBuilder tool set?
+
+If the answer is yes, you are ready to create your first Hello World app with NativeScript. Your first Hello World will be a simple counter. You will learn:
+
+* [How To Create a Blank Project](#crate-blank-project)
+* [How To Add User Interface](#add-user-interface)
+* [How To Create a View Model](#create-a-view-model)
+* [How To Style Your App](#style-your-app)
+
+> If your system is not already configured, you can check the [Set Up Your System](./quick-setup/setup/quick-setup.md) guide, pick your tools and configure them.
+
+## Create Blank Project
+
+The first step to any development is to create your first project.
+
+### 1. Run your AppBuilder IDE option and log in.
+
+IDE Option | Operation
+-----------|----------
+In-browser client | When prompted, fill in the form.
+Windows client | When prompted, fill in the form.
+Extension for Visual Studio | In the menu bar, select **AppBuilder** → **Log in** and fill in the form.
+CLI | Run `appbuilder login`, fill in the form in the browser window, close it and return to the command prompt.
+
+### 2. Create your project.
+
+You can choose between creating a blank JavaScript or TypeScript project.
+
+IDE Option | Operation
+-----------|----------
+In-browser client |
Click Create app. Apps are the top-level containers for development with the Telerik Platform. In an app, you can host multiple projects that complement each other to create a fully-fledged mobile solution.
Select Start from a blank app, provide name for the app and click Create app.
Click Create project and select AppBuilder Native project.
Verify that Choose project template is selected, select NativeScript Blank (JavaScript) or NativeScript Blank (TypeScript), provide name for the project and click Create project.
+Windows client |
Click New and select Native.
Select NativeScript Blank (JavaScript) or NativeScript Blank (TypeScript), provide name for the project and click Create.
+Extension for Visual Studio |
In the menu bar, select File → New → Project.
In the sidebar, select Templates → Telerik → AppBuilder .
In the list of templates, select NativeScript Blank (JavaScript) or NativeScript Blank (TypeScript), provide a name for your project and click OK.
+CLI | Run `appbuilder create native HelloWorld --template Blank` or `appbuilder create native HelloWorld --template TypeScript.Blank`. Run `cd HelloWorld`
+
+### 3. Explore the newly created project.
+
+Expand your project structure in your AppBuilder IDE or run a quick directory listing command.
+
+Your first project has the following structure in the in-browser client, the Windows client and the extension for Visual Studio.
+
+```
+Solution 'Hello World'/
+|-- Hello World/
+|-- Properties
+|-- app/
+|-- App_Resources/
+|-- |-- Android/
+|-- `-- iOS/
+|-- tns_modules/
+|-- `-- ...
+|-- .abignore
+```
+
+The solution node, the project node and the **Properties** node are virtual nodes. The first two are containers for your development. The **Properties** node is a shortcut to opening the project configuration dialog.
+
+In the CLI, the project structure is more simplified and does not contain virtual nodes. Instead, it exposes the `.abproject` file which contains configuration data about your project. Do not modify it manually.
+
+```
+Hello World/
+|-- .abignore
+|-- .abproject
+|-- app/
+|-- App_Resources/
+|-- |-- Android/
+|-- `-- iOS/
+|-- hooks
+|-- tns_modules/
+`-- `-- ...
+```
+
+Your NativeScript project consists of the following basic directories and files.
+
+* The `app` directory is the **development space for your application**. You need to modify all common and platform-specific code within this directory.
+* The `App_Resources` directory is the directory that contains **platform-specific resources** such as icons, splash screens and platform-specific configuration files like `AndroidManifest.xml` and `Info.plist`. When you create a new project, only icons and splash screens are present in this directory.
+* The `tns_modules` directory contains the NativeScript modules. Each module exposes a device or platform functionality such as the camera, location services or the user interface.
+* The `hooks` directory is empty and is not respected by AppBuilder.
+* The `.abignore` file is an AppBuilder-specific file which lets you determine which files and directories to include or exclude from your application package when you build your project.
+
+> **IMPORTANT:** This project structure is uniform across all NativeScript projects created with AppBuilder. Do not change your basic project structure.
+
+### 4. You can quickly check how your blank project looks like on device.
+
+1. Install the companion app on your device by scanning the QR code below. The companion app is a testing utility that lets you load your project on device without building an actual application package.
+
+ iOS | Android
+ ----|--------
+  | 
+
+2. Prepare your project for the companion app.
+
+ IDE Option | Operation
+ -----------|----------
+ In-browser client |
In the main menu bar, select Run.
Select your target platform, select to build for the companion app and click Next.
+ Windows client |
In the main menu bar, select Run.
Select your target platform, select to build for the companion app and click Next.
+ Extension for Visual Studio |
In the main menu bar, select AppBuilder → Build in Cloud.
Select your target platform, select to build for the companion app and click Next.
+ CLI | Run `appbuilder build android --companion` or `appbuilder build ios --companion`
+
+3. Run your project in the companion app.
+ 1. Unlock your device.
+ 1. Run a QR code scanner.
+ 1. Scan the QR code that AppBuilder produced in **Step 2**.
+
+Your project is truly blank and this is why it appears empty or even black on the device screen. To change this, you need to add user interface to your app.
+
+## Add User Interface
+
+NativeScript projects consist of pages. In this project, your home page is declared in `app` → `main-page.xml`.
+
+You can add a simple title, a button and a message to your home page by replacing the contents of `main-page.xml` with the following code.
+
+```XML
+
+
+
+
+
+
+
+
+```
+
+Save your changes and synchronize them to the companion app.
+
+iOS | Android
+----|--------
+Tap and hold with three fingers until a download dialog appears. | Expand the notification center and tap **Sync**.
+
+On your device, your app should appear similar to the screen shots below.
+
+
+
+## Create a View Model
+
+The NativeScript framework is optimized for mobile development which follows the [MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel) pattern.
+
+### 1. Create the view model file.
+
+In your `app` directory, create a new folder named `view-models`. In the newly created folder, add a new file named `main-view-model.js` or `main-view-model.ts` if your project is a JavaScript or a TypeScript project, respectively.
+
+Replace any default contents of the newly added file with the following code.
+
+``` JavaScript
+var observable = require("data/observable");
+
+var counter = 42;
+var mainViewModel = new observable.Observable();
+mainViewModel.set("message", counter + " taps left");
+mainViewModel.tapAction = function () {
+ counter--;
+ if (counter <= 0) {
+ mainViewModel.set("message", "Hurrah! You unlocked the NativeScript clicker achievement!");
+ }
+ else {
+ mainViewModel.set("message", counter + " taps left");
+ }
+};
+exports.mainViewModel = mainViewModel;
+```
+``` TypeScript
+import observable = require("data/observable");
+
+export class HelloWorldModel extends observable.Observable {
+ private counter: number;
+ constructor() {
+ super();
+
+ this.counter = 42;
+ this.set("message", this.counter + " taps left");
+ }
+
+ public tapAction() {
+ this.counter--;
+ if (this.counter <= 0) {
+ this.set("message", "Hurrah! You unlocked the NativeScript clicker achievement!");
+ }
+ else {
+ this.set("message", this.counter + " taps left")
+ }
+ }
+}
+export var mainViewModel = new HelloWorldModel();
+```
+
+The view model is an instance of the `Observable` type. This lets your user interface receive a notification when the `message` property is set.
+
+### 2. Bind the view model to the home page
+
+You can use a `pageLoaded` event to load your app functionality when the home page loads.
+
+In `app` → `main-page.xml`, add a `loaded` attribute to the `Page` element.
+
+```XML
+
+ ...
+
+```
+
+NativeScript automatically looks for JavaScript or TypeScript files which have the same name as your `XML` file. When NativeScript identifies such a file, it executes the logic inside it. So, NativeScript will automatically execute any business logic in the `main-page.js` or `main-page.ts` file you already have in your project.
+
+To bind your view model to the home page, in your `main-page.js` or `main-page.ts` add the following code. This code handles the `pageLoaded` event.
+
+```JavaScript
+var vmModule = require("./view-models/main-view-model");
+function pageLoaded(args) {
+ var page = args.object;
+ page.bindingContext = vmModule.mainViewModel;
+}
+exports.pageLoaded = pageLoaded;
+
+```
+```TypeScript
+import observable = require("data/observable");
+import pages = require("ui/page");
+import vmModule = require("./view-models/main-view-model");
+
+// Event handler for Page "loaded" event attached in main-page.xml
+export function pageLoaded(args: observable.EventData) {
+ // Get the event sender
+ var page = args.object;
+ page.bindingContext = vmModule.mainViewModel;
+}
+```
+
+Finally, you can bind the user interface of the home page to the view model you created. In your `main-page.xml` add the following code.
+
+```XML
+
+
+
+
+
+
+
+
+```
+
+Save your changes and synchronize them to the companion app.
+
+iOS | Android
+----|--------
+Tap and hold with three fingers until a download dialog appears. | Expand the notification center and tap **Sync**.
+
+On your device, your app should appear similar to the screen shots below.
+
+
+
+## Style Your App
+
+You can style your app using CSS. In this version of NativeScript, you can only use a [subset of the CSS language](./styling.md).
+
+For each page, NativeScript automatically loads and applies the `CSS` file with the same name as the `XML` file for the page. Under the hood, the runtime parses the CSS, evaluates the selectors and applies the properties to the style object of the selected view.
+
+First, add a `main-page.css` to your `app` directory.
+
+Next, you can style your user interface by setting alignment, font size and color for your title, button and text. Insert the following code in your `main-page.css`.
+
+```CSS
+.title {
+ font-size: 30;
+ horizontal-align: center;
+ margin:20;
+}
+
+button {
+ font-size: 42;
+ horizontal-align: center;
+}
+
+.message {
+ font-size: 20;
+ color: #284848;
+ margin:10 40;
+ horizontal-align: center;
+}
+```
+
+Finally, add the `cssClass` attribute to your user interface elements in `main-page.xml`. This applies the styling rules to your user interface elements.
+
+```XML
+
+
+
+
+
+
+
+
+```
+
+Save your changes and synchronize them to the companion app.
+
+iOS | Android
+----|--------
+Tap and hold with three fingers until a download dialog appears. | Expand the notification center and tap **Sync**.
+
+On your device, your app should appear similar to the screen shots below.
+
+
+
+## What's Next
+
+Congratulations! You have just completed your first "Hello, World!" app with NativeScript. Next, you can explore the [Api Reference](./ApiReference/) or start tackling more complex tasks.
+
+* [Application](application-management.md)
+* [Navigation](navigation.md)
+* [Layouts](layouts.md)
+* [Styling](styling.md)
+* [Binding](bindings.md)
+* [UI with XML](ui-with-xml.md)
+* [UI Views](ui-views.md)
+* [UI Dialogs](ui-dialogs.md)
+* [Location](location.md)
+* [Modules](modules.md)
+
+[1]: ./quick-start/setup/ab-setup
\ No newline at end of file
diff --git a/quick-start/hello-world/hello-world-ns-cli.md b/quick-start/hello-world/hello-world-ns-cli.md
new file mode 100644
index 000000000..94a202b75
--- /dev/null
+++ b/quick-start/hello-world/hello-world-ns-cli.md
@@ -0,0 +1,324 @@
+---
+nav-title: Hello World from the NativeScript CLI
+title: Hello World from the NativeScript CLI
+description: Create your first NativeScript Hello World app in a few minutes with the NativeScript CLI. See it in action on your device.
+position: 1
+---
+
+# Hello World from the NativeScript CLI
+
+Have you set up your system to develop NativeScript apps with the NativeScript CLI local tool set?
+
+If the answer is yes, you are ready to create your first Hello World app with NativeScript. Your first Hello World will be a simple counter. You will learn:
+
+* [How To Create a New Project](#crate-new-project)
+* [How To Add User Interface](#add-user-interface)
+* [How To Create a View Model](#create-a-view-model)
+* [How To Style Your App](#style-your-app)
+
+> If your system is not already configured, you can check the [Set Up Your System](./quick-setup/setup/quick-setup.md) guide, pick your tools and configure them.
+
+## Create New Project
+
+The first step to any development is to create your first project.
+
+### 1. Create your project.
+
+1. Get the Blank template locally from [https://github.com/NativeScript/docs.git](https://github.com/NativeScript/docs.git).
+ * If you have configured git version control on your system, navigate to an empty directory and run this command.
+
+ ```
+ git clone https://github.com/NativeScript/docs.git
+ ```
+ * If you have not configured git version control, navigate to [https://github.com/NativeScript/docs.git](https://github.com/NativeScript/docs.git), click **Download ZIP**, wait for the download to complete and extract the archive.
+1. In the command prompt, run the following command.
+
+```
+tns create HelloWorld --copy-from
+```
+
+### 2. Explore the newly created project.
+
+Explore the newly created directory in a file explorer. At first, your project has the following structure.
+
+Hello World/
+|-- app/
+|-- |-- app/
+|-- |-- App_Resources/
+|-- |-- |-- Android/
+|-- |-- `-- iOS/
+|-- |-- LICENSE
+|-- |-- package.json
+|-- |-- README.md
+|-- `-- tns_modules/
+`-- platforms
+```
+
+Your NativeScript project consists of the following basic directories and files.
+
+* The `app` directory is the **development space for your application**. You need to modify all common and platform-specific code within the `app` subdirectory in this directory.
+* The `platforms` directory is created empty. When you add a target platform to your project, the NativeScript CLI creates a new subdirectory with the platform name. The subdirectory contains the ready-to-build platform-specific resources of your app.
+* The `App_Resources` subdirectory is the directory that contains **platform-specific resources** such as icons, splash screens and platform-specific configuration files like `AndroidManifest.xml` and `Info.plist`. When you create a new project, only icons and splash screens are present in this directory.
+* The `tns_modules` subdirectory contains the NativeScript modules. Each module exposes a device or platform functionality such as the camera, location services or the user interface.
+
+> **IMPORTANT:** This project structure is uniform across all NativeScript projects created with the NativeScript CLI. Do not change your basic project structure.
+
+### 3. Add target development platforms.
+
+Currently, the `platforms` directory is empty. This means that your project is not ready for development yet. Before you can continue, you need to add your desired platform as a target platform.
+
+```iOS
+tns add platform ios
+```
+```Android
+tns add platform android
+```
+
+This operation creates the `android` and the `ios` subdirectories in the `platforms` directory. Each of these subdirectories now contain a project for native development with the respective SDKs.
+
+Later on, the NativeScript CLI will call the tools of the native SDK to build these platform-specific projects into a truly native application package. During this process, the NativeScript CLI will automatically transfer your cross-platform code and resources from the `app` directory into the `platforms` directory.
+
+> **IMPORTANT:** Avoid modifying your projects inside the `platforms` directory. During build-related operations, your changes will be overridden by your code and resources from the `app` directory.
+
+### 4. You can quickly check how your blank project looks like in the emulator.
+
+Run the following command.
+
+```iOS
+tns run ios --emulator
+```
+```Android
+tns run android --emulator
+```
+
+> **TIP:** If you have configured Genymotion, you can run `tns run android --emulator --geny ` This runs your project in the Genymotion emulator.
+
+Your project is truly blank and this is why it appears empty or even black on the emulator screen. To change this, you need to add user interface to your app.
+
+## Add User Interface
+
+NativeScript projects consist of pages. In this project, your home page is declared in `app` → `main-page.xml`.
+
+You can add a simple title, a button and a message to your home page by replacing the contents of `main-page.xml` with the following code.
+
+```XML
+
+
+
+
+
+
+
+
+```
+
+Save your changes and rerun your app.
+
+```iOS
+tns run ios --emulator
+```
+```Android
+tns run android --emulator
+```
+
+> **TIP:** If you have configured Genymotion, you can run `tns run android --emulator --geny ` This runs your project in the Genymotion emulator.
+
+On your device, your app should appear similar to the screen shots below.
+
+
+
+## Create a View Model
+
+The NativeScript framework is optimized for mobile development which follows the [MVVM](http://en.wikipedia.org/wiki/Model_View_ViewModel) pattern.
+
+### 1. Create the view model file.
+
+In your `app` directory, create a new folder named `view-models`. In the newly created folder, add a new file named `main-view-model.js` or `main-view-model.ts` if your project is a JavaScript or a TypeScript project, respectively.
+
+Replace any default contents of the newly added file with the following code.
+
+``` JavaScript
+var observable = require("data/observable");
+
+var counter = 42;
+var mainViewModel = new observable.Observable();
+mainViewModel.set("message", counter + " taps left");
+mainViewModel.tapAction = function () {
+ counter--;
+ if (counter <= 0) {
+ mainViewModel.set("message", "Hurrah! You unlocked the NativeScript clicker achievement!");
+ }
+ else {
+ mainViewModel.set("message", counter + " taps left");
+ }
+};
+exports.mainViewModel = mainViewModel;
+```
+``` TypeScript
+import observable = require("data/observable");
+
+export class HelloWorldModel extends observable.Observable {
+ private counter: number;
+ constructor() {
+ super();
+
+ this.counter = 42;
+ this.set("message", this.counter + " taps left");
+ }
+
+ public tapAction() {
+ this.counter--;
+ if (this.counter <= 0) {
+ this.set("message", "Hurrah! You unlocked the NativeScript clicker achievement!");
+ }
+ else {
+ this.set("message", this.counter + " taps left")
+ }
+ }
+}
+export var mainViewModel = new HelloWorldModel();
+```
+
+The view model is an instance of the `Observable` type. This lets your user interface receive a notification when the `message` property is set.
+
+### 2. Bind the view model to the home page
+
+You can use a `pageLoaded` event to load your app functionality when the home page loads.
+
+In `app` → `main-page.xml`, add a `loaded` attribute to the `Page` element.
+
+```XML
+
+ ...
+
+```
+
+NativeScript automatically looks for JavaScript or TypeScript files which have the same name as your `XML` file. When NativeScript identifies such a file, it executes the logic inside it. So, NativeScript will automatically execute any business logic in the `main-page.js` or `main-page.ts` file you already have in your project.
+
+To bind your view model to the home page, in your `app` → `main-page.js` or `app` → `main-page.ts` add the following code. This code handles the `pageLoaded` event.
+
+```JavaScript
+var vmModule = require("./view-models/main-view-model");
+function pageLoaded(args) {
+ var page = args.object;
+ page.bindingContext = vmModule.mainViewModel;
+}
+exports.pageLoaded = pageLoaded;
+```
+```TypeScript
+import observable = require("data/observable");
+import pages = require("ui/page");
+import vmModule = require("./view-models/main-view-model");
+
+// Event handler for Page "loaded" event attached in main-page.xml
+export function pageLoaded(args: observable.EventData) {
+ // Get the event sender
+ var page = args.object;
+ page.bindingContext = vmModule.mainViewModel;
+}
+```
+
+Finally, you can bind the user interface of the home page to the view model you created. In your `app` → `main-page.xml` add the following code.
+
+```XML
+
+
+
+
+
+
+
+
+```
+
+Save your changes and rerun your app.
+
+```iOS
+tns run ios --emulator
+```
+```Android
+tns run android --emulator
+```
+
+> **TIP:** If you have configured Genymotion, you can run `tns run android --emulator --geny ` This runs your project in the Genymotion emulator.
+
+On your device, your app should appear similar to the screen shots below.
+
+
+
+## Style Your App
+
+You can style your app using CSS. In this version of NativeScript, you can only use a [subset of the CSS language](./styling.md).
+
+For each page, NativeScript automatically loads and applies the `CSS` file with the same name as the `XML` file for the page. Under the hood, the runtime parses the CSS, evaluates the selectors and applies the properties to the style object of the selected view.
+
+> **TIP:** You can also set global CSS rules. Any CSS declarations in `app.css` will apply to all content that can be styled.
+
+First, add a `main-page.css` to your `app` directory.
+
+Next, you can style your user interface by setting alignment, font size and color for your title, button and text. Insert the following code in your `main-page.css`.
+
+```CSS
+.title {
+ font-size: 30;
+ horizontal-align: center;
+ margin:20;
+}
+
+button {
+ font-size: 42;
+ horizontal-align: center;
+}
+
+.message {
+ font-size: 20;
+ color: #284848;
+ margin:10 40;
+ horizontal-align: center;
+}
+```
+
+Finally, add the `cssClass` attribute to your user interface elements in `main-page.xml`. This applies the styling rules to your user interface elements.
+
+```XML
+
+
+
+
+
+
+
+
+```
+
+Save your changes and rerun your app.
+
+```iOS
+tns run ios --emulator
+```
+```Android
+tns run android --emulator
+```
+
+> **TIP:** If you have configured Genymotion, you can run `tns run android --emulator --geny ` This runs your project in the Genymotion emulator.
+
+On your device, your app should appear similar to the screen shots below.
+
+
+
+## What's Next
+
+Congratulations! You have just completed your first "Hello, World!" app with NativeScript. Next, you can explore the [Api Reference](./ApiReference/) or start tackling more complex tasks.
+
+* [Application](application-management.md)
+* [Navigation](navigation.md)
+* [Layouts](layouts.md)
+* [Styling](styling.md)
+* [Binding](bindings.md)
+* [UI with XML](ui-with-xml.md)
+* [UI Views](ui-views.md)
+* [UI Dialogs](ui-dialogs.md)
+* [Location](location.md)
+* [Modules](modules.md)
+
+[1]: ./quick-start/setup/ab-setup
\ No newline at end of file
diff --git a/quick-start/setup/ab-setup/ab-cli-setup.md b/quick-start/setup/ab-setup/ab-cli-setup.md
new file mode 100644
index 000000000..254ef62d3
--- /dev/null
+++ b/quick-start/setup/ab-setup/ab-cli-setup.md
@@ -0,0 +1,252 @@
+---
+nav-title: Set Up the AppBuilder Command-Line Interface
+title: Set Up the AppBuilder Command-Line Interface
+description: Begin NativeScript development in a few minutes in your preferred IDE and take advantage of the AppBuilder cloud services.
+position: 4
+---
+
+# Set Up the AppBuilder Command-Line Interface
+
+With the [AppBuilder command-line interface](http://www.telerik.com/appbuilder/command-line-interface) you can use the cloud services provided by AppBuilder paired with an IDE or text editor of your choice. If you are an avid Sublime Text user, you can pair the AppBuilder CLI with the [AppBuilder package for Sublime Text](http://www.telerik.com/appbuilder/sublime-text-package).
+
+With this IDE, you can develop for Android and iOS on Windows, OS X or Linux.
+
+* [Set Up on Windows](#set-up-on-windows)
+* [Set Up on OS X](#set-up-on-os-x)
+* [Set Up on Linux](#set-up-on-linux)
+
+## Set Up on Windows
+
+**System Requirements**
+
+* Telerik account
+* Windows 7 or later
+* .NET 4.0 or later
+* Node.js 0.10.26 or a later stable official release except Node.js 0.10.34
+* (Optional) For iOS development
+ * (Latest official) iTunes The bitness of Node.js and iTunes must match.
+* (Optional) For Android development with the native emulators
+ * (Optional) Chocolatey to simplify the installation of dependencies
+ * Android device drivers for your device
+ * JDK 7 or a later stable official release
+ * Android SDK 19 or later
+ * (Optional) Genymotion
+
+**Setup**
+
+1. In your browser, navigate to [https://platform.telerik.com](https://platform.telerik.com) and log in.
+1. If you do not have a Telerik account, you can log in with a social provider of your choice and begin a Telerik Platform trial. With the Telerik Platform trial, you can use the AppBuilder CLI.
+1. Install [Node.js](http://nodejs.org).
+ 1. Go to [http://nodejs.org](http://nodejs.org) and click **Install**.
+ 1. If prompted, confirm the download.
+ 1. After the download completes, run the installer and complete the installation.
+1. Install [Chocolatey](https://chocolatey.org) to simplify the installation and configuration of the Android tools and SDKs.
+ 1. Run the command prompt as an Administrator.
+ 1. Copy and paste the following script in the command prompt.
+
+ ```Shell
+ @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
+ ```
+ 1. Restart the command prompt.
+1. Install [JDK 7](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or a later stable official release.
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install java
+ ```
+ 1. If not present, create the following environment variable.
+
+ ```
+ JAVA_HOME=Path to the jdk* install folder
+ ```
+
+ For example: `JAVA_HOME=C:\Program Files\Java\jdk1.8.0_11`
+1. Install the [Android SDK](http://developer.android.com/sdk/index.html).
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install android-sdk
+ ```
+ 1. If not present, add the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to tools directory in the Android SDK installation folder
+ Path to platform-tools directory in the Android SDK installation folder
+ ```
+
+ For example: `PATH=...;...;C:\Users\MyUser\AppData\Local\Android\android-sdk\tools;C:\Users\MyUser\AppData\Local\Android\android-sdk\platform-tools`
+ 1. Restart the command prompt and run the following command.
+
+ ```
+ android update sdk
+ ```
+ 1. Select all packages for the Android 19 SDK and any other SDKs that you want to install and click **Install**.
+1. (Optional) Install Genymotion. Genymotion is a third-party native emulator.
+ 1. Go to [Get Genymotion](https://www.genymotion.com/#!/download), select Windows and click **Get Genymotion**. You might want to download the larger archive which contains VirtualBox.
+ 1. If prompted, confirm the download.
+ 1. After the download completes, run the installer and complete the installation.
+1. Install the AppBuilder CLI.
+ 1. Run the following command.
+
+ ```Shell
+ npm i -g appbuilder
+ ```
+ 1. Restart the command prompt.
+
+## Set Up on OS X
+
+**System Requirements**
+
+* Telerik account
+* OS X Mavericks or later
+* Node.js 0.10.26 or a later stable official release except Node.js 0.10.34
+* (Optional) Homebrew to simplify the installation of dependencies
+* For iOS development
+ * Xcode 5 or later
+ * (Latest official) iTunes
+* For Android development
+ * JDK 7 or a later stable official release
+ * Android SDK 19 or later
+ * (Optional) Genymotion to expand your testing options
+
+**Setup**
+
+1. In your browser, navigate to [https://platform.telerik.com](https://platform.telerik.com) and log in.
+1. If you do not have a Telerik account, you can log in with a social provider of your choice and begin a Telerik Platform trial. With the Telerik Platform trial, you can use the AppBuilder CLI.
+1. Install [Homebrew](http://brew.sh) to simplify the installation process.
+
+ ```Shell
+ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+ ```
+1. Install [Node.js 0.10.26](http://nodejs.org) or a later stable official release.
+
+ ```Shell
+ brew install node
+ ```
+1. Install the dependencies for iOS development.
+ 1. Run the App Store and download and install Xcode 5 or later.
+ 1. Verify that you have updated iTunes to the latest version.
+1. Install the dependencies for Android development.
+ 1. Install [JDK 7](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or a later stable official release.
+ 1. Go to [Java SE Downloads](http://www.oracle.com/technetwork/java/javase/downloads/index.html) and click **Download** for JDK.
+ 1. In the **Java SE Development Kit** section, accept the license agreement and click the download link for Mac OS X.
+ 1. Wait for the download to complete and install the JDK.
+ 1. Install [Apache Ant 1.8](http://ant.apache.org/bindownload.cgi) or a later stable official release.
+ 1. In the terminal, run the following command.
+
+ ```Shell
+ brew install ant
+ ```
+ 1. If not present, add the following file path to the `PATH` system environment variable.
+
+ ```
+ Path to the bin directory in the Apache Ant installation folder
+ ```
+
+ For example: Run the following command `export PATH=${PATH}:/ant/apache-ant-1.9.4/bin`
+ 1. Install the [Android SDK](http://developer.android.com/sdk/index.html).
+ 1. In the terminal, run the following command.
+
+ ```Shell
+ brew install android-sdk
+ ```
+ 1. If not present, add the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to the tools subdirectory in the Android SDK installation directory
+ Path to the platform-tools subdirectory in the Android SDK installation directory
+ ```
+
+ For example: Run the following command `export PATH=${PATH}:/Applications/Android Studio.app/sdk/tools:/Applications/Android Studio.app/sdk/platform-tools`
+ 1. Run the following command.
+
+ ```
+ android update sdk
+ ```
+ 1. Select all packages for the Android 19 SDK and any other SDKs that you want to install and click **Install**.
+ 1. (Optional) Install Genymotion. Genymotion is a third-party native emulator.
+ 1. Go to [Download VirtualBox](https://www.virtualbox.org/wiki/Downloads) and download and install VirtualBox for OS X.
+ 1. Go to [Get Genymotion](https://www.genymotion.com/#!/download), select Mac and click **Get Genymotion**.
+ 1. After the download completes, run the installer and complete the installation.
+ 1. Add the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to the MacOS directory in the Contents directory in the Genymotion Shell app
+ Path to the MacOS directory in the Contents directory in the Genymotion app
+ ```
+
+ For example: Run the following command `export PATH=$PATH:/Applications/Genymotion\ Shell.app/Contents/MacOS/:/Applications/Genymotion.app/Contents/MacOS/`
+1. Install the AppBuilder CLI.
+ 1. Run the following command.
+
+ ```Shell
+ npm i -g appbuilder
+ ```
+ 1. Restart the command prompt.
+
+## Set Up on Linux
+
+**System Requirements**
+
+* Telerik account
+* Ubuntu 14.04 LTS
+* Node.js 0.10.26 or a later stable official release except Node.js 0.10.34
+* G++ compiler
+* (Optional) For Android development with the native emulators
+ * JDK 7 or a later stable official release
+ * Android SDK 19 or later
+ * (Optional) Genymotion to expand your testing options
+
+**Setup**
+
+1. In your browser, navigate to [https://platform.telerik.com](https://platform.telerik.com) and log in.
+1. If you do not have a Telerik account, you can log in with a social provider of your choice and begin a Telerik Platform trial. With the Telerik Platform trial, you can use the AppBuilder CLI.
+1. Run the terminal.
+1. Install [Node.js](http://nodejs.org).
+
+ ```Shell
+ sudo apt-get install nodejs-legacy
+ ```
+1. If you are running on a 64-bit system, install the runtime libraries for the ia32/i386 architecture.
+
+ ```Shell
+ sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 libstdc++6:i386
+ ```
+1. Install the G++ compiler.
+
+ ```Shell
+ sudo apt-get install g++
+ ```
+1. Install [JDK 7](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or a later stable official release.
+
+ ```Shell
+ sudo apt-get install oracle-java8-installer
+ ```
+1. Install the [Android SDK](http://developer.android.com/sdk/index.html). If you experience issues with the installation, go to [Installing the Android SDK](https://developer.android.com/sdk/installing/index.html?pkg=tools), expand the **Show instructions for all platforms** section, expand the **Troubleshooting Ubuntu** section and review the troubleshooting guide.
+ 1. Go to [Android Studio and SDK Downloads](https://developer.android.com/sdk/index.html#Other) and in the **SDK Tools Only** section download the package for Linux.
+ 1. After the download completes, unpack the downloaded archive.
+ 1. Аdd the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to tools directory in the Android SDK installation folder
+ Path to platform-tools directory in the Android SDK installation folder
+ ```
+
+ For example: Run the following command `export PATH=${PATH}:/android/sdk/tools:/android/sdk/platform-tools`
+ 1. Restart the command prompt and run the following command.
+
+ ```
+ android update sdk
+ ```
+ 1. Select all packages for the Android 19 SDK and any other SDKs that you want to install and click **Install**.
+1. (Optional) Install Genymotion. Genymotion is a third-party native emulator.
+ 1. Go to [Download VirtualBox](https://www.virtualbox.org/wiki/Downloads) and download and install VirtualBox for Linux.
+ 1. Go to [Get Genymotion](https://www.genymotion.com/#!/download), select Linux and click the download link for Ubuntu.
+ 1. After the download completes, run the installer and complete the installation.
+1. Install the AppBuilder CLI.
+ 1. Run the following command.
+
+ ```Shell
+ sudo npm i -g appbuilder
+ ```
+ 1. Restart the command prompt.
\ No newline at end of file
diff --git a/quick-start/setup/ab-setup/ab-vse-setup.md b/quick-start/setup/ab-setup/ab-vse-setup.md
new file mode 100644
index 000000000..55047988e
--- /dev/null
+++ b/quick-start/setup/ab-setup/ab-vse-setup.md
@@ -0,0 +1,89 @@
+---
+nav-title: Set Up the AppBuilder Extension for Visual Studio
+title: Set Up the AppBuilder Extension for Visual Studio
+description: Begin NativeScript development in a few minutes in Microsoft Visual Studio and take advantage of the AppBuilder cloud services.
+position: 3
+---
+
+# Set Up the AppBuilder Extension for Visual Studio
+
+With the [AppBuilder extension for Visual Studio](http://www.telerik.com/appbuilder/visual-studio-extension), you can extend Microsoft Visual Studio to create, develop, build and test NativeScript apps. This IDE option provides extensive coding and testing capabilities such as deployment and debugging on devices and in the native emulator.
+
+With this IDE, you can develop for Android and iOS on Windows systems.
+
+* [System Requirements](#system-requirements)
+* [Setup](#setup)
+
+## System Requirements
+
+* Internet connection
+* Telerik account with at least Telerik Platform Trial, Telerik Platform Developer or AppBuilder Professional subscription
+* Microsoft Visual Studio
+ * Microsoft Visual Studio 2015 Preview
+ * Microsoft Visual Studio 2013 Community, Professional, Premium or Ultimate
+ * Microsoft Visual Studio 2012 Professional, Premium or Ultimate
+ * Microsoft Visual Studio 2010 Professional, Premium or Ultimate
+* (Optional) For iOS development
+ * (Latest official) iTunes
+* (Optional) For Android development with the native emulators
+ * (Optional) Chocolatey to simplify the installation of dependencies
+ * Android device drivers for your device
+ * JDK 7 or a later stable official release
+ * Android SDK 19 or later
+
+## Setup
+
+1. In your browser, navigate to [https://platform.telerik.com](https://platform.telerik.com) and log in.
+1. If you do not have a Telerik account, you can log in with a social provider of your choice and begin a Telerik Platform trial. With the Telerik Platform trial, you can use the AppBuilder extension for Visual Studio.
+1. Install [iTunes](http://www.apple.com/itunes/).
+ 1. Go to [Download iTunes](http://www.apple.com/itunes/download/), fill in the form and click **Download Now**.
+ 1. If prompted, confirm the download.
+ 1. After the download completes, run the installer and complete the installation.
+1. Install [Chocolatey](https://chocolatey.org) to simplify the installation and configuration of the Android tools and SDKs.
+ 1. Run the command prompt as an Administrator.
+ 1. Copy and paste the following script in the command prompt.
+
+ ```Shell
+ @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
+ ```
+ 1. Restart the command prompt.
+1. Install [JDK 7](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or a later stable official release.
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install java
+ ```
+ 1. If not present, create the following environment variable.
+
+ ```
+ JAVA_HOME=Path to the jdk* install folder
+ ```
+
+ For example: `JAVA_HOME=C:\Program Files\Java\jdk1.8.0_11`
+1. Install the [Android SDK](http://developer.android.com/sdk/index.html).
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install android-sdk
+ ```
+ 1. If not present, add the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to tools directory in the Android SDK installation folder
+ Path to platform-tools directory in the Android SDK installation folder
+ ```
+
+ For example: `PATH=...;...;C:\Users\MyUser\AppData\Local\Android\android-sdk\tools;C:\Users\MyUser\AppData\Local\Android\android-sdk\platform-tools`
+ 1. Restart the command prompt and run the following command.
+
+ ```
+ android update sdk
+ ```
+ 1. Select all packages for the Android 19 SDK and any other SDKs that you want to install and click **Install**.
+1. Install the [AppBuilder extension for Visual Studio](http://www.telerik.com/appbuilder/visual-studio-extension).
+ 1. In your browser, navigate to [https://platform.telerik.com](https://platform.telerik.com) and log in.
+ 1. In the title bar, click **Getting Started** and select **Downloads**.
+ 1. Click **AppBuilder NativeScript**.
+ 1. Click **Download** for AppBuilder extension for Visual Studio.
+ 1. Double-click the downloaded AppBuilder.vsixand wait for the installer to verify that your system meets the system requirements.
+ 1. Click **Install** and wait for the installation to complete.
\ No newline at end of file
diff --git a/quick-start/setup/ab-setup/ab-web-setup.md b/quick-start/setup/ab-setup/ab-web-setup.md
new file mode 100644
index 000000000..96d7baca4
--- /dev/null
+++ b/quick-start/setup/ab-setup/ab-web-setup.md
@@ -0,0 +1,35 @@
+---
+nav-title: Set Up the AppBuilder In-Browser Client
+title: Set Up the AppBuilder In-Browser Client
+description: Begin NativeScript development momentarily in any browser on any operating system.
+position: 1
+---
+
+# Set Up the AppBuilder In-Browser Client
+
+With the [AppBuilder in-browser client](http://www.telerik.com/appbuilder/in-browser-client), you can create, develop, build and test NativeScript apps in any of the most popular browsers. This IDE option lets you create, store, build and test your projects entirely in the browser without downloading or setting up any additional software.
+
+With this IDE, you can develop for Android and iOS in the most popular browsers on any operating system.
+
+* [System Requirements](#system-requirements)
+* [Setup](#setup)
+
+## System Requirements
+
+* Internet connection
+* Telerik account
+* Supported browsers
+ * (Latest official) Google Chrome
+ * (Latest official) Safari
+ * (Latest official) Internet Explorer
+ * (Latest official) Mozilla Firefox
+* Recommended browsers
+ * (Latest official) Google Chrome
+ * (latest official) Safari
+* 1366 x 768 pixels or a higher display resolution
+* Enabled third-party cookies in your browser
+
+## Setup
+
+1. Navigate to [https://platform.telerik.com](https://platform.telerik.com) in your preferred browser.
+1. If you do not have a Telerik account, you can log in with a social provider of your choice and begin a Telerik Platform trial. With the Telerik Platform trial, you can use the AppBuilder in-browser client.
\ No newline at end of file
diff --git a/quick-start/setup/ab-setup/ab-win-setup.md b/quick-start/setup/ab-setup/ab-win-setup.md
new file mode 100644
index 000000000..1c33341a3
--- /dev/null
+++ b/quick-start/setup/ab-setup/ab-win-setup.md
@@ -0,0 +1,90 @@
+---
+nav-title: Set Up the AppBuilder Windows Client
+title: Set Up the AppBuilder Windows Client
+description: Begin NativeScript development in a few minutes on your Windows system and take advantage of the AppBuilder cloud services.
+position: 2
+---
+
+# Set Up the AppBuilder Windows Client
+
+With the [AppBuilder Windows client](http://www.telerik.com/appbuilder/windows-client), you can create, develop, build and test NativeScript apps from the convenience of your Windows desktop. This IDE option provides extensive coding and testing capabilities such as deployment and debugging on devices and in the native emulator.
+
+With this IDE, you can develop for Android and iOS on Windows systems.
+
+* [System Requirements](#system-requirements)
+* [Setup](#setup)
+
+## System Requirements
+
+* Internet connection
+* Telerik account
+* Operating systems
+ * Windows 8.x
+ * Windows 7
+ * Windows Vista SP1 or later
+ * Windows XP SP3
+* [Microsoft .NET Framework 4](http://www.microsoft.com/en-us/download/details.aspx?id=17851), updated to [this version](http://support.microsoft.com/kb/2468871/en-us), or later
+* (Optional) For iOS development
+ * (Latest official) iTunes
+* (Optional) For Android development with the native emulators
+ * (Optional) Chocolatey to simplify the installation of dependencies
+ * Android device drivers for your device
+ * JDK 7 or a later stable official release
+ * Android SDK 19 or later
+
+## Setup
+
+1. In your browser, navigate to [https://platform.telerik.com](https://platform.telerik.com) and log in.
+1. If you do not have a Telerik account, you can log in with a social provider of your choice and begin a Telerik Platform trial. With the Telerik Platform trial, you can use the AppBuilder Windows client.
+1. Install [iTunes](http://www.apple.com/itunes/).
+ 1. Go to [Download iTunes](http://www.apple.com/itunes/download/), fill in the form and click **Download Now**.
+ 1. If prompted, confirm the download.
+ 1. After the download completes, run the installer and complete the installation.
+1. Install [Chocolatey](https://chocolatey.org) to simplify the installation and configuration of the Android tools and SDKs.
+ 1. Run the command prompt as an Administrator.
+ 1. Copy and paste the following script in the command prompt.
+
+ ```Shell
+ @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
+ ```
+ 1. Restart the command prompt.
+1. Install [JDK 7](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or a later stable official release.
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install java
+ ```
+ 1. If not present, create the following environment variable.
+
+ ```
+ JAVA_HOME=Path to the jdk* install folder
+ ```
+
+ For example: `JAVA_HOME=C:\Program Files\Java\jdk1.8.0_11`
+1. Install the [Android SDK](http://developer.android.com/sdk/index.html).
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install android-sdk
+ ```
+ 1. If not present, add the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to tools directory in the Android SDK installation folder
+ Path to platform-tools directory in the Android SDK installation folder
+ ```
+
+ For example: `PATH=...;...;C:\Users\MyUser\AppData\Local\Android\android-sdk\tools;C:\Users\MyUser\AppData\Local\Android\android-sdk\platform-tools`
+ 1. Restart the command prompt and run the following command.
+
+ ```
+ android update sdk
+ ```
+ 1. Select all packages for the Android 19 SDK and any other SDKs that you want to install and click **Install**.
+1. Install the [AppBuilder Windows client](http://www.telerik.com/appbuilder/windows-client).
+ 1. In your browser, navigate to [https://platform.telerik.com](https://platform.telerik.com) and log in.
+ 1. In the title bar, click **Getting Started** and select **Downloads**.
+ 1. Click **AppBuilder NativeScript**.
+ 1. Click **Download** for AppBuilder Windows client.
+ 1. Double-click the downloaded setup.exe bootstrapper, click **Run** and wait for the installer to verify that your system meets the system requirements.
+ 1. Click **Install** and wait for the installation to complete.
\ No newline at end of file
diff --git a/quick-start/setup/ns-cli-setup/ns-setup-linux.md b/quick-start/setup/ns-cli-setup/ns-setup-linux.md
new file mode 100644
index 000000000..dfb7dd0e4
--- /dev/null
+++ b/quick-start/setup/ns-cli-setup/ns-setup-linux.md
@@ -0,0 +1,84 @@
+---
+nav-title: Set Up the NativeScript CLI on Linux
+title: Set Up the NativeScript CLI on Linux
+description: Configure your Linux system to create, develop and build projects locally with NativeScript.
+position: 3
+---
+
+# Set Up the NativeScript CLI on Linux
+
+With the open-source [NativeScript Command-Line Interface][NativeScript CLI] and an IDE or text editor of your choice, you can create, develop, store and build your apps entirely locally, free of charge, without an Internet connection and anonymously.
+
+On Linux systems, you can use the NativeScript CLI to develop only Android apps. This limitation is caused by the requirements for iOS development.
+
+* [System Requirements](#system-requirements)
+* [Setup](#setup)
+
+## System Requirements
+
+* Ubuntu 14.04 LTS
+* Node.js 0.10.26 or a later stable official release except Node.js 0.10.34
+* G++ compiler
+* JDK 7 or a later stable official release
+* Apache Ant 1.8 or later
+* Android SDK 19 or later
+* (Optional) Genymotion to expand your testing options
+
+## Setup
+
+1. Run the terminal.
+1. Install [Node.js](http://nodejs.org).
+
+ ```Shell
+ sudo apt-get install nodejs-legacy
+ ```
+1. If you are running on a 64-bit system, install the runtime libraries for the ia32/i386 architecture.
+
+ ```Shell
+ sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 libstdc++6:i386
+ ```
+1. Install the G++ compiler.
+
+ ```Shell
+ sudo apt-get install g++
+ ```
+1. Install [JDK 7](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or a later stable official release.
+
+ ```Shell
+ sudo apt-get install oracle-java8-installer
+ ```
+1. Install [Apache Ant 1.8](http://ant.apache.org/bindownload.cgi) or a later stable official release.
+
+ ```Shell
+ sudo apt-get install ant
+ ```
+1. Install the [Android SDK](http://developer.android.com/sdk/index.html). If you experience issues with the installation, go to [Installing the Android SDK](https://developer.android.com/sdk/installing/index.html?pkg=tools), expand the **Show instructions for all platforms** section, expand the **Troubleshooting Ubuntu** section and review the troubleshooting guide.
+ 1. Go to [Android Studio and SDK Downloads](https://developer.android.com/sdk/index.html#Other) and in the **SDK Tools Only** section download the package for Linux.
+ 1. After the download completes, unpack the downloaded archive.
+ 1. Аdd the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to tools directory in the Android SDK installation folder
+ Path to platform-tools directory in the Android SDK installation folder
+ ```
+
+ For example: Run the following command `export PATH=${PATH}:/android/sdk/tools:/android/sdk/platform-tools`
+ 1. Restart the command prompt and run the following command.
+
+ ```
+ android update sdk
+ ```
+ 1. Select all packages for the Android 19 SDK and any other SDKs that you want to install and click **Install**.
+1. (Optional) Install Genymotion. Genymotion is a third-party native emulator.
+ 1. Go to [Download VirtualBox](https://www.virtualbox.org/wiki/Downloads) and download and install VirtualBox for Linux.
+ 1. Go to [Get Genymotion](https://www.genymotion.com/#!/download), select Linux and click the download link for Ubuntu.
+ 1. After the download completes, run the installer and complete the installation.
+1. Install the NativeScript CLI.
+ 1. Run the following command.
+
+ ```Shell
+ sudo npm i -g nativescript
+ ```
+ 1. Restart the command prompt.
+
+[NativeScript CLI]: https://www.npmjs.com/package/nativescript
\ No newline at end of file
diff --git a/quick-start/setup/ns-cli-setup/ns-setup-os-x.md b/quick-start/setup/ns-cli-setup/ns-setup-os-x.md
new file mode 100644
index 000000000..134237d74
--- /dev/null
+++ b/quick-start/setup/ns-cli-setup/ns-setup-os-x.md
@@ -0,0 +1,110 @@
+---
+nav-title: Set Up the NativeScript CLI on OS X
+title: Set Up the NativeScript CLI on OS X
+description: Configure your OS X system to create, develop and build projects locally with NativeScript.
+position: 2
+---
+
+# Set Up the NativeScript CLI on OS X
+
+With the open-source [NativeScript Command-Line Interface][NativeScript CLI] and an IDE or text editor of your choice, you can create, develop, store and build your apps entirely locally, free of charge, without an Internet connection and anonymously.
+
+On OS X systems, you can use the NativeScript CLI to develop Android and iOS apps.
+
+* [System Requirements](#system-requirements)
+* [Setup](#setup)
+
+## System Requirements
+
+* OS X Mavericks or later
+* Node.js 0.10.26 or a later stable official release except Node.js 0.10.34
+* (Optional) Homebrew to simplify the installation of dependencies
+* For iOS development
+ * Xcode 6 or later
+ * Command-line tools for Xcode
+ * (Optional) Mono to be able to integrate third-party libraries in your project
+* For Android development
+ * JDK 7 or a later stable official release
+ * Apache Ant 1.8 or later
+ * Android SDK 19 or later
+ * (Optional) Genymotion to expand your testing options
+
+## Setup
+
+1. Install [Homebrew](http://brew.sh) to simplify the installation process.
+
+ ```Shell
+ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+ ```
+1. Install [Node.js 0.10.26](http://nodejs.org) or a later stable official release.
+
+ ```Shell
+ brew install node
+ ```
+1. Install the dependencies for iOS development.
+ 1. Run the App Store and download and install Xcode 5 or later.
+ 1. Go to [Downloads for Apple Developers](https://developer.apple.com/downloads/index.action), log in and download and install the **Command Line Tools for Xcode** for your version of OS X and Xcode.
+ 1. (Optional) Install [Mono](http://www.mono-project.com) to be able to add third-party native libraries to your project.
+
+ ```Shell
+ brew install mono
+ ```
+1. Install the dependencies for Android development.
+ 1. Install [JDK 7](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or a later stable official release.
+ 1. Go to [Java SE Downloads](http://www.oracle.com/technetwork/java/javase/downloads/index.html) and click **Download** for JDK.
+ 1. In the **Java SE Development Kit** section, accept the license agreement and click the download link for Mac OS X.
+ 1. Wait for the download to complete and install the JDK.
+ 1. Install [Apache Ant 1.8](http://ant.apache.org/bindownload.cgi) or a later stable official release.
+ 1. In the terminal, run the following command.
+
+ ```Shell
+ brew install ant
+ ```
+ 1. If not present, add the following file path to the `PATH` system environment variable.
+
+ ```
+ Path to the bin directory in the Apache Ant installation folder
+ ```
+
+ For example: Run the following command `export PATH=${PATH}:/ant/apache-ant-1.9.4/bin`
+ 1. Install the [Android SDK](http://developer.android.com/sdk/index.html).
+ 1. In the terminal, run the following command.
+
+ ```Shell
+ brew install android-sdk
+ ```
+ 1. If not present, add the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to the tools subdirectory in the Android SDK installation directory
+ Path to the platform-tools subdirectory in the Android SDK installation directory
+ ```
+
+ For example: Run the following command `export PATH=${PATH}:/Applications/Android Studio.app/sdk/tools:/Applications/Android Studio.app/sdk/platform-tools`
+ 1. Run the following command.
+
+ ```
+ android update sdk
+ ```
+ 1. Select all packages for the Android 19 SDK and any other SDKs that you want to install and click **Install**.
+ 1. (Optional) Install Genymotion. Genymotion is a third-party native emulator.
+ 1. Go to [Download VirtualBox](https://www.virtualbox.org/wiki/Downloads) and download and install VirtualBox for OS X.
+ 1. Go to [Get Genymotion](https://www.genymotion.com/#!/download), select Mac and click **Get Genymotion**.
+ 1. After the download completes, run the installer and complete the installation.
+ 1. Add the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to the MacOS directory in the Contents directory in the Genymotion Shell app
+ Path to the MacOS directory in the Contents directory in the Genymotion app
+ ```
+
+ For example: Run the following command `export PATH=$PATH:/Applications/Genymotion\ Shell.app/Contents/MacOS/:/Applications/Genymotion.app/Contents/MacOS/`
+1. Install the NativeScript CLI.
+ 1. Run the following command.
+
+ ```Shell
+ npm i -g nativescript
+ ```
+ 1. Restart the command prompt.
+
+[NativeScript CLI]: https://www.npmjs.com/package/nativescript
\ No newline at end of file
diff --git a/quick-start/setup/ns-cli-setup/ns-setup-win.md b/quick-start/setup/ns-cli-setup/ns-setup-win.md
new file mode 100644
index 000000000..8156a5efb
--- /dev/null
+++ b/quick-start/setup/ns-cli-setup/ns-setup-win.md
@@ -0,0 +1,99 @@
+---
+nav-title: Set Up the NativeScript CLI on Windows
+title: Set Up the NativeScript CLI on Windows
+description: Configure your Windows system to create, develop and build projects locally with NativeScript.
+position: 1
+---
+
+# Set Up the NativeScript CLI on Windows
+
+With the open-source [NativeScript Command-Line Interface][NativeScript CLI] and an IDE or text editor of your choice, you can create, develop, store and build your apps entirely locally, free of charge, without an Internet connection and anonymously.
+
+On Windows systems, you can use the NativeScript CLI to develop only Android apps. This limitation is caused by the requirements for iOS development.
+
+* [System Requirements](#system-requirements)
+* [Setup](#setup)
+
+## System Requirements
+
+* Windows Vista or later
+* Node.js 0.10.26 or a later stable official release except Node.js 0.10.34
+* (Optional) Chocolatey to simplify the installation of dependencies
+* JDK 7 or a later stable official release
+* Apache Ant 1.8 or later
+* Android SDK 19 or later
+* (Optional) Genymotion to expand your testing options
+
+## Setup
+
+1. Install [Node.js](http://nodejs.org).
+ 1. Go to [http://nodejs.org](http://nodejs.org) and click **Install**.
+ 1. If prompted, confirm the download.
+ 1. After the download completes, run the installer and complete the installation.
+1. Install [Chocolatey](https://chocolatey.org) to simplify the installation and configuration of the Android tools and SDKs.
+ 1. Run the command prompt as an Administrator.
+ 1. Copy and paste the following script in the command prompt.
+
+ ```Shell
+ @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
+ ```
+ 1. Restart the command prompt.
+1. Install [JDK 7](http://www.oracle.com/technetwork/java/javase/downloads/index.html) or a later stable official release.
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install java
+ ```
+ 1. If not present, create the following environment variable.
+
+ ```
+ JAVA_HOME=Path to the jdk* install folder
+ ```
+
+ For example: `JAVA_HOME=C:\Program Files\Java\jdk1.8.0_11`
+1. Install [Apache Ant 1.8](http://ant.apache.org/bindownload.cgi) or a later stable official release.
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install ant
+ ```
+ 1. If not present, add the following file path to the `PATH` system environment variable.
+
+ ```
+ Path to the bin directory in the Apache Ant installation folder
+ ```
+
+ For example: `PATH=...;...;C:\tools\apache-ant-1.9.4\bin`
+1. Install the [Android SDK](http://developer.android.com/sdk/index.html).
+ 1. In the command prompt, run the following command.
+
+ ```Shell
+ choco install android-sdk
+ ```
+ 1. If not present, add the following file paths to the `PATH` system environment variable.
+
+ ```
+ Path to tools directory in the Android SDK installation folder
+ Path to platform-tools directory in the Android SDK installation folder
+ ```
+
+ For example: `PATH=...;...;C:\Users\MyUser\AppData\Local\Android\android-sdk\tools;C:\Users\MyUser\AppData\Local\Android\android-sdk\platform-tools`
+ 1. Restart the command prompt and run the following command.
+
+ ```
+ android update sdk
+ ```
+ 1. Select all packages for the Android 19 SDK and any other SDKs that you want to install and click **Install**.
+1. (Optional) Install Genymotion. Genymotion is a third-party native emulator.
+ 1. Go to [Get Genymotion](https://www.genymotion.com/#!/download), select Windows and click **Get Genymotion**. You might want to download the larger archive which contains VirtualBox.
+ 1. If prompted, confirm the download.
+ 1. After the download completes, run the installer and complete the installation.
+1. Install the NativeScript CLI.
+ 1. Run the following command.
+
+ ```Shell
+ npm i -g nativescript
+ ```
+ 1. Restart the command prompt.
+
+[NativeScript CLI]: https://www.npmjs.com/package/nativescript
\ No newline at end of file
diff --git a/quick-start/setup/quick-setup.md b/quick-start/setup/quick-setup.md
new file mode 100644
index 000000000..6c861c1ba
--- /dev/null
+++ b/quick-start/setup/quick-setup.md
@@ -0,0 +1,45 @@
+---
+nav-title: Set Up Your System
+title: Set Up Your System
+description: Choose between a local and cloud tool set and set up our system to work with NativeScript.
+position: 1
+---
+
+# Set Up Your System
+
+Before you can begin development with NativeScript, you need to choose your tool set and configure your system to use it.
+
+When you develop with NativeScript, you can choose between a local tool set ([NativeScript Command-Line Interface][NativeScript CLI]) and a cloud tool set ([Telerik AppBuilder][AppBuilder]).
+
+* [The NativeScript CLI](#the-nativescript-cli)
+* [The AppBuilder Tool Set](#the-appbuilder-toolset)
+
+## The NativeScript CLI
+
+*Create, store, develop, build and test apps locally and free of charge on Windows, OS X or Ubuntu*
+
+With the open-source [NativeScript Command-Line Interface][NativeScript CLI] and an IDE or text editor of your choice, you can create, develop, store and build your apps entirely locally, free of charge, without an Internet connection and anonymously.
+
+To take advantage of this autonomy, you need to configure your system with the tools and SDKs for native development of the platforms for which you want to develop. The NativeScript CLI uses them to produce truly native builds of your cross-platform projects.
+
+> **TIP:** If you are familiar with the Apache Cordova CLI, you might want to try the NativeScript CLI. It provides a similar set of commands and an identical experience.
+
+* [Set Up on Windows](/ns-cli-setup/ns-setup-win.md)
+* [Set Up on OS X](/ns-cli-setup/ns-setup-win.md)
+* [Set Up on Linux](/ns-cli-setup/ns-setup-linux.md)
+
+## The AppBuilder Tool Set
+
+*Create, store, develop, build and test apps in the cloud without installing any additional dependencies*
+
+[Telerik AppBuilder][AppBuilder] provides a wide range of IDE choices paired with storage, compile and build services in the cloud. If you have access to the Internet and a Telerik account, you can use AppBuilder to develop NativeScript apps without configuring any additional tools and SDKs for native development. Telerik AppBuilder takes your cross-platform project, compiles and builds it in the cloud and produces a truly native app.
+
+> **TIP:** If you are unfamiliar with the complexity of native development, you might want to try the AppBuilder tool set. It does not require additional tools and SDKs installed on your system.
+
+* [Set Up the In-Browser Client](/ab-setup/ab-web-setup.md)
+* [Set Up the Windows Client](/ab-setup/ab-win-setup.md)
+* [Set Up the Extension for Visual Studio](/ab-setup/ab-vse-setup.md)
+* [Set Up the Command-Line Interface](/ab-setup/ab-cli-setup.md)
+
+[NativeScript CLI]: https://www.npmjs.com/package/nativescript
+[AppBuilder]: http://www.telerik.com/appbuilder
\ No newline at end of file
diff --git a/ui-dialogs.md b/ui-dialogs.md
index 67ea9bd98..d36ca9fea 100644
--- a/ui-dialogs.md
+++ b/ui-dialogs.md
@@ -1,26 +1,26 @@
---
-nav-title: "Dialogs"
-title: "Dialogs"
-description: "NativeScript Documentation: Dialogs"
+nav-title: Dialogs
+title: Dialogs
+description: Learn how to create alerts, confirmations, prompts, logins and other dialogs in your NativeScript apps.
position: 9
---
# Dialogs
-### How it works?
-You can show native platform dialogs using API similar to the web browser. For example:
-```JavaScript
-var dialogs = require("ui/dialogs");
-dialogs.alert("Your message");
-```
-```TypeScript
-import dialogs = require("ui/dialogs");
-dialogs.alert("Your message");
-```
-Available dialogs are: **alert**, **confirm**, **prompt**, **login** and **action**.
-*__Important__: Dialog functions can be called with parameters similar to the web browser API or options object. All dialog functions will return Promise!*
+NativeScript lets you create dialogs in your app in a manner similar to the web browser. You can create alerts, confirmations, prompts, logins and dialogs that require action.
+
+* [Alert](#alert)
+* [Confirm](#confirm)
+* [Prompt](#prompt)
+* [Login](#login)
+* [Action](#action)
+
+> You can call dialog functions with parameters similar to the web browser API or the `options` object. All dialog functions return a `Promise` object.
### Alert
+
+**Web-Browser Style**
+
```JavaScript
var dialogs = require("ui/dialogs");
dialogs.alert("Your message").then(function() {
@@ -33,7 +33,9 @@ dialogs.alert("Your message").then(()=> {
console.log("Dialog closed!");
});
```
-OR
+
+**Using an Options Object**
+
```JavaScript
var dialogs = require("ui/dialogs");
dialogs.alert({
@@ -54,7 +56,11 @@ dialogs.alert({
console.log("Dialog closed!");
});
```
+
### Confirm
+
+**Web-Browser Style**
+
```JavaScript
var dialogs = require("ui/dialogs");
dialogs.confirm("Your message").then(function (result) {
@@ -67,7 +73,9 @@ dialogs.confirm("Your message").then(result => {
console.log("Dialog result: " + result);
});
```
-OR
+
+**Using an Options Object**
+
```JavaScript
var dialogs = require("ui/dialogs");
dialogs.confirm({
@@ -94,9 +102,13 @@ dialogs.confirm({
console.log("Dialog result: " + result);
});
```
-*__Important__: Dialog result argument is boolean. True if the dialog is closed with OK button, false if closed with Cancel button, undefined if closed with neutral button.*
+
+> The dialog result argument is boolean. The result is true if the dialog is closed with the OK button. The result is false if closed with the Cancel button. The result is undefined if closed with a neutral button.
### Prompt
+
+**Web-Browser Style**
+
```JavaScript
var dialogs = require("ui/dialogs");
// Second argument is optional.
@@ -111,7 +123,9 @@ dialogs.prompt("Your message", "Default text").then(r => {
console.log("Dialog result: " + r.result + ", text: " + r.text);
});
```
-OR
+
+**Using an Options Object**
+
```JavaScript
var dialogs = require("ui/dialogs");
// inputType property can be dialogs.inputType.password or dialogs.inputType.text.
@@ -142,9 +156,12 @@ dialogs.prompt({
console.log("Dialog result: " + r.result + ", text: " + r.text);
});
```
-*__Important__: Dialog result argument is object with two properties: result and text (entered text). Result property is true if the dialog is closed with OK button, false if closed with Cancel button, undefined if closed with neutral button.*
+> The dialog result argument is an object with two properties: result and text (entered text). The result property is true if the dialog is closed with the OK button, false if closed with the Cancel button or undefined if closed with a neutral button.
### Login
+
+**Web-Browser Style**
+
```JavaScript
var dialogs = require("ui/dialogs");
// User name and password arguments are optional.
@@ -159,7 +176,9 @@ dialogs.login("Your message", "User name", "Password").then(r => {
console.log("Dialog result: " + r.result + ", user: " + r.userName + ", pwd: " + r.password);
});
```
-OR
+
+**Using an Options Object**
+
```JavaScript
var dialogs = require("ui/dialogs");
dialogs.login({
@@ -188,9 +207,13 @@ dialogs.login({
console.log("Dialog result: " + r.result + ", user: " + r.userName + ", pwd: " + r.password);
});
```
-*__Important__: Dialog result argument is object with three properties: result, userName and password (entered user name and password). Result property is true if the dialog is closed with OK button, false if closed with Cancel button, undefined if closed with neutral button.*
+
+> The dialog result argument is an object with three properties: result, userName and password (entered user name and password). The result property is true if the dialog is closed with the OK button, false if closed with the Cancel button or undefined if closed with a neutral button.
### Action
+
+**Web-Browser Style**
+
```JavaScript
var dialogs = require("ui/dialogs");
dialogs.action("Your message", "Cancel button text", ["Option1", "Option2"]).then(function (result) {
@@ -203,7 +226,9 @@ dialogs.action("Your message", "Cancel button text", ["Option1", "Option2"]).the
console.log("Dialog result: " + result)
});
```
-OR
+
+**Using an Options Object**
+
```JavaScript
var dialogs = require("ui/dialogs");
dialogs.action({
@@ -224,4 +249,4 @@ dialogs.action({
console.log("Dialog result: " + result)
});
```
-*__Important__: Dialog result argument is string (clicked option text or cancel button text).*
+> The dialog result argument is a string (the text of the clicked option or the text of the cancel button).
diff --git a/ui-views.md b/ui-views.md
index 579317dde..7d65224f0 100644
--- a/ui-views.md
+++ b/ui-views.md
@@ -1,13 +1,11 @@
---
-nav-title: "Views"
-title: "Views"
-description: "Views"
+nav-title: Views
+title: Views
+description: Get familiar with the default user interface elements (widgets) in NativeScript.
position: 8
---
-NativeScript ships with set of UI Views which can be used for building the UI of a mobile application. Most of these views wrap the corresponding native view for each platform, while providing a common API for working with them. For example the `Button` view renders an [`android.widget.Button`](http://developer.android.com/reference/android/widget/Button.html) on Android and [`UIButton`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIButton_Class/) on iOS.
-
-In this topic we will to go trough the following views available in NativeScript platform:
+NativeScript ships with a set of user interface [`Views`](./ApiReference/ui/core/view/README.md) (also known as widgets) which you can use to build the user interface of a mobile application. Most of these views wrap the corresponding native view for each platform while providing a common API for working with it. For example the `Button` view renders an [`android.widget.Button`](http://developer.android.com/reference/android/widget/Button.html) on Android and [`UIButton`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIButton_Class/) on iOS.
* [Button](#button)
* [Label](#label)
@@ -24,159 +22,175 @@ In this topic we will to go trough the following views available in NativeScript
* [TabView](#tabview)
* [Dialogs](#dialogs)
-Defining the layout of the application is also an important part of the application development. You can refer to the [ layouts article ](layouts.md) for more information about the different layout containers that are available in NativeScript.
-
-**Note**: The underlying native widget for each view can be accessed runtime using the following properties:
+Defining the layout of the application is also an important part of the application development. For more information about the different layout containers that are available in NativeScript, see [The NativeScript Layout System](layouts.md).
-* Andoird - `.android`
-* iOS - `.ios`
+> **TIP:** You can access the underlying native widget for each view at runtime using the following properties.
+>
+> * Android: `.android`
+> * iOS: `.ios`
+>
+> Accessing the native widgets might be useful when you want to use some platform-specific functionalities of the widget. You can find information about the underlying native component for each view below.
-Accessing the native widgets can be useful when you want to use some platform specific functionalities of the widget. You can find information about the underlying native component for each view at the end of its section.
+## Button
-##Button
-A standard Button widget that reacts to a 'tap' event.
+This widget provides a standard button widget that reacts to a `tap` event.
-Native component:
+**Native Component**
| Android | iOS |
|:----------------------|:---------|
| [android.widget.Button](http://developer.android.com/reference/android/widget/Button.html) | [UIButton](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIButton_Class/) |
-##Label
-A text label used for displaying read-only text.
+## Label
+
+This widget provides a text label that shows read-only text.
-Native component:
+**Native Component**
| Android | iOS |
|:----------------------|:---------|
| [android.widget.TextView](http://developer.android.com/reference/android/widget/TextView.html) | [UILabel](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UILabel_Class/) |
-##TextField
-An editable **single-line** text field.
+## TextField
+
+This widget provides an editable **single-line** text field.
-Native component:
+**Native Component**
| Android | iOS |
|:----------------------|:---------|
| [android.widget.EditText](http://developer.android.com/reference/android/widget/EditText.html) | [UITextField](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/) |
-##TextView
-An editable **multi-line** text view. It is typically used multi-lines text content and also supports text editing.
+## TextView
+
+This widget provides an editable **multi-line** text view.
+
+You can use it to show multi-line text and implement text editing.
-Native component:
+**Native Component**
| Android | iOS |
|:----------------------|:---------|
| [android.widget.EditText](http://developer.android.com/reference/android/widget/EditText.html) | [UITextView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextView_Class/) |
-##SearchBar
-A view that provides a user interface for the user to enter a search query and submit a request to a search provider.
+## SearchBar
+
+This view provides a user interface for entering search queries and submitting requests to search provider.
-Native component:
+**Native Component**
| Android | iOS |
|:----------------------|:---------|
| [android.widget.SearchView](http://developer.android.com/reference/android/widget/SearchView.html) | [UISearchBar](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/) |
-##Switch
-The Switch view is a two-state toggle switch widget that can select between two options.
+## Switch
+
+This widget provides a two-state toggle switch with which you can choose between two options.
-Native component:
+**Native Component**
| Android | iOS |
|:----------------------|:---------|
| [android.widget.Switch](http://developer.android.com/reference/android/widget/Switch.html) | [UISwitch](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISwitch_Class/) |
-##Slider
-Represents as slider component the can be used to pick a numeric value between a configurable range.
+## Slider
+
+This widget provides a slider which you can use to pick a numeric value within a configurable range.
-Native component:
+**Native Component**
| Android | iOS |
|:-----------------------|:---------|
| [android.widget.SeekBar](http://developer.android.com/reference/android/widget/SeekBar.html) | [UISlider](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISlider_Class/) |
-##Progress
-A visual indicator of a progress in some operation. Displays a bar representing how far the operation has progressed and the amount of progress can be changed by the application logic.
+## Progress
+
+This widget is a visual bar indicator of a progress in a operation. Shows a bar representing the current progress of the operation.
-Native component:
+**Native Component**
| Android | iOS |
|:-----------------------|:---------|
| [android.widget.ProgressBar](http://developer.android.com/reference/android/widget/ProgressBar.html) (indeterminate = false) | [UIProgressView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIProgressView_Class/) |
-##ActivityIndicator
-A visual indicator(a.k.a. spinner) showing that a task is in progress.
+## ActivityIndicator
+
+This widget is a visual spinner indicator which shows that a task is in progress.
-Native component:
+**Native Component**
| Android | iOS |
|:-----------------------|:---------|
| [android.widget.ProgressBar](http://developer.android.com/reference/android/widget/ProgressBar.html) (indeterminate = true) | [UIActivityIndicatorView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIActivityIndicatorView_Class/) |
-##Image
-A view used for displaying an image. The image can be loaded either form [ImageSource]() or form url.
+## Image
+
+This widget shows an image. You can load the image can be from [`ImageSource`](./ApiReference/image-source/ImageSource.md) or from URL.
-Native component:
+**Native Component**
| Android | iOS |
|:-----------------------|:---------|
| [android.widget.ImageView](http://developer.android.com/reference/android/widget/ImageView.html) | [UIImageView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImageView_Class/) |
-##ListView
-A view that shows items in a vertically scrolling list. An itemTemplate can be set on the ListView to specify how each item in the list should be displayed.
+## ListView
+
+This is a view that shows items in a vertically scrolling list. You can set an [`itemTemplate`](/ApiReference/ui/list-view/knownTemplates/README.md) to specify how each item in the list should be displayed.
-Native component:
+**Native Component**
| Android | iOS |
|:-----------------------|:---------|
| [android.widget.ListView](http://developer.android.com/reference/android/widget/ListView.html) | [UITableView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableView_Class/) |
-##WebView
-A View that displays web pages. It supports loading pages from URL and navigating back and forward.
+## WebView
+
+This is a view that shows web pages. You can load a page from URL or by navigating back and forward.
-Native component:
+**Native Component**
| Android | iOS |
|:-----------------------|:---------|
| [android.webkit.WebView](http://developer.android.com/reference/android/webkit/WebView.html) | [UIWebView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/) |
-##TabView
-The TabView control is used for implementing tab navigation.
+## TabView
+
+With the `TabView` control, you can implement tab navigation.
-Native component:
+**Native Component**
| Android | iOS |
|:-----------------------|:---------|
| [android.support.v4.view.ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) | [UITabBarController](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/) |
-##Dialogs
-The dialogs module contains function for displaying dialog windows.
+## Dialogs
+
+The dialogs module lets you create and show dialog windows.
-
+
\ No newline at end of file
diff --git a/ui-with-xml.md b/ui-with-xml.md
index cd978c157..927812b5a 100644
--- a/ui-with-xml.md
+++ b/ui-with-xml.md
@@ -1,14 +1,48 @@
---
-nav-title: "UI with XML"
-title: "UI with XML"
-description: "NativeScript Documentation: UI with XML"
-position: 7
+nav-title: XML-Based User Interface
+title: XML-Based User Interface
+description: Learn the basic principles of designing a user interface with NativeScript. In NativeScript, you can design the UI using XML and CSS.
+position: 6
---
-# UI with XML
-### How it works?
-When you trigger navigation in your application (either by setting a value to the **mainModule** property of the **application** object, or by passing an argument to the **navigate()** method of the **Frame** class), the **NativeScript** navigation framework will look for an XML-extension-file with the same path to load and navigate to the respective **Page**. For example:
-###### Declaring application mainModule and start the application
+# XML-Based User Interface
+
+The user interface of NativeScript mobile apps consists of pages. Typically, the design of the user interface is developed and stored in `XML` files, styling is done via CSS and the business logic is developed and stored in `JavaScript` or `TypeScript` files.
+
+* [The Basics](#the-basics)
+ * [Declare the Home Page](#declare-the-home-page)
+ * [Navigate to Page](#navigate-to-page)
+ * [Execute Business Logic](#execute-business-logic)
+* [User Interface Components](#user-interface-components)
+ * [The Default Content Components](#the-default-content-components)
+ * [Page](#page)
+ * [TabView](#tabview)
+ * [ScrollView](#scrollview)
+ * [StackLayout](#stacklayout)
+ * [GridLayout](#gridlayout)
+ * [WrapLayout](#wraplayout)
+ * [AbsoluteLayout](#absolutelayout)
+ * [Custom Components](#custom-components)
+* [Bindings](#bindings)
+ * [Property Binding](#property-binding)
+ * [Event Binding](#event-binding)
+ * [ListView Binding](#listview-binding)
+ * [Expressions](#expressions)
+
+## The Basics
+
+When you develop the user interface of you app, you can implement each application screen in a separate page or implement your application screens on a single page with a tab view.
+
+For each page, you need to have a separate `XML` file which holds the layout of the page. For each `XML` file that NativeScript parses, the framework also looks for a `JavaScript` or `TypeScript` file with the same name and executes the business logic inside it.
+
+### Declare the Home Page
+
+Each NativeScript app must have a home page - the page that loads when you launch the app.
+
+You need to explicitly set the home page for your app. You can do this by setting the `mainModule` member of the [`Application`](ApiReference/application/README.md) module.
+
+When you set the `mainModule`, the NativeScript navigation framework looks for an `XML` file with the specified name, loads it and navigates to the respective page. If NativeScript discovers a `JavaScript` or `TypeScript` file with the same name, it executes the code inside it.
+
```JavaScript
var application = require("application");
// Set the start module for the application
@@ -23,7 +57,13 @@ application.mainModule = "app/my-page";
// Start the application
application.start();
```
-###### Navigate to page using Frame navigate() method
+
+### Navigate to Page
+
+You can navigate between pages with the `navigate` method of the [`Frame`](./ApiReference/ui/frame/Frame.md) class. The [`Frame`](ApiReference/ui/frame/Frame.md) class represents the logical unit that is responsible for navigation between different pages. Typically, each app has one frame at the root level - the topmost frame.
+
+When you trigger navigation, NativeScript looks for an `XML` file with the specified name, loads it and navigates to the respective page. If NativeScript discovers a `JavaScript` or `TypeScript` file with the same name, it executes the code inside it.
+
```JavaScript
// Navigate to page called “my-page”
frames.topmost().navigate("app/my-page")
@@ -32,8 +72,17 @@ frames.topmost().navigate("app/my-page")
// Navigate to page called “my-page”
frames.topmost().navigate("app/my-page")
```
-*__Important__: Paths are relative to the application root! In this case NativeScript will look for the following XML file within your application (app/my-page.xml in this case)!*
-###### XML
+
+> Paths are relative to the application root. In the example above, NativeScript looks for a my-page.xml file in the app directory of your project.
+
+### Execute Business Logic
+
+When you have a `JavaScript` or a `TypeScript` file in the same location with the same name as your `XML` file, NativeScript loads it together with the `XML` file. In this `JavaScript` or `TypeScript` file you can manage event handlers, bind context or execute additional business logic.
+
+#### Example
+
+In this example of `main-page.xml`, your page consists of a button. When you tap the button, the `buttonTap` function triggers.
+
```XML
@@ -42,8 +91,9 @@ frames.topmost().navigate("app/my-page")
```
-If you have a **JavaScript-extension-file** with the same path (app/my-page.js), this file will be loaded together with the XML and will serve as a code-behind for the page where you can specify **event handlers, binding context and/or any other additional code**. In order to be accessible from the UI you need to declare your variables or functions in the module **exports**.
-###### Code
+
+This example app is a simple counter app. The logic for the counter is implemented in a `main-page.js` or `main-page.ts` file.
+
```JavaScript
var view = require("ui/core/view");
var count = 0;
@@ -78,32 +128,47 @@ export function buttonTap(args: observable.EventData) {
}
}
```
-*__Important__: Each attribute value in the XML declaration will be set to respective property of the component, if there is no such property the value will be set as an expando.!*
-### Using Built-in components in an XML
-Default *NativeScript* components can be found under the *tns_modules/ui* subfolder. Each component is located in a separate folder with a *package.json* file where the main component/file is specified
-###### Button package.json
-```JavaScript
-{
- "name" : "button",
- "main" : "button.js"
-}
-```
-###### button.js
+
+> To access variables or functions from the user interface, you need to declare them im the `exports` module.
+>
+> NativeScript sets each attribute value in the XML declaration to a respective property of the component. If a respective property does not exist, NativeScript sets the attribute value as an expando object.
+
+## User Interface Components
+
+NativeScript provides a wide range of built-in user interface components - layouts and widgets. You can also create your own custom user interface components.
+
+When NativeScript parses your `XML` files, it looks for components which match a name in the module exports.
+
+For example, when you have a `Button` declaration in your `XML` file, NativeScript looks for a `Button` name in the module exports.
+
```JavaScript
var Button = ...
...
exports.Button = Button;
```
-*__Important__: When parsing the XML, NativeScript will look for a component which has a matching name in the module exports!*
-## Content components
-### Page
-###### XML
+
+### The Default Content Components
+
+The top-level user interface components are content components - pages and layouts. These content components let you arrange your interactive user interface components in specific ways.
+
+#### Page
+
+Your application pages (or screens) are instances of the [`page`](ApiReference/ui/page/Page.md) class of the [`Page`](ApiReference/ui/page/README.md) module. Typically, our app will consist of multiple application screens.
+
+##### Example
+
+You can execute some business login when your page loads using the `pageLoaded` event.
+
+You need to set the `loaded` attribute for your page in your `main-page.xml`.
+
```XML
…
```
-###### Code
+
+You need to handle the business logic that loads in a `main-page.js` or `main-page.ts` file.
+
```JavaScript
function pageLoaded(args) {
var page = args.object;
@@ -120,8 +185,15 @@ export function pageLoaded(args: observable.EventData) {
var page = args.object;
}
```
-### TabView
-###### XML
+
+#### TabView
+
+With a [`tabview`](./ApiReference/ui/tab-view/README.md), you can avoid spreading your user interface across multiple pages. Instead, you can have one page with multiple tabs.
+
+##### Example
+
+The following sample `main-page.xml` contains two tabs with labels.
+
```XML
@@ -140,7 +212,9 @@ export function pageLoaded(args: observable.EventData) {
```
-###### Code
+
+The respective `main-page.js` or `main-page.ts` loads the first tab by its ID and shows its contents.
+
```JavaScript
var view = require("ui/core/view");
function pageLoaded(args) {
@@ -164,8 +238,15 @@ export function pageLoaded(args: observable.EventData) {
tabView1.selectedIndex = 1;
}
```
-### ScrollView
-###### XML
+
+#### ScrollView
+
+You can insert a [`scrollView`](./ApiReference/ui/scroll-view/README.html) inside your page to make the page or the content enclosed in the `scrollView` scrollable.
+
+##### Example
+
+This sample `main-page.xml` shows how to insert a `scrollView` inside your page.
+
```XML
@@ -173,8 +254,15 @@ export function pageLoaded(args: observable.EventData) {
```
-### StackLayout
-###### XML
+
+#### StackLayout
+
+You can arrange the user interface components in your page in a horizontal or vertical stack using [`stackLayout`](./ApiReference/ui/layouts/stack-layout/README.html).
+
+##### Example
+
+This sample `main-page.xml` shows how to arrange the labels in a page in a horizontal stack.
+
```XML
@@ -183,8 +271,15 @@ export function pageLoaded(args: observable.EventData) {
```
-### GridLayout
-###### XML
+
+#### GridLayout
+
+You can arrange the user interface components in your page in a flexible grid area using [`gridLayout`](./ApiReference/ui/layouts/grid-layout/README.html).
+
+##### Example
+
+This sample `main-page.xml` shows how to arrange labels inside a table by setting their position by row or column. stack.
+
```XML
@@ -196,8 +291,15 @@ export function pageLoaded(args: observable.EventData) {
```
-### WrapLayout
-###### XML
+
+#### WrapLayout
+
+You can arrange your user interface components in rows or columns until the space is filled and then wrap them on a new row or column using [`wrapLayout`](./ApiReference/ui/layouts/wrap-layout/README.html). By default, if orientation is not specified, `wrapLayout` arranges items horizontally.
+
+##### Example
+
+This sample `main-page.xml` provides four labels wrapped horizontally within the visible space of the page.
+
```XML
@@ -208,8 +310,15 @@ export function pageLoaded(args: observable.EventData) {
```
-### AbsoluteLayout
-###### XML
+
+#### AbsoluteLayout
+
+You can arrange your user interface components by left/top coordinates using [`absoluteLayout`](./ApiReference/ui/layouts/absolute-layout/README.html).
+
+##### Example
+
+The following `main-page.xml` contains a page with a single label positioned at the specified coordinates.
+
```XML
@@ -217,21 +326,28 @@ export function pageLoaded(args: observable.EventData) {
```
-### Custom/user components
-Using **xmlns** you can refer to your own custom components declared in your application. For example
-###### XML
+
+### Custom Components
+
+You can define your own XML namespaces to create custom user interface components.
+
+#### Example: Code-Only Custom Component
+
+This sample `main-page.xml` uses two custom components defined in separate declarations in the `xml-declaration` directory. The custom controls are wrapped horizontally.
+
```XML
+ xmlns:customControls="app/xml-declaration/mymodule"
+ xmlns:customOtherControls="app/xml-declaration/mymodulewithxml">
```
-### Code-only custom component (app/xml-declaration/mymodule)
-###### Code
+
+This sample custom component declared in `app/xml-declaration/mymodule.js` or `app/xml-declaration/mymodule.ts` exports the `MyControl` variable which creates a simple counter inside your `main-page.xml` page.
+
```JavaScript
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
@@ -284,15 +400,27 @@ export class MyControl extends stackLayout.StackLayout {
}
}
```
-### Custom component with XML (app/xml-declaration/mymodulewithxml)
-###### XML
+
+### Example: Custom XML-Based Component
+
+This sample `main-page.xml` uses a custom component defined in a `app/xml-declaration/mymodulewithxml.js` or `app/xml-declaration/mymodulewithxml.ts` file. This page contains a label and button.
+
```XML
-
-
-
-
+
+
+
+
+
+
+
+
+
```
-###### Code
+
+The custom component in `app/xml-declaration/mymodulewithxml.js` or `app/xml-declaration/mymodulewithxml.ts` exports the `buttonTap` function which changes the label on every tap of the button in `main-page.xml`.
+
```JavaScript
var view = require("ui/core/view");
var count = 0;
@@ -326,10 +454,17 @@ export function buttonTap(args: observable.EventData) {
}
}
```
-### Bindings & expressions
-To specify binding or expression for some property in the XML you can use double curly brackets syntax.
-#### Property binding
-###### XML
+
+## Bindings
+
+To set a binding for a property in the `XML`, you can use double curly brackets syntax.
+
+### Property Binding
+
+> NativeScript looks for the custom property in the `bindingContext` of the current component or the `bindingContext` of its parents. By default, all bindings are two-way bindings.
+
+This sample `main-page.xml` contains a simple label whose text will be populated when the page loads.
+
```XML
{%raw%}
@@ -337,7 +472,9 @@ To specify binding or expression for some property in the XML you can use double
{%endraw%}
```
-###### Code
+
+This sample `main-page.js` or `main-page.ts` file sets a `bindingContext` for the page. The `bindingContext` contains the custom property and its value. When NativeScript parses `main-page.xml`, it will populate the custom name property with the value in the `bindingContext`.
+
```JavaScript
function pageLoaded(args) {
var page = args.object;
@@ -355,10 +492,11 @@ export function pageLoaded(args: observable.EventData) {
page.bindingContext = { name: "Some name" };
}
```
-*__Important__: NativeScript will look for this property in the component bindingContext or bindingContext of the component parents. All bindings are two way by default!*
-#### Event binding
-###### XML
+### Event Binding
+
+This sample `main-page.xml` contains a button. The text for the button and the event that the button triggers are determined when the page loads from the matching `main-page.js` or `main-page.ts` file.
+
```XML
{%raw%}
@@ -366,13 +504,16 @@ export function pageLoaded(args: observable.EventData) {
{%endraw%}
```
-###### Code
+
+This sample `main-page.js` or `main-page.ts` sets a `bindingContext` for the page. The `bindingContext` contains the custom property for the button text and its value and the custom function that will be triggered when the button is tapped. When NativeScript parses `main-page.xml`, it will populate the button text with the value in the `bindingContext` and will bind the custom function to the tap event.
+
```JavaScript
function pageLoaded(args) {
var page = args.object;
page.bindingContext = {
myProperty: "Some text",
myFunction: function () {
+ // Your code
}
};
}
@@ -392,42 +533,17 @@ export function pageLoaded(args: observable.EventData) {
};
}
```
-#### Expressions
-###### Complex property paths
-```JavaScript
-your.sub.property[name]
-```
-###### Logical not operator and comparators
-```JavaScript
-!,<, >, <=, >=, ==, !=, ===, !==,||, &&
-```
-###### Unary and binary operators
-```JavaScript
-+, -, *, /, %
-```
-###### Ternary operator
-```JavaScript
-a ? b : c
-```
-###### Grouping
-```JavaScript
-(a + b) * (c + d)
-```
-###### Constants
-```JavaScript
-numbers, strings, null, undefined
-```
-Examples:
-###### XML
-```XML
-{%raw%}
-
-
-{%endraw%}
-```
-*__Important__: Expressions are re-evaluated on every property change of the Observable object set for bindingContext! In this case the binding is one way (from model to UI)*
-### Templates and scope
-UI components like **ListView** will create items in runtime by parsing and loading content from **itemTemplate** property if specified.
+
+### ListView Binding
+
+You can use the double curly brackets syntax to bind the items to a [`listView`](./ApiReference/ui/list-view/README.md). You can also define a template with the `itemTemplate` property from which NativeScript will create the items for your `listView`.
+
+> Avoid accessing components by ID, especially when the component is part of a template. It is recommended to use bindings to specify component properties.
+
+NativeScript can create the items in a from template when the `listView` loads inside your page. When you work with templates and a `listView`, keep in mind the scope of the `listView` and its items.
+
+In this sample `main-page.xml`, the ListView consists of labels and each item will be created from template. The text for each label is the value of the name property for the corresponding item.
+
```XML
{%raw%}
@@ -439,7 +555,9 @@ UI components like **ListView** will create items in runtime by parsing and load
{%endraw%}
```
-While you can access **ListView** (listView1) by **id** from the **Page** you cannot access the **Label** (label1) in the same way since this component (label1) is in a different scope and the **ListView** will create such Label for every item.
+
+The sample `main-page.js` or `main-page.ts` populates the `bindingContext` for the page. In this case, the code sets values for the name property for each label. Note that because the `ListView` and the Label have different scopes, you can access ListView by ID from the page but you cannot access the Label by ID. The `ListView` creates a new `Label` for every item.
+
```JavaScript
var view = require("ui/core/view");
function pageLoaded(args) {
@@ -472,4 +590,54 @@ export function pageLoaded(args: observable.EventData) {
var label1 = view.getViewById(page, "label1");
}
```
-*__Important__: Accessing directly components by id is not recommended (especially when the component is part of template). Please use bindings to specify component properties!*
+
+### Expressions
+
+To set an expression as the value for a property in the `XML`, you can use double curly brackets syntax.
+
+> NativeScript reevaluates your expression on every property change of the `Observable` object set for `bindingContext`. This binding is a one-way binding - from the view model to the user interface.
+
+The following sample `main-page.xml` shows how to set an expression as the value for a label.
+
+```XML
+{%raw%}
+
+
+{%endraw%}
+```
+
+**Complex Property Paths**
+
+```JavaScript
+your.sub.property[name]
+```
+
+**Logical Not operator and Comparators**
+
+```JavaScript
+!,<, >, <=, >=, ==, !=, ===, !==,||, &&
+```
+
+**Unary and Binary Operators**
+
+```JavaScript
++, -, *, /, %
+```
+
+**Ternary Operator**
+
+```JavaScript
+a ? b : c
+```
+
+**Grouping**
+
+```JavaScript
+(a + b) * (c + d)
+```
+
+**Constants**
+
+```JavaScript
+numbers, strings, null, undefined
+```
\ No newline at end of file