Styling the User Interface

Exclusive offer: get 50% off this eBook here
Sencha Touch 2 Mobile JavaScript Framework

Sencha Touch 2 Mobile JavaScript Framework — Save 50%

Get started with Sencha Touch and build awesome, native-quality mobile web applications with this book and ebook

$29.99    $15.00
by Bryan P. Johnson John Earl Clark | November 2013 | Open Source

Now that we have an understanding of how an application is put together, we are going to take a look at some of the different visual elements you can use to customize your application. In this article by John Earl Clark and Bryan P. Johnson, the authors of Sencha Touch 2 Mobile JavaScript Framework, we will:

  • Take a closer look at toolbars and buttons, using layouts, and additional styles and icons to boost the visual appeal of the user interface
  • Expand on our previous work with icons; this includes using the Pictos icon font to display new icons
  • Talk about the considerations and shortcuts for working with different devices and screen sizes
  • Explore the incredibly powerful Sencha theme engine using Sass and Compass to create complex visual skins using simple CSS-style commands

(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/

Sencha Touch 2 Mobile JavaScript Framework Get started with Sencha Touch and build awesome, native-quality mobile web applications with this book and ebook
Published: November 2013
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Sencha Touch themes

Sometimes you want to alter the looks of more than just a single panel or button. Themes in Sencha Touch are a powerful way to quickly change the overall look and feel of your application. We will cover the theming process a bit later, but we do need to lay a bit of groundwork before we can get started. There is a lot of conceptual information to cover, but the flexibility you gain will be well worth the effort.

The first thing we need to cover is a basic overview of the tools used by Sencha Touch that make theming your application possible: Sass and Compass.

If you are already familiar with Sass and Compass, you will be more comfortable installing first and then covering the concepts.

Introducing Sass and Compass

Syntactically Awesome Stylesheets ( Sass ) is used to extend standard CSS to allow variables, nesting, mixins, built-in functions, and selector inheritance. This means that all of your regular CSS declarations will work just fine, but you also get some extra goodies.

Variables in Sass

Variables allow you to define specific values and then use them throughout the stylesheet. The variable names are arbitrary and start with $. For example, we can use Sass to define the following:

$blue: #4D74C1; $red: #800000; $baseMargin: 10px; $basePadding: 5px;

We can then use the following variables as part of our standard CSS declarations in the Sass file:

.box1 { border: 1px solid $blue; padding: $basePadding; margin: $baseMargin; }

We can also use basic math functions as follows:

.box2 { border: 1px solid $blue; padding: $basePadding * 2; margin: $baseMargin / 2; }

This creates a box with twice the padding and half the margin of the first box. This is great for creating flexible, scalable layouts. By changing your base values, you can quickly scale your application to deal with multiple devices that have multiple resolutions and screen sizes.

Additionally, when you decide you want to change the shade of blue you are using, you only have to change it in one place. Sass also has a number of built-in functions for adjusting colors, such as:

  • darken: This makes the color darker by percentage
  • lighten: This makes the color lighter by percentage
  • complement: This returns the complementary color
  • invert: This returns the inverted color
  • saturate: This saturates the color by a numerical value
  • desaturate: This desaturates the color by a numerical amount

These functions allow you to perform operations, such as:

.pullQuote { border: 1px solid blue; color: darken($blue, 15%); }

There are also functions for numbers, lists, strings, and basic if-then statements. These functions help make your stylesheets as flexible as your programming code.

Sass functions

The full list of Sass functions can be found at http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html.

Mixins in Sass

Mixins are a variation of the standard Sass variables. Avoid simply declaring a single one-to-one variable such as the following:

$margin: 10px;

Instead, you can use a mixin to declare an entire CSS class as a variable:

@mixin baseDiv { border: 1px solid #f00; color: #333; width: 200px; }

You can then take that mixin and use it in the Sass file:

#specificDiv { padding: 10px; margin: 10px; float: right; @include baseDiv; }

This gives you all of the attributes of the baseDiv mixin component plus the specific styles you declared in the #specificDiv class.

You can also set your mixin to use arguments to make it even more flexible. Let's look at an alternative version of what we had seen previously:

@mixin baseDiv($width, $margin, $float) { border: 1px solid #f00; color: #333; width: $width; margin: $margin; float: $float; }

This means we can set values for width, margin, and float as part of our Sass code as follows:

#divLeftSmall { @include baseDiv(100px, 10px, left); } #divLeftBig{ @include baseDiv(300px, 10px, left); } #divRightBig { @include baseDiv(300px, 10px, right); } #divRightAlert { @include baseDiv(100px, 10px, right); color: #F00; font-weight: bold; }

This gives us four div tags with slightly different properties. All of them share the same base properties as the mixin baseDiv class, but they have different values for width and float. We can also override the values for the mixin baseDiv by adding them after we include the mixin as seen in our #divRightAlert example.

Nesting in Sass

Sass also allows nesting of CSS declarations. This not only lets you write styles that more closely mirror the structure of your HTML, but also makes for cleaner, more easily maintainable code.

In HTML, we often nest elements within one another to give the document a structure. A common example of this would be an unordered list that contains several list items, such as the following:

<ul> <li>Main List Item 1</li> <li>Main List Item 2</li> </ul>

Normally, to style this list via CSS, you would write rules for the ul elements separately from the rules for the li elements. The two rules might not even be near one another in your CSS files, making debugging or modifying the styles more difficult.

In Sass, we can write the following:

ul { width: 150px; border: 1px solid red; li { margin: 1px; border: 1px solid blue; } }

See how we nest the style declarations for our li element inside the style declaration for ul? Not only does nesting match the structure of the HTML document, but it also lets you know that it can be found inside the ul element when you want to update the li element.

When you compile this with Sass, the resulting CSS has separate rules for the ul and li elements:

ul { width: 150px; border: 1px solid red; } ul li { margin: 1px; border: 1px solid blue; }

If you were to view this list in your browser, you would see a list with a red border around it and blue borders around each of the individual list items.

It's also possible to reference the item one level up in the nesting using the ampersand (&) character. This is useful while adding things like hover states to nested elements, or more generally, grouping together the exceptions to your rules.

Suppose we want to change the background color when we hover over one of our li elements. We could add &:hover inside the li style declaration:

ul { width: 150px; border: 1px solid red; li { margin: 1px; border: 1px solid blue; &:hover { background-color: #B3C6FF; } } }

The &:hover gets translated into li:hover by the Sass compiler:

ul li:hover { background-color: #B3C6FF; }

The & special character doesn't have to be used at the beginning of a rule. Say your designer has the elements li, which use a bigger border when they're located in a special #sidebardiv component. You could write a separate rule after your ul/li rules or you could add the exception inside the li ruleset using the special & character:

ul { li { margin: 1px; border: 1px solid blue; &:hover { background-color: #B3C6FF; } div#sidebar& { border-width: 3px; } } }

Summary

In this article, we learnt how to style toolbars using the ui configuration option. We also talked about how Sencha Touch uses Sass and Compass to create a robust theme system. We included installation instructions for Sass and Compass and explained mixins, variables, and nesting.

More information can be found in Chapter 3 of Sencha Touch 2 Mobile JavaScript Framework.

Resources for Article:


Further resources on this subject:


Sencha Touch 2 Mobile JavaScript Framework Get started with Sencha Touch and build awesome, native-quality mobile web applications with this book and ebook
Published: November 2013
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Bryan P. Johnson

Bryan P. Johnson is a graduate of the University of Georgia. He went to work for MindSpring Enterprises in late 1995, where he met his co-author John Earl Clark. At MindSpring and later, EarthLink; Bryan served in multiple positions for over seven years, including the Director of System Administration and Director of Internal Application Development. After leaving EarthLink, he took some time off to travel before joining John to start Twelve Foot Guru.

Bryan has worked with Sencha's products since the early days of YUI-Ext and has used Sencha Touch since its first betas.

John Earl Clark

John Earl Clark holds a Master's degree in Human Computer Interaction from Georgia Tech and an undergraduate degree in Music Engineering from Georgia State University. He and his co-author, Bryan P. Johnson, worked together at MindSpring and, later, EarthLink; starting out in Technical Support and Documentation before moving into application development and, finally, the management of a small development team. After leaving EarthLink in 2002, John began working independently as a consultant and a programmer, before starting Twelve Foot Guru, LLC. with Bryan in 2005.

He has been working with Sencha Touch since its first beta releases. He has also worked with Sencha's ExtJS since its early days when it was still known as YUI-Ext. He has also previously written a book with Bryan Johnson called Sencha Touch Mobile JavaScript Framework, Packt Publishing.

When he is not buried in code, John spends his time woodworking, playing guitar, and brewing his own beer.

Books From Packt


Sencha Architect App Development
Sencha Architect App Development

Instant Sencha Touch [Instant]
Instant Sencha Touch [Instant]

Sencha Touch Mobile JavaScript Framework
Sencha Touch Mobile JavaScript Framework

Sencha Touch Cookbook, Second Edition
Sencha Touch Cookbook, Second Edition

 Sencha Touch Cookbook
Sencha Touch Cookbook

Creating Mobile Apps with Sencha Touch 2
Creating Mobile Apps with Sencha Touch 2

Sencha MVC Architecture
Sencha MVC Architecture

iOS Development using MonoTouch Cookbook
iOS Development using MonoTouch Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
z
u
W
A
5
b
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software