ActionScript IDE ( for MS VisualStudio 2008 ) 소개

Flash IDE, Flex Builder, Flash Develop, SEPY, FDT… 등 많은 IDE툴을 만져보고, 항상 IDE에 대한 불만을 갖고있었습니다. 모 나름 eclipse기반의 Flex Builder나 FDT등은 Flash내장 에디터에 비하면 정말 훌륭하지만 말이죠.

오늘은 Eclipse기반이 아닌 MS社의 Visual Studio 2008 의 Addon으로 사용가능한 IDE를 소개하고자 합니다.
Flash Develop을 쓰다보니, 닷넷 Framework을 쓰는것이 의심스러워, 구글링을 한지 1분도 안되서 찾은걸로 보아, 저만 모르고 있던거 같네요…

소개할 툴은 2가지 입니다.

1. Ensemble tofino

Ensemble Tofino for Visual Studio is a plugin that enables .NET developers to create Flex front ends for their applications in the same IDE that they normally use. Instead of using a separate text or XML editor and manually invoking the compiler, they can move smoothly between MXML and .NET file types within Visual Studio, and invoke Flex build and run commands from Visual Studio menus.

download : http://www.ensemble.com/products/tofino.shtml


2. Amethyst

Amethyst is SapphireSteel’s IDE for programming rich web-based and desktop applications using Adobe Flex and AIR [1]. This page includes a link to download Amethyst (beta), plus information on its installation and use. Please be sure to read the installation advice before installing Amethyst.

[#M_ more.. | less.. |
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
_M#]download : http://www.sapphiresteel.com/Download-Amethyst-Adobe-Flex-IDE


둘다 어제 찾다보니, 자세한 사용법은 추후에 포스팅 하겠습니다.

[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에 Embed된 Flash SWF파일과의 통신

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

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

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


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

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


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

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 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)