I Here to discuss with you about the concepts/ projects/ products related to software field mainly Adobe Platform's and Java

HTML vs XHTML difference and comparison

July 16, 2013 Leave a comment

 and XHTML are both languages in which web pages are written. HTML is SGML based while XHTML is XML based. They are like two sides of the same coin. XHTML was derived from HTML to conform to XML standards. Hence XHTML is strict when compared to HTML and does not allow user to get away with lapses in coding and structure.

The reason for XHTML to be developed was convoluted browser specific tags. Pages coded in HTML appeared different in different browsers.

Comparison chart

Improve this chart HTML XHTML
Introduction (from Wikipedia): HyperText Markup Language is the main markup language for displaying web pages and other information that can be displayed in a web browser. XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written.
Filename extension: .html, .htm .xhtml, .xht, .xml, .html, .htm
Internet media type: text/html application/xhtml+xml
Developed by: World Wide Web Consortium & WHATWG World Wide Web Consortium
Type of format: Markup language Markup language
Extended from: SGML XML, HTML
Stands for: HyperText Markup Language Extensible Hypertext Markup Language
Application: Application of Standard Generalized Markup Language (SGML). Application of XML
Function: Web pages are written in HTML. Extended version of HTML that is stricter and XML-based.
Nature: Flexible framework requiring lenient HTML specific parser. Restrictive subset of XML and needs to be parsed with standard XML parsers.
Origin: Proposed by Tim Berners-Lee in 1987. World Wide Web Consortium Recommendation in 2000.
Versions: HTML 2, HTML 3.2, HTML 4.0, HTML 5. XHTML 1, XHTML 1.1, XHTML 2, XHTML 5.


Overview of HTML and XHTML

HTML is the predominant mark up language for web pages. HTML creates structured documents by denoting structural semantics for text like headings, lists, links, quotes etc. It allows images and objects to be embedded to create interactive forms. It is written as tags surrounded by angle brackets – for example, <html>. Scripts in languages like JavaScript can also be loaded.

XHTML is a family of XML languages which extend or mirror versions of HTML. It does not allow omission of any tags or use of attribute minimization. XHTML requires that there be an end tag to every start tag and all nested tags must be closed in the right order. For example, while <br> is valid in HTML, it would be required to write <br />in XHTML.

Features of HTML vs XHTML documents

HTML documents are composed of elements that have three components- a pair of element tags – start tag, end tag; element attributes given within tags and actual, textual and graphic content. HTML element is everything that lies between and including tags. (Tag is a keyword which is enclosed within angle brackets).

XHTML documents has only one root element. All elements including variables must be in lower case, and values assigned must be surrounded by quotation marks, closed and nested for being recognized. This is a mandatory requirement in XHTML unlike HTML where it is optional. The declaration of DOCTYPE would determine rules for documents to follow.

Aside from the different opening declarations for a document, the differences between an HTML 4.01 and XHTML 1.0 document—in each of the corresponding DTDs—are largely syntactic. The underlying syntax of HTML allows many shortcuts that XHTML does not, such as elements with optional opening or closing tags, and even EMPTY elements which must not have an end tag. By contrast, XHTML requires all elements to have an opening tag or a closing tag. XHTML, however, also introduces a new shortcut: an XHTML tag may be opened and closed within the same tag, by including a slash before the end of the tag like this: <br/>. The introduction of this shorthand, which is not used in the SGML declaration for HTML 4.01, may confuse earlier software unfamiliar with this new convention. A fix for this is to include a space before closing the tag, as such: <br />.

XHTML vs HTML Specification

HTML and XHTML are closely related and therefore can be documented together. Both HTML 4.01 and XHTML 1.0 have three sub specifications – strict, loose and frameset. The difference opening declarations for a document distinguishes HTML and XHTML. Other differences are syntactic. HTML allows shortcuts like elements with optional tags, empty elements without end tags. XHTML is very strict about opening and closing tags. XHTML uses built in language defining functionality attribute. All syntax requirements of XML are included in a well formed XHTML document.
Note, though, that these differences apply only when an XHTML document is served as an application of XML; that is, with a MIME type of application/xhtml+xml, application/xml, or text/xml. An XHTML document served with a MIME type of text/html must be parsed and interpreted as HTML, so the HTML rules apply in this case. A style sheet written for an XHTML document being served with a MIME type of text/html may not work as intended if the document is then served with a MIME type of application/xhtml+xml. For more information about MIME types, make sure to read MIME Types.

This can be especially important when you’re serving XHTML documents as text/html. Unless you’re aware of the differences, you may create style sheets that won’t work as intended if the document’s served as real XHTML.

Where the terms “XHTML” and “XHTML document” appear in the remainder of this section, they refer to XHTML markup served with an XML MIME type. XHTML markup served as text/html is an HTML document as far as browsers are concerned.

How to migrate from HTML to XHTML

As recommended by W3C following steps can be followed for migration of HTML to XHTML (XHTML 1.0 documents):

  • Include xml:lang and lang attributes on elements assigning language.
  • Use empty-element syntax on elements specified as empty in HTML.
  • Include an extra space in empty-element tags: <html />
  • Include close tags for elements that can have content but are empty: <html></html>
  • Do not include XML declaration.

Carefully following W3C’s guidelines on compatibility, a user agent (web browser) should be able to interpret documents with equal ease as HTML or XHTML.

How to migrate from XHTML to HTML

To understand the subtle differences between HTML and XHTML, consider the transformation of a valid and well-formed XHTML 1.0 document into a valid HTML 4.01 document. To make this translation requires the following steps:

  • The language for an element should be specified with a lang attribute rather than the XHTML xml:langattribute. XHTML uses XML’s built in language-defining functionality attribute.
  • Remove the XML namespace (xmlns=URI). HTML has no facilities for namespaces.
  • Change the document type declaration from XHTML 1.0 to HTML 4.01.
  • If present, remove the XML declaration. (Typically this is: <?xml version="1.0" encoding="utf-8"?>).
  • Ensure that the document’s MIME type is set to text/html. For both HTML and XHTML, this comes from the HTTP Content-Type header sent by the server.
  • Change the XML empty-element syntax to an HTML style empty element (<br/> to <br>).

Association, Aggregation, Composition, Abstraction, Generalization, Realization, Dependency

November 10, 2012 Leave a comment

These terms signify the relationships between classes. These are the building blocks of object oriented programming and very basic stuff. But still for some, these terms look like Latin and Greek. Just wanted to refresh these terms and explain in simpler terms.


Association is a relationship between two objects. In other words, association defines the multiplicity between objects. You may be aware of one-to-one, one-to-many, many-to-one, many-to-many all these words define an association between objects. Aggregation is a special form of association. Composition is a special form of aggregation.

Example: A Student and a Faculty are having an association.


Aggregation is a special case of association. A directional association between objects. When an object ‘has-a’ another object, then you have got an aggregation between them. Direction between them specified which object contains the other object. Aggregation is also called a “Has-a” relationship.


Composition is a special case of aggregation. In a more specific manner, a restricted aggregation is called composition. When an object contains the other object, if the contained object cannot exist without the existence of container object, then it is called composition.

Example: A class contains students. A student cannot exist without a class. There exists composition between class and students.

Difference between aggregation and composition

Composition is more restrictive. When there is a composition between two objects, the composed object cannot exist without the other object. This restriction is not there in aggregation. Though one object can contain the other object, there is no condition that the composed object must exist. The existence of the composed object is entirely optional. In both aggregation and composition, direction is must. The direction specifies, which object contains the other object.

Example: A Library contains students and books. Relationship between library and student is aggregation. Relationship between library and book is composition. A student can exist without a library and therefore it is aggregation. A book cannot exist without a library and therefore its a composition. For easy understanding I am picking this example. Don’t go deeper into example and justify relationships!



Abstraction is specifying the framework and hiding the implementation level information. Concreteness will be built on top of the abstraction. It gives you a blueprint to follow to while implementing the details. Abstraction reduces the complexity by hiding low level details.

Example: A wire frame model of a car.


Generalization uses a “is-a” relationship from a specialization to the generalization class. Common structure and behaviour are used from the specializtion to the generalized class. At a very broader level you can understand this as inheritance. Why I take the term inheritance is, you can relate this term very well. Generalization is also called a “Is-a” relationship.

Example: Consider there exists a class named Person. A student is a person. A faculty is a person. Therefore here the relationship between student and person, similarly faculty and person is generalization.


Realization is a relationship between the blueprint class and the object containing its respective implementation level details. This object is said to realize the blueprint class. In other words, you can understand this as the relationship between the interface and the implementing class.

Example: A particular model of a car ‘GTB Fiorano’ that implements the blueprint of a car realizes the abstraction.


Change in structure or behaviour of a class affects the other related class, then there is a dependency between those two classes. It need not be the same vice-versa. When one class contains the other class it this happens.

Example: Relationship between shape and circle is dependency.

REST Vs SOAP, The Difference Between Soap And Rest

April 29, 2012 Leave a comment

This article is to compare REST vs SOAP. There is huge difference between REST and SOAP. Comparing SOAP and REST is not just right as they are different things. It is like comparing orangutan and octopus, I have high regard for both of them. But still, as it is a popular topic lets have a discussion on SOAP vs REST.

Roy Fielding was a member of the team that wrote the specification for HTTP and co-founder of Apache HTTP server project. He introduced the word REST and the concept in his doctoral thesis in 2000. REST disruptively took over as an architectural style for web services implementation.

  • SOAP stands for Simple Object Access Protocol. REST stands for REpresentational State Transfer.
  • SOAP is a XML based messaging protocol and REST is not a protocol but an architectural style.
  • SOAP has a standard specification but there is none for REST.
  • Whole of the web works based on REST style architecture. Consider a shared resource repository and consumers access the resources.
  • Even SOAP based web services can be implemented in RESTful style. REST is a concept that does not tie with any protocols.
  • SOAP is distributed computing style and REST is web style (web is also a distributed computing model).
  • REST messages should be self-contained and should help consumer in controlling the interaction between provider and consumer(example, links in message to decide the next course of action). But SOAP doesn’t has any such requirements.
  • REST is over HTTP, but SOAP can be over any transport protocols such HTTP, FTP, STMP, JMS etc.
  • REST has WADL like SOAP has WSDL
  • REST does not enforces message format as XML or JSON or etc. But SOAP is XML based message protocol.
  • REST follows stateless model. SOAP has specifications for stateful implementation as well.
  • SOAP is strongly typed, has strict specification for every part of implementation. But REST gives the concept and less restrictive about the implementation.
  • Therefore REST based implementation is simple compared to SOAP and consumer understanding.
  • SOAP uses interfaces and named operations to expose business logic. REST uses (generally) URI and methods like (GET, PUT, POST, DELETE) to expose resources.
  • SOAP has a set of standard specifications. WS-Security is the specification for security in the implementation. It is a detailed standard providing rules for security in application implementation. Like this we have separate specifications for messaging, transactions, etc. Unlike SOAP, REST does not has dedicated concepts for each of these. REST predominantly relies on HTTPS.
  • Above all both SOAP and REST depends on design and implementation of the application.

Flex Memory Management and Memory Leaks

November 14, 2011 Leave a comment

You probably heard, read or even learned that Flex was managing the memory automatically for you, does it mean you don’t have any responsibility regarding memory management in Flex? Absolutely not!

If you’re surprised by my answer, keep reading to understand how memory is managed in Flex using garbage collection, what responsibilities this is putting on developers, what the classical causes of memory leaks are and what are the good practices to enhance or optimize the memory management in your applications.


Let’s start by clarifying how Flex manages the memory before discussing common best practices regarding memory management in Flex applications.

Flex Memory Management

Flex Memory Allocation principles

The Flash Player is responsible for providing memory for your flex application at runtime. The memory that the Flash Player provides to Flex applications must be requested to the computer’s operating system. Knowing that OS memory allocation is a slow operation, the Flash Player is using a buffering technique to avoid requesting frequent allocations.

This technique consists in managing two different types of memory: the OS memory1 and the Application memory. The OS memory is requested by the Flash Player in big chunks for performance reasons and kept as a memory pool in which Flex objects can be allocated.

At startup, the Flash Player initializes the Application memory pool. Then, as the application creates objects, the pool is used to provide memory for the new objects. In case the pool wouldn’t have enough available memory for a new object, the Flash Player requests a new big chunk to the operating system.

Allocating Memory in Flex: OS and Application memory pools

When your Flex application deletes some objects, the Flash Player doesn’t release the corresponding OS memory but just makes it available for any further allocation (i.e. the memory is back in the Application pool). The OS memory is released only if a complete big chunk is not used anymore by your application.

Freeing Memory in Flex: OS and Application memory pools

To conclude on the Flex Memory Allocation topic, it must be mentioned that in Flex, you cannot explicitly delete an object (or free a chunk of memory). Object deletion, and related memory release operation, is automatically managed by the Flash Player itself, using a particular mechanism called Garbage Collection2.

Flex Garbage Collection

Creating objects in Flex is an explicit operation that you trigger by calling the new operator. On the other hand, deleting an object is not an explicit operation (i.e. there is no deleteoperator3.

It’s the Flash Player itself that is responsible to check which objects are useless and delete them. This mechanism is called Garbage Collection. Basically, a useless object is an object that is not anymore referenced by another active object (i.e. orphan objects). Identification of these orphan objects is a complex task and we’ll see later how you, as a developer, can help the Flash Player to make it efficient.

The global Garbage Collection process can be seen as a two steps process. The first step being to identify the useless objects; and the second simply consisting in releasing the corresponding memory. As we saw when detailing Flex Memory Allocation principles, the memory retrieved when a useless object is deleted becomes available for a future allocation or, in some cases, can be released at the operating system level.

Marking Objects for Deletion

The first step, usually known as “Marking objects for deletion”, is implemented using the two following procedures:

Reference Counting

Reference counting is one of the simplest methods for keeping track of active references. When a strong reference to an object is created, the object reference count is incremented. When a strong reference to an object is removed, the object reference count is decremented. If the reference count of an object reaches zero, it is marked for deletion.

This is simple, fast and efficient but limited since it doesn’t work for circular references (cross references between orphan objects). This is why the Flash Player supports a second garbage collection procedure called Mark and Sweep.

Note: References can also be Weak References.

Mark and Sweep

This second garbage collection procedure works in a reversed way compared to the Reference Counting since it relies on identifying objects that are still accessible somewhere in the object tree of the application.

The Flash Player starts at the root node of the application, and goes through every reference on it, marking each object it finds. It then iterates through each of the marked objects, marking their children. It continues this recursively until it has traversed the entire object tree of the application, marking everything it finds.

At the end of the process, if an object in memory has not been marked, it means that no active reference to the object was found. So, such objects can be marked for deletion.

Deleting Marked for Deletion objects

The second step of the Flex Garbage Collection process consists in deleting the objects that have been marked for deletion.

It is key to understand that this second step is a deferred operation. This means that objects are not deleted immediately when all active references are deleted. The deletion phase may happen at some “indeterminate” time in the future (yes, I said may because there are cases in which the deletion phase will never be executed).

The Flash Player uses a set of heuristics that look at RAM allocation, the size of the memory stack and different other criteria to determine when to trigger the deletion.

This is very important since it means that your objects, even when not referenced anymore, may continue to live for some time. It is then key to make such objects inactive so that they do not keep consuming CPU before they really be deleted (marked for deletion objects still receive events for example; the only difference compared to normal objects is that they won’t be rendered).

Garbage Collection Triggering

There is no way to force garbage collection for a production application. System.gc() is available but enabled only when the application runs in debug mode.

Anyway, when debugging applications, it may in some cases be useful to explicitly trigger the garbage collection. In such a case, you must know that calling System.gc() does not trigger the garbage collection in a synchronous way but queues the GC request such that it be executed on the next frame. You’ll often see people calling System.gc() twice in a row and explaining that the first call is for garbage marking and the second for garbage sweeping but, to my understanding, it does not work except if you wait for the next frame to call System.gc()again.

In addition to being an automatic process, there is no guarantee that all Garbage Collection steps be completed in one run. Most of the time, the Flash Player will execute the Garbage Collection in several incremental steps.

The last key characteristics of the Flex Garbage Collection process is that it is triggered only when allocating. This means that memory is not released when it not used anymore, but, instead, when more memory is requested by the application.

Note: Grant Skinner created a Garbage Collector Interactive Simulator that nicely illustrates these principles.

Best Practices regarding memory management

Now that we discussed how memory is managed in Flex using garbage collection, let’s see what developers can do to help the garbage collection process and to limit memory leaks in their applications.

Reduce consumption

The first easy way to reduce memory issues is just to allocate objects only when needed. This means deferring object allocation until really necessary (in createChildren() for example). This may seem obvious but is not always done correctly since the Flex Component Life Cycleremains a mystery for some of us.

The second good way of reducing memory consumption is by recycling objects. Instead of releasing an old object and creating a new one, it is more efficient trying to reuse the already allocated object by resetting its properties. This can be done on a case by case basis for limited recycling or by implementing pools of reusable objects when manipulating a big number of instances. The Flex framework implements such a pool concept for item renderers by recycling them when scrolling a List or a DataGrid instead of allocating one renderer for any item in the container.

Cleaning up released objects

Whenever an object is released, you should ensure that it is removing all references it holds on other objects. We’ll see below what should be released and how but let’s first highlight that the complex part here is often determining when an object is released.

What I mean is that there is no destructor available in Flex, so a given object has no direct way of knowing that it has been released. In consequence, when developing a custom component, it is not always possible to ensure that releasing it is also releasing all referenced objects.

To workaround this, a very common approach is to implement (and document) a clean up interface that developers using your custom component must call when they want to release an instance of your custom component.

IDisposable interface

Such an interface usually offers a single method, dispose() or destroy(), in which you implement all the necessary clean up: stop timersremove event listenersunload loader objectsset variable references to null, … It’s then up to developers using your component to call the dispose() method just before releasing your object.

01 public interface IDisposable {
02     function dispose():void;
03 }
05 public class MyComponent implements IDisposable {
07     // Implements dispose method that must be called just before
08     // releasing a MyComponent object
09     public function dispose():void {
10         // Clean up:
11         //      - Remove event listeners
12         //      - Stop timers
13         //      - Set references to null
14         //      - ...
15     }
17     ...
18 }

Managing Event Listeners

Event listeners are probably the most common cause of memory leaks in Flex applications. Adding an event listener creates a reference to the object holding the handler that may prevent the garbage collection until it is removed (i.e. the dispatcher references the listener).

You should always remove event listeners that are no longer needed. For events that are fired only once, remove the event listener in the handler associated to the event:

01 public function MyComponent():void {
02     // Listen for CREATION_COMPLETE event
03     addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
04 }
06 public function creationCompleteHandler(event:FlexEvent):void {
07     // Stop listening to CREATION_COMPLETE event
08     removeEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
10     // initialization code...
11 }

For events that you must process regularly during the life of your component (such as Timers, or mouse events), clean them up in your dispose() method.

Note: Listeners on child objects generally do not cause memory leaks but it is anyway a good practice to remove them explicitly.

Using Weak References

When calling addEventListener(), you can force the reference that will be created on your callback to be a weak reference (by setting the fifth parameter of addEventListener() to true).

Weak references are not counted as strong references are. It means that an object that has no remaining strong reference to it but only weak references will be marked for deletion.

Many of us are complaining that the weakRef parameter should have true as its default value and it’s quite common considering always using weak references as a good practice; anyway, using weak references is not without potentially nasty consequences.

First of all, you should never use weak reference for an anonymous handler:

1 addEventListener("eventName", function(event) { ... code ... }, false, 0, true);

In this example, the only reference to the function is a weak reference, meaning that next time the garbage collection runs, the function will be removed, and so, not be called anymore. Anyway, I really consider that using anonymous functions is not recommended.

Now, even when using weak references for your event listeners, you should explicitly clean them up when they are no longer needed (remember that the object removal is not predictable).

Note: Weak references are also supported in the Dictionary object. To use weak references in a dictionary, just set the first parameter to true when calling the dictionary constructor.


Event.ADDED_TO_STAGE is only dispatched when a Display Object is added to the Display List and all its parents are also in the Display List4.

Event.REMOVED_FROM_STAGE is dispatched when an object or any of its parents is removed from the Display List5.

These events can be used to optimize the management of event listeners. When the object is on the stage, ensure that it listens to events, when it is not, stop listening to events (except for Event.ADDED_TO_STAGE of course).

01 // Disabling of event listeners while object is not on the stage
02 // to avoid consuming unnecessary CPU cycles
04 // Wait for ADDED_TO_STAGE event before enabling listeners
05 public function MyComponent():void {
06     // Listen for ADDED_TO_STAGE event
07     addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
08 }
10 // When removed from stage, disable all listeners except ADDED_TO_STAGE
11 private function removedFromStageHandler(event:Event) {
12     // Stop listening to REMOVED_FROM_STAGE
13     removeEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler);
14     // Remove all event listeners that are not needed while the object is
15     // not on the stage
16     removeEventListener(...);
17     // Listen to ADDED_TO_STAGE
18     addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
19 }
21 // When added on stage, (re)enable all listeners
22 private function addedToStageHandler(event:Event):void {
23     // Stop listening to ADDED_TO_STAGE
24     removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
25     // Enable all event listeners used by the object when it is on the stage
26     addEventListener(...);
27     // Listen to REMOVED_FROM_STAGE
28     addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler);
29 }

I initially thought that Event.REMOVED_FROM_STAGE could be considered as a destructor but this is not the case! When an object is re-parented (moved from A to B), it will receive anEvent.REMOVED_FROM_STAGE (when removed from A) followed by an Event.ADDED_TO_STAGE(when added as a child of B).

Note: This may also happen when objects are part of a container supporting scrollbars. When the container is resized, scrollbars may appear or disappear. In such a case, all children of the container may be re-parented in/out an internal content pane created/deleted by the resized container.

Unloading loaders

Whenever using an object based on a loader (ImageSWFLoader, …), you should always call theunloadAndStop() method to unload the content from the loader and help the garbage collection.

Managing Variable References

When releasing an object, you should clean up references that it was holding in variables.

1 // Clean up variable references
2 myObject = null;
3 myArray = [];
4 ...


Flex developers are not responsible of allocating and freeing memory since this is done by the Flex framework using a Garbage Collection mechanism. But Flex developers are anyway responsible of helping the garbage collection by carefully managing data allocation and references clean up.

Managing references efficiently and identifying memory leaks is not an easy task. Fortunately, some tools are available to help us among which I strongly recommend the Flex Profilerprovided with Flex Builder.

List of footnotes:

  1. OS memory stands for Operating System memory []
  2. There two classical ways to handle memory allocation. With languages such as C++ the developer is responsible of allocating and freeing memory. With Flex or Java, the memory is managed at runtime using garbage collection that automatically takes care of allocating or freeing memory. []
  3. There is a delete operator in Flex, but it’s only for freeing dynamic properties, not for deleting objects. []
  4. Event.ADDED is dispatched even if the parent is not yet on the Display List []
  5. Event.REMOVED is not dispatched when the parent is removed from the Display List []

10 Ways to Skin an App

September 23, 2011 Leave a comment

flex theming

1. Style it with CSS

This is one of the quickest and easiest ways to start making your Flex 2 Application look a bit more “custom”. CSS styling can be applied using an external style sheet or directlyinline of your MXML. A great tool for creating and understanding CSS styling is Peter Baird’s Flex 2 Style Explorer. This tool also gives you the ability to export your CSS to use in your Flex app. Whether inline or as an external stylesheet.

Examples: Moxy Theme , Mac OS X Theme by Adobe Consulting

2. Go Graphical

Another method is Graphical Skinning, which can be a bit more time consuming, but allows for more control over the look of the UI. Most “unique” looking Flex applications use this method in combination with CSS styling to get a more custom look.Graphics can be created a few different ways using Photoshop, Fireworks, or Flash. Scale-9 or 9-slice tactics can be used to allow your graphics to scale uniformly with the component it’s applied to. Also, like styling, this method can be used inline or with definitions in anexternal CSS file.

Check out Narcisso Jaramillo’s great tutorial on how to do all this. If you’re using Photoshop there’s this video tutorial from Jesse Warden about getting a Photoshop design into Flex 2.

Examples: Messenger Theme , Picnik , Flip Flip Books

Resources: Flash 9 Button in Flex 2Integrating a Flash interface into Flex 2

3. Make it Programmatic

If you want the most control over the way you Flex 2 application looks, then programmatic skinning is the way to go. It is a more advanced method of skinning and requires programming knowledge. Eylon Stroh of Adobe put together a really great step-by-step walkthrough, including implementation of programmatic skinning.

Examples: Napkin Skin by Eylon Stroh

Other Styling and Skinning Resources: Programmatic Skinning with Flex 2 , Interface Customization in Flex , ScaleNine Resources

4. Customize the App Preloader

One of the ways you can usually tell an application was built using Flex is it loads in with the default preloader. I’ve run across several people in various forums asking about how to skin the preloader. The Adobe Live Docs provide a method and explanation on how to do this. Ted Patrick also provides some insight on how to do this.

Examples: Picnik , Flip Flip Books , Flipper FlexApps Viewer

5. Establish a Color Scheme

Another way to get a great looking Flex app is to establish a appealing and consistent color scheme. It seems like something small, but it can make a big difference when executed correctly. I know not everyone is a designer and picking colors can be scary, but it’s worth it. There’s a lot of great online tools to help with this. Of course, there’s Adobe’s Kuler, which is easy to browse and find a color scheme you like. Write or copy the values and use them to give you Flex app a new color scheme. There’s also Daily Color Scheme, this Color Scheme Tool, and I’m sure many others.

Keep in mind that color does play a big role in your application and depending on it’s functionality or purpose you may want to go with more neutral colors like greys, subtle color shandes or white.

6. Fonts

The way text looks in your app can set it appart from others. In Flex you can embed other fonts (inline or via external CSS file) to use for any purpose, whether for your application as a whole or in select locations to bring attention. At the moment Flex 2 only supports the embedding of TrueType fonts.

Choosing a font, like choosing a color sheme, can be tricky. Again, it depends on what you wnat to accomplish with it and insuring legibility and usability when implemented. Keep in mind that fonts range in price from free to fairly expensive.

Here’s a few resources for finding fonts: Font FreakFonts For FlashOrgdotFree-Fonts,DafontVeerAdobe Type

7. Icons

Usuability and an intuitive user interface can make or break an application. The use of visual cues can ease a users perception of an application and increase the pace at which they learn the app. Icons are an easy way to give users “directions” in what they need to do and can compliment or reenforce the text the icon may be next to. Like the saying goes, “A picture is worth a thousand words.” In some cases an icon can say more than text.

Here’s a few resources for icons: Fam Fam FamStock IconsGlyph LabIcon Buffet,Fast IconIcon ShockIcon BaseIcon Fish

8. Add Some Effects

Selectively adding static and animated effects like drop shadows, glows, etc. can help add a polished look to your Flex 2 app. You can use Flex’s effectscreate composite effects, or take advantage of importing Flash Filters for images and text. To get a better idea of what’s possible by using effects check out the Flex Component Explorer.

In addition, David Keutgens put together a Flex Effects Explorer, which makes it easy to see what these effects can do to various components in your app. And a more in depth display of Distortion Effects was created by Alex Uhlmann.

Other Effects Resources: Animated Color Transitions by Darron Schall

Examples: Flipper FlexApps ViewerJamJar

9. State Transitions

Smooth out your app’s state changes by creating transitions. With a little code components can grow, reveal, collapse, flip, etc. for any number of purposes. Definingmultiple transitions can create an even more fluid user experience.

Other Effects Resources: Animated Color Transitions by Darron Schall

Examples: FlexStore

10. Get Feedback

Successful applications are rarely built without the influence of other people and I know not everyone has access to advanced user group testing and polling. However, during the process of creating a UI it’s always a good idea to get feedback from people who are familiar with what you’re doing and, maybe more importantly, by those who are not. There’s a lot to learn from a fresh and unfamiliar perspective. In most cases, these perspectives can help shape a final product.

Categories: About

Free software and tools, projects using Adobe Air / Adobe Flex Action Script

June 10, 2011 Leave a comment

Adobe Air (Adobe Integrated Runtime) applications

To run this application you need to install a plugin developed by Adobe which is free ware click here to download (http://get.adobe.com/air/).

Address Book


Advanced Screen Saver


Analog Clock




Document Editor


Employee Directory List


File Compression Tool


Google Talk


Paint Application


Search Engine Optimization


Happy birthday gift to our friend


Android Applications:

For running this free software you need to install adobe plugin runtime.air which is free ware available in android market click here to download (https://market.android.com/details?id=com.adobe.air). Flash plugin for android mobile application click here to download (https://market.android.com/details?id=com.adobe.flashplayer).

Contact List Databasae:  This is free software used to save the list of contact details in your phone memory card. user can directly call , sms, email to the selected contact from the displayed list of contact. User can also export the contact list into pdf file for external usage.


Windows Applications:


I will update this post when ever i had developed a free ware software for you.

Difference between WebORB and FluorineFx

May 12, 2011 3 comments

I’m noticing some of the sames and some of the stark differences between WebORB, the commercial yet free .NET Flash Remoting tool and FluorineFx, the open source alternative.

To summarise thus far:


  • Have a Console feature which allows you to see all the classes you are exposing to the remoting client and invoke them.
  • Work with VS2008 (I have only tested the .NET 2.0 framework) and Flex 3.
  • Have a Windows Service feature that allow you to deploy it alongside your AIR application for better client-side functionality (though by nature that must limit them to Windows deployments, no?)

WebORB: (v3.5 for .NET)

  • Is a free product, but commercially owned and closed source.
  • The licensing allows the software to be used in every scenario except redistribution.
  • Has a very comprehensive Console app that handles security on all namespace/class/method levels very nicely.
  • Has very useful codegen tools within the Console to get you going – both for AS and C#/VB.NET.
  • Has reasonable documentation to go along with it (it is still quite lacking in content and organisation)
  • Has a database tool in the Console (WDML) that essentially takes your DB structure and creates a C# or VB.NET Solution interfacing to all tables/views/stored procs. Also creates AS classes to interface with this data.
  • Exposes all of the DLL to the user. However, there is the option in .config file to turn on “closed” method which means you need to turn each service/method you want.
  • Uses a yahoo mail group to communicate between the developers and the users. The support is helpful to a point… they don’t answer every single question on there, but do answer the crux of them generally.

FluorineFx: (v. for .NET)

  • Has a Console app also, but with much less functionality than WebORB
  • Has significant multi-framework (Cairngorm, PureMVC, etc) style actionscript codegen.
  • Has documentation but is seriously lacking in examples. Not easy for new users to understand where to go once it’s working.
  • Has a specific implementation of DataSets and DataTables that is not as intuitive as WebORB. A DataTable for example has the “serverInfo” property which when expanded reveals a cursor, the list of columns and the list of data.
  • Has a nice project setup wizard in Visual Studio.
  • Security support for services must all be done manually in the configuration files.
  • Uses C# Attributes to expose classes as Services. (use [RemotingService(“Fluorine sample service”)] above the class definition.
  • Uses a mailing list for communication, and generally everyone is very helpful.
  • Can and will provide quick additions to the code and SVN releases of new versions based on requests/issues in the mailing list.
  • It’s Open Source, so you can actually learn the ins and outs of AMF and remoting. And, if you’re not happy, get in there and modify the code.

I appreciate both products but feel there needs to be a serious overview of documentation, as I’ve read through both and still find myself not 100% sure about the whole system.

Personally, I think Adobe have something to answer for here. I know they are pushing Blaze and I understand that Java-based Blaze is cross-platform and complies to Adobe’s needs… But seriously, C# and Visual Studio are an amazing partnership in developing software, and I won’t give up developing server-side code in them until something as good as it comes out (fingers crossed that Mono keeps plugging away).

I would like to see Adobe step up into this market and help everyone out, because, let’s face it, Flex and AIR don’t meet their potential until they are hooked up into a server-side component.