From a5898d867ecf99786553beb5dcf11a36c81856e3 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Mon, 23 Feb 2015 14:44:08 +0200 Subject: [PATCH 01/19] Corrupted line endings --- ui-views.md | 364 ++++++++++++++++++++++++++-------------------------- 1 file changed, 182 insertions(+), 182 deletions(-) diff --git a/ui-views.md b/ui-views.md index 46dfc0a27..579317dde 100644 --- a/ui-views.md +++ b/ui-views.md @@ -1,182 +1,182 @@ ---- -nav-title: "Views" -title: "Views" -description: "Views" -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: - -* [Button](#button) -* [Label](#label) -* [TextField](#textfield) -* [TextView](#textview) -* [SearchBar](#searchbar) -* [Switch](#switch) -* [Slider](#slider) -* [Progress ](#progress) -* [ActivityIndicator](#activityindicator) -* [Image](#image) -* [ListView](#listview) -* [WebView](#webview) -* [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: - -* Andoird - `.android` -* iOS - `.ios` - -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 -A standard Button widget that reacts to a 'tap' event. - -![button android](img/gallery/android/buttonPage.png "button android")![button ios](img/gallery/ios/buttonPage.png "button ios") - -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 android](img/gallery/android/labelPage.png "label android")![label ios](img/gallery/ios/labelPage.png "label ios") - -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. - -![text-field android](img/gallery/android/textFieldPage.png "text-field android")![text-field ios](img/gallery/ios/textFieldPage.png "text-field ios") - -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. - -![text-view android](img/gallery/android/textViewPage.png "text-view android")![text-view ios](img/gallery/ios/textViewPage.png "text-view ios") - -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. - -![search-bar android](img/gallery/android/searchBarPage.png "search-bar android")![search-bar ios](img/gallery/ios/searchBarPage.png "search-bar ios") - -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 android](img/gallery/android/switchPage.png "switch android")![switch ios](img/gallery/ios/switchPage.png "switch ios") - -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 android](img/gallery/android/sliderPage.png "slider android")![slider ios](img/gallery/ios/sliderPage.png "slider ios") - -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 android](img/gallery/android/progressPage.png "progress android")![progress ios](img/gallery/ios/progressPage.png "progress ios") - -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. - -![activity-indicator android](img/gallery/android/activityIndicatorPage.png "activity-indicator android")![activity-indicator ios](img/gallery/ios/activityIndicatorPage.png "activity-indicator ios") - -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 android](img/gallery/android/imagePage.png "image android")![image ios](img/gallery/ios/imagePage.png "image ios") - -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. - -![list-view android](img/gallery/android/listViewPage.png "list-view android")![list-view ios](img/gallery/ios/listViewPage.png "list-view ios") - -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. - -![web-view android](img/gallery/android/webViewPage.png "web-view android")![web-view ios](img/gallery/ios/webViewPage.png "web-view ios") - -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. - -![tab-view android](img/gallery/android/tabViewPage.png "tab-view android")![tab-view ios](img/gallery/ios/tabViewPage.png "tab-view ios") - -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. - -![dialog-confirm android](img/gallery/android/dialogsPage_confirm.png "dialog-confirm android")![dialog-confirm ios](img/gallery/ios/dialogsPage_confirm.png "dialog-confirm ios") +--- +nav-title: "Views" +title: "Views" +description: "Views" +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: + +* [Button](#button) +* [Label](#label) +* [TextField](#textfield) +* [TextView](#textview) +* [SearchBar](#searchbar) +* [Switch](#switch) +* [Slider](#slider) +* [Progress ](#progress) +* [ActivityIndicator](#activityindicator) +* [Image](#image) +* [ListView](#listview) +* [WebView](#webview) +* [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: + +* Andoird - `.android` +* iOS - `.ios` + +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 +A standard Button widget that reacts to a 'tap' event. + +![button android](img/gallery/android/buttonPage.png "button android")![button ios](img/gallery/ios/buttonPage.png "button ios") + +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 android](img/gallery/android/labelPage.png "label android")![label ios](img/gallery/ios/labelPage.png "label ios") + +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. + +![text-field android](img/gallery/android/textFieldPage.png "text-field android")![text-field ios](img/gallery/ios/textFieldPage.png "text-field ios") + +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. + +![text-view android](img/gallery/android/textViewPage.png "text-view android")![text-view ios](img/gallery/ios/textViewPage.png "text-view ios") + +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. + +![search-bar android](img/gallery/android/searchBarPage.png "search-bar android")![search-bar ios](img/gallery/ios/searchBarPage.png "search-bar ios") + +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 android](img/gallery/android/switchPage.png "switch android")![switch ios](img/gallery/ios/switchPage.png "switch ios") + +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 android](img/gallery/android/sliderPage.png "slider android")![slider ios](img/gallery/ios/sliderPage.png "slider ios") + +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 android](img/gallery/android/progressPage.png "progress android")![progress ios](img/gallery/ios/progressPage.png "progress ios") + +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. + +![activity-indicator android](img/gallery/android/activityIndicatorPage.png "activity-indicator android")![activity-indicator ios](img/gallery/ios/activityIndicatorPage.png "activity-indicator ios") + +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 android](img/gallery/android/imagePage.png "image android")![image ios](img/gallery/ios/imagePage.png "image ios") + +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. + +![list-view android](img/gallery/android/listViewPage.png "list-view android")![list-view ios](img/gallery/ios/listViewPage.png "list-view ios") + +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. + +![web-view android](img/gallery/android/webViewPage.png "web-view android")![web-view ios](img/gallery/ios/webViewPage.png "web-view ios") + +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. + +![tab-view android](img/gallery/android/tabViewPage.png "tab-view android")![tab-view ios](img/gallery/ios/tabViewPage.png "tab-view ios") + +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. + +![dialog-confirm android](img/gallery/android/dialogsPage_confirm.png "dialog-confirm android")![dialog-confirm ios](img/gallery/ios/dialogsPage_confirm.png "dialog-confirm ios") From 76a25c0a182d81c53078d769b84be828b913a68b Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Mon, 23 Feb 2015 18:39:39 +0200 Subject: [PATCH 02/19] Edited Application Management --- application-management.md | 123 ++++++++++++++++++++++++-------------- 1 file changed, 78 insertions(+), 45 deletions(-) diff --git a/application-management.md b/application-management.md index 456c2a324..e11014db0 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. } ``` From 5d3081f6018f0aca8589be783044db960b70ddaa Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Tue, 24 Feb 2015 14:12:18 +0200 Subject: [PATCH 03/19] Edited the navigation article --- application-management.md | 2 +- navigation.md | 148 ++++++++++++++++++++++++++++---------- 2 files changed, 110 insertions(+), 40 deletions(-) diff --git a/application-management.md b/application-management.md index e11014db0..0e0a3c46e 100644 --- a/application-management.md +++ b/application-management.md @@ -152,4 +152,4 @@ export function pageLoaded(args: observable.EventData) { localSettings.remove("Name");// Removes the Name entry. console.log(localSettings.hasKey("Name"));// Prints false. } -``` +``` \ No newline at end of file diff --git a/navigation.md b/navigation.md index a2c4a162c..a40aa002c 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** property of the Application class: -``` 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, 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 From 6e7225f905f35e766e14ff0d4d6215607068b896 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Tue, 24 Feb 2015 18:13:52 +0200 Subject: [PATCH 04/19] Reworking the overview --- index.md | 67 +++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 22 deletions(-) diff --git a/index.md b/index.md index 5e31c2c5b..2e2a8c2e4 100644 --- a/index.md +++ b/index.md @@ -1,33 +1,56 @@ --- -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. +* [How Does It Work](#how-does-it-work) +* [How To Get Started](#how-to-get-started) +* [What's Next](#whats-next) -Use the [NativeScript CLI](cli.md) to create an application. +## How Does It Work -Read the advanced topics below or refer to the [Api Reference](ApiReference/) to build a powerful NativeScript application: +![architecture diagram](img/architecture.png "architecture diagram") -- [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) +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. -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 +## 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. + * If you are familiar with the Cordova CLI or if you want to develop and build your apps locally, 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.
This quick start development guide will introduce you to the basic architecture of a NativeScript app and how to implement the most basic styling. +1. Explore the modules overview and the API Reference.
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. + +* [Navigate Inside Your App](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 From ce2e8046370d96ec77a9ba4df0d167db953ee015 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Mon, 23 Feb 2015 18:39:39 +0200 Subject: [PATCH 05/19] Edited Application Management --- application-management.md | 123 ++++++++++++++++++++++++-------------- 1 file changed, 78 insertions(+), 45 deletions(-) diff --git a/application-management.md b/application-management.md index 456c2a324..e11014db0 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. } ``` From 94d20ecd9d3d3238e395c969b10a7d557a1c3ddc Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Tue, 24 Feb 2015 14:12:18 +0200 Subject: [PATCH 06/19] Edited the navigation article --- application-management.md | 2 +- navigation.md | 148 ++++++++++++++++++++++++++++---------- 2 files changed, 110 insertions(+), 40 deletions(-) diff --git a/application-management.md b/application-management.md index e11014db0..0e0a3c46e 100644 --- a/application-management.md +++ b/application-management.md @@ -152,4 +152,4 @@ export function pageLoaded(args: observable.EventData) { localSettings.remove("Name");// Removes the Name entry. console.log(localSettings.hasKey("Name"));// Prints false. } -``` +``` \ No newline at end of file diff --git a/navigation.md b/navigation.md index 432557829..a40aa002c 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, 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 From c00f54e9eeb6e7aecaf7d52aabb4eae18ca03721 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Tue, 24 Feb 2015 18:13:52 +0200 Subject: [PATCH 07/19] Reworking the overview --- index.md | 67 +++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 22 deletions(-) diff --git a/index.md b/index.md index 5e31c2c5b..2e2a8c2e4 100644 --- a/index.md +++ b/index.md @@ -1,33 +1,56 @@ --- -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. +* [How Does It Work](#how-does-it-work) +* [How To Get Started](#how-to-get-started) +* [What's Next](#whats-next) -Use the [NativeScript CLI](cli.md) to create an application. +## How Does It Work -Read the advanced topics below or refer to the [Api Reference](ApiReference/) to build a powerful NativeScript application: +![architecture diagram](img/architecture.png "architecture diagram") -- [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) +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. -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 +## 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. + * If you are familiar with the Cordova CLI or if you want to develop and build your apps locally, 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.
This quick start development guide will introduce you to the basic architecture of a NativeScript app and how to implement the most basic styling. +1. Explore the modules overview and the API Reference.
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. + +* [Navigate Inside Your App](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 From 9aa659fe7ab7f62dd8b612ae59f52a0605f93805 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Wed, 25 Feb 2015 19:06:28 +0200 Subject: [PATCH 08/19] Reworked layouts --- layouts.md | 135 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 88 insertions(+), 47 deletions(-) diff --git a/layouts.md b/layouts.md index 851bcaa51..ca6d4616d 100644 --- a/layouts.md +++ b/layouts.md @@ -1,78 +1,119 @@ --- -nav-title: "NativeScript Layouts" -title: "Layouts" -description: "NativeScript Documentation: Layouts" +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: 6 --- -[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. | ![AbsoluteLayout android](img/gallery/android/absoluteLayoutPage.png "AbsoluteLayout android")| -| [DockLayout][DockLayout] | Layout that arranges its children at its outer edges, and allows its last child to take up the remaining space. | ![DockLayout android](img/gallery/android/dockLayoutPage.png "DockLayout android")| -| [GridLayout][GridLayout] | Defines a rectangular layout area that consists of columns and rows. | ![GridLayout android](img/gallery/android/gridLayoutPage.png "GridLayout android")| -| [StackLayout][StackLayout] | Layout that arranges its children horizontally or vertically. The direction can be set by orientation property. | ![StackLayout android](img/gallery/android/stackLayoutPage.png "StackLayout android")| -| [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. | ![WrapLayout android](img/gallery/android/wrapLayoutPage.png "WrapLayout android")| \ No newline at end of file +| [AbsoluteLayout][AbsoluteLayout] | This layout lets you set exact locations (left/top coordinates) for its children. | ![AbsoluteLayout android](img/gallery/android/absoluteLayoutPage.png "AbsoluteLayout android")| +| [DockLayout][DockLayout] | This layout arranges its children at its outer edges and allows its last child to take up the remaining space. | ![DockLayout android](img/gallery/android/dockLayoutPage.png "DockLayout android")| +| [GridLayout][GridLayout] | This layout defines a rectangular layout area that consists of columns and rows. | ![GridLayout android](img/gallery/android/gridLayoutPage.png "GridLayout android")| +| [StackLayout][StackLayout] | This layout arranges its children horizontally or vertically. The direction is set with the orientation property. | ![StackLayout android](img/gallery/android/stackLayoutPage.png "StackLayout android")| +| [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. | ![WrapLayout android](img/gallery/android/wrapLayoutPage.png "WrapLayout android")| + +[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 From 9e21211c35fce9c1d1921b11c9a56ccd01185454 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Fri, 27 Feb 2015 19:02:23 +0200 Subject: [PATCH 09/19] Setup guides --- cli.md => quick-start/cli.md | 0 .../getting-started.md | 0 modules.md => quick-start/modules.md | 0 quick-start/setup/ab-setup/ab-cli-setup.md | 243 ++++++++++++++++++ quick-start/setup/ab-setup/ab-vse-setup.md | 88 +++++++ quick-start/setup/ab-setup/ab-web-setup.md | 35 +++ quick-start/setup/ab-setup/ab-win-setup.md | 89 +++++++ .../setup/ns-cli-setup/ns-setup-linux.md | 84 ++++++ .../setup/ns-cli-setup/ns-setup-os-x.md | 110 ++++++++ .../setup/ns-cli-setup/ns-setup-win.md | 99 +++++++ quick-start/setup/quick-setup.md | 45 ++++ 11 files changed, 793 insertions(+) rename cli.md => quick-start/cli.md (100%) rename getting-started.md => quick-start/getting-started.md (100%) rename modules.md => quick-start/modules.md (100%) create mode 100644 quick-start/setup/ab-setup/ab-cli-setup.md create mode 100644 quick-start/setup/ab-setup/ab-vse-setup.md create mode 100644 quick-start/setup/ab-setup/ab-web-setup.md create mode 100644 quick-start/setup/ab-setup/ab-win-setup.md create mode 100644 quick-start/setup/ns-cli-setup/ns-setup-linux.md create mode 100644 quick-start/setup/ns-cli-setup/ns-setup-os-x.md create mode 100644 quick-start/setup/ns-cli-setup/ns-setup-win.md create mode 100644 quick-start/setup/quick-setup.md diff --git a/cli.md b/quick-start/cli.md similarity index 100% rename from cli.md rename to quick-start/cli.md diff --git a/getting-started.md b/quick-start/getting-started.md similarity index 100% rename from getting-started.md rename to quick-start/getting-started.md diff --git a/modules.md b/quick-start/modules.md similarity index 100% rename from modules.md rename to quick-start/modules.md 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..f5c926b1e --- /dev/null +++ b/quick-start/setup/ab-setup/ab-cli-setup.md @@ -0,0 +1,243 @@ +--- +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 Extension for Visual Studio + +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** + +* 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. 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** + +* 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. 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** + +* 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. 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..c0d2951fd --- /dev/null +++ b/quick-start/setup/ab-setup/ab-vse-setup.md @@ -0,0 +1,88 @@ +--- +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 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. 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. 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. 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..5ac55a5d5 --- /dev/null +++ b/quick-start/setup/ab-setup/ab-win-setup.md @@ -0,0 +1,89 @@ +--- +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. 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. 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. 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 From bcdf80b069b10759e0c12979dd84b7fe0578ca59 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sat, 28 Feb 2015 13:03:28 +0200 Subject: [PATCH 10/19] Tweaked the homepage to list the platforms for which you can develop. --- index.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.md b/index.md index 2e2a8c2e4..075e021e7 100644 --- a/index.md +++ b/index.md @@ -9,6 +9,8 @@ position: 1 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. +You can develop for **Android 4.2 or later** and **iOS 7.1 or later**. + * [How Does It Work](#how-does-it-work) * [How To Get Started](#how-to-get-started) * [What's Next](#whats-next) @@ -33,14 +35,15 @@ Once you have your app idea, you can get started in three simple steps. 1. Choose your tools and set up your system. * If you are familiar with the Cordova CLI or if you want to develop and build your apps locally, 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.
This quick start development guide will introduce you to the basic architecture of a NativeScript app and how to implement the most basic styling. +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 and how to implement the most basic styling. 1. Explore the modules overview and the API Reference.
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. -* [Navigate Inside Your App](navigation.md) +* [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) From 2b7eb27de6f18c68324a74e28fb5a471b2c9d555 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sat, 28 Feb 2015 13:11:47 +0200 Subject: [PATCH 11/19] Tweaked the ab setup articles --- quick-start/setup/ab-setup/ab-cli-setup.md | 11 ++++++++++- quick-start/setup/ab-setup/ab-vse-setup.md | 5 +++-- quick-start/setup/ab-setup/ab-win-setup.md | 3 ++- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/quick-start/setup/ab-setup/ab-cli-setup.md b/quick-start/setup/ab-setup/ab-cli-setup.md index f5c926b1e..254ef62d3 100644 --- a/quick-start/setup/ab-setup/ab-cli-setup.md +++ b/quick-start/setup/ab-setup/ab-cli-setup.md @@ -5,7 +5,7 @@ description: Begin NativeScript development in a few minutes in your preferred I position: 4 --- -# Set Up the AppBuilder Extension for Visual Studio +# 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). @@ -19,6 +19,7 @@ With this IDE, you can develop for Android and iOS on Windows, OS X or Linux. **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 @@ -33,6 +34,8 @@ With this IDE, you can develop for Android and iOS on Windows, OS X or Linux. **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. @@ -94,6 +97,7 @@ With this IDE, you can develop for Android and iOS on Windows, OS X or Linux. **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 @@ -107,6 +111,8 @@ With this IDE, you can develop for Android and iOS on Windows, OS X or Linux. **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 @@ -182,6 +188,7 @@ With this IDE, you can develop for Android and iOS on Windows, OS X or 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 @@ -192,6 +199,8 @@ With this IDE, you can develop for Android and iOS on Windows, OS X or Linux. **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). diff --git a/quick-start/setup/ab-setup/ab-vse-setup.md b/quick-start/setup/ab-setup/ab-vse-setup.md index c0d2951fd..55047988e 100644 --- a/quick-start/setup/ab-setup/ab-vse-setup.md +++ b/quick-start/setup/ab-setup/ab-vse-setup.md @@ -17,7 +17,7 @@ With this IDE, you can develop for Android and iOS on Windows systems. ## System Requirements * Internet connection -* Telerik account with at least Telerik Developer or AppBuilder Professional subscription +* 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 @@ -33,6 +33,8 @@ With this IDE, you can develop for Android and iOS on Windows systems. ## 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. @@ -80,7 +82,6 @@ With this IDE, you can develop for Android and iOS on Windows systems. 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. 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. In the title bar, click **Getting Started** and select **Downloads**. 1. Click **AppBuilder NativeScript**. 1. Click **Download** for AppBuilder extension for Visual Studio. diff --git a/quick-start/setup/ab-setup/ab-win-setup.md b/quick-start/setup/ab-setup/ab-win-setup.md index 5ac55a5d5..1c33341a3 100644 --- a/quick-start/setup/ab-setup/ab-win-setup.md +++ b/quick-start/setup/ab-setup/ab-win-setup.md @@ -34,6 +34,8 @@ With this IDE, you can develop for Android and iOS on Windows systems. ## 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. @@ -81,7 +83,6 @@ With this IDE, you can develop for Android and iOS on Windows systems. 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. 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. In the title bar, click **Getting Started** and select **Downloads**. 1. Click **AppBuilder NativeScript**. 1. Click **Download** for AppBuilder Windows client. From f1237d78f6f5ef0787f8bca4ba4df8ad2668af86 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sat, 28 Feb 2015 15:30:45 +0200 Subject: [PATCH 12/19] Hello World with AppBuilder --- img/companions/android-code.png | Bin 0 -> 2849 bytes img/companions/ios-code.png | Bin 0 -> 2727 bytes quick-start/getting-started.md | 213 ------------ .../hello-world/hello-world-appbuilder.md | 325 ++++++++++++++++++ 4 files changed, 325 insertions(+), 213 deletions(-) create mode 100644 img/companions/android-code.png create mode 100644 img/companions/ios-code.png delete mode 100644 quick-start/getting-started.md create mode 100644 quick-start/hello-world/hello-world-appbuilder.md diff --git a/img/companions/android-code.png b/img/companions/android-code.png new file mode 100644 index 0000000000000000000000000000000000000000..a258d8618c424a6b94d9785f53bdc2609b791119 GIT binary patch literal 2849 zcmai0YgAI{8rI{iOe-u>#|rF1WM)d9I?figNi)%QS~`}7D5a+h<^}K)TIRK*kYbo4 z=H-}!q*z*=OyO8*s98?hiL@qR5GcH0W@KoZm-$@tW9qC`{n)&VAK%{Z_q@;LW$yDK zEHPebtf!~9#LLs&57c|$X2wxH<8_z~RnYP(QFdV0oEFLzgehW<#YFMIv2 z#qRoRX;y5pzN7I;)uMWi$4XJii8Oj#y!X_INzlKqV^ASBM{cB*%}r{Dt&)eD4;h|W zA#1D|ZcauBzngWn7)^n<%;u&nm?qkO7eO>G?v3k%Ts_L#kdBd7 zKe-vCNq1gjo8P$ZfNm0bl^VA!tfhB+r6ZcZ|K;26e3QH?xuq(>j>b5lt64jua3L*2s2 z0#p_vZ1)}nqT^I6-f)>Z&z!{v+rvjj4*Z- zk7Fiw)Qa0^ zgeG0HjQu_?)CQ{FPEONg^}Pfb+|QBy>xzM$Yh3Fn4Sf2gM^sBs>fn~k7=bxa=S`G^ zv8WUmvG3!I#v-nUQ($(Zjx2E#Wt@t8#8vblg677-p@!9*zmWm_Z^JWdl1~|u(xkbb zsn_BaRExf$LCvxyA+LUTifOMwQ;nirEZb_R&DcQYe^3qa z%~+w1VcH;0Z8^NB-30xQ49vY!na`ao30{j5cHE}eDXT&{U`Q3X3}f59isBVxM9^)z z2Bz@OFHYgdxv`hu&nRND5$r_L>HEpEF6uM0lkKB|5UUB^n}E4Jj(4lav}0F329}TR z{HRIxi+)9}9*%G!r*$8uN%0C~gcETU3>x*TY>gZSOdB~Kxj7Ep>?zH)Z7`*rB=)_t zjZ5{%srfR5A>fOcW6lZ=#;MnkdJQQ)!+eoHjyZ{3Z^wMm3n(_M?Io#F;Pb-uM^6Bp zYT8f4Fby)Bc6)op7XHuG9jbo*ke`T_*I807%Y3q@ghfB72j3zI8n_6alE|vtxR>y% z2?(5|VH%X06nGz6d#VJmK**6&|Llrmxz@Ut#W-Cl5^Prq@g7CYbgB(_QM!gdgS5*D z?hG29L{?l_+E4?I)$?xM=+@`1iQ6r!2XmCNpWXK}{H1AkunChu!;fd>(~Sr>^3&lD4s(&u{Yp=SLn88a7X!rcJ2UVK*3a%FQPa$JB9DZXC-Vl`iWCI>l^u(jz#o)f@ z?0enYQ{lNBd!zC&zU78o=Xtye=u6p<=W6w3NHy5%7b0GU(|JIwWdtIw6N{pFF}^BL zXeK&aV1c%Ic-ZZh<&8Q^Wz`121VPA3j2sN2Vlo(2adz9uP)f9*fcThuX)8LW0r2a$ z&}@e%v}Wv}@YpAfqGogK&3NfN%kOiYfzUHBw%}ed9j--!5Eh(Z^jtak%CD&+H`E%Z ztdhSd#N9hM@JM|9lOh4aFyx4hPgMW7I2_&s@UCVK`_%4PnG)Okm%2_jP-N#z;V z%IUwmh#T&6XB~=G0lhn`*vm%l<;`2aroNmO?xiuSW|=MUsd@{ZcPyy*Hy0bv z0>sV3>X>Zc^o+LhooP%iwUl=bstRFYk|5QK`fv@vX8JNyij%ripw`RZn6v^4RQZy>==`Twn*Nm>%o3lK+ z&H3Zyo!S)+%nJp;C6;#`E6krbI2%ACr(Hw68<2uniuf^f)ielKg-z!4dY0o_#Y_MUa#v_B_PeQZ}oxB(d`A9Cx47 z+HQ&+Usz7e4J6`RR9TsjBoSnV=c2ZaKlBiE8$EO&c%KGVS`NVpPi57Qf!_sw;&-I9 zZtG919zxw8qH&P1R9#BK0h>0LU-zm6xQs^P>Yku`#UI`;zUfBRz&(RsB@`9Pwoz!k zfrRn)_!9a4+$n4l06HJ&Vm^Z*xmhEz?`Pd>$F>u45yi^Lqm3MJkrl3>t!w4=i=@(|eU_{Gnr3IHyB z^a$2nNovbndm+2b#%OMDO_%*HQS0wR4K1Ahyndh8!83VB-(BM6LK_bxfFQwsanl2X o{_gLW4V;`5@b$6S5nH-~oK-J2H&Ztw!OpAawadr7*6mQ*AGK<7cK`qY literal 0 HcmV?d00001 diff --git a/img/companions/ios-code.png b/img/companions/ios-code.png new file mode 100644 index 0000000000000000000000000000000000000000..9152c5d8a843280b6901887dcb44e0cfecab4edd GIT binary patch literal 2727 zcmai0YfzJC76x%lMuuQ8HY_9olj1-HqAQvYG-$Gfga!}-Z6li+Q?{;AxrEDzv9Tx= zfdB!G1cMha7r?0~vvdI$5HNs(P)WFSFe)U5LMRBrCm?p+*I!C^s6W2<{Q2H9=RD_m zp7Z8Jgfku1yR5gdv2h4t1#v)Z179n09XPL~CR_u-Hkreu+f?`BCTwih3qpcu(P_3* zS7_Cr4xobe@>##-Xm0N-ZoBGClWsm)NZ<73VGBHQ;M{R0#2dW$#V!8Z`61cfw{tR- z_lc3W-OF_n{9>mqw$<@0>P=z`V6!1Fm&^Pmlg(mYwQCRGG#+!97JGXan#ufC?H#JCrzq= zBdL1D(Q=-t>|HqnByUR@bYmf`gxp36`f(A)-4Lq>&vU&r!*X{gFN_be08T@N5j+w~^G2yaO*@;g?cli7? z;)-8fpRyBA^1LD?B?YIzeI$-p!LZgzR+B^1uwsnu6J0S!*T1>MSNcqDOagU|3k#7MF ze_@Vz7zK*o?@xa56+q&<0SGfEw^Jk(SIDY&yZp!O`6=pU?rRO;LyeqrQ_+DY!^Iuw z1SMM(E!(F5O}Z~U=Vo#XgG)(r-Gbn)81Bq0rMstwP9IM%hfHxvIi&V%%7CIn6Qi%s zS}0Ab;wusD=rQTO>g?4rY>@mbG^a;EXJQ2gT(m6BaN1y;fUFsQ8$kgul7z}F?a&9Z z+$^t&q5JQPZ>6*_(k#DVs8i|EZBv!-!3oe|SB;l=_)K?A=-L#Xnu%=J;4qYYO%wV> zRD;^1{RlzmhEcrSCDO4aez=c~MJ6x^=!nqIGOdyET{PHJVal#+&919rDx*+c9zH^9 zm&b9X!m3dkc>J|W^)CTnqN$`hK~f9D{VUxd!1qVj28RoFeUxrFiz_aPh!?+6H{=)l zDNM*?V%2F^l>Ypn3eq#3XF0sCq7F@CGt$qYCKU{5GC2MoVCV|4e4lw&Fp-;7_x^E* zFzdv;@q;Nl<;{y?Ci1%HszA^7`DG>0mP9A zsU~-Ci^dq-?e_u?YnL_R{&VCtlGh*f;Jc=Q`0rj@tl-K0xDs6b8|PhkCwWOnUkx4B zZU=f>(i(&9Pkv6=(3vuwLbYaWGkHA3p5dYY{%gAQcKq{Qp`fYfx$hwwN%D@0$k3eQ zb`=qVFp8tXBtswvK$?5(wYwzx*65XLW(?;cc5`Z1y$YzTfN-lv15#8)b>P9c6X(<7 zd{alvvHsMQ@o}Okn%tuS<^jy7c#MOCfeQfvR}utXi1x^)b?jx9nPm^t;P24)sjI>p z_+LtQv^OD!{+|xaC~{Aj`98Kw1GRDZ*{TOHqfEFufAQV&62evt6CQsQ zl3Xf2F>^l9nqRAKz)-%HL7co=<0$RM&mZXt;PQ=l9NbY5!a*j^@jDbf6IT^@gW2HK z83k*1?q8Uc?%U|J8nEsG#a=c3U+Q_LxZ7h9YGbWqSJ?6qNYB&Ll?JhJn$o^Rd{nV- zRd&d}Z^dp>na`P!DqcV@0HaKd8A^*Kp1D z!jQ?Lz>lnnaL0{A_dIJP4!;*O)UPt`POEZk)54Jn23$X4mV*;i1%l<1xwK-v*si2s zQ0HGgo}THO-62Vdbkh|bEw9gt4NzFo!Gs82ZV_2W6X|FT7^bsmkyse@eo6g*7CbgO z59QnyX3i$HPmj3!I3$3Tg=G5!n1i*JN~#u0aX&$H3AtxC+a~y3(-_Dz|+6@T2D9l%+hCS - - -