Tab bar stops workings

Solar2D General Questions/Discussion
#1

Hi everyone!

I have 3 scenes called page 1, page 2 and page 3.

On each scene i have a tab bar. The tab bar is also added to the scene group so it doesnt show up in the next scene.

On the tab bar, there is 2 buttons. One button goes to the previous page and the other one goes to the next page. 

So for example, on page 1; when you click on previous page it would go to the 3rd page(since there is no page before the 1st page) and if you would click on the next page button, it would go to the 2nd page.

on page 2; when you click on previous page it would go to the 1st page and if you would click on the next page button, it would go to the 3rd page.

on page 3; when you click on previous page it would go to the 2nd page and if you would click on the next page button, it would go to the 1st page(since there is no page after the 4th page) .

However if you click on the next button on the 1st page and then click on the previous button when on the 2nd page, you can not click on the next button on the first page.

How do i fix this? I played around with the code and I couldn’t find the solution.

The tab bar code for each scene is below:
 

--------------------- --Page 1 Tab Bar Code --------------------- local function onNextView(event) composer.gotoScene("page2") end local function onPreviousView(event) composer.gotoScene("page3") end -- table to setup buttons local tabButtons = { { label="Previous Page", defaultFile="button1.png", overFile="button1-down.png", width = 32, height = 32, onPress=onPreviousView, selected=true,labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 1 } } }, { label="Next Page", defaultFile="button2.png", overFile="button2-down.png", width = 32, height = 32, onPress=onNextView, labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 1 } } }, } -- create the actual tabBar widget local tabBar = widget.newTabBar{ top = display.contentHeight -50, -- 50 is default height for tabBar widget backgroundFile = "tabBar.png", tabSelectedLeftFile = "tabBar.png", tabSelectedMiddleFile = "tabBar.png", tabSelectedRightFile = "tabBar.png", tabSelectedFrameWidth = 40, tabSelectedFrameHeight = 120, buttons = tabButtons } -- all objects must be added to group (e.g. self.view) sceneGroup:insert(tabBar) --------------------- --Page 2 Tab Bar Code --------------------- local function onNextView(event) composer.gotoScene("page3") dock1:hide(250) end local function onPreviousView(event) composer.gotoScene("page1") dock1:hide(250) end -- table to setup buttons local tabButtons = { { label="Previous Page", defaultFile="button1.png", overFile="button1-down.png", width = 32, height = 32, onPress=onPreviousView, selected=true,labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 1 } } }, { label="Next Page", defaultFile="button2.png", overFile="button2-down.png", width = 32, height = 32, onPress=onNextView, labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 1 } } }, } -- create the actual tabBar widget local tabBar = widget.newTabBar{ top = display.contentHeight -50, -- 50 is default height for tabBar widget backgroundFile = "tabBar.png", tabSelectedLeftFile = "tabBar.png", tabSelectedMiddleFile = "tabBar.png", tabSelectedRightFile = "tabBar.png", tabSelectedFrameWidth = 40, tabSelectedFrameHeight = 120, buttons = tabButtons } -- all objects must be added to group (e.g. self.view) sceneGroup:insert(tabBar) --------------------- --Page 3 Tab Bar Code --------------------- local function onNextView(event) composer.gotoScene("page1") dock1:hide(250) end local function onPreviousView(event) composer.gotoScene("page2") dock1:hide(250) end -- table to setup buttons local tabButtons = { { label="Previous Page", defaultFile="button1.png", overFile="button1-down.png", width = 32, height = 32, onPress=onPreviousView, selected=true,labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 1 } } }, { label="Next Page", defaultFile="button2.png", overFile="button2-down.png", width = 32, height = 32, onPress=onNextView, labelColor = { default={ 1, 1, 1 }, over={ 0, 0, 1 } } }, } -- create the actual tabBar widget local tabBar = widget.newTabBar{ top = display.contentHeight -50, -- 50 is default height for tabBar widget backgroundFile = "tabBar.png", tabSelectedLeftFile = "tabBar.png", tabSelectedMiddleFile = "tabBar.png", tabSelectedRightFile = "tabBar.png", tabSelectedFrameWidth = 40, tabSelectedFrameHeight = 120, buttons = tabButtons } -- all objects must be added to group (e.g. self.view) sceneGroup:insert(tabBar)

If you still dont understand my problem; paste in the code and add in the necessary resources/scenes to make it work.

#2

If you expect anyone to debug based on the code fragments you have provided you are sadly mistaken.

How is anyone expected to “just paste your code” without 1) setting up multiple scenes, 2) having any of the graphics used and 3) all the other scene objects (background, title1, summary, etc) ?

#3

Of course you cant just post the code and make the code work without setting up the scene. The above code was to give an example on my issue. Those who would want to debug the code would have to create the necessary scenes. I wouldn’t have to tell anyone to add the necessary resources because that is already obvious. Now I will re-edit my post and code to make it easier to understand, but do you have a solution to this problem? Or did you just try to nit-pick the forum post.

Sad.

  :lol:

#4

I have found the solution to this issue. You have to rest the scene (composer.removeScene()) when you click on the buttons.

#5

Another (better, I think) option would be to use the same tab bar in all cases and just keep track of which page is showing. When you hit the Next button, add 1 to the variable that holds the page number and use that to load the next page. For example:

local function NextPage()
if currPage == 1 then
– enable the Prev button
end
currPage = currPage + 1
if currPage == MAXPAGES then
– disable the Next button
end
composer.gotoScene(“page”…currPage)
end

Something like that. (Typing at work on my lunch break so I might do it a little differently if I were actually coding that.)

While having 3 tab bars would work, you’re “hard coding” stuff that doesn’t have to be, which makes reusing it harder.

Jay

#6

If you expect anyone to debug based on the code fragments you have provided you are sadly mistaken.

How is anyone expected to “just paste your code” without 1) setting up multiple scenes, 2) having any of the graphics used and 3) all the other scene objects (background, title1, summary, etc) ?

#7

Of course you cant just post the code and make the code work without setting up the scene. The above code was to give an example on my issue. Those who would want to debug the code would have to create the necessary scenes. I wouldn’t have to tell anyone to add the necessary resources because that is already obvious. Now I will re-edit my post and code to make it easier to understand, but do you have a solution to this problem? Or did you just try to nit-pick the forum post.

Sad.

  :lol:

#8

I have found the solution to this issue. You have to rest the scene (composer.removeScene()) when you click on the buttons.

#9

Another (better, I think) option would be to use the same tab bar in all cases and just keep track of which page is showing. When you hit the Next button, add 1 to the variable that holds the page number and use that to load the next page. For example:

local function NextPage()
if currPage == 1 then
– enable the Prev button
end
currPage = currPage + 1
if currPage == MAXPAGES then
– disable the Next button
end
composer.gotoScene(“page”…currPage)
end

Something like that. (Typing at work on my lunch break so I might do it a little differently if I were actually coding that.)

While having 3 tab bars would work, you’re “hard coding” stuff that doesn’t have to be, which makes reusing it harder.

Jay