diff --git a/content/core/color.md b/content/core/color.md index 561daecb..0209cf9b 100644 --- a/content/core/color.md +++ b/content/core/color.md @@ -4,25 +4,27 @@ description: Create a color object with any color representation and use it in y --- The `Color` class enables the creation of a color object: - - using color components (alpha, red, green, blue) ranging from 0 to 255, - - using various color representations like ARGB, color names, hex values, and more. - + +- using color components (alpha, red, green, blue) ranging from 0 to 255, +- using various color representations like ARGB, color names, hex values, and more. + The `ios` and `android` properties of the `Color` class instance return the native platform instance of [UIColor](https://developer.apple.com/documentation/uikit/uicolor) on iOS and [Color](https://developer.android.com/reference/android/graphics/Color) on Android. ## How to use the Color class + ### Create a color object from a hex value ```ts -const color = new Color('#FF00CC'); -const colorShortHex = new Color('#F0C'); +const color = new Color('#FF00CC') +const colorShortHex = new Color('#F0C') ``` ### Create a color object from an alpha value ```ts -const colorARGB = new Color(100, 255, 100, 100); +const colorARGB = new Color(100, 255, 100, 100) ``` ## Color API @@ -36,12 +38,15 @@ Creates a color object. The Color class offers the following constructor overloa ```ts const color = new Color(knownColor) ``` + Creates a Color instance from a known color name. + - `knownColor` : A color name string such as `'red'`, `'purple'`, `'orange'`. ```ts const color = new Color(hex) ``` + Creates a Color instance from a color hexidecimal code. - `hex`: A string of a hexidecimal color value such as `'#fff'` or `'#FF00CC'`. @@ -49,12 +54,15 @@ Creates a Color instance from a color hexidecimal code. ```ts const color = new Color(argb) ``` + Creates a Color instance from a number representing a color with an alpha. -- `argb`: A number such as `4293377432` as, representing color. + +- `argb`: A number such as `4293377432` as, representing color. ```ts const color = new Color(alpha: number, red: number, green:number, blue: number, type?: 'rgb' | 'hsl' | 'hsv') ``` + --- ### a @@ -100,7 +108,7 @@ Gets the Blue component of the color. This is a `read-only` property. ### argb ```ts -colorARGB : number = color.argb +colorARGB: number = color.argb ``` Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a `read-only` property. @@ -120,7 +128,7 @@ Gets the Hexadecimal string representation of the color. ### name ```ts -colorName: string =color.name +colorName: string = color.name ``` Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red". @@ -157,7 +165,7 @@ A static Color class method that compares two `Color` instances and returns `tru --- -### Color.isValid() +### Color.isValid() ```ts isValidColorValue: boolean = Color.isValid(value) @@ -213,7 +221,7 @@ A static method that returns a new Color from HSV. color.equals(value) ``` -A Color instance method that checks whether the color instance on which the method is called equals the Color instance passed to the method. +A Color instance method that checks whether the color instance on which the method is called equals the Color instance passed to the method. --- @@ -262,9 +270,10 @@ Returns the color's [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#r ```ts colorWithAlpha: Color = color.setAlpha(a) ``` + Adds the specified alpha to the color instance on which the method is called and returns the result as a new Color instance. -`a` is a value between `0` and `255`. +`a` is a value between `0` and `255`. --- @@ -377,6 +386,7 @@ colorSpinned: Color = color.spin(amount) Spins the hue by the given amount, from -`360` to `360`. Calling with `0`, `360`, or -`360` does nothing since it sets the hue back to what it was before. --- + ### complement() ```ts @@ -388,5 +398,6 @@ Returns a Color instance that is the complement of the current color. --- ## Native Component + - `Android`: [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color) - `iOS`: [UIColor](https://developer.apple.com/documentation/uikit/uicolor?language=objc) diff --git a/content/core/index.md b/content/core/index.md index 2ae459fe..d0103414 100644 --- a/content/core/index.md +++ b/content/core/index.md @@ -22,4 +22,4 @@ next: false -See also [API Reference](/api/). \ No newline at end of file +See also [API Reference](/api/). diff --git a/content/guide/adding-native-code.md b/content/guide/adding-native-code.md index 59cee7fd..e926be1d 100644 --- a/content/guide/adding-native-code.md +++ b/content/guide/adding-native-code.md @@ -2,14 +2,12 @@ title: Adding custom native code to a project --- - -NativeScript allows you to access any native APIs anytime in your app. If the native API you need is not exposed through [@nativescript/core](https://docs.nativescript.org/understanding-packages#nativescript-core) or [third party plugins](https://market.nativescript.org/) or [@nativescript/* plugins](https://docs.nativescript.org/plugins/index.html)), you can add it to your project and access it right away in TypeScript. - +NativeScript allows you to access any native APIs anytime in your app. If the native API you need is not exposed through [@nativescript/core](https://docs.nativescript.org/understanding-packages#nativescript-core) or [third party plugins](https://market.nativescript.org/) or [@nativescript/\* plugins](https://docs.nativescript.org/plugins/index.html)), you can add it to your project and access it right away in TypeScript. 1. Add native code to [App_Resources](/project-structure/app-resources). For example, see [Adding Java/Kotlin code to an application](/project-structure/app-resources#adding-java-kotlin-code-to-an-application) and [Adding ObjectiveC/Swift Code to an application](/project-structure/app-resources#adding-objectivec-swift-code-to-an-application) 2. Generate types for the added APIs -For iOS types run: + For iOS types run: ```cli ns typings ios diff --git a/content/guide/error-handling.md b/content/guide/error-handling.md index 5337787c..1d425847 100644 --- a/content/guide/error-handling.md +++ b/content/guide/error-handling.md @@ -12,21 +12,19 @@ NativeScript allows error handling to be set dependent on whether the app is in ```ts const errorHandler: TraceErrorHandler = { - handlerError(err) { throw err - } + }, } ``` -**Prevent app crash**: Write the error message to the console and continue the execution of the app. +**Prevent app crash**: Write the error message to the console and continue the execution of the app. ```ts const errorHandler: TraceErrorHandler = { - handlerError(err) { Trace.write(err, 'unhandled-error', type.error) - } + }, } ``` @@ -36,10 +34,9 @@ const errorHandler: TraceErrorHandler = { ```ts const errorHandler: TraceErrorHandler = { - handlerError(err) { reportToAnalytics(err) - } + }, } ``` @@ -55,12 +52,12 @@ Nativescript also allows the prevention of an app crash by disabling rethrowing ios: { ... "discardUncaughtJsExceptions": true, - + }, android: { ... "discardUncaughtJsExceptions": true, - + }, ``` @@ -71,18 +68,19 @@ To handle discarded exceptions, two options are available: ```ts import { Application, DiscardedErrorEventData } from '@nativescript/core' -Application.on(Application.discardedErrorEvent, function (args: DiscardedErrorEventData) { - const error = args.error - - console.log('Received discarded exception: ') - console.log(error.message) - console.log(error.name) - console.log(error.stack) - console.log(error.nativeError) - // for example, report the exception to an analytics solution here -}) +Application.on( + Application.discardedErrorEvent, + function (args: DiscardedErrorEventData) { + const error = args.error + + console.log('Received discarded exception: ') + console.log(error.message) + console.log(error.name) + console.log(error.stack) + console.log(error.nativeError) + // for example, report the exception to an analytics solution here + } +) ``` - Assigning a one-argument function to `global.__onDiscardedError` which will receive the exception as a `NativeScriptError` instance. - - diff --git a/content/guide/extending-classes-and-conforming-to-protocols-ios.md b/content/guide/extending-classes-and-conforming-to-protocols-ios.md index 68a985c0..b7e9b22e 100644 --- a/content/guide/extending-classes-and-conforming-to-protocols-ios.md +++ b/content/guide/extending-classes-and-conforming-to-protocols-ios.md @@ -1,6 +1,7 @@ --- title: iOS Subclassing and conforming to protocols --- + ## Extending iOS classes @@ -8,55 +9,75 @@ title: iOS Subclassing and conforming to protocols The following example shows how to extend the `UIViewController`: ```js -const MyViewController = UIViewController.extend({ +const MyViewController = UIViewController.extend( + { // Override an existing method from the base class. // We will obtain the method signature from the protocol. viewDidLoad: function () { - // Call super using the prototype: - UIViewController.prototype.viewDidLoad.apply(this, arguments); - // or the super property: - this.super.viewDidLoad(); + // Call super using the prototype: + UIViewController.prototype.viewDidLoad.apply(this, arguments) + // or the super property: + this.super.viewDidLoad() - // Add UI to the view here... + // Add UI to the view here... + }, + shouldAutorotate: function () { + return false }, - shouldAutorotate: function () { return false; }, // You can override existing properties - get modalInPopover() { return this.super.modalInPopover; }, - set modalInPopover(x) { this.super.modalInPopover = x; }, + get modalInPopover() { + return this.super.modalInPopover + }, + set modalInPopover(x) { + this.super.modalInPopover = x + }, // Additional JavaScript instance methods or properties that are not accessible from Objective-C code. - myMethod: function() { }, + myMethod: function () {}, - get myProperty() { return true; }, - set myProperty(x) { }, -}, { - name: "MyViewController" -}); + get myProperty() { + return true + }, + set myProperty(x) {}, + }, + { + name: 'MyViewController', + } +) ``` The NativeScript runtime adds the `.extend` API, as an option, which is available on any platform native class which takes an object containing platform implementations (`classMembers`) for that class and an optional second argument object defining a `nativeSignature` explained below. -You can also use the `@NativeClass()` decorator with standard class `extends` which may feel a bit more natural. +You can also use the `@NativeClass()` decorator with standard class `extends` which may feel a bit more natural. When creating custom platform native classes which extend others, always make sure their name is unique to avoid class name collisions with others on the system. ```ts @NativeClass() class JSObject extends NSObject implements NSCoding { - public encodeWithCoder(aCoder) { /* ... */ } - - public initWithCoder(aDecoder) { /* ... */ } - - public "selectorWithX:andY:"(x, y) { /* ... */ } - - // An array of protocols to be implemented by the native class - public static ObjCProtocols = [ NSCoding ]; - - // A selector will be exposed so it can be called from native. - public static ObjCExposedMethods = { - "selectorWithX:andY:": { returns: interop.types.void, params: [ interop.types.id, interop.types.id ] } - }; + public encodeWithCoder(aCoder) { + /* ... */ + } + + public initWithCoder(aDecoder) { + /* ... */ + } + + public 'selectorWithX:andY:'(x, y) { + /* ... */ + } + + // An array of protocols to be implemented by the native class + public static ObjCProtocols = [NSCoding] + + // A selector will be exposed so it can be called from native. + public static ObjCExposedMethods = { + 'selectorWithX:andY:': { + returns: interop.types.void, + params: [interop.types.id, interop.types.id], + }, + } } ``` @@ -77,8 +98,7 @@ The `classMembers` object can contain three types of methods: - native visible methods, and - pure JavaScript methods -The pure JavaScript methods are not accessible to native libraries. If you want the method to be visible and callable from the native libraries, pass the `nativeSignature` parameter the needed additional metadata about the method signature to `extend` with needed additional metadata about the method signature. - +The pure JavaScript methods are not accessible to native libraries. If you want the method to be visible and callable from the native libraries, pass the `nativeSignature` parameter the needed additional metadata about the method signature to `extend` with needed additional metadata about the method signature. The `nativeSignature` argument is optional and has the following properties: @@ -97,32 +117,40 @@ The type object in general is one of the `runtime types`: - A primitive types in the `interop.types` object - In rare cases can be a reference type, struct type etc. described with the interop API - The following example is how you can expose a pure JavaScript method to Objective-C APIs: ```js -const MyViewController = UIViewController.extend({ +const MyViewController = UIViewController.extend( + { viewDidLoad: function () { - // ... - const aboutButton = UIButton.buttonWithType(UIButtonType.UIButtonTypeRoundedRect); - // Pass this target and the aboutTap selector for touch up callback. - aboutButton.addTargetActionForControlEvents(this, "aboutTap", UIControlEvents.UIControlEventTouchUpInside); - // ... + // ... + const aboutButton = UIButton.buttonWithType( + UIButtonType.UIButtonTypeRoundedRect + ) + // Pass this target and the aboutTap selector for touch up callback. + aboutButton.addTargetActionForControlEvents( + this, + 'aboutTap', + UIControlEvents.UIControlEventTouchUpInside + ) + // ... }, // The aboutTap is a JavaScript method that will be accessible from Objective-C. - aboutTap: function(sender) { - const alertWindow = new UIAlertView(); - alertWindow.title = "About"; - alertWindow.addButtonWithTitle("OK"); - alertWindow.show(); + aboutTap: function (sender) { + const alertWindow = new UIAlertView() + alertWindow.title = 'About' + alertWindow.addButtonWithTitle('OK') + alertWindow.show() }, -}, { - name: "MyViewController", + }, + { + name: 'MyViewController', exposedMethods: { - // Declare the signature of the aboutTap. We can not infer it, since it is not inherited from base class or protocol. - aboutTap: { returns: interop.types.void, params: [ UIControl ] } - } -}); + // Declare the signature of the aboutTap. We can not infer it, since it is not inherited from base class or protocol. + aboutTap: { returns: interop.types.void, params: [UIControl] }, + }, + } +) ``` ### Overriding Initializers @@ -131,16 +159,15 @@ Initializers should always return a reference to the object itself, and if it ca ```js const MyObject = NSObject.extend({ - init: function() { - const self = this.super.init(); - if (self) { - // The base class initialized successfully - console.log("Initialized"); - } - return self; + init: function () { + const self = this.super.init() + if (self) { + // The base class initialized successfully + console.log('Initialized') } -}); - + return self + }, +}) ``` ## Conforming to Objective-C/Swift protocols @@ -148,30 +175,39 @@ const MyObject = NSObject.extend({ The following example conforms to the `UIApplicationDelegate` protocol: ```js -const MyAppDelegate = UIResponder.extend({ +const MyAppDelegate = UIResponder.extend( + { // Implement a method from UIApplicationDelegate. // We will obtain the method signature from the protocol. - applicationDidFinishLaunchingWithOptions: function (application, launchOptions) { - this._window = new UIWindow(UIScreen.mainScreen.bounds); - this._window.rootViewController = MyViewController.alloc().init(); - this._window.makeKeyAndVisible(); - return true; - } -}, { + applicationDidFinishLaunchingWithOptions: function ( + application, + launchOptions + ) { + this._window = new UIWindow(UIScreen.mainScreen.bounds) + this._window.rootViewController = MyViewController.alloc().init() + this._window.makeKeyAndVisible() + return true + }, + }, + { // The name for the registered Objective-C class. - name: "MyAppDelegate", + name: 'MyAppDelegate', // Declare that the native Objective-C class will implement the UIApplicationDelegate Objective-C protocol. - protocols: [UIApplicationDelegate] -}); + protocols: [UIApplicationDelegate], + } +) ``` Let's look how to declare a delegate in Typescript by setting one for the [Tesseract-OCR-iOS](https://github.com/gali8/Tesseract-OCR-iOS/wiki/Using-Tesseract-OCR-iOS/6510b29bbf18655f29a26f484b00a24cc66ed88b) API ```ts interface G8TesseractDelegate extends NSObjectProtocol { - preprocessedImageForTesseractSourceImage?(tesseract: G8Tesseract, sourceImage: UIImage): UIImage; - progressImageRecognitionForTesseract?(tesseract: G8Tesseract): void; - shouldCancelImageRecognitionForTesseract?(tesseract: G8Tesseract): boolean; + preprocessedImageForTesseractSourceImage?( + tesseract: G8Tesseract, + sourceImage: UIImage + ): UIImage + progressImageRecognitionForTesseract?(tesseract: G8Tesseract): void + shouldCancelImageRecognitionForTesseract?(tesseract: G8Tesseract): boolean } ``` @@ -181,53 +217,52 @@ Implementing the delegate: // native delegates often always extend NSObject // when in doubt, extend NSObject @NativeClass() -class G8TesseractDelegateImpl extends NSObject - implements G8TesseractDelegate { - - static ObjCProtocols = [G8TesseractDelegate] // define our native protocols - - static new(): G8TesseractDelegateImpl { - return super.new() // calls new() on the NSObject - } - - preprocessedImageForTesseractSourceImage(tesseract: G8Tesseract, sourceImage: UIImage): UIImage { - console.info('preprocessedImageForTesseractSourceImage') - return sourceImage - } - - progressImageRecognitionForTesseract(tesseract: G8Tesseract) { - console.info('progressImageRecognitionForTesseract') - } - - shouldCancelImageRecognitionForTesseract(tesseract: G8Tesseract): boolean { - console.info('shouldCancelImageRecognitionForTesseract') - return false - } - +class G8TesseractDelegateImpl extends NSObject implements G8TesseractDelegate { + static ObjCProtocols = [G8TesseractDelegate] // define our native protocols + + static new(): G8TesseractDelegateImpl { + return super.new() // calls new() on the NSObject + } + + preprocessedImageForTesseractSourceImage( + tesseract: G8Tesseract, + sourceImage: UIImage + ): UIImage { + console.info('preprocessedImageForTesseractSourceImage') + return sourceImage + } + + progressImageRecognitionForTesseract(tesseract: G8Tesseract) { + console.info('progressImageRecognitionForTesseract') + } + + shouldCancelImageRecognitionForTesseract(tesseract: G8Tesseract): boolean { + console.info('shouldCancelImageRecognitionForTesseract') + return false + } } ``` Using the class conforming to the `G8TesseractDelegate`: ```ts -let delegate: G8TesseractDelegateImpl; +let delegate: G8TesseractDelegateImpl function image2text(image: UIImage): string { - let tess: G8Tesseract = G8Tesseract.new() - - // The `tess.delegate` property is weak and won't be retained by the Objective-C runtime so you should manually keep the delegate JS object alive as long the tessaract instance is alive - delegate = G8TesseractDelegateImpl.new() - tess.delegate = delegate - - tess.image = image - let results: boolean = tess.recognize() - if (results == true) { - return tess.recognizedText - } else { - return 'ERROR' - } + let tess: G8Tesseract = G8Tesseract.new() + + // The `tess.delegate` property is weak and won't be retained by the Objective-C runtime so you should manually keep the delegate JS object alive as long the tessaract instance is alive + delegate = G8TesseractDelegateImpl.new() + tess.delegate = delegate + + tess.image = image + let results: boolean = tess.recognize() + if (results == true) { + return tess.recognizedText + } else { + return 'ERROR' + } } - ``` ## Limitations diff --git a/content/guide/extending-classes-and-implementing-interfaces-android.md b/content/guide/extending-classes-and-implementing-interfaces-android.md index f7122c67..caa57b32 100644 --- a/content/guide/extending-classes-and-implementing-interfaces-android.md +++ b/content/guide/extending-classes-and-implementing-interfaces-android.md @@ -7,7 +7,7 @@ title: Android Subclassing and Implementing interfaces The following examples demonstrate how to subclass Kotlin/Java classes in NativeScript: - Kotlin: - + ```kotlin class MyButton(context: Context) : android.widget.Button(context) { override fun setEnabled(enabled: Boolean) { @@ -19,7 +19,7 @@ val btn = MyButton(context) ``` - Java: - + ```java public class MyButton extends android.widget.Button { public MyButton(Context context) { @@ -36,44 +36,44 @@ MyButton btn = new MyButton(context); ``` - NativeScript using JavaScript: - + ```js -let constructorCalled = false; +let constructorCalled = false const MyButton = android.widget.Button.extend({ - // constructor - init: function() { - constructorCalled = true; - }, + // constructor + init: function () { + constructorCalled = true + }, - setEnabled: function(enabled) { - this.super.setEnabled(enabled); - } -}); + setEnabled: function (enabled) { + this.super.setEnabled(enabled) + }, +}) -const btn = new MyButton(context); +const btn = new MyButton(context) ``` - NativeScript using TypeScript: ```ts -let constructorCalled = false; +let constructorCalled = false class MyButton extends android.widget.Button { + constructor() { + super() + constructorCalled = true - constructor() { - super(); - constructorCalled = true; - - // necessary when extending TypeScript constructors - return global.__native(this); - } + // necessary when extending TypeScript constructors + return global.__native(this) + } - setEnabled(enabled : boolean): void { - this.super.setEnabled(enabled); - } + setEnabled(enabled: boolean): void { + this.super.setEnabled(enabled) + } } -const btn = new MyButton(context); +const btn = new MyButton(context) ``` + :::tip Note In the above example, the `setEnabled` function's use of `this` keyword points to the JavaScript object that proxies the extended native instance. The `this.super` usage provides access to the base class method implementation. ::: @@ -81,85 +81,82 @@ In the above example, the `setEnabled` function's use of `this` keyword points t Creating an anonymous Java class which extends from the base Java `java.lang.Object` class: - NativeScript using JavaScript: - + ```js const MyClass = java.lang.Object({ - // constructor - init: function() { - }, + // constructor + init: function () {}, - toString: function() { - // override Object's toString - } -}); + toString: function () { + // override Object's toString + }, +}) -const myClassInstance = new MyClass(); +const myClassInstance = new MyClass() ``` - NativeScript using TypeScript: - + ```ts class MyClass extends java.lang.Object { - - constructor() { - super(); - // necessary when extending TypeScript constructors - return global.__native(this); - } + constructor() { + super() + // necessary when extending TypeScript constructors + return global.__native(this) + } - toString(): string { - // override Object's toString - } + toString(): string { + // override Object's toString + } } -const myClassInstance = new MyClass(); +const myClassInstance = new MyClass() ``` To create a named Java class which extends from the `java.lang.Object` class: ```js -const MyClass = java.lang.Object("my.application.name.MyClass", { - // constructor - init: function() { - }, +const MyClass = java.lang.Object('my.application.name.MyClass', { + // constructor + init: function () {}, - toString: function() { - // override Object's toString - } -}); + toString: function () { + // override Object's toString + }, +}) -const myClassInstance = new MyClass(); -const myClassInstance2 = new my.application.name.MyClass(); +const myClassInstance = new MyClass() +const myClassInstance2 = new my.application.name.MyClass() ``` - NativeScript using TypeScript: ```ts class MyClass extends java.lang.Object { - // constructor - constructor() { - super(); - // necessary when extending TypeScript constructors - return global.__native(this); - } + // constructor + constructor() { + super() + // necessary when extending TypeScript constructors + return global.__native(this) + } - toString(): string { - // override Object's toString - } + toString(): string { + // override Object's toString + } } -const myClassInstance = new MyClass(); +const myClassInstance = new MyClass() // Note: A TypeScript compilation error will result because the namespace will not be recognized. It's safe to ignore with // @ts-ignore -const myClassInstance2 = new my.application.name.MyClass(); +const myClassInstance2 = new my.application.name.MyClass() // or you can use as any -const myClassInstance3: any = new (my as any).application.name.MyClass(); +const myClassInstance3: any = new (my as any).application.name.MyClass() // or you can generate types to use with 'ns typings android' ``` -:::tip +:::tip One important thing to note when dealing with extending classes and implementing interfaces in NativeScript is that, unlike in Java - where you can extend an Abstract class with a new java.arbitrary.abstract.Class() { }, in NativeScript the class needs to be extended as per the previous examples - using the extend function on the java.arbitrary.abstract.Class, or using the extends class syntax in TypeScript. ::: @@ -170,7 +167,7 @@ NativeScript provides a way to create custom `android.app.Application` and [andr #### Extending the Android Application 1. Create a new TypeScript file in the root of your project folder - name it `application.android.ts` or `application.android.js` if you are using plain JS. - + ::: tip Note Note the `*.android` suffix - we want this file packaged for Android only. ::: @@ -217,7 +214,7 @@ android.app.Application.extend('org.myApp.Application', { superProto.attachBaseContext.call(this, base) // This code enables MultiDex support for the application (if needed compile androidx.multidex:multidex) // androidx.multidex.MultiDex.install(this); - } + }, }) ``` @@ -241,10 +238,10 @@ This modification is required by the native platform. It tells Android that your ```js const webpack = require('@nativescript/webpack') -module.exports = env => { +module.exports = (env) => { webpack.init(env) - webpack.chainWebpack(config => { + webpack.chainWebpack((config) => { if (webpack.Utils.platform.getPlatformName() === 'android') { // make sure the path to the applicatioon.android.(js|ts) // is relative to the webpack.config.js @@ -285,7 +282,7 @@ import { Frame, Application, setActivityCallbacks, - AndroidActivityCallbacks + AndroidActivityCallbacks, } from '@nativescript/core' @NativeClass() @@ -304,15 +301,29 @@ class Activity extends androidx.appcompat.app.AppCompatActivity { setActivityCallbacks(this) } - this._callbacks.onCreate(this, savedInstanceState, this.getIntent(), super.onCreate) + this._callbacks.onCreate( + this, + savedInstanceState, + this.getIntent(), + super.onCreate + ) } public onNewIntent(intent: android.content.Intent): void { - this._callbacks.onNewIntent(this, intent, super.setIntent, super.onNewIntent) + this._callbacks.onNewIntent( + this, + intent, + super.setIntent, + super.onNewIntent + ) } public onSaveInstanceState(outState: android.os.Bundle): void { - this._callbacks.onSaveInstanceState(this, outState, super.onSaveInstanceState) + this._callbacks.onSaveInstanceState( + this, + outState, + super.onSaveInstanceState + ) } public onStart(): void { @@ -401,7 +412,11 @@ androidx.appcompat.app.AppCompatActivity.extend('org.myApp.MainActivity', { ) }, onSaveInstanceState: function (outState) { - this._callbacks.onSaveInstanceState(this, outState, superProto.onSaveInstanceState) + this._callbacks.onSaveInstanceState( + this, + outState, + superProto.onSaveInstanceState + ) }, onStart: function () { this._callbacks.onStart(this, superProto.onStart) @@ -418,7 +433,11 @@ androidx.appcompat.app.AppCompatActivity.extend('org.myApp.MainActivity', { onBackPressed: function () { this._callbacks.onBackPressed(this, superProto.onBackPressed) }, - onRequestPermissionsResult: function (requestCode, permissions, grantResults) { + onRequestPermissionsResult: function ( + requestCode, + permissions, + grantResults + ) { this._callbacks.onRequestPermissionsResult( this, requestCode, @@ -435,7 +454,7 @@ androidx.appcompat.app.AppCompatActivity.extend('org.myApp.MainActivity', { data, superProto.onActivityResult ) - } + }, /* Add any other events you need to capture */ }) ``` @@ -496,11 +515,13 @@ button.setOnClickListener(new View.OnClickListener() { - NativeScript: ```ts -button.setOnClickListener(new android.view.View.OnClickListener({ - onClick: function() { - // Perform action on click - } -})); +button.setOnClickListener( + new android.view.View.OnClickListener({ + onClick: function () { + // Perform action on click + }, + }) +) ``` Alternatively you can use the following pattern for a named interface implementation using TypeScript: @@ -508,33 +529,35 @@ Alternatively you can use the following pattern for a named interface implementa ```ts @NativeClass() @Interfaces([android.view.View.OnClickListener]) -class ClickListener extends java.lang.Object - implements android.view.View.OnClickListener { - constructor() { - super(); - - // necessary when extending TypeScript constructors - return global.__native(this); - } +class ClickListener + extends java.lang.Object + implements android.view.View.OnClickListener +{ + constructor() { + super() + + // necessary when extending TypeScript constructors + return global.__native(this) + } - onClick(view: android.view.View): void { - // Perform action on click - } + onClick(view: android.view.View): void { + // Perform action on click + } } -nativeView.setOnClickListener(new ClickListener()); +nativeView.setOnClickListener(new ClickListener()) ``` Or using JavaScript: ```js const ClickListener = java.lang.Object.extend({ - // the interfaces to use - interfaces: [android.view.View.OnClickListener], - onClick: function() { - // Perform action on click - } -}); + // the interfaces to use + interfaces: [android.view.View.OnClickListener], + onClick: function () { + // Perform action on click + }, +}) -nativeView.setOnClickListener(new ClickListener()); -``` \ No newline at end of file +nativeView.setOnClickListener(new ClickListener()) +``` diff --git a/content/guide/gestures.md b/content/guide/gestures.md index 2aba172e..49dd65a9 100644 --- a/content/guide/gestures.md +++ b/content/guide/gestures.md @@ -109,7 +109,7 @@ onDoubleTap(args: GestureEventData) { /// --> -## Long press gesture {#long-press-gesture} +## Long press gesture {#long-press-gesture} **Action**: A component is pressed for a few moments. diff --git a/content/guide/styling.md b/content/guide/styling.md index 2fd50420..d7eee8a4 100644 --- a/content/guide/styling.md +++ b/content/guide/styling.md @@ -2,7 +2,7 @@ title: Styling --- -In NativeScript you style the UI similar to how you would in a web application using Cascading Style Sheets (CSS), or by changing the style property of the views in JavaScript/Typescript. For CSS styling, NativeScript supports tools such as [Tailwind](https://docs.nativescript.org/plugins/tailwindcss.html) or [SASS](https://sass-lang.com/). +In NativeScript you style the UI similar to how you would in a web application using Cascading Style Sheets (CSS), or by changing the style property of the views in JavaScript/Typescript. For CSS styling, NativeScript supports tools such as [Tailwind](https://docs.nativescript.org/plugins/tailwindcss.html) or [SASS](https://sass-lang.com/). Similar to the DOM Style Object, each View instance exposes a style property, which holds all the style properties for the view. When the view is displayed, all its style properties are applied to the underlying native component. @@ -62,6 +62,7 @@ When the page's XML declaration file is loaded, NativeScript looks for a CSS fil If you import any custom components on your page, the CSS from those components will be applied to the page, too. As a best practice, scope the CSS of custom components so that component styles do not "leak" on to pages. /// flavor plain + ```xml