[ALOY-1193] Alloy: Changing Style in JS doesn't work for dynamically created views

GitHub Issue	n/a
Type	Bug
Priority	None
Status	Closed
Resolution	Invalid
Resolution Date	2014-12-02T16:57:12.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Runtime
Labels	alloy, runnable, runtime, style
Reporter	Shuo Liang
Assignee	Tim Poulsen
Created	2014-12-02T04:20:05.000+0000
Updated	2018-03-07T22:28:29.000+0000

Description

Alloy: Changing Style in JS doesn't work for dynamically created views Attached the test case to reproduce problem.

Reproduce:

1.Run the app device or simulator. (Do no click "Go to Dashboard first") 2.Click the "setNewsGothicSBOP" button to set some Alloy.Global Properties. 3.Click "Go to Dashboard", view the Label style is same. 4.Click "Change", then choose "setCordiaNew" button to re-set those Alloy.Global Properties. 5.Click "Go to Dashboard" again.

Expect Result:

All labels should change to apply new style.

Actual Result:

Only the labels defined in XML apply the new style, those views(Labels) created in JS did not apply the new style. N.B. Problem occurs in both IOS and Android devices

Attachments

File	Date	Size
TestCase.zip	2014-12-02T04:27:00.000+0000	3729

Comments

Shuo Liang 2014-12-02

Only attached controller, view and style folders.
Tim Poulsen 2014-12-02

Alloy is a preprocessor. Your TSS file is being parsed and processed at compile time, at which point Alloy.Globals.regularFont is undefined. Therefore, you get the default system font. Furthermore, you are attempting to use dynamic styling without adding autoStyle=true to the component's tag in the XML.
Shuo Liang 2014-12-03

[~skypanther], Sorry, still not follow why the label.width and font changing is applied by XML file, not JS file. Do you mean TSS file is being parsed and processed at compile time, can't change it during runtime? if yes, why XML file get applied.
Tim Poulsen 2014-12-03

If you define style selectors, but never apply them, they will be optimized out of the generated code.
Jason Kneen 2014-12-10

I agree with Tim, you're mixing methods here - both classes that have been already defined in the pre-processing to applying them in dynamic JS. If you create two classes, one with the old font and one with the new font, then apply these using $.addClass or createStyle then it works fine.
Eric Merriman 2018-03-07

Closing as invalid. If this is incorrect, please reopen.

JSON Source