About skinning for Flexbuilder using Adobe Creative Suite
Posted on October 26, 2010 by Sameera Thilakasiri
Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements.
These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that define
vector images.
Skins can define the entire appearance, or only a part of the appearance, of a component in various states. For
example, a Button control has eight possible states, and eight associated skin properties.
Other controls have similar states with associated skins. For example, the RadioButton and RadioButton controls,
which are subclasses of Button, also have an up, down, and over skins. The ComboBox control has skins the define
the appearance of the control when it is in the disabled, down, and over states.
All Flex components have a default skin class that ships with Flex, where a skin class can represent more than one
state of the component. As you can see in the previous table, the eight states of the Button control use the same default
skin class, mx.skins.halo.ButtonSkin, to draw the skin. Logic within the class determines the appearance of the
Button control based on its current state.
Types of skins
You typically define a skin as a bitmap graphic or as a vector graphic. Bitmap graphics, called graphical skins in Flex,
are made up of individual pixels that together form an image. The downside of a bitmap graphic is that it is typically
defined for a specific resolution and, if you modify the image by scaling or transforming it, you might notice a degradation
in image quality.
A vector graphic, called a programmatic skin in Flex, consists of a set of line definitions that specify the starting and
end point of a line, its thickness, color, and other information required by Flash Player to draw the line. When a
vector graphic is scaled, rotated, or modified in some other way, it is relatively simple for Flash Player to calculate the
new layout of the vector graphic by transforming the line definitions. Therefore, you can perform many types of
modifications to vector graphics without noticing any degradation in quality.
One advantage of programmatic skins is that you can create vector graphics that allow you a great deal of programmatic
control over the skin. For example, you can control the radius of a Button control’s corners by using programmatic
skins, something you cannot do with graphical skins. You can develop programmatic skins directly in your
Flex authoring environment or any text editor, without using a graphics tool such as Adobe Flash. Programmatic
skins also tend to use less memory because they contain no external image files.
About skinning with Adobe tools
You can create Flex skins using several tools from Adobe, including: Flash CS3, Illustrator CS3, Photoshop CS3, and
Fireworks CS3. By supporting these different tools, Flex lets you use the tool that you are most familiar with to create
your skins.
The main difference between these tools is that Flash Professional and Illustrator let you create vector graphics for
you skins, while Photoshop and Fireworks let you create bitmap graphics for your skins. For more information on
the different types of skins.
Adobe supplies an extension for each tool that you install before you create your Flex skins. The extension includes
utilities to create and export skins, and templates that let you edit the existing Flex skins, rather than having to create
skins from scratch.
Naming skin assets
By default, Flex Builder only recognizes skins that use the following naming convention:
Style_Selector_Part
where:
• Style specifies the CSS style type, and is typically the name of the component being skinned.
• Selector optionaly specifies the CSS style selector.
• Part specifies the style property of the component that corresponds to the skin, such as upSkin or downSkin
for the Flex Button control.
For example, the skin named Button_upSkin defines the skin for the up state of the Button control and the skin
named Tree_borderSkin defines the skin for the border of the Tree control. The Flex skins that you can modify by
using one of the Adobe tools all use this naming convention.
If you define a custom component, and create skins for it using the Adobe tools, use the same naming convention to
enable Flex Builder to recognize it and assign it to your component. For example, if you have a custom component
named MyComponent with skin properties named borderSkin and mainSkin, your skins could be named
MyComponent_borderSkin cheap levitra online and MyComponent_mainSkin.
If you do not use this naming convention, you can still assign your skins to a component, but you will have to
explicitly assign the skin when you import the skin into your Flex Builder project.
Tips for creating skins
Before you get started, here are a few tips for working with the skin template files that are part of the extensions added
to each tool:
• Make your skins the same size as the skins in the template. If you change the size, you might have to edit the
9-slice scaling grids as well.
• The CSS file created by Flex Builder assumes that the exported symbols names for the skins have specific names,
so you should avoid changing the names of the symbols when creating skins.
• The default Halo skins are semi-transparent, so that they can pick up the background color of their container.
• Because of the way Flex handles scrollbars, the symbols for the different states of the scrollbar thumb skins are
offset to the right by one pixel from the registration point. The Slider control and its highlight use similar adjustments
for alignment. Make sure any custom skins that you create are offset in the same way.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Easy Flex Skinning with Fireworks CS4
Posted on October 20, 2010 by Sameera Thilakasiri
I’m as excited as anyone about the prospect of Flash Catalyst, but I recently discovered that skinning in Flex 3 is down right easy. When I first was learning Flex, I had Studio 8, so I managed to completely overlook how easy the developers of Flex Builder and CS3 had made it to skin Flex components–without even leaving design view. When I got my new computer a few months ago, I finally was able to put CS4 on it, and so now cialis generic flagyl buy cialis phentermine soft tabs I am totally blown away with the synergy between these two Adobe products to make skinning so easy anyone can do it, even with out Catalyst. Continue Reading…
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3
Posted on October 20, 2010 by Sameera Thilakasiri
1. Styling or skinning?
When you want to customize the appearance of a Flex component, you have two options. One is to tweak the default appearance of the component using styling. Each Flex component buy levitra vardenafil has an extensive set of style 424 buy viagra pill buy viagra | where to buy cialis without prescription | order online levitra properties you can set to change its appearance: the roundness of corners, the colors used for fill gradients, the font, color, and size of text, and so on. Figure 1 shows examples of customized looks you can create purely through styling. Continue Cheap Amoxil Reading…
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Developing Flex RIAs with Cairngorm microarchitecture
Posted on October 20, 2010 by Sameera Thilakasiri
Cairngorm Store
Throughout the series buy cialis canadian you will find references to code taken from an e-commerce application named Cairngorm Store. You may use this sample application to gain a better understanding of Cairngorm, but please consider it only as a guide. Adobe is not responsible for maintaining the Cairngorm Store application.
This six-part series presents an open-source architectural framework for Flex developers called Cairngorm. In this series, we explain the thought leadership behind Cairngorm, the design challenges that Cairngorm addresses best, and the types of projects for which Cairngorm is an appropriate skeleton for development.
Using 424 buy viagra the Cairngorm Store sample application, this series explains how the Adobe Consulting team thinks about scoping, estimating, and delivering a rich Internet application (RIA) when basing it on Cairngorm from the start. We also explain various Cairngorm concepts and take a deep dive into the implementation of the Cairngorm Store.
Finally, we demonstrate some of the principal benefits of delivering an RIA based on this established microarchitecture by adding a new feature to the existing Cairngorm Store application from the point of view of a Cairngorm developer. By this stage in the series, you see the benefits for yourself.
Cairngorm isn’t the only way to build a rich Internet application, of course. Adobe Consulting, however, has used the information contained in this series to help numerous customers and partners successfully deliver large-scale Flex RIAs by building upon their preexisting Flex application development knowledge.
This comprehensive introduction covers the full spectrum of Cairngorm, from understanding the motivation and concepts of Cairngorm to architecting your own applications upon this established and supported microarchitecture.
Instead of delving into code from the outset, Part 1 provides the context and background for understanding the Cairngorm architecture. We discuss frameworks and clarify the difference between an application framework and an architectural framework. We then explore design patterns and introduce the microarchitecture concept. Finally, we give a brief background on the emergence of Cairngorm: its history and where it is headed—its roadmap.
In Parts 2–6, you will develop a retail commerce application using both Flex and Cairngorm on the client-side tier and a new or existing J2EE infrastructure on the server-side tier. Read More…
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Customizing the Look & Feel of a Flex Application
Posted on October 20, 2010 by Sameera Thilakasiri
Applying Styles
Flex styles are based on the web standard CSS (Cascading Style Sheets). There are several levels a style may be applied at:
You may specify a single style on a particular component, use a CSS Class selector to set several styles together or use a type selector to specify that all components of a particular type should use the provided style values.
A style may be applied to a component directly in its MXML definition by adding the style name as a property and specifying it’s value such as
to display a bold label. The setStyle() method can also be used to achieve the same effect – mLabel.setStyle(“fontWeight”,”bold”)
Note that when using setStyle() and specifying colors, the prefix 0x is used to indicate a hexadecimal value (and quotes are not required around them). When specified in a tag or CSS attribute, the prefix # may be used instead.
setStyle() is an expensive run time operation so it’s use should be limited.
The Flex language reference will tell you what styles are available for a particular component and will also specify CSS inheritance. If yes, this indicates that if the parent of this component has a value specified for the style, the child component will use the same value unless it has its own value specified. (For example, if you have a Label in a HBox, it will inherit the HBox color (text color) unless it has its own color value set.
Setting Styles buy levitra online with CSS
The
.myStyle{
color:#FF00FF
selectionColor:#00FF00
}
You may also use CSS type selectors which define a set of styles to be applied to all instances of a component type.
ComboBox{
color:#FF00FF
selectionColor:#00FF00
}
Both myBox1 and myBox2 will have the same color and selectionColor.
Note that Flex does not support ID selectors.
Flex will support traditional CSS style formatting for the properties it supports (ie all lowercase with hyphen to separate words such as background-color) within a Style tag but for attributes that are specific to Flex and all attributes outside of Style tags, the camel case form of the name is required (eg backgroundColor). This is because the hyphen is not a valid character for XML attributes and MXML tags must be valid XML.
CSS properties that require multiple values are specified using a comma separated list of values. It’s important to note that those properties must have at least two values (even if they are the same) to avoid an error as a single value will not map correctly to an array.
You may also use mx:Style to specify an external CSS file to compile into the app using the source attribute. This should always be placed within the file containing the Application tag – setting how do i buy viagra online | buy cialis canadian | cheap levitra generic style imports in child documents can give rise to unexpected results.
Run Time CSS
The disadvantage of specifying an external file to load in this way is that it is compiled into the application and thus any changes to the CSS require the app to be re-compiled. By loading the CSS at run time, this situation can be avoided and different CSS files could be loaded depending on data provided so if for example, you had a collage sports app, you could brand your app with the team colors of where your users login from.
Flex can’t deal directly with a CSS file but the compiler can convert that to a SWF which it can use. To do this in FlashDevelop, right click the CSS file, select “always compile”, go to project properties and specify the output filename you want to use and compile (don’t forget to switch back to your regular app when you’re done).
Once you have your CSS SWF, just use
StyleManager.loadStyleDeclarations(“myCSSFile.swf”)
to load it. A second optional parameter is update a boolean (which defaults to true). If set, this forces an update of all the styles in the application. If you’re loading several CSS SWF files, you should set this to false for all but the last one to reduce the overhead of this operation.
you may also use
StyleManager.unloadStyleDeclarations(“myCSSFile.swf”)
to unload a CSS. This also has an optional update parameter with the same effect.
It’s possible to have several levels of style in play, the rule being that if a style is defined in multiple places, Order Generic Amoxil Online without Prescription the last one loaded is the one used.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: loadStyleDeclarations | setStyle() | StyleManager | styleName | unloadStyleDeclarations
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.