Monthly Archives: August 2013

Adding context menu for a WinJS custom control

Published August 12, 2013 1:18 pm

Recently, we were adding a WinJS custom control for image selection. It needs to handle things like – show progress ring during image load; show load error if image failed to load; allow user to select a new image; etc. The custom control also needs to display a context menu.

Windows.UI.Menu provides the way to show context menu as flyout and quite straight forward. Need to define the menu in the html, and show the flyout in an event handler on user gesture. Example html:

<div id="imageSelectControlMenu" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand" 
      data-win-options="{ extraClass: 'delete', label: 'Delete' }"></button>
    <button data-win-control="WinJS.UI.MenuCommand" 
      data-win-options="{ extraClass: 'undo-delete', label: 'Undo Delete' }"></button>
    <button data-win-control="WinJS.UI.MenuCommand" 
      data-win-options="{ extraClass: 'clear-new-selection', label: 'Clear New Selection' }"></button>
</div>

Example js:

 
_initializeEventHandlers: function initializeEventHandlers()
{
    this.element.addEventListener('contextmenu', this._oncontextmenu.bind(this));
},
_oncontextmenu: function oncontextmenu(event)
{
    var menu = document.querySelector('#imageSelectControlMenu');
    menu.winControl.show(this.element, 'right', 'center');
},

so far so good. This is where I hit the issue of context menu showing and hiding immediately. Context menu will show up and hide immediately in less than a sec. In process to get to the root cause of the issue, I tried GestureRecognizer which exposes high level gesture events when passed the mouse events for an element. There is a good sample available for it. It takes few minutes to digest what Gesture Recognizer provides. Few notes from my usage:

  1. Typically, it will come handy for a custom control where you want to control how to raise gesture events for mspointer events.
  2. I only used it to get ‘tapped’, ‘righttapped’ events. I did not use it for manipulation events or custom gesture events. DOM ‘click’ and ‘contextmenu’ events give the same functionality as ‘tapped’ and ‘righttapped’ events respectively.
  3. Sample code gives feel how to pass it mouse pointer events.

After using the GR, I found that the issue did not go away. After few minutes of debugging, root cause was found. It was missed ‘preventDefault()’ call in the handler for ‘contextmenu’ event.

 
_oncontextmenu: function oncontextmenu(event)
{
    var menu = document.querySelector('#imageSelectControlMenu');
    menu.winControl.show(this.element, 'right', 'center');
    event.preventDefault();
},

I need to this css to fix the layout of the context menu.

.my-custom-control .win-menu
{
    width: 10em;
    padding-left: 1em;
}

Reading a file into ArrayBuffer in WinJS application

Published August 8, 2013 11:02 am

Many a times when you are using an external javascript library into your winjs application, you come across apis that expect a parameter as ArrayBuffer. Windows storage apis like FileIO.readBufferAsync return IBuffer. In such case, How do one read the contents of a file into ArrayBuffer?

There are multiple solutions for this. One of the solution that I have come across is to read the DOM ‘File’ object using WinJS.xhr.

        var storage = Windows.Storage;
        storage.StorageFile.getFileFromApplicationUriAsync(new Windows.Foundation.Uri('ms-appx:///images/logo.png')).then(function ongetfile(file)
        {
            var blob = MSApp.createFileFromStorageFile(file);
            var url = URL.createObjectURL(blob, { oneTimeOnly: true });
            return WinJS.xhr({ url: url, responseType: 'arraybuffer' });
        }).then(function onreadbuffer(req)
        {
            var arrayBuffer = req.response;
        }).then(null, function onerror(error)
        {
            // TODO: handle error
        });

Responding to feedback for Hymn World

Published August 2, 2013 11:20 am

There was a recent feedback on the Hymn World through windows store rating. Thanks for sending feedback.

StorePromo-414x180
A very good App with a few flaws
I highly recommend this app. I like the fact that the sheet music is included with each hymn incase you want to play it on the piano. I just have a few problems (pretty minor) with the app. When playing the hymn, there is only a pause button.  It would be good if a rewind and fast forward option was included. Also, an option to resize the text on the hymn and its sheet music would also be great. All in all a great app. I give it 4 stars, but if these issues were fixed I would gladly give it 5.

 

Let me respond in parts.

  1. Yes, rewind & fast-forward options are good to have. but they do not look straight forward to implement. We are currently busy with the next application. We will add them to the feature requests.
  2. Regards zoom in and out, it was earlier request by other users and already exists. you can use touch ‘pinch’ action or (ctrl key + mouse wheel) to zoom in/out.

Thanks for your valuable feedback; share it with your friends and happy playing your favorite hymns.