Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Layout managers

Hi. I'm building complex form with titanium. Is titanium have some layout managers to positions all UI elements automatic without entering top/left positions manually.

I'm wondering how my form will look on different screen size.

Such thing may simplify building interfaces. I'm thinking about similar to layout managers known from different languages like java Swing.

Thanks for help.

— asked September 3rd 2010 by Marcin Muras
0 Comments

3 Answers

  • Hi Marcin,
    In Titanium you can enable relative positioning inside a view (or window) by defining its layout property either as 'vertical' or 'horizontal'. The elements you put inside the view are laid out accordingly. Besides, in many cases you should specify the height property of the container view as 'auto' for enabling it to automatically grow as you add sub-views.

    You might take a look to this example in KitchenSink http://github.com/appcelerator/KitchenSink/blob/master/KitchenSink/Resources/examples/vertical_layout_basic.js

    Cheers,

    Olivier

    — answered September 3rd 2010 by Olivier Morandi
    permalink
    0 Comments

  • Hi. Thanks for quick response!
    Ok cool. But how to build form with label on the left and text fields on the right. I guess that I should wrap my label and text field with something (??) and this wrapper should have horizontal layout.
    Is there any best practices?

    Whats more how to add more UI elements between another dynamically (for example after validation with validation messages) and layout should adapt to new fields count. Is this even possible?
    I worked heavily with web applications and maybe on mobile development such forms should works differently.

    — answered September 3rd 2010 by Marcin Muras
    permalink
    3 Comments

    • I don't have the time right now to point you to some real code example, however the basic idea is to have a container view with vertical layout, then children views (representing rows) with horizontal layout. Inside those you put your labels and text views.

      — commented September 3rd 2010 by Olivier Morandi

    • Ok thats sufficient for me. It's exactly what I would like to know that views is the right solution :) thanks

      — commented September 3rd 2010 by Marcin Muras

    • Hmm no :) How can I add view between another views?

      — commented September 3rd 2010 by Marcin Muras

  • One more question. How to add views between another views (or other UI elements) for example to shows validation messages?

    — answered September 3rd 2010 by Marcin Muras
    permalink
    1 Comment

    • mmm, for validation errors/info I'd use an alert dialog (Ti.UI.createAlertDialog()). Anyway you can always show a view above the one containing your form, by attaching it to the main window

      — commented September 6th 2010 by Olivier Morandi
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.