C# to JavaScript Bi-Directional Data Communication/Population to HTML Object

Joshua_DJoshua_D ✭✭USMember ✭✭
edited October 2014 in Cross Platform with Xamarin

Xamarin team!

I am in need of a solution at current for an iOS focused solution (potentially future Android) which will allow an object from a local HTML file which is displayed within a UIWebView to be populated using JavaScript, but calculating the value via C#.
The HTML files which I will be utilizing have associating JavaScript files which include business logic that dictates on the HTML form on what is available to the user based off their selection. This is a critical point to the app (and a major reason why a Web View based application is being considered).
I have seen the Razor Hybrid project on the Xamarin Blog, however this is not a viable solution due to the fact that the parent data-layer MVC project is not PCL compliant.

Looking at the example for the JsBridge package, available on the Component Store (knowing fully aware that it is only for iOS), I do not directly see a way to interact/modify existing objects within the HTML file which is opened in the UIWebView.
For example, I wish to have a text-box in my HTML source code which the value to it gets populated through JavaScript via C# (and then later retrieve the value from the text-box). If it is possible, would someone be able to explain how? I have attempted to create a reference via ID of the object in the HTML source, but I have been unsuccessful up to this point in doing so.

I have also found in the Xamarin.Forms forum a topic speaking about the HybridWebView as part of the Xamarin.Forms.Labs work (currently this functionality is in alpha), and I was curious if there was someone who could speak on it and give a more detailed explanation of its functionality and if they could explain whether it could meet the criteria which is required?


Sources:

iOS

https://github.com/crdeutsch/MonoTouch-JsBridge/

https://components.xamarin.com/view/jsbridge/

Android

http://stackoverflow.com/questions/16923385/monotouch-mono-for-android-javascript-to-c-sharp/

Cross-Platform

http://blog.xamarin.com/sharper-html-hybrid-apps-with-razor/

http://blog.falafel.com/hybrid-apps-xamarin/

http://forums.xamarin.com/discussion/17239/webview-urlwebviewsource-and-javascript/

https://github.com/XLabs/Xamarin-Forms-Labs/wiki/HybridWebView/

Best Answer

  • SKallSKall ✭✭✭✭ US ✭✭✭✭
    Accepted Answer

    Attached is a simple hybrid sample with an Forms entry and HTML textbox and button. Type in the entry and the HTML textbox will update as you type. Type in the HTML and press the button and the forms Entry text will update. It should work on all 3 platforms but I just tested on iOS.

    The solution is using the NuGet packages so if you open with XS let it update the packages, or from VS you will need to restore the NuGet packages. I hope this will get you started at least.

Answers

  • SKallSKall ✭✭✭✭ USMember ✭✭✭✭

    I can write a small sample using the HybridWebView. Have you looked at the sample?

  • Joshua_DJoshua_D ✭✭ USMember ✭✭

    @SKall‌, at this time, I have not loaded the sample code to see it in full detail. I was honestly somewhat apprehensive and unsure of its stability given that it is in "alpha" mode. Would you or anyone have any timeline as to when it would come out of "alpha", hit "beta", and then be in the next release of Xamarin.Forms? It may make those above more comfortable for me to tell them that I am using something as part of a major release to Xamarin (rather than test/lab work).

    Either way, I can pull down the example code and see what it can/can't do, but I would certainly appreciate any insights you can offer on it.

  • SKallSKall ✭✭✭✭ USMember ✭✭✭✭

    It's a bit of a Catch-22 as I wrote the hybrid but I don't have much use for it (nor am I an expert in HTML/JS). I would need more people using it and reporting any issues so I could fix them as needed. It was a curiosity / proof-of-concept project so aside from vector graphics and charting I have not used it much myself. Maybe @MichaelRidland‌ could comment more about its use? I have made some modifications on the Android portion since his article but I am not sure if he has pushed any of his modifications to the Labs branch.

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

    http://forums.xamarin.com/discussion/comment/71905#Comment_71905

    Do you have any sample HTML pages you would like to render? If you have the basic HTML already in place it wouldn't take me more than a few minutes to create a sample solution with two-way communication.

  • SKallSKall ✭✭✭✭ USMember ✭✭✭✭
    Accepted Answer

    Attached is a simple hybrid sample with an Forms entry and HTML textbox and button. Type in the entry and the HTML textbox will update as you type. Type in the HTML and press the button and the forms Entry text will update. It should work on all 3 platforms but I just tested on iOS.

    The solution is using the NuGet packages so if you open with XS let it update the packages, or from VS you will need to restore the NuGet packages. I hope this will get you started at least.

  • MichaelRidlandMichaelRidland ✭✭✭ AUInsider, University ✭✭✭

    Hi.

    The code is merged over. That blog post mentioned is in depth I think.

    I will be using it in production, the control isn't very complicated and it's open source so using it isn't a issue for me.

    Thanks

    Michael

  • SKallSKall ✭✭✭✭ USMember ✭✭✭✭

    Yes, I read your blog in detail and noticed your changes were the ones to the Func. Just FYI, if you inject a JSON serializer (such as Json.Net or ServiceStack) plugin to the hybrid you can use the CallJsFunction method with parameters. This way there is no need to manually serialize C# objects to JSON.

    https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Xamarin.Forms.Labs/Xamarin.Forms.Labs/Controls/HybridWebView.cs#L164

  • Joshua_DJoshua_D ✭✭ USMember ✭✭

    @Skall, thanks so much for your detailed responses, they've been insightful thus far. I'll take a look at your attached demo project and get back to you.
    At this time, I do not have any raw HTML to show for this project (we're in the process of converting from Web Forms to MVC which must be completed prior to our mobile development if it should function the way we want it too.

  • Joshua_DJoshua_D ✭✭ USMember ✭✭

    @SKall‌, I think the example you provided will certainly help us to proceed. I marked your response with the example solution as the Answer, but it seems like when I did this, it removed the attached zip file after I did so? I'd like to keep it available to anyone who may stumble upon this thread and wishes to see the solution as well. (Perhaps add it back in another comment?)

    http://forums.xamarin.com/discussion/comment/82264/#Comment_82264

    You mention a JSON serializer, with such tie-ins with Json.NET and not having to manually serialize? This has the potential to being beneficial to this project as well. I looked at the source you linked, but I'd like further explanation, if possible.
    It looks as though you pass a JavaScript function name and then an array of objects, which would be the attribute/values from the JSON stream... would that be an accurate assessment? That said, I'm uncertain as to how the objects from the stream would be tied to an HTML object.

    What happens if the names are different from the HTML to the JSON stream, like the example below? (Without being clever and ignoring "animal" in the id value of the HTML, this is just to represent a difference in naming between the two.)

    {"dog":[ {"type":"Labrador", "name":"Lady", "age":"3"} ]}

    <html> <input id ="animalType", type="text" /> <br /> <input id="animalName", type="text" /> <br /> <input id="animalAge", type="text" /> </html>

  • SKallSKall ✭✭✭✭ USMember ✭✭✭✭

    The function will use the selected JSON serializer to serialize the C# objects to JavaScript here:

    https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Xamarin.Forms.Labs/Xamarin.Forms.Labs/Controls/HybridWebView.cs#L164

    XLabs has two plugins for JSON, Json.NET & ServiceStack. I used the latter on the sample. You can tweak the C# names to JS names with DataMemberAttribute.

  • uwantfriesuwantfries ✭✭ GBBeta ✭✭

    Thanks Skall this is what I need i.e. a bare bones implementation that works. Thanks for all your hard work on this!

  • RohitVipinMathewsRohitVipinMathews ✭✭ USMember ✭✭

    I downloaded the sample project, but It doesnt seem to load the file. Is there something that changed with recent updates? I was trying to see a working sample implementing this functionality.

  • SKallSKall ✭✭✭✭ USMember ✭✭✭✭

    There was a refactoring to better separate functionality. The project is now under XLabs instead of Xamarin.Forms.Labs. You can take the HTML & the page code from the sample and put into a new project. Install package XLabs.Forms & XLabs.Serialization.ServiceStackV3 and fix the namespace in the sample code and it should work.

Sign In or Register to comment.