From 7ec3e1e617b91a8a0bb9d53c27299fc4c4a1b04d Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 21 Oct 2019 13:03:17 +0300 Subject: [PATCH 1/4] docs: file system revamp --- .../connectivity/end.md | 2 +- .../connectivity/usage/usage.component.ts | 10 +-- .../file-system/create/article.md | 4 - .../file-system/delete/article.md | 8 -- .../file-system/delete/delete.component.ts | 12 +-- .../file-system/end.md | 86 ++++++++++++++++++- .../file-system-examples.component.ts | 2 +- .../file-system-examples.module.ts | 6 +- .../file-system/overview.md | 2 +- .../file-system/paths/article.md | 17 ---- .../file-system/paths/paths.component.ts | 30 +++---- .../file-system/read/article.md | 23 ----- .../file-system/read/read.component.ts | 38 ++++---- .../file-system/update/article.md | 8 -- .../file-system/update/update.component.ts | 10 +-- .../file-system/usage/article.md | 55 ++++++++++++ .../usage.component.html} | 0 .../usage.component.ts} | 4 +- 18 files changed, 195 insertions(+), 122 deletions(-) delete mode 100644 app/ng-framework-modules-category/file-system/create/article.md delete mode 100644 app/ng-framework-modules-category/file-system/delete/article.md delete mode 100644 app/ng-framework-modules-category/file-system/paths/article.md delete mode 100644 app/ng-framework-modules-category/file-system/read/article.md delete mode 100644 app/ng-framework-modules-category/file-system/update/article.md create mode 100644 app/ng-framework-modules-category/file-system/usage/article.md rename app/ng-framework-modules-category/file-system/{create/create.component.html => usage/usage.component.html} (100%) rename app/ng-framework-modules-category/file-system/{create/create.component.ts => usage/usage.component.ts} (90%) diff --git a/app/ng-framework-modules-category/connectivity/end.md b/app/ng-framework-modules-category/connectivity/end.md index c05cc0de..ed38e69c 100644 --- a/app/ng-framework-modules-category/connectivity/end.md +++ b/app/ng-framework-modules-category/connectivity/end.md @@ -11,7 +11,7 @@ | Name | Type | |----------|---------| | [tns-core-modules/connectivity](https://docs.nativescript.org/api-reference/modules/_connectivity_.html) | `Module` | -| [connectionTypoe](https://docs.nativescript.org/api-reference/enums/_connectivity_.connectiontype) | `Enum` | +| [connectionType](https://docs.nativescript.org/api-reference/enums/_connectivity_.connectiontype) | `Enum` | ## Native Component diff --git a/app/ng-framework-modules-category/connectivity/usage/usage.component.ts b/app/ng-framework-modules-category/connectivity/usage/usage.component.ts index 7b8456c4..609d86f7 100644 --- a/app/ng-framework-modules-category/connectivity/usage/usage.component.ts +++ b/app/ng-framework-modules-category/connectivity/usage/usage.component.ts @@ -1,9 +1,9 @@ // >> connectivity-start-code import { Component, OnInit, OnDestroy } from "@angular/core"; -import { - getConnectionType, - startMonitoring, - stopMonitoring +import { + getConnectionType, + startMonitoring, + stopMonitoring } from "tns-core-modules/connectivity"; import * as connectivityModule from "tns-core-modules/connectivity"; @@ -66,4 +66,4 @@ export class UsageComponent implements OnInit, OnDestroy { stopMonitoring(); } } -// << connectivity-start-code \ No newline at end of file +// << connectivity-start-code diff --git a/app/ng-framework-modules-category/file-system/create/article.md b/app/ng-framework-modules-category/file-system/create/article.md deleted file mode 100644 index 3ef23dac..00000000 --- a/app/ng-framework-modules-category/file-system/create/article.md +++ /dev/null @@ -1,4 +0,0 @@ - - -Create folders, files and file content - diff --git a/app/ng-framework-modules-category/file-system/delete/article.md b/app/ng-framework-modules-category/file-system/delete/article.md deleted file mode 100644 index abc74012..00000000 --- a/app/ng-framework-modules-category/file-system/delete/article.md +++ /dev/null @@ -1,8 +0,0 @@ -Removing a File - - -Removing a Folder - - -Clearing the Contents of a Folder - diff --git a/app/ng-framework-modules-category/file-system/delete/delete.component.ts b/app/ng-framework-modules-category/file-system/delete/delete.component.ts index b0c06901..6444b49a 100644 --- a/app/ng-framework-modules-category/file-system/delete/delete.component.ts +++ b/app/ng-framework-modules-category/file-system/delete/delete.component.ts @@ -1,6 +1,6 @@ import { Component } from "@angular/core"; // >> fs-delete-import-code -import * as fs from "tns-core-modules/file-system"; +import { File, Folder, knownFolders } from "tns-core-modules/file-system"; // << fs-delete-import-code @Component({ moduleId: module.id, @@ -8,14 +8,14 @@ import * as fs from "tns-core-modules/file-system"; }) export class DeleteExampleComponent { - public documents: fs.Folder; - public file: fs.File; - public myFolder: fs.Folder; + public documents: Folder; + public file: File; + public myFolder: Folder; public resultMessage: string = ""; constructor() { - this.documents = fs.knownFolders.documents(); + this.documents = knownFolders.documents(); this.myFolder = this.documents.getFolder("TestFolderName"); this.file = this.myFolder.getFile("TestFileName.txt"); } @@ -70,7 +70,7 @@ export class DeleteExampleComponent { } public onReset() { - this.documents = fs.knownFolders.documents(); + this.documents = knownFolders.documents(); this.myFolder = this.documents.getFolder("TestFolderName"); this.file = this.myFolder.getFile("TestFileName.txt"); this.resultMessage = "Successfully reset!"; diff --git a/app/ng-framework-modules-category/file-system/end.md b/app/ng-framework-modules-category/file-system/end.md index 334c8207..f73bfa91 100644 --- a/app/ng-framework-modules-category/file-system/end.md +++ b/app/ng-framework-modules-category/file-system/end.md @@ -1,5 +1,83 @@ +## File Properties + +| Name | Type | Description | +|----------|---------|----------------| +| `extension` | `string` | Gets the extension of the file. | +| `isLocked` | `boolean` | Gets a value indicating whether the file is currently locked, meaning a background operation associated with this file is running. | +| `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.| +| `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 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` | `void` | Removes (deletes) the current Entity from the file system. | +| `removeSync(onError?: function)` | `void` | Removes (deletes) the current Entity from the file system synchronously.| +| `rename(newName: string)` | `Promise` | Renames the current entity using the specified name. | +| `renameSync(newName: string, onError?: function)` | `void` | Renames the current entity synchronously, using the specified name. | +| `write(newName: string)` | `Promise` | Writes the provided binary content to the file. | +| `writeSync(newName: string, onError?: function)` | `void` | Writes the provided binary content to the file synchronously. | +| `writeText(encoding?: string)` | `Promise` | 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` | `removeSync(onError?: function)` | 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 | +|----------|---------| +| [tns-core-modules/file-system](https://docs.nativescript.org/api-reference/modules/_file_system_.html) | `Module` | +| [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` | -**API Reference for the** [File System Module](https://docs.nativescript.org/api-reference/modules/_file_system_.html) -**API Reference for the** [File Class](https://docs.nativescript.org/api-reference/classes/_file_system_.file.html) -**API Reference for the** [FileSystemEntity Class](https://docs.nativescript.org/api-reference/classes/_file_system_.filesystementity.html) -**API Reference for the** [Folder Class](https://docs.nativescript.org/api-reference/classes/_file_system_.folder.html) diff --git a/app/ng-framework-modules-category/file-system/file-system-examples.component.ts b/app/ng-framework-modules-category/file-system/file-system-examples.component.ts index 1eb4c1d5..845a9d8c 100644 --- a/app/ng-framework-modules-category/file-system/file-system-examples.component.ts +++ b/app/ng-framework-modules-category/file-system/file-system-examples.component.ts @@ -3,7 +3,7 @@ import { Link } from "./../../link"; let menuLinks = [ new Link("Paths", "/file-system/paths"), - new Link("Create", "/file-system/create"), + new Link("Create", "/file-system/usage"), new Link("Read", "/file-system/read"), new Link("Update", "/file-system/update"), new Link("Delete", "/file-system/delete") diff --git a/app/ng-framework-modules-category/file-system/file-system-examples.module.ts b/app/ng-framework-modules-category/file-system/file-system-examples.module.ts index a5a55c79..67e64f8e 100644 --- a/app/ng-framework-modules-category/file-system/file-system-examples.module.ts +++ b/app/ng-framework-modules-category/file-system/file-system-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 { FileSystemExamplesComponent } from "./file-system-examples.component"; -import { CreateExampleComponent } from "./create/create.component"; +import { CreateExampleComponent } from "./usage/usage.component"; import { DeleteExampleComponent } from "./delete/delete.component"; import { PathsExampleComponent } from "./paths/paths.component"; import { ReadExampleComponent } from "./read/read.component"; @@ -15,9 +15,9 @@ export const routerConfig = [ component: FileSystemExamplesComponent }, { - path: "create", + path: "usage", component: CreateExampleComponent, - data: { title: "Create" } + data: { title: "Usage" } }, { path: "delete", diff --git a/app/ng-framework-modules-category/file-system/overview.md b/app/ng-framework-modules-category/file-system/overview.md index 7000525d..3c30e81f 100644 --- a/app/ng-framework-modules-category/file-system/overview.md +++ b/app/ng-framework-modules-category/file-system/overview.md @@ -1,2 +1,2 @@ -File System module provides high-level abstractions for file system entities +The File System module provides high-level abstractions for file system entities such as files, folders, known folders, paths, separators, etc. diff --git a/app/ng-framework-modules-category/file-system/paths/article.md b/app/ng-framework-modules-category/file-system/paths/article.md deleted file mode 100644 index 7a256661..00000000 --- a/app/ng-framework-modules-category/file-system/paths/article.md +++ /dev/null @@ -1,17 +0,0 @@ - - -Normalize a Path - - -Path Join -Concatenate a path to a file by providing multiple path arguments. - - -Get the Path Separator - - -Get or Create a File With Path - - -Get or Create a Folder With Path - \ No newline at end of file diff --git a/app/ng-framework-modules-category/file-system/paths/paths.component.ts b/app/ng-framework-modules-category/file-system/paths/paths.component.ts index def34d32..c4f5f720 100644 --- a/app/ng-framework-modules-category/file-system/paths/paths.component.ts +++ b/app/ng-framework-modules-category/file-system/paths/paths.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from "@angular/core"; // >> fs-paths-import-code -import * as fs from "tns-core-modules/file-system"; +import { knownFolders, path, File, Folder } from "tns-core-modules/file-system"; // << fs-paths-import-code @Component({ @@ -18,42 +18,42 @@ export class PathsExampleComponent implements OnInit { ngOnInit() { // >> fs-paths-normalize-code - let documentsFolder = fs.knownFolders.documents(); - let currentAppFolder = fs.knownFolders.currentApp(); - let tempFolder = fs.knownFolders.temp(); + let documentsFolder = knownFolders.documents(); + let currentAppFolder = knownFolders.currentApp(); + let tempFolder = knownFolders.temp(); let testPath = "///test.txt"; // Get a normalized path such as /test.txt from ///test.txt - this.documents = fs.path.normalize(documentsFolder.path + testPath); - this.currentApp = fs.path.normalize(currentAppFolder.path + testPath); - this.temp = fs.path.normalize(tempFolder.path + testPath); + this.documents = path.normalize(documentsFolder.path + testPath); + this.currentApp = path.normalize(currentAppFolder.path + testPath); + this.temp = path.normalize(tempFolder.path + testPath); // << fs-paths-normalize-code // >> fs-paths-join-code // Generate a path like /myFiles/test.txt - documentsFolder = fs.knownFolders.documents(); - let filePath = fs.path.join(documentsFolder.path, "myFiles", "test.txt"); + documentsFolder = knownFolders.documents(); + let filePath = path.join(documentsFolder.path, "myFiles", "test.txt"); // << fs-paths-join-code console.log(filePath); // >> fs-paths-separator-code // An OS dependent path separator, "\" or "/". - let separator = fs.path.separator; + let separator = path.separator; // << fs-paths-separator-code console.log(separator); // >> fs-paths-create-folder-code - let folderPath = fs.path.join(fs.knownFolders.documents().path, "music"); - let folder = fs.Folder.fromPath(folderPath); + let folderPath = path.join(knownFolders.documents().path, "music"); + let folder = Folder.fromPath(folderPath); // << fs-paths-create-folder-code console.log(folder); } public onSaveContentToFile() { // >> fs-paths-create-file-code - let documentsFolder = fs.knownFolders.documents(); - let path = fs.path.join(documentsFolder.path, "FileFromPath.txt"); - let file = fs.File.fromPath(path); + let documentsFolder = knownFolders.documents(); + let myPath = path.join(documentsFolder.path, "FileFromPath.txt"); + let file = File.fromPath(myPath); // Writing text to the file. file.writeText(this.textContentToBeSaved) diff --git a/app/ng-framework-modules-category/file-system/read/article.md b/app/ng-framework-modules-category/file-system/read/article.md deleted file mode 100644 index b8745f56..00000000 --- a/app/ng-framework-modules-category/file-system/read/article.md +++ /dev/null @@ -1,23 +0,0 @@ - - - -Reading from a File - - -Reading binary data from a File - - -Writing binary data to a File - - -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. - - -Checking if a File Exists - - -Checking if a Folder Exists - \ No newline at end of file diff --git a/app/ng-framework-modules-category/file-system/read/read.component.ts b/app/ng-framework-modules-category/file-system/read/read.component.ts index 2946a0a2..4078311d 100644 --- a/app/ng-framework-modules-category/file-system/read/read.component.ts +++ b/app/ng-framework-modules-category/file-system/read/read.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from "@angular/core"; import * as imageSource from "tns-core-modules/image-source"; // >> fs-read-import-code -import * as fs from "tns-core-modules/file-system"; +import { knownFolders, path, File, Folder } from "tns-core-modules/file-system"; // << fs-read-import-code @Component({ @@ -14,10 +14,10 @@ export class ReadExampleComponent implements OnInit { public fileName: string; public fileTextContent: string; public writtenContent: string; - public documents: fs.Folder; - public folder: fs.Folder; - public file: fs.File; - public imageFile: fs.File; + public documents: Folder; + public folder: Folder; + public file: File; + public imageFile: File; public binarySource: string; public folderEntities: Array = []; @@ -28,7 +28,7 @@ export class ReadExampleComponent implements OnInit { "Open source framework for building truly native mobile apps" + "with Angular, TypeScript or JavaScript."; - this.documents = fs.knownFolders.documents(); + this.documents = knownFolders.documents(); this.folder = this.documents.getFolder(this.folderName); this.file = this.folder.getFile(this.fileName); @@ -47,7 +47,7 @@ export class ReadExampleComponent implements OnInit { }); // >> fs-folder-content-code - this.documents = fs.knownFolders.documents(); + this.documents = knownFolders.documents(); this.documents.getEntities() .then(entities => { // entities is array with the document's files and folders. @@ -66,15 +66,15 @@ export class ReadExampleComponent implements OnInit { // << fs-folder-content-code // >> fs-file-exists-check-code - this.documents = fs.knownFolders.documents(); - let path = fs.path.join(this.documents.path, "Text.txt"); - let exists = fs.File.exists(path); + this.documents = knownFolders.documents(); + let myPath = path.join(this.documents.path, "Text.txt"); + let exists = File.exists(myPath); console.log("Does Text.txt exists: " + exists); // << fs-file-exists-check-code // >> fs-folder-exists-check-code - let temp = fs.knownFolders.temp(); - let tempExists = fs.Folder.exists(temp.path); + let temp = knownFolders.temp(); + let tempExists = Folder.exists(temp.path); console.log("Does temp folder exists: " + tempExists); // << fs-folder-exists-check-code } @@ -82,12 +82,12 @@ export class ReadExampleComponent implements OnInit { public onReadSync() { // >> fs-read-sync-code let image = imageSource.fromResource("icon"); - let folder = fs.knownFolders.documents(); - let path = fs.path.join(folder.path, "Test.png"); - let saved = image.saveToFile(path, "png"); + let folder = knownFolders.documents(); + let myPath = path.join(folder.path, "Test.png"); + let saved = image.saveToFile(myPath, "png"); if (saved) { - this.imageFile = fs.File.fromPath(path); + this.imageFile = File.fromPath(myPath); this.binarySource = this.imageFile.readSync(err => { console.log("Error:" + err); }); console.log(this.binarySource); // << fs-read-sync-code @@ -105,12 +105,12 @@ export class ReadExampleComponent implements OnInit { class FolderEntity { private name: string; - private path: string; + private myPath: string; private lastModified: string; - constructor(name: string, path: string, lastModified: string) { + constructor(name: string, myPath: string, lastModified: string) { this.name = name; - this.path = path; + this.myPath = myPath; this.lastModified = lastModified; } } diff --git a/app/ng-framework-modules-category/file-system/update/article.md b/app/ng-framework-modules-category/file-system/update/article.md deleted file mode 100644 index 24a0fb3e..00000000 --- a/app/ng-framework-modules-category/file-system/update/article.md +++ /dev/null @@ -1,8 +0,0 @@ - - - -Renaming a File - - -Renaming a Folder - diff --git a/app/ng-framework-modules-category/file-system/update/update.component.ts b/app/ng-framework-modules-category/file-system/update/update.component.ts index 93283648..90d535df 100644 --- a/app/ng-framework-modules-category/file-system/update/update.component.ts +++ b/app/ng-framework-modules-category/file-system/update/update.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from "@angular/core"; // >> fs-update-import-code -import * as fs from "tns-core-modules/file-system"; +import { knownFolders, path, File, Folder } from "tns-core-modules/file-system"; // << fs-update-import-code @Component({ moduleId: module.id, @@ -8,9 +8,9 @@ import * as fs from "tns-core-modules/file-system"; }) export class UpdateExampleComponent implements OnInit { - public documents: fs.Folder; - public file: fs.File; - public myFolder: fs.Folder; + public documents: Folder; + public file: File; + public myFolder: Folder; public fileName: string = "TestFileName"; public fileSuccessMessage: string; @@ -21,7 +21,7 @@ export class UpdateExampleComponent implements OnInit { public isFolderItemVisible: boolean = false; ngOnInit() { - this.documents = fs.knownFolders.documents(); + this.documents = knownFolders.documents(); this.file = this.documents.getFile("TestFileName.txt"); this.myFolder = this.documents.getFolder("TestFolderName"); } diff --git a/app/ng-framework-modules-category/file-system/usage/article.md b/app/ng-framework-modules-category/file-system/usage/article.md new file mode 100644 index 00000000..bca4fa9f --- /dev/null +++ b/app/ng-framework-modules-category/file-system/usage/article.md @@ -0,0 +1,55 @@ + + +### Create folders, files and file content + + +### Removing a File + + +### Removing a Folder + + +### Clearing the Contents of a Folder + + +### Normalize a Path + + +### Path Join + + +### Get the Path Separator + + +### Get or Create a File With Path + + +### Get or Create a Folder With Path + + +### Reading from a File + + +### Reading binary data from a File + + +### Writing binary data to a File + + +### 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. + + +### Checking if a File Exists + + +### Checking if a Folder Exists + + +### Renaming a File + + +### Renaming a Folder + diff --git a/app/ng-framework-modules-category/file-system/create/create.component.html b/app/ng-framework-modules-category/file-system/usage/usage.component.html similarity index 100% rename from app/ng-framework-modules-category/file-system/create/create.component.html rename to app/ng-framework-modules-category/file-system/usage/usage.component.html diff --git a/app/ng-framework-modules-category/file-system/create/create.component.ts b/app/ng-framework-modules-category/file-system/usage/usage.component.ts similarity index 90% rename from app/ng-framework-modules-category/file-system/create/create.component.ts rename to app/ng-framework-modules-category/file-system/usage/usage.component.ts index 9fb18f6d..c4643040 100644 --- a/app/ng-framework-modules-category/file-system/create/create.component.ts +++ b/app/ng-framework-modules-category/file-system/usage/usage.component.ts @@ -1,11 +1,11 @@ import { Component } from "@angular/core"; // >> fs-create-import-code -import { knownFolders, File, Folder } from "tns-core-modules/file-system"; +import { knownFolders, path, File, Folder } from "tns-core-modules/file-system"; // << fs-create-import-code @Component({ moduleId: module.id, - templateUrl: "./create.component.html" + templateUrl: "./usage.component.html" }) export class CreateExampleComponent { public folderName: string; From bd45c54339c1c0a6ae56d5bd915a0ba08b6fd15a Mon Sep 17 00:00:00 2001 From: NickIliev Date: Tue, 22 Oct 2019 09:42:44 +0300 Subject: [PATCH 2/4] docs: update file-system article --- .../file-system/usage/article.md | 61 +++++++++++-------- 1 file changed, 34 insertions(+), 27 deletions(-) diff --git a/app/ng-framework-modules-category/file-system/usage/article.md b/app/ng-framework-modules-category/file-system/usage/article.md index bca4fa9f..c896a9f9 100644 --- a/app/ng-framework-modules-category/file-system/usage/article.md +++ b/app/ng-framework-modules-category/file-system/usage/article.md @@ -1,55 +1,62 @@ -### Create folders, files and file content +### File Usage + +#### Create folders, files and file content -### Removing a File +#### Removing a File -### Removing a Folder - - -### Clearing the Contents of a Folder - - -### Normalize a Path +#### Normalize a Path -### Path Join +#### Path Join -### Get the Path Separator +#### Get the Path Separator -### Get or Create a File With Path +#### Get or Create a File With Path -### Get or Create a Folder With Path - - -### Reading from a File +#### Reading from a File -### Reading binary data from a File +#### Reading binary data from a File -### Writing binary data to a File +#### Writing binary data to a File -### Getting Folder Contents +#### Checking if a File Exists + + +#### Renaming a File + + + +### Folder Usage +#### Create folders, files and file content + + +#### Removing a Folder + + +#### Clearing the Contents of a Folder + + +#### Get or Create a Folder With Path + + +#### 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. -### Checking if a File Exists - - -### Checking if a Folder Exists +#### Checking if a Folder Exists -### Renaming a File - - -### Renaming a Folder +#### Renaming a Folder From 37e3aa740f0d948f89cf41f59118e1294153935b Mon Sep 17 00:00:00 2001 From: NickIliev Date: Tue, 22 Oct 2019 11:52:43 +0300 Subject: [PATCH 3/4] docs: HttpClient revamp --- .../fps-meter/end.md | 21 ++++++++- .../fps-meter/fps-meter-examples.component.ts | 2 +- .../fps-meter/fps-meter-examples.module.ts | 6 +-- .../fps-meter/fps-meter-usage/article.md | 8 ---- .../fps-meter/fps-meter-usage/fps-meter.css | 0 .../fps-meter/fps-meter-usage/fps-meter.html | 9 ---- .../fps-meter/fps-meter-usage/fps-meter.ts | 44 ------------------- .../fps-meter/overview.md | 2 +- .../fps-meter/usage/article.md | 2 + .../fps-meter/usage/usage.component.html | 5 +++ .../fps-meter/usage/usage.component.ts | 30 +++++++++++++ app/ng-framework-modules-category/http/end.md | 9 +++- .../http/http-delete/article.md | 5 --- .../http/http-get/article.md | 16 ------- .../http/http-get/http-get.component.ts | 8 ++-- .../http/http-post/article.md | 20 --------- .../http/http-put/article.md | 5 --- .../http/overview.md | 13 +++++- .../http/usage/article.md | 32 ++++++++++++++ 19 files changed, 118 insertions(+), 119 deletions(-) delete mode 100644 app/ng-framework-modules-category/fps-meter/fps-meter-usage/article.md delete mode 100644 app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.css delete mode 100644 app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.html delete mode 100644 app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.ts create mode 100644 app/ng-framework-modules-category/fps-meter/usage/article.md create mode 100644 app/ng-framework-modules-category/fps-meter/usage/usage.component.html create mode 100644 app/ng-framework-modules-category/fps-meter/usage/usage.component.ts delete mode 100644 app/ng-framework-modules-category/http/http-delete/article.md delete mode 100644 app/ng-framework-modules-category/http/http-get/article.md delete mode 100644 app/ng-framework-modules-category/http/http-post/article.md delete mode 100644 app/ng-framework-modules-category/http/http-put/article.md create mode 100644 app/ng-framework-modules-category/http/usage/article.md diff --git a/app/ng-framework-modules-category/fps-meter/end.md b/app/ng-framework-modules-category/fps-meter/end.md index dcd78fbf..f8ef2da7 100644 --- a/app/ng-framework-modules-category/fps-meter/end.md +++ b/app/ng-framework-modules-category/fps-meter/end.md @@ -1,2 +1,21 @@ +## Methods -**API Reference for the** [FPS Meter Class](https://docs.nativescript.org/api-reference/modules/_fps_meter_.html) \ No newline at end of file +| Name | Type | Description | +|----------|---------|----------------| +| `addCallback(callback: function)` | `number` | Adds a callback function to be called each time FPS data is due to be reported. Returns an unique id which can be used to remove this callback later. | +| `removeCallback(id: number)` | `any` | Removes the callback with the specified id. | +| `running` | `boolean` | Returns a valid indicating whether the frames-per-second meter is currently running. | +| `start` | `void` | Starts the frames-per-second meter. | +| `stop` | `void` | Stops the frames-per-second meter. | + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/fps-meter](https://docs.nativescript.org/api-reference/modules/_fps_meter_.html) | `Module` | + +## Native Component + +| Android | iOS | +|:----------------------|:---------| +| [android.view.Choreographer](https://developer.android.com/reference/android/view/Choreographer) | [CADisplayLink](https://developer.apple.com/documentation/quartzcore/cadisplaylink) | diff --git a/app/ng-framework-modules-category/fps-meter/fps-meter-examples.component.ts b/app/ng-framework-modules-category/fps-meter/fps-meter-examples.component.ts index 5ba8d774..bc6d12e4 100644 --- a/app/ng-framework-modules-category/fps-meter/fps-meter-examples.component.ts +++ b/app/ng-framework-modules-category/fps-meter/fps-meter-examples.component.ts @@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("FPS Meter usage", "/fps-meter/fps-meter-usage") + new Link("Usage", "/fps-meter/usage") ]; @Component({ diff --git a/app/ng-framework-modules-category/fps-meter/fps-meter-examples.module.ts b/app/ng-framework-modules-category/fps-meter/fps-meter-examples.module.ts index c02b7644..76262ce7 100644 --- a/app/ng-framework-modules-category/fps-meter/fps-meter-examples.module.ts +++ b/app/ng-framework-modules-category/fps-meter/fps-meter-examples.module.ts @@ -5,7 +5,7 @@ import { NativeScriptFormsModule } from "nativescript-angular/forms"; import { FpsExamplesComponent } from "./fps-meter-examples.component"; -import { FpsMeterUsageComponent } from "./fps-meter-usage/fps-meter"; +import { FpsMeterUsageComponent } from "./usage/usage.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -14,9 +14,9 @@ export const routerConfig = [ component: FpsExamplesComponent }, { - path: "fps-meter-usage", + path: "usage", component: FpsMeterUsageComponent, - data: { title: "FPS meter" } + data: { title: "Usage" } } ]; diff --git a/app/ng-framework-modules-category/fps-meter/fps-meter-usage/article.md b/app/ng-framework-modules-category/fps-meter/fps-meter-usage/article.md deleted file mode 100644 index e1bc1d7d..00000000 --- a/app/ng-framework-modules-category/fps-meter/fps-meter-usage/article.md +++ /dev/null @@ -1,8 +0,0 @@ -Import FPS Meter Module - - -Add Callback method and start logging - - -Remove Callback method and stop logging - \ No newline at end of file diff --git a/app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.css b/app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.css deleted file mode 100644 index e69de29b..00000000 diff --git a/app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.html b/app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.html deleted file mode 100644 index 9867d1e5..00000000 --- a/app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.ts b/app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.ts deleted file mode 100644 index 01301465..00000000 --- a/app/ng-framework-modules-category/fps-meter/fps-meter-usage/fps-meter.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Component, NgZone } from "@angular/core"; -// >> fps-meter-module-import -import { start, removeCallback, addCallback, stop } from "tns-core-modules/fps-meter"; -// << fps-meter-module-import - -@Component({ - moduleId: module.id, - styleUrls: ["./fps-meter.css"], - templateUrl: "./fps-meter.html" -}) -export class FpsMeterUsageComponent { - public status = false; - public callbackId; - public fps: string = "0"; - public minfps: string = "0"; - public fpslabeltitle = "Start FPS Meter"; - - constructor(private zone: NgZone) { - } - - public toogleMeter() { - if (this.status) { - // >> stop-fps-meter - removeCallback(this.callbackId); - stop(); - // << stop-fps-meter - this.status = false; - this.fpslabeltitle = "Start FPS Meter"; - } else { - // >> start-fps-meter - this.callbackId = addCallback((fps: number, minFps: number) => { - this.zone.run(() => { - this.fps = fps.toFixed(2); - this.minfps = minFps.toFixed(2); - }); - }); - - start(); - // << start-fps-meter - this.status = true; - this.fpslabeltitle = "Stop FPS Meter"; - } - } -} diff --git a/app/ng-framework-modules-category/fps-meter/overview.md b/app/ng-framework-modules-category/fps-meter/overview.md index 25ccff46..f1ed819a 100644 --- a/app/ng-framework-modules-category/fps-meter/overview.md +++ b/app/ng-framework-modules-category/fps-meter/overview.md @@ -1 +1 @@ -Logging frames-per-second statistics for your app requires the "fps-meter" module. +Logging frames-per-second statistics for your app requires the `fps-meter` module. diff --git a/app/ng-framework-modules-category/fps-meter/usage/article.md b/app/ng-framework-modules-category/fps-meter/usage/article.md new file mode 100644 index 00000000..96a1a680 --- /dev/null +++ b/app/ng-framework-modules-category/fps-meter/usage/article.md @@ -0,0 +1,2 @@ +Import FPS Meter Module + diff --git a/app/ng-framework-modules-category/fps-meter/usage/usage.component.html b/app/ng-framework-modules-category/fps-meter/usage/usage.component.html new file mode 100644 index 00000000..615259e6 --- /dev/null +++ b/app/ng-framework-modules-category/fps-meter/usage/usage.component.html @@ -0,0 +1,5 @@ + + + + + diff --git a/app/ng-framework-modules-category/fps-meter/usage/usage.component.ts b/app/ng-framework-modules-category/fps-meter/usage/usage.component.ts new file mode 100644 index 00000000..acdb1a6d --- /dev/null +++ b/app/ng-framework-modules-category/fps-meter/usage/usage.component.ts @@ -0,0 +1,30 @@ +// >> fps-meter-module-usage +import { Component, NgZone } from "@angular/core"; +import { start, removeCallback, addCallback, stop } from "tns-core-modules/fps-meter"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html" +}) +export class FpsMeterUsageComponent { + public status = false; + public callbackId; + + constructor(private zone: NgZone) { } + + startFPSMeter() { + this.callbackId = addCallback((fps: number, minFps: number) => { + this.zone.run(() => { + console.log(`Frames per seconds: ${fps.toFixed(2)}`); + console.log(minFps.toFixed(2)); + }); + }); + start(); + } + + stopFPSMeter() { + removeCallback(this.callbackId); + stop(); + } +} +// << fps-meter-module-usage diff --git a/app/ng-framework-modules-category/http/end.md b/app/ng-framework-modules-category/http/end.md index 01ae9eef..859f8b93 100644 --- a/app/ng-framework-modules-category/http/end.md +++ b/app/ng-framework-modules-category/http/end.md @@ -1,2 +1,9 @@ +## Methods -**API Reference for the** [HTTP Class](http://docs.nativescript.org/api-reference/modules/_http_.html) \ No newline at end of file +Refer to [the Angular's official documentation](https://angular.io/guide/http) for more details on `HttpClient` module. + +## API References + +| Name | Type | +|----------|---------| +| [HttpClient](https://angular.io/guide/http) | `Module` | diff --git a/app/ng-framework-modules-category/http/http-delete/article.md b/app/ng-framework-modules-category/http/http-delete/article.md deleted file mode 100644 index a8a1fd5a..00000000 --- a/app/ng-framework-modules-category/http/http-delete/article.md +++ /dev/null @@ -1,5 +0,0 @@ -Using the DELETE method by creating a service file to keep the HTTP logic separated from the component file. - - -Provide the service in the component (or in the related `NgModule` if the service should be reused). - \ No newline at end of file diff --git a/app/ng-framework-modules-category/http/http-get/article.md b/app/ng-framework-modules-category/http/http-get/article.md deleted file mode 100644 index 7fd86f5d..00000000 --- a/app/ng-framework-modules-category/http/http-get/article.md +++ /dev/null @@ -1,16 +0,0 @@ -In order to use the HTTP the first thing to do is to import our NativeScript wrapper in the respective module file. - -``` -import { NativeScriptHttpClientModule } from "nativescript-angular/http-client"; -... -@NgModule({ - imports: [ - NativeScriptHttpClientModule - ] -``` - -Using the GET method by creating a service file to keep the HTTP logic separated from the component file (which does not need to know details on how you fetch the data). - - -Provide the service in the component. Declare the service (either in the `providers` array of your module/component or by using `provideIn` - learn more about Angular providers [here](https://angular.io/guide/providers)) and inject it in the component's constructor. - \ No newline at end of file diff --git a/app/ng-framework-modules-category/http/http-get/http-get.component.ts b/app/ng-framework-modules-category/http/http-get/http-get.component.ts index 186b7cba..3f13f1a6 100644 --- a/app/ng-framework-modules-category/http/http-get/http-get.component.ts +++ b/app/ng-framework-modules-category/http/http-get/http-get.component.ts @@ -8,10 +8,10 @@ import { MyHttpGetService } from "./http-get.services"; providers: [MyHttpGetService] // using the providers array }) export class HttpGetComponent implements OnInit { - public host: string; - public userAgent: string; - public origin: string; - public url: string; + host: string; + userAgent: string; + origin: string; + url: string; constructor(private myService: MyHttpGetService) { } diff --git a/app/ng-framework-modules-category/http/http-post/article.md b/app/ng-framework-modules-category/http/http-post/article.md deleted file mode 100644 index c652ed77..00000000 --- a/app/ng-framework-modules-category/http/http-post/article.md +++ /dev/null @@ -1,20 +0,0 @@ -In order to use the HTTP the first thing to do is to declare our NativeScript wrapper in the respective module file - -``` -import { NativeScriptHttpClientModule } from "nativescript-angular/http-client"; -... -@NgModule({ - imports: [ - NativeScriptHttpClientModule - ] -``` - -Using the POST method by creating a service file to keep the HTTP logic separated from the component file. - - -Finally, we can provide our service in our component. Note that the services should be explicitly declared in `providers` -and then should be provided as an argument in our component's constructor. - - - - diff --git a/app/ng-framework-modules-category/http/http-put/article.md b/app/ng-framework-modules-category/http/http-put/article.md deleted file mode 100644 index af1de104..00000000 --- a/app/ng-framework-modules-category/http/http-put/article.md +++ /dev/null @@ -1,5 +0,0 @@ -Using the PUT method by creating a service file to keep the HTTP logic separated from the component file. - - -Provide the service in the component (or in the related `NgModule` if the service should be reused). - \ No newline at end of file diff --git a/app/ng-framework-modules-category/http/overview.md b/app/ng-framework-modules-category/http/overview.md index 1411a403..566548e8 100644 --- a/app/ng-framework-modules-category/http/overview.md +++ b/app/ng-framework-modules-category/http/overview.md @@ -1 +1,12 @@ -HTTP Module +In order to use the Angular's `HttpClient` module the first thing to do is to import our NativeScript wrapper in the respective module file. + +```TypeScript +import { NativeScriptHttpClientModule } from "nativescript-angular/http-client"; + +@NgModule({ + imports: [ + NativeScriptHttpClientModule + ] +``` + +> **Note:** The `HttpClient` is Angular module that comes from `@angular/common/http`. However, you will need to import the NativeScript wrapper (`NativeScriptHttpClientModule`) to be able to work with the `HttpClient` module. \ No newline at end of file diff --git a/app/ng-framework-modules-category/http/usage/article.md b/app/ng-framework-modules-category/http/usage/article.md new file mode 100644 index 00000000..fea1dde5 --- /dev/null +++ b/app/ng-framework-modules-category/http/usage/article.md @@ -0,0 +1,32 @@ +### HTTP Get + +Using the **GET** method by creating a service file to keep the HTTP logic separated from the component file (which does not need to know details on how you fetch the data). + + +Provide the service in the component. Declare the service (either in the `providers` array of your module/component or by using `provideIn` - learn more about Angular providers [here](https://angular.io/guide/providers)) and inject it in the component's constructor. + + +### HTTP Post + +Using the **POST** method by creating a service file to keep the HTTP logic separated from the component file. + + +Finally, we can provide our service in our component. Note that the services should be explicitly declared in `providers` +and then should be provided as an argument in our component's constructor. + + +### HTTP Put + +Using the **PUT** method by creating a service file to keep the HTTP logic separated from the component file. + + +Provide the service in the component (or in the related `NgModule` if the service should be reused). + + +### HTTP Delete + +Using the **DELETE** method by creating a service file to keep the HTTP logic separated from the component file. + + +Provide the service in the component (or in the related `NgModule` if the service should be reused). + \ No newline at end of file From 6865cf3d318e63da8d2234e220656df1db7b6214 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Tue, 22 Oct 2019 14:43:48 +0300 Subject: [PATCH 4/4] docs: Platforms module revamp --- .../http/http-delete/http-delete.component.ts | 4 +- .../http/http-put/http-put.services.ts | 4 +- .../http/usage/article.md | 16 ++++ .../platform/end.md | 23 ++++- .../platform/overview.md | 2 +- .../platform/platform-examples.component.ts | 2 +- .../platform/platform-examples.module.ts | 6 +- .../platform-module-example/article.md | 5 -- .../platform-module-example.html | 50 ----------- .../platform-module-example.ts | 89 ------------------- .../platform/usage/article.md | 1 + .../usage/platform-module-example.html | 3 + .../platform/usage/platform-module-example.ts | 33 +++++++ 13 files changed, 84 insertions(+), 154 deletions(-) delete mode 100644 app/ng-framework-modules-category/platform/platform-module-example/article.md delete mode 100644 app/ng-framework-modules-category/platform/platform-module-example/platform-module-example.html delete mode 100644 app/ng-framework-modules-category/platform/platform-module-example/platform-module-example.ts create mode 100644 app/ng-framework-modules-category/platform/usage/article.md create mode 100644 app/ng-framework-modules-category/platform/usage/platform-module-example.html create mode 100644 app/ng-framework-modules-category/platform/usage/platform-module-example.ts diff --git a/app/ng-framework-modules-category/http/http-delete/http-delete.component.ts b/app/ng-framework-modules-category/http/http-delete/http-delete.component.ts index a27ba338..e5026b1f 100644 --- a/app/ng-framework-modules-category/http/http-delete/http-delete.component.ts +++ b/app/ng-framework-modules-category/http/http-delete/http-delete.component.ts @@ -1,4 +1,4 @@ -// >> http-put-component +// >> http-delete-component import { Component, OnInit } from "@angular/core"; import { MyHttpDeleteService } from "./http-delete.service"; @@ -39,4 +39,4 @@ export class HttpDeleteComponent implements OnInit { this.data = res.data; } } -// << http-put-component +// << http-delete-component diff --git a/app/ng-framework-modules-category/http/http-put/http-put.services.ts b/app/ng-framework-modules-category/http/http-put/http-put.services.ts index b383db02..90191c76 100644 --- a/app/ng-framework-modules-category/http/http-put/http-put.services.ts +++ b/app/ng-framework-modules-category/http/http-put/http-put.services.ts @@ -1,4 +1,4 @@ -// >> http-delete-service +// >> http-put-service import { Injectable } from "@angular/core"; import { HttpClient, HttpHeaders } from "@angular/common/http"; @@ -22,4 +22,4 @@ export class MyHttpPutService { return headers; } } -// << http-delete-service +// << http-put-service diff --git a/app/ng-framework-modules-category/http/usage/article.md b/app/ng-framework-modules-category/http/usage/article.md index fea1dde5..61bbacd8 100644 --- a/app/ng-framework-modules-category/http/usage/article.md +++ b/app/ng-framework-modules-category/http/usage/article.md @@ -1,32 +1,48 @@ ### HTTP Get Using the **GET** method by creating a service file to keep the HTTP logic separated from the component file (which does not need to know details on how you fetch the data). + +_http-get.service.ts_ Provide the service in the component. Declare the service (either in the `providers` array of your module/component or by using `provideIn` - learn more about Angular providers [here](https://angular.io/guide/providers)) and inject it in the component's constructor. + +_http-get.component.ts_ ### HTTP Post Using the **POST** method by creating a service file to keep the HTTP logic separated from the component file. + +_http-post.service.ts_ Finally, we can provide our service in our component. Note that the services should be explicitly declared in `providers` and then should be provided as an argument in our component's constructor. + +_http-post.component.ts_ ### HTTP Put Using the **PUT** method by creating a service file to keep the HTTP logic separated from the component file. + +_http-put.service.ts_ Provide the service in the component (or in the related `NgModule` if the service should be reused). + +_http-put.component.ts_ ### HTTP Delete Using the **DELETE** method by creating a service file to keep the HTTP logic separated from the component file. + +_http-delete.service.ts_ Provide the service in the component (or in the related `NgModule` if the service should be reused). + +_http-delete.component.ts_ \ No newline at end of file diff --git a/app/ng-framework-modules-category/platform/end.md b/app/ng-framework-modules-category/platform/end.md index 3f5979ca..9c09e9a7 100644 --- a/app/ng-framework-modules-category/platform/end.md +++ b/app/ng-framework-modules-category/platform/end.md @@ -1,2 +1,23 @@ -**API Reference for the** [Platform Class](https://docs.nativescript.org/api-reference/modules/_platform_.html) \ No newline at end of file +## Properties + +| Name | Type | Description | +|----------|---------|----------------| +| `device` | [Device](https://docs.nativescript.org/api-reference/interfaces/_platform_.device) | Gets the current device information. | +| `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. | +| `screen` | [Screen Module](https://docs.nativescript.org/api-reference/modules/_platform_.screen) | For details see the Screen module properties. | + +## Screen Module Properties + +| Name | Type | Description | +|----------|---------|----------------| +| `mainScreen` | [ScreenMetrics](https://docs.nativescript.org/api-reference/interfaces/_platform_.screenmetrics) | Gets information about the main screen of the current device. | + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/platform](https://docs.nativescript.org/api-reference/modules/_platform_.html) | `Module` | +| [Device](https://docs.nativescript.org/api-reference/interfaces/_platform_.device) | `Interface` | +| [ScreenMetrics](https://docs.nativescript.org/api-reference/interfaces/_platform_.screenmetrics) | `Interface` | \ No newline at end of file diff --git a/app/ng-framework-modules-category/platform/overview.md b/app/ng-framework-modules-category/platform/overview.md index 73109773..4f187b3c 100644 --- a/app/ng-framework-modules-category/platform/overview.md +++ b/app/ng-framework-modules-category/platform/overview.md @@ -1 +1 @@ -Information about the current device and screen are defined in the platform module +Information and details about the current device, and screen resolution & density are accessible via the `platform` module. diff --git a/app/ng-framework-modules-category/platform/platform-examples.component.ts b/app/ng-framework-modules-category/platform/platform-examples.component.ts index 42a7dd12..7086a4e1 100644 --- a/app/ng-framework-modules-category/platform/platform-examples.component.ts +++ b/app/ng-framework-modules-category/platform/platform-examples.component.ts @@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Platform module example", "/platform/platform-module") + new Link("Usage", "/platform/usage") ]; @Component({ diff --git a/app/ng-framework-modules-category/platform/platform-examples.module.ts b/app/ng-framework-modules-category/platform/platform-examples.module.ts index 1e1a2552..e8aa439f 100644 --- a/app/ng-framework-modules-category/platform/platform-examples.module.ts +++ b/app/ng-framework-modules-category/platform/platform-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 { PlatformExamplesComponent } from "./platform-examples.component"; -import { PlatformModuleExampleComponent } from "./platform-module-example/platform-module-example"; +import { PlatformModuleExampleComponent } from "./usage/platform-module-example"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -11,9 +11,9 @@ export const routerConfig = [ component: PlatformExamplesComponent }, { - path: "platform-module", + path: "usage", component: PlatformModuleExampleComponent, - data: { title: "Using platform module" } + data: { title: "Usage" } } ]; diff --git a/app/ng-framework-modules-category/platform/platform-module-example/article.md b/app/ng-framework-modules-category/platform/platform-module-example/article.md deleted file mode 100644 index ebf70dd6..00000000 --- a/app/ng-framework-modules-category/platform/platform-module-example/article.md +++ /dev/null @@ -1,5 +0,0 @@ -Import Platform module - - -Get information about the current device and screen - diff --git a/app/ng-framework-modules-category/platform/platform-module-example/platform-module-example.html b/app/ng-framework-modules-category/platform/platform-module-example/platform-module-example.html deleted file mode 100644 index 73aed771..00000000 --- a/app/ng-framework-modules-category/platform/platform-module-example/platform-module-example.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-framework-modules-category/platform/platform-module-example/platform-module-example.ts b/app/ng-framework-modules-category/platform/platform-module-example/platform-module-example.ts deleted file mode 100644 index b1987bdf..00000000 --- a/app/ng-framework-modules-category/platform/platform-module-example/platform-module-example.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { Component } from "@angular/core"; -// >> import-platform-module -import { isAndroid, isIOS, device, screen } from "tns-core-modules/platform"; -// << import-platform-module -// >> get-screen-device-info -class DeviceInfo { - constructor( - public model: string, - public deviceType: string, - public os: string, - public osVersion: string, - public sdkVersion: string, - public language: string, - public manufacturer: string, - public uuid: string - ) { } -} - -class ScreenInfo { - constructor( - public heightDIPs: number, - public heightPixels: number, - public scale: number, - public widthDIPs: number, - public widthPixels: number - ) { } -} - -@Component({ - moduleId: module.id, - templateUrl: "./platform-module-example.html" -}) -export class PlatformModuleExampleComponent { - public isItemVisible: boolean = false; - public deviceInformation: DeviceInfo; - public isItemVisibleScreenInfo: boolean = false; - public screenInformation: ScreenInfo; - public deviceInfoButton: string = "Show device info"; - public screenInfoButton: string = "Show/Hide screen info"; - - constructor() { - this.deviceInformation = new DeviceInfo( - device.model, - device.deviceType, - device.os, - device.osVersion, - device.sdkVersion, - device.language, - device.manufacturer, - device.uuid); - this.screenInformation = new ScreenInfo( - screen.mainScreen.heightDIPs, - screen.mainScreen.heightPixels, - screen.mainScreen.scale, - screen.mainScreen.widthDIPs, - screen.mainScreen.widthPixels); - } - - public checkPlatformType(args) { - let message = ""; - if (isAndroid) { - message = "You are using Android device"; - } else if (isIOS) { - message = "You are using IOS device"; - } - alert(message); - } - - public deviceInfo(args) { - if (this.isItemVisible) { - this.isItemVisible = false; - this.deviceInfoButton = "Show device info"; - } else { - this.isItemVisible = true; - this.deviceInfoButton = "Hide device info"; - } - } - - public screenInfo(args) { - if (this.isItemVisibleScreenInfo) { - this.isItemVisibleScreenInfo = false; - this.screenInfoButton = "Show screen info"; - } else { - this.isItemVisibleScreenInfo = true; - this.screenInfoButton = "Hide screen info"; - } - } -} -// << get-screen-device-info diff --git a/app/ng-framework-modules-category/platform/usage/article.md b/app/ng-framework-modules-category/platform/usage/article.md new file mode 100644 index 00000000..e1516399 --- /dev/null +++ b/app/ng-framework-modules-category/platform/usage/article.md @@ -0,0 +1 @@ + diff --git a/app/ng-framework-modules-category/platform/usage/platform-module-example.html b/app/ng-framework-modules-category/platform/usage/platform-module-example.html new file mode 100644 index 00000000..62bacfd3 --- /dev/null +++ b/app/ng-framework-modules-category/platform/usage/platform-module-example.html @@ -0,0 +1,3 @@ + + + diff --git a/app/ng-framework-modules-category/platform/usage/platform-module-example.ts b/app/ng-framework-modules-category/platform/usage/platform-module-example.ts new file mode 100644 index 00000000..221dc9ed --- /dev/null +++ b/app/ng-framework-modules-category/platform/usage/platform-module-example.ts @@ -0,0 +1,33 @@ +// tslint:disable:max-line-length +// >> import-platform-module +import { Component } from "@angular/core"; +import { isAndroid, isIOS, device, screen } from "tns-core-modules/platform"; + +@Component({ + moduleId: module.id, + templateUrl: "./platform-module-example.html" +}) +export class PlatformModuleExampleComponent { + + constructor() { + console.log(`Running on Android? ${isAndroid}`); + console.log(`Running on iOS? ${isIOS}`); + + 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 + } +} +// << import-platform-module