12월 사수자리

구매대행 사이트 작업해줄 일이 있었는데, 공부하는셈 치고 요금계산기를 한 번 만들어봤습니다. 동작하는 예제는 http://s4mtech.nt.co.kr/bemarket/EstimateDeliveryFee/EstimateDeliveryFee.html 입니다. 맨 아래에 소스파일도 있습니다.


1. Validator
Validator 를 이용하면 쉽게 입력된 값들을 확인할 수 있었습니다. 게다가 에러 표시까지 알아서..

# Definition of NumberValidator from Adobe Livedoc
<mx:NumberValidator
    allowNegative="true|false"
    decimalPointCountError="The decimal separator can only occur once."
    decimalSeparator="."
    domain="real|int"
    exceedsMaxError="The number entered is too large."
    integerError="The number must be an integer."
    invalidCharError="The input contains invalid characters."
    invalidFormatCharsError="One of the formatting parameters is invalid."
    lowerThanMinError="The number entered is too small."
    maxValue="NaN"
    minValue="NaN"
    negativeError="The number may not be negative."
    precision="-1"
    precisionError="The number entered has too many digits beyond the decimal point."
    separationError="The thousands separator must be followed by three digits."
    thousandsSeparator=","
  />

# Custom NumberValidator
<mx:NumberValidator id="numVal" property="text"
        allowNegative="false" domain="real"
        decimalPointCountError="입력형식을 살펴주십시오."
        decimalSeparator="."
        exceedsMaxError="입력값이 너무 큽니다."
        invalidCharError="입력형식을 살펴주십시오."
        lowerThanMinError="입력값이 너무 작습니다."
        maxValue="NaN"
        minValue="0"
        negativeError="0보다 작은 수는 입력하실 수 없습니다."
        precision="2"
        precisionError="소수점 아래로는 두자리까지만 쓰실 수 있습니다."
        requiredFieldError="필수입력 항목입니다."
        separationError="입력형식을 살펴주십시오." />

Validate 해야할 필드들이 여러개였기 때문에, 아래와 같은 식으로 활용했습니다. 원래는 Validator 에 'source' 항목에 확인할 필드의 id 를 적어주고, `validator_id.validate()` 식으로 호출하면 됩니다.

import mx.events.ValidationResultEvent;

private var vResult:ValidationResultEvent;

public function validateNumFields() : Boolean
{
    var listeners:Array = [exchangeRate, itemPrice, itemGroundFee, itemWeight];
    var isValid:Boolean = true;
    for each (var listener:Object in listeners)
    {
        numVal.listener = listener;
        vResult = numVal.validate(listener.text);
        if (vResult.type == ValidationResultEvent.INVALID)
        {
            isValid = false;
        }
    }
   
    return isValid;
}

2. Trap TextInput
Validator 를 알기전에, 텍스트박스에 숫자 대신 다른 문자를 입력하는 것을 막기 위해서 키 입력을 가로채고자 했습니다. 처음에는 KEY_DOWN 이벤트를 사용하려고 했는데, 이벤트를 Cancel 하는 것이 불가능하더군요. 그래서 TEXT_INPUT 이벤트를 이용하여야 했습니다. Event 객체의 preventDefault 메쏘드는 원래 실행되어야 하는 이벤트를 막는 역할을 하며, Event 의 읽기 가능 옵션인 cancelable 이 true 일 때만 동작합니다.

public function trapTextInput( event:TextEvent ) : void
{
    if ((event.text < '0' || event.text > '9') && event.text != '.')
    {
        event.preventDefault();
    }
}

대신 KEY_DOWN 으로는 텍스트 박스에서 엔터를 눌렀을 경우를 처리할 수 있더군요.

public function keyListener( event:KeyboardEvent ) : void
{
    if (event.keyCode == 13)
    {
        estimateDeliveryFee();
    }
}

3. Formatter

# Definition of CurrencyFormatter from Adobe Livedoc
<mx:CurrencyFormatter
    alignSymbol="left|right"
    currencySymbol="$"
    decimalSeparatorFrom="."
    decimalSeparatorTo="."
    precision="-1"
    rounding="none|up|down|nearest"
    thousandsSeparatorFrom=","
    thousandsSeparatorTo=","
    useNegativeSign="true|false"
    useThousandsSeparator="true|false"
 />

# Custom CurrencyFormatter
<mx:CurrencyFormatter id="WonPrice" precision="0"
        rounding="up"
        decimalSeparatorTo="."
        thousandsSeparatorTo=","
        useThousandsSeparator="true"
        useNegativeSign="true"
        currencySymbol=" 원"
        alignSymbol="right"/>

요런 CurrencyFormatter 를 가지고 Text 박스에 숫자를 입력할때,

textTotalWon.text = WonPrice.format(totalprice.toString());

와 같이 입력하면 됩니다.


4. XML 파일 읽기
XML 파일 읽고 사용하기는 어렵지 않더군요. 차이점이라면, 로컬에 있는 자료를 읽는 것도 비동기방식으로 처리된다는 것 정도?

var myXML:XML = new XML();               
var XML_URL:String = "config.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader;
myLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
               
public function xmlLoaded(evtObj:Event):void
{
    myXML = XML(myLoader.data);
    exchangeRate.text = myXML.exchangeRate;
}

FLEX 의 장점은 뭐니뭐니 해도, 저같이 디자인에 0점인 사람도 Flash UI 를 깔끔하게 만들 수 있다는게 아닐까요. Flex Builder Project 를 첨부합니다.

허접하지만 FLEX 공부하면서 그누보드^[각주:1] Frontend 를 만들어봤습니다. 소스는 Mike Potter 의 Flex2 and AMFPHP^[각주:2] 를 참조하였습니다. 공부에 좀 도움이 되네요. PHP Remoting 으로는 AMFPHP 를 사용했습니다. 제가 지금은 가지고 있는 서버가 없어서 예제는 보여드릴수가 없어서 아쉽네요. 다른 분들도 혹시 도움이 될지 몰라 여기에 소스를 함께 올리겠습니다.

FLEX 를 해보니 확실히 Frontend 형식의 무언가를 만드는데 정말 좋다는 생각을 많이 했습니다. 이와 더불어 PHP 나 기타 웹 어플리케이션들이 웹 서비스 형식으로 많이 발전할 것 같다는 생각을 했구요. 하지만 기존의 웹 어플리케이션은 나름대로 살아남을 것입니다. 웹 서비스와 기존 방식의 웹 서비스를 동시에 하기에는 프레임웍의 도입이 절실한 것 같습니다.

이런 PHP Remoting 을 이용하기 위해서는 Array 나 객체 형식의 자료형을 주고 받아야 하는데, 그누보드의 경우에는 중첩된 include 나 require 를 사용하기 때문에, 기존의 코드는 전혀 사용할 수가 없었습니다. 만약 객체지향으로 설계된 (최소한 각각의 기능이 함수로 감싸져있다면) 웹 어플리케이션이 있다면, 이를 FLEX 웹 서비스로 바꾸는 것은 UI 만 고려하면 될 것입니다.

자료는 맨 아래부분에 올려두겠습니다. sample.zip 은 Flex Builder 프로젝트이고, amfphp.tar.gz 은 PHP 서비스입니다. 그누보드 폴더 아래에 압축을 푸시면 될 것입니다. 아래는 제가 했던 작업들, 나중에 참고하기 위해, 적어둡니다.

1. Forum list
 - add `getForums` service in amfphp service
 - add mxTree control on flex project
 - add mxPanel control on flex project and place mxTree control on the panel control
 - set borderStyle as `none` and width as `100%` for mxTree control
 - modify onResult method on flex project

2. Category list and bind event
 - Use `bo_category_list` to populate child nodes
 - Bind events on each of them, and add event which fetch items on a given forum with category if the selected item is category.

3. Next step
 - User validation
 - Paginated item list
 - Display item contents