[FLEX] 파일 Multi-Uploader (with ASP)


국내에서 FileUpload를 하기 위해서는, activeX를 많이 사용합니다.

ActiveX는 웹표준이 추구하는 Cross-Browsing을 파괴하는 주범이 되는데요.

이번에 기존의 activeX를 걷어내고, Flex를 이용한 업로더를 만들게 되어서,

제작과정에서 생긴 문제점들과 Tip들을 공유하고자 포스팅합니다.

일단 Flash/Flex에는 FileReference, FileReferenceList라는 클래스를 가지고 있습니다.

거의 유일하게 FlashPlayer에서 로컬에 있는 데이터에 접근할수 있는 녀석이라고 말할수 있지요. ^^

AS3.0으로 진화하면서 FlashPlayer(FP9+)의 보안정책이 상당히 강화되어, 기존에 되던 것들도 안되는게 참 많죠 ㅎㅎ

서론이 길었네요.

일단 File 업로드의 과정을 간단하게 살펴보겠습니다.

사용자 삽입 이미지

아주 간단하게 보면, 웹브라우저에 있는 Flash Player을 이용하여, 로컬에 있는 FileData의 정보를 받고, 이를 서버에 HttpService를 사용하여 전달하는 간단한 프로세스입니다.

이 과정에서 여러가지 문제들이 발생할수 있죠. 보안문제라던지, 인코딩문제라던지..

FileReference에 대해서 조금 살펴보겠습니다.

FileReference는 flash core 클래스로, flash.net패키지 안에 들어있습니다.

browse(), upload(), download(), save(), load(), cancel() 등의 Method를 갖고있습니다.

Air에서는 uploadUnencoded()도 있구요.

이 중 browse, upload, cancel 3가지를 사용하여, 업로더를 구현해보겠습니다.

(이번에 진행했던 Server-script가 asp이므로, asp부분에서의 문제들도 언급하겠습니다)

//

addFiles함수에서 _refAddFiles에 fileData를 넣고, Event.SELECT 이벤트가 발생할 경우, onSelectFile()를

실행합니다. _refAddFiles.fileList를 조사하여, listFiles.dataProvider에 데이터를 대입하게 되구요

FileReference를 생성하고 listFiles의 데이터를 대입합니다.



startUpload함수에서 upload메서드를 실행하는데요.

upload에 필요한 Parameter는 총 3가지입니다.

1. URLRequest데이터

2. FileData

3. TestUpload Boolean



업로드와 동시에 어떤 변수를 보내려면 URLVariables을 만들어서 붙이면 되구요.

request를 보낼때의 contentType은 “multipart/form-data”가 됩니다.

RequestMethod는 POST방식입니다.





browse에서 파일타입을 지정하실때는 FileFilter를 활용하시면 됩니다.

Windows환경과 Mac환경에서의 업로드설정을 달리 할수있습니다.


browse Method에서는 Array형태의 Filter데이터를 요구합니다.







다음은 ASP페이지부분의 처리부분에서 발생했던 문제들입니다.

Flex단에서 전송하는 파일명이 한글일경우, 정상적으로 데이터를 받지못하는 문제가 있습니다.

euc-kr기반의 asp(DEXT 업로더)에서는 별도의 언어코드를 설정해줘야합니다.

//

세부적으로는 공개할수 없는 소스들이 섞여있어서, 적을수가 없겠군요.


Flex 프로젝트 진행 시 생각할 디자인 패턴과 프레임워크

Design Pattern 이란 무엇인가?
사람들이 말하는 Design Pattern에 대한 의미를 살펴보자. 건축학에서 말하는 디자인 패턴이란 성공적으로 건설된 여러 건물들을 보면서 공통적인 패턴을 발견하게 되고 새로운 건축물을 지을 때 이러한 공통된 패턴들을 참고 삼아서 건설을 하게 된다. 소프트웨어 공학도 마찬가지다. 어떠한 성공적인 프로젝트에서 여러 프로그래머들이 작성한 프로그램에서 반복적으로 발견되어 지는 공통적인 패턴을 Design Pattern의 정의라 말할 수 있다.
흔히 디자인 패턴이라 하면 GOF의 Design Pattern을 떠올리게 되는데, 복잡하게 생각할 것 없이 간단히 Design Pattern의 정의를 생각하면 위와 같을 것이다.



Design Pattern이 계속 발견되어 지고 추상화 되어서 사용되어야 하는 이유도 마찬가지이다. 그렇다면 Design Pattern이 주는 이점은 무엇일까?
소프트웨어 엔지니어들은 이미 많은 시스템 디자인을 하는데 있어서 대부분의 문제에 대한 본인만의 해법을 가지고 있다. 이러한 해법들을 정리해서 이름을 부여하고 추상화 시켜 패턴화 시키면, 이러한 것들이 하나의 Design Pattern이 되어 좀더 효율적으로 협업을 할 수 있게 된다.



Framework와 유연성?


그럼 이제 Framework에 대해서 알아 보도록 하자. Framework의 사전적인 의미는 틀 구조, 뼈대, 골격 등이다. 위에서 알 수 있듯이 Framework란 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하도록 협업화된 형태로 클래스를 제공하는 것이라고 할 수 있다.
Framework의 가치는 기술적인 영역에서의 반복적이고 소모적인 코딩을 Framework이 담당하고 개발자는 오직 비즈니스로직에만 전념할 수 있도록 해주는데 있다. Framework을 이용한 개발은 유지보수의 용이함을 그 첫번째 목적으로 삼는 경우가 있다. Framework의 틀 안에서 코딩을 하면 개발자들이 일관된 방식으로 개발하기 때문에 다른 사람이 작성한 코드를 파악하기 쉬워서 유지보수도 하기 쉽다는 것이다.
그러나 이렇게 일관성을 필요 이상으로 강조하면 간혹 문제가 발생할 수 있다. 일관성을 너무 강조한 나머지 코딩 패턴에 너무 많은 구속을 하게 되고, 그 결과 문제 영역에 맞는 패턴을 사용하는 것이 아니라 패턴에 코드를 끼워 맞추게 되고, 결국 Framework를 유연하게 활용하지 못하고 오히려 코드가 더 길고 복잡해지는 경우가 많다. 결과적으로 Framework를 잘 사용하기 위해서는 각자의 환경에 맞도록 유연한 대처를 할 수 있는 마음 가짐으로 개발을 해야 한다.


따라서 위에서 말한 Design Pattern과 Framework를 유기적으로 적절히 혼용하면 양쪽의 장점들을 살려 재사용과 유지보수가 용이한 프로그램을 개발할 수 있을 것이다. 이번 1회에서는 디자인패턴에 대해 알아보고, 다음 번 2회에서 프레임워크에 대해 살펴보도록 하자.



1. MVC Pattern
MVC 패턴은 프로그램의 구성요소를 Model, View, Controller의 세 부분으로 각각 역할을 나누어 하는 것이다.
Model은 비즈니스 로직을 말하며 View는 화면의 UI를 구성하는 요소이다. 현재까지의 일반적인 Java, JSP에서는 JSP가 이 View의 역할을 한다고 볼 수 있다. 마지막으로 Controller는 Model과 View의 전달자 역할로서 View와 Model의 사용자의 요청을 받아 Model을 실행하고 그 결과를 다시 View단으로 전달해 주는 역할을 한다. 그림을 살펴 보면 좀더 확실히 알 수가 있을 것이다.



 
가장 간단하게 표현한 MVC 패턴의 구조



MVC 패턴의 가장 큰 이점은 Model과 View의 분리에 있다. Model과 View를 분리함으로써 화면 UI를 위한 코드와 비즈니스 로직을 위한 코드를 분리할 수가 있다.
결과적으로 높은 응집력(high cohesion)과 낮은 결합력(low coupling)을 실현하여 요구사항이 복잡할 경우 더욱 획기적으로 개발자의 일을 줄일 수가 있다. Flex도 마찬가지로 UI가 포함되어 있기 때문에 MVC 패턴을 따른다. 그럼 기존의 JAVA, JSP에서의 MVC 패턴의 적용과 Flex에서의 MVC 패턴의 적용은 어떤 점이 다른 것일까?



우선 기존의 JAVA, JSP에서의 MVC 패턴을 보면 View 단계는 JSP가 Controller 단계는 Servlet이 Model 단계는 JAVA로 구성이 된다. 하지만, Flex에서는 View + Controller 단계를 Flex가 Model 단계는 JAVA로 구성이 된다. Flex에서는 기존의 Flash에서 볼 수 있었던 화려하고 편리한 UI를 제공하며, E4X(ECMA Script for XML) API를 도입한 Action Script3.0을 사용한다. 또한 Flex Data Service는 빠르고 효율적인 서버 통신을 제공함으로써 기존의 Controller의 역할까지 수용을 할 수가 있으며, JAVA Virtual Machine처럼 Flash Player가 있다면 어떠한 환경에서도 자유롭게 동작될 수가 있다.



2. Singleton Pattern
하나의 클래스가 한 개의 개체만 가질 필요가 있을 때, 예를 들어 Context 또는 Manager 개체처럼 한 개의 개체가 시스템 내에서 다른 행동을 조율해야 할 때, 사용할 수 있다. 이 패턴을 이용해 공유 개체를 생성/관리함으로써 동일한 시스템 위에 존재하는 여러 개체간 통신을 쉽게 구현할 수가 있다. 또한 종종 글로벌 변수의 완곡한 표현으로 사용되기 때문에 anti-pattern으로 간주되기도 한다.


예를 들어 Flex에서 경고 창을 띄울 때 mx.controls.Alert.show()를 많이 하는데, 경고 창 같은 경우는 프로그램에서 1개만 띄우게 된다. 그럴 경우 Singleton Pattern으로 하나의 Alert을 띄우는 A라는 Class를 만들고 나머지 Class에선 A라는 객체를 생성해서 사용하면 된다.


Java나 C 등 프로그램 언어에서 Singleton Pattern이 사용되는 곳에는 쓰레드풀, 디비풀, 캐시, 대화상자, 사용자 설정, 레지스트리 설정을 처리하는 객체 등이다.



package{
import flash.display.Sprite;
public class PublicClass extends Sprite  {
  public function PublicClass( ) {
   PrivateClass.alert( );
  }
   }
 }


class PrivateClass {
   public function PrivateClass( ) {
public static function alert( ):void {
trace(“This is from a private class”);
  }
}
}



3.Factory and Template Method Patterns
Factory method pattern은 Client에서 행해진 Event에 대해 Server에서 행해지는 Class의 종류를 알 수 없을 때, 또는 생성된 클래스로부터 얻어진 정보를 제한하고자 할 때 쓰인다. Template method pattern은 추상 클래스(Abstract Class)에서 만들어진 내용이 없는 method(flex에서는 function)을 각각의 추상 클래스를 상속받은 클래스들에서 구현하는 것이다.




Factory method Pattern의 예
 
붕어빵이라는 Class가 있고 Client에선 붕어빵 안에 있는 내용물(parameter를) 신청한다. Server에선(붕어빵을 만들어 내는 틀) Client의 요청에 따라 내용물을 집어 넣고 붕어빵을 만들어 낸다. Server(붕어빵 틀)에서 나오는 건 붕어빵이지만 내용물은 Client의 요청에 따라 다 틀리다. 이와 같이 Client에서 요청하는 것에 따라 실행되는 Class가 틀릴 때 Factory method pattern을 쓴다




Template method pattern의 예
 
위 그림에서 보면 Car라는 Class가 있고 BMW, Bus Taxi라는 car를 상속받은 Class 들이 있다. Car(자동차)에서는 Handle도 있고, Gear도 있다. 더 세부적으로 BMW, Bus, Taxi에서 쓰이는 Handle, Gear들이 다 틀릴 것이다. 전체적으로 자동차라는 Class는 Handle(), Gear()라는 Function들이 있고, 자동차라는 Class를 상속 받은(차종) BMW, Bus, Taxi들은 각각 Handle, Gear라는 Function들을 구현해 준다. 아래 샘플 코드들은 Factory Pattern과 Template Pattern을 함께 사용한 것이다



IField.as 파일
package factory {
   public interface IField {
      function drawField():void;
}
}


FootballField.as 파일
package factory {
public class FootballField implements IField {
      public function drawField():void {
         trace(“Football 경기 생성”);
      }
   }
}



AbstractGame.as 파일
package factory {
   public class AbstractGame {
      // Template Method
      public final function initialize():void {
         var field:IField = createField();
         field.drawField();
         createTeam(“백팀”);
         createTeam(“청팀”);
         startGame();
      }
      // Factory Method
      public function createField():IField{
         throw new Error(“Abstract Method!”);
      }
      public function createTeam(name:String):void {
         throw new Error(“Abstract Method!”);
      }
      public function startGame():void {
         throw new Error(“Abstract Method!”);
      }
   }
}



FootballGame.as 파일
package factory {
  public class FootballGame extends AbstractGame {
      public override function createField():IField {
         return new FootballField();
      }
      public override function createTeam(name:String):void {
         trace(“팀명 : ” + name);
      }
      public override function startGame():void {
         trace(“게임시작”);
      }
   }
}


결과



Factory 관점에서 쓰인다면
package factoryexample {
   public class GameFactory {
      public static function createGame(gameType:String):IGame {
         switch(gameType){
            case “football”:
               return new FootballGame();
            case “baseball”:
               return new BaseballGame();
            case “basketball”:
            default:
               return new BasketballGame();
         }
      }
   }
}



이런 식으로 client의 요청 값에(gameType) 따라 결과물이 바뀔 수가 있다.



4. Proxy Pattern
Proxy는 사전적 의미로 “대리”라는 뜻을 가지고 있다. Proxy pattern은 Client가 직접 접근하지 않고 대리자(Proxy Class)를 통해 접근이 이루어지는 Pattern을 말한다. 이 Pattern이 사용 되는 곳을 보면 아래와 같다.



– Remote proxy : 원격에 있는 객체를 로컬에서 호출하는 것처럼 보이게 한다.
                         (ex: RMI의 stub, 서버 접속 처리)
– Access proxy : 서비스를 제공하는 클래스로의 객체 자체에 대한 접근을 통제한다.
                         (ex: 로그인)
– Virtual proxy : 생성 과정이 오래 걸리는 객체를 생성하는 경우에 사용에 요청이


                        있을 때만 필요한 객체를 생성하여 준다. (ex: 고화질의 Image출력)


이제 예제 소스를 살펴보도록 하자



Product.as( Proxy) 와 같은 구조인 Interface
package proxyexample {
   public interface IProduct {
      function getPrice():Number;
      function getTitle():String;
      function setPrice(price:Number):void;
      function setTitle(title:String):void;
   }
}



Proxy(대리자)
package proxyexample {
   public class Product implements IProduct {
      private var _price:Number;
      private var _title:String;
      public function Product() {}
      public function getPrice():Number {
         return _price;
      }
      public function getTitle():String {
         return title;
      }
      public function setPrice(_price:Number):void {
         this._price = _price;
      }
      public function setTitle(_title:String):void {
         this._title = _title;
      }
   }
}


client에서 request를 했을 때 실행되는 Class proxy에 설정한다
package proxyexample {
public class XMLProductProxy implements IProduct {
      private var _data:XML;
      private var _product:Product;
      public function XMLProductProxy(_data:XML) {
         this._data = _data;
         product = new Product();
      }
      public function getPrice():Number {
         if(isNaN(_product.getPrice())) {
            _product.setPrice(Number(_data.price.toString()));
         }
         return _product.getPrice();
      }
      public function getTitle():String {
         if(_product.getTitle() == null) {
            _product.setTitle(_data.title.toString());
         }
         return _product.getTitle();
      }
      public function setPrice(price:Number):void {
         _data.price = price;
         _product.setPrice(price);
      }
      public function setTitle(title:String):void {
         _data.title = title;
         _product.setTitle(title);
      }
   }
}


사용
package proxyexample{
import flash.display.Sprite;
   public class SerializationProxyExample extends Sprite {
      public function SerializationProxyExample () {
         var data:XML = <product>
            <title>Widget</title>
            <price>19.95</price>
         </product>;
         var product:IProduct = new XMLProductProxy(data);
         trace(product.getTitle() + ” — $” + product.getPrice());
      }
   }
}



5. Composite Pattern
Composite 패턴은 부분에서 전체로 이루어지는 계층 구조나 Tree 구조를 생성하기 위해 사용될 수 있다. Composite 패턴의 특징은 개별적인 객체와 복합적인 객체 모두를 동일하게 다루는데 있다. Composite 패턴을 적용해서 얻는 이점은 개별 객체나 복합 객체 모두 동일한 형태로 이루어지기 때문에 클라이언트가 단순해진다는데 있다. 따라서 새로운 종류의 컴퍼넌트의 추가가 용이하다. 하지만 이를 남용할 경우 너무 일반화된 설계가 될 수 있으므로 이를 주의해야겠다.



Composite 패턴의 구성요소는 아래와 같다.



– Component : 관련된 모든 객체에 대한 인터페이스를 정의한다.
                   모든 클래스에 해당하는 인터페이스에 대해서는 공통의 행위를 구현한다.
                   전체 클래스에 속한 요소들을 관리하는데 필요한 인터페이스를 정의한다.
– Leaf : 다른 객체를 포함할 수는 없고 포함되기만 하는 객체로 해당 객체에 가장


            기본이 되는 행위를 정의한다.
– Composite : 포함된 요소들을 갖는 복합 객체에 대한 행위를 정의한다.
-Client : Component 인터페이스를 통해 관련된 객체들을 관리한다.



예를 들면 모빌을 만드는데 기본 모빌 컴퍼넌트에 동일한 노드(Composite)의 모빌들이 연결되어 있고 그 아래 Leaf 노드가 연결되며 모빌을 손으로 건드는 것은 Operation이 될 것이다.


 



6. Decorator Pattern
이 패턴은 객체에 추가적인 요건들을 동적으로 첨가하여 서브 클래스를 만드는 것을 통해 기능을 유연하게 확장하기 위한 패턴이다. 이 패턴의 원칙은 모든 클래스는 확장을 할 수가 있지만 소스코드는 변경할 수 없어야 한다.
Decorator 패턴은 기본 Component를 각 Decorator 클래스가 포함함으로써 원하는 결과를 가져올 수 있도록 만들어 놓은 것이다. 예를 들면 아이스크림을 주문하는데 토핑을 얹고 싶을 것이다. 이때 여러 토핑들중 원하는 토핑을 선택해서 얹을 수가 있다. 여기서 아이스크림은 기본 Component가 되고 토핑들은 Decorator가 될 것이다
 



7. Command Pattern
Command 패턴은 특정 객체에만 요청 내용을 전달한다. 이것은 객체 안의 특정 처리 작업에 대한 요청 내용을 포함하고 있으며, 해당 요청 내용을 public 인터페이스로 전달하게 된다.
Command 패턴은 수행 작업의 내용을 몰라도 요청 내용을 작성할 수 있는 능력을 클라이언트에게 제공하며, 클라이언트의 프로그램에는 어떠한 영향도 미치지 않고 개발자가 이런 수행 작업의 내용을 변경할 수 있게 한다. 이 패턴의 가장 큰 단점은 소규모의 클래스를 너무 크게 만들어 버린다는 것이다.



– Command : 수행할 operation을 위한 인터페이스를 선언한다.
– ConcreteCommand : Receiver 객체와 action 을 정의한다.
– Client : ConcreteCommand 객체를 만들고 receiver로 정의한다.
– Invoker : command 에게 request를 수행하도록 요청한다.
– Receiver : 처리할 request에 대해 명령어들을 수행 가능하다.
 




8. State Pattern
State 패턴의 목적은 다른 종류의 객체들이 공통 속성을 가지는 경우, 속성의 구현을 포함하는 객체에서 분리시키는데 있다. 따라서 구현을 위해서는 속성을 가진 객체와 실제 속성을 구현하려는 객체가 필요하다.
쉽게 예를 들면 자동차, 자전거, 오토바이 라는 세 객체가 있는데 이들 객체 사이에 Go, Stop 같은 공통되는 속성이 있다면 따로 분리해서 구현하는 방식이다.



Comtext : ConcreteState 서브 클래스의 인스턴스를 관리하며 객체의 현재 상태를 정의한다.
State : Context가 갖는 각 상태별로 필요한 행위를 캡슐화하여 인터페이스로 정의한다.
ConcreteState : 각 서브 클래스들은 Context의 상태에 따라 처리되어야 할 실제 행위를 구현하고 있다.
 



지금까지 여러 Design Pattern을 살펴 봤다. 물론 위와 같은 Design Pattern 외에도 여러 패턴들이 존재한다. 문제는 이러한 패턴들을 전부 익히는 것이 아니라 어떠한 상황에 어떻게 사용될 수 있는가를 판단하는 것이다. 수많은 Design Pattern과 Framework 중에서 자신에게 꼭 맞는 Design Pattern과 Framework을 찾는 것이 아니라 자신에게 맞도록 수정 보완하여 사용할 수 있도록 안목과 능력을 키워 나가야 할 것이다.


다음 원고에서는 프레임워크에 대해 알아보도록 하자

현재 브라우저의 URL을 FLEX로 받아오는 방법

ExternalInterface를 사용하여 eval을 호출하는 방법으로 URL을 받아올 수 있다.
ExternalInterface.call(“eval”, “window.location.href”);

private var currentURL:String = ExternalInterface.call(“eval”, “window.location.href”);
private var encodedCurrentURI:String = escape(currentURL); // &를 포함할 경우 escape처리

FLEX에 Embed된 Flash SWF파일과의 통신

FLEX에서 SWFLoader를 이용하여 플래시SWF파일을 Embed시킬 경우에
간단하게 변수를 전달하는 것이 안되더군요. (SWFLoader.params = 어쩌고 이런 방식이 안됨;;)

이를 위해서는 이전부터 존재했던 LocalConnection을 사용하여야 통신이 가능합니다.

Javascript, AJAX를 사용하여도 되지만, 독립적인 실행이 가능하게 하려는 취지에는 맞지않지요.


이와 같은 방법으로 FLEX의 송신부에서 localConnection 객체를 생성해주고 StatusEvent리스너를 달아줍니다.

FLASH의 수신부에는 아래의 코드를 입력해줍니다.


수신부에서는 이처럼 세팅합니다. 이런 방식으로 FLEX에서 플래시로 데이터를 전달할수 있고, 플래시에서 다시 FLEX로 데이터를 전달할때는 이 방식도 가능하겠지만, Event를 디스패치 시켜서 받는 방식도 가능합니다

Flex 개발시 참고사이트들

[Tour de Flex Component Explorer] – 플랙스의 모든 Visual 컴포넌트 만지작대기 !


http://www.adobe.com/devnet/flex/tourdeflex/




사용자 삽입 이미지

[Flex3 Style Explorer] – Flex 컴포넌트 모양 바꿔꾸고 CSS 복사해서 사용하기 !


http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html



사용자 삽입 이미지



 


 


[Flex3 Language Reference] – ActionScript 코딩하다가 이벤트나 함수 모르면 무조건 찾아보기 !


http://livedocs.adobe.com/flex/3/langref/index.html



사용자 삽입 이미지



 


 


[Flex3 Live Doc] – 심심할때 플랙스 Help페이지 보면서 기본적인 지식 얻기 !


http://livedocs.adobe.com/flex/3/html/help.html

FLEX / Tour de Flex [AIR Application]


Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more.


Tour de Flex has three primary goals:



  • Provide non-Flex developers with an overview of what is possible in Flex in a “look and see” environment
  • Provide Flex developers with an illustrated reference tool
  • Provide commercial and non-commercial Flex developers with a place to showcase their work

System requirements:



  • Microsoft Windows, Mac OS X, or Linux



The web version of Tour de Flex




The web version of Tour de Flex does not contain the desktop samples that are made possible by Adobe AIR.


Web version sitemap.


Tour de Flex web version


 


About Tour de Flex


Tour de Flex, shown in Figure 1, includes over 200 running samples, each with source code, links to documentation, and other details. Topics include the Flex core components, Flex data access, AIR desktop capabilities, cloud APIs, data visualization, mapping, and a growing collection of custom components, effects, and skins.



Figure 1. The Tour de Flex component explorer


Tour de Flex Eclipse plug-in


An Eclipse plug-in is available that provides a search interface to the 200+ samples in Tour de Flex. Search by component name, tag, or author and double-click any item in the results to immediately see the component in Tour de Flex (see Figure 2).



Figure 2. The Tour de Flex eclipse plug-in


To install the plug-in, add the following URL to your Eclipse software update sites: http://tourdeflex.adobe.com/eclipse. Once installed, a new Tour de Flex view is available. The plug-in has been tested with Eclipse 3.4 and with Flex Builder 3.x.


Showcasing your work


Tour de Flex provides a place for developers to showcase their work (see Figure 3). We are always looking for new samples to add.


To have your work included in Tour de Flex, follow these steps:



  • Create demos of your work that look good within the Tour de Flex size constraints (663×246 when not expanded).
  • Arrange to have all assets hosted.
  • Convert the source code to a color HTML document. You can use the Flex Builder View Source feature to generate the HTML files.
  • Complete the sample submission form on Flex.org.


Figure 3. Components and samples in Tour de Flex

[커리큘럼] FLEX STUDY

1. Flex 개요
1.1 Flex의 탄생배경
1.2 Flex SDK와 LCDS의 기능과 역할
1.3 어플리케이션 3단계 컴파일 및 배포
1.4 실행환경(AIR/Flash Player/Flash Light)

2. Flex Builder 사용법
2.1 워크스페이스 및 프로젝트 자원관리
2.2 뷰와 퍼스펙티브에 대하여
2.3 어플리케이션 관리
(생성/삭제/임포트/빌드/실행/디버깅/프로파일링)
2.4 자주 사용하는 단축키 총 정리
2.5 플렉스에서 제공되는 컴포넌트 총 정리
(컨테이너/컨트롤/넌비쥬얼컴포넌트)
2.6 디자인 뷰를 사용한 화면 구성
(레이아웃/스킨/스타일/네비게이터/스테이트)

3. Flex 개발 언어
3.1 MXML 기본 구문
3.2 MXML 어플리케이션과 MXML 컴포넌트 작성
3.3 네임스페이스와 URI
3.4 MXML 컴파일러 태그들에 대하여
3.5 MXML에서 사용되는 속성들의 종류 및 사용법
(프로퍼티,스타일,이벤트,이펙트트리거,렌더러,에디터)
3.6 ActionScript 3.0 입력 방법의 종류
(바인딩/인라인스크립트/인클루드/클래스)
3.7 ActionScript 3.0 기본 구문
3.8 ActionScript 3.0 객체지향프로그래밍

4. 외부 자원 사용
4.1 자바스크립트 통신
4.2 XML 로딩
4.3 SharedObject(쿠키개념) 활용

5. 서버사이드와 통신
5.1 서버환경 구성
5.2 HTTPService를 활용한 답변형 게시판
5.3 WebService 활용
5.4 Socket 및 XMLSocket을 활용한 채팅 어플리케이션
5.5 멀티 파일업로드 활용

6. Flex 컨테이너 활용 및 디자인
6.1 Application과 Panel을 활용한 동적 레이아웃
6.2 ApplicationControlBar를 활용한 헤더영역 레이아웃
6.3 Box, VBox, HBox를 활용한 바디 영역 레이아웃
6.4 Canvas를 활용한 툴팁 컴포넌트 만들기
6.5 Form을 활용한 회원가입 폼 만들기
6.6 Tile을 활용한 이미지 겔러리 만들기(드래그/드랍)
6.7 Grid를 활용한 테이블 레이아웃
6.8 DividedBox를 활용한 화면분할 레이아웃
6.9 네비게이터를 활용한 화면 전환 및 생성정책 활용
(Accordion/TabNavigate/ViewStack)
6.10 TitleWindow를 활용한 팝업 화면 레이아웃

7. Flex 컨트롤 활용
7.1 ColorPicker로 Application 배경색 변경하기
7.2 선택된 CheckBox 찾아내기
7.3 RadioButton 그룹 지어주기
7.4 Slider로 Image 사이즈 변경하기
7.5 NumericStepper로 카운트 지정하기
7.6 DateChooser, DateField를 한글화 하고 선택영역 지정하기
7.7 텍스트 컨트롤 활용
(Label, Text, TextInput, TextArea, RichTextEditor)
7.8 미디어 컨트롤 활용
(Image, Sound, VideoDisplay)
7.9 1차원,2차원,계층형 list base 컨트롤 활용
(List,HorizontalList,ComboBox,TileList,DataGrid,Chart,Tree)

8. Flex 이벤트 처리
8.1 어플리케이션 생성 시 발생되는 시스템 이벤트
8.2 자식 컴포넌트들의 추가와 삭제 시 발생되는 시스템 이벤트
8.3 화면의 변화에 따라 발생되는 시스템 이벤트
8.4 캡쳐, 타겟, 버블링 이벤트 플로우 처리
8.5 컴포넌트의 결합도를 낮추기 위한 사용자 이벤트 활용

9. 데이터 가공 및 처리
9.1 문자열 처리하기
(String/StringUtil/정규식)
9.2 Array 및 계층형 데이터 가공
(Array,ArrayCollection,XMLList,XMLListCollection,E4X)
9.3 사용자 Validator를 활용한 데이터 유효성 검증
9.4 사용자 Formatter를 활용한 데이터 포멧

10. Effect를 활용한 애니메이션 효과
10.1 단일 효과주기 (Move/Fade/Wipe/Zoom/Resize)
10.2 다중 효과주기 (Sequence/Parallel)

11. 어플리케이션 스콥
11.1 최상위 컨테이너 Stage
11.2 SWFLoader를 활용한 하위 어플리케이션 로딩
11.3 부모 및 자식 어플리케이션 그리고 컴포넌트 스콥

FLEX FileUpload with ASP .NET

[FLEX PART]


<mx:Script>
  <![CDATA[
    var imageTypes:FileFilter = new FileFilter(“Images (*.jpg, *.jpeg, *.gif, *.png)”, “*.jpg; *.jpeg; *.gif; *.png”);
    var textTypes:FileFilter = new FileFilter(“Text Files (*.txt, *.rtf)”, “*.txt; *.rtf”);
    var allTypes:Array = new Array(imageTypes, textTypes);
    var fileRef:FileReference = new FileReference();
 
   private function doFileSelect():void{
   try {
    fileRef.addEventListener(Event.SELECT, selectHandler);
    fileRef.addEventListener(Event.COMPLETE, completeHandler);  
       var success:Boolean = fileRef.browse(allTypes);
    } catch (error:Error) {
       trace(“Unable to browse for files.”);
    }
   }
   
   private function selectHandler(event:Event):void {
       var request:URLRequest = new URLRequest(“http://localhost/FlexService/fileupload.aspx“)
       try {
           fileRef.upload(request);
       } catch (error:Error) {
           trace(“Unable to upload file.”);
       }
   }
   private function completeHandler(event:Event):void {
       trace(“uploaded”);
   }


  ]]>


< ?xml:namespace prefix = mx />—————————————————————————————————-

[.NET – fileupload.aspx – C#]

protected void Page_Load(object sender, EventArgs e)
    {


            if (Request.Files.Count > 0)
            {
                HttpPostedFile htpFile = Request.Files[0];
                htpFile.SaveAs(this.MapPath(“”) + “\\test\\” + Request.Params[“FileName”]);
            }


     }

출처 : http://cafe.naver.com/flexcomponent/3564

Flex 프로젝트 문서화 – ASDoc 사용하기

<펌> : http://blog.jidolstar.com/79

Flex 프로그램을 하다보면 내가 만든 프로그램을 문서화를 하고 싶은 경우가 있다. Java의 경우 JavaDoc이라는 아주 좋은 문서생성 프로그램이 있고 Eclipse내에서 Export시 JavaDoc을 쉽게 사용할 수 있으므로 아주 편리하다.

ASDoc은 JavaDoc과 같이 Flex로 만든 프로젝트 안에 .as/.mxml 파일을 .html API 문서 생성해주는 프로그램이다. Flex SDK 2에 보면 이 ASDoc.exe이 있다. 아쉽게도 Flex Builder의 경우 Eclipse처럼 쉽게 문서를 만들지 못하지만 그래도 문서화 시킬 수 있다는게 얼마나 좋은가?

ASDoc을 가지고 간단하게 Flex 문서화 해보자.


1. ASDoc은 어디에 있나?



ASDoc은 Flex를 설치한 폴더안에 Flex SDK 2/bin 폴더에 있다. 이것을 실행하기 위해서는 Command창을 띄워 그 폴더로 이동해야한다.


2. ASDoc을 수행하기 위한 작업



Flex Builder에서 새 프로젝트(ASDocExample)를 만들고 com.jidolstar.core package 폴더를 만들어 그 안에 ExMath.as와 Const.as를 만들었다.


사용자 삽입 이미지

Java와 같은 방법으로 Flex에서도 비슷하게 주석을 넣어주면 된다. JavaDoc처럼 풍부하게 지원해주지는 않는다. 사용하는 방법은 아래 사이트를 참고한다.


위 사이트를 참고하여 아래 내용과 같처럼 주석을 만들었다.
나중에 확인해보면 알겠지만 JavaDoc에서 사용하는 @author , @since 같은 것은 ASDoc에서 해석하지 않는 것 같았다.

Const.as

사용자 삽입 이미지

ExMath.as

사용자 삽입 이미지



3. ASDoc을 이용해 문서화 하자!

윈도우에서 시작>실행을 선택한뒤 cmd를 입력하면 Command창이 뜬다.
거기서 아래 명령을 통해 ASDoc 있는 곳으로 찾아간다.

   cd C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\bin

여기서 asdoc 명령을 수행할 수 있다. 이 프로그램을 실행할려면 몇가지 옵션을 설정해야한다.


  • -source-path : 프로그램이 있는 경로를 입력한다. 즉, 프로젝트 폴더(E:\…\ASDocExample)를 입력하면 된다.
  • -output : 문서가 저장되는 폴더를 지정한다.
  • -window-title : 브라우져상에 title에 들어가는 문자열이다.
  • -main-title : 문서내에 title이다.
  • -doc-classes : -source-path에서 지정한 프로젝트 폴더내에 문서화할 폴더를 지정하면 된다. 전부 다하고 싶다면 프로젝트 폴더만 입력하면 된다.

옵션설정에 대해서 대충 알았으니 이제 아래와 같이 asdoc을 실행해서 실제로 문서를 만들어보자.

asdoc -source-path E:\…\ASDocExample -output asdoc-output\ASDocExample -window-title “ASDoc Example Documentation” -main-title “ASDoc Example Documentation” -doc-classes ASDocExample

-output을 asdoc-output\ASDocExample로 했기 때문에 그 폴더로 찾아가면 문서들이 만들어져 있는 것을 확인할 수 있다. 거기서 index.html 을 눌러보면 아래와 같은 화면이 나온다.

사용자 삽입 이미지

사용자 삽입 이미지




4. ASDoc 사용시 주의사항

ASDoc을 사용할 때 안되는 경우가 있는데 아래 주의사항만 지킨다면 ASDoc을 무난히 사용할 수 있을것이다.


  1. 명령어 수행중 한글은 사용하지 말자.
  2. 폴더명도 한글이면 안된다. 만약 프로젝트가 있는 경로에 한글폴더가 있다면 프로젝트를 영문 경로만 있는 곳으로 복사한 다음 ASDoc을 사용한다.


5. 정리하며


이로써 ASDoc을 이용해 Flex 프로그램을 문서화 할 수 있게 되었다. ASDoc을 사용하면 주석을 다는데 신중해지고 소스관리할때도 편리하다. 자주 애용해야겠다.

지금까지 Flex 2.0.1 환경에서 작업을 했다.


글쓴이 : 지돌스타(http://blog.jidolstar.com)