diff --git a/.eslintrc b/.eslintrc index 12c201f..d3db0e1 100644 --- a/.eslintrc +++ b/.eslintrc @@ -100,7 +100,7 @@ "no-multi-str": "error", "no-multiple-empty-lines": "error", "no-negated-condition": "off", - "no-nested-ternary": "error", + "no-nested-ternary": "off", "no-new": "error", "no-new-func": "error", "no-new-object": "error", @@ -230,6 +230,7 @@ "ecmaVersion": 6, "ecmaFeatures": { "impliedStrict": true - } + }, + "sourceType": "module" } } diff --git a/.gitignore b/.gitignore index 8a00a0a..af55efb 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ report app/**/*.map app/**/*-ts-*.js +.migration_backup/ .DS_Store **/*.log diff --git a/.npmrc b/.npmrc deleted file mode 100644 index 43c97e7..0000000 --- a/.npmrc +++ /dev/null @@ -1 +0,0 @@ -package-lock=false diff --git a/CONTRIBUTE.md b/CONTRIBUTE.md index 7b77e50..e6b89f2 100644 --- a/CONTRIBUTE.md +++ b/CONTRIBUTE.md @@ -35,11 +35,10 @@ Set Button in XML ######text.component.js ```JavaScript -var EventData = require("tns-core-modules/data/observable").EventData; -var Button = require("tns-core-modules/ui/button").Button; +import { Button, EventData } from "@nativescript/core"; // >> button-tap-javascript -exports.onTap = function(args) { +export function onTap(args) { var myButton = args.object; console.log(myButton + " was tapped!"); } @@ -49,8 +48,7 @@ exports.onTap = function(args) { ######text.component.ts ```TypeScript -import { EventData } from "tns-core-modules/data/observable"; -import { Button } from "tns-core-modules/ui/button"; +import { Button, EventData } from "@nativescript/core"; // >> button-tap-ts export function onTap(args: EventData) { diff --git a/app/App_Resources/Android/AndroidManifest.xml b/app/App_Resources/Android/src/main/AndroidManifest.xml similarity index 100% rename from app/App_Resources/Android/AndroidManifest.xml rename to app/App_Resources/Android/src/main/AndroidManifest.xml diff --git a/app/App_Resources/Android/drawable-hdpi/background.png b/app/App_Resources/Android/src/main/res/drawable-hdpi/background.png similarity index 100% rename from app/App_Resources/Android/drawable-hdpi/background.png rename to app/App_Resources/Android/src/main/res/drawable-hdpi/background.png diff --git a/app/App_Resources/Android/drawable-hdpi/icon.png b/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png similarity index 100% rename from app/App_Resources/Android/drawable-hdpi/icon.png rename to app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png diff --git a/app/App_Resources/Android/drawable-hdpi/logo.png b/app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png similarity index 100% rename from app/App_Resources/Android/drawable-hdpi/logo.png rename to app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png diff --git a/app/App_Resources/Android/drawable-hdpi/menu.png b/app/App_Resources/Android/src/main/res/drawable-hdpi/menu.png similarity index 100% rename from app/App_Resources/Android/drawable-hdpi/menu.png rename to app/App_Resources/Android/src/main/res/drawable-hdpi/menu.png diff --git a/app/App_Resources/Android/drawable-ldpi/background.png b/app/App_Resources/Android/src/main/res/drawable-ldpi/background.png similarity index 100% rename from app/App_Resources/Android/drawable-ldpi/background.png rename to app/App_Resources/Android/src/main/res/drawable-ldpi/background.png diff --git a/app/App_Resources/Android/drawable-ldpi/icon.png b/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png similarity index 100% rename from app/App_Resources/Android/drawable-ldpi/icon.png rename to app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png diff --git a/app/App_Resources/Android/drawable-ldpi/logo.png b/app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png similarity index 100% rename from app/App_Resources/Android/drawable-ldpi/logo.png rename to app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png diff --git a/app/App_Resources/Android/drawable-ldpi/menu.png b/app/App_Resources/Android/src/main/res/drawable-ldpi/menu.png similarity index 100% rename from app/App_Resources/Android/drawable-ldpi/menu.png rename to app/App_Resources/Android/src/main/res/drawable-ldpi/menu.png diff --git a/app/App_Resources/Android/drawable-mdpi/background.png b/app/App_Resources/Android/src/main/res/drawable-mdpi/background.png similarity index 100% rename from app/App_Resources/Android/drawable-mdpi/background.png rename to app/App_Resources/Android/src/main/res/drawable-mdpi/background.png diff --git a/app/App_Resources/Android/drawable-mdpi/icon.png b/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png similarity index 100% rename from app/App_Resources/Android/drawable-mdpi/icon.png rename to app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png diff --git a/app/App_Resources/Android/drawable-mdpi/logo.png b/app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png similarity index 100% rename from app/App_Resources/Android/drawable-mdpi/logo.png rename to app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png diff --git a/app/App_Resources/Android/drawable-mdpi/menu.png b/app/App_Resources/Android/src/main/res/drawable-mdpi/menu.png similarity index 100% rename from app/App_Resources/Android/drawable-mdpi/menu.png rename to app/App_Resources/Android/src/main/res/drawable-mdpi/menu.png diff --git a/app/App_Resources/Android/drawable-nodpi/splash_screen.xml b/app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml similarity index 100% rename from app/App_Resources/Android/drawable-nodpi/splash_screen.xml rename to app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml diff --git a/app/App_Resources/Android/drawable-xhdpi/background.png b/app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png similarity index 100% rename from app/App_Resources/Android/drawable-xhdpi/background.png rename to app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png diff --git a/app/App_Resources/Android/drawable-xhdpi/icon.png b/app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png similarity index 100% rename from app/App_Resources/Android/drawable-xhdpi/icon.png rename to app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png diff --git a/app/App_Resources/Android/drawable-xhdpi/logo.png b/app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png similarity index 100% rename from app/App_Resources/Android/drawable-xhdpi/logo.png rename to app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png diff --git a/app/App_Resources/Android/drawable-xhdpi/menu.png b/app/App_Resources/Android/src/main/res/drawable-xhdpi/menu.png similarity index 100% rename from app/App_Resources/Android/drawable-xhdpi/menu.png rename to app/App_Resources/Android/src/main/res/drawable-xhdpi/menu.png diff --git a/app/App_Resources/Android/drawable-xxhdpi/background.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png similarity index 100% rename from app/App_Resources/Android/drawable-xxhdpi/background.png rename to app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_18pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_18pt.png new file mode 100755 index 0000000..80fc185 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_18pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_24pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_24pt.png new file mode 100755 index 0000000..6fe8260 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_24pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_36pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_36pt.png new file mode 100755 index 0000000..43bc691 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_36pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_48pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_48pt.png new file mode 100755 index 0000000..2b9f841 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_account_balance_black_48pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_18pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_18pt.png new file mode 100755 index 0000000..52ac80e Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_18pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_24pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_24pt.png new file mode 100755 index 0000000..bcbeb19 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_24pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_36pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_36pt.png new file mode 100755 index 0000000..aac69f8 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_36pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_48pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_48pt.png new file mode 100755 index 0000000..2eb968b Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_home_black_48pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_18pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_18pt.png new file mode 100755 index 0000000..e225a47 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_18pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_24pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_24pt.png new file mode 100755 index 0000000..96f68e2 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_24pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_36pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_36pt.png new file mode 100755 index 0000000..353d5f3 Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_36pt.png differ diff --git a/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_48pt.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_48pt.png new file mode 100755 index 0000000..9a5c0bf Binary files /dev/null and b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/baseline_search_black_48pt.png differ diff --git a/app/App_Resources/Android/drawable-xxhdpi/icon.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png similarity index 100% rename from app/App_Resources/Android/drawable-xxhdpi/icon.png rename to app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png diff --git a/app/App_Resources/Android/drawable-xxhdpi/logo.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png similarity index 100% rename from app/App_Resources/Android/drawable-xxhdpi/logo.png rename to app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png diff --git a/app/App_Resources/Android/drawable-xxhdpi/menu.png b/app/App_Resources/Android/src/main/res/drawable-xxhdpi/menu.png similarity index 100% rename from app/App_Resources/Android/drawable-xxhdpi/menu.png rename to app/App_Resources/Android/src/main/res/drawable-xxhdpi/menu.png diff --git a/app/App_Resources/Android/drawable-xxxhdpi/background.png b/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png similarity index 100% rename from app/App_Resources/Android/drawable-xxxhdpi/background.png rename to app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png diff --git a/app/App_Resources/Android/drawable-xxxhdpi/icon.png b/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png similarity index 100% rename from app/App_Resources/Android/drawable-xxxhdpi/icon.png rename to app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png diff --git a/app/App_Resources/Android/drawable-xxxhdpi/logo.png b/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png similarity index 100% rename from app/App_Resources/Android/drawable-xxxhdpi/logo.png rename to app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png diff --git a/app/App_Resources/Android/drawable-xxxhdpi/menu.png b/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/menu.png similarity index 100% rename from app/App_Resources/Android/drawable-xxxhdpi/menu.png rename to app/App_Resources/Android/src/main/res/drawable-xxxhdpi/menu.png diff --git a/app/App_Resources/Android/values-v21/colors.xml b/app/App_Resources/Android/src/main/res/values-v21/colors.xml similarity index 100% rename from app/App_Resources/Android/values-v21/colors.xml rename to app/App_Resources/Android/src/main/res/values-v21/colors.xml diff --git a/app/App_Resources/Android/values-v21/styles.xml b/app/App_Resources/Android/src/main/res/values-v21/styles.xml similarity index 100% rename from app/App_Resources/Android/values-v21/styles.xml rename to app/App_Resources/Android/src/main/res/values-v21/styles.xml diff --git a/app/App_Resources/Android/values/colors.xml b/app/App_Resources/Android/src/main/res/values/colors.xml similarity index 100% rename from app/App_Resources/Android/values/colors.xml rename to app/App_Resources/Android/src/main/res/values/colors.xml diff --git a/app/App_Resources/Android/values/styles.xml b/app/App_Resources/Android/src/main/res/values/styles.xml similarity index 100% rename from app/App_Resources/Android/values/styles.xml rename to app/App_Resources/Android/src/main/res/values/styles.xml diff --git a/app/App_Resources/iOS/baseline_account_balance_black_18pt@1x.png b/app/App_Resources/iOS/baseline_account_balance_black_18pt@1x.png new file mode 100755 index 0000000..8f7c904 Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_18pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_account_balance_black_18pt@2x.png b/app/App_Resources/iOS/baseline_account_balance_black_18pt@2x.png new file mode 100755 index 0000000..4ffd291 Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_18pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_account_balance_black_18pt@3x.png b/app/App_Resources/iOS/baseline_account_balance_black_18pt@3x.png new file mode 100755 index 0000000..80fc185 Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_18pt@3x.png differ diff --git a/app/App_Resources/iOS/baseline_account_balance_black_24pt@1x.png b/app/App_Resources/iOS/baseline_account_balance_black_24pt@1x.png new file mode 100755 index 0000000..384f82d Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_24pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_account_balance_black_24pt@2x.png b/app/App_Resources/iOS/baseline_account_balance_black_24pt@2x.png new file mode 100755 index 0000000..caac1ad Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_24pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_account_balance_black_24pt@3x.png b/app/App_Resources/iOS/baseline_account_balance_black_24pt@3x.png new file mode 100755 index 0000000..6fe8260 Binary files /dev/null and b/app/App_Resources/iOS/baseline_account_balance_black_24pt@3x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_18pt@1x.png b/app/App_Resources/iOS/baseline_home_black_18pt@1x.png new file mode 100755 index 0000000..aa43dda Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_18pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_18pt@2x.png b/app/App_Resources/iOS/baseline_home_black_18pt@2x.png new file mode 100755 index 0000000..a9e2993 Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_18pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_18pt@3x.png b/app/App_Resources/iOS/baseline_home_black_18pt@3x.png new file mode 100755 index 0000000..52ac80e Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_18pt@3x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_24pt@1x.png b/app/App_Resources/iOS/baseline_home_black_24pt@1x.png new file mode 100755 index 0000000..1eba637 Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_24pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_24pt@2x.png b/app/App_Resources/iOS/baseline_home_black_24pt@2x.png new file mode 100755 index 0000000..e20865a Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_24pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_home_black_24pt@3x.png b/app/App_Resources/iOS/baseline_home_black_24pt@3x.png new file mode 100755 index 0000000..bcbeb19 Binary files /dev/null and b/app/App_Resources/iOS/baseline_home_black_24pt@3x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_18pt@1x.png b/app/App_Resources/iOS/baseline_search_black_18pt@1x.png new file mode 100755 index 0000000..70203ac Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_18pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_18pt@2x.png b/app/App_Resources/iOS/baseline_search_black_18pt@2x.png new file mode 100755 index 0000000..c1066f3 Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_18pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_18pt@3x.png b/app/App_Resources/iOS/baseline_search_black_18pt@3x.png new file mode 100755 index 0000000..e225a47 Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_18pt@3x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_24pt@1x.png b/app/App_Resources/iOS/baseline_search_black_24pt@1x.png new file mode 100755 index 0000000..87e74ff Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_24pt@1x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_24pt@2x.png b/app/App_Resources/iOS/baseline_search_black_24pt@2x.png new file mode 100755 index 0000000..090acd4 Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_24pt@2x.png differ diff --git a/app/App_Resources/iOS/baseline_search_black_24pt@3x.png b/app/App_Resources/iOS/baseline_search_black_24pt@3x.png new file mode 100755 index 0000000..96f68e2 Binary files /dev/null and b/app/App_Resources/iOS/baseline_search_black_24pt@3x.png differ diff --git a/app/app.css b/app/app.css index 7440e9d..005e770 100644 --- a/app/app.css +++ b/app/app.css @@ -1,34 +1,17 @@ -/* -In NativeScript, the app.css file is where you place CSS rules that -you would like to apply to your entire application. Check out -http://docs.nativescript.org/ui/styling for a full list of the CSS -selectors and properties you can use to style UI components. - -/* -In many cases you may want to use the NativeScript core theme instead -of writing your own CSS rules. For a full list of class names in the theme -refer to http://docs.nativescript.org/ui/theme. -The imported CSS rules must precede all other types of rules. -*/ -@import '~nativescript-theme-core/css/core.light.css'; - -/* -The following CSS rule changes the font size of all UI -components that have the btn class name. -*/ -.btn { - font-size: 18; -} +@import '~nativescript-theme-core/css/core.css'; +@import '~nativescript-theme-core/css/forest.css'; .far { font-family: "Font Awesome 5 Free", "fa-regular-400"; + font-weight: 400; } .fab { font-family: "Font Awesome 5 Brands", "fa-brands-400"; + font-weight: 400; } .fas { font-family: "Font Awesome 5 Free", "fa-solid-900"; -} - + font-weight: 900; +} \ No newline at end of file diff --git a/app/app.js b/app/app.js index 4d735d6..12f00eb 100644 --- a/app/app.js +++ b/app/app.js @@ -1,19 +1,20 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -var application = require("tns-core-modules/application"); -var platformModule = require("tns-core-modules/platform"); -var applicationSettingsModule = require("tns-core-modules/application-settings"); -var deepLinkDataModule = require("./shared/deep-link-data"); -if (platformModule.isIOS) { - var mydelegate = require("./delegate/my-delegate"); - application.ios.delegate = mydelegate.MyDelegate; +/* +In NativeScript, the app.js file is the entry point to your application. +You can use this file to perform app-level initialization, but the primary +purpose of the file is to pass control to the app’s first module. +*/ +import { Application, ApplicationSettings, isIOS } from "@nativescript/core"; +import { DeepLinkData } from "./shared/deep-link-data"; +if (isIOS) { + const mydelegate = require("./delegate/my-delegate"); + Application.ios.delegate = mydelegate.MyDelegate; } function launchExample() { - var rootView = application.getRootView(); - if (applicationSettingsModule.hasKey("gotoexample")) { - var value = applicationSettingsModule.getString("gotoexample"); + const rootView = Application.getRootView(); + if (ApplicationSettings.hasKey("gotoexample")) { + const value = ApplicationSettings.getString("gotoexample"); if (value !== "") { - applicationSettingsModule.remove("gotoexample"); + ApplicationSettings.remove("gotoexample"); rootView.navigate({ moduleName: value, clearHistory: true @@ -21,14 +22,17 @@ function launchExample() { } } } -application.on(application.resumeEvent, function (args) { +Application.on(Application.resumeEvent, (args) => { if (args.android) { - var dld = new deepLinkDataModule.DeepLinkData("", args.android); + const dld = new DeepLinkData("", args.android); launchExample(); } else if (args.ios) { launchExample(); } }); -application.run({ moduleName: "app-root" }); -//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiYXBwLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBS0EsMERBQTREO0FBQzVELDBEQUE0RDtBQUM1RCxpRkFBa0Y7QUFFbEYsSUFBTSxrQkFBa0IsR0FBRyxPQUFPLENBQUMseUJBQXlCLENBQUMsQ0FBQztBQUM5RCxJQUFJLGNBQWMsQ0FBQyxLQUFLLEVBQUU7SUFDdEIsSUFBTSxVQUFVLEdBQUcsT0FBTyxDQUFDLHdCQUF3QixDQUFDLENBQUM7SUFDckQsV0FBVyxDQUFDLEdBQUcsQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDLFVBQVUsQ0FBQztDQUNwRDtBQUVELFNBQVMsYUFBYTtJQUNsQixJQUFNLFFBQVEsR0FBa0IsV0FBVyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzFELElBQUkseUJBQXlCLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxFQUFFO1FBQ2pELElBQU0sS0FBSyxHQUFHLHlCQUF5QixDQUFDLFNBQVMsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNqRSxJQUFJLEtBQUssS0FBSyxFQUFFLEVBQUU7WUFDZCx5QkFBeUIsQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDaEQsUUFBUSxDQUFDLFFBQVEsQ0FBQztnQkFDZCxVQUFVLEVBQUUsS0FBSztnQkFDakIsWUFBWSxFQUFFLElBQUk7YUFDckIsQ0FBQyxDQUFDO1NBQ047S0FDSjtBQUNMLENBQUM7QUFDRCxXQUFXLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxXQUFXLEVBQUUsVUFBQyxJQUFJO0lBQ3pDLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtRQUNkLElBQU0sR0FBRyxHQUFHLElBQUksa0JBQWtCLENBQUMsWUFBWSxDQUFDLEVBQUUsRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDbEUsYUFBYSxFQUFFLENBQUM7S0FDbkI7U0FBTSxJQUFJLElBQUksQ0FBQyxHQUFHLEVBQUU7UUFDakIsYUFBYSxFQUFFLENBQUM7S0FDbkI7QUFDTCxDQUFDLENBQUMsQ0FBQztBQUNILFdBQVcsQ0FBQyxHQUFHLENBQUMsRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG5JbiBOYXRpdmVTY3JpcHQsIHRoZSBhcHAuanMgZmlsZSBpcyB0aGUgZW50cnkgcG9pbnQgdG8geW91ciBhcHBsaWNhdGlvbi5cbllvdSBjYW4gdXNlIHRoaXMgZmlsZSB0byBwZXJmb3JtIGFwcC1sZXZlbCBpbml0aWFsaXphdGlvbiwgYnV0IHRoZSBwcmltYXJ5XG5wdXJwb3NlIG9mIHRoZSBmaWxlIGlzIHRvIHBhc3MgY29udHJvbCB0byB0aGUgYXBw4oCZcyBmaXJzdCBtb2R1bGUuXG4qL1xuaW1wb3J0ICogYXMgYXBwbGljYXRpb24gZnJvbSBcInRucy1jb3JlLW1vZHVsZXMvYXBwbGljYXRpb25cIjtcbmltcG9ydCAqIGFzIHBsYXRmb3JtTW9kdWxlIGZyb20gXCJ0bnMtY29yZS1tb2R1bGVzL3BsYXRmb3JtXCI7XG5pbXBvcnQgKiBhcyBhcHBsaWNhdGlvblNldHRpbmdzTW9kdWxlIGZyb21cInRucy1jb3JlLW1vZHVsZXMvYXBwbGljYXRpb24tc2V0dGluZ3NcIjtcbmltcG9ydCB7RnJhbWV9IGZyb20gXCJ0bnMtY29yZS1tb2R1bGVzL3VpL2ZyYW1lXCI7XG5jb25zdCBkZWVwTGlua0RhdGFNb2R1bGUgPSByZXF1aXJlKFwiLi9zaGFyZWQvZGVlcC1saW5rLWRhdGFcIik7XG5pZiAocGxhdGZvcm1Nb2R1bGUuaXNJT1MpIHtcbiAgICBjb25zdCBteWRlbGVnYXRlID0gcmVxdWlyZShcIi4vZGVsZWdhdGUvbXktZGVsZWdhdGVcIik7XG4gICAgYXBwbGljYXRpb24uaW9zLmRlbGVnYXRlID0gbXlkZWxlZ2F0ZS5NeURlbGVnYXRlO1xufVxuXG5mdW5jdGlvbiBsYXVuY2hFeGFtcGxlKCkge1xuICAgIGNvbnN0IHJvb3RWaWV3OiBGcmFtZSA9IDxGcmFtZT4gYXBwbGljYXRpb24uZ2V0Um9vdFZpZXcoKTtcbiAgICBpZiAoYXBwbGljYXRpb25TZXR0aW5nc01vZHVsZS5oYXNLZXkoXCJnb3RvZXhhbXBsZVwiKSkge1xuICAgICAgICBjb25zdCB2YWx1ZSA9IGFwcGxpY2F0aW9uU2V0dGluZ3NNb2R1bGUuZ2V0U3RyaW5nKFwiZ290b2V4YW1wbGVcIik7XG4gICAgICAgIGlmICh2YWx1ZSAhPT0gXCJcIikge1xuICAgICAgICAgICAgYXBwbGljYXRpb25TZXR0aW5nc01vZHVsZS5yZW1vdmUoXCJnb3RvZXhhbXBsZVwiKTtcbiAgICAgICAgICAgIHJvb3RWaWV3Lm5hdmlnYXRlKHtcbiAgICAgICAgICAgICAgICBtb2R1bGVOYW1lOiB2YWx1ZSxcbiAgICAgICAgICAgICAgICBjbGVhckhpc3Rvcnk6IHRydWVcbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgfVxufVxuYXBwbGljYXRpb24ub24oYXBwbGljYXRpb24ucmVzdW1lRXZlbnQsIChhcmdzKSA9PiB7XG4gICAgaWYgKGFyZ3MuYW5kcm9pZCkge1xuICAgICAgICBjb25zdCBkbGQgPSBuZXcgZGVlcExpbmtEYXRhTW9kdWxlLkRlZXBMaW5rRGF0YShcIlwiLCBhcmdzLmFuZHJvaWQpO1xuICAgICAgICBsYXVuY2hFeGFtcGxlKCk7XG4gICAgfSBlbHNlIGlmIChhcmdzLmlvcykge1xuICAgICAgICBsYXVuY2hFeGFtcGxlKCk7XG4gICAgfVxufSk7XG5hcHBsaWNhdGlvbi5ydW4oeyBtb2R1bGVOYW1lOiBcImFwcC1yb290XCIgfSk7XG5cbi8qXG5EbyBub3QgcGxhY2UgYW55IGNvZGUgYWZ0ZXIgdGhlIGFwcGxpY2F0aW9uIGhhcyBiZWVuIHN0YXJ0ZWQgYXMgaXQgd2lsbCBub3RcbmJlIGV4ZWN1dGVkIG9uIGlPUy5cbiovXG4iXX0= \ No newline at end of file +Application.run({ moduleName: "app-root" }); +/* +Do not place any code after the application has been started as it will not +be executed on iOS. +*/ diff --git a/app/app.ts b/app/app.ts index 0e355c9..00d6bfb 100644 --- a/app/app.ts +++ b/app/app.ts @@ -3,22 +3,20 @@ In NativeScript, the app.js file is the entry point to your application. You can use this file to perform app-level initialization, but the primary purpose of the file is to pass control to the app’s first module. */ -import * as application from "tns-core-modules/application"; -import * as platformModule from "tns-core-modules/platform"; -import * as applicationSettingsModule from"tns-core-modules/application-settings"; -import {Frame} from "tns-core-modules/ui/frame"; -const deepLinkDataModule = require("./shared/deep-link-data"); -if (platformModule.isIOS) { +import { Application, ApplicationSettings, Frame, isIOS } from "@nativescript/core"; +import { DeepLinkData } from "./shared/deep-link-data"; + +if (isIOS) { const mydelegate = require("./delegate/my-delegate"); - application.ios.delegate = mydelegate.MyDelegate; + Application.ios.delegate = mydelegate.MyDelegate; } function launchExample() { - const rootView: Frame = application.getRootView(); - if (applicationSettingsModule.hasKey("gotoexample")) { - const value = applicationSettingsModule.getString("gotoexample"); + const rootView: Frame = Application.getRootView(); + if (ApplicationSettings.hasKey("gotoexample")) { + const value = ApplicationSettings.getString("gotoexample"); if (value !== "") { - applicationSettingsModule.remove("gotoexample"); + ApplicationSettings.remove("gotoexample"); rootView.navigate({ moduleName: value, clearHistory: true @@ -26,15 +24,15 @@ function launchExample() { } } } -application.on(application.resumeEvent, (args) => { +Application.on(Application.resumeEvent, (args) => { if (args.android) { - const dld = new deepLinkDataModule.DeepLinkData("", args.android); + const dld = new DeepLinkData("", args.android); launchExample(); } else if (args.ios) { launchExample(); } }); -application.run({ moduleName: "app-root" }); +Application.run({ moduleName: "app-root" }); /* Do not place any code after the application has been started as it will not diff --git a/app/delegate/my-delegate.js b/app/delegate/my-delegate.js index e2e67a1..af27f87 100644 --- a/app/delegate/my-delegate.js +++ b/app/delegate/my-delegate.js @@ -1,5 +1,5 @@ -const deepLinkDataModule = require("../shared/deep-link-data"); -const MyDelegate = (function(_super) { +import { DeepLinkData } from "../shared/deep-link-data"; +export const MyDelegate = (function(_super) { __extends(MyDelegate, _super); MyDelegate.ObjCProtocols = [UIApplicationDelegate]; @@ -14,7 +14,7 @@ const MyDelegate = (function(_super) { MyDelegate.prototype.applicationHandleOpenURL = function (application, url) { console.log("MyDelegate.prototype.applicationHandleOpenURL"); - const dld = new deepLinkDataModule.DeepLinkData(url, undefined); + const dld = new DeepLinkData(url, undefined); return true; @@ -23,5 +23,3 @@ const MyDelegate = (function(_super) { return MyDelegate; }(UIResponder)); - -exports.MyDelegate = MyDelegate; diff --git a/app/home/first-page.js b/app/home/first-page.js index f6b5fa4..877f0fe 100644 --- a/app/home/first-page.js +++ b/app/home/first-page.js @@ -1,20 +1,21 @@ // >> frame-navigate-base -const getFrameById = require("tns-core-modules/ui/frame").getFrameById; +import { Frame, Transition } from "@nativescript/core"; + // >> (hide) -exports.navigate = function() { +export function navigate() { // << (hide) - // Example using `getFrameById(frameId)` to get a `Frame` reference + // Example using `Frame.getFrameById(frameId)` to get a `Frame` reference // As an alternative, we could use `topmost()` method or `page.frame` property - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); frame.navigate("home/second-page"); // >> (hide) -}; +} // << (hide) // << frame-navigate-base -exports.navigateByModule = function() { +export function navigateByModule() { // >> frame-navigate-module - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); const navigationEntry = { moduleName: "home/second-page", @@ -23,11 +24,11 @@ exports.navigateByModule = function() { }; frame.navigate(navigationEntry); // << frame-navigate-module -}; +} -exports.navigateWithBackstackVisible = function() { +export function navigateWithBackstackVisible() { // >> frame-navigate-backstackvisible - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); const navigationEntry = { moduleName: "home/second-page", @@ -35,11 +36,11 @@ exports.navigateWithBackstackVisible = function() { }; frame.navigate(navigationEntry); // << frame-navigate-backstackvisible -}; +} -exports.navigateWithClearHistory = function() { +export function navigateWithClearHistory() { // >> frame-navigate-clearhistory - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); const navigationEntry = { moduleName: "home/second-page", @@ -47,11 +48,11 @@ exports.navigateWithClearHistory = function() { }; frame.navigate(navigationEntry); // << frame-navigate-clearhistory -}; +} -exports.navigateWithTransition = function() { +export function navigateWithTransition() { // >> frame-navigate-transitions - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); const navigationEntry = { moduleName: "home/second-page", @@ -67,20 +68,20 @@ exports.navigateWithTransition = function() { // << frame-navigate-transitions // >> frame-navigate-default-transition - // const getFrameById = require("tns-core-modules/ui/frame").getFrameById; - // const myFrame = getFrameById("firstFrame"); + // import { Frame } from "@nativescript/core"; + // const myFrame = Frame.getFrameById("firstFrame"); myFrame.transition = { name: "flip" }; myFrame.navigate("main-page"); // << frame-navigate-default-transition // >> frame-navigate-defailt-transition-app - // const frameModule = require("tns-core-modules/ui/frame"); - frameModule.Frame.defaultTransition = { name: "fade" }; + // import { Frame } from "@nativescript/core"; + Frame.defaultTransition = { name: "fade" }; // << frame-navigate-defailt-transition-app -}; +} -exports.navigatePlatformSpecificTransitions = function() { +export function navigatePlatformSpecificTransitions() { // >> frame-navigate-platform-specific-transitions const navigationEntry = { moduleName: "main-page", @@ -97,15 +98,16 @@ exports.navigatePlatformSpecificTransitions = function() { curve: "easeOut" } }; - const frame = getFrameById("my-frame"); + const frame = Frame.getFrameById("my-frame"); frame.navigate(navigationEntry); // << frame-navigate-platform-specific-transitions -}; +} // >> frame-navigate-custom-transitions-android-ts -const transition = require("tns-core-modules/ui/transition"); +// import { Transition } from "@nativescript/core"; const floatType = java.lang.Float.class.getField("TYPE").get(null); -const CustomTransition = (function (_super) { + +export const CustomTransition = (function (_super) { __extends(CustomTransition, _super); function CustomTransition() { _super.apply(this, arguments); @@ -113,13 +115,13 @@ const CustomTransition = (function (_super) { CustomTransition.prototype.createAndroidAnimator = function(transitionType) { const scaleValues = java.lang.reflect.Array.newInstance(floatType, 2); switch (transitionType) { - case transition.AndroidTransitionType.enter: - case transition.AndroidTransitionType.popEnter: + case Transition.AndroidTransitionType.enter: + case Transition.AndroidTransitionType.popEnter: scaleValues[0] = 0; scaleValues[1] = 1; break; - case transition.AndroidTransitionType.exit: - case transition.AndroidTransitionType.popExit: + case Transition.AndroidTransitionType.exit: + case Transition.AndroidTransitionType.popExit: scaleValues[0] = 1; scaleValues[1] = 0; break; @@ -141,13 +143,12 @@ const CustomTransition = (function (_super) { }; return CustomTransition; -})(transition.Transition); -exports.CustomTransition = CustomTransition; +})(Transition.Transition); // << frame-navigate-custom-transitions-android-ts // >> frame-navigate-custom-transitions-ios-ts -// const transition = require("tns-core-modules/ui/transition"); -const CustomTransitionIOS = (function (_super) { +// import { Transition } from "@nativescript/core"; +export const CustomTransitionIOS = (function (_super) { __extends(CustomTransition, _super); function CustomTransition() { _super.apply(this, arguments); @@ -175,15 +176,14 @@ const CustomTransitionIOS = (function (_super) { }; return CustomTransitionIOS; -})(transition.Transition); -exports.CustomTransitionIOS = CustomTransitionIOS; +})(Transition.Transition); // << frame-navigate-custom-transitions-ios-ts -exports.goBack = function() { +export function goBack() { // >> frame-navigate-go-back - // const getFrameById = require("tns-core-modules/ui/frame").getFrameById; - const myFrame = getFrameById("my-frame"); + // import { Frame } from "@nativescript/core"; + const myFrame = Frame.getFrameById("my-frame"); myFrame.goBack(); // << frame-navigate-go-back -}; +} diff --git a/app/home/first-ts-page.ts b/app/home/first-ts-page.ts index aff3464..2b6d9a6 100644 --- a/app/home/first-ts-page.ts +++ b/app/home/first-ts-page.ts @@ -1,28 +1,24 @@ -import { AnimationCurve } from "tns-core-modules/ui/enums"; -import * as frameModule from "tns-core-modules/ui/frame"; -import { isAndroid, isIOS } from "tns-core-modules/platform"; - // >> frame-navigate-base-ts -import { getFrameById } from "tns-core-modules/ui/frame"; +import { Frame } from "@nativescript/core"; // >> (hide) export function navigate() { // << (hide) - // Example using `getFrameById(frameId)` to get a `Frame` reference + // Example using `Frame.getFrameById(frameId)` to get a `Frame` reference // As an alternative, we could use `topmost()` method or `page.frame` property - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); frame.navigate("home/second-page"); // >> (hide) } // << (hide) // << frame-navigate-base-ts -import { NavigationEntry } from "tns-core-modules/ui/frame"; +import { NavigationEntry } from "@nativescript/core"; export function navigateByModule() { // >> frame-navigate-module-ts - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); - // import { NavigationEntry } from "tns-core-modules/ui/frame"; + // import { NavigationEntry } from "@nativescript/core"; const navigationEntry: NavigationEntry = { moduleName: "home/second-page", context: { info: "something you want to pass to your page" }, @@ -34,9 +30,9 @@ export function navigateByModule() { export function navigateWithBackstackVisible() { // >> frame-navigate-backstackvisible-ts - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); - // import { NavigationEntry } from "tns-core-modules/ui/frame"; + // import { NavigationEntry } from "@nativescript/core"; const navigationEntry: NavigationEntry = { moduleName: "home/second-page", backstackVisible: false @@ -47,9 +43,9 @@ export function navigateWithBackstackVisible() { export function navigateWithClearHistory() { // >> frame-navigate-clearhistory-ts - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); - // import { NavigationEntry } from "tns-core-modules/ui/frame"; + // import { NavigationEntry } from "@nativescript/core"; const navigationEntry: NavigationEntry = { moduleName: "home/second-page", clearHistory: true @@ -58,12 +54,13 @@ export function navigateWithClearHistory() { // << frame-navigate-clearhistory-ts } +import { Enums } from "@nativescript/core"; + export function navigateWithTransition() { // >> frame-navigate-transitions-ts - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); - // import { NavigationEntry } from "tns-core-modules/ui/frame"; - // import { AnimationCurve } from "tns-core-modules/ui/enums"; + // import { Enums, NavigationEntry } from "@nativescript/core"; const navigationEntry: NavigationEntry = { moduleName: "home/second-page", animated: true, @@ -71,7 +68,7 @@ export function navigateWithTransition() { transition: { name: "slide", duration: 380, - curve: AnimationCurve.easeIn + curve: Enums.AnimationCurve.easeIn } }; frame.navigate(navigationEntry); @@ -79,15 +76,15 @@ export function navigateWithTransition() { // >> frame-navigate-default-transition-ts - // const getFrameById = require("tns-core-modules/ui/frame").getFrameById; - // const frame = getFrameById("firstFrame"); + // import { Frame } from "@nativescript/core"; + // const frame = Frame.getFrameById("firstFrame"); frame.transition = { name: "flip" }; frame.navigate("main-page"); // << frame-navigate-default-transition-ts // >> frame-navigate-defailt-transition-app-ts - // import * as frameModule from "tns-core-modules/ui/frame"; - frameModule.Frame.defaultTransition = { name: "fade" }; + // import { Frame } from "@nativescript/core"; + Frame.defaultTransition = { name: "fade" }; // << frame-navigate-defailt-transition-app-ts } @@ -100,21 +97,21 @@ export function navigatePlatformSpecificTransitions() { transitioniOS: { name: "curl", duration: 380, - curve: AnimationCurve.easeInOut + curve: Enums.AnimationCurve.easeInOut }, transitionAndroid: { name: "explode", duration: 300, - curve: AnimationCurve.spring + curve: Enums.AnimationCurve.spring } }; - const frame = getFrameById("my-frame"); + const frame = Frame.getFrameById("my-frame"); frame.navigate(navigationEntry); // << frame-navigate-platform-specific-transitions-ts } // >> frame-navigate-custom-transitions-ios-ts -// import { Transition } from "tns-core-modules/ui/transition"; +// import { Transition } from "@nativescript/core"; declare let UINavigationControllerOperation: any; // or use tns-platform-declarations export class CustomTransitionIOS extends Transition { @@ -159,18 +156,18 @@ export class CustomTransitionIOS extends Transition { // << frame-navigate-custom-transitions-ios-ts // >> frame-navigate-custom-transitions-android-ts -import { Transition, AndroidTransitionType } from "tns-core-modules/ui/transition"; +import { Transition } from "@nativescript/core"; export class CustomTransition extends Transition { public createAndroidAnimator(transitionType: string): android.animation.Animator { const scaleValues = (Array).create("float", 2); switch (transitionType) { - case AndroidTransitionType.enter: - case AndroidTransitionType.popEnter: + case Transition.AndroidTransitionType.enter: + case Transition.AndroidTransitionType.popEnter: scaleValues[0] = 0; scaleValues[1] = 1; break; - case AndroidTransitionType.exit: - case AndroidTransitionType.popExit: + case Transition.AndroidTransitionType.exit: + case Transition.AndroidTransitionType.popExit: scaleValues[0] = 1; scaleValues[1] = 0; break; @@ -197,8 +194,8 @@ export class CustomTransition extends Transition { export function goBack() { // >> frame-navigate-go-back-ts - // import { getFrameById } from "tns-core-modules/ui/frame"; - const myFrame = getFrameById("my-frame"); + // import { Frame } from "@nativescript/core"; + const myFrame = Frame.getFrameById("my-frame"); myFrame.goBack(); // << frame-navigate-go-back-ts } diff --git a/app/home/second-page.js b/app/home/second-page.js index a547ff6..2c5e3c8 100644 --- a/app/home/second-page.js +++ b/app/home/second-page.js @@ -1,5 +1,5 @@ // >> nav-context-receive -function onNavigatedTo(args) { +export function onNavigatedTo(args) { const page = args.object; const navigationContext = page.navigationContext; @@ -8,5 +8,4 @@ function onNavigatedTo(args) { page.bindingContext = navigationContext; } -exports.onNavigatedTo = onNavigatedTo; // << nav-context-receive diff --git a/app/home/second-ts-page.ts b/app/home/second-ts-page.ts index 930fbd7..1362aea 100644 --- a/app/home/second-ts-page.ts +++ b/app/home/second-ts-page.ts @@ -1,5 +1,5 @@ // >> nav-context-receive-ts -import { Page, NavigatedData } from "tns-core-modules/ui/page"; +import { Page, NavigatedData } from "@nativescript/core"; // Event handler for Page "navigatedTo" event attached in details-page.xml e.g. export function onNavigatedTo(args: NavigatedData): void { diff --git a/app/link.js b/app/link.js index 5342e43..87f6f8c 100644 --- a/app/link.js +++ b/app/link.js @@ -1,6 +1,8 @@ -function Link(title, link) { - this.title = title; - this.link = link; +class Link { + constructor(title, link) { + this.title = title; + this.link = link; + } } -module.exports = Link; +export default Link; diff --git a/app/links-view-model.js b/app/links-view-model.js index bca5418..8485461 100644 --- a/app/links-view-model.js +++ b/app/links-view-model.js @@ -1,6 +1,4 @@ -const observableModule = require("tns-core-modules/data/observable"); -const observableArrayModule = require("tns-core-modules/data/observable-array"); -const frameModule = require("tns-core-modules/ui/frame"); +import { Frame, ObservableArray, fromObject } from "@nativescript/core"; function linksSort(value) { value.sort((a, b) => { @@ -16,24 +14,23 @@ function linksSort(value) { function ListViewLinksModel(info) { info = info || {}; linksSort(info.links); - - const viewModel = new observableModule.fromObject({ - "links": new observableArrayModule.ObservableArray(info.links), + const viewModel = new fromObject({ + "links": new ObservableArray(info.links), "actionBarTitle": info.actionBarTitle, "showTypeScriptExamples": info.showTypeScriptExamples ? info.showTypeScriptExamples : false, - "tsclinks": info.tsclinks ? new observableArrayModule.ObservableArray(info.tsclinks) : undefined + "tsclinks": info.tsclinks ? new ObservableArray(info.tsclinks) : undefined }); viewModel.set("onItemTap", (args) => { const linkItem = viewModel.get("links").getItem(args.index); - frameModule.topmost().navigate({ + Frame.topmost().navigate({ moduleName: linkItem.link, context: { "title": linkItem.title } }); }); viewModel.set("onSecondItemTap", (args) => { const linkItem = viewModel.get("tsclinks").getItem(args.index); - frameModule.topmost().navigate({ + Frame.topmost().navigate({ moduleName: linkItem.link, context: { "title": linkItem.title } }); @@ -46,4 +43,4 @@ function ListViewLinksModel(info) { return viewModel; } -module.exports = ListViewLinksModel; +export default ListViewLinksModel; diff --git a/app/main-page.js b/app/main-page.js index 809d393..a7840b2 100644 --- a/app/main-page.js +++ b/app/main-page.js @@ -1,59 +1,62 @@ -const ListViewLinksModel = require("./links-view-model"); -const link = require("./link"); +import Link from "./link"; +import ListViewLinksModel from "./links-view-model"; + const navigationLinks = [ - new link("Observable", "ns-framework-modules-category/observable/observable-page"), - new link("Observable Array", "ns-framework-modules-category/observable-array/observable-array-page"), - new link("Virtual Array", "ns-framework-modules-category/virtual-array/virtual-array-page"), - new link("Application", "ns-framework-modules-category/application/application-page"), - new link("Application Settings", "ns-framework-modules-category/application-settings/application-settings-page"), - new link("Action Bar", "ns-ui-widgets-category/action-bar/action-bar-page"), - new link("ActivityIndicator", "ns-ui-widgets-category/activity-indicator/activity-indicator-page"), - new link("Animations", "ns-ui-widgets-category/animations/animations-page"), - new link("Button", "ns-ui-widgets-category/button/button-page"), - new link("Color", "ns-framework-modules-category/color/color-page"), - new link("Connectivity", "ns-framework-modules-category/connectivity/connectivity-page"), - new link("Console", "ns-framework-modules-category/console/console-page"), - new link("DatePicker", "ns-ui-widgets-category/date-picker/date-picker-page"), - new link("Dialogs", "ns-ui-widgets-category/dialogs/dialogs-page"), - new link("Gestures", "ns-ui-widgets-category/gestures/gestures-page"), - new link("HtmlView", "ns-ui-widgets-category/html-view/html-view-page"), - new link("IconFonts", "ns-ui-category/icon-fonts/icon-fonts-page"), - new link("Image", "ns-ui-widgets-category/image/image-page"), - new link("Image Cache", "ns-ui-widgets-category/image-cache/image-cache-page"), - new link("Layouts", "ns-ui-widgets-category/layouts/layouts-page"), - new link("TimePicker", "ns-ui-widgets-category/time-picker/time-picker-page"), - new link("ScrollView", "ns-ui-widgets-category/scroll-view/scroll-view-page"), - new link("SearchBar", "ns-ui-widgets-category/search-bar/search-bar-page"), - new link("SegmentedBar", "ns-ui-widgets-category/segmented-bar/segmented-bar-page"), - new link("Slider", "ns-ui-widgets-category/slider/slider-page"), - new link("Switch", "ns-ui-widgets-category/switch/switch-page"), - new link("TabView", "ns-ui-widgets-category/tab-view/tab-view-page"), - new link("TextField", "ns-ui-widgets-category/text-field/text-field-page"), - new link("TextView", "ns-ui-widgets-category/text-view/text-view-page"), - new link("WebView", "ns-ui-widgets-category/web-view/web-view-page"), - new link("Style", "ns-ui-widgets-category/styling/styling-page"), - new link("Label", "ns-ui-widgets-category/label/label-page"), - new link("ListPicker", "ns-ui-widgets-category/list-picker/list-picker-page"), - new link("ListView", "ns-ui-widgets-category/list-view/list-view-page"), - new link("Page", "ns-ui-widgets-category/page/page-page"), - new link("Progress", "ns-ui-widgets-category/progress/progress-page"), - new link("Frame", "ns-ui-widgets-category/frame/frame-page"), - new link("Formatted String", "ns-ui-widgets-category/formatted-string/formatted-string-page"), - new link("Trace Module", "ns-framework-modules-category/trace/trace-page"), - new link("Timer Module", "ns-framework-modules-category/timer/timer-page"), - new link("Placeholder", "ns-ui-widgets-category/placeholder/placeholder-page"), - new link("Repeater", "ns-ui-widgets-category/repeater/repeater-page"), - new link("Platform Module", "ns-framework-modules-category/platform/platform-page"), - new link("FPS Meter", "ns-framework-modules-category/fps-meter/fps-meter-page"), - new link("HTTP Module", "ns-framework-modules-category/http/http-page"), - new link("Fetch", "ns-framework-modules-category/fetch/fetch-page"), - new link("ImageSource", "ns-framework-modules-category/image-source/image-source-page"), - new link("File System", "ns-framework-modules-category/file-system/file-system-page"), - new link("Modal view", "ns-ui-category/modal-view/modal-view-examples-page"), - new link("XML Parser", "ns-framework-modules-category/xml-parser/xml-parser-page") + new Link("Observable", "ns-framework-modules-category/observable/observable-page"), + new Link("Observable Array", "ns-framework-modules-category/observable-array/observable-array-page"), + new Link("Virtual Array", "ns-framework-modules-category/virtual-array/virtual-array-page"), + new Link("Application", "ns-framework-modules-category/application/application-page"), + new Link("Application Settings", "ns-framework-modules-category/application-settings/application-settings-page"), + new Link("Action Bar", "ns-ui-widgets-category/action-bar/action-bar-page"), + new Link("ActivityIndicator", "ns-ui-widgets-category/activity-indicator/activity-indicator-page"), + new Link("Animations", "ns-ui-widgets-category/animations/animations-page"), + new Link("Button", "ns-ui-widgets-category/button/button-page"), + new Link("Color", "ns-framework-modules-category/color/color-page"), + new Link("Connectivity", "ns-framework-modules-category/connectivity/connectivity-page"), + new Link("Console", "ns-framework-modules-category/console/console-page"), + new Link("DatePicker", "ns-ui-widgets-category/date-picker/date-picker-page"), + new Link("Dialogs", "ns-ui-widgets-category/dialogs/dialogs-page"), + new Link("Gestures", "ns-ui-widgets-category/gestures/gestures-page"), + new Link("HtmlView", "ns-ui-widgets-category/html-view/html-view-page"), + new Link("IconFonts", "ns-ui-category/icon-fonts/icon-fonts-page"), + new Link("Image", "ns-ui-widgets-category/image/image-page"), + new Link("Image Cache", "ns-ui-widgets-category/image-cache/image-cache-page"), + new Link("Layouts", "ns-ui-widgets-category/layouts/layouts-page"), + new Link("TimePicker", "ns-ui-widgets-category/time-picker/time-picker-page"), + new Link("ScrollView", "ns-ui-widgets-category/scroll-view/scroll-view-page"), + new Link("SearchBar", "ns-ui-widgets-category/search-bar/search-bar-page"), + new Link("SegmentedBar", "ns-ui-widgets-category/segmented-bar/segmented-bar-page"), + new Link("Slider", "ns-ui-widgets-category/slider/slider-page"), + new Link("Switch", "ns-ui-widgets-category/switch/switch-page"), + new Link("TabView", "ns-ui-widgets-category/tab-view/tab-view-page"), + new Link("TextField", "ns-ui-widgets-category/text-field/text-field-page"), + new Link("TextView", "ns-ui-widgets-category/text-view/text-view-page"), + new Link("WebView", "ns-ui-widgets-category/web-view/web-view-page"), + new Link("Style", "ns-ui-widgets-category/styling/styling-page"), + new Link("Label", "ns-ui-widgets-category/label/label-page"), + new Link("ListPicker", "ns-ui-widgets-category/list-picker/list-picker-page"), + new Link("ListView", "ns-ui-widgets-category/list-view/list-view-page"), + new Link("Page", "ns-ui-widgets-category/page/page-page"), + new Link("Progress", "ns-ui-widgets-category/progress/progress-page"), + new Link("Frame", "ns-ui-widgets-category/frame/frame-page"), + new Link("Formatted String", "ns-ui-widgets-category/formatted-string/formatted-string-page"), + new Link("Trace Module", "ns-framework-modules-category/trace/trace-page"), + new Link("Timer Module", "ns-framework-modules-category/timer/timer-page"), + new Link("Placeholder", "ns-ui-widgets-category/placeholder/placeholder-page"), + new Link("Repeater", "ns-ui-widgets-category/repeater/repeater-page"), + new Link("Platform Module", "ns-framework-modules-category/platform/platform-page"), + new Link("FPS Meter", "ns-framework-modules-category/fps-meter/fps-meter-page"), + new Link("HTTP Module", "ns-framework-modules-category/http/http-page"), + new Link("Fetch", "ns-framework-modules-category/fetch/fetch-page"), + new Link("ImageSource", "ns-framework-modules-category/image-source/image-source-page"), + new Link("File System", "ns-framework-modules-category/file-system/file-system-page"), + new Link("Modal view", "ns-ui-category/modal-view/modal-view-examples-page"), + new Link("XML Parser", "ns-framework-modules-category/xml-parser/xml-parser-page"), + new Link("BottomNavigation", "ns-ui-widgets-category/bottom-navigation/bottom-navigation-page"), + new Link("Tabs", "ns-ui-widgets-category/tabs/tabs-page") ]; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; const vm = new ListViewLinksModel({ links: navigationLinks, @@ -61,4 +64,3 @@ function onNavigatingTo(args) { }); page.bindingContext = vm; } -exports.onNavigatingTo = onNavigatingTo; diff --git a/app/ns-framework-modules-category/application-settings/application-settings-page.js b/app/ns-framework-modules-category/application-settings/application-settings-page.js index 64f33fa..21b4c22 100644 --- a/app/ns-framework-modules-category/application-settings/application-settings-page.js +++ b/app/ns-framework-modules-category/application-settings/application-settings-page.js @@ -1,14 +1,12 @@ -const ListViewLinksModel = require("../../links-view-model"); -const link = require("../../link"); +import ListViewLinksModel from "../../links-view-model"; +import Link from "../../link"; const navigationLinks = [ - new link("Basics", "ns-framework-modules-category/application-settings/basics/basics-page"), - new link("Native Access", "ns-framework-modules-category/application-settings/native-access/native-access-page") + new Link("Usage", "ns-framework-modules-category/application-settings/usage/usage-page") ]; const navigationLinksTsc = [ - new link("Basics", "ns-framework-modules-category/application-settings/basics/basics-ts-page"), - new link("Native Access", "ns-framework-modules-category/application-settings/native-access/native-access-ts-page") + new Link("Usage", "ns-framework-modules-category/application-settings/usage/usage-ts-page") ]; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; page.bindingContext = new ListViewLinksModel({ links: navigationLinks, @@ -17,4 +15,4 @@ function onNavigatingTo(args) { tsclinks: navigationLinksTsc }); } -exports.onNavigatingTo = onNavigatingTo; + diff --git a/app/ns-framework-modules-category/application-settings/basics/article.md b/app/ns-framework-modules-category/application-settings/basics/article.md deleted file mode 100644 index 8eb7e90..0000000 --- a/app/ns-framework-modules-category/application-settings/basics/article.md +++ /dev/null @@ -1,47 +0,0 @@ - - -### Get and Set Boolean - -Set and get a `boolean` value and provide default value in case it is not set. - - - -### Get and Set String - -Set and get a string value. - - - -### Get and Set Number - -Set and get a numeric value. - - - -### Key Check - -Checking for existence of specific key. - - - -### Delete a Value - -Removes a value (if existing) for a key. - - - -### Delete All Values - -Removes all values from the application settings. - - - -### Default Values - -Reading values that are not set before, while providing default value. - - - -Reading values that are not set before not providing default value. - - diff --git a/app/ns-framework-modules-category/application-settings/basics/basics-page.css b/app/ns-framework-modules-category/application-settings/basics/basics-page.css deleted file mode 100644 index 658fc9c..0000000 --- a/app/ns-framework-modules-category/application-settings/basics/basics-page.css +++ /dev/null @@ -1,13 +0,0 @@ -Label { - background-color: blue; - color: white; - margin:8; - padding: 6; -} - -#info { - background-color: orangered; - color: white; - margin:8; - padding: 16; -} \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/basics/basics-page.js b/app/ns-framework-modules-category/application-settings/basics/basics-page.js deleted file mode 100644 index 07e118a..0000000 --- a/app/ns-framework-modules-category/application-settings/basics/basics-page.js +++ /dev/null @@ -1,74 +0,0 @@ -// >> app-settings-require -const appSettings = require("application-settings"); -// << app-settings-require -const fromObject = require("data/observable").fromObject; - -class Item { - constructor(key, item) { - this.key = key; - this.item = item; - } -} - -function onNavigatingTo(args) { - // >> app-settings-bool-code - const items = []; - appSettings.setBoolean("isTurnedOn", true); - const isTurnedOn = appSettings.getBoolean("isTurnedOn", false); - // << app-settings-bool-code - items.push(new Item("isTurnedOn", `${isTurnedOn}`)); - - // >> app-settings-string-code - appSettings.setString("username", "NickIliev"); - const username = appSettings.getString("username"); - // << app-settings-string-code - items.push(new Item("username", `${username}`)); - - // >> app-settings-number-code - appSettings.setNumber("locationX", 54.321); - const locationX = parseFloat(appSettings.getNumber("locationX").toFixed(3)); - - // Note: The MIN & MAX number ranges are limited by the JavaScript number implementation - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER - // On Android, the native method is also setting java.lang.Float which might lead to approximations during the conversion. - // For really large numbers (e.g. like the value from getDate()) use setString and save the values as strings. - // << app-settings-number-code - items.push(new Item("locationX", `${locationX}`)); - - // >> app-settings-remove-entry - // will remove the setting for a key - appSettings.remove("keyToRemove"); - // << app-settings-remove-entry - - // >> app-settings-default-value-code - // will return "No string value" if there is no value for "noSuchKey" - const someKey = appSettings.getString("noSuchKey", "No string value"); - // << app-settings-default-value-code - items.push(new Item("noSuchKey", `${someKey}`)); - - // >> app-settings-no-value-code - // will return undefined if there is no value for "noSuchKey" - const defaultValue = appSettings.getString("noSuchKey"); - // << app-settings-no-value-code - items.push(new Item("noSuchKey", `${defaultValue}`)); - - // >> app-settings-no-key-code - // will return false if there is no "noBoolKey" - const noBoolKey = appSettings.hasKey("noBoolKey"); - // << app-settings-no-key-code - items.push(new Item("noBoolKey", `${noBoolKey}`)); - - const page = args.object; - const viewModel = fromObject({ - items: items - }); - - page.bindingContext = viewModel; -} -exports.onNavigatingTo = onNavigatingTo; - -function clearAll() { - // >> app-settings-clear-all - // Removes all values. - appSettings.clear(); - // << app-settings-clear-all -} diff --git a/app/ns-framework-modules-category/application-settings/basics/basics-page.xml b/app/ns-framework-modules-category/application-settings/basics/basics-page.xml deleted file mode 100644 index 0e919ef..0000000 --- a/app/ns-framework-modules-category/application-settings/basics/basics-page.xml +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.css b/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.css deleted file mode 100644 index 658fc9c..0000000 --- a/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.css +++ /dev/null @@ -1,13 +0,0 @@ -Label { - background-color: blue; - color: white; - margin:8; - padding: 6; -} - -#info { - background-color: orangered; - color: white; - margin:8; - padding: 16; -} \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.ts b/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.ts deleted file mode 100644 index f990388..0000000 --- a/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.ts +++ /dev/null @@ -1,73 +0,0 @@ -// >> app-settings-require-ts -import * as appSettings from "tns-core-modules/application-settings"; -// << app-settings-require-ts -import { fromObject } from "tns-core-modules/data/observable"; - -class Item { - key: string; - item: any; - - constructor(key, item) { - this.key = key; - this.item = item; - } -} - -export function onNavigatingTo(args) { - // >> app-settings-bool-code-ts - const items = []; - appSettings.setBoolean("isTurnedOn", true); - const isTurnedOn = appSettings.getBoolean("isTurnedOn", false); - // << app-settings-bool-code-ts - items.push(new Item("isTurnedOn", `${isTurnedOn}`)); - - // >> app-settings-string-code-ts - appSettings.setString("username", "NickIliev"); - const username = appSettings.getString("username"); - // << app-settings-string-code-ts - items.push(new Item("username", `${username}`)); - - // >> app-settings-number-code-ts - appSettings.setNumber("locationX", 54.321); - const locX = appSettings.getNumber("locationX").toFixed(3); - - // Note: The MIN & MAX number ranges are limited by the JavaScript number implementation - // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER - // On Android, the native method is also setting java.lang.Float which leads to approximations during conversion. - // For really large numbers (e.g. like the value from getDate()) use setString and save the values as strings. - // << app-settings-number-code-ts - const locationX = parseFloat(locX); - items.push(new Item("locationX", `${locationX}`)); - - // >> app-settings-default-value-code-ts - // will return "No string value" if there is no value for "noSuchKey" - const someKey = appSettings.getString("noSuchKey", "No string value"); - // << app-settings-default-value-code-ts - items.push(new Item("noSuchKey", `${someKey}`)); - - // >> app-settings-no-value-code-ts - // will return undefined if there is no value for "noSuchKey" - const defaultValue = appSettings.getString("noSuchKey"); - // << app-settings-no-value-code-ts - items.push(new Item("noSuchKey", `${defaultValue}`)); - - // >> app-settings-no-key-code-ts - // will return false if there is no "noBoolKey" - const noBoolKey = appSettings.hasKey("noBoolKey"); - // << app-settings-no-key-code-ts - items.push(new Item("noBoolKey", `${noBoolKey}`)); - - const page = args.object; - const viewModel = fromObject({ - items: items - }); - - page.bindingContext = viewModel; -} - -function clearAll() { - // >> app-settings-clear-all-ts - // Removes all values. - appSettings.clear(); - // << app-settings-clear-all-ts -} diff --git a/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.xml b/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.xml deleted file mode 100644 index 0e919ef..0000000 --- a/app/ns-framework-modules-category/application-settings/basics/basics-ts-page.xml +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/end.md b/app/ns-framework-modules-category/application-settings/end.md index d317ba7..0713df8 100644 --- a/app/ns-framework-modules-category/application-settings/end.md +++ b/app/ns-framework-modules-category/application-settings/end.md @@ -1,5 +1,28 @@ -**Native Component** +## Methods + +| 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/userdefaults) | +| [android.content.SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences.html) | [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults) | diff --git a/app/ns-framework-modules-category/application-settings/native-access/article.md b/app/ns-framework-modules-category/application-settings/native-access/article.md deleted file mode 100644 index 4c7565c..0000000 --- a/app/ns-framework-modules-category/application-settings/native-access/article.md +++ /dev/null @@ -1,3 +0,0 @@ -One of the main advantages of NativeScript is the direct access to the native APIs for both Android and iOS. The `application-module` functionality can be extended with native logic just as every other module and widget in NativeScript. The below example demonstrates how to access all stored keys using the native APIs on Android and iOS. - - \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/native-access/native-access-page.css b/app/ns-framework-modules-category/application-settings/native-access/native-access-page.css deleted file mode 100644 index 1d8430c..0000000 --- a/app/ns-framework-modules-category/application-settings/native-access/native-access-page.css +++ /dev/null @@ -1,6 +0,0 @@ -Label { - background-color: orangered; - color: white; - margin:8; - padding: 16; -} \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/native-access/native-access-page.js b/app/ns-framework-modules-category/application-settings/native-access/native-access-page.js deleted file mode 100644 index 93a8e9c..0000000 --- a/app/ns-framework-modules-category/application-settings/native-access/native-access-page.js +++ /dev/null @@ -1,31 +0,0 @@ -// >> app-settings-native-access -const getNativeApplication = require("application").getNativeApplication; -const platformModule = require("platform"); -const utils = require("utils/utils"); - -function getAll() { - if (platformModule.isAndroid) { - const sharedPreferences = getNativeApplication().getApplicationContext().getSharedPreferences("prefs.db", 0); - const mappedPreferences = sharedPreferences.getAll(); - const iterator = mappedPreferences.keySet().iterator(); - - while (iterator.hasNext()) { - const key = iterator.next(); - console.log(key); // myString, myNumbver, isReal - const value = mappedPreferences.get(key); - console.log(value); // "John Doe", 42, true - } - - } else if (platformModule.isIOS) { - // Note: If using TypeScript you will need tns-platform-declarations plugin to access the native APIs like NSUserDefaults - const userDefaults = utils.ios.getter(NSUserDefaults, NSUserDefaults.standardUserDefaults); - const dictionaryUserDefaults = userDefaults.dictionaryRepresentation(); - - const allKeys = dictionaryUserDefaults.allKeys; - console.log(allKeys); - const allValues = dictionaryUserDefaults.allValues; - console.log(allValues); - } -} -// << app-settings-native-access -exports.getAll = getAll; diff --git a/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.css b/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.css deleted file mode 100644 index 1d8430c..0000000 --- a/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.css +++ /dev/null @@ -1,6 +0,0 @@ -Label { - background-color: orangered; - color: white; - margin:8; - padding: 16; -} \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.ts b/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.ts deleted file mode 100644 index 2615101..0000000 --- a/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.ts +++ /dev/null @@ -1,30 +0,0 @@ -// >> app-settings-native-access-ts -import { getNativeApplication } from "tns-core-modules/application"; -import { isAndroid, isIOS } from "tns-core-modules/platform"; - -export function getAll() { - if (isAndroid) { - const sharedPreferences = getNativeApplication().getApplicationContext().getSharedPreferences("prefs.db", 0); - const mappedPreferences = sharedPreferences.getAll(); - const iterator = mappedPreferences.keySet().iterator(); - - while (iterator.hasNext()) { - const key = iterator.next(); - console.log(key); // myString, myNumbver, isReal - const value = mappedPreferences.get(key); - console.log(value); // "John Doe", 42, true - } - - } else if (isIOS) { - // tslint:disable-next-line - // Note: If using TypeScript you will need tns-platform-declarations plugin to access the native APIs like NSUserDefaults - const userDefaults = NSUserDefaults.standardUserDefaults; - const dictionaryUserDefaults = userDefaults.dictionaryRepresentation(); - - const allKeys = dictionaryUserDefaults.allKeys; - console.log(allKeys); - const allValues = dictionaryUserDefaults.allValues; - console.log(allValues); - } -} -// << app-settings-native-access-ts diff --git a/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.xml b/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.xml deleted file mode 100644 index a043377..0000000 --- a/app/ns-framework-modules-category/application-settings/native-access/native-access-ts-page.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/overview.md b/app/ns-framework-modules-category/application-settings/overview.md index 9b1b46f..ad97a02 100644 --- a/app/ns-framework-modules-category/application-settings/overview.md +++ b/app/ns-framework-modules-category/application-settings/overview.md @@ -1,6 +1 @@ -The [Application Settings](https://docs.nativescript.org/api-reference/modules/_application_settings_) module is used to store strings, booleans and numbers in built-in key/value store. -The module uses `SharedPreferences` on Android and `NSUserDefaults` on iOS. The application-settings is suitable for tasks like saving and retriving small portions of custom values from the device’s local storage. Storing to local storage means that you can reuse the key-value pairs after the application is restarted (e.g. remember if a user has logged in orsave user UI preferences). - -The application settings module is required from `tns-core-modules/application-settings`. - - \ 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/ns-framework-modules-category/application-settings/usage/article.md b/app/ns-framework-modules-category/application-settings/usage/article.md new file mode 100644 index 0000000..558a959 --- /dev/null +++ b/app/ns-framework-modules-category/application-settings/usage/article.md @@ -0,0 +1,4 @@ +Basic usage of the `application-settings` module in a component: + + + diff --git a/app/ns-framework-modules-category/application-settings/usage/usage-page.js b/app/ns-framework-modules-category/application-settings/usage/usage-page.js new file mode 100644 index 0000000..44aa09f --- /dev/null +++ b/app/ns-framework-modules-category/application-settings/usage/usage-page.js @@ -0,0 +1,29 @@ +// >> app-settings-code-js +import { ApplicationSettings } from "@nativescript/core"; + + +export function onNavigatingTo(args) { + ApplicationSettings.setBoolean("isTurnedOn", true); + ApplicationSettings.setString("username", "Wolfgang"); + ApplicationSettings.setNumber("locationX", 54.321); + + const isTurnedOn = ApplicationSettings.getBoolean("isTurnedOn"); + const username = ApplicationSettings.getString("username"); + const locationX = ApplicationSettings.getNumber("locationX"); + + // Will return "No string value" if there is no value for "noSuchKey" + const someKey = ApplicationSettings.getString("noSuchKey", "No string value"); + + // Will return false if there is no key with name "noSuchKey" + const isKeExisting = ApplicationSettings.hasKey("noSuchKey"); +} + + +function onClear() { + // Removing a single entry via its key name + ApplicationSettings.remove("isTurnedOn"); + + // Clearing the whole application-settings for this app + ApplicationSettings.clear(); +} +// << app-settings-code-js diff --git a/app/ns-framework-modules-category/application-settings/usage/usage-page.xml b/app/ns-framework-modules-category/application-settings/usage/usage-page.xml new file mode 100644 index 0000000..8889d4f --- /dev/null +++ b/app/ns-framework-modules-category/application-settings/usage/usage-page.xml @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/app/ns-framework-modules-category/application-settings/usage/usage-ts-page.ts b/app/ns-framework-modules-category/application-settings/usage/usage-ts-page.ts new file mode 100644 index 0000000..4bb5c11 --- /dev/null +++ b/app/ns-framework-modules-category/application-settings/usage/usage-ts-page.ts @@ -0,0 +1,27 @@ +// >> app-settings-code-ts +import { ApplicationSettings } from "@nativescript/core"; + +export function onNavigatingTo(args) { + ApplicationSettings.setBoolean("isTurnedOn", true); + ApplicationSettings.setString("username", "Wolfgang"); + ApplicationSettings.setNumber("locationX", 54.321); + + const isTurnedOn: boolean = ApplicationSettings.getBoolean("isTurnedOn"); + const username: string = ApplicationSettings.getString("username"); + const locationX: number = ApplicationSettings.getNumber("locationX"); + + // Will return "No string value" if there is no value for "noSuchKey" + const someKey: string = ApplicationSettings.getString("noSuchKey", "No string value"); + + // Will return false if there is no key with name "noSuchKey" + let isKeExisting: boolean = ApplicationSettings.hasKey("noSuchKey"); +} + +function onClear() { + // Removing a single entry via its key name + ApplicationSettings.remove("isTurnedOn"); + + // Clearing the whole application-settings for this app + ApplicationSettings.clear(); +} +// << app-settings-code-ts diff --git a/app/ns-framework-modules-category/application-settings/usage/usage-ts-page.xml b/app/ns-framework-modules-category/application-settings/usage/usage-ts-page.xml new file mode 100644 index 0000000..8889d4f --- /dev/null +++ b/app/ns-framework-modules-category/application-settings/usage/usage-ts-page.xml @@ -0,0 +1,8 @@ + + + + + + + \ No newline at end of file diff --git a/app/ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-page.js b/app/ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-page.js index fd581a1..8ad9565 100644 --- a/app/ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-page.js +++ b/app/ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-page.js @@ -1,25 +1,22 @@ - -const applicationModule = require("tns-core-modules/application"); -const Observable = require("tns-core-modules/data/observable").Observable; -const platformModule = require("tns-core-modules/platform"); +import { AndroidApplication, Observable, isAndroid } from "@nativescript/core"; let vm; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; page.actionBar.title = ""; vm = new Observable(); vm.set("info", "Using Android Broadcast Receiver \nto check the battery life"); vm.set("batteryLife", "0"); - vm.set("isAndroid", platformModule.isAndroid); + vm.set("isAndroid", isAndroid); page.bindingContext = vm; page.actionBar.title = args.context.title; } -exports.onNavigatingTo = onNavigatingTo; -function onNavigatedTo(args) { + +export function onNavigatedTo(args) { vm.set("actionBarTitle", args.context.actionBarTitle); // >> broadcast-receiver - if (platformModule.isAndroid) { - // use tns-platform-dclarations to acces native APIs (e.g. ndroid.content.Intent) + if (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); @@ -27,19 +24,19 @@ function onNavigatedTo(args) { vm.set("batteryLife", percent.toString()); }; - applicationModule.android.registerBroadcastReceiver( + AndroidApplication.android.registerBroadcastReceiver( android.content.Intent.ACTION_BATTERY_CHANGED, receiverCallback ); } // << broadcast-receiver } -exports.onNavigatedTo = onNavigatedTo; -function onUnloaded() { - if (platformModule.isAndroid) { + +export function onUnloaded() { + if (isAndroid) { // >> broadcast-receiver-remove - applicationModule.android.unregisterBroadcastReceiver(android.content.Intent.ACTION_BATTERY_CHANGED); + AndroidApplication.android.unregisterBroadcastReceiver(android.content.Intent.ACTION_BATTERY_CHANGED); // << broadcast-receiver-remove } } -exports.onUnloaded = onUnloaded; + diff --git a/app/ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-ts-page.ts b/app/ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-ts-page.ts index 67f02d7..d0baf93 100644 --- a/app/ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-ts-page.ts +++ b/app/ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-ts-page.ts @@ -1,9 +1,5 @@ -import * as applicationModule from "tns-core-modules/application"; -import { android as androidApp } from "tns-core-modules/application"; -import { Observable } from "tns-core-modules/data/observable"; -import { isAndroid } from "tns-core-modules/platform"; -import { Page, NavigatedData } from "tns-core-modules/ui/page"; +import { Application, NavigatedData, Observable, Page, isAndroid } from "@nativescript/core"; let vm; export function onNavigatingTo(args: NavigatedData) { @@ -21,17 +17,17 @@ export function onNavigatedTo(args: NavigatedData) { vm.set("actionBarTitle", args.context.actionBarTitle); // >> app-class-properties - // import { android as androidApp } from "tns-core-modules/application"; - let isPaused = androidApp.paused; // e.g. false - let packageName = androidApp.packageName; // The package ID e.g. org.nativescript.nativescriptsdkexamplesng - let nativeApp = androidApp.nativeApp; // The native APplication reference - let foregroundActivity = androidApp.foregroundActivity; // The current Activity reference - let context = androidApp.context; // The current Android context + // import { Application } from "@nativescript/core"; + let isPaused = Application.android.paused; // e.g. false + let packageName = Application.android.packageName; // The package ID e.g. org.nativescript.nativescriptsdkexamplesng + let nativeApp = Application.android.nativeApp; // The native Application reference + let foregroundActivity = Application.android.foregroundActivity; // The current Activity reference + let context = Application.android.context; // The current Android context // << app-class-properties // >> broadcast-receiver-ts if (isAndroid) { - // use tns-platform-dclarations to access native APIs (e.g. android.content.Intent) + // use tns-platform-declarations to access native APIs (e.g. android.content.Intent) let receiverCallback = (androidContext, intent) => { const level = intent.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1); const scale = intent.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1); @@ -39,7 +35,7 @@ export function onNavigatedTo(args: NavigatedData) { vm.set("batteryLife", percent.toString()); }; - applicationModule.android.registerBroadcastReceiver( + Application.android.registerBroadcastReceiver( android.content.Intent.ACTION_BATTERY_CHANGED, receiverCallback ); @@ -50,7 +46,7 @@ export function onNavigatedTo(args: NavigatedData) { export function onUnloaded() { if (isAndroid) { // >> broadcast-receiver-remove-ts - applicationModule.android.unregisterBroadcastReceiver(android.content.Intent.ACTION_BATTERY_CHANGED); + Application.android.unregisterBroadcastReceiver(android.content.Intent.ACTION_BATTERY_CHANGED); // << broadcast-receiver-remove-ts } } diff --git a/app/ns-framework-modules-category/application/application-events/application-events-page.js b/app/ns-framework-modules-category/application/application-events/application-events-page.js index 44424a2..3d3726a 100644 --- a/app/ns-framework-modules-category/application/application-events/application-events-page.js +++ b/app/ns-framework-modules-category/application/application-events/application-events-page.js @@ -1,8 +1,7 @@ // >> application-import -const applicationModule = require("tns-core-modules/application"); +import { Application } from "@nativescript/core"; // << application-import -const Observable = require("tns-core-modules/data/observable").Observable; -const enums = require("ui/enums"); +import { Observable, Enums } from "@nativescript/core"; let vm; let launchListener; let suspendListener; @@ -13,28 +12,28 @@ let lowMemoryListener; let orientationChangedListener; let uncaughtErrorListener; -const onNavigatingTo = (args) => { +export const onNavigatingTo = (args) => { const page = args.object; vm = new Observable(); vm.set("actionBarTitle", args.context.actionBarTitle); vm.set("info", "Refer to the code-behind files \nfor Application Events snippets"); - if (applicationModule.android) { - const activity = applicationModule.android.foregroundActivity; + if (Application.android) { + const activity = Application.android.foregroundActivity; const orientationEnum = activity.getResources().getConfiguration().orientation; - vm.set("orientation", (orientationEnum === 1 ? enums.DeviceOrientation.portrait : enums.DeviceOrientation.landscape)); + vm.set("orientation", (orientationEnum === 1 ? Enums.DeviceOrientation.portrait : Enums.DeviceOrientation.landscape)); vm.set("resumeEvent", ""); vm.set("resumeEvent", ""); vm.set("launchEvent", ""); vm.set("displayedEvent", ""); - } else if (applicationModule.ios) { + } else if (Application.ios) { vm.set("orientation", "portrait"); } page.bindingContext = vm; page.actionBar.title = args.context.title; }; -exports.onNavigatingTo = onNavigatingTo; -const onGridLoaded = (args) => { + +export const onGridLoaded = (args) => { // >> application-events-launch launchListener = (args) => { // The root view for this Window on iOS or Activity for Android. @@ -43,7 +42,7 @@ const onGridLoaded = (args) => { console.log("The appication was launched!"); vm.set("resumeEvent", "The appication was launched!"); }; - applicationModule.on(applicationModule.launchEvent, launchListener); + Application.on(Application.launchEvent, launchListener); // << application-events-launch // >> application-events-suspend @@ -51,7 +50,7 @@ const onGridLoaded = (args) => { console.log("The appication was suspended!"); vm.set("suspendEvent", "The appication was suspended!"); }; - applicationModule.on(applicationModule.suspendEvent, suspendListener); + Application.on(Application.suspendEvent, suspendListener); // << application-events-suspend // >> application-events-resume @@ -59,14 +58,14 @@ const onGridLoaded = (args) => { console.log("The appication was resumed!"); vm.set("resumeEvent", "The appication was resumed!"); }; - applicationModule.on(applicationModule.resumeEvent, resumeListener); + Application.on(Application.resumeEvent, resumeListener); // << application-events-resume // >> application-events-exit exitListener = (args) => { console.log("The appication was closed!"); }; - applicationModule.on(applicationModule.exitEvent, exitListener); + Application.on(Application.exitEvent, exitListener); // << application-events-exit // >> application-events-displayed @@ -74,7 +73,7 @@ const onGridLoaded = (args) => { console.log("NativeScript displayedEvent!"); vm.set("displayedEvent", "The appication is displayed!"); }; - applicationModule.on(applicationModule.displayedEvent, displayedListener); + Application.on(Application.displayedEvent, displayedListener); // << application-events-displayed // >> application-events-low-memory @@ -82,7 +81,7 @@ const onGridLoaded = (args) => { // the instance that has raidsed the event console.log("Instance: ", args.object); }; - applicationModule.on(applicationModule.lowMemoryEvent, lowMemoryListener); + Application.on(Application.lowMemoryEvent, lowMemoryListener); // << application-events-low-memory // >> application-events-orientation @@ -91,7 +90,7 @@ const onGridLoaded = (args) => { console.log("Orientation: ", args.newValue); vm.set("orientation", args.newValue); }; - applicationModule.on(applicationModule.orientationChangedEvent, orientationChangedListener); + Application.on(Application.orientationChangedEvent, orientationChangedListener); // << application-events-orientation // >> application-events-error @@ -99,21 +98,19 @@ const onGridLoaded = (args) => { // UnhandledErrorEventData.error: NativeScriptError console.log("NativeScript Error: ", args.error); }; - applicationModule.on(applicationModule.uncaughtErrorEvent, uncaughtErrorListener); + Application.on(Application.uncaughtErrorEvent, uncaughtErrorListener); // << application-events-error }; -exports.onGridLoaded = onGridLoaded; -const onGridUnloaded = () => { +export const onGridUnloaded = () => { // >> application-events-off - applicationModule.off(applicationModule.launchEvent, launchListener); - applicationModule.off(applicationModule.resumeEvent, resumeListener); - applicationModule.off(applicationModule.suspendEvent, suspendListener); - applicationModule.off(applicationModule.exitEvent, exitListener); - applicationModule.off(applicationModule.displayedEvent, displayedListener); - applicationModule.off(applicationModule.lowMemoryEvent, lowMemoryListener); - applicationModule.off(applicationModule.orientationChangedEvent, orientationChangedListener); - applicationModule.off(applicationModule.uncaughtErrorEvent, uncaughtErrorListener); + Application.off(Application.launchEvent, launchListener); + Application.off(Application.resumeEvent, resumeListener); + Application.off(Application.suspendEvent, suspendListener); + Application.off(Application.exitEvent, exitListener); + Application.off(Application.displayedEvent, displayedListener); + Application.off(Application.lowMemoryEvent, lowMemoryListener); + Application.off(Application.orientationChangedEvent, orientationChangedListener); + Application.off(Application.uncaughtErrorEvent, uncaughtErrorListener); // << application-events-off }; -exports.onGridUnloaded = onGridUnloaded; diff --git a/app/ns-framework-modules-category/application/application-events/application-events-page.xml b/app/ns-framework-modules-category/application/application-events/application-events-page.xml index 7933902..ac62b84 100644 --- a/app/ns-framework-modules-category/application/application-events/application-events-page.xml +++ b/app/ns-framework-modules-category/application/application-events/application-events-page.xml @@ -4,10 +4,10 @@ diff --git a/app/ns-framework-modules-category/application/application-events/application-events-ts-page.ts b/app/ns-framework-modules-category/application/application-events/application-events-ts-page.ts index c4b492a..cef9583 100644 --- a/app/ns-framework-modules-category/application/application-events/application-events-ts-page.ts +++ b/app/ns-framework-modules-category/application/application-events/application-events-ts-page.ts @@ -1,8 +1,7 @@ // >> application-import-ts -import * as applicationModule from "tns-core-modules/application"; +import { Application, Enums } from "@nativescript/core"; // << application-import-ts -import { Observable } from "tns-core-modules/data/observable"; -import * as enums from "tns-core-modules/ui/enums"; +import { Observable } from "@nativescript/core"; let vm; let launchListener; let suspendListener; @@ -18,20 +17,20 @@ export const onNavigatingTo = (navigatedData) => { vm = new Observable(); vm.set("actionBarTitle", navigatedData.context.actionBarTitle); vm.set("info", "Refer to the code-behind files \nfor Application Events snippets"); - if (applicationModule.android) { - const activity = applicationModule.android.foregroundActivity; + if (Application.android) { + const activity = Application.android.foregroundActivity; const orientationEnum = activity.getResources().getConfiguration().orientation; vm.set( "orientation", orientationEnum === 1 - ? enums.DeviceOrientation.portrait - : enums.DeviceOrientation.landscape + ? Enums.DeviceOrientation.portrait + : Enums.DeviceOrientation.landscape ); vm.set("resumeEvent", ""); vm.set("resumeEvent", ""); vm.set("launchEvent", ""); vm.set("displayedEvent", ""); - } else if (applicationModule.ios) { + } else if (Application.ios) { vm.set("orientation", "portrait"); } page.bindingContext = vm; @@ -47,7 +46,7 @@ export const onGridLoaded = (eventData) => { console.log("The appication was launched!"); vm.set("resumeEvent", "The appication was launched!"); }; - applicationModule.on(applicationModule.launchEvent, launchListener); + Application.on(Application.launchEvent, launchListener); // << application-events-launch-ts // >> application-events-suspend-ts @@ -55,7 +54,7 @@ export const onGridLoaded = (eventData) => { console.log("The appication was suspended!"); vm.set("suspendEvent", "The appication was suspended!"); }; - applicationModule.on(applicationModule.suspendEvent, suspendListener); + Application.on(Application.suspendEvent, suspendListener); // << application-events-suspend-ts // >> application-events-resume-ts @@ -63,14 +62,14 @@ export const onGridLoaded = (eventData) => { console.log("The appication was resumed!"); vm.set("resumeEvent", "The appication was resumed!"); }; - applicationModule.on(applicationModule.resumeEvent, resumeListener); + Application.on(Application.resumeEvent, resumeListener); // << application-events-resume-ts // >> application-events-exit-ts exitListener = (args) => { console.log("The appication was closed!"); }; - applicationModule.on(applicationModule.exitEvent, exitListener); + Application.on(Application.exitEvent, exitListener); // << application-events-exit-ts // >> application-events-displayed-ts @@ -78,7 +77,7 @@ export const onGridLoaded = (eventData) => { console.log("NativeScript displayedEvent!"); vm.set("displayedEvent", "The appication is displayed!"); }; - applicationModule.on(applicationModule.displayedEvent, displayedListener); + Application.on(Application.displayedEvent, displayedListener); // << application-events-displayed-ts // >> application-events-low-memory-ts @@ -86,7 +85,7 @@ export const onGridLoaded = (eventData) => { // the instance that has raidsed the event console.log("Instance: ", args.object); }; - applicationModule.on(applicationModule.lowMemoryEvent, lowMemoryListener); + Application.on(Application.lowMemoryEvent, lowMemoryListener); // << application-events-low-memory-ts // >> application-events-orientation-ts @@ -95,7 +94,7 @@ export const onGridLoaded = (eventData) => { console.log("Orientation: ", args.newValue); vm.set("orientation", args.newValue); }; - applicationModule.on(applicationModule.orientationChangedEvent, orientationChangedListener); + Application.on(Application.orientationChangedEvent, orientationChangedListener); // << application-events-orientation-ts // >> application-events-error-ts @@ -103,20 +102,20 @@ export const onGridLoaded = (eventData) => { // UnhandledErrorEventData.error: NativeScriptError console.log("NativeScript Error: ", args.error); }; - applicationModule.on(applicationModule.uncaughtErrorEvent, uncaughtErrorListener); + Application.on(Application.uncaughtErrorEvent, uncaughtErrorListener); // << application-events-error-ts }; export const onGridUnloaded = () => { // >> application-events-off-ts - applicationModule.off(applicationModule.launchEvent, launchListener); - applicationModule.off(applicationModule.resumeEvent, resumeListener); - applicationModule.off(applicationModule.suspendEvent, suspendListener); - applicationModule.off(applicationModule.exitEvent, exitListener); - applicationModule.off(applicationModule.displayedEvent, displayedListener); - applicationModule.off(applicationModule.lowMemoryEvent, lowMemoryListener); - applicationModule.off(applicationModule.orientationChangedEvent, orientationChangedListener); - applicationModule.off(applicationModule.uncaughtErrorEvent, uncaughtErrorListener); + Application.off(Application.launchEvent, launchListener); + Application.off(Application.resumeEvent, resumeListener); + Application.off(Application.suspendEvent, suspendListener); + Application.off(Application.exitEvent, exitListener); + Application.off(Application.displayedEvent, displayedListener); + Application.off(Application.lowMemoryEvent, lowMemoryListener); + Application.off(Application.orientationChangedEvent, orientationChangedListener); + Application.off(Application.uncaughtErrorEvent, uncaughtErrorListener); // << application-events-off-ts }; diff --git a/app/ns-framework-modules-category/application/application-events/application-events-ts-page.xml b/app/ns-framework-modules-category/application/application-events/application-events-ts-page.xml index 7933902..ac62b84 100644 --- a/app/ns-framework-modules-category/application/application-events/application-events-ts-page.xml +++ b/app/ns-framework-modules-category/application/application-events/application-events-ts-page.xml @@ -4,10 +4,10 @@ diff --git a/app/ns-framework-modules-category/application/application-page.js b/app/ns-framework-modules-category/application/application-page.js index ab75fd5..1bfac23 100644 --- a/app/ns-framework-modules-category/application/application-page.js +++ b/app/ns-framework-modules-category/application/application-page.js @@ -1,50 +1,51 @@ -const ListViewLinksModel = require("../../links-view-model"); -const link = require("../../link"); -const platformModule = require("tns-core-modules/platform"); +import ListViewLinksModel from "../../links-view-model"; +import Link from "../../link"; +import { isIOS, isAndroid } from "@nativescript/core"; + const navigationLinks = [ - new link( + new Link( "Check Platform", "ns-framework-modules-category/application/check-platform/check-platform-page" ), - new link( + new Link( "Application Events", "ns-framework-modules-category/application/application-events/application-events-page" ) ]; const navigationLinksTsc = [ - new link( + new Link( "Check Platform", "ns-framework-modules-category/application/check-platform/check-platform-ts-page" ), - new link( + new Link( "Application Events", "ns-framework-modules-category/application/application-events/application-events-ts-page" ) ]; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; - if (platformModule.isIOS && navigationLinks.filter((e) => e.title === "iOS Notification Observer").length < 1) { + if (isIOS && navigationLinks.filter((e) => e.title === "iOS Notification Observer").length < 1) { navigationLinks.push( - new link( + new Link( "iOS Notification Observer", - "/application/ios-notification-observer/ios-notification-observer-page" + "ns-framework-modules-category/application/ios-notification-observer/ios-notification-observer-page" ) ); navigationLinksTsc.push( - new link( + new Link( "iOS Notification Observer", - "/application/ios-notification-observer/ios-notification-observer-ts-page" + "ns-framework-modules-category/application/ios-notification-observer/ios-notification-observer-ts-page" ) ); - } else if (platformModule.isAndroid && navigationLinks.filter((e) => e.title === "Android Broadcast Receiver").length < 1) { + } else if (isAndroid && navigationLinks.filter((e) => e.title === "Android Broadcast Receiver").length < 1) { navigationLinks.push( - new link( + new Link( "Android Broadcast Receiver", "ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-page" ) ); navigationLinksTsc.push( - new link( + new Link( "Android Broadcast Receiver", "ns-framework-modules-category/application/android-broadcast-receiver/android-broadcast-receiver-ts-page" ) @@ -57,4 +58,4 @@ function onNavigatingTo(args) { tsclinks: navigationLinksTsc }); } -exports.onNavigatingTo = onNavigatingTo; + diff --git a/app/ns-framework-modules-category/application/check-platform/check-platform-page.js b/app/ns-framework-modules-category/application/check-platform/check-platform-page.js index 869d845..16343c9 100644 --- a/app/ns-framework-modules-category/application/check-platform/check-platform-page.js +++ b/app/ns-framework-modules-category/application/check-platform/check-platform-page.js @@ -1,10 +1,10 @@ -const application = require("tns-core-modules/application"); +import { Application } from "@nativescript/core"; -function onGridLoaded(args) { +export function onGridLoaded(args) { const grid = args.object; const lbl = grid.getViewById("lbl"); const iconLabel = grid.getViewById("iconLabel"); - iconLabel.className = "fa"; + iconLabel.className = "far"; iconLabel.textAlignment = "center"; iconLabel.verticalAlignment = "middle"; iconLabel.fontSize = 40; @@ -12,13 +12,13 @@ function onGridLoaded(args) { lbl.verticalAlignment = "middle"; lbl.fontSize = 24; // >> application-platform-js - if (application.android) { + if (Application.android) { console.log("We are running on Android device!"); // >> (hide) iconLabel.text = String.fromCharCode(0xff17b); lbl.text = "Android Applicaiton"; // << (hide) - } else if (application.ios) { + } else if (Application.ios) { console.log("We are running on iOS device"); // >> (hide) iconLabel.text = String.fromCharCode(0xf179); @@ -27,9 +27,8 @@ function onGridLoaded(args) { } // << application-platform-js } -exports.onGridLoaded = onGridLoaded; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; page.actionBar.title = args.context.title; } -exports.onNavigatingTo = onNavigatingTo; + diff --git a/app/ns-framework-modules-category/application/check-platform/check-platform-ts-page.ts b/app/ns-framework-modules-category/application/check-platform/check-platform-ts-page.ts index c5752b4..dfdad76 100644 --- a/app/ns-framework-modules-category/application/check-platform/check-platform-ts-page.ts +++ b/app/ns-framework-modules-category/application/check-platform/check-platform-ts-page.ts @@ -1,14 +1,10 @@ -import { EventData } from "tns-core-modules/data/observable"; -import { NavigatedData, Page } from "tns-core-modules/ui/page"; -import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout"; -import { Label } from "tns-core-modules/ui/label"; -import * as application from "tns-core-modules/application"; +import { Application, EventData, GridLayout, Label, NavigatedData, Page } from "@nativescript/core"; export function onGridLoaded(args: EventData) { const grid = args.object; const lbl = - \ No newline at end of file + + + diff --git a/app/ns-ui-widgets-category/frame/basic-navigation/navigation-ts-page.xml b/app/ns-ui-widgets-category/frame/basic-navigation/navigation-ts-page.xml index 83b739a..766950b 100644 --- a/app/ns-ui-widgets-category/frame/basic-navigation/navigation-ts-page.xml +++ b/app/ns-ui-widgets-category/frame/basic-navigation/navigation-ts-page.xml @@ -4,4 +4,6 @@ - \ No newline at end of file + + + diff --git a/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page.js b/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page.js index 0d0f1eb..35838b6 100644 --- a/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page.js +++ b/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page.js @@ -1,12 +1,8 @@ -const Page = require("tns-core-modules/ui/page").Page; -const StackLayout = require("tns-core-modules/ui/layouts/stack-layout") - .StackLayout; -const Label = require("tns-core-modules/ui/label").Label; -const getFrameById = require("tns-core-modules/ui/frame").getFrameById; +import { Frame, Label, Page, StackLayout } from "@nativescript/core"; -exports.onLoaded = function() { +export function onLoaded() { // >> frame-nav-dynamic-page-code - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); frame.navigate({ create: () => { const stack = new StackLayout(); @@ -21,4 +17,4 @@ exports.onLoaded = function() { } }); // << frame-nav-dynamic-page-code -}; +} diff --git a/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page.xml b/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page.xml index 9c6a84d..19b512e 100644 --- a/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page.xml +++ b/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page.xml @@ -2,4 +2,4 @@ - \ No newline at end of file + diff --git a/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page.ts b/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page.ts index 2cfe629..b2aeee7 100644 --- a/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page.ts +++ b/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page.ts @@ -1,11 +1,8 @@ -import { Page } from "tns-core-modules/ui/page"; -import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; -import { Label } from "tns-core-modules/ui/label"; -import { getFrameById } from "tns-core-modules/ui/frame"; +import { Frame, Label, Page, StackLayout } from "@nativescript/core"; export function onLoaded() { // >> frame-nav-dynamic-page-ts-code - const frame = getFrameById("my-frame-id"); + const frame = Frame.getFrameById("my-frame-id"); frame.navigate({ create: () => { diff --git a/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page.xml b/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page.xml index 8768b04..ba1c3eb 100644 --- a/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page.xml +++ b/app/ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page.xml @@ -2,4 +2,6 @@ - \ No newline at end of file + + + diff --git a/app/ns-ui-widgets-category/frame/frame-page.js b/app/ns-ui-widgets-category/frame/frame-page.js index f93e99c..84416b8 100644 --- a/app/ns-ui-widgets-category/frame/frame-page.js +++ b/app/ns-ui-widgets-category/frame/frame-page.js @@ -1,21 +1,21 @@ -const ListViewLinksModel = require("../../links-view-model"); -const link = require("../../link"); +import ListViewLinksModel from "../../links-view-model"; +import Link from "../../link"; const navigationLinks = [ - new link("Page Creation", "ns-ui-widgets-category/frame/frame-creation/frame-creation-page"), - new link("Page Reference", "ns-ui-widgets-category/frame/frame-reference/frame-reference-page"), - new link("Basic Navigation", "ns-ui-widgets-category/frame/basic-navigation/navigation-page"), - new link("Dynamic Navigation", "ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page"), - new link("Navigation Context", "ns-ui-widgets-category/frame/navigation-context/navigation-context-page"), - new link("ActionBar visibility", "ns-ui-widgets-category/frame/action-bar-visibility/actionbar-visibility-page") + new Link("Page Creation", "ns-ui-widgets-category/frame/frame-creation/frame-creation-page"), + new Link("Page Reference", "ns-ui-widgets-category/frame/frame-reference/frame-reference-page"), + new Link("Basic Navigation", "ns-ui-widgets-category/frame/basic-navigation/navigation-page"), + new Link("Dynamic Navigation", "ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-page"), + new Link("Navigation Context", "ns-ui-widgets-category/frame/navigation-context/navigation-context-page"), + new Link("ActionBar visibility", "ns-ui-widgets-category/frame/action-bar-visibility/actionbar-visibility-page") ]; const navigationLinksTsc = [ - new link("Page Creation", "ns-ui-widgets-category/frame/frame-creation/frame-creation-ts-page"), - new link("Page Reference", "ns-ui-widgets-category/frame/frame-reference/frame-reference-ts-page"), - new link("Basic Navigation", "ns-ui-widgets-category/frame/basic-navigation/navigation-ts-page"), - new link("Dynamic Navigation", "ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page"), - new link("Navigation Context", "ns-ui-widgets-category/frame/navigation-context/navigation-ts-context-page") + new Link("Page Creation", "ns-ui-widgets-category/frame/frame-creation/frame-creation-ts-page"), + new Link("Page Reference", "ns-ui-widgets-category/frame/frame-reference/frame-reference-ts-page"), + new Link("Basic Navigation", "ns-ui-widgets-category/frame/basic-navigation/navigation-ts-page"), + new Link("Dynamic Navigation", "ns-ui-widgets-category/frame/dynamic-navigation/dynamic-navigation-ts-page"), + new Link("Navigation Context", "ns-ui-widgets-category/frame/navigation-context/navigation-ts-context-page") ]; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; page.bindingContext = new ListViewLinksModel({ links: navigationLinks, @@ -24,4 +24,4 @@ function onNavigatingTo(args) { tsclinks: navigationLinksTsc }); } -exports.onNavigatingTo = onNavigatingTo; + diff --git a/app/ns-ui-widgets-category/frame/frame-reference/frame-reference-page.js b/app/ns-ui-widgets-category/frame/frame-reference/frame-reference-page.js index d9e13eb..afed0b8 100644 --- a/app/ns-ui-widgets-category/frame/frame-reference/frame-reference-page.js +++ b/app/ns-ui-widgets-category/frame/frame-reference/frame-reference-page.js @@ -1,22 +1,20 @@ // >> frame-reference-topmost -const topmost = require("tns-core-modules/ui/frame").topmost; +import { Frame } from "@nativescript/core"; -const topmostFrame = topmost(); +const topmostFrame = Frame.topmost(); // << frame-reference-topmost // >> frame-reference-get-id -const getFrameById = require("tns-core-modules/ui/frame").getFrameById; -const currentFrame = getFrameById("root-frame"); +const currentFrame = Frame.getFrameById("root-frame"); // << frame-reference-get-id // >> frame-reference-via-frame-prop -function onTap(args) { +export function onTap(args) { const button = args.object; const page = button.page; const myFrame = page.frame; myFrame.navigate("secondary-page"); } -exports.onTap = onTap; // << frame-reference-via-frame-prop diff --git a/app/ns-ui-widgets-category/frame/frame-reference/frame-reference-ts-page.ts b/app/ns-ui-widgets-category/frame/frame-reference/frame-reference-ts-page.ts index 0ae2737..04b56ae 100644 --- a/app/ns-ui-widgets-category/frame/frame-reference/frame-reference-ts-page.ts +++ b/app/ns-ui-widgets-category/frame/frame-reference/frame-reference-ts-page.ts @@ -1,18 +1,16 @@ // >> frame-reference-topmost-ts -import { Frame, topmost } from "tns-core-modules/ui/frame"; +import { Frame } from "@nativescript/core"; -const topmostFrame: Frame = topmost(); +const topmostFrame: Frame = Frame.topmost(); // << frame-reference-topmost-ts // >> frame-reference-get-id-ts -import { getFrameById } from "tns-core-modules/ui/frame"; -const currentFrame: Frame = getFrameById("root-frame"); +const currentFrame: Frame = Frame.getFrameById("root-frame"); // << frame-reference-get-id-ts // >> frame-reference-via-frame-prop-ts -import { Button } from "tns-core-modules/ui/button"; -import { Page } from "tns-core-modules/ui/page"; +import { Button, Page } from "@nativescript/core"; export function onTap(args) { const button: Button = args.object; diff --git a/app/ns-ui-widgets-category/frame/navigation-context/navigation-context-page.js b/app/ns-ui-widgets-category/frame/navigation-context/navigation-context-page.js index e70fe4b..a89ab5d 100644 --- a/app/ns-ui-widgets-category/frame/navigation-context/navigation-context-page.js +++ b/app/ns-ui-widgets-category/frame/navigation-context/navigation-context-page.js @@ -1,5 +1,5 @@ // >> nav-context-pass -exports.onNavigate = function(args) { +export function onNavigate(args) { const button = args.object; const page = button.page; const frame = page.frame; @@ -14,7 +14,7 @@ exports.onNavigate = function(args) { }; frame.navigate(navEntryWithContext); -}; +} // << nav-context-pass // >> nav-context-pass-binding const navEntryWithBindingContext = { diff --git a/app/ns-ui-widgets-category/frame/navigation-context/navigation-ts-context-page.ts b/app/ns-ui-widgets-category/frame/navigation-context/navigation-ts-context-page.ts index ff7a172..da8afe5 100644 --- a/app/ns-ui-widgets-category/frame/navigation-context/navigation-ts-context-page.ts +++ b/app/ns-ui-widgets-category/frame/navigation-context/navigation-ts-context-page.ts @@ -1,8 +1,5 @@ // >> nav-context-pass-ts -import { EventData } from "tns-core-modules/data/observable"; -import { Button } from "tns-core-modules/ui/button"; -import { Page } from "tns-core-modules/ui/page"; -import { Frame, NavigationEntry } from "tns-core-modules/ui/frame"; +import { Button, EventData, Frame, NavigationEntry, Page } from "@nativescript/core"; export function onNavigate(args: EventData) { let button = - - - - - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.css b/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.css deleted file mode 100644 index 3d4fabc..0000000 --- a/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.css +++ /dev/null @@ -1,4 +0,0 @@ -Button, TextView { - margin-top: 20; - padding: 8; -} \ No newline at end of file diff --git a/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.ts b/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.ts deleted file mode 100644 index 1fa7fad..0000000 --- a/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.ts +++ /dev/null @@ -1,43 +0,0 @@ -import {Observable, PropertyChangeData} from "tns-core-modules/data/observable"; -import * as dialogs from "tns-core-modules/ui/dialogs"; -import { Page } from "tns-core-modules/ui/page"; -// >> text-field-binding-code-ts -export function onNavigatingTo(args) { - const page: Page = args.object; - const vm = new Observable(); - vm.set("tfHint", "Enter text"); - vm.set("tfText", ""); - vm.set("tfResult", ""); - vm.set("secureState", false); - vm.set("buttonText", "Enable TextField's secure"); - // handling TextField text change - vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => { - if (propertyChangeData.propertyName === "tfText") { - vm.set("tfResult", propertyChangeData.value); - } - }); - page.bindingContext = vm; -} -// changing TextField secure property value on button tap -export function textFieldSecureStateChange(args) { - const page: Page = args.object.page; - const vm = page.bindingContext; - - const secureState = vm.get("secureState"); - vm.set("secureState", !secureState); - if (secureState) { - vm.set("buttonText", "Enable TextField's secure"); - } else { - vm.set("buttonText", "Disable TextField's secure"); - } -} -// displaying the TextField text in an Alert dialog -export function showText(args) { - const page: Page = args.object.page; - const vm = page.bindingContext; - dialogs.alert(`Text: ${vm.get("tfText")}`) - .then(() => { - console.log("Dialog closed!"); - }); -} -// << text-field-binding-code-ts diff --git a/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.xml b/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.xml deleted file mode 100644 index 28929a3..0000000 --- a/app/ns-ui-widgets-category/text-field/binding/binding-ts-page.xml +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/text-field/code-behind/article.md b/app/ns-ui-widgets-category/text-field/code-behind/article.md deleted file mode 100644 index b4882f2..0000000 --- a/app/ns-ui-widgets-category/text-field/code-behind/article.md +++ /dev/null @@ -1,5 +0,0 @@ -Creating TextField via Code-Behind and setting up its properties. - - - - diff --git a/app/ns-ui-widgets-category/text-field/code-behind/code-behind-page.js b/app/ns-ui-widgets-category/text-field/code-behind/code-behind-page.js index 8e9f99d..e93aabb 100644 --- a/app/ns-ui-widgets-category/text-field/code-behind/code-behind-page.js +++ b/app/ns-ui-widgets-category/text-field/code-behind/code-behind-page.js @@ -1,11 +1,11 @@ -const observableModule = require("tns-core-modules/data/observable"); +import { Observable } from "@nativescript/core"; // >> textfield-require -const textFieldModule = require("tns-core-modules/ui/text-field"); +import { TextField } from "@nativescript/core"; // << textfield-require // >> creating-text-field-code -function onPageLoaded(args) { +export function onPageLoaded(args) { const page = args.object; - const vm = new observableModule.Observable(); + const vm = new Observable(); const stackLayout = page.getViewById("stackLayoutId"); vm.set("username", "john"); @@ -27,7 +27,7 @@ function onPageLoaded(args) { sourceProperty: "username", targetProperty: "text" }; - const firstTextField = new textFieldModule.TextField(); + const firstTextField = new TextField(); firstTextField.updateTextTrigger = "textChanged"; firstTextField.bind(options, vm); // registering for the TextField text change listener @@ -42,7 +42,7 @@ function onPageLoaded(args) { sourceProperty: "secure", targetProperty: "secure" }; - const secondTextField = new textFieldModule.TextField(); + const secondTextField = new TextField(); secondTextField.bind(secondOptions, vm); stackLayout.addChild(firstTextField); @@ -51,5 +51,5 @@ function onPageLoaded(args) { page.bindingContext = vm; } -exports.onPageLoaded = onPageLoaded; + // << creating-text-field-code diff --git a/app/ns-ui-widgets-category/text-field/code-behind/code-behind-ts-page.ts b/app/ns-ui-widgets-category/text-field/code-behind/code-behind-ts-page.ts index 638c82d..c052a75 100644 --- a/app/ns-ui-widgets-category/text-field/code-behind/code-behind-ts-page.ts +++ b/app/ns-ui-widgets-category/text-field/code-behind/code-behind-ts-page.ts @@ -1,8 +1,6 @@ -import { Observable } from "tns-core-modules/data/observable"; -import { Page } from "tns-core-modules/ui/page"; -import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; +import { Observable, Page, StackLayout } from "@nativescript/core"; // >> textfield-import -import { TextField } from "tns-core-modules/ui/text-field"; +import { TextField } from "@nativescript/core"; // << textfield-import // >> creating-text-field-code-ts export function onPageLoaded(args) { diff --git a/app/ns-ui-widgets-category/text-field/end.md b/app/ns-ui-widgets-category/text-field/end.md index 4247359..5a7d7eb 100644 --- a/app/ns-ui-widgets-category/text-field/end.md +++ b/app/ns-ui-widgets-category/text-field/end.md @@ -1,8 +1,55 @@ +### Creating TextView component via Code-Behind -**API Reference for the** [TextField Class](http://docs.nativescript.org/api-reference/modules/_ui_text_field_.html) + + + -**Native Component** +## Properties + +| Name | Type | Description | +|:---------|:---------|:---------------| +| `autocapitalizationType` | [`AutocapitalizationType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#autocapitalizationtype) | Gets or sets the autocapitalization type. | +| `autocorrect` | `boolean` | Enables or disables autocorrection. | +| `keyboardType` | [`KeyboardType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#keyboardtype) | Gets or sets the soft keyboard type | +| `letterSpacing` | `number` | Gets or sets letter space style property. | +| `lineHeight` | `number` | Gets or sets line height style property. | +| `maxLength` | `number` | Gets or sets the max number of symbols allowed as input. | +| `returnKeyType` | [`ReturnKeyType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#returnkeytype) | Gets or sets the soft keyboard return key flavor. | +| `secure` | `string` | Gets or sets if a text field is for password entry. | +| `text` | `string` | Gets or sets the text. | +| `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. | + +## Methods + +| Name | Description | +|:-----------------------|:------------------------------------------------------| +| `focus` | Tries to focus the view. Returns a value indicating whether this view or one of its descendants actually took focus. Returns `boolean`. | +| `dismissSoftInput` | Hides the soft input method, ususally a soft keyboard. | + +## Events + +| Name | Description | +|:-----------------------|:------------------------------------------------------| +| `blur` | Emitted when the text field is unfocused. | +| `focus` | Emitted when the text field is focused. | +| `returnPress` | Emitted when the return key is tapped. | +| `textChange` | Emitted when there is a new text input. | + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/text-field](http://docs.nativescript.org/api-reference/modules/_ui_text_field_.html) | `Module` | +| [TextField](https://docs.nativescript.org/api-reference/classes/_ui_text_field_.textfield) | `Class` | + + +## Native Component | Android | iOS | |:----------------------|:---------| | [android.widget.EditText](http://developer.android.com/reference/android/widget/EditText.html) | [UITextField](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/) | + + diff --git a/app/ns-ui-widgets-category/text-field/keyboard-type/article.md b/app/ns-ui-widgets-category/text-field/keyboard-type/article.md deleted file mode 100644 index dcb5c0b..0000000 --- a/app/ns-ui-widgets-category/text-field/keyboard-type/article.md +++ /dev/null @@ -1,40 +0,0 @@ - - - -## Keyboard Type -The widgets that inherit from [`EditableTextBase`](https://docs.nativescript.org/api-reference/classes/_ui_editor_text_base_.editabletextbase), i.e., [`TextField`](http://docs.nativescript.org/api-reference/classes/_ui_text_field_.textfield.html), have a **keyboardType** property that gets or sets the soft keyboard type that will be shown while in edit mode. Possible values are contained in the [`KeyboardType`](http://docs.nativescript.org/api-reference/modules/_ui_enums_.keyboardtype.html) enumeration. In the below given examnples are demostrated, how to set up the needed Keyboard types for both iOS and Android. - -### Datetime - - Android: [TYPE_CLASS_DATETIME](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_DATETIME) | [TYPE_DATETIME_VARIATION_NORMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_DATETIME_VARIATION_NORMAL) - - iOS: [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) - - ![datetime](../img/modules/keyboard/datetime.png "datetime") - - - -### Phone - - Android: [TYPE_CLASS_PHONE](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_PHONE) - - iOS: [UIKeyboardTypePhonePad](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) - - ![phone](../img/modules/keyboard/phone.png "phone") - - - -### Number - - Android: [TYPE_CLASS_NUMBER](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_NUMBER) | [TYPE_NUMBER_VARIATION_NORMAL](http://developer.android.com/intl/es/reference/android/text/InputType.html#TYPE_NUMBER_VARIATION_NORMAL) | [TYPE_NUMBER_FLAG_SIGNED](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_SIGNED) | [TYPE_NUMBER_FLAG_DECIMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_DECIMAL) - - iOS: [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) - - ![number](../img/modules/keyboard/number.png "number") - - - -### Url - - Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_URI](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_URI) - - iOS: [UIKeyboardTypeURL](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) - - ![url](../img/modules/keyboard/url.png "url") - - - -### Email - - Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_EMAIL_ADDRESS](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_EMAIL_ADDRESS) - - iOS: [UIKeyboardTypeEmailAddress](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType) - - ![email](../img/modules/keyboard/email.png "email") - - diff --git a/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.css b/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.css deleted file mode 100644 index 3d4fabc..0000000 --- a/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.css +++ /dev/null @@ -1,4 +0,0 @@ -Button, TextView { - margin-top: 20; - padding: 8; -} \ No newline at end of file diff --git a/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.js b/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.js deleted file mode 100644 index e3f5f39..0000000 --- a/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.js +++ /dev/null @@ -1,41 +0,0 @@ -const observableModule = require("tns-core-modules/data/observable"); -function onNavigatingTo(args) { - const page = args.object; - const vm = new observableModule.Observable(); - vm.set("tfDateTimeResult", ""); - vm.set("tfDateTimeText", ""); - vm.set("tfPhoneResult", ""); - vm.set("tfPhoneText", ""); - vm.set("tfNumberResult", ""); - vm.set("tfNumberText", ""); - vm.set("tfUrlResult", ""); - vm.set("tfUrlText", ""); - vm.set("tfEmailResult", ""); - vm.set("tfEmailText", ""); - - vm.on(observableModule.Observable.propertyChangeEvent, (propertyChangeData) => { - switch (propertyChangeData.propertyName) { - case "tfDateTimeText": - vm.set("tfDateTimeResult", propertyChangeData.value); - break; - case "tfPhoneText": - vm.set("tfPhoneResult", propertyChangeData.value); - break; - case "tfNumberText": - vm.set("tfNumberResult", propertyChangeData.value); - break; - case "tfUrlText": - vm.set("tfUrlResult", propertyChangeData.value); - break; - case "tfEmailText": - vm.set("tfEmailResult", propertyChangeData.value); - break; - - default: - break; - } - }); - page.bindingContext = vm; -} - -exports.onNavigatingTo = onNavigatingTo; diff --git a/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.xml b/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.xml deleted file mode 100644 index 2eec53f..0000000 --- a/app/ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page.xml +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/text-field/metadata.md b/app/ns-ui-widgets-category/text-field/metadata.md index 8a45cd7..2472d74 100644 --- a/app/ns-ui-widgets-category/text-field/metadata.md +++ b/app/ns-ui-widgets-category/text-field/metadata.md @@ -4,3 +4,4 @@ description: TextField component is an abstraction over iOS's UITextField and A position: 430 slug: text-field --- +example-order: usage, styling diff --git a/app/ns-ui-widgets-category/text-field/overview.md b/app/ns-ui-widgets-category/text-field/overview.md index c5badce..d4746ee 100644 --- a/app/ns-ui-widgets-category/text-field/overview.md +++ b/app/ns-ui-widgets-category/text-field/overview.md @@ -1,4 +1 @@ -The TextField component allows you to type text in your app. The TextField has attributes such as `secure` for handling password fields, and `autocapitalizationType` for specifying the text format the control should use. - - - +The TextField component allows you to type text in your app. The TextField has attributes such as `secure` for handling password fields, and `pipes` for specifying the text format the control should use. diff --git a/app/ns-ui-widgets-category/text-field/styling/article.md b/app/ns-ui-widgets-category/text-field/styling/article.md new file mode 100644 index 0000000..402b7c2 --- /dev/null +++ b/app/ns-ui-widgets-category/text-field/styling/article.md @@ -0,0 +1 @@ + diff --git a/app/ns-ui-widgets-category/text-field/styling/styling-page.xml b/app/ns-ui-widgets-category/text-field/styling/styling-page.xml new file mode 100644 index 0000000..e43a969 --- /dev/null +++ b/app/ns-ui-widgets-category/text-field/styling/styling-page.xml @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/ns-ui-widgets-category/text-field/text-field-page.js b/app/ns-ui-widgets-category/text-field/text-field-page.js index 1916b63..81405af 100644 --- a/app/ns-ui-widgets-category/text-field/text-field-page.js +++ b/app/ns-ui-widgets-category/text-field/text-field-page.js @@ -1,17 +1,15 @@ -const ListViewLinksModel = require("../../links-view-model"); -const link = require("../../link"); +import ListViewLinksModel from "../../links-view-model"; +import Link from "../../link"; const navigationLinks = [ - new link("Basics", "ns-ui-widgets-category/text-field/basics/basics-page"), - new link("Binding", "ns-ui-widgets-category/text-field/binding/binding-page"), - new link("Code Behind", "ns-ui-widgets-category/text-field/code-behind/code-behind-page"), - new link("Keyboard Type", "ns-ui-widgets-category/text-field/keyboard-type/keyboard-type-page") + new Link("Usage", "ns-ui-widgets-category/text-field/usage/usage-page"), + new Link("Styling", "ns-ui-widgets-category/text-field/styling/styling-page"), + new Link("Code Behind", "ns-ui-widgets-category/text-field/code-behind/code-behind-page") ]; const navigationLinksTsc = [ - new link("Basics", "ns-ui-widgets-category/text-field/basics/basics-ts-page"), - new link("Binding", "ns-ui-widgets-category/text-field/binding/binding-ts-page"), - new link("Code Behind", "ns-ui-widgets-category/text-field/code-behind/code-behind-ts-page") + new Link("Usage", "ns-ui-widgets-category/text-field/usage/usage-ts-page"), + new Link("Code Behind", "ns-ui-widgets-category/text-field/code-behind/code-behind-ts-page") ]; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; page.bindingContext = new ListViewLinksModel({ links: navigationLinks, @@ -20,4 +18,4 @@ function onNavigatingTo(args) { tsclinks: navigationLinksTsc }); } -exports.onNavigatingTo = onNavigatingTo; + diff --git a/app/ns-ui-widgets-category/image/stretching/stretching-page.js b/app/ns-ui-widgets-category/text-field/usage/article.md similarity index 100% rename from app/ns-ui-widgets-category/image/stretching/stretching-page.js rename to app/ns-ui-widgets-category/text-field/usage/article.md diff --git a/app/ns-ui-widgets-category/text-field/usage/usage-page.js b/app/ns-ui-widgets-category/text-field/usage/usage-page.js new file mode 100644 index 0000000..93c4e05 --- /dev/null +++ b/app/ns-ui-widgets-category/text-field/usage/usage-page.js @@ -0,0 +1,52 @@ +// >> text-field-binding-code +import { Observable } from "@nativescript/core"; +export function onNavigatingTo(args) { + const page = args.object; + const vm = new Observable(); + vm.set("viewDate", ""); + + page.bindingContext = vm; +} +export function onTextFieldLoaded(argsloaded) { + const view = argsloaded.object; + view.on("returnPress", (args) => { + // returnPress event will be triggered when user submits a value + const textField = args.object; + // Gets or sets the placeholder text. + console.log(textField.hint); + // Gets or sets the input text. + console.log(textField.text); + // Gets or sets the secure option (e.g. for passwords). + console.log(textField.secure); + + // Gets or sets the soft keyboard type. Options: "datetime" | "phone" | "number" | "url" | "email" + console.log(textField.keyboardType); + // Gets or sets the soft keyboard return key flavor. Options: "done" | "next" | "go" | "search" | "send" + console.log(textField.returnKeyType); + // Gets or sets the autocapitalization type. Options: "none" | "words" | "sentences" | "allcharacters" + console.log(textField.autocapitalizationType); + + // Gets or sets a value indicating when the text property will be updated. + console.log(textField.updateTextTrigger); + // Gets or sets whether the instance is editable. + console.log(textField.editable); + // Enables or disables autocorrection. + console.log(textField.autocorrect); + // Limits input to a certain number of characters. + console.log(textField.maxLength); + + setTimeout(() => { + textField.dismissSoftInput(); // Hides the soft input method, ususally a soft keyboard. + }, 100); + }); + view.on("focus", (args) => { + const textField = args.object; + console.log("On TextField focus"); + }); + view.on("blur", (args) => { + const textField = args.object; + console.log("On TextField blur"); + }); +} + +// << text-field-binding-code diff --git a/app/ns-ui-widgets-category/text-field/usage/usage-page.xml b/app/ns-ui-widgets-category/text-field/usage/usage-page.xml new file mode 100644 index 0000000..3967726 --- /dev/null +++ b/app/ns-ui-widgets-category/text-field/usage/usage-page.xml @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/ns-ui-widgets-category/text-field/usage/usage-ts-page.ts b/app/ns-ui-widgets-category/text-field/usage/usage-ts-page.ts new file mode 100644 index 0000000..7e570dc --- /dev/null +++ b/app/ns-ui-widgets-category/text-field/usage/usage-ts-page.ts @@ -0,0 +1,52 @@ +// >> text-field-binding-code-ts +import { Observable, Page, TextField } from "@nativescript/core"; + +export function onNavigatingTo(args) { + const page: Page = args.object; + const vm = new Observable(); + vm.set("tvText", ""); + page.bindingContext = vm; +} +export function onTextFieldLoaded(argsloaded) { + let view: TextField = argsloaded.object; + view.on("returnPress", (args) => { + // returnPress event will be triggered when user submits a value + let textField = args.object; + + // Gets or sets the placeholder text. + console.log(textField.hint); + // Gets or sets the input text. + console.log(textField.text); + // Gets or sets the secure option (e.g. for passwords). + console.log(textField.secure); + + // Gets or sets the soft keyboard type. Options: "datetime" | "phone" | "number" | "url" | "email" + console.log(textField.keyboardType); + // Gets or sets the soft keyboard return key flavor. Options: "done" | "next" | "go" | "search" | "send" + console.log(textField.returnKeyType); + // Gets or sets the autocapitalization type. Options: "none" | "words" | "sentences" | "allcharacters" + console.log(textField.autocapitalizationType); + + // Gets or sets a value indicating when the text property will be updated. + console.log(textField.updateTextTrigger); + // Gets or sets whether the instance is editable. + console.log(textField.editable); + // Enables or disables autocorrection. + console.log(textField.autocorrect); + // Limits input to a certain number of characters. + console.log(textField.maxLength); + + setTimeout(() => { + textField.dismissSoftInput(); // Hides the soft input method, ususally a soft keyboard. + }, 100); + }); + view.on("focus", (args) => { + let textField: TextField = args.object; + console.log("On TextView focus"); + }); + view.on("blur", (args) => { + let textField: TextField = args.object; + console.log("On TextView blur"); + }); +} +// << text-field-binding-code-ts diff --git a/app/ns-ui-widgets-category/text-field/usage/usage-ts-page.xml b/app/ns-ui-widgets-category/text-field/usage/usage-ts-page.xml new file mode 100644 index 0000000..abb19a3 --- /dev/null +++ b/app/ns-ui-widgets-category/text-field/usage/usage-ts-page.xml @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/ns-ui-widgets-category/text-view/basics/article.md b/app/ns-ui-widgets-category/text-view/basics/article.md deleted file mode 100644 index 98bb0bc..0000000 --- a/app/ns-ui-widgets-category/text-view/basics/article.md +++ /dev/null @@ -1,5 +0,0 @@ -This example shows how to bind TextView `text`, `hint` and `editable` properties and to change their values as well as how to handle the text change. - - - - diff --git a/app/ns-ui-widgets-category/text-view/basics/basics-page.css b/app/ns-ui-widgets-category/text-view/basics/basics-page.css deleted file mode 100644 index 3d4fabc..0000000 --- a/app/ns-ui-widgets-category/text-view/basics/basics-page.css +++ /dev/null @@ -1,4 +0,0 @@ -Button, TextView { - margin-top: 20; - padding: 8; -} \ No newline at end of file diff --git a/app/ns-ui-widgets-category/text-view/basics/basics-page.js b/app/ns-ui-widgets-category/text-view/basics/basics-page.js deleted file mode 100644 index a6cd19d..0000000 --- a/app/ns-ui-widgets-category/text-view/basics/basics-page.js +++ /dev/null @@ -1,54 +0,0 @@ -const observableModule = require("tns-core-modules/data/observable"); -const dialogs = require("tns-core-modules/ui/dialogs"); -// >> text-view-binding-code -function onNavigatingTo(args) { - const page = args.object; - const vm = new observableModule.Observable(); - vm.set("tvHint", "Enter text"); - vm.set("tvText", ""); - vm.set("tvResult", ""); - vm.set("editState", true); - vm.set("buttonText", "Disable TextView"); - // handling TextView text change - vm.on(observableModule.Observable.propertyChangeEvent, (propertyChangeData) => { - if (propertyChangeData.propertyName === "tvText") { - vm.set("tvResult", propertyChangeData.value); - } - }); - page.bindingContext = vm; -} -// changing TextView editable property value on button tap -function textViewEditStateChange(args) { - const page = args.object.page; - const vm = page.bindingContext; - - const editState = vm.get("editState"); - vm.set("editState", !editState); - if (editState) { - vm.set("buttonText", "Enable TextView"); - } else { - vm.set("buttonText", "Disable TextView"); - } -} -// displaying the TextView text in an Alert dialog -function showText(args) { - const page = args.object.page; - const vm = page.bindingContext; - - dialogs.alert(`Text: ${vm.get("tvText")}`) - .then(() => { - console.log("Dialog closed!"); - }); -} -function onTextViewLoaded(args) { - const textView = args.object; - textView.on("textChange", (args) => { - console.dir(args); - }); -} - -exports.onNavigatingTo = onNavigatingTo; -exports.textViewEditStateChange = textViewEditStateChange; -exports.showText = showText; -exports.onTextViewLoaded = onTextViewLoaded; -// << text-view-binding-code diff --git a/app/ns-ui-widgets-category/text-view/basics/basics-page.xml b/app/ns-ui-widgets-category/text-view/basics/basics-page.xml deleted file mode 100644 index 2cd96ad..0000000 --- a/app/ns-ui-widgets-category/text-view/basics/basics-page.xml +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/text-view/basics/basics-ts-page.ts b/app/ns-ui-widgets-category/text-view/basics/basics-ts-page.ts deleted file mode 100644 index 6c4912c..0000000 --- a/app/ns-ui-widgets-category/text-view/basics/basics-ts-page.ts +++ /dev/null @@ -1,51 +0,0 @@ -import {Observable, PropertyChangeData} from "tns-core-modules/data/observable"; -import * as dialogs from "tns-core-modules/ui/dialogs"; -import {Page} from "tns-core-modules/ui/page"; -import {TextView} from "tns-core-modules/ui/text-view"; -// >> text-view-binding-code-ts -export function onNavigatingTo(args) { - const page: Page = args.object; - const vm = new Observable(); - vm.set("tvHint", "Enter text"); - vm.set("tvText", ""); - vm.set("tvResult", ""); - vm.set("editState", true); - vm.set("buttonText", "Disable TextView"); - // handling TextView text change - vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => { - if (propertyChangeData.propertyName === "tvText") { - vm.set("tvResult", propertyChangeData.value); - } - }); - page.bindingContext = vm; -} -// changing TextView editable property value on button tap -export function textViewEditStateChange(args) { - const page: Page = args.object.page; - const vm = page.bindingContext; - - const editState = vm.get("editState"); - vm.set("editState", !editState); - if (editState) { - vm.set("buttonText", "Enable TextView"); - } else { - vm.set("buttonText", "Disable TextView"); - } -} -// displaying the TextView text in an Alert dialog -export function showText(args) { - const page: Page = args.object.page; - const vm = page.bindingContext; - - dialogs.alert(`Text: ${vm.get("tvText")}`) - .then(() => { - console.log("Dialog closed!"); - }); -} -export function onTextViewLoaded(args) { - const textView: TextView = args.object; - textView.on("textChange", (argstv) => { - console.dir(argstv); - }); -} -// << text-view-binding-code-ts diff --git a/app/ns-ui-widgets-category/text-view/basics/basics-ts-page.xml b/app/ns-ui-widgets-category/text-view/basics/basics-ts-page.xml deleted file mode 100644 index 12c7d3d..0000000 --- a/app/ns-ui-widgets-category/text-view/basics/basics-ts-page.xml +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ns-ui-widgets-category/text-view/code-behind/article.md b/app/ns-ui-widgets-category/text-view/code-behind/article.md deleted file mode 100644 index 227fc47..0000000 --- a/app/ns-ui-widgets-category/text-view/code-behind/article.md +++ /dev/null @@ -1,5 +0,0 @@ -Creating TextView via code behind and setting up `hint`, `text` and `editable` properties via Code-Behind. - - - - diff --git a/app/ns-ui-widgets-category/text-view/code-behind/code-behind-page.js b/app/ns-ui-widgets-category/text-view/code-behind/code-behind-page.js index 4804248..08e50c0 100644 --- a/app/ns-ui-widgets-category/text-view/code-behind/code-behind-page.js +++ b/app/ns-ui-widgets-category/text-view/code-behind/code-behind-page.js @@ -1,11 +1,11 @@ -const observableModule = require("tns-core-modules/data/observable"); +import { Observable } from "@nativescript/core"; // >> text-view-require -const textViewModule = require("tns-core-modules/ui/text-view"); +import { TextView } from "@nativescript/core"; // << text-view-require // >> creating-text-view-code -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; - const vm = new observableModule.Observable(); + const vm = new Observable(); // changing TextView editable property value on button tap vm.set("onTap", (btargs) => { const button = btargs.object; @@ -20,15 +20,15 @@ function onNavigatingTo(args) { page.bindingContext = vm; } -function onPageLoaded(args) { +export function onPageLoaded(args) { const page = args.object; const vm = page.bindingContext; const stackLayout = page.getViewById("stackLayoutId"); // creating new TextView and changing the hint - const firstTextview = new textViewModule.TextView(); + const firstTextview = new TextView(); firstTextview.hint = "Enter text"; // creating new TextView and binding the text property - const secondTextview = new textViewModule.TextView(); + const secondTextview = new TextView(); const options = { sourceProperty: "text", targetProperty: "secondTextProperty" @@ -36,7 +36,7 @@ function onPageLoaded(args) { secondTextview.bind(options, vm); vm.set("secondTextProperty", "Sample TextView text"); // creating new TextView and changing the text - const thirdTextview = new textViewModule.TextView(); + const thirdTextview = new TextView(); thirdTextview.id = "thirdTextViewId"; thirdTextview.text = "Third TextView"; // adding the newly created TextViews in a StackLayout @@ -45,6 +45,5 @@ function onPageLoaded(args) { stackLayout.addChild(thirdTextview); } -exports.onNavigatingTo = onNavigatingTo; -exports.onPageLoaded = onPageLoaded; + // << creating-text-view-code diff --git a/app/ns-ui-widgets-category/text-view/code-behind/code-behind-ts-page.ts b/app/ns-ui-widgets-category/text-view/code-behind/code-behind-ts-page.ts index 4be046f..1256168 100644 --- a/app/ns-ui-widgets-category/text-view/code-behind/code-behind-ts-page.ts +++ b/app/ns-ui-widgets-category/text-view/code-behind/code-behind-ts-page.ts @@ -1,9 +1,6 @@ -import { Observable } from "tns-core-modules/data/observable"; -import {Page} from "tns-core-modules/ui/page"; -import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout"; -import { Button } from "tns-core-modules/ui/button"; +import { Button, Observable, Page, StackLayout } from "@nativescript/core"; // >> text-view-import -import {TextView} from "tns-core-modules/ui/text-view"; +import { TextView } from "@nativescript/core"; // << text-view-import // >> creating-text-view-code-ts export function onNavigatingTo(args) { diff --git a/app/ns-ui-widgets-category/text-view/end.md b/app/ns-ui-widgets-category/text-view/end.md index fa165a9..6ce1d9a 100644 --- a/app/ns-ui-widgets-category/text-view/end.md +++ b/app/ns-ui-widgets-category/text-view/end.md @@ -1,8 +1,54 @@ +### Creating TextView component via Code-Behind -**API Reference for the** [TextView Class](http://docs.nativescript.org/api-reference/modules/_ui_text_view_.html) + + + -**Native Component** +## Properties + +| Name | Type | Description | +|:---------|:---------|:---------------| +| `autocapitalizationType` | [`AutocapitalizationType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#autocapitalizationtype) | Gets or sets the autocapitalization type. | +| `autocorrect` | `boolean` | Enables or disables autocorrection. | +| `keyboardType` | [`KeyboardType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#keyboardtype) | Gets or sets the soft keyboard type | +| `letterSpacing` | `number` | Gets or sets letter space style property. | +| `lineHeight` | `number` | Gets or sets line height style property. | +| `maxLength` | `number` | Gets or sets the max number of symbols allowed as input. | +| `returnKeyType` | [`ReturnKeyType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#returnkeytype) | Gets or sets the soft keyboard return key flavor. | +| `secure` | `string` | Gets or sets if a text field is for password entry. | +| `text` | `string` | Gets or sets the text. | +| `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. | + +## Methods + +| Name | Description | +|:-----------------------|:------------------------------------------------------| +| `focus` | Tries to focus the view. Returns a value indicating whether this view or one of its descendants actually took focus. Returns `boolean`. | +| `dismissSoftInput` | Hides the soft input method, ususally a soft keyboard. | + +## Events + +| Name | Description | +|:-----------------------|:------------------------------------------------------| +| `blur` | Emitted when the text field is unfocused. | +| `focus` | Emitted when the text field is focused. | +| `textChange` | Emitted when there is a new text input. | + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/text-view](http://docs.nativescript.org/api-reference/modules/_ui_text_view_.html) | `Module` | +| [TextView](https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textview) | `Class` | + + +## Native Component | Android | iOS | |:----------------------|:---------| | [android.widget.EditText](http://developer.android.com/reference/android/widget/EditText.html) | [UITextView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextView_Class/) | + + diff --git a/app/ns-ui-widgets-category/text-view/metadata.md b/app/ns-ui-widgets-category/text-view/metadata.md index d4c1fab..41c16bd 100644 --- a/app/ns-ui-widgets-category/text-view/metadata.md +++ b/app/ns-ui-widgets-category/text-view/metadata.md @@ -4,3 +4,4 @@ description: TextView component is an abstraction over iOS's UITextView and Andr position: 440 slug: text-view --- +example-order: usage, styling diff --git a/app/ns-ui-widgets-category/text-view/overview.md b/app/ns-ui-widgets-category/text-view/overview.md index 2d29e0b..619c936 100644 --- a/app/ns-ui-widgets-category/text-view/overview.md +++ b/app/ns-ui-widgets-category/text-view/overview.md @@ -1,4 +1 @@ -The TextView component can be used to type large text in your app. The component can also be used show any content by setting the `editable` property to `false`. - - - +The `TextView` component can be used to type larger text content in your app. The component can also be used show any content by setting the `editable` property to `false`. diff --git a/app/ns-ui-widgets-category/text-view/text-view-page.js b/app/ns-ui-widgets-category/text-view/text-view-page.js index cccf195..601c072 100644 --- a/app/ns-ui-widgets-category/text-view/text-view-page.js +++ b/app/ns-ui-widgets-category/text-view/text-view-page.js @@ -1,14 +1,14 @@ -const ListViewLinksModel = require("../../links-view-model"); -const link = require("../../link"); +import ListViewLinksModel from "../../links-view-model"; +import Link from "../../link"; const navigationLinks = [ - new link("Code behind", "ns-ui-widgets-category/text-view/code-behind/code-behind-page"), - new link("Basics", "ns-ui-widgets-category/text-view/basics/basics-page") + new Link("Code behind", "ns-ui-widgets-category/text-view/code-behind/code-behind-page"), + new Link("Usage", "ns-ui-widgets-category/text-view/usage/usage-page") ]; const navigationLinksTsc = [ - new link("Code behind", "ns-ui-widgets-category/text-view/code-behind/code-behind-ts-page"), - new link("Basics", "ns-ui-widgets-category/text-view/basics/basics-ts-page") + new Link("Code behind", "ns-ui-widgets-category/text-view/code-behind/code-behind-ts-page"), + new Link("Usage", "ns-ui-widgets-category/text-view/usage/usage-ts-page") ]; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; page.bindingContext = new ListViewLinksModel({ links: navigationLinks, @@ -17,4 +17,4 @@ function onNavigatingTo(args) { tsclinks: navigationLinksTsc }); } -exports.onNavigatingTo = onNavigatingTo; + diff --git a/app/ns-ui-widgets-category/text-view/usage/article.md b/app/ns-ui-widgets-category/text-view/usage/article.md new file mode 100644 index 0000000..0341f45 --- /dev/null +++ b/app/ns-ui-widgets-category/text-view/usage/article.md @@ -0,0 +1,3 @@ + + + diff --git a/app/ns-ui-widgets-category/text-view/usage/usage-page.js b/app/ns-ui-widgets-category/text-view/usage/usage-page.js new file mode 100644 index 0000000..f3698e0 --- /dev/null +++ b/app/ns-ui-widgets-category/text-view/usage/usage-page.js @@ -0,0 +1,22 @@ +// >> text-view-binding-code +import { Observable } from "@nativescript/core"; +export function onNavigatingTo(args) { + const page = args.object; + const vm = new Observable(); + vm.set("viewDate", ""); + + page.bindingContext = vm; +} +export function onTextViewLoaded(argsloaded) { + const textView = argsloaded.object; + textView.on("focus", (args) => { + const view = args.object; + console.log("On TextView focus"); + }); + textView.on("blur", (args) => { + const view = args.object; + console.log("On TextView blur"); + }); +} + +// << text-view-binding-code diff --git a/app/ns-ui-widgets-category/text-view/usage/usage-page.xml b/app/ns-ui-widgets-category/text-view/usage/usage-page.xml new file mode 100644 index 0000000..ec7d169 --- /dev/null +++ b/app/ns-ui-widgets-category/text-view/usage/usage-page.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/ns-ui-widgets-category/text-view/usage/usage-ts-page.ts b/app/ns-ui-widgets-category/text-view/usage/usage-ts-page.ts new file mode 100644 index 0000000..ecf7334 --- /dev/null +++ b/app/ns-ui-widgets-category/text-view/usage/usage-ts-page.ts @@ -0,0 +1,21 @@ +// >> text-view-binding-code-ts +import { Observable, Page, TextView } from "@nativescript/core"; + +export function onNavigatingTo(args) { + const page: Page = args.object; + const vm = new Observable(); + vm.set("viewDate", ""); + page.bindingContext = vm; +} +export function onTextViewLoaded(argsloaded) { + let textView: TextView = argsloaded.object; + textView.on("focus", (args) => { + let view: TextView = args.object; + console.log("On TextView focus"); + }); + textView.on("blur", (args) => { + let view: TextView = args.object; + console.log("On TextView blur"); + }); +} +// << text-view-binding-code-ts diff --git a/app/ns-ui-widgets-category/text-view/usage/usage-ts-page.xml b/app/ns-ui-widgets-category/text-view/usage/usage-ts-page.xml new file mode 100644 index 0000000..9214316 --- /dev/null +++ b/app/ns-ui-widgets-category/text-view/usage/usage-ts-page.xml @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/time-picker/basics/basics-page.js b/app/ns-ui-widgets-category/time-picker/basics/basics-page.js index e4dae6f..a9b4cb2 100644 --- a/app/ns-ui-widgets-category/time-picker/basics/basics-page.js +++ b/app/ns-ui-widgets-category/time-picker/basics/basics-page.js @@ -1,8 +1,7 @@ -const Observable = require("tns-core-modules/data/observable").Observable; -const TimePicker = require("tns-core-modules/ui/time-picker").TimePicker; +import { Observable, TimePicker } from "@nativescript/core"; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; const vm = new Observable(); vm.set("hourResult", "Hour: ..."); @@ -10,10 +9,10 @@ function onNavigatingTo(args) { vm.set("timeResult", "Time: ..."); page.bindingContext = vm; } -exports.onNavigatingTo = onNavigatingTo; + // >> time-picker-configure-code -function onPickerLoaded(args) { +export function onPickerLoaded(args) { const timePicker = args.object; // Configurable properties of TimePicker @@ -41,5 +40,4 @@ function onPickerLoaded(args) { // << (hide) }); } -exports.onPickerLoaded = onPickerLoaded; // << time-picker-configure-code diff --git a/app/ns-ui-widgets-category/time-picker/basics/basics-ts-page.ts b/app/ns-ui-widgets-category/time-picker/basics/basics-ts-page.ts index 2aec767..cc2473a 100644 --- a/app/ns-ui-widgets-category/time-picker/basics/basics-ts-page.ts +++ b/app/ns-ui-widgets-category/time-picker/basics/basics-ts-page.ts @@ -1,6 +1,4 @@ -import { Observable, EventData } from "tns-core-modules/data/observable"; -import { TimePicker } from "tns-core-modules/ui/time-picker"; -import { Page } from "tns-core-modules/ui/page"; +import { EventData, Observable, Page, TimePicker } from "@nativescript/core"; export function onNavigatingTo(args) { const page: Page = args.object; const vm = new Observable(); diff --git a/app/ns-ui-widgets-category/time-picker/binding/binding-page.js b/app/ns-ui-widgets-category/time-picker/binding/binding-page.js index 9c5e7d6..e574492 100644 --- a/app/ns-ui-widgets-category/time-picker/binding/binding-page.js +++ b/app/ns-ui-widgets-category/time-picker/binding/binding-page.js @@ -1,7 +1,7 @@ // >> time-picker-binding-code -const Observable = require("tns-core-modules/data/observable").Observable; +import { Observable } from "@nativescript/core"; // setting up the initial values for the TimePicker component -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; const vm = new Observable(); @@ -16,9 +16,9 @@ function onNavigatingTo(args) { page.bindingContext = vm; } -exports.onNavigatingTo = onNavigatingTo; -function onPickerLoaded(eventData) { + +export function onPickerLoaded(eventData) { const timePicker = eventData.object; // handling 'time change' via code behind timePicker.on("timeChange", (args) => { @@ -30,5 +30,4 @@ function onPickerLoaded(eventData) { vm.set("timeResult", args.value); }); } -exports.onPickerLoaded = onPickerLoaded; // << time-picker-binding-code diff --git a/app/ns-ui-widgets-category/time-picker/binding/binding-ts-page.ts b/app/ns-ui-widgets-category/time-picker/binding/binding-ts-page.ts index 5a4bd15..d479072 100644 --- a/app/ns-ui-widgets-category/time-picker/binding/binding-ts-page.ts +++ b/app/ns-ui-widgets-category/time-picker/binding/binding-ts-page.ts @@ -1,6 +1,5 @@ // >> time-picker-binding-code-ts -import { Observable } from "tns-core-modules/data/observable"; -import { TimePicker } from "tns-core-modules/ui/time-picker"; +import { Observable, TimePicker } from "@nativescript/core"; // setting up the initial values for the TimePicker component export function onNavigatingTo(args) { const page = args.object; diff --git a/app/ns-ui-widgets-category/time-picker/time-format/time-format-page.js b/app/ns-ui-widgets-category/time-picker/time-format/time-format-page.js index f25667d..ace3e09 100644 --- a/app/ns-ui-widgets-category/time-picker/time-format/time-format-page.js +++ b/app/ns-ui-widgets-category/time-picker/time-format/time-format-page.js @@ -1,8 +1,7 @@ // >> timepicker-time-format-code -const isAndroid = require("tns-core-modules/platform").isAndroid; -const isIOS = require("tns-core-modules/platform").isIOS; +import { isAndroid, isIOS } from "@nativescript/core"; -function onPickerLoaded(args) { +export function onPickerLoaded(args) { const timePicker = args.object; if (isAndroid) { @@ -18,5 +17,4 @@ function onPickerLoaded(args) { timePicker.minute = 59; } } -exports.onPickerLoaded = onPickerLoaded; // << timepicker-time-format-code diff --git a/app/ns-ui-widgets-category/time-picker/time-format/time-format-ts-page.ts b/app/ns-ui-widgets-category/time-picker/time-format/time-format-ts-page.ts index cd997f5..b179d66 100644 --- a/app/ns-ui-widgets-category/time-picker/time-format/time-format-ts-page.ts +++ b/app/ns-ui-widgets-category/time-picker/time-format/time-format-ts-page.ts @@ -1,6 +1,5 @@ // >> timepicker-time-format-code-ts -import {isAndroid, isIOS} from "tns-core-modules/platform"; -import { TimePicker } from "tns-core-modules/ui/time-picker"; +import { isAndroid, isIOS, TimePicker } from "@nativescript/core"; export function onPickerLoaded(args) { const timePicker: TimePicker = args.object; diff --git a/app/ns-ui-widgets-category/time-picker/time-picker-page.js b/app/ns-ui-widgets-category/time-picker/time-picker-page.js index d56f8b5..b38513a 100644 --- a/app/ns-ui-widgets-category/time-picker/time-picker-page.js +++ b/app/ns-ui-widgets-category/time-picker/time-picker-page.js @@ -1,16 +1,16 @@ -const ListViewLinksModel = require("../../links-view-model"); -const link = require("../../link"); +import ListViewLinksModel from "../../links-view-model"; +import Link from "../../link"; const navigationLinks = [ - new link("Getting Started", "ns-ui-widgets-category/time-picker/basics/basics-page"), - new link("Time Picker Bindings", "ns-ui-widgets-category/time-picker/binding/binding-page"), - new link("Time Format (12 vs 24 hours)", "ns-ui-widgets-category/time-picker/time-format/time-format-page") + new Link("Getting Started", "ns-ui-widgets-category/time-picker/basics/basics-page"), + new Link("Time Picker Bindings", "ns-ui-widgets-category/time-picker/binding/binding-page"), + new Link("Time Format (12 vs 24 hours)", "ns-ui-widgets-category/time-picker/time-format/time-format-page") ]; const navigationLinksTsc = [ - new link("Getting Started", "ns-ui-widgets-category/time-picker/basics/basics-ts-page"), - new link("Time Picker Bindings", "ns-ui-widgets-category/time-picker/binding/binding-ts-page"), - new link("Time Format (12 vs 24 hours)", "ns-ui-widgets-category/time-picker/time-format/time-format-ts-page") + new Link("Getting Started", "ns-ui-widgets-category/time-picker/basics/basics-ts-page"), + new Link("Time Picker Bindings", "ns-ui-widgets-category/time-picker/binding/binding-ts-page"), + new Link("Time Format (12 vs 24 hours)", "ns-ui-widgets-category/time-picker/time-format/time-format-ts-page") ]; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; page.bindingContext = new ListViewLinksModel({ links: navigationLinks, @@ -19,4 +19,4 @@ function onNavigatingTo(args) { tsclinks: navigationLinksTsc }); } -exports.onNavigatingTo = onNavigatingTo; + diff --git a/app/ns-ui-widgets-category/web-view/basics/basics-page.js b/app/ns-ui-widgets-category/web-view/basics/basics-page.js index 4c83ef9..3e1e7e3 100644 --- a/app/ns-ui-widgets-category/web-view/basics/basics-page.js +++ b/app/ns-ui-widgets-category/web-view/basics/basics-page.js @@ -1,8 +1,6 @@ // >> setting-url-webview -const Observable = require("tns-core-modules/data/observable").Observable; -const dialogs = require("tns-core-modules/ui/dialogs"); -const webViewModule = require("tns-core-modules/ui/web-view"); -function onNavigatingTo(args) { +import { Dialogs, Observable, WebView } from "@nativescript/core"; +export function onNavigatingTo(args) { const page = args.object; const vm = new Observable(); vm.set("webViewSrc", "https://docs.nativescript.org/"); @@ -11,14 +9,14 @@ function onNavigatingTo(args) { page.bindingContext = vm; } // handling WebView load finish event -function onWebViewLoaded(webargs) { +export function onWebViewLoaded(webargs) { const page = webargs.object.page; const vm = page.bindingContext; const webview = webargs.object; vm.set("result", "WebView is still loading..."); vm.set("enabled", false); - webview.on(webViewModule.WebView.loadFinishedEvent, (args) => { + webview.on(WebView.loadFinishedEvent, (args) => { let message = ""; if (!args.error) { message = `WebView finished loading of ${args.url}`; @@ -31,7 +29,7 @@ function onWebViewLoaded(webargs) { }); } // going to the previous page if such is available -function goBack(args) { +export function goBack(args) { const page = args.object.page; const vm = page.bindingContext; const webview = page.getViewById("myWebView"); @@ -41,7 +39,7 @@ function goBack(args) { } } // going forward if a page is available -function goForward(args) { +export function goForward(args) { const page = args.object.page; const vm = page.bindingContext; const webview = page.getViewById("myWebView"); @@ -52,7 +50,7 @@ function goForward(args) { } } // changing WebView source -function submit(args) { +export function submit(args) { const page = args.object.page; const vm = page.bindingContext; const textField = args.object; @@ -62,15 +60,11 @@ function submit(args) { vm.set("webViewSrc", text); textField.dismissSoftInput(); } else { - dialogs.alert("Please, add `http://` or `https://` in front of the URL string") + Dialogs.alert("Please, add `http://` or `https://` in front of the URL string") .then(() => { console.log("Dialog closed!"); }); } } -exports.onNavigatingTo = onNavigatingTo; -exports.onWebViewLoaded = onWebViewLoaded; -exports.submit = submit; -exports.goBack = goBack; -exports.goForward = goForward; + // << setting-url-webview diff --git a/app/ns-ui-widgets-category/web-view/basics/basics-ts-page.ts b/app/ns-ui-widgets-category/web-view/basics/basics-ts-page.ts index 4ee4988..390aef1 100644 --- a/app/ns-ui-widgets-category/web-view/basics/basics-ts-page.ts +++ b/app/ns-ui-widgets-category/web-view/basics/basics-ts-page.ts @@ -1,9 +1,5 @@ // >> setting-url-webview-ts -import {Observable} from "tns-core-modules/data/observable"; -import * as dialogs from "tns-core-modules/ui/dialogs"; -import {WebView, LoadEventData} from "tns-core-modules/ui/web-view"; -import { Page } from "tns-core-modules/ui/page"; -import { TextField } from "tns-core-modules/ui/text-field"; +import { Dialogs, LoadEventData, Observable, Page, TextField, WebView } from "@nativescript/core"; export function onNavigatingTo(args) { const page: Page = args.object; @@ -65,7 +61,7 @@ export function submit(args) { vm.set("webViewSrc", text); textField.dismissSoftInput(); } else { - dialogs.alert("Please, add `http://` or `https://` in front of the URL string") + Dialogs.alert("Please, add `http://` or `https://` in front of the URL string") .then(() => { console.log("Dialog closed!"); }); diff --git a/app/ns-ui-widgets-category/web-view/events/events-page.js b/app/ns-ui-widgets-category/web-view/events/events-page.js index ec6c00e..e2f9b0f 100644 --- a/app/ns-ui-widgets-category/web-view/events/events-page.js +++ b/app/ns-ui-widgets-category/web-view/events/events-page.js @@ -1,8 +1,8 @@ -const Observable = require("tns-core-modules/data/observable").Observable; +import { Observable } from "@nativescript/core"; const firstUrl = "https://google.com/"; const secondUrl = "https://www.nativescript.org/"; // >> webview-js-events -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; const vm = new Observable(); vm.set("webViewSrc", secondUrl); @@ -10,7 +10,7 @@ function onNavigatingTo(args) { page.bindingContext = vm; } -function onLoadStarted(args) { +export function onLoadStarted(args) { const page = args.object; const vm = page.bindingContext; vm.set("isItemVisible", true); @@ -37,7 +37,7 @@ function onLoadStarted(args) { console.log(message); } -function onLoadFinished(args) { +export function onLoadFinished(args) { const page = args.object; const vm = page.bindingContext; let message; @@ -68,28 +68,22 @@ function onLoadFinished(args) { // << (hide) } -function loadFirst(args) { +export function loadFirst(args) { const page = args.object.page; const vm = page.bindingContext; vm.set("webViewSrc", firstUrl); } -function loadSecond(args) { +export function loadSecond(args) { const page = args.object.page; const vm = page.bindingContext; vm.set("webViewSrc", secondUrl); } -function onReload(args) { +export function onReload(args) { const page = args.object.page; webview = page.getViewById("webview"); webview.reload(); } -exports.onNavigatingTo = onNavigatingTo; -exports.onLoadStarted = onLoadStarted; -exports.onLoadFinished = onLoadFinished; -exports.loadFirst = loadFirst; -exports.loadSecond = loadSecond; -exports.onReload = onReload; // << webview-js-events diff --git a/app/ns-ui-widgets-category/web-view/events/events-ts-page.ts b/app/ns-ui-widgets-category/web-view/events/events-ts-page.ts index 8e8cd87..ffadcdf 100644 --- a/app/ns-ui-widgets-category/web-view/events/events-ts-page.ts +++ b/app/ns-ui-widgets-category/web-view/events/events-ts-page.ts @@ -1,6 +1,5 @@ -import { Observable } from "tns-core-modules/data/observable"; -import { Page } from "tns-core-modules/ui/page"; -import { WebView } from "tns-core-modules/ui/web-view/web-view"; +import { Observable, Page, WebView } from "@nativescript/core"; + const firstUrl = "https://google.com/"; const secondUrl = "https://www.nativescript.org/"; // >> webview-ts-events diff --git a/app/ns-ui-widgets-category/web-view/gestures/gestures-page.js b/app/ns-ui-widgets-category/web-view/gestures/gestures-page.js index 7be1318..69a63c3 100644 --- a/app/ns-ui-widgets-category/web-view/gestures/gestures-page.js +++ b/app/ns-ui-widgets-category/web-view/gestures/gestures-page.js @@ -1,10 +1,9 @@ -const Observable = require("tns-core-modules/data/observable").Observable; +import { Observable, isAndroid } from "@nativescript/core"; // >> webview-require -const webViewModule = require("tns-core-modules/ui/web-view"); +import { WebView } from "@nativescript/core"; // << webview-require -const platformModule = require("tns-core-modules/platform"); // >> webview-js-gestures -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; const vm = new Observable(); vm.set("webViewSrc", "

My First Heading

My first paragraph.

"); @@ -13,29 +12,24 @@ function onNavigatingTo(args) { page.bindingContext = vm; } // disabling the WebView's zoom control(required only for Android) -function onWebViewLoaded(webargs) { +export function onWebViewLoaded(webargs) { const webview = webargs.object; - if (platformModule.isAndroid) { + if (isAndroid) { webview.android.getSettings().setDisplayZoomControls(false); } } // setting up Touch gesture callback method -function webViewTouch(args) { +export function webViewTouch(args) { const page = args.object.page; const vm = page.bindingContext; vm.set("touchResult", `Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`); console.log(`Touch: x: ${args.getX().toFixed(3)} y: ${args.getY().toFixed(3)}`); } // setting up Pan gesture callback method -function webViewPan(args) { +export function webViewPan(args) { const page = args.object.page; const vm = page.bindingContext; vm.set("panResult", `Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`); console.log(`Pan: deltaX: ${args.deltaX.toFixed(3)} deltaY: ${args.deltaY.toFixed(3)}`); } - -exports.onNavigatingTo = onNavigatingTo; -exports.onWebViewLoaded = onWebViewLoaded; -exports.webViewTouch = webViewTouch; -exports.webViewPan = webViewPan; // << webview-js-gestures diff --git a/app/ns-ui-widgets-category/web-view/gestures/gestures-ts-page.ts b/app/ns-ui-widgets-category/web-view/gestures/gestures-ts-page.ts index fd40f95..95d7890 100644 --- a/app/ns-ui-widgets-category/web-view/gestures/gestures-ts-page.ts +++ b/app/ns-ui-widgets-category/web-view/gestures/gestures-ts-page.ts @@ -1,10 +1,9 @@ // tslint:disable:max-line-length -import { Observable } from "tns-core-modules/data/observable"; -import { Page } from "tns-core-modules/ui/page"; +import { Observable, Page } from "@nativescript/core"; // >> webview-import -import { WebView } from "tns-core-modules/ui/web-view"; +import { WebView } from "@nativescript/core"; // << webview-import -import { isAndroid } from "tns-core-modules/platform"; +import { isAndroid } from "@nativescript/core"; // >> webview-js-gestures-ts export function onNavigatingTo(args) { const page: Page = args.object; diff --git a/app/ns-ui-widgets-category/web-view/source-load/article.md b/app/ns-ui-widgets-category/web-view/source-load/article.md index 62911fa..f4bf738 100644 --- a/app/ns-ui-widgets-category/web-view/source-load/article.md +++ b/app/ns-ui-widgets-category/web-view/source-load/article.md @@ -3,6 +3,7 @@ The example demonstrates, how to load content in the WebView component, while us XML -Add WebView `src` from local file +Add WebView `src` from local file. You might need to add a glob for your HTML paths to the copy plugin in webpack.config.js. e.g. `new CopyWebpackPlugin([ { from: { glob: "www/*.html" } }]` + - \ No newline at end of file + diff --git a/app/ns-ui-widgets-category/web-view/source-load/source-load-page.js b/app/ns-ui-widgets-category/web-view/source-load/source-load-page.js index 2bd65f1..2ef896a 100644 --- a/app/ns-ui-widgets-category/web-view/source-load/source-load-page.js +++ b/app/ns-ui-widgets-category/web-view/source-load/source-load-page.js @@ -1,7 +1,6 @@ // >> web-view-src-local-file -const Observable = require("tns-core-modules/data/observable").Observable; -const webViewModule = require("tns-core-modules/ui/web-view"); -function onNavigatingTo(args) { +import { Observable, WebView } from "@nativescript/core"; +export function onNavigatingTo(args) { const page = args.object; const vm = new Observable(); // loading the WebView source while providing a HTML code @@ -13,13 +12,13 @@ function onNavigatingTo(args) { page.bindingContext = vm; } -function onFirstWebViewLoaded(webargs) { +export function onFirstWebViewLoaded(webargs) { const page = webargs.object.page; const vm = page.bindingContext; const webview = webargs.object; vm.set("resultFirstWebView", "First WebView is still loading..."); // handling WebView load finish event - webview.on(webViewModule.WebView.loadFinishedEvent, (args) => { + webview.on(WebView.loadFinishedEvent, (args) => { let message = ""; if (!args.error) { message = `First WebView finished loading of ${args.url}`; @@ -32,13 +31,13 @@ function onFirstWebViewLoaded(webargs) { }); } -function onSecondWebViewLoaded(webargs) { +export function onSecondWebViewLoaded(webargs) { const page = webargs.object.page; const vm = page.bindingContext; const webview = webargs.object; vm.set("resultSecondWebView", "Second WebView is still loading..."); - webview.on(webViewModule.WebView.loadFinishedEvent, (args) => { + webview.on(WebView.loadFinishedEvent, (args) => { let message = ""; if (!args.error) { message = `Second WebView finished loading of ${args.url}`; @@ -51,7 +50,4 @@ function onSecondWebViewLoaded(webargs) { }); } -exports.onNavigatingTo = onNavigatingTo; -exports.onFirstWebViewLoaded = onFirstWebViewLoaded; -exports.onSecondWebViewLoaded = onSecondWebViewLoaded; // << web-view-src-local-file diff --git a/app/ns-ui-widgets-category/web-view/source-load/source-load-ts-page.ts b/app/ns-ui-widgets-category/web-view/source-load/source-load-ts-page.ts index f355c25..f705dc9 100644 --- a/app/ns-ui-widgets-category/web-view/source-load/source-load-ts-page.ts +++ b/app/ns-ui-widgets-category/web-view/source-load/source-load-ts-page.ts @@ -1,8 +1,7 @@ // tslint:disable:max-line-length // >> web-view-src-local-file-ts -import {Observable} from "tns-core-modules/data/observable"; -import {WebView, LoadEventData} from "tns-core-modules/ui/web-view"; -import {Page} from "tns-core-modules/ui/page"; +import { LoadEventData, Observable, Page, WebView } from "@nativescript/core"; + export function onNavigatingTo(args) { const page: Page = args.object; const vm = new Observable(); diff --git a/app/ns-ui-widgets-category/web-view/web-view-page.js b/app/ns-ui-widgets-category/web-view/web-view-page.js index d6c69d6..3feb9ca 100644 --- a/app/ns-ui-widgets-category/web-view/web-view-page.js +++ b/app/ns-ui-widgets-category/web-view/web-view-page.js @@ -1,18 +1,18 @@ -const ListViewLinksModel = require("../../links-view-model"); -const link = require("../../link"); +import ListViewLinksModel from "../../links-view-model"; +import Link from "../../link"; const navigationLinks = [ - new link("BasicWebView", "ns-ui-widgets-category/web-view/basics/basics-page"), - new link("WebView source", "ns-ui-widgets-category/web-view/source-load/source-load-page"), - new link("Gestures", "ns-ui-widgets-category/web-view/gestures/gestures-page"), - new link("Events", "ns-ui-widgets-category/web-view/events/events-page") + new Link("BasicWebView", "ns-ui-widgets-category/web-view/basics/basics-page"), + new Link("WebView source", "ns-ui-widgets-category/web-view/source-load/source-load-page"), + new Link("Gestures", "ns-ui-widgets-category/web-view/gestures/gestures-page"), + new Link("Events", "ns-ui-widgets-category/web-view/events/events-page") ]; const navigationLinksTsc = [ - new link("BasicWebView", "ns-ui-widgets-category/web-view/basics/basics-ts-page"), - new link("WebView source", "ns-ui-widgets-category/web-view/source-load/source-load-ts-page"), - new link("Gestures", "ns-ui-widgets-category/web-view/gestures/gestures-ts-page"), - new link("Events", "ns-ui-widgets-category/web-view/events/events-ts-page") + new Link("BasicWebView", "ns-ui-widgets-category/web-view/basics/basics-ts-page"), + new Link("WebView source", "ns-ui-widgets-category/web-view/source-load/source-load-ts-page"), + new Link("Gestures", "ns-ui-widgets-category/web-view/gestures/gestures-ts-page"), + new Link("Events", "ns-ui-widgets-category/web-view/events/events-ts-page") ]; -function onNavigatingTo(args) { +export function onNavigatingTo(args) { const page = args.object; page.bindingContext = new ListViewLinksModel({ @@ -22,4 +22,4 @@ function onNavigatingTo(args) { tsclinks: navigationLinksTsc }); } -exports.onNavigatingTo = onNavigatingTo; + diff --git a/app/package.json b/app/package.json deleted file mode 100644 index 2b6065b..0000000 --- a/app/package.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "android": { - "v8Flags": "--expose_gc" - }, - "main": "app.js", - "name": "tns-template-hello-world", - "version": "3.4.0" -} \ No newline at end of file diff --git a/app/references.d.ts b/app/references.d.ts index db28a5d..dedd793 100644 --- a/app/references.d.ts +++ b/app/references.d.ts @@ -1 +1 @@ -/// Enable smart suggestions and completions in Visual Studio Code JavaScript projects. +/// diff --git a/app/shared/deep-link-data.js b/app/shared/deep-link-data.js index 28cc46e..545fe0b 100644 --- a/app/shared/deep-link-data.js +++ b/app/shared/deep-link-data.js @@ -1,10 +1,9 @@ -const applicationSettingsModule = require("application-settings"); -const platformModule = require("platform"); +import { ApplicationSettings, isAndroid, isIOS } from "@nativescript/core"; -function DeepLinkData(url, androidActivity) { - if ((platformModule.isAndroid) && (androidActivity !== undefined)) { +export function DeepLinkData(url, androidActivity) { + if ((isAndroid) && (androidActivity !== undefined)) { this.getAndroidIntent(androidActivity); - } else if (platformModule.isIOS) { + } else if (isIOS) { this.getParams(url); } } @@ -14,7 +13,7 @@ DeepLinkData.prototype.getParams = function (url) { if (resulturl.substring(0, 10) === "examplesgo") { const value = this.getParameterByName("gotoexample", resulturl); if (value) { - applicationSettingsModule.setString("gotoexample", value); + ApplicationSettings.setString("gotoexample", value); } } }; @@ -43,4 +42,3 @@ DeepLinkData.prototype.getAndroidIntent = function (args) { } }; -exports.DeepLinkData = DeepLinkData; diff --git a/e2e/examples.js b/e2e/examples.js index fb0edc1..9b06fe9 100644 --- a/e2e/examples.js +++ b/e2e/examples.js @@ -12,7 +12,7 @@ class Example { } } -exports.examples = { +export const examples = { actionBar: new Example("Action Bar", ["Basics", "Code-Behind"]), activityIndicator: new Example("ActivityIndicator", ["Basics", "Code-Behind", "Styling"]), animations: new Example("Animations", ["Animated Properties", "Animating Multiple Views", "Chained Animations", "Properties originX and originY"]), @@ -20,5 +20,5 @@ exports.examples = { applicationSettings: new Example("Application Settings", ["Basics"]), button: new Example("Button", ["Basics", "Code-Behind", "Styling"]), color: new Example("Color", ["Basics"]), - connectivity: new Example("Connectivity", ["Basics"]), -} \ No newline at end of file + connectivity: new Example("Connectivity", ["Basics"]) +}; diff --git a/nativescript.config.ts b/nativescript.config.ts new file mode 100644 index 0000000..8008a97 --- /dev/null +++ b/nativescript.config.ts @@ -0,0 +1,11 @@ +import { NativeScriptConfig } from '@nativescript/core' + +export default { + id: 'org.nativescript.nativescriptsdkexamplesjs', + appResourcesPath: 'app/App_Resources', + android: { + v8Flags: '--expose_gc', + markingMode: 'full', + }, + appPath: 'app', +} as NativeScriptConfig diff --git a/nsconfig.json b/nsconfig.json deleted file mode 100644 index a6d7547..0000000 --- a/nsconfig.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "useLegacyWorkflow": false -} \ No newline at end of file diff --git a/package.json b/package.json index 045611b..4294be6 100644 --- a/package.json +++ b/package.json @@ -19,29 +19,21 @@ "documentation" ], "license": "Apache-2.0", - "nativescript": { - "id": "org.nativescript.nativescriptsdkexamplesjs", - "tns-android": { - "version": "5.4.0" - }, - "tns-ios": { - "version": "5.4.2" - } - }, "dependencies": { - "nativescript-theme-core": "~1.0.4", - "tns-core-modules": "^5.4.3" + "nativescript-theme-core": "^2.0.24", + "@nativescript/core": "7.3.0" }, "devDependencies": { - "eslint": "~5.9.0", + "eslint": "7.20.0", "fs-extra": "^0.30.0", "markdown-snippet-injector": "^0.2.4", - "nativescript-dev-typescript": "~0.9.0", - "nativescript-dev-webpack": "^0.21.0", "tar.gz": "^1.0.7", - "tns-platform-declarations": "^5.3.1", - "tslint": "5.11.0", - "typescript": "~3.1.6" + "tslint": "6.1.3", + "typescript": "4.0.3", + "@nativescript/ios": "7.2.0", + "@nativescript/android": "7.0.1", + "@nativescript/types": "7.2.0", + "@nativescript/webpack": "4.1.0" }, "scripts": { "lint": "eslint \"app/**/*.js\"", @@ -57,5 +49,6 @@ "postbuild": "npm run inject && npm run archive", "e2e": "mocha --opts ./e2e/config/mocha.opts", "update-webpack": "./node_modules/.bin/update-ns-webpack --deps --configs" - } + }, + "main": "app.js" } diff --git a/reference.d.ts b/reference.d.ts index 992a504..d743326 100644 --- a/reference.d.ts +++ b/reference.d.ts @@ -1,2 +1 @@ -/// -/// \ No newline at end of file +/// diff --git a/scripts/build.js b/scripts/build.js index e4e5cd0..8e096cb 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -33,15 +33,15 @@ function compareFiles(leftFile, rightFile) { // Example: // metadata.md - activity-indicator // example-order: styling, basics -function orderExamples (array, order, dirName) { +function orderExamples(array, order, dirName) { var customSortArray = []; - order.forEach(function(item){ - var index = array.indexOf(dirName+"/"+item+"/article.md"); - if(index >= 0){ + order.forEach(function (item) { + var index = array.indexOf(dirName + "/" + item + "/article.md"); + if (index >= 0) { customSortArray.push(array[index]); array.splice(index, 1); } - }); + }); array = array.sort(compareFiles); var resultArray = customSortArray.concat(array); return resultArray; @@ -84,7 +84,7 @@ function gatherArticles(cwd, appDir, articlesDir, jenkinsPosition) { var subDirPath = path.join(appDir, subDir); // Gather all component overviews in the subdirs - ns-ui-widgets-category, data-category - var components = glob.sync(subDirPath + "/*/overview.md").filter(function (file) { + var components = glob.sync(subDirPath + "/*/overview.md").filter(function (file) { return !path.parse(file).dir.endsWith(CATEGORY); }).sort(compareFiles); getComponents(cwd, components, currentDir, jenkinsPosition); @@ -106,116 +106,116 @@ function getComponents(cwd, components, currentDir, jenkinsPosition) { fs.mkdirSync(imgDir); } - components.forEach(function (overview) { - var componentDirName = path.dirname(overview); - var componentHeader = path.basename(componentDirName); - // Create the component article file, i.e. button.md - var componentArticleFile = path.join(currentDir, componentHeader + ".md"); - - var componentPrettyHeader = prettify(componentHeader); - - var componentArticlesOrder = []; - // Jenkins Header - // MetaData.md - var subDirPath = overview.replace("/overview.md", ""); - var pathExists = fs.existsSync(path.join(subDirPath, "metadata.md")); - - if (pathExists) { - var metadata = path.join(subDirPath, "metadata.md"); - var metadataContents = fs.readFileSync(metadata, { encoding: 'utf8' }); - var metadataSplit = metadataContents.split("---"); - fs.appendFileSync(componentArticleFile, "---\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, metadataSplit[1] , { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); - - if(metadataSplit[2].indexOf("example-order") >=0){ - var exampleOrderString = metadataSplit[2].split(":"); - var orderString = exampleOrderString[1].replace(/\s/g,''); - componentArticlesOrder = orderString.split(","); - } - } - else { - fs.appendFileSync(componentArticleFile, "---\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "title: " + componentPrettyHeader + "\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "description: " + componentPrettyHeader + " SDK Examples" + "\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "position: " + jenkinsPosition++ + "\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "slug: " + componentHeader + "\n", { encoding: 'utf8' }); - fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); + components.forEach(function (overview) { + var componentDirName = path.dirname(overview); + var componentHeader = path.basename(componentDirName); + // Create the component article file, i.e. button.md + var componentArticleFile = path.join(currentDir, componentHeader + ".md"); + + var componentPrettyHeader = prettify(componentHeader); + + var componentArticlesOrder = []; + // Jenkins Header + // MetaData.md + var subDirPath = overview.replace("/overview.md", ""); + var pathExists = fs.existsSync(path.join(subDirPath, "metadata.md")); + + if (pathExists) { + var metadata = path.join(subDirPath, "metadata.md"); + var metadataContents = fs.readFileSync(metadata, { encoding: 'utf8' }); + var metadataSplit = metadataContents.split("---"); + fs.appendFileSync(componentArticleFile, "---\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, metadataSplit[1], { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); + + if (metadataSplit[2].indexOf("example-order") >= 0) { + var exampleOrderString = metadataSplit[2].split(":"); + var orderString = exampleOrderString[1].replace(/\s/g, ''); + componentArticlesOrder = orderString.split(","); } + } + else { + fs.appendFileSync(componentArticleFile, "---\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "title: " + componentPrettyHeader + "\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "description: " + componentPrettyHeader + " SDK Examples" + "\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "position: " + jenkinsPosition++ + "\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "slug: " + componentHeader + "\n", { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); + } - // Component Markdown Header - fs.appendFileSync(componentArticleFile, "# " + componentPrettyHeader + "\n\n", {encoding:'utf8'}); + // Component Markdown Header + fs.appendFileSync(componentArticleFile, "# " + componentPrettyHeader + "\n\n", { encoding: 'utf8' }); - // Component Overview - var overviewContents = fs.readFileSync(overview, {encoding:'utf8'}); - fs.appendFileSync(componentArticleFile, overviewContents + "\n\n", {encoding:'utf8'}); + // Component Overview + var overviewContents = fs.readFileSync(overview, { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, overviewContents + "\n\n", { encoding: 'utf8' }); - // Component Images - let componentImage = path.join(componentDirName, "image.png"); - if (fs.existsSync(componentImage)) { - let newImageFileName = componentHeader + "-" + "image.png"; - fs.copySync(componentImage, path.join(imgDir, newImageFileName)); + // Component Images + let componentImage = path.join(componentDirName, "image.png"); + if (fs.existsSync(componentImage)) { + let newImageFileName = componentHeader + "-" + "image.png"; + fs.copySync(componentImage, path.join(imgDir, newImageFileName)); - fs.appendFileSync(componentArticleFile, "![Image](img/" + newImageFileName + " \"Image\")\n\n", {encoding:'utf8'}); - } - var articles = []; - if(componentArticlesOrder.length >0){ - articles = orderExamples(glob.sync(componentDirName + "/**/article.md"), componentArticlesOrder, componentDirName); - } else{ - articles = glob.sync(componentDirName + "/**/article.md").sort(compareFiles); + fs.appendFileSync(componentArticleFile, "![Image](img/" + newImageFileName + " \"Image\")\n\n", { encoding: 'utf8' }); + } + var articles = []; + if (componentArticlesOrder.length > 0) { + articles = orderExamples(glob.sync(componentDirName + "/**/article.md"), componentArticlesOrder, componentDirName); + } else { + articles = glob.sync(componentDirName + "/**/article.md").sort(compareFiles); + } + + // Append each example to the big article file. + articles.forEach(function (article) { + var articleDirName = path.dirname(article); + var articleHeader = path.basename(articleDirName); + + // Header + var prettyArticleHeader = prettify(articleHeader); + prettyArticleHeader = prettyArticleHeader.replace(/Ios|IOS/, "iOS"); + fs.appendFileSync(componentArticleFile, "## " + prettyArticleHeader + "\n\n", { encoding: 'utf8' }); + + // Content + var articleContents = fs.readFileSync(article, { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, articleContents + "\n\n", { encoding: 'utf8' }); + + // Article Images + let articleImage = path.join(articleDirName, "image.png"); + + if (fs.existsSync(articleImage)) { + let newArticleImageFileName = componentHeader + "-" + articleHeader + "-image.png"; + let joined = path.join(imgDir, newArticleImageFileName); + fs.copySync(articleImage, joined); + + fs.appendFileSync(componentArticleFile, "![Image](img/" + newArticleImageFileName + " \"Image\")\n\n", { encoding: 'utf8' }); } + let articleImages = glob.sync(articleDirName + "/*.png"); + articleImages.forEach(function (imagePath) { + let stringSplitResult = imagePath.split("/"); + let imageName = stringSplitResult[stringSplitResult.length - 1]; + let joined = path.join(imgDir, imageName); + fs.copySync(imagePath, joined); + }) + + // Links + var githubDirUrl = pjson.homepage + "/edit/master/" + path.relative(cwd, articleDirName).replace(/\\/g, "/"); - // Append each example to the big article file. - articles.forEach(function (article) { - var articleDirName = path.dirname(article); - var articleHeader = path.basename(articleDirName); - - // Header - var prettyArticleHeader = prettify(articleHeader); - prettyArticleHeader = prettyArticleHeader.replace(/Ios|IOS/, "iOS"); - fs.appendFileSync(componentArticleFile, "## " + prettyArticleHeader + "\n\n", {encoding:'utf8'}); - - // Content - var articleContents = fs.readFileSync(article, {encoding:'utf8'}); - fs.appendFileSync(componentArticleFile, articleContents + "\n\n", {encoding:'utf8'}); - - // Article Images - let articleImage = path.join(articleDirName, "image.png"); - - if (fs.existsSync(articleImage)) { - let newArticleImageFileName = componentHeader + "-" + articleHeader + "-image.png"; - let joined = path.join(imgDir, newArticleImageFileName); - fs.copySync(articleImage, joined); - - fs.appendFileSync(componentArticleFile, "![Image](img/" + newArticleImageFileName + " \"Image\")\n\n", {encoding:'utf8'}); - } - let articleImages = glob.sync(articleDirName + "/*.png"); - articleImages.forEach(function(imagePath){ - let stringSplitResult = imagePath.split("/"); - let imageName = stringSplitResult[stringSplitResult.length - 1]; - let joined = path.join(imgDir, imageName); - fs.copySync(imagePath, joined); - }) - - // Links - var githubDirUrl = pjson.homepage + "/edit/master/" + path.relative(cwd, articleDirName).replace(/\\/g, "/"); - - var linkToDocument = "[Improve this document](" + githubDirUrl + "/" + path.basename(article) + ")" - fs.appendFileSync(componentArticleFile, linkToDocument + "\n\n", {encoding:'utf8'}); - - var linkToSource = "[Demo Source](" + githubDirUrl + ")" - fs.appendFileSync(componentArticleFile, linkToSource + "\n\n", {encoding:'utf8'}); - - // Horizontal Line - fs.appendFileSync(componentArticleFile, "---\n\n", {encoding:'utf8'}); - }); - - // End.md - var subDirPath = overview.replace("/overview.md", ""); - var end = path.join(subDirPath, "end.md"); - var endContents = fs.readFileSync(end, {encoding:'utf8'}); - fs.appendFileSync(componentArticleFile, endContents + "\n\n", {encoding:'utf8'}); + var linkToDocument = "[Improve this document](" + githubDirUrl + "/" + path.basename(article) + ")" + fs.appendFileSync(componentArticleFile, linkToDocument + "\n\n", { encoding: 'utf8' }); + + var linkToSource = "[Demo Source](" + githubDirUrl + ")" + fs.appendFileSync(componentArticleFile, linkToSource + "\n\n", { encoding: 'utf8' }); + + // Horizontal Line + fs.appendFileSync(componentArticleFile, "---\n\n", { encoding: 'utf8' }); }); + + // End.md + var subDirPath = overview.replace("/overview.md", ""); + var end = path.join(subDirPath, "end.md"); + var endContents = fs.readFileSync(end, { encoding: 'utf8' }); + fs.appendFileSync(componentArticleFile, endContents + "\n\n", { encoding: 'utf8' }); + }); } build(); \ No newline at end of file diff --git a/tsconfig.esm.json b/tsconfig.esm.json deleted file mode 100644 index 95f2ece..0000000 --- a/tsconfig.esm.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "./tsconfig", - "compilerOptions": { - "module": "es2015", - "moduleResolution": "node" - } -} diff --git a/tsconfig.json b/tsconfig.json index bd689c0..d68a952 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,15 +1,17 @@ { "compilerOptions": { - "module": "commonjs", - "target": "es5", - "removeComments": true, + "module": "esnext", + "target": "es2017", + "removeComments": false, "experimentalDecorators": true, "emitDecoratorMetadata": true, "noEmitHelpers": true, "noEmitOnError": true, + "skipLibCheck": true, "lib": [ "es6", - "dom" + "dom", + "es2017" ], "baseUrl": ".", "paths": { @@ -17,13 +19,17 @@ "app/*" ], "*": [ - "./node_modules/tns-core-modules/*", "./node_modules/*" ] - } + }, + "moduleResolution": "node" }, + "include": [ + "./reference.d.ts", + "app/**/*.ts" + ], "exclude": [ "node_modules", "platforms" ] -} \ No newline at end of file +} diff --git a/tsconfig.tns.json b/tsconfig.tns.json deleted file mode 100644 index 95f2ece..0000000 --- a/tsconfig.tns.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "./tsconfig", - "compilerOptions": { - "module": "es2015", - "moduleResolution": "node" - } -} diff --git a/webpack.config.js b/webpack.config.js index b24c242..a970227 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,241 +1,284 @@ -const { join, relative, resolve, sep } = require("path"); +const {join, relative, resolve, sep} = require('path'); +const fs = require('fs'); -const webpack = require("webpack"); -const nsWebpack = require("nativescript-dev-webpack"); -const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); -const CleanWebpackPlugin = require("clean-webpack-plugin"); -const CopyWebpackPlugin = require("copy-webpack-plugin"); -const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); -const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); -const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); +const webpack = require('webpack'); +const nsWebpack = require('@nativescript/webpack'); +const nativescriptTarget = require('@nativescript/webpack/nativescript-target'); +const {getNoEmitOnErrorFromTSConfig} = require('@nativescript/webpack/utils/tsconfig-utils'); +const {CleanWebpackPlugin} = require('clean-webpack-plugin'); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); +const {NativeScriptWorkerPlugin} = require('nativescript-worker-loader/NativeScriptWorkerPlugin'); +const TerserPlugin = require('terser-webpack-plugin'); const hashSalt = Date.now().toString(); -module.exports = env => { - // Add your custom Activities, Services and other Android app components here. - const appComponents = [ - "tns-core-modules/ui/frame", - "tns-core-modules/ui/frame/activity", - ]; - - const platform = env && (env.android && "android" || env.ios && "ios"); +module.exports = (env) => { + const platform = env && ((env.android && 'android') || (env.ios && 'ios') || env.platform); if (!platform) { - throw new Error("You need to provide a target platform!"); + throw new Error('You need to provide a target platform!'); } - const platforms = ["ios", "android"]; + const platforms = ['ios', 'android']; const projectRoot = __dirname; + if (env.platform) { + platforms.push(env.platform); + } + // Default destination inside platforms//... const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot)); - const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS"; const { // The 'appPath' and 'appResourcesPath' values are fetched from - // the nsconfig.json configuration file - // when bundling with `tns run android|ios --bundle`. - appPath = "app", - appResourcesPath = "app/App_Resources", + // the nsconfig.json configuration file. + appPath = 'src', + appResourcesPath = 'App_Resources', // You can provide the following flags when running 'tns run android|ios' snapshot, // --env.snapshot + production, // --env.production uglify, // --env.uglify report, // --env.report sourceMap, // --env.sourceMap + hiddenSourceMap, // --env.hiddenSourceMap hmr, // --env.hmr, - unitTesting, // --env.unitTesting + unitTesting, // --env.unitTesting, + testing, // --env.testing + verbose, // --env.verbose + ci, // --env.ci + snapshotInDocker, // --env.snapshotInDocker + skipSnapshotTools, // --env.skipSnapshotTools + compileSnapshot, // --env.compileSnapshot + appComponents = [], + entries = {}, } = env; + + const useLibs = compileSnapshot; + const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap; const externals = nsWebpack.getConvertedExternals(env.externals); - const appFullPath = resolve(projectRoot, appPath); + let appFullPath = resolve(projectRoot, appPath); + if (!fs.existsSync(appFullPath)) { + // some apps use 'app' directory + appFullPath = resolve(projectRoot, 'app'); + } + const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({projectDir: projectRoot}); + let coreModulesPackageName = 'tns-core-modules'; + const alias = env.alias || {}; + alias['~/package.json'] = resolve(projectRoot, 'package.json'); + alias['~'] = appFullPath; + + if (hasRootLevelScopedModules) { + coreModulesPackageName = '@nativescript/core'; + alias['tns-core-modules'] = coreModulesPackageName; + } const appResourcesFullPath = resolve(projectRoot, appResourcesPath); - const entryModule = nsWebpack.getEntryModule(appFullPath); + const copyIgnore = {ignore: [`${relative(appPath, appResourcesFullPath)}/**`]}; + + const entryModule = nsWebpack.getEntryModule(appFullPath, platform); const entryPath = `.${sep}${entryModule}.ts`; - const entries = { bundle: entryPath }; - if (platform === "ios") { - entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js"; - }; + Object.assign(entries, {bundle: entryPath}, entries); + const tsConfigPath = resolve(projectRoot, 'tsconfig.json'); + + const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some((e) => e.indexOf('@nativescript') > -1); + if (platform === 'ios' && !areCoreModulesExternal && !testing) { + entries['tns_modules/inspector_modules'] = '@nativescript/core/inspector_modules'; + } + + let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist); + + const itemsToClean = [`${dist}/**/*`]; + if (platform === 'android') { + itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots')}`); + itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot')}`); + } + + const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigPath); + + // Add your custom Activities, Services and other android app components here. + appComponents.push('@nativescript/core/ui/frame', '@nativescript/core/ui/frame/activity'); + + nsWebpack.processAppComponents(appComponents, platform); const config = { - mode: uglify ? "production" : "development", + mode: production ? 'production' : 'development', context: appFullPath, externals, watchOptions: { ignored: [ appResourcesFullPath, // Don't watch hidden files - "**/.*", - ] + '**/.*', + ], }, target: nativescriptTarget, entry: entries, output: { pathinfo: false, path: dist, - libraryTarget: "commonjs2", - filename: "[name].js", - globalObject: "global", - hashSalt + sourceMapFilename, + libraryTarget: 'commonjs2', + filename: '[name].js', + globalObject: 'global', + hashSalt, }, resolve: { - extensions: [".ts", ".js", ".scss", ".css"], - // Resolve {N} system modules from tns-core-modules - modules: [ - resolve(__dirname, "node_modules/tns-core-modules"), - resolve(__dirname, "node_modules"), - "node_modules/tns-core-modules", - "node_modules", - ], - alias: { - '~': appFullPath - }, + extensions: ['.ts', '.js', '.scss', '.css'], + // Resolve {N} system modules from @nativescript/core + modules: [resolve(__dirname, `node_modules/${coreModulesPackageName}`), resolve(__dirname, 'node_modules'), `node_modules/${coreModulesPackageName}`, 'node_modules'], + alias, // resolve symlinks to symlinked modules - symlinks: true + symlinks: true, }, resolveLoader: { // don't resolve symlinks to symlinked loaders - symlinks: false + symlinks: false, }, node: { // Disable node shims that conflict with NativeScript - "http": false, - "timers": false, - "setImmediate": false, - "fs": "empty", - "__dirname": false, + http: false, + timers: false, + setImmediate: false, + fs: 'empty', + __dirname: false, }, - devtool: sourceMap ? "inline-source-map" : "none", + devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none', optimization: { - runtimeChunk: "single", + runtimeChunk: 'single', + noEmitOnErrors: noEmitOnErrorFromTSConfig, splitChunks: { cacheGroups: { vendor: { - name: "vendor", - chunks: "all", + name: 'vendor', + chunks: 'all', test: (module, chunks) => { const moduleName = module.nameForCondition ? module.nameForCondition() : ''; - return /[\\/]node_modules[\\/]/.test(moduleName) || - appComponents.some(comp => comp === moduleName); - + return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some((comp) => comp === moduleName); }, enforce: true, }, - } + }, }, minimize: !!uglify, minimizer: [ - new UglifyJsPlugin({ + new TerserPlugin({ parallel: true, - cache: true, - uglifyOptions: { + cache: !ci, + sourceMap: isAnySourceMapEnabled, + terserOptions: { output: { comments: false, + semicolons: !isAnySourceMapEnabled, }, compress: { // The Android SBG has problems parsing the output // when these options are enabled - 'collapse_vars': platform !== "android", - sequences: platform !== "android", - } - } - }) + collapse_vars: platform !== 'android', + sequences: platform !== 'android', + // For v8 Compatibility + keep_infinity: true, // for V8 + reduce_funcs: false, // for V8 + // custom + drop_console: production, + drop_debugger: true, + global_defs: { + __UGLIFIED__: true, + }, + }, + // Required for Element Level CSS, Observable Events, & Android Frame + keep_classnames: true, + }, + }), ], }, module: { rules: [ { - test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath), + include: join(appFullPath, entryPath), use: [ // Require all Android app components - platform === "android" && { - loader: "nativescript-dev-webpack/android-app-components-loader", - options: { modules: appComponents } + platform === 'android' && { + loader: '@nativescript/webpack/helpers/android-app-components-loader', + options: {modules: appComponents}, }, { - loader: "nativescript-dev-webpack/bundle-config-loader", + loader: '@nativescript/webpack/bundle-config-loader', options: { loadCss: !snapshot, // load the application css if in debug mode unitTesting, appFullPath, projectRoot, - } + ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform), + }, }, - ].filter(loader => !!loader) + ].filter((loader) => !!loader), }, { - test: /-page\.ts$/, - use: "nativescript-dev-webpack/script-hot-loader" + test: /\.(ts|css|scss|html|xml)$/, + use: '@nativescript/webpack/hmr/hot-loader', }, - { - test: /\.(css|scss)$/, - use: "nativescript-dev-webpack/style-hot-loader" - }, - - { - test: /\.(html|xml)$/, - use: "nativescript-dev-webpack/markup-hot-loader" - }, - - { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" }, + {test: /\.(html|xml)$/, use: '@nativescript/webpack/helpers/xml-namespace-loader'}, { test: /\.css$/, - use: { loader: "css-loader", options: { minimize: false, url: false } } + use: '@nativescript/webpack/helpers/css2json-loader', }, { test: /\.scss$/, - use: [ - { loader: "css-loader", options: { minimize: false, url: false } }, - "sass-loader" - ] + use: ['@nativescript/webpack/helpers/css2json-loader', 'sass-loader'], }, { test: /\.ts$/, use: { - loader: "ts-loader", + loader: 'ts-loader', options: { - configFile: "tsconfig.tns.json", + configFile: tsConfigPath, + // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds + // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement + transpileOnly: true, allowTsInNodeModules: true, compilerOptions: { - sourceMap - } + sourceMap: isAnySourceMapEnabled, + declaration: false, + }, + getCustomTransformers: (program) => ({ + before: [require('@nativescript/webpack/transformers/ns-transform-native-classes').default], + }), }, - } + }, }, - ] + ], }, plugins: [ // Define useful constants like TNS_WEBPACK new webpack.DefinePlugin({ - "global.TNS_WEBPACK": "true", - "process": undefined, + 'global.TNS_WEBPACK': 'true', + 'global.isAndroid': platform === 'android', + 'global.isIOS': platform === 'ios', + process: 'global.process', }), // Remove all files from the out dir. - new CleanWebpackPlugin([`${dist}/**/*`]), - // Copy assets to out dir. Add your own globs as needed. - new CopyWebpackPlugin([ - { from: { glob: "ns-ui-widgets-category/web-view/source-load/*.html" } }, - { from: { glob: "ns-ui-widgets-category/placeholder/platform-files/*.ts" } }, - { from: { glob: "fonts/**" } }, - { from: { glob: "**/*.jpg" } }, - { from: { glob: "**/*.png" } }, - ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }), - // Generate a bundle starter script and activate it in package.json - new nsWebpack.GenerateBundleStarterPlugin( - // Don't include `runtime.js` when creating a snapshot. The plugin - // configures the WebPack runtime to be generated inside the snapshot - // module and no `runtime.js` module exist. - (snapshot ? [] : ["./runtime"]) - .concat([ - "./vendor", - "./bundle", - ]) - ), + new CleanWebpackPlugin({ + cleanOnceBeforeBuildPatterns: itemsToClean, + verbose: !!verbose, + }), + // Copy assets + new CopyWebpackPlugin( + [ + {from: {glob: "ns-ui-widgets-category/web-view/source-load/*.html"}}, + {from: {glob: "ns-ui-widgets-category/placeholder/platform-files/*.ts"}}, + {from: {glob: 'assets/**', dot: false}}, + {from: {glob: 'fonts/**', dot: false}}, + {from: {glob: '**/*.jpg', dot: false}}, + {from: {glob: '**/*.png', dot: false}}], copyIgnore), + new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'), // For instructions on how to set up workers with webpack // check out https://github.com/nativescript/worker-loader new NativeScriptWorkerPlugin(), @@ -245,47 +288,52 @@ module.exports = env => { }), // Does IPC communication with the {N} CLI to notify events when running in watch mode. new nsWebpack.WatchStateLoggerPlugin(), + // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds + // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement + new ForkTsCheckerWebpackPlugin({ + async: false, + typescript: { + configFile: tsConfigPath, + memoryLimit: 4096, + diagnosticOptions: { + syntactic: true, + semantic: true, + }, + }, + }), ], }; - // Copy the native app resources to the out dir - // only if doing a full build (tns run/build) and not previewing (tns preview) - if (!externals || externals.length === 0) { - config.plugins.push(new CopyWebpackPlugin([ - { - from: `${appResourcesFullPath}/${appResourcesPlatformDir}`, - to: `${dist}/App_Resources/${appResourcesPlatformDir}`, - context: projectRoot - }, - ])); - } - if (report) { // Generate report files for bundles content - config.plugins.push(new BundleAnalyzerPlugin({ - analyzerMode: "static", - openAnalyzer: false, - generateStatsFile: true, - reportFilename: resolve(projectRoot, "report", `report.html`), - statsFilename: resolve(projectRoot, "report", `stats.json`), - })); + config.plugins.push( + new BundleAnalyzerPlugin({ + analyzerMode: 'static', + openAnalyzer: false, + generateStatsFile: true, + reportFilename: resolve(projectRoot, 'report', `report.html`), + statsFilename: resolve(projectRoot, 'report', `stats.json`), + }) + ); } if (snapshot) { - config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ - chunk: "vendor", - requireModules: [ - "tns-core-modules/bundle-entry-points", - ], - projectRoot, - webpackConfig: config, - })); + config.plugins.push( + new nsWebpack.NativeScriptSnapshotPlugin({ + chunk: 'vendor', + requireModules: ['@nativescript/core/bundle-entry-points'], + projectRoot, + webpackConfig: config, + snapshotInDocker, + skipSnapshotTools, + useLibs, + }) + ); } if (hmr) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); } - return config; };