일탈.다반사.

이번 강좌에서는 기본적인 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와 코드가 어떻게 통신하는지 간단하게나마 알아볼 수 있었습니다.

바다 SDK의 기본 예제 중 하나인 Basic App을 추가하면, Project Explorer에 다음과 같은 파일이 자동으로 추가되어 집니다.

• BasicApp.cpp
• 메인 애플리케이션 컨트롤러
• Form 1/2/3.cpp
• 이 애플리케이션이 갖는 세 개의 폼에 대한 인터페이스
• FormMgr.cpp
• 폼 간의 이동과 같은 부분을 관리함
• BasicAppEntry.cpp
• 메인 엔트리 포인트로 바다 IDE가 자동으로 만들어주는 템플릿이므로 굳이 수정할 필요 없음.
• C언어와 C++에서 main function과 같은 기능으로써 애플리케이션이 실행될 때 가장 먼저 호출되는 곳.

BasicAppEntry.cpp 소스 코드입니다.
/** * This file contains the bada application entry point. */ #include "Hello_bada.h" using namespace Osp::Base; using namespace Osp::Base::Collection; #ifdef __cplusplus extern "C" { #endif // __cplusplus _EXPORT_ int OspMain(int argc, char *pArgv[]); /** * The entry function of bada application called by the operating system. */ int OspMain(int argc, char *pArgv[]) { result r = E_SUCCESS; AppLog("Application started."); ArrayList* pArgs = new ArrayList(); pArgs->Construct(); for (int i = 0; i < argc; i++) pArgs->Add(*(new String(pArgv[i]))); r = Osp::App::Application::Execute(Hello_bada::CreateInstance, pArgs); if (IsFailed(r)) { AppLogException("Application execution failed-[%s].", GetErrorMessage(r)); r &= 0x0000FFFF; } pArgs->RemoveAll(true); delete pArgs; AppLog("Application finished."); return static_cast<int>(r); } #ifdef __cplusplus } #endif // __cplusplus

20번째 줄에서 int OspMain(int argc, char *pArgv[]) 함수를 보면, C언어와 C++에 Main 함수와 함수명만 빼고는 똑같습니다. 바다 플랫폼에서는 모든 애플리케이션이 이 함수부터 시작한다고 보면 됩니다.

22번째 줄에서는 unsigned long으로 정의한 result r에 E_SUCCESS를 대입하고, 에러나 익셉션을 발생시킨 부분은 변수 r을 수정하여 전체적인 프로그램 흐름을 잡습니다.

30번째 줄에서 Application Framework이 Osp::App::Application을 상속받은 BasicApp의 CreateInstance를 호출하여 실행합니다. 위에서 ArrayList로 인자값을 모두 할당하여 이 때 같이 던져주는 것을 볼 수 있습니다.

약간 특이한 부분이라면 34번 째 줄에서 r &= 0x0000FFFF; 으로 비트 연산하는 것을 볼 수 있는데, 이 부분은 OspMain 함수의 리턴값이 Integer형인데, result가 unsigned long으로 선언되었기 때문입니다. 모두 0xFFFFFFF 로 비트연산해도 무방합니다. 리턴할 때는 꼭 integer로 캐스트해주어야 빌드타임에 에러가 발생되지 않습니다.

이제 바다 통합개발환경(IDE) 설치를 완료하고, SDK Sample 중 하나인 Basic App을 실행해보도록 하겠습니다.

바탕화면에 badaIDE 아이콘을 클릭합니다.

왼쪽에서 네개의 아이콘은 모두 바다 IDE와 SDK에 관한 문서자료입니다.

마지막에 Workbench 아이콘을 클릭하면 일반적인 IDE와 비슷한 화면이 나타납니다.

윈도우 오른편에 있는 bada SDK Samples에서 Basic App 항목을 선택하고, 마우스 오른쪽 버튼을 클릭하고, ‘Copy into my workspace…’ 를 선택합니다.

이제 Project Explorer 윈도우에 Basic App이 추가된 것을 볼 수 있습니다.

이제 추가된 Baisc App 프로젝트를 빌드해보겠습니다. Basic App 프로젝트 항목을 선택하고 마우스 오른쪽 버튼을 누르면 Build Project 항목이 보입니다. 이 항목을 선택합니다.

이렇게 빌드가 진행됩니다.

이제 빌드가 완료되었으므로, 시뮬레이터를 이용하여 실행해보겠습니다.

Basic App 프로젝트 항목을 선택하고, 마우스 오른쪽 버튼을 선택한 다음 ‘Run As…’ –> ‘bada Simulator Application’ 항목을 선택합니다.

 
화면에서 보듯이 바다 웨이브폰 UI가 씌워진 시뮬레이터 위에서 동작하는 Basic App을 확인해 보실 수 있습니다.