How to add custom component from js to nativescript?

Question

Suppose I create a small component that accepts input and sets a label to show it.

Application / components / testComponent / testComponent.xml:

<Label id="someLabel" loaded="onLoad"/> 

applications / components / testComponent / testComponent.js:

 exports.onLoad = args => { const obj = args.object; const label = obj.getViewById('someLabel'); label.text = obj.someString || 'no string given'; }; 

Now I can use this component on any of my pages.

 <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:testComponent="components/testComponent"> <StackLayout> <testComponent:testComponent someString="hello {N}"/> </StackLayout> </Page> 

This seems to be the official way to do this, and it works. But is there any way to embed this component on the page using javascript only?

Answer 1

Yes, a declarative user interface (i.e. xml) is actually a building system that parses xml and generates JS, so you don't need to.

So, if you want to do this manually, you will leave your component code yourself, and you will change your main screen code like this:

 <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoad"> <StackLayout id='sl'> </StackLayout> </Page> 

The first thing you will notice is that we loaded the page as a loaded event, you need to actually run your code somewhere in order to attach your component to the visual tree. The second thing we did was add an id to the StackLayout; this is technically not really required - you can navigate the NS tree and find the correct StackLayout; but for simplicity, adding an identifier is simplified.

---

Thus, the JS code on your page will look like this:

 var builder = require('ui/builder'); var fs = require('file-system'); exports.onLoad = function(args) { // Get our current Page that is being loaded var page = args.object; // Find our StackLayout var stackLayout = page.getViewById('sl'); // Load our JS for the component var path = fs.knownFolders.currentApp().path; var componentJS = require(path + '/components/testComponent/testComponent.js'); // Actually have the builder build the Component using the XML & JS. var component = builder.load(path + '/components/testComponent/testComponent.xml', componentJS); // And add our component to the visual tree stackLayout.addChild(component); }; 

I believe that since you are adding a child to the loaded event, the page load event in the child component will be fired, but do not hold me for that. If this is not the case, you can manually start it at the same time when you add it ...

Answer 2

where filepath is a script - or even a class, a callback function can instantiate. It is as if it loaded at page load and displayed in most developer tool consoles.

  var uuid='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); var url = filepath + "?" + uuid;//prevent caching - does not work with ajax setup try { $.getScript(url, "callbackfunctionname('" + filepath + "')");//getScript callback seems broken so use own } catch (e) { //error handle }