I started working with Titanium at the beginning of the week, trying to build a simple application (about 5 screens). My experience with it so far has been frustrating. I was wondering if there was any alternative way to build the UI than the programmatic way by pixel positioning, something akin to what Xcode Interface Builer provides ?
I also wonder if there is any way to use layouts ? I know there is a 'vertical' and 'horizontal' property on views, but that seem far away from an actual layout system. For example, a simple view with a toolbar on top, one on the bottom, and an auto-expanding view in the middle seems impossible to do correctly with the current system (or maybe I missed something completely). Working with pixel positioning is, to put it gently, insane.
So, either I completely missed something (like a GUI builder or a powerful layout library), or I fail to understand the interest of Titanium. In the time it took me to build 1 "acceptable" view, another member of my team built the whole UI for the WHOLE application, and this with a far better look & feel. With such a difference, it seems WAY faster to build a native iPhone app and a native Android app rather than doing it in Titanium. Plus the cycle of: writing some code, compiling, checking it out in the simulator, tweaking it, re-compiling, etc, feels incredibly slow compared to using a GUI builder..
With so much hype around it, I can't believe that this is the whole story. Any comments or ideas to prove me wrong would be very much appreciated.
Julien: There is no IDE (UI Builder) currently for Ti, though I understand that is well along in development by Appcelerator, being a high priority with developers; I have heard it will feature steppable code, variable examination, breakpoints and on-device debugging.
This is probably not much help, but that's my experience with 5 months in Ti development (we have one app in the Store [CollegeSearch - free], a second one coming for a client of ours).
Thanks for your answer ! I had a long day yesterday and was maybe overreacting.
However, my original question still stands : how do you do layouts, with fixed size regions and expanding ones ?
The thing that is really killing me is positioning elements with pixels. It's kinda like building and HTML page where every element is positioned in absolute, but you don't have Firebug (imagine you're in IE), and each time you make a change, you have to compile your page, close and reopen your browser… You can do it, but it's gonna take a hell of a time.
Both iPhone and Android platforms support advanced layout techniques, so I'm just wondering if I'm just doing it wrong (which I'd love to hear), or if it's just how it is for now until something better comes along. If it's the latter, I can see myself going faster over time, but I'm sort of puzzled..
You can use interface builder and give a try to:
http://blog.frogonmobile.com/apps/xib2js/ basically it will try to convert the xml file to the titanium js interface.
Read the pdf instructions, works better with view based xib projects.
An intermediary solution would be to describe your user interface in XML:
<window name="win1" backgroundColor="#fff"> <textfield name="url" top="5" height="35" value="http://www.appcelerator.com"/> <webview name="webview1" top="50" height="300"/> <button name="button1" top="400" title="Go" width="100" height="50"/> </window>
The next thing you have to do is to require the proper module (XML User Interface, available on the Marketplace), parse the xml, and open the window:
var xmlui = require('com.civorbis.module.xmlui'); var ui = xmlui.parseFile('interface.xml'); ui.win1.open();
From my experience (I'm the author of the module and have been using it in my own projects) this approach gave me a huge boost in productivity: it allowed me to prototype my project in minutes, keeping the project organized with a clear separation between design and implementation.
Check it out:
I agree whole heartedly. An interface design IDE cannot come soon enough.
after reading all this and developing a small app on Ti is much harder in terms of Creating UI.
so finally i decided to make an MacOS App UI Designer, and put on internet for free. just drag and drop controls to designer window and it will create all Ti code for you and i think for now i will make it simple.
What you guys think?