지돌스타의 RIA와 천문프로그래밍

말이 좀 어렵다.

가령 이런거다.

        var childIsButton:Boolean = this.getChildAt(0) is mx.controls.Button;

을 했다고 하자.

그러니깐 자식 컴포넌트가 Button인지 확인하는 작업인데... 만약 자식이 Button이 아닌 다른 Label, Chart등이 올 수 있다고 하자. 이와 같은 형태로 프로그램을 만들면 Button이 없는 경우에도 버튼이 프로그램상에 포함이 되어진다. 즉, 쓰지 않을 버튼인데 프로그램에 포함되므로 쓸데없이 프로그램 크기가 커질 수 있다.

그럼 이러한 경우에는 어떻게 할까?

바로 getQualifiedClassName()함수를 이용하면 되겠다.

        var child:DisplayObject = getChildAt(0);
        var childClassName:String = getQualifiedClassName(child);
        var childIsButton:Boolean = childClassName == "mx.controls::Button";

위의 경우 getChildAt(0)로 자식을 얻어온 뒤, 이 자식의 Class이름을 얻어온다. 이 클래스가 Label이면 mx.controls::Label 이 될 것이다. 바로 아래를 보자 "mx.controls::Button"으로 비교를 하고 있다.
앞서 말했던 코드와 큰 차이점은 Button이 프로그램상에 포함이 되어 있지 않아도 해당 자식 컴포넌트가 Button인지 확인할 수 있다는 점이다.

이 방법을 이용하면 프로그램을 크기를 줄이는데 큰 역할을 할 수 있을것이다.

참고내용 : http://flexdocs.kr/docs/flex2/docs/00001390.html

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

엔터프라이즈급 플렉스 프로젝트를 위해서 모듈화는 필수적이다.

모듈을 이용하면 Main Application 모든 기능이 포함되는 것이 아니라

Main Application은 각각의 모듈을 제어하고 통신하는 역할만 담당하기 때문에

최초 실행될때, 빠른 속도록 로딩이 가능하며, 필요한 모듈만 로드해서 사용하므로 메모리를 절약할 수 있다.

하지만 모듈 프로그래밍은 튼튼한 기반 설계가 중요하다.

그렇지 않으면 상당히 프로그램 자체의 효율성이 떨어지고 쓰나마나한 결과를 초래할 수 있다.

적당하게 모듈화를 시켜 최대의 효과를 발휘할 수 있도록 설계하는 것이 바로 모듈화의 핵심이겠다.

Flex에서는 이런 모듈화를 위한 기본기능을 제공하고 있다.

Flex 3에서는 아주 쉽게 모듈을 만들어 제작할 수 있으며 테스트도 가능하겠다.

문서 : Creating modular Applications

샘플 : modules_examples.zip

한가지 예제를 보이겠다.

1개의 Main Application에서 3개의 Module을 로드하는 프로그램이다.

1. Flex Project를 생성한다.

Flex 3 Builder의 메뉴에서 File > New... > Flex Project를 선택하면 다음 창이 나온다.

여기에 Project 이름으로 ModuleTest로 했다. 그 다음 Finish버튼을 누른다.

2. 샘플 프로그램 복사

위에서 제공한 샘플 프로그램 압축 파일을 풀면 아래와 같은 프로그램들이 있는데 아래와 같이 선택된 프로그램만 복사하고 바로 생성한 Project의 src 폴더에 복사한다.

3. 모듈 추가

복사한 소스에서 insurancemodules폴더안에 mxml 파일이 3개가 있다. 소스내용을 보면 알겠지만 태그를 사용한 것을 볼 수 있다. 즉, 이 3개의 소스는 모듈이다. Flex Complier가 모듈이라는 것을 알고 자동으로 컴파일해주기 위해 Flex Bulider에서는 해당 프로젝트에 있는 .actionScriptProperties 파일에 module을 추가할 필요가 있다. 직접 파일을 수정해도 되지만 Flex Builder에서는 이러한 설정을 쉽게 할 수 있도록 제공한다.

메뉴에서 Project > Properties를 선택하면 아래와 같은 창이 나오는데...

여기서 왼편에 Flex Modules를 선택하고 해당 3개의 모듈을 등록후 OK를 하면 된다.

Module등록을 하면 아래 그림과 같이 3개의 mxml 파일에 파란색 마크가 붙어 이것이 모듈이라는 것을 가시적으로 확인시켜주며, 컴파일러는 이 모듈을 따로 컴파일하여 각각 3개의 swf파일을 생성해준다. 이 swf파일은 직접 실행되는 것이 아니라 Main Application에서 필요할 때 동적으로 로드해서 사용하게 된다.

4. Main Application 설정

이 부분은 생략해도 되나, 실행할 때마다 해당 Application을 선택하는 번거로움을 없애기 위한 것이다. 모듈 설정때와 동일한 방법으로 Flex Builder의 메뉴에 Project > Properties를 선택한 다음 좌측에 Flex Applications를 선택한다. 그리고 아래와 같이 EventApp.mxml을 Add한다음 Set as Default 버튼을 이용하 default로 고정시켜준다. 이렇게 하면 실행할 때 기본적으로 MoudleText.mxml이  Main Application이 아니라 EventApp.mxml이 Main이 되어 실행된다.

아래는 실행된 화면 모습이다.

 

테스트는 아래 링크에서 해볼 수 있겠다.
프로그램 실행 후 오른쪽 마우스 버튼을 누르면 소스를 볼 수 있고 다운로드도 받을 수 있겠다.

http://blog.jidolstar.com/web_example/307/

문서 및 소스 출처 : http://blogs.adobe.com/flexdoc/modules/

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

M81과 M82의 미래

[사진출처 : http://antwrp.gsfc.nasa.gov/apod/ap080325.html]

좌측, 나선팔을 가진 은하는 나선은하 M81이고 오른쪽 붉은 가스와 먼지 구름처럼 보이는 은하는 불규칙 은하중 하나인 M82이다.

과거에 망원경으로 이 은하를 봤을때 느낌을 잊을 수 없다.

큰곰자리 부근에 위치한 이 2개의 은하는 밤하늘의 주요 관측 대상중에 하나이기도 하다.

언뜻 보면 상당히 평온한 우주를 보여주는 듯하다.

하지만 두개의 은하는 언젠가 충돌하게 된다.

사진에서의 멋진 광경은 이 두 개의 거대한 은하가 과거 몇십억년동안 같은 중력장안에 묶여 있기 때문이다.

충돌은하들...

그럼 은하가 충돌하게 되면 어떻게 될까?

[상세내용 : http://csep10.phys.utk.edu/astr162/lect/galaxies/Cartwheel.html]

위 사진은 허블 우주망원경에 의해 포착된 수레바퀴 은하이다.

이는 우측과 같은 모양의 두개의 은하가 충돌해서 만들어진 것이다. 물론 이와 같은 일이 일어나기 위해서는 수백만년내지 수억년이 걸리는 것이기 때문에 우측에 있는 사진은 가상의 사진이라고 볼 수 있다.

[상세내용 : http://hubblesite.org/newscenter/archive/releases/1997/34]

위에서 오른쪽 사진도 허블우주망원경이 찍은 것이다. 왼쪽은 지상에서 찍은 것이다. 허블우주망원경으로 찍었을때 더욱 세부적인 모습을 확인할 수 있다.

이 은하도 마찬가지로 2개의 은하가 서로 충돌하여 형성된 충돌은하중 하나인 것이다.

[사진출처 : http://antwrp.gsfc.nasa.gov/apod/ap080325.html]

위 두개의 은하는 NGC 2207과 IC 2163 은하이다. 두개의 은하가 서로 충돌하기 시작했다.

언젠가 이 2개의 은하가 자신의 형태를 잃어버리고 새로운 형태의 1개의 은하로 만들어질 것이다.

충돌은하 시뮬레이션 동영상

이런 충돌은하의 시뮬레이션한 동영상을 아래에서 다운받아 볼 수 있겠다.

[충돌은하 시뮬레이션 동영상 1]

[충돌은하 시뮬레이션 동영상 2]

우리은하도 충돌!!!!!

그 사실을 알고 있을지 모르겠지만 우리 은하의 이웃은하인 안드레메다 은하(M31)와 우리은하도 충돌한다. 우주는 전체적으로 팽창을 하고 있기 때문에 은하끼리 멀어지는 것이 일반적이지만 가까운 은하들은 이 팽창에 관계없이 서로 중력권 안에 존재함으로 충돌하게 되는 것이다.

우리은하와 안드로메다 은하는 대략 30억년 뒤에 충돌할 것으로 예상된다.

 

[안드로메다 은하, M31]

아래 시뮬레이션은 우리은하와 안드로메다 은하의 충돌을 시뮬레이션 한 장면이다.

매우 흥미롭다.

[우리은하와 안드로메다 은하 충돌 시뮬레이션 동영상 다운로드]

아래는 위의 영상을 캡쳐한 것이다.

[우리은하, 안드로메다 은하 충돌 시뮬레이션 캡쳐 사진]

우주의 기본단위는 은하이다. 그 은하 중에 하나가 바로 우리 은하이다. 밤하늘에 은하수로 보이는 것이 바로 우리은하의 내부 모습인 것이다.(우리은하는 직접 외관을 볼 수 없다.) 우리 은하안에는 몇천억개의 태양과 같은 별이 있으며 그 별 중 하나가 태양이고 그 태양을 공전하는 행성중에 하나가 지구이다.

가끔 그런 생각을 한다. 너무나도 큰 우주에 아주 작은 생명체라고 할 수 있는 인간... 그 들중에 나라는 존재. 100년 이내의 짧은 생을 살면서 갖가지 별의 별 생각을 다하며 꿈을 키워가다 죽는다. 우주에서 바라볼때 얼마나 미약한 존재인가? 그런 존재임에도 불구하고 생을 위해 바둥바둥 거리며 누구를 누르고 이겨야만 하는 이러한 현실을 바라보며 앞으로 진정으로 해야할 일이 무엇인가 다시 한번 생각해본다.

하나님만 바라보며 항상 겸손함으로 살아가야 할 수 밖에 없는 이유가 바로 이런 것 아닐까?

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

스타플이 중국인의 블로그에 소개되었다.

내용은 다음과 같다.

SNS的宇航时代 Starpl

SNS의 우주항해시대 Starpl

2008年2月4日开始进入内测的Starpl用“送您一颗星”的口号和标榜感性SNS，成为韩国网民的烫手话题。
Starpl区别于基本的迷你主页或博客空间，使用夜空中闪亮闪亮的“星”做个人空间。由韩国最大的非营利天文观测网站astronote.org的运营者池勇浩（译名）开发的星系地图以真实的星系数据为标准，作为用户空间使用的每颗星都是真实存在的“星”。

2008년 2월4일부터 클로즈 베타를 시작한 스타플은 "별을 드립니다."와 색다른 감성 SNS로 한국 인터넷을 뜨겁게 달구는 잇슈가 되고 있다.스타플은 기존의 미니홈피, 블로그와는 차별화된 특별한 사용자 공간을 제공한다. 다름 아닌 밤하늘에 반짝이는 "별"을 개인의 공간으로 이용하고 있다.
대한민국 최대 규모 비영리 천문관측 사이트인 천문노트(www.astronote.org)의 운영자, 지용호 팀장이 개발한 별지도는 실제 별 데이터를 기반으로 개발되어 실제 별을 사용자에게 부여하였다고 한다.


在Starpl中每颗“星”（既用户空间）都有固定的座标，可以通过星系地图确定空间位置并访问自己和好友的“星”空间。用户可以通过skin、item、widget来装饰属于自己的“星”空间。虽然某些小品或道具需要使用被称为“星粉”的虚拟货币来购置，但这些星粉通常是由系统奖励性的自动分配，所以并不会给用户带来经济上的负担（开始都这么说）。

또한 각각의 별에는 고유한 좌표가 있기 때문에 별지도를 통해 별의 위치를 확인 할 수 있으며, 친구별과 다른 사용자의 별 역시 별지도를 통해 방문할 수 있다.사용자는 자신의 별을 스킨,아이템,위젯을 이용해 개성 있게 꾸밀 수 있다. 아이템 구매에 필요한 포인트인 별가루는 서비스를 사용하면 쉽게 받을 수 있기 때문에 아이템 구매에 대한 경제적 부담 없이 별을 꾸밀 수 있다.(두고 봐야 알겠는데요~)

Starpl还具备一项timeline功能，用户可以指定每段timeline的起点。例如和他/她相识的日期为起点，其间发生的每件事都设置时间点，点变成线就成为一段爱情的timeline。
Timeline和属于自己的某颗星，在Starpl既可以展开时间和空间的双重旅程，SNS是否进入宇航时代并不重要，关键是有人已经开始这么做。

스타플에는 또 timeline라는 기능이 있는데 기록시점을 직접 지정하여 인생히스토리 기록이 가능하다.예를 들면 그와의 만남을 시점으로 하고,와중에 발생한 모든 일들을 해당한 시간 포인트에 기록 함으로써,포인트가 라인으로 완성되며 당신만의 러브 타임라인으로 될것이다.
타임라인과 자신의별,스타플에서는 시간과 공간을 여행하는 즐거움을 쌓는다고 본다.SNS의 우주 항해 시대가 왔는지는 모르겠지만, 어떤곳에서는 지금 이미 시작하고 있다.

Starpl网址：http://www.starpl.com

출처 : http://www.myymi.com/291

다음 예제는 어떻게 indicator skin을 FormItem 컨테이너에 어떻게 설정하는가 보여주고 있다. 기본적으로 이것을 설정하기 위해서는 FormItem에 정의되어 있는 Style속성인 indicatorSkin을 사용하면 되겠다.

[소스보기] 

[실행화면]

소스에서 보면 두개의 속성이 눈에 띈다. 즉 indicatorSkin과 indicatorGap 이다.

이 두 속성이 어떻게 적용되는가 살펴봤다.

Flex SDK의 FormItem을 살펴보면 아래와 같이 두 Style속성이 Metadata로 설정되어 있다.

/**
 *  Number of pixels between the label and child components of the form item.
 *
 *  @default 14
 */
[Style(name="indicatorGap", type="Number", format="Length", inherit="yes")]

 

/**
 *  Specifies the skin to use for the required field indicator.
 *
 *  @default mx.containers.FormItem.Required
 */
[Style(name="indicatorSkin", type="Class", inherit="no")]

즉, MXML에서 형태로 참고할 수 있다는 것을 의미한다. 또한 지정되어야할 Style Type과 상속관계가 명시됨으로 더 구체적으로 Style 사용범위를 좁힐 수 있겠다.

indicatorGap은 invalidateSize()시 호출되는 UIComponent에서 오버로딩되어 참조한 measure()함수에서 사용한다.

    override protected function measure():void
    {
        if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0)
        {
            previousMeasure();
            return;
        }
       
        super.measure();
       
        if (direction == FormItemDirection.VERTICAL)
            measureVertical();
        else
            measureHorizontal();
    }

 

    private function measureVertical():void
    {
        // use VBox and then take into account label, indictor gap
        verticalLayoutObject.measure();
       
        // Need to include label and indictor gap for width
        var extraWidth:Number = calculateLabelWidth() + getStyle("indicatorGap");
       
        measuredMinWidth += extraWidth;
        measuredWidth += extraWidth;
       
        // need to include label for height
        var labelHeight:Number = labelObj.getExplicitOrMeasuredHeight();
       
        measuredMinHeight = Math.max(measuredMinHeight, labelHeight);
        measuredHeight = Math.max(measuredHeight, labelHeight);
    }

위에서 보면 measuerdWidth를 설정하는데 Label폭과 indicatorGap속성을 참고하는 것을 알 수 있다. 즉, indicatorSkin의 x축 위치는 extraWidth만큼이 된다는 것을 유추해볼 수 있다.

그럼 실제로 indicatorSkin을 설정하는 부분은 어디 있을까?

먼저 UIComponent에서 오버로딩한 updateDisplayList()를 살펴보면

        var x:Number = vm.left;
        var y:Number = vm.top;
       
        var labelWidth:Number = calculateLabelWidth();
       

        // Set label size.
        labelObj.setActualSize(labelWidth, labelObj.getExplicitOrMeasuredHeight());
        labelObj.move(x, y);
 
        x += labelWidth;

        // Position the "required" indicator.
        displayIndicator(x, y);

이런식으로 만들어져 있다. 좌측 label이 위치하고 바로 그 오른쪽에 indicatorSkin을 위치할 수 있도록 코드가 짜여져 있다는 것을 알 수 있다. 그럼 실제적으로 Display 해주는 displayIndicator()함수를 살펴보자.

    private function displayIndicator(xPos:Number, yPos:Number):void
    {
        if (required)
        {
            if (!indicatorObj)
            {
                var indicatorClass:Class = getStyle("indicatorSkin") as Class;
                indicatorObj = IFlexDisplayObject(new indicatorClass());
                rawChildren.addChild(DisplayObject(indicatorObj));
            }

            indicatorObj.x =
                xPos + ((getStyle("indicatorGap") - indicatorObj.width) / 2);
           
            if (labelObj)
            {
                indicatorObj.y = yPos +
                    (labelObj.getExplicitOrMeasuredHeight() -
                     indicatorObj.measuredHeight) / 2;
            }
        }
        else
        {
            if (indicatorObj)
            {
                rawChildren.removeChild(DisplayObject(indicatorObj));
                indicatorObj = null;
            }
        }
    }

 

분석하면서 알았지만 위에 required get/set 함수가 있다. 이 함수는 indicatorSkin을 보여줄 것이냐 말것이냐 결정하는 거다.

required속성이 true인 경우 indicatorSkin을 보여주도록 만들어져있다. getStyle()로 indicatorSkin을 읽어오고 IFlexDisplayObject로 오브젝트를 생성한다음 자식으로 추가한다. 다음으로는 x,y를 indicatorGap Style속성, indicatorSkin자체 크기, 그리고 label오브젝트의 크기에 따라서 보기좋게 위치를 지정한다.

대충 indicatorGap과 indicatorSkin Style속성이 어떻게 동작되어지는가 살펴보았다.

이러한 분석은 자신만의 새로운 커스텀 컴포넌트를 만드는데 가이드 역할을 할 수 있다.

그러므로 Flex SDK를 분석해보는 습관도 좋은 것 같다.

소스출처 : blog.flexexamples.com