출처 : http://warkyman.tistory.com/146

Flex 에서 MXML로 정의한 버튼이 다음과 같이 있다고 가정합니다.

 <mx:Button id="btnAlert"  label="Alert!" />


이 버튼을 클릭할 때 어떠한 동작을 하고자 하면 해당 버튼에 다음과 같이 클릭 이벤트 핸들러를 등록시켜주면 됩니다.

Script ---

public function alert(evt:MouseEvent):void
{
  Alert.show("Hello, Flex!", "Alert");
}

MXML ---

 <mx:Button id="btnAlert" label="Alert!" click="alert(event)" />


만약, 실제 버튼을 클릭하지 않고서 버튼을 클릭한 것과 같은 이벤트를 수동으로 발생시키려면 어떻게 해야할까요?
이럴때 필요한 것이 dispatchEvent 입니다.

dispatchEvent 의 구조는 다음과 같습니다.
objectInstance. dispatchEvent(event:Event)

자세한 설명은 수동에 의한 이벤트의 송출(Dispatch)  에서 참고하도록 하고 본 포스트에서는 생략하겠습니다.


아래에 보여드릴 소스는 캔버스를 MXML로 정의하여 이 캔버스를 클릭하였을때 버튼을 클릭한 것 과 같이 수동으로 이벤트를 발생시킴으로써 버튼을 클릭하였을 때와 같이 팝업이 뜨도록 하고 있습니다.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">

    <mx:Script>
        <![CDATA[
   
        import mx.controls.Alert;

        public function alert(evt:MouseEvent):void
        {
            Alert.show("Hello, Flex!", "Alert");
        }

        public function canvasClick(evt:MouseEvent):void
        {
            btnAlert.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
        }

        ]]>
    </mx:Script>

    <mx:Canvas x="44" y="79" width="200" height="153" backgroundColor="#FF0000" borderStyle="solid"
            cornerRadius="20" click="canvasClick(event)">
        <mx:Label text="Click Here!" horizontalCenter="0" verticalCenter="0"/>
    </mx:Canvas>

    <mx:Button id="btnAlert" x="271" y="137" label="Alert!" click="alert(event)"/>

</mx:Application>

dispatchEvent 를 이용하여 마치 버튼을 클릭한 것 처럼 MouseEvent.CLICK 이벤트를 버튼에 dispatch 함으로써 버튼에서 클릭 이벤트 핸들러로 등록해놓은 alert() 메소드가 실행되게 됩니다.

")//]]>

물론 위의 예제에서는 단순히 클릭시에 Alert 을 띄우는 작업으로 그쳤기에 문제가 없었지만, 실제 클릭이벤트와 관련된 작업이 필요할 경우 새로 생성해준 마우스이벤트 (new MouseEvent(MouseEvent.CLICK)) 의 상세한 값들을 제어할 필요가 있습니다.

MouseEvent (type:String , bubbles:Boolean = true, cancelable:Boolean = false, localX:Number , localY:Number , relatedObject:InteractiveObject = null, ctrlKey:Boolean = false, altKey:Boolean = false, shiftKey:Boolean = false, buttonDown:Boolean = false, delta:int = 0)

와.. 많다.;;;


신고
Posted by 나비 나비:D

unable to load SWC multiple points

Cairngorm Framework 강좌를 보면서 따라하기 했습니다...


하지만 아래와 같은 문구의 오류가 나더군요

unable to load SWC Cairngorm.swc: multiple points


구글검색도 해봤지만 영문 ㅡㅡ;;; 머 대충 네이버 툴바 이용해서 단어 하나씩 해결하면서 보니까


Here are the steps:

  1. Download the Cairngorm src .zip
  2. Unzip into a folder on your machine
  3. Import the .project file into Flex Builder
  4. Hit Project -> Clean for a nice clean build

요런 게 있더군요 하지만 이방법으로도 되지 않는다!


그러면 플렉스 버전 확인해보세요 ㅋㅋㅋ


테스트 환경이 노트북과, 데스크탑으로 했는데

노트북의 경우 플렉스 2.0.1 이였고

데스크탑의 경우 플렉스 2.0.1. 123.... 머시긴가 여튼 좀 길었습니다.


결과 노트북은 위와 같은 메시지가 뜨지 않터군요

데스크탑은 여전히 저런 메시지를 팍팍 뿌려 주면서 캔곰을 못 쓰게 만들고요 ㅡㅡ;;;


그래서 데스크탑의 플렉스 버전도 2.0.1로 바꿧습니다 ㅋㅋ 되내요 ㅋㅋㅋㅋ 야호 ㅋㅋㅋ


다른분들도 혹시 이런 메시지나 오류가 나면 플렉스 버전을 2.0.1로 마춰보세요 ㅡㅡV

플렉스 버전 2.0.1 에는 정상작동

플렉스 버전 2.0.1 14.. 머시기는 작동 불등

상위 버전은 모르겠음 ^^;;;

unable to load SWC Cairngorm.swc: multiple points

Flex Builder Version 2.0.1 !!!!

Version 2.0.1 14.... NO!!

Only Version 2.0.1!!

신고
Posted by 나비 나비:D
DataGrid Tip: Row Background Color

How to change the background color of a row is an often-asked question. In Flex 2.0 it is easy. Follow these steps:

  1. Create a new class that extends mx.controls.DataGrid. This class can be an MXML file or an ActionScript file, whichever you are most comfortable with.
  2. Overide the protected function, drawRowBackground:

        override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number,
                                                       color:uint, dataIndex:int):void
       {
            // make any tests here, then change color accordingly. For example: color = 0xFF0000;
            // call the super function to make it happen.
            super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
        }
  3. Now use your new grid in place of the <mx:DataGrid> in your application.

Within drawRowBackground you can test your data. The dataIndex argument can be used to look up the item in the dataProvider that corresponds to this row. For example, suppose you want to color any row green whose quantity is greater than 1000:

var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex);
if( item.quantity > 1000 ) color = 0x00FF00;

It's just that easy.

출처 : http://weblogs.macromedia.com/pent/archives/2006/10/datagrid_tip_ro.cfm

신고
Posted by 나비 나비:D

출처 : http://www.ihelpers.co.kr/programming/tipntech.php?CMD=view&TYPE=8&KEY=&SC=S&&CC=&PAGE=1&IDX=547

1.데모

2. 소스

MiyaGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" xmlns:ns1="*" creationComplete="initApp()" viewSourceURL="srcview/index.html" fontSize="12">
 <mx:Script>
  <![CDATA[
   import mx.controls.dataGridClasses.DataGridColumn;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   
   [Bindable]
   private var ArrCol:ArrayCollection = new ArrayCollection();
   
   
   public function initApp():void{    
    myGrid.dataProvider = ArrCol;    
   }
   
   public function onChangeColumn():void{
   
    // Grid init
    myGrid.columns = [];
    ArrCol.removeAll();
    var arrCol:Array = new Array();
   
    for(var i:uint = 0; i<chgColumn.value;i++){
     var col:DataGridColumn = new DataGridColumn("col"+i);
     var colRender:ClassFactory = new ClassFactory(LabelRenderer);    
     colRender.properties = {headerText:"컬럼"+i};
     col.headerRenderer = colRender;  
     col.setStyle("textAlign","right");
     arrCol.push(col);
    }
    myGrid.columns = arrCol;  
   
    for(i=0;i<100;i++){
     var colval:Object = new Object;
     for(var j:uint = 0; j<chgColumn.value;j++){
      colval["col"+j] = (i+1)*(j+1);
     }
     ArrCol.addItem(colval);
    } 
   }
  ]]>
 </mx:Script>
 <mx:Component id="HeaderLabelRenderer">  
     <mx:HBox horizontalAlign="left" verticalAlign="middle">
     <mx:Label text="" textIndent="3" width="100%" textAlign="left"/>
     </mx:HBox>
 </mx:Component>
 <mx:DataGrid left="10" right="10" top="70" bottom="10" id="myGrid" fontSize="12"/>
 <mx:HBox left="10" right="10" top="10" bottom="518">
  <mx:Form width="100%">
   <mx:FormItem label="컬럼수">
    <mx:HSlider id="chgColumn" width="236" minimum="5" maximum="10" snapInterval="1" enabled="true" change="onChangeColumn()"/>
   </mx:FormItem>
  </mx:Form>
 </mx:HBox>
</mx:Application>

LabelRenderer.mxml

Grid HeaderText 값을 동적으로 사용하기 위해 headerText 사용하였습니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
  horizontalAlign="left" verticalAlign="middle" horizontalScrollPolicy="off" creationComplete="initComp()">
     <mx:Script>
      <![CDATA[

   private var _headerText:String;
   
   public function set headerText(value:String):void {
    _headerText = value;
   }
   
   public function get headerText():String {
    return _headerText;
   }

       public function initComp():void {
        lvlLabel.text = _headerText;  
       }
        ]]>
     </mx:Script>
     <mx:Label text="" textIndent="3" width="100%" textAlign="left" id="lvlLabel"/>
</mx:HBox>


3. 참고

신고
Posted by 나비 나비:D

The following example shows the differences between a clustered, stacked, 100%, and overlaid Bar chart in Flex 3.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/11/creating-clustered-stacked-overlaid-and-100-bar-charts-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="type:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Object label="clustered" />
                        <mx:Object label="stacked" />
                        <mx:Object label="100%" />
                        <mx:Object label="overlaid" />
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="showDataTips:">
                <mx:CheckBox id="checkBox1" />
            </mx:FormItem>
            <mx:FormItem label="showAllDataTips:">
                <mx:CheckBox id="checkBox2" />
            </mx:FormItem>
        </mx:Form>

        <mx:Spacer width="100%" />

        <mx:Legend dataProvider="{barChart}"/>
    </mx:ApplicationControlBar>

    <mx:BarChart id="barChart"
            type="{comboBox.selectedItem.label}"
            showDataTips="{checkBox1.selected}"
            showAllDataTips="{checkBox2.selected}"
            height="100%"
            width="100%">

        <mx:dataProvider>
            <mx:Array>
                <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
                <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
                <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
                <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
                <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
            </mx:Array>
        </mx:dataProvider>

        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name"/>
        </mx:verticalAxis>

        <mx:series>
            <mx:BarSeries yField="name" xField="obp" displayName="OBP"/>
            <mx:BarSeries yField="name" xField="slg" displayName="SLG"/>
            <mx:BarSeries yField="name" xField="avg" displayName="AVG"/>
        </mx:series>
    </mx:BarChart>

</mx:Application>

View source is enabled in the following example.

신고
Posted by 나비 나비:D

출처 : http://www.cflex.net/showFileDetails.cfm?ObjectID=415
May 12, 2006
- Filter a dataGrid with a comboBox
Dynamically load result values into a comboBox to be used to filter a dataGrid.

A common practice in Flex is to use a comboBox to filter the data that is displayed in a dataGrid.  In this tip, the goal is to display a dataGrid with data from an authors database table that has the following structure:

 


   
authorId : String;
authorName : String;
status : String;
 

In addition, the user will be allowed to select from a comboBox that contains the different author status values and cause the author data in the dataGrid to be filtered.  It is recommended that you cast the result from a server call to an arrayCollection and use the arrayCollection as the dataProvider for the dataGrid.  By doing this, you will see that it is easy to manipulate and filter the data that is displayed.  Getting the data is beyond the scope of this tip, but there are plenty of examples available on that topic. 

 

First, cast the result to an arrayCollection:

 

 

       import mx.utils.ArrayUtil;

       import mx.collections.ArrayCollection;

 

       // event.result contains the data from the authors search.      

 

       public var authorsArray : Array = mx.utils.ArrayUtil.toArray(event.result);

 

       // Use authorsDataProvider as the dataProvider for the dataGrid.

 

       [Bindable]

       public var authorsDataProvider : ArrayCollection = new ArrayCollection(authorsArray);

 

 

 
The mxml would look like this:

 


     
<mx:DataGrid id="dgAuthors"
                dataProvider="{ authorsDataProvider }"/>
Next, dynamically load the comboBox with the unique author status values that exist in the search result.  
In this case, the possible author status values in the database are "Active", "Inactive" and "Deleted". 
Before proceeding though, let’s review the use-case.  The user is presented with a data grid view of the result 
from an authors search.  After viewing the grid, the user may wish to filter the result to only show the "Active"
authors.  Sure, the "Active", "Inactive" and "Deleted" status values in the comboBox could be hard coded. 
But, in doing so, the program would have to be maintained when a new status value is added to the database. 
Also, the comboBox should only contain author status values that exist in the returned search result.  If the
search result includes only "Active" and "Inactive" authors, the comboBox should only contain those same
values (not “Deleted”).  If all of the possible author status values in the database were hard coded into the
comboBox, the user would be able to select the "Deleted" value, which in this case would display a blank
dataGrid. We don't want to confuse the user.
The following code dynamically loads the author status values into an array that is used as the dataProvider 
for the comboBox.
 
     // Use the authorsStatusArray as the dataProvider for the comboBox.

 
     [Bindable]
     public var authorsStatusArray : Array = populateAuthorsStatusArray(authorsArray);
     public function populateAuthorsStatusArray(authorsArray:Array):Array 
  {
             var statusArrayHashMap : Object = new Object();
            
var statusArray : Array = new Array;
             
 
           
var n:int = authorsArray.length;
             for (var i:int = 0; i < n; i++)
             {
                    if (statusArrayHashMap[authorsArray [i].status] == undefined)
                    {
                               statusArrayHashMap[authorsArray [i].status] = new Object();
                               statusArray.push(authorsArray [i].status);
                   }
             }




            statusArray.sort();
             statusArray.unshift("All");
 // The "All" value is used programmatically to un-filter (reset) the result in the dataGrid. 




return statusArray;
      }
 Finally, filter the results in the dataGrid based upon the author status value that is selected in the comboBox. 
 
       public function filterAuthorsGrid():void
       {      
               authorsDataProvider.filterFunction=authorsStatusFilter;
               authorsDataProvider.refresh();  
       } 
       public function authorsStatusFilter(item:Object):Boolean
       {
               if (cboAuthorsStatusFilter.selectedItem != "All")
               {
                       return item.status == cboAuthorsStatusFilter.selectedItem; 
               } else {
                        return true;
               }
       }
 
The mxml would look like this:

 


     
<mx:ComboBox id="cboAuthorsStatusFilter"
               dataProvider="{ authorsStatusArray }"
               change=" filterAuthorsGrid();"/>

 

That’s all there is to it!  Because the dataProvider for the dataGrid utilizes binding, the grid will display the filtered result automatically, when the user selects an author status value in the comboBox.  Please keep in mind, that this is just a tip and may contain some typos.  However, you should be able to grasp the concepts from the code.

 

Good Coding,

 

Tim Hoff

신고
Posted by 나비 나비:D
출처 : http://cafe.naver.com/flexcomponent/970

   //한건과 두건이상을 모두 처리하는 방법
    var acResult:ArrayCollection = event.result.data.row as ArrayCollection; //두건 이상일 경우만 ArrayCollection형성됨
    if (acResult == null) { //한건일 경우 (한건을 받았을 경우는 NULL이 생성됨.)
         acResult = new ArrayCollection(ArrayUtil.toArray(event.result.data.row));
    }
    acTagResultProc02 = acResult; //acTagResultProc02는 ArrayCollection으로 해당 DataGrid의 DataProvider와 Binding되어 있음.
신고
Posted by 나비 나비:D
이클립스 프로젝트 임폴트시 overlaps the workspace location 오류 발생시 해결책

.projcet 파일을 열고 <name></name> 태그 안에 이름을 바꿔준다

<name>Test</name>
-> <name>Test1</name>
 
신고
Posted by 나비 나비:D

Cairngorm Framework

1.
Cairngorm Framework 정의
cairngorm은 사전적인 의미로는 연수정이란 뜻입니다.
발음을 하면 컨검? 주위에서는 그냥 캔곰이라고 부르더군요. 이하 강좌는 캔곰이라는 용어를 사용하여 진행하도록 하겠습니다. 알아서 이해해 주시면 감사…^^
캔곰 프레임워크는 Flex를 위한 작은 규모의 프레임워크입니다. 기존에 사용하던 프레임워크와는 차이가 많이 나죠. 저도 처음엔 뭐 이런게 프레임워크인가 생각했던 적이 있습니다. 하지만 그래도 몇가지 사항에서 중요합니다.
캔곰은 Flex Application을 사용하여 Enterprise Software를 개발하기 위한 디자인패턴들로 구현되어 있습니다. 또한 캔곰 사용의 장점은 동일한 패턴으로 서비스를 정의하고 관리함으로서 간결한 코드를 작성할 수 있습니다. 단점은 파일 개수가 많아 진다는 것이 아닐까 싶네요.

2.
캔곰 프레임워크 설치하기
캔곰 프레임워크는 Flex에서 사용하는 라이브러리 포맷인 swc 형태로 배포됩니다. 또한 소스코드까지 포함되어 있으므로 좀 더 구체적인 내용을 알고 싶은 분들은 소스코드를 분석하셔도 됩니다.

2.1
캔곰 프레임웍2.1을 다운로드 합니다.
URL : http://labs.adobe.com/wiki/index.php/Cairngorm

<그림 1>

2.2
다운로드 받은 파일의 압축을 풉니다.
압축을 풀면 bin 폴더에서 Cairngorm.swc 파일을 확인할 수 있습니다.

<그림 2>


2.3
프로젝트의 library path로 이동한 다음 ‘Add SWC’버튼을 클릭 한 후 bin폴더에 있는 Cairngorm.swc파일을 추가합니다.

<그림 3>


3. Cairngorm Framework 구조
3.1
캔곰은 MVC구조 형태로 패턴화 되어 있습니다. 프리젠테이션과 비즈니스 로직을 분리 할 수 있는 형태의 템플릿을 제공합니다.
3.2 캔곰 architecture

<그림 4>

- View : End User의 View화면을 지칭합니다. View는 사용자의 이벤트를 받아 CairngormEventDispatcher를 사용하여 Controller에 등록되어 있는 커맨드를 호출하는 역할을 담당합니다.
- Model : Controller와 View를 중계하는 역할을 담당합니다. 최종적으로 처리된 결과를 ModelLocator를 통해 View에 전달됩니다.
-
Controller : Command를 실행하여 서비스를 요청하는 역할을 담당합니다. 처리된 결과는 ModelLocator를 통해 View에 전달됩니다.

3.3
캔곰 패키지 구조
각각의 기능 그룹별로 패키지 폴더를 구성합니다. 뭐 반드시 지켜야 하는 구조는 아니지만 되도록이면 동일한 형태의 Naming Rule을 사용하기를 권장합니다.

- Business : Delegate 클래스를 모아 놓은 폴더입니다. 그리고 데이터 서비스를 정의하는 Services.mxml도 이곳이 포함됩니다.
-
Commands : Delegate를 호출하고 리턴된 결과 값을 View에 전달하는 역할을 담당하는 command 클래스를 모아 놓은 폴더입니다. Command 클래스는 캔곰에서 제공하는 Command,Responder 인터페이스를 상속받아 구현합니다.
-
Control : command를 관리하는 controller 클래스를 모아 놓은 폴더입니다. CairngormEventDispatcher를 통해 Control에 등록된 Command를 실행합니다. Controller 클래스는 캔곰에서 제공하는 FrontController를 상속받아 구현합니다.
-
Model : View들을 관리하는 역할을 담당하는 ModelLocator를 모아 놓은 폴더입니다. ModelLocator 클래스는 캔곰에서 제공하는 ModelLocator클래스를 상속받아 구현합니다(개인적으로는 사용 안 함).
-
Vo : RemoteObject서비스를 사용할때만 해당되는 클래스일 듯 합니다. Value Object의 약어로서 View에서 표시될 속성들을 모아놓은 클래스입니다. Vo는 ValueObject를 상속받아 구현합니다. Vo사용의 장점은 타입 체크를 통해 좀 더 명확하게 무슨 정보 인지를 판단 할 수 있습니다.

4.
캔곰 사용하기
예제로 게시판 리스트와 게시글 읽기 기능 두 가지를 가지고 캔곰을 적용해 서비스 데이터를 연동해 보도록 하겠습니다. 단 RemoteObject를 정의하여 자바 클래스를 호출하는 부분은 “RemoteObject 사용하기” 강좌에서 계속 진행 할 예정입니다.

4.1 프로젝트의 패키지를 아래와 같이 business,command,control,event,model,view.vo를 정의합니다.

<그림 5>

4.2
이벤트 정의

-
ViewEvent.as : CairngormEvent를 상속받은 클래스로서 리턴 페이지 객체를 저장하기 위한 view 속성을 포함하고 있습니다. 추후 커맨드를 호출하기 위해서는 반드시 ViewEvent를 생성하여 사용해야 합니다

package sample.event
{
        import com.adobe.cairngorm.control.CairngormEvent;
        import mx.core.UIComponent;
        public class ViewEvent extends CairngormEvent
        {
                //view객체를 저장하기 위한 속성
               public var view:UIComponent;
               public function ViewEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
               {
                       super(type, bubbles, cancelable);
               }
         }
}

- ServiceResultEvent.as : 서비스 결과를 전달하기 위한 이벤트 입니다. 결과 값을 저장하기 위한 result속성을 포함하고 있습니다.
package sample.event
{
 import flash.events.Event;
 public class ServiceResultEvent extends Event
 {
  public var result:*;
                //이벤트 이름
  public static const EVENT_SERVICE_RESULT:String = "serviceResult";
 
  public function ServiceResultEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
  {
   super(type, bubbles, cancelable);
  }
 }
}

4.3 Delegate 정의
-
BBSServiceDelegate.as : ServiceLocator를 사용하여 RemoteObject 서비스를 호출하고 리턴된 결과값을 command에 전달합니다. 서비스 호출은 AsyncToken을 사용하여 비동기 형태로 호출됩니다. RemoteObject를 이용한 코드는 다음 강좌에 진행하기 때문에 임시로 주석처리 하였습니다.
package sample.business
{
 import sample.event.ViewEvent;
 import com.adobe.cairngorm.business.Responder;
 import com.adobe.cairngorm.business.ServiceLocator;
 import mx.rpc.AsyncToken;
 import mx.collections.ArrayCollection;
 import flash.utils.setTimeout;
 import sample.vo.BBSData;
 
 public class BBSServiceDelegate
 {
  private var responder:Responder;
  private var serivce:Object;
 
  public function BBSServiceDelegate(responder:Responder)
  {
   //정의된 RemoteObject의 id값으로 서비스 객체를 얻어 옵니다.
   //this.serivce = ServiceLocator.getInstance().getService("BBSService");
   this.responder = responder;
  }
  public function getBBSList(event:ViewEvent):void
  {
   var dataArr:ArrayCollection = new ArrayCollection();
   var obj:BBSData = new BBSData();
   obj.num = 1;
   obj.subject = "aaaa";
   obj.writer = "lee";
           
   dataArr.addItem(obj);
           
   var resultObj:Object = new Object();
   resultObj.result = dataArr;
           
   setTimeout( responder.onResult, 100, resultObj );
   //var token:AsyncToken = service.getBBSList();
   //token.resultHandler = responder.onResult;
   //token.faultHandler = responder.onFault;
  }
  public function getBBSRead(event:ViewEvent):void
  {
   var obj:BBSData = new BBSData();
   obj.num = 1;
   obj.subject = "aaaa";
   obj.writer = "lee";
           
   var resultObj:Object = new Object();
   resultObj.result = obj;
           
   setTimeout( responder.onResult, 100, resultObj );
   //var token:AsyncToken = service.getBBSRead(event.data.rowNum);
   //token.resultHandler = responder.onResult;
   //token.faultHandler = responder.onFault;
  }
 }
}

4.4 Command 정의

-
BBSListCommand.as : 게시판 리스트 command입니다. BBSServiceDelegate function을 호출한후 결과 값을 view 속성을 사용하여 ServiceResultEvent 이벤트를 발생시킵니다.
package sample.command
{
 import com.adobe.cairngorm.control.CairngormEvent;
 import com.adobe.cairngorm.commands.Command;
 import com.adobe.cairngorm.business.Responder;
 import sample.event.ViewEvent;
 import sample.event.ServiceResultEvent;
 import mx.core.UIComponent;
 import sample.business.BBSServiceDelegate;
 import mx.collections.ArrayCollection;
 import sample.vo.BBSData;
 public class BBSListCommand implements Command, Responder
 {
  private var view:UIComponent;
  public function execute(event:CairngormEvent):void
  {
   var viewEvt:ViewEvent = ViewEvent(event);
   //호출한 View. 결과를 리턴할때 사용함.
   view = viewEvt.view;
  
    //Delegate 클래스 호출
    var delegate : BBSServiceDelegate = new BBSServiceDelegate( this );  
    delegate.getBBSList(viewEvt);
  }
 
  public function onResult(event:*=null):void
  {
   var res:ServiceResultEvent = new ServiceResultEvent(ServiceResultEvent.EVENT_SERVICE_RESULT);
   res.result = event.result;
   //호출한 view의 "serviceResult" 이벤트를 발생시킴
   view.dispatchEvent(res);
  }
 
  public function onFault(event:*=null):void
  {
  }
 
 }
}

4.5 Controller 정의

-
BBSController.as : 게시판 관련 이벤트를 관리하는 역할을 담당합니다. 등록된 이벤트 들은 CairngormEventDispatcher를 사용하여 실행됩니다.

package sample.control
{
 import com.adobe.cairngorm.control.FrontController;
 import sample.command.BBSListCommand;
 import sample.command.BBSReadCommand;

 public class BBSController extends FrontController
 {
  public static const EVENT_BBS_LIST : String = "bbs_list";
  public static const EVENT_BBS_READ : String = "bbs_read";
  public function BBSController()
  {
   addCommand( BBSController.EVENT_BBS_LIST, BBSListCommand );
   addCommand( BBSController.EVENT_BBS_READ, BBSReadCommand);
  }
 
 }
}


4.6 Vo 정의

-
BBSData.as : 게시판에서 사용되는 데이터 속성 값을 정의 한 클래스입니다.
package sample.vo
{
 import com.adobe.cairngorm.vo.ValueObject;
 [Bindable]
 public class BBSData implements ValueObject
 {
  public var num:int; //번호
  public var subject:String; //제목
  public var content:String; //내용
  public var writer:String; //작성자
 }
}

4.7 View 정의

-
이제부터 모든 사용자 View들에 대한 컴포넌트들은 view 패키지 아래에서 정의한 다음 네임스페이스 정의를 통해 접근하는 형태로 사용합니다. 그리고 서비스를 호출하는 페이지들은 아래와 같이 이벤트를 정의하고 initialize 시점에 이벤트를 등록하여 처리하는 형태로 작성됩니다.

  *사용자 이벤트 정의

<그림 6>

  *
initialize 이벤트

<그림 7>

  *
serviceResult” 이벤트 처리

<그림 8>

-
BBSListView.mxml : 게시판 리스트를 구현한 MXML 컴포넌트 입니다. CairngormEventDispatcher를 사용하여 command를 호출하고 “serviceResult”를 등록하여 결과 리턴 이벤트를 전달받아 DataGrid에 Binding을 합니다.
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" initialize="initView()">
 <mx:Metadata>
  [event(type="serviceResult","sample.event.ServiceResultEvent")]
 </mx:Metadata>
 <mx:Script>
  <![CDATA[
   import mx.managers.PopUpManager;
   import mx.collections.ArrayCollection;
   import sample.event.ServiceResultEvent;
   import sample.event.ViewEvent;
   import com.adobe.cairngorm.control.CairngormEventDispatcher;
   import sample.control.BBSController;
   import com.adobe.cairngorm.control.CairngormEvent;
   
   [Bindable]
   private var listdata:ArrayCollection;
   private function initView():void
   {
    this.addEventListener("serviceResult",resultEvt);
   
    //BBS 리스트를 요청하는 이벤트를 생성합니다.
    var event:ViewEvent = new ViewEvent(BBSController.EVENT_BBS_LIST);
    //결과값을 받기위해 현재 페이지 객체를 파라미터로 전달 합니다.
    event.view = this;
    //Controller에 등록된 Command를 실행 합니다.
    CairngormEventDispatcher.getInstance().dispatchEvent( event );
   }
   private function resultEvt(event:ServiceResultEvent):void
   {
    //리턴받은 결과값을 데이터 그리드에 Binding 합니다.
    this.listdata = event.result;
   }
   private function changeEvt():void
   {
    //상세보기 화면을 띄어줍니다.
    var readView:BBSReadView = PopUpManager.createPopUp(this,BBSReadView,true) as BBSReadView;
    readView.rowNum = 1;
    PopUpManager.centerPopUp(readView);
   }
  ]]>
 </mx:Script>
 <mx:DataGrid width="100%" height="100%" dataProvider="{listdata}" change="changeEvt()">
  <mx:columns>
   <mx:DataGridColumn headerText="번호" dataField="num">
   </mx:DataGridColumn>
   <mx:DataGridColumn headerText="제목" dataField="subject">
   </mx:DataGridColumn>
   <mx:DataGridColumn headerText="작성자" dataField="writer">
   </mx:DataGridColumn>
  </mx:columns>
 </mx:DataGrid>
</mx:HBox>

4.8 완성된 전체 게시판 구조는 아래 그림 형태로 실행됩니다

<그림 9>


처음 시작하시는 분들은 여러 개의 파일을 생성하여 서비스를 구현하는 형태가 번거롭다고 생각할지도 모르나 추후 프로젝트를 진행하면서 새로운 기능들이 추가되고 이전 기능들이 수정될 경우 동일한 패턴을 사용하므로 서비스 변경이 용이합니다. 그리고 캔곰에 대해 어느정도 익숙해지면 나름대로 프로젝트 성격에 맞는 형태로 수정하여 재사용할 수도 있습니다. 나름대로 고민해 보길 바랍니다.

다음은 RemoteObject에 대해
지금까지 각각의 캔곰 클래스들이 담당하는 역할과 이를 활용하여 게시판 리스트를 구현하는 방법에 대해 알아 보았습니다. 다음 시간에는 RemoteObject에 대해 알아보도록 합니다.

신고
Posted by 나비 나비:D

   import mx.controls.Alert;
   import mx.events.CloseEvent;

   // show alert
   private function clickButton():void {
     Alert.yesLabel = "예", Alert.noLabel = "아니오";
     Alert.show("예 아니오 냐는?", "", Alert.YES|Alert.NO, this, buttonAlertListener, null);
   }
  
   // alert listener
   private function buttonAlertListener(evt:CloseEvent):void {
    if ( evt.detail == Alert.YES ) {
        Alert.okLabel = "예";
        Alert.show("예 선택했다는");
    } else if ( evt.detail == Alert.NO ) {
        Alert.okLabel = "아니오 선택했소";
        Alert.buttonWidth = 200;
        Alert.show("아니오 선택했다는");
    }
   }


간단 예제 입니다
Alert.yesLabe  Alert.noLabel   Alert.okLabel 등으로 버튼 이름을 한글로 세팅해줄수 있숩니다.


만약 버튼에 할당한 이름이 길다면  Alert.buttonWidth = 200 으로 버튼 길이를 조정하여 글자가 짤리는걸 방지할수 있습니다.


선택에 따라 맞는 행위?를 실행시키려면 Alert.show에 각종 인자를 줍니다


...buttonAlertListener ... 부분이 선택에 따라 실행할 함수 지정 부분


그럼 private function buttonAlertListener(evt:CloseEvent):void 식으로 함수 만들어서
조건에 따라 맞는 행위를 기술해 주시면 된다는.. :)

신고
Posted by 나비 나비:D

BLOG main image
by 나비:D

공지사항

카테고리

분류 전체보기 (278)
Programming? (0)
----------------------------- (0)
나비의삽질 (5)
Application (177)
SQL (51)
Web (27)
etc. (14)
Omnia (0)
---------------------------.. (0)

글 보관함

달력

«   2017/10   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Total : 882,092
Today : 83 Yesterday : 146