• »
  • »
  • Skinning and Styling the Application and Creating the AF – Client Manager Style Sheet

Skinning and Styling the Application


The AF – Client Manager is a combination of graphical skinning and programmatic styles.
Styles for the application include font sizes, font colors, and background alphas. Skinning,
on the other hand, is a little more complex, since I chose to change the base skins for Button, TabNavigator, and TextInput by overriding skins in those components. To do this, I used the 9-slice scaling technique to apply scaled graphics to Flex components.


Using 9-Slice Scaling for Component Skins

The 9-slice scaling technique slices an image file into nine slices that scale when the size of the component that displays the image changes. Using this technique, you can specify which part of the image you want to scale in CSS.


You can define the properties for scaling when you apply the skin in CSS. These can be
applied to Flex component tags such as borderSkin, skin, overSkin, and so on. This gives you a dynamic way to import skins for your applications.


.applicationSkin {
backgroundImage: Embed("assets/packs/cleanSkin/application_skin.png",
scaleGridLeft="15",
scaleGridRight="975",
scaleGridTop="60",
scaleGridBottom="64");
backgroundSize: "100%";
}


Creating the AF – Client Manager Style Sheet


style sheet for the AF – Client Manager application, which handles its
skinnng and styling. Notice the custom styles that start with a dot (.). They are used throughout the application in the styleName tag on Flex components. You can also see that it sets the fonts used in the application, which are MyriadWebPro. You will need to define a location for the font files under the assets folder in your project. As you can see in the CSS, I have an /assets/ fonts directory from which I reference the font files.


AF – Client Manager CSS


@font-face
{
src: url("assets/fonts/MyriadWebPro.ttf");
font-family: main;
font-style: normal;
font-weight: normal;
}
@font-face
{
src: url("assets/fonts/MyriadWebPro-Bold.ttf");
font-family: main;
font-style: normal;
font-weight: bold;
}
/* Font Styles */
.heading
{
color:#666666;
font-family: main;
font-size: 14pt;
font-weight: bold;
}
.clientListFont
{
color:#CCCCCC;
font-family: main;
font-size: 13pt;
font-weight: bold;
}

.appHeading
{
color:#222222;
font-family: main;
font-size: 20pt;
}
/* End Font Styles */
Application {
padding-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
vertical-gap:0;
theme-color: #919191;
font-family: main;
color: #333333;
font-size: 11;
background-color: #FFFFFF;
}
.frame
{
background-image:Embed("assets/packs/cleanSkin/frame_skin.png",
scaleGridLeft="10",
scaleGridRight="430",
scaleGridTop="60",
scaleGridBottom="64");
background-size: "100%";
}
.frameContainerSkin
{
background-image:
Embed("assets/packs/cleanSkin/frame_container_skin.png",
scaleGridLeft="10",
scaleGridRight="430",
scaleGridTop="60",
scaleGridBottom="64");
background-size: "100%";
}
.borderStyleforContainer
{
Border-style: solid;
}

.applicationSkin {
background-image:
Embed("assets/packs/cleanSkin/application_skin.png",
scaleGridLeft="10",
scaleGridRight="975",
scaleGridTop="58",
scaleGridBottom="62");
background-size: "100%";
}
.containerSkin {
background-image:
Embed("assets/packs/cleanSkin/container_skin.png",
scaleGridLeft="15",
scaleGridRight="970",
scaleGridTop="58",
scaleGridBottom="62");
background-size: "100%";
border-style: borderStyleforContainer;
}
.tabContainerSkin {
background-image:
Embed("assets/packs/cleanSkin/tabcontainer_skin.png",
scaleGridLeft="10",
scaleGridRight="430",
scaleGridTop="60",
scaleGridBottom="64");
background-size: "100%";
}
.clientList
{
border-style: solid;
border-shickness: 2;
border-color: #f9f9f9;
border-skin: ClassReference("com.af.components.graphics. ➥
RoundedGradientBorder");
fill-colors: #419af2, #0865c4;
fill-alphas: 1, 1;
drop-shadow-enabled: true;
topCornerRadius: 0;
bottomCornerRadius: 0;
corner-radius: 0;
header-height: 0;
}

TextInput {
color:#222222;
font-family: main;
font-size: 20pt;
border-skin: Embed("assets/packs/cleanSkin/textinput_skin.png",
scaleGridLeft="3",
scaleGridRight="112",
scaleGridTop="3",
scaleGridBottom="26");
padding-left: 2;
}
Button {
skin: Embed("assets/packs/cleanSkin/button_skin.png",
scaleGridLeft="7",
scaleGridRight="21",
scaleGridTop="7",
scaleGridBottom="19");
over-skin: Embed("assets/packs/cleanSkin/button_over_skin.png",
scaleGridLeft="7",
scaleGridRight="21",
scaleGridTop="7",
scaleGridBottom="19");
open-duration: 0;
close-duration: 0;
corner-radius: 2;
}
ButtonBar {
First-button-style-name: firstButton;
button-style-name: middleButton;
last-button-style-name: lastButton;
}
.firstButton {
skin: Embed("assets/packs/cleanSkin/button_bar_first.png",
scaleGridLeft="7",
scaleGridRight="25",
scaleGridTop="7,
scaleGridBottom="19");
over-skin:
Embed("assets/packs/cleanSkin/button_bar_first_over.png",
scaleGridLeft="7",
scaleGridRight="25",
scaleGridTop="7,
scaleGridBottom="19");
}

.middleButton {
skin: Embed("assets/packs/cleanSkin/button_bar_middle.png",
scaleGridLeft="7",
scaleGridRight="25",
scaleGridTop="7,
scaleGridBottom="19");
over-skin:
Embed("assets/packs/cleanSkin/button_bar_middle_over.png",
scaleGridLeft="7",
scaleGridRight="25",
scaleGridTop="7,
scaleGridBottom="19");
}
.lastButton {
skin: Embed("assets/packs/cleanSkin/button_bar_last.png",
scaleGridLeft="7",
scaleGridRight="25",
scaleGridTop="7,
scaleGridBottom="19");
over-skin:
Embed("assets/packs/cleanSkin/button_bar_last_over.png",
scaleGridLeft="7",
scaleGridRight="25",
scaleGridTop="7,
scaleGridBottom="19");
}
TabNavigator {
border-style: none;
background-alpha: 0;
corner-radius: 0;
tab-style-name: "tabButtonStyleName";
tab-height: 28;
padding-top:0;
}
.tabButtonStyleName {
font-weight:normal;
text-align:left;
skin:Embed("assets/packs/cleanSkin/tab_skin.png",
scaleGridLeft="1",
scaleGridRight="162",
scaleGridTop="1",
scaleGridBottom="20");

selected-up-skin:
Embed("assets/packs/cleanSkin/tab_selected_skin.png",
scaleGridLeft="1",
scaleGridRight="162",
scaleGridTop="1",
scaleGridBottom="20");
selected-over-skin:
Embed("assets/packs/cleanSkin/tab_selected_skin.png",
scaleGridLeft="1",
scaleGridRight="162",
scaleGridTop="1",
scaleGridBottom="20");
over-skin:Embed("assets/packs/cleanSkin/tab_over_skin.png",
scaleGridLeft="1",
scaleGridRight="162",
scaleGridTop="1",
scaleGridBottom="20");
}
.panelSkin {
border-skin: Embed("assets/packs/cleanSkin/panel_skin.png",
scaleGridLeft="10",
scaleGridRight="274",
scaleGridTop="40",
scaleGridBottom="101");
}

Leave a Reply

Subscribe to Posts | Subscribe to Comments

About This Site

Howdy! My name is Suersh Rohan and I am the developer and maintainer of this blog. It mainly consists of my thoughts and opinions on the technologies I learn,use and develop with.

Blog Archive

Powered by Blogger.

- Copyright © My Code Snapshots -Metrominimalist- Powered by Blogger - Designed by Suresh Rohan -