[TIMOB-8295] Android: toImage() not capturing all child views withing a view

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Reopened
Resolution	Unresolved
Affected Version/s	Release 2.0.0
Fix Version/s	n/a
Components	Android
Labels	core
Reporter	Pete Berry
Assignee	Unknown
Created	2012-03-22T13:16:03.000+0000
Updated	2018-03-06T18:57:55.000+0000

Description

The following example creates a table with 3 rows and 3 columns then 1. Copies the 2nd row and pastes it as the 4th row 2. Displays the table 3. Copies the 3nd row and pastes it as the 5th row The 4th and 5th rows are not proper size. The do not contain all of the cells from the rows! It is also important to notice that width of the image returned by toImage() is 100 which is incorrect. The same incorrect value is returned both before and after displaying the table. Please note that the following code is run from a window and not app.js. When this code is in app.js the 5th row is blank, but to be honest, I am not concerned about that!

var win1 = Ti.UI.createWindow({url:'TheWindow.js'});
win1.open();

var win1 = Ti.UI.currentWindow;

// Array of rows
var Rows = [];

var TheLabel;
var TheRow;
var TheCol;

// Create the table with 3 rows
for (var Y=1; Y<=3; Y++)  // Row loop
{
  TheRow=Ti.UI.createView({top:((Y-1)*21), 
                           height:21,
                           backgroundColor:'gray'});
  for (var X=1; X<=4; X++) // Column loop
  {
    // Create the cells
    TheCol=Ti.UI.createView({left:((X-1)*50), 
                             width:50});
    TheLabel=Ti.UI.createLabel({text:Y + '.' + X});
    TheCol.add(TheLabel);
    TheRow.add(TheCol);
  }
  Rows.push(TheRow)  
}

// create the 4th row
var TheRealRow = Ti.UI.createView({top:((4-1)*21), 
                                   height:21});
TheCol = Ti.UI.createView({left:0, 
                           width:150});  // Force the correct width
TheRealRow.add(TheCol);

// Copy the image of the 2nd row
var TheRowImage = Rows[1].toImage();

// Check the size of the image, it should be 150 bit it is 100!
Ti.API.info('*** Before displayed TheRowImage.width =' + TheRowImage.width);    

// paste the image of the 2nd row in the 4th row    
TheCol.add(Ti.UI.createImageView({image:TheRowImage,
                                  height:21,
                                  width:TheRowImage.width}));

// Display the first three rows
for (var Z=0; Z<Rows.length; Z++)
{
  win1.add(Rows[Z]);
}

// Display the 4th row
win1.add(TheRealRow);

// Create the 5th row
TheRealRow = Ti.UI.createView({top:((5-1)*21), 
                               height:21});
TheCol = Ti.UI.createView({left:0, 
                           width:150}); // Force the correct width
TheRealRow.add(TheCol);

// Copy the image of the 3rd row
TheRowImage = Rows[2].toImage();

// Check the size of the image, it should be 150 bit it is 100!
Ti.API.info('*** After displayed TheRowImage.width =' + TheRowImage.width);    

// paste the image of the 3rd row in the 4th row    
TheCol.add(Ti.UI.createImageView({image:TheRowImage,
                                  height:21,
                                  width:TheRowImage.width}));

// Display the 5th row
win1.add(TheRealRow);

Attachments

File	Date	Size
truncated_rows.png	2012-06-23T12:20:34.000+0000	36630

Comments

Pete Berry 2012-04-11

Greetings, Why has the priority for this bug been reduced to "None"? Thank you, Pete
Stephen Tramer 2012-04-27

Ticket should be resolved in tandem with TIMOB-8853 if possible; potentially the same bug.

Stephen Tramer 2012-04-30

Testing

---- The following is updated test code, for a single JS file that is 2.0-ready.

   var win1 = Ti.UI.createWindow();
    
   // Array of rows
   var Rows = [];
    
   var TheLabel;
   var TheRow;
   var TheCol;
    
   // Create the table with 3 rows
   for (var Y=1; Y<=3; Y++)  // Row loop
   {
     TheRow=Ti.UI.createView({top:((Y-1)*21), 
                              height:21,
                              backgroundColor:'gray'});
     for (var X=1; X<=4; X++) // Column loop
     {
       // Create the cells
       TheCol=Ti.UI.createView({left:((X-1)*50), 
                                width:50});
       TheLabel=Ti.UI.createLabel({text:Y + '.' + X});
       TheCol.add(TheLabel);
       TheRow.add(TheCol);
     }
     Rows.push(TheRow)  
   }
    
   // create the 4th row
   var TheRealRow = Ti.UI.createView({top:((4-1)*21), 
                                      height:21,
   								   left:0});
   TheCol = Ti.UI.createView({left:0});  // Force the correct width
   TheRealRow.add(TheCol);
    
   // Copy the image of the 2nd row
   var TheRowImage = Rows[1].toImage(null, true);
    
   // Check the size of the image, it should be 150 bit it is 100!
   Ti.API.info('*** Before displayed TheRowImage.width =' + TheRowImage.width);    
    
   // paste the image of the 2nd row in the 4th row    
   TheCol.add(Ti.UI.createImageView({image:TheRowImage,
                                     height:21,
                                     width:TheRowImage.width,
   								left:0}));
    
   // Display the first three rows
   for (var Z=0; Z<Rows.length; Z++)
   {
     win1.add(Rows[Z]);
   }
    
   // Display the 4th row
   win1.add(TheRealRow);
    
   // Create the 5th row
   TheRealRow = Ti.UI.createView({top:((5-1)*21), 
                                  height:21,
   							   left:0});
   TheCol = Ti.UI.createView({left:0}); // Force the correct width
   TheRealRow.add(TheCol);
    
   // Copy the image of the 3rd row
   TheRowImage = Rows[2].toImage(null, true);
    
   // Check the size of the image, it should be 150 bit it is 100!
   Ti.API.info('*** After displayed TheRowImage.width =' + TheRowImage.width);    
    
   // paste the image of the 3rd row in the 4th row    
   TheCol.add(Ti.UI.createImageView({image:TheRowImage,
                                     height:21,
                                     width:TheRowImage.width,
   								  left:0}));
    
   // Display the 5th row
   win1.add(TheRealRow);
   win1.open();

Max Stepanov 2012-04-30

PR merged https://github.com/appcelerator/titanium_mobile/pull/2096
Pete Berry 2012-05-15

Using 2.1.0.v20120514211805 the problem still exists. The following is expected on the screen: 1.1 1.2 1.3 1.4 2.1 2.2 2.3 2.4 3.1 3.2 3.3 3.4 2.1 2.2 2.3 2.4 3.1 3.2 3.3 3.4 However, this is what you see: 1.1 1.2 1.3 1.4 2.1 2.2 2.3 2.4 3.1 3.2 3.3 3.4 2.1 2.2 3.1 3.2 As when this was originally reported the two copied lines at bottom are truncated. Thank you, Pete
Pete Berry 2012-05-15

Please note, as originally reported, this is a problem on Android. We have not tested this "fix" on iOS.
Mukesh Gadiya 2012-06-23

Reopening as unresolved. As pete noted below, this bug is not fixed yet. Please find the attached screenshot - truncated_rows.png SDK: 2.1.0.v20120622174154 OS: Lion 10.7.3 Android SDK 2.2 HVGA/WQVGA400
Mukesh Gadiya 2012-06-23

Please note that I used Stephen's code from 30th April and was able to reproduce the issue.

JSON Source