(For more resources related to this topic, see here.)

Styling components versus themes

Before we get into this article, it's important to have a good understanding of the difference between styling an individual component and creating a theme.

Almost every display component in Sencha Touch has the option to set its own style. For example, a panel component can use a style in this way:

{ 
 xtype: 'panel',
 style: 'border: none; font: 12px Arial black',
 html: 'Hello World'
}

The style can also be set as an object using:

{ 
 xtype: 'panel',
style : {
  'border' : 'none',
  'font' : '12px Arial black',
  'border-left': '1px solid black'
} 
html: 'Hello World'
}

You will notice that inside the style block, we have quoted both sides of the configuration setting. This is still the correct syntax for JavaScript and a very good habit to get in to for using style blocks. This is because a number of standard CSS styles use a dash as part of their name. If we do not add quotes to border-left, JavaScript will read this as border minus left and promptly collapse in a pile of errors.

We can also set a style class for a component and use an external CSS file to define the class as follows:

{ 
 xtype: 'panel',
 cls: 'myStyle',
 html: 'Hello World'
}

Your external CSS file could then control the style of the component in the following manner:

.myStyle {
 border: none;
 font: 12px Arial black;
}

This class-based control of display is considered a best practice as it separates the style logic from the display logic. This means that when you need to change a border color, it can be done in one file instead of hunting through multiple files for individual style settings.

These styling options are very useful for controlling the display of individual components. There are also certain style elements, such as border, padding, and margin, that can be set directly in the components' configuration:

{ 
 xtype: 'panel',
 bodyMargin: '10 5 5 5',
 bodyBorder: '1px solid black',
 bodyPadding: 5,
 html: 'Hello World'
}

These configurations can accept either a number to be applied to all sides or a CSS string value, such as 1px solid black or 10 5 5 5. The number should be entered without quotes but the CSS string values need to be within quotes.

These kind of small changes can be helpful in styling your application, but what if you need to do something a bit bigger? What if you want to change the color or appearance of the entire application? What if you want to create your own default style for your buttons?

This is where themes and UI styles come into play.

UI styling for toolbars and buttons

Let's do a quick review of the basic MVC application we created, Creating a Simple Application, and use it to start our exploration of styles with toolbars and buttons.

To begin, we are going to add a few things to the first panel, which has our titlebar, toolbar, and Hello World text.

Adding the toolbar

In app/views, you'll find Main.js. Go ahead and open that in your editor and takea look at the first panel in our items list:

items: [
  {
      title: 'Hello',
      iconCls: 'home',
      xtype: 'panel',
      html: 'Hello World',
      items: [
         {
            xtype: 'titlebar',
            docked: 'top',
            title: 'About TouchStart'
         }
     ]
  }...

We're going to add a second toolbar on top of the existing one. Locate the items section, and after the curly braces for our first toolbar, add the second toolbar in the following manner:

{

 xtype: 'titlebar', 
 docked: 'top',
 title: 'About TouchStart'

}, {

 docked: 'top',
 xtype: 'toolbar',
 items: [
  {text: 'My Button'}
 ]}

Don't forget to add a comma between the two toolbars.

Extra or missing commas

While working in Sencha Touch, one of the most common causes of parse errors is an extra or missing comma. When you are moving the code around, always make sure you have accounted for any stray or missing commas. Fortunately for us, the Safari Error Console will usually give us a pretty good idea about the line number to look at for these types of parse errors. A more detailed list of common errors can be found at:

http://javascript.about.com/od/reference/a/error.htm

Now when you take a look at the first tab, you should see our new toolbar with our button to the left. Since the toolbars both have the same background, they are a bit difficult to differentiate. So, we are going to change the appearance of the bottom bar using the ui configuration option:

{
 docked: 'top',
 xtype: 'toolbar',
 ui: 'light',
 items: [
  {text: 'My Button'}
 ]
}

The ui configuration is the shorthand for a particular set of styles in Sencha Touch. There are several ui styles included with Sencha Touch, and later on, we will show you how to make your own.

Styling buttons

Buttons can also use the ui configuration setting, for which they offer several different options:

• normal: This is the default button
• back: This is a button with the left side narrowed to a point
• round: This is a more drastically rounded button
• small: This is a smaller button
• action: This is a brighter version of the default button (the color varies according to the active color of the theme, which we will see later)
• forward: This is a button with the right side narrowed to a point

Buttons also have some color options built into the ui option. These color options are confirm and decline. These options are combined with the previous shape options using a hyphen; for example, confirm-small or decline-round.

Let's add some new buttons and see how this looks on our screen. Locate the items list with our button in the second toolbar:

items: [
  {text: 'My Button'}
]

Replace that old items list with the following new items list:

items: [
 {
  text: 'Back',
  ui: 'back'
 }, {
  text: 'Round',
  ui: 'round'
 }, {
  text: 'Small',
  ui: 'small'
 }, {
  text: 'Normal',
  ui: 'normal'
 }, {
  text: 'Action',
  ui: 'action'
 }, {
  text: 'Forward',
  ui: 'forward'
 }
]

This will produce a series of buttons across the top of our toolbar. As you may notice, all of our buttons are aligned to the left. You can move buttons to the right by adding a spacer xtype in front of the buttons you want pushed to the right. Try this by adding the following between our Forward and Action buttons:

{ xtype: 'spacer'},

This will make the Forward button move over to the right-hand side of the toolbar:

Since buttons can actually be used anywhere, we can add some to our title bar and use the align property to control where they appear. Modify the titlebar for our first panel and add an items section, as shown in the following code:

{
  xtype: 'titlebar',
  docked: 'top',
  title: 'About TouchStart',
  items: [
    {
      xtype: 'button',
      text: 'Left',
      align: 'left'
    },
    {
      xtype: 'button',
      text: 'Right',
      align: 'right'
    }
  ]
}

Now we should have two buttons in our title bar, one on either side of the title:

Let's also add some buttons to the panel container so we can see what the ui options confirm and decline look like.

Locate the end of the items section of our HelloPanel container and add the following after the second toolbar:

{
 xtype: 'button',
 text: 'Confirm',
 ui: 'confirm',
 width: 100
}, {
 xtype: 'button',
 text: 'Decline',
 ui: 'decline',
 width: 100
}

There are two things you may notice that differentiate our panel buttons from our toolbar buttons. The first is that we declare xtype:'button' in our panel but we don't in our toolbar. This is because the toolbar assumes it will contain buttons and xtype only has to be declared if you use something other than a button. The panel does not set a default xtype attribute, so every item in the panel must declare one.

The second difference is that we declare width for the buttons. If we don't declare width when we use a button in a panel, it will expand to the full width of the panel. On the toolbar, the button auto-sizes itself to fit the text.

You will also see that our two buttons in the panel are mashed together. You can separate them out by adding margin: 5 to each of the button configuration sections.

These simple styling options can help make your application easier to navigate and provide the user with visual clues for important or potentially destructive actions.

The tab bar

The tab bar at the bottom also understands the ui configuration option. In this case, the available options are light and dark. The tab bar also changes the icon appearance based on the ui option; a light toolbar will have dark icons and a dark toolbar will have light icons.

These icons are actually part of a special font called Pictos. Sencha Touch started using the Pictos font in Version 2.2 instead of images icons because of compatibility issues on some mobile devices.

The icon mask from previous versions of Sencha Touch is available but has been discontinued as of Version 2.2.

You can see some of the icons available in the documentation for the Ext.Button component:

http://docs.sencha.com/touch/2.2.0/#!/api/Ext.Button

If you're curious about the Pictos font, you can learn more about it at http://pictos.cc/