webView in a scrollView

Solar2D Widgets
#1

Hello,

I’m trying to use a webview inside a scrollview.

Both the simulator and in Android devices the webview is positioned in the right place, but not in the iOS dev (iPad).

Could anybody tell me if this a bug you are trying to solve or if there is a different behavior in iOS than in Android?

Thanks.

#2

Hello @franalfonso,

Can you explain in more detail how the positioning is different between iOS and Android? Is it just a few pixels, or is the difference completely off? How did you configure your content area in “config.lua”? Can you include a screenshot showing the visible difference?

Sincerely,

Brent

#3

Hello Brent,

I’ve got a webview positioned at y=10 within a group, and this one positioned at y=700 within the scrollview. 

Both the simulator and in Android devices I can see the webview positioned at the right place (y=710), but not in the iOS dev (iPad) where I see the webview at y=10

I’ve read because native webviews are not part of the OpenGL canvas, they do not obey the Corona display object hierarchy, but I don’t understand why only in iOS devices is happening this and I wondering if you are working to solve this issue.

Thanks.

#4

Hi @franalfonso,

Sorry for the previous response, I posted it to the wrong thread. I’ll check into your issue soon…

Brent

#5

Hi @franalfonso,

I’ll probably need to see some of your code to determine what’s happening here. As you stated, native objects can’t technically be inserted into display groups, but it’s odd that the issue only seems to happen on iOS. So, if you can post some of your code (only the parts that are relevant, not the entire file please), I may be able to figure out what’s going on.

Thanks,

Brent

#6

Hi Brent,

Sorry for the delay (I was out of the office for a few days).

I finally achieve to reduce the code to a few lines, so is more easier for you to determine whats happening with this issue.

local widget = require( "widget" ) local anchoVisible,altoVisible = display.viewableContentWidth,display.viewableContentHeight 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 ---------------------------------------------------------------------------------- -- MAIN ---------------------------------------------------------------------------------- local fondo = display.newRect(0,0,anchoVisible,altoVisible) fondo:setFillColor(255,255,255) local contenedor = widget.newScrollView{ id = "contenedor", width = anchoVisible, height = altoVisible, horizontalScrollDisabled = true, verticalScrollDisabled = false, hideBackground = true, bottomPadding = 100, } local grupoCont = display.newGroup(); local webView = native.newWebView( 10, 724, 1004, 400 ) webView.x = anchoVisible/2 webView.y = 100 webView.hasBackground = false local imaxe = display.newImageRect("0007210.jpg",570,400) imaxe.x = anchoVisible/2 imaxe.y = altoVisible/2 - 100 contenedor:insert(imaxe) contenedor:insert(grupoCont) 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 ) grupoCont:insert(webView) grupoCont.y = 724 end end network.download( "http://www.e-imaxina.com/proba.html", "GET", redeListener, "proba.html", system.DocumentsDirectory )  

This is all the code.

As you can see, this work fine (except the takefocus on the webmail) in the simulator both Android devices, but not on iOS.

I’d appreciate so much your help.

Thanks in advance.

#7

Hi @franalfonso,

This may be an issue with how you’ve set up your content area/size/scale in “config.lua”. Can you show me how you’ve done it?

Thanks,

Brent

#8

Yes, of course.

application = { content = { width = 768, height = 1024, scale = "none", }, }

This is all the code in the config.lua file.

#9

I’m not so sure about Android but AFAIK webViews and other native iOS components can not interact with OpenGL objects, that might be what’s causing it?

#10

Hi @franalfonso,

I think the issue is that the “scale” setting of “none” is no longer supported. You should choose either “letterbox”, “zoomEven”, or “zoomStretch” and set up a proper, multi-platform content area/region according to this guide…

http://docs.coronalabs.com/guide/basics/configSettings/index.html#dynamicscaling

…and perhaps similar to this tutorial:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Regards,

Brent

#11

Hi Brent,

Sorry, but I maybe doing something wrong because I change the scale parameter in the config.lua and anything change for me.

This is the code in the config.lua

application = { content = { width = 768, height = 1024, scale = "letterbox", }, }

I know I must adjust this to watch well on Android devices but I don’t understand one thing: I suppose if I change the config.lua as you tell me (according to the guides you tell me), anything will change on the Android devices, but in the simulator I’m getting the behaviour I desire, so, how your suggest could help to see in the iOS device the behaviour of the simulator?

Thanks!

#12

Hi @franalfonso,

Can you please change this line…

[lua]

local anchoVisible,altoVisible = display.viewableContentWidth,display.viewableContentHeight

[/lua]

To this?

[lua]

local anchoVisible,altoVisible = display.contentWidth,display.contentHeight

[/lua]

And report what happens.

Also, I don’t understand your second question. Which “view” are you using in the Simulator? All of the popular iOS devices are available to simulate, under “Window > View As”… but I don’t think that’s what you’re asking about.

Sincerely,

Brent Sorrentino

#13

Hi Brent,

Same behaviour doing that change.

About my question is because I don’t know exactly if you are trying the iOS device has the same behaviour than the simulator (that’s what I need) or viceversa.

In the simulator I am using the iPad view.

Again, I appreciatte so much your help.

Thanks!

#14

Hello @franalfonso,

Can you explain in more detail how the positioning is different between iOS and Android? Is it just a few pixels, or is the difference completely off? How did you configure your content area in “config.lua”? Can you include a screenshot showing the visible difference?

Sincerely,

Brent

#15

Hi @franalfonso,

In regards to “native” objects like the WebView, sometimes they will appear differently on the device compared to the Simulator. This is just the nature of native objects, especially between Android and iOS. To be assured that your native objects appear in the correct position, you should always test on the device… the Simulator does its best to position these, but it’s not always 100% accurate.

Hope this helps,

Brent

#16

Hello Brent,

I’ve got a webview positioned at y=10 within a group, and this one positioned at y=700 within the scrollview. 

Both the simulator and in Android devices I can see the webview positioned at the right place (y=710), but not in the iOS dev (iPad) where I see the webview at y=10

I’ve read because native webviews are not part of the OpenGL canvas, they do not obey the Corona display object hierarchy, but I don’t understand why only in iOS devices is happening this and I wondering if you are working to solve this issue.

Thanks.

#17

Hi Brent,

Ok, I understand I must test on the devices, but in this case in the iPad the webview is placed in one position and in the Android tablet is placed in the right place (the same as simulator), so my first thought is that it must be possible to solve the issue in the iPad.

The questions are: is really possible?, and how can I do this?

Moreover, what’s about the example we were trying?

Thanks.

#18

Hi @franalfonso,

Sorry for the previous response, I posted it to the wrong thread. I’ll check into your issue soon…

Brent

#19

Hi @franalfonso,

I’ll probably need to see some of your code to determine what’s happening here. As you stated, native objects can’t technically be inserted into display groups, but it’s odd that the issue only seems to happen on iOS. So, if you can post some of your code (only the parts that are relevant, not the entire file please), I may be able to figure out what’s going on.

Thanks,

Brent

#20

Hi @franalfonso,

One option is to detect the device and make an adjustment of the necessary pixels. Please read the following tutorial and see if it might help:

http://www.coronalabs.com/blog/2012/12/11/device-detection-on-steroids/

Regards,

Brent