Archive for the ‘Creating a User Interface (UI)’ Category

Using styles in Flex 4

January 27th, 2011 by aabhaanjan

We can modify the appearance of components through style properties.

Important points :

  1. The style properties that we can set on a component depend on the component’s architecture.
  2. The components in the MX component set (mx.controls.* and mx.containers.* packages) take one set of styles. Components in the Spark component set (spark.components.* package) allow an entirely different set of styles.
  3. Flex does not support controlling all aspects of component layout with CSS.
  4. Properties such    as xywidth, and height are properties, not styles, of the UIComponent class, and therefore cannot be set in CSS.
  1. For MX components to use CSS it should  implement the IStyleClient interface.

Example :

[xml]

<?xml version=”1.0″?>

<!– modules/StyleModLoaderApp.mxml –>

<s:Application

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx”>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

@namespace s “library://ns.adobe.com/flex/spark”;

s|Button {

color:blue;

cornerRadius:10;

}

</fx:Style>

<s:Button id=”myButton” label=”Sample Styling”/>

</s:Application>

[/xml]

Tags: , , , ,

Architecture of a Skinning component

January 25th, 2011 by aabhaanjan

In this tutorial we are going to discuss new component architecture with the Spark library for skinning:

With the  new component architecture with the Spark library provides :

1. Building custom components a lot easier

2. Modifying custom components a lot easier

3.  Designing custom components a lot easier

4. Internal state management

5. Decoupled visual appearance.

Here it is explained now :

Internal State Management

By this now it is possible to create multiple skins for a single component by using the event handler.

The code for the skin itself should have the following structure:

[xml]

<!– states –>

<s:states>

<s:State name=”disabled” />

<s:State name=”down” />

<s:State name=”over” />

<s:state name=”up” />

</s:states>

[/xml]

A single state change could include the attachment of a new skin class.

Host components

Spark skin classes typically specify the host component on them. The host component is the component that uses the skin. By specifying the host component, Spark skins can gain a reference to the component instance that uses the skin by using the  host Component  property. The following example defines the Spark Button as the host component:

[xml]

<!– host component –>

<fx:Metadata>

[HostComponent(“spark.components.Button”)]

</fx:Metadata>

[/xml]

Decoupled Visual Appearance

A component state is not dependent upon the skin state it can change without the skin state changing. In other words, component states are decoupled from skin states. Component states define changes to the behavioral state of a component, while Skin states define changes to the display state of the component that they are attached to.

Example :

Create a ButtonSkin skin file and incorporate it with the TestButton.mxml

ButtonSkin.MXML

[xml]

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark” alpha.disabled=”.5″>

<!– states –>

<s:states>

<s:State name=”up” />

<s:State name=”over” />

<s:State name=”down” />

<s:State name=”disabled” />

</s:states>

<!– border and fill –>

<s:Rect id=”rect” radiusX=”4″ radiusY=”4″ top=”0″ right=”0″ bottom=”0″ left=”0″>

<s:fill>

<s:SolidColor color=”0x77CC22″ />

</s:fill>

<s:stroke>

<s:SolidColorStroke color=”0x131313″ weight=”2″/>

</s:stroke>

</s:Rect>

<!– text –>

<s:Label text=”Button!” color=”0x131313″

textAlign=”center” verticalAlign=”middle”

horizontalCenter=”0″ verticalCenter=”1″

left=”12″ right=”12″ top=”6″ bottom=”6″

/>

</s:Skin>

TestButton.MXML

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark”>

<s:Button verticalCenter=”0″ horizontalCenter=”0″ skinClass=”ButtonSkin”

click=”trace(‘something’)” />

</s:Application>

[/xml]

Tags: , , , , , , , ,

How to create a component skin using FXG

January 24th, 2011 by aabhaanjan

In this tutorial, we  will  create a component skin using FXG.

Step 1: Create a new Button skin file.

Create new MXML file for skin. Choose name and host component type. Your code

Will appear like Step2.

Step 2: Review the skin class.

You will get the states as you have selected host component type button.

[xml]

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx”>

<!– host component –>

<fx:Metadata>

[/xml]

[HostComponent(“spark.components.Button”)]

[xml]

</fx:Metadata>

<!– states –>

<s:states>

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>disabled” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>down” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>over” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>up” />

</s:states>

<!– SkinParts

name=labelDisplay, type=spark.components.supportClasses.TextBase, required=false

–>

</s:Skin>

[/xml]

Step 3: Review the graphics code.

This file was created by drawing in Fireworks and then selecting Commands > Export to FXG. You can also create FXG files using Illustrator or Photoshop.

Paste this FXG file into your src folder. It will look like this.

[xml]

<?xml version=”1.0″ encoding=”UTF-8″?>

<Graphic version=”1.0″ xmlns=”http://ns.adobe.com/fxg/2008″ xmlns:fw=”http://ns.adobe.com/fxg/2008/fireworks”  viewHeight= “25” viewWidth= “25”>

<Library>

</Library>

<Group fw:type=”page”>

<Group fw:type=”state”>

<Group fw:type=”layer”>

<Path winding=”evenOdd” data=”M 2 13 C 2 7 7 2 13 2 C 18 2 23 7 23 13 C 23 18 18 23 13 23 C 7 23 2 18 2 13 Z ” blendMode=”normal” alpha=”1″>

<fill>

<SolidColor color=”#000000″ alpha=”1″/>

</fill>

<stroke>

<SolidColorStroke color=”#FF3300″ weight=”3″/>

</stroke>

</Path>

<Path winding=”evenOdd” data=”M 13 6 L 13 18″ blendMode=”normal” alpha=”1″>

<stroke>

<SolidColorStroke color=”#FF3300″ weight=”2″/>

</stroke>

</Path>

<Path winding=”evenOdd” data=”M 7 12 L 19 12″ blendMode=”normal” alpha=”1″>

<stroke>

<SolidColorStroke color=”#FF3300″ weight=”2″/>

</stroke>

</Path>

</Group>

</Group>

</Group>

</Graphic>

[/xml]

Step 4: Add the graphics to the skin.

In buttonSkin.mxml add xmlns:local and <local:BiggerButton/> This tells the compiler where to find this class.

Now your code will look like this :

[xml]

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/mx” xmlns:local = “*”>

<!– host component –>

<fx:Metadata>

[/xml]

[HostComponent(“spark.components.Button”)]

[xml]

</fx:Metadata>

<!– states –>

<s:states>

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>disabled” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>down” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>over” />

<s:Statefont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>up” />

</s:states>

<local:BiggerButton/>

<!– SkinParts

name=labelDisplay, type=spark.components.supportClasses.TextBase, required=false

–>

</s:Skin>

[/xml]

Step 5: Add the skin to the button.

Here I have added the skinClass to my  button in the testSkin.mxml file.

[xml]

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:local=”*”>

<s:Buttonfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>biggerBtn” skinClass=”buttonSkin” x=”38″ y=”28″/>

</s:Application>

[/xml]

Tags: , , , , , , , , , ,

Creating a User Interface (UI) – Spark skins

January 24th, 2011 by aabhaanjan

Lets move to the other points of section Creating a User Interface (UI). There will be some question from Change the look and feel of a design by using API styles, style sheets, Spark skins, filters and blends, and visual customizations by using Halo.

Lets start with Spark skins first.

Spark skins :

The new features of Flex 4 SDK separates developer and designers by separating a component’s visual appearance from component’s coding or logic part. The new feature Spark provides  a design-oriented subset of MXML, and separates design-oriented component features into a component’s companion “skin” file.

FGX :

1. It is new MXML subset for skins,

2. is valid XML code, and can be specified either inside an MXML file defining a component or, more often, in a separate file.

3. FGX files can declare any visual aspect of a component.

4. An FGX file, for instance, can define runtime graphics classes that draw shapes, specify containment of sub-components, define component effects, transitions, and even specify layout inside the component

5. In Flex 4, the runtime graphics primitives directly map to graphics classes in Flash Player 10

6. Default look and feel is known as Halo

7. Catalyst :Adobe provided a specialized designer tool, Catalyst, for the purpose of working with FGX content. Using this tool, a designer can create pixel-perfect application shells complete with behaviors, transitions, and even data placeholders that are ready for integration and implementation by a developer using Flash Builder 4.

8. the term Halo components refers to components originally included in Flex 3. The term Spark components refers to the new set of components in Flex 4.

Writing a simple button skin

[xml]

<?xml version=”1.0″ encoding=”utf-8″?>

<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”>

<s:Group verticalCenter=”0″ horizontalCenter=”0″>

<s:Rectfont-size:10.0pt;font-family:”Courier New”; mso-fareast-font-family:”Times New Roman”;color:#990000;mso-font-kerning:0pt; mso-fareast-language:EN-US;mso-bidi-language:AR-SA”>rect” radiusX=”4″ radiusY=”4″ top=”0″ right=”0″ bottom=”0″ left=”0″>

<s:fill>

<s:SolidColor color=”0xFF3300″ />

</s:fill>

<s:stroke>

<s:SolidColorStroke color=”0x131313″ weight=”1″/>

</s:stroke>

</s:Rect>

<s:Label text=”Skinned Button!” color=”0x121212″ textAlign=”center” verticalAlign=”middle”

horizontalCenter=”3″ verticalCenter=”1″

left=”23″ right=”17″ top=”7″ bottom=”5″

/>

</s:Group>

</s:Application>

[/xml]

Tags: , , , , , , , , , , , , ,