[FLEX] 기본 구조 - 2일차

FP라는 프로젝트를 만들고
1. 이클립스에서 new>others>Flex Builder>Flex Project 선택
2. Create a Flex project의 Project Name : FP
3. Server technology의 Application Server type : J2EE ->Next click
4. Configure J2EE Server 설정

----------------Configure J2EE Server-------------------------------------------
1. Target runtime 우측에 new 클릭 -> apache tomcat 6.0 설정하고 -> Tomcat home 잡아주기
--> JRE는 디폴트로 설정
2. Target runtime의 선택버튼 누르면 좀전에 설정한 톰켓홈이 나옴.
3. Context root는 프로젝트
4. Flex WAR file은 설치한 lcds밑에 war파일 열기(flex.war)
5. Compilation options는 두번째꺼, Compile application on the server when the page is viewed.
6. Main application file : mxml (확장자를 설정해주는것이므로 기본값으로 놔두고 finish누르기)

7. Flex Builder 3 Activation -> continue trial

그러면 FP.mxml 생긴걸 볼 수 있음

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

톰켓 셋팅 및 구동
http://127.0.0.1:8080/FP/FP.mxml

참조 api : http://livedocs.adobe.com/flex/3/langref/

public methods를 주의깊게 보자구..
액션스크립트에서는 생성자(Constructor)도 메소드로 본다.
별도의 오버로딩 없이 젤 긴거 하나만 쓴다.

ex)
show(text:String = "", title:String = "", flags:uint = 0x4, parent:Sprite = null, closeHandler:Function = null, iconClass:Class = null, defaultButtonFlag:uint = 0x4):Alert

참조 action script 3.0 api : http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/

---------------------------------------------------------------------------------
Outline에서...
1. Navigators: component를 의미함
2. Charts:차트
3. Layout : 여러가지 모양으로 넣을수 있음.. 버튼이라든가.. 머.. 그런거..
---------------------------------------------------------------------------------
주석은 <!-- --> 이용함
---------------------------------------------------------------------------------
Layout에서...
---------------------------------------------------------------------------------
<mx:ApplicationControlBar width="100%"/>에
dock="true" 라는 옵션을 주면,,
캔버스와 구분이 됨

---------------------------------------------------------------------------------
VBox :세로로 버튼을 쌓을수 있게 함
 <mx:ApplicationControlBar dock="true" width="100%">
  <mx:VBox>
   <mx:Button label="aa" />
   <mx:Button label="bb" />
   <mx:Button label="cc" />
  </mx:VBox>
 </mx:ApplicationControlBar>
---------------------------------------------------------------------------------
HBox : 가로로 버튼을 쌓을수 있게함
 <mx:HBox>
  <mx:Button label="Aaa" />
  <mx:Button label="Bbb" />
  <mx:Button label="Ccc" />
 </mx:HBox>
---------------------------------------------------------------------------------
LinkButton -> 액션을 연결할때
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   private function showView(param:String):void{
    if(param == "1_1"){
     Alert.show(param);
    }
   }
  ]]>
 </mx:Script>
 <mx:LinkButton label="Canvas" click="showView( '1_1')"/>
---------------------------------------------------------------------------------
재정의한 컴포넌트는 custom밑에 들어가게됨
(ex) 아래 LayoutCanvas.mxml와 FP.mxml 참고
[WebContent\com\layout\LayoutCanvas.mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
 width="400" height="300" backgroundColor="yellow">
 <mx:Script>
  <![CDATA[
   private function f1():void{
    b1.label="Button1 눌렸어.";
   }
   private function f2():void{    
    b1.visible = !b1.visible;  
   }
  ]]>
 </mx:Script>
 <mx:Button id="b1" x="52" y="82" label="버튼1" height="128"
  width="111" click="f1()"/>
 <mx:Button id="b2" x="133" y="138" label="버튼2" height="96"
  width="163" click="f2()"/>
 
</mx:Canvas>

[FP.mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" fontSize="12" xmlns:ns1="com.layout.*">
 <!--
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   private function f():void{
                Alert.show("나 눌렀니??", "경고");    
   }
  ]]>
 </mx:Script>
 
 <mx:Button x="108" y="80" label="버튼이야.."
  height="128" width="240" click="f()"/>
    -->
    <mx:Script>
     <![CDATA[
      import com.layout.LayoutCanvas;
      import mx.controls.Alert;
      
      private function showView(param:String):void{
       if(param == "1_1"){
        viewCanvas.addChild(new LayoutCanvas());
       }
      }
     ]]>
    </mx:Script>
   
    <mx:ApplicationControlBar dock="true" width="100%">
        <mx:VBox>
          <mx:HBox>
             <mx:LinkButton label="Canvas" click="showView('1_1')"/>
          </mx:HBox>
        </mx:VBox>
    </mx:ApplicationControlBar>
    <mx:Canvas id="viewCanvas" width="100%" height="100%"
     backgroundColor="white">
        <ns1:LayoutCanvas x="448" y="123">
        </ns1:LayoutCanvas>
    </mx:Canvas>
</mx:Application>

---------------------------------------------------------------------------------
네임스페이스는 개발자가 원하는 이름으로 정할것.(위의 경우 ns1이 네임스페이스임.)
캔버스는 레이아웃이라는게 없으므로 절대좌표로 설정해야한다.
ex)
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
 width="400" height="300" backgroundColor="yellow">
이 내부 속성태그로 layout같은게 없음.