다시 한번 시작해보자. 너무 오래 쉬었네..^^

AIR Window Basics

• 두 가지 Window APIs

NativeWindow Class	JavaScript Window Class
Flash-oriented Flash stage와 display list 사용 visual object 추가: Window stage의 display list에 추가	HTML-oriented HTML, CSS, JavaScript 사용 visual object 추가: DOM에 추가

• HTML Window의 nativeWindow property
  
  • HTML Window는 NativeWindow의 특수한 카테고리
  • nativeWindow 프로퍼티를 통해서 기본이 되는 Native Window 인스턴스에 접근할 수 있다.

• Event-based programming model
  
  • Window object의 프로퍼티를 변경하거나 외형, 행동에 영향을 미치는 메서드를 호출하면 Event가 발생하여 관련된 컴포넌트들이 적절하게 반응하도록 한다.

• 참고
  
  • window API에 대한 보다 상세한 문서:

http://livedocs.adobe.com/labs/flex/3/langref/mx/core/Window.html http://livedocs.adobe.com/labs/flex/3/langref/flash/display/NativeWindow.html

• 기본 윈도우
  
  • 어플리케이션 기술 파일(ProjectName-app.xml)의 rootContent element에 지정한 파라미터를 이용하여 자동으로 생성된다.
  • rootContent가 SWF 파일이면 NativeWindow가, HTML 파일이면 HTML Window가 생성된다. (# 이후 HTML 윈도우에 대한 내용은 생략 #)

1. <rootContent systemChrome="standard" transparent="false" visible="true">
   [SWF reference is generated]</rootContent>

•  Styles of Native Windows
  • Type, System Chrome, Transparency 값의 조합으로 설정한다.
  • OS에 따라 각 설정 조합이 아래와 같이 표현되며, 함께 쓰일 수 없는 조합에 주의해야 한다.

 Window 생성하기

•  Window 생성 방법
• • 기본 윈도우(First window): 어플리케이션 기술 파일의 rootContent에 파라미터로 기술된 속성을 가지고 자동으로 만들어진다. Stage.window property를 통해서 접근
  • NativeWindowInitOptions object 생성/설정 후 window 생성자에 넘겨서 생성(ActionScript): 생성자가 돌려주는 object reference로 직접 접근
  • JavaScript Window.open() method: 생략 

1. //create the init options
2. var options:NativeWindowInitOptions = new NativeWindowInitOptions();
   options.transparent = false;
   options.systemChrome = NativeWindowSystemChrome.STANDARD;
   options.type = NativeWindowType.NORMAL;
3. //create the window
   var newWindow:NativeWindow = new NativeWindow(false,options);
   newWindow.title = "A title";
   newWindow.width = 600;
   newWindow.height = 400;
4. //add a sprite to the window
   newWindow.stage.align = StageAlign.TOP_LEFT;
   newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
   //show the new window
5. newWindow.visible = true;

Window 조작하기

• NativeWindow instance 얻기 
  • Window 생성자: var win:NativeWindow = new NativeWindow(false, options);
  • Window stage: stage.window
  • 같은 stage 위에 있는 Display Object: myDisplayObject.stage.window
  • 윈도우 이벤트: 이벤트의 target property가 이벤트를 발생시킨 윈도우를 가리킨다.
  • HTMLControl 또는 HTML Window: window.nativeWindow property를 통해서 접근
• 기타 작업 
  • 최대화: win.maximize();
  • 최소화: win.minimize() ;
  • 이전 크기로: win.restore();
  • 닫기
    • NativeWindow.close() method 호출
    • 비동기 작동: closing 프로세스가 진행되는 동안 어플리케이션은 계속 실행된다.
    • 닫는 작업이 모두 완료되면 close event를 발생시킨다.
    • 닫기가 종료된 후에도 NativeWindow object는 유효하지만 속성이나 메서드에 접근하면 대부분 IllegalOperationError가 발생한다.
    • closed property로 창이 닫혔는지 여부를 확인할 수 있다.
  • 윈도우 작업 취소(Cancellation) 
    • System Chrome에 대한 사용자 조작은 이벤트를 발생시키기 때문에 해당 event를 받아서 preventDefault()를 호출하면 해당 동작을 취소할 수 있다.
    • System Chrome이 아닐 경우 해당 작업에 대한 notification event를 발생시키고 preventDefault()가 호출되지 않았는지 확인하는 방법으로 취소를 구현할 수 있다.

1. public function onCloseCommand(event:MouseEvent):void{
       var closingEvent:Event = new Event(Event.CLOSING,true,true);
       dispatchEvent(closing);
       if(!closingEvent.isDefaultPrevented()) { 
2.         win.close();
       }
   }

navigateToURL 함수

AS3 어플리케이션으로부터 또 하나의 브라우저 윈도우를 열고 싶을 때, 또는 현재 AS3 어플리케이션을 실행중의 윈도우를 다른 HTML 컨텐츠로 바꾸고 싶을 때, navigateToURL() 함수를 사용한다. AS3이전 버전에서는 getURL()을 사용하였다. 아래는 navigateToURL() 함수의 정의.

public function navigateToURL(request:URLRequest, window:String = null):void

1 첫 번째 인수에는 URLRequest 오브젝트를 지정한다. 이 오브젝트에는 URLLoader 클래스에서는  리퀘스트 하는 URL이나 헤더 정보, 그리고 송신하는 데이터와 송신 방법 등을 지정한다.

2 번째의 인수에는 리퀘스트의 결과를 수신하는 윈도우 target을 지정한다. 이것은 디폴트값이 정의되고 있기 때문에 생략이 가능하다. 생략 했을 경우에는 새로운 윈도우가 열린다. 즉 "_blank" 를 지정한 것과 동등의 결과가 된다.

아래의 샘플에서는 navigateToURL()의 두번째 인수를 "_self"로 하고 있기 때문에 AS3 어플리케이션을 실행하고 있는 윈도우에서 컨텐츠를 열게 된다.

import flash.net.navigateToURL;

var myVars:URLVariables = new URLVariables();
myVars.currentTime = new Date().getTime();
myVars.city = "Tokyo";

var myReq:URLRequest = new URLRequest();
myReq.url = "http://www.sample.com/weather";
myReq.data = myVars;

// 현재의 윈도우에 컨텐츠를 연다.
navigateToURL(myReq, "_self");



navigateToURL() 함수를 사용하려면 import해서 사용한다.



sendToURL() 함수
AS3 어플리케이션으로부터 서버에 데이터를 보내고 싶지만 결과는 무시하고 싶을 때는 sendToURL() 함수를 사용한다. 사용법은 위에서 소개한 것처럼 navigateToURL() 함수와 거의 비슷하다. 차이는 2번째의 인수가 없다는 것이다.

public function sendToURL(request:URLRequest):void


import flash.net.sendToURL;

var myVars:URLVariables = new URLVariables();
myVars.user = "foo";
myVars.data = "hello";

var myReq:URLRequest = new URLRequest();
myReq.url = "http://www.sample.com/post";
myReq.data = myVars;
myReq.method = URLRequestMethod.POST;
// 서버에 데이터를 송신
sendToURL(myReq);

How to prevent pop-up blocking in Firefox

Using navigateToURL() method causes pop-up blocking feature activation in Firefox since Flash is a plug-in:

navigateToURL(new URLRequest("http://test.test.com")",_blank");

Use window.open() JavaScript method instead. I have created URLUtil class with openWindow() static method to make it easier:

package {
     import flash.external.ExternalInterface;
     public class URLUtil {
     protected static const WINDOW_OPEN_FUNCTION : String = "window.open";
     public static function openWindow(url : String, window : String = "_blank", features : String = "") : void
     {
        ExternalInterface.call(WINDOW_OPEN_FUNCTION, url, window, features);
     }
   }
}

Now my blog could be opened in a new browser window this way:

URLUtil.openWindow("http://test.test.com");

그동안 간단한 작업들은 TEXT 방식에 HttpService를 사용하여 작업을 했는데...얼마전 Open Source 기반에 DataService가 나왔다고 해서 미루다 미루다 이제서야 정리시작..ㅋㅋㅋ

BlazeDS(Blaze Data Service)는 2007년 12월 말에 Adobe에서 Open Source 일환으로 만들어진 Data Service라고 한다.. 그런데 왜 나는 이제 알았을까..ㅠ.ㅠ

BlazeDS가 제공하는 기능중 하나가 바로 바로 Remote Object Service방식이다.  Remote Object Service 방식은 LCDS(구 FDS)와 동일한 AMF3(Action Message Format 3)프로토콜을 이용해 통신하는 방식을 취한다는것이다.  몇 가지 기능만 뺀다면 유료인 LCDS와 같다는것이다... 이제 무료로 RemoteObject 방식을 사용할수 있다는것이다.

그렇다면 무료인 BlazeDB 와 LCDS는 어떤 차이가 있을까.
바로 LCDS에서 몇가지 기능을 삭제한것이 BlazeDB인것이다.(ADOBE도 먹고 살아야하니까....)

LCDS의 핵심기능은 바로 Data Managemnet / Remote Object Service / Messaging 기능인데.. 다른것도 있지만 다른것들은 않쓰니까 전부 패스..ㅋㅋ BlazeDB는 이중에서 Data Managemnet 기능을 제외한 2가지 기능을 지원한다고 한다. 하지만 Remote Object Service의 경우는 BlazeDB와 LCDS간에 성능차이는 없다고 하지만 Messaging의 경우는 LCDS가 CPU당 1000개 수준의 Dedicated messaging service를 지원하는 반면, BlazeDS에서는 CPU당 100개 수준의 Web container-based messaging service만을 지원한다는것이다.

그럼 BlazeDS란?
BlazeDS는 Adobe에서 만든 LCDS(Life Cycle Data Service)와 유사한 개념의 Open Source
프로젝트입니다.

참고로, LCDS와 BlazeDS의 기능상의 차이는 다음 그림에 잘 나와 있습니다.
전체 사각형은 LCDS의 기능 집합이여, 아래에 컬러(하늘색)로 표시된 부분만 BlazeDS의 기능입니다.

가장 중요한 기능은 Flex에서 Remote Object란 개념으로 서버상의 Java method를 바로 Call할 수
있다는 것입니다.
BlazeDS 없이는 Remote Object (이하 RO라 표현)를 사용할 수 없으며, 따라서 기존에는
HTTPService 혹은 SOAP을 이용한 WebService방식으로 서버상의 기능을 호출하게 됩니다.
가장 기본적인 방식인 HTTPService의 경우 servlet을 호출하여 결과값을 xml이나 text형식으로
받아서 사용합니다.

가장 기본적인 사용방법은 다음과 같습니다.
 <mx:HTTPService id="srvHTTP" method="POST" useProxy="false" url="simple" showBusyCursor="true" fault="Alert.show(event.fault.faultString, 'Error');"/>
위의 예에서 url 부분에 servlet의 경로가 들어가게 되고 POST방식으로 호출한다는 의미입니다.

하지만 RO를 사용하게 되면,
서버상의 remoting-config.xml 파일에 destination에 해당하는 부분을 정의한 후
 java method를 바로 호출하고 결과값을 primitive type혹은 javabean 형태로 받을 수 있습니다.

 [remoting-config.xml 파일]

다음은 전체 mxml파일입니다.

"Get Data"란 버튼을 클릭하면 simpleLoadService를 호출하고 데이터를 가지고 오게 됩니다.


다음은 실제 simpleLoadService로 선언한
flexintegration.sample.SimpleLoadService.java 파일의 내용입니다.

Database에서 값을 가져온 후 결과 데이터를 List로 만들어서 Flex쪽으로 리턴합니다.


이와 같이 RO를 이용하게 되면 서버쪽의 Java method를 바로 호출할 수 있어서 개발 속도를 향상 시킬수
있으며, xml이나 text파일이 아닌 serialize된 object를 전달받게 되므로 대용량 데이터의 경우 데이터
전송 속도의 향상도 기대할 수 있습니다.

위 내용은 DukeRick 의 블러그에서 많이 참조하여 재구성한것입니다.

Flex에서 DB와 연동하여 작업을 할려면 다양한 방법이 있지만 가장 많이 사용하는것이 아마 HTTPService일것이다.
처음 사용했던것이 데이터를 XML를 받아와서 파싱하는것인데.. 이것은 자동적으로 Flex에서 Bind할수 있어서 좋기는 하지만
XML TAG를 사용해야되서리.. 데이터 량이 많아 지면 데이터보다 TAG의 량이 기하급수적으로 늘어난다.

그래서 찾아보던중... 아마 옛날에 찾아봤지..ㅋㅋㅋ 이제서야 정리 하는것이지만...
지돌스타님의 블러그에 가면 다양한 DataService의 종류와 성능에 대하여 자세히 나와있다..

기존에는 FDS(지금은 LCD), AMFPHP, OpenAMF, XML, JSON, TEXT이렇게가 가장많이 사용되고 있다.
기존것들에 대하여 간단히 분석된 결과를 보면

아마 그냥 위에 그래프만 보아도 어떤것 사항인지 알것이다..
데이터량에 따라서 수행도는 속도를 비교한것이다.

첨에 구현할때야 어느정도에 량이 될지 모르기때문에 그냥 구현만 하는데 나중에는 이것때문에 골치 아프게될것이다.

FDS야 유료이기도 하고 ADOBE에서 만들어진것이기때문에 가장 좋은 성능을 보일것은 당연하고 단순 처리 속도 뿐만 아니고
여러 기능들도 있지만 문제는 바로 유료인것..ㅠ.ㅠ 그것도 너무 비싸당...

그래서 내가 사용하는것이 TEXT방식이다... 위에 결과에 알수 있듯이 FDS와 별 차이를 보이지 않는다. 하지만 TEXT를 파싱해야되고 BIND시켜야 하는 것이 번거롭기 때문에 많이는 쓰지 않는듯....

하지만 파서는 한번 만들어 계속 쓰면 되는것이기때문에 별로 문제없다..ㅋㅋ

간단히 보면 아래와 같이 데이터가 들어온다면

TITLE | DATE | VALUE
제목1 | 20080801 | 12312
제목2 | 20080802 | 12312

데이터를 읽어드려서 '|' 구분자로 구별을 해서 ArratCollection에 넣어주고 BIND시키면 된다..ㅎㅎ 알고 보면 간단한데..ㅋㅋ

어떤것을 사용할건지는 개발자 마음이다.. 하지만 돈을 받고 하는 작업이면 개발자 마음이 아니고..ㅋㅋ 잘상의 해서...

위 내용은 지돌스타님의 블러그 내용을 참조 하여 재구성한것입니다.

Flex로 프로젝트를 하다가 정말 신기한 일이 있어서... 어의가 어의가..ㅠ.ㅠ
Flex로 구현된 싸이트에 가장 큰 장점이자 단점은 SWF를 다운받아야 된다는것이다.

한번 SWF를 다운받으면 Cache가 작동하기 때문에 다음에는 다시 않받아도 된다는 장점이 있지만
초기에 다운받기 위해서는 늦는 다는것이다.

더 웃기는 일은 IE에서는 SSL을 적용하여도(https://) 자동적으로 cache가 작동하지만 FireFox에서는 그렇지 않다는것이다.
FireFox에서는 사용자가 직접 config 파일을 조절해야된다.

FireFox 주소표시줄에 about:config라고 치면 아래와 같이 설정창이 나타난다. 거기에서 해당 내용을 떠블 클릭하면 된다.ㅠ.ㅠ

FLEX를 개발 하다 보면 다른 swf를 Loader해서 사용할 경우가 많다...
이럴때 파라미터도 받아야 되고 참 debug하기도 힘들고 애매 할때가 있는데...
이경우 trace()를 이용해서 swf의 log를 사용하면 참 사용하기 편하다.

---- 사용방법 -----
1. 제어판 프로그램 추가/삭제 에서 기존 플래쉬 플레이어를 삭제한다.

2. 플래쉬 디버그 플레이어(어도비 사이트에서 받아도 된다)를 설치한다.

3. spitzer.flair_1.0.3.zip 파일을 압축 풀어 이클립스 플러그인 디렉토리에 넣는다.

4. mm.zip파일을 C:\Documents and Settings\(자신의 로그인계정명디렉토리)\ 밑에 넣고 압축을 푼다.

5. 재부팅.

6. 이클립스 OR FLEX 빌더 실행

7. Window -> Preferences -> Flair -> Flash Log 선택.(C:\Documents and Settings\(자신의 로그인 계정명)\Application Data\Macromedia\Flash Player\Logs\flashlog.txt 를 선택한다.)

8. Window -> Show View -> Other -> Flair -> Flash Log 선택.

9. 로그보면 마구 개발.

----------- 실행 화면 ------------------------------

---------- FlexLog로 다른 사이트 보기 -------------------- ㅋㅋ
FlexLog를 이용해서 다른 사이트를 한번 봐봤다.
재미 있는 현상들이 나오는데...ㅋㅋ
xml파일로 구성된 data도 다 나오네...ㅎㅎ

AS로 TextInput과 Button을 이용해서 검색을 하려고 하다가 갑자기 Button을 누르기 귀찮아서리...
그냥 TextInput에서 Enter를 누르면 검색되게 Event를 등록해버렸다..ㅎㅎㅎ 귀찮니즘.ㅋㅋ

간단하게 ----

var searchInput:TextInput;
var searchButton:Button;

searchInput.addEventListener(KeyboardEvent.KEY_UP, searchEnterHandler);
searchButton.addEventListener("CLICK", searchClickHandler);

private function searchEnterHandler(e:KeyboardEvent):void
{
    if(e.keyCode == 13)
    {
        searchButton.dispatchEvent(NEW MouseEvent(MouseEvent.CLICK);
    }
}

private function searchClickHandler(e:Event):void
{
      검색을 하라...ㅋㅋ
}

Key Pressed	Key Code
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
page up	33
page down	34
end	35
home	36
left arrow	37
up arrow	38
right arrow	39
down arrow	40
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
left window key	91
right window key	92
select key	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103
numpad 8	104
numpad 9	105
multiply	106
add	107
subtract	109
decimal point	110
divide	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121
f11	122
f12	123
num lock	144
scroll lock	145
semi-colon	186
equal sign	187
comma	188
dash	189
period	190
forward slash	191
grave accent	192
open bracket	219
back slash	220
close braket	221
single quote	222

Flex 3.0에서 새롭게 지원한 AdvancedDataGrid에 여러 기능들이 있어 참좋네요..ㅎㅎ
이번에 사내에서 필요한 시스템이 있어서 개발하던중.. 여러가지 삽질을 하다가...ㅋㅋ 않 까먹을라고 소스정리..

구현 내용은 db에 있는 내용을 기준으로  여러개의 tab을 구현하고 그 tab 밑에 해당하는 AdvancedDataGrid를
동적으로 구현하는거(이말이 참 무섭네요 동적이라니..ㅠ.ㅠ) ... 필요에 의해서 filterFunction로 넣어주고..

data에 양이 좀만은 관계로 xml 파싱하는데는 좀 문제가 있어서 text파싱(지돌스타님 블러그에서 데이터가 많이 질경우 xml의 파싱속도에 문제가 있다고 나와 있는거는 다들 아는 사실)을 기본구조로 파싱하고
as만으로 AdvancedDataGrid와 filterFunction을 구현해 보았다..
-> 구현보다는 인터넷에 나와있는 여러 가지 예제 소스 짜집기..ㅋㅋ

HTTPService를 이용한 text 파싱 소스와 실제 구현되는 소스는 사내 규정상 open 할수가 없어서
제목에 맞는 내용만 간단하게 편집에서 내 블로그로..ㅋㅋ (이럼 보안에 문제 없겠지)

----------------------------------------------------------------------------------------

newFilterAd.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
 <mx:Script>
  <![CDATA[
   import mx.controls.Label;
   import mx.containers.HBox;
   import mx.containers.VBox;
   import mx.controls.TextInput;
   import mx.containers.Canvas;
   
   import mx.collections.ArrayCollection;
   import mx.collections.Grouping;
   import mx.collections.GroupingCollection;
   import mx.collections.GroupingField;
   import mx.controls.AdvancedDataGrid;
   import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
   import mx.events.*;
   
  //////////////// 이부분을 나중에 httpService로 변경하면 db에서 가져올수 있겠네..ㅋㅋ
   private var dataArr:ArrayCollection = new ArrayCollection([
     {data1:"aa", data2:"basdfb", data3:"11", data4:"77" },
     {data1:"aa", data2:"casdfc", data3:"22", data4:"88" },
     {data1:"bb", data2:"d234d", data3:"33", data4:"66" },
     {data1:"aa", data2:"e234e", data3:"44", data4:"55" },
     {data1:"bb", data2:"fsdgf", data3:"55", data4:"33" },
     {data1:"cc", data2:"gxvbxg", data3:"66", data4:"44" },
     {data1:"dd", data2:"hadfah", data3:"77", data4:"33" },
     {data1:"ff", data2:"iadfai", data3:"88", data4:"66" },
     {data1:"gg", data2:"j2344j", data3:"99", data4:"11" },
     {data1:"ee", data2:"k2342k", data3:"00", data4:"33" },
     {data1:"ee", data2:"l1414", data3:"11", data4:"55" },
     {data1:"qq", data2:"m4124m", data3:"22", data4:"66" },
     {data1:"vv", data2:"n1414n", data3:"33", data4:"77" },
     {data1:"vv", data2:"o1241o", data3:"44", data4:"00" },
     {data1:"vv", data2:"p1414p", data3:"55", data4:"00" },
     {data1:"pnewFilterAd.swfp", data2:"q1414q", data3:"66", data4:"44" }]);
     
   private var aDataGrid:AdvancedDataGrid = new AdvancedDataGrid();
   private var aGroupColliection:GroupingCollection = new GroupingCollection();
   private var aGrouping:Grouping = new Grouping();
   private var aDataGridOpen:Boolean = false;
   
   private var columnsArr:Array = new Array("data2","data3","data4");
   private var titleArr:Array = new Array();
   private var tArr:Array = new Array();
   private var aArr:Array = new Array();
   
   private var filterInput:TextInput = new TextInput();
   private var bgCanvas:Canvas = new Canvas();
   private var bgVBox:VBox = new VBox();
   private var bgHBox:HBox = new HBox();
   private var searchLabel:Label = new Label();
   
   private static var _advancedDataGridPercentWidth:Number = 98;
   private static var _advancedDataGridPercentHeight:Number = 95;
   private static var _canvasPercentWidth:Number = 99;
   private static var _canvasPercentHeight:Number = 99;
   private static var _vboxPercentWidth:Number = 100;
   private static var _vboxPercentHeight:Number = 100;
   private static var _hboxPercentWidth:Number = 100;
   
   private var aDtaGridID:String = "filterGrid";
      
   public function init():void
   { 
   
    /////// AdvancdDataGrid에 들어갈  DATA 및  Group //////////////////
    for(var i:uint=0; i < columnsArr.length; i++)
    {
     aArr[i] = new AdvancedDataGridColumn(columnsArr[i]);
    }
    
    aDataGrid.id = aDtaGridID;
    aDataGrid.columns = aArr;
    
    aGrouping.fields = new Array(new GroupingField("data1"));
    aGroupColliection.grouping = aGrouping;
    aGroupColliection.source = dataArr;
    
    aDataGrid.dataProvider = aGroupColliection;
    
    aDataGrid.percentWidth = _advancedDataGridPercentWidth;
    aDataGrid.percentHeight = _advancedDataGridPercentHeight;
    aDataGrid.sortExpertMode = true;
   
    aGroupColliection.refresh();
    
    /////////// Canvas Style 및  Size 세팅 ////////////
    bgCanvas.percentWidth = _canvasPercentWidth;
    bgCanvas.percentHeight = _canvasPercentHeight;
    bgCanvas.setStyle("backgroundColor","#FFFFFF");
    
    /////////// VBox Style 및  Size 세팅 /////////////
    bgVBox.percentWidth = _vboxPercentWidth;
    bgVBox.percentHeight = _vboxPercentHeight;
    bgVBox.setStyle("backgroundColor","#FFFFFF");
    bgVBox.setStyle("horizontalAlign","center");
    
    bgHBox.percentWidth = _hboxPercentWidth;
    bgHBox.setStyle("horizontalAlign","center");
    
    searchLabel.text = "data2 Search Filter :";    
    filterInput.id = "searchFilter";
    filterInput.addEventListener("change", dataFilterHandler);
    
    bgHBox.addChild(searchLabel);
    bgHBox.addChild(filterInput);
    
    bgVBox.addChild(bgHBox);
    bgVBox.addChild(aDataGrid);
    bgCanvas.addChild(bgVBox);
    this.addChild(bgCanvas);
    
   }
   
   private function dataFilterHandler(e:Event):void
   {
    dataArr.filterFunction = this.dataFilterFunction;
    aGroupColliection.refresh();
   }
   
   private function dataFilterFunction(item:Object):Boolean
   {
    var checkMatch:Boolean = true;
    
    if(filterInput.text != "")
    {
     var columnsString:String = item["data2"];
     var checkFilterString:String = filterInput.text;
     
     if(!columnsString || columnsString.toLocaleLowerCase().indexOf(checkFilterString.toLocaleLowerCase()) < 0)
     {
      checkMatch = false;
     }
    }
    
    if(filterInput.text != "")
    {
     aDataGrid.displayItemsExpanded = true;
    } else {
     aDataGrid.displayItemsExpanded = false;
    }
    
    return checkMatch;
    
   }
   
  ]]>
 </mx:Script>
 
</mx:Application>