Titanium app for explaining layout mechanisms
During a recent app project, I felt constantly hampered by not having a strong enough ninjutsu understanding of laying out things in a Titanium app. How does horizontal and vertical layout actually work? What's the difference between a View, a ScrollView and a ScrollableView? When having too much content to show on screen, do I want the parent or child to scroll? What happens when I have a scrolling child in a scrolling parent?
I constantly had to pause my work to peruse the Titanium docs/kitchensink/sourcecode, or (more often) do some experimenting on the side, regarding stuff that I suspected I really should have nailed down. It felt like doing maths without having memorized the multiplication tables!
The TiView app
Eventually the added-up frustration got too great, so I set aside some time for grokking and getting comfortable with the API. This resulted in a small Titanium application we call TiView. It has a number of demos, showing on screen what various layout properties will actually result in. Most of it probably already obvious to most of you out there, but I felt it helped me to "say it out loud" in this way.
As stated the app is very simple. It has a number of demos, ordered into categories. The screenshot below shows the current content, I hope to add some more to it before I move on too far:
The source code is available in the Git repo here. Have a snoop and see if might be of any help. Or even better, add more demos of your own! It's just 250 lines in a single file, and all the demos are just object literals sent into a constructor function, so getting your own ideas in there shouldn't require that strong a shoe-horn:
Android VS iPhone
When we ran the app on an Android, it turned out that there where even more difference in behaviour between the platforms that we had originally thought! Therefore we gave the demos platform-specific descriptions.
This process was hugely informative for us - not only did we gain a better understanding of the layout API:s, but also of the (many) differences between the platforms! Having a good map of these differences will make it much easier to write code that won't behave differently on the other platform.
So we encourage you to try out TiView, and hope it will be of use!
4 comments
But you're absolutely right, thanx for sharing! Test comment in git repo updated accordingly.
Appcelerator seem pretty confident they ironed out a lot of the variation between platforms with their 1.8.x releases - I'd be interested to hear whether you've seen much improvement with layout?
