Text always left align when input done #16

Author: EddyVerbruggen

README.md

@@ -17,6 +17,8 @@ For iOS. Falls back to the best platform-provided numeric keyboard on Android. N
 
 <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/_readme-header.png" style="max-width: 100%"/>
 
+> BREAKING CHANGE in plugin version 4.0.0: we used to extend a `TextView`, now it's a `TextField`, because I finally hacked my way around a problem that prevented a TextField from emitting a `textChange` event. Note that unless you use the `decorate()` function this will not affect you (bar some now-fixed UI glitches).
+
 ## Installation
 From the command prompt go to your app's root folder and execute:
 
@@ -28,25 +30,26 @@ tns plugin add nativescript-numeric-keyboard
 Check out [the demo](demo) to play with the keyboard. You can run it by typing `npm run demo.iphone` / `npm run demo.ipad` at the root of the project.
 
 ## How it works
-This plugin wraps a [native keyboard library](https://cocoapods.org/?q=MMNumberKeyboard) and extends a regular [NativeScript TextView](https://docs.nativescript.org/cookbook/ui/text-view). You can set any property you'd normally set on this widget (`class`, `text`, etc) and a few plugin-specific properties as well.
+This plugin wraps a [native keyboard library](https://cocoapods.org/?q=MMNumberKeyboard) and extends a regular [NativeScript TextField](https://docs.nativescript.org/cookbook/ui/text-field).
+You can set any property you'd normally set on this widget (`class`, `text`, etc) and a few plugin-specific properties as well.
 
 You can either define the keyboard in XML or in code - use whichever tickles your fancy.
 
 ## Screenshot-driven documentation
-After adding the plugin you can add a namespace to your view (using `NumKey` below) and use the `NumericKeyboardView` tag to render a TextView powered by this plugin.
+After adding the plugin you can add a namespace to your view (using `NumKey` below) and use the `NumericKeyboardView` tag to render a TextField powered by this plugin.
 
 ```xml
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:NK="nativescript-numeric-keyboard">
   <NK:NumericKeyboardView text="123.45" maxLength="10" />
 </Page>
 ```
 
-For comparison sake we kick off with the default appearance of a `TextView` and then showcase the various properties this plugin exposes:
+For comparison sake we kick off with the default appearance of a `TextField` and then showcase the various properties this plugin exposes:
 
 | Appearance | Declaration |
 | --- | --- |
-| <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/regular-number.png" width="187px" height="333px"/> | `<TextView keyboardType="number" text="1.23"/>` |
-| <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/regular-phone.png" width="187px" height="333px"/> | `<TextView keyboardType="phone" text="12.34"/>` |
+| <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/regular-number.png" width="187px" height="333px"/> | `<TextField keyboardType="number" text="1.23"/>` |
+| <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/regular-phone.png" width="187px" height="333px"/> | `<TextField keyboardType="phone" text="12.34"/>` |
 | <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/default-plugin-appearance.png" width="187px" height="333px"/> | `<NK:NumericKeyboardView text="123.45"/>` |
 | <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/custom-button-title.png" width="187px" height="333px"/> | `<NK:NumericKeyboardView returnKeyTitle="OK" text="234.56"/>` |
 | <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/no-decimals.png" width="187px" height="333px"/> | `<NK:NumericKeyboardView noDecimals="true" text="345"/>` |
@@ -60,7 +63,7 @@ It's similar (although a bit cleaner than in these screenshots), except for some
 
 | Appearance | Declaration |
 | --- | --- |
-| <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/ipad-regular-phone.png" width="344px"/> | `<TextView keyboardType="phone" text="12.34"/>` |
+| <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/ipad-regular-phone.png" width="344px"/> | `<TextField keyboardType="phone" text="12.34"/>` |
 | <img src="https://raw.githubusercontent.com/EddyVerbruggen/nativescript-numeric-keyboard/master/screenshots/ipad-default-appearance.png" width="344px"/> | `<NK:NumericKeyboard text="123.45"/>` |
 
 ## Usage with Angular
@@ -89,27 +92,27 @@ For the views you can take a look at the examples above and just replace `NumKey
 ```
 
 ## Programmatic usage
-Say you have a plain old `TextView` in your view:
+Say you have a plain old `TextField` in your view:
 
 ```html
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
-  <TextView id="myTextView" maxlength="8" keyboardType="number" text="{{ myTextPlugin }}" />
+  <TextField id="myTextField" maxlength="8" keyboardType="number" text="{{ myTextPlugin }}" />
 </Page>
 ```
 
-Now you can enhance the `TextView` with this plugin by doing this in the `pageLoaded` event you've defined in the `<Page>` tag above:
+Now you can enhance the `TextField` with this plugin by doing fi. this in the `pageLoaded` event you've defined in the `<Page>` tag above:
 
 ```js
 import { NumericKeyboard } from "nativescript-numeric-keyboard";
 
 export function pageLoaded(args: observable.EventData) {
-  let page = <pages.Page>args.object;
-  let textView = <TextView>page.getViewById("myTextView");
-  // or even textView.ios
+  const page = <pages.Page>args.object;
+  const textField = <TextField>page.getViewById("myTextField");
+  // or even textField.ios
 
   // this is an example with all possible properties, not that they make sense combined :)
   new NumericKeyboard().decorate({
-    textView: textView,
+    textField: textField,
     returnKeyTitle: "Go!",
     locale: "en_US", // or "nl_NL", or any valid locale really (to define the decimal char)
     noReturnKey: true,
@@ -119,6 +122,4 @@ export function pageLoaded(args: observable.EventData) {
 }
 ```
 
-Note that you really need to use a `TextView`, not a `TextField` for this to work as rendering the keyboard works fine, but getting its value just seems to get messed up when we set a different keyboard view. Shouldn't be a problem though, just something to keep in mind.
-
-Also note that on Android you'll just get a numeric keyboard as usual (since we specified `keyboardType="number"`).
+Note that on Android you'll just get a numeric keyboard as usual (since we specified `keyboardType="number"`).

demo/app/app.css

@@ -12,14 +12,14 @@ Label {
   font-weight: bold;
 }
 
-TextView, NumericKeyboardView {
+TextField, NumericKeyboardView {
   font-size: 12;
   padding: 10;
   width: 120;
   text-align: right;
 }
 
-/* Enhanced TextViews are transparent by default */
-.notEnhancedTextView {
+/* Enhanced TextFields are transparent by default */
+.unenhancedTextField {
   background-color: transparent;
-}
+}

demo/app/main-page.ts

@@ -2,20 +2,42 @@ import * as observable from "data/observable";
 import * as pages from "ui/page";
 import { HelloWorldModel } from "./main-view-model";
 import { NumericKeyboard } from "nativescript-numeric-keyboard";
-import { TextView } from "ui/text-view";
+import { TextField } from "tns-core-modules/ui/text-field";
+import { EventData } from "tns-core-modules/data/observable";
 
 // Event handler for Page 'loaded' event attached in main-page.xml
 export function pageLoaded(args: observable.EventData) {
   let page = <pages.Page>args.object;
   page.bindingContext = new HelloWorldModel();
 
-  let textView = <TextView>page.getViewById("defaultPluginKeyboard");
+  const textField = <TextField>page.getViewById("defaultPluginKeyboard");
 
   new NumericKeyboard().decorate({
-    textView: textView,
+    textField: textField,
     returnKeyTitle: "Go!",
     locale: "en_US",
     noDecimals: true,
     noIpadInputBar: true
   });
-}
+}
+
+export function onMyTextLoaded(args: EventData) {
+  args.object.on("textChange", (args: EventData) => {
+    let numkey = <TextField>args.object;
+    console.log("onMyTextLoaded, text entered: " + numkey.text);
+  });
+}
+
+export function onMyTextLoadedPluginCode(args: EventData) {
+  args.object.on("textChange", (args: EventData) => {
+    let numkey = <TextField>args.object;
+    console.log("onMyTextLoadedPluginCode, text entered: " + numkey.text);
+  });
+}
+
+export function onMyTextLoadedPluginView(args: EventData) {
+  args.object.on("textChange", (args: EventData) => {
+    let numkey = <TextField>args.object;
+    console.log("onMyTextLoadedPluginCode, text entered: " + numkey.text);
+  });
+}

demo/app/main-page.xml

@@ -4,18 +4,17 @@
     <ScrollView verticalAlignment="top" style="background-color: #eee">
       <GridLayout rows="auto, auto, auto, auto, auto, auto, auto, auto" columns="*, auto">
 
-        <Label row="0" col="0" text="Regular 'number' keyboard"/>
-        <TextView maxLength="4" class="notEnhancedTextView" keyboardType="number" row="0" col="1" text="{{ myText }}" propertyChange="{{ onPropertyChange }}"/>
+        <Label row="0" col="0" text="Regular 'number' keyboard (max 4)"/>
+        <TextField maxLength="4" class="unenhancedTextField" keyboardType="number" row="0" col="1" text="{{ myText }}" loaded="onMyTextLoaded"/>
 
-        <Label row="1" col="0" text="Regular 'phone' keyboard"/>
-        <TextView class="notEnhancedTextView" keyboardType="phone" row="1" col="1" text="12.34"/>
+        <Label row="1" col="0" text="Regular 'phone' keyboard (max 4)"/>
+        <TextField class="unenhancedTextField" keyboardType="phone" row="1" col="1" text="12.34"/>
 
-        <Label row="2" col="0" text="Plugin keyboard (by code)"/>
-        <!-- not 'TextField', because we can't get the changed value -->
-        <TextView id="defaultPluginKeyboard" maxLength="4" keyboardType="number" row="2" col="1" text="{{ myTextPlugin }}" propertyChange="{{ onPropertyChangePlugin }}"/>
+        <Label row="2" col="0" text="Plugin keyboard (by code, max 4)"/>
+        <TextField id="defaultPluginKeyboard" maxLength="4" keyboardType="number" row="2" col="1" text="{{ myTextPlugin }}" loaded="onMyTextLoadedPluginCode"/>
 
-        <Label row="3" col="0" text="Custom button title"/>
-        <NumKey:NumericKeyboardView maxLength="4" row="3" col="1" returnKeyTitle="OK :)" text="{{ myTextViewPlugin }}" propertyChange="{{ onPropertyChangeViewPlugin }}"/>
+        <Label row="3" col="0" text="Custom button title (max 4)"/>
+        <NumKey:NumericKeyboardView maxLength="4" row="3" col="1" returnKeyTitle="OK :)" text="{{ myTextFieldPlugin }}" loaded="onMyTextLoadedPluginView"/>
 
         <Label row="4" col="0" text="No decimals"/>
         <NumKey:NumericKeyboardView row="4" col="1" noDecimals="true" text="345"/>

demo/app/main-view-model.ts

@@ -1,33 +1,16 @@
-import { EventData, Observable } from 'data/observable';
-import { TextField } from "ui/text-field";
-import { TextView } from "ui/text-view";
+import { Observable } from "tns-core-modules/data/observable";
 
 export class HelloWorldModel extends Observable {
   constructor() {
     super();
   }
-  public myText: number = 1234;
-  public myTextPlugin: number = 2345;
-  public myTextViewPlugin: number = 3456;
-
-  public onPropertyChange(args: EventData) {
-    let numkey = <TextField>args.object;
-    console.log("Entered text a: " + numkey.text);
-  }
-
-  public onPropertyChangePlugin(args: EventData) {
-    let numkey = <TextField>args.object;
-    console.log("Entered text b: " + numkey);
-  }
-
-  public onPropertyChangeViewPlugin(args: EventData) {
-    let numkey = <TextView>args.object;
-    console.log("Entered text c: " + numkey.text);
-  }
+  public myText: number = 123;
+  public myTextPlugin: number = 234;
+  public myTextFieldPlugin: number = 345;
 
   public onSubmit() {
     console.log("Value of this.myText: " + this.myText);
     console.log("Value of this.myTextPlugin: " + this.myTextPlugin);
-    console.log("Value of this.myTextViewPlugin: " + this.myTextViewPlugin);
+    console.log("Value of this.myTextFieldPlugin: " + this.myTextFieldPlugin);
   }
-}
+}

src/numeric-keyboard.android.ts

@@ -19,4 +19,4 @@ export class NumericKeyboardView extends NumericKeyboardViewBase {
   // see https://github.com/NativeScript/NativeScript/issues/4123
   public _onReturnPress(): void {
   }
-}
+}

src/numeric-keyboard.common.ts

@@ -1,8 +1,8 @@
-import { TextView } from "tns-core-modules/ui/text-view";
-import { Property, booleanConverter } from "tns-core-modules/ui/core/view";
+import { TextField } from "tns-core-modules/ui/text-field";
+import { booleanConverter, Property } from "tns-core-modules/ui/core/view";
 
 export interface NumericKeyboardOptions {
-  textView: TextView;
+  textField: TextField;
   noDecimals?: boolean;
   noReturnKey?: boolean;
   returnKeyTitle?: string;
@@ -19,9 +19,10 @@ export interface TextAndDecimalSeparatorHolder {
   getDecimalSeparator(): string;
   getText(): string;
   getMaxLength(): number;
+  getNativeTextField(): any;
 }
 
-export abstract class NumericKeyboardViewBase extends TextView implements TextAndDecimalSeparatorHolder {
+export abstract class NumericKeyboardViewBase extends TextField implements TextAndDecimalSeparatorHolder {
   _decimalSep: string = "unset";
 
   get ios(): any {
@@ -43,6 +44,10 @@ export abstract class NumericKeyboardViewBase extends TextView implements TextAn
   getMaxLength(): number {
     return this.maxLength;
   }
+
+  getNativeTextField(): number {
+    return this.nativeView;
+  }
 }
 
 export const returnKeyTitleProperty = new Property<NumericKeyboardViewBase, string>({