Bài viết này chúng tôi sẽ đưa bạn tiếp cận với ứng dụng Form trên Bada. Bạn sẽ thao tác với form và các thành phần cơ bản trên form. Chẳn hạn như, bạn tạo ra một form trên đó bạn đặt vào 2 textbox: text1, text2. Thêm vào đó là một nút copy. Khi ứng dụng bạn thực thi, bạn gõ nội dung text vào ô text1 rồi nhấn vào nút copy. Khi đó, nội dung ô text1 sẽ được sao chép vào ô text2.

Để làm được như vậy, bạn cần qua các bước cơ bản như sau:
1. Tạo một ứng dụng mới bằng cách chọn vào menu File > New > bada Application Project

Tại ô Project name, bạn gõ tên dự án của bạn. Ví dụ dự án của tôi là HelloCopy. Chọn nơi lưu trữ dự án của bạn và Project type là bada Frame Based Application.

Bạn trả lời các form hướng dẫn mặc định của SDK để hoàn thành việc tạo một dự án cho mình (bạn có thể tham khảo bài HelloWorld để biết chi tiết)

2. Tiếp tục, tại của sổ Resource: HelloCopy bạn tạo thêm một form mới rồi đưa vào form các thành phần như đã quy ước. Sẽ có 2 ô text: text1, text2 và một nút copy.

SDK sẽ tự động sinh ra cho bạn một form mới có tên IDF_FORM1. Tại thanh công cụ Control, bạn kéo thả 2 Edit Field và một Button vào form của mình, như sau:


Bạn có thể thay đổi các thuộc tính cho text1, text2 và nút copy tại của sổ Properties:

3. Giờ bạn đã có form hiển thị cho riêng mình rồi. Tiếp đến bạn cần các thao tác trong code để nạp form, viết action cho nút copy.

3.1. Bạn mở tập tin HelloCopy > src > HelloCopy.cpp

Bạn tìm đến dòng 87, rồi xóa nội dung trong hàm OnForeground đi, hàm này mặc định được sinh ra và vẽ tên dự án của bạn lên màn hình khi bạn thực thi ứng dụng.

void
HelloCopy::OnForeground(void)
{
    // TODO:
    // Start or resume drawing when the application is moved to the foreground.

    Canvas* pCanvas = GetAppFrame()->GetCanvasN();
    Font font;
    font.Construct(FONT_STYLE_PLAIN | FONT_STYLE_BOLD, 50);
    pCanvas->SetFont(font);
    pCanvas->DrawText(Point(30, 30), GetAppName());
    pCanvas->Show();

    delete pCanvas;
}

Bạn xóa nó trở thành như sau:

void
HelloCopy::OnForeground(void)
{
    // TODO:
    // Start or resume drawing when the application is moved to the foreground.
}

Bạn lưu các thay đổi vừa rồi, tiến hành build và run ứng dung, lúc này ứng dụng của bạn không còn in ra dong chữ HelloCopy trên màn hình của simulator nữa.

3.2. Tiếp đến, bạn tạo ra lớp mới dựa vào form mà bạn vừa thiết kế xong. Bạn vào lại IDF_FORM1, rồi click phải chuột vào form. Một menu ngữ cảnh sẽ đổ xuống và bạn chọn vào mục Add class

Bạn điền vào tên lớp bạn muốn tạo (ClassName) và chọn vào Button với ngụ ý là sẽ gắn thêm hành động lên nút Copy. Xong bạn nhân vào Finish để hoàn tất việc tạo lớp mới của mình.

3.3. Tại tập tin HelloCopy > src > HelloCopy.cpp

Bạn thêm vào dòng lệnh khai báo tiêu đề tại dòng 9 như sau:

/**
 * Name        : HelloCopy
 * Version     : $(version)
 * Vendor      : all we know
 * Description : tutorial
 */

#include "HelloCopy.h"
#include "HelloCopyForm.h"

Tại dòng 67 bạn thêm vào đoạn code sau:

bool
HelloCopy::OnAppInitializing(AppRegistry& appRegistry)
{
    // TODO:
    // Initialize UI resources and application specific data.
    // The application's permanent data and context can be obtained from the appRegistry.
    //
    // If this method is successful, return true; otherwise, return false.
    // If this method returns false, the application will be terminated.

    HelloCopyForm *pHelloCopyForm = new HelloCopyForm();
    pHelloCopyForm->Initialize();
    GetAppFrame()->GetFrame()->AddControl(*pHelloCopyForm);

    return true;
}

3.4. Bạn lưu lại những gì bạn vừa thay đổi rồi tiến hành Build và Run, bạn sẽ nhìn thấy, form của bạn đã được nạp lên khi ứng dụng của bạn thực thi.

3.5. Giờ bạn phải khai báo biến, viết sự kiện cho nút nhấn Copy, bạn làm như sau:

Bạn mở tập tin HelloCopy > inc > HelloCopyForm.h, tìm đến dòng 25 và thêm vào các dòng khai báo sau:

// Implementation
protected:
    static const int ID_COPY = 100;

Bạn mở tiếp tập tin HelloCopy > src > HelloCopyForm.cpp, tìm đến dòng 27 và thêm vào các dòng định nghĩa sau:

result
HelloCopyForm::OnInitializing(void)
{
    result r = E_SUCCESS;

    // TODO: Add your initialization code here

    Button *pButton = static_cast<Button *>(GetControl(L"IDC_BUTTON1"));
        if (pButton != NULL)
        {
            pButton->SetActionId(ID_COPY);
            pButton->AddActionEventListener(*this);
        }

    return r;
}

Bạn tìm đến dòng 56 và thêm vào các dòng định nghĩa sau:

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

{
    // TODO: Add your implementation code here

    switch(actionId)
    {
    case ID_COPY:
        {
            EditField *pEditField1
                    = static_cast<EditField *>(GetControl(L"IDC_EDITFIELD1"));
            EditField *pEditField2
                    = static_cast<EditField *>(GetControl(L"IDC_EDITFIELD2"));
            if (pEditField1 != NULL && pEditField2 != NULL)
            {
                pEditField2->SetText(pEditField1->GetText());
                RequestRedraw();
                AppLog("Copy Button is press! \n");
            }
        }
        break;
    }
}

4. Giờ thì bạn có thể chiêm ngưỡng thành quả của mình rồi. Bạn lưu mọi sự thay đổi vừa rồi của bạn. Tiến hành Build và Run để xem kết quả.

Bạn nhập vào dòng chữ tùy ý vào ô text1 (phía trên). Xong hãy nhấn vào nút Copy, bạn sẽ thấy kết quả:

Chúc bạn thành công!