diff --git a/app/ng-framework-modules-category/application-settings/application-settings-examples.component.ts b/app/ng-framework-modules-category/application-settings/application-settings-examples.component.ts index 191b85d5..867d3afb 100644 --- a/app/ng-framework-modules-category/application-settings/application-settings-examples.component.ts +++ b/app/ng-framework-modules-category/application-settings/application-settings-examples.component.ts @@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Working with values", "/application-settings/values"), + new Link("Usage", "/application-settings/usage"), ]; @Component({ diff --git a/app/ng-framework-modules-category/application-settings/application-settings-examples.module.ts b/app/ng-framework-modules-category/application-settings/application-settings-examples.module.ts index 7265369f..7fd5b0f4 100644 --- a/app/ng-framework-modules-category/application-settings/application-settings-examples.module.ts +++ b/app/ng-framework-modules-category/application-settings/application-settings-examples.module.ts @@ -2,7 +2,7 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { ApplicationSettingsExamplesComponent } from "./application-settings-examples.component"; -import { ValuesExampleComponent } from "./values/values.component"; +import { UsageComponent } from "./usage/usage.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -11,9 +11,9 @@ export const routerConfig = [ component: ApplicationSettingsExamplesComponent }, { - path: "values", - component: ValuesExampleComponent, - data: { title: "Check The Target Platform" } + path: "usage", + component: UsageComponent, + data: { title: "Usage" } } ]; @@ -25,7 +25,7 @@ export const routerConfig = [ NativeScriptRouterModule, NativeScriptRouterModule.forChild(routerConfig) ], - declarations: [ApplicationSettingsExamplesComponent, ValuesExampleComponent] + declarations: [ApplicationSettingsExamplesComponent, UsageComponent] }) export class ApplicationSettingsExamplesModule { diff --git a/app/ng-framework-modules-category/application-settings/end.md b/app/ng-framework-modules-category/application-settings/end.md index fdeaafe2..0713df8b 100644 --- a/app/ng-framework-modules-category/application-settings/end.md +++ b/app/ng-framework-modules-category/application-settings/end.md @@ -1,2 +1,28 @@ +## Methods -**API Reference for** [Application Settings](https://docs.nativescript.org/api-reference/modules/_application_settings_.html) \ No newline at end of file +| Name | Type | Description | +|----------|---------|----------------| +| `clear` | `void` | Removes all stored values. | +| `flush` | `boolean` | Flush all changes to disk synchronously. The return flag indicates if changes were saved successfully to disk. | +| `getAllKeys` | `Array` | Array containing all stored keys | +| `getBoolean(key: string, deafaultValue?: 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. | +| `getNumber(key: string, deafaultValue?: number)` | `number` | Gets a value (if existing) for a key as a Number Object. A default value can be provided in case there is no existing value | +| `getString(key: string, deafaultValue?: 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. | +| `hasKey(key: string)` | `boolean` | Checks whether such a key exists. | +| `remove` | `void` | Removes an entry by its key name. | +| `setBoolean(key: string, value: boolean)` | `void` | Sets a Boolean Object for a key. | +| `setNumber(key: string, value: number)` | `void` | Sets a Number Object for a key. | +| `setString(key: string, value: string)` | `void` | Sets a String Object for a key. | + + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/application-settings](https://docs.nativescript.org/api-reference/modules/_application_settings_.html) | `Module` | + +## Native Component + +| Android | iOS | +|:----------------------|:---------| +| [android.content.SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences.html) | [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults) | diff --git a/app/ng-framework-modules-category/application-settings/overview.md b/app/ng-framework-modules-category/application-settings/overview.md index e61b3bad..ad97a027 100644 --- a/app/ng-framework-modules-category/application-settings/overview.md +++ b/app/ng-framework-modules-category/application-settings/overview.md @@ -1,2 +1 @@ -The Application settings allows you to save and restore any kind of information related to your application. -Using application settings methods requires to load "Application Settings" module. \ No newline at end of file +The `application-settings` module allows you to save and restore information related to your application. \ No newline at end of file diff --git a/app/ng-framework-modules-category/application-settings/usage/article.md b/app/ng-framework-modules-category/application-settings/usage/article.md new file mode 100644 index 00000000..7035d0a0 --- /dev/null +++ b/app/ng-framework-modules-category/application-settings/usage/article.md @@ -0,0 +1,3 @@ +Basic usage of the `application-settings` module in a component: + + diff --git a/app/ng-framework-modules-category/application-settings/usage/usage.component.html b/app/ng-framework-modules-category/application-settings/usage/usage.component.html new file mode 100644 index 00000000..5aeeabad --- /dev/null +++ b/app/ng-framework-modules-category/application-settings/usage/usage.component.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/ng-framework-modules-category/application-settings/usage/usage.component.ts b/app/ng-framework-modules-category/application-settings/usage/usage.component.ts new file mode 100644 index 00000000..e4b2c62b --- /dev/null +++ b/app/ng-framework-modules-category/application-settings/usage/usage.component.ts @@ -0,0 +1,45 @@ +// >> app-settings-code +import { Component } from "@angular/core"; +import { + getBoolean, + setBoolean, + getNumber, + setNumber, + getString, + setString, + hasKey, + remove, + clear +} from "tns-core-modules/application-settings"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html" +}) +export class UsageComponent { + + constructor() { + setBoolean("isTurnedOn", true); + setString("username", "Wolfgang"); + setNumber("locationX", 54.321); + + const isTurnedOn: boolean = getBoolean("isTurnedOn"); + const username: string = getString("username"); + const locationX: number = getNumber("locationX"); + + // Will return "No string value" if there is no value for "noSuchKey" + const someKey: string = getString("noSuchKey", "No string value"); + + // Will return false if there is no key with name "noSuchKey" + let isKeExisting: boolean = hasKey("noSuchKey"); + } + + onClearß() { + // Removing a single entry via its key name + remove("isTurnedOn"); + + // Clearing the whole application-settings for this app + clear(); + } +} +// << app-settings-code diff --git a/app/ng-framework-modules-category/application-settings/values/article.md b/app/ng-framework-modules-category/application-settings/values/article.md deleted file mode 100644 index 17edfba4..00000000 --- a/app/ng-framework-modules-category/application-settings/values/article.md +++ /dev/null @@ -1,28 +0,0 @@ -Using application settings methods requires to load "application settings" module. - -Basic usage of the `application-settings` module in a component: - - -Set and get boolean value and provide default value in case it is not set - - -Set and get string value - - -Set and get numeric value. - - -Reading values that are not set before while providing default value - - -Reading values that are not set before not providing default value - - -Checking for existence of value for key - - -Removing value for key - - -Removing all values - \ No newline at end of file diff --git a/app/ng-framework-modules-category/application-settings/values/values.component.html b/app/ng-framework-modules-category/application-settings/values/values.component.html deleted file mode 100644 index 1f17e55e..00000000 --- a/app/ng-framework-modules-category/application-settings/values/values.component.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-framework-modules-category/application-settings/values/values.component.ts b/app/ng-framework-modules-category/application-settings/values/values.component.ts deleted file mode 100644 index abd0b747..00000000 --- a/app/ng-framework-modules-category/application-settings/values/values.component.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { Component } from "@angular/core"; -// >> app-settings-code -import { - getBoolean, - setBoolean, - getNumber, - setNumber, - getString, - setString, - hasKey, - remove, - clear -} from "tns-core-modules/application-settings"; -// << app-settings-code - -@Component({ - moduleId: module.id, - templateUrl: "./values.component.html" -}) -export class ValuesExampleComponent { - public isTurnedOn: boolean; - public username: string; - public locationX: number; - public someKey: string; - public noBoolKey: boolean; - - constructor() { - // >> app-settings-bool-code - setBoolean("isTurnedOn", true); - this.isTurnedOn = getBoolean("isTurnedOn", true); - // << app-settings-bool-code - - // >> app-settings-string-code - setString("username", "Wolfgang"); - this.username = getString("username"); - // << app-settings-string-code - - // >> app-settings-number-code - setNumber("locationX", 54.321); - this.locationX = parseFloat(getNumber("locationX").toFixed(3)); - // << app-settings-number-code - - // >> app-settings-default-value-code - // will return "No string value" if there is no value for "noSuchKey" - this.someKey = getString("noSuchKey", "No string value"); - // << app-settings-default-value-code - - // >> app-settings-no-value-code - // will return undefined if there is no value for "noSuchKey" - let defaultValue = getString("noSuchKey"); - console.log(defaultValue); - // << app-settings-no-value-code - - // >> app-settings-no-key-code - // will return false if there is no value for "noBoolKey" - this.noBoolKey = hasKey("noBoolKey"); - // << app-settings-no-key-code - } - - public onSetSettings() { - setBoolean("isTurnedOn", true); - this.isTurnedOn = getBoolean("isTurnedOn"); - - setString("username", "Wolfgang"); - this.username = getString("username"); - - setNumber("locationX", 54.321); - this.locationX = parseFloat(getNumber("locationX").toFixed(2)); - - setString("noSuchKey", "New Value!"); - this.someKey = getString("noSuchKey", "No string value"); - - setBoolean("noBoolKey", true); - this.noBoolKey = hasKey("noBoolKey"); - } - - public onClearSettings() { - // >> app-settings-remove-key-code - remove("isTurnedOn"); - // << app-settings-remove-key-code - - // >> app-settings-remove-all-code - clear(); - // << app-settings-remove-all-code - - setBoolean("isTurnedOn", false); - this.isTurnedOn = getBoolean("isTurnedOn", false); - - setString("username", "Default name"); - this.username = getString("username"); - - setNumber("locationX", 0.00); - this.locationX = parseFloat(getNumber("locationX").toFixed(2)); - - this.someKey = getString("noSuchKey", "No string value"); - this.noBoolKey = hasKey("noBoolKey"); - } -} diff --git a/app/ng-framework-modules-category/color/color-examples.component.ts b/app/ng-framework-modules-category/color/color-examples.component.ts index 1398830e..ba59dec6 100644 --- a/app/ng-framework-modules-category/color/color-examples.component.ts +++ b/app/ng-framework-modules-category/color/color-examples.component.ts @@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Creating Colors", "/color/creating-colors"), + new Link("Usage", "/color/usage"), ]; @Component({ diff --git a/app/ng-framework-modules-category/color/color-examples.module.ts b/app/ng-framework-modules-category/color/color-examples.module.ts index 1ed01690..1681965b 100644 --- a/app/ng-framework-modules-category/color/color-examples.module.ts +++ b/app/ng-framework-modules-category/color/color-examples.module.ts @@ -3,8 +3,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { NativeScriptFormsModule } from "nativescript-angular/forms"; import { ColorExamplesComponent } from "./color-examples.component"; -import { CreatingColorsExampleComponent } from "./creating-colors/creating-colors.component"; -import { HexPipe } from "./creating-colors/creating-colors.component"; +import { UsageComponent } from "./usage/usage.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -13,9 +12,9 @@ export const routerConfig = [ component: ColorExamplesComponent }, { - path: "creating-colors", - component: CreatingColorsExampleComponent, - data: { title: "Creating colors" } + path: "usage", + component: UsageComponent, + data: { title: "Usage" } } ]; @@ -28,7 +27,7 @@ export const routerConfig = [ NativeScriptFormsModule, NativeScriptRouterModule.forChild(routerConfig) ], - declarations: [HexPipe, ColorExamplesComponent, CreatingColorsExampleComponent] + declarations: [ColorExamplesComponent, UsageComponent] }) export class ColorExamplesModule { diff --git a/app/ng-framework-modules-category/color/creating-colors/article.md b/app/ng-framework-modules-category/color/creating-colors/article.md deleted file mode 100644 index 1937ce5a..00000000 --- a/app/ng-framework-modules-category/color/creating-colors/article.md +++ /dev/null @@ -1,14 +0,0 @@ -Using color module - - -Creating a Color from a hex value. - - -Creating a Color from a short hex value. - - -Creating a Color from four ARGB values (alpha, red, green, blue) - - -Creating a Color from a single ARGB value - \ No newline at end of file diff --git a/app/ng-framework-modules-category/color/creating-colors/creating-colors.component.html b/app/ng-framework-modules-category/color/creating-colors/creating-colors.component.html deleted file mode 100644 index 72532ca3..00000000 --- a/app/ng-framework-modules-category/color/creating-colors/creating-colors.component.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-framework-modules-category/color/creating-colors/creating-colors.component.ts b/app/ng-framework-modules-category/color/creating-colors/creating-colors.component.ts deleted file mode 100644 index 02f645cd..00000000 --- a/app/ng-framework-modules-category/color/creating-colors/creating-colors.component.ts +++ /dev/null @@ -1,85 +0,0 @@ -// tslint:disable:no-bitwise -import { Component, PipeTransform, Pipe } from "@angular/core"; -// >> creating-colors-code -import { Color } from "tns-core-modules/color"; -// << creating-colors-code - -@Pipe({ - name: "sdkHex" -}) -export class HexPipe implements PipeTransform { - transform(value: number): any { - value = Math.floor(value); - let res = value.toString(16); - if (res.length === 1) { - res = "0" + res; - } - return res; - } -} - -@Component({ - moduleId: module.id, - templateUrl: "./creating-colors.component.html" -}) -export class CreatingColorsExampleComponent { - public redValue: number = 0; - public greenValue: number = 0; - public blueValue: number = 0; - - public changeColor(value: string) { - if (value[0] !== "#") { - value = "#" + value; - } - let isValidHexColor = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value); - - if (isValidHexColor) { - let rgbColors = this.convertHex(value); - this.redValue = rgbColors[0]; - this.greenValue = rgbColors[1]; - this.blueValue = rgbColors[2]; - } else { - console.log("Invalid hex value entered"); - } - } - - convertHex(hex) { - hex = hex.replace("#", ""); - - if (hex.length !== 6) { - hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; - } - - let red = parseInt(hex.substring(0, 2), 16); - let green = parseInt(hex.substring(2, 4), 16); - let blue = parseInt(hex.substring(4, 6), 16); - - let colorRGB = [red, green, blue]; - return colorRGB; - } -} - -export function codeSnippets() { - // >> creating-hex-color-code - let colorHex = new Color("#FF00CC"); - // << creating-hex-color-code - console.log(colorHex); - - // >> creating-short-hex-color-code - let colorShortHex = new Color("#F0C"); - // << creating-short-hex-color-code - console.log(colorShortHex); - - // >> creating-argb-color - // Creates the color with 100 alpha, 255 red, 100 green, 100 blue - let colorARGB = new Color(100, 255, 100, 100); - // << creating-argb-color - console.log(colorARGB); - - // >> creating-single-argb-color - // Creates the color with 100 alpha, 100 red, 100 green, 100 blue - let argb = (100 << 24) | (100 << 16) | (100 << 8) | 100; - let colorSingleARGB = new Color(argb); - // << creating-single-argb-color - console.log(colorSingleARGB); -} diff --git a/app/ng-framework-modules-category/color/end.md b/app/ng-framework-modules-category/color/end.md index 1c2e7ef0..c8ac13f2 100644 --- a/app/ng-framework-modules-category/color/end.md +++ b/app/ng-framework-modules-category/color/end.md @@ -1,8 +1,13 @@ +## API References -**API Reference for the** [Color Class](https://docs.nativescript.org/api-reference/classes/_color_.color.html) +| Name | Type | +|----------|---------| +| [tns-core-modules/color](https://docs.nativescript.org/api-reference/modules/_color_) | `Module` | +| [Color](https://docs.nativescript.org/api-reference/classes/_color_.color.html) | `Class` | +| [tns-core-modules/known-colors](https://docs.nativescript.org/api-reference/modules/_color_known_colors_) | `Module` | -**Native Component** +## Native Component | Android | iOS | |:----------------------|:---------| -| [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color.html) | [UIColor](https://developer.apple.com/reference/uikit/uicolor) | \ No newline at end of file +| [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color.html) | [UIColor](https://developer.apple.com/reference/uikit/uicolor) | diff --git a/app/ng-framework-modules-category/color/usage/article.md b/app/ng-framework-modules-category/color/usage/article.md new file mode 100644 index 00000000..7fb87c8e --- /dev/null +++ b/app/ng-framework-modules-category/color/usage/article.md @@ -0,0 +1 @@ + diff --git a/app/ng-framework-modules-category/color/usage/usage.component.html b/app/ng-framework-modules-category/color/usage/usage.component.html new file mode 100644 index 00000000..46aa7882 --- /dev/null +++ b/app/ng-framework-modules-category/color/usage/usage.component.html @@ -0,0 +1,3 @@ + + + diff --git a/app/ng-framework-modules-category/color/usage/usage.component.ts b/app/ng-framework-modules-category/color/usage/usage.component.ts new file mode 100644 index 00000000..a8a24d92 --- /dev/null +++ b/app/ng-framework-modules-category/color/usage/usage.component.ts @@ -0,0 +1,37 @@ +// tslint:disable:no-bitwise +// >> creating-colors-code +import { Component } from "@angular/core"; +import { Color } from "tns-core-modules/color"; +import * as colors from "tns-core-modules/color/known-colors"; +import { isKnownName } from "tns-core-modules/color/known-colors"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html" +}) +export class UsageComponent { + + createColor() { + // Using hex values to create color; + let colorHex = new Color("#FF00CC"); + let colorShortHex = new Color("#F0C"); + + // Creates the color with 100 alpha, 255 red, 100 green, 100 blue + let colorARGB = new Color(100, 255, 100, 100); + + // Creates the color with 100 alpha, 100 red, 100 green, 100 blue + let argb = (100 << 24) | (100 << 16) | (100 << 8) | 100; + let colorSingleARGB = new Color(argb); + + // Using string values to create colors + let namedColor = "orangered"; + let isKnown: boolean = isKnownName(namedColor); + if (isKnown) { + let colorName = new Color(namedColor); + } + + // Using supported known colors from tns-core-modules/color/known-colors + let colorKnownName = new Color(colors.OrangeRed); + } +} +// << creating-colors-code diff --git a/app/ng-ui-widgets-category/slider/usage/usage.component.ts b/app/ng-ui-widgets-category/slider/usage/usage.component.ts index a210c801..bb9ca628 100644 --- a/app/ng-ui-widgets-category/slider/usage/usage.component.ts +++ b/app/ng-ui-widgets-category/slider/usage/usage.component.ts @@ -9,7 +9,7 @@ import { Slider } from "tns-core-modules/ui/slider"; export class UsageComponent { onSliderValueChange(args) { let slider = args.object; - console.log(`Slider new value ${args.newValue}`); + console.log(`Slider new value ${args.value}`); } } // << basic-slider-tsc