locked
Simulator touch behavior issues

    Question

  • Greetings everyone,

    We are currently developping our first metro style app, and we found out that our app doesn't work properly on the simulator using the "touch".

    What we wanted to do :

    having a home page that contain a listview which contains other listviews sorted by group. To get this result we created the home.html and the home.js and started to do our things. The main listview get the data from a data file (in js) that describes acess options to our webservices. We then have a file that contains custom controls that acess the webservices.
    We call those controls in some external templates that are call by the main listview depending what kind of item is binded. The custom control in the HTML contains a listview that uses the webservices return to get the data.

    Now our problem is that everything works fine exept : we can't use the 'oninvokeitem' with the touch in the simulator (works fine with the mouse).

    now this for example is the external template that contains the Picture listview template :

    <html>
    <head><title>Pictures Home Template</title></head>
    <body>
        <div class="bigItemTemplate" data-win-control="WinJS.Binding.Template">
            <div data-win-control="Jiwo.Controls.TileHome" data-win-options="{delay:3500, height:200, width:400}">
                <div class="tile-content background text-main-color" style="padding:10px;">
                    <div class="win-type-ellipsis win-type-x-large" data-win-bind="textContent: Title"></div>
                    <div class="win-type-ellipsis win-type-large" data-win-bind="textContent: Date"></div>
                </div>
                <div class="tile-content">
                    <div class="big" data-win-bind="style.backgroundImage: Images Jiwo.Controls.Converters.toCssUrl"></div>
                </div>            
            </div>
            
        </div>
        <div class="normalItemTemplate" data-win-control="WinJS.Binding.Template">
            <div class="small" data-win-bind="style.backgroundImage: Images Jiwo.Controls.Converters.toCssUrl"></div>
        </div>
        <div class="PicturesContainer" data-win-control="Jiwo.Controls.PicturesHome" data-win-bind="winControl.Model:this">
            <div class="list" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode:'none', swipeBehavior:'none', tapBehavior:'invoke'}">
            </div>
        </div>
    </body>
    </html>
    



    and this is the control that is called inside :

     PicturesHome: WinJS.Class.define(
               function (element, options) {
                   var self = this;
    
                   element.winControl = this;
    
    
    
                   setImmediate(function () {
    
                       Jiwo.Controls.Loader.addProgressRing(element, "");
                       //  delay: self.Model.moduleId * 10000
                       Jiwo.WebService.Thumbnails(self.Model.moduleId, function (result) {
    
    
    
                           if (result.length < 4) {
                               self.rowAmount = 6;
                           }
                           else {
                               self.rowAmount = 8;
                           }
                           var _list = element.querySelector(".list").winControl;
                           var myGridLayout = new WinJS.UI.GridLayout({
                               groupHeadertop", groupInfo: function () {
                                   return {
                                       enableCellSpanning: true,
                                       cellWidth: 100,
                                       cellHeight: 50
                                   };
                               },
                               maxRows: self.rowAmount
                           });
                           var headerTemplate = document.querySelector(".headerTemplate").winControl;
    
    
                           WinJS.UI.setOptions(_list, {
                               //itemDataSource: element.winControl.DataContext.dataSource,
                               layout: myGridLayout,
                               itemTemplate: function (itemPromise) {
                                   return new WinJS.Promise(function (complete, error) {
                                       itemPromise.then(function (currentItem) {
                                           var item = currentItem.data; // this is one of the original individual items in your list.
                                           var itemTemplate;
    
                                           // Let's pretend your item has a size property, but you can use whatever logic you want.
                                           if (item.Size === "big") {
                                               itemTemplate = document.querySelector(".bigItemTemplate").winControl;
                                           } else {
    
                                               itemTemplate = document.querySelector(".normalItemTemplate").winControl;
                                           }
    
                                           // render the template and complete the promise.
                                           itemTemplate.render(item).then(function _templateComplete(element) {
                                               complete(element);
                                           }, function _templateError(e) {
                                               error(e);
                                           });
                                       });
                                   })
                               }
    
                           });
                           Jiwo.Controls.Loader.clearLoader(element);
                           var DataContext = new WinJS.Binding.List();
    
                           for (var i = 0; i < result.length; i++) {
                               var data = result[i];
                               data.Group = 1;
                               if (i == 0)
                                   data.Size = "big";
                               else
                                   data.Size = "small";
                               DataContext.push(data);
                           }
                           WinJS.UI.setOptions(_list, {
                               itemDataSource: DataContext.dataSource,
    
                           });
                           _list.forceLayout();
    
                       });
    
                       element.querySelector(".list").winControl.addEventListener("iteminvoked", function (eventObject) {
                           var item = eventObject.detail.itemPromise.then(function (invokedItem) {
                               console.log(invokedItem.data.Id);
                           })
                       });
    
                   });
    
               },
               {
                   Model: '',
                   rowAmount: 0
               },
               {
    
               }
           ),


    this is the main listview HTML :   

                <div class="HomeListView" id="HomeListView" data-win-control="WinJS.UI.ListView" data-win-options="{ 
                    itemDataSource: Jiwo.Home.Menu.dataSource,
                    groupDataSource: Jiwo.Home.MenuGroup.dataSource,
                    groupHeaderTemplate : select('.headerTemplate'),
                    selectionMode:'none', 
                    swipeBehavior:'none', 
                    tapBehavior:'none',
                    layout: {type: WinJS.UI.GridLayout, }              
                    }">
                </div>

    and this is the js relative to the main listview :

    ready: function (element, options) {
                var _homeListView = document.getElementById("HomeListView");
                _homeListView.winControl.itemTemplate = function (itemPromise) {
                    return itemPromise.then(function (item) {
                        // Select either normal product template or on sale template
                        var itemTemplate = new WinJS.Binding.Template(null, { href: "/pages/" + item.data.type + "/home.html" });//document.querySelector("."+item.data.type+"Template");
                        // Render selected template to DIV container
                        var container = document.createElement("div");
                        itemTemplate.render(item.data, container);
                        return container;
                       
                    });
                };
                for (var i = 0; i < Jiwo.Config.Menu.length; i++) {
                    _menu.push(Jiwo.Config.Menu[i]);
                };           
                         
            }
        });
    
    
    
        var _menu = new WinJS.Binding.List();
        var groupedItems = _menu.createGrouped(
            function groupKeySelector(item) {
                return item.groupKey;
            },
            function groupDataSelector(item) {
                return item;
            }
        );
        WinJS.Namespace.define("Jiwo.Home", {
            _menu: _menu,
            Menu: groupedItems,
            MenuGroup: groupedItems.groups,
            //showVideoPlayer: showVideoPlayer,
        });



    • Edited by Gwenyto Thursday, August 02, 2012 12:33 PM
    Thursday, August 02, 2012 12:31 PM

Answers

  • Thanks for reporting this.

    There are some know issues with touch emulation in the simulator.  Your customers will not be using the simulator so you should be good to go!

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, August 02, 2012 2:39 PM
    Moderator

All replies

  • You have embedded a listview in another listview?

    Jeff Sanders (MSFT)

    Thursday, August 02, 2012 1:49 PM
    Moderator
  • Yes we did.
    Thursday, August 02, 2012 2:17 PM
  • Does this work OK on a physical device (simulator only problem)?  Will you be willing to put a demo of this problem on skyDrive or share it with me some other way?


    Jeff Sanders (MSFT)

    Thursday, August 02, 2012 2:30 PM
    Moderator
  • Yes it works perfectly on a physical device (local computer), the issue is only with the simulator while using the touch pointer. We'll be happy to share the demo with you via skype :)

    Thursday, August 02, 2012 2:35 PM
  • Thanks for reporting this.

    There are some know issues with touch emulation in the simulator.  Your customers will not be using the simulator so you should be good to go!

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, August 02, 2012 2:39 PM
    Moderator
  • Can we share the project with you, and let you test it on your surface? just to be sure that the problem doesn't come from our code.
    Best regards, gwen 

    Thursday, August 02, 2012 2:43 PM
  • Sure Gwen,

    You can contact me here:  http://blogs.msdn.com/jpsanders/contact.aspx

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, August 02, 2012 7:55 PM
    Moderator