'FLEX'에 해당되는 글 48건

  1. 2010.07.12 5. 개인 프로젝트를 시작하기위해서..... 분석5
  2. 2010.07.12 4. 개인 프로젝트를 시작하기위해서..... 분석4
  3. 2010.07.12 3. 개인 프로젝트를 시작하기위해서..... 분석3
  4. 2010.07.12 2. 개인 프로젝트를 시작하기위해서..... 분석2
  5. 2010.07.12 1. 개인 프로젝트를 시작하기위해서..... 분석1
  6. 2010.07.12 FLEX 3.0 - KeyboardEvent / MouseEvent를 이용한 TextInput에서 Enter Evnet - KeyCode 값
  7. 2010.07.12 FLEX 3.0 - AdvancedDataGrid와 filterFunction를 AS3.0으로 구현해보기.
  8. 2010.07.12 FLEX - Popup 창이 한개 띄어져 있다면 새로운 Popup 창은 띄우지 않고 기존 Popup 창에서 Data만 변경하기
  9. 2010.07.12 FLEX - Object 객체 값 출력하기
  10. 2010.07.12 FLEX - Popup창이 한개 띄어져 있다면 기존 popup창은 자동 닫고 새롭게 popup창 띄우기

5. 개인 프로젝트를 시작하기위해서..... 분석5

FLEX/FLEX Project 2010. 7. 12. 21:24

5. flex에서 유명한 아저씨(?)에 데모 사이트
url : http://demo.quietlyscheming.com/displayShelf/index.html

내가 flex에 관심을 가진 진짜 이유가 이 아저씨(?) 때문이다.. 정말 다양하고 신기한걸 만드시는데
그 소스를 다 오픈 해준다.. 해석이 될랑가 모르겠지만..
이번에 시작할려고 하는 개인 프로젝트도 이 아저씨의 open source기반하에 만들것이다... 음하하하

1. 메인
:

4. 개인 프로젝트를 시작하기위해서..... 분석4

FLEX/FLEX Project 2010. 7. 12. 21:24

4. 미국 전자 도서관
url : http://reach.inm.com/eLibrary/eLibrary.html

이곳은 정말 궁금한건... 상세정보로 검색결과문을 볼수 있는데 거기 안에서 text를 검색 할수 있다는 것이다.
저번 adobe air 행사에 갔을때 pdf를 flex에 매핑해서 pdf 파일을 검새관리 할수 있는 솔루션이 있다고 했는데
그것을 사용한것인지 아니면 다른 text검색인지 정말 궁금하다.. 여기에 장점은 이것밖에..ㅋㅋ

1. 메인 1

2. 메인 2

3. 상세 정보 1

4. 상세 정보 2
:

3. 개인 프로젝트를 시작하기위해서..... 분석3

FLEX/FLEX Project 2010. 7. 12. 21:23

3. 미국에 집파는 사이트...ㅋㅋ
url : http://www.asfusion.com/apps/homelocator/

이곳은 그렇게 큰 장점은 없다.. 그런데 yahoo map가 같이 연동해서 미국내 위치까지 지도에 나타난다.
이것이 가장 큰 장점..

1. 메인


2. 검색

3. 검색 결과 1

4. 검색 결과 2
:

2. 개인 프로젝트를 시작하기위해서..... 분석2

FLEX/FLEX Project 2010. 7. 12. 21:23

2. 두번째 interPark 항공권 예약 사이트
url : http://air.interpark.com/flex/ReservationApplication.html?mbn=tour&mln=air_reservation
이 사이트는 정말 아무런 구성없이 검색하고 해당 결과 만을 볼수 있다.
정말 정말 직관적이고 불필요한 정보가 거의 없다.. 개발자 입장에서는 너무 좋다..ㅋㅋ
다양한 검색을 할수 있어서 너무 좋다.

1. 메인페이지

2. 검색 1

3. 검색 2

3. 검색결과 loading

5. 검색 info 1

6. 검색 info 2

7. 검색 결과 1

8.검색 결과 2

9. 검색 결과 3

10. 검색 결과 4

 
:

1. 개인 프로젝트를 시작하기위해서..... 분석1

FLEX/FLEX Project 2010. 7. 12. 21:22

드디어 개인 프로젝트를 시작할려고 마음 먹었다..ㅋㅋ
그런데 뭘 만들지..ㅠ.ㅠ 뭘 만들어야될까...???

일단 뭘 만들지 몰라서 flex로 구현된 사이트를 참고 하기로 했다..
누군가 그랬는데... 모방(?)은 창조에 어머니이다..ㅎㅎㅎ

1. 첫번째 synclive.com
url : http://app.synclive.com/
저 사이트는 음악 사이트 이고 음악 뿐만 아니라. 다양한 video도 제공하고 있다.
데이터 양이 엄청 많고 이미지도 엄창 많다...
다른것보다 전체적인 구성이 마음에 든다.. 내가 만든 ITO 사이트도 저런거였지만...
또한, 검색했을때 검색 결과를 sample, list, thub등 다양하게 볼수 있다.
현재 생각은 온라인 앨범사이트 인데 저렇게 검색할수 있음면 괜찮을거 같다.

참조 이미지
1.메인
2. 메인에서 마우스가 over될을경우
3. login을 클릭했을경우

4. join을 클릭했을경우

5. notice및 설명은 pdf파일 로딩해서 보여준다.

6. search main

7. search sample 결과

8. search 검색 결과를 list로 놓았을경우
9. search 검색 결과를 thub로 했을경우

10. search view 01

11. search view 02


:

FLEX 3.0 - KeyboardEvent / MouseEvent를 이용한 TextInput에서 Enter Evnet - KeyCode 값

FLEX/FLEX 2010. 7. 12. 21:21

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와 filterFunction를 AS3.0으로 구현해보기.

FLEX/FLEX 2010. 7. 12. 21:20

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>




document.write('

:

FLEX - Popup 창이 한개 띄어져 있다면 새로운 Popup 창은 띄우지 않고 기존 Popup 창에서 Data만 변경하기

FLEX/FLEX 2010. 7. 12. 21:19

PopupOne.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
 paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" horizontalAlign="center" >
 
 <mx:Script>
 <![CDATA[
    import mx.collections.ArrayCollection;
 
    import mx.containers.TitleWindow;
    import mx.managers.PopUpManager;
    import mx.managers.PopUpManagerChildList;
    
    [Bindable]
    private var data1:ArrayCollection = new ArrayCollection([{data:0, label:"Print"},{data:1, label:"Website"}]);
    
    [Bindable]
    private var data2:ArrayCollection = new ArrayCollection([{data:2, label:"test"},{data:3, label:"test3"}]);     
       
    
     public function renderClickHandler(data:ArrayCollection):void
    {
         
      if((systemManager.numChildren-1) == 0)
      {
       var pop:listRenderTitleWindow =
        listRenderTitleWindow(PopUpManager.createPopUp(this, listRenderTitleWindow, false));
       
       pop.title = "PopUp Window";
       pop.mappingData = data;
       pop.init();
      
       PopUpManager.centerPopUp(pop);
      
      } else {
       
       var dd:listRenderTitleWindow = listRenderTitleWindow(systemManager.getChildAt(1));
       dd.mappingData = data;
       dd.init();
       
      }
    }
 ]]>
 </mx:Script>
 
 <mx:Button id="a1" label="상세정보" fontSize="11" click="renderClickHandler(data1)"/>
 <mx:Button id="a2" label="상세정보2" fontSize="11" click="renderClickHandler(data2)"/>
</mx:Application>

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

listRenderTitleWindow.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
 showCloseButton="true" close="PopUpManager.removePopUp(this)" >
 
 <mx:Script>
   <![CDATA[
    import mx.collections.ArrayCollection;
     import mx.managers.PopUpManager;
     
     private var _data:ArrayCollection;
     
     public function get mappingData():ArrayCollection
     {
      return _data;
     }
     
     public function set mappingData(value:ArrayCollection):void
     {
      this._data = value;
     }
     
     public function init():void
     {
      var str:String = new String();
      var arr:ArrayCollection = new ArrayCollection();
      
      arr = mappingData;
      
      for(var i:uint; i < arr.length; i++)
      {
       for(var key:String in arr[i])
       {
        str += key + " : " + arr[i][key] +"\n";
       }
      }
      
      tempTextArea.text = str;
     }
     
   ]]>
  </mx:Script>
  
  <mx:TextArea id="tempTextArea" width="300" height="200"/>
  
</mx:TitleWindow>
:

FLEX - Object 객체 값 출력하기

FLEX/FLEX 2010. 7. 12. 21:19

var  data:Object = new Object();

data.one = "One";
data.two = "Two";
data.three = "Three";


var count:int = 1;
for(var key:String in data)
{
    trace("count => " + count + " : " + key + " : " + data[key];
    count++;
}

출력값
count => 1 : one : One
count => 2 : two : Two
count => 3 : three : Three
:

FLEX - Popup창이 한개 띄어져 있다면 기존 popup창은 자동 닫고 새롭게 popup창 띄우기

FLEX/FLEX 2010. 7. 12. 21:18

test.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" paddingBottom="0" paddingLeft="0" paddingRight="0"
 paddingTop="0" horizontalAlign="center" >
 
 <mx:Script>
 <![CDATA[
  
  import mx.containers.TitleWindow;
  import mx.managers.PopUpManager;
  import mx.managers.PopUpManagerChildList;
  
  public function renderClickHandler(data:Object):void
  {
     
   for(var i:int = systemManager.numChildren-1; i >=0; i--)
   {
    if(getQualifiedClassName(systemManager.getChildAt(i)) == "listRenderTitleWindow")
    {
     systemManager.removeChildAt(i);
    }
   }
   
   var pop:listRenderTitleWindow = listRenderTitleWindow(PopUpManager.createPopUp(this, listRenderTitleWindow, false));
   pop.title = "PopUp Window";
   PopUpManager.centerPopUp(pop);
    
  } 
  
   
 ]]>
 </mx:Script>
 
 
 <mx:Button id="a1" label="상세정보" fontSize="11" height="18"
  click="renderClickHandler(data)"/> 
</mx:Application>

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

listRenderTitleWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" showCloseButton="true"
 close="PopUpManager.removePopUp(this)">
 <mx:Script>
  <![CDATA[
   import mx.managers.PopUpManager;
  ]]>
 </mx:Script>
</mx:TitleWindow>
: