[CH7] 1. LoaderTest

[CH7]에서 다루는 몇가지 Loader 실험에서는 외부 데이터(이미지 혹은 XML)를 읽어들이고 활용하는 과정에서 클래스를 어떻게 제작/활용 하는지를 알아본다.


클래스 설계(제작): 쓰기 편하게 만드는 대표적인 예
(같은 결과를 보여주더라도 일정 부분을 클래스로 제작하여 활용하면 효율성을 증가시킬 수 있다.)

* 동기식 ( Synchronous ) VS 비동기식 ( Asynchronous )
-동기식 (싱크로너스-->싱크로나이징)
싱크로나이징이란 보조를 맞추는 것 즉 호흡을 맞추는 것 :: 호흡을 잘 맞추려면 잘하는 사람이 기다려주는 것이 가장 중요하다.
동기식=기다려준다. (예시..편의점에서의 거스름돈 계산 시에는 과정이 금방 끝날 것을 알고 다른 일을 하지 않은 채 기다려준다 )

-비동기식
기다리지않기 (완전히 기다리지않는 것은 아니다.) 시켜놓고 내 할일을 하다 완료 되면 다시 바라본다.
(예시..세탁소에서는 미리 세탁물을 맡긴 후 다른 곳에서 본인 할일을 하다가 세탁이 완료되면 찾으러 간다 )

-컴퓨터는 동기식일까 비동기식일까?
동기식이다. (매우 빨리 돌아가기 때문에...)
현 액션 이후에 추가 액션이 있더라도 이전 것이 수행/완료될 때까지 기다린다.

function  AAA()
     {
         trace( "aaa" )
         BBB();        
         trace( "bbb" );
     }
     function  BBB()
     {
         trace( "kkk" );
     }    
     AAA();

     aaa = 20;
     bbb = 80;
              
     bbb = aaa + 20;
     bbb = bbb + 40;
    

-웹은????!!!!!
과거 jsp 일때는 동기식이었으나
최근 웹2.0의 AJAX( AJAX : Asynchronous Javascript And XML) 형식은  비동기식이다. (자바스크립트를 사용하고 XML을 사용)

-플레시는???!!!
플레시도 기본적으로 동기식으로 동작
그러나"외부와의 연동"은 비동기식으로 동작한다.
XML 가져오기 이미지 가져오기 (즉 네트웍을 탄다고 하면 모두 비동기식이다. )

1.0에서는 무비클립 로더를 이용했어야 했다.
function loadMovie(파일명)
this.width=400
this.height=500

그러나 3.0에서는 아래와 같은 방법으로 비동기식 코딩을 하도록 한다.
=======================================
!!!!!!비동기식 코딩방법 (아무리줄여도 3줄)
1.var 객체생성
2.데이터가 도착하면 할일
3.데이터 호출
=======================================



1.LoaderTest
먼저 비동기식 코딩방법을 이용하여 간단하게 외부이미지를 로드 하는 방법을 실험해보자.
(load할 이미지는 img folder를 생성하여 그 안에 "aaa.jpg"이름으로 저장한다.)

외부 이미지를 불러들이는 클래스 :Loader
특징
1. DisplayObjectContainer를 상속받았다..
2. 이벤트 연결은 loader.contentLoaderInfo.addEventListener로 해야 한다..
3. 이미지가 도착하면, Event.COMPLETE 이벤트가 발생한다.
4. 이미지는 Loader.content로 불려진다.. { content를 다른곳에 붙이지 않는다.. }


**test1과 test2의 차이는 this.addChild(loader)를 썼는가 this.addChild(loader.content); 임 해당 설명은 본문에 나와있음

package
{
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLRequest;

[SWF( width="550", height="400", frameRate="36", backgroundColor="0xEEEEEE")]
    public class LoaderTest1 extends Sprite
    {
        private var loader:Loader=new Loader();
        public function LoaderTest1()
        {
            super();
            //1.이미지관리객체만들기
            //var loader:Loader=new Loader();
            //2.데이터가 도착하면 할일  loader.addEventListener가 아니라
            //loader.contentLoaderInfo.addEventListener 예외케이스이므로 무조건 암기
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
            //3.이미지호출
            loader.load(new URLRequest("./img/aaa.jpg"));
            //4.화면에 붙이기
           addChild(loader);
        }
        private function onComplete(e:Event):void
        {
        //이미지의 크기나 위치 등을 변경하려면 이미지가 도착한 이후에 해야한다...!!!!!!!!!
        //실제 이미지는  loader.contents로 도착한다 !!
        //loader.width=50;
        //loader.height=50;
        //절대로 로더안에 있는 컨텐츠를 다른 곳에 붙이지 않는다. 단 한번만 작동하고 다음 시도때는 작동하지 않는다.
        //this.addChild(loader.content);
        trace( "이미지 도착");
        }
    }
}

package
{
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLRequest;

[SWF( width="550", height="400", frameRate="36", backgroundColor="0xEEEEEE")]
    public class LoaderTest1 extends Sprite
    {
        private var loader:Loader=new Loader();
        public function LoaderTest1()
        {
            super();
            //1.이미지관리객체만들기
            //var loader:Loader=new Loader();
            //2.데이터가 도착하면 할일  loader.addEventListener가 아니라
            //loader.contentLoaderInfo.addEventListener 예외케이스이므로 무조건 암기
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
            //3.이미지호출
            loader.load(new URLRequest("./img/aaa.jpg"));
            //4.화면에 붙이기
            //addChild(loader); //이거 쓸 때 this.addChild(loader.content); 를 가려주고 실험하자 
        }
        private function onComplete(e:Event):void
        {
        //이미지의 크기나 위치 등을 변경하려면 이미지가 도착한 이후에 해야한다...!!!!!!!!!
        //실제 이미지는  loader.contents 안으로 도착한다 !!
        //loader.width=50;
        //loader.height=50;
        //절대로 로더안에 있는 컨텐츠를 다른 곳에 붙이지 않는다. 단 한번만 작동하고 다음 시도때는 작동하지 않는다.
        this.addChild(loader.content); //이것 쓸 때 위에 있는 addChild(loader)가려주자고 실험하자
        trace( "이미지 도착");
        }
    }
}

위와 같이 내장 클라스인 Loader를 사용하는 것이 아닌 ImageLoader라는 새로운 클라스를 만들어 활용 할 수도 있다.'
특정 클라스를 상속을 받는 것보다 해당 클라스를 가지고 있는 것이 활용성에 있어서 유연하기 때문에 별도 전용 클라스를 만들어 쓰는 것이다. 상세 설명은 아래와 같다.

ImageLoader 클래스는 무엇을 상속받을까?
load의 기능이 필요한 경우는 두가지 (소송시 변호사가 되거나 변호사를 고용한다 (전자는 상속 후자는 가지는 것 )
1.loader를 상속 받는다 .... is a 관계  (내가 ~이다 )
2.loader를 하나 가진다 .... has a 관계  (내가 ~을 가진다 )
*******상속은 하나 밖에 못받기 때문에  has a가 더 유연하다  필요에 따라 여러개 가져올 수 있으므로 **********

이에 대한 실험은 ImageLoaderTest와 XMLLoaderTest를 참고하기 바란다.

* 동기식 ( Synchronous ) VS 비동기식 ( Asynchronous )


    *** 동기식 : ( 싱크로너스 --> 싱크로나이징 ) :: 호흡을 맞춘다..보조를 맞추는 것 ::: >>> 기다려준다..!!
        {동기식 == 기다려주기 }
       
    *** 비동기식 : 기다리지 않기.. { 완전히 기다리지 않는건 아니다..-.- } 

     컴퓨터는 동기식 or 비동기식
    
     function  AAA()
     {
         trace( "aaa" );
        
         BBB();
        
         trace( "bbb" );
     }
    
     function  BBB()
     {
         trace( "kkk" );
     }
    
    
     AAA();
    
        
    
     aaa = 20;
     bbb = 80;
              
     bbb = aaa + 20;
     bbb = bbb + 40;
    
    
     - 컴퓨터는 동기식이다...!!
         앞에 있이 끝날때까지.. 기다린다...!!
        
        
     AJAX : Asynchronous Javascript And XML
      
    
    
     // **********************************************************
    
     ** 플래시도 기본적으로 동기식으로 동작한다...!!
     --> 외부와의 연동은 비동기식으로 동작한다....!!!!!!!!!!!!!!!!!!!!
         XML 가져오기,  이미지 가져오기
        
     ************************************************************//
    
     @ 비동기식 코딩방법
    
     // 1. 객체 생성
     // 2. 데이터가 도착하면 할일
     // 3. 데이터 호출
    
    
     외부 텍스트 불러오기
    
    
     var  urlLoader: URLLoader = new URLLoader();
     urlLoader.addEventListener( Event.COMPLETE, onComplete );
     urlLoader.load( new URLRequest( "./data.xml" ) );
         
     function   onComplete( e: Event ): void
     {
    
     }
    
     // 이미지 불러오기... Loader
    
     var loader: Loader = new Loader();    
     loader.addEventListener( Event.COMPLETE, onComplete );    
     loader.load( new URLRequeset( "./aaa.jpg" ) );
    
    
     *** Loader 클래스는 쓰기좀 힘들다...
    
     var  imgLoader: ImageLoader = new ImageLoader();    
     imgLoader.addEventListener( Event.COMPLETE, onComplete );    
     imgLoader.load( "./img/aaa.jpg" );
    
        
     addChild( imgLoader );
    
    
     ImageLoader 클래스는 무엇을 상속받을까?
    
         Loader의 기능이 필요한 경우
        
         1. Loader 상속을 받는다..      is  a 관계
        
         2. Loader를 하나 가진다..    has  a  ************
        
    
     // Event에는 공간이 type 자리 밖에 없다...
    
     var  xmlLoader: XMLLoader = new XMLLoader();    
     xmlLoader.addEventListener( "",  onComplete);    
     xmlLoader.load( "./aaa.xml" );
    
    
     function  onComplete( e:   ): void
     {
         trace( e.xml );
     }
    
    
    
    
    
     var urlLoader: URLLoader = new URLLoader();
     urlLoader.addEventListener( Event.COMPLETE, onComplete );
     urlLoader.load( new URLRequest(  ) );
    
     function onComplete( e: Event ): void
     {
         urlLoader.data
     }
    
    
     class  XMLLoader   extends  ???
     {
         private var urlLoader: URLLoader = new URLLoader();
    
         override  public function load( url: String ) : void
         {
        
         }
     }
    
    
    
     var aaa: AAA = new AAA();
    
     aaa.addEventListener( AAAEvent.aaa,  onComplete  );
    
    
    
    
     var  imgLoader: ImageLoader = new ImageLoader();
    
     imgLoader.addEventListener( ImageLoaderEvent.COMPLETE, onComplete );
    
     imgLoader.load( "./aaa.jpg" );
    
    
    
     function  onComplete( e: ImageLoaderEvent ): void
     {
         // 완료...
     }
    




====================
URLLoader:XML;

클래스 설계(제작): 쓰기 편하게 만드는 대표적인 예

*동기식 비동기식
동기식 (싱크로너스-->싱크로나이징)
싱크로나이징이란 보조를 맞추는 것 즉 호흡을 맞추는 것 :: 호흡을 잘 맞추려면 잘하는 사람이 기다려주는 것이 가장 중요하다.
동기식=기다려준다. (택시 편의점 거스름돈 금방끝날 것을 알고 다른 일 안하고 기다려준다 )

비동기식 :기다리지않기 (완전히 기다리지않는 것은 아니다.) 시켜놓고 내할일을 하다가 다 되면 바라본다.
(예..세탁소..세탁물을 맡기고 자기 할일을 하다가 세탁이 모두 되면 찾으러 간다 )

컴퓨터는 동기식일까 비동기실까?
동기식 이다 매우 빨리 돌아가기 때문에...
밑에 액션이 있더라도 이전것이 수행완료될때까지 기다린다.

웹은!!!!!
jsp 일때는 동기식
아이작스:  비동기식 (자바스크립스를 사용하고 엑스엠을 사용)

플레시도 기본적으로 동기식으로 동작
"외부와의 연동"은 비동기식으로 동작한다.
엑스엠엘 가져오기 이미지 가져오기 (네트웍을 탄다고 하면 모두 비동기식 )

1.0에서는 무비클립 로더를 이용했어야 했다.
function loadeMovie(파일명)
this.width=400
this.height=500

=======================================

!!!!!!비동기식 코딩방법 (아무리줄여도 3줄)

1.var 객체생성
2.데이터가 도착하면 할일
3.데이터 호출

외부텍스트 불러오기

var urlLoader:URLLoader=n

=================
로더 클래스 안에  컨텐츠라는 문이 있다.
컨텐츠로 제이피지 등이 들어온다.
로더는 이미지를담은 컨텐츠를 컨테이너로 담아온다.


===========
엑스엠일
var xml....
제정의 해야한다.
뉴 리퀘스트를 쓰지 않고(어려우니깐)스트링을 쓰려면 오버라이드를 펑션 앞에  써준다.

class XMLLoader extends URLloder

class XMLLoader extends ?????????
{
내용
}

오버라이드
접근제한자 바꿀 수 없다 매개변수 타입 개수 발수반환 타입 바꿀 수 없고 내용만 바꿀 수 있다.
그러므로 url:string 을 그대로 쓸 수 없다.