locked
Dispatching keyboard/mouse events in WinJS (Windows Store App using JavaScript)

    Question



  • Hello,


    I'm developing a Windows Store App that uses the Remote Desktop Client ActiveX control in order to access applications running on remote machines.


    I would like to add the following features to my application, in order to make it usable in touch-only mode, on a Microsoft Surface RT device with the physical keyboard/mouse/touchpad disconnected and not available to the user.



    1.

    A custom, "draggable" mouse pointer widget with a collection of action buttons such as "left click", "right click","copy","paste".

    (I am familiar with the TouchPointer feature that comes with the remote desktop client control, and is not sufficient for these specs.)



    2. 

    A custom on-screen keyboard.

    My current understanding is that it is impossible to summon the Windows Touch Keyboard on-demand inside a Windows Store app, in any way other than selecting an editable field.

    Unfortunately, when connected via the Remote Desktop Control, selected editable fields on the remote machine does not trigger this behaviour on the client device.


    ===============================

    I decided to try dispatching keyboard/mouse events in the application, to see whether they will be properly communicated through the Remote Desktop session.


    For example, I've attempted dispatching a keyboard event for the "A" key this way:

    var e = document.createEvent("KeyboardEvent");
    e.initKeyboardEvent("keypress", true, true, window, "a", KeyboardEvent.DOM_KEY_LOCATION_STANDARD, "", false, "en-US");
    document.dispatchEvent(e);


    Unfortunately, this results in an event that's "untrusted" (event.isTrusted is 'false') and it does not produce the desired effect. 

    (NOTE: Another community member already raised a similar question, but it doesn't look like a resolution was reached.)

    Please help!









    • Edited by paulkore Thursday, November 7, 2013 11:27 PM
    Thursday, November 7, 2013 11:26 PM

Answers

  • Hi Paul,

    For Scenario 1: That is not possible. You cannot synthesize input that way.

    For Scenario 2: You can actually get the on-screen keyboard appear on your <div> that hosts the RDP control by making your <div> contentEditable.

    For example, if you set the contentEditable property on the <div> that hosts the RDP control to true, that will make the entire <div> editable. Now when you touch anywhere in the div (not just an editable content, it will bring up the keyboard and your user can then focus within an editable area, such as notepad and start typing.

    Here's a simple approach you can use by modifying the make-connection.html and make-connection.js from the "Remote Desktop app container client sample".

    The other advise is that you should make this functionality available to the user on demand, rather than have it enabled by default. The reason being if you remote into a Windows 8 or 8.1 machine, and if you bring up the search charm on the remote machine and place control in the search box, the on-screen keyboard of the remote machine will show up. If you had the contentEditable enabled by default, the user will see two keyboards (one on the remoted machine and one from the remoting machine) and it won't look nice.

    For downlevel OS, such as Windows 7 or earlier where you don't get the on-screen keyboard, you can manually enable the contentEditable property of the div and then have your users type.

    make-connection.html:
    ========================
                    <button id="propertiesButton">...
                    <button id="makeEditable">Make Content Editable</button>
                    <button id="removeEditable">Remove Content Editable</button>
    
    
    
    make-connection.js:
    ========================
        var page = WinJS.UI.Pages.define("/html/make-connection.html", {
            ready: function (element, options) {
                ......
                ......
                var makeEditableButton = document.getElementById("makeEditable");
                makeEditableButton.addEventListener("click", handleEditableButton, false);
    
                var removeEditableButton = document.getElementById("removeEditable");
                removeEditableButton.addEventListener("click", handleRemoveEditableButton, false);
                ......
    
        function handleEditableButton() {
            document.getElementById("clientControlRegion").contentEditable = true;
        };
    
        function handleRemoveEditableButton() {
            document.getElementById("clientControlRegion").contentEditable = false;
        };
    
    

    Thanks,

    Prashant.


    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Friday, November 8, 2013 2:26 AM
    Moderator

All replies

  • Hi Paul,

    For Scenario 1: That is not possible. You cannot synthesize input that way.

    For Scenario 2: You can actually get the on-screen keyboard appear on your <div> that hosts the RDP control by making your <div> contentEditable.

    For example, if you set the contentEditable property on the <div> that hosts the RDP control to true, that will make the entire <div> editable. Now when you touch anywhere in the div (not just an editable content, it will bring up the keyboard and your user can then focus within an editable area, such as notepad and start typing.

    Here's a simple approach you can use by modifying the make-connection.html and make-connection.js from the "Remote Desktop app container client sample".

    The other advise is that you should make this functionality available to the user on demand, rather than have it enabled by default. The reason being if you remote into a Windows 8 or 8.1 machine, and if you bring up the search charm on the remote machine and place control in the search box, the on-screen keyboard of the remote machine will show up. If you had the contentEditable enabled by default, the user will see two keyboards (one on the remoted machine and one from the remoting machine) and it won't look nice.

    For downlevel OS, such as Windows 7 or earlier where you don't get the on-screen keyboard, you can manually enable the contentEditable property of the div and then have your users type.

    make-connection.html:
    ========================
                    <button id="propertiesButton">...
                    <button id="makeEditable">Make Content Editable</button>
                    <button id="removeEditable">Remove Content Editable</button>
    
    
    
    make-connection.js:
    ========================
        var page = WinJS.UI.Pages.define("/html/make-connection.html", {
            ready: function (element, options) {
                ......
                ......
                var makeEditableButton = document.getElementById("makeEditable");
                makeEditableButton.addEventListener("click", handleEditableButton, false);
    
                var removeEditableButton = document.getElementById("removeEditable");
                removeEditableButton.addEventListener("click", handleRemoveEditableButton, false);
                ......
    
        function handleEditableButton() {
            document.getElementById("clientControlRegion").contentEditable = true;
        };
    
        function handleRemoveEditableButton() {
            document.getElementById("clientControlRegion").contentEditable = false;
        };
    
    

    Thanks,

    Prashant.


    Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

    Friday, November 8, 2013 2:26 AM
    Moderator
  • Hi Prashant,

    Thanks for the prompt, and detailed reply.

    Taking advantage for "contentEditable" property worked for me, and I was able to get a pop-up keyboard.

    There is one annoyance, however: The 'resize' handles that appear around the RDP control object, which is inside the "clientControlRegion" DIV. These resize handles look similar to this example:

    It would seem like something easy to do, but I wasn't yet able to find a way to get rid of these handles.

    I was only able to disable the resize functionality, by implementing a handler for the "oncontrolselect" event, like so (idea taken from this StackOverflow thread)

    clientControlObject.oncontrolselect = function () { return false; };

    It should also be noted that the above fix DOES work for a simple scenario of one DIV inside another DIV (I've tested it), but the RDP control (which is an ActiveX object) seems to exhibit different behavior in this regard.

    Is there a known way to fix this?


    Best Regards,

    -Paul

    Sunday, November 10, 2013 1:05 AM
  • Monday, November 11, 2013 2:46 PM