Problem with a Tab Bar (Width and height)

ok so, i put this 

if webView and webView.removeSelf then webView:removeSelf() webView = nil end

i just take the parens off.
but same problem…

thank you very much for your help is a very important project for me… 

Do you still have a “local” at the front of this line?
 

local webView = native.newWebView( 0, 0, 720, 1080 )

if so, take it off.  You declared webView to be local at the top, which you need to do so it can be seen in the other storyboard event functions.

EXCELLENT!! WORK !

but there is a little problem when i go on a page with a webview, screen display webview when i touch on a other, destroy the old et display the new, but when i come back to the old that i opened in first, no display the webview…

I’m sorry, I didn’t quite follow what the new problem is.

You didn’t understand.

The problem is that i have 6 pages (6 pages on my tab bar)

In the first i have just a imag, in all others there are webview, but when i am on the second page with a webview it work, when i go on the third, the second leve the screen, the third page display his webview. WORK VERY WELL
but, when i come back to the second page which opened before, the webview don’t work !

The webviews seems to work only once…

Okay I understand better now.  Can you post your current code that drives the #2 tab and the #3 tab so I can see how they interact?  Also can you post your tab code that you use to switch tabs?

Hello, Rob, if my app is a success is thank to YOU! 

Okey, for begin, i show you my main.lua, in this code, there is creation of the tab bar : 

-- -- Project: ALL IN PRONOS -- Description: -- -- Version: 1.0 -- Managed with http://CoronaProjectManager.com -- -- Copyright 2013 . All Rights Reserved. -- display.setStatusBar( display.DefaultStatusBar ) local widget = require ( "widget" ) local storyboard = require ( "storyboard" ) display.setDefault( "background", 255, 255, 255 ) -- Create buttons table for the tab bar local tabButtons = { { width = 72, height = 72, defaultFile = "icone1.png", overFile = "icone1-down.png", label = "Home", size = 16, onPress = function() storyboard.gotoScene( "view1" ); end, selected = true }, { width = 90, height = 100, defaultFile = "iconmikanb.png", overFile = "iconmika.png", label = "Mika", size = 16, onPress = function() storyboard.gotoScene( "view2" ); end, }, { width = 90, height = 95, defaultFile = "iconmagicnb.png", overFile = "iconmagic.png", label = "Magic", size = 16, onPress = function() storyboard.gotoScene( "view3" ); end, }, { width = 90, height = 95, defaultFile = "iconpshgnb.png", overFile = "iconpshg.png", label = "PSHG", size = 16, onPress = function() storyboard.gotoScene( "view4" ); end, }, { width = 85, height = 90, defaultFile = "icontsnb.png", overFile = "iconts.png", label = "TS", size = 16, onPress = function() storyboard.gotoScene( "view5" ); end, }, { width = 90, height = 95, defaultFile = "iconniconb.png", overFile = "iconnico.png", label = "Nico", size = 16, onPress = function() storyboard.gotoScene( "view6" ); end, }, } --Create a tab-bar and place it at the bottom of the screen local demoTabs = widget.newTabBar { top = display.contentHeight - 120, width = display.contentWidth, height = 120, backgroundFile = "assets/tabbar.png", --backgroundFileWidth = 720 --backgroundFileHeight = 117 tabSelectedLeftFile = "assets/tabBar\_tabSelectedLeft.png", tabSelectedMiddleFile = "assets/tabBar\_tabSelectedMiddle.png", tabSelectedRightFile = "assets/tabBar\_tabSelectedRight.png", tabSelectedFrameWidth = 20, tabSelectedFrameHeight = 120, buttons = tabButtons } storyboard.gotoScene( "view1" )

The #tab1 or view 1 where the storyboard go is a Home without Webview.
The webview are in the #2 #3 #4 #5 #6 TAB.
 

The #2 tab with your changement which work ! : 

- ----------------------------------------------------------------------------------------- -- -- view2.lua -- ----------------------------------------------------------------------------------------- local storyboard = require( "storyboard" ) local scene = storyboard.newScene() local webView ----------------------------------------------------------------------------------------- -- BEGINNING OF YOUR IMPLEMENTATION -- -- NOTE: Code outside of listener functions (below) will only be executed once, -- unless storyboard.removeScene() is called. -- -- Called when the scene's view does not exist: function scene:createScene( event ) local group = self.view webView = native.newWebView( 0, 0, 720, 1080 ) webView:request( "https://www.facebook.com/pages/Mika-Pronos/172776792874547?fref=ts" ) end -- Called immediately after scene has moved onscreen: function scene:enterScene( event ) local group = self.view -- Do nothing end -- Called when scene is about to move offscreen: function scene:exitScene( event ) local group = self.view if webView and webView.removeSelf then webView:removeSelf() webView = nil end -- INSERT code here (e.g. stop timers, remove listenets, unload sounds, etc.) end -- If scene's view is removed, scene:destroyScene() will be called just prior to: function scene:destroyScene( event ) local group = self.view -- INSERT code here (e.g. remove listeners, remove widgets, save state variables, etc.) end ----------------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION ----------------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched whenever before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) ----------------------------------------------------------------------------------------- return scene

and after when i go to the #3 TAB BAR : 

------------------------------------ -- -- view3lua -- ----------------------------------------------------------------------------------------- local storyboard = require( "storyboard" ) local scene = storyboard.newScene() local webView ----------------------------------------------------------------------------------------- -- BEGINNING OF YOUR IMPLEMENTATION -- -- NOTE: Code outside of listener functions (below) will only be executed once, -- unless storyboard.removeScene() is called. -- -- Called when the scene's view does not exist: function scene:createScene( event ) local group = self.view webView = native.newWebView( 0, 0, 720, 1080 ) webView:request( "https://www.facebook.com/MagicPronostics?fref=ts" ) end -- Called immediately after scene has moved onscreen: function scene:enterScene( event ) local group = self.view -- Do nothing end -- Called when scene is about to move offscreen: function scene:exitScene( event ) local group = self.view if webView and webView.removeSelf then webView:removeSelf() webView = nil end -- INSERT code here (e.g. stop timers, remove listenets, unload sounds, etc.) end -- If scene's view is removed, scene:destroyScene() will be called just prior to: function scene:destroyScene( event ) local group = self.view -- INSERT code here (e.g. remove listeners, remove widgets, save state variables, etc.) end ----------------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION ----------------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched whenever before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) ----------------------------------------------------------------------------------------- return scene

So the seconde work, the third too, but when i am on the third and that i want come back to the second, the webview don’t display for this time ( my webview just work once) 

This needs to happen in “enterScene” not “createScene”

     webView = native.newWebView( 0, 0, 720, 1080 )
webView:request( “https://www.facebook.com/pages/Mika-Pronos/172776792874547?fref=ts” )

Why? because of the conditions that cause createScene() to be executed.  createScene is only executed under three conditions:

  1.  The scene has never existed.

  2.  The scene was purged using storyboard.purgeScene() or storyboard.purgeAll()

  3.  The scene was removed using storyboard.removeScene() or storyboard.removeAll()

Scenes can be purged either by your command (executing one of the above purge commands) or by a low memory warning event.

Scenes can only be removed by your command.

In your code, you are doing neither 2 or 3, so the createScene’s will only run once, when the scene is first loaded.   Because native.* objects are not managed by storyboard, it’s kinda silly to put them into createScene since they can’t transition with the scenes.  What you get is a box on the screen and then the scene transitions below it.  Because of this native.* are best created in enterScene after the scene is on the screen.   This solves your technical problem of not getting them to come back later.

You need to scale your tab bar accordingly.  720 / 320 = 2.25 or something like that.  Your tabBar needs to be that much taller.  Looking at your slices I see they are 52 pix high.  So your tabBar should have a height = 117, in the setup and your images need adjusted accordingly.

Hello Rob and thank you for your post! very fastly.

Yes, i did what you said, but i have a problem in my code i have : 

local demoTabs = widget.newTabBar { top = display.contentHeight - 70, width = display.contentWidth, backgroundFile = "assets/tabbar.png", tabSelectedLeftFile = "assets/tabBar\_tabSelectedLeft.png", tabSelectedMiddleFile = "assets/tabBar\_tabSelectedMiddle.png", tabSelectedRightFile = "assets/tabBar\_tabSelectedRight.png", tabSelectedFrameWidth = 20, tabSelectedFrameHeight = 52, buttons = tabButtons }

And i want change the size just of the backgroundFile (line 5) 

the 20 and 52 is for a other componment of tabar not important.

So, i want change the Height of the BackgroundFile and i try some lines of code i tried this : 

backgroundHeight = 117

change nothing 

tried this : 

backgroundFile.height = 117 

Error. 

so i dont now really…

Please…

Hi Kevin,

Based on your code and description, I think you need to adjust the height of the core image, before you attempt to load it as part of the widget. Also, may I ask, are you creating this tab bar from an image sheet, or individual images? The syntax varies slightly depending on which method you’re using.

Best regards,

Brent

 local demoTabs = widget.newTabBar {     top = display.contentHeight - 70,     width = display.contentWidth,     height = 117,     backgroundFile = "assets/tabbar.png",     tabSelectedLeftFile = "assets/tabBar\_tabSelectedLeft.png",     tabSelectedMiddleFile = "assets/tabBar\_tabSelectedMiddle.png",     tabSelectedRightFile = "assets/tabBar\_tabSelectedRight.png",     tabSelectedFrameWidth = 20,     tabSelectedFrameHeight = 117,     buttons = tabButtons   }

You need to scale all four . png’s to where they are 117 px high.  Then adjust the FrameWidth to whatever it works out to after you resize the image to 117 px high.

Thank you very much rob and Brent.
I Will test this this Weekend.

I think thé code and corona auto ajust thé size of png without resize every png on Photoshop.

You dont belive this ?

Best regards

It uses the width and height that you pass as the parameters to load in the image.  It uses display.newImageRect() which requires these parameters.  If you don’t provide the height it defaults to the height from the theme in use or 52.  By not specifying the height, it’s loading in your background at display.contentWidth wide and 52 high.

Ok it’s work very well, but the size of the label in this code : 

 { width = 80, height = 80, defaultFile = "iconniconb.png", overFile = "iconnico.png", label = "Nico", onPress = function() storyboard.gotoScene( "view6" ); end, }, }

the label = ‘‘Nico’’, is always at the old size when my screen resolution was 320 x 480. 

so now the label on the tab bar is very small.

you have an idea?

i found ! 

i just put a 

size = ... font = ...

thank you every body

Ok everything work…

BUT! yes i have a but, the last problem! 

i looked for but i didn’t find…

In fact, i have my home and 5 other page, in the other page i have Local webview (in all page).
But with different website. 
My problem is that when i am in the second page, and i click on the third, the webview of the second page stay here and don’t let the place at webview of the third page…

I put a group:insert(webview) 

don’t work…

You probably need to remove the old webView so your new one can be created.

Yes its m’y problem i didnt find how i CAN remove my webview