어이쿠야 ...

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


CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTMLXHTML에 주로 쓰이며, 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에 대한 이해가 부족해서 이렇게 버벅거리는 듯 ㅠ_ㅠ


일단 다시 전진 전진 !

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



 Flex를 하다가 보니 여러모루 ActionScript를 가지고 코딩해야 할 것들이 많았다.
 물론 도서를 구입하고 책을 보며 하다 보니 대부분의 내용이 ActionScript 3.0 에 관한거라 Trace 함수를 사용해서 콘솔에 결과값을 출력해 주는게 다였다. 그래픽 작업도 있지만서도 ...
 흔히 하는 것처럼 코드를 작성하고 CTL+F11 을 눌러(혹은 ▶ 버튼을 누르면) 실행을 할려하는데 아닌 이게 왠걸 ?
 Trace 함수가 작동하지 않는다 ?!

 그래서 인터넷을 잠시 검색해 봤다. Trace함수는 Debugger Flash player에서 동작한다고 한다(정확한 정보는 아니니... 검색을 통해 정확한 지식을 습득하는게 좋을 듯 합니다. ㅡㅡ : 하지만 Flex builder로 실행하려고 하면 현재의 Flash player는 안된다고 나옵니다. 디버그 모드가 내장된게 아니라서 말이죠)
 아무튼, Adobe 사에 올려진 디버거 버젼의 플래쉬 플레이어를 설치하고 나니, FLEX Builder 아래에 결과창이 정상적으로 출력!!





자 일단 > 어도비 에 들어 가신후 ...


아래에서 입맛대로 골라 다운을 받습니다. 그런다음, 설치 하시면 되요~ 그럼 디버거 버젼 플래쉬 플레이어 설치 완료 !



Source

package {
    import flash.display.Sprite;

    public class Test_ActionScript1 extends Sprite
    {
        public function Test_ActionScript1()
        {
            trace("안녕하세요");
        }
    }
}



Result



 이렇게 아래에 Console창에 결과물이 출력된다.
 블로그들을 이리저리 뒤지다 보면 Log도 Debugger 모드를 사용해서 볼수 있다고 하는데, 일단 내 앞길이 바빠서 이만 ㅋ










 다른 것들과 마찬가지로 사용자가 원하는 만큼 객체들을 생성할 수 있다.
 이때, 주의해야 하는 것은 "addChild( Object )" 부분인데 해당 컨테이너(Object와 같은 뭔가를 담는 그릇)에 추가시켜 주어야 한다.
 기본적으로 작업하는 mxml의 페이지가 최상위가 되므로 해당 페이지에 addChild를 통해 넣고자 하는 것들을 담아 주면, 원하는 결과물이 화면에 갱신되어 보여진다.



Resource


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
    <![CDATA[
        private var pos_x:int = 0;
        private var pos_y:int = 0;
       
        public function createPanel():void
        {
            var v_button:Button = new Button();
            v_button.x = 0 + (pos_x += 5);
            v_button.y = 20 + (pos_y += 5);
            this.addChild( v_button );
        }       
    ]]>
</mx:Script>
    <mx:Button label="CreateButton" click="createPanel();"/>   
</mx:Application>



Result



Source는 CreateButton(자식 버튼을 생성하는 이벤트가 걸린 버튼)을 누르면 아래 소형 버튼이 생성되는 코드다.





WCF 프로젝트를 처음 생성하면

IService1.cs
Service1.svc
 - Service1.svc.cs
Web.config

이라는 파일이 생성된다.

 IService1.cs 에는 [ServiceContract]로 선언된 Service 요청이 성공하였을 때 해당 서비스를 외부에서 namespace등을 접근을 하기 위한 기능들로 구성되어 있다.
 예를 들면 내부에 Service1.svc 에서 선언되고 구현되어진 코드들(메소드)을 IService1.cs에서 [OperationContract]라는 메타데이터로 선언되어 외부에서 사용가능한 기능들의 모음으로 구성되어 있다.

 Web.config 아네는 Web Service시에 필요한 설정값들이 저장되어 있다. 일예로 SOAP 서비스를 할때, 어떤 규약으로 데이터를 전송할 것인지에 대한 정보가 담겨져 있다. 추가적으로 Local에서 작업을 할 것인지, 혹은 외부로 노출을 시킬 것인지에 대한 것도 담겨져 있다.
 기본적인 수정법은 Web.config 내의 코드 라인중


  <system.serviceModel>
  <services>
  <service name="WcfService1.Service1" behaviorConfiguration="WcfService1.Service1Behavior">
  <!-- Service Endpoints -->
  <endpoint address="" binding="basicHttpBinding" contract="WcfService1.IService1">


윗 부분을 수정해 주면 된다. WCF 책 내용중에 HttpBinding의 종류는 여러개지만 이기종간의 데이터 통신의 기본인 TCP방식을 통한 전송을 위해서 basicHttpBinding을 사용해야 한다고 적혀 있다.

to be continue ...

+ Recent posts