Flex3.0&AS3 2008. 10. 23. 18:15

Tree To ComboBox


<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="280" width="443">

<mx:XML id="xmlData">
<root> 
            <folder label="Stock" isBranch="true"> 
            </folder>             
            <folder label="Entertainment" isBranch="true">
                  <folder label="지상파 방송" isBranch="true" />
                  <folder label="케이블 방송" isBranch="true">
                          <Pfolder label="인천" />
                          <Pfolder label="수원" />
                  </folder>
            </folder>
           
            <folder label="Sports">
                  <Pfolder label="야구" />
                  <Pfolder label="축구" />
                  <Pfolder label="농구" />
                  <Pfolder label="배구" />
            </folder>
</root> 
</mx:XML>
 
  <mx:Script>
   <![CDATA[
    import mx.events.ListEvent;
    
    private function fnChange(e:ListEvent):void {
     var mXMLList:XMLList=tree1.dataProvider[0]..Pfolder.(@label==e.target.text);  // 콤보박스의 문구와 같은 label있는 XML를 모두 얻어낸다.
     
     if(0==mXMLList.length()){return;}
       
     tree1.expandChildrenOf( tree1.dataProvider[0], false ); // 전체 Item를 모두 닫는다.
     tree1.expandItem(mXMLList[0],true,true);// 선택된 Item를 열어준다.
    
   
     var mTempItem:XML=mXMLList.parent();   // 선택된 Item의 위쪽 Item를 모두 열어준다.
      while(null!=mTempItem){
          tree1.expandItem(mTempItem, true,true);
          mTempItem=mTempItem.parent();
      }
                    tree1.selectedItem=mXMLList[0]; // 선택 item를 조정한다.
      var idx:Number=tree1.getItemIndex( mXMLList[0]);  // 스크롤 위치를 조정한다.
      tree1.scrollToIndex(idx);
    }
    
   ]]>
  </mx:Script>   
     
<mx:Tree id="tree1" dataProvider="{xmlData}" showRoot="false" rowCount="6"  fontSize="12" labelField="@label"  width="294"  height="195"/>
<mx:ComboBox dataProvider="{xmlData..Pfolder}" labelField="@label" fontSize="12" change="fnChange(event)" />
</mx:Application>

Flex3.0&AS3 2008. 10. 23. 18:01

Tree Component



<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
ToolTip
{
 fontSize:12;
}
</mx:Style>
<mx:XML id="xmlData">
<root> 
            <folder label="Stock" isBranch="true"> 
            </folder>             
            <folder label="Entertainment" isBranch="true">
                  <folder label="지상파 방송" isBranch="true" />
                  <folder label="케이블 방송" isBranch="true">
                          <Pfolder label="인천" />
                          <Pfolder label="수원" />
                  </folder>
            </folder>
           
            <folder label="Sports">
                  <Pfolder label="야구" />
                  <Pfolder label="축구" />
                  <Pfolder label="농구" />
                  <Pfolder label="배구" />
            </folder>
</root> 
</mx:XML>  
     
<mx:Tree id="tree1" itemRenderer="comp.TreeRenderer" dataProvider="{xmlData}" showRoot="false" rowCount="6"  fontSize="12" labelField="@label"  width="294" />
<mx:Label text="{tree1.selectedItem.toXMLString()}" fontSize="12" width="338" height="154"/>
</mx:Application>


TreeRenderer.mxml
<?xml version="1.0"?>
<local:TreeItemRenderer  xmlns:local="mx.controls.treeClasses.*" xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
 <![CDATA[ 
        import mx.controls.treeClasses.*;
        import mx.collections.*;
       
        override public function set data(value:Object):void{
            super.data = value;
            if(!TreeListData(super.listData).hasChildren){return;}
           
            setStyle("color", 0xff0000);       // Branch이면 적색으로
            setStyle("fontWeight", 'bold');    // Branch이면 볼드로
        }
         
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(!super.data){ return;}
           
            icon.filters=[new  GlowFilter, new BlurFilter];                 // 폴더 아이콘에 Glow 효과
            disclosureIcon.filters=[new BlurFilter];          // 폴더열기닫기 Blue 효과
            super.label.toolTip = label.text;             // 툴팁 설정하기

            if(! TreeListData(super.listData).hasChildren){return;}           

            var tmp:XMLList =  new XMLList(TreeListData(super.listData).item);
            var myStr:int = tmp[0].children().length();
            super.label.text =  TreeListData(super.listData).label + "(" + myStr + ")";  // Branch에 대해서만 갯수를 표시한다.
        }

 ]]>
</mx:Script>
</local:TreeItemRenderer>

Flex3.0&AS3 2008. 10. 22. 18:19

사용자정의 ToolTip 구현하기 및 List 콤포넌트 Control


PanelToolTip.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 width="250" fontSize="12" alpha=".8" borderThickness="2" backgroundColor="#dedede"
 borderColor="black" borderStyle="solid" implements="mx.core.IToolTip">
 <mx:Script>
  <![CDATA[
   private var _text:String;
   
   public function get text():String{
    return _text;
   }
   
   public function set text(value:String):void{
    _text=value;
   }
   
  ]]>
 </mx:Script>
 <mx:Text text="{_text}" percentWidth="100" width="198" height="22" fontSize="12"/>
</mx:Panel>

listBaseEx.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[
   import comp.PanelToolTip;
   import mx.events.ToolTipEvent;
   import mx.events.ListEvent;
   import mx.controls.Alert;
   import mx.collections.IList;
   import mx.managers.DragManager;
   import mx.events.DragEvent;
   
   
   [Bindable]
    [Embed(source='imgs/rss.png')]
    private var m1:Class;
    
    private var mTipString:String;
    
    private function AppendData():void{
     var mNum:Number=dpd.length+1;
     dpd.addItem({label:"label"+mNum,data:"data"+mNum,icon:m1});
     
    }
    
    private function fnDragDrop(event:DragEvent):void{
     if(DragManager.COPY!=event.action)
     {
      return;
     }
     event.preventDefault();
     
     /*Drag한 아이템을 얻어옴*/
     var items:Array = event.dragSource.dataForFormat("items") as Array;
     
     var dropTarget:List = List(event.currentTarget);
     var dropLoc:int = dropTarget.calculateDropIndex(event); // 생성될 위치 얻어오기
     Alert.show(dropLoc.toString());
     
     for(var i:int=items.length -1 ; i>=0; i--){
      var tempItem:Object = {label:items[i].label, data:items[i].data, icon:items[i].icon};
      IList(dropTarget.dataProvider).addItemAt(tempItem,dropLoc);
     }
    }
    
     private function fnRollOut(event:ListEvent):void{
      mTipString = "";
      removeEventListener(ToolTipEvent.TOOL_TIP_CREATE, createCustomTip);
      
     }
     
     private function fnRollOver(event:ListEvent):void{
      event.target.addEventListener(ToolTipEvent.TOOL_TIP_CREATE,createCustomTip);
      
      mTipString = event.itemRenderer.data.toolTip; //툴팁 문구를 변수에 저장.
      event.target.toolTip = mTipString;
     }
     
     private function createCustomTip(event:ToolTipEvent):void{
      var ptt:PanelToolTip = new PanelToolTip();
      ptt.title = "Custom ToolTip";
      ptt.text = mTipString;
      event.toolTip = ptt;
     }
  ]]>
 </mx:Script>
 <mx:ArrayCollection id="dpd">
  <mx:source>
   <mx:Object label="label1" data="data1" icon="{m1}" toolTip="{lData.selectedItem.label}"/>
   <mx:Object label="label2" data="data2" icon="{m1}" toolTip="{lData.selectedItem.label}"/>
   <mx:Object label="label3" data="data3" icon="{m1}" toolTip="OK?"/>
  </mx:source>
 </mx:ArrayCollection>
 
 <mx:List id="lData" dataProvider="{dpd}" width="240" height="200" dragEnabled="true"
  dropEnabled="true" dragMoveEnabled="true" dragDrop="fnDragDrop(event)"
  itemRollOut="fnRollOut(event)" itemRollOver="fnRollOver(event)"
  />
 <mx:Label text="Selected label : {lData.selectedItem.label}"/>
 <mx:Label text="Selected data : {lData.selectedItem.data}"/>
 <mx:Image source="{lData.selectedItem.icon}"/>
 <mx:Button label="AppendData" width="195" click="AppendData()"/>
</mx:Application>


Flex3.0&AS3 2008. 10. 1. 17:16

flex_popup 띄우기

/*팝업띄우기*/

<mx:Script>
   <![CDATA[
    import mx.managers.PopUpManager; //팝업메니져
    import comp.popup.lessonMngPopup; //팝업대상
    
     public function showPopup(e:MouseEvent):void{
        var popup:* = lessonMngPopup(PopUpManager.createPopUp(this, lessonMngPopup, true )); 
        popup.owner = this;
     }
   ]]>
  </mx:Script>

/*팝업 센터 위치시키기*/
<mx:Script>
   <![CDATA[
    import mx.containers.TitleWindow;
    import mx.managers.PopUpManager;
     private function lessonSch():void{  
     var popWindow:TitleWindow=TitleWindow(PopUpManager.createPopUp(this,progEduLessonMngSch, true));     
     PopUpManager.centerPopUp(popWindow); 
     }
   ]]>
  </mx:Script>
위의 방법은 약간의 버그로 인해서 아래처럼 사용하는것을 추천

   var popupWindow:Object = PopUpManager.createPopUp( this, centerAdminSetSubmit, true );
   popupWindow.x = ( parentApplication.width - popupWindow.width ) / 2;
   popupWindow.y = ( parentApplication.height - popupWindow.height ) / 2;




/*팝업 닫기*/
<mx:Script>
   <![CDATA[
    import mx.managers.PopUpManager;
    import mx.events.ModuleEvent;
     private function closePopup(e:MouseEvent):void{
      PopUpManager.removePopUp(this);
     }
   ]]> 
  </mx:Script>
Flex3.0&AS3 2008. 10. 1. 14:57

= 액션스크립트[ActionScript] 3.0 XML =

= 액션스크립트[ActionScript] 3.0 XML =

var xml:XML = <root/>;

위와 같은 간단한 XML이 있습니다..
<root>에 <node>를 4개 추가하려면 xml.appendChild(<node/>);를 네번 써주면 되겠죠?
1000개라면 어떻게 할까요? 각자 다른 값을 가져야 한다면요? = _ = 막막하죠..?
이럴때는 중괄호 연산자({})를 이용하면 쉽게 해결할 수 있습니다..

for(var i:int = 1; i < 5; i++){
 xml.appendChild(<node {"num"+i}={i+10}>{i}</node>);
}

trace(xml.toXMLString());
/*
  <root>
    <node num1="11">1</node>
    <node num2="12">2</node>
    <node num3="13">3</node>
    <node num4="14">4</node>
  </root>
*/

모두 다른 값을 가지는 노드가 4개 추가되었습니다..
저들의 속성을 모두 출력하려면 어떻게 할까요?


for(var i:int = 1; i < 5; i++){
 trace(xml.node["@num"+i]);
}
/*
 11
 12
 13
 14
*/

** 플래시에서 에러가 난다면 아래쪽 for문의 var i:int 를 i로 바꾸고 실행하세요..변수를 중복 정의하면 에러가 나거든요..