Making nativescript plugin! .. i need some advice


#1

i am making a nativescript plugin to a feature i use a lot in my apps so i decide to share it with the community but i faced a deadend maybe i did not get the concept of the plugins development or there is something missing let me explain what i am facing here

this xml code call a class in my plugin javascript i will put it below

<FS:FilterSelect items="{{ items }}">
  <FS:FilterSelect.itemTemplate>
    <GridLayout>
      <Label text="{{ value }}"/>
    </GridLayout>
  </FS:FilterSelect.itemTemplate>
</FS:FilterSelect>

this is the class

export class Common extends View {
       constructor() {
        super();
        console.log('its work');
         }
}

here everything fine two things i need to do and i don’t know how to do it

First thing is : how i can render Button or Textview or any view in the NativeScript library ?

Second thing is : how i can get the itemTemplate as a string or Template so i can pass it to ListView itemTemplate

var btn= new Button();

var listview = new listview();

listview.itemTemplate = xml.ItemTemplate;

this.render(btn);
  btn.onTap=function(){
    showModal();
  }

so what i dreaming to do above is to render a button on click on it modal show and inside this modal there is a listview, i did all of that the modal part and the listview but i had problem doing the template part and how i can render from view. i extended my class from stacklayout and i just addChild and its work but its not a good thing to do i think


#2

Hi @moayad,

As for the button part, I’m pretty sure that doing stackLayout.addChild(btn) is okay. It’s actually the way most people, and the NativeScript docs show how to do it. I don’t see a damage by doing that.

Fot the second thing, about the itemTemplate, I don’t fully understand the question you’re making. What is it that you want to pass to the view exactly?


#3

@BryanYomar thanks for fast reply ,

let me first explain what i am trying to do in my plugin

i need to show text field and button when click on the button a modal shows with listview of items when click on one item the value of the textfield takes the listview item value i done all of that and its working fine but i can’t get the template so developer can change the listview items style or structure and the also the stacklayout see the item template as component not as template thats why i think its not good thing to do


#4

Ok, I’ll give you something for the listview template (correct me if I still don’t understand completely).

You want to give the developer the chance to create his own template. The style of each element’s presentation on the view right?

If that’s what you want I think that creating a new ListView on the backend and setting its itemTemplate property equal to any text looking like an XML file. Maybe then you can just make the user give the template as a variable or import as a file to use as a template, but for now here’s some code to help you see how it can be done:

//Get the stackLayout from the view.
@ViewChild("stack") stackLayout: ElementRef;
//Create a ListView variable to hold the new Instance.
    myLV: ListView;
//items binded to the list.
    items = [];

ngOnInit(): void {
        //Get items in the array.
        this.items = this.itemService.getItems();
        //Initializa the list view.
        this.myLV = new ListView();
        //Get the StackLayout element in a variable.
        let sL = this.stackLayout.nativeElement;

        //Bind the backend item array to the list view. Just like in the XML <ListView [items]="items"></ListView>
        this.myLV.items = this.items;

        //set a template for the listview. Here you can get creative and make ways for the developer to insert a template and set it inside this property.
        this.myLV.itemTemplate = `
        
        <StackLayout>
            <Label text="Hola"></Label>
        </StackLayout>
        
        `;
        
        //Never forget to add the ListView into the StackLayout!!!
        sL.addChild(this.myLV);
        
    }

#5

@BryanYomar thanks for your interest in my topic

i think you understood almost everything but let me explain more
Now i am passing the template to the plugin like this and i know how to receive it

<FS:FilterSelect items="{{ items }}"  itemTemplate="{{ template }}" />
 

but my goal to pass it like this

<FS:FilterSelect items="{{ items }}">
  <FS:FilterSelect.itemTemplate>
    <GridLayout>
      <Label text="{{ value }}"/>
    </GridLayout>
  </FS:FilterSelect.itemTemplate>
</FS:FilterSelect>

i don’t know how i can receive it and pass it to the list view like your example you hard coded the template and i pass it as attribute in the xml but my goal is to pass it like above


#6

this is my plugin https://www.npmjs.com/package/nativescript-filter-select