flex엔 httpText 가 있더군요.

출처 : https://store1.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postid=545&loc=en_US&productid=2

A 3-state checkbox in a TreeItemRenderer

Problem Summary

Trees are commonly used to represent file systems. Often the user needs to select several items within several folders and take an action (copy, delete, print, ...) on them, so, there needs to be some visual mechanism for indicating that a node is selected. A checkbox is typically used to represent selection. What we need is a tree of 3-state checkboxes.

Solution Summary

There are three main aspects to the solution: 1. A TreeItemRenderer is created to place a CheckBox control at each node in the tree. 2. An image of a tiny black box is painted on top of the CheckBox when the CheckBox is in the third state. 3. The underlying data model for the tree needs to contain an attribute representing the state of the CheckBox.

Explanation

Selection/de-selection of a parent node should cause children nodes to be selected/de-selected. In the case that a parent node has some children that are selected and some that are not selected, a simple 2-state check box won’t do - this third state (where some of the children of a node are selected and some are not) cannot be represented by the selected property of a check box, which is a Boolean.

The solution lies in the implementation of the TreeItemRenderer class. I have created an ActionScript class called CheckTreeRenderer for this purpose.

The first thing to do is override the createChildren method. This method is responsible for creating each node in the tree. Here we create a CheckBox and an Image.

override protected function createChildren():void
{
   super.createChildren();
   myCheckBox = new CheckBox();
   myCheckBox.setStyle( "verticalAlign", "middle" );
   myCheckBox.addEventListener( MouseEvent.CLICK, checkBoxToggleHandler );
   addChild(myCheckBox);
   myImage = new Image();
   myImage.source = inner;
   myImage.addEventListener( MouseEvent.CLICK, imageToggleHandler );
   myImage.setStyle( "verticalAlign", "middle" );
   addChild(myImage);
}   

Each child control, CheckBox and Image, needs to handle mouse clicks, so we create an EventListener for each:

private function checkBoxToggleHandler(event:MouseEvent):void
{
   if (data)
   {
      var myListData:TreeListData = TreeListData(this.listData);
      var selectedNode:Object = myListData.item;
      var tree:Tree = Tree(myListData.owner);
      var toggle:Boolean = myCheckBox.selected;
      if (toggle)
      {
         toggleChildren(data, tree, STATE_CHECKED);
      }
      else
      {
         toggleChildren(data, tree, STATE_UNCHECKED);
      }
      var parent:Object = tree.getParentItem (data);
      toggleParents (parent, tree, getState (tree, parent));
    }
}

private function imageToggleHandler(event:MouseEvent):void
{
   myCheckBox.selected = !myCheckBox.selected;
   checkBoxToggleHandler(event);
}

The handler for the Image control delegates handling most of the selection logic to the CheckBox handler. After all, the Image control is only for handling the third state.

For each node clicked, the CheckBox handler toggles the state of the node’s children and then it toggles the state of the node’s parent(s). The children can only be set to a CHECKED or UNCHECKED state whereas the parent(s) can be also set to the third state. This third state, called the SCHRODINGER state, occurs when some of the parent node’s children are CHECKED state, UNCHECKED state and/or in SCHRODINGER state.

The state that the parent will be set to is arrived at by looking at the state of its children. This is the job of the getState method:

private function getState(tree:Tree, parent:Object):String
{
   var noChecks:int = 0;
   var noCats:int = 0;
   var noUnChecks:int = 0;
   if (parent != null)
   {
      var treeData:ITreeDataDescriptor = tree.dataDescriptor;
      var cursor:IViewCursor = treeData.getChildren(parent).createCursor();
      while (!cursor.afterLast)
      {
         if (cursor.current.@state == STATE_CHECKED)
         {
            noChecks++;
         }
         else if (cursor.current.@state == STATE_UNCHECKED)
         {
            noUnChecks++
         }
         else
         {
            noCats++;
         }
         cursor.moveNext();
      }
   }
   if ((noChecks > 0 && noUnChecks > 0) || (noCats > 0))
   {
         return STATE_SCHRODINGER;
   }
   else if (noChecks > 0)
   {
         return STATE_CHECKED;
   }
   else
   {
         return STATE_UNCHECKED;
   }
}

The toggler code follows:

private function toggleParents (item:Object, tree:Tree, state:String):void
{
   if (item == null)
   {
      return;
   }
   else
   {
      item.@state = state;
      toggleParents(tree.getParentItem(item), tree, getState (tree,
      tree.getParentItem(item)));
   }
}

private function toggleChildren (item:Object, tree:Tree, state:String):void
{
   if (item == null)
   {
      return;
   }
   else
   {
      item.@state = state;
      var treeData:ITreeDataDescriptor = tree.dataDescriptor;
      if (treeData.hasChildren(item))
      {
         var children:ICollectionView = treeData.getChildren (item);
         var cursor:IViewCursor = children.createCursor();
         while (!cursor.afterLast)
         {
            toggleChildren(cursor.current, tree, state);
            cursor.moveNext();
         }
      }
   }
}

To actually set the state of a node, we override the property setter for data:

private function setCheckState (checkBox:CheckBox, value:Object, state:String):void
{
   if (state == STATE_CHECKED)
   {
      checkBox.selected = true;
   }
   else if (state == STATE_UNCHECKED)
   {
      checkBox.selected = false;
   }
   else if (state == STATE_SCHRODINGER)
   {
      checkBox.selected = false;
   }
}       

override public function set data(value:Object):void
{
   super.data = value;
   
   var _tree:Tree = Tree(this.parent.parent);
   setCheckState (myCheckBox, value, value.@state);
   if(TreeListData(super.listData).item.@isBranch == 'true')
   {
      _tree.setStyle("defaultLeafIcon", null);
   }
}

Finally, we paint the CheckBox and Image on the screen:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
   super.updateDisplayList(unscaledWidth, unscaledHeight);
   if(super.data)
   {
      if (super.icon != null)
      {
         myCheckBox.x = super.icon.x;
         myCheckBox.y = 2;
         super.icon.x = myCheckBox.x + myCheckBox.width + 17;
         super.label.x = super.icon.x + super.icon.width + 3;
      }
      else
      {
         myCheckBox.x = super.label.x;
         myCheckBox.y = 2;
         super.label.x = myCheckBox.x + myCheckBox.width + 17;
      }
      if (data.@state == STATE_SCHRODINGER)
      {
         myImage.x = myCheckBox.x + 4;
         myImage.y = myCheckBox.y + 4;
         myImage.width = imageWidth;
         myImage.height = imageHeight;
      }
      else
      {
         myImage.x = 0;
         myImage.y = 0;
         myImage.width = 0;
         myImage.height = 0;
      }
   }
} 

I’ve included a sample application which makes use of the CheckTreeRenderer. Also, a PNG file is included for the Image. Hopefully, someone will make this code better. If so, please send me a copy. Thanks.

CheckTree.zip

출처 :  http://cafe.naver.com/flexcomponent/3877
          http://thlife.net/category/ria/flex?page=51
        

 

ActionScript -> Java 변환 데이터 타입
Actionscript에서 자바 클래스 호출시 자동으로 변환되는 데이터 타입니다.

ActionScript type(AMF3)	Deserialization to Java
Array (dense)	java.util.List
Array (sparse)	java.util.Map
Boolean String of "true" or "false"	java.lang.Boolea
flash.utils.ByteArray	byte []
flash.utils.IExternalizable	java.io.Externalizable
Date	java.util.Date (formatted for Coordinated Universal Time (UTC))
int/uint	java.lang.Integer
number	java.lang.Double
Object (generic)	java.util.Map
typed Object	typed Object when you use [RemoteClass] metadata that specifies remote classname. Bean type must have a public no args constructor
undefined	null
XML	org.w3c.dom.Document
XMLDocument (legacy XML type)	org.w3c.dom.Document

Java -> ActionScript 변환 데이터 타입
자바 클래스에서 ActionScript 변환시 자동으로 변환 되는 데이터 타입입니다.

Java type	ActionScript type (AMF 3)
java.lang.String	String
java.lang.Boolean, boolean	Boolean
java.lang.Integer	int If i < 0xF0000000 || i > 0x0FFFFFFF, the value is promoted to Number.
java.lang.Short	int If i < 0xF0000000 || i > 0x0FFFFFFF, the value is promoted to Number.
java.lang.Byte	int If i < 0xF0000000 || i > 0x0FFFFFFF, the value is promoted to Number.
java.lang.Byte[]	flash.utils.ByteArray
java.lang.Double	Number
java.lang.Long	Number
java.lang.Float	Number
java.lang.Character	String
java.lang.Character[]	String
java.util.Calendar	Date Dates are sent in the Coordinated Universal Time (UTC) time zone. Clients and servers must adjust time accordingly for time zones.
java.util.Date	Da

출처 : http://www.adobe.com/kr/devnet/flex/quickstart/controlling_the_cursor/

  Flex 빠른 시작 가이드: 간단한 유저 인터페이스 구축

목차

• 컨트롤 사용
• 컨테이너 사용
• 구성 요소 스타일 지정
• 효과 추가
• 상태 만들기
• 상태 전환 정의
• 툴팁 사용
• 커서 제어

---

커서 제어

Adobe® Flex™ Cursor Manager를 사용하면 Flex 어플리케이션에서 커서 이미지를 제어할 수 있습니다. 예를 들어 프로세스 처리가 완료될 때까지 사용자가 기다려야 하는 프로세스를 수행하는 어플리케이션의 경우 대기 기간을 반영할 수 있도록 커서를 모래 시계와 같은 사용자 정의 커서 이미지로 변경할 수 있습니다.

또한 커서를 변경하여 사용자에게 피드백을 제공함으로써 사용자가 수행할 수 있는 동작을 나타낼 수 있습니다. 예를 들어 사용자가 입력할 수 있음을 나타내는 커서 이미지를 사용하거나 사용자가 입력할 수 없음을 나타내는 커서 이미지를 사용할 수 있습니다.

CursorManager 클래스는 커서의 우선 순위별 목록을 제어하는 데, 가장 높은 우선 순위를 갖는 커서가 보이게 됩니다. 커서 목록에 동일한 우선 순위를 갖는 하나 이상의 커서가 포함되어 있는 경우 Cursor Manager는 가장 최근에 생성된 커서를 표시합니다.

작업 수행 중인 기본 커서 사용

Flex는 어플리케이션이 처리 중인 상태를 나타내거나 어플리케이션이 사용자 입력에 응답하기 전에 처리 과정이 완료될 때까지 사용자가 기다려야 하는 상태를 나타내는 데 사용할 수 있는 작업 수행 중인 기본 커서를 정의합니다. 작업 수행 중인 기본 커서는 시계 모양의 애니메이션입니다.

다음과 같이 여러 가지 방법으로 작업 수행 중인 커서를 제어할 수 있습니다.

• CursorManager 메서드를 사용하면 작업 수행 중인 커서를 설정하거나 제거할 수 있습니다.
• SWFLoader, WebService, HttpService, RemoteObject 클래스의 showBusyCursor 속성을 사용하면 작업 수행 중인 커서를 자동으로 표시할 수 있습니다.

다음 예제에서는 CursorManager 클래스의 정적 setBusyCursor() 및 removeBusyCursor() 메서드를 사용하여 토글 버튼의 상태에 따라 작업 수행 중인 Flex 기본 커서를 표시하거나 숨깁니다.

예제

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 

    viewSourceURL="src/CursorDefaultBusy/index.html" 
    width="400" height="160" 
> 
    <mx:Script> 
        <![CDATA[

            import mx.controls.Button; 
            import mx.managers.CursorManager; 
            import flash.events.*; 

            private const ON_MESSAGE:String = "Busy Cursor ON"; 
            private const OFF_MESSAGE:String = "Busy Cursor OFF"; 

            private function busyCursorButtonHandler(event:MouseEvent):void 
            { 

                var toggleButton:Button = event.target as Button; 
                if (toggleButton.selected) 
                { 

                    CursorManager.setBusyCursor(); 
                    toggleButton.label = ON_MESSAGE; 

                } 
                else 
                { 
                    CursorManager.removeBusyCursor(); 
                    toggleButton.label = OFF_MESSAGE; 
                } 

            } 
        ]]> 
    </mx:Script> 

    <mx:Panel 
        paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" 
        horizontalAlign="center" verticalAlign="middle" 

        title="Default busy cursor" 
    > 

        <!-- Toggle button turns default busy cursor on and off. --> 
        <mx:Button 
            label="{OFF_MESSAGE}" toggle="true" 
            click="busyCursorButtonHandler(event);" 

        /> 

        <mx:Text text="Click the button to display or hide the busy cursor."/> 
    </mx:Panel> 
</mx:Application>

결과

전체 소스를 보려면 Flex 어플리케이션을 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 View Source를 선택합니다.

사용자 정의 커서 사용

JPEG, GIF, PNG 또는 SVG 이미지, Sprite 객체 또는 SWF 파일을 커서 이미지로 사용할 수 있습니다.

Cursor Manager를 사용하려면 mx.managers.CursorManager 클래스를 어플리케이션으로 가져온 다음 해당 속성과 메서드를 참조합니다.

다음 예제에서는 Adobe Flash에서 만든 모래 시계 SWF 애니메이션을 임베드하여 사용자 정의 커서로 사용합니다. 예제에서 CursorManager 클래스의 setCursor() 정적 메서드를 호출한 다음 사용자 정의 커서로 사용할 임베드된 에셋의 클래스로 참조로 전달하여 사용자 정의 커서를 만듭니다. CursorManager 클래스의 removeCursor() 정적 메서드를 호출한 다음 CursorManager 클래스의 currentCursorID 정적 속성으로 전달하여 사용 중인 사용자 정의 커서를 제거할 수 있습니다.

예제

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 

    viewSourceURL="src/CursorCustom/index.html" 
    width="400" height="160" 
> 
    <mx:Script> 
        <![CDATA[ 

            import mx.controls.Button; 
            import mx.managers.CursorManager; 
            import flash.events.*; 

            // Embed the SWF that will be used as  
            // the custom cursor.  
            [Embed(source="assets/hourglass.swf")] 

            public var HourGlassAnimation:Class; 

            private const ON_MESSAGE:String = "Custom Cursor ON"; 
            private const OFF_MESSAGE:String = "Custom Cursor OFF"; 

            private function busyCursorButtonHandler(event:MouseEvent):void 
            { 

                var toggleButton:Button = event.target as Button; 
                if (toggleButton.selected) 
                { 

                    // The setCursor() method returns a numeric ID for  
                    // the cursor being set. You can store and use this  
                    // ID later in a removeCursor() call, or, you can  
                    // use the static currentCursorID property of the  
                    // CursorManager class to achieve the same result. 
                    CursorManager.setCursor(HourGlassAnimation); 
                    toggleButton.label = ON_MESSAGE; 
                } 

                else 
                { 
                    CursorManager.removeCursor(CursorManager.currentCursorID); 
                    toggleButton.label = OFF_MESSAGE; 
                } 

            } 
        ]]> 
    </mx:Script> 

    <mx:Panel 
        paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" 
        horizontalAlign="center" verticalAlign="middle" 

        title="Custom cursor" 
    > 

        <!-- Toggle button turns the custom cursor on and off. --> 
        <mx:Button 
            label="{OFF_MESSAGE}" toggle="true" 
            click="busyCursorButtonHandler(event);" 

        /> 

        <mx:Text text="Click the button to display or hide the custom cursor."/> 
    </mx:Panel> 
</mx:Application>

결과

전체 소스를 보려면 Flex 어플리케이션을 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 View Source를 선택합니다.

---

추가 정보

툴팁에 대한 자세한 내용은 Flex 2 Developer's Guide*의 "Using the Cursor Manager"를 참조하십시오.

저자 소개

배우 겸 가수로도 활동하고 있는 Aral Balkan은 개발 팀을 이끌고 사용자 경험을 디자인하고 리치 인터넷 어플리케이션을 설계하며, 런던 Macromedia 사용자 그룹인 OSFlash.org와 자신의 회사인 Ariaware를 경영하고 있습니다. 디자인 패턴에 대한 의견을 교환하고 책 저술과 잡지에 기고하는 일을 즐기며, Flash Platform용 개방형 소스 RIA 프레임워크인 Arp를 만든 사람이기도 합니다. Aral은 대체로 자기 주장이 상당히 강한 편이며, 활기차고 열정적입니다. 웃는 것을 좋아하고 껌을 씹으며 길을 걷기도 합니다.

출처 : http://theeye.pe.kr/entry/Flex-BlazeDS-with-Spring-Annotation?category=11

Flex 개발을 하다보면 서버와의 통신을 통해 다양한 방법을 사용할수 있다는 장점을 쉽게 알 수 있습니다.

하지만 안타까운게 Remote Object를 사용하기 위해서는 얼마인지 산출하기도 힘든 비싼 FDS (LCDS)를 구매해야 한다는 장벽이 있었죠.

이 장벽에 막혀 안정성이 확보되지 못한 일부 오픈 소스제품군을 사용하거나 다른 방식의 통신을 사용하여야 했습니다.

하지만 LCDS의 빠른 속도를 보장받을수는 없었죠. 현재 LCDS의 Remote Object 통신 프로토콜은 AMF3 (Action Message Format 3)까지 나왔습니다.

하지만 Adobe에서 BlazeDS라는 이름의 LCDS 무료버젼을 내놓았습니다. 또한 오픈소스로 개발 진행중입니다.

또한 Jeff Vroom 이라는 멋진 분이 Spring ↔ BlazeDS 간 통신할 수 있는 Factory를 개발하였습니다.

관련 정보는 다음을 참고하세요

[ 어도비 기술문서 ]
[ Sewon님 블로그 ]
[ 머드초보님 블로그 ]

하지만 위의 기술 내용들은 Spring Framework를 이용하여 어노테이션 기반으로 개발중이라면 여간 성가시게 만드는 부분이 많지 않은가 싶습니다.

위의 내용도 매우 간단해 지고 쉬워졌지만 BlazeDS도 어노테이션을 이용해 연동할 수 있으면 얼마나 좋을까 생각하게 만들었습니다.

그러던중에 좋은 자료를 발견하였습니다.

1. Spring에서 @RemotingDestination 어노테이션을 사용하기 위해 다음의 라이브러리를 다운받습니다. 여기에는 Jeff Vroom씨가 만든 Spring Factory도 포함하고 있습니다.

[ 다운받으러 가기 ]

2. remotingdestination-annotation.zip 파일을 개발중인 프로젝트의 WEB-INF/lib 디렉토리에 넣어줍니다.

3. BlazeDS의 설정파일인 services-config.xml 에 SpringAutowiringBootStrapService를 등록해 줍니다.

<?xml version="1.0" encoding="UTF-8"?>


<services-config>


    <services>


        <service-include file-path="remoting-config.xml" />


        <service-include file-path="proxy-config.xml" />


        <service-include file-path="messaging-config.xml" />


            <service id="spring-autowiring-bootstrap-service"


                class="flex.contrib.services.SpringAutowiringBootstrapService"/>


        <default-channels>


            <channel ref="my-amf"/>


        </default-channels>


    </services>



....




    <factories>


        <factory id="spring" class="flex.contrib.factories.flex.SpringFactory" /> 


    </factories>


</services-config>

SpringAutowiringBootStrapService은 BlazeDS 로딩시에 모든 @RemotingDestination 어노테이션이 포함된 클래스를 등록합니다. 이것은 Spring Factory를 통해 동적으로 Spring의 Bean을 불러다 사용할 수 있음을 뜻합니다. 밑에 추가한 factory의 경우 id는 꼭 spring이어야 합니다.

4. 마지막으로 당신의 서비스 클래스에 @RemotingDestination 어노테이션을 붙여줍니다.

package flex.contrib.samples.mortgage;



import org.springframework.beans.factory.annotation.Autowired;


import flex.contrib.stereotypes.RemotingDestination;



@RemotingDestination(destination="mortgageService")


public class Mortgage {


    @Autowired RateFinder rateFinder;


    public void setRateFinder(RateFinder rateFinder) {


        this.rateFinder = rateFinder;


    }



    public double calculate(double amount) {


        int term = 360; // 30 years


        double rate = rateFinder.findRate();


        return (amount*(rate/12)) / (1 - 1 /Math.pow((1 + rate/12), term));


    }


}

5. 물론 Spring에서 component-scan과 annotation-config를 설정해 주는걸 잊지 말자고요.

<?xml version="1.0" encoding="UTF-8"?>


<beans xmlns="http://www.springframework.org/schema/beans"


       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"


       xmlns:context="http://www.springframework.org/schema/context"


       xsi:schemaLocation="http://www.springframework.org/schema/beans


            http://www.springframework.org/schema/beans/spring-beans-2.5.xsd


            http://www.springframework.org/schema/context


            http://www.springframework.org/schema/context/spring-context-2.5.xsd">



    <context:annotation-config/>


    <context:component-scan base-package="flex.contrib.samples"/>


</beans>

6. Flex 에서는 다양한 방법의 Remote Object 통신방법으로 서버의 서비스에 직접 접근할 수 있게 됩니다.

var amfChannel:AMFChannel = new AMFChannel("my-amf", "http://localhost/messagebroker/amf");


var channelSet:ChannelSet = new ChannelSet();


channelSet.addChannel(amfChannel);


    


var remoteObject:RemoteObject = new RemoteObject();


remoteObject.channelSet = channelSet;


remoteObject.destination = "mortgageService";


remoteObject.addEventListener(ResultEvent.RESULT, resultHandler);


remoteObject.addEventListener(FaultEvent.FAULT, faultHandler);


remoteObject.calculate(5);

+. @RemotingDestination에서 지정한 destination이 Flex에서 지정하는 destination이 됩니다. 주의할점이 하나 있는데 web.xml의 contextConfigLocation 설정에서 정의한 컨텍스트의 Bean만 가져올 수 있습니다.

참고자료 : http://marceloverdijk.blogspot.com/2008/01/code-by-convention-with-flex-and-spring.html

 

 

본문 : 

http://cafe.naver.com/flexcomponent/5679

플렉스에서는 동적 프라퍼티가 있어서 따로 맵 API 를 제공하지 않더라구요.

그래서 하나 만들었습니다. 저도 자바 개발자라서, 가장 자주 쓰는 게 없으니까 불편하더군요. 

Object 의 동적 프라퍼티 기능을 이용해서 자바의 Hashtable 과 동일한 API 를

구현했습니다.

소스보기 

Flex Style Explorer 입니다.

Flex 3 스타일익스플로러 참고하세요.