Searchable Grid Widget

Update: 15 August 2007 –  CustomGrid v1.2 released

This is a small script which creates a searchable grid. This script is too basic and is for newbies (like myself 🙂 ). Check out the demo and source here. This scriptlet should give an idea about –

  1. Creating the SearchGrid custom control.
  2. Using the SearchGrid control.

In this script, we have two ArrayCollections. One for the column details and another for the data. This way, we are abstracting the columns info and data from the custom widget. The widget is basically a datagrid with a textfield on top. When the user types into the textfield, the grid filters to data which contain the typed text.
To try out the demo, try typing in words from the data in the grid andyou will find the grid filtering. The search logic in this script is from the ThoughtFactory MXNA Viewer. The MXNA viewer has many more features. All I have done here is pull out the logic for the search, modify it a little bit and create a widget that can be reused. Enjoy!

*Special thnx to Ajit for helping me optimize the code.

The Latest version of Search Grid is here .

An MXML component that embeds JavaScript in html

Abdul Qabiz’s Blog – India: A MXML component that embeds JavaScript in html
A MXML component that embeds JavaScript in html

Getting XML vals – Alternative

x.attributes()[i].name()) will give you the name of the ith attribute. Another syntax for this is x.@*[i].name()

HTML CSS – AS CSS

The CSS3Box Skin is a border skin that implements a small subset of the CSS3 Backgrounds and Borders Module working draft. It provides the ability to set border color, width, and corner radius values for each border and corner independently.

Blog | BenStucki.net

For more as goodies, check out this guy’s blog here.

Nice example of how tree can be used for menu

Demo : http://www.kcly.com/flex/expandMenu/expandMenu.html

Author : Luar Yen

Source : Click here to download

Date difference

Script source : [ http://jeff.mxdj.com/datediff_for_actionscript.htm ]

One of the tools I often find myself needing when developing applications in ActionScript is a utility for determining the difference between 2 dates. Following the structure of ColdFusion’s DateDiff function, I came up with this:


class DateFunction {
/**
dateDiff(datePart:String, date1:Date, date2:Date):Number<BR>
returns the difference between 2 dates<BR>
valid dateParts:<BR>
s: Seconds<BR>
n: Minutes<BR>
h: Hours<BR>
d: Days<BR>
m: Months<BR>
y: Years<BR>
*/
public static function dateDiff(datePart:String, date1:Date, date2:Date):Number{
return getDatePartHashMap()[datePart.toLowerCase()](date1,date2);
}
private static function getDatePartHashMap():Object{
var dpHashMap:Object = new Object();
dpHashMap["s"] = getSeconds;
dpHashMap["n"] = getMinutes;
dpHashMap["h"] = getHours;
dpHashMap["d"] = getDays;
dpHashMap["m"] = getMonths;
dpHashMap["y"] = getYears;
return dpHashMap;
}
private static function compareDates(date1:Date,date2:Date):Number{
return date1.getTime() - date2.getTime();
}
private static function getSeconds(date1:Date,date2:Date):Number{
return Math.floor(compareDates(date1,date2)/1000);
}
private static function getMinutes(date1:Date,date2:Date):Number{
return Math.floor(getSeconds(date1,date2)/60);
}
private static function getHours(date1:Date,date2:Date):Number{
return Math.floor(getMinutes(date1,date2)/60);
}
private static function getDays(date1:Date,date2:Date):Number{
return Math.floor(getHours(date1,date2)/24);
}
private static function getMonths(date1:Date,date2:Date):Number{
var yearDiff = getYears(date1,date2);
var monthDiff = date1.getMonth() - date2.getMonth();
if(monthDiff < 0){
monthDiff += 12;
}
if(date1.getDate()< date2.getDate()){
monthDiff -=1;
}
return 12 *yearDiff + monthDiff;
}
private static function getYears(date1:Date,date2:Date):Number{
return Math.floor(getDays(date1,date2)/365);
}
}

there is only one public method to interact with, that is dateDiff. You can use it like this:

var now:Date = new Date();
var kaliBDay = new Date(2004,5,23,11,17);
trace("Diff between "+ kaliBDay + " and now " + DateFunction.dateDiff("y",now,kaliBDay) +" in years");

Following the lead from the CF function, you can pass in dateParts of “y” for years, “m” for months, “d” for days, “h” for hours, “n” for minutes or “s” for seconds. If you want to add new date parts, simply right the method, and reference it in the getDatePartHashMap() method. For example, to add a new date part “ms” for milliseconds, I’d add one more line to getDatePartHashMap which said:

dpHashMap["ms"] = compareDates;

This can be done, as the compareDates method is already written to determine the number of milliseconds between any two dates.

Most of the methods are pretty straight forward, the getMonths is more complex, as the number of days in any given month is different, so it wasnt a simple division based on the millisecond difference, like all the other calculations were.‘ve extended this class a bit more, and added dateAdd() functionality to it as well.

Disabling page in accordion

Source : [ http://merhl.com/webdevblog/index.php?itemid=37 ]

If you ever need to disable a accordion pane child then you need to use the getHeaderAt(i) method. For example I have an accordion with the id of “accord” and need to disable the second child in the pane until some user interaction.

accrod.getHeaderAt(1).enabled=false
accrod.getHeaderAt(1).toolTip=”Please select something”

I also made specific toolTip for the child as well. I’m pretty sure you can do the same thing in flash since this is all AS code.