Event handling in flex

25 05 2009

Let us take a small working sample of an application with events.

Create a flex project:

Here we are creating two canvases by using events we are going to communicate.

In main application we are adding listner

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
creationComplete=”init()” xmlns:local=”*”>
<mx:Script>
<![CDATA[
private function init():void {
this.addEventListener(MouseEvent.CLICK, clickEventHandler);
}

public function clickEventHandler(e:MouseEvent):void {
vs.selectedIndex = 1;
}

]]>
</mx:Script>
<mx:ViewStack id=”vs”>
<local:canvasOne />
<local:canvasTwo />
</mx:ViewStack>

</mx:Application>

First we have to add listner of an event for which we want to do some action on perticular event.

Here we added listner for the MouseClick event.

canvasOne.mxml:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundColor=”red” width=”400″ height=”300″>
<mx:Script>
<![CDATA[
public function clickEvent():void {
this.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
}
]]>
</mx:Script>
<mx:Label text=”Before dispatch event” />
<mx:Button label=”dispatch” click=”clickEvent()”  x=”32″ y=”37″/>
</mx:Canvas>

Here we are dispatching an event, that will be handled in the main application.

The click handler in main application will have the logic to do further calculations.

Here we just changeing the index of the view stack.

canvasTwo.mxml:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundColor=”green” width=”400″ height=”300″>
<mx:Label text=”After dispatch event” />
</mx:Canvas>





File Upload in Flex

21 05 2009

http://www.adobe.com/devnet/coldfusion/articles/multifile_upload.html

you can get the code for multiple file uploading in flex from the above link.





Firefox Addon CSS Viewer

19 05 2009

CSS Viewer takes one of the features in the Web Developer Toolbar and makes it a little easier. Just point your cursor at any element on the page and CSS Viewer will show you all of its CSS attributes, from size and position to fonts and colors, all in an easy to read overlay.

Its really nice to use, with this we can easily know the styles used in any web page. For developers (designers) it will very much helpful tool.





Customizing scrollbars in flex using css

14 05 2009


ScrollBar  {
up-arrow-skin: ClassReference(null);
down-arrow-skin: ClassReference(null);
trackSkin:
Embed(source="/assets/images/scrollbar/scrolltrack.png",
scaleGridLeft="7", scaleGridTop="5",
scaleGridRight="8", scaleGridBottom="7");
thumbDownSkin:
Embed(source="/assets/images/scrollbar/thumb.png",
scaleGridLeft="7", scaleGridTop="5",
scaleGridRight="8", scaleGridBottom="7");
thumbUpSkin:
Embed(source="/assets/images/scrollbar/thumb.png",
scaleGridLeft="7", scaleGridTop="5",
scaleGridRight="8", scaleGridBottom="7");
thumbOverSkin:
Embed(source="/assets/images/scrollbar/thumb.png",
scaleGridLeft="7", scaleGridTop="5",
scaleGridRight="8", scaleGridBottom="7");
}

This css will remove the Up arrow and Down arrows from the ScrollBar.

And the thumb and track of ScrollBar is customized with images(15X15).

By changing the thumb image and track image we change the Scrollars theme





Coding Guidelines

13 05 2009

Coding Guidelines

1. Long Functions

Over time functions often get longer and longer – extra functionality is added, edge cases are handled, and so forth. However, long functions are difficult to change, and difficult to understand.

Each function should ideally do exactly one thing: you should be able to sum it up in one sentence (and the method name should be a summary of that sentence).

If you find a function is getting too long, split it into sensible parts. Each part should follow the above rule.

2. Commented-Out Code

Some of these rules are open for debate. Not this one. I’ll go so far as to say that there is never an excuse for commenting out code.

* Are you trying to preserve some sort of history to the code? You should be using source control.
* You’re not sure if the code might be necessary: find out – and don’t commit until you’re sure.
* Perhaps you’re in the process of shotgun-debugging: step away from the code, and work out exactly what’s going on.

3. Copy-Pasted Code

Like commented out code, there’s really no excuse here. Programming IDEs should only support ‘cut’ and ‘paste’ – there’s no need for ‘copy’.

Instead of copying code, refactor it into a method, and call it. Copy-pasting is lazy – period.

4. Handled-but-Really-Unhandled Exceptions

I need to explain here: I’m not suggesting that every function should handle all exceptions that could be thrown. Rather, I think the handling of exceptions falls into two categories:

1. The function can handle a particular exception, and takes some action to correct it.
2. The function cannot handle a particular exception, and does not attempt to catch it.

What I’m referring to is code like this:

void Foo()
{
try
{
// …
}
catch( Exception e )
{
// Throw exception away, or just log it.
}
}

In general, doing nothing with an exception is a mark of bad code. If the function can’t handle it, then it shouldn’t be caught. Alternatively, if it didn’t need to be thrown, then try to amend the throwing code.

(Especially bad is throwing and catching the same exception in a single function. Exceptions should not be used for flow control; in situations like this, the entire function needs to be re-thought).

5. Large Numbers of Parameters

Functions taking large numbers of parameters (say, more than half a dozen) are usually a bad idea, and are generally indicative of either a function trying to do too much, or poor class organisation.

Often a function will grow to accommodate new functionality, and hence grows parameters. Split the function into separate, smaller, simpler functions.

Alternatively, if the function absolutely cannot be split, consider introducing a new class which encapsulates some or all of the original parameters, and passing that class as an indirect parameter.

6. Non-Obvious Names

Variable or function names such as foo or bar, swearwords, names, or otherwise clever or amusing really don’t have a place in professional code. They might make you laugh, but when someone else tries to read your code, they won’t thank you. (And remember – that ‘other’ person reading your supposedly clever code might be yourself in six months’ time).

The use of i,j,k is prrobably a little more open to debate – however their use as loop indices can usually be avoided if your language or libraries support more generic iteration constructs.

7. Deep Nesting

Just as functions shouldn’t be too long, so they shouldn’t be too wide. There’s no hard-and-fast rule, but if your conditionals or loops are nested more than about three deep, you should consider refactoring your code. Either pull the inner parts of the code into separate methods, or pull the complex conditions into functions. A line of code should never exceed approximately seventy characters (the standard editor width).

8. Beacon Comments

Sometimes you don’t even need to smell bad code – the original developer has helpfully pointed it out in the comments! If you see comments like:

// This is hacky…

// TODO: This is bad. FIX IT!

// This code ought to be refactored

…then you know something needs to be done.

9. Narcolepsy

…by which I mean inappropriate sleep() ing. If your code requires an (essentially random) sleep interval to function correctly, it’s likely to fail if the user’s machine is especially old, especially new, or just busy. Try attaching to an event that signals when the situation you want to be in occurs.

Another related smell is relying on the speed of the computer, the speed of video frames, or similar, to achieve a particular timing effect.

10. Helper Classes

This is something I’m guilty of from time to time, and I’m looking for comments as to the best way to avoid it. Helper or utility classes always seem to grow in large bodies of code, usually containing unrelated static methods. These clumps should be analysed and split or moved into classes that have one task.





Horizontal Scrolling Images component

13 05 2009

<?xml version=”1.0″ encoding=”utf-8″?>
<Canvas xmlns=”http://ns.adobe.com/mxml/2009″>
<Script>
<![CDATA[
import flashx.textLayout.formats.Direction;
import flash.utils.clearInterval;
import flash.utils.setInterval;

import mx.effects.AnimateProperty;
import mx.effects.easing.Exponential;

private var fx:AnimateProperty = new AnimateProperty();

private var index:uint;

/**
*     Right click event
*/
private function moveRight():void {
index = setInterval(doMove,300,100);
doMove(100);
}

/**
*     Left click event
*/
private function moveLeft():void {
index = setInterval(doMove,300,-100);
doMove(-100);
}

private function clear():void {
clearInterval(index);
}

/**
*     Moving animation
*/
private function doMove(direction:Number):void {
fx.stop();
fx.property = "horizontalScrollPosition";
fx.easingFunction = Exponential.easeOut;
fx.toValue = imageContainer.horizontalScrollPosition + direction;
fx.play([imageContainer]);
}

]]>
</Script>

<Canvas y=”409″ width=”723″ height=”85″ backgroundColor=”#DAD8D8″
cornerRadius=”8″ borderStyle=”solid”>
<Image source=”assets/images/NavigationLeft.png” mouseDown=”moveLeft()”
mouseUp=”clear()” doubleClickEnabled=”true” x=”3″ y=”35″
useHandCursor=”true” buttonMode=”true” />

<Image source=”assets/images/NavigationRight.png” mouseDown=”moveRight()”
mouseUp=”clear()” doubleClickEnabled=”true” x=”700″ y=”35″
useHandCursor=”true” buttonMode=”true”/>

<HBox id=”imageContainer” height=”75″ x=”21″ width=”678″ y=”5″
horizontalScrollPolicy=”off” horizontalGap=”0″ >
<Repeater id=”imagesRepeater” >
<Image height=”75″ width=”75″
source=”{sourceOfImage}”
useHandCursor=”true” buttonMode=”true” />
</Repeater>
</HBox>
</Canvas>

</Canvas>

This will create a component in which images will be displayed in horizontally aligned box.

By fixing the size of HBox, images will be displayed with in that area. By clicking on left

and right navigation images, we can navigate to either ends to see all images. This have

animation effect. We can change the effects as per the requirement

(plz comment in english)








Follow

Get every new post delivered to your Inbox.