FLEX를 개발할 수 있는 무료 환경 !


이전에는 Eclipse 깔고 Plug in 설치하고 이런짓을 했었는데  이제는 Flashdevelop 이란 Java 기반 무료 프로그램인 것 같은데 ...


집에 날잡고(ㅠ_ㅠ 시간이 허락한다면 ㅠ_ㅠ) 설치 해봐야겠음 >_<


아래 링크 ! 

http://www.flashdevelop.org 


copy & paste 

저작자표시

flash.display 패키지 내에는 DisplayObjectContainer 라는 Class가 있다.

위의 Class는 UIComponent를 상속받는 Container 들에게도 해당 속성이 적용 받는데, 포스트에 적을 것은 게중에 해당 컨테이너에 속한 컴포넌트들의 속한 순서(? addChild 된 순서)를 바꾸는 것을 알아 본다.

일단 DisplayObjectContainer에는 Canvas나 혹은 다른 Container 들에게 볼 수 있는 몇가지 Method가 있다.

setChildIndex(child:DisplayObject, index:int):void
Changes the position of an existing child in the display object container.
swapChildren(child1:DisplayObject, child2:DisplayObject):void
Swaps the z-order (front-to-back order) of the two specified child objects.
removeChild(child:DisplayObject):DisplayObject
Removes the specified child DisplayObject instance from the child list of the DisplayObjectContainer instance.
getChildIndex(child:DisplayObject):int
Returns the index position of a child DisplayObject instance.

이것 이외에도 여러가지 유사한 기능을 하는 Method들이 있다. Parameter만 다르고 기능은 거의 같으니 일단 이정도로 소개하도록 하고

 DisplayObjectContainer라는 Class 명에서 뜻하는 것처럼 다른 컴포넌트들을 담는 녀석들은 여러 자식 클래스(컨테이너에 addChild 시키는 컴포넌트들)를 담는데, 이를 add 시킨 순서로 0, 1, 2, 3, 4 .. 순으로 저장되게 된다. 그런데 이게 왜 중요하냐? 당연한게 아니냐? 의문이 들거다. 맞다. 너무 당연하다. 보통 Application들을 보면 여러가지 패널이라든지 혹은 창들을 보게 되는데 마우스를 클릭하면 해당 Unit 혹은 창들이 가장 최상위에서 활성화되게 된다. 즉, 선택한 녀석만 최상단에 나오게 되는 것이다.

 플래스를 하다가 보면 Click 이벤트로 유닛을 Drag 하고 Drop 하는 등 여러가지 일을 할 수 있는데, 이런 Container에 속한 자식들에 대한 Focus는 자체적으로 지원해 주지 않는다. ( 아시면 댓글 좀...)
 뭐 찾아보면 있을 수도 있는 거지만, 지금까지 헛 공부 한 것이 아니라면 자동으로 지원해 주지 않는다.
 그래서 위와 같이 여러 다중의 창이 떴을때 이런 것을 해주기 위해서는 위의 메서드들을 알아야 한다는 것이다.




 위의 코드에서 붉은 색 라인의 것은 swapChild를 사용해서 add 된 컴포넌트들끼리 순서를 바꿔준다. 물론 바꿔줄때 자신의 순번보다 하위에 있는 것은 손볼 필요가 없으므로 자신보다 순번이 높은 컴포넌트들끼리 바꿔주면 원하고자 하는 기능을 완성할 수 있다.

 아래는 위의 소스를 실행한 화면이다.





클릭한 사각 박스가 우선 선택 되는 것을 확인 할 수 있다.


-PS-
 가끔 오류가 나는데 Canvas로 된 Container를 선택하는게 아니라 쌩뚱맞게 뒤의 Border를 Swap 할때 선택하게 되서 오류가 난다. 드레그 한 사용자의 잘못이 아니라, 플래시 플레이어에서 이상하게 인식하는 건지 거참 요상하다. 잘되었다가 안되었다가 마음대로다. =_-...






저작자표시 변경금지



  Sandbox 요류에 대해서 많이 조사를 하지 않았지만, 대충 보안 정책상 발생하는 문제 라고 이곳 저곳에서 주워 들었다.  ( 참고 : 링크1 , 링크2   )

  거의 모든 틀을 만들어 놓았다고 조금 낙낙해 있는데, 금일 Editor에 이미지 첨부를 하니 이거 왠걸? 되지 않았다. 물론 FLEX 에서는 정상적으로 이미지 및 HtmlText가 표현이 되었으나, AIR에서는 되지 않는 상황 !!!

  뭔가 잘 못 된 것이 있는지 다시 코드를 짜보고 몇시간 동안 삽질을 하다가 혹시나 하는 검색에 두둥 ... 나와 같은 삽질을 먼저 해본 분들이 몇분 계셨다.

  해결책 ? IFrame 이란 것을 사용하라 ? 일단 사용안해봐서 모르겠고, 둘째는 SandBox 보안 수준을 낮춰라 ? 일단 그것도 접어 두고 ㅡㅡ... AIR 자체로서 그런 기능을 구현하기 어려운듯.

  원래 계획 이었던 모든 등록 관련 한 것은 AIR에서 하고, View만 Web에서 서비스 해주려고 했으나, 어쩔 수 없이 저쪽 한 단면은 웹으로 빼서 사용해야 할 듯 싶다.

  혹시나 해서 AIR에서 HtmlLoader를 통해 웹페이지를 가져오니 ... 아주 잘 된다.
 
  이걸로 문제를 해결해야 될 것 같은데... 요놈의 데이터 전송 부분이 발목을 잡는다. ㅠ_ㅠ

  아참, AIR를 사용하지 않고 파일 전송을 위해서는 FileReference 라는 Class를 사용한다. 내부에 Download, Upload라는 Method들을 내장하고 있으니 자세한 것은 Adobe sdk reference를 참고



결론.
100% 확신하는 것은 아니나, 1.5버전 AIR의 TextArea에서는 보안 정책으로 인해 img 태그가 먹혀들지 않는다.





저작자표시 비영리 동일조건

어이쿠야 ...

웹 프로그래밍을 그닥 해보지 않아서 잘 몰랐었는데 ...

CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
- Wikipedia CSS 검색 내용 중 -

요놈이 아주 중요한 놈이렸다...

일단 FLEX에서 TestArea에 htmlText라는 변수를 가지고 있는데 그놈에게 html code를 넣으면 TextArea에 html 코드가 출력이 된다.

그런데, ActionScript 3.0 에서 지원되는 Html tag는 한정적이고 모든 Tag들을 지원해 주지 않았다.

copy & paste를 통해 다른 워드프로그램에게서 데이터를 붙여 넣으면 내부에 선언된 Style 때문에 모든 서식이 깨져 일반 Text만 붙여지게 된다.

웹을 하는 사람들이라면 "당연"히 CSS는 기본이지 라고 할텐데, 그걸 이제사 깨닫다니 ㅡ_ㅡ ...

책을 끝까지 다 보질 않고 막 시작하다 보니 이런 참사가 ㅡ_ㅡ ...

웹표준으로 하기 위해선 이런 CSS를 바탕으로 개발을 !!!

아래는 표준 웹 코딩의 장점이라고 올려주신 포스트




덕분에 추가적으로 공부해야 될 것들이 더 생겼다.

앞으로 남은 시간은 ... 거의 2주. 하앍 ㅡ_ㅡ 미치겠고만 ...

사진임

사진임


AIR에서 작업중이지만... 만들다 만 것. 의외로 RichTextEditor 에서 제공되어지는 기본적인 기능말고 구현하려고 했지만... 결국 만들어진 기능은 RichTextEditor와 별반 달라진게 없다.

사진 업로드랑, 기타 여러가지 더 덧붙여서 수정할 예정 ...

아직까진 많이 부족하다... ㅠㅠ



ArrayCollection 에 담긴 데이터를 정렬할 일이 생겼다.

ArrayCollection 은 아니지만 비슷한 유형이라 관련 자료를 찾아 보았는데, ActionScript 3.4 reference에 간략한 소스와 함께 나와 있었다.

그것을 따라하면 별 다른 문제 없이 정렬이 된다.

물론 참고해야 될 것은 ArrayCollection만이 아닌 Sort, SortField 이렇게 3개를 참고해야 한다.




아래 참고 소스는 ActinoScript 3.4 reference에서 참고 한 것이다.


 
     var col:ICollectionView = new ArrayCollection();

     // In the real world, the collection would have more than one item.

     col.addItem({first:"Anders", last:"Dickerson"});

     // Create the Sort instance.

     var sort:Sort = new Sort();

     // Set the sort field; sort on the last name first, first name second.
     // Both fields are case-insensitive.

     sort.fields = [new SortField("last",true), new SortField("first",true)];

       // Assign the Sort object to the view.

     col.sort = sort;

     // Apply the sort to the collection.

       col.refresh();


 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="135" borderStyle="solid" layout="absolute" backgroundColor="#EFEFEF">
    <mx:Script>
        <![CDATA[
        
            import mx.collections.Sort;
            import mx.collections.SortField;
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var array:ArrayCollection;
            private var numFlag:Boolean = false;
            private var txtFlag:Boolean = false;
            
            
            /**
             *         @function        : initApp
             *         @param            : none
             *         @description    : ArrayCollection instance와 데이터 추가
             *
             * */
            private function initApp():void
            {
                array = new ArrayCollection();                ///< ArrayCollection instance
                
                array.addItem({NUM:100, TXT:"AAAAA"});        ///< add item
                array.addItem({NUM:1, TXT:"CCCCC"});
                array.addItem({NUM:10, TXT:"BBBBB"});

            }

            /**
             *         @function        :    numClickEvent
             *         @param            :    none
             *         @description    :    numFlag 를 참조하여 오름차순, 내림찬순으로 정렬한다.
             * */            
            private function numClickEvent():void
            {
                if( array != null )        ///< 만약 초기화를 통해 null이 아니라면
                {
                    var sort:Sort = new Sort();
                    sort.fields = [ new SortField("NUM", true, numFlag) ];
                    array.sort = sort;            ///< ArrayCollection 내 sort에 대입한다
                    array.refresh();            ///< 컴포넌트를 갱신한다
                    numFlag = !numFlag;
                }                
            }            
            
            /**
             *         @function        :    txtClickEvent
             *         @param            :    none
             *         @description    :    txtFlag 를 참조하여 오름차순, 내림찬순으로 정렬한다.
             * */
            private function txtClickEvent():void
            {
                if( array != null )        ///< 만약 초기화를 통해 null이 아니라면
                {
                    var sort:Sort = new Sort();
                    sort.fields = [ new SortField("TXT", true, txtFlag) ];
                    array.sort = sort;            ///< ArrayCollection 내 sort에 대입한다
                    array.refresh();            ///< 컴포넌트를 갱신한다
                    txtFlag = !txtFlag;
                }
            }
            
        ]]>
    </mx:Script>
    
    <mx:DataGrid width="100%" height="100" dataProvider="{array}" editable="false" sortableColumns="false" creationComplete="initApp()" />
    <mx:HBox width="100%" height="25" bottom="3" horizontalCenter="0" horizontalAlign="center">
        <mx:Button width="100%" label="NUM" click="numClickEvent()"/>            
        <mx:Button width="100%" label="TXT" click="txtClickEvent()"/>
    </mx:HBox>
    
</mx:Application>


아래는 결과 swf 파일.
NUM 버튼을 누르면 NUM 정렬이, TXT를 누르면 TXT 정렬이 된다.
(두번 눌렀을 경우 역순으로 정렬)





저작자표시 비영리 변경금지



FLEX 작업중 몇일째 보는 녀석이다.

그전에는 잘못된 사용으로 인해 null 객체 참조가 일어나는 것으로 알았다.
그래서 많은 시간이 흐르는 동안 "방치" 해 두고 다른 작업을 하고 있었다.

역시... 묵혀 놓으면 곪아서 터진다고, 중요한 시기에 적절한 해결책을 찾지 않고 넘어간 덕분에 이곳저곳에서 빵빵 터졌다. 깨알같은 버그와 에러들 ... (박명수씨 버전으로 하면 재미있을까 ... 깨알같은 웃음 :))

수분(혹은 수시간)을 검색하던 중 addChild 라는 녀석에 의해 이런 현상이 발생한다고 한다.
UIComponent가 load 되는 와중에 addChild를 수행하게 되면 null ( 당연하겠지만, 결혼도 하지 않은 처녀에게 애를 가지라고 하니 황당할 따름. 물론 성모 마리아는 예외다) 값으로 뱉어 버리는 ㅡㅡ..

찾고나서 링크를 저장해 놨어야 하는데, 저장하지 못한 점과 직접 실험을 통해 해결하지 못하였기에 확답을 못하겠지만 찾은 내용으로 봐서는 Load가 완료되는 시점( event 이긴 한데 무슨 STATE가 들어 있었다 )에 이런 addChild 같은 수행을 하는 녀석을 하면 에러가 없다고 한다.

그것 말고도 creationPolicy = "all" 을 하면 된다고 하는데
ex:) <mx:Canvas 생략 creationPolicy="all" />
로 하면 생성할 당시에 이런 빌어먹을 #1009 에러가 해결된다고 하는 몇몇 블로거들의 답변을 봤는데, 안된다.. ㅠ_ㅠ 아마 사용하는 시점에 대해 이해가 부족해서 일듯 ㅡㅡ:

조만간 네이버 카페 서비스 점검이 끝나면 더 찾아 봐야겠다.

아직도 Flex event flow에 대한 이해가 부족해서 이렇게 버벅거리는 듯 ㅠ_ㅠ


일단 다시 전진 전진 !

정상적으로 해결책을 찾으면 간단한 예제와 함께 포스팅을 ㅠ_ㅠ


+ Recent posts

티스토리툴바