Appcelerator css-like calc method - user-interface

Question

I am using the Alloy framework to build a mobile application in Appcelerator Studio. To build the user interface i am using the *.tss files (sort of css) and using constants like Titanium.UI.SIZE or Titanium.UI.FILL for the width and height properties of the UI components.
I was wondering if there is a sort of css CALC method available in the Alloy framework, such that is possible to do size calculations like this:
width: calc(Titanium.UI.FILL - 20px)
height: calc(80% - 30px)
Thanks in advance!

Answer 1

If you are setting the width or height inside the .tss file, you have to set the value to an property of the Alloy global object (Alloy.CFG.yourVar or Alloy.Globals.yourVar).
alloy.js
Alloy.CFG.width = Ti.Platform.displayCaps.platformWidth - 20;
view.tss
"#myView":{
width:Alloy.CFG.width
}
If you set the value in your controller, you don't need to use like a global object property.
index.js
$.myView.width = Ti.Platform.displayCaps.platformWidth - 20;
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Platform.DisplayCaps-property-platformHeight

Answer 2

TSS (Titanium Style Sheet) is not CSS. It purely declarative json file - but you can use some Titanium code inside it like Ti.UI.FILL or Ti.UI.SIZE or for translation you could use the L() function.
As a solution for having calculated values, I see 3 possible ways:
Pre-calculating what you need as part of an app bootstrap inside alloy.js, and storing it in alloy as part of a "namespace" - do note that it will reside on the "global scope" - but I don't think that's what's going to bring your app down. So you would have something like this:
Alloy.js:
Alloy.UI.MyScreen.MyComponent.height = DO YOU CALCULATION HERE;
ControllerStyle.tss:
"#myComponent" : {
height: Alloy.UI.MyScreen.MyComponent.height
}
Make sure you build your namespace right and use closures to not pollute the global scope.
For more information on alloy.js see here: http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Controllers-section-34636384_AlloyControllers-InitializerFile(alloy.js)
A second solution would be to use Dynamic Styles. See here: http://docs.appcelerator.com/platform/latest/#!/guide/Dynamic_Styles
Third solution would be to apply the properties you need in your controller code - this one is my least favorite because it forces you to "cross the bridge" between js and native when your controller loads and slows you down.

Answer 3

One thing you can do is pre-calculate it, another is set the calculated width not in tss but in the controller file.
What I tend to do, when I need to calculate something like this is pre-calculate this and use it throughout the app if there is more than 1 purpose of using it. Do this for example in alloy.js
Alloy.Globals.marginContentWidth = 300;
Or you can use any contant from the Ti Platform to calculate something. Now in tss you can use this
"#myUI": {
width: Alloy.Globals.marginContentWidth
}
This will work for you.
Another thing is not thinking about mobile UI like you do with a website. On mobile you need to think more flexible. One of the reasons you probably want width - 20px is because you want margin of 10px on both sides.
First off... don't use px. In mobile development you need points, or dp, but this is default so you can just use 20. To handle it more flexible, do this:
width: Ti.UI.FILL,
right: 10,
left: 10
This should fix your problem nicely

Answer 4

First of all .tss is not a sort of .css :), rather it is sort of json file.
Now what you want to do, you will need to learn Alloy & Titanium a bit deeper as you can do every sort of calculations in Titanium but there are other ways and perhaps since you are comparing it to .css, you are not getting it right.
So, I suggest you to first learn what Alloy & Titanium is and how they work and how they support each other.
You can always head on to the Titanium Docs which are absolutely clear to get you started on a right path. First give them a try, take time to learn things and we are always here to support you. :)
Good luck!