• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Projects
    • GStaticMap WP Plugin
  • Contact
  • Privacy Policy

Lorenz Blog

All About Web & Mobile Application Development

  • Featured Articles
  • Gadgets
    • Android
    • Blackberry
  • Programming
    • Android
    • PHP
    • Java Script
    • MySQL
    • Postgresql
    • Flex
    • Web
  • Software
    • Mac OS
    • Windows
    • Linux
  • Web
You are Here » Home >> Information Technology >> Programming >> Flex >> How to Change Application Theme on Adobe Flex Builder 3

How to Change Application Theme on Adobe Flex Builder 3

December 21, 2009 by Lorensius Londa 1 Comment

Themes are collections of styles, graphical assets such as images, and skins that define the Flex application’s appearance. There are two available theme formats, a single compiled SWC file and a CSS file. Adobe Flex Builder 3 comes with some predefined themes located on Flex SDK directory, the default location is on C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\frameworks\themes directory.

A theme can be applied into an application using two ways:

1. By using <mx:Style> tag that points to theme’s CSS file.

The tag can be inserted into MXML application after the <mx:Application> tag. The CSS file must be located on project’s root directory, if other than project’s root directory, a full absolute path to CSS file must specified.

Example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="myStyle.css"/>
<mx:Label x="188" y="154" text="Hello World" width="154" height="39" fontSize="17" color="#CEEFF6"/>
</mx:Application>

or

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\frameworks\themes\Ice\Ice.css"/>
<mx:Label x="188" y="154" text="Hello World" width="154" height="39" fontSize="17" color="#CEEFF6"/>
</mx:Application>

2. By adding additional compiler arguments that points to theme’s CSS file.

  • From an opened Flex application project , select Project -> Properties menu to open Properties window
  • Select Flex Compiler section from the tree on left side Properties window
  • At Additional compiler arguments field, add-theme parameter to specify path to desired theme’s CSS file

Example:

– theme “C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\frameworks\themes\Ice\Ice.css”

Properties Window
Properties Window

  • Click OK to apply
  • Run the application to open it on Web browser, the appearance should be changed to the new specified theme.
Facebooktwitterredditpinterestlinkedinmailby feather

Related posts:

  1. How to Change Default Web Browser on Adobe Flex Builder 3
  2. How to Remove Website URL Field From Genesis Theme Comment Form
  3. How to Create Facebook Application with PHP for Beginner
  4. How to Enable Theme in Google Apps

Filed Under: Flex, Information Technology, Programming Tagged With: adobe, Adobe Air, Adobe Flex Builder, Flex, flex builder chage theme, flex change theme, flex set theme, flex theme, RIA, themes

About Lorensius Londa

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania.

Reader Interactions

Comments

  1. ghd straightener says

    October 22, 2010 at 4:38 pm

    This post is a winner! Love the tips and everything you suggest.. Thanks

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About Me

A husband, father of two, passionate software developer, diy lover and home baker who loves to learn new things. Read More…

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Blue Bamboo P25 Printer Android Demo Application With Source Code

Simple JSON RPC Client for Android

How to Send Message to Google Cloud Messaging (GCM) Server Using JSON and PHP

Footer

Recent Comments

  • Aditya Dabas on About
  • Ayten Göksenin Barutçu on How to Make Android Map Scrollable Inside a ScrollView Layout
  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices

Recent Posts

  • How to Fix Blank Screen on WordPress Add/Edit Post Page
  • How to Programmatically Restart the ESP32 Board
  • How to Get Hardware Info of ESP32
  • How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Latest Tweets

  • @tricahyono_bowo @infobandung @infobdg Wah kejauhan om 310 days ago
  • Wilujeng enjing sadayana..Mohon info tempat powder coating dan sandblasting yg recommended di Bandung dunk @infobandung @infobdg314 days ago

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in