Tuesday, September 27, 2011

Understanding Spark Skinning - Part 2


This is the second part of the 3 part series to understand Skinning in Spark.
PART 1 - Introduction to Skinning

Skin Class
The Skin Class is the class that defines the look and feel (logic, graphical elements, states etc)of the component class. The Skin Class has the following elements

  • Skin root tag (or a subclass)
  • Host Component metadata
  • State declarations
  • Skin Parts
  • Script Block to define the logic
  • Graphical Elements and children
Skin Root Tag
The Skin Class uses a root tag which defines the entry point of the class. The root tag may be or or a subset of the


Host Component
The HostComponent is the component that uses the skin. This metadata is optional but recommended. Specifying this metadata allows the skin class to gain a reference to the component instance that uses the skin. Also, if specified the skin class can check in compile time for the skin parts and the skin states defined in the Host Component. You can specify this as below


<Metadata>
      [HostComponent{"spark.components.Button"}]
</Metadata>


State Declarations
The skin needs to change its visual appearance based on the states of the component. The skin states define the appearance w.r.t the elements in the skin and their display state. Thus for each state of the host component a state is defined for the skin, where in the display is changed. Skin states are defined as below,

<s:states>
      <s:state name="up"/>
      <s:state name="down"/>
</s:states>


Skin Parts
Skin Parts are the components defined in the skin class and the host component. These are a great way of binding the component data into the skin. Thus the host declares the part and the appearance is defined by the skin. If declared in the host component the skin has to implement it. 
To declare a skin part in the host component the [SkinPart] metadata has to be used

[SkinPart(required=true)]
public var textLabel:Label;

The Skin Class defines a label as the textLabel part;

Note that the id of the label defined in the skin class matches that of the variable in the host component.

These are the basic stuff required for skinning. In the next part we'll use these to put together a skinning example.

Sunday, September 25, 2011

Understanding Spark Skinning - PART 1

Introduction to Skinning
In my previous post we saw the basic difference between skinning between Flex 3 (Halo) and Flex 4(Spark). Let us further delve into the world of Spark Skinning. I'll go through this in a 3 part series where we'll discuss the basics of skinning and put together an example.


An important thing to note before proceeding is that, while skinning spark components is that though it may look a bit difficult and time consuming, it is actually quite simple.

Skinning Contract
Skinning spark components starts with a Skinning Contract. The Skinning Contract between the skin class and the component class defines the set of rules that each class must follow in order to ensure communication between them.
The skinning class part of the contract tells that the Skin Class must do the following
  • Specify the host component
  • Declare the skin states
  • Define appearance of skin parts
  • Optionally bind data defined on the host component
The host component must
  • Identify skin states with metadata
  • Identify skin parts with metadata
  • Define data that is bound to the skin class
The compiler validates the HostComponent , SkinPart and SkinStates in the skin class. So, all the states and the skin parts that are there on the host component must be declared in the skin class.
A skin can be applied to a component only after a valid contract is established between the two.

Skinning - Flex 3 vs Flex 4

Skinning UI Components has largely been a necessity in the world of Web 2.0. Every application needs to look different and feel different. In such a scenario, Flex had brought the concept of skinning, that lent a fresh and different look to each component with the help of skin classes.

In Flex 3, the skin was tightly bound to the component. So, the entire look and feel was intertwined with the functionality of the component. However, in Flex 4 Adobe has made a refreshing change, separating functionality and display. The display aspects is moved from the component code to the skin class.

What it means for us is that in Halo components the look and feel of the component is directly connected to the methods of the component whereas, in spark components, the look and feel have been separated from the functional behaviour of the component. The impact this makes is that no matter how you skin the component in Flex 3, they'll always be similar in the way they look and feel. On the other hand in Flex 4, two components can be drastically different in the way they look and feel and yet have the same functionality.

The other beautiful thing that comes out of the separation is that developers and designers are no longer dependent on each other. The developer has the freedom to write the logic without worrying about the appearance and the designer can create the UI without worrying about the effects into the code logic. With Flash Catalyst the creation of UI has become even more simpler. As a direct result of this, the requirement changes that were previously so hard to accommodate due to monkey patching are done very simply in Flex 4.


Monday, September 19, 2011

Creating overlay in Flex

Sometimes we may need to create a modal window in a Flex Application. In such cases, we need to add an overlay to the application. The post below explains how to achieve the same.

/* The overlay component */
private var overlay:FlexSprite;

/* Create an overlay 
 * Create a new sprite with an alpha to make it translucent
 * Create a rectangle of the size of the system manager screen and fill the overlay with that
 * Add the overlay to the system manager.
 */
private function createOverlay():void
{
if(this.overlay == null)
{
this.overlay = new FlexSprite();
this.overlay.alpha = 0.5;
this.overlay.tabEnabled = false;
var s:Rectangle = this.systemManager.screen;
var g:Graphics = this.overlay.graphics;
g.clear();
g.beginFill(0xDDDDDD, 100);
g.drawRect(s.x, s.y, s.width, s.height);
g.endFill();
this.systemManager.addChild(this.overlay);
}
}

/* Remove the overlay */
private function removeOverlay():void
{
if(this.overlay != null)
{
this.systemManager.removeChild(this.overlay);
this.overlay = null;
}
}

As simple as that. Questions are welcome.

Saturday, September 17, 2011

Multi Data Converter


Multi Data Converter

Version 1.0


ABOUT

Multi Data Conveter is a data conversion utility designed to allow users to convert between various units of data. The application currently supports data conversion for units of "Distance", "Currency", "Weight" and "Temperature".

FEATURES
  • Free to download, install and distribute
  • Single click usage
  • Currency Converter tries to get the latest conversion rates
  • Get all conversions right on your desktop.

USAGE
  • Download the zip file by clicking on the download link
  • Extract the zip
  • Run the installer in the zip file
  • Select the default settings while installing
  • Run "Multi Data Converter" using one of the shortcuts on desktop or in the startup menu.
  • Select the converter that is to be used.
  • Enter the value to be converted
  • Select the units from and to which the value is to be converted .
  • Click on Go.


SCREEN SHOTS









Disclaimer

Multi Data Converter is designed with the intention to help users to convert data right from the desktop.

The utility is free for use by any individual or organization without restrictions. However the author, flexmycode.com and blogger.com are not responsible for any damage caused by the misuse of this tool.

Friday, September 9, 2011

Singleton Class in ActionScript

As in JAVA, ActionScript does not have a private constructor. So, the job of creating a singleton class is not really simple. However, we can create Singleton classes in ActionScript. Below is a simple class that does the trick.

package utils
{
public class SingletomExample
{
private static var instance:SingletomExample;
public function SingletomExample(enforcer:SingletonEnforcer)
{
if (!enforcer)
{
throw new Error("Cannot instantiate a Singleton class. Use getInstance() instead");
}
}
public static function getInstance():SingletomExample
{
if (!instance)
{
instance = new SingletomExample(new SingletonEnforcer());
}
return instance;
}
}
}

class SingletonEnforcer{}

And lo and behold, your Singleton class is here.

Some Explanation:
The code is pretty much self explanatory. A class "SingletonEnforcer" is added to the package. This is an internal class that no one can access outside the class. Using internal class this to enforce the Singleton makes it impossible to break the Singleton nature.

Hope this helps..

Monday, September 5, 2011

Adding a Scroller in Spark Component

Flex 3 components had scrollers in-built in the components that we used. However, that is not the case in Flex 4 (Spark). Scrollers are not usually required in applications, mainly because people do not like scrolling through the page. A saying goes like, "If there's a scroller to a component, probably the things behind the scroller are not that important".Which is why most applications today do not contain a lot of scrollable areas. The removal of in-built scrollers from the components thus added an edge to Flash applications by removing the overhead of the extra code that is mostly not used and thus reducing the overall size of the application.
However, there will be some cases in an application where we need to use the scroll feature. So how do we implement this in Flex 4. The code below explains the same,

<s:Application .........
>

<s:Scroller>
      <s:Group id="scrollGroup" .... >
            <!-- component UI here -->
      </s:Group>
</s:Application>

As simple as that. Add the required properties into the scroller (left, right, top etc...) and you can customize it. You can even skin the scroller separately to what you require.
-Cheers.