Widget 2.0 tabBar Troubles

Solar2D Widgets
#1

Hello all!

I decided to attempt “upgrading” my current project over to the new widgets (2.0) today. Much to my dismay, I’ve run into lots-o-trouble. The first widget in my app is a tabBar, so that’s the widget I began converting first. I was having a hard time finding the error and such, so I created a new tabBar in the most basic form I could (at least pretty close), however I ran into the same errors. These are some common things the terminal shouted at me…

  • WARNING: display.newImage( imageGroup, frameIndex ) given an invalid frameIndex (0). Defaulting to 1.

  • ERROR: bad argument #4 to display.newImageRect(): width expected, but got nil.

  • ERROR: bad argument #3 to display.newImageRect(): width expected, but got nil.

  • Runtime error ?:0: attempt to index field ‘?’ (a nil value)
    Here’s the tabBar widget code…
    [lua]
    local tabButtons =
    {
    {
    id = “Tab1”,
    label = “Tab1”,
    labelColor = { default = {0,0,0}, over = {255,255,255} },
    defaultFile = “tabHome.png”,
    overFile = “tabHomeD.png”,
    onPress = onPress,
    selected = false
    },
    {
    id = “Tab2”,
    label = “Tab2”,
    labelColor = { default = {0,0,0}, over = {255,255,255} },
    defaultFile = “tabSettings.png”,
    overFile = “tabSettingsD.png”,
    onPress = onPress,
    selected = true
    },
    –more tabs can follow
    }
    local tabBar = widget.newTabBar { --------Runtime error begins here
    left = 0,
    top = display.contentHeight - 60,
    width = 240,
    height = 60,
    backgroundFile = “leather.png”,
    buttons = tabButtons
    }
    [/lua]

If anyone can offer tips, tricks, or help it would be greatly appreciated. If you need more info or if I did something stupid with the above widget let me know…

Thanks [import]uid: 39302 topic_id: 37218 reply_id: 67218[/import]

#2

Did you look at the Widgets 2.0 conversion guide?

There are required images for the tabBar background. Make sure you’re providing all the required parameters. Remember the docs for this is in the Daily Builds docs, not the default public docs.

http://docs.coronalabs.com/daily/api/ [import]uid: 199310 topic_id: 37218 reply_id: 145527[/import]

#3

Alguém já conseguiu debugar? NÃO FUNCIONA! [import]uid: 236181 topic_id: 37218 reply_id: 145473[/import]

#4

Não funciona, tentei debugar de 4 formas diferentes no Eclipse, não consegui!! [import]uid: 236181 topic_id: 37218 reply_id: 145474[/import]

#5

Thanks for the reply.

 

Yeah, I have looked at the conversion guide and I believe I’ve done everything correctly. However, I have a new error message that perhaps will help…

 

 - ERROR: widget.newTabBar: tabSelectedLeftFile expected, got nil

 

Why is it asking I include that?

 

 

Nathan

#6

Hi Nathan,

I can investigate this further tomorrow, but what I think is happening is this: because you’re specifying the “backgroundFile” parameter (and image), the TabBar expects that you’re building an entire custom visual layout using all of the pieces. So then, it’s throwing an error when you specify only “backgroundFile” and none of the other elements like “tabSelectedLeftFile” and “tabSelectedMiddleFile”.

I see how this can be restrictive and frustrating, and I’ll look into getting it fixed in an upcoming daily build so that you can specify some (or even just one) of the image elements without being required to provide all of them.

Brent

#7

Okay. Sounds good. I’ve got a ton of other stuff happening this week so I’m in no rush… but I do want to figure this out so I can relax a little. :slight_smile:

 

What exactly are the “tabSelectedLeftFile,” “tabSelectedMiddleFile,” etc. parameters?

 

Nathan

#8

Hi Nathan,

These are the visual elements which make up the “tab selected/active” state. The “left” and “right” sides are what you’d expect, and the “middle” piece spans the distance between those two, such that the tab width can be flexible and the same images can be used.

So, assume you had 3 tabs across, the “text rendition” would look like this:

[-----][----------][—]

And basically…

[ = “tabSelectedLeftFile”

----- = “tabSelectedMiddleFile” (flexible width)

] = “tabSelectedRightFile”

#9

Oh! I see. Well I’ll go mess with that, and perhaps if I put those params in my tabBar hopefully the errors will cease.  maybe…  I’ll let you know.

 

Nathan

#10

Did you look at the Widgets 2.0 conversion guide?

There are required images for the tabBar background. Make sure you’re providing all the required parameters. Remember the docs for this is in the Daily Builds docs, not the default public docs.

http://docs.coronalabs.com/daily/api/ [import]uid: 199310 topic_id: 37218 reply_id: 145527[/import]

#11

Alguém já conseguiu debugar? NÃO FUNCIONA! [import]uid: 236181 topic_id: 37218 reply_id: 145473[/import]

#12

Não funciona, tentei debugar de 4 formas diferentes no Eclipse, não consegui!! [import]uid: 236181 topic_id: 37218 reply_id: 145474[/import]

#13

Thanks for the reply.

 

Yeah, I have looked at the conversion guide and I believe I’ve done everything correctly. However, I have a new error message that perhaps will help…

 

 - ERROR: widget.newTabBar: tabSelectedLeftFile expected, got nil

 

Why is it asking I include that?

 

 

Nathan

#14

Hi Nathan,

I can investigate this further tomorrow, but what I think is happening is this: because you’re specifying the “backgroundFile” parameter (and image), the TabBar expects that you’re building an entire custom visual layout using all of the pieces. So then, it’s throwing an error when you specify only “backgroundFile” and none of the other elements like “tabSelectedLeftFile” and “tabSelectedMiddleFile”.

I see how this can be restrictive and frustrating, and I’ll look into getting it fixed in an upcoming daily build so that you can specify some (or even just one) of the image elements without being required to provide all of them.

Brent

#15

Okay. Sounds good. I’ve got a ton of other stuff happening this week so I’m in no rush… but I do want to figure this out so I can relax a little. :slight_smile:

 

What exactly are the “tabSelectedLeftFile,” “tabSelectedMiddleFile,” etc. parameters?

 

Nathan

#16

Hi Nathan,

These are the visual elements which make up the “tab selected/active” state. The “left” and “right” sides are what you’d expect, and the “middle” piece spans the distance between those two, such that the tab width can be flexible and the same images can be used.

So, assume you had 3 tabs across, the “text rendition” would look like this:

[-----][----------][—]

And basically…

[ = “tabSelectedLeftFile”

----- = “tabSelectedMiddleFile” (flexible width)

] = “tabSelectedRightFile”

#17

Oh! I see. Well I’ll go mess with that, and perhaps if I put those params in my tabBar hopefully the errors will cease.  maybe…  I’ll let you know.

 

Nathan

#18

I’m still cannot get this to work without an error. I started with a clean slate just to work on the tabBar. Below is the tabBar code and then the error messages after that. I only used “required” commands or whatever…
 

local widget = require( "widget" ) local tabButtons = { { width = 50, height = 51, defaultFile = "tabHome.png", overFile = "tabHomeD.png", }, { width = 50, height = 51, defaultFile = "tabFavorites.png", overFile = "tabFavoritesD.png", } } local tabBar = widget.newTabBar { height = 70, buttons = tabButtons, backgroundFile = "leather.png", tabSelectedLeftFile = "slider-fill.png", tabSelectedMiddleFile = "slider-fill.png", tabSelectedRightFile = "slider-fill.png", tabSelectedFrameWidth = 60, tabSelectedFrameWidth = 60, }

----------- 
ERROR: bad argument #5 to display.newImageRect(): height expected, but got number.
ERROR: bad argument #5 to display.newImageRect(): height expected, but got number.
ERROR: bad argument #5 to display.newImageRect(): height expected, but got number.
Runtime error
bad argument #2 to ‘newText’ (string expected, got nil)
stack traceback:
[C]: ?
[C]: in function ‘newText’
?: in function ‘?’
?: in function <?:580>
(tail call): ?
…53qq7ztjxw2q5kcnh0000gn/T/TemporaryItems/24/main.lua:34: in main chunk

 
I’m sorry for all the trouble, but I’m no pro at this and I can go no farther unless this is solved.

#19

The one error makes it look like the label field is required (the only string I can see it using).  Try passing a label to the button.  If you don’t want the label just make it a space.  Also the three errors:

ERROR: bad argument #5 to display.newImageRect(): height expected, but got number.

is due to you missing a required:

tabSelectedFrameHeight = 60,

You repeated …FrameWidth twice.

#20

Thanks!

I fixed those two things and it performed smoothly! However, applying a label shifts the button off center (and I don’t want labels). Playing with the x and y offsets didn’t change anything. I can continue to work on other thing now that the tabBar is performing properly (almost), but I will need this fixed eventually.