locked
Win2JS.ui-light.css, input buttons, viewbox confusion

    Question

  • I recently was given some help with a memory game app I am developing. I could not get scroll to work, so Win2JS.ui-light.css was disabled. A new class win-scrollview was added to the outerdeck div.

    I have since managed to get all the content on the page so I re-enabled the ui-light.css, and removed the win-scrollview class from the html. I wanted to use viewbox to help responsiveness (orientation, snap) during the game itself.  The choice of settings is through a separate div, and is chosen with buttons.

    If I have the light.css enabled and viewbox, then there is no functionality in the buttons. The buttons work with either but not both. When I click a button nothing happens. It does not feed through to the associated eventHandler (I tried setting a breakpoint at the start of the event handler but the programme did not reach it).

    I am wondering where I have gone wrong.

    The relevant html is

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <body> <div id="settings"> <div id="difficulty"> <ul> <li><input type="button" id="easymatch" class="button" name="Match" value="Easy Match Game" /></li> <li><input type="button" id="easymemory" class="button" value="Easy Memory Game" /></li> and so on ..... </ul> </div> </div> <div data-win-control="WinJS.UI.ViewBox" id="outerdeckb">

    The game is played here. <div id="outerdeck"> </div> </div>

    The relevant javascript is:

        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
    
                var promise = WinJS.UI.processAll();
    
                promise.then(
                    function () {
    
                        // this code runs when the application has started.
                        initialiseHtmlElements();
    
                });
                args.setPromise(promise);
                
                var easyMatchButton = document.getElementById("easymatch");
                easyMatchButton.addEventListener("click", memory.bind({ SA: SettingsArray[0]}), false);
    
    
    and so on
    

    Thank you for your help.

    Tuesday, May 20, 2014 3:22 PM

All replies

  • I tested your code and had to make the following changes:
    1) Commented out  initialiseHtmlElements();

    2) Replaced
    easyMatchButton.addEventListener("click", memory.bind({ SA: SettingsArray[0]}), false);

    with

    easyMatchButton.addEventListener("click", DoSomething), false);

    and

    function DoSomething()
    {
        var MyDialog =  new Windows.UI.Popups.MessageDialog("hello!");
        MyDialog.showAsync();

    }

    the button click worked fine.  Am I missing something?



    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, May 21, 2014 1:47 PM
    Moderator
  • Many thanks for your help. Much appreciated.

    The initialise was added to keep several

    var aname = document.getElementById("something")

    current during the running of the game. They were going out of scope each time a function was called even if they were declared at the top as   

    var aname = document.getElementById("something")

    Perhaps a namespace might have done the trick? (Am still a bit wobbly on namespaces.)

    The               easyMatchButton.addEventListener("click",memory.bind({SA: SettingsArray[0]}), false)             feeds settings to the game  The settings array gives the number of cards, number of copies, whether match or memory version and makes it easy to alter the various game levels. These settings can then be fed into the game function directly. Does that mean that to get rid of the bind({SA: SettingsArray[0]}) I would need to add a dozen functions in place of a single array?


    I have since altered the code to:

    args.setPromise(WinJS.UI.processAll().then(function completed(){
                               
    
                    // this code runs when the application has started.
                    initialiseHtmlElements();       
                        
    
                    var easyMatchButton = document.getElementById("easymatch");
                    easyMatchButton.addEventListener("click", memory.bind({ SA: SettingsArray[0]}), false);
    
                    var easyMemoryButton = document.getElementById("easymemory");
                    easyMemoryButton.addEventListener("click", memory.bind({ SA: SettingsArray[1] }), false);
    
    etc.

    The html : I have the light.css enabled, but have no viewport. The buttons work.


    I have written an algorithm which resizes the images for the game  based on the number of cards and the size of the screen.  Everything fits in the screen including in the simulator screens. On the simulator the game responds well to rotation.  However, on my hybrid laptop the game does not respond when rotated. (Normally the window does rotate with ease.) Am not sure why this is.

    Do I believe the simulator or my laptop?

    I am wondering if there is any alternative to viewport for orientation, or if I need to write that in myself. Interestingly when trying out other winJS alternatives for outerdeckb div I found that some did not block the buttons but some did.

    I do not understand why the easyMatchButton.addEventListener("click",memory.bind({SA: SettingsArray[0]}), false)  should stop the buttons working with the viewport.

    Is there any reason why it should? That might help me work round it (and understand the workings of an app more thoroughly).

    Thanking you in advance for your help.



    • Edited by chickfeed Thursday, May 22, 2014 7:30 AM
    Thursday, May 22, 2014 7:24 AM