Problem
Make a TableView with several TableViewRows (XML). Assign a className to them (all the same). Each TableViewRow holds at least a Label tag. As you try to change the color of the Label, it does not seem to work every time (mostly not at all):
$.name_label.color = '#f00';
Label stays the same color. Removing the className property did not solve the issue. Of course this isnt the solution when you happen to have many rows and need the benefits of adding a className.
The issue only applies to Android, it might have something to do with refreshing the view versus the actual object-data. It does not bug on iOS.
Testcase
/
Update: deleting the *className* did not solve the issue. I've tried reproducing this again by setting the backgroundColor of a label. What happened, was something odd: as soon as I changed a background label of a certain row (by a previously added clickhandler), random other rows would also get updated. Especially when I scroll to top/bottom randomly in the TableView, random rows seem to start updating too with their backgroundColor set.
Hi Bert, We tested the issue using the sample below. We are unable to reproduce it. If you still get the same behavior, please post more details with some sample code. *Test Environments:* CLI Version :4.1.3 Titanium SDK Version: 4.1.1.GA, Emulator: Motorola Moto X - 4.4.4 - API 19 - 720x1280 Appc Studio: Appcelerator Studio, build: 4.1.1.201507141126 Alloy: 1.7.6 Mac OS X,Version = 10.10.1. *Test Steps:* 1) Create a alloy project 2) Copy sample code to app directory 3) Run project *Test Code*: *index.js*
*index.xml*<Alloy> <Window class="container"> <TableView id="table"> <TableViewSection id="sectionFruit" headerTitle="Fruit"> <TableViewRow id="name_label" title="Apple" /> <TableViewRow class="name_label" title="Bananas"/> <TableViewRow class="name_label" title="Apple"/> <TableViewRow class="name_label" title="Bananas"/> <TableViewRow class="name_label" title="Apple"/> <TableViewRow class="name_label" title="Bananas"/> <TableViewRow class="name_label" title="Apple"/> <TableViewRow class="name_label" title="Bananas"/> <TableViewRow class="name_label" title="Apple"/> <TableViewRow class="name_label" title="Bananas"/> <TableViewRow class="name_label" title="Apple"/> <TableViewRow class="name_label" title="Bananas"/> <TableViewRow class="name_label" title="Apple"/> <TableViewRow class="name_label" title="Bananas"/> </TableViewSection> </TableView> </Window> </Alloy>".container": { backgroundColor:"white" } "Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000" } ".name_label": { color:'#f00', backgroundColor:'orange' } "#label": { font: { fontSize: 12 } } "#table": { top:30 }I've attached 2 images to show the exact situation (bug still persists, app is currently build using Ti 5.0.1.GA + Alloy 1.7.10, running on Android 5.1.1). The screenshot show one after selecting some tableviewrows (note that all selected rows should have blue background + white text), and one after scrolling down and up again right after the first screenshot (it seems to refresh something which fixes the style) [https://drive.google.com/a/uitzendbureau.nl/file/d/0B7q5AdO6zfyreEFaRUt4dzVEQ2kxWVVZSmZMbVhVUVJhRjBF/view] [https://drive.google.com/a/uitzendbureau.nl/file/d/0B7q5AdO6zfyrcUt1X0liZ1YyWWctRlNRMHJsRF9nV2EtamRz/view] The bug is actually on the live app at the moment: https://play.google.com/store/apps/details?id=yy.uitzendbureaunl You can find the view from the screenshots above using the Filter icon on the results page. This Filter TableView currently consists of about 30 rows. I cant post a lot of source code since it cant stand on its own (its coupled with quite some functions), so I hope the following suffices:
// Event listener while clicking the tableviewrow. Every tableviewrow has its own controller. $.getView().addEventListener('click', function() { // test if the current row is selected. If so, deselect, if not, select. if(this.backgroundColor === Alloy.Globals.palette.lightestBlue) { // set as inactive/deselected for this controller. See function below. exports.inactive(); // Filter module which keeps track of the state parent.Filter._clickedAmount--; } else { // The following function checks if the row has the property 'singlepick', which requires it to be the only selected row (skipped in this particular bug) exports.reflectSinglepick(); // active() comparable with inactive() exports.active(); parent.Filter._clickedAmount++; } parent.Filter.update(); }); /** * Set inactive. */ exports.inactive = function() { // i tried a defer to fix the issue, but it didnt make a difference _.defer(function() { $.name.color = Alloy.Globals.palette.black; $.getView().backgroundColor = Alloy.Globals.palette.white; isActive = false; }); };Hello , We have requested an access permission to view the image on google drive. Please accept the request. Thanks.
my bad, added global permissons. Images should now be viewable
Hello, Can you please build the project using latest builds? And let us know if the error appears again. We need proper test case which reproduce your issue. Thanks
Device: Samsung Galaxy S III (GT-I9300) Android: 4.3 Ti SDK: 5.1.1.GA Node: 0.10.37 Problem still persists as described in previous comments. It tends to happen sooner on slower devices like the Sony Xperia Arc S (LT18i, Android 4.0.x); tablerows dont seem to update safely when consecutively calling tablerow updates (irregular)
Hello [~uzbbert], According to your requirement you want to change your label color in controller through class parameter assigned to the label. You can not do that through controller. Means you can't call class parameter in controller like "$.name_label.color = '#f00';" this code is valid if "name_label" is an id parameter not a class parameter. Allow does not support this. Now you can previously define the color in tss through class parameter. Hope this clear you issues. Thanks.
Hey Sharif, I guess you mixed up some of the code examples. You cant reference classes through
$indeed. Also if i tried so, i'd likely get a runtime error since im referencing an object which does not exist on$. The bug report also states buggy behaviour instead of no-behaviourHello [~uzbbert], Please provide a clear and full code example which demonstrate your issue. I tried calling a class with $. in controller, which by definition should not work and as it does, but it doesn't throw any error.
i'll come back to this tomorrow hopefully and try to provide a contained test sample. I'm not sure why you keep implying im calling a class from a controller though
im abandoning this bugreport. I cannot take the time to create a testcase because it'll literally take me hours on the Android platform. I tried reproducing this as simple as possible but the issue doesnt occur in a single window with a single tableview. The bug I experience is living inside an app which consists of tableviewrows which each have separate controllers.