CODEWITHSUNDEEP
titaniumtitanium-mobile
Rob Wilkerson
Rob Wilkerson

Reputation: 41256

Titanium adding a label to a view

Okay, guys -- I have to admit that my frustration level is growing as Titanium development continues to kick my backside. Every change I make, however innocuous it may appear, seems to break something else in a completely unexpected way.

Today, I'm simply trying to add a label to a view, but it's not displaying.

// UI Factory Include
var Inova = {};
Ti.include( '_ui.js' );

var win = Ti.UI.currentWindow;
win.layout = 'vertical';

// Header
win.add( Inova.ui.createHeaderView() );

// body
var body = Ti.UI.createView({
    backgroundColor:'#00f', // Should see no blue
    backgroundImage: '/images/body.png',
    height: 350,
    layout: 'vertical',
});
var label = Ti.UI.createLabel({
    color: '#000',
    text: 'Show me the label...please?',
    textAlign: 'center',
});
body.add( label );

win.add( body );

I know I have to be missing something incredibly stupid and basic, but I think I've lost all ability to see the obvious. Help?

Upvotes: 2

Views: 8455

Answers (2)

David Kassa
David Kassa

Reputation: 754

I think you need to explicitly set the width/height in the label. You can set it to width: 'auto', height: 'auto' but it has to be set.

(Oddly enough this is not true in Andriod, from my experiences).

Upvotes: 4

Mike S.
Mike S.

Reputation: 2828

Whenever I get flummoxed by the API, I return to the basics. Try this:

Create a new project called myTest. In the apps.js file add the following code to the bottom of the file above the last line

var win3 = Titanium.UI.createWindow({  
  title:'Tab 3',
  backgroundColor:'#fff'
});
var tab3 = Titanium.UI.createTab({  
  icon:'KS_nav_ui.png',
  title:'Tab 3',
  window:win3
});

var label3 = Titanium.UI.createLabel({
 color:'#999',
  text:'I am Window 3',
  font:{fontSize:20,fontFamily:'Helvetica Neue'},
  textAlign:'center',
  width:'auto'
});

var txtLabel = Ti.UI.createLabel({
  color: '#000',
  text: 'Show me the label...please?',
  textAlign: 'center',
  left: 100,
  top: 50
});
win3.add( txtLabel );
win3.add(label3);

Your label, txtLabel, will now appear below label3 on tab3. I tried using the code you provided, but failed to get it to work as well. So, start with a basic page that shows the label, then add the other components until you get the expected results.

Hope that helps.

Upvotes: 1

Related Questions