{
"id": "131417",
"key": "ALOY-1071",
"fields": {
"issuetype": {
"id": "2",
"description": "A new feature of the product, which has yet to be developed.",
"name": "New Feature",
"subtask": false
},
"project": {
"id": "11113",
"key": "ALOY",
"name": "Alloy",
"projectCategory": {
"id": "10400",
"description": "Tools for developing applications",
"name": "Tooling"
}
},
"fixVersions": [],
"resolution": {
"id": "7",
"description": "",
"name": "Invalid"
},
"resolutiondate": "2014-07-23T16:49:28.000+0000",
"created": "2014-06-09T09:28:54.000+0000",
"priority": {
"name": "Medium",
"id": "3"
},
"labels": [
"dynamic",
"style",
"touch"
],
"versions": [],
"issuelinks": [],
"assignee": null,
"updated": "2018-03-07T22:28:29.000+0000",
"status": {
"description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.",
"name": "Closed",
"id": "6",
"statusCategory": {
"id": 3,
"key": "done",
"colorName": "green",
"name": "Done"
}
},
"components": [
{
"id": "13603",
"name": "Styling",
"description": "TSS, dynamic styling, styling API"
}
],
"description": "I am playing with touch start/end/cancel events to change view colors dynamically, and it seems like I can't override the background color of a view if a background color for that view has been previously defined without the aid of a _style class_.\r\n\r\nTake a look at this simple example:\r\n\r\n{code:title=index.xml}\r\n\r\n \r\n \r\n \r\n\r\n{code}\r\n\r\n{code:title=index.js}\r\n$.index.open();\r\n\r\n\r\nfunction change_view_background(e) {\r\n console.log('change view background');\r\n $.addClass($.view, 'clicked');\r\n}\r\n\r\nfunction reset_view_background(e) {\r\n console.log('reset view background');\r\n $.removeClass($.view, 'clicked');\r\n}\r\n{code}\r\n\r\n{code:title=index.tss}\r\n\"#view\": {\r\n backgroundColor: \"blue\",\r\n}\r\n\r\n\".view\": {\r\n}\r\n\r\n\".clicked\": {\r\n backgroundColor: \"green\",\r\n}\r\n{code}\r\n\r\nWhen I click the view, instead of watching its background color change from blue to green, nothing happens.\r\n\r\nIf on the other hand I move the backgroundColor definition out of the {{#view}} block and into the {{.view}} one:\r\n\r\n{code:title=index.tss}\r\n\"#view\": {\r\n}\r\n\r\n\".view\": {\r\n backgroundColor: \"blue\",\r\n}\r\n\r\n\".clicked\": {\r\n backgroundColor: \"green\",\r\n}\r\n{code}\r\n\r\nI can see the background color change from blue to green.\r\n\r\nWhy is that happening? And why after the {{$.removeClass}} the background color happens to be transparent and not blue? Am I doing something wrong?",
"attachment": [],
"flagged": false,
"summary": "Can't dynamically override backgroundColor of a view",
"creator": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"subtasks": [],
"reporter": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"environment": "- os: Ubuntu 14.04\r\n- ti-sdk: 3.2.3.GA",
"comment": {
"comments": [
{
"id": "308201",
"author": {
"name": "sliang",
"key": "sliang",
"displayName": "Shuo Liang",
"active": true,
"timeZone": "Asia/Harbin"
},
"body": "Hi, \r\n\r\nFirst of all, in css style, The \"#\" is stand for id, \".\" is stand for class. You added \".click\" class to class \".view\" in index.js, but in tss file, the original colour is defined by id \"#view\", not class \".view\". Even id and class define the same place in you code, but class is not unique, so in css definition of id and class could cause different behaviour.\r\n\r\n\r\nSecondly, after \"$.removeClass\" in you code, remove \".click\"class, but it doesn't means it will go back to \".view\" class. then there will be no any class defined for the view. That is why he background colour happens to be transparent(default black). In your case, you might add on line {code}$.addClass($.view, 'view');{code} after {code}$.removeClass($.view, 'clicked');{code}\r\n\r\nHope it will help you.\r\n\r\nRegards,\r\nShuo",
"updateAuthor": {
"name": "sliang",
"key": "sliang",
"displayName": "Shuo Liang",
"active": true,
"timeZone": "Asia/Harbin"
},
"created": "2014-06-10T04:48:54.000+0000",
"updated": "2014-06-10T04:48:54.000+0000"
},
{
"id": "308245",
"author": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"body": "{quote}\r\nFirst of all, in css style, The \"#\" is stand for id, \".\" is stand for class. You added \".click\" class to class \".view\" in index.js, but in tss file, the original colour is defined by id \"#view\", not class \".view\".\r\n{quote}\r\n\r\nYour are right about #/.-notation, but with {{$.addClass($.view, 'clicked')}} I am just trying to change the view having id 'view' -- the one with the 'blue' background.\r\n\r\n{quote}\r\nEven id and class define the same place in you code, but class is not unique, so in css definition of id and class could cause different behaviour.\r\n{quote}\r\n\r\nAs far as I know, it shouldn't be a problem to have an object and a style class with the same name, but maybe am a little bit optimistic here..\r\n\r\n{quote}\r\nSecondly, after \"$.removeClass\" in you code, remove \".click\"class, but it doesn't means it will go back to \".view\" class. then there will be no any class defined for the view. That is why he background colour happens to be transparent(default black)\r\n{quote}\r\n\r\nWell, I haven't double-checked that but the view should be tracking all the style classes still holding after the {{$.removeClass}}, so it shouldn't be difficult for the UI engine to re-evaluate them -- rather than requiring the developer to manually re-apply all of them.\r\n\r\n\r\nCiao,\r\n\r\nMatteo",
"updateAuthor": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"created": "2014-06-10T14:28:21.000+0000",
"updated": "2014-06-10T14:28:21.000+0000"
},
{
"id": "308425",
"author": {
"name": "sliang",
"key": "sliang",
"displayName": "Shuo Liang",
"active": true,
"timeZone": "Asia/Harbin"
},
"body": "Hi,\r\n\r\nThere is some miss understanding in last comment, here is the correct comment.\r\n\r\n1.When you use id and class together, that is not a problem. But you have to be careful with them. The class is a global property, and id is a local property. So during the page or window loading up, class defined style will display first, then the id's. Think it as id has higher priority. So no matter how you add class with new background colour, once you define colour for #view (id ref), the page will always display the id's colour style. That is why colour didn't change at first place.\r\n\r\n2.For your case, you should enable the autoStyle, that is, set the autoStyle attribute of the component to true in the XML markup.\r\nLike\r\n{code}\r\n\r\n{code}\r\nRef: http://docs.appcelerator.com/platform/latest/#!/guide/Dynamic_Styles\r\n\r\n\r\nRegards\r\nShuo",
"updateAuthor": {
"name": "sliang",
"key": "sliang",
"displayName": "Shuo Liang",
"active": true,
"timeZone": "Asia/Harbin"
},
"created": "2014-06-11T06:27:00.000+0000",
"updated": "2014-06-12T10:30:49.000+0000"
},
{
"id": "310794",
"author": {
"name": "mpmiranda",
"key": "mpmiranda",
"displayName": "Mauro Parra-Miranda",
"active": true,
"timeZone": "America/Mexico_City"
},
"body": "Hello,\r\nwhy add a class in the controller? You can just do $view.backgroundColor = 'change'; \r\n\r\nBest,\r\n\r\nMauro ",
"updateAuthor": {
"name": "mpmiranda",
"key": "mpmiranda",
"displayName": "Mauro Parra-Miranda",
"active": true,
"timeZone": "America/Mexico_City"
},
"created": "2014-06-24T23:11:15.000+0000",
"updated": "2014-06-24T23:11:15.000+0000"
},
{
"id": "311493",
"author": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"body": "@Shuo: thank you so much for the comment. I was not aware of the id/style-class precendence thing, and neither of the View's autoStyle property (I have just tried i and worked like a charm). I think the ticket could be closed now.\r\n\r\n@Mauro: in general, changing the view is definitely more flexible than changing all the properties related to the effect you wanted to achieve. In this case I could have changed the backgroundColor property only, but for the completeness of the example I went for adding/removing style classes.\r\n\r\nCiao,\r\n\r\nMatteo ",
"updateAuthor": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"created": "2014-06-28T15:59:54.000+0000",
"updated": "2014-06-28T15:59:54.000+0000"
},
{
"id": "311506",
"author": {
"name": "mpmiranda",
"key": "mpmiranda",
"displayName": "Mauro Parra-Miranda",
"active": true,
"timeZone": "America/Mexico_City"
},
"body": "Hello [~landimatte]!\r\n\r\nHere we can go in two different directions, and let me know what do you think:\r\n\r\n- [NotABug] Once you compiled your Alloy code, it will be compiled into Classic code, and then native code. Therefore, changing dynamically the class won't work (you can't dynamically reload the new tss nor reload already processed classic code).\r\n- [New Feature] You want this to happen. But, in order to do so, you will need a kind of living system catching those changes to a class will be reflected at running time. \r\n\r\nLet me know how you want to process this. \r\n\r\nThanks! ",
"updateAuthor": {
"name": "mpmiranda",
"key": "mpmiranda",
"displayName": "Mauro Parra-Miranda",
"active": true,
"timeZone": "America/Mexico_City"
},
"created": "2014-06-29T02:08:03.000+0000",
"updated": "2014-06-29T02:08:03.000+0000"
},
{
"id": "311513",
"author": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"body": "Hello Mauro,\r\n\r\nIt's true, am not able to dynamically override the style of a view with a class-style because of the id/class precendence story, but a very simple workaround is just to use classes as much as possible and then use {{$.addClass}} {{$.removeClass}} and {{autoStyle=\"true\"}}.\r\n\r\nThe question is: can the code be changed so that style-classes take precedence over every other style definition (i.e. styles defined by {{#id}}). I don't have a strong opinion on it, so am open to comments.\r\n\r\n\r\nCiao,\r\n\r\nMatteo",
"updateAuthor": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"created": "2014-06-29T08:44:29.000+0000",
"updated": "2014-06-29T08:44:29.000+0000"
},
{
"id": "312431",
"author": {
"name": "mpmiranda",
"key": "mpmiranda",
"displayName": "Mauro Parra-Miranda",
"active": true,
"timeZone": "America/Mexico_City"
},
"body": "Original reporter: [~landimatte]",
"updateAuthor": {
"name": "mpmiranda",
"key": "mpmiranda",
"displayName": "Mauro Parra-Miranda",
"active": true,
"timeZone": "America/Mexico_City"
},
"created": "2014-07-04T21:44:20.000+0000",
"updated": "2014-07-04T21:44:20.000+0000"
},
{
"id": "315483",
"author": {
"name": "skypanther",
"key": "skypanther",
"displayName": "Tim Poulsen",
"active": true,
"timeZone": "America/New_York"
},
"body": "I'm going to close this as invalid because the behavior is documented and because there are ways to accomplish your goals. From the docs page linked to in the comments: \"Properties defined inline in the markup and TSS id styles still take precedence over class styles.\"\r\n\r\nBecause the style rules are evaluated at build time, it's not a simple change to implement the functionality you describe. We will likely be reworking the styling features in upcoming Alloy releases (to correspond with Ti.Next). Those changes will hopefully lead to a more dynamic system that meets your expectations better.",
"updateAuthor": {
"name": "skypanther",
"key": "skypanther",
"displayName": "Tim Poulsen",
"active": true,
"timeZone": "America/New_York"
},
"created": "2014-07-23T16:49:28.000+0000",
"updated": "2014-07-23T16:49:28.000+0000"
},
{
"id": "315522",
"author": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"body": "Sounds good to me. Thank you for the support.",
"updateAuthor": {
"name": "landimatte",
"key": "landimatte",
"displayName": "Matteo Landi",
"active": true,
"timeZone": "Europe/Berlin"
},
"created": "2014-07-23T19:30:54.000+0000",
"updated": "2014-07-23T19:30:54.000+0000"
},
{
"id": "435361",
"author": {
"name": "emerriman",
"key": "emerriman",
"displayName": "Eric Merriman ",
"active": true,
"timeZone": "America/Los_Angeles"
},
"body": "Closing as invalid. If this is incorrect, please reopen.",
"updateAuthor": {
"name": "emerriman",
"key": "emerriman",
"displayName": "Eric Merriman ",
"active": true,
"timeZone": "America/Los_Angeles"
},
"created": "2018-03-07T22:28:29.000+0000",
"updated": "2018-03-07T22:28:29.000+0000"
}
],
"maxResults": 11,
"total": 11,
"startAt": 0
}
}
}