Skinning scrollbar in flex

All the components can be customized in flex.
Add the following lines of code in your stylesheet to customize your scrollbar

ScrollBar {
downArrowUpSkin: Embed(source="/assets/downArrow.png");
downArrowOverSkin: Embed(source="/assets/downArrowOver.png");
downArrowDownSkin: Embed(source="/assets/downArrow.png");

upArrowUpSkin: Embed(source="/assets/upArrow.png");
upArrowOverSkin: Embed(source="/assets/upArrowOver.png");
upArrowDownSkin: Embed(source="/assets/upArrow.png");

thumbDownSkin: Embed(source="/assets/thumb.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7");
thumbUpSkin: Embed(source="/assets/thumb.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7");
thumbOverSkin: Embed(source="/assets/thumb.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7");

trackSkin: Embed(source="/assets/scrolltrack.png",
scaleGridLeft="7", scaleGridTop="4", scaleGridRight="8", scaleGridBottom="6" );

}

Developing a good application - part1

These days we get to see more and more web applications showing its face. Everyone speak about web2.0. Web applications are moving from a traditional page by page navigation to single page.Unlike olden days where the application doesn't care about users,usablity, etc...these days the developers are more concerned about the user satisfaction, user experience...Every developer bound to discuss about the best way to develop an application.
I have just made a small research on this. I put in few details on this

1. For any application, be careful of first time users.
2. Don't make them get stuck while experiencing your application.
3. Make simple interactions.
4. Help them with a step by step information.
5. Use Activity based planning
6. List down all the possible feature list
7. Decide what to be done and what not

yahoo UI v 2.2.0 released

Yahoo has released its new version of YUI after a long time. Get the latest version here
The newer version include three new components

1. Browser history manager
2. Data table control
3. Button control

Get more information here

Creat your own mashups with Yahoo! pipes

A new AJAX application named Yahoo! Pipes from Yahoo! is used to create Mashups. The entire application is created with YUI. Each components are linked through pipes. components can be added by a simple drag-n-drop . you can add user input, operators and filters to create the final result. A debugguer at the bottom page gives the possibility to monitor inputs, outputs,etc.
For eg: You can customize the output of google search and yahoo search through this app
Create your own mashup by browsing available pipes, clone.

Generate and load XML in PHP

This is a tutorial for creating a new XML file from PHP and loading the XML file.
This tutorial has two files generatexml.php and loadfeeds.php

Requirements:
1. PHP5
2. Apache
The XML files are generated in PHP with the help of DOM. The following are the PHP codes

Creating an XML :
Create a PHP file with the name generatexml.php and copy and paste the code in it

$doom = new DOMDocument("1.0");

//create the root node of the XML file
$root = $dom->appendChild($dom->createElement("demo"));

// this is used to create the FRONTEND node
$frontend = $root->appendChild($dom->createElement("frontend"));
//chlids of frontend node
//first node
$flash = $frontend->appendChild($dom->createElement("app"));
$flash->appendChild($dom->createTextNode("Flash"));
//second node
$ajax = $frontend->appendChild($dom->createElement("app"));
$ajax->appendChild($dom->createTextNode("Ajax"));

// this is used to create the SERVERSIDE node
$serverside = $root->appendChild($dom->createElement("serverside"));
//chlids of frontend node
//first node
$php = $serverside->appendChild($dom->createElement("app"));
$php->appendChild($dom->createTextNode("PHP"));
$php->setAttribute("type","opensource");
//second node
$rails = $serverside->appendChild($dom->createElement("app"));
$rails->appendChild($dom->createTextNode("Ruby on Rails"));

// this is used to create the BACKEND node
$backend = $root->appendChild($dom->createElement("backend"));
//chlids of frontend node
//first node
$mysql = $backend->appendChild($dom->createElement("app"));
$mysql->appendChild($dom->createTextNode("MySQL"));
$mysql->setAttribute("type","opensource");
//second node
$postgres = $backend->appendChild($dom->createElement("app"));
$postgres->appendChild($dom->createTextNode("PostgreSQL"));

//save the XML file created
$dom->formatOutput = true;
$dom -> save("demo.xml");

Loading an XML :
Create a PHP file with the name loadfeeds.php and copy and paste the code in it

$dom = new DOMDocument("1.0");
header("Content-Type: text/xml");
$dom ->load( 'demo.xml' );
echo $dom ->saveXML();

First execute generatexml.php to create a xml file "demo.xml" in the current directory.
Then execute loadfeeds.php to load the xml file

Flex style explorer V 2.0.1 released

Adobe consulting has relased the newer version of flex style explorer. The latest build has number of new features. Some of the features include Export All CSS , advanced color picker, support for styleName styles etc..
Flex developers now can customize and stylize their application in a jiffy.
The application has an View source option which will be helpful for flex developers.

EXPERIENCE THE APPLICATION

Full screen mode in flash/flex applications

One of the cool feature of the latest update of flash player9 is the support of full screen mode. To view the applications in the full screen you need the flash player version 9,0,28,0 or greater. Get the latest flash player here.

Note :
During the full screen mode most of the keyboard controls are disabled. Only the keys for exiting the mode will work. So you can't keyin the text during the fullscreen mode. The mouse events are allowed in this mode.

To create the flash/flex applications to support full screen do the following

1. Download and install the latest version of flash player
2. Download the sample files which is zipped. The archive contains two important files playerglobal.swc and a playerglobal.abc
3. Flash 9 :
Copy playerglobal.abc from the ZIP file and replace the older version in your Flash installation here:
Flash 9 Public Alpha/en/Configuration/ActionScript 3.0/playerglobal.abc

Flex 2.0: Copy playerglobal.swc from the ZIP file and replace the older version in your Flex SDK
Flex Builder 2/Flex SDK 2/frameworks/libs/playerglobal.swc

4. Use the following As2.0 and AS3.0 in your application on any mouse event. This ActionScript that initiates full-screen mode can be called only in response to a mouse click or keypress. If it is called in other situations, it will be ignored (in ActionScript 2.0) or throw an exception (in ActionScript 3.0).

Flash 9:

Stage["displayState"] = "fullScreen"; //fullscreen mode
Stage["displayState"] = "normal"; //normal mode

Flex 2.0:

import flash.display.Stage;
import flash.display.StageDisplayState;
import flash.display.InteractiveObject.*;

      //Go to Full screen mode
 private function goFullScreen():void
{
stage.displayState = StageDisplayState.FULL_SCREEN;
}   
//return back to normal mode
private function backToNormal():void
 {
    stage.displayState = StageDisplayState.NORMAL;
 }

5. And finally to make the full screen mode work,you need to add a
new parameter to the OBJECT and EMBED tags in your HTML. 

In param tag: name="allowFullScreen" value="true"
In embed tag: allowFullScreen="true"

To get more information about the flash player full screen
read the article