webView in a scrollView: working on simulator but not in device

[alberto1]

Hi guys,

This code runs fine on simulator: the webView is inserted into the scrollView. But in the device (iPad) seems is not inserted…

What is going wrong?

local function obtenTarifas() webView = native.newWebView( 10, 724, 1004, 400 ) webView:setReferencePoint(display.TopLeftReferencePoint) webView.x = anchoVisible/2 - webView.width/2 webView.y = 400 webView.hasBackground = false local function redeListener( event ) local evento = event if ( evento.isError ) then local alertaConexion = native.showAlert( "Aviso", "Hay algún problema con la conexión a internet.\nNo se puede completar la operación.", { "Aceptar" }) else webView:request( "proba.html", system.DocumentsDirectory ) local imaxe = display.newImageRect("material/boton\_zona1\_x.png",320,50) imaxe:setReferencePoint(display.TopLeftReferencePoint) imaxe.x = anchoVisible/2 - imaxe.width/2 imaxe.y = webView.y + webView.height + 20 contenedor:insert(webView) contenedor:insert(imaxe) end end network.download( "http://www.mywebsite.com/proba.html", "GET", redeListener, "proba.html", system.DocumentsDirectory ) end function establecemento:createScene( event ) local grupoEstablecemento = self.view local fondo = display.newRect(0,0,anchoVisible,altoVisible) fondo:setFillColor(255) contenedor = widget.newScrollView { width = anchoVisible, height = altoVisible, scrollWidth = anchoVisible, scrollHeight = 1600, bottomPadding = 150, hideBackground = true, hideScrollBar = true, horizontalScrollDisabled = true, } grupoEstablecemento:insert(fondo) grupoEstablecemento:insert(contenedor) end

In the simulator, both imaxe and webView objects scrolls, but only imaxe object scrolls in device.

I’d appreciate so much any help!

[alberto1]

I get the same issue using newMapView.

Seems there’s a problem with the native library.

Anybody knows how to solve it?

[alberto1]

Please, anybody from CL could tell me if is this a bug or am I doing something wrong?

[jimlam]

I got in similar situation, I am using native.newTextField, it works perfectly in simulator.

But when I get it into device, it seems to be not inserted into the scrollView.

It is really frustrating, I just want a simple solution that when the keyboard is shown, the text field scroll up so that it is NOT covered.

It is such a basic thing, and I need to do A LOT of programming to get this going. Finally I got it working in simulator, but in devices, it is completely out of whack.

Corona Labs, if you want people to use it for business apps, you got to fix this asap.

Regards

Jim

[alberto1]

Yes jimlam, I’m getting the same issue.

Please, anybody from Corona Labs could help us?

[bjsorrentino]

Hi @alberto1, @jimlam,

All native display objects share the restriction that they do not reside as part of the OpenGL “canvas”, and thus there are restrictions on how you can manipulate them. You can use basic positional properties on them (like most display objects), but you can’t insert them into a display group. This has been their behavior since the beginning. Since the ScrollView works on a display group methodology, native objects can’t be put inside it.

That being said, @jimlam, you could try the “mock textfield” method, wherein the actual native text field resides off the screen, but “transmits” its contents to another display object (standard text object) when you edit the value via the keyboard. That text object could be placed inside a ScrollView like any other standard display object. Some people prefer to do this anyway, as it can provide a very nice-looking text object display with custom positioning, gradient background, or whatever.

@alberto1, I think you’re stuck on the WebView aspect… however, you might want to try explicitly moving the WebView with the ScrollView, i.e. as you move the scroll, you sync the movement of the WebView to it using a Runtime listener. I know it’s not ideal, but it should do the trick.

Best regards,

Brent

[alberto1]

Hi Brent,

If this is true, could you tell me why my webView into the scrollView works perfectly with widget 1.0 and doesn’t work with widget 2.0?

And what is more, could you tell me why my code runs perfectly in Android devices and doesn’t work in iPad?

[Danny]

@alberto1

Hi Brent,

If this is true, could you tell me why my webView into the scrollView works perfectly with widget 1.0 and doesn’t work with widget 2.0?

And what is more, could you tell me why my code runs perfectly in Android devices and doesn’t work in iPad?

Hey Alberto. Can you provide an example of this working with widget v1 and not working with widget 2.0 in the form of a simple test case against v1 and v2 ?

That would be helpful

[alberto1]

Hi Danny,

This code runs fine on Android but doesn’t work in iOS.

I use build 2013.1094

local widget = require( "widget" ) local ruta\_imaxes = "recursos/imaxes/" local establecemento = storyboard.newScene() local anchoVisible,altoVisible = display.viewableContentWidth,display.viewableContentHeight local contenedor local webView local mapa local grupoMapa = display.newGroup() --\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* -- webListener() Listener da táboa de tarifas --\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* local function webListener(event) if event.phase == "moved" then local dx = math.abs( event.x - event.xStart ) local dy = math.abs( event.y - event.yStart ) -- if finger drags button more than 5 pixels, pass focus to scrollView if dx \> 5 or dy \> 5 then contenedor:takeFocus( event ) end elseif event.phase == "ended" then print( "toca webView" ) end return true end --------------------------------------------------------------------------------- -- BEGINNING OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- Called when the scene's view does not exist: function establecemento:createScene( event ) local grupoEstablecemento = self.view local fondo = display.newRect(0,0,anchoVisible,altoVisible) fondo:setFillColor(255,0,0) local cabeceira = display.newImageRect(ruta\_imaxes.."fondo\_cabecera2\_"..idioma..".png",1024,61) cabeceira:setReferencePoint(display.TopLeftReferencePoint) cabeceira.x = 0 cabeceira.y = 0 contenedor = widget.newScrollView { id = "contenedor", width = 1024, height = 768, horizontalScrollDisabled = true, verticalScrollDisabled = false, bottomPadding = 400, } webView = native.newWebView( 10, 724, 1004, 400 ) --webView:setReferencePoint(display.TopLeftReferencePoint) webView.x = anchoVisible/2 -200 --webView.y = 100 --724 webView.hasBackground = false local function redeListener( event ) local evento = event if ( evento.isError ) then local alertaConexion = native.showAlert( "Alert", "Internet connection error.", { "OK" }) else webView:request( "proba.html", system.DocumentsDirectory ) webView:addEventListener( "urlRequest", webListener ) end end network.download( "http://www.e-imaxina.com/proba.html", "GET", redeListener, "proba.html", system.DocumentsDirectory ) local function accionInicio(event) storyboard.gotoScene("estanteria") end local boton\_inicio = widget.newButton{ id = "inicio", left = 7, top = 7, width = 47, height = 46, defaultFile = ruta\_imaxes.."boton\_inicio\_x\_reposo.png", overFile = ruta\_imaxes.."boton\_inicio\_x\_activo.png", onRelease = accionInicio, } -- Mapa -- mapView mapa = native.newMapView( 0, 247, 320, 351 ) mapa.mapType = "normal" -- other mapType options are "satellite" and "hybrid". mapa.x = 1 + mapa.width/2 mapa.y = 248 + mapa.height/2 local latitudeM = 42.496751 local lonxitudeM = -8.863799 mapa:setCenter( latitudeM, lonxitudeM ) mapa:addMarker( latitudeM, lonxitudeM ) contenedor:insert(mapa) contenedor:insert(webView) grupoEstablecemento:insert(fondo) grupoEstablecemento:insert(contenedor) grupoEstablecemento:insert(cabeceira) grupoEstablecemento:insert(boton\_inicio) end -- Called BEFORE scene has moved onscreen: function establecemento:willEnterScene( event ) local grupoEstablecemento = self.view end -- Called immediately after scene has moved onscreen: function establecemento:enterScene( event ) local grupoEstablecemento = self.view storyboard.removeScene( escenaActual ) escenaActual="establecemento" end -- Called when scene is about to move offscreen: function establecemento:exitScene( event ) local grupoEstablecemento = self.view end -- Called AFTER scene has finished moving offscreen: function establecemento:didExitScene( event ) local grupoEstablecemento = self.view end -- Called prior to the removal of scene's "view" (display group) function establecemento:destroyScene( event ) local grupoEstablecemento = self.view end -- Called if/when overlay scene is displayed via storyboard.showOverlay() function establecemento:overlayBegan( event ) local grupoEstablecemento = self.view local overlay\_name = event.sceneName -- name of the overlay scene end -- Called if/when overlay scene is hidden/removed via storyboard.hideOverlay() function establecemento:overlayEnded( event ) local grupoEstablecemento = self.view local overlay\_name = event.sceneName -- name of the overlay scene end --------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION --------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist establecemento:addEventListener( "createScene", establecemento ) -- "willEnterScene" event is dispatched before scene transition begins establecemento:addEventListener( "willEnterScene", establecemento ) -- "enterScene" event is dispatched whenever scene transition has finished establecemento:addEventListener( "enterScene", establecemento ) -- "exitScene" event is dispatched before next scene's transition begins establecemento:addEventListener( "exitScene", establecemento ) -- "didExitScene" event is dispatched after scene has finished transitioning out establecemento:addEventListener( "didExitScene", establecemento ) -- "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(). establecemento:addEventListener( "destroyScene", establecemento ) -- "overlayBegan" event is dispatched when an overlay scene is shown establecemento:addEventListener( "overlayBegan", establecemento ) -- "overlayEnded" event is dispatched when an overlay scene is hidden/removed establecemento:addEventListener( "overlayEnded", establecemento ) --------------------------------------------------------------------------------- return establecemento

I’ve tryed to test it with widget 1.0 but I can’t make it works fine on iPad. 

Nevertheless, I showed the app to my client when I was using widget 1.0 and we’d seen it was working fine.

[alberto1]

I get the same issue using newMapView.

Seems there’s a problem with the native library.

Anybody knows how to solve it?

[alberto1]

Please, anybody from CL could tell me if is this a bug or am I doing something wrong?

[alberto1]

Hi Danny,

Are you (or anybody from Corona Labs) trying to solve this issue?
I can’t improve because of this and the clients are impatient.

Besides, before widget 2.0, my webListener runs fine, so when I drag over the webView the scroll moves fine, but with widget 2.0 seems the takeFocus doesn’t run with native objects (runs fine with buttons but doesn’t work with webView)

Thanks.

Alberto.

[Danny]

@alberto1

Hi Danny,

Are you (or anybody from Corona Labs) trying to solve this issue?
I can’t improve because of this and the clients are impatient.

Besides, before widget 2.0, my webListener runs fine, so when I drag over the webView the scroll moves fine, but with widget 2.0 seems the takeFocus doesn’t run with native objects (runs fine with buttons but doesn’t work with webView)

Thanks.

Alberto.

We are working on various widget bugs. Native objects cannot be inserted into a display group, hence why this isn’t working. You also confirmed it didn’t work in widget v1 from your post above. It couldn’t have worked in widget v1 either because the display group limitation isn’t new.

[alberto1]

Ok Danny,

Why it works fine on Android (and also in simulator) and not in iOS?

Why before the takeFocus runs fine in webListener (webview into a scrollview) and why not now?

Are you working to solve this?

[Danny]

@alberto1

Ok Danny,

Why it works fine on Android (and also in simulator) and not in iOS?

Why before the takeFocus runs fine in webListener (webview into a scrollview) and why not now?

Are you working to solve this?

Can you email me a complete example of how you are doing this, but make the example as minimalistic as possible. Ie: no storyboard, confine it to a single main.lua file, only include needed variables, include any images/config.lua files I need to run it. Then email it to: danny [at] coronalabs [dot] com and I will take a look

[jimlam]

I got in similar situation, I am using native.newTextField, it works perfectly in simulator.

But when I get it into device, it seems to be not inserted into the scrollView.

It is really frustrating, I just want a simple solution that when the keyboard is shown, the text field scroll up so that it is NOT covered.

It is such a basic thing, and I need to do A LOT of programming to get this going. Finally I got it working in simulator, but in devices, it is completely out of whack.

Corona Labs, if you want people to use it for business apps, you got to fix this asap.

Regards

Jim

[alberto1]

Yes jimlam, I’m getting the same issue.

Please, anybody from Corona Labs could help us?

[bjsorrentino]

Hi @alberto1, @jimlam,

All native display objects share the restriction that they do not reside as part of the OpenGL “canvas”, and thus there are restrictions on how you can manipulate them. You can use basic positional properties on them (like most display objects), but you can’t insert them into a display group. This has been their behavior since the beginning. Since the ScrollView works on a display group methodology, native objects can’t be put inside it.

That being said, @jimlam, you could try the “mock textfield” method, wherein the actual native text field resides off the screen, but “transmits” its contents to another display object (standard text object) when you edit the value via the keyboard. That text object could be placed inside a ScrollView like any other standard display object. Some people prefer to do this anyway, as it can provide a very nice-looking text object display with custom positioning, gradient background, or whatever.

@alberto1, I think you’re stuck on the WebView aspect… however, you might want to try explicitly moving the WebView with the ScrollView, i.e. as you move the scroll, you sync the movement of the WebView to it using a Runtime listener. I know it’s not ideal, but it should do the trick.

Best regards,

Brent

[alberto1]

Hi Brent,

If this is true, could you tell me why my webView into the scrollView works perfectly with widget 1.0 and doesn’t work with widget 2.0?

And what is more, could you tell me why my code runs perfectly in Android devices and doesn’t work in iPad?

[Danny]

@alberto1

Hi Brent,

If this is true, could you tell me why my webView into the scrollView works perfectly with widget 1.0 and doesn’t work with widget 2.0?

And what is more, could you tell me why my code runs perfectly in Android devices and doesn’t work in iPad?

Hey Alberto. Can you provide an example of this working with widget v1 and not working with widget 2.0 in the form of a simple test case against v1 and v2 ?

That would be helpful