problem
Currently when adding/removing position or visual properties from a proxy via the
Alloy.addClass()
or
Alloy.removeClass()
, these properties are not reset. To illustrate what I mean, consider the following styles:
".label": {
text: "I'm in the middle",
width: 150
}
".right": {
text: "I'll be on the right",
right: 0
}
If I create an XML UI component like this:
<Label class="label"/>
The label will say "I'm in the middle" and be centered. If I add the "right" class to it via
Alloy.addClass()
, as expected, it will then say "I'll be on the right" and will move to the right side of the screen. If I then use
Alloy.removeClass()
to remove the "right" class, the expectation would be that it would move back to the center and reset the text to the original. Unfortunately, only the text will be reset since it will be reapplied by the "label" class, but
right:0
will remain attached to the proxy, keeping it on the right.
We need to devise a way to automatically, and safely, reset positioning and visual properties on a proxy when removing classes.
workaround
The case given above would behave as expected if you set
right:null
in the "label" style, like this:
".label": {
text: "I'm in the middle",
width: 150,
right: null
}
".right": {
text: "I'll be on the right",
right: 0
}
PR: https://github.com/appcelerator/alloy/pull/181 test app: https://github.com/appcelerator/alloy/tree/master/test/apps/testing/ALOY-717 Functional testing should be confirmed on all supported platforms. To confirm that everything is working as expected do the following:
Run the app, it should start without error
Read the first class name in the list presented on the screen.
Click the "change classes" button
The first class will be removed and the Label will reflect that in its text and properties. For example, the first click will remove the "transform" class, which should make the text display flat instead of rotated 45 degrees.
Repeat steps 2-4 until you cycle through all properties and end up back to the original state
Executed the app https://github.com/appcelerator/alloy/tree/master/test/apps/testing/ALOY-717 on Linux OS. Steps to reproduce: 1. Run the app, it should start without error 2. Read the first class name in the list presented on the screen. 3. Click the "change classes" button 4. The first class will be removed and the Label will reflect that in its text and properties. For example, the first click will remove the "transform" class, which should make the text display flat instead of rotated 45 degrees. 5. Repeat steps 2-4 until you cycle through all properties and end up back to the original state Actual: After cycling through all properties original state is not reached.Screen shots are attached. Issue occurs on android 2.3.6 devices. Using the Test Environment as Device: Google nexus 3, android v4.0.4 Device: Samasung Galaxy Note, android v2.3.6 OS: Ubuntu 10.04.4 LTS SDK: 3.1.3.v20130822140128, 3.1.2 GA Appcelerator Studio: 3.1.3.201308201707 Alloy: 1.2.1-cr2 CLI version : 3.1.2
[~pmishra] the issue you cite on android is a direct result of this linked ticket: TIMOB-14568 The functionality from Alloy's perspective is executing as expected. The app will work as expected when all linked tickets are resolved, and this particular issue will be resolved when the aforementioned ticket is resolved.