Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-3234] iOS: Dashboard Events do not trigger correctly with custom Dashboard Items [iPad]

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionInvalid
Resolution Date2017-05-02T20:12:18.000+0000
Affected Version/sRelease 3.0.0
Fix Version/sn/a
ComponentsiOS
Labelsapi
ReporterBert
AssigneeIngo Muschenetz
Created2011-04-15T03:40:06.000+0000
Updated2017-05-02T21:19:14.000+0000

Description

Overview

When creating custom dashboard items that don't correspond to the "hard coded" size restrictions within the Dashboard Module, events associated with the Dashboard Items are not fired in the correct spots or at all.

Technical Information

Titanium Mobile SDK: 1.5.x and above

Environment: iPad Simulator

iOS SDK: 4.1 && 4.2

Expected Result:

Clicking on the Dashboard Item should fire the coded Event

Actual Result:

Event is not fired at all or is triggered in the wrong place

Code Sample:


var win = Ti.UI.currentWindow;

var data = [
    {id: 0, title: 'test1', image:'image.png'},
    {id: 1, title: 'test2', image: 'image.png'},
    {id: 2, title: 'test3', image:'image.png'},
    {id: 3, title: 'test4', image:'image.png'},
    {id: 4, title: 'test5', image:'image.png'},
    {id: 5, title: 'test6', image:'image.png'},
    {id: 6, title: 'test7', image:'image.png'},
    {id: 7, title: 'test8', image:'image.png'},
    {id: 8, title: 'test9', image:'image.png'},
    {id: 9, title: 'test10', image:'image.png'},
    {id: 10, title: 'test11', image:'image.png'},
    {id: 11, title: 'test12', image:'image.png'},
    {id: 12, title: 'test13', image:'image.png'}
];


var background = Ti.UI.createView({
    backgroundImage: '../images/bkg.png'
});

var dashboardItems = [];
var t = 0;
for(var i=0, j=data.length; i < j; i++){
    
    var label = Ti.UI.createLabel({
        text: data[i].title,
        font: {
            fontSize: 12,
            fontFamily: 'Helvetica',
            fontWeight: 'bold' 
        },
        shadowColor: '#333',
        shadowOffset: {x:1, y:1},
        color: '#fff',
        width: 130,
        textAlign: 'center',
        top: 210
    });
    
    var icon = Ti.UI.createImageView({
        image: '../images/'+ data[i].image,
        width: 130,
        height: 'auto'
    });
    
    var item = Ti.UI.createDashboardItem({
        title: data[i].id,
        canDelete: false,
        top: t,
        width: 140,
        height: 230,
        zIndex: 100,
        touchEnabled: true
    });
    
    item.addEventListener('click', function(e){
        //This never gets hit - event isn't getting called
               Ti.API.info('HELLOOO');
    });
    
    item.add(icon);
    item.add(label);
    dashboardItems.push(item);  
     
    //Goofy stuff i have to do to make custom Dashboard Items show properly on the iPad in landscape mode
    if((i+1) % 3 == 0) { 
        if( i % 8 == 0) { t=0; Ti.API.info('Top: '+t); continue;}
        t+=125; 
        Ti.API.info('Top: '+t);
        Ti.API.info('Mod: '+ i%3);
    }

        // Debug Info for the DashboardItem positioning
    Ti.API.info('Top: '+t);
    Ti.API.info('Mod: '+ i%3);
}

var dasboard = Ti.UI.createDashboardView({
    title: 'dashboard',
    data: dashboardItems,
    touchEnabled: true,
    wobble: false,
    height: 768,
    width: 900,
    top: 10
});

win.add(background);
win.add(dashboard);

Comments

  1. Junaid Younus 2012-09-04

    Tested on the iOS simulator using TiSDK 2.2.0v20120904101713, issue still valid.
       var win = Ti.UI.createWindow({backgroundColor: 'white'});
       
       var data = [
           {id: 0, title: 'test1', image:'image.jpg'},
           {id: 1, title: 'test2', image:'image.jpg'},
           {id: 2, title: 'test3', image:'image.jpg'},
           {id: 3, title: 'test4', image:'image.jpg'},
           {id: 4, title: 'test5', image:'image.jpg'},
           {id: 5, title: 'test6', image:'image.jpg'},
           {id: 6, title: 'test7', image:'image.jpg'},
           {id: 7, title: 'test8', image:'image.jpg'},
           {id: 8, title: 'test9', image:'image.jpg'},
           {id: 9, title: 'test10', image:'image.jpg'},
           {id: 10, title: 'test11', image:'image.jpg'},
           {id: 11, title: 'test12', image:'image.jpg'},
           {id: 12, title: 'test13', image:'image.jpg'}
       ];
       
       
       var background = Ti.UI.createView({
           backgroundImage: 'KS_nav_ui.png'
       });
       
       var dashboardItems = [];
       var t = 0;
       for(var i=0, j=data.length; i < j; i++){
           
           var label = Ti.UI.createLabel({
               text: data[i].title,
               font: {
                   fontSize: 12,
                   fontFamily: 'Helvetica',
                   fontWeight: 'bold' 
               },
               shadowColor: '#333',
               shadowOffset: {x:1, y:1},
               color: '#fff',
               width: 130,
               textAlign: 'center',
               top: 210
           });
           
           var icon = Ti.UI.createImageView({
               image: data[i].image,
               width: 130,
               height: 'auto'
           });
           
           var item = Ti.UI.createDashboardItem({
               title: data[i].id,
               canDelete: false,
               top: t,
               width: 140,
               height: 230,
               zIndex: 100,
               touchEnabled: true
           });
           
           item.addEventListener('click', function(e){
               //This never gets hit - event isn't getting called
                      Ti.API.info('HELLOOO');
           });
           
           item.add(icon);
           item.add(label);
           dashboardItems.push(item);  
            
           //Goofy stuff i have to do to make custom Dashboard Items show properly on the iPad in landscape mode
           if((i+1) % 3 == 0) { 
               if( i % 8 == 0) { t=0; Ti.API.info('Top: '+t); continue;}
               t+=125; 
               Ti.API.info('Top: '+t);
               Ti.API.info('Mod: '+ i%3);
           }
       
               // Debug Info for the DashboardItem positioning
           Ti.API.info('Top: '+t);
           Ti.API.info('Mod: '+ i%3);
       }
       
       var dashboard = Ti.UI.createDashboardView({
           title: 'dashboard',
           data: dashboardItems,
           touchEnabled: true,
           wobble: false,
           height: 768,
           width: 900,
           top: 10
       });
       
       win.add(background);
       win.add(dashboard);
       
       win.open();
       
  2. Lee Morris 2017-05-02

    Resolving ticket as Invalid as there is now a new version of Kitchen Sink available and we no longer support the version which relates to this ticket.

JSON Source