Titanium Community Questions & Answer Archive

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

Global Styles

Wow, this discussion board is full of questions and devoid of answers. :) Here's hoping someone can help.

Is there a way to create a single label style and have its style declarations propagate to all labels in your app? I feel like I'm writing a lot of redundant code.

Here's a simple example. Let's say I have two white labels:

var labelOne = Titanium.UI.createLabel({
    color:'#FFF',
    text:'Label One',
});
var labelTwo = Titanium.UI.createLabel({
    color:'#FFF',
    text:'Label Two',
});

Is there a way to define that text color once for both labels? You can imagine if I have 20 form fields in an app with 10 style definitions each, it feels sloppy to define them all over again for each one.

Any ideas?

— asked June 23rd 2010 by Clifton Labrum
  • global
  • style
0 Comments

4 Answers

  • Accepted Answer

    You can create your own wrapper for creating the label and apply both the system style and the global style.

    Using array_merge from: http://phpjs.org/functions/array_merge:326

    var globalLabelStyle = {"color": "#0f0", "fontSize":16};

function createLabel(style) {
  // The 2nd array overrides that in the first
  style = array_merge(globalLabelStyle, style);
  return Titanium.UI.createLabel(style);
}

// Default style applied
var defaultLabel = createLabel({"text":"default"});             
var thisLabel = createLabel({"color":'#f00',"text":"overridden"});

    As Randy suggested you can store the globalLabelStyle in app properties.

    — answered July 1st 2010 by David Ashwood
    permalink
    3 Comments

    • This is an intriguing solution, but I'm getting an error: "Can't find variable: array_merge"

      Here's my code:

      var globalLabelStyle = {
   'color': '#FFF', 
   'fontSize':16,
   'fontFamily':'Helvetica',
   'fontWeight':'bold'
};

function createLabel(style) {
  // The 2nd array overrides that in the first
  style = array_merge(globalLabelStyle, style);
  return Titanium.UI.createLabel(style);
}

var myLabel = createLabel({ text:'Name', top:62 });

      So, as I understand it myLabel should be receiving all the values defined in globalLabelStyle, but I'm not even get that far with the script error error.

      Any ideas?

      — commented July 1st 2010 by Clifton Labrum

    • I realized I need to go grab the array_merge and include the function in my code. I was thinking it was a default JS function (but it's a default PHP one).

      Thanks!

      — commented July 1st 2010 by Clifton Labrum

    • Nice, I like this solution! But your code isn't quite correct. You can't style fonts in this way, because it's an object with properties.

      This should work:

      var globalLabelStyle = {
     'color': '#fff',
     'font': {
          'fontFamily': 'helvetica',
          'fontSize': 16,
      'fontWeight': 'bold'
     }
}

      — commented July 31st 2011 by Felix Weiss

  • ya this is nuts, can you create a wrapper function/class over createLabel that would basically append its passed in args with your global style args and call createLabel?

    — answered July 1st 2010 by tim vdh
    permalink
    1 Comment

    • function headingLabel(options){

    options['color'] = '#FFF';
    options['fontSize'] = 16;

    return Titanium.UI.createLabel(options);
}

var title = headingLabel({text:'woof',left:15});

myview.add(title);

      Guess you can put them all in a single file and use an the include function to pull them in to any/all windows.

      Open to better ideas..

      — commented July 1st 2010 by tim vdh

  • great idea using array_merge, thanx for sharing this information

    — answered July 1st 2010 by Christian Sigl
    permalink
    1 Comment

    • np - don't forget to close the Q. Makes it easier when browsing for outstanding issues

      — commented July 1st 2010 by David Ashwood
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.