Nativescript: Question - How to use Android aar/Jar files with a view in NS

[dudipsh]

I was trying to use this plugin
https://github.com/square/android-times-square
I look up all NS documentation and still I didn't found a way to make it works
it's possible to add the view from Java in nativescript project if so ?

[NickIliev]

@dudipsh you can't reuse Android XML snippets (like this one) directly - you need to create the component via code-behind and use a NativeScript UI layout as your "container". In Android, each element presented in the XML view has a Java class and the element can be created via code-behind implementation. For example, take a look at our code about creating a Button - we are not using the Android XML but creating the Button via code-behind and wrapping it in a NativeScript's view (e.g. TextBase which extends from View)

See this section of the NativeScript documentation on how to create a UI plugin and refer to the example for android.widget.Button. Note that MyButtonBase extends the NativeScript's View and then in MyButton in the Android-specific file, we are creating the native element android.widget.Button

createNativeView(): Object {
    // Initialize ClickListener.
    initializeClickListener();

    // Create new instance of android.widget.Button.
    const button = new android.widget.Button(this._context);

    // set onClickListener on the nativeView.
    button.setOnClickListener(clickListener);

    return button;
}

So that said, you should create your UI element by initializing the native view and listeners in the code behind and wrapping them in a nativescript View (or any layout as all layouts are extending the View class)

The best approach for creating a new UI element in NativeScript is to create it in a plugin while using the plugin-seed repository. I am strongly recommending going through the following documentation sections for more details:

• Building a plugin with the Plugin Seed
• Building UI plugins with Custom Components
• Android plugin infrastructure - this one is important so you would know where to provide the *.aar or *.jar files within your plugin (or how to use Gradle to get your native dependencies)

[dudipsh]

@NickIliev
Thank you for the clarification
Assuming I want to use this control is there a way to use this Calendar?
https://github.com/square/android-times-square
Or
https://github.com/savvisingh/DateRangePicker
its possible to "convert" that XML code to "code-behind"?

[NickIliev]

@dudipsh I've created this basic POC plugin (using the NativeScript Plugin Seed) demonstrating how to use the *.aar classes to create a calendar view. I have shown just the initialization to use as a reference.. from this point on you can extend the logic and provide additional properties and functionalities.

To see the plugin in action start the TypeScript demo.

git clone https://github.com/NickIliev/nativescript-square-calendar
cd src
npm run demo.android

Here are the most important code highlights in the POC

• the plugin's include.gradle to add the native library

• the common file to extend the NativeScript's View

• the Android-specific file to add the logic for createNativeView

• The actual usage in the demo project

[dudipsh]

@NickIliev
Wow, you are awesome!!!!!
Thank you very much

[dudipsh]

@NickIliev
I have two issues,

https://github.com/dudipsh/nativescript-square-calendar

1: when I run npm run demo-angular.android
i get
StaticInjectorError(AppModule)[NSLocationStrategy -> FrameService]: StaticInjectorError(Platform: core)[NSLocationStrategy -> FrameService]: NullInjectorError: No provider for FrameService!

as a workaround, I publish to npm and install in a separate project but I very hard to debug and fix issues,
2: I can't get the selected value
Meaning I don't know how to get call getSelectedValue() in the angular project

angular/square-calendar.module.ts

import { Common } from '../square-calendar.common';
import { NgModule } from "@angular/core";
import { registerElement } from "nativescript-angular/element-registry";
declare let com: any;
import {DIRECTIVES} from './square-calendar.directive';

@NgModule({
    declarations: [DIRECTIVES],
    exports: [DIRECTIVES],
})


export class SquareCalendarModule extends Common {
    private _androidViewId: number;
    private calendarView;

    nativeViewProtected: any;
    public createNativeView() {
        let nextYear = java.util.Calendar.getInstance();
        nextYear.add(java.util.Calendar.YEAR, 1);
        const today = new java.util.Date();
        const CalendarPickerView = com.savvi.rangedatepicker.CalendarPickerView;

        this.calendarView = new CalendarPickerView(this._context, null);

        this.calendarView.init(today, nextYear.getTime())
            .inMode(CalendarPickerView.SelectionMode.RANGE);
          //  .withSelectedDate(new java.util.Date());

        return this.calendarView;
        //   return '';
    }


    public initNativeView(): void {
        super.initNativeView();
        this._androidViewId = android.view.View.generateViewId();
        this.nativeView.setId(this._androidViewId);
    }
    public getSelectedValue() {
        return this.calendarView.getSelectedDates();
    }
    // public disposeNativeView() {
    //     const nativeView: any = this.nativeViewProtected;
    //     super.disposeNativeView();
    // }

}
registerElement("SquareCalendar", () => require("../").SquareCalendar);

[NickIliev]

@dudipsh

Regarding the first issue - see the detailed article about using NativeScript Plugin Seed - you are missing a setup step.

Regarding the second issue - you lack any code that implements the native selected value change listener. I am not familiar with the library, but there should be a listener that you need to convert to JS and add to your implementation. Again look at the links in the tns-core-modules repo for reference on how this can be achieved.

[dudipsh]

@NickIliev

Thanks, I'll look into 'tns-core-modules'

npm run demo.android work

i was trying to run i get the error

npm run postclone
npm run demo-angular.android
i get the error

**EDIT
I create a new project and by using the Seed and copy the code now the angular is running !

the com.savvi.rangedatepicker.CalendarPickerView plugin has method called getSelectedDates()
if i make timeout and select dates before the timeout run i get the selected value, my problem is how to pass the value to the page.

[dudipsh]

@NickIliev
Thank you for the help, its works!