Adding a webView (the blue Potion way)

[wandarkaf]

I don't know is this is the proper medium to ask this.

But aside that, there's no documentation at all. I trying to do somethings just looking to the source code.

I trying to translate this Building Web Apps in WebView and my knowledge is pretty small about how to do it in RubyMotion, together with BluePotion.

Any hint, idea or example code.

For what I know you have to create an inherited view from PMWebScreen and the rely on 4 basic methods provided by RubyMotion : content, load_started, load_finished, load_falied. But I have no clue about how to apply to display a webview with javascript integration.

Any hint will be appreciated.

[skellock]

Have a look at this "hello world" repo:

https://github.com/skellock/CarlinVisitsTheWeb

It doesn't cover your questions about the javascript methods though.

That repo is just: put a webview on a screen via BluePotion and visit google. :)

[GantMan]

This is a basic BluePotion webscreen in use

class MyWebScreen < PMWebScreen
  title "Tacos are Delish"
  action_bar false

  DOMAIN = "www.tacobell.com"

  def on_start
    open_url site_url
  end

  def site_url
    @_site_url ||= "https://#{DOMAIN}/"
  end

  def site_url=(url)
    @_site_url = url
  end

end

To interact with Javascript, look at this example: https://github.com/HipByte/RubyMotionSamples/tree/master/android/WebViewDemo

Does this help?

[GantMan]

by default this webscreen uses back to go back pages instead of activities and opens links in correct apps.

[wandarkaf]

it had been, in fact, an awakening guys. Thanks a lot.

Just one question, what is the case or folder structure in BluePotion to call local .html page inside the project, something like open_url "file:///android_asset/web/example.html"?

Well, two. BluePotion provides helpers for a back and forth communication with javascript?

Or we have to take a raw approach at the moment, like the example you gave me Gant?

[wandarkaf]

One thing , about the javascript interaction is how to make a proper annotation to launch and receive functions on a PMWebScreen. Following the example you gave @GantMan I just add the @webview.addJavascriptInterface(js_interface, "android") in which js_interface is an instance of

  attr_accessor :context
  #
  __annotation__('@android.webkit.JavascriptInterface')
  def clickOnAndroid
    @context.handler.post -> { @context.webview.loadUrl("javascript:foo()") }
  end

But it seems , for ProMotion, this is not understandable? when you build, it throws:

./build/Development-16/java/com/your_company/androidPathApp/DemoJavaScriptInterface.java:5: error: cannot find symbol
    @android.webkit.JavascriptInterface public native java.lang.Object clickOnAndroid();
                   ^
  symbol:   class JavascriptInterface
  location: package android.webkit

As well, there's a nomenclature for different annotations?

clickOnAndroid take an action when you click the screen, but how do I know is there is a method for is you just want to manually trigger a function in javascript or when javascript is sending something back to android?

Just dazed and confuse.

Thanks for everything in advance.

[wandarkaf]

for further understanding, here what I have:

class HomeScreen < PMWebScreen

  stylesheet HomeScreenStylesheet
  title "Web VIEW"
  action_bar true

  DOMAIN = "www.tacobell.com"

  def on_start
    open_url site_url = "file:///android_asset/web/assistant.html"
    js_interface = DemoJavaScriptInterface.new
    js_interface.context = self
    @webview.addJavascriptInterface(js_interface, "android")
  end

  def site_url
    @_site_url ||= "https://#{DOMAIN}/"
  end

  def site_url=(url)
    @_site_url = url
  end

end

class DemoJavaScriptInterface
  attr_accessor :context
  __annotation__('@android.webkit.JavascriptInterface')
  def clickOnAndroid
    @context.handler.post -> { @context.webview.loadUrl("javascript:hello()") }
  end
end

[QuintinAdam]

__annotation__('@android.webkit.JavascriptInterface') does not work for api version 16. 17+ works.

Edit: Apparently if you want to build for 16 you can just remove that line and it will still work. Even if the phone is a higher api version.

[QuintinAdam]

I'll also an example of how I finally did it.

https://gist.github.com/QuintinAdam/e6983f35829db1610688

I override the add_web_view method because I wanted a bit more control of what was going on.