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

What is User experience

October 14th, 2011 by aabhaanjan

What is User experience ?

User experience (UX) is about how a person feels about using a product, system or service. It is a process. In order to create a great experience for the users. It needs iteration. It should not be a rigid process, but it does need to exist with the product.

The Key questions comes with it

a)is it Useful? : The biggest question is the product which you are developing is how much useful for the user ?. The product should not be just a product what the manager wanted. The dveleoper or designer should have the creativity to make it useful. If the product is not useful for the target market it will be just the wastage of money and time.

b)is it Usable ?. These days human and computer interaction is growing fastly and in other words we can say it is now more practical.So we need to design and develop our product which makes User comfortable.

c)is it Desirable ?.One more parameter is how much it is desirable ? are we forcing things on the product or it is actually desirable.

d)is it Findable ?. We must design our product , keeping one eye on the findable navigation.

e)is it Accessible ?. The most important thing is the developed product will be accesible by everyone or how much percentage of target market. If it is going to be accessible by only 10% of target audiance then again it is wastage of effort.

f)is it Credible ?. Many things for the UX depends on the design element. What we are presenting and how much it is giving a feeling of trust to the user.

g)is it Valuable ?. With the customer satisfaction how much our product is valuable for the investors,Sponser thats is part of our UX.

we will have more articles on UX soon. Keep reading ūüôā

Using Cascading Style Sheets in Flex 4 or FB4

March 8th, 2011 by aabhaanjan

Cascading Style Sheets (CSS) : A style sheet is a collection of formatting rules for types of components or classes that include sets of components:

Differences in Flex between support of CSS and the CSS specification:

  1. Flex supports subclassing selectors.
  2. Flex supports a subset of the style properties that are available in CSS.
  3. Flex controls also have unique style properties that are not defined by the CSS specification.
  4. Flex controls only support styles that are defined by the current theme.
  5. Flex style sheets can define skins for controls using the Embed keyword.
  6. The CSS 3 wildcard namespace prefix syntax of *| that matches any namespace is not supported.
  7. The universal selector scoped to a particular CSS namespace is not supported. Namespaces are not known at runtime in Flex and as such the universal selector remains universal no matter what namespace it is scoped to in CSS.
  8. If you apply multiple class selectors to a component, the order of preference that the styles is applied is the order in which they appear in the styleName property’s space-delimited list, not the order in which they are defined in the CSS block or external style sheet.

Selector :  In CSS syntax, each declaration associates a style name, or selector, with one or more style properties and their values.

We can define multiple style properties in each selector by separating each property with a semicolon.

Example :

In this example   selector name is  myFontStyle:

[xml]

<?xml version=”1.0″?>

<s:Application

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

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

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

<fx:Style>

.myFontStyle {

fontSize: 15;

color: #9933FF;

}

</fx:Style>

<s:VGroup>

<s:Button id=”myButton” styleName=”myFontStyle” label=”Click Me”/>

</s:VGroup>

</s:Application>

[/xml]

About selector names

When applying style properties with CSS in a <fx:Style> block or in an external style sheet, the best practice is to use camel-case without hyphens .

Important point * : However, Flex supports both the camel-case and hyphenated syntax in style sheets

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

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

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

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

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

.myFontStyle {

fontSize: 15; /* Note the camelCase. */

}

</fx:Style>

<s:Button id=”myButton” styleName=”myFontStyle” label=”Click Me”/>

</s:Application>

[/xml]

Example :

[xml]

.myClass { … } /* Valid style name */

.my-class { … } /* Not a valid style name */

[/xml]

About namespaces in CSS

Why namespaces :

To distinguish between different components that share the same name, you specify namespaces in your CSS that apply to types.

For example, we can specify that a particular selector apply to all components in the Spark namespace only.

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

Example :

[xml]

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

<s:Application

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

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

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

xmlns:myComps=”*”

>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Style>

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

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

s|Button {

fontSize:16;

}

mx|VBox {

color:red;

}

</fx:Style>

<mx:VBox>

<s:Button label=”Click Me, Too”/>

</mx:VBox>

</s:Application>

[/xml]

Important points :

1. The following are valid namespace directives in Flex 4 that refer to the manifests in the related SWC files:

library://ns.adobe.com/flex/spark

library://ns.adobe.com/flex/mx

2. If you do not use type selectors in your style sheets, then you are not required to use the @namespace rule.

3. You can also specify that a particular selector apply to mixed nested namespaces.

4. This is common if you are using descendant selectors.

5. You can exclude an identifier, in which case the declared namespace becomes the default namespace.

6. For custom components, you can define your own style namespace; that style namespace must match the component’s namespace.

For example, components in the myComponents package use the style namespace ‚ÄúmyComponents.*‚ÄĚ

Example :

[xml]

<?xml version=”1.0″?>

<!– styles/CustomComponentsNamespace.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”

xmlns:comps=”myComponents.*”>

<fx:Style>

@namespace comps “myComponents.*”;

comps|MyButton {

color:green;

}

</fx:Style>

<comps:MyButton label=”Click Me”/>

</s:Application>

[/xml]

Style Array in MXML syntax and apply those values inline

February 2nd, 2011 by aabhaanjan

We can set the values of the Array in MXML syntax and apply those values inline.

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

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

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

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

<fx:Declarations>

<fx:Array id=”myDepthColors”>

<fx:Object>0xFFCC33</fx:Object>

<fx:Object>0xFFCC99</fx:Object>

<fx:Object>0xCC9900</fx:Object>

</fx:Array>

<fx:Array id=”myAlternatingRowColors”>

<fx:Object>red</fx:Object>

<fx:Object>green</fx:Object>

</fx:Array>

<fx:XMLList id=”treeData”>

<node label=”Node 1″>

<node label=”Subnode 1″>

<node label=”label 1″/>

<node label=”label 2″/>

</node>

<node label=”Subnode 2″>

<node label=”label 1″/>

<node label=”label 2″/>

</node>

</node>

</fx:XMLList>

</fx:Declarations>

<s:Panel title=”Test” width=”50%”>

<mx:Tree id=”tree”

width=”100%”

labelField=”@label”

dataProvider=”{treeData}”

depthColors=”{myDepthColors}”

alternatingItemColors=”{myAlternatingRowColors}”/>

</s:Panel>

</s:Application>

[/xml]

Tags: , ,

Defining Arrays for style properties using Action Script in Flex 4

February 2nd, 2011 by aabhaanjan

We can define the Array in AS by using a comma-separated list of values surrounded by braces.

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

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

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

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

creationComplete=”initApp()”

height=”500″>

<fx:Script>

<![CDATA[

public function initApp():void {

tree1.setStyle(“depthColors”,[0xFF3300, 0xFFCC99, 0xCC9900]);

tree1.setStyle(“alternatingItemColors”,[“red”, “green”]);

}

]]>

</fx:Script>

<fx:Declarations>

<fx:XMLList id=”treeData”>

<node label=”Node 1″>

<node label=”subnode 1″>

<node label=”label 1″/>

<node label=”label 2″/>

<node label=”label 3″/>

</node>

<node label=”subnode 2″>

<node label=”label 1″/>

<node label=”label 2″/>

</node>

</node>

</fx:XMLList>

</fx:Declarations>

<s:Panel title=”Style Array using Action Script” width=”100%”>

<s:layout>

<s:VerticalLayout/>

</s:layout>

<mx:Tree id=”tree1″

width=”100%”

labelField=”@label”

dataProvider=”{treeData}”/>

<mx:Tree id=”tree2″

width=”100%”

labelField=”@label”

dataProvider=”{treeData}”

depthColors=”[0xFFCC33, 0xFFCC99, 0xCC9900]”

alternatingItemColors=”[‘red’, ‘green’]”/>

</s:Panel>

</s:Application>

[/xml]

Tags: ,

Using Arrays for style properties of Tree component in Flex 4 or Flash Builder

February 1st, 2011 by aabhaanjan

By assigning colors to a property in an Array using comma-separated list to the property’s definition we can use array for style properties. The index is assigned to each entry in the order that it appears in the list.

Tree control’s depthColors style property can use a different background color for each level in the tree.

Example :

[xml]

<?xml version=”1.0″?>

<s:Application

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

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

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

<fx:Style>

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

mx|Tree {

depthColors: #FF3300, #FFCC99, #CC9900;

}

</fx:Style>

<fx:Declarations>

<fx:XMLList id=”treeData”>

<node label=”Node 1″>

<node label=”subnode1″>

<node label=”text1″/>

<node label=”text2″/>

<node label=”text3″/>

</node>

<node label=”subnode2″>

<node label=”text1″/>

<node label=”text2″/>

</node>

<node label=”text1″/>

<node label=”text2″/>

</node>

</fx:XMLList>

</fx:Declarations>

<s:Panel title=”Style Using Array” width=”100%”>

<mx:Tree id=”myTree” width=”100%” labelField=”@label” dataProvider=”{treeData}”/>

[/xml]

Tags: ,

External style sheets in Flex4 or FlashBuilder 4

January 28th, 2011 by aabhaanjan

style_css

In flex we can use external style sheet. We can choose a CSS file and set the properties of components in it by calling the  style sheet into the main application.

Example:

Test.mxml

[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:mx=”library://ns.adobe.com/flex/mx”

minWidth=”955″ minHeight=”600″>

<fx:Style source=”MyCSS.css”/>

<s:Button id=”btn”¬† label=”Example of External Skinning”

styleName=”button”

x=”103″ y=”28″ width=”483″ height=”89″/>

</s:Application>

[/xml]

MyCSS.css

[xml]

/* CSS file */

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

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

.button{

font-family:”Verdana”;

font-size:14px;

text-align:center;

color:#FF3300;

font-weight:bold;

}

[/xml]

Tags: , , ,

IMPORTANT POINTS ABOUT STYLE IN Flex 4 or Flash Builder

January 28th, 2011 by aabhaanjan

1. The default style sheets

Flex includes defaults.css style sheets in the following SWC files:

a.) flex4.swc (Spark theme style sheet)

b.)  frameworks.swc (default framework style sheet)

By default  all applications use these style sheets. These style sheets apply consistent styles across all components.

2. Local style definitions

We Use the <fx:Style> tag to define styles that apply to the current document and its children. The <fx:Style> tag contains style sheet definitions that adhere to the CSS syntax.

The <fx:Style> tag uses the following syntax to define local styles:

[xml]

<fx:Style>

@namespace namespace_identifiernamespace_string;

selector_name {

style_property: value;

[…]

}

</fx:Style>

[/xml]


3. StyleManager class

Using the StyleManager, we  can define new CSS style declarations and apply them to controls in the applications.

Setting styles with the StyleManager

To set a value using the StyleManager, use the following syntax:

styleManager.getStyleDeclaration(style_name).setStyle(“property”, value);

4. getStyle() and setStyle() methods

we use the setStyle() and getStyle() methods to manipulate style properties on instances of controls. The following example sets the fontSize to 15 and the color to 0x9933FF on only the myButton instance:

[xml]

<?xml version=”1.0″?>

<s:Application

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

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

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

creationComplete=”initApp()”>

<fx:Script><![CDATA[

public function initApp():void {

myButton.setStyle(“fontSize”,15);

myButton.setStyle(“color”,0x9933FF);

}

]]></fx:Script>

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

</s:Application >

[/xml]

5. Inline styles

Use attributes of MXML tags to apply style properties. These properties apply only to the instance of the control.

The following example sets the fontSize to 15 and the color to 0x9933FF on the myButton instance:

[xml]

<?xml version=”1.0″?>

<s:Application

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

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

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

<s:Button id=”myButton” color=”0xFF0033″ fontSize=”15″ label=”Sample of InlineStyle”/>

</s:Application>

[/xml]

6. Setting global styles

To set a global style that is inheritable, we set its value on the container.

All children of that container, including other containers, inherit the value of that style property.

By using global styles, we can apply noninheritable styles to all controls that do not explicitly override that style.

Flex provides the following ways to apply styles globally:

a.) StyleManager global style

b.) CSS global selector

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