Anyone have success with Xamarin.Forms.Labs.HybridWebView?

GregFerreri · August 2014

Has anyone actually had success using the HybridWebView control from Xamarin Forms Labs? I've burned a day trying to get it to render in a sample hello world app with no success.

Here's what I have so far:

MyPage.xaml
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestHybridWebView.MyPage" xmlns:controls="clr-namespace:Xamarin.Forms.Labs.Controls;assembly=Xamarin.Forms.Labs" > <ContentPage.Content> <controls:HybridWebView x:Name="webView" ></controls:HybridWebView> </ContentPage.Content> </ContentPage>
And the codebehind:

    namespace TestHybridWebView
        {   
        public partial class MyPage : ContentPage
        {   
            public MyPage ()
            {
                InitializeComponent ();
            }

            protected override void OnAppearing ()
            {
                base.OnAppearing ();
                this.webView.Uri = new Uri ("http://www.google.com");
            }
        }
    }

I'm using AutoFac to set up the JsonSerializer dependency, with no issues there.

I don't receive any errors, but nothing renders in my view. I've also tried setting the content of the control to a simple html page added as content to my IOS project, but it also does not produce anything in the view.

MichaelRidland · August 2014

Hi

I have it working on iOS, I recently just published a blog post about it.

http://www.michaelridland.com/mobile/asp-net-mvc-xamarin-mashups/

Keep me updated with how it goes for you. If you make any fixes for android or other platforms let me know.

Thanks

Michael

SKall · August 2014

@MichaelRidland‌, you mention you made some changes to it. Have you had a chance to push them to the main branch yet? The Xamarin.Forms part is a quick refactor from my earlier hybrid without Xamarin.Forms and it has some issues on Android I have had not time to get back to. Any fixes are welcome as I simply don't have the time on my hands to polish it out.

SKall · August 2014

@GregFerreri‌, have you tried the Labs sample? I will take a look at it today if that still works and if it does then I don't see a reason why yours doesn't render. I assume www.google.com is reachable from the device and that's the only reason why I would think it wouldn't render.

GregFerreri · August 2014

@SKall‌ Yes, I did try the Labs sample, and I eventually narrowed down the root cause. It seems that the iOS AppDelegate class must inherit from XFormsApplicationDelegate. My AppDelegate was inheriting from UIApplicationDelegate. Once I made that change, my HybridWebView started rendering.

I don't know if that's a bug or a requirement to use any of the Xamarin.Forms.Labs functionality?

Edit: I see now that the wiki plainly mentions this in the "Getting Started" section. Wish I had seen that 3 days ago!

MichaelRidland · August 2014

@SKall‌ Yes I will once it's ready.

Thanks BTW it's worked out really well for my project.

SKall · August 2014

That's good to hear. I wrote it as one of my proof-of-concept projects (to show PhoneGap-type functionality is possible with Xamarin quite easily) and I haven't had much use for it after that. I do recognize charts and other presentation type screens would be good candidates for use cases which is why I chose CanvasJs as the demo. If you have more in-depth sample(s) you can spare for demo purposes that CanvasJs sample could be replaced by them.

powerdude · October 2014

Hi. I'm trying this on WP and the LoadFinished doesn't seem to get called.

IdoTene · March 2015

Hi all,
I just finished implementing a view using the HybridWebView component, and it rocks!

I'll share my code here, as it might help others...
So first, if you just want to load for some reason in your mainActivity/AppDeleage class the following dummy instance:
var instanceToInvokeRenderer = new HybridWebViewRenderer();

Now, let's move on to the page where you host the HybridWebView :

HybridWebView webView = new HybridWebView(new JsonSerializer()) { VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand, };

If you just want to load a url, then this will do:
webView.Uri = new Uri(url);

I had to load a page and then send a post request to a remote url, if this is the case for you, you can use this template:
StringBuilder sb = new StringBuilder(); sb.Append("<html>"); sb.AppendFormat(@"<body onload='document.sendForRedirectForm.submit()'>"); sb.AppendFormat("<form name='sendForRedirectForm' action='{0}/WebPageRedirect' method='post'>", "http://www.someUrlThatReceivesThisCall"); sb.AppendFormat("<input type='hidden' name='key' value={0} />", "customKey"); sb.Append("</form>"); sb.Append("</body>"); sb.Append("</html>"); webView.Source = new HtmlWebViewSource { Html = sb.ToString() };

Next, if you want to listen to page navigation events, just add this piece of code:
webView.Navigating += delegate(object sender, EventArgs<Uri> args) { if (args.Value.AbsoluteUri == "http://www.google.com") { //... } };

Now, let's say that you want to invoke from JS a C# method? register to something like this:
webView.RegisterCallback("idoTest", CalledMethodAfterJSInvoked);

private void CalledMethodAfterJSInvoked(String result)
        {
            DisplayAlert("JS CALLED", "a JS callback received with this param : " + result, "OK");
        }

And this is the code I added in the remote url for invoking the C# method:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XamarinTestPage</title> <script> function clickMe() { Native('idoTest', "blabla"); } </script> </head> <body> <input id="clickMe" type="button" value="clickme" onclick=" clickMe(); "/> </body> </html>

Hope it helps!

JohnPrzyborski · April 2015

Hi Ido,

I'm having trouble getting a JsonSerializer (that implements IJsonSerializer) to work with my HybridWebView. What JsonSerializer are you using?

Thanks,
John P.

SKall · April 2015

I prefer ServiceStack but Json.NET works as well.

JohnPrzyborski · April 2015

Thanks Sami.

Xamarin was complaining that I couldn't use a static class as a generic argument, so I wrote a non-static wrapper that uses the static JsonSerializer in ServiceStack.

So now I have the project compiling, but the HybridWebView doesn't seem to deviate from a white screen. Here is my xaml:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="Mobile.GUI.WebModalPage" 
    xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms">
    <ContentPage.Content>
        <AbsoluteLayout x:Name="Container" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
            <controls:HybridWebView x:Name="WebView" WidthRequest="100" HeightRequest="100" />
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

And this is my constructor:

public WebModalPage () {
    InitializeComponent ();
    this.WebView.Uri = new Uri ("http://www.apple.com");
}

Any ideas why I can't load a web page?

SKall · April 2015

XLabs.Serialization.ServiceStack.JsonSerializer is a non-static class:

https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Serialization/ServiceStack/Wrapper/JsonSerializer.cs#L26

Make sure the XLabs.Forms DLL is loaded and not stripped by the compiler. You can make sure this happens by referencing any of the platform specific classes from the native projects. For example in AppDelegate after Forms.Init and Resolver configuration put in this code:

var webHybrid = new HybridWebViewRenderer();

JohnPrzyborski · April 2015

Thanks Sami. Instantiating a HybridWebViewRenderer fixed my problem.

AlexanderJakhua · April 2015

Hello,
I can't setup HybridWebView for Windows Phone:
when I initialize application in App.xaml.cs by

var app = new XFormsAppWP();
app.Init(this);

it throws - A navigation has failed; break into the debugger exception

XLabs.Forms version is 2.0.5575

KeesAlderliesten · May 2015

For me it works perfectly if i create te hybridwebview from code. But when I use xaml the control isn't rendered al all (on WP the background color of my page stays black, if it renders correctly it turns white, the background color of the control).
iOS or WP makes no difference (android not tested). What am i missing?

SKall · May 2015

@KeesAlderliesten If you are using XAML then you must register IJsonSerializer with the Resolver.

@AlexanderJakhua if you post a stack trace of the exception that would help. How are you initiating the hybrid?

KeesAlderliesten · May 2015

Hi SKall,

For iOS I have this in de AppDelegate.cs:

    private void SetIoc()
    {
        var resolverContainer = new SimpleContainer();

        resolverContainer.Register<IDevice>(t => AppleDevice.CurrentDevice)
            .Register<IJsonSerializer, XLabs.Serialization.ServiceStack.JsonSerializer>();

        Resolver.SetResolver(resolverContainer.GetResolver());
    }

which is called from the FinishedLaunching function.

For WinPhone I have a similar SetIoc in App.Xaml.cs:

    private void SetIoc()
    {
        var resolverContainer = new SimpleContainer();

        resolverContainer.Register<IDevice>(t => WindowsPhoneDevice.CurrentDevice)
            .Register<IJsonSerializer, XLabs.Serialization.ServiceStack.JsonSerializer>();

        Resolver.SetResolver(resolverContainer.GetResolver());
    }

Called from public App() in the same file.
Did is miss something?

AlexanderJakhua · August 2015

UTF-8 not showing in HybridWebView control. Has anyone experienced this problem?

AndrewPage · September 2017

Needed it for a project. Broke it out as a public repo for iOS and Android

https://github.com/AndrewOfC/HybridWebView

Xamarin

Quick Links

Anyone have success with Xamarin.Forms.Labs.HybridWebView?

Posts