HDividedBox

liveDragging="true"

 

이렇게 주면 HDividedBox의 사이즈가 변화는 즉시 화면에 반영된다.

오늘 내가 죽는다면

오늘 내가 죽는다면 이 일을 할까? 그럴리가.

flex 비디오 예제

http://www.fxcomponents.com/item/flex-video-player/29/

ObjectHandles 선택기능 구현 살펴보기

디자인 툴을 만들기 위해 http://www.rogue-development.com/objectHandles.html를 사용한다. 여러 개의 컴포넌트 중 한 개가 선택되면 기존에 선택되어 있던 것은 해제되고 새로운 것만 선택된다. 이 구조를 어떻게 구현했는지 찾아보니 다음과 같다.

 

1. ObjectHandles의 onMouseDown 발생

2. SelectionManager.instance.setSelected(this); 실행

3. 2번의 setSelected 메소드에서 기존에 선택된 것이 있으면 deselect() 시키고 새로운 것을 select() 한다.

 

화면을 lock 시키면 select되지 않게 만들어야 했다. SelectionManager을 살펴보니 addSelectable, removeSelectable 메소드가 있다. addSelectable에서 _items 라는 곳에 select 가능한 object들이 추가 되는데 SelectionManager는 위에서 쓰는 것처럼 싱글톤이다. 그래서 application 전체의 Object들이 이 곳에 담기게 된다. application 내부 에서 두 개의 design 화면을 띄우고 이쪽은 lock 저쪽은 unlock 시키려고 이 _items를 사용하면 안된다.

Flex의 List에서 아이템을 더블클릭 시 수정할 수 있게 바꾸기

Flex의 List에서 아이템을 더블클릭 하면 수정되게 하고싶을 때가 있다. 아래 링크한 문서에서 Comments에 JabbyPandaUA 라는 사람이 남겨놓은 답이 좋아 보인다.

 

참고 : http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=8983

 

addEventListener(ListEvent.ITEM_DOUBLE_CLICK, onItemDoubleClick, false, EventPriority.DEFAULT_HANDLER);

protected function onItemDoubleClick(event : ListEvent) : void {
  
   var isEventPrevented : Boolean = event.isDefaultPrevented();
   if (event.isDefaultPrevented()) {
    return;
   }
                   
   editable = true;
         editedItemPosition = {columnIndex : 0, rowIndex : event.rowIndex};                      
  }

위와 같이 한다. 단순히 editable = true 속성을 지정해 두면 더블 클릭이 아닌 원 클릭에도 수정모드로 들어간다. 위의 코드도 한 번 editable이 되면 계속 editable이 되므로 change 이벤트 등에서 무조건 editable = false; 로 지정해 주니 잘 된다.

event 나중에 처리하기

flexmdi라는 flex에 데스크탑을 구현한 오픈소스가 있다. 여기를 클릭하면 볼 수 있다. 여기 샘플 코드에 괜찮은 설명이 있어서 옮겨 적는다.

 

 

   // the flex framework dispatches all kinds of events
   // in order to avoid catching one of those and throwing a coercion error
   // have your listener accept Event and check the type inside the function
   // this is good practice for all Flex development, not specific to flexmdi
   private function confirmWindowClose(event:Event):void
   {
    if(event is MDIManagerEvent && confirmCloseCb.selected)
    {
     // store a copy of the event in case we want to resume later (user confirms their intention)
     queuedEvent = event.clone() as MDIManagerEvent;
     
     // this is the line that prevents the default behavior from executing as usual
     // because the default handler checks event.isDefaultPrevented()
     event.preventDefault();
     
     Alert.show("Seriously? Close it?", null, 3, null, handleAlertResponse);
    }
   }
   
   // called when the Alert window is closed
   // if the user said yes, we execute the default behavior of playing an effect
   // and then removing the window by sending the stored event to
   // the appropriately named executeDefaultBehavior() method
   private function handleAlertResponse(event:CloseEvent):void
   {
    if(event.detail == mx.controls.Alert.YES)
    {
     mdiCanvas.windowManager.executeDefaultBehavior(queuedEvent);
    }
   }

 

 

윈도우를 닫을 때 발생한 이벤트에서 이벤트를 clone하여 queuedEvent라는 곳에 임시 저장하고 event는 preventDefault() 한다. 만약 사용자가 윈도우를 닫기 원하면 queuedEvent를 처리한다.

 

이벤트를 받을 때 타입체크를 하라는 설명도 보인다.

Flex에서 스크롤바 가장 밑으로 내리기

아래처럼 하면 object에 붙어있는 스크롤바를 가장 하단으로 내릴 수 있다.

 

      object.verticalScrollPosition = object.maxVerticalScrollPosition;
      object.validateNow();

 

적어놨다고 생각했는데 없네.

기술세미나 2009 Flex4 활용 및 UX 구현 테크닉

어제 2009년 8월 13일 Flex4 활용 및 UX 구현 테크닉을 주제로 세미나가 있었다. OkGosu.Net의 옥상훈님, 한국키스코의 배준균님 그리고 위콘 커뮤니케이션의 지용호님이 세미나를 진행 하셨다. 주제는 각각 UX 구현 테크닉, BlazeDS 활용, Flex 4의 새로운 기능에 대한 것이었다.

 

 

backgroundImage 늘리기

Flex에서 canvas에 backgroundImage를 지정할 수 있다. 그리고 canvas를 늘렸을때 backgroundImage가 canvas 크기에 맞춰서 자동으로 늘어나게 하려면 backgroundSize를 100%로 주면 된다.

PureMVC 사용에 대한 고민 4

Yakov Fain 중심으로 찾아가면 뭐가 많다. farata에서 공개한 Clear Toolkit을 대충 봤다. Enterprise Development with Flex: Best Practices for RIA Developers 사봐야겠다.

 

참고 :

+ Anti Flex Frameworks, Shall We? - http://www.flex888.com/768/anti-flex-frameworks-shall-we.html

+ Clear Toolkit - http://sourceforge.net/projects/cleartoolkit/

 

 

모르겠다. List의 Label 변경 시점에 변경된 Label 얻기

Flex에서 List에 editable="true"으로 주면 label을 편집할 수 있다. 그리고 itemEditEnd의 이벤트 핸들러를 지정하면 item이 변경되고 나서 event를 받을 수 있다.

 

그런데 이 이벤트에서 변경된 아이템의 label을 얻기위해 list.selectedItem으로 title을 얻어봤으나 얻어지지 않았다. 그래서 저장한 XML 일부가 반영되지 않았다.

 

급해서 저장시점에 list를 돌며 저장하는 방법으로 바꿨음.

Flex로 Design tool 만드려면

Flex로 Design tool 만들때 컴포넌트들을 리사이징하고 위치를 조정하기 위한 핸들러의 구현이 필요할 수 있다. MFC에서는 CRectTracker라는 것을 지원 했는데 Flex에서는 그런 것을 직접 지원하지는 않는다.

 

아래 주소의 라이브러리를 사용하면 이를 쉽게 구현할 수 있다.

 

http://code.google.com/p/flex-object-handles/wiki/ObjectHandlesUsage

dataProvider를 갖고있는 컴포넌트들

dataProvider를 갖고있는 컴포넌트들

 

ButtonBar
ColorPicker
ComboBox
DataGrid
DateField
HorizontalList
LinkBar
List
Menu
MenuBar
PopUpMenuButton
Repeater
TabBar
TileList
ToggleButtonBar
Tree

 

출처 : http://livedocs.adobe.com/flex/3/html/help.html?content=about_dataproviders_2.html

AIR에서 WebORB for PHP 사용

weborb\Weborb\WEB-INF\flex 위치에 remoting-config.xml, services-config.xml를 잘 변경해줘야 쓸 수 있다. services-config.xml에 my-air-amf 라는 게 있어서 봤더니 주소가 틀려서 접속이 안되더라.

 

remoting-config.xml 에 보면 아래와 같은 xml이 있다.

 

    <destination id="GenericAIRDestination">
        <channels>
          <channel ref="my-air-amf"/>
        </channels>   
        <properties>
            <source>*</source>
        </properties>
     </destination>

 

이 remoting-config.xml과 services-config.xml이 뭐 어떻게 꿍짝꿍짝 하나본데 급하게 하느라 WebORB에서 문서를 몇 번 찾아보다가 안보여서 그냥 "되는데 뭐~" 하면서 관뒀다.

 

destination의 id값은 RemoteObject의 destination 프로퍼티 값 혹은 RemoteObject 생성할 때 생성자의 첫 번째 인자로 지정해주는 값이다. source가 만약 com.example.app.FileSystemBrowser로 지정되어 있으면 weborb\Services\com\example\app에 있는 FileSystemBrowser.php 클래스를 사용하게 된다. 기타 다른 클래스가 또 있다면 아래와 같이 지정해주면 된다.

 

flash.net.registerClassAlias("com.example.app.FolderItem", FolderNode);
flash.net.registerClassAlias("com.example.app.FileItem", FileNode);
flash.net.registerClassAlias("com.example.app.FileSystemItem", FileSystemNode);

 

이렇게 해두면 flex에서 원격(WebORB for PHP로 구성된 웹서버)에 있는 SomeMethod(fileNode); 메소드를 호출하면 FileNode 타입을 서버에서 받아 그대로 사용할 수 있다. 어쨌든 비동기라 짜기 귀찮긴 하지만 XML 파싱하고 전송하고 받고 그런거 안하는 게 어디야.

label 텍스트에 그림자 넣어 효과주기

<mx:DropShadowFilter id="filter" distance="2" angle="45" alpha="1" color="#000000" />

<mx:Label text="Hello Blogger!" filters="{[filter]}" color="#FFFFFF" />

 

label 텍스트에 그림자를 주고 싶으면 위처럼 한다.

ProgressBar label 지정

ProgressBar의 label을 label="{sStatus} %1 of %2 bytes, %3%%" 이런식으로 지정하는 코드를 WebORB FileUpload 예제에서 봤다.

공포의 프로퍼티

컴포넌트에 프로퍼티를 만들고 프로퍼티를 mxml로 접근 해보고 싶었다. 런타임 에러가 났는데 이상하게 에러가 나면 리부팅 하기 전까진 해당 프로젝트는 빌드 후 실행이 안되는 거다. 결국 setter는 있는데 getter가 없던 것, 접근 지정자가 protected로 설정되어 있던 것, 데이터 타입이 String인데 Object로 받던 것을 고쳤더니 해결됐다. 프로퍼티를 protected로 하고 mxml에서 접근하려할 때 컴파일 에러가 났으면 좋았을텐데. 아무튼 나의 내공부족.

 

테스트

1. mxml에서 접근 할 프로퍼티를 public에서 protected로 고쳤더니 문제가 생긴다.

2. getter가 없어서 생긴 문제는 아니다.