Titanium JIRA Archive
Alloy (ALOY)

[ALOY-1335] Use Alloy's deepExtend to handle conditional on-device style inheritance

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2015-11-30T20:50:07.000+0000
Affected Version/salloy 1.7.28
Fix Version/sRelease 5.2.0, alloy 1.7.29
ComponentsStyling
LabelsAlloy, inheritance, styles
ReporterXavier Lacot
AssigneeFeon Sua Xin Miao
Created2015-11-27T10:41:20.000+0000
Updated2016-01-20T23:18:33.000+0000

Description

Alloy selectors provide ways to overload style rules based on switches (formFactor, OS, conditional rules, etc.). Say the TSS is somehow:
...
".title-home": {
	bottom: 4,
},
".title-home[formFactor=tablet]": {
	bottom: 8
},
...
The generated code will look like:
Alloy.deepExtend(true, o, {
    bottom: 4
});
Alloy.isTablet && _.extend(o, {
    bottom: 8
});
If this works fine with most of the properties, this is particularly annoying with font or nested properties. For instance,
".title-home": {
	font: {
		fontFamily: "Delius-Regular",
		fontSize: 11
	}
},
".title-home[formFactor=tablet]": {
	font: {
		fontSize: 22
	}
},
will result in the font name being simply ignored on tablets, as _.extend() is not a deepExtend method. We're lucky, Alloy provides a deepExtend() implementation which we may want to use. I therefore propose to switch from _.extend() to Alloy's deepExtend implementation. This will allow much more efficient ways of integrating complex graphical interfaces, with style inheritances all across the app:
<Label class="fonticon icon-row-right icon-arrow-md icon-arrow-right white" />
All styles are merged deeply, and it becomes unnecessary to repeat over and over the font name. I _know_ that this change may break many tests, but I strongly believe that this behavior is the right way styles _should_ work, in the sake for development efficiency.

Comments

  1. Xavier Lacot 2015-11-27

    A pull request has been proposed in https://github.com/appcelerator/alloy/pull/744
  2. Fokke Zandbergen 2015-11-28

    Thank you [~xavier]! Didn't even know we were not deep merging this as do deep merge normal classes? Wonderful!
  3. Feon Sua Xin Miao 2015-11-30

    PR merged. To test: 1. Create an project 2. Add a label in index.xml, i.e <Label class="title-home">Hello, World</Label> 3. Add the following style to index.tss
       ".title-home": {
       	font: {
       		fontFamily: "Delius-Regular",
       		fontSize: 11
       	}
       }
       
       ".title-home[formFactor=handheld]": {
       	font: {
       		fontSize: 22,
       		fontWeight: 'bold'
       	}
       }
       
    4. Build the project for handheld devices, the label text should be in bold.
  4. Eric Wieber 2016-01-20

    Verified fixed, using: MacOS 10.11.3 (15D21) Studio 4.4.0.201511241829 Ti SDK 5.2.0.v20160114021251 Appc NPM 4.2.3-1 Appc CLI 5.2.0-232 Alloy 1.7.33 Xcode 7.2 (7C68) Node v0.12.7 Java 1.7.0_80 Now using Alloy's deepExtend() over .extend() and can now see the generated code is conditioned properly. Used the provided steps and code to verify that the fonts are being bolded.

JSON Source