Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13661] iOS: Fading between backgroundGradients in tableViewRows

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionWon't Fix
Resolution Date2013-04-29T22:12:28.000+0000
Affected Version/sRelease 3.1.0
Fix Version/s2013 Sprint 09 API, 2013 Sprint 09
ComponentsiOS
LabelssupportTeam
ReporterEduardo Gomez
AssigneeVishal Duggal
Created2013-04-23T23:05:55.000+0000
Updated2017-03-29T17:52:32.000+0000

Description

Problem

In the previous SDK (3.0.0 GA) the behavior of changing the backgroundGradient for a tableViewRow was instantaneous. Now there seems to be a premade fading transition from one backgroundGradient to the other.

Snippet sample

- app.js
var view = require('FirstView')();
var win = Ti.UI.createWindow({
    backgroundColor: "white"
});
win.add(view);
win.open();
- FirstView.js
//FirstView Component Constructor
function FirstView() {
	//create object instance, a parasitic subclass of Observable
	var self = Ti.UI.createWindow({
		backgroundColor : 'black',
		navBarHidden : true,
		exitOnClose : true
	});

	//construct UI

	var selector = Ti.UI.createTableView({
		height : 500,
		borderColor : 'blue',
		borderRadius : 1,
		top : '15%',
		width : '80%',
		backgroundColor : 'none',
		style : Ti.UI.iPhone.TableViewStyle.GROUPED
	});

	var id = 1;
	var defaultGradient = {
		type : "linear",
		colors : ["#f7f8fa", "#e9ebec"],
		startPoint : {
			x : 0,
			y : 0
		},
		endPoint : {
			x : 0,
			y : '100%'
		},
		backFillStart : true
	};
	var selectedGradient = {
		type : "linear",
		colors : ["#97c5e8", "#5496d6"],
		startPoint : {
			x : 0,
			y : 0
		},
		endPoint : {
			x : 0,
			y : '100%'
		},
		backFillStart : true
	};
	var createDataRow = function(e) {
		var newRow = Ti.UI.createTableViewRow({
			title : e.name,
			rowID : id,
			hasChild : true,
			backgroundGradient : defaultGradient,
			highlightState : 'none'
		});
		newRow.addEventListener('touchend', function(e) {
			if (e.source.highlightState == 'none') {
				e.source.backgroundGradient = selectedGradient;
				e.source.highlightState = 'active';
			} else {
				e.source.backgroundGradient = defaultGradient;
				e.source.highlightState = 'none';
			}
		});
		id += Math.ceil(Math.random() * 5);
		return newRow;
	};
	var randomLetter = function() {
		var rubric = "abcdefghijklmnopqrstuvwxyz";
		var idx = Math.floor(Math.random() * 26);
		return rubric.charAt(idx);
	};
	var dataArray = [];
	for (var i = 0; i < 10; i++) {
		var length = Math.ceil(Math.random() * 15);
		var buffer = "ID: ";
		for (var j = 0; j < length; j++) {
			buffer += randomLetter();
		}
		dataArray.push(createDataRow({
			name : buffer
		}));
	}
	selector.setData(dataArray);
	self.add(selector);
	return self;
}

module.exports = FirstView;

Comments

  1. Vishal Duggal 2013-04-29

    The change is due to the fix for TIMOB-11335. To replicate behavior similar to older SDK's use the following code
       //FirstView Component Constructor
           var defaultGradient = {
               type : "linear",
               colors : ["#f7f8fa", "#e9ebec"],
               startPoint : {
                   x : 0,
                   y : 0
               },
               endPoint : {
                   x : 0,
                   y : '100%'
               },
               backFillStart : true
           };
           var selectedGradient = {
               type : "linear",
               colors : ["#97c5e8", "#5496d6"],
               startPoint : {
                   x : 0,
                   y : 0
               },
               endPoint : {
                   x : 0,
                   y : '100%'
               },
               backFillStart : true
           };
       
       function FirstView() {
           //create object instance, a parasitic subclass of Observable
           var self = Ti.UI.createWindow({
               backgroundColor : 'black',
               navBarHidden : true,
               exitOnClose : true
           });
        
           //construct UI
        
           var selector = Ti.UI.createTableView({
               height : 500,
               borderColor : 'blue',
               borderRadius : 1,
               top : '15%',
               width : '80%',
               backgroundColor : 'none',
               style : Ti.UI.iPhone.TableViewStyle.GROUPED,
               allowsSelection: true
           });
        
           var id = 1;
           var createDataRow = function(e) {
               var newRow = Ti.UI.createTableViewRow({
                   title : e.name,
                   rowID : id,
                   hasChild : true,
                   backgroundGradient : defaultGradient,
                   highlightState : 'none'
               });
               
               id += Math.ceil(Math.random() * 5);
               return newRow;
           };
           var randomLetter = function() {
               var rubric = "abcdefghijklmnopqrstuvwxyz";
               var idx = Math.floor(Math.random() * 26);
               return rubric.charAt(idx);
           };
           var dataArray = [];
           for (var i = 0; i < 10; i++) {
               var length = Math.ceil(Math.random() * 15);
               var buffer = "ID: ";
               for (var j = 0; j < length; j++) {
                   buffer += randomLetter();
               }
               dataArray.push(createDataRow({
                   name : buffer
               }));
           }
           selector.setData(dataArray);
           self.add(selector);
       
           selector.addEventListener('click', function(e){
               if (e.row.highlightState == 'none') {
                   e.row.backgroundGradient = selectedGradient;
                   e.row.highlightState = 'active';
               } else {
                   e.row.backgroundGradient = defaultGradient;
                   e.row.highlightState = 'none';
               }
               selector.deselectRow(e.index,{'animated':false});
           })
           return self;
       }
       
       
       var win =  FirstView();
       win.open();
       
  2. Vishal Duggal 2013-04-29

    JS workaround provided
  3. Lee Morris 2017-03-29

    Closing ticket as "Won't Fix", with reference to the above comments.

JSON Source