Whiteship's Note


[MXML] mx:style

Adobe : 2010. 4. 22. 18:57


참조: http://www.adobe.com/devnet/flex/tourdeflex/web/#docIndex=0;illustIndex=1;sampleId=9800
http://sses.tistory.com/83

정성들여만든(?) 야바위 게임의 글씨가 너무 작다;; 그래서 찾아봤더니 금방 나온다.

<mx:Style>
        .myclass { 
            color: Red;
        }

        Button { 
            fontSize: 10pt; 
            color: Yellow;
        }
    </mx:Style>

    <mx:Button styleName="myclass" label="Red Button"/>
    <mx:Button label="Yellow Button"/>

이런식으로 스타일을 줄 수 있구나~





top

TAG Adobe, flex, MXML, style

Write a comment.


[MXML] layout

Adobe : 2010. 4. 22. 18:19


참조: http://www.adobe.com/devnet/flex/videotraining/xml/vid12.html

absolute / vertical / horizontal 이 세개가 끝..

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>
    <mx:Button click="Alert.show('Hello, world')" label="Say Hello" x="5" y="10"/>
</mx:Application>

absolute로 설정한다음 모든 엘리먼트에 x, y 좌표를 설정하는 노가다를 해서 성능을 향상 시키느냐.. 
레이아웃 계산좀 하게 내비두고 vertical, horizontal을 사용할 것이냐~
나는 당연히 레이아웃;; @_@;;


이런거 만들라고 공부한게 아닐텐데;;

1. 제일 밖에 있는 Application은 기본값(vertical)으로 나뒀고; 
2. '야바위' 패널은 패딩 사이즈만 설정.
3. HBox를 사용해서 이미지랑 VBox를 감싸고.
3. VBox 안에는 Lable과 HBox를 감싸고
4. HBox 안에는 버튼 세개.



top

TAG flex, layout, MXML

Write a comment.


[ActionScript 3.0] 클래스

Adobe : 2010. 3. 29. 15:55


public class Shape
{
    var visible:Boolean = true;
}

true 값을 가지고 있는 visible이라는 Boolean 타입 변수를 가지고 있는 Shape 클래스.

// ActionScript 2.0
class flash.display.BitmapData {}

// ActionScript 3.0
package flash.display
{
public class BitmapData {}
}

3.0 부터는 package문을 사용하기 때문에 클래스 이름에 패키지 이름을 선언할 필요 없다.

클래스 속성(class attributes)

dynamic: 실행 중에 인스턴스에 추가적인 속성을 추가할 수 있다.
final: 다른 클래스가 확장할 수 없다.
internal(default): 같은 패키지에서만 참조할 수 있다.
public: 모든 곳에서 참조할 수 있다.

생략하면 internal 사용.

클래스 본문

변수, 상수, 메서드 등을 정의할 수 있다. 

function hello():String
{
    trace("hola");
}
class SampleClass
{
    hello();
    trace("class created");
}

3.0 부터는 명령문도 포함시킬 수 있다.

class StaticTest
{
static var message:String = "static variable";
var message:String = "instance variable";
}
// In your script
var myST:StaticTest = new StaticTest();
trace(StaticTest.message); // output: static variable
trace(myST.message); // output: instance variable

3.0 부터는 static 변수와 인스턴스 변수 이름가 같은 이름을 사용할 수 있다.

클래스 프로퍼티 속성(class property attributes)

클래스의 프로퍼티들이 가질 수 있는 속성

internal(default): 같은 패키지에서만 참조 가능
private: 같은 클래스 내부에에서만 참조 가능
protected: 같은 클래스와 상속 받는 클래스에서 참조 가능.
public: 어디서나 참조 가능
static: 해당 프로퍼티가 클래스에 속한다는 것을 명시.
사용자 정의 네임스페이스: 사용자가 정의한 커스텀 네임스페이스

2.0에서는 private으로 해놔도 실행 중에 []를 사용해서 접근할 수 있는데. 3.0부터는 안 됨. 대신 클래스가 dynamic으로 선언되어 있으면 접근은 되지만 undefined가 반한됨.

static 특성

상송되지 않음. 
클래스 범위에 속함. 
인스턴스가 아니라 클래스 이름으로 접근해야 함.

사용자 정의 네임스페이스

패스 나중에 자세히

변수

var 또는 const를 사용하여 선언할 수 있다.
const 키워드로 선언한 것을 상수라고 한다.

정적 변수

class StaticVars
{
public static var totalCount:int = 0;
public static const MAX_NUM:uint = 16;
}

var또는 const와 static을 추가하여 선언한다.
클래스의 인스턴스가 아니라 클래스에 연결된다.
외부에서는 반드시 클래스 이름으로 접근해야 한다. 인스턴스로 접근하면 에러 난다.
선언할 때 초기화 해야한다. 안그러면 에러난다.

인스턴스 변수

static 키워드 없이 var 또는 const로 선언한 것.
인스턴스 마다 고유한 값을 가진다.
하위 클래스에서 재정의 할 수 없다. getter나 setter를 재정의하면 된다.

메서드

클래스 정의에 포함되는 함수.
function이라는 키워드로 정의한다.

함수 명령문으로 함수 정의
public function sampleFunction():String {}

함수 표현식으로 함수 정의
public var sampleFunction:Function = function () {}

함수 명령문 사용하는 이유
- 간결하고 쉽게 읽을 수 있다.
- override나 final 키워드 사용가능

생성자 메서드

클래스 이름과 같은 이름을 가진 함수
new 키워드로 해당 클래스의 인스턴스를 만들 떄 사용한다.

class Example
{
public var status:String;
public function Example()
{
status = "initialized";
}
}
var myExample:Example = new Example();
trace(myExample.status); // output: initialized

생성자에는 public만 사용가능. 생략하면 기본으로 public. 사용자 정의 네임스페이스도 사용 못함.
super()를 사용하여 상위 클래스의 생성자를 명시적으로 호출 가능.
super()를 명시적으로 호출하지 않으면 자동으로 제일 먼저 호출해줌.
return 문을 사용할 수는 없지만 값을 반환하지는 못한다.

정적 메서드

static 키워드로 선언한 메서드.
인스턴스가 아니라 클래스에 연결된다.

인스턴스 메서드

static 키워드 없이 선언한 메서드

getter와 settter 메서드

class GetSet
{
    private var privateProperty:String;
    public function get publicAccess():String
    {
        return privateProperty;
    }
    public function set publicAccess(setValue:String):void
    {
        privateProperty = setValue;
    }
}

getXXX, setXXX 라는 이름을 사용하지 않아도 된다.

var myGetSet:GetSet = new GetSet();
trace(myGetSet.publicAccess); // output: null
myGetSet.publicAccess = "hello";
trace(myGetSet.publicAccess); // output: hello

이렇게 사용할 수 있다.

바운드 메서드(메서드 클로저)

함수의 인자로 전달되는 메서드
함수의 반환값으로 전달되는 메서드
바운드 메서드 내부에서 this는 해당 메서드를 구현하는 인스턴스에 연결된다.
함수 클로저의 this는 호출 시점에 함수와 연결된 객체를 가리킨다. 이게 차이점이다.

class ThisTest {
    private var num:Number=3;

    function foo():void // bound method defined
    {
        trace("foo's this: " + this);
        trace("num: " + num);
    }

    function bar():Function
    {
        return foo; // bound method returned
    }
}

var myTest:ThisTest = new ThisTest();
var myFunc:Function = myTest.bar();
trace(this); 
// output: [object global]
myFunc();
/* output: 
foo's this: [object ThisTest]
output: num: 3 */

myFunc()는 바운드 메서드라 this가 여전히 자신이 속한 원래 인스턴스를 가리키고 있다.

클래스와 enum

enum을 지원하는게 딱히 없음.
그냥 java 5 이전처럼 static const 사용해서 정의.

public final class Day
{
public static const MONDAY:Day = new Day();
public static const TUESDAY:Day = new Day();
public static const WEDNESDAY:Day = new Day();
public static const THURSDAY:Day = new Day();
public static const FRIDAY:Day = new Day();
public static const SATURDAY:Day = new Day();
public static const SUNDAY:Day = new Day();
}

top

Write a comment.


[Flex] 플렉스의 북치기 박치기, ActionScript와 MXML

Adobe : 2010. 3. 24. 14:55


플렉스를 해보려고 삽질(?) 중인데 일단 두 가지가 걸린다. mxml과 actionscript. 
이 두 가지만 알면 대충 만들 수 있을 것 같다.

일단 mxml 파일에서 어떤 컴포넌트가 있고 각각의 속성들이 무엇인지 무엇인지는 이전에 올렸던 글에서 확인할 수 있다.

http://whiteship.me/2546

mxml 파일은 거의 html이랑 비슷하게 구성 요소를 그리는데 필요한 것 같고, 그 구성 요소를 가지고 놀 때 실행할 기능들은 actionscript로 만들어야겠다. 그래서 actionscript 문법과 API를 파악하면 될 것 같다.

API
http://livedocs.adobe.com/flex/3/langref/

레퍼런스
http://livedocs.adobe.com/flex/3/progAS_flex3.pdf
http://flexdocs.kr/download/flash_as3_programming.pdf




top

Write a comment.


[Flex] "Hello, Flex" with IntelliJ IDEA

Adobe : 2010. 2. 2. 11:55


참조: http://www.adobe.com/devnet/flex/videotraining/xml/vid03.html

모든 언어나 프레임워크를 공부할 때 가장 먼저하는 일이 단순 메시지 출력인데 플렉스 강좌를 보니까 이클립스 기반의 플렉스 빌더를 가지고 설명하고 있습니다. 하지만 저는... 이클립스에 질려버렸고 요즘은 똑똑한 인텔리J랑 사이좋게 지내고 있기 때문에 인텔리J로 강의를 따라하고 있습니다.

이클립스를 사용하시는 분들은 플렉스 빌더를 받아서 위 동영상을 따라하시면 될 듯...

이 아래는 인텔리J에서 헬로우 Flex를 띄우는 과정입니다.

1. Flex SDK 다운 받기

http://opensource.adobe.com/wiki/display/flexsdk/Downloads

여기서 오픈소스가 필요하지 않다면 그냥 Free Adbove Flex SDK를 받습니다.
압축을 풀어서 적당한 위치에 놓고..

2. 인텔리J에서 Flex 프로젝트를 만듭니다.

012345


3. 실행하기

3-1. Run Configuration을 만듭니다. MXML 파일을 우클릭하고 Create "HelloWorld" .. 메뉴를 클릭합니다.


3-2. 실행합니다.

사실 3-1 건너띄고 바로 실행해도 됩니다. 실행하면 SWF 파일이 열리고 버튼이 떠있고 클릭하면 메시지가 나옵니다. 메시지를 조금 수정해서 hello flex를 띄울 수 있습니다.

Run Configuration 파일을 열어서 SWF 파일말고 wrapper.html 파일을 선택한뒤 실행하면 자동으로 브라우저에 새 탭을 열고 SWF 파일을 브라우저에서 재생해 줍니다.

http://www.adoberia.co.kr/


팁. Flex 만드는 도중에 Pure ActionScript 어쩌구 메뉴를 체크하시면 MXML이 아니라 액션스크립트로 작성된 HelloWorld 예제를 볼 수 있습니다. 동작하는 방법은 그냥 단순 출력이라 이전거랑은 좀 다릅니다.

package {

import flash.display.Sprite;
import flash.text.TextField;

public class HelloWorld extends Sprite {
    public function HelloWorld() {
        var textField:TextField = new TextField();
        textField.text = "Hello, World";
        addChild(textField);
    }
}

이런 코드네요. 흠.. 자바랑 비슷해 보이면서도 뭔가 좀..  변수 선언할 때 타입이 아니라 이름부터 적는군..


ps: 흠.. 다른 웹 애플리케이션과는 어떻게 연동해야하려나;; 차차 나오겠지;?




top

Write a comment.