Friday, 22 April 2016

Invoke C# from Javascript in Android using Export attribute

I've been happily invoking C# from a webview in my Xamarin Android app for some while now, but this time I needed to send a parameter from my js. Using the basic Run() was no longer an option and so I turned to a solution using the Export attribute, which I first read about here.
Instead of:
public void Run()
    {
        //do your stuff
    }
you do this:
[Export("customInvoke")]
public void CustomInvoke(string myParameter)
    {
       //do your stuff
    }

Tuesday, 29 March 2016

autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"

How to stop an HTML input field thinking it knows best on mobile:
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"

Monday, 28 March 2016

Capturing touch events in iOS/Android webviews

I have some HTML content that is shared between a Xamarin Android app and an ObjC/Swift native iOS app. In the HTML are a few buttons that need to trigger events in the native code of each app. The techniques for capturing these events are well documented, but one has to remember that a touch event might actually be a scroll or a swipe, and the use may not be trying to 'click' the element in question. I overcame this problem by using a boolean flag to see if we're moving:
var moved;
$('.myElement').on('touchend', function(e){
    if(moved != true){
        //do your thing
    }
}).on('touchmove', function(e){
    moved = true;
}).on('touchstart', function(){
    moved = false;
});

Thursday, 10 March 2016

Xamarin Android get image from Assets


            var ims = AppContext.Assets.Open("path/to/my/file/in/assets");
            var drawable = Drawable.CreateFromStream(ims, null);
            imageView.SetImageDrawable(drawable);


Monday, 7 March 2016

Showing layout using bootstrap

Here's a cheeky little bit of css that will make your layout clear when you're building UI with bootsrap. Really handy for building and debugging:

[class*="span"] { background: #EEF; }
[class*="span"] [class*="span"] { background: #FEE; }