Archive

Archive for the ‘Adobe’ 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 

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

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

Flash Builder4 – Helpful links

August 21, 2010 Leave a comment

Flash Builder 4 – Helpful Links (Good articles)

Installing subversion plug-in (Link)

Difference between Flex 3 and Flex 4 By Joan Lafferty (Link)

Whats new in Flex 4 By Deepa Subramaniam (Link)

Whats new in Flash Builder 4 by Andrew Shorten (Link)

Categories: Adobe, Flex

Web multimedia: 6 reasons why Flash isn’t going away

August 19, 2010 Leave a comment

I was reading an article on Computer world and I was very impressed with the content and wanted to share this in here: Its a 4 page article

Article 6 reasons Flash / HTML5 on Computer World

Here are few points I liked most in the post:

Page 1:

“Quite frankly, Flash is a great animation tool, and it’s used for a lot of interactivity. Those kind of interactive elements are difficult to do in HTML 5,” Barberich says.

Page 2:

Although YouTube (which is owned by Google) is experimenting with HTML 5, content protection is one of the reasons why the site still needs Flash, said John Harding, a software engineer for YouTube

Page 3:

Perhaps the most widely reported of these efforts is the open-source Smokescreen project. Developed by RevShock, a mobile ad start-up, Smokescreen shows promise in its initial form, but its performance doesn’t match what users get with Flash content that runs natively. “Smokescreen exemplifies the immaturity of HTML 5,” says Rubin.

Page 4:

Largely lost in all the HTML 5 vs. Flash rhetoric is the possibility that the two technologies might simply work side by side. “I’m never really sure why HTML 5 and Flash can’t co-exist,” says Cote, “why it’s a zero-sum game.”

Rubin of NPD predicts that “within the next few years, we will likely see sites support both technologies. They will be able to achieve much of what they’ve traditionally done with Flash with HTML 5, but there’s no doubt that Flash will also continue to evolve and offer incentives to maintain its developer support.”

It is worth reading the article if you are in web development.

Categories: Adobe, Apple/ MAC, HTML5, iPhone

Extending CFC – DAO

August 17, 2010 2 comments

I came across very strange behaviour of extending CFC to another CFC for my DTO’s, which I was using to send data back to my Flex application using AMF.

My Main parent CFC had 3 properties.
I created new CFC and extended to the above CFC and added 3 more properties.
It works fine with in ColdFusion, but when I used it to return to my Flex application with type binding to my ActionScript DTO.
This wasn’t sending the parents properties to my Flex application.
To fix this I had to add all properties in my extended CFC (Child one).

Has any one come across the similar scenario?

How to Improve Flex data transfer from CF?

August 15, 2010 Leave a comment

I found this article and realised that transferring data from CF (CFC objects) to Flex application using this way will reduce the packet size and improve the performance.

You don’t need to create an object of the CFC type you want to send data across in your array, but what you need to do is take following steps and you can improve your application’s performance:

Following code is how I used to send data across to my Flex App:

<cfloop query=”myQuery”>

<cfscript>

local.result = createObject(“component”,”com.philip.myproj.myobj”);

local.result.setProp1(“myQuery.val1”);

local.result.setProp2(“myQuery.val2”);

arrayAppend(local.results, local.result);

</cfscript>

</cfquery>

The above method is how most of the developers use and it works fine only downside is this passes the complete object with all setter’s and getter’s and makes it bulky.

The following method is very light weight to pass the objects around and its documented in here: Writing the ColdFusion CFCs

you just need to change the object creation step with creating a simple Struct and you need to add an extra line to declare its a type of following CFC Value object likt this:

local.result[“__type__”] =”com.philip.myproj.myobj”;

Here is how you write the code using above type declaration:

<cfloop query=”myQuery”>

<cfscript>

local.result = structNew();

local.result[“__type__”] = “com.philip.myproj.myobj”;

local.result[“prop1”] = myQuery.val1;

local.result[“prop2”] = myQuery.val2;

arrayAppend(local.results, local.result);

</cfscript>

</cfquery>

And Flax / Flash is sharp enough to pick this up and automatically link with ActionsScript VO class and you will get typed data.

Categories: Adobe, ColdFusion, Flex

Abobe Flex ArrayCollection Sort

June 18, 2010 Leave a comment

This is a inbuilt functionality, which I used to sort the ArrayCollection.
I just wanted to put it here so this can be handy for my reference, 😉

public var availableRegions:ArrayCollection = new ArrayCollection();
/* Create the SortField object for the “data” field in the ArrayCollection object, and make sure we do a numeric sort. */
var dataSortField:SortField = new SortField();
dataSortField.name = “name”;
dataSortField.caseInsensitive = true;

/* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
var regionDataSort:Sort = new Sort();
regionDataSort.fields = [dataSortField];

/* Set the ArrayCollection object’s sort property to our custom sort, and refresh the ArrayCollection. */
availableRegions.sort = regionDataSort;
availableRegions.refresh();

Categories: ActionScript, Adobe, Flex

Action script Date Data Provider

June 18, 2010 3 comments

I had a requirement to show 2 drop downs for From and To selection of months and year, values like this:

Jan, 2010
Feb, 2010 and so on

And I used the following class to get this working like this.

Based on the class from
http://flexdateutils.riaforge.org/

public function getListOfMonthsAndYear(date:Date,noOfMonths:int = 12):ArrayCollection
{
var monthArr:ArrayCollection = new ArrayCollection();
var obj:Object = new Object();
var dt:Date = new Date();
//Fixed it on the basis of Matt’s comments, see below – comment section (Thx Matt)
// This because the above utility can’t handle 31 days, so forcing it to start of the day
date = new Date(date.getFullYear(),date.getMonth(),1);
dt = new Date(dt.getFullYear(),dt.getMonth(),1);
var n:int = 0;
for (var i:int = noOfMonths; i >= 0; i–)
{
n++;
dt = DateUtils.dateAdd(DateUtils.MONTH,-i, date);
obj = new Object();
obj[‘label’] = DateUtils.dateFormat(dt,’MMM YYYY’);
obj[‘data’] = DateUtils.dateFormat(dt,’YYYYMM’);
obj[‘no’] = n;
monthArr.addItem(obj);
}
return monthArr;
}

Then I created filtering on the second drop down to remove all the entries which are not relevent, like if you select in your From combo, say Month March, 2010 then you don’t want user to select Jan, 2010 in To combo as that would be wrong.

Here is the filter I created on Array Collection:

/**
* From Month Change Handler
*/
private function onFromMonthChange(event:Event):void
{
var comboBox:ComboBox = null;

comboBox = event.currentTarget as ComboBox;
this.currFromMonthNo = Number( comboBox.selectedItem.no );
this.monthToDP.filterFunction = this.toMonthFilter;
this.monthToDP.refresh();
if (this.monthToDP.length > 0) this.monthsTo.selectedIndex = 0;
this.criteria.monthFrom = this.monthsFrom.selectedItem.data;
this.criteria.monthTo = this.monthsTo.selectedItem.data;
}

private function toMonthFilter(obj:Object):Boolean
{
return Number(obj.no) >= this.currFromMonthNo;
}

Actually I used a trick to store number starting from 1 to end of the list in both collections and removed the items with the no’s above the selected one from To combo list

Enjoy

Categories: ActionScript, Adobe, Combo Box, Flex