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

GregFerreriGregFerreri USMember ✭✭
edited August 2014 in Xamarin.Forms

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.

Posts

  • MichaelRidlandMichaelRidland AUInsider, University ✭✭✭

    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

  • SKallSKall USMember ✭✭✭✭

    @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.

  • SKallSKall USMember ✭✭✭✭

    @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.

  • GregFerreriGregFerreri USMember ✭✭
    edited 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!

  • MichaelRidlandMichaelRidland AUInsider, University ✭✭✭

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

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

  • SKallSKall USMember ✭✭✭✭

    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.

  • powerdudepowerdude USMember ✭✭

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

  • IdoTeneIdoTene USMember, University ✭✭

    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!

  • JohnPrzyborskiJohnPrzyborski USMember ✭✭

    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.

  • SKallSKall USMember ✭✭✭✭

    I prefer ServiceStack but Json.NET works as well.

  • JohnPrzyborskiJohnPrzyborski USMember ✭✭

    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?

  • SKallSKall USMember ✭✭✭✭

    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();
    
  • JohnPrzyborskiJohnPrzyborski USMember ✭✭

    Thanks Sami. Instantiating a HybridWebViewRenderer fixed my problem.

  • AlexanderJakhuaAlexanderJakhua GEMember ✭✭

    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

  • KeesAlderliestenKeesAlderliesten NLMember ✭✭

    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?

  • SKallSKall USMember ✭✭✭✭

    @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?

  • KeesAlderliestenKeesAlderliesten NLMember ✭✭

    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?

  • AlexanderJakhuaAlexanderJakhua GEMember ✭✭

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

  • AndrewPageAndrewPage USMember

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

    https://github.com/AndrewOfC/HybridWebView

Sign In or Register to comment.