Archive

Archive for the ‘Flex’ Category

Flex HTML ToolTip Component

October 9, 2012 Leave a comment

To enhance the normal tool tip functionality to have html style break/ font weight for a portion of string:

You need to create a action class like this:
package com.philip
{
import mx.containers.*;
import mx.controls.Text;
import mx.controls.ToolTip;
import mx.core.*;

public class HTMLToolTip extends ToolTip
{
public function HTMLToolTip()
{    super(); }

override protected function commitProperties():void{
super.commitProperties();
textField.htmlText = text;
}
}
}

to use this set this in your main component, call this function on creationComplete:

<![CDATA[
import com.*;
private function init():void{
ToolTipManager.toolTipClass = HTMLToolTip;
myBtn.toolTip = “<font color=’#ff00ff’ >this is <b>HTML</b>Tool<strong>Tip.</font>”

]]>

 

The original post has strong tag but that didn’t work for me in Flex 3.5 SDK <b> worked fine

 

Link to the original post 

Advertisements
Categories: ActionScript, Adobe, Flex

Add Hand Cursor to Flex Tab Navigator

August 25, 2011 5 comments

In Flex Tab Navigator, you can’t have Hand Cursor when you mouse over the tab’s, I had to do little hack to achieve this.

Created two functions and linked them with mouse over and mouse out events.

Say your Tab Navigator’s id is “myTabNav”:

Here are the functions which would do the trick:

private function setHandCursor(event:MouseEvent):void
{
var classInfo:XML = describeType(event.target);
var cn:String = classInfo.@name.toString();
if(cn == “mx.controls.tabBarClasses::Tab”)
{
//this will bring the hand cursor

this.myTabNav.buttonMode = true;
this.myTabNav.useHandCursor = true;
}
}
private function removeHandCursor(event:MouseEvent):void
{
var classInfo:XML = describeType(event.target);
var cn:String = classInfo.@name.toString();
if(cn == “mx.controls.tabBarClasses::Tab”)
{
// this will remove the hand cusror

this.myTabNav.buttonMode = false;
this.myTabNav.useHandCursor = false;
}
}

 

you need to do as above otherwise the hand cursor will either show on complete Tab Navigator

Categories: ActionScript, Adobe, Air, Flex

Read an Image from Local using Flex app

August 4, 2011 Leave a comment

I was working on one small requirement to read an image from local machine and see how it can display if you change size of canvas on fly. I found an article on this and changed the code a bit to make it work as I wanted it to work. you need to create a Flex project to run it in Flash Player 10 or above otherwise it won’t compile.

I have removed the save option in this code but you can change it back by changing visible property of the button.

Thanks to following article Load Or Modify and save local images with flash player 10

Here is the modified code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” backgroundGradientColors=”[0xFFFFFF,0xFFFFFF]” backgroundColor=”0xFFFFFF”>

<mx:Script>
<![CDATA[
import mx.graphics.codec.JPEGEncoder;
import mx.binding.utils.BindingUtils;
import mx.core.UIComponent;

import flash.net.FileReference;
import flash.net.FileFilter;
import flash.events.IOErrorEvent;
import flash.events.Event;
import flash.utils.ByteArray;
// From http://techblog.floorplanner.com/2009/05/04/load-modify-and-save-local-images-with-flash-player-10/
private var loadFileRef:FileReference;

private static const FILE_TYPES:Array = [new FileFilter(“Image Files”, “*.jpg;*.jpeg;*.gif;*.png;*.JPG;*.JPEG;*.GIF;*.PNG”)];
private var THUMB_WIDTH:uint = 240;
private var THUMB_HEIGHT:uint = 180;

private function loadFile():void {
imageView.visible = false;
loadFileRef = new FileReference();
loadFileRef.addEventListener(Event.SELECT, onFileSelect);
loadFileRef.browse();
}

private function saveFile():void {
var bitmapData:BitmapData = new BitmapData(THUMB_WIDTH, THUMB_HEIGHT);
bitmapData.draw(imageView);

var encoder:JPEGEncoder = new JPEGEncoder();
var rawBytes:ByteArray = encoder.encode(bitmapData);

var saveFileRef:FileReference = new FileReference();
saveFileRef.save(rawBytes);
}

private function onFileSelect(e:Event):void {
loadFileRef.addEventListener(Event.COMPLETE, onFileLoadComplete);
loadFileRef.load();
}

private function onFileLoadComplete(e:Event):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onDataLoadComplete);
loader.loadBytes(loadFileRef.data);

loadFileRef = null;
}

private function onDataLoadComplete(e:Event):void {
var bitmapData:BitmapData = Bitmap(e.target.content).bitmapData;
imageView.height = Number(heightTxt.text);
imageView.width = Number(widthTxt.text);
var matrix:Matrix = new Matrix();
matrix.scale(Number(widthTxt.text)/bitmapData.width, Number(heightTxt.text)/bitmapData.height);

imageView.graphics.clear();
imageView.graphics.beginBitmapFill(bitmapData, matrix, false);
imageView.graphics.drawRect(0, 0, Number(widthTxt.text), Number(heightTxt.text));
imageView.graphics.endFill();
imageView.visible = true;
if (saveButton.visible) saveButton.enabled = true;
}

]]>
</mx:Script>
<mx:Panel title=”Read image” paddingBottom=”5″ paddingLeft=”5″ paddingRight=”5″ paddingTop=”5″>
<mx:VBox>
<mx:HBox paddingTop=”5″ borderThickness=”1″>
<mx:Label text=”Height” width=”42″/><mx:Label text=”Width” width=”50″/>
</mx:HBox>
<mx:HBox paddingTop=”5″ borderThickness=”1″>
<mx:TextInput id=”heightTxt” width=”40″ text=”180″ restrict=”0-9″ /><mx:TextInput id=”widthTxt” text=”240″ width=”40″ restrict=”0-9″ />
<mx:Button label=”Load image” click=”loadFile()”/>
<mx:Button label=”Save image” visible=”false” click=”saveFile()” id=”saveButton” enabled=”false”/>
</mx:HBox>
</mx:VBox>
</mx:Panel>
<mx:Canvas id=”imageView” width=”240″ height=”180″ visible=”false” borderThickness=”1″ borderColor=”#CCCCCC” borderStyle=”solid”/>
</mx:Application>

Categories: ActionScript, Adobe, Flex

Setting up Flex Project for Flash Player 10 and above

August 4, 2011 Leave a comment

I had a requirement in my new Flex project to use flash player 10.0 or up when using SDK 3.5

I found few tips from one article (but it was based on Flash Player 10 beta).

Here are the modified steps I took to sort the issue.

1) – Modify FLEX_SDK/frameworks/flex-config.xml.
Edit , replacing 9.0.124 with 10.0.0:
2) Create new Flex Project
2) Right click on your project in Flex Builder 3 and opt for properties
click on Flex Compiler and make sure Required Flash Player version has
10.0.0

The above steps should let you create your Flex app for Flash Player 10.0 and above

Categories: Flex, Flex SDK

How to set width of close button icon (Flex)

July 19, 2011 Leave a comment

Here is how you can set close button icon width and height of the TitleWindow:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute” width=”400″ height=”300″
creationComplete=”init()”>
<mx:Script>
<![CDATA[

import mx.core.mx_internal;

private function init():void
{
use namespace mx_internal;
if(mx_internal::closeButton!=null)
{
mx_internal::closeButton.buttonMode = true;
closeButton.$width  = 14; //Change the button width to 14 pixels
closeButton.$height = 14; //Change the button height to 14 pixels
}
}

]]>
</mx:Script>

<mx:Style>
TitleWindow{
border-color: #FFFFFF;
corner-radius: 10;
closeButtonUpSkin=Embed(source=”/com/test/skin/assets.swf”, symbol=”ButtonUp”);
closeButtonDownSkin=Embed(source=”/com/test/skin/assets.swf”, symbol=”ButtonUp”);
closeButtonOverSkin=Embed(source=”/com/test/skin/assets.swf”, symbol=”ButtonDown”);
}

</mx:Style>

</mx:TitleWindow>

Categories: ActionScript, Air, Flex

View Generated ActionScript of Flex Project

March 13, 2011 1 comment

I found it very interesting to view how and what Flex Compiler does when it generates a SWF file of your project.

To see the ActionScript created by your complier, you can add a compiler argument in Flash Builder .

Navigate to Project > Properties > Flex Compiler > Additional compiler arguments,

and add -keep-generated-actionscript to the end of the existing arguments .

A folder named bin-debug/generated will be created automatically in your project, and many ActionScript files will be placed there .

Your application files will be in the form Name-generated .as .

Don’t forget to remove the compiler argument when you’ve finished exploring.

Categories: ActionScript, Flex

Flex- TitleWindow Close Button Hand Cursor

March 7, 2011 Leave a comment

I had requirement to bring the hand pointer on title window (Flex) close button when I am using an image to show the close button and here is the code (function) you need to write and call it on creationComplete Event.

private function init():void

{
if(mx_internal::closeButton!=null)
mx_internal::closeButton.buttonMode = true;
}

Categories: ActionScript, Adobe, Flex