Adding Key Binding to Wijmo Gallery for LightSwitch

Even though LightSwitch’s HTML Client is designed for use on mobile/touch devices, many people like to use it for the desktop as well. The widgets included in Studio for LightSwitch HTML work in either scenario and there are easy tweaks you can add to give desktop users an even better experience. Take the Wijmo Gallery for LightSwitch for example. It has controls that users tap to navigate images. On the desktop (or, on tablets with keyboards), users may want to use arrow keys to navigate. This behavior isn't built into our widget by default because the Gallery is often part of a page that may already use those keys. The good news is that it is easy to add arrow key binding. Editing the widgets in Studio for LightSwitch HTML is easy. You just need to access the render code for the Wijmo custom control by clicking Edit Render Code in the LightSwitch designer (as seen below). Once you do that, you will see the code that Studio for LightSwitch HTML automatically generates. This code is based on ComponentOne Wijmo and has a full API (view the docs here). In this article, we will code against the API to bind arrow keys to the Gallery’s navigation controls. Accessing the widget code Below is the default code you see plus the custom code we are describing in this article. Notice the comment, “ //Everything below is our custom code.” That is the script we are using to bind the arrow keys.

myapp.GalleryImageViewer.WijmoGallery_render = function (element, contentItem) {  

    var div = $("<div style='height:600px'/>");  
    div.appendTo($(element));  

    contentItem.value.oncollectionchange = function () {  
        var p = c1ls.getGalleryProperties(contentItem);  

        if (p.image !== null) {  
            var list = [];  
            list.push("<ul>");  

            contentItem.value.data.forEach(function (r) {  
                list.push("<li><img width='200' height='150' src='" + p.src(r) + "' title='" + r[p.caption] + "'/></li>");  
            });  

            list.push("</ul>");  
            div.html(list.join("\\r\\n"));  
            div.wijgallery();  

            //Everything below is our custom code  

            $(".wijmo-wijgallery-frame").focus();  
            div.keydown(function (e) {  
                var keyCode = e.keyCode || e.which,  
                arrow = { left: 37, up: 38, right: 39, down: 40 };  

                switch (keyCode) {  
                    case arrow.left:  
                        div.wijgallery ("previous");  
                        break;  
                    case arrow.up:  
                        div.wijgallery("next");  
                        break;  
                    case arrow.right:  
                        div.wijgallery("next");  
                        break;  
                    case arrow.down:  
                        div.wijgallery("previous");  
                        break;  


                }  
            });  
        }  
    };  
};  

Let’s describe each part of this code. The first thing we do is automatically give the Gallery focus so the user doesn't have to click before using the keyboard. We will do this by setting a property in the underlying element, wijmo-gallery-frame:

$(".wijmo-wijgallery-frame").focus();  

Now that the gallery has focus, we will start a function that executes when a key is pressed (keydown):

div.keydown(function (e)  

Next, we tell the widget which keys to look for by their codes: left (37), up (38), right (39), and down (40):

var keyCode = e.keyCode || e.which,  
arrow = { left: 37, up: 38, right: 39, down: 40 };  

Finally, we will tell the widget what to do when the key is pressed. Note, that “previous” and “next” are built-in controls in the underlying Wijmo script.

                switch (keyCode) {  
                    case arrow.left:  
                        div.wijgallery ("previous");  
                        break;  
                    case arrow.up:  
                        div.wijgallery("next");  
                        break;  
                    case arrow.right:  
                        div.wijgallery("next");  
                        break;  
                    case arrow.down:  
                        div.wijgallery("previous");  
                        break;  

It is that simple! Now the arrow keys will navigate the images as soon as the Gallery loads.