How to pass a widget name to a function in Tabris?

Question

Can I pass the name of the widget to the function to create Tabs?

Something like

let widgetName = new Tab({ ...

Why?

I need to put many different widgets inside of the each tab created, i.e.: .appendTo(tabCart)

Note: When I create a function createTextViews() I assign a unique

id: txvName +(index)

(an array is passed to createTextView(), then a forEach loop)

and can address each TextView by id, which works great.

Sample Code: (works on /playground)

const {Tab, TabFolder, TextView, ui} = require('tabris')

let tabFolder = new TabFolder({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(ui.contentView)

createTab('tabCart', 'Cart')
createTab('tabPay', 'Pay')
createTab('tabStats', 'Stats')

function createTab (widgetName, title) {
// let widgetName = new Tab({  //fails, can't assign twice, wrong type anyways
  let tab = new Tab({
    title: title
  }).appendTo(tabFolder)

  new TextView({
    centerX: 0, centerY: 0,
    text: 'Content of Tab ' + title
  }).appendTo(tab)
}

I'm not exactly sure what you mean by pass the name to a function. Are you trying to get the resulting `Tab` to be assigned to a variable _outside_ the scope of the `createTab` function? If so, the only way to really do that is to use `var` to hoist them, but they'd all be the same reference. Instead, at the bottom of `createTab` you can `return tab;` and assign the response of each function call to a variable, e.g. `let cartTab = createTab(/* ... */);` — Cookie Guru, Aug 03 '18 at 06:44

mrmccormack · Accepted Answer · 2018-08-05T11:50:31.543

Thanks Cookie Guru. Your suggestion of return tab is the solution I was hoping for.
Here's a little sample of how I will be using this in my app:

const {Button, ImageView, Tab, TabFolder, TextView, ui} = require('tabris')

let tabFolder = new TabFolder({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(ui.contentView)

let tabCart = createTab('Cart', 'text-color')
new Button({
  centerX: 0, top: 60,
  text: 'Change textColor / remove tabPay'
}).on('select', () => {
  tabFolder.find('.text-color').set('textColor', 'red')
  tabPay.visible = false
  tabItems.title = 'Items (1)'
}).appendTo(tabCart)

let tabItems = createTab('items', 'text-color')
new ImageView({
  centerX: 0, top: 0,
  image: 'https://raw.githubusercontent.com/eclipsesource/tabris-js/master/snippets/resources/target_200.png'
}).appendTo(tabItems)

let tabPay = createTab('Pay', 'text-color')

function createTab (title, tclass) {
  let tab = new Tab({
    title: title
  }).appendTo(tabFolder)

  new TextView({
    centerX: 0, centerY: 0,
    text: 'Content of Tab ' + title,
    class: tclass
  }).appendTo(tab)
  return tab
}

How to pass a widget name to a function in Tabris?

1 Answers1