Tabris.js Widgets: Composite

Think of composite as a container (box) which can contain items. Yes, a composite behaves just like a box. It is able to contain other widgets just as a box can contain other items. In this article, we will be discussing the composite in Tabris.js and the various methods, properties, and events associated with it. Let’s dive in.

A composite is a widget, so to include it in our project, we import it from Tabris.js, like this:

const {Composite} = require('tabris');

1	const {Composite} = require('tabris');

As usual, to see the added widgets in our project, we need to import our contentView as well by modifying the import code to this.

const {Composite, contentView} = require('tabris');

1	const {Composite, contentView} = require('tabris');

Composite makes use of the append() method to add other widgets to itself. The append() method takes other widgets as a parameter.

This method is called, after the widget has been created, like so:

const {Composite,TextView, contentView} = require('tabris');
 
 new Composite({
  left:20, right:20, top:20, bottom:"40%",
  background:"#f2f2f2"
 }).append(
  //new widgets here....
  new TextView({
     centerX:0, centerY:0, text:" Tabris.js rocks!"
  })
 ).appendTo(contentView);

const {Composite,TextView, contentView} = require('tabris');

new Composite({

left:20, right:20, top:20, bottom:"40%",

background:"#f2f2f2"

}).append(

//new widgets here....

new TextView({

centerX:0, centerY:0, text:" Tabris.js rocks!"

})

).appendTo(contentView);

Also, we can use the appendTo() method to add other widgets to the composite in case we assigned the composite a variable. The method takes the widget to be appended as a parameter.

The snippet below demonstrates it:

const {Composite,TextView, contentView} = require('tabris');
 
 let myComposite = new Composite({
  left:20, right:20, top:20, bottom:"40%",
  background:"#f2f2f2"
 }).appendTo(contentView);
 
 //new widgets here....
 new TextView({
  centerX:0, centerY:0, text:"Tabris.js rocks!"
 }).appendTo(myComposite);

const {Composite,TextView, contentView} = require('tabris');

let myComposite = new Composite({

left:20, right:20, top:20, bottom:"40%",

background:"#f2f2f2"

}).appendTo(contentView);

//new widgets here....

new TextView({

centerX:0, centerY:0, text:"Tabris.js rocks!"

}).appendTo(myComposite);

Same as buttons, we can also monitor whenever a user taps on the composite by using a tap event like so:

const {Composite,TextView, contentView} = require('tabris');
 
 let myComposite = new Composite({
  left:20, right:20, top:20, bottom:"40%",
  background:"#f2f2f2",
  highlightOnTouch:true,
  elevation:3,
  cornerRadius:5
 }).on({'tap':()=>{
   //print out info to the console
   console.log("You tapped me!");
 }}).appendTo(contentView);
 
 //new widgets here....
 new TextView({
  centerX:0, centerY:0, text:"Tabris.js rocks!"
 }).appendTo(myComposite);

const {Composite,TextView, contentView} = require('tabris');

let myComposite = new Composite({

left:20, right:20, top:20, bottom:"40%",

background:"#f2f2f2",

highlightOnTouch:true,

elevation:3,

cornerRadius:5

}).on({'tap':()=>{

//print out info to the console

console.log("You tapped me!");

}}).appendTo(contentView);

//new widgets here....

new TextView({

centerX:0, centerY:0, text:"Tabris.js rocks!"

}).appendTo(myComposite);

We can also add more styling to the composite like highlightOnTouch property which takes a Boolean value to create a nice ripple event whenever the composite is tapped, also we use elevation, which takes an integer value to give the composite a shadow effect like buttons and conerRadius to round the corners of the composite.

Events such as addChild({target,child,index}) can be used to monitor whenever a new child is added to the composite.
The above property like target refers to the widget the event was fired on (which in this case is our composite).

child is the new widget that is added to the composite. And index represents the position the new widget is occupying.

Moreover, we can use the removeChild({target,child,index}) to monitor anytime a widget has been removed from our composite.

Click the link below to view a snippet on how to create a beautiful card view layout with composite. Or scan the QR code below to view it in the developer app.

Composite_card-layout