[04] Hello bada 프로젝트 만들기

이번 강좌에서는 기본적인 Form Based Application인 Hello bada 프로젝트를 만들어보겠습니다. 프로젝트를 생성하고, TextField, Label, Button 컨트롤을 이용하여 간단하게 만든 애플리케이션입니다.

 

 

 

File > New > bada Application Project를 선택하면 다음과 같은 화면에 보입니다. Application과 Library 중에서 선택하여 생성할 수 있습니다.  우리는 Form Based Application을 만들 것이므로, 해당 항목을 선택하고 Project name을 입력하고 Next를 선택합니다.

 

 

 

bada SDK가 있는 가장 상위 디렉토리를 지정하고 이 애플리케이션이 동작할 디바이스 모델을 선택하고 Next를 선택합니다.

 

 

 

메니페스트(manifest) 파일을 지정하는 화면이 나옵니다. 여기서는 테스트 애플리케이션을 만들 것이므로, Default manifest file에 체크하고 Next를 선택합니다. 만약, 삼성앱스 셀러사이트에 등록할 목적으로 상용 애플리케이션을 만들 것이라면 바다 DS(Developer Site)에 가서 메니페스트를 다운로드 받아서 여기에 추가해야 합니다.

 

 

 

Form name을 입력하는 화면입니다. 원하는 이름을 입력하고 Next를 선택합니다.

 

 

 

Vender와 Description을 입력하고 Next를 누릅니다.

 

 

 

이제 프로젝트 생성을 위한 모든 작업이 끝났습니다. 이에 관한 내용이 Summary되어 표시되고, Finish를 누르면 프로젝트 생성을 마무리 합니다.

 

이제 폼 구성을 해 봅시다.

폼은 코드로도 작성할 수 있지만 Resource Explorer에서 편리하게 추가, 수정, 삭제할 수 있습니다. Project Explorer > HelloBada > Res > 480x800 > IDF_HELLOBADAFORM.xml 더블 클릭하면 됩니다.

(만약, 'Open Resource Explorer View first.' 라는 경고 메시지가 뜬다면 당황하지 마시고,  Window > Show View > Other... > bada > Resource Explorer 를 선택하면 됩니다.)

 

 

 

ToolBox에서 TextField, Button, Label 컨트롤을 선택한 다음 Drag하여 UI 화면에 Drop하면 자동으로 추가됩니다. 각 컨트롤을 더블클릭하면 Property에 속성 정보가 나타납니다. 각 컨트롤의 속성 창을 보여드리겠습니다.

 

TextField Control Property

 

Button Control Property

 

Label Control Property

 

이렇게 컨트롤 배치를 마치면, UI 구성은 끝났습니다. 이제부터는 해당 컨트롤들을 실제 코드에서 어떻게 사용하는지 알아보겠습니다.

 

// HelloBadaForm.h File

class HelloBadaForm :
    public Osp::Ui::Controls::Form,
   public Osp::Ui::IActionEventListener
{ …

protected:
    static const int ID_BUTTON_OK = 101;
    static const int ID_BUTTON_GREETING = 102;

    Osp::Ui::Controls::Button *__pButtonOk;
    Osp::Ui::Controls::Label *__pLabel;
    Osp::Ui::Controls::EditField *__pEditField;

…

}

 

굵게 표시된 부분을 HelloBadaForm.h 에 추가합니다. 버튼에 대한 이벤트 처리를 위해서 ID_BUTTON_GREETING을 선언한 부분과 해당 컨트롤과 연결하기 위해 __pLabel, __pEditField 선언도 합니다.

 

 

// HelloBadaForm.cpp File

result
HelloBadaForm::OnInitializing(void)
{

…

    __pLabel = static_cast<Label *>(GetControl(L"IDC_LABEL1"));
    __pEditField = static_cast<EditField *>(GetControl(L"IDC_EDITFIELD1"));
    Button* pButton1 = static_cast<Button *>(GetControl(L"IDC_BUTTON1"));
    pButton1->SetActionId(ID_BUTTON_TEST);
    pButton1->AddActionEventListener(*this);

    return r;
}

 

void
HelloBadaForm::OnActionPerformed(const Osp::Ui::Control& source, int actionId)
{

…
    switch(actionId)
    {
    case ID_BUTTON_OK:
        {
            AppLog("OK Button is clicked! \n");
        }
        break;
    case ID_BUTTON_GREETING: // 헤더에서 선언된 스태틱 변수
        {
            String name(__pEditField->GetText()); // 위에 OnInitializing() 메서드에서 UI 컨트롤과 연결하여 GetText() 메서드를 호출하면 해당되는 값을 가져옴.

            name.Trim();
            if ( name.IsEmpty() ) {
                name.Append(L"bada");
            }

            __pLabel->SetText(L"Hello, " + name);
            this->RequestRedraw(true);

        }
        break;
    default:
        break;
    }
}

 

 

이렇게 추가해주시고, 실행해주시면, 다음과 같은 화면이 보입니다.

 

 

TextField에 알맞은 이름을 넣고 Greeting 이라고 적인 Button 을 누르면 아래에 있는 Label에 알맞은 인사하는 문구가 출력됩니다.

 

간단한 컨트롤을 배치하고, 이벤트 리스너를 이용해 UI와 코드가 어떻게 통신하는지 간단하게나마 알아볼 수 있었습니다.