Welcome!

ColdFusion Authors: Yakov Fain, Maureen O'Gara, Nancy Y. Nee, Tad Anderson, Daniel Kaar

Related Topics: Adobe Flex, ColdFusion

Adobe Flex: Article

Adobe Flex Interface Customization - Themes, Styles, Skins

The basics of themes, styles, and skins

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.

 The designer approach would be to modify the graphical aspects of a theme, a laborious process of editing many items in various Flash source files ("FLAs") using the Flash Professional IDE.

The second approach let advanced Flex programmers create extremely customized interfaces; however this approach made it difficult for designers and developers to hand off the graphical "assets" of a project.

In Flex 2 things got a whole lot easier. In this article we'll look at the basics of changing the look-and-feel of your Flex application by introducing Flex Themes, Styles, and Skins.

Terminology
Before we get into it, let's quickly define what all the terms means.

Themes are simply a collection of style definitions, images (a k a graphical assets), and skins. Themes give you a lot of control and convenience in terms of how you package it all together and distribute it. You can distribute your theme as separate individual files, or ideally compile it into a theme SWC (commonly pronounced as "swick," a sort of JAR/ZIP-like archive format for Flash).

Styles are similar to the CSS you've been using for your Web applications. In fact, Flex's styles follow the CSS 2.0 syntax and support many of the common style properties that you're used to.

Although many of the visual components and controls support a variety of style properties that let you control fine-grain details like the corner radius of a button, fill gradients, and transparency. They're still based on a certain look; using skins you can completely alter the graphics and interface behavior.

Out of the Box
Out-of-the-box there are a couple of things you can do to easily change the look of your app. By default the Theme Flex uses is called Halo and it supports a style property called themeColor.

In HTML you can assign predefined colors like Red and Blue to certain CSS properties. Flex supports the same thing, but includes four interesting colors ready-to-use. They include:

  • haloBlue (the default)
  • haloOrange
  • haloGreen
  • haloSilver
To use them with the themeColor is pretty simple. To change it on an application-wide basis, modify your main Application tag to include this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" themeColor="haloOrange">

You can also do this on a per-component instance basis as well. For example:

<mx:Button label="My Button" themeColor="haloGreen">

Now don't get too excited. The difference is rather subtle in that the most noticeable change is when you mouse over various components. In the case of the button it changes the outer highlight, and with the Datagrid (see the graphic below) it changes the Header column.

Imaga A

Fortunately there's a much more dramatic change that you can employ with the out-of-the-box themes. The themes that come with Flex 2 are:

  • Halo (the default, embedded in the framework.swc)
  • HaloClassic (haloclassic.swc)
  • Ice (Ice.css)
  • Institutional (Institutional.css)
  • Wooden (Wooden.css)
  • Smoke (Smoke.css)
You'll find the source of these files located under the <flex builder root>\Flex SDK 2\frameworks\themes directory. To make quick use of them:
  • Start off with a Project in Flex Builder 2 either by opening an existing one or creating a new one.
  • Using the mouse, right-click on the project folder, and select properties

    Image B

  • Select the Flex Compiler section
  • Under "Additional compiler arguments," append the -theme parameter located as the desired theme file. For example:

    -theme "C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\themes\Smoke.css"

  • Now build and run the application

More Stories By Tariq Ahmed

Tariq Ahmed is the manager of product development at Amcom Computer Services, a former project lead at eBay, and host of www.cflex.net. He specializes in leveraging technology with process engineering to reduce operating costs while maximizing revenue potential. You can find him on the Web at www.dopejam.com.

Comments (6) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
WebDDJ Duty Online Editor 08/14/06 06:07:57 AM EDT

Please go right ahead, Dreamer. Perhaps you would post the URL back to this thread too - thanks!!

Web Developer's & Designer's Journal
SYS-CON Media

Dreamer 08/14/06 04:07:57 AM EDT

wonderful post.
I am a Chinese.Can I translate this post into Chinese and publish on the web?Of course,with links to the original post. I want more people to know Flex.Thanks

SYS-CON India News Desk 08/10/06 01:06:15 PM EDT

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.

SYS-CON Italy News Desk 08/09/06 07:37:26 PM EDT

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.

Web Developer's & Designer's Journal 08/09/06 04:14:54 PM EDT

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.

Web Developer's & Designer's Journal 08/09/06 02:40:45 PM EDT

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.

@ThingsExpo Stories
Cloud Expo 2014 TV commercials will feature @ThingsExpo, which was launched in June, 2014 at New York City's Javits Center as the largest 'Internet of Things' event in the world.
The major cloud platforms defy a simple, side-by-side analysis. Each of the major IaaS public-cloud platforms offers their own unique strengths and functionality. Options for on-site private cloud are diverse as well, and must be designed and deployed while taking existing legacy architecture and infrastructure into account. Then the reality is that most enterprises are embarking on a hybrid cloud strategy and programs. In this Power Panel at 15th Cloud Expo (http://www.CloudComputingExpo.com), moderated by Ashar Baig, Research Director, Cloud, at Gigaom Research, Nate Gordon, Director of T...
Explosive growth in connected devices. Enormous amounts of data for collection and analysis. Critical use of data for split-second decision making and actionable information. All three are factors in making the Internet of Things a reality. Yet, any one factor would have an IT organization pondering its infrastructure strategy. How should your organization enhance its IT framework to enable an Internet of Things implementation? In his session at Internet of @ThingsExpo, James Kirkland, Chief Architect for the Internet of Things and Intelligent Systems at Red Hat, described how to revolutioniz...
Technology is enabling a new approach to collecting and using data. This approach, commonly referred to as the "Internet of Things" (IoT), enables businesses to use real-time data from all sorts of things including machines, devices and sensors to make better decisions, improve customer service, and lower the risk in the creation of new revenue opportunities. In his General Session at Internet of @ThingsExpo, Dave Wagstaff, Vice President and Chief Architect at BSQUARE Corporation, discuss the real benefits to focus on, how to understand the requirements of a successful solution, the flow of ...
The security devil is always in the details of the attack: the ones you've endured, the ones you prepare yourself to fend off, and the ones that, you fear, will catch you completely unaware and defenseless. The Internet of Things (IoT) is nothing if not an endless proliferation of details. It's the vision of a world in which continuous Internet connectivity and addressability is embedded into a growing range of human artifacts, into the natural world, and even into our smartphones, appliances, and physical persons. In the IoT vision, every new "thing" - sensor, actuator, data source, data con...
"BSQUARE is in the business of selling software solutions for smart connected devices. It's obvious that IoT has moved from being a technology to being a fundamental part of business, and in the last 18 months people have said let's figure out how to do it and let's put some focus on it, " explained Dave Wagstaff, VP & Chief Architect, at BSQUARE Corporation, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.

ARMONK, N.Y., Nov. 20, 2014 /PRNewswire/ --  IBM (NYSE: IBM) today announced that it is bringing a greater level of control, security and flexibility to cloud-based application development and delivery with a single-tenant version of Bluemix, IBM's platform-as-a-service. The new platform enables developers to build ap...

Focused on this fast-growing market’s needs, Vitesse Semiconductor Corporation (Nasdaq: VTSS), a leading provider of IC solutions to advance "Ethernet Everywhere" in Carrier, Enterprise and Internet of Things (IoT) networks, introduced its IStaX™ software (VSC6815SDK), a robust protocol stack to simplify deployment and management of Industrial-IoT network applications such as Industrial Ethernet switching, surveillance, video distribution, LCD signage, intelligent sensors, and metering equipment. Leveraging technologies proven in the Carrier and Enterprise markets, IStaX is designed to work ac...
"There is a natural synchronization between the business models, the IoT is there to support ,” explained Brendan O'Brien, Co-founder and Chief Architect of Aria Systems, in this SYS-CON.tv interview at the 15th International Cloud Expo®, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
C-Labs LLC, a leading provider of remote and mobile access for the Internet of Things (IoT), announced the appointment of John Traynor to the position of chief operating officer. Previously a strategic advisor to the firm, Mr. Traynor will now oversee sales, marketing, finance, and operations. Mr. Traynor is based out of the C-Labs office in Redmond, Washington. He reports to Chris Muench, Chief Executive Officer. Mr. Traynor brings valuable business leadership and technology industry expertise to C-Labs. With over 30 years' experience in the high-tech sector, John Traynor has held numerous...
Bit6 today issued a challenge to the technology community implementing Web Real Time Communication (WebRTC). To leap beyond WebRTC’s significant limitations and fully leverage its underlying value to accelerate innovation, application developers need to consider the entire communications ecosystem.
The 3rd International @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that it is now accepting Keynote Proposals. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devices - computers, smartphones, tablets, and sensors - connected to the Internet by 2020. This number will continue to grow at a rapid pace for the next several decades.
The Internet of Things is not new. Historically, smart businesses have used its basic concept of leveraging data to drive better decision making and have capitalized on those insights to realize additional revenue opportunities. So, what has changed to make the Internet of Things one of the hottest topics in tech? In his session at @ThingsExpo, Chris Gray, Director, Embedded and Internet of Things, discussed the underlying factors that are driving the economics of intelligent systems. Discover how hardware commoditization, the ubiquitous nature of connectivity, and the emergence of Big Data a...
Almost everyone sees the potential of Internet of Things but how can businesses truly unlock that potential. The key will be in the ability to discover business insight in the midst of an ocean of Big Data generated from billions of embedded devices via Systems of Discover. Businesses will also need to ensure that they can sustain that insight by leveraging the cloud for global reach, scale and elasticity.
SYS-CON Events announced today that Windstream, a leading provider of advanced network and cloud communications, has been named “Silver Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9–11, 2015, at the Javits Center in New York, NY. Windstream (Nasdaq: WIN), a FORTUNE 500 and S&P 500 company, is a leading provider of advanced network communications, including cloud computing and managed services, to businesses nationwide. The company also offers broadband, phone and digital TV services to consumers primarily in rural areas.
SYS-CON Events announced today that IDenticard will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. IDenticard™ is the security division of Brady Corp (NYSE: BRC), a $1.5 billion manufacturer of identification products. We have small-company values with the strength and stability of a major corporation. IDenticard offers local sales, support and service to our customers across the United States and Canada. Our partner network encompasses some 300 of the world's leading systems integrators and security s...
IoT is still a vague buzzword for many people. In his session at @ThingsExpo, Mike Kavis, Vice President & Principal Cloud Architect at Cloud Technology Partners, discussed the business value of IoT that goes far beyond the general public's perception that IoT is all about wearables and home consumer services. He also discussed how IoT is perceived by investors and how venture capitalist access this space. Other topics discussed were barriers to success, what is new, what is old, and what the future may hold. Mike Kavis is Vice President & Principal Cloud Architect at Cloud Technology Pa...
Cloud Expo 2014 TV commercials will feature @ThingsExpo, which was launched in June, 2014 at New York City's Javits Center as the largest 'Internet of Things' event in the world. The next @ThingsExpo will take place November 4-6, 2014, at the Santa Clara Convention Center, in Santa Clara, California. Since its launch in 2008, Cloud Expo TV commercials have been aired and CNBC, Fox News Network, and Bloomberg TV. Please enjoy our 2014 commercial.
From a software development perspective IoT is about programming "things," about connecting them with each other or integrating them with existing applications. In his session at @ThingsExpo, Yakov Fain, co-founder of Farata Systems and SuranceBay, will show you how small IoT-enabled devices from multiple manufacturers can be integrated into the workflow of an enterprise application. This is a practical demo of building a framework and components in HTML/Java/Mobile technologies to serve as a platform that can integrate new devices as they become available on the market.
The 3rd International Internet of @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that its Call for Papers is now open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.