예제: 주식 시세 표시 응용 프로그램 국제화

Flash Player 10.1 이상, Adobe AIR 2.0 이상

Global Stock Ticker 응용 프로그램은 미국, 일본 및 유럽 주식 시장의 주식에 대한 가상 데이터를 검색 및 표시하며 다양한 로캘 규칙에 따라 데이터의 서식을 지정합니다.

이 예제에서는 flash.globalization 패키지의 다음 기능을 보여 줍니다.

  • 로캘 인식 숫자 서식 지정

  • 로캘 인식 통화 서식 지정

  • 통화 ISO 코드 및 통화 기호 설정

  • 로캘 인식 날짜 서식 지정

  • 적절한 약식 월 이름 검색 및 표시

이 샘플에 대한 응용 프로그램 파일을 가져오려면 www.adobe.com/go/learn_programmingAS3samples_flash_kr 을 참조하십시오. Global Stock Ticker 응용 프로그램 파일은 Samples/GlobalStockTicker 폴더에 있습니다. 이 응용 프로그램은 다음과 같은 파일로 구성됩니다.

파일

설명

GlobalStockTicker.mxml

또는

GlobalStockTicker.fla

Flex(MXML) 또는 Flash(FLA)용 응용 프로그램의 사용자 인터페이스입니다.

styles.css

응용 프로그램 사용자 인터페이스의 스타일입니다(Flex 전용).

com/example/programmingas3/stockticker/flex/FinGraph.mxml

시뮬레이션된 주식 데이터 차트를 표시하는 MXML 구성 요소입니다(Flex 전용).

com/example/programmingas3/stockticker/flash/GlobalStockTicker.as

이 응용 프로그램용 사용자 인터페이스 논리를 포함하는 문서 클래스입니다(Flash 전용).

comp/example/programmingas3/stockticker/flash/RightAlignedColumn.as

Flash DataGrid 구성 요소에 대한 사용자 지정 셀 렌더러입니다(Flash 전용).

com/example/programmingas3/stockticker/FinancialGraph.as

시뮬레이션된 주식 데이터 차트를 작성하는 ActionScript 클래스입니다.

com/example/programmingas3/stockticker/Localizer.as

로캘 및 통화를 관리하고 숫자, 통화 금액 및 날짜의 지역화된 서식 지정을 처리하는 ActionScript 클래스입니다.

com/example/programmingas3/stockticker/StockDataModel.as

Global Stock Ticker 예제의 모든 샘플 데이터를 저장하는 ActionScript 클래스입니다.

사용자 인터페이스 및 샘플 데이터 이해

이 응용 프로그램의 기본 사용자 인터페이스 요소는 다음과 같습니다.

  • 로캘 선택을 위한 콤보 상자

  • 시장 선택을 위한 콤보 상자

  • 각 시장의 6개 회사에 대한 데이터를 표시하는 DataGrid 컨트롤

  • 선택된 회사의 주식에 대한 시뮬레이션된 기간별 데이터를 보여주는 차트

이 응용 프로그램은 로캘, 시장 및 회사 주식에 대한 모든 샘플 데이터를StockDataModel 클래스에 저장합니다. 실제 응용 프로그램은 서버에서 데이터를 검색한 후 StockDataModel과 같은 클래스에 저장합니다. 이 예제에서는 모든 데이터가 StockDataModel 클래스에 하드 코딩되어 있습니다.

참고: 재무 차트에 표시되는 데이터는 DataGrid 컨트롤에 표시되는 데이터와 일치하지 않을 수 있습니다. 차트는 다른 회사를 선택할 때마다 임의로 다시 그려집니다. 이는 단지 예시용입니다.

로캘 설정

이 응용 프로그램은 일부 초기 설정 작업 후에 Localizer.setLocale() 메서드를 호출하여 기본 로캘에 대한 포맷터 객체를 생성합니다. 또한 setLocale() 메서드는 사용자가 Locale 콤보 상자에서 새 값을 선택할 때마다 호출됩니다.

public function setLocale(newLocale:String):void 
{ 
    locale  = new LocaleID(newLocale); 
 
    nf = new NumberFormatter(locale.name); 
    traceError(nf.lastOperationStatus, "NumberFormatter", nf.actualLocaleIDName); 
 
    cf = new CurrencyFormatter(locale.name); 
    traceError(cf.lastOperationStatus, "CurrencyFormatter", cf.actualLocaleIDName); 
    symbolIsSafe = cf.formattingWithCurrencySymbolIsSafe(currentCurrency); 
    cf.setCurrency(currentCurrency, currentSymbol); 
    cf.fractionalDigits = currentFraction; 
 
    df = new DateTimeFormatter(locale.name, DateTimeStyle.LONG, DateTimeStyle.SHORT); 
    traceError(df.lastOperationStatus, "DateTimeFormatter", df.actualLocaleIDName); 
    monthNames = df.getMonthNames(DateTimeNameStyle.LONG_ABBREVIATION); 
} 
 
public function traceError(status:String, serviceName:String, localeID:String) :void 
{ 
    if(status != LastOperationStatus.NO_ERROR) 
    { 
        if(status == LastOperationStatus.USING_FALLBACK_WARNING) 
        { 
            trace("Warning - Fallback locale ID used by " 
                    + serviceName + ": " + localeID); 
        } 
        else if (status == LastOperationStatus.UNSUPPORTED_ERROR) 
        { 
            trace("Error in " + serviceName + ": " + status); 
            //abort application 
            throw(new Error("Fatal error", 0)); 
        } 
        else 
        { 
            trace("Error in " + serviceName + ": " + status); 
        } 
    } 
    else 
    { 
        trace(serviceName + " created for locale ID: " + localeID); 
    } 
}

setLocale() 메서드는 먼저 LocaleID 객체를 생성합니다. 이 객체를 통해 나중에 필요한 경우 실제 로캘에 대한 세부 사항을 쉽게 얻을 수 있습니다.

그런 다음 이 메서드는 해당 로캘에 대한 새 NumberFormatter, CurrencyFormatter 및 DateTimeFormatter 객체를 생성합니다. 각 포맷터 객체를 생성한 후 traceError() 메서드가 호출됩니다. 이 메서드는 요청된 로캘에 문제가 있는 경우 콘솔에 오류 및 경고 메시지를 표시합니다. 실제 응용 프로그램은 이러한 오류를 추적할 뿐만 아니라 적절히 반응해야 합니다.

CurrencyFormatter 객체를 생성한 후 setLocale() 메서드는 포맷터의 통화 ISO 코드, 통화 기호 및 fractionalDigits 속성을 사전 지정된 값으로 설정합니다. 이러한 값은 사용자가 Markets 콤보 상자에서 새 시장을 선택할 때마다 설정됩니다.

DateTimeFormatter 객체를 생성한 후 setLocale() 메서드는 지역화된 약식 월 이름의 배열을 가져옵니다.

데이터 서식 지정

서식이 지정된 주식 데이터는 DataGrid 컨트롤에 표시됩니다. DataGrid 열은 각각 적절한 포맷터 객체를 사용하여 열 값의 서식을 지정하는 레이블 함수를 호출합니다.

예를 들어 Flash 버전에서는 다음 코드가 DataGrid 열을 설정합니다.

var col1:DataGridColumn = new DataGridColumn("ticker"); 
col1.headerText = "Company"; 
col1.sortOptions = Array.NUMERIC; 
col1.width = 200; 
 
var col2:DataGridColumn = new DataGridColumn("volume"); 
col2.headerText = "Volume"; 
col2.width = 120; 
col2.cellRenderer = RightAlignedCell; 
col2.labelFunction = displayVolume; 
 
var col3:DataGridColumn = new DataGridColumn("price"); 
col3.headerText = "Price"; 
col3.width = 70; 
col3.cellRenderer = RightAlignedCell; 
col3.labelFunction = displayPrice; 
 
var col4:DataGridColumn = new DataGridColumn("change"); 
col4.headerText = "Change"; 
col4.width = 120; 
col4.cellRenderer = RightAlignedCell; 
col4.labelFunction = displayPercent;

이 예제의 Flex 버전의 경우 MXML에 DataGrid를 선언합니다. 또한 각 열에 대해 유사한 레이블 함수를 정의합니다.

labelFunction 속성은 Localizer 클래스의 서식 지정 메서드를 호출하는 다음 함수를 참조합니다.

private function displayVolume(item:Object):String 
{   
    return localizer.formatNumber(item.volume, 0); 
} 
     
private function displayPercent(item:Object):String 
{ 
       return localizer.formatPercent(item.change )  ; 
} 
   
  private function displayPrice(item:Object):String 
{ 
    return localizer.formatCurrency(item.price); 
}

그런 다음 Localizer 메서드는 적절한 포맷터를 설정 및 호출합니다.

public function formatNumber(value:Number, fractionalDigits:int = 2):String 
{ 
    nf.fractionalDigits = fractionalDigits; 
    return nf.formatNumber(value); 
} 
 
public function formatPercent(value:Number, fractionalDigits:int = 2):String 
{ 
    // HACK WARNING: The position of the percent sign, and whether a space belongs 
    // between it and the number, are locale-sensitive decisions. For example, 
    // in Turkish the positive format is %12 and the negative format is -%12. 
    // Like most operating systems, flash.globalization classes do not currently 
    // provide an API for percentage formatting. 
    nf.fractionalDigits = fractionalDigits; 
    return nf.formatNumber(value) + "%"; 
} 
 
public function formatCurrency(value:Number):String 
{ 
    return cf.format(value, symbolIsSafe); 
} 
 
public function formatDate(dateValue:Date):String 
{ 
    return df.format(dateValue); 
} 
|