From 87a6f6a3b08a7bb856285102a7170122ffa748c5 Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero <33325822+Nandee89@users.noreply.github.com> Date: Mon, 13 Jun 2022 18:37:40 +0200 Subject: [PATCH 001/104] Added API description for the Payments: IAP & Subscriptions plugin --- plugins/payments.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/plugins/payments.md b/plugins/payments.md index 391c6a6c..91a74bd0 100644 --- a/plugins/payments.md +++ b/plugins/payments.md @@ -83,6 +83,23 @@ for Google Play Billing](https://developer.android.com/google/play/billing/test) This plugin uses a RxJS Observable to emit the events to handle the purchase flow. To avoid threading errors with the platform purchasing flow, you can use `toMainThread()` as a pipe on the Observable so that the purchase logic executes on the main thread. `paymentEvents.pipe(toMainThread()).subscribe((event: PaymentEvent.Type) => {...` The sample below should give a good starting point on how to use the Observable and setup the purchasing mechanism. +## API + +- `init()` Sets up the internal system of the plugin. +- `paymentEvents` The RxJS Observable to emit the events to handle the purchase flow. + +The following methods get called in response to the events emitted by `paymentEvents`. + +| Methods | Description | +| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `fetchItems(itemIds: Array)` | Queries the store for the items requested. You should handle these items inside the `PaymentEvent.Context.RETRIEVING_ITEMS` event. | +| `buyItem(item: Item, options?: BuyItemOptions)` | Starts the purchase flow on Android & iOS and emits `PaymentEvent.Context.PROCESSING_ORDER` with `SUCCESS` or `FAILURE`. If SUCCESS then you can call the last method to the `finalizeOrder(payload)`. | +| `fetchSubscriptions(itemIds: Array)` | Queries the store for the subscriptions offered by the app. You should handle these subscriptions inside the `PaymentEvent.Context.RETRIEVING_ITEMS` event. | +| `startSubscription(item: Item, userData?: string)` | `Android only`. Lanches the billing flow by presenting the Google Store subscription UI interface. | +| `restoreOrders(skuType?: string)` | Returns the purchase made by the user for each product. You call this method to install purchases on additional devices or restore purchases for an application that the user deleted and reinstalled. | +| `canMakePayments()` | Returns `true` or `false` indicating whether the billing service is available and is setup successfully. | +| `tearDown()` | Closes the connection to the billing service to free up resources. | + ## Usage The standard flow of method calls: From f9452d0a005545fbee341c5d8a3090f027308707 Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero <33325822+Nandee89@users.noreply.github.com> Date: Sun, 19 Jun 2022 00:57:21 +0200 Subject: [PATCH 002/104] Added @nativescript/core subcategories names and their links. --- .vitepress/config.js | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/.vitepress/config.js b/.vitepress/config.js index 46de274d..deedbb5d 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -532,13 +532,29 @@ function getSidebar() { ], }, { - text: 'Networking', + text: '@nativescript/core', children: [ - { text: 'Http', link: '/http' }, - { - text: 'Connectivity', - link: '/connectivity', - }, + { text: 'Color', link: '/nativescript-core/color' }, + { text: 'Connectivity', link: '/nativescript-core/connectivity' }, + { text: 'Application', link: '/nativescript-core/application' }, + { + text: 'ApplicationSettings', + link: '/nativescript-core/application-settings', + }, + { text: 'Observable', link: '/nativescript-core/observable' }, + { + text: 'Observable Array', + link: '/nativescript-core/observable-array', + }, + { text: 'Virtual Array', link: '/nativescript-core/virtual-array' }, + { text: 'File System', link: '/nativescript-core/file-system' }, + { text: 'Fps Meter', link: '/nativescript-core/fps-meter' }, + { text: 'Http', link: '/nativescript-core/http' }, + { text: 'Image Source', link: '/nativescript-core/image-source' }, + { text: 'Platform', link: '/nativescript-core/platform' }, + { text: 'Timer', link: '/nativescript-core/timer' }, + { text: 'Trace', link: '/nativescript-core/trace' }, + { text: 'Xml Parser', link: '/nativescript-core/xml-parser' }, ], }, // { From ce4e1ed8082f24e59c23540f2f90c8cabeccfee2 Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Sun, 19 Jun 2022 01:43:12 +0200 Subject: [PATCH 003/104] I created the nativescript-core directory and moved the @nativescript/core subcategories' files there. --- connectivity.md | 93 ------------------------- http.md | 180 ------------------------------------------------ 2 files changed, 273 deletions(-) delete mode 100644 connectivity.md delete mode 100644 http.md diff --git a/connectivity.md b/connectivity.md deleted file mode 100644 index 1cb8848f..00000000 --- a/connectivity.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Connectivity ---- - -## Connectivity - -The connectivity module provides a common abstraction of the functionality responsible for receiving information about the connection type and availability of the network. - -#### Usage - -```typescript -import { Connectivity } from '@nativescript/core' - -export function onNavigatedTo(args) { - const page = args.object - - // Get the current connection type - const type = Connectivity.getConnectionType() - - switch (type) { - case Connectivity.connectionType.none: - console.log('No connection') - break - case Connectivity.connectionType.wifi: - console.log('WiFi connection') - break - case Connectivity.connectionType.vpn: - console.log('VPN connection') - break - case Connectivity.connectionType.mobile: - console.log('Mobile connection') - break - case Connectivity.connectionType.ethernet: - console.log('Ethernet connection') - break - case Connectivity.connectionType.bluetooth: - console.log('Bluetooth connection') - break - default: - break - } - - // Starts monitoring the network for changes - Connectivity.startMonitoring(newConnectionType => { - switch (newConnectionType) { - case Connectivity.connectionType.none: - console.log('Connection type changed to none.') - break - case Connectivity.connectionType.wifi: - console.log('Connection type changed to WiFi.') - break - case Connectivity.connectionType.vpn: - console.log('Connection type changed to VPN.') - break - case Connectivity.connectionType.mobile: - console.log('Connection type changed to mobile.') - break - case Connectivity.connectionType.ethernet: - console.log('Connection type changed to ethernet.') - break - case Connectivity.connectionType.bluetooth: - console.log('Connection type changed to bluetooth.') - break - default: - break - } - }) - - // Stops monitoring the connection - Connectivity.stopMonitoring() -} -``` - -#### Methods - -| Name | Type | Description | -| ---------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `getConnectionType` | `number` | Gets the type of connection. Returns a value from the `connectivityModule.connectionType` enumeration. To use this method on Android you need to have the **android.permission.ACCESS_NETWORK_STATE** permission added to the **AndroidManifest.xml** file. | -| `startMonitoring(connectionTypeChangedCallback: function)` | `void` | Starts monitoring the connection type. | -| `stopMonitoring` | `void` | Stops monitoring the connection type. | - -#### API References - -| Name | Type | -| --------------------------------------------------------------------------- | -------- | -| [@nativescript/core/connectivity](/api-reference/modules.html#connectivity) | `Module` | -| [connectionType](/api-reference/modules.html#connectivity) | `Enum` | - -#### Native Component - -| Android | iOS | -| :---------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | -| [CONNECTIVITY_SERVICE (android.content.Context)](https://developer.android.com/reference/android/content/Context) | [SCNetworkReachability](https://developer.apple.com/documentation/systemconfiguration/scnetworkreachability-g7d) | diff --git a/http.md b/http.md deleted file mode 100644 index 4739948c..00000000 --- a/http.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Http ---- - -## Http - -The import for the Http module. - -```typescript -import { Http } from '@nativescript/core' -``` - -### getString - -The `getString` method allows us to make a request and get the response body as a string value. - -```typescript -import { Http } from '@nativescript/core' - -Http.getString('https://httpbin.org/get').then( - (result: string) => { - viewModel.set('getStringResult', r) - }, - e => {} -) -``` - -### getJSON - -The `getJSON` method gives us a simple way to get the response body as a JSON object. - -```typescript -import { Http } from '@nativescript/core' - -Http.getJSON('https://httpbin.org/get').then( - (result: any) => { - console.log(result) - }, - e => {} -) -``` - -### getFile - -The `getFile` method allows us to download a file. - -```typescript -import { Http } from '@nativescript/core' - -Http.getFile('https://d1lfyz5kwt8vu9.cloudfront.net/nativescript-logo-2021.png').then( - resultFile => { - // The returned result will be File object - }, - e => {} -) -``` - -::: warning Note -By default the file will be saved in Documents folder. -::: - -In the `getFile` method we could also specify the path, where the file to be saved. This scenario is demonstrated in the example below, where the image file will be kept in the current application folder. - -```typescript -import { File, Http, knownFolders, path } from '@nativescript/core' - -const filePath: string = path.join(knownFolders.currentApp().path, 'test.png') - -Http.getFile( - 'https://httpbin.org/image/png?testQuery=query&anotherParam=param', - filePath -).then( - (resultFile: File) => { - // The returned result will be File object - }, - e => {} -) -``` - -### getImage - -The `getImage` method allows us to get an image from a specific URL. The returned object will be ImageSource and it could be used for direct displaying the source into Image view in your UI. - -```typescript -import { Http, ImageSource } from '@nativescript/core' - -Http.getImage('https://httpbin.org/image/jpeg').then( - (r: ImageSource) => { - // getImage method returns ImageSource object - }, - e => {} -) -``` - -### request - -This example `request` method demonstrates how we can access the response headers, content, and statusCode. - -```typescript -import { Http, HttpResponse } from '@nativescript/core' - -Http.request({ - url: 'https://httpbin.org/get', - method: 'GET' -}).then( - (response: HttpResponse) => { - // Argument (response) is HttpResponse - console.log(`Response Status Code: ${response.statusCode}`) - console.log(`Response Headers: ${response.statusCode}`) - console.log(`Response Content: ${response.content}`) - }, - e => {} -) -``` - -This example demonstrates, how to get the request-response content and how to represent the received data as a `String` value or `JSON` object. We could also use `toImage` method when we download an image. - -```typescript -import { Http, HttpResponse } from '@nativescript/core' - -Http.request({ - url: 'https://httpbin.org/get', - method: 'GET' -}).then( - (response: HttpResponse) => { - // Content property of the response is HttpContent - const content = response.content - - // The toString method allows you to get the response body as string. - const str = content.toString() - - // The toJSON method allows you to parse the received content to JSON object - // var obj = content.toJSON(); - - // The toImage method allows you to get the response body as ImageSource. - // var img = response.content.toImage(); - }, - e => {} -) -``` - -#### Post - -The example demonstrates, how to make Http POST request and how to get request response. - -```typescript -import { Http, HttpResponse } from "@nativescript/core"; - -Http.request({ - url: "https://httpbin.org/post", - method: "POST", - headers: { "Content-Type": "application/json" }, - content: JSON.stringify({ - username: "testuser@sometestemail.com, - password: "someEncryptedPasswordValue", - }), -}).then( - (response: HttpResponse) => { - const result = response.content.toJSON(); - console.log(`Http POST Result: ${result}`) - }, - (e) => {} -); -``` - -#### Methods - -| Name | Type | Description | -| ------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------- | -| `getFile(url: string, destinationFilePath?: string): Promise` | `Promise` | Downloads the content from the specified URL and attempts to save it as file. | -| `getImage(url: string): Promise` | `Promise` | Downloads the content from the specified URL and attempts to decode it as an image. | -| `getJSON(url: string): Promise` | `Promise` | Downloads the content from the specified URL as a string and returns its JSON.parse representation. | -| `getString(url: string): Promise` | `Promise` | Downloads the content from the specified URL as a string. | -| `request(options: HttpRequestOptions): Promise` | `Promise` | Makes a generic http request using the provided options and returns a HttpResponse Object. | - -#### API References - -| Name | Type | -| ---------------------------------------------------------------------------------------- | -------- | -| [@nativescript/core/http](https://docs.nativescript.org/api-reference/modules.html#http) | `Module` | From 2c2208364849ad8d431c390edd8be91a093415e5 Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Sun, 19 Jun 2022 01:45:00 +0200 Subject: [PATCH 004/104] Moved it to nativescript-core folder and added Connection Types info --- nativescript-core/connectivity.md | 102 ++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 nativescript-core/connectivity.md diff --git a/nativescript-core/connectivity.md b/nativescript-core/connectivity.md new file mode 100644 index 00000000..174145c8 --- /dev/null +++ b/nativescript-core/connectivity.md @@ -0,0 +1,102 @@ +--- +title: Connectivity +--- + +## Connectivity + +The connectivity module provides a common abstraction of the functionality responsible for receiving information about the connection type and availability of the network. + +#### Usage + +```typescript +import { Connectivity } from '@nativescript/core' + +export function onNavigatedTo(args) { + const page = args.object + + // Get the current connection type + const type = Connectivity.getConnectionType() + + switch (type) { + case Connectivity.connectionType.none: + console.log('No connection') + break + case Connectivity.connectionType.wifi: + console.log('WiFi connection') + break + case Connectivity.connectionType.vpn: + console.log('VPN connection') + break + case Connectivity.connectionType.mobile: + console.log('Mobile connection') + break + case Connectivity.connectionType.ethernet: + console.log('Ethernet connection') + break + case Connectivity.connectionType.bluetooth: + console.log('Bluetooth connection') + break + default: + break + } + + // Starts monitoring the network for changes + Connectivity.startMonitoring(newConnectionType => { + switch (newConnectionType) { + case Connectivity.connectionType.none: + console.log('Connection type changed to none.') + break + case Connectivity.connectionType.wifi: + console.log('Connection type changed to WiFi.') + break + case Connectivity.connectionType.vpn: + console.log('Connection type changed to VPN.') + break + case Connectivity.connectionType.mobile: + console.log('Connection type changed to mobile.') + break + case Connectivity.connectionType.ethernet: + console.log('Connection type changed to ethernet.') + break + case Connectivity.connectionType.bluetooth: + console.log('Connection type changed to bluetooth.') + break + default: + break + } + }) + + // Stops monitoring the connection + Connectivity.stopMonitoring() +} +``` + +#### Methods + +| Name | Type | Description | +| ---------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `getConnectionType` | `number` | Gets the type of connection. Returns a value from the `connectivityModule.connectionType` enumeration. To use this method on Android you need to have the **android.permission.ACCESS_NETWORK_STATE** permission added to the **AndroidManifest.xml** file. | +| `startMonitoring(connectionTypeChangedCallback: function)` | `void` | Starts monitoring the connection type. | +| `stopMonitoring` | `void` | Stops monitoring the connection type. | + +#### Connection Types + +- `none = 0`, +- `wifi = 1`, +- `mobile = 2`, +- `ethernet = 3`, +- `bluetooth = 4`, +- `vpn = 5` + +#### API References + +| Name | Type | +| --------------------------------------------------------------------------- | -------- | +| [@nativescript/core/connectivity](/api-reference/modules.html#connectivity) | `Module` | +| [connectionType](/api-reference/modules.html#connectivity) | `Enum` | + +#### Native Component + +| Android | iOS | +| :---------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | +| [CONNECTIVITY_SERVICE (android.content.Context)](https://developer.android.com/reference/android/content/Context) | [SCNetworkReachability](https://developer.apple.com/documentation/systemconfiguration/scnetworkreachability-g7d) | From 7c39be235d272642e1807b6056f61f745a2aedb4 Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Sun, 19 Jun 2022 01:45:36 +0200 Subject: [PATCH 005/104] Added the documentation for the subcategory --- nativescript-core/color.md | 133 +++++++++++++++++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 nativescript-core/color.md diff --git a/nativescript-core/color.md b/nativescript-core/color.md new file mode 100644 index 00000000..118d0be0 --- /dev/null +++ b/nativescript-core/color.md @@ -0,0 +1,133 @@ +--- +title: Color +--- + +## Color + +The color module provides a common abstraction of a list of known colors and a color object which allows you to create custom colors that you can use to style the UI. + +#### Usage + +/// flavor javascript + +```javascript +const Color = require('@nativescript/core/color').Color +const colors = require('@nativescript/core/color/known-colors') +function createColor() { + // Using hex values to create color; + const colorHex = new Color('#FF00CC') + const colorShortHex = new Color('#F0C') + + // Creates the color with 100 alpha, 255 red, 100 green, 100 blue + const colorARGB = new Color(100, 255, 100, 100) + + // Creates the color with 100 alpha, 100 red, 100 green, 100 blue + const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 //eslint-disable-line no-bitwise + const colorSingleARGB = new Color(argb) + + // Using string values to create colors + const namedColor = 'orangered' + const isKnown = colors.isKnownName(namedColor) + if (isKnown) { + const colorName = new Color(namedColor) + } + + // Using supported known colors from @nativescript/core/color/known-colors + const colorKnownName = new Color(colors.OrangeRed) +} +``` + +/// + +/// flavor typescript + +```typescript +import { Color } from '@nativescript/core/color' +import * as colors from '@nativescript/core/color/known-colors' +import { isKnownName } from '@nativescript/core/color/known-colors' + +function createColor() { + // Using hex values to create color; + const colorHex = new Color('#FF00CC') + const colorShortHex = new Color('#F0C') + + // Creates the color with 100 alpha, 255 red, 100 green, 100 blue + const colorARGB = new Color(100, 255, 100, 100) + + // Creates the color with 100 alpha, 100 red, 100 green, 100 blue + const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 + const colorSingleARGB = new Color(argb) + + // Using string values to create colors + const namedColor = 'orangered' + const isKnown: boolean = isKnownName(namedColor) + if (isKnown) { + const colorName = new Color(namedColor) + } + + // Using supported known colors from @nativescript/core/color/known-colors + const colorKnownName = new Color(colors.OrangeRed) +} +``` + +/// + +#### Color class + +Creates a color object from different types of inputs types, as shown below, that stores all color components (alpha (opacity), red, green, blue) in a [0..255] range.: + +`Color(knownColor: string)` or
`Color(hex: string)` or
`Color(argb: number)` or
`Color(alpha: number, red: number, green:number, blue: number, type?: 'rgb' \| 'hsl' \| 'hsv')` + +#### Properties + +| Name | Type | Description | +| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| `a` | `string` | Gets the Alpha component (in the [0, 255] range) of thecolor. This is a read-only property. | +| `r` | `string` | Gets the Red component (in the [0, 255] range) of the color. This is a read-only property. | +| `g` | `string` | Gets the Green component (in the [0, 255] range) of the color. This is a read-only property. | +| `b` | `string` | Gets the Blue component (in the [0, 255] range) of the color. This is a read-only property. | +| `argb` | `number` | Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a read-only property. | +| `hex` | `string` | Gets the Hexadecimal string representation of the color. This is a read-only property | +| `name` | `string` | Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". This is a read-only property. | +| `android` | `number` | Gets the android-specific integer value representation. Same as the Argb one. This is a read-only property. | +| `ios` | `UIColor` | Gets the iOS-specific UIColor value representation. This is a read-only property. | + +#### Stactic Methods + +| Name | Type | Description | +| --------------------------------------------------- | --------- | ------------------------------------------------------------ | +| `equals(value1: Color, value2: Color)` | `boolean` | Compares two `Color` instances | +| `isValid(value: any)` | `boolean` | Validates if a value can be converted to a color. | +| `fromIosColor(value: UIColor)` | `Color` | Creates color from iOS-specific UIColor value representation | +| `mix(color1: Color, color2: Color, amount: number)` | `Color` | Mixes | +| `fromHSL(a, h, s, l)` | `Color` | Returns a new `Color` from HSL. | +| `fromHSV(a, h, s, l)` | `Color` | Returns a new `Color` from HSV. | + +#### Instance Methods + +| Name | Type | Description | +| ----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `equals(value: Color)` | `boolean` | Specifies whether the created Color is equal to the Color parameter. | +| `isDark()` | `boolean` | Returns true if `brightenss < 128` | +| `isLight()` | `boolean` | Returns true if `brightenss >= 128` | +| `getBrightness()` | `number` | Returns the [brightness](http://www.w3.org/TR/AERT#color-contrast). | +| `getLuminance()` | `number` | Returns the [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). | +| `setAlpha(a: number)`. `a` is a value between `0` and `255` | `Color` | Return the created color (as a new Color instance) with the provided alpha | +| `toHsl()` | `{ h: number; s: number; l: number; a: number }` | Return the hsl representation of the color. | +| `toHslString()` | `string` | Returns the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color | +| `toHsv()` | `{ h: number; s: number; v: number; a: number }` | Returns the hsv representation of the color. | +| `toHsvString()` | `string` | Returns the [CSS rgb](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color | +| `desaturate(amount: number)` | `Color` | Desaturates the color a given amount, from `0` to `100`. Providing `100` is the same as calling greyscale. | +| `saturate(amount: number)` | `Color` | Saturates the color a given amount, from `0` to `100`. | +| `greyscale()` | `Color` | Completely desaturates a color into greyscale. Same as calling `desaturate(100)` | +| `lighten()` | `Color` | Lightens the color a given amount, from `0` to `100`. Providing `100` will always return white. | +| `brighten(amount: number)` | `Color` | Brightens the color a given amount, from `0` to `100`. | +| `darken(amount:number)` | `Color` | Darkens the color a given amount, from `0` to `100`. Providing `100` will always return `black`. | +| `spin(amount: number)` | `Color` | Spins the hue a given amount, from `-360` to `360`. Calling with `0`, `360`, or `-360` will do nothing (since it sets the hue back to what it was before). | +| `complement()` | `Color` | Returns the color complement | + +#### Native Component + +| Android | iOS | +| :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- | +| [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color) | [UICOlor](https://developer.apple.com/documentation/uikit/uicolor?language=objc) | From c7e2507772e938682415569245311984f836699f Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Sun, 19 Jun 2022 01:46:03 +0200 Subject: [PATCH 006/104] It was moved to nativescript-core folder --- nativescript-core/http.md | 180 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 nativescript-core/http.md diff --git a/nativescript-core/http.md b/nativescript-core/http.md new file mode 100644 index 00000000..4739948c --- /dev/null +++ b/nativescript-core/http.md @@ -0,0 +1,180 @@ +--- +title: Http +--- + +## Http + +The import for the Http module. + +```typescript +import { Http } from '@nativescript/core' +``` + +### getString + +The `getString` method allows us to make a request and get the response body as a string value. + +```typescript +import { Http } from '@nativescript/core' + +Http.getString('https://httpbin.org/get').then( + (result: string) => { + viewModel.set('getStringResult', r) + }, + e => {} +) +``` + +### getJSON + +The `getJSON` method gives us a simple way to get the response body as a JSON object. + +```typescript +import { Http } from '@nativescript/core' + +Http.getJSON('https://httpbin.org/get').then( + (result: any) => { + console.log(result) + }, + e => {} +) +``` + +### getFile + +The `getFile` method allows us to download a file. + +```typescript +import { Http } from '@nativescript/core' + +Http.getFile('https://d1lfyz5kwt8vu9.cloudfront.net/nativescript-logo-2021.png').then( + resultFile => { + // The returned result will be File object + }, + e => {} +) +``` + +::: warning Note +By default the file will be saved in Documents folder. +::: + +In the `getFile` method we could also specify the path, where the file to be saved. This scenario is demonstrated in the example below, where the image file will be kept in the current application folder. + +```typescript +import { File, Http, knownFolders, path } from '@nativescript/core' + +const filePath: string = path.join(knownFolders.currentApp().path, 'test.png') + +Http.getFile( + 'https://httpbin.org/image/png?testQuery=query&anotherParam=param', + filePath +).then( + (resultFile: File) => { + // The returned result will be File object + }, + e => {} +) +``` + +### getImage + +The `getImage` method allows us to get an image from a specific URL. The returned object will be ImageSource and it could be used for direct displaying the source into Image view in your UI. + +```typescript +import { Http, ImageSource } from '@nativescript/core' + +Http.getImage('https://httpbin.org/image/jpeg').then( + (r: ImageSource) => { + // getImage method returns ImageSource object + }, + e => {} +) +``` + +### request + +This example `request` method demonstrates how we can access the response headers, content, and statusCode. + +```typescript +import { Http, HttpResponse } from '@nativescript/core' + +Http.request({ + url: 'https://httpbin.org/get', + method: 'GET' +}).then( + (response: HttpResponse) => { + // Argument (response) is HttpResponse + console.log(`Response Status Code: ${response.statusCode}`) + console.log(`Response Headers: ${response.statusCode}`) + console.log(`Response Content: ${response.content}`) + }, + e => {} +) +``` + +This example demonstrates, how to get the request-response content and how to represent the received data as a `String` value or `JSON` object. We could also use `toImage` method when we download an image. + +```typescript +import { Http, HttpResponse } from '@nativescript/core' + +Http.request({ + url: 'https://httpbin.org/get', + method: 'GET' +}).then( + (response: HttpResponse) => { + // Content property of the response is HttpContent + const content = response.content + + // The toString method allows you to get the response body as string. + const str = content.toString() + + // The toJSON method allows you to parse the received content to JSON object + // var obj = content.toJSON(); + + // The toImage method allows you to get the response body as ImageSource. + // var img = response.content.toImage(); + }, + e => {} +) +``` + +#### Post + +The example demonstrates, how to make Http POST request and how to get request response. + +```typescript +import { Http, HttpResponse } from "@nativescript/core"; + +Http.request({ + url: "https://httpbin.org/post", + method: "POST", + headers: { "Content-Type": "application/json" }, + content: JSON.stringify({ + username: "testuser@sometestemail.com, + password: "someEncryptedPasswordValue", + }), +}).then( + (response: HttpResponse) => { + const result = response.content.toJSON(); + console.log(`Http POST Result: ${result}`) + }, + (e) => {} +); +``` + +#### Methods + +| Name | Type | Description | +| ------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------- | +| `getFile(url: string, destinationFilePath?: string): Promise` | `Promise` | Downloads the content from the specified URL and attempts to save it as file. | +| `getImage(url: string): Promise` | `Promise` | Downloads the content from the specified URL and attempts to decode it as an image. | +| `getJSON(url: string): Promise` | `Promise` | Downloads the content from the specified URL as a string and returns its JSON.parse representation. | +| `getString(url: string): Promise` | `Promise` | Downloads the content from the specified URL as a string. | +| `request(options: HttpRequestOptions): Promise` | `Promise` | Makes a generic http request using the provided options and returns a HttpResponse Object. | + +#### API References + +| Name | Type | +| ---------------------------------------------------------------------------------------- | -------- | +| [@nativescript/core/http](https://docs.nativescript.org/api-reference/modules.html#http) | `Module` | From 469929d9313cd0e39f3cb7249960e0b5620766bc Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Sun, 19 Jun 2022 12:03:06 +0200 Subject: [PATCH 007/104] Removed broken/inconsistent links (API reference sections ) from http.md and connectivity.md and instead made them complete,no need to point other pages --- .vitepress/config.js | 30 ++++----- nativescript-core/Application.md | 104 ++++++++++++++++++++++++++++++ nativescript-core/connectivity.md | 7 -- nativescript-core/http.md | 6 -- 4 files changed, 116 insertions(+), 31 deletions(-) create mode 100644 nativescript-core/Application.md diff --git a/.vitepress/config.js b/.vitepress/config.js index deedbb5d..12530b5a 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -534,27 +534,21 @@ function getSidebar() { { text: '@nativescript/core', children: [ + { text: 'Application', link: '/nativescript-core/application' }, + //{text: 'ApplicationSettings',link: '/nativescript-core/application-settings'}, { text: 'Color', link: '/nativescript-core/color' }, { text: 'Connectivity', link: '/nativescript-core/connectivity' }, - { text: 'Application', link: '/nativescript-core/application' }, - { - text: 'ApplicationSettings', - link: '/nativescript-core/application-settings', - }, - { text: 'Observable', link: '/nativescript-core/observable' }, - { - text: 'Observable Array', - link: '/nativescript-core/observable-array', - }, - { text: 'Virtual Array', link: '/nativescript-core/virtual-array' }, - { text: 'File System', link: '/nativescript-core/file-system' }, - { text: 'Fps Meter', link: '/nativescript-core/fps-meter' }, + //{ text: 'Observable', link: '/nativescript-core/observable' }, + //{text: 'Observable Array',link: '/nativescript-core/observable-array'}, + //{ text: 'Virtual Array', link: '/nativescript-core/virtual-array' }, + //{ text: 'File System', link: '/nativescript-core/file-system' }, + //{ text: 'Fps Meter', link: '/nativescript-core/fps-meter' }, { text: 'Http', link: '/nativescript-core/http' }, - { text: 'Image Source', link: '/nativescript-core/image-source' }, - { text: 'Platform', link: '/nativescript-core/platform' }, - { text: 'Timer', link: '/nativescript-core/timer' }, - { text: 'Trace', link: '/nativescript-core/trace' }, - { text: 'Xml Parser', link: '/nativescript-core/xml-parser' }, + //{ text: 'Image Source', link: '/nativescript-core/image-source' }, + //{ text: 'Platform', link: '/nativescript-core/platform' }, + //{ text: 'Timer', link: '/nativescript-core/timer' }, + //{ text: 'Trace', link: '/nativescript-core/trace' }, + //{ text: 'Xml Parser', link: '/nativescript-core/xml-parser' }, ], }, // { diff --git a/nativescript-core/Application.md b/nativescript-core/Application.md new file mode 100644 index 00000000..14d3aa84 --- /dev/null +++ b/nativescript-core/Application.md @@ -0,0 +1,104 @@ +--- +title: Application +--- + +## Application + +The Application module provides abstraction over the platform-specific Application implementations. The module lets you manage the lifecycle of your NativeScript applications from starting the application to handling application events and creating platform-specific logic, such as, sending Broadcasts on Android or adding a Notification observer on IOS. + +#### Usage + +/// flavor javascript + +```javascript +const applicationModule = require('@nativescript/core/application') +``` + +/// + +/// flavor typescript + +```typescript +import { Application } from '@nativescript/core' +``` + +/// + +## Android + +The application module provides a number of Android specific properties to access the Android app, context and activities. + +/// flavor javascript + +```javascript +const androidApp = applicationModule.android +const isPaused = androidApp.paused // e.g. false +const packageName = androidApp.packageName // The package ID e.g. org.nativescript.nativescriptsdkexamplesng +const nativeApp = androidApp.nativeApp // The native APplication reference +const foregroundActivity = androidApp.foregroundActivity // The current Activity reference +const context = androidApp.context // The current Android context +``` + +/// + +/// flavor typescript + +```typescript + +``` + +/// + +#### Registering a Broadcast Receiver + +/// flavor javascript + +```javascript +if (applicationModule.isAndroid) { + // use tns-platform-declarations to acces native APIs (e.g. android.content.Intent) + const receiverCallback = (androidContext, intent) => { + const level = intent.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1) + const scale = intent.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1) + const percent = (level / scale) * 100.0 + vm.set('batteryLife', percent.toString()) + } + + applicationModule.android.registerBroadcastReceiver( + android.content.Intent.ACTION_BATTERY_CHANGED, + receiverCallback + ) +} +``` + +/// + +/// flavor typescript + +```typescript + +``` + +/// + +#### Methods + +| Name | Type | Description | +| ---------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `getConnectionType` | `number` | Gets the type of connection. Returns a value from the `connectivityModule.connectionType` enumeration. To use this method on Android you need to have the **android.permission.ACCESS_NETWORK_STATE** permission added to the **AndroidManifest.xml** file. | +| `startMonitoring(connectionTypeChangedCallback: function)` | `void` | Starts monitoring the connection type. | +| `stopMonitoring` | `void` | Stops monitoring the connection type. | + +#### Connection Types + +- `none = 0`, +- `wifi = 1`, +- `mobile = 2`, +- `ethernet = 3`, +- `bluetooth = 4`, +- `vpn = 5` + +#### Native Component + +| Android | iOS | +| :---------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | +| [CONNECTIVITY_SERVICE (android.content.Context)](https://developer.android.com/reference/android/content/Context) | [SCNetworkReachability](https://developer.apple.com/documentation/systemconfiguration/scnetworkreachability-g7d) | diff --git a/nativescript-core/connectivity.md b/nativescript-core/connectivity.md index 174145c8..ac54ce4c 100644 --- a/nativescript-core/connectivity.md +++ b/nativescript-core/connectivity.md @@ -88,13 +88,6 @@ export function onNavigatedTo(args) { - `bluetooth = 4`, - `vpn = 5` -#### API References - -| Name | Type | -| --------------------------------------------------------------------------- | -------- | -| [@nativescript/core/connectivity](/api-reference/modules.html#connectivity) | `Module` | -| [connectionType](/api-reference/modules.html#connectivity) | `Enum` | - #### Native Component | Android | iOS | diff --git a/nativescript-core/http.md b/nativescript-core/http.md index 4739948c..0248ef51 100644 --- a/nativescript-core/http.md +++ b/nativescript-core/http.md @@ -172,9 +172,3 @@ Http.request({ | `getJSON(url: string): Promise` | `Promise` | Downloads the content from the specified URL as a string and returns its JSON.parse representation. | | `getString(url: string): Promise` | `Promise` | Downloads the content from the specified URL as a string. | | `request(options: HttpRequestOptions): Promise` | `Promise` | Makes a generic http request using the provided options and returns a HttpResponse Object. | - -#### API References - -| Name | Type | -| ---------------------------------------------------------------------------------------- | -------- | -| [@nativescript/core/http](https://docs.nativescript.org/api-reference/modules.html#http) | `Module` | From 1505164a578b8ad3dcc17dc5a4ac6aa914f13335 Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Tue, 21 Jun 2022 01:28:14 +0200 Subject: [PATCH 008/104] Added Application.android properties info --- nativescript-core/Application.md | 226 +++++++++++++++++++++++++++---- 1 file changed, 197 insertions(+), 29 deletions(-) diff --git a/nativescript-core/Application.md b/nativescript-core/Application.md index 14d3aa84..acea2dce 100644 --- a/nativescript-core/Application.md +++ b/nativescript-core/Application.md @@ -2,11 +2,11 @@ title: Application --- -## Application +# Application -The Application module provides abstraction over the platform-specific Application implementations. The module lets you manage the lifecycle of your NativeScript applications from starting the application to handling application events and creating platform-specific logic, such as, sending Broadcasts on Android or adding a Notification observer on IOS. +The Application module provides abstraction over the platform-specific Application implementations. The module lets you manage things like the lifecycle of your NativeScript applications, from starting the application to handling application events, and creating platform-specific logic, such as, sending Broadcasts on Android or adding a Notification observer on IOS. -#### Usage +### Import /// flavor javascript @@ -26,17 +26,17 @@ import { Application } from '@nativescript/core' ## Android -The application module provides a number of Android specific properties to access the Android app, context and activities. +The application module provides a number of Android specific properties to access the Android app which exposes things such as the main activity for the application, the currently active activity, a method to register a broadcast receiver and other Android specific property and methods, as we will see below. +## Android Properties + +### android + +The property gives you the Nativescript wrapper, the AndroidApplication object, around the android application. /// flavor javascript ```javascript const androidApp = applicationModule.android -const isPaused = androidApp.paused // e.g. false -const packageName = androidApp.packageName // The package ID e.g. org.nativescript.nativescriptsdkexamplesng -const nativeApp = androidApp.nativeApp // The native APplication reference -const foregroundActivity = androidApp.foregroundActivity // The current Activity reference -const context = androidApp.context // The current Android context ``` /// @@ -44,18 +44,188 @@ const context = androidApp.context // The current Android context /// flavor typescript ```typescript +const androidApp: AndroidApplication = Application.android +``` + +/// + +### nativeApp + +This a native application reference. Basically, it is the [Android Application](http://developer.android.com/reference/android/app/Application.html) object instance keeping track of the global application state. From this object you can get methods such as `getFilesDir()`, `onLowMemory()`,etc. +||| +|----|-----| +|Return type:|`android.app.Application`| +||| + +/// flavor javascript + +```javascript +const nativeApp = androidApp.nativeApp +``` + +/// +/// flavor typescript + +```typescript +const nativeApp: android.app.Application = androidApp.nativeApp +``` + +/// + +### foregroundActivity + +The reference to the currently active (loaded) [android Activity](http://developer.android.com/reference/android/app/Activity.html). This property is automatically updated upon Activity events. +||| +|----|-----| +|Return type:|`androidx.appcompat.app.AppCompatActivity`| +||| + +/// flavor javascript + +```javascript +const foregroundActivity = androidApp.foregroundActivity +``` + +/// +/// flavor typescript + +```typescript +const foregroundActivity = androidApp.foregroundActivity +``` + +/// + +### startActivity + +The main (start) Activity for the application. +||| +|----|-----| +|Return type:|`androidx.appcompat.app.AppCompatActivity`| +||| + +/// flavor javascript + +```javascript +const startActivity = androidApp.startActivity +``` + +/// + +/// flavor typescript + +```typescript +const startActivity: androidx.appcompat.app.AppCompatActivity = androidApp.startActivity +``` + +/// + +### orientation + +Gets the orientation of the application. + +| | | +| ------------ | ------------------------------------ | +| Return type: | `portrait`\| `landscape`\| `unknown` | +| | | + +/// flavor javascript + +```javascript +const startActivity = androidApp.orientaion +``` + +/// + +/// flavor typescript + +```typescript +const orientation: 'portrait' | 'landscape' | 'unknown' = androidApp.orientation +``` + +/// + +### systemAppearance + +Returns whether the system appearance is dark or light. + +| | | +| ------------ | ---------------- | +| Return type: | `dark`\| `light` | +| | | + +/// flavor javascript + +```javascript +const systemAppearance = androidApp.systemAppearance +``` + +/// + +/// flavor typescript + +```typescript +const systemAppearance: 'dark' | 'light' = androidApp.systemAppearance +``` + +/// + +### paused + +Returns `true` if the main application activity is not running (suspended), not even running in the background, otherwise `false` is returned. + +| | | +| ------------ | --------- | +| Return type: | `boolean` | +| | | + +/// flavor javascript + +```javascript +const isSuspended = androidApp.paused +``` + +/// + +/// flavor typescript + +```typescript +const isSuspended: boolean = androidApp.paused +``` + +/// + +### backgrounded + +Returns true if the main application activity is in background, otherwise false is returned. +||| +|----|-----| +|Return type:|`boolean`| +||| + +/// flavor javascript + +```javascript +const isInBackground = androidApp.backgrounded +``` + +/// + +/// flavor typescript +```typescript +const isInBackground: boolean = androidApp.backgrounded ``` /// -#### Registering a Broadcast Receiver +### Broadcasts + +### Registering a broadcast Receiver /// flavor javascript ```javascript -if (applicationModule.isAndroid) { - // use tns-platform-declarations to acces native APIs (e.g. android.content.Intent) +if (platformModule.isAndroid) { const receiverCallback = (androidContext, intent) => { const level = intent.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1) const scale = intent.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1) @@ -75,28 +245,26 @@ if (applicationModule.isAndroid) { /// flavor typescript ```typescript +if (isAndroid) { + const receiverCallback = ( + androidContext: globalAndroid.content.Context, + intent: globalAndroid.content.Intent + ) => { + const level = intent.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1) + const scale = intent.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1) + const percent = (level / scale) * 100.0 + vm.set('batteryLife', percent.toString()) + } + Application.android.registerBroadcastReceiver( + android.content.Intent.ACTION_BATTERY_CHANGED, + receiverCallback + ) +} ``` /// -#### Methods - -| Name | Type | Description | -| ---------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `getConnectionType` | `number` | Gets the type of connection. Returns a value from the `connectivityModule.connectionType` enumeration. To use this method on Android you need to have the **android.permission.ACCESS_NETWORK_STATE** permission added to the **AndroidManifest.xml** file. | -| `startMonitoring(connectionTypeChangedCallback: function)` | `void` | Starts monitoring the connection type. | -| `stopMonitoring` | `void` | Stops monitoring the connection type. | - -#### Connection Types - -- `none = 0`, -- `wifi = 1`, -- `mobile = 2`, -- `ethernet = 3`, -- `bluetooth = 4`, -- `vpn = 5` - #### Native Component | Android | iOS | From 255d4a7b9736b1f96b80181efcf7fa3f0d8f6f20 Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Tue, 21 Jun 2022 17:02:00 +0200 Subject: [PATCH 009/104] Added back API References section with full links --- nativescript-core/connectivity.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/nativescript-core/connectivity.md b/nativescript-core/connectivity.md index ac54ce4c..c70921ef 100644 --- a/nativescript-core/connectivity.md +++ b/nativescript-core/connectivity.md @@ -88,6 +88,13 @@ export function onNavigatedTo(args) { - `bluetooth = 4`, - `vpn = 5` +#### API References + +| Name | Type | +| -------------------------------------------------------------------------------------------------------- | -------- | +| [@nativescript/core/connectivity](https://docs.nativescript.org/api-reference/modules.html#connectivity) | `Module` | +| [connectionType](https://docs.nativescript.org/api-reference/modules.html#connectivity) | `Enum` | + #### Native Component | Android | iOS | From 2f7ead2c65f0458cf874b684c1425add8b761a46 Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Tue, 21 Jun 2022 17:02:55 +0200 Subject: [PATCH 010/104] Added back the API References section --- nativescript-core/http.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/nativescript-core/http.md b/nativescript-core/http.md index 0248ef51..4739948c 100644 --- a/nativescript-core/http.md +++ b/nativescript-core/http.md @@ -172,3 +172,9 @@ Http.request({ | `getJSON(url: string): Promise` | `Promise` | Downloads the content from the specified URL as a string and returns its JSON.parse representation. | | `getString(url: string): Promise` | `Promise` | Downloads the content from the specified URL as a string. | | `request(options: HttpRequestOptions): Promise` | `Promise` | Makes a generic http request using the provided options and returns a HttpResponse Object. | + +#### API References + +| Name | Type | +| ---------------------------------------------------------------------------------------- | -------- | +| [@nativescript/core/http](https://docs.nativescript.org/api-reference/modules.html#http) | `Module` | From c4250dc3e68060af0d576f30fe4e3e116d95a11d Mon Sep 17 00:00:00 2001 From: Nandesora Tjihero Date: Tue, 21 Jun 2022 17:04:09 +0200 Subject: [PATCH 011/104] Completed the docs of Android API part of the Application module --- nativescript-core/Application.md | 87 ++++++++++++++++++++++++++++---- 1 file changed, 78 insertions(+), 9 deletions(-) diff --git a/nativescript-core/Application.md b/nativescript-core/Application.md index acea2dce..d887d9ad 100644 --- a/nativescript-core/Application.md +++ b/nativescript-core/Application.md @@ -11,7 +11,7 @@ The Application module provides abstraction over the platform-specific Applicati /// flavor javascript ```javascript -const applicationModule = require('@nativescript/core/application') +import { Application } from '@nativescript/core' ``` /// @@ -36,7 +36,7 @@ The property gives you the Nativescript wrapper, the AndroidApplication object, /// flavor javascript ```javascript -const androidApp = applicationModule.android +const androidApp = Application.android ``` /// @@ -218,22 +218,32 @@ const isInBackground: boolean = androidApp.backgrounded /// -### Broadcasts +## AndroidApplication Methods + +### registerBroadcastReceiver(intentFilter, onReceiveCallback) + +Registers a BroadcastReceiver to be run in the main activity thread. The receiver will be called with any broadcast Intent that matches filter, in the main application thread. For more information, please [visit](http://developer.android.com/reference/android/content/Context.html#registerReceiver%28android.content.BroadcastReceiver,%20android.content.IntentFilter%29). -### Registering a broadcast Receiver +| Parameter(s) | Definition | +| ------------------- | ------------------------------------------------------------------------------------ | +| `intentFilter` | A string containing the intent filter. | +| `onReceiveCallback` | A callback function that will be called each time the receiver receives a broadcast. | +Since this code is Android specific, first check if `isAndroid` is true. /// flavor javascript ```javascript -if (platformModule.isAndroid) { +import { isAndroid } from '@nativescript/core' + +if (isAndroid) { const receiverCallback = (androidContext, intent) => { const level = intent.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1) const scale = intent.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1) const percent = (level / scale) * 100.0 - vm.set('batteryLife', percent.toString()) + viewModel.set('batteryLife', percent.toString()) } - applicationModule.android.registerBroadcastReceiver( + androidApp.registerBroadcastReceiver( android.content.Intent.ACTION_BATTERY_CHANGED, receiverCallback ) @@ -245,6 +255,8 @@ if (platformModule.isAndroid) { /// flavor typescript ```typescript +import { isAndroid } from '@nativescript/core' + if (isAndroid) { const receiverCallback = ( androidContext: globalAndroid.content.Context, @@ -253,10 +265,10 @@ if (isAndroid) { const level = intent.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1) const scale = intent.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1) const percent = (level / scale) * 100.0 - vm.set('batteryLife', percent.toString()) + viewModel.set('batteryLife', percent.toString()) } - Application.android.registerBroadcastReceiver( + androidApp.registerBroadcastReceiver( android.content.Intent.ACTION_BATTERY_CHANGED, receiverCallback ) @@ -265,6 +277,63 @@ if (isAndroid) { /// +### getRegisteredBroadcastReceiver(intentFilter) + +Gets a registered BroadcastReceiver for the specified intent filter. +|Parameter(s)|Definition| +|-----|-----| +|`intentFilter`| A string containing the intent filter for which the BroadcastReceiver.| + +/// flavor javascript + +```javascript +if (isAndroid) { + const registerReceiver = androidApp.getRegisteredBroadcastReceiver(intentFilter) +} +``` + +/// + +/// flavor typescript + +```typescript +if (isAndroid) { + const registerReceiver: android.content.BroadcastReceiver = + androidApp.getRegisteredBroadcastReceiver(intentFilter) +} +``` + +/// + +### unregisterBroadcastReceiver(intentFilter) + +Unregisters previously registered BroadcastReceiver. +|Parameter(s)|Definition| +|-----|-----| +|`intentFilter`|A string containing the intent filter with which the receiver was originally registered. +.| + +/// flavor javascript + +```javascript +if (isAndroid) { + const registerReceiver = androidApp.getRegisteredBroadcastReceiver(intentFilter) +} +``` + +/// + +/// flavor typescript + +```typescript +if (isAndroid) { + const registerReceiver: android.content.BroadcastReceiver = + androidApp.getRegisteredBroadcastReceiver(intentFilter) +} +``` + +/// + #### Native Component | Android | iOS | From 3aa4793681de253978f0ac7faea99492d4f15d3b Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Thu, 23 Jun 2022 00:44:14 +0200 Subject: [PATCH 012/104] Added more content --- nativescript-core/Application.md | 356 +++++++++++++++++++++++++++++-- 1 file changed, 334 insertions(+), 22 deletions(-) diff --git a/nativescript-core/Application.md b/nativescript-core/Application.md index d887d9ad..35fb3b47 100644 --- a/nativescript-core/Application.md +++ b/nativescript-core/Application.md @@ -32,7 +32,7 @@ The application module provides a number of Android specific properties to acces ### android -The property gives you the Nativescript wrapper, the AndroidApplication object, around the android application. +The property gives you the Nativescript wrapper, the AndroidApplication object, around the native android application instance. /// flavor javascript ```javascript @@ -54,7 +54,7 @@ const androidApp: AndroidApplication = Application.android This a native application reference. Basically, it is the [Android Application](http://developer.android.com/reference/android/app/Application.html) object instance keeping track of the global application state. From this object you can get methods such as `getFilesDir()`, `onLowMemory()`,etc. ||| |----|-----| -|Return type:|`android.app.Application`| +|Type:|`android.app.Application`| ||| /// flavor javascript @@ -77,7 +77,7 @@ const nativeApp: android.app.Application = androidApp.nativeApp The reference to the currently active (loaded) [android Activity](http://developer.android.com/reference/android/app/Activity.html). This property is automatically updated upon Activity events. ||| |----|-----| -|Return type:|`androidx.appcompat.app.AppCompatActivity`| +|Type:|`androidx.appcompat.app.AppCompatActivity`| ||| /// flavor javascript @@ -100,7 +100,7 @@ const foregroundActivity = androidApp.foregroundActivity The main (start) Activity for the application. ||| |----|-----| -|Return type:|`androidx.appcompat.app.AppCompatActivity`| +|Type:|`androidx.appcompat.app.AppCompatActivity`| ||| /// flavor javascript @@ -121,17 +121,17 @@ const startActivity: androidx.appcompat.app.AppCompatActivity = androidApp.start ### orientation -Gets the orientation of the application. +Gets or sets the orientation of the application. -| | | -| ------------ | ------------------------------------ | -| Return type: | `portrait`\| `landscape`\| `unknown` | -| | | +| | | +| ----- | ------------------------------------ | +| Type: | `portrait`\| `landscape`\| `unknown` | +| | | /// flavor javascript ```javascript -const startActivity = androidApp.orientaion +const orientation = androidApp.orientaion ``` /// @@ -148,10 +148,10 @@ const orientation: 'portrait' | 'landscape' | 'unknown' = androidApp.orientation Returns whether the system appearance is dark or light. -| | | -| ------------ | ---------------- | -| Return type: | `dark`\| `light` | -| | | +| | | +| ----- | ---------------- | +| Type: | `dark`\| `light` | +| | | /// flavor javascript @@ -173,10 +173,10 @@ const systemAppearance: 'dark' | 'light' = androidApp.systemAppearance Returns `true` if the main application activity is not running (suspended), not even running in the background, otherwise `false` is returned. -| | | -| ------------ | --------- | -| Return type: | `boolean` | -| | | +| | | +| ----- | --------- | +| Type: | `boolean` | +| | | /// flavor javascript @@ -199,7 +199,7 @@ const isSuspended: boolean = androidApp.paused Returns true if the main application activity is in background, otherwise false is returned. ||| |----|-----| -|Return type:|`boolean`| +|Type:|`boolean`| ||| /// flavor javascript @@ -334,8 +334,320 @@ if (isAndroid) { /// +## Android Activity lifecycles events + +/// flavor javascript + +```javascript +applicationModule.AndroidApplication.on('activityResumed', args => { + //handle the event here +}) +``` + +/// + +/// flavor typescript + +```typescript +Application.AndroidApplication.on('activityResumed', args => { + //handle the event here +}) +``` + +/// +Other Android Activity lifecycles events are: + +- `activityCreated` +- `activityDestroyed` +- `activityStarted` +- `activityPaused` +- `activityStopped` +- `saveActivityState` +- `activityResult` +- `activityBackPressed` +- `activityNewIntent` +- `activityRequestPermissions` + +## iOS + +## iOS Properties + +### ios + +The property gives you the Nativescript wrapper, the iOSApplication object, around the native iOS application instance. + +| | | +| ----- | ---------------- | +| Type: | `iOSApplication` | + +/// flavor javascript + +```javascript +const iOSApp = Application.ios +``` + +/// + +/// flavor typescript + +```typescript +const iOSApp: iOSApplication = Application.ios +``` + +/// + +### rootController + +The root view controller for the iOS application. +||| +|----|-----| +|Type:|`UIViewController`| + +/// flavor javascript + +```javascript +const rootController = iOSApp.rootController +``` + +/// + +/// flavor typescript + +```typescript +const rootController: UIViewController = iOSApp.rootController +``` + +/// + +### window + +This property gives the key window, the container for your app views and one of its roles is to deliver touch events to the views. Views are the user interface items such as button, label or scrollview. +||| +|----|-----| +|Type:|`UIWindow`| + +/// flavor javascript + +```javascript +const rootController = iOSApp.window +``` + +/// + +/// flavor typescript + +```typescript +const rootController: UIWindow = iOSApp.window +``` + +/// + +### delegate + +A set of methods to manage shared behaviors for your app +||| +|----|-----| +|Type:|`UIApplicationDelegate`| + +/// flavor javascript + +```javascript +const delegate = iOSApp.delegate +``` + +/// + +/// flavor typescript + +```typescript +const rootController: UIApplicationDelegate = iOSApp.delegate +``` + +/// + +### orientation + +Gets or sets the orientation of the application. + +| | | +| ----- | ------------------------------------ | +| Type: | `portrait`\| `landscape`\| `unknown` | +| | | + +/// flavor javascript + +```javascript +const orientation = iOSApp.orientaion +``` + +/// + +/// flavor typescript + +```typescript +const orientation: 'portrait' | 'landscape' | 'unknown' = iOSApp.orientation +``` + +/// + +### systemAppearance + +Returns whether the system appearance is dark or light. + +| | | +| ----- | ----------------------------------------------- | +| Type: | `'dark'` \| `'light'` \| `null` (for iOS <= 11) | +| | | + +/// flavor javascript + +```javascript +const systemAppearance = iOSApp.systemAppearance +``` + +/// + +/// flavor typescript + +```typescript +const systemAppearance: 'dark' \| 'light' \| 'null' = iOSApp.systemAppearance +``` + +/// + +### nativeApp + +Returns the reference to the native iOS app. + +| | | +| ----- | --------------- | +| Type: | `UIApplication` | +| | | + +/// flavor javascript + +```javascript +const nativeApp = iOSApp.nativeApp +``` + +/// + +/// flavor typescript + +```typescript +const nativeApp: UIApplication = iOSApp.nativeApp +``` + +/// + +## iOSApplication Methods + +### addNotificationObserver(notificationName, onReceiveCallback: (notification)) + +Adds an observer to the default notification center for the specified notification. +For more information, please [visit](https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSNotificationCenter_Class/#//apple_ref/occ/instm/NSNotificationCenter/addObserver:selector:name:object:) + +| Parameter(s) | Definition | +| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `notificationName:string` | A string containing the name of the notification. Find the possible values [here](https://developer.apple.com/documentation/foundation/nsnotificationname?language=objc) | +| `onReceiveCallback:(notification: NSNotification) => void` | A callback function that will be called each time the observer receives a notification for which it was registered. | + +/// flavor javascript + +```javascript +const observer = iOSApp.addNotificationObserver( + 'myNotification', + (notification: NSNotification) => {} +) +``` + +/// + +/// flavor typescript + +```typescript +const observer: any = iOSApp.addNotificationObserver( + UIDeviceOrientationDidChangeNotification, // For example + (notification: NSNotification) => { + //Handle the notification + } +) +``` + +/// + +### removeNotificationObserver(observer, notificationName) + +Removes the observer for the specified notification from the default notification center. +|Parameter(s)|Definition| +|-----|-----| +|`observer`| The observer that was returned from the addNotificationObserver method.| +|`notificationName`| A string containing the name of the notification. | +|`onReceiveCallback`| A callback function that will be called each time the observer receives a notification.| + +/// flavor javascript + +```javascript +iOSApp.removeNotificationObserver(observer, UIDeviceBatteryStateDidChangeNotification) +``` + +/// + +/// flavor typescript + +```typescript +iOSApp.removeNotificationObserver(observer, UIDeviceBatteryStateDidChangeNotification) +``` + +/// + +## Cross-platform application events + +These events are the application-state related. + +/// flavor javascript + +```javascript +applicationModule.on('orientationChanged', args => { + console.log(args.eventName) // orientationChanged +}) +``` + +/// + +/// flavor typescript + +```typescript +Application.on('orientationChanged', (args: ApplicationEventData) => { + console.log(args.eventName) // orientationChanged +}) +``` + +/// +Other cross-platform events: + +- `livesync` +- `cssChanged` +- `launch` +- `displayed` +- `suspend` +- `resume` +- `exit` +- `lowMemory` +- `uncaughtError` +- `discardedError` +- `orientationChanged` +- `systemAppearanceChanged` +- `fontScaleChanged` + +#### API References + +| Name | Type | +| ------------------------------------------------------------------------------------------------- | -------- | +| [@nativescript/core/application](https://docs.nativescript.org/api-reference/modules#application) | `Module` | + #### Native Component -| Android | iOS | -| :---------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | -| [CONNECTIVITY_SERVICE (android.content.Context)](https://developer.android.com/reference/android/content/Context) | [SCNetworkReachability](https://developer.apple.com/documentation/systemconfiguration/scnetworkreachability-g7d) | +| Android | iOS | +| :----------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- | +| [android.app.Application](https://developer.android.com/reference/android/app/Application) | [UIApplication](https://developer.apple.com/documentation/uikit/uiapplication?language=objc) | From a7995941e127e6cbbdff30f8aaa12cfef0a13858 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Thu, 23 Jun 2022 21:09:07 +0200 Subject: [PATCH 013/104] Completed the Application module category --- nativescript-core/Application.md | 63 +++++++++++++++++++++++++------- 1 file changed, 50 insertions(+), 13 deletions(-) diff --git a/nativescript-core/Application.md b/nativescript-core/Application.md index 35fb3b47..d10c0424 100644 --- a/nativescript-core/Application.md +++ b/nativescript-core/Application.md @@ -4,7 +4,7 @@ title: Application # Application -The Application module provides abstraction over the platform-specific Application implementations. The module lets you manage things like the lifecycle of your NativeScript applications, from starting the application to handling application events, and creating platform-specific logic, such as, sending Broadcasts on Android or adding a Notification observer on IOS. +The Application module provides abstraction over the platform-specific application implementations. The module lets you manage things such as handling lifecycle events of your application (cross-platform and/or native), sending Broadcasts on Android or adding a Notification observer on IOS. ### Import @@ -26,13 +26,13 @@ import { Application } from '@nativescript/core' ## Android -The application module provides a number of Android specific properties to access the Android app which exposes things such as the main activity for the application, the currently active activity, a method to register a broadcast receiver and other Android specific property and methods, as we will see below. +For android, you can access the main activity for the application, currently active activity, a method to register a broadcast receiver and other Android-specific properties and methods, as we will see below. ## Android Properties ### android -The property gives you the Nativescript wrapper, the AndroidApplication object, around the native android application instance. +The property gives you the Nativescript wrapper, the AndroidApplication object, around the native android native application instance. /// flavor javascript ```javascript @@ -51,7 +51,7 @@ const androidApp: AndroidApplication = Application.android ### nativeApp -This a native application reference. Basically, it is the [Android Application](http://developer.android.com/reference/android/app/Application.html) object instance keeping track of the global application state. From this object you can get methods such as `getFilesDir()`, `onLowMemory()`,etc. +This a native application reference. Basically, it is the [android.app.Application](http://developer.android.com/reference/android/app/Application.html) instance keeping track of the global application state. From this object you can get methods such as `getFilesDir()`, `onLowMemory()`,etc. ||| |----|-----| |Type:|`android.app.Application`| @@ -171,7 +171,7 @@ const systemAppearance: 'dark' | 'light' = androidApp.systemAppearance ### paused -Returns `true` if the main application activity is not running (suspended), not even running in the background, otherwise `false` is returned. +Returns `true` if the main application activity is not running (suspended), otherwise `false` is returned. | | | | ----- | --------- | @@ -229,7 +229,7 @@ Registers a BroadcastReceiver to be run in the main activity thread. The receive | `intentFilter` | A string containing the intent filter. | | `onReceiveCallback` | A callback function that will be called each time the receiver receives a broadcast. | -Since this code is Android specific, first check if `isAndroid` is true. +Since this code is Android specific, first check if `isAndroid` is true. You the same for any Android-specific code to avoid code for Android to run on iOS and results in the app crashing. /// flavor javascript ```javascript @@ -444,15 +444,34 @@ const rootController: UIWindow = iOSApp.window ### delegate -A set of methods to manage shared behaviors for your app +This returns the class you set (the best place to set it is in the `app.js` or `app.ts`, right before `Application.run()`) as a delegate or undefined if you didn't set any. The iOS system monitors the different states of your application and emits an event at each state. To handle these lifecycle events, you have to write a class that extends UIResponder and implements UIApplicationDelegate classes. This class is your delegate. You overwrite the methods from UIApplicationDelegate to handle the events. ||| |----|-----| -|Type:|`UIApplicationDelegate`| +|Type:|`UIApplicationDelegate` \| `undefined`| /// flavor javascript ```javascript -const delegate = iOSApp.delegate +const MyDelegate = (function (_super) { + __extends(MyDelegate, _super) + function MyDelegate() { + _super.apply(this, arguments) + } + MyDelegate.prototype.applicationDidFinishLaunchingWithOptions = function ( + application, + launchOptions + ) { + console.log('applicationWillFinishLaunchingWithOptions: ' + launchOptions) + return true + } + MyDelegate.prototype.applicationDidBecomeActive = function (application) { + console.log('applicationDidBecomeActive: ' + application) + } + MyDelegate.ObjCProtocols = [UIApplicationDelegate] + return MyDelegate +})(UIResponder) + +Application.ios.delegate = MyDelegate ``` /// @@ -460,9 +479,28 @@ const delegate = iOSApp.delegate /// flavor typescript ```typescript -const rootController: UIApplicationDelegate = iOSApp.delegate +@NativeClass() +class MyDelegate extends UIResponder implements UIApplicationDelegate { + public static ObjCProtocols = [UIApplicationDelegate] + + applicationDidFinishLaunchingWithOptions( + application: UIApplication, + launchOptions: NSDictionary + ): boolean { + console.log('applicationWillFinishLaunchingWithOptions: ' + launchOptions) + + return true + } + + applicationDidBecomeActive(application: UIApplication): void { + console.log('applicationDidBecomeActive: ' + application) + } +} +Application.ios.delegate = MyDelegate ``` +For a complete list of the lifecycle events, visit [UIApplicationDelegate](https://developer.apple.com/documentation/uikit/uiapplicationdelegate?language=objc). + /// ### orientation @@ -545,7 +583,7 @@ const nativeApp: UIApplication = iOSApp.nativeApp ### addNotificationObserver(notificationName, onReceiveCallback: (notification)) Adds an observer to the default notification center for the specified notification. -For more information, please [visit](https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSNotificationCenter_Class/#//apple_ref/occ/instm/NSNotificationCenter/addObserver:selector:name:object:) +For more information, please [visit](https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSNotificationCenter_Class/#//apple_ref/occ/instm/NSNotificationCenter/addObserver:selector:name:object:). | Parameter(s) | Definition | | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | @@ -603,8 +641,7 @@ iOSApp.removeNotificationObserver(observer, UIDeviceBatteryStateDidChangeNotific ## Cross-platform application events -These events are the application-state related. - +These are Nativescript events for both platforms. /// flavor javascript ```javascript From b7f931d70ea0e4f38dc7415dc69e4f4699646ec8 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Sat, 25 Jun 2022 00:54:57 +0200 Subject: [PATCH 014/104] Remove the unnecessary flavor tabs --- nativescript-core/Application.md | 175 ------------------------------- 1 file changed, 175 deletions(-) diff --git a/nativescript-core/Application.md b/nativescript-core/Application.md index d10c0424..71569eb0 100644 --- a/nativescript-core/Application.md +++ b/nativescript-core/Application.md @@ -8,22 +8,14 @@ The Application module provides abstraction over the platform-specific applicati ### Import -/// flavor javascript - ```javascript import { Application } from '@nativescript/core' ``` -/// - -/// flavor typescript - ```typescript import { Application } from '@nativescript/core' ``` -/// - ## Android For android, you can access the main activity for the application, currently active activity, a method to register a broadcast receiver and other Android-specific properties and methods, as we will see below. @@ -33,22 +25,15 @@ For android, you can access the main activity for the application, currently act ### android The property gives you the Nativescript wrapper, the AndroidApplication object, around the native android native application instance. -/// flavor javascript ```javascript const androidApp = Application.android ``` -/// - -/// flavor typescript - ```typescript const androidApp: AndroidApplication = Application.android ``` -/// - ### nativeApp This a native application reference. Basically, it is the [android.app.Application](http://developer.android.com/reference/android/app/Application.html) instance keeping track of the global application state. From this object you can get methods such as `getFilesDir()`, `onLowMemory()`,etc. @@ -57,21 +42,14 @@ This a native application reference. Basically, it is the [android.app.Applicati |Type:|`android.app.Application`| ||| -/// flavor javascript - ```javascript const nativeApp = androidApp.nativeApp ``` -/// -/// flavor typescript - ```typescript const nativeApp: android.app.Application = androidApp.nativeApp ``` -/// - ### foregroundActivity The reference to the currently active (loaded) [android Activity](http://developer.android.com/reference/android/app/Activity.html). This property is automatically updated upon Activity events. @@ -80,21 +58,14 @@ The reference to the currently active (loaded) [android Activity](http://develop |Type:|`androidx.appcompat.app.AppCompatActivity`| ||| -/// flavor javascript - ```javascript const foregroundActivity = androidApp.foregroundActivity ``` -/// -/// flavor typescript - ```typescript const foregroundActivity = androidApp.foregroundActivity ``` -/// - ### startActivity The main (start) Activity for the application. @@ -103,22 +74,14 @@ The main (start) Activity for the application. |Type:|`androidx.appcompat.app.AppCompatActivity`| ||| -/// flavor javascript - ```javascript const startActivity = androidApp.startActivity ``` -/// - -/// flavor typescript - ```typescript const startActivity: androidx.appcompat.app.AppCompatActivity = androidApp.startActivity ``` -/// - ### orientation Gets or sets the orientation of the application. @@ -128,22 +91,14 @@ Gets or sets the orientation of the application. | Type: | `portrait`\| `landscape`\| `unknown` | | | | -/// flavor javascript - ```javascript const orientation = androidApp.orientaion ``` -/// - -/// flavor typescript - ```typescript const orientation: 'portrait' | 'landscape' | 'unknown' = androidApp.orientation ``` -/// - ### systemAppearance Returns whether the system appearance is dark or light. @@ -153,22 +108,14 @@ Returns whether the system appearance is dark or light. | Type: | `dark`\| `light` | | | | -/// flavor javascript - ```javascript const systemAppearance = androidApp.systemAppearance ``` -/// - -/// flavor typescript - ```typescript const systemAppearance: 'dark' | 'light' = androidApp.systemAppearance ``` -/// - ### paused Returns `true` if the main application activity is not running (suspended), otherwise `false` is returned. @@ -178,22 +125,14 @@ Returns `true` if the main application activity is not running (suspended), othe | Type: | `boolean` | | | | -/// flavor javascript - ```javascript const isSuspended = androidApp.paused ``` -/// - -/// flavor typescript - ```typescript const isSuspended: boolean = androidApp.paused ``` -/// - ### backgrounded Returns true if the main application activity is in background, otherwise false is returned. @@ -202,22 +141,14 @@ Returns true if the main application activity is in background, otherwise false |Type:|`boolean`| ||| -/// flavor javascript - ```javascript const isInBackground = androidApp.backgrounded ``` -/// - -/// flavor typescript - ```typescript const isInBackground: boolean = androidApp.backgrounded ``` -/// - ## AndroidApplication Methods ### registerBroadcastReceiver(intentFilter, onReceiveCallback) @@ -230,7 +161,6 @@ Registers a BroadcastReceiver to be run in the main activity thread. The receive | `onReceiveCallback` | A callback function that will be called each time the receiver receives a broadcast. | Since this code is Android specific, first check if `isAndroid` is true. You the same for any Android-specific code to avoid code for Android to run on iOS and results in the app crashing. -/// flavor javascript ```javascript import { isAndroid } from '@nativescript/core' @@ -250,10 +180,6 @@ if (isAndroid) { } ``` -/// - -/// flavor typescript - ```typescript import { isAndroid } from '@nativescript/core' @@ -275,8 +201,6 @@ if (isAndroid) { } ``` -/// - ### getRegisteredBroadcastReceiver(intentFilter) Gets a registered BroadcastReceiver for the specified intent filter. @@ -284,18 +208,12 @@ Gets a registered BroadcastReceiver for the specified intent filter. |-----|-----| |`intentFilter`| A string containing the intent filter for which the BroadcastReceiver.| -/// flavor javascript - ```javascript if (isAndroid) { const registerReceiver = androidApp.getRegisteredBroadcastReceiver(intentFilter) } ``` -/// - -/// flavor typescript - ```typescript if (isAndroid) { const registerReceiver: android.content.BroadcastReceiver = @@ -303,8 +221,6 @@ if (isAndroid) { } ``` -/// - ### unregisterBroadcastReceiver(intentFilter) Unregisters previously registered BroadcastReceiver. @@ -313,18 +229,12 @@ Unregisters previously registered BroadcastReceiver. |`intentFilter`|A string containing the intent filter with which the receiver was originally registered. .| -/// flavor javascript - ```javascript if (isAndroid) { const registerReceiver = androidApp.getRegisteredBroadcastReceiver(intentFilter) } ``` -/// - -/// flavor typescript - ```typescript if (isAndroid) { const registerReceiver: android.content.BroadcastReceiver = @@ -332,29 +242,20 @@ if (isAndroid) { } ``` -/// - ## Android Activity lifecycles events -/// flavor javascript - ```javascript applicationModule.AndroidApplication.on('activityResumed', args => { //handle the event here }) ``` -/// - -/// flavor typescript - ```typescript Application.AndroidApplication.on('activityResumed', args => { //handle the event here }) ``` -/// Other Android Activity lifecycles events are: - `activityCreated` @@ -380,22 +281,14 @@ The property gives you the Nativescript wrapper, the iOSApplication object, arou | ----- | ---------------- | | Type: | `iOSApplication` | -/// flavor javascript - ```javascript const iOSApp = Application.ios ``` -/// - -/// flavor typescript - ```typescript const iOSApp: iOSApplication = Application.ios ``` -/// - ### rootController The root view controller for the iOS application. @@ -403,22 +296,14 @@ The root view controller for the iOS application. |----|-----| |Type:|`UIViewController`| -/// flavor javascript - ```javascript const rootController = iOSApp.rootController ``` -/// - -/// flavor typescript - ```typescript const rootController: UIViewController = iOSApp.rootController ``` -/// - ### window This property gives the key window, the container for your app views and one of its roles is to deliver touch events to the views. Views are the user interface items such as button, label or scrollview. @@ -426,22 +311,14 @@ This property gives the key window, the container for your app views and one of |----|-----| |Type:|`UIWindow`| -/// flavor javascript - ```javascript const rootController = iOSApp.window ``` -/// - -/// flavor typescript - ```typescript const rootController: UIWindow = iOSApp.window ``` -/// - ### delegate This returns the class you set (the best place to set it is in the `app.js` or `app.ts`, right before `Application.run()`) as a delegate or undefined if you didn't set any. The iOS system monitors the different states of your application and emits an event at each state. To handle these lifecycle events, you have to write a class that extends UIResponder and implements UIApplicationDelegate classes. This class is your delegate. You overwrite the methods from UIApplicationDelegate to handle the events. @@ -449,8 +326,6 @@ This returns the class you set (the best place to set it is in the `app.js` or ` |----|-----| |Type:|`UIApplicationDelegate` \| `undefined`| -/// flavor javascript - ```javascript const MyDelegate = (function (_super) { __extends(MyDelegate, _super) @@ -474,10 +349,6 @@ const MyDelegate = (function (_super) { Application.ios.delegate = MyDelegate ``` -/// - -/// flavor typescript - ```typescript @NativeClass() class MyDelegate extends UIResponder implements UIApplicationDelegate { @@ -501,8 +372,6 @@ Application.ios.delegate = MyDelegate For a complete list of the lifecycle events, visit [UIApplicationDelegate](https://developer.apple.com/documentation/uikit/uiapplicationdelegate?language=objc). -/// - ### orientation Gets or sets the orientation of the application. @@ -512,22 +381,14 @@ Gets or sets the orientation of the application. | Type: | `portrait`\| `landscape`\| `unknown` | | | | -/// flavor javascript - ```javascript const orientation = iOSApp.orientaion ``` -/// - -/// flavor typescript - ```typescript const orientation: 'portrait' | 'landscape' | 'unknown' = iOSApp.orientation ``` -/// - ### systemAppearance Returns whether the system appearance is dark or light. @@ -537,22 +398,16 @@ Returns whether the system appearance is dark or light. | Type: | `'dark'` \| `'light'` \| `null` (for iOS <= 11) | | | | -/// flavor javascript - ```javascript const systemAppearance = iOSApp.systemAppearance ``` /// -/// flavor typescript - ```typescript const systemAppearance: 'dark' \| 'light' \| 'null' = iOSApp.systemAppearance ``` -/// - ### nativeApp Returns the reference to the native iOS app. @@ -562,22 +417,14 @@ Returns the reference to the native iOS app. | Type: | `UIApplication` | | | | -/// flavor javascript - ```javascript const nativeApp = iOSApp.nativeApp ``` -/// - -/// flavor typescript - ```typescript const nativeApp: UIApplication = iOSApp.nativeApp ``` -/// - ## iOSApplication Methods ### addNotificationObserver(notificationName, onReceiveCallback: (notification)) @@ -590,8 +437,6 @@ For more information, please [visit](https://developer.apple.com/library/mac/doc | `notificationName:string` | A string containing the name of the notification. Find the possible values [here](https://developer.apple.com/documentation/foundation/nsnotificationname?language=objc) | | `onReceiveCallback:(notification: NSNotification) => void` | A callback function that will be called each time the observer receives a notification for which it was registered. | -/// flavor javascript - ```javascript const observer = iOSApp.addNotificationObserver( 'myNotification', @@ -599,10 +444,6 @@ const observer = iOSApp.addNotificationObserver( ) ``` -/// - -/// flavor typescript - ```typescript const observer: any = iOSApp.addNotificationObserver( UIDeviceOrientationDidChangeNotification, // For example @@ -612,8 +453,6 @@ const observer: any = iOSApp.addNotificationObserver( ) ``` -/// - ### removeNotificationObserver(observer, notificationName) Removes the observer for the specified notification from the default notification center. @@ -623,26 +462,17 @@ Removes the observer for the specified notification from the default notificatio |`notificationName`| A string containing the name of the notification. | |`onReceiveCallback`| A callback function that will be called each time the observer receives a notification.| -/// flavor javascript - ```javascript iOSApp.removeNotificationObserver(observer, UIDeviceBatteryStateDidChangeNotification) ``` -/// - -/// flavor typescript - ```typescript iOSApp.removeNotificationObserver(observer, UIDeviceBatteryStateDidChangeNotification) ``` -/// - ## Cross-platform application events These are Nativescript events for both platforms. -/// flavor javascript ```javascript applicationModule.on('orientationChanged', args => { @@ -650,17 +480,12 @@ applicationModule.on('orientationChanged', args => { }) ``` -/// - -/// flavor typescript - ```typescript Application.on('orientationChanged', (args: ApplicationEventData) => { console.log(args.eventName) // orientationChanged }) ``` -/// Other cross-platform events: - `livesync` From 15d397f8c198075c97b033047225b1ce1e2c878a Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Fri, 8 Jul 2022 09:42:17 -0700 Subject: [PATCH 015/104] chore: adjusting header order and naming --- .vitepress/config.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/.vitepress/config.js b/.vitepress/config.js index 12530b5a..64c8d53b 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -509,23 +509,14 @@ function getSidebar() { ], }, { - text: 'Running & Building', - children: [ - { - text: 'Webpack', - link: '/webpack', - }, - ], - }, - { - text: 'UI & Styling', + text: 'UI Components', children: [ { text: 'App_Resources', link: '/app-resources', }, { - text: 'UI & Styling', + text: 'Styling', link: '/ui-and-styling', }, { text: 'Interaction', link: '/interaction' }, @@ -551,6 +542,16 @@ function getSidebar() { //{ text: 'Xml Parser', link: '/nativescript-core/xml-parser' }, ], }, + { + text: '@nativescript/webpack', + children: [ + { + text: 'Overview', + link: '/webpack', + }, + ], + }, + // { // text: 'Performance', // children: [{ text: 'Webpack/Bundle Optimizations', link: '/performance' }], From 9310ce59036442f37ae9f4032607396de034bf38 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Sat, 9 Jul 2022 19:46:45 +0200 Subject: [PATCH 016/104] Added ApplicationSettings link --- .vitepress/config.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.vitepress/config.js b/.vitepress/config.js index 12530b5a..1d6072fb 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -535,7 +535,10 @@ function getSidebar() { text: '@nativescript/core', children: [ { text: 'Application', link: '/nativescript-core/application' }, - //{text: 'ApplicationSettings',link: '/nativescript-core/application-settings'}, + { + text: 'ApplicationSettings', + link: '/nativescript-core/application-settings', + }, { text: 'Color', link: '/nativescript-core/color' }, { text: 'Connectivity', link: '/nativescript-core/connectivity' }, //{ text: 'Observable', link: '/nativescript-core/observable' }, From 7ee45673fd3ce5cc538c4e49b436255a1bd14fa6 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Sat, 9 Jul 2022 19:48:57 +0200 Subject: [PATCH 017/104] Edited content --- nativescript-core/Application.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/nativescript-core/Application.md b/nativescript-core/Application.md index 71569eb0..2077e512 100644 --- a/nativescript-core/Application.md +++ b/nativescript-core/Application.md @@ -4,7 +4,7 @@ title: Application # Application -The Application module provides abstraction over the platform-specific application implementations. The module lets you manage things such as handling lifecycle events of your application (cross-platform and/or native), sending Broadcasts on Android or adding a Notification observer on IOS. +The Application class provides abstraction over the platform-specific application implementations. It lets you manage things such as handling lifecycle events of your application (cross-platform and/or native), sending Broadcasts on Android or adding a Notification observer on IOS. ### Import @@ -18,7 +18,7 @@ import { Application } from '@nativescript/core' ## Android -For android, you can access the main activity for the application, currently active activity, a method to register a broadcast receiver and other Android-specific properties and methods, as we will see below. +For android, you can access the main activity for the application, currently active activity, a method to register a broadcast receiver and other Android-specific properties and methods, as you will see below. ## Android Properties @@ -36,7 +36,7 @@ const androidApp: AndroidApplication = Application.android ### nativeApp -This a native application reference. Basically, it is the [android.app.Application](http://developer.android.com/reference/android/app/Application.html) instance keeping track of the global application state. From this object you can get methods such as `getFilesDir()`, `onLowMemory()`,etc. +This is a native application reference. Basically, it is the [android.app.Application](http://developer.android.com/reference/android/app/Application.html) instance keeping track of the global application state. From this object you can get methods such as `getFilesDir()`, `onLowMemory()`,etc. ||| |----|-----| |Type:|`android.app.Application`| @@ -153,7 +153,7 @@ const isInBackground: boolean = androidApp.backgrounded ### registerBroadcastReceiver(intentFilter, onReceiveCallback) -Registers a BroadcastReceiver to be run in the main activity thread. The receiver will be called with any broadcast Intent that matches filter, in the main application thread. For more information, please [visit](http://developer.android.com/reference/android/content/Context.html#registerReceiver%28android.content.BroadcastReceiver,%20android.content.IntentFilter%29). +Registers a BroadcastReceiver to be run in the main activity thread. The receiver will be called with any broadcast Intent that matches the intent filter, in the main application thread. For more information, please [visit](http://developer.android.com/reference/android/content/Context.html#registerReceiver%28android.content.BroadcastReceiver,%20android.content.IntentFilter%29). | Parameter(s) | Definition | | ------------------- | ------------------------------------------------------------------------------------ | @@ -321,7 +321,7 @@ const rootController: UIWindow = iOSApp.window ### delegate -This returns the class you set (the best place to set it is in the `app.js` or `app.ts`, right before `Application.run()`) as a delegate or undefined if you didn't set any. The iOS system monitors the different states of your application and emits an event at each state. To handle these lifecycle events, you have to write a class that extends UIResponder and implements UIApplicationDelegate classes. This class is your delegate. You overwrite the methods from UIApplicationDelegate to handle the events. +This returns the class you set (the best place to set it is in the `app.js` or `app.ts`, before `Application.run()`) as a delegate or undefined if you didn't set any. The iOS system monitors the different states of your application and emits an event at each state. To handle these lifecycle events, you have to write a class that extends UIResponder and implements UIApplicationDelegate classes and set the `delegate` property to that class. You then overwrite the methods from UIApplicationDelegate to handle the events. ||| |----|-----| |Type:|`UIApplicationDelegate` \| `undefined`| @@ -370,7 +370,7 @@ class MyDelegate extends UIResponder implements UIApplicationDelegate { Application.ios.delegate = MyDelegate ``` -For a complete list of the lifecycle events, visit [UIApplicationDelegate](https://developer.apple.com/documentation/uikit/uiapplicationdelegate?language=objc). +For a complete list of the iOS lifecycle events, visit [UIApplicationDelegate](https://developer.apple.com/documentation/uikit/uiapplicationdelegate?language=objc). ### orientation From b8096343765440022adbe1fb501c4a8adaf08e80 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Sat, 9 Jul 2022 19:49:16 +0200 Subject: [PATCH 018/104] Editted content --- nativescript-core/color.md | 139 ++++++++++++++----------------------- 1 file changed, 54 insertions(+), 85 deletions(-) diff --git a/nativescript-core/color.md b/nativescript-core/color.md index 118d0be0..f8c85457 100644 --- a/nativescript-core/color.md +++ b/nativescript-core/color.md @@ -4,81 +4,14 @@ title: Color ## Color -The color module provides a common abstraction of a list of known colors and a color object which allows you to create custom colors that you can use to style the UI. +The Color class allows you to create custom colors that you can use to style the UI. You can create a color object from different types of inputs types, as shown below, that stores all color components (alpha (opacity), red, green, blue) in a [0..255] range: -#### Usage +- `Color(knownColor: string)` +- `Color(hex: string)` +- `Color(argb: number)` +- `Color(alpha: number, red: number, green:number, blue: number, type?: 'rgb' \| 'hsl' \| 'hsv')` -/// flavor javascript - -```javascript -const Color = require('@nativescript/core/color').Color -const colors = require('@nativescript/core/color/known-colors') -function createColor() { - // Using hex values to create color; - const colorHex = new Color('#FF00CC') - const colorShortHex = new Color('#F0C') - - // Creates the color with 100 alpha, 255 red, 100 green, 100 blue - const colorARGB = new Color(100, 255, 100, 100) - - // Creates the color with 100 alpha, 100 red, 100 green, 100 blue - const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 //eslint-disable-line no-bitwise - const colorSingleARGB = new Color(argb) - - // Using string values to create colors - const namedColor = 'orangered' - const isKnown = colors.isKnownName(namedColor) - if (isKnown) { - const colorName = new Color(namedColor) - } - - // Using supported known colors from @nativescript/core/color/known-colors - const colorKnownName = new Color(colors.OrangeRed) -} -``` - -/// - -/// flavor typescript - -```typescript -import { Color } from '@nativescript/core/color' -import * as colors from '@nativescript/core/color/known-colors' -import { isKnownName } from '@nativescript/core/color/known-colors' - -function createColor() { - // Using hex values to create color; - const colorHex = new Color('#FF00CC') - const colorShortHex = new Color('#F0C') - - // Creates the color with 100 alpha, 255 red, 100 green, 100 blue - const colorARGB = new Color(100, 255, 100, 100) - - // Creates the color with 100 alpha, 100 red, 100 green, 100 blue - const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 - const colorSingleARGB = new Color(argb) - - // Using string values to create colors - const namedColor = 'orangered' - const isKnown: boolean = isKnownName(namedColor) - if (isKnown) { - const colorName = new Color(namedColor) - } - - // Using supported known colors from @nativescript/core/color/known-colors - const colorKnownName = new Color(colors.OrangeRed) -} -``` - -/// - -#### Color class - -Creates a color object from different types of inputs types, as shown below, that stores all color components (alpha (opacity), red, green, blue) in a [0..255] range.: - -`Color(knownColor: string)` or
`Color(hex: string)` or
`Color(argb: number)` or
`Color(alpha: number, red: number, green:number, blue: number, type?: 'rgb' \| 'hsl' \| 'hsv')` - -#### Properties +### Properties | Name | Type | Description | | --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -92,20 +25,20 @@ Creates a color object from different types of inputs types, as shown below, tha | `android` | `number` | Gets the android-specific integer value representation. Same as the Argb one. This is a read-only property. | | `ios` | `UIColor` | Gets the iOS-specific UIColor value representation. This is a read-only property. | -#### Stactic Methods +### Static Methods -| Name | Type | Description | -| --------------------------------------------------- | --------- | ------------------------------------------------------------ | -| `equals(value1: Color, value2: Color)` | `boolean` | Compares two `Color` instances | -| `isValid(value: any)` | `boolean` | Validates if a value can be converted to a color. | -| `fromIosColor(value: UIColor)` | `Color` | Creates color from iOS-specific UIColor value representation | -| `mix(color1: Color, color2: Color, amount: number)` | `Color` | Mixes | -| `fromHSL(a, h, s, l)` | `Color` | Returns a new `Color` from HSL. | -| `fromHSV(a, h, s, l)` | `Color` | Returns a new `Color` from HSV. | +| Name | Return Type | Description | +| --------------------------------------------------- | ----------- | ------------------------------------------------------------ | +| `equals(value1: Color, value2: Color)` | `boolean` | Compares two `Color` instances | +| `isValid(value: any)` | `boolean` | Validates if a value can be converted to a color. | +| `fromIosColor(value: UIColor)` | `Color` | Creates color from iOS-specific UIColor value representation | +| `mix(color1: Color, color2: Color, amount: number)` | `Color` | Mixes | +| `fromHSL(a, h, s, l)` | `Color` | Returns a new `Color` from HSL. | +| `fromHSV(a, h, s, l)` | `Color` | Returns a new `Color` from HSV. | -#### Instance Methods +### Instance Methods -| Name | Type | Description | +| Name | Return Type | Description | | ----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | `equals(value: Color)` | `boolean` | Specifies whether the created Color is equal to the Color parameter. | | `isDark()` | `boolean` | Returns true if `brightenss < 128` | @@ -126,7 +59,43 @@ Creates a color object from different types of inputs types, as shown below, tha | `spin(amount: number)` | `Color` | Spins the hue a given amount, from `-360` to `360`. Calling with `0`, `360`, or `-360` will do nothing (since it sets the hue back to what it was before). | | `complement()` | `Color` | Returns the color complement | -#### Native Component +## Usage + +```javascript +import { Color } from '@nativescript/core' + +function createColor() { + // Using hex values to create color; + const colorHex = new Color('#FF00CC') + const colorShortHex = new Color('#F0C') + + // Creates the color with 100 alpha, 255 red, 100 green, 100 blue + const colorARGB = new Color(100, 255, 100, 100) + + // Creates the color with 100 alpha, 100 red, 100 green, 100 blue + const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 //eslint-disable-line no-bitwise + const colorSingleARGB = new Color(argb) +} +``` + +```typescript +import { Color } from '@nativescript/core' + +function createColor() { + // Using hex values to create color; + const colorHex = new Color('#FF00CC') + const colorShortHex = new Color('#F0C') + + // Creates the color with 100 alpha, 255 red, 100 green, 100 blue + const colorARGB = new Color(100, 255, 100, 100) + + // Creates the color with 100 alpha, 100 red, 100 green, 100 blue + const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 + const colorSingleARGB = new Color(argb) +} +``` + +## Native Component | Android | iOS | | :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- | From 2f9abb52e4bd964738f4562f4f3160fe22d53652 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Sat, 9 Jul 2022 19:50:06 +0200 Subject: [PATCH 019/104] Completed the category --- nativescript-core/application-settings.md | 163 ++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 nativescript-core/application-settings.md diff --git a/nativescript-core/application-settings.md b/nativescript-core/application-settings.md new file mode 100644 index 00000000..55def7cd --- /dev/null +++ b/nativescript-core/application-settings.md @@ -0,0 +1,163 @@ +--- +title: ApplicationSettings +--- + +# ApplicationSettings + +The ApplicationSettings class allows you to store key/value pairs of data on the device. For example, an app could store a user's auth state so that, the user does not have to re-login when she resumes the app,if she didn't log out when she left the app. + +### Import + +```javascript +import { ApplicationSettings } from '@nativescript/core' +``` + +```typescript +import { ApplicationSettings } from '@nativescript/core' +``` + +### Setters + +#### setBoolean(key: string, value: boolean): void + +Sets a Boolean Object for a key. + +```javascript +ApplicationSettings.setBoolean(key, value) +``` + +```typescript +ApplicationSettings.setBoolean(key, value) +``` + +#### setString(key: string, value: string): void + +Sets a String Object for a key. You can use this method with the `JSON.stringify()` to store an object or an array as a string and then use `JSON.parse()` to convert the result of `getString()` back to the object or array. + +```javascript +// simple string +ApplicationSettings.setString(key, "some string value") + +//Storing an object +const obj = {key: "value"}; +const objAsString = JSON.stringify(obj);// objAsString = '{"key":"value"}' +ApplicationSettings.setString("key", objAsString) + +//Retrieve +const objStr = ApplicationSettings.getString("key"); +comsy myObj = JSON.parse(ObjStr) // myObj = {key: 'value'} +``` + +```typescript +ApplicationSettings.setString(key, value) +``` + +#### setNumber(key: string, value: number): void + +Sets a Number Object for a key. + +```javascript +ApplicationSettings.setNumber(key, value) +``` + +```typescript +ApplicationSettings.setNumber(key, value) +``` + +### Getters + +#### hasKey(key: string): boolean + +Checks whether such a key exists. + +```javascript +ApplicationSettings.hasKey(key) +``` + +```typescript +ApplicationSettings.hasKey(key) +``` + +#### getBoolean(key: string, defaultValue?: boolean): boolean + +Gets a value (if existing) for a key as a Boolean Object. A default value can be provided in case there is no existing value. + +```javascript +ApplicationSettings.getBoolean(key, defaultValue) +``` + +```typescript +ApplicationSettings.getBoolean(key, defaultValue) +``` + +#### getString(key: string, defaultValue?: string): string + +Gets a value (if existing) for a key as a String Object. A default value can be provided in case there is no existing value. + +```javascript +ApplicationSettings.getString(key, defaultValue) +``` + +```typescript +ApplicationSettings.getString(key, defaultValue) +``` + +#### getNumber(key: string, defaultValue?: number): number + +Gets a value (if existing) for a key as a Number Object. A default value to be returned can be provided in case there is no existing value. + +```javascript +ApplicationSettings.getNumber(key, defaultValue) +``` + +```typescript +ApplicationSettings.getNumber(key, defaultValue) +``` + +### Other methods + +#### remove(key: string): void + +```javascript +ApplicationSettings.remove(key) +``` + +```typescript +ApplicationSettings.remove(key) +``` + +#### clear() + +Removes all values from the local storage. + +```javascript +ApplicationSettings.clear() +``` + +```typescript +ApplicationSettings.clear() +``` + +#### getAllKeys(): Array\ + +Returns an array of all stored keys or an empty array if no keys exist in the storage. + +```javascript +ApplicationSettings.getAllKeys() +``` + +```typescript +ApplicationSettings.getAllKeys() +``` + +#### API References + +| Name | Type | +| ------------------------------------------------------------------------------------------------------------------ | -------- | +| [@nativescript/core/application-settings](https://docs.nativescript.org/api-reference/modules#applicationsettings) | `Module` | + +#### Native Component + +| Android | iOS | +| :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------ | +| [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences) | [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults) | From bf24b880e95cc5a388e651799c0bccdd9f32c221 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Sun, 10 Jul 2022 00:53:16 +0200 Subject: [PATCH 020/104] Some FileSystem content --- .vitepress/config.js | 2 +- nativescript-core/file-system.md | 446 +++++++++++++++++++++++++++++++ 2 files changed, 447 insertions(+), 1 deletion(-) create mode 100644 nativescript-core/file-system.md diff --git a/.vitepress/config.js b/.vitepress/config.js index 9b18fdcf..323f2f62 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -535,7 +535,7 @@ function getSidebar() { //{ text: 'Observable', link: '/nativescript-core/observable' }, //{text: 'Observable Array',link: '/nativescript-core/observable-array'}, //{ text: 'Virtual Array', link: '/nativescript-core/virtual-array' }, - //{ text: 'File System', link: '/nativescript-core/file-system' }, + { text: 'FileSystem', link: '/nativescript-core/file-system' }, //{ text: 'Fps Meter', link: '/nativescript-core/fps-meter' }, { text: 'Http', link: '/nativescript-core/http' }, //{ text: 'Image Source', link: '/nativescript-core/image-source' }, diff --git a/nativescript-core/file-system.md b/nativescript-core/file-system.md new file mode 100644 index 00000000..b4fce945 --- /dev/null +++ b/nativescript-core/file-system.md @@ -0,0 +1,446 @@ +--- +title: FileSystem +--- + +## FileSystem + +The File System module provides high-level abstractions for file system entities such as files, folders, known folders, paths, separators, etc. + +## Usage + +### Import + +```javascript +import { File, Folder, knownFolders, path } from '@nativescript/core' +``` + +```typescript +import { File, Folder, knownFolders, path } from '@nativescript/core' +``` + +#### view model + +```javascript +let vm +export function createViewModel() { + vm = new Observable() + return vm +} +``` + +### Create a File + +```javascript +function createFile() { + const documents = knownFolders.documents() + const folder = documents.getFolder(vm.get('folderName') || 'testFolder') + const file = folder.getFile(`${vm.get('fileName') || 'testFile'}`.txt) + + file + .writeText(vm.get('fileTextContent') || 'some random content') + .then(result => { + file.readText().then(res => { + vm.set('successMessage', `Successfully saved in${file.path}`) + vm.set('message', res) + vm.set('isItemVisible', true) + }) + }) + .catch(err => { + console.log(err) + }) +} +``` + +```typescript +const documents: Folder = knownFolders.documents() +const folder: Folder = documents.getFolder(vm.get('folderName') || 'testFolder') +const file: File = folder.getFile(`${vm.get('fileName') || 'testFile'}` + `.txt`) + +file + .writeText(vm.get('fileTextContent') || 'some random content') + .then(() => { + file.readText().then(res => { + vm.set('successMessage', `Successfully saved in${file.path}`) + vm.set('writtenContent', res) + vm.set('isItemVisible', true) + }) + }) + .catch(err => { + console.log(err) + }) +``` + +### Remove a File + +```javascript +file + .remove() + .then(res => { + // Success removing the file. + vm.set('resultMessage', 'File successfully deleted!') + }) + .catch(err => { + console.log(err.stack) + }) +``` + +```typescript +file + .remove() + .then(res => { + // Success removing the file. + vm.set('resultMessage', 'File successfully deleted!') + }) + .catch(err => { + console.log(err.stack) + }) +``` + +### Remove a Folder + +```javascript +folder + .remove() + .then(fres => { + // Success removing the folder. + vm.set('resultMessage', 'Folder successfully deleted!') + }) + .catch(err => { + console.log(err.stack) + }) +``` + +```typescript +folder + .remove() + .then(fres => { + // Success removing the folder. + vm.set('resultMessage', 'Folder successfully deleted!') + }) + .catch(err => { + console.log(err.stack) + }) +``` + +### Clear the contents of a Folder + +```javascript +folder + .clear() + .then(res => { + // Successfully cleared the folder. + vm.set('resultMessage', 'Folder successfully cleared!') + }) + .catch(err => { + console.log(err.stack) + }) +``` + +```typescript +folder + .clear() + .then(res => { + // Successfully cleared the folder. + vm.set('resultMessage', 'Folder successfully cleared!') + }) + .catch(err => { + console.log(err.stack) + }) +``` + +### Get or create a File with Path + +```javascript +const documentsFolder = knownFolders.documents() +const path = path.join(documentsFolder.path, 'FileFromPath.txt') +const file = File.fromPath(path) + +// Writing text to the file. +file + .writeText(vm.get('textContentToBeSaved')) + .then(result => { + // Succeeded writing to the file. + file.readText().then(res => { + // Succeeded read from file. + vm.set('isContentSaved', true) + vm.set('savedContent', res) + console.log(`File content: ${res}`) + }) + }) + .catch(err => { + console.log(err.stack) + }) +``` + +```typescript +const documentsFolder = knownFolders.documents() +const path = path.join(documentsFolder.path, 'FileFromPath.txt') +const file = File.fromPath(path) + +// Writing text to the file. +file + .writeText(vm.get('textContentToBeSaved')) + .then(result => { + // Succeeded writing to the file. + file.readText().then(res => { + // Succeeded read from file. + vm.set('isContentSaved', true) + vm.set('savedContent', res) + console.log(`File content: ${res}`) + }) + }) + .catch(err => { + console.log(err.stack) + }) +``` + +### Reading from a File + +```javascript +file + .readText() + .then(res => { + vm.set('writtenContent', res) + }) + .catch(err => { + console.log(err.stack) + }) +``` + +```typescript +file + .readText() + .then(res => { + vm.set('writtenContent', res) + }) + .catch(err => { + console.log(err.stack) + }) +``` + +### Reading binary data from a File + +```javascript +import { ImageSource } from '@nativescript/core' + +const image = ImageSource.fromResource('icon') +const folder = knownFolders.documents() +const path = path.join(folder.path, 'Test.png') +const saved = image.saveToFile(path, 'png') + +if (saved) { + const imageFile = File.fromPath(path) + const binarySource = imageFile.readSync(err => { + console.log(err) + }) +} +``` + +```typescript +import { ImageSource } from '@nativescript/core' + +const image = ImageSource.fromResource('icon') +const folder = knownFolders.documents() +const path = path.join(folder.path, 'Test.png') +const saved = image.saveToFile(path, 'png') + +if (saved) { + const imageFile = File.fromPath(path) + const binarySource = imageFile.readSync(err => { + console.log(err) + }) +} +``` + +### Checking if a File Exists + +```javascript +const documents = knownFolders.documents() +const path = path.join(documents.path, 'Text.txt') +const exists = File.exists(path) +console.log(`Does Text.txt exists: ${exists}`) +``` + +```typescript +const documents = knownFolders.documents() +const path = path.join(documents.path, 'Text.txt') +const exists = File.exists(path) +console.log(`Does Text.txt exists: ${exists}`) +``` + +### Renaming a File + +```javascript +const fileName = vm.get("fileName"); +file.rename(`${fileName}.txt`) + .then((res) => { + // File Successfully Renamed. + vm.set("fileSuccessMessage", `File renamed to: ${fileName}.txt`); + vm.set("isItemVisible", true); + }).catch((err) => { + // Error! + console.log("Error: "); + console.log(err); + + .then(() => { + console.log("Dialog closed!"); + }); + }); +``` + +```typescript +const fileName: string = vm.get("fileName"); +file.rename(`${fileName}.txt`) + .then(() => { + // File Successfully Renamed. + vm.set("fileSuccessMessage", `File renamed to: ${fileName}.txt`); + vm.set("isItemVisible", true); + }).catch((err) => { + // Error! + console.log("Error: "); + console.log(err); + .then(() => { + console.log("Dialog closed!"); + }); + }); +``` + +### Get or Create a Folder With Path + +```javascript +const folderPath = path.join(knownFolders.documents().path, 'music') +const folder = Folder.fromPath(folderPath) +``` + +```typescript +const folderPath = path.join(knownFolders.documents().path, 'music') +const folder = Folder.fromPath(folderPath) +``` + +### Renaming a Folder + +```javascript +const folderName = "folderName"; + +folder.rename(folderName) + .then((res) => { + // Folder Successfully Renamed. + vm.set("folderSuccessMessage", `Folder renamed to: ${folderName}`); + vm.set("isFolderItemVisible", true); + }).catch((err) => { + // Error! + console.log("Error: "); + console.log(err); + .then(() => { + console.log("Dialog closed!"); + }); + }); +``` + +```typescript +const folderName = "folderName"; + +folder.rename(folderName) + .then((res) => { + // Folder Successfully Renamed. + vm.set("folderSuccessMessage", `Folder renamed to: ${folderName}`); + vm.set("isFolderItemVisible", true); + }).catch((err) => { + // Error! + console.log("Error: "); + console.log(err); + .then(() => { + console.log("Dialog closed!"); + }); + }); +``` + +### Properties + +| Name | Type | Description | +| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| `a` | `string` | Gets the Alpha component (in the [0, 255] range) of thecolor. This is a read-only property. | +| `r` | `string` | Gets the Red component (in the [0, 255] range) of the color. This is a read-only property. | +| `g` | `string` | Gets the Green component (in the [0, 255] range) of the color. This is a read-only property. | +| `b` | `string` | Gets the Blue component (in the [0, 255] range) of the color. This is a read-only property. | +| `argb` | `number` | Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a read-only property. | +| `hex` | `string` | Gets the Hexadecimal string representation of the color. This is a read-only property | +| `name` | `string` | Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". This is a read-only property. | +| `android` | `number` | Gets the android-specific integer value representation. Same as the Argb one. This is a read-only property. | +| `ios` | `UIColor` | Gets the iOS-specific UIColor value representation. This is a read-only property. | + +### Static Methods + +| Name | Return Type | Description | +| --------------------------------------------------- | ----------- | ------------------------------------------------------------ | +| `equals(value1: Color, value2: Color)` | `boolean` | Compares two `Color` instances | +| `isValid(value: any)` | `boolean` | Validates if a value can be converted to a color. | +| `fromIosColor(value: UIColor)` | `Color` | Creates color from iOS-specific UIColor value representation | +| `mix(color1: Color, color2: Color, amount: number)` | `Color` | Mixes | +| `fromHSL(a, h, s, l)` | `Color` | Returns a new `Color` from HSL. | +| `fromHSV(a, h, s, l)` | `Color` | Returns a new `Color` from HSV. | + +### Instance Methods + +| Name | Return Type | Description | +| ----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `equals(value: Color)` | `boolean` | Specifies whether the created Color is equal to the Color parameter. | +| `isDark()` | `boolean` | Returns true if `brightenss < 128` | +| `isLight()` | `boolean` | Returns true if `brightenss >= 128` | +| `getBrightness()` | `number` | Returns the [brightness](http://www.w3.org/TR/AERT#color-contrast). | +| `getLuminance()` | `number` | Returns the [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). | +| `setAlpha(a: number)`. `a` is a value between `0` and `255` | `Color` | Return the created color (as a new Color instance) with the provided alpha | +| `toHsl()` | `{ h: number; s: number; l: number; a: number }` | Return the hsl representation of the color. | +| `toHslString()` | `string` | Returns the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color | +| `toHsv()` | `{ h: number; s: number; v: number; a: number }` | Returns the hsv representation of the color. | +| `toHsvString()` | `string` | Returns the [CSS rgb](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color | +| `desaturate(amount: number)` | `Color` | Desaturates the color a given amount, from `0` to `100`. Providing `100` is the same as calling greyscale. | +| `saturate(amount: number)` | `Color` | Saturates the color a given amount, from `0` to `100`. | +| `greyscale()` | `Color` | Completely desaturates a color into greyscale. Same as calling `desaturate(100)` | +| `lighten()` | `Color` | Lightens the color a given amount, from `0` to `100`. Providing `100` will always return white. | +| `brighten(amount: number)` | `Color` | Brightens the color a given amount, from `0` to `100`. | +| `darken(amount:number)` | `Color` | Darkens the color a given amount, from `0` to `100`. Providing `100` will always return `black`. | +| `spin(amount: number)` | `Color` | Spins the hue a given amount, from `-360` to `360`. Calling with `0`, `360`, or `-360` will do nothing (since it sets the hue back to what it was before). | +| `complement()` | `Color` | Returns the color complement | + +## Usage + +```javascript +import { Color } from '@nativescript/core' + +function createColor() { + // Using hex values to create color; + const colorHex = new Color('#FF00CC') + const colorShortHex = new Color('#F0C') + + // Creates the color with 100 alpha, 255 red, 100 green, 100 blue + const colorARGB = new Color(100, 255, 100, 100) + + // Creates the color with 100 alpha, 100 red, 100 green, 100 blue + const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 //eslint-disable-line no-bitwise + const colorSingleARGB = new Color(argb) +} +``` + +```typescript +import { Color } from '@nativescript/core' + +function createColor() { + // Using hex values to create color; + const colorHex = new Color('#FF00CC') + const colorShortHex = new Color('#F0C') + + // Creates the color with 100 alpha, 255 red, 100 green, 100 blue + const colorARGB = new Color(100, 255, 100, 100) + + // Creates the color with 100 alpha, 100 red, 100 green, 100 blue + const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 + const colorSingleARGB = new Color(argb) +} +``` + +## Native Component + +| Android | iOS | +| :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- | +| [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color) | [UICOlor](https://developer.apple.com/documentation/uikit/uicolor?language=objc) | From ca02558fc231f1b2bce05af68ca11dd868addbb2 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Mon, 11 Jul 2022 00:58:26 +0200 Subject: [PATCH 021/104] Added Platform link --- .vitepress/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vitepress/config.js b/.vitepress/config.js index 323f2f62..787aca45 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -539,7 +539,7 @@ function getSidebar() { //{ text: 'Fps Meter', link: '/nativescript-core/fps-meter' }, { text: 'Http', link: '/nativescript-core/http' }, //{ text: 'Image Source', link: '/nativescript-core/image-source' }, - //{ text: 'Platform', link: '/nativescript-core/platform' }, + { text: 'Platform', link: '/nativescript-core/platform' }, //{ text: 'Timer', link: '/nativescript-core/timer' }, //{ text: 'Trace', link: '/nativescript-core/trace' }, //{ text: 'Xml Parser', link: '/nativescript-core/xml-parser' }, From f676d763dc60dd134103e196e7a74802a9d7ca2b Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Mon, 11 Jul 2022 00:58:52 +0200 Subject: [PATCH 022/104] Completed platform category --- nativescript-core/platform.md | 77 +++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 nativescript-core/platform.md diff --git a/nativescript-core/platform.md b/nativescript-core/platform.md new file mode 100644 index 00000000..f761ff00 --- /dev/null +++ b/nativescript-core/platform.md @@ -0,0 +1,77 @@ +--- +title: Platform +--- + +## Platform + +Use this module to access information about the current device such as screen resolution,operating system, model, manufacturer,etc. + +## Usage + +```typescript +import { Device, Screen, isAndroid, isIOS } from '@nativescript/core' + +console.log(`Running on Android? ${isAndroid}`) // true if app is running on Android. False otherwise +console.log(`Running on iOS? ${isIOS}`) // true if app is running on iOS. False otherwise + +console.log(`Device.model ${Device.model}`) // For example: "Nexus 5" or "iPhone". +console.log(`Device.deviceType ${Device.deviceType}`) // "Phone" | "Tablet" +console.log(`Device.os ${Device.os}`) // For example: "Android" or "iOS". +console.log(`Device.osVersion ${Device.osVersion}`) // For example: 4.4.4(android), 8.1(ios) +console.log(`Device.sdkVersion ${Device.sdkVersion}`) // For example: 19(android), 8.1(ios). +console.log(`Device.language ${Device.language}`) // For example "en" or "en-US". +console.log(`Device.manufacturer ${Device.manufacturer}`) // For example: "Apple" or "HTC" or "Samsung". +console.log(`Device.uuid ${Device.uuid}`) // The unique identification number +console.log(`Device.region ${Device.region}`) // For example "US". + +console.log(`Screen.mainScreen.heightDIPs ${Screen.mainScreen.heightDIPs}`) // The absolute height of the screen in density independent pixels. +console.log(`Screen.mainScreen.heightPixels ${Screen.mainScreen.heightPixels}`) // The absolute height of the screen in pixels. +console.log(`Screen.mainScreen.scale ${Screen.mainScreen.scale}`) // The logical density of the display. +console.log(`Screen.mainScreen.widthDIPs ${Screen.mainScreen.widthDIPs}`) // The absolute width of the screen in density independent pixels. +console.log(`Screen.mainScreen.widthPixels ${Screen.mainScreen.widthPixels}`) // The absolute width of the screen in pixel +``` + +## Device class + +Provides the current device information. + +### Properties + +| Name | Type | Description | +| -------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `manufacturer` | `string` | Gets the manufacturer of the device. | +| `model` | `string` | Gets the model of the device. | +| `os` | `string` | Gets the OS of the device. | +| `osVersion` | `string` | Gets the OS version. | +| `sdkVersion` | `string` | Gets the SDK version. | +| `deviceType` | `'Phone' \| 'Tablet'` | Gets the type of the current device. | +| `uuid` | `string` | Gets the uuid. On iOS this will return a new uuid if the application is re-installed on the device. If you need to receive the same uuid even after the application has been re-installed on the device, use this [plugin](https://www.npmjs.com/package/nativescript-ios-uuid). | +| `language` | `string` | Gets the device preferred language. | +| `region` | `string` | Gets the device region. | + +## Screen.mainScreen properties + +Gets information about the main screen of the current device. + +### Properties + +| Name | Type | Description | +| -------------- | -------- | --------------------------------------------------------------------- | +| `widthPixels` | `number` | Gets the absolute width of the screen in pixels. | +| `heightPixels` | `number` | Gets the absolute height of the screen in pixels. | +| `widthDIPs` | `number` | Gets the absolute width of the screen in density independent pixels. | +| `heightDIPs` | `number` | Gets the absolute height of the screen in density independent pixels. | +| `scale` | `number` | This is a scaling factor for the Density Independent Pixel unit. | + +## Other properties + +| Name | Type | Description | +| ----------- | --------- | ---------------------------------------------------------------------- | +| `isAndroid` | `boolean` | Gets a value indicating if the app is running on the Android platform. | +| `isIOS` | `boolean` | Gets a value indicating if the app is running on the iOS platform. | + +## API References + +| Name | Type | +| -------------------------------------------------------------------- | ------- | +| [Device](https://docs.nativescript.org/api-reference/modules#device) | `Class` | From 2970383e4e33c6356479e740dbf3f97975c97366 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Mon, 11 Jul 2022 01:02:14 +0200 Subject: [PATCH 023/104] Some code tested, more testing to be done --- nativescript-core/file-system.md | 456 +++++++++++++++++++++---------- 1 file changed, 305 insertions(+), 151 deletions(-) diff --git a/nativescript-core/file-system.md b/nativescript-core/file-system.md index b4fce945..ea4e1e5e 100644 --- a/nativescript-core/file-system.md +++ b/nativescript-core/file-system.md @@ -4,7 +4,7 @@ title: FileSystem ## FileSystem -The File System module provides high-level abstractions for file system entities such as files, folders, known folders, paths, separators, etc. +The FileSystem module provides high-level abstractions for file system entities such as files, folders, known folders, paths, separators, etc. ## Usage @@ -31,30 +31,28 @@ export function createViewModel() { ### Create a File ```javascript -function createFile() { - const documents = knownFolders.documents() - const folder = documents.getFolder(vm.get('folderName') || 'testFolder') - const file = folder.getFile(`${vm.get('fileName') || 'testFile'}`.txt) - - file - .writeText(vm.get('fileTextContent') || 'some random content') - .then(result => { - file.readText().then(res => { - vm.set('successMessage', `Successfully saved in${file.path}`) - vm.set('message', res) - vm.set('isItemVisible', true) - }) - }) - .catch(err => { - console.log(err) +const documents = knownFolders.documents() +const folder = documents.getFolder(vm.get('folderName') || 'testFolder') +const file = folder.getFile(`${vm.get('fileName') || 'testFile'}.txt`) + +file + .writeText(vm.get('fileTextContent') || 'some random content') + .then(result => { + file.readText().then(res => { + vm.set('successMessage', `Successfully saved in${file.path}`) + vm.set('message', res) + vm.set('isItemVisible', true) }) -} + }) + .catch(err => { + console.log(err) + }) ``` ```typescript const documents: Folder = knownFolders.documents() const folder: Folder = documents.getFolder(vm.get('folderName') || 'testFolder') -const file: File = folder.getFile(`${vm.get('fileName') || 'testFile'}` + `.txt`) +const file: File = folder.getFile(`${vm.get('fileName') || 'testFile'}` + `.txt`) file .writeText(vm.get('fileTextContent') || 'some random content') @@ -87,7 +85,7 @@ file ```typescript file .remove() - .then(res => { + .then((res: boolean) => { // Success removing the file. vm.set('resultMessage', 'File successfully deleted!') }) @@ -96,12 +94,12 @@ file }) ``` -### Remove a Folder +### Removing a Folder ```javascript folder .remove() - .then(fres => { + .then(res => { // Success removing the folder. vm.set('resultMessage', 'Folder successfully deleted!') }) @@ -113,7 +111,7 @@ folder ```typescript folder .remove() - .then(fres => { + .then((res: boolean) => { // Success removing the folder. vm.set('resultMessage', 'Folder successfully deleted!') }) @@ -122,7 +120,7 @@ folder }) ``` -### Clear the contents of a Folder +### Clearing the contents of a Folder ```javascript folder @@ -139,7 +137,7 @@ folder ```typescript folder .clear() - .then(res => { + .then((res: boolean) => { // Successfully cleared the folder. vm.set('resultMessage', 'Folder successfully cleared!') }) @@ -152,12 +150,12 @@ folder ```javascript const documentsFolder = knownFolders.documents() -const path = path.join(documentsFolder.path, 'FileFromPath.txt') -const file = File.fromPath(path) +const filePath = path.join(documentsFolder.path, 'FileFromPath.txt') +const file = File.fromPath(filePath) // Writing text to the file. file - .writeText(vm.get('textContentToBeSaved')) + .writeText('Some text') .then(result => { // Succeeded writing to the file. file.readText().then(res => { @@ -174,12 +172,12 @@ file ```typescript const documentsFolder = knownFolders.documents() -const path = path.join(documentsFolder.path, 'FileFromPath.txt') -const file = File.fromPath(path) +const filePath = path.join(documentsFolder.path, 'FileFromPath.txt') +const file = File.fromPath(filePath) // Writing text to the file. file - .writeText(vm.get('textContentToBeSaved')) + .writeText('Some text') .then(result => { // Succeeded writing to the file. file.readText().then(res => { @@ -223,33 +221,45 @@ file ```javascript import { ImageSource } from '@nativescript/core' -const image = ImageSource.fromResource('icon') const folder = knownFolders.documents() -const path = path.join(folder.path, 'Test.png') -const saved = image.saveToFile(path, 'png') +const fPath = path.join(folder.path, 'Test.png') +const imageFile = File.fromPath(fPath) -if (saved) { - const imageFile = File.fromPath(path) - const binarySource = imageFile.readSync(err => { - console.log(err) +const image = ImageSource.fromResource('icon') + .then(image => { + const saved = image.saveToFile(fPath, 'png') + + if (saved) { + Dialogs.alert('Saved') + const binarySource = imageFile.readSync(err => { + console.log(err) + }) + console.log(binarySource) + } }) -} + .catch(err => Dialogs.alert(err)) ``` ```typescript import { ImageSource } from '@nativescript/core' -const image = ImageSource.fromResource('icon') const folder = knownFolders.documents() -const path = path.join(folder.path, 'Test.png') -const saved = image.saveToFile(path, 'png') +const fPath = path.join(folder.path, 'Test.png') +const imageFile = File.fromPath(fPath) -if (saved) { - const imageFile = File.fromPath(path) - const binarySource = imageFile.readSync(err => { - console.log(err) +const image = ImageSource.fromResource('icon') + .then((image: ImageSource) => { + const saved = image.saveToFile(fPath, 'png') + + if (saved) { + Dialogs.alert('Saved') + const binarySource = imageFile.readSync(err => { + console.log(err) + }) + console.log(binarySource) + } }) -} + .catch(err => Dialogs.alert(err)) ``` ### Checking if a File Exists @@ -263,46 +273,59 @@ console.log(`Does Text.txt exists: ${exists}`) ```typescript const documents = knownFolders.documents() -const path = path.join(documents.path, 'Text.txt') -const exists = File.exists(path) +const fPath = path.join(documents.path, 'Text.txt') +const exists = File.exists(fPath) console.log(`Does Text.txt exists: ${exists}`) ``` ### Renaming a File ```javascript -const fileName = vm.get("fileName"); -file.rename(`${fileName}.txt`) - .then((res) => { - // File Successfully Renamed. - vm.set("fileSuccessMessage", `File renamed to: ${fileName}.txt`); - vm.set("isItemVisible", true); - }).catch((err) => { - // Error! - console.log("Error: "); - console.log(err); +const newName = 'NewName' +const documents = knownFolders.documents() +const file = documents.getFile('Text.txt') +const fPath = path.join(documents.path, 'Text.txt') +file + .rename(`${newName}.txt`) + .then(res => { + // File Successfully Renamed. + Dialogs.alert(`File renamed to: ${newName}.txt`) + vm.set('fileSuccessMessage', `File renamed to: ${newName}.txt`) + vm.set('isItemVisible', true) + }) + .catch(err => { + // Error! + console.log('Error: ') + console.log(err) - .then(() => { - console.log("Dialog closed!"); - }); - }); + Dialogs.alert(err).then(() => { + console.log('Dialog closed!') + }) + }) ``` ```typescript -const fileName: string = vm.get("fileName"); -file.rename(`${fileName}.txt`) - .then(() => { - // File Successfully Renamed. - vm.set("fileSuccessMessage", `File renamed to: ${fileName}.txt`); - vm.set("isItemVisible", true); - }).catch((err) => { - // Error! - console.log("Error: "); - console.log(err); - .then(() => { - console.log("Dialog closed!"); - }); - }); +const newName = 'NewName' +const documents = knownFolders.documents() +const file = documents.getFile('Text.txt') +const fPath = path.join(documents.path, 'Text.txt') +file + .rename(`${newName}.txt`) + .then(res => { + // File Successfully Renamed. + Dialogs.alert(`File renamed to: ${newName}.txt`) + vm.set('fileSuccessMessage', `File renamed to: ${newName}.txt`) + vm.set('isItemVisible', true) + }) + .catch(err => { + // Error! + console.log('Error: ') + console.log(err) + + Dialogs.alert(err).then(() => { + console.log('Dialog closed!') + }) + }) ``` ### Get or Create a Folder With Path @@ -314,7 +337,7 @@ const folder = Folder.fromPath(folderPath) ```typescript const folderPath = path.join(knownFolders.documents().path, 'music') -const folder = Folder.fromPath(folderPath) +const folder: Folder = Folder.fromPath(folderPath) ``` ### Renaming a Folder @@ -355,92 +378,223 @@ folder.rename(folderName) }); ``` -### Properties - -| Name | Type | Description | -| --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -| `a` | `string` | Gets the Alpha component (in the [0, 255] range) of thecolor. This is a read-only property. | -| `r` | `string` | Gets the Red component (in the [0, 255] range) of the color. This is a read-only property. | -| `g` | `string` | Gets the Green component (in the [0, 255] range) of the color. This is a read-only property. | -| `b` | `string` | Gets the Blue component (in the [0, 255] range) of the color. This is a read-only property. | -| `argb` | `number` | Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a read-only property. | -| `hex` | `string` | Gets the Hexadecimal string representation of the color. This is a read-only property | -| `name` | `string` | Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". This is a read-only property. | -| `android` | `number` | Gets the android-specific integer value representation. Same as the Argb one. This is a read-only property. | -| `ios` | `UIColor` | Gets the iOS-specific UIColor value representation. This is a read-only property. | - -### Static Methods - -| Name | Return Type | Description | -| --------------------------------------------------- | ----------- | ------------------------------------------------------------ | -| `equals(value1: Color, value2: Color)` | `boolean` | Compares two `Color` instances | -| `isValid(value: any)` | `boolean` | Validates if a value can be converted to a color. | -| `fromIosColor(value: UIColor)` | `Color` | Creates color from iOS-specific UIColor value representation | -| `mix(color1: Color, color2: Color, amount: number)` | `Color` | Mixes | -| `fromHSL(a, h, s, l)` | `Color` | Returns a new `Color` from HSL. | -| `fromHSV(a, h, s, l)` | `Color` | Returns a new `Color` from HSV. | - -### Instance Methods - -| Name | Return Type | Description | -| ----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `equals(value: Color)` | `boolean` | Specifies whether the created Color is equal to the Color parameter. | -| `isDark()` | `boolean` | Returns true if `brightenss < 128` | -| `isLight()` | `boolean` | Returns true if `brightenss >= 128` | -| `getBrightness()` | `number` | Returns the [brightness](http://www.w3.org/TR/AERT#color-contrast). | -| `getLuminance()` | `number` | Returns the [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). | -| `setAlpha(a: number)`. `a` is a value between `0` and `255` | `Color` | Return the created color (as a new Color instance) with the provided alpha | -| `toHsl()` | `{ h: number; s: number; l: number; a: number }` | Return the hsl representation of the color. | -| `toHslString()` | `string` | Returns the [CSS hsv](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color | -| `toHsv()` | `{ h: number; s: number; v: number; a: number }` | Returns the hsv representation of the color. | -| `toHsvString()` | `string` | Returns the [CSS rgb](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color | -| `desaturate(amount: number)` | `Color` | Desaturates the color a given amount, from `0` to `100`. Providing `100` is the same as calling greyscale. | -| `saturate(amount: number)` | `Color` | Saturates the color a given amount, from `0` to `100`. | -| `greyscale()` | `Color` | Completely desaturates a color into greyscale. Same as calling `desaturate(100)` | -| `lighten()` | `Color` | Lightens the color a given amount, from `0` to `100`. Providing `100` will always return white. | -| `brighten(amount: number)` | `Color` | Brightens the color a given amount, from `0` to `100`. | -| `darken(amount:number)` | `Color` | Darkens the color a given amount, from `0` to `100`. Providing `100` will always return `black`. | -| `spin(amount: number)` | `Color` | Spins the hue a given amount, from `-360` to `360`. Calling with `0`, `360`, or `-360` will do nothing (since it sets the hue back to what it was before). | -| `complement()` | `Color` | Returns the color complement | +### Getting Folder Contents -## Usage +Getting all folder entities in array may be slow with large number of files. Enumerating the folder entities would iterate the files one by one without blocking the UI. ```javascript -import { Color } from '@nativescript/core' +documents + .getEntities() + .then(entities => { + // entities is array with the document's files and folders. + entities.forEach(entity => { + array.push({ + name: entity.name, + path: entity.path, + lastModified: entity.lastModified.toString() + }) + }) + }) + .catch(err => { + // Failed to obtain folder's contents. + console.log(err.stack) + }) +``` -function createColor() { - // Using hex values to create color; - const colorHex = new Color('#FF00CC') - const colorShortHex = new Color('#F0C') +```typescript +documents + .getEntities() + .then(entities => { + // entities is array with the document's files and folders. + entities.forEach(entity => { + array.push({ + name: entity.name, + path: entity.path, + lastModified: entity.lastModified.toString() + }) + }) + }) + .catch(err => { + // Failed to obtain folder's contents. + console.log(err.stack) + }) +``` - // Creates the color with 100 alpha, 255 red, 100 green, 100 blue - const colorARGB = new Color(100, 255, 100, 100) +### Removing a Folder - // Creates the color with 100 alpha, 100 red, 100 green, 100 blue - const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 //eslint-disable-line no-bitwise - const colorSingleARGB = new Color(argb) -} +```javascript +folder + .remove() + .then(fres => { + // Success removing the folder. + vm.set('resultMessage', 'Folder successfully deleted!') + }) + .catch(err => { + console.log(err.stack) + }) ``` ```typescript -import { Color } from '@nativescript/core' +folder + .remove() + .then(fres => { + // Success removing the folder. + vm.set('resultMessage', 'Folder successfully deleted!') + }) + .catch(err => { + console.log(err.stack) + }) +``` -function createColor() { - // Using hex values to create color; - const colorHex = new Color('#FF00CC') - const colorShortHex = new Color('#F0C') +### Checking if a Folder Exists - // Creates the color with 100 alpha, 255 red, 100 green, 100 blue - const colorARGB = new Color(100, 255, 100, 100) +```javascript +const temp = knownFolders.temp() +const tempExists = Folder.exists(temp.path) +console.log(`Does temp folder exists: ${tempExists}`) +``` - // Creates the color with 100 alpha, 100 red, 100 green, 100 blue - const argb = (100 << 24) | (100 << 16) | (100 << 8) | 100 - const colorSingleARGB = new Color(argb) -} +```typescript +const temp: Folder = knownFolders.temp() +const tempExists: boolean = Folder.exists(temp.path) +console.log(`Does temp folder exists: ${tempExists}`) +``` + +### Normalize a Path + +```javascript +let documentsFolder = knownFolders.documents() +const currentAppFolder = knownFolders.currentApp() +const tempFolder = knownFolders.temp() + +const testPath = '///test.txt' +// Get a normalized path such as /test.txt from ///test.txt +vm.set('documents', path.normalize(documentsFolder.path + testPath)) +vm.set('currentApp', path.normalize(currentAppFolder.path + testPath)) +vm.set('temp', path.normalize(tempFolder.path + testPath)) +``` + +```typescript +let documentsFolder: Folder = knownFolders.documents() +const currentAppFolder = knownFolders.currentApp() +const tempFolder = knownFolders.temp() + +const testPath: string = '///test.txt' +// Get a normalized path such as /test.txt from ///test.txt +vm.set('documents', path.normalize(documentsFolder.path + testPath)) +vm.set('currentApp', path.normalize(currentAppFolder.path + testPath)) +vm.set('temp', path.normalize(tempFolder.path + testPath)) ``` +### Path join + +```javascript +// Generate a path like /myFiles/test.txt +const documentsFolder = knownFolders.documents() +const filePath = path.join(documentsFolder.path, 'myFiles', 'test.txt') +``` + +```typescript +// Generate a path like /myFiles/test.txt +const documentsFolder = knownFolders.documents() +const filePath: string = path.join(documentsFolder.path, 'myFiles', 'test.txt') +``` + +### Get the Path Separator + +```javascript +// An OS dependent path separator, "\" or "/". +const separator = path.separator +``` + +```typescript +// An OS dependent path separator, "\" or "/". +const separator = path.separator +``` + +## File Properties + +| Name | Type | Description | +| -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `extension` | `string` | Gets the extension of the file.property. | +| `isLocked` | `boolean` | Gets a value indicating whether the file is currently locked, meaning a background operation associated with this file is running.property. | +| `lastModified` | `Date` | Gets the Date object specifying the last time this entity was modified. | +| `name` | `string` | Gets the name of the entity. | +| `parent` | `Folder` | Gets the Folder object representing the parent of this entity. Will be null for a root folder like Documents or Temporary. This property is readonly. | +| `path` | `string` | Gets the fully-qualified path (including the extension for a File) of the entity. | +| `name` | `string` | Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". This is a read-only property. | +| `size` | `number` | Gets the size in bytes of the file. | + +## File Methods + +| Name | Return Type | Description | +| ------------------------------------------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------- | +| `read()` | `Promise` | Reads the binary content of the file asynchronously. | +| `readSync(onError?: function)` | `any` | Reads the binary content of the file synchronously. | +| `readText(encoding?: string)` | `Promise` | Reads the content of the file asynchronously as a string using the specified encoding (defaults to UTF-8). | +| `readTextSync(onError?: function, encoding?: string)` | `string` | Reads the content of the file as a string synchronously, using the specified encoding (defaults to UTF-8). | +| `remove()` | `Promise` | Removes (deletes) the current file asynchronously from the file system. | +| `removeSync(onError?: function)` | `void` | Removes (deletes) the current file from the file system synchronously. | +| `rename(newName: string)` | `Promise` | Renames the current file asynchronously using the specified name. | +| `renameSync(newName: string, onError?: function)` | `void` | Renames the current file synchronously using the specified name. | +| `write(newName: string)` | `Promise` | Writes the provided binary content,asynchronously, to the file. | +| `writeText(encoding?: string)` | `Promise` | Asynchronously writes the content of the file as a string using the specified encoding (defaults to UTF-8). | +| `writeTextSync(onError?: function, encoding?: string)` | `string` | Writes the content of the file as a string synchronously using the specified encoding (defaults to UTF-8). | +| `exists(path: string)` | `boolean` | Checks whether a File with the specified path already exists. | +| `fromPath(path: string)` | `File` | Gets or creates a File entity at the specified path. | + +## Folder Properties + +| Name | Type | Description | +| -------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `isKnown` | `boolean` | Determines whether this instance is a KnownFolder (accessed through the KnownFolders object). | +| `lastModified` | `Date` | Gets the Date object specifying the last time this entity was modified. | +| `name` | `string` | Gets the name of the entity. | +| `parent` | `Folder` | Gets the Folder object representing the parent of this entity. Will be null for a root folder like Documents or Temporary. This property is readonly. | +| `path` | `string` | Gets the fully-qualified path (including the extension for a File) of the entity. | + +## Folder Methods + +| Name | Return Type | Description | +| ------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `clear()` | `Promise` | Deletes all the files and folders (recursively), contained within this Folder. | +| `clearSync(onError?: function)` | `void` | Deletes all the files and folders (recursively), contained within this Folder synchronously. | +| `contains(name: string)` | `boolean` | Checks whether this Folder contains an Entity with the specified name. The path of the folder is added to the name to resolve the complete path to check for. | +| `eachEntity(onEntity: function)` | `any` | Enumerates all the top-level FileSystem entities residing within this folder. | +| `getEntities()` | `Promise` | Gets all the top-level entities residing within this folder. | +| `getEntitiesSync(onError?: function)` | `Array` | Gets all the top-level entities residing within this folder synchronously | +| `getFile(name: string)` | `File` | Gets or creates a File entity with the specified name within this Folder. | +| `getFolder(name: string)` | `Folder` | Gets or creates a Folder entity with the specified name within this Folder. | +| `remove()` | `Promise` | Removes (deletes) the current Entity from the file system. | +| `removeSync(onError?: function)` | `void` | Removes (deletes) the current Entity from the file system synchronously. | + +## knownFolders Methods + +| Name | Return Type | Description | +| -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `currentApp()` | `Folder` | Gets the root folder for the current application. This Folder is private for the application and not accessible from Users/External apps. iOS - this folder is read-only and contains the app and all its resources. | +| `documents()` | `Folder` | Gets the Documents folder available for the current application. This Folder is private for the application and not accessible from Users/External apps. | +| `temp()` | `Folder` | Gets the Temporary (Caches) folder available for the current application. This Folder is private for the application and not accessible from Users/External apps. | + +## path Methods + +| Name | Return Type | Description | +| -------------------------- | ----------- | ------------------------------------------------------------------------------ | +| `join(...paths: string[])` | `string` | Joins all the provided string components, forming a valid and normalized path. | +| `normalize(path: string)` | `string` | Normalizes a path, taking care of occurrances like ".." and "//". | + +## API References + +| Name | Type | +| ----------------------------------------------------------------------------------------------------------- | -------- | +| [FileSystem](https://docs.nativescript.org/api-reference/classes/_file_system_.file.html) | Class | +| [FileSystemEntity](https://docs.nativescript.org/api-reference/classes/_file_system_.filesystementity.html) | `Class` | +| [Folder](https://docs.nativescript.org/api-reference/classes/_file_system_.folder.html) | `Class` | +| [knownFolders](https://docs.nativescript.org/api-reference/modules/_file_system_.knownfolders) | `Module` | +| [path](https://docs.nativescript.org/api-reference/modules/_file_system_.path) | `Module` | + ## Native Component -| Android | iOS | -| :--------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------- | -| [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color) | [UICOlor](https://developer.apple.com/documentation/uikit/uicolor?language=objc) | +| Android | iOS | +| :------------------------------------------------------------------- | :---------------------------------------------------------------------------------- | +| [java.io.File](https://developer.android.com/reference/java/io/File) | [NSFileManager](https://developer.apple.com/documentation/foundation/nsfilemanager) | From 8c1e8a012ba91c869332ce9a9e99073c0939a648 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Mon, 11 Jul 2022 14:46:08 +0200 Subject: [PATCH 024/104] Editted --- nativescript-core/file-system.md | 116 ++++++++++++++++++------------- 1 file changed, 66 insertions(+), 50 deletions(-) diff --git a/nativescript-core/file-system.md b/nativescript-core/file-system.md index ea4e1e5e..e745e196 100644 --- a/nativescript-core/file-system.md +++ b/nativescript-core/file-system.md @@ -343,47 +343,47 @@ const folder: Folder = Folder.fromPath(folderPath) ### Renaming a Folder ```javascript -const folderName = "folderName"; - -folder.rename(folderName) - .then((res) => { - // Folder Successfully Renamed. - vm.set("folderSuccessMessage", `Folder renamed to: ${folderName}`); - vm.set("isFolderItemVisible", true); - }).catch((err) => { - // Error! - console.log("Error: "); - console.log(err); - .then(() => { - console.log("Dialog closed!"); - }); - }); +const newName = 'newName' + +folder + .rename(newName) + .then(res => { + // Folder Successfully Renamed. + Dialogs.alert(`Folder renamed to: ${newName} ${res}`) + vm.set('folderSuccessMessage', `Folder renamed to: ${newName}`) + vm.set('isFolderItemVisible', true) + }) + .catch(err => { + // Error! + console.log('Error: ') + console.error(err) + }) ``` ```typescript -const folderName = "folderName"; - -folder.rename(folderName) - .then((res) => { - // Folder Successfully Renamed. - vm.set("folderSuccessMessage", `Folder renamed to: ${folderName}`); - vm.set("isFolderItemVisible", true); - }).catch((err) => { - // Error! - console.log("Error: "); - console.log(err); - .then(() => { - console.log("Dialog closed!"); - }); - }); +const newName = 'newName' + +folder + .rename(newName) + .then((res: boolean) => { + // Folder Successfully Renamed. + Dialogs.alert(`Folder renamed to: ${newName} ${res}`) + vm.set('folderSuccessMessage', `Folder renamed to: ${newName}`) + vm.set('isFolderItemVisible', true) + }) + .catch(err => { + // Error! + console.log('Error: ') + console.error(err) + }) ``` ### Getting Folder Contents -Getting all folder entities in array may be slow with large number of files. Enumerating the folder entities would iterate the files one by one without blocking the UI. +Getting all folder entities in an array may be slow with large number of files. Enumerating the folder entities would iterate the files one by one without blocking the UI. ```javascript -documents +folder .getEntities() .then(entities => { // entities is array with the document's files and folders. @@ -393,6 +393,7 @@ documents path: entity.path, lastModified: entity.lastModified.toString() }) + console.log(array.length) }) }) .catch(err => { @@ -402,9 +403,9 @@ documents ``` ```typescript -documents +folder .getEntities() - .then(entities => { + .then((entities: FileSystemEntity[]) => { // entities is array with the document's files and folders. entities.forEach(entity => { array.push({ @@ -412,6 +413,7 @@ documents path: entity.path, lastModified: entity.lastModified.toString() }) + console.log(array.length) }) }) .catch(err => { @@ -425,9 +427,10 @@ documents ```javascript folder .remove() - .then(fres => { + .then(res => { // Success removing the folder. vm.set('resultMessage', 'Folder successfully deleted!') + Dialogs.alert(res) }) .catch(err => { console.log(err.stack) @@ -437,9 +440,10 @@ folder ```typescript folder .remove() - .then(fres => { + .then((res: boolean) => { // Success removing the folder. vm.set('resultMessage', 'Folder successfully deleted!') + Dialogs.alert(res) }) .catch(err => { console.log(err.stack) @@ -449,15 +453,27 @@ folder ### Checking if a Folder Exists ```javascript -const temp = knownFolders.temp() -const tempExists = Folder.exists(temp.path) -console.log(`Does temp folder exists: ${tempExists}`) +const documents = knownFolders.documents() +const folder = documents.getFolder(vm.get('folderName') || 'testFolder') + +const folderExists = Folder.exists(folder.path) +console.log(folderExists) // true +const folder2Path = path.join(documents.path, 'myFolder') + +const folder2Exists = Folder.exists(folder2Path) +console.log(folder2Exists) // false ``` ```typescript -const temp: Folder = knownFolders.temp() -const tempExists: boolean = Folder.exists(temp.path) -console.log(`Does temp folder exists: ${tempExists}`) +const documents = knownFolders.documents() +const folder: Folder = documents.getFolder(vm.get('folderName') || 'testFolder') + +const folderExists: boolean = Folder.exists(folder.path) +console.log(folderExists) // true + +const folder2Path: string = path.join(documents.path, 'myFolder') +const folder2Exists: boolean = Folder.exists(folder2Path) +console.log(folder2Exists) // false ``` ### Normalize a Path @@ -469,21 +485,21 @@ const tempFolder = knownFolders.temp() const testPath = '///test.txt' // Get a normalized path such as /test.txt from ///test.txt -vm.set('documents', path.normalize(documentsFolder.path + testPath)) -vm.set('currentApp', path.normalize(currentAppFolder.path + testPath)) -vm.set('temp', path.normalize(tempFolder.path + testPath)) +console.log('documents', path.normalize(documentsFolder.path + testPath)) +console.log('currentApp', path.normalize(currentAppFolder.path + testPath)) +console.log('temp', path.normalize(tempFolder.path + testPath)) ``` ```typescript -let documentsFolder: Folder = knownFolders.documents() +let documentsFolder = knownFolders.documents() const currentAppFolder = knownFolders.currentApp() const tempFolder = knownFolders.temp() -const testPath: string = '///test.txt' +const testPath = '///test.txt' // Get a normalized path such as /test.txt from ///test.txt -vm.set('documents', path.normalize(documentsFolder.path + testPath)) -vm.set('currentApp', path.normalize(currentAppFolder.path + testPath)) -vm.set('temp', path.normalize(tempFolder.path + testPath)) +console.log('documents', path.normalize(documentsFolder.path + testPath)) +console.log('currentApp', path.normalize(currentAppFolder.path + testPath)) +console.log('temp', path.normalize(tempFolder.path + testPath)) ``` ### Path join From cb19235d208c0d979a3a91b01a008338ccb14462 Mon Sep 17 00:00:00 2001 From: Ombuweb Date: Mon, 11 Jul 2022 18:41:32 +0200 Subject: [PATCH 025/104] Fixed some broken links, more to be fixed --- ui-and-styling.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/ui-and-styling.md b/ui-and-styling.md index b9b3d1c8..5b7e6b7e 100644 --- a/ui-and-styling.md +++ b/ui-and-styling.md @@ -1997,7 +1997,7 @@ export class HtmlViewUsageComponent { ### Image -`` is a UI component that shows an image from an [ImageSource](/api-reference/classes/imagesource.html) or from a URL. +`` is a UI component that shows an image from an [ImageSource](https://docs.nativescript.org/api-reference/classes/imagesource) or from a URL. @@ -2254,7 +2254,7 @@ In NativeScript-Vue, `.decode` is required for parsing properties that have HTML | `tintColor` | `Color` | (Style property) Sets a color to tint template images. | | `stretch` | `ImageStretch` | (Style property) Gets or sets the way the image is resized to fill its allocated space.
Valid values: `none`, `aspectFill`, `aspectFit`, or `fill`.
For more information, see [ImageStretch](/api-reference/modules/coretypes.imagestretch.html). | | `loadMode` | | Gets or sets the loading strategy for the images on the local file system.
Valid values: `sync` or `async`.
Default value: `async`.
For more information, see [loadMode](/api-reference/classes/image.html#loadmode). | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/image.html) | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/image) | @@ -2403,16 +2403,16 @@ import { Color } from '@nativescript/core' #### Props -| Name | Type | Description | -| ---------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| `letterSpacing` | `number` | Gets or sets letterSpace style property. | -| `lineHeight` | `number` | Gets or sets lineHeight style property. | -| `text` | `string` | Gets or sets the Label text. | -| `textAlignment` | `initial`, `left`, `center`, `right`, `justify` | Gets or sets text-alignment style property. | -| `textDecoration` | `none`, `underline`, `line-through`, `underline`, `line-through` | Gets or sets text swcoration style property. | -| `textTransform` | `initial`, `none`, `capitalize`, `uppercase`, `lowercase` | Gets or sets text transform style property. | -| `textWrap` | `boolean` | Gets or sets whether the Label wraps text or not. | -| `whiteSpace` | `initial`, `normal`, `nowrap` | Gets or sets the white space style. | +| Name | Type | Description | +| ---------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | +| `letterSpacing` | `number` | Gets or sets letterSpace style property. | +| `lineHeight` | `number` | Gets or sets lineHeight style property. | +| `text` | `string` | Gets or sets the Label text. | +| `textAlignment` | `initial`, `left`, `center`, `right`, `justify` | Gets or sets text-alignment style property. | +| `textDecoration` | `none`, `underline`, `line-through`, `underline`, `line-through` | Gets or sets text swcoration style property. | +| `textTransform` | `initial`, `none`, `capitalize`, `uppercase`, `lowercase` | Gets or sets text transform style property. | +| `textWrap` | `boolean` | Gets or sets whether the Label wraps text or not. | +| `whiteSpace` | `initial`, `normal`, `nowrap` | Gets or sets the white space style. | | `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](api-reference/classes/label.html) | @@ -5242,7 +5242,7 @@ This list of properties can be set in CSS or through the style property of each | `font-size` | `fontSize` | Sets the font size of the matched view (only supports device-independent units). | | `font-style` | `fontStyle` | Sets the font style of the matched view. Possible values: `italic`, `normal`. | | `font-weight` | `fontWeight` | Sets the font weight of the matched view Possible values: `bold`, `normal` OR `100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`, where `400` is `normal` and `700` is `bold` (NOTE: Some fonts do not support all available variants) | -| `text-align` | `textAlignment` | Sets text alignment in the matched view. Possible values: `left` , `center`, `right`, `justify`. | +| `text-align` | `textAlignment` | Sets text alignment in the matched view. Possible values: `left` , `center`, `right`, `justify`. | | `text-decoration` | `textDecoration` | Sets the text formatting. Possible values: `none`, `line-through`, `underline`. | | `text-transform` | `textTransform` | Sets the text transform. Possible values: `none`, `capitalize`, `uppercase`, `lowercase`. | | `letter-spacing` | `letterSpacing` | Sets the text letter spacing. (On Android API Level 21 and above.) | From a404913c0df88d709340df44bc9888f9ee8533b3 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Tue, 12 Jul 2022 00:37:16 +0200 Subject: [PATCH 026/104] Completed --- nativescript-core/file-system.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/nativescript-core/file-system.md b/nativescript-core/file-system.md index e745e196..476b141c 100644 --- a/nativescript-core/file-system.md +++ b/nativescript-core/file-system.md @@ -262,6 +262,20 @@ const image = ImageSource.fromResource('icon') .catch(err => Dialogs.alert(err)) ``` +### Writing binary data to a File + +```javascript +imageFile.writeSync(binarySource, err => { + console.log(err) +}) +``` + +```typescript +imageFile.writeSync(binarySource, err => { + console.log(err) +}) +``` + ### Checking if a File Exists ```javascript From 5e2d7839be9a75b900799fdd339517c36d7a45c2 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Tue, 12 Jul 2022 00:48:51 +0200 Subject: [PATCH 027/104] Completed This reverts commit a404913c0df88d709340df44bc9888f9ee8533b3. --- nativescript-core/file-system.md | 28 +++++++--------------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/nativescript-core/file-system.md b/nativescript-core/file-system.md index 476b141c..a4f96b37 100644 --- a/nativescript-core/file-system.md +++ b/nativescript-core/file-system.md @@ -262,20 +262,6 @@ const image = ImageSource.fromResource('icon') .catch(err => Dialogs.alert(err)) ``` -### Writing binary data to a File - -```javascript -imageFile.writeSync(binarySource, err => { - console.log(err) -}) -``` - -```typescript -imageFile.writeSync(binarySource, err => { - console.log(err) -}) -``` - ### Checking if a File Exists ```javascript @@ -615,13 +601,13 @@ const separator = path.separator ## API References -| Name | Type | -| ----------------------------------------------------------------------------------------------------------- | -------- | -| [FileSystem](https://docs.nativescript.org/api-reference/classes/_file_system_.file.html) | Class | -| [FileSystemEntity](https://docs.nativescript.org/api-reference/classes/_file_system_.filesystementity.html) | `Class` | -| [Folder](https://docs.nativescript.org/api-reference/classes/_file_system_.folder.html) | `Class` | -| [knownFolders](https://docs.nativescript.org/api-reference/modules/_file_system_.knownfolders) | `Module` | -| [path](https://docs.nativescript.org/api-reference/modules/_file_system_.path) | `Module` | +| Name | Type | +| ---------------------------------------------------------------------------------------- | -------- | +| [File](https://docs.nativescript.org/api-reference/classes/file) | Class | +| [FileSystemEntity](https://docs.nativescript.org/api-reference/classes/filesystementity) | `Class` | +| [Folder](https://docs.nativescript.org/api-reference/classes/folder) | `Class` | +| [knownFolders](https://docs.nativescript.org/api-reference/modules/knownfolders) | `Module` | +| [path](https://docs.nativescript.org/api-reference/modules/path) | `Module` | ## Native Component From d36804499f28c819e063dc2a9092a16f828ca502 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Tue, 12 Jul 2022 00:57:38 +0200 Subject: [PATCH 028/104] Added Screen class reference --- nativescript-core/platform.md | 1 + 1 file changed, 1 insertion(+) diff --git a/nativescript-core/platform.md b/nativescript-core/platform.md index f761ff00..491fc443 100644 --- a/nativescript-core/platform.md +++ b/nativescript-core/platform.md @@ -75,3 +75,4 @@ Gets information about the main screen of the current device. | Name | Type | | -------------------------------------------------------------------- | ------- | | [Device](https://docs.nativescript.org/api-reference/modules#device) | `Class` | +| [Screen](https://docs.nativescript.org/api-reference/classes/screen) | `Class` | From 6e7a1d4344bf86123d532077bae8127717e549c2 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Tue, 12 Jul 2022 01:14:42 +0200 Subject: [PATCH 029/104] Fixed all the broken links --- ui-and-styling.md | 328 +++++++++++++++++++++++----------------------- 1 file changed, 164 insertions(+), 164 deletions(-) diff --git a/ui-and-styling.md b/ui-and-styling.md index 5b7e6b7e..cfea60d9 100644 --- a/ui-and-styling.md +++ b/ui-and-styling.md @@ -160,10 +160,10 @@ The following example creates a group of overlapping items. #### Props -| Name | Type | Description | -| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------- | -| `N/A` | `N/A` | None. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/absolutelayout.html) | +| Name | Type | Description | +| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| `N/A` | `N/A` | None. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/absolutelayout.html) | #### Additional children props @@ -247,10 +247,10 @@ The following example creates a single line of 4 elements that stretch across th #### Props -| Name | Type | Description | -| ------------------ | ----------- | --------------------------------------------------------------------------------------------------------------- | -| `stretchLastChild` | `Boolean` | Enables or disables stretching the last child to fit the remaining space. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/docklayout.html) | +| Name | Type | Description | +| ------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `stretchLastChild` | `Boolean` | Enables or disables stretching the last child to fit the remaining space. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/docklayout.html) | @@ -347,7 +347,7 @@ The following example creates a complex grid with responsive design, mixed width | -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `columns` | `String` | A string value representing column widths delimited with commas.
Valid values: an absolute number, `auto`, or `*`.
A number indicates an absolute column width. `auto` makes the column as wide as its widest child. `*` makes the column occupy all available horizontal space. The space is proportionally divided over all star-sized columns. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes. | | `rows` | `String` | A string value representing row heights delimited with commas.
Valid values: an absolute number, `auto`, or `*`.
A number indicates an absolute row height. `auto` makes the row as tall as its tallest child. `*` makes the row occupy all available vertical space. The space is proportionally divided over all star-sized rows. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/gridlayout.html) | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/gridlayout.html) | #### Additional children props @@ -476,10 +476,10 @@ The following example creates a diagonal stack of items with responsive sizes. I #### Props -| Name | Type | Description | -| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | -| `orientation` | `String` | Specifies the stacking direction.
Valid values: `vertical` and `horizontal`.
Default value: `vertical`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/stacklayout.html) | +| Name | Type | Description | +| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- | +| `orientation` | `String` | Specifies the stacking direction.
Valid values: `vertical` and `horizontal`.
Default value: `vertical`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/stacklayout.html) | #### Additional children props @@ -642,7 +642,7 @@ The following example creates a column of equally-sized items. When the row runs | `orientation` | `String` | Specifies the stacking direction.
Valid values: `horizontal` (arranges items in rows) and `vertical` (arranges items in columns).
Default value: `horizontal`. | | `itemWidth` | `Number` | Sets the width used to measure and layout each child.
Default value: `Number.NaN`, which does not restrict children. | | `itemHeight` | `Number` | Sets the height used to measure and layout each child.
Default value is `Number.NaN`, which does not restrict children. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/wraplayout.html) | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/wraplayout.html) | #### Additional children props @@ -767,7 +767,7 @@ The following example shows how to use: | `justifyContent` | `String` | Sets the alignment of child elements along the main axis. You can use it to distribute leftover space when all the child elements on a line are inflexible or are flexible but have reached their maximum size. You can also use it to control the alignment of items when they overflow the line.
Valid values:
`flex-start` (items are packed toward the start line),
`flex-end` (items are packed toward the end line),
`center` (items are centered along the line),
`space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and
`space-around` (items are evenly distributed on the line with equal space around them).
Default value: `flex-start`. | | `alignItems` | `String` | (Android-only) Sets the alignment of child elements along the cross axis on the current line. Acts as `justifyContent` for the cross axis.
Valid values:
`flex-start` (cross-start margin edge of the items is placed on the cross-start line),
`flex-end` (cross-end margin edge of the items is placed on the cross-end line),
`center` (items are centered оn the cross axis),
`baseline` (the item baselines are aligned), and
`stretch` (items are stretched to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. | | `alignContent` | `String` | Sets how lines are aligned in the flex container on the cross axis, similar to how `justifyContent` aligns individual items within the main axis.
This property has no effect when the flex container has only one line.
Valid values:
`flex-start` (lines are packed to the start of the container),
`flex-end` (lines are packed to the end of the container),
`center` (lines are packed to the center of the container),
`space-between` (lines are evenly distributed; the first line is at the start of the container while the last one is at the end),
`space-around` (lines are evenly distributed with equal space between them), and
`stretch` (lines are stretched to take up the remaining space).
Default value: `stretch`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/flexboxlayout.html) | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/flexboxlayout.html) | #### Additional children props @@ -1295,11 +1295,11 @@ In iOS, the color property affects the color of the title and the action items. #### ActionBar Properties -| Name | Type | Description | -| :---------- | :--------------------------------------- | :----------------------------------------------------------------------------------- | -| `title` | `string` | Gets or sets the action bar title. | -| `titleView` | [View](/api-reference/classes/view.html) | Gets or sets the title view. When set - replaces the title with a custom view. | -| `flat` | `boolean` | Removes the border on Android and the translucency on iOS. Default value is `false`. | +| Name | Type | Description | +| :---------- | :-------------------------------------------------------------------- | :----------------------------------------------------------------------------------- | +| `title` | `string` | Gets or sets the action bar title. | +| `titleView` | [View](https://docs.nativescript.org/api-reference/classes/view.html) | Gets or sets the title view. When set - replaces the title with a custom view. | +| `flat` | `boolean` | Removes the border on Android and the translucency on iOS. Default value is `false`. | #### ActionItem Properties @@ -1329,12 +1329,12 @@ In iOS, the color property affects the color of the title and the action items. #### API References -| Name | Type | -| :--------------------------------------------------------------- | :------ | -| [ActionBar](/api-reference/classes/actionbar.html) | `Class` | -| [ActionItem](/api-reference/classes/actionitem.html) | `Class` | -| [ActionItems](/api-reference/classes/actionitems.html) | `Class` | -| [NavigationButton](/api-reference/classes/navigationbutton.html) | `Class` | +| Name | Type | +| :-------------------------------------------------------------------------------------------- | :------ | +| [ActionBar](https://docs.nativescript.org/api-reference/classes/actionbar.html) | `Class` | +| [ActionItem](https://docs.nativescript.org/api-reference/classes/actionitem.html) | `Class` | +| [ActionItems](https://docs.nativescript.org/api-reference/classes/actionitems.html) | `Class` | +| [NavigationButton](https://docs.nativescript.org/api-reference/classes/navigationbutton.html) | `Class` | #### Native Component @@ -1435,10 +1435,10 @@ export default { #### Props -| Name | Type | Description | -| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------- | -| `busy` | `Boolean` | Gets or sets whether the indicator is active. When `true`, the indicator is active. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/activityindicator.html) | +| Name | Type | Description | +| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | +| `busy` | `Boolean` | Gets or sets whether the indicator is active. When `true`, the indicator is active. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/activityindicator.html) | #### Events @@ -1526,12 +1526,12 @@ import { EventData } from '@nativescript/core' #### Props -| Name | Type | Description | -| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | -| `text` | `String` | Sets the label of the button. | -| `textWrap` | `Boolean` | Gets or sets whether the widget wraps the text of the label. Useful for longer labels. Default value is `false`. | -| `isEnabled ` | `Boolean` | Make the button disabled or enabled. A disabled button is unusable and un-clickable. Default value is `true`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/button.html) | +| Name | Type | Description | +| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| `text` | `String` | Sets the label of the button. | +| `textWrap` | `Boolean` | Gets or sets whether the widget wraps the text of the label. Useful for longer labels. Default value is `false`. | +| `isEnabled ` | `Boolean` | Make the button disabled or enabled. A disabled button is unusable and un-clickable. Default value is `true`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/button.html) | @@ -1721,15 +1721,15 @@ import { EventData } from '@nativescript/core' #### Props -| Name | Type | Description | -| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------- | -| `date` | `Date` | Gets or sets the complete date. | -| `minDate` | `Date` | Gets or sets the earliest possible date to select. | -| `maxDate` | `Date` | Gets or sets the latest possible date to select. | -| `day` | `Number` | Gets or sets the day. | -| `month` | `Number` | Gets or sets the month. | -| `year` | `Number` | Gets or sets the year. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/datepicker.html) | +| Name | Type | Description | +| -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `date` | `Date` | Gets or sets the complete date. | +| `minDate` | `Date` | Gets or sets the earliest possible date to select. | +| `maxDate` | `Date` | Gets or sets the latest possible date to select. | +| `day` | `Number` | Gets or sets the day. | +| `month` | `Number` | Gets or sets the month. | +| `year` | `Number` | Gets or sets the year. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/datepicker.html) | #### Events @@ -1984,10 +1984,10 @@ export class HtmlViewUsageComponent { #### Props -| Name | Type | Description | -| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------- | -| `html` | `String` | The HTML content to be shown. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/htmlview.html) | +| Name | Type | Description | +| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `html` | `String` | The HTML content to be shown. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/htmlview.html) | #### Native component @@ -2247,14 +2247,14 @@ In NativeScript-Vue, `.decode` is required for parsing properties that have HTML #### Props -| Name | Type | Description | -| -------------- | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `src` | `String` or [`ImageSource`](/api-reference/classes/imagesource.html) | Gets or sets the source of the image as a URL or an image source. If you use the new font:// icon protocol in {N} 6.2, make sure you add .decode to the name of the property - e.g. `src.decode="font://"` | -| `imageSource` | [`ImageSource`](/api-reference/classes/imagesource.html) | Gets or sets the image source of the image. | -| `tintColor` | `Color` | (Style property) Sets a color to tint template images. | -| `stretch` | `ImageStretch` | (Style property) Gets or sets the way the image is resized to fill its allocated space.
Valid values: `none`, `aspectFill`, `aspectFit`, or `fill`.
For more information, see [ImageStretch](/api-reference/modules/coretypes.imagestretch.html). | -| `loadMode` | | Gets or sets the loading strategy for the images on the local file system.
Valid values: `sync` or `async`.
Default value: `async`.
For more information, see [loadMode](/api-reference/classes/image.html#loadmode). | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/image) | +| Name | Type | Description | +| -------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `src` | `String` or [`ImageSource`](https://docs.nativescript.org/api-reference/classes/imagesource.html) | Gets or sets the source of the image as a URL or an image source. If you use the new font:// icon protocol in {N} 6.2, make sure you add .decode to the name of the property - e.g. `src.decode="font://"` | +| `imageSource` | [`ImageSource`](https://docs.nativescript.org/api-reference/classes/imagesource.html) | Gets or sets the image source of the image. | +| `tintColor` | `Color` | (Style property) Sets a color to tint template images. | +| `stretch` | `ImageStretch` | (Style property) Gets or sets the way the image is resized to fill its allocated space.
Valid values: `none`, `aspectFill`, `aspectFit`, or `fill`.
For more information, see [ImageStretch](https://docs.nativescript.org/api-reference/modules/coretypes.imagestretch.html). | +| `loadMode` | | Gets or sets the loading strategy for the images on the local file system.
Valid values: `sync` or `async`.
Default value: `async`.
For more information, see [loadMode](https://docs.nativescript.org/api-reference/classes/image.html#loadmode). | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.orghttps://docs.nativescript.org/api-reference/classes/image) | @@ -2537,11 +2537,11 @@ import { EventData, ListPicker } from '@nativescript/core' #### Props -| Name | Type | Description | -| --------------- | --------------- | --------------------------------------------------------------------------------------------------------------- | -| `items` | `Array` | Gets or sets the items displayed as options in the list picker. | -| `selectedIndex` | `Number` | Gets or sets the index of the currently selected item. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/listpicker.html) | +| Name | Type | Description | +| --------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `items` | `Array` | Gets or sets the items displayed as options in the list picker. | +| `selectedIndex` | `Number` | Gets or sets the index of the currently selected item. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/listpicker.html) | #### Events @@ -2890,12 +2890,12 @@ If a `v-for` is used on a `` a warning will be printed to the console, #### todo: cleanup API References -| Name | Type | -| ------------------------------------------------------------- | ----------- | -| [ListView](/api-reference/classes/listview.html) | `Class` | -| [ItemEventData](/api-reference/interfaces/itemeventdata.html) | `Interface` | -| [ItemsSource](/api-reference/interfaces/itemssource.html) | `Interface` | -| [KeyedTemplate](/api-reference/interfaces/keyedtemplate.html) | `Interface` | +| Name | Type | +| ------------------------------------------------------------------------------------------ | ----------- | +| [ListView](https://docs.nativescript.org/api-reference/classes/listview.html) | `Class` | +| [ItemEventData](https://docs.nativescript.org/api-reference/interfaces/itemeventdata.html) | `Interface` | +| [ItemsSource](https://docs.nativescript.org/api-reference/interfaces/itemssource.html) | `Interface` | +| [KeyedTemplate](https://docs.nativescript.org/api-reference/interfaces/keyedtemplate.html) | `Interface` | /// @@ -3265,10 +3265,10 @@ methods: { #### Props -| Name | Type | Description | -| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | -| `N/A` | `N/A` | None. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/placeholder.html) | +| Name | Type | Description | +| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- | +| `N/A` | `N/A` | None. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/placeholder.html) | ### Progress @@ -3395,11 +3395,11 @@ Progress { #### Props -| Name | Type | Description | -| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------- | -| `value` | `Number` | Gets or sets the current value of the progress bar. Must be within the range of 0 to `maxValue`. | -| `maxValue` | `Number` | Gets or sets the maximum value of the progress bar.
Default value: `100`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/progress.html) | +| Name | Type | Description | +| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `value` | `Number` | Gets or sets the current value of the progress bar. Must be within the range of 0 to `maxValue`. | +| `maxValue` | `Number` | Gets or sets the maximum value of the progress bar.
Default value: `100`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/progress.html) | #### Events @@ -3471,9 +3471,9 @@ When using `ObservableArray` the repeater will be automatically updated when ite #### API References -| Name | Type | -| ------------------------------------------------ | ------- | -| [Repeater](/api-reference/classes/repeater.html) | `Class` | +| Name | Type | +| ----------------------------------------------------------------------------- | ------- | +| [Repeater](https://docs.nativescript.org/api-reference/classes/repeater.html) | `Class` | ### ScrollView @@ -3608,11 +3608,11 @@ export class TipsAndTricksComponent { #### Props -| name | type | description | -| --------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------- | -| `orientation` | `String` | Gets or sets the direction in which the content can be scrolled: `horizontal` or `vertical`.
Default value: `vertical`. | -| `scrollBarIndicatorVisible` | `Boolean` | Specifies if the scrollbar is visible.
Default value: `true`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/scrollview.html) | +| name | type | description | +| --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `orientation` | `String` | Gets or sets the direction in which the content can be scrolled: `horizontal` or `vertical`.
Default value: `vertical`. | +| `scrollBarIndicatorVisible` | `Boolean` | Specifies if the scrollbar is visible.
Default value: `true`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/scrollview.html) | #### Events @@ -3770,13 +3770,13 @@ export class UsageComponent { #### Props -| Name | Type | Description | -| -------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------- | -| `hint` | `String` | Gets or sets placeholder text for the input area. | -| `text` | `String` | Gets or sets the value of the search query. | -| `textFieldBackgroundColor` | `Color` | Gets or sets the background color of the input area. | -| `textFieldHintColor` | `Color` | Gets or sets the color of the placeholder text. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/searchbar.html) | +| Name | Type | Description | +| -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `hint` | `String` | Gets or sets placeholder text for the input area. | +| `text` | `String` | Gets or sets the value of the search query. | +| `textFieldBackgroundColor` | `Color` | Gets or sets the background color of the input area. | +| `textFieldHintColor` | `Color` | Gets or sets the color of the placeholder text. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/searchbar.html) | @@ -4013,7 +4013,7 @@ let listOfItems = ['First', 'Second', 'Third'] | `items` | `Array` | An array of items to be displayed in the segmented bar. Represents the button labels or icons of the segmented bar.
The array must be created in advance. | | `selectedIndex` | `Number` | Gets or sets the index of the selected item. | | `selectedBackgroundColor` | `Color` | (Style property) Gets or sets the background color of the selected item. To set the background color of the entire bar, use `backgroundColor`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/segmentedbar.html) | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/segmentedbar.html) | #### Events @@ -4122,12 +4122,12 @@ export class UsageComponent { #### Props -| Name | Type | Description | -| -------------- | ----------- | ----------------------------------------------------------------------------------------------------------- | -| `value` | `Number` | Gets or sets the currently selected value of the slider.
Default value: `0`. | -| `minValue` | `Number` | Gets or sets the minimum value of the slider.
Default value: `0`. | -| `maxValue` | `Number` | Gets or sets the maximum value of the slider.
Default value: `100`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/slider.html) | +| Name | Type | Description | +| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| `value` | `Number` | Gets or sets the currently selected value of the slider.
Default value: `0`. | +| `minValue` | `Number` | Gets or sets the minimum value of the slider.
Default value: `0`. | +| `maxValue` | `Number` | Gets or sets the maximum value of the slider.
Default value: `100`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/slider.html) | @@ -4236,10 +4236,10 @@ export class BasicSwitchComponent { #### Props -| Name | Type | Description | -| -------------- | ----------- | ----------------------------------------------------------------------------------------------------------- | -| `checked` | `Boolean` | Gets or sets the value of the switch selection.
Default value: `false`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/switch.html) | +| Name | Type | Description | +| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| `checked` | `Boolean` | Gets or sets the value of the switch selection.
Default value: `false`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/switch.html) | @@ -4538,18 +4538,18 @@ The `TabView` component has the following unique styling properties: #### Props -| Name | Type | Description | -| ---------------------------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| `selectedIndex` | `Number` | Gets or sets the currently selected tab. Default is `0`. | -| `tabTextColor` | `Color` | (Style property) Gets or sets the text color of the tabs titles. | -| `tabTextFontSize` | `Color` | Gets or sets the font size of the tabs titles. | -| `tabBackgroundColor` | `Color` | (Style property) Gets or sets the background color of the tabs. | -| `selectedTabTextColor` | `Color` | (Style property) Gets or sets the text color of the selected tab title. | -| `androidTabsPosition` | `String` | Sets the position of the TabView in Android platform
Valid values: `top` or `bottom`. | -| `androidOffscreenTabLimit` | `number` | Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state. | -| `androidSelectedTabHighlightColor` | `Color` | Gets or sets the color of the horizontal line drawn below the currently selected tab on Android. | -| `iosIconRenderingMode` | `automatic`, `alwaysOriginal`, `alwaysTemplate` | Gets or sets the icon rendering mode on iOS. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/tabview.html) | +| Name | Type | Description | +| ---------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| `selectedIndex` | `Number` | Gets or sets the currently selected tab. Default is `0`. | +| `tabTextColor` | `Color` | (Style property) Gets or sets the text color of the tabs titles. | +| `tabTextFontSize` | `Color` | Gets or sets the font size of the tabs titles. | +| `tabBackgroundColor` | `Color` | (Style property) Gets or sets the background color of the tabs. | +| `selectedTabTextColor` | `Color` | (Style property) Gets or sets the text color of the selected tab title. | +| `androidTabsPosition` | `String` | Sets the position of the TabView in Android platform
Valid values: `top` or `bottom`. | +| `androidOffscreenTabLimit` | `number` | Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state. | +| `androidSelectedTabHighlightColor` | `Color` | Gets or sets the color of the horizontal line drawn below the currently selected tab on Android. | +| `iosIconRenderingMode` | `automatic`, `alwaysOriginal`, `alwaysTemplate` | Gets or sets the icon rendering mode on iOS. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/tabview.html) | #### TabViewItem Properties @@ -4560,9 +4560,9 @@ The `TabView` component has the following unique styling properties: #### Events -| Name | Description | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `selectedIndexChange` | Emits [an event object](/api-reference/classes/tabview.html#selectedindexchangedevent) containing an `newIndex` property with the index of the tapped `` (and an `oldIndex` property with the index of the previous tab). | +| Name | Description | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `selectedIndexChange` | Emits [an event object](https://docs.nativescript.org/api-reference/classes/tabview.html#selectedindexchangedevent) containing an `newIndex` property with the index of the tapped `` (and an `oldIndex` property with the index of the previous tab). | @@ -4576,7 +4576,7 @@ The `TabView` component has the following unique styling properties: `` is an input component that creates an editable single-line box. -`` extends [`TextBase`](/api-reference/classes/textbase.html) and [`EditableTextBase`](/api-reference/classes/editabletextbase.html) which provide additional properties and events. +`` extends [`TextBase`](https://docs.nativescript.org/api-reference/classes/textbase.html) and [`EditableTextBase`](https://docs.nativescript.org/api-reference/classes/editabletextbase.html) which provide additional properties and events. @@ -4703,26 +4703,26 @@ export class UsageComponent { #### Props -| Name | Type | Description | -| ------------------------ | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| `text` | `String` | Gets or sets the value of the field. | -| `hint` | `String` | Gets or sets the placeholder text. | -| `isEnabled` | `Boolean` | Make the field disabled or enabled. Default value is `true`. | -| `editable` | `Boolean` | When `true`, indicates that the user can edit the value of the field. | -| `maxLength` | `Number` | Limits input to the specified number of characters. | -| `secure` | `Boolean` | Hides the entered text when `true`. Use this property to create password input fields.
Default value: `false`. | -| `secureWithoutAutofill` | `Boolean` | Prevent iOS 12+ auto suggested strong password handling (iOS Only) | -| `keyboardType` | `KeyboardType` | Shows a custom keyboard for easier text input.
Valid values: `datetime`, `phone`, `number`, `url`, or `email`. | -| `returnKeyType` | `ReturnKeyType` | Gets or sets the label of the return key.
Valid values: `done`, `next`, `go`, `search`, or `send`. | -| `autocorrect` | `Boolean` | Enables or disables autocorrect. | -| `autocapitalizationType` | [`AutocapitalizationType`](/api-reference/modules/coretypes.autocapitalizationtype.html) | Gets or sets the autocapitalization type. | -| `letterSpacing` | `number` | Gets or sets letter space style property. | -| `lineHeight` | `number` | Gets or sets line height style property. | -| `textAlignment` | `TextAlignment` | Gets or sets the text alignment. | -| `textDecoration` | `TextDecoration` | Gets or sets the text decoration. | -| `textTransform` | `TextTransform` | Gets or sets the text transform. | -| `whiteSpace` | `WhiteSpace` | Gets or sets white space style property. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/textfield.html) | +| Name | Type | Description | +| ------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `text` | `String` | Gets or sets the value of the field. | +| `hint` | `String` | Gets or sets the placeholder text. | +| `isEnabled` | `Boolean` | Make the field disabled or enabled. Default value is `true`. | +| `editable` | `Boolean` | When `true`, indicates that the user can edit the value of the field. | +| `maxLength` | `Number` | Limits input to the specified number of characters. | +| `secure` | `Boolean` | Hides the entered text when `true`. Use this property to create password input fields.
Default value: `false`. | +| `secureWithoutAutofill` | `Boolean` | Prevent iOS 12+ auto suggested strong password handling (iOS Only) | +| `keyboardType` | `KeyboardType` | Shows a custom keyboard for easier text input.
Valid values: `datetime`, `phone`, `number`, `url`, or `email`. | +| `returnKeyType` | `ReturnKeyType` | Gets or sets the label of the return key.
Valid values: `done`, `next`, `go`, `search`, or `send`. | +| `autocorrect` | `Boolean` | Enables or disables autocorrect. | +| `autocapitalizationType` | [`AutocapitalizationType`](https://docs.nativescript.org/api-reference/modules/coretypes.autocapitalizationtype.html) | Gets or sets the autocapitalization type. | +| `letterSpacing` | `number` | Gets or sets letter space style property. | +| `lineHeight` | `number` | Gets or sets line height style property. | +| `textAlignment` | `TextAlignment` | Gets or sets the text alignment. | +| `textDecoration` | `TextDecoration` | Gets or sets the text decoration. | +| `textTransform` | `TextTransform` | Gets or sets the text transform. | +| `whiteSpace` | `WhiteSpace` | Gets or sets white space style property. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/textfield.html) | #### Events @@ -4743,7 +4743,7 @@ export class UsageComponent { `` is a UI component that shows an editable or a read-only multi-line text container. You can use it to let users type large text in your app or to show longer, multi-line text on the screen. -`` extends [`TextBase`](/api-reference/classes/textbase.html) and [`EditableTextBase`](/api-reference/classes/editabletextbase.html) which provide additional properties and events. +`` extends [`TextBase`](https://docs.nativescript.org/api-reference/classes/textbase.html) and [`EditableTextBase`](https://docs.nativescript.org/api-reference/classes/editabletextbase.html) which provide additional properties and events. @@ -4938,16 +4938,16 @@ To apply multiple styles to the text in your ``, you can use `Valid values: `datetime`, `phone`, `number`, `url`, or `email`. | +| Name | Type | Description | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `text` | `String` | Gets or sets the value of the component. | +| `hint` | `String` | Gets or sets the placeholder text when the component is editable. | +| `editable` | `Boolean` | When `true`, indicates that the user can edit the contents of the container. | +| `maxLength` | `Number` | Sets the maximum number of characters that can be entered in the container. | +| `keyboardType` | `KeyboardType` | Shows a custom keyboard for easier text input.
Valid values: `datetime`, `phone`, `number`, `url`, or `email`. | | `returnKeyType` | Gets or sets the label of the return key. Currently supported only on iOS.
Valid values: `done`, `next`, `go`, `search`, or `send`. | -| `autocorrect` | `Boolean` | Enables or disables autocorrect. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/textview.html) | +| `autocorrect` | `Boolean` | Enables or disables autocorrect. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/textview.html) | #### Events @@ -5088,17 +5088,17 @@ export class UsageComponent { #### Props -| Name | Type | Description | -| ---------------- | ----------- | --------------------------------------------------------------------------------------------------------------- | -| `hour` | `Number` | Gets or sets the selected hour. | -| `minute` | `Number` | Gets or sets the selected minute. | -| `time` | `Date` | Gets or sets the selected time. | -| `minHour` | `Number` | Gets or sets the minimum selectable hour. | -| `maxHour` | `Number` | Gets or sets the maximum selectable hour. | -| `minMinute` | `Number` | Gets or sets the minimum selectable minute. | -| `maxMinute` | `Number` | Gets or sets the maximum selectable minute. | -| `minuteInterval` | `Number` | Gets or sets the selectable minute interval. For example: 5 or 15 minutes.
Default value: `1`. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/timepicker.html) | +| Name | Type | Description | +| ---------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `hour` | `Number` | Gets or sets the selected hour. | +| `minute` | `Number` | Gets or sets the selected minute. | +| `time` | `Date` | Gets or sets the selected time. | +| `minHour` | `Number` | Gets or sets the minimum selectable hour. | +| `maxHour` | `Number` | Gets or sets the maximum selectable hour. | +| `minMinute` | `Number` | Gets or sets the minimum selectable minute. | +| `maxMinute` | `Number` | Gets or sets the maximum selectable minute. | +| `minuteInterval` | `Number` | Gets or sets the selectable minute interval. For example: 5 or 15 minutes.
Default value: `1`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/timepicker.html) | #### Events @@ -5183,10 +5183,10 @@ To be able to use gestures in WebView component on Android, we should first disa #### Props -| Name | Type | Description | -| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- | -| `src` | `String` | Gets or sets the displayed web content.
Valid values: an absolute URL, the path to a local HTML file, or static HTML. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](/api-reference/classes/webview.html) | +| Name | Type | Description | +| -------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| `src` | `String` | Gets or sets the displayed web content.
Valid values: an absolute URL, the path to a local HTML file, or static HTML. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/webview.html) | #### Events From 0e9d8c79d444ffa89c0852ad51a54849220aed55 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Tue, 12 Jul 2022 08:19:27 +0200 Subject: [PATCH 030/104] Fixed all broken links( links to api-reference ) --- interaction.md | 46 +++++++++++++++++++++++----------------------- performance.md | 4 ++-- ui-and-styling.md | 2 +- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/interaction.md b/interaction.md index a879d8d9..5c46d0b9 100644 --- a/interaction.md +++ b/interaction.md @@ -136,7 +136,7 @@ You can [read more about how this feature came to be here](https://blog.nativesc ### Animations with code -The easiest way to animate a **single** [`View`](/api-reference/classes/view.html) is by using the `View.animate` method which accepts an [`AnimationDefinition`](/api-reference/interfaces/animationdefinition.html), immediately starts the animation and then returns its finished promise. +The easiest way to animate a **single** [`View`](https://docs.nativescript.org/api-reference/classes/view.html) is by using the `View.animate` method which accepts an [`AnimationDefinition`](https://docs.nativescript.org/api-reference/interfaces/animationdefinition.html), immediately starts the animation and then returns its finished promise. **Example 20: How to execute animation on single view.** @@ -158,13 +158,13 @@ view.animate({ :::tip Note -You should create an [`Animation`](/api-reference/classes/animation.html) class in order to be able to **cancel** the animation. This is demonstrated below. +You should create an [`Animation`](https://docs.nativescript.org/api-reference/classes/animation.html) class in order to be able to **cancel** the animation. This is demonstrated below. ::: ### The AnimationDefinition interface -The [`AnimationDefinition`](/api-reference/interfaces/animationdefinition.html) interface is central for defining an animation for **one or more properties** of a **single** [`View`](/api-reference/classes/view.html). The animatable properties are: +The [`AnimationDefinition`](https://docs.nativescript.org/api-reference/interfaces/animationdefinition.html) interface is central for defining an animation for **one or more properties** of a **single** [`View`](https://docs.nativescript.org/api-reference/classes/view.html). The animatable properties are: - **opacity** - **backgroundColor** @@ -173,7 +173,7 @@ The [`AnimationDefinition`](/api-reference/interfaces/animationdefinition.html) - **rotate** - **width** and **height** -The [`AnimationDefinition`](/api-reference/interfaces/animationdefinition.html) interface has the following members: +The [`AnimationDefinition`](https://docs.nativescript.org/api-reference/interfaces/animationdefinition.html) interface has the following members: - **target**: The view whose property is to be animated. - **opacity**: Animates the opacity of the view. Value should be a number between 0.0 and 1.0. @@ -184,18 +184,18 @@ The [`AnimationDefinition`](/api-reference/interfaces/animationdefinition.html) - **duration**: The length of the animation in milliseconds. The default duration is 300 milliseconds. - **delay**: The amount of time, in milliseconds, to delay starting the animation. - **iterations**: Specifies how many times the animation should be played. Default is 1. iOS animations support fractional iterations, i.e., 1.5. To repeat an animation infinitely, use `Number.POSITIVE_INFINITY`. -- **curve**: An optional animation curve. Possible values are contained in the [AnimationCurve](/api-reference/modules/coretypes.animationcurve.html). Alternatively, you can pass an instance of type [`UIViewAnimationCurve`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/c/tdef/UIViewAnimationCurve) for iOS or [`android.animation.TimeInterpolator`](http://developer.android.com/reference/android/animation/TimeInterpolator.html) for Android. +- **curve**: An optional animation curve. Possible values are contained in the [AnimationCurve](https://docs.nativescript.org/api-reference/modules/coretypes.animationcurve.html). Alternatively, you can pass an instance of type [`UIViewAnimationCurve`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/c/tdef/UIViewAnimationCurve) for iOS or [`android.animation.TimeInterpolator`](http://developer.android.com/reference/android/animation/TimeInterpolator.html) for Android. - **width**: Animates view's width. - **height**: Animates view's height. All members of the interface are **optional** and have default values with the following exceptions: -- target is only optional when calling the `animate` method of a [`View`](/api-reference/classes/view.html) instance since it is set automatically for you. +- target is only optional when calling the `animate` method of a [`View`](https://docs.nativescript.org/api-reference/classes/view.html) instance since it is set automatically for you. - You must specify at least one property from this list: opacity, backgroundColor, scale, rotate or translate. ### The Animation class -The [`Animation`](/api-reference/classes/animation.html) class represents a **set** of one or more [`AnimationDefinitions`](/api-reference/interfaces/animationdefinition.html) that can be played either **simultaneously or sequentially**. **This class is typically used when you need to animate several views together**. The constructor of the [`Animation`](/api-reference/classes/animation.html) class accepts an array of [`AnimationDefinitions`](/api-reference/interfaces/animationdefinition.html) and a boolean parameter indicating whether to play the animations sequentially. Creating an instance of the [`Animation`](/api-reference/classes/animation.html) class does not start the animation playback. The class has four members: +The [`Animation`](https://docs.nativescript.org/api-reference/classes/animation.html) class represents a **set** of one or more [`AnimationDefinitions`](https://docs.nativescript.org/api-reference/interfaces/animationdefinition.html) that can be played either **simultaneously or sequentially**. **This class is typically used when you need to animate several views together**. The constructor of the [`Animation`](https://docs.nativescript.org/api-reference/classes/animation.html) class accepts an array of [`AnimationDefinitions`](https://docs.nativescript.org/api-reference/interfaces/animationdefinition.html) and a boolean parameter indicating whether to play the animations sequentially. Creating an instance of the [`Animation`](https://docs.nativescript.org/api-reference/classes/animation.html) class does not start the animation playback. The class has four members: - **play**: A method that starts the animation and returns the instance it was called on for fluent animation chaining. - **cancel**: A void method that stops the animation. @@ -953,7 +953,7 @@ More detailed examples are available on the [Animation Examples](#animation-exam ### Rotation using originX and originY -To create more complex animations, we might need to change the origin point around which the selected view will be transformed. This can be achieved using [`originX`](/api-reference/classes/view.html#originx) and [`originY`](/api-reference/classes/view.html#originy) properties of `View`. +To create more complex animations, we might need to change the origin point around which the selected view will be transformed. This can be achieved using [`originX`](https://docs.nativescript.org/api-reference/classes/view.html#originx) and [`originY`](https://docs.nativescript.org/api-reference/classes/view.html#originy) properties of `View`. **Example 5: Rotating a view around its center. Center of view is changed via `originX` and `originY` properties.** @@ -981,7 +981,7 @@ The properties `originX` and `originY` are JavaScript properties and can be assi ### Limitations -- `Span` and `FormattedString` can not be animated. `Span` and `FormattedString` elements are not extending the [`View`](/api-reference/classes/view.html) class, but only [`ViewBase`](/api-reference/classes/viewbase.html). Because of this, neither `Span` nor `FormattedString` are ui elements, making it impossible to animate them and causing a crash on iOS. +- `Span` and `FormattedString` can not be animated. `Span` and `FormattedString` elements are not extending the [`View`](https://docs.nativescript.org/api-reference/classes/view.html) class, but only [`ViewBase`](https://docs.nativescript.org/api-reference/classes/viewbase.html). Because of this, neither `Span` nor `FormattedString` are ui elements, making it impossible to animate them and causing a crash on iOS. ### Animation examples @@ -1799,20 +1799,20 @@ The result are received in the dialog resolved promise after the user closes or ### API References -| Name | Type | -| ----------------------------------------------------------------- | ----------- | -| [@nativescript/core/dialogs](/api-reference/modules.html#dialogs) | `Module` | -| [action](/api-reference/modules.html#dialogs) | `function` | -| [ActionOptions](/api-reference/modules.html#dialogs) | `interface` | -| [alert](/api-reference/modules.html#dialogs) | `function` | -| [AlertOptions](/api-reference/modules.html#dialogs) | `interface` | -| [confirm](/api-reference/modules.html#dialogs) | `function` | -| [ConfirmOptions](/api-reference/modules.html#dialogs) | `interface` | -| [login](/api-reference/modules.html#dialogs) | `function` | -| [LoginOptions](/api-reference/modules.html#dialogs) | `interface` | -| [LoginResults](/api-reference/modules.html#dialogs) | `interface` | -| [prompt](/api-reference/modules.html#dialogs) | `function` | -| [PromptOptions](/api-reference/modules.html#dialogs) | `interface` | +| Name | Type | +| ---------------------------------------------------------------------------------------------- | ----------- | +| [@nativescript/core/dialogs](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `Module` | +| [action](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `function` | +| [ActionOptions](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `interface` | +| [alert](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `function` | +| [AlertOptions](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `interface` | +| [confirm](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `function` | +| [ConfirmOptions](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `interface` | +| [login](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `function` | +| [LoginOptions](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `interface` | +| [LoginResults](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `interface` | +| [prompt](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `function` | +| [PromptOptions](https://docs.nativescript.org/api-reference/modules.html#dialogs) | `interface` | ### Native Component diff --git a/performance.md b/performance.md index 1f082b90..c7e8b207 100644 --- a/performance.md +++ b/performance.md @@ -483,7 +483,7 @@ When working with the decode properties, the following considerations should be ### Using `loadMode` property -With [loadMode](/api-reference/classes/image.html#loadmode) set to `async`, the image will load asynchronously which means the UI won't block by the decoding and preloading operations. The developers can use `loadMode` on both iOS and Android. +With [loadMode]/classes/image.html#loadmode) set to `async`, the image will load asynchronously which means the UI won't block by the decoding and preloading operations. The developers can use `loadMode` on both iOS and Android. > **Tip**: Use `loadMode="async"` to prevent blocking of the UI while the image is loading. @@ -511,7 +511,7 @@ The `Image` module will use internal memory and disk cache, so when loaded the m The property `useCache` will work only for Android. Setting it for our iOS images will not change the application behavior in any way. ::: -**API Reference for** [Image Class](/api-reference/classes/image.html) +**API Reference for** [Image Class](https://docs.nativescript.org/api-reference/classes/image.html) **NativeScript Core Examples** [Cookbook](http://docs.nativescript.org/cookbook/ui/image) diff --git a/ui-and-styling.md b/ui-and-styling.md index cfea60d9..2ee3f4fc 100644 --- a/ui-and-styling.md +++ b/ui-and-styling.md @@ -3479,7 +3479,7 @@ When using `ObservableArray` the repeater will be automatically updated when ite `` is a UI component that shows a scrollable content area. Content can be scrolled vertically or horizontally. -It's important to note that `` extends [`ContentView`](/api-reference/classes/contentview.html), so it can only have a single child element. +It's important to note that `` extends [`ContentView`](https://docs.nativescript.org/api-reference/classes/contentview.html), so it can only have a single child element. --- From 4b3e3342153c49c20407e592f5dfc484e528b188 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Tue, 12 Jul 2022 11:06:38 +0200 Subject: [PATCH 031/104] Refactored UI & Styling --- ui/components.md | 5202 +++++++++++++++++++++++++++ interaction.md => ui/interaction.md | 0 ui/styling.md | 819 +++++ 3 files changed, 6021 insertions(+) create mode 100644 ui/components.md rename interaction.md => ui/interaction.md (100%) create mode 100644 ui/styling.md diff --git a/ui/components.md b/ui/components.md new file mode 100644 index 00000000..e7608ff5 --- /dev/null +++ b/ui/components.md @@ -0,0 +1,5202 @@ +--- +title: Components +--- + +### Layout Properties + +#### Margins + +The four margin properties (`marginTop`, `marginRight`, `marginBottom` and `marginLeft`) describe the distance between a view and its parent. + +When you set margins through XML, you can choose between the following approaches. + +- **Set one value**: Provide a single value that will be applied on all sides of the view. +- **Set two values**: Provide two values. The first value is applied to the top side, the second value is applied to the right side. Next, the first value is applied to the bottom and the second value to 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 + +The four padding properties (`paddingTop`, `paddingRight`, `paddingBottom` and `paddingLeft`) describe the distance between the layout container and its children. + +When you set paddings through XML, you can choose between the following approaches. + +- **Set one value**: Provide a single value that will be applied on all sides of the view. +- **Set two values**: Provide two values. The first value is applied to the top side, the second value is applied to the right side. Next, the first value is applied to the bottom and the second value to 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). + +#### Alignments + +Layout applies horizontal and vertical alignment only when an element is allocated more size than it needs. + +The following table shows the valid values of `horizontalAlignment`. + +| Member | Description | +| ------- | ------------------------------------------------------------------------------------------------------ | +| 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 the valid values of `verticalAlignment`. + +| Member | Description | +| ------- | ------------------------------------------------------------------------------------------------------- | +| 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. | + +### Percentage Support + +NativeScript supports percentage values for `width`, `height` and `margin`. When a layout pass begins, first the percent values are calculated based on parent available size. This means that on vertical `StackLayout` if you place two `Buttons` with `height='50%'` they will get all the available height (e.g., they will fill the `StackLayout` vertically.). The same applies for margin properties. For example, if you set `marginLeft='5%'`, the element will have a margin that corresponds to 5% of the parent's available width. + +### iOS Safe Area Support + +The iOS `Safe Area` is a term that Apple introduced in iOS 11. It is the area of the screen that is free to use and won’t be obstructed by hardware and software parts of the system. The safe area is not a constant. It is affected by the notch, the rounded corners of the screen, the status bar and the home indicator, but also from parts of your application like the action bar and the tab bar. To get a better understanding refer to the [Apple docs](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/). + +Since version 5.0 NativeScript provides a default handling mechanism for the iOS `Safe Area`. The default behavior is that certain container `View` components (these that can have children) overflow the safe area and are laid out to the edges of the screen. These container components are: + +- Layouts +- ListView +- ScrollView +- WebView +- Repeater + +Internally, the workflow is as follows: + +1. Measure pass - all components are measured in the safe area portion of the screen. +2. Layout pass - all components are laid out in full screen, but are inset to the safe area boundaries. +3. Layout pass - if the component borders the safe area, it is adjusted and expanded to the edges of the screen. + +::: tip +The above workflow can lead to containers being laid out with a bigger size than initially declared in the markup. You can prevent this behavior by setting the `iosOverflowSafeArea` property below to `false`. +::: + +#### iosOverflowSafeArea Property + +The above default behavior should provide good UX out of the box. Additionally, NativeScript 5.0 exposes a property `iosOverflowSafeArea` that can control how components handle the iOS `Safe Area`. Set this property value to `true` if you want the component to expand to the edges of the screen when it borders the safe area. Set it to `false` to explicitly prevent this behavior. The default value for container components is `true`. All other components are considered content that should be constrained to the safe area and default to `false`. + +## Layout Containers + +### AbsoluteLayout + +The `` container is the simplest layout container in NativeScript. + +`` has the following behavior: + +- Uses a pair of absolute left/top coordinates to position its children. +- Doesn't enforce any layout constraints on its children. +- Doesn't resize its children at runtime when its size changes. + +#### Example: a grid-like layout + +The following example creates a simple grid. For more information about creating grid layouts, see [GridLayout](/ui-and-styling.html#gridlayout). + +```html + + +``` + + + +#### Example: Overlapping elements + +The following example creates a group of overlapping items. + +```html + + +``` + + + +#### Props + +| Name | Type | Description | +| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| `N/A` | `N/A` | None. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/absolutelayout.html) | + +#### Additional children props + +When an element is a direct child of ``, you can set the following additional properties. + +| Name | Type | Description | +| ------ | -------- | --------------------------------------------------------------------------------------------------------- | +| `top` | `Number` | Gets or sets the distance, in pixels, between the top edge of the child and the top edge of its parent. | +| `left` | `Number` | Gets or sets the distance, in pixels, between the left edge of the child and the left edge of its parent. | + +### DockLayout + +`` is a layout container that lets you dock child elements to the sides or the center of the layout. + +`` has the following behavior: + +- Uses the `dock` property to dock its children to the `left`, `right`, `top`, `bottom` or center of the layout.
To dock a child element to the center, it must be the **last child** of the container and you must set the `stretchLastChild` property of the parent to `true`. +- Enforces layout constraints to its children. +- Resizes its children at runtime when its size changes. + +#### Example: Dock to every side without stretching the last child + +The following example creates a frame-like layout consisting of 4 elements, position at the 4 edges of the screen. + +```html + + +``` + + + +#### Example: Dock to every side and stretch the last child + +The following example shows how `stretchLastChild` affects the positioning of child elements in a `DockLayout` container. The last child (`bottom`) is stretched to take up all the remaining space after positioning the first three elements. + +```html + + +``` + + + +#### Example: Dock to every side and the center + +The following example creates a `` of 5 elements. The first four wrap the center element in a frame. + +```html + + +``` + + + +#### Example: Dock multiple children to the same side + +The following example creates a single line of 4 elements that stretch across the entire height and width of the screen. + +```html + + +``` + + + +#### Props + +| Name | Type | Description | +| ------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `stretchLastChild` | `Boolean` | Enables or disables stretching the last child to fit the remaining space. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/docklayout.html) | + + + +#### Additional children props + +When an element is a direct child of ``, you can set the following additional properties. + +| Name | Type | Description | +| ------ | -------- | --------------------------------------------------------------------------------------------------- | +| `dock` | `String` | Specifies which side to dock the element to.
Valid values: `top`, `right`, `bottom`, or `left`. | + +### GridLayout + +`` is a layout container that lets you arrange its child elements in a table-like manner. + +The grid consists of rows, columns, and cells. A cell can span one or more rows and one or more columns. It can contain multiple child elements which can span over multiple rows and columns, and even overlap each other. + +By default, `` has one column and one row. You can add columns and rows by configuring the `columns` and the `rows` properties. In these properties, you need to set the number of columns and rows and their width and height. You set the number of columns by listing their widths, separated by a comma. You set the number of rows by listing their heights, separated by a comma. + +You can set a fixed size for column width and row height or you can create them in a responsive manner: + +- **An absolute number:** Indicates a fixed size. +- **auto:** Makes the column as wide as its widest child or makes the row as tall as its tallest child. +- **\*:** Takes as much space as available after filling all auto and fixed size columns or rows. + +See **Props** for more information. + +#### Example: Grid layout with fixed sizing + +The following example creates a simple 2-by-2 grid with fixed column widths and row heights. + +```html + + +``` + + + +#### Example: Grid layout with star sizing + +The following example creates a grid with responsive design, where space is allotted proportionally to child elements. + +```html + + +``` + + + +#### Example: Grid layout with fixed and auto sizing + +The following example create a grid with one auto-sized column and one column with fixed size. Rows have a fixed height. + +```html + + +``` + + + +#### Example: Grid layout with mixed sizing and merged cells + +The following example creates a complex grid with responsive design, mixed width and height settings, and some merged cells. + +```html + + +``` + + + +#### Props + +| Name | Type | Description | +| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `columns` | `String` | A string value representing column widths delimited with commas.
Valid values: an absolute number, `auto`, or `*`.
A number indicates an absolute column width. `auto` makes the column as wide as its widest child. `*` makes the column occupy all available horizontal space. The space is proportionally divided over all star-sized columns. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes. | +| `rows` | `String` | A string value representing row heights delimited with commas.
Valid values: an absolute number, `auto`, or `*`.
A number indicates an absolute row height. `auto` makes the row as tall as its tallest child. `*` makes the row occupy all available vertical space. The space is proportionally divided over all star-sized rows. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/gridlayout.html) | + +#### Additional children props + +When an element is a direct child of ``, you can work with the following additional properties. + +| Name | Type | Description | +| --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `row` | `Number` | Specifies the row for this element. Combined with a `col` property, specifies the cell coordinates of the element.
The first row is indicated by `0`. | +| `col` | `Number` | Specifies the column for the element. Combined with a `row` property, specifies the cell coordinates of the element.
The first column is indicated by `0`. | +| `rowSpan` | `Number` | Specifies the number of rows which this element spans across. | +| `colSpan` | `Number` | Specifies the number of columns which this element spans across. | + +### StackLayout + +`` is a layout container that lets you stack the child elements vertically (default) or horizontally. + +::: danger Important +Try not to nest too many `` in your markup. If you find yourself nesting a lot of `` +you will likely get better performance by switching to a `` or ``. +See [Layout Nesting](/common-pitfalls.html#layout-nesting) for more information. +::: + +#### Example: Default stacking + +The following example creates a vertical stack of 3 equally-sized elements. Items are stretched to cover the entire width of the screen. Items are placed in the order they were declared in. + +```html + + +``` + + + +#### Example: Horizontal stacking + +The following example creates a horizontal stack of 3 equally-sized elements. Items are stretched to cover the entire height of the screen. Items are placed in the order they were declared in. + +```html + + +``` + + + +#### Example: Stack layout with horizontally aligned children + +The following example creates a diagonal stack of items with responsive sizes. Items are vertically stacked. + +```html + + +``` + + + +#### Example: Horizontal stack layout with vertically aligned children + +The following example creates a diagonal stack of items with responsive sizes. Items are horizontally stacked. + +```html + + +``` + + + +#### Props + +| Name | Type | Description | +| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- | +| `orientation` | `String` | Specifies the stacking direction.
Valid values: `vertical` and `horizontal`.
Default value: `vertical`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/stacklayout.html) | + +#### Additional children props + +None. + +### RootLayout + +`` is a layout container designed to be used as the primary root layout container for your app with a built in api to easily control dynamic view layers. It extends a GridLayout so has all the features of a grid but enhanced with additional apis. + +It's api can be observed here: + +```ts +export class RootLayout extends GridLayout { + open(view: View, options?: RootLayoutOptions): Promise + close(view: View, exitTo?: TransitionAnimation): Promise + bringToFront(view: View, animated?: boolean): Promise + closeAll(): Promise + getShadeCover(): View +} + +export function getRootLayout(): RootLayout + +export interface RootLayoutOptions { + shadeCover?: ShadeCoverOptions + animation?: { + enterFrom?: TransitionAnimation + exitTo?: TransitionAnimation + } +} + +export interface ShadeCoverOptions { + opacity?: number + color?: string + tapToClose?: boolean + animation?: { + enterFrom?: TransitionAnimation // only applied if first one to be opened + exitTo?: TransitionAnimation // only applied if last one to be closed + } + ignoreShadeRestore?: boolean +} + +export interface TransitionAnimation { + translateX?: number + translateY?: number + scaleX?: number + scaleY?: number + rotate?: number // in degrees + opacity?: number + duration?: number // in milliseconds + curve?: any // CoreTypes.AnimationCurve (string, cubicBezier, etc.) +} +``` + +You can use `getRootLayout()` to get a reference to the root layout in your app from anywhere. + +#### Example: RootLayout setup + +Sample layout: + +```html + + + + + +``` + +Sample api usage: + +```ts +// Open a dynamic popup +const view = this.getPopup('#EA5936', 110, -30) +getRootLayout() + .open(view, { + shadeCover: { + color: '#000', + opacity: 0.7, + tapToClose: true + }, + animation: { + enterFrom: { + opacity: 0, + translateY: 500, + duration: 500 + }, + exitTo: { + opacity: 0, + duration: 300 + } + } + }) + .catch(ex => console.error(ex)) + +// Close the dynamic popup +getRootLayout() + .close(view, { + opacity: 0, + translate: { x: 0, y: -500 } + }) + .catch(ex => console.error(ex)) + +function getPopup(color: string, size: number, offset: number): View { + const layout = new StackLayout() + layout.height = size + layout.width = size + layout.marginTop = offset + layout.marginLeft = offset + layout.backgroundColor = color + layout.borderRadius = 10 + return layout +} +``` + +You can play with [the toolbox app here](https://github.com/NativeScript/NativeScript/tree/master/apps/toolbox/src/pages/root-layout.ts) + +You can also find a more [thorough example in this sample repo](https://github.com/williamjuan027/nativescript-rootlayout-demo) + +### WrapLayout + +`` is a layout container that lets you position items in rows or columns, based on the `orientation` property. When the space is filled, the container automatically wraps items onto a new row or column. + +#### Example: Default wrap layout + +The following example creates a row of equally-sized items. When the row runs out of space, the container wraps the last item to a new row. + +```html + + +``` + + + +#### Example: Vertical wrap layout + +The following example creates a column of equally-sized items. When the row runs out of space, the container wraps the last item to a new column. + +```html + + +``` + + + +#### Props + +| Name | Type | Description | +| -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `orientation` | `String` | Specifies the stacking direction.
Valid values: `horizontal` (arranges items in rows) and `vertical` (arranges items in columns).
Default value: `horizontal`. | +| `itemWidth` | `Number` | Sets the width used to measure and layout each child.
Default value: `Number.NaN`, which does not restrict children. | +| `itemHeight` | `Number` | Sets the height used to measure and layout each child.
Default value is `Number.NaN`, which does not restrict children. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/wraplayout.html) | + +#### Additional children props + +None. + +### FlexboxLayout + +`` is a layout container that provides a non-exact implementation of the [CSS Flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). This layout lets you arrange child components both horizontally and vertically. + +#### Example: Default flex layout + +The following example creates a row of three equally-sized elements that span across the entire height of the screen. + +```html + + +``` + + + +#### Example: Column flex layout + +The following example creates a column of three equally-sized elements that span across the entire width of the screen. + +```html + + +``` + + + +#### Example: Row flex layout with items aligned to `flex-start` + +The following example creates a row of three items placed at the top of the screen. Items are placed in the order they were declared in. + +```html + + +``` + + + +#### Example: Row flex layout with custom order + +The following example creates a row of three items placed at the top of the screen. Items are placed in a customized order. + +```html + + +``` + + + +#### Example: Row flex layout with wrapping + +The following example creates four items with enabled line wrapping. When the row runs out of space, the container wraps the last item on a new line. + +```html + + +``` + + + +#### Example: Column flex layout with reverse order and items with a different `alignSelf` + +The following example shows how to use: + +- `flexDirection` to place items in a column, starting from the bottom. +- `justifyContent` to create equal spacing between the vertically placed items. +- `alignSelf` to modify the position of items across the main axis. + +```html + + +``` + + + +#### Props + +| Name | Type | Description | +| ---------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `flexDirection` | `String` | Sets the direction for placing child elements in the flexbox container.
Valid values:
`row` (horizontal, left to right),
`row-reverse` (horizontal, right to left),
`column` (vertical, top to bottom), and
`column-reverse` (vertical, bottom to top).
Default value: `row`. | +| `flexWrap` | `String` | Sets whether child elements are forced in a single line or can flow into multiple lines. If set to multiple lines, also defines the cross axis which determines the direction new lines are stacked in.
Valid values:
`nowrap` (single line which may cause the container to overflow),
`wrap` (multiple lines, direction is defined by `flexDirection`),and
`wrap-reverse` (multiple lines, opposite to the direction defined by `flexDirection`).
Default value: `nowrap`. | +| `justifyContent` | `String` | Sets the alignment of child elements along the main axis. You can use it to distribute leftover space when all the child elements on a line are inflexible or are flexible but have reached their maximum size. You can also use it to control the alignment of items when they overflow the line.
Valid values:
`flex-start` (items are packed toward the start line),
`flex-end` (items are packed toward the end line),
`center` (items are centered along the line),
`space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and
`space-around` (items are evenly distributed on the line with equal space around them).
Default value: `flex-start`. | +| `alignItems` | `String` | (Android-only) Sets the alignment of child elements along the cross axis on the current line. Acts as `justifyContent` for the cross axis.
Valid values:
`flex-start` (cross-start margin edge of the items is placed on the cross-start line),
`flex-end` (cross-end margin edge of the items is placed on the cross-end line),
`center` (items are centered оn the cross axis),
`baseline` (the item baselines are aligned), and
`stretch` (items are stretched to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. | +| `alignContent` | `String` | Sets how lines are aligned in the flex container on the cross axis, similar to how `justifyContent` aligns individual items within the main axis.
This property has no effect when the flex container has only one line.
Valid values:
`flex-start` (lines are packed to the start of the container),
`flex-end` (lines are packed to the end of the container),
`center` (lines are packed to the center of the container),
`space-between` (lines are evenly distributed; the first line is at the start of the container while the last one is at the end),
`space-around` (lines are evenly distributed with equal space between them), and
`stretch` (lines are stretched to take up the remaining space).
Default value: `stretch`. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/flexboxlayout.html) | + +#### Additional children props + +When an element is a direct child of ``, you can work with the following additional properties. + +| Name | Type | Description | +| ---------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `order` | `Number` | Sets the order in which child element appear in relation to one another. | +| `flexGrow` | `Number` | Indicates that the child should grow in size, if necessary. Sets how much the child will grow in proportion to the rest of the child elements in the flex container. | +| `flexShrink` | `Number` | Indicates that the child should shrink when the row runs out of space. Sets how much the flex item will shrink in proportion to the rest of the child elements in the flex container. When not specified, its value is set to `1`. | +| `alignSelf` | `String` | (Android-only) Overrides the `alignItems` value for the child.
Valid values:
`flex-start` (cross-start margin edge of the item is placed on the cross-start line),
`flex-end` (cross-end margin edge of the item is placed on the cross-end line),
`center` (item is centered on the cross axis),
`baseline` (the item baselines are aligned), and
`stretch` (items is stretched to fill the container but respects `min-width` and `max-width`).
Default value: `stretch`. | +| `flexWrapBefore` | `Boolean` | When `true`, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification.
Default value: `false`. | + +## Components + +### ActionBar + +The ActionBar is NativeScript’s abstraction over the Android [ActionBar](https://developer.android.com/training/appbar/) and iOS [NavigationBar](https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/). It represents a toolbar at the top of the activity window, and can have a title, application-level navigation, as well as other custom interactive items. + +--- + +#### Example: Simple ActionBar with title + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +/// flavor plain + +```html + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```html + +``` + +/// + + + +#### Example: ActionBar with custom title view + +/// flavor react + +```tsx + + + + + +``` + +/// + +/// flavor vue + +```html + + + + + +``` + +/// + +/// flavor plain + +```xml + + + + + +``` + +/// + +/// flavor angular + +```html + + + + + + +``` + +/// + +/// flavor svelte + +```html + + + + + +``` + +/// + +#### Example: ActionBar with ActionItem + +The `` components are supporting the platform-specific position and systemIcon for iOS and Android. + +- Android sets position via `android.position`: + + - `actionBar`: Puts the item in the ActionBar. Action item can be rendered both as text or icon. + - `popup`: Puts the item in the options menu. Items will be rendered as text. + - `actionBarIfRoom`: Puts the item in the ActionBar if there is room for it. Otherwise, puts it in the options menu. + +- iOS sets position via ios.position: + + - `left`: Puts the item on the left side of the ActionBar. + - `right`: Puts the item on the right side of the ActionBar. + +/// flavor svelte + +```html + + + + +``` + +/// + +/// flavor vue + +```html + + + + +``` + +/// + +/// flavor react + +```tsx + + + + +``` + +/// + +/// flavor plain + +```html + + + + + + +``` + +/// + +/// flavor angular + +```html + + + + + + +``` + +/// + +#### Example: ActionBar with NavigationButton + +`` is a UI component that provides an abstraction for the Android navigation button and the iOS back button. + +/// flavor vue + +```html + + + +``` + +/// + +/// flavor react + +```tsx + + + +``` + +/// + +/// flavor svelte + +```html + + + +``` + +/// + +/// flavor plain + +```html + + + +``` + +/// + +/// flavor angular + +```html + + + +``` + +/// + +:::tip Platform specific behavior + +**iOS Specific** + +On iOS the default text of the navigation button is the title of the previous page and the back button is used explicitly for navigation. +It navigates to the previous page and does not allow overriding this behavior. +If you need to place a custom button on the left side of the `` (e.g., to show a Drawer button), you can use an `` with `ios.position="left"`. + +**Android Specific** + +On Android, you can't add text inside the navigation button. +You can use the icon property to set an image (e.g., `~/images/nav-image.png` or `res:\\ic_nav`). +You can use `android.systemIcon` to set one of the system icons available in Android. +In this case, there is no default behaviour for NavigationButton tap event, and we should set the callback function, which will be executed. +::: + +#### Example: Setting an app icon for Android in ActionBar + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor plain + +```html + +``` + +/// + +/// flavor angular + +```html + + +``` + +/// + +#### Example: Removing the border from ActionBar + +By default, a border is drawn at the bottom of the ``. In addition to the border, on iOS devices a translucency filter is also applied over the ``. + +To remove this styling from your app, you can set the `flat` property to `true`. + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor plain + +```html + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +#### Example: Styling ActionBar + +To style the ``, you can use only `background-color` and `color` properties. Alternatively, you can use `@nativescript/theme` and use the default styles for each different theme. The icon property of `ActionItem` can use Icon Fonts with the `font://` prefix. By setting up this prefix, a new image will be generated, which will be set as an ``'s icon resource. While using this functionality, we need to specify the font-size, which will calculate the size of the generated image base on the device's dpi. + +/// flavor angular + +```html + + + + + + + + + + + + + + + +``` + +/// + +/// flavor plain + +```html + + + + + + + + + + + + +``` + +```ts +import { Button, EventData } from '@nativescript/core' + +onTap(args: EventData) { + const button = args.object as Button + // execute your custom logic here... +} +``` + +/// + +/// flavor vue + +```html + +``` + +#### Native component + +| Android | iOS | +| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | +| [`android.widget.Button`](https://developer.android.com/reference/android/widget/Button.html) | [`UIButton`](https://developer.apple.com/documentation/uikit/uibutton) | + +### Date Picker + +`` is a UI component that lets users select a date from a pre-configured range. + +See also: [TimePicker](/ui-and-styling.html#timepicker). + +--- + +/// flavor plain + +```xml + +``` + +```ts +import { DatePicker, EventData, Observable, Page } from '@nativescript/core' + +export function onNavigatingTo(args: EventData) { + const page = args.object as Page + const vm = new Observable() + + // in the following example the DatePicker properties are binded via Observableproperties + vm.set('minDate', new Date(1975, 0, 29)) // the binded minDate property accepts Date object + vm.set('maxDate', new Date(2045, 4, 12)) // the binded maxDate property accepts Date object + + page.bindingContext = vm +} + +export function onDatePickerLoaded(data: EventData) { + const datePicker = data.object as DatePicker + datePicker.on('dateChange', args => { + console.dir(args) + }) + datePicker.on('dayChange', args => { + console.dir(args) + }) + datePicker.on('monthChange', args => { + console.dir(args) + }) + datePicker.on('yearChange', args => { + console.dir(args) + }) +} +``` + +/// + +/// flavor angular + +```html + + +``` + +```typescript +import { Component } from '@angular/core' +import { DatePicker } from '@nativescript/core' + +@Component({ + moduleId: module.id, + templateUrl: './usage.component.html' +}) +export class DatePickerUsageComponent { + minDate: Date = new Date(1975, 0, 29) + maxDate: Date = new Date(2045, 4, 12) + + onDatePickerLoaded(args) { + // const datePicker = args.object as DatePicker; + } + + onDateChanged(args) { + console.log('Date New value: ' + args.value) + console.log('Date value: ' + args.oldValue) + } + + onDayChanged(args) { + console.log('Day New value: ' + args.value) + console.log('Day Old value: ' + args.oldValue) + } + + onMonthChanged(args) { + console.log('Month New value: ' + args.value) + console.log('Month Old value: ' + args.oldValue) + } + + onYearChanged(args) { + console.log('Year New value: ' + args.value) + console.log('Year Old value: ' + args.oldValue) + } +} +``` + +/// + +/// flavor vue + +```html + +``` + +`` provides two-way data binding using `v-model`. + +```html + +``` + +/// + +/// flavor react + +```tsx +import { EventData } from '@nativescript/core' +; { + const datePicker = args.object + }} +/> +``` + +/// + +/// flavor svelte + +```html + +``` + +`` provides two-way data binding using `bind`. + +```html + +``` + +/// + +#### Props + +| Name | Type | Description | +| -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `date` | `Date` | Gets or sets the complete date. | +| `minDate` | `Date` | Gets or sets the earliest possible date to select. | +| `maxDate` | `Date` | Gets or sets the latest possible date to select. | +| `day` | `Number` | Gets or sets the day. | +| `month` | `Number` | Gets or sets the month. | +| `year` | `Number` | Gets or sets the year. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/datepicker.html) | + +#### Events + +| Name | Description | +| ------------ | --------------------------------------- | +| `dateChange` | Emitted when the selected date changes. | + +#### Native component + +| Android | iOS | +| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | +| [`android.widget.DatePicker`](https://developer.android.com/reference/android/widget/DatePicker.html) | [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker) | + +### Frame + +`` is a UI component used to display [``](/ui-and-styling.html#page) elements. Every app needs at least a single `` element, usually set as the root element. + +--- + +#### A single root Frame + +/// flavor + +```js +new Vue({ + render: h => h('Frame', [h(HomePageComponent)]) +}) +``` + +/// + +#### Multiple Frames + +If you need to create multiple frames, you can do so by wrapping them in a Layout, for example if you want to have 2 frames side-by-side + +/// flavor vue + +```html + + + + +``` + +/// + +/// flavor react + +```tsx + + + + +``` + +/// + +/// flavor svelte + +```html + + + + +``` + +/// + +#### Example: A frame with a default page + +/// flavor vue + +```html + + + + + + + +``` + +/// + +/// flavor react + +```tsx + + + + + + + +``` + +/// + +/// flavor svelte + +```html + + + + + + + +``` + +/// + +#### Example: A frame with a default page from an external component + +/// flavor vue + +```html + + + + + +``` + +```js +import Home from './Home' + +export default { + components: { + Home + } +} +``` + +/// + +/// flavor svelte + +```html + + + +``` + +```js +import Home from './Home.svelte' +``` + +/// + +/// flavor react + +```tsx +import HomePage from './HomePage' + +function AppContainer() { + return ( + + + + ) +} +``` + +/// + +#### Native component + +| Android | iOS | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | +| [`org.nativescript.widgets.ContentLayout`](https://github.com/NativeScript/NativeScript/blob/master/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ContentLayout.java) | [`UINavigationController`](https://developer.apple.com/documentation/uikit/uinavigationcontroller) | + +### HtmlView + +`` is a UI component that lets you show static HTML content. + +See also: [WebView](#webview). + +--- + +/// flavor plain + +```xml + +``` + +```ts +import { HtmlView } from '@nativescript/core' + +export function onHtmlLoaded(args) { + const myHtmlView = args.object as HtmlView + myHtmlView.html = ` +

NativeScript HtmlView


+

This component accept simple HTML strings

` +} +``` + +/// + +/// flavor angular + +```html + +``` + +```ts +import { Component } from '@angular/core' + +@Component({ + moduleId: module.id, + templateUrl: './usage.component.html' +}) +export class HtmlViewUsageComponent { + htmlString: string + + constructor() { + this.htmlString = ` +

HtmlView demo in NativeScript App

+ ` + } +} +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Props + +| Name | Type | Description | +| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| `html` | `String` | The HTML content to be shown. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/htmlview.html) | + +#### Native component + +| Android | iOS | +| ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | +| [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html) | [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview) | + +### Image + +`` is a UI component that shows an image from an [ImageSource](https://docs.nativescript.org/api-reference/classes/imagesource) or from a URL. + + + +::: tip Tip +When working with images following [the best practices](/performance.html#image-optimizations) is a must. +::: + +--- + +#### Example: Displaying an image from `App_Resources` + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Example: Displaying an image relative to the `app` directory + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Example: Displaying an image from a URL + +:::tip Note + +Setting `loadMode` to `async` will prevent freezing the UI on Android when loading photos async (e.g. from online API) + +::: + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Example: Displaying a `base64`-encoded image + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Example: Image with CSS and an icon fonts + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +:::warning Note + +In NativeScript-Vue, `.decode` is required for parsing properties that have HTML entities in them. + +::: + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Props + +| Name | Type | Description | +| -------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `src` | `String` or [`ImageSource`](https://docs.nativescript.org/api-reference/classes/imagesource.html) | Gets or sets the source of the image as a URL or an image source. If you use the new font:// icon protocol in {N} 6.2, make sure you add .decode to the name of the property - e.g. `src.decode="font://"` | +| `imageSource` | [`ImageSource`](https://docs.nativescript.org/api-reference/classes/imagesource.html) | Gets or sets the image source of the image. | +| `tintColor` | `Color` | (Style property) Sets a color to tint template images. | +| `stretch` | `ImageStretch` | (Style property) Gets or sets the way the image is resized to fill its allocated space.
Valid values: `none`, `aspectFill`, `aspectFit`, or `fill`.
For more information, see [ImageStretch](https://docs.nativescript.org/api-reference/modules/coretypes.imagestretch.html). | +| `loadMode` | | Gets or sets the loading strategy for the images on the local file system.
Valid values: `sync` or `async`.
Default value: `async`.
For more information, see [loadMode](https://docs.nativescript.org/api-reference/classes/image.html#loadmode). | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.orghttps://docs.nativescript.org/api-reference/classes/image) | + + + +#### Native component + +| Android | iOS | +| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | +| [`android.widget.ImageView`](https://developer.android.com/reference/android/widget/ImageView.html) | [`UIImageView`](https://developer.apple.com/documentation/uikit/uiimageview) | + +### Label + +` +``` + +```css +.tvElevation { + android-elevation: 5; +} +``` + +::: warning Note +Since NativeScript 5.4, the buttons on Android have default elevation (shadow) of 2, to provide Material Design elevation support. Removing the shadow will allow you to create a transparent button. To explicitly remove the elevation, set the android-elevation property to `0` as shown below: + +```css +.btn-no-elevation { + android-elevation: 0; +} +``` + +::: + +#### Using the `androidDynamicElevationOffset` property on Android + +Another property introduced with {N} 5.4 is androidDynamicElevationOffset. This property allows setting an elevation, which will be shown when an action was performed. Those actions can be, for example, tap, touch etc. + +Example: + +```html + + + + +``` + +```css +.sampleButton2 { + background-color: lightcyan; + android-elevation: 7; + android-dynamic-elevation-offset: 7; +} +``` + +### Supported Selectors + +::: warning Note +Currently the CSS support is limited only to the selectors and properties listed in the current documentation. +::: + +NativeScript supports a subset of the [CSS selector syntax](http://www.w3schools.com/cssref/css_selectors.asp). Here is how to use the supported selectors: + +- [Type selector](#type-selector) +- [Class selector](#class-selector) +- [ID selector](#id-selector) +- [Hierarchical selector](#hierarchical-selector-css-combinators) +- [Attribute selector](#attribute-selector) +- [Pseudo selector](#pseudo-selector) + +#### Type Selector + +Like [CSS element selectors](http://www.w3schools.com/cssref/sel_element.asp), type selectors in NativeScript select all views of a given type. Type selectors are case insensitive, so you can use both `button` and `Button`. + +```CSS +button { background-color: gray } +``` + +#### Class Selector + +[Class selectors](http://www.w3schools.com/cssref/sel_class.asp) select all views with a given class. +The class is set using the `className` property of the view. + +::: warning Note +To use `className` in JS/TS to add a class to an element, the class rule must be in a CSS file that is higher up the component tree than the element, such as `app.css`. +::: + +```html + +``` + +```css +.title { + font-size: 32; +} +``` + +```ts +import { Label } from '@nativescript/core' +const label = new Label() +label.className = 'title' +``` + +#### ID Selector + +[Id selectors](http://www.w3schools.com/cssref/sel_id.asp) select all views with a given id. The `id` is set using the `id` property of the view. + +```html + +``` + +```css +#login-button { + background-color: blue; +} +``` + +```ts +import { Button } from '@nativescript/core' +const btn = new Button() +btn.id = 'login-button' +``` + +#### Attribute Selector + +```html + +``` + +```css +button[testAttr] { + background-color: blue; +} +``` + +This selector will select all buttons that have the attribute `testAttr` with some value. + +Also, some more advanced scenarios are supported: + +- button[testAttr='flower'] {...} - Will apply CSS on every button that has the `testAttr` property set exactly to the value `flower`. +- button[testAttr~='flower'] {...} - Selects all buttons with a `testAttr` property that contains a space-separated list of words, one of which is "flower". +- button[testAttr|='flower'] {...} - Selects all buttons with a `testAttr` property value that begins with "flower". The value has to be a whole word, either alone like `btn['testAttr'] = 'flower'`, or followed by hyphen (-), like `btn['testAttr'] = 'flower-house'`. +- button[testAttr^='flower'] {...} - Selects all buttons with a `testAttr` property value that begins with "flower". The value does not have to be a whole word. +- button[testAttr$='flower'] {...} - Selects all buttons with a `testAttr` property value that ends with "flower". The value does not have to be a whole word. +- button[testAttr*='flo'] {...} - Selects all buttons with a `testAttr` property value that contains "flo". The value does not have to be a whole word. + +Attribute selectors could be used alone or could be combined with all type of CSS selectors. + +```html + + +``` + +```css +#login-button[testAttr='flower'] { + background-color: blue; +} +[testAttr] { + color: white; +} +``` + +#### Pseudo Selector + +A pseudo-selector or also pseudo-class is used to define a special state of an element. Currently, NativeScript supports only :highlighted pseudo-selector. + +```html + +``` + +```css +button:highlighted { + background-color: red; + color: gray; +} +``` + +#### Hierarchical Selector (CSS Combinators) + +A CSS selector could contain more than one simple selector, and between selectors a combinator symbol could be included. + +- (space) - Descendant selector. For example, the following code will select all buttons inside StackLayouts (no matter) at which level. + +```css +StackLayout Button { + background-color: blue; +} +``` + +- (>) - A direct child selector. Using the previous example, if the CSS is changed to: + +```css +StackLayout > Button { + background-color: blue; +} +``` + +The background-color rule will not be applied. In order to apply the selector, the WrapLayout element would need to be removed so that the Button is a direct child of the StackLayout. + +- (+) - An adjacent sibling selector, allows to select all elements, which are siblings of a specified element. + +##### Direct Sibling Test by Class + +```html + + + + + +``` + +```css +.layout-class .test-child + .test-child-2 { + background-color: green; +} +``` + +##### Direct Sibling Test by ID + +```html + + + + + +``` + +```css +.layout-class #test-child + #test-child-2 { + background-color: green; +} +``` + +##### Direct Sibling by Type + +```html + + + + + + + + + +``` + +```css +StackLayout Button + Label { + background-color: green; + color: white; +} +``` + +### CSS Overview + +--- + +#### Applying CSS Styles + +The CSS styles can be set on 3 different levels: + +- [Application-wide CSS](#application-wide-css): Applies to every application page +- [Page-specific CSS](#page-specific-css): Applies to the page's UI views +- [Component-specific CSS](#component-specific-css): Applies for component only +- [Inline CSS](#inline-css): Applies directly to a UI view + +If there is CSS declared on different levels—all will be applied. The inline CSS will have the highest priority and the application CSS will have the lowest priority. + +It is also possible to apply [platform-specific CSS](#platform-specific-css). + +#### Application Wide CSS + +When the application starts, NativeScript checks if the file app.css exists. If it does, any CSS styles that it contains are loaded and used across all application pages. This file is a convenient place to store styles that will be used on multiple pages. + +You can change the name of the file from which the application-wide CSS is loaded. You need to do the change before the application is started, usually in the app.js or app.ts file as shown below: + +/// flavor plain + +```ts +import { Application } from '@nativescript/core' +Application.setCssFileName('style.css') + +Application.run({ moduleName: 'main-page' }) +``` + +/// + +/// flavor angular + +```ts +platformNativeScriptDynamic({ bootInExistingPage: false, cssFile: 'style.css' }) +``` + +/// + +::: tip Note +The path to the CSS file is relative to the application root folder. +::: + +You could also check the name of the application-wide CSS file by using getCssFileName() method as shown below: + +```ts +import { Application } from '@nativescript/core' +const fileName = Application.getCssFileName() +console.log(`fileName ${fileName}`) +``` + +/// flavor plain + +#### Page Specific CSS + +When the page's XML declaration file is loaded, NativeScript looks for a CSS file with the same name (if such exists), reads any CSS styles that it finds, and automatically loads and applies them to the page. For example, a page named mypage.xml will automatically load any CSS in mypage.css. The CSS file must exist in the same folder as the XML file to be automatically applied. + +If you import any custom components on your page, the CSS from those components will be applied to the page, too. As a best practice, scope the CSS of custom components so that component styles do not "leak" on to pages. + +```xml + + +``` + +```css +/* GOOD: This will ONLY apply to the custom component */ +.mywidget .label { + color: blue; +} + +/* BAD: This will apply to the custom component AND potentially to the page where the component is used */ +.label { + color: blue; +} +``` + +You can also override CSS styles specified in the file by using the page's css property: + +```ts +page.css = 'button { color: red }' +``` + +/// + +/// flavor angular + +#### Component Specific CSS + +In an Angular application everything is a component, therefore, it is a very common task to add some CSS code that should only apply to one component. Adding component-specific CSS in a NativeScript-Angular app involves using a component’s styles or styleUrls property. + +```ts +@Component({ + selector: 'list-test', + styleUrls: ['style.css'], + template: ... + +// Or + +@Component({ + selector: 'list-test', + styles: ['.third { background-color: lime; }'], + template: ... +``` + +/// + +#### Adding CSS String + +This snippet adds a new style to the current set of styles. This is quite useful when you need to add a small CSS chunk to an element (for example, for testing purposes): + +```ts +page.addCss('button {background-color: blue}') +``` + +#### Adding CSS File + +This snippet adds new CSS styles to the current set. However, this method reads them from a file. It is useful for organizing styles in files and reusing them across multiple pages. + +```ts +page.addCssFile(cssFileName) +``` + +#### Inline CSS + +Similarly to HTML, CSS can be defined inline for a UI view in the XML markup: + +```html + +``` + +#### Platform-specific CSS + +NativeScript conventions make it easy to apply platform-specific CSS, either via separate stylesheets or via in-line declarations. For an overview of NativeScript's convention-based file name rules for targeting files at specific platforms and screen sizes, refer to this article in the docs. + +There are 4 primary ways to target styles at iOS or Android: + +/// flavor plain + +1. Platform-specific stylesheets (`styles.ios.css`, `styles.android.css`) +2. Platform-specific markup blocks (` ... `, ` ... `) +3. Platform-specific attributes (` - - -``` - -/// - -/// flavor plain - -```html - - - - - - - - - - - - -``` - -```ts -import { Button, EventData } from '@nativescript/core' - -onTap(args: EventData) { - const button = args.object as Button - // execute your custom logic here... -} -``` - -/// - -/// flavor vue - -```html - -``` - -#### Native component - -| Android | iOS | -| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -| [`android.widget.Button`](https://developer.android.com/reference/android/widget/Button.html) | [`UIButton`](https://developer.apple.com/documentation/uikit/uibutton) | - -### Date Picker - -`` is a UI component that lets users select a date from a pre-configured range. - -See also: [TimePicker](/ui-and-styling.html#timepicker). - ---- - -/// flavor plain - -```xml - -``` - -```ts -import { DatePicker, EventData, Observable, Page } from '@nativescript/core' - -export function onNavigatingTo(args: EventData) { - const page = args.object as Page - const vm = new Observable() - - // in the following example the DatePicker properties are binded via Observableproperties - vm.set('minDate', new Date(1975, 0, 29)) // the binded minDate property accepts Date object - vm.set('maxDate', new Date(2045, 4, 12)) // the binded maxDate property accepts Date object - - page.bindingContext = vm -} - -export function onDatePickerLoaded(data: EventData) { - const datePicker = data.object as DatePicker - datePicker.on('dateChange', args => { - console.dir(args) - }) - datePicker.on('dayChange', args => { - console.dir(args) - }) - datePicker.on('monthChange', args => { - console.dir(args) - }) - datePicker.on('yearChange', args => { - console.dir(args) - }) -} -``` - -/// - -/// flavor angular - -```html - - -``` - -```typescript -import { Component } from '@angular/core' -import { DatePicker } from '@nativescript/core' - -@Component({ - moduleId: module.id, - templateUrl: './usage.component.html' -}) -export class DatePickerUsageComponent { - minDate: Date = new Date(1975, 0, 29) - maxDate: Date = new Date(2045, 4, 12) - - onDatePickerLoaded(args) { - // const datePicker = args.object as DatePicker; - } - - onDateChanged(args) { - console.log('Date New value: ' + args.value) - console.log('Date value: ' + args.oldValue) - } - - onDayChanged(args) { - console.log('Day New value: ' + args.value) - console.log('Day Old value: ' + args.oldValue) - } - - onMonthChanged(args) { - console.log('Month New value: ' + args.value) - console.log('Month Old value: ' + args.oldValue) - } - - onYearChanged(args) { - console.log('Year New value: ' + args.value) - console.log('Year Old value: ' + args.oldValue) - } -} -``` - -/// - -/// flavor vue - -```html - -``` - -`` provides two-way data binding using `v-model`. - -```html - -``` - -/// - -/// flavor react - -```tsx -import { EventData } from '@nativescript/core' -; { - const datePicker = args.object - }} -/> -``` - -/// - -/// flavor svelte - -```html - -``` - -`` provides two-way data binding using `bind`. - -```html - -``` - -/// - -#### Props - -| Name | Type | Description | -| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| `date` | `Date` | Gets or sets the complete date. | -| `minDate` | `Date` | Gets or sets the earliest possible date to select. | -| `maxDate` | `Date` | Gets or sets the latest possible date to select. | -| `day` | `Number` | Gets or sets the day. | -| `month` | `Number` | Gets or sets the month. | -| `year` | `Number` | Gets or sets the year. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/datepicker) | - -#### Events - -| Name | Description | -| ------------ | --------------------------------------- | -| `dateChange` | Emitted when the selected date changes. | - -#### Native component - -| Android | iOS | -| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -| [`android.widget.DatePicker`](https://developer.android.com/reference/android/widget/DatePicker.html) | [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker) | - -### Frame - -`` is a UI component used to display [``](/ui-and-styling.html#page) elements. Every app needs at least a single `` element, usually set as the root element. - ---- - -#### A single root Frame - -/// flavor - -```js -new Vue({ - render: h => h('Frame', [h(HomePageComponent)]) -}) -``` - -/// - -#### Multiple Frames - -If you need to create multiple frames, you can do so by wrapping them in a Layout, for example if you want to have 2 frames side-by-side - -/// flavor vue - -```html - - - - -``` - -/// - -/// flavor react - -```tsx - - - - -``` - -/// - -/// flavor svelte - -```html - - - - -``` - -/// - -#### Example: A frame with a default page - -/// flavor vue - -```html - - - - - - - -``` - -/// - -/// flavor react - -```tsx - - - - - - - -``` - -/// - -/// flavor svelte - -```html - - - - - - - -``` - -/// - -#### Example: A frame with a default page from an external component - -/// flavor vue - -```html - - - - - -``` - -```js -import Home from './Home' - -export default { - components: { - Home - } -} -``` - -/// - -/// flavor svelte - -```html - - - -``` - -```js -import Home from './Home.svelte' -``` - -/// - -/// flavor react - -```tsx -import HomePage from './HomePage' - -function AppContainer() { - return ( - - - - ) -} -``` - -/// - -#### Native component - -| Android | iOS | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | -| [`org.nativescript.widgets.ContentLayout`](https://github.com/NativeScript/NativeScript/blob/master/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ContentLayout.java) | [`UINavigationController`](https://developer.apple.com/documentation/uikit/uinavigationcontroller) | - -### HtmlView - -`` is a UI component that lets you show static HTML content. - -See also: [WebView](#webview). - ---- - -/// flavor plain - -```xml - -``` - -```ts -import { HtmlView } from '@nativescript/core' - -export function onHtmlLoaded(args) { - const myHtmlView = args.object as HtmlView - myHtmlView.html = ` -

NativeScript HtmlView


-

This component accept simple HTML strings

` -} -``` - -/// - -/// flavor angular - -```html - -``` - -```ts -import { Component } from '@angular/core' - -@Component({ - moduleId: module.id, - templateUrl: './usage.component.html' -}) -export class HtmlViewUsageComponent { - htmlString: string - - constructor() { - this.htmlString = ` -

HtmlView demo in NativeScript App

- ` - } -} -``` - -/// - -/// flavor vue - -```html - -``` - -/// - -/// flavor react - -```tsx - -``` - -/// - -/// flavor svelte - -```html - -``` - -/// - -#### Props - -| Name | Type | Description | -| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- | -| `html` | `String` | The HTML content to be shown. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/htmlview) | - -#### Native component - -| Android | iOS | -| ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | -| [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html) | [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview) | - -### Image - -`` is a UI component that shows an image from an [ImageSource](https://docs.nativescript.org/api-reference/classes/imagesource) or from a URL. - - - -::: tip Tip -When working with images following [the best practices](/performance.html#image-optimizations) is a must. -::: - ---- - -#### Example: Displaying an image from `App_Resources` - -/// flavor plain - -```xml - -``` - -/// - -/// flavor angular - -```html - -``` - -/// - -/// flavor react - -```tsx - -``` - -/// - -/// flavor vue - -```html - -``` - -/// - -/// flavor svelte - -```html - -``` - -/// - -#### Example: Displaying an image relative to the `app` directory - -/// flavor plain - -```xml - -``` - -/// - -/// flavor angular - -```html - -``` - -/// - -/// flavor react - -```tsx - -``` - -/// - -/// flavor vue - -```html - -``` - -/// - -/// flavor svelte - -```html - -``` - -/// - -#### Example: Displaying an image from a URL - -:::tip Note - -Setting `loadMode` to `async` will prevent freezing the UI on Android when loading photos async (e.g. from online API) - -::: - -/// flavor plain - -```xml - -``` - -/// - -/// flavor angular - -```html - - -``` - -/// - -/// flavor react - -```tsx - -``` - -/// - -/// flavor vue - -```html - -``` - -/// - -/// flavor svelte - -```html - -``` - -/// - -#### Example: Displaying a `base64`-encoded image - -/// flavor plain - -```xml - -``` - -/// - -/// flavor angular - -```html - -``` - -/// - -/// flavor react - -```tsx - -``` - -/// - -/// flavor vue - -```html - -``` - -/// - -/// flavor svelte - -```html - -``` - -/// - -#### Example: Image with CSS and an icon fonts - -/// flavor plain - -```xml - -``` - -/// - -/// flavor angular - -```html - -``` - -/// - -/// flavor react - -```tsx - -``` - -/// - -/// flavor vue - -```html - -``` - -:::warning Note - -In NativeScript-Vue, `.decode` is required for parsing properties that have HTML entities in them. - -::: - -/// - -/// flavor svelte - -```html - -``` - -/// - -#### Props - -| Name | Type | Description | -| -------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `src` | `String` or [`ImageSource`](https://docs.nativescript.org/api-reference/classes/imagesource) | Gets or sets the source of the image as a URL or an image source. If you use the new font:// icon protocol in {N} 6.2, make sure you add .decode to the name of the property - e.g. `src.decode="font://"` | -| `imageSource` | [`ImageSource`](https://docs.nativescript.org/api-reference/classes/imagesource) | Gets or sets the image source of the image. | -| `tintColor` | `Color` | (Style property) Sets a color to tint template images. | -| `stretch` | `ImageStretch` | (Style property) Gets or sets the way the image is resized to fill its allocated space.
Valid values: `none`, `aspectFill`, `aspectFit`, or `fill`.
For more information, see [ImageStretch](https://docs.nativescript.org/api-reference/modules/coretypes.imagestretch). | -| `loadMode` | | Gets or sets the loading strategy for the images on the local file system.
Valid values: `sync` or `async`.
Default value: `async`.
For more information, see [loadMode](https://docs.nativescript.org/api-reference/classes/image#loadmode). | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.orghttps://docs.nativescript.org/api-reference/classes/image) | - - - -#### Native component - -| Android | iOS | -| ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | -| [`android.widget.ImageView`](https://developer.android.com/reference/android/widget/ImageView) | [`UIImageView`](https://developer.apple.com/documentation/uikit/uiimageview) | - -### Label - -` + + +``` + +/// + +/// flavor plain + +```html + + + + + + + + + + + + +``` + +```ts +import { Button, EventData } from '@nativescript/core' + +onTap(args: EventData) { + const button = args.object as Button + // execute your custom logic here... +} +``` + +/// + +/// flavor vue + +```html + +``` + +#### Native component + +| Android | iOS | +| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | +| [`android.widget.Button`](https://developer.android.com/reference/android/widget/Button.html) | [`UIButton`](https://developer.apple.com/documentation/uikit/uibutton) | diff --git a/components/datepicker.md b/components/datepicker.md new file mode 100755 index 00000000..b82cca15 --- /dev/null +++ b/components/datepicker.md @@ -0,0 +1,184 @@ +--- +title: DatePicker +--- + +## Date Picker + +`` is a UI component that lets users select a date from a pre-configured range. + +See also: [TimePicker](/ui-and-styling.html#timepicker). + +--- + +/// flavor plain + +```xml + +``` + +```ts +import { DatePicker, EventData, Observable, Page } from '@nativescript/core' + +export function onNavigatingTo(args: EventData) { + const page = args.object as Page + const vm = new Observable() + + // in the following example the DatePicker properties are binded via Observableproperties + vm.set('minDate', new Date(1975, 0, 29)) // the binded minDate property accepts Date object + vm.set('maxDate', new Date(2045, 4, 12)) // the binded maxDate property accepts Date object + + page.bindingContext = vm +} + +export function onDatePickerLoaded(data: EventData) { + const datePicker = data.object as DatePicker + datePicker.on('dateChange', args => { + console.dir(args) + }) + datePicker.on('dayChange', args => { + console.dir(args) + }) + datePicker.on('monthChange', args => { + console.dir(args) + }) + datePicker.on('yearChange', args => { + console.dir(args) + }) +} +``` + +/// + +/// flavor angular + +```html + + +``` + +```typescript +import { Component } from '@angular/core' +import { DatePicker } from '@nativescript/core' + +@Component({ + moduleId: module.id, + templateUrl: './usage.component.html' +}) +export class DatePickerUsageComponent { + minDate: Date = new Date(1975, 0, 29) + maxDate: Date = new Date(2045, 4, 12) + + onDatePickerLoaded(args) { + // const datePicker = args.object as DatePicker; + } + + onDateChanged(args) { + console.log('Date New value: ' + args.value) + console.log('Date value: ' + args.oldValue) + } + + onDayChanged(args) { + console.log('Day New value: ' + args.value) + console.log('Day Old value: ' + args.oldValue) + } + + onMonthChanged(args) { + console.log('Month New value: ' + args.value) + console.log('Month Old value: ' + args.oldValue) + } + + onYearChanged(args) { + console.log('Year New value: ' + args.value) + console.log('Year Old value: ' + args.oldValue) + } +} +``` + +/// + +/// flavor vue + +```html + +``` + +`` provides two-way data binding using `v-model`. + +```html + +``` + +/// + +/// flavor react + +```tsx +import { EventData } from '@nativescript/core' +; { + const datePicker = args.object + }} +/> +``` + +/// + +/// flavor svelte + +```html + +``` + +`` provides two-way data binding using `bind`. + +```html + +``` + +/// + +### Props + +| Name | Type | Description | +| ----------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `date` | `Date` | Gets or sets the complete date. | +| `minDate` | `Date` | Gets or sets the earliest possible date to select. | +| `maxDate` | `Date` | Gets or sets the latest possible date to select. | +| `day` | `Number` | Gets or sets the day. | +| `month` | `Number` | Gets or sets the month. | +| `year` | `Number` | Gets or sets the year. | +| `iosPreferredDatePickerStyle` | `number` | Gets or set the UIDatePickerStyle of the date picker in iOS 13.4+. Defaults to 0.
Valid values are numbers:

`0 = automatic`: system picks the concrete style based on the current platform and date picker mode
`1 = wheels`: the date picker displays as a wheel picker
`2 = compact` : the date picker displays as a label that when tapped displays a calendar-style editor
`3 = inline` : the date pickers displays as an inline, editable field | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/datepicker) | + +### Events + +| Name | Description | +| ------------ | --------------------------------------- | +| `dateChange` | Emitted when the selected date changes. | + +### Native component + +| Android | iOS | +| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | +| [`android.widget.DatePicker`](https://developer.android.com/reference/android/widget/DatePicker.html) | [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker) | diff --git a/components/frame.md b/components/frame.md new file mode 100755 index 00000000..b847e6fc --- /dev/null +++ b/components/frame.md @@ -0,0 +1,192 @@ +--- +title: Frame +--- + +## Frame + +`` is a UI component used to display [``](/ui-and-styling.html#page) elements. Every app needs at least a single `` element, usually set as the root element. + +--- + +### A single root Frame + +/// flavor + +```js +new Vue({ + render: h => h('Frame', [h(HomePageComponent)]) +}) +``` + +/// + +### Multiple Frames + +If you need to create multiple frames, you can do so by wrapping them in a Layout, for example if you want to have 2 frames side-by-side + +/// flavor vue + +```html + + + + +``` + +/// + +/// flavor react + +```tsx + + + + +``` + +/// + +/// flavor svelte + +```html + + + + +``` + +/// + +#### Example: A frame with a default page + +/// flavor vue + +```html + + + + + + + +``` + +/// + +/// flavor react + +```tsx + + + + + + + +``` + +/// + +/// flavor svelte + +```html + + + + + + + +``` + +/// + +#### Example: A frame with a default page from an external component + +/// flavor vue + +```html + + + + + +``` + +```js +import Home from './Home' + +export default { + components: { + Home + } +} +``` + +/// + +/// flavor svelte + +```html + + + +``` + +```js +import Home from './Home.svelte' +``` + +/// + +/// flavor react + +```tsx +import HomePage from './HomePage' + +function AppContainer() { + return ( + + + + ) +} +``` + +/// + +### Props + +| Name | Type | Description | +| -------------- | ----------------------- | ---------------------------------------------------------------------- | +| `backStack` | `Array` | Gets the back stack of this instance. | +| `currentPage` | `Page` | Gets the Page instance the Frame is currently navigated to. | +| `currentEntry` | `NavigationEntry` | Gets the NavigationEntry instance the Frame is currently navigated to. | +| `animated` | `boolean` | Gets or sets if navigation transitions should be animated. | +| `transition` | `NavigationTransition` | Gets or sets the default navigation transition for this frame. | +| `transition` | `NavigationTransition` | Gets or sets the default navigation transition for this frame. | + +### Static Methods + +| Name | Type | Description | +| -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `getFrameById(id: string)` | `Frame` | Gets a frame by id. | +| `topmost()` | `Frame` | Gets the topmost frame in the frames stack. An application will typically has one frame instance. Multiple frames handle nested (hierarchical) navigation scenarios. | +| `goBack()` | | Navigates back using the navigation hierarchy (if any). Updates the Frame stack as needed. This method will start from the topmost Frame and will recursively search for an instance that has the canGoBack operation available. | + +### Instance Methods + +| Name | Type | Description | +| ---------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `goBack(to?: BackstackEntry)` | | Navigates to the previous entry (if any) in the back stack. | +| `canGoBack()` | `boolean` | Checks whether the goBack operation is available. | +| `navigate(pageModuleName: string)` | `boolean` | Navigates to a Page instance as described by the module name. This method will require the module and will check for a Page property in the exports of the module.
`pageModuleName:` The name of the module to require starting from the application root. For example if you want to navigate to page called "myPage.js" in a folder called "subFolder" and your root folder is "app" you can call navigate method like this:
`import { Frame }"@nativescript/core"; Frame.topmost().navigate("app/subFolder/myPage");` | + +### Native component + +| Android | iOS | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | +| [`org.nativescript.widgets.ContentLayout`](https://github.com/NativeScript/NativeScript/blob/master/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/ContentLayout.java) | [`UINavigationController`](https://developer.apple.com/documentation/uikit/uinavigationcontroller) | From fdf9f72762e07ec210320f15052daee09de8bab6 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Thu, 11 Aug 2022 12:08:06 +0200 Subject: [PATCH 086/104] Added and removed links --- .vitepress/config.js | 114 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 100 insertions(+), 14 deletions(-) diff --git a/.vitepress/config.js b/.vitepress/config.js index 7b5fbc8c..d5dca63d 100755 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -524,20 +524,6 @@ function getSidebar() { }, ], }, - { - text: 'UI', - children: [ - { - text: 'Components', - link: '/ui/components', - }, - { - text: 'Styling', - link: '/ui/styling', - }, - { text: 'Interaction', link: '/ui/interaction' }, - ], - }, { text: '@nativescript/core', children: [ @@ -744,10 +730,110 @@ function getComponentsSidebar() { { text: 'Components', children: [ + { + text: 'Styling', + link: '/components/styling', + }, + { + text: 'Interaction', + link: '/components/interaction', + }, { text: 'ActionBar', link: '/components/actionbar', }, + { + text: 'ActivityIndicator', + link: '/components/activityindicator', + }, + { + text: 'Button', + link: '/components/button', + }, + { + text: 'DatePicker', + link: '/components/datepicker', + }, + { + text: 'Frame', + link: '/components/frame', + }, + { + text: 'HtmlView', + link: '/components/htmlview', + }, + { + text: 'Image', + link: '/components/image', + }, + { + text: 'Label', + link: '/components/label', + }, + { + text: 'ListPicker', + link: '/components/listpicker', + }, + { + text: 'ListView', + link: '/components/listview', + }, + { + text: 'Page', + link: '/components/page', + }, + { + text: 'Placeholder', + link: '/components/placeholder', + }, + { + text: 'Progress', + link: '/components/progress', + }, + { + text: 'Repeator', + link: '/components/repeator', + }, + { + text: 'ScrollView', + link: '/components/scrollview', + }, + { + text: 'SearchBar', + link: '/components/searchbar', + }, + { + text: 'SegmentedBar', + link: '/components/segmentedbar', + }, + { + text: 'Slider', + link: '/components/slider', + }, + { + text: 'Switch', + link: '/components/switch', + }, + { + text: 'TabView', + link: '/components/tabview', + }, + { + text: 'TextField', + link: '/components/textfield', + }, + { + text: 'TextView', + link: '/components/textview', + }, + { + text: 'TimePicker', + link: '/components/timepicker', + }, + { + text: 'WebView', + link: '/components/webview', + }, ], }, ] From 6405afacf7926caed088daefe2837b041c4679d3 Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Thu, 11 Aug 2022 12:08:56 +0200 Subject: [PATCH 087/104] Moved from "ui" folder to "components" --- {ui => components}/interaction.md | 0 {ui => components}/styling.md | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename {ui => components}/interaction.md (100%) rename {ui => components}/styling.md (100%) diff --git a/ui/interaction.md b/components/interaction.md similarity index 100% rename from ui/interaction.md rename to components/interaction.md diff --git a/ui/styling.md b/components/styling.md similarity index 100% rename from ui/styling.md rename to components/styling.md From b46cee09519cc7e8a0d00bef83f7f1bc235468fe Mon Sep 17 00:00:00 2001 From: Nandee Tjihero Date: Sat, 13 Aug 2022 19:35:52 +0200 Subject: [PATCH 088/104] Created the files --- components/htmlview.md | 93 +++++++++ components/image.md | 272 ++++++++++++++++++++++++++ components/label.md | 170 +++++++++++++++++ components/listpicker.md | 127 +++++++++++++ components/listview.md | 381 +++++++++++++++++++++++++++++++++++++ components/page.md | 207 ++++++++++++++++++++ components/placeholder.md | 132 +++++++++++++ components/progress.md | 146 ++++++++++++++ components/repeater.md | 65 +++++++ components/scrollview.md | 154 +++++++++++++++ components/searchbar.md | 171 +++++++++++++++++ components/segmentedbar.md | 236 +++++++++++++++++++++++ components/slider.md | 119 ++++++++++++ components/switch.md | 115 +++++++++++ components/tabview.md | 320 +++++++++++++++++++++++++++++++ components/textfield.md | 170 +++++++++++++++++ components/textview.md | 228 ++++++++++++++++++++++ components/timepicker.md | 151 +++++++++++++++ components/webview.md | 92 +++++++++ 19 files changed, 3349 insertions(+) create mode 100755 components/htmlview.md create mode 100755 components/image.md create mode 100755 components/label.md create mode 100755 components/listpicker.md create mode 100755 components/listview.md create mode 100755 components/page.md create mode 100755 components/placeholder.md create mode 100755 components/progress.md create mode 100755 components/repeater.md create mode 100755 components/scrollview.md create mode 100755 components/searchbar.md create mode 100755 components/segmentedbar.md create mode 100755 components/slider.md create mode 100755 components/switch.md create mode 100755 components/tabview.md create mode 100755 components/textfield.md create mode 100755 components/textview.md create mode 100755 components/timepicker.md create mode 100755 components/webview.md diff --git a/components/htmlview.md b/components/htmlview.md new file mode 100755 index 00000000..c9696f87 --- /dev/null +++ b/components/htmlview.md @@ -0,0 +1,93 @@ +--- +title: HtmlView +--- + +## HtmlView + +`` is a UI component that lets you show static HTML content. + +See also: [WebView](#webview). + +--- + +/// flavor plain + +```xml + +``` + +```ts +import { HtmlView } from '@nativescript/core' + +export function onHtmlLoaded(args) { + const myHtmlView = args.object as HtmlView + myHtmlView.html = ` +

NativeScript HtmlView


+

This component accept simple HTML strings

` +} +``` + +/// + +/// flavor angular + +```html + +``` + +```ts +import { Component } from '@angular/core' + +@Component({ + moduleId: module.id, + templateUrl: './usage.component.html' +}) +export class HtmlViewUsageComponent { + htmlString: string + + constructor() { + this.htmlString = ` +

HtmlView demo in NativeScript App

+ ` + } +} +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +### Props + +| Name | Type | Description | +| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| `html` | `String` | The HTML content to be shown. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/htmlview) | + +### Native component + +| Android | iOS | +| ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | +| [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html) | [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview) | diff --git a/components/image.md b/components/image.md new file mode 100755 index 00000000..ec086b42 --- /dev/null +++ b/components/image.md @@ -0,0 +1,272 @@ +--- +title: Image +--- + +## Image + +`` is a UI component that shows an image from an [ImageSource](https://docs.nativescript.org/api-reference/classes/imagesource) or from a URL. + + + +::: tip Tip +When working with images following [the best practices](/performance.html#image-optimizations) is a must. +::: + +--- + +#### Example: Displaying an image from `App_Resources` + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Example: Displaying an image relative to the `app` directory + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Example: Displaying an image from a URL + +:::tip Note + +Setting `loadMode` to `async` will prevent freezing the UI on Android when loading photos async (e.g. from online API) + +::: + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Example: Displaying a `base64`-encoded image + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +/// + +/// flavor svelte + +```html + +``` + +/// + +#### Example: Image with CSS and an icon fonts + +/// flavor plain + +```xml + +``` + +/// + +/// flavor angular + +```html + +``` + +/// + +/// flavor react + +```tsx + +``` + +/// + +/// flavor vue + +```html + +``` + +:::warning Note + +In NativeScript-Vue, `.decode` is required for parsing properties that have HTML entities in them. + +::: + +/// + +/// flavor svelte + +```html + +``` + +/// + +### Props + +| Name | Type | Description | +| -------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `src` | `String` or [`ImageSource`](https://docs.nativescript.org/api-reference/classes/imagesource) | Gets or sets the source of the image as a URL or an image source. If you use the new font:// icon protocol in {N} 6.2, make sure you add .decode to the name of the property - e.g. `src.decode="font://"` | +| `imageSource` | [`ImageSource`](https://docs.nativescript.org/api-reference/classes/imagesource) | Gets or sets the image source of the image. | +| `tintColor` | `Color` | (Style property) Sets a color to tint template images. | +| `stretch` | `ImageStretch` | (Style property) Gets or sets the way the image is resized to fill its allocated space.
Valid values: `none`, `aspectFill`, `aspectFit`, or `fill`.
For more information, see [ImageStretch](https://docs.nativescript.org/api-reference/modules/coretypes.imagestretch). | +| `loadMode` | | Gets or sets the loading strategy for the images on the local file system.
Valid values: `sync` or `async`.
Default value: `async`.
For more information, see [loadMode](https://docs.nativescript.org/api-reference/classes/image#loadmode). | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/image) | + + + +### Native component + +| Android | iOS | +| ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | +| [`android.widget.ImageView`](https://developer.android.com/reference/android/widget/ImageView) | [`UIImageView`](https://developer.apple.com/documentation/uikit/uiimageview) | diff --git a/components/label.md b/components/label.md new file mode 100755 index 00000000..0ca88781 --- /dev/null +++ b/components/label.md @@ -0,0 +1,170 @@ +--- +title: Label +--- + +## Label + +`