<

Mobile Apps in Titanium Studio Compared to CSS

Published on
7,255 Points
1,255 Views
Last Modified:
Approved
Brandon Lyon
Brandon has over 12 years of professional experience developing software. He's also a designer & photographer with a degree in architecture.
This article is about Titanium Studio 3.4 circa iOS8 and Android 4.4, though it is also relevant to other versions. This article also assumes you're familiar with relevant technologies and what a "box model" is.

I'm writing this as a person who has been developing websites for 15 years. I'm branching out a bit and learning mobile app development using Appcelerator's free Titanium Studio. It's cross-platform and is easy to setup and use. Unfortunately there are huge differences between CSS and apps built using TSS, Titanium's stylesheets.

Some differences between CSS and TSS are:
 
  • In an app one uses different units of measurement
  • TSS files don't cascade
  • TSS files lack many of the features which CSS has such as dotted borders, box-shadows, text-transform, and inline-block.
  • TSS syntax works more like JSON
  • TSS and CSS have different box models
 
Most of that is easy to get used to. It can be difficult to understand the differences in box-models but I plan to explain that a bit later. Before we continue there is one subtle but important difference between CSS and TSS. When you declare a class or ID twice in a stylesheet (because this operates similarly to JSON) the second declaration will completely override the first declaration. Unlike CSS it won't just combine attributes. The second use will override all contents of the selector. This concept is slightly abstract but here is an example:
 
'#helloWorld':
{
    backgroundColor:'red',
    borderColor: 'black',
    borderWidth: '2',
    color: 'green',
    top:'20'
}
'#helloWorld':
{
    borderColor:'blue',
    width:'50%'
}

Open in new window


If both parts of that example appeared in the same CSS file then the result would have a blue background, a black border, green text, a top position of 20, and a width of 50%.

If both parts of that example appeared in the same TSS file then the result would only be blue with a width of 50%. There would be no border, no text color, and top position.

With that out of the way let's move on to the box model. In Titanium there is no concept of padding. Titanium also lacks margins but their position attributes sometimes operate similarly to margins. There is no floating but again you can achieve a similar effect. Most importantly there is zero concept of inline-block (which makes it hard to align multiple things to center with an auto width).

Let's start with the lack of padding. This can be remedied by adding an extra wrapper and using position attributes.
 

 

CSS Example 1

article-ex1.pngIn this example we applied a padding to the red box. Note this doesn’t change the outer box but instead it constricts the working area while preserving the box and it’s background color. This is normally the way one would create CSS.
 
#wrapper
{
   /* Does not exist */
}
#redBox
{
   background: blue,
   padding: 10px;
}

Open in new window

 



CSS Example 2

article-ex2.pngFor this example instead of using padding we applied a margin to the red box. We also gave the blue background color to a wrapper. This is not the way one would normally create CSS though in theory one could.

Note that in CSS if the red box is short enough it may be more than 10px away from the bottom of the blue box.
 
#wrapper
{
   background: blue;
}
#redBox
{
   margin: 10px;
}

Open in new window


 



TSS

article-ex3.pngIn this example we added a wrapper to the markup. We then positioned the red box relative to it’s parent. We also gave the background color to the parent wrapper instead of the red box.

Note that in TSS if the red box is short enough it might be expanded so it is exactly 10px away from the bottom of the blue box.
 
'#wrapper':
{
   backgroundColor: 'blue',
   bottom: '10dp',
   left: '10dp',
   right: '10dp',
   top: '10dp'
}
'#redBox':
{
   // Nothing
}

Open in new window

 


 
To conclude we've gone over differences between app development, TSS syntax and parsing, and the difference in box models. I'm still new to app development but this was information I really could have used sooner and I had a hard time finding any information about it.
 
0
Comment
0 Comments

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Join & Write a Comment

This video is in connection to the article "The case of a missing mobile phone (https://www.experts-exchange.com/articles/28474/The-Case-of-a-Missing-Mobile-Phone.html)". It will help one to understand clearly the steps to track a lost android phone.
In this video I will demonstrate how to set up Nine, which I now consider the best alternative email app to Touchdown.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month