다시 한번 시작해보자. 너무 오래 쉬었네..^^

정말 오랜만에 블러그에 글을 등록하네요.. 요즘 너무 너무 정신이 없어서리... 에휴(핑계..ㅎㅎ)

이번에 새로운 구조로 작업을 하다보니 기존에 만들어 놓았던 창이 열려있으면 다시 못열게 하기 값만 바꾸기 이런게 하나도 되지 않아서 새로운 스크립트 방식으로 작업을 진행해 보았다.

이 구조는 정말 내가 멍청해서 그런지 새로운 창이 열려 있으면 열린 창에 전혀 엑세스를 할수가 없어서 다른 방식을 사용해 보았다.

기존에 창이 몇개가 열려 있더라도 모두 닫아 버리고 새로운 창을 여는 방식이다.
예제를 만들면서 정말 모든 소스를 정리해 버렸더니 정말 간단하다..ㅠㅠ. 왜 이리 삽질을 한거지.. 에휴..

정말 중요한건 저 빨간 소스 3줄이다. 뭐 구지 설명이라고 할것도 없네..

------------------------------------------------------------
popUpTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
 <mx:Script>
  <![CDATA[
   import mx.core.UIComponent;
  
   import mx.managers.PopUpManager;
   import mx.core.IFlexDisplayObject;
   
   private function onCreatePopup():void
   {
    var pop:PopupTitle = PopupTitle(PopUpManager.createPopUp(this, PopupTitle, false));
    pop.title = "Popup window";
    PopUpManager.centerPopUp(pop);
   }
   
   private function onCreateClosePopup():void
   {
    this.onClosePopup();
    
    var pop:PopupTitle = PopupTitle(PopUpManager.createPopUp(this, PopupTitle, false));
    pop.title = "New Popup Window";
    PopUpManager.centerPopUp(pop);
    
   }
   
   private function onClosePopup():void
   {
    for(var i:int = 0; i < systemManager.numChildren; i++)
    {
     if(systemManager.getChildAt(i) is UIComponent && UIComponent(systemManager.getChildAt(i)).isPopUp)
     {
      PopUpManager.removePopUp(IFlexDisplayObject(systemManager.getChildAt(i--)));
     }
    }
   }
   
  ]]>
 </mx:Script>
  
 <mx:Style>
  .btnStyle {
   fontSize:11;
  }
 </mx:Style>
 
 <mx:ApplicationControlBar dock="true" width="100%" height="50">
  <mx:HBox width="100%" paddingLeft="0" paddingTop="0" paddingRight="0" paddingBottom="0" horizontalGap="4">
   <mx:Button label="새로운 창 열기" styleName="btnStyle" click="onCreatePopup()"/>
   <mx:Button label="모든 창 닫고 새로운 창 열기" styleName="btnStyle" click="onCreateClosePopup()" />
   <mx:Button label="모든 창 닫기"  styleName="btnStyle" click="onClosePopup();"/>
  </mx:HBox>
 </mx:ApplicationControlBar>
 
</mx:Application>

-----------------------------------------------------------
PopupTitle.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
 showCloseButton="true" close="PopUpManager.removePopUp(this)">
 
 <mx:Script>
  <![CDATA[
   import mx.managers.PopUpManager;
  ]]>
 </mx:Script>
 
 <mx:Label text="새로운 창이 띄워졌어요.. 몇번째 인지.." fontSize="11"/>
 
</mx:TitleWindow>

-------------------------------------------------------------------------
혹시 저 처럼 Flash위에 Flash파일을 올려놓은 다중 구조에서 작업은 하는 사람은 위에 스크립트가 동작 하지 않을수도 있습니다.
저 역시 위에 스크립트는 해당 프로젝트에서 작동하지 않는군요. 그럴경우는 아래 스크립트로 변경...

   private function onClosePopup():void
   {
    var sysManager:SystemManager = Application.application.parent as SystemManager;
    
    for(var i:int = 0; i < sysManager.numChildren; i++)
    {
     if(sysManager.getChildAt(i) is UIComponent && UIComponent(sysManager.getChildAt(i)).isPopUp)
     {
      PopUpManager.removePopUp( IFlexDisplayObject( sysManager.getChildAt(i--) ) );
     }
    }
   }

-------------------------------------------------------------------------

AS3.0로 advancedDataGrid를 구성하고 itemRenderer를 구성해보자..

as로 advancedDataGrid를 구성하는것은 이전 블러그 글에 이미 올려져있는 사항이다..

그런데 요즘 작업 하다가 datagrid 데이터에 특정 값을 넘겨 itemRenderer를 구성하는 작업을 하다가 정말 단순하지만 어떻게 datagrid데이터 말고 다른값을 itemRenderer한데 넘길까 한참을 고민 했었다.. 생각하면 정말 단순한것이지만..ㅎㅎ

작업 소스를 전부 올리지는 못하니까 간단한 예제 형식으로 변경하여 블러그에 고고씽~~

예제 파일은 단순히 모든 itemrenderer에 데이터 값이 적용되었지만 특정항목에 classFactory와 properties를 사용해서 특정값만을 줄수 있다.

예제 파일을 올려놓고 보니까 너무 대충 만들었다.ㅋㅋ 그래도 이해를..ㅎㅎ

--------------------------------------------------------------------------------

BlogEx.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
 
 <mx:Script>
  <![CDATA[
   import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
   import mx.controls.advancedDataGridClasses.AdvancedDataGridColumnGroup;
   import mx.controls.AdvancedDataGrid;
   import itemRenderer.DataGridRenderer;
   
   import mx.collections.ArrayCollection;
   
   private var dataArr:ArrayCollection = new ArrayCollection([
          {no:"1", title:"title1", imagePath:"http://pds12.egloos.com/pds/200904/20/99/access.png"},
          {no:"2", title:"title2", imagePath:""},
          {no:"3", title:"title3", imagePath:"http://pds11.egloos.com/pds/200904/20/99/cache.png"},
          {no:"4", title:"title3", imagePath:"http://pds12.egloos.com/pds/200904/20/99/kmenu2.png"}
          ]);
          
   private function initApp():void
   {
    var adGrid:AdvancedDataGrid = new AdvancedDataGrid();
    var adGridColGroup:AdvancedDataGridColumnGroup = new AdvancedDataGridColumnGroup();
    
    var col1:AdvancedDataGridColumn = new AdvancedDataGridColumn("col1");
    col1.dataField = "no";
    col1.headerText = "NO";
    
    var col2:AdvancedDataGridColumn = new AdvancedDataGridColumn("col2");
    col2.dataField = "title";
    col2.headerText = "Title";
    
    var col3:AdvancedDataGridColumn = new AdvancedDataGridColumn("col3");
    col3.dataField = "imagePath";
    col3.headerText = "ImagePath";
    
    var render:ClassFactory = new ClassFactory(itemRenderer.DataGridRenderer);
    render.properties = {valueData:"merong~~~~"};
    
    col3.itemRenderer = render;
    
    adGridColGroup.children = [col1, col2, col3];
    
    adGrid.groupedColumns = [adGridColGroup];
    
    adGrid.dataProvider = dataArr;
    adGrid.percentWidth = 90;
    adGrid.percentHeight = 100;
    adGrid.variableRowHeight = true;
    
    this.addChild(adGrid);
   }       
          
  ]]>
 </mx:Script>
 
</mx:Application>

------------------------------------------------------------------------
itemRenderer/DataGridRenderer.as

package itemRenderer
{
 import mx.containers.HBox;
 import mx.controls.Image;
 import mx.controls.Text;
 
 public class DataGridRenderer extends HBox
 {
  private var hbx:HBox;
  private var _image:Image;
  private var _valueData:String;
  private var _text:Text;
  
  public function DataGridRenderer()
  {
   super();
   hbx = new HBox();
   hbx.percentWidth = 100;
   hbx.setStyle("horizontalAlign","center");
   hbx.setStyle("height","300");
   _image = new Image();
   _text = new Text();
   
  }
  
  public function set valueData(value:String):void
  {
   this._valueData = value; 
  }
  
  public function get valueData():String
  {
   return _valueData;
  }
  
  override public function set data(value:Object):void
  {
   super.data = value;
   
   if(super.data["imagePath"] != undefined && super.data["imagePath"] != null && super.data["imagePath"] != "")
   {
    this.removeAllChildren();
    _image.source = super.data["imagePath"];
    _text.text = _valueData;
    
    addChild(_image);
    addChild(_text);
   } else {
    this.removeAllChildren();
    _text.text = _valueData;
    addChild(_text);
   }
  }
 }
}

기본 구성을 advancedDataGridColumn에 classFactory를 itemrenderer로 추가 시키는 방식을 사용했고.
classFactory에 properties속성을 사용하여 DataGridRenderer.as get / set으로 처리..
그리 어렵지 않은 소스라 이만. 슝~~

See Example


Here are the instructions.

1: Create mxml file for the GUI with a data grid and export button.
MXML FILE [main.mxml]:

Code: Select all

<?xml version="1.0"?>
<!--
* RIASolve.
* Export data, delivered in the POST, to excel.
* @author Sobhan Dutta
-->


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Script>
      <![CDATA[
         import com.riasolve.utils.DataGridDataExporter;
         private function exportExcel ():void
         {
            DataGridDataExporter.exportCSV(dg,"export.php"); // Change the file type based on the server you are using
            return;
         }
      ]]>
   </mx:Script>
    <mx:XMLList id="users">
        <user>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
        </user>
        <user>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
        </user>       
    </mx:XMLList>
    <mx:Panel title="DataGrid Export Excel Example" height="100%" width="100%">       
        <mx:DataGrid id="dg" width="100%" height="100" rowCount="5" dataProvider="{users}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
            </mx:columns>
        </mx:DataGrid>
       <mx:Button label="Export Excel" click="exportExcel ()"/>
    </mx:Panel>
</mx:Application>


2: Create a class file which does the export.
CLASS FILE [com.riasolve.utils.DataGridDataExporter]:

Code: Select all

/**
   * RIASolve.
   * Export data, delivered in the POST, to excel.
   * @author Sobhan Dutta
   */
package com.riasolve.utils
{
   import mx.controls.DataGrid;
   import mx.controls.dataGridClasses.DataGridColumn;
   import mx.collections.ArrayCollection;
   import mx.collections.XMLListCollection;
   import mx.collections.IList;
   import mx.collections.IViewCursor;
   import flash.net.URLVariables;
   import flash.net.URLRequest;
   import flash.net.URLRequestMethod;
   import flash.net.navigateToURL;
   
   public class DataGridDataExporter
   {

      public static function exportCSV(dg:DataGrid,
         jspFile:String,
         columnSeparator:String="\t",
         rowSeparator:String="\n"):void
      {
         var data:String = "";
         var columns:Array = dg.columns;
         var columnCount:int = columns.length;
         var column:DataGridColumn;
         var header:String = "";
         var headerGenerated:Boolean = false;
         var dataProvider:Object = dg.dataProvider;

         var rowCount:int = dataProvider.length;
         var dp:Object = null;

      
         var cursor:IViewCursor = dataProvider.createCursor ();
         var j:int = 0;
         
         header ='<table><thead>';
         data   = '<tr >';
         
         //loop through rows
         while (!cursor.afterLast)
         {
            var obj:Object = null;
            obj = cursor.current;
            
            if (headerGenerated)
               data += "<tr >";
               
            //loop through all columns for the row
            for(var k:int = 0; k < columnCount; k++)
            {
               column = columns[k];

               // Don't add if data is invisible
               if(!column.visible || column.dataField==null)
               {                  
                  continue;
               }
            
               data += "<td >"+ column.itemToLabel(obj)+ "</td >";

               //generate header of TSV, only if it's not genereted yet
               if (!headerGenerated)
               {
                  header += "<th >" + column.headerText + "</th >";
               }            
            }
            
            if (!headerGenerated){
               header += "</tr></thead><tbody>";
               headerGenerated = true;
            }

            data += "</tr >";
            j++;
            cursor.moveNext ();
         }
         
         data += "</tbody></table >"
         //set references to null:
         dataProvider = null;
         columns = null;
         column = null;         
         
         
         ////////////////////////////////////////////
         // Start opening into a new browser
         var variables:URLVariables = new URLVariables();
         variables.dg   = header + "\r\n" + data;
         
         //Setup a new request and make sure that we are
         //sending the data through a post
         var u:URLRequest = new URLRequest(jspFile);
         u.data = variables; //Pass the variables
         u.method = URLRequestMethod.POST; //Don't forget that we need to send as POST
         
         //We can use _self here, since the script will through a filedownload header
         //which results in offering a download to the user (and still remaining in you Flex app.)
            navigateToURL(u,"_self");

      }   
   }

}


3: Copy this PHP or JSP file in your webapp which will open the excel file.

Export file for PHP code [export.php]:

Code: Select all

<?php
/**
* Export data, delivered in the POST, to excel.
* @author Sobhan Dutta
*/
header('ETag: etagforie7download'); //IE7 requires this header
header('Content-type: application/octet_stream');
header('Content-disposition: attachment; filename="rapportage.xls"');

//Add html tags, so that excel can interpret it
echo "<html>
<body>
".stripslashes($_POST["dg"])."
</body>
</html>
";
?>


Export file for JSP code [export.jsp]:

Code: Select all

<%-- Set the content type header with the JSP directive --%>
<%@ page contentType="application/vnd.ms-excel" %>
                                                                                                                   
<%-- Set the content disposition header --%>
<% response.setHeader("Content-Disposition", "attachment; filename=\"odi.xls\""); %>

<%@page language="java" import="java.util.*" %>
<%
out.println(request.getParameter("dg"));
%>

출처 : http://forums.riasolve.com/viewtopic.php?f=2&t=2

동적인 변수나 동적인 함수를 실행해야되는 경우가 있는데 이경우 아래와 같이 사용하면 될거 같다.

아래는 httpService를 한번 날려서 return 되는 결과값을 가지고 다시 httpService를 send할때 사용했다.

------------------------------------------

for(var i=0; i < 15; i++)
{
  this["search" + (i+1)].send(params);
}

<mx:HTTPService id="search1" ........................../>
................
<mx:HTTPService id="search15" ........................../>

이미지 카테고리를 만들려고 구현하다가 스크롤바가 너무 보기 싶어서 다른방법을 써보기로 했다.

http://blog.flexexamples.com/ 이곳에서 찾아보다가 HorizontalList와 controlBar로 구현하면 되겠다 싶어서
내가 필요한것으로 좀 변경해보았다..

이미지 카테고리 이기때문에 파일 업로드시 이미 내가 필요한 사이즈 대로 여러가시 썸네일을 구현해 놓은 상태이고
다순히 화면에 보여주기만 하면된다.

기본 로직은 http://blog.flexexamples.com/ 에 나와있는 소스 그대로 이고 화면에 보여줄때 itemRenderer를 사용해버려서리
스크롤바가 나타나는데 그것을 방지 하기 위해서 대표 이미지를 하나 구해서 이미지의 사이즈를 구했다..

----------------------------------------------------------------------------------------------
sliderTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="hListInit();">

 <mx:Script>
  <![CDATA[
   import mx.controls.Image;
   import mx.events.SliderEvent;
   
   private var imageUrl:String = "";
   private var basePlusWidth = 6;
   private var basePlusHeight = 26;
   
   private function prev():void
   {
    var pos:int = hList.horizontalScrollPosition - 1;
    var min:int = 0;
    var value:int = Math.max(min, pos);
    hList.horizontalScrollPosition = value;
   }
   
   private function next():void
   {
    var pos:int = hList.horizontalScrollPosition + 1;
    var max:int = hList.maxHorizontalScrollPosition;
    var value:int = Math.min(pos, max);
    hList.horizontalScrollPosition = value; 
   }
   
   private function slider_change(evt:SliderEvent):void
   {
    hList.horizontalScrollPosition = evt.value;
   }
   
   
   private function hListInit():void
   {
    var listData:Array = arr;
    var baseImage:Image = new Image();
    var baseImageWidth:int = 0;
    var baseImageHeight:int = 0;
    
    if(listData && listData.length > 0)
    { 
     imageUrl = listData[0]["src"];
     baseImage.addEventListener(Event.COMPLETE, imageLoadHandler);
     baseImage.load(imageUrl);
    }
   }
   
   private function imageLoadHandler(event:Event):void
   {
    var baseImage:Image = event.currentTarget as Image;
    baseImage.width = baseImage.contentWidth;
    baseImage.height = baseImage.contentHeight;
    
    hList.columnWidth = baseImage.width + basePlusWidth;
    hList.rowHeight = baseImage.height + basePlusHeight;
    
   }
   
   
  ]]>
 </mx:Script>

 

 <mx:Array id="arr">
  <mx:Object lbl="TEST 1" src="http://riamx.com/UploadFile/album3List/data-20081114_.jpg" />
 </mx:Array>
 
 
 <mx:Panel styleName="opaquePanel">
  <mx:HorizontalList id="hList"
   dataProvider="{arr}"
   itemRenderer="HorizontalListItemRenderer"
   verticalScrollPolicy="off"
   horizontalScrollPolicy="off"
   rowCount="1"
   borderSkin="{null}"/>

   <mx:ControlBar>
    <mx:Button label="Previous" click="prev();" />
    <mx:HSlider id="slider" minimum="0" maximum="{hList.maxHorizontalScrollPosition}"
     value="{hList.horizontalScrollPosition}" liveDragging="true" snapInterval="1"
     tickInterval="1" showDataTip="false" width="100%" change="slider_change(event);" />
    <mx:Button label="Next" click="next();"/>
   </mx:ControlBar>
   
 </mx:Panel>
 
</mx:Application>

------------------------------------------------------------
HorizontalListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Label text="{data.lbl}" fontWeight="bold" horizontalCenter="0"/>
 <mx:Image source="{data.src}" verticalCenter="10" horizontalCenter="0"/>
</mx:Canvas>

이런 글을 올려도 되는건지는 모르겠지만 내가 필요해서 해본거라 올려야겠다.

문제가 되면 바로 바로 삭제 하겠음...^^

개발을 하다가 다른사람이 만들어 놓은 swc 를 사용하여 개발을 하게 되는데 도대체 어떻게 만들었을까 궁금해하다가
java에 class도 디컴파일이 되는데 swc는 않될까 궁금하게 생각하다가 한번 시도해보기로 했다.

방식은 그냥 단순하다... 웹에 올라와있는 수 많은 블러그 글들을 참조 하면서..ㅎㅎ

이 방법이 잘되는지 않되는지는 각자 않아서 판단하시길.. 나는 내가 한방법으로 내가 원하는 결과를 구했기 때문에...
(참.. 책임없는 말이다..쩝)

일단 디컴파일할 swc가 필요하겠죠..

일단 빵집을 사용하여 무심결에 swc를 풀어보았다.
(구지 빵집이 아니여도 됩니다. 그런데 저는 빵집을 사용하기 때문에 그냥 빵집으로..

아래 그림과 같이 무심결에 마우스 오른쪽 클릭을 했는데 미리보기가 되는것이다... 허거덩

빵집에 알아서 풀기를 했더니.. 파일명과 동일한 디렉토리가 생성되면서 압축이 풀린다.


압축이 풀린 디렉토리를 보니 위와 같이 파일들이 나온다... 헉 SWF가 나왔당...
자 그럼 SWF를 디컴파일 하면되겠다....ㅋㅋ

swf 디컴파일러는 Sothink SWF Decomplier 4.1를 사용했다.

Sothink SWF Decompiler에 자세한 사용법은 잘 모르나 swf를 디컴파일 할수 있다는것은안다..ㅋㅋ

자 swf 디컴파일러를 실행하면 아래와 같은 화면을 볼수 있다.
그럼 저기에다가 SWF를 선택하고 실행만 하면된다.


Quick Open에 해당 swf를 선택하고 Export중에 Export To FLA를 클릭한다.

그럼 아래와 같이 물어보는 창이 나타나는데 너무 짧을 영어라 구지 설명을 않해도 그냥 때려 맞출수 있을것이다.

내가 필요한건 SWC안에 들어있는 액션스크립트 파일만 필요하기 때문에 (라이브러리 파일에 flv가 필요없기 때문에)

제일 위에 것만 선택하고 OK클릭

그 다음은 어떤한 flash 버전으로 flv를 만들거냐고 물어보는데 이건 대충 현재 깔려있는 버전 선택하고 통과

끝날때 까지 기다리면
flv파일을 열어볼거냐 막물어보는데 난 액션 스크립트 파일만 있으면 되기 때문에 패스.. no클릭

자 다 끝났다.. 이제 처음 swf가 있던 디렉토리를 보면 as파일이 만들어 저있을것이다.

끝...... 필요한 AS파일을 찾아서 보면된다.

자 이제 마지막 정리

1. 해당 swc파일을 빵집이나 압축을 풀수있는 프로그램을 선택하여 압축을 푼다.
2. 압축이 풀린 디렉토리에 .swf파일이 존재하는지 확인한다.
3. swf를 디컴파일할 수 있는 swf compiler를 실행한다.
4. Quick Open에 해당 swf를 선택하고 Export중에 Export To FLA를 클릭한다.
5. 필요한 옵션 선택.. 제일 위에 것을 선택하지 않으면 액션스크립트 파일을 볼수 없다.
6. 모든 작업이 끝나면 해당 디렉토리를 다시 살펴본다..

끝