Popup Example

Ở bài viết này, chúng tôi muốn đề cập đến bạn đọc làm thế nào để hiển thị một cửa sổ nổi trên ứng dụng của bạn. Trước đó, chúng tôi đã từng giới thiệu về MessageBox, một hộp thoại với các kiểu hiển thị quy định sẵn của bada. Giờ đây, bạn có thể tự định nghĩa cho riêng mình một hộp thoại tùy ý muốn nhờ vào điều khiển popup.

Popup có thể chứa đựng các điều khiển khác như: các nút nhấn (buttons), các nhãn (labels),… Popup luôn được hiển thị cao nhất và ở vị trí trung tâm của màn hình (modal).

Popup sử dụng phương thức Show() để hiển thị nó và các điều khiển con bên trong nó.

Tuy nhiên, popup không thể chứa các điều khiển như: Frames, MessageBoxs, Forms, OverlayPanels trong một popup.

Bạn sẽ nghi vấn giữa Popup và MessageBox, chúng có khác gì nhau không? có thể sử dụng MessageBox để thay thế cho Popup không? hoặc sử dụng ngược lại?

Thật sự là không! những ưu điểm của Popup mà chúng tôi đề cập trên chi là bề mặt bên trên mà thôi. Xét về bản chất bên dưới khi ứng dụng thực thi thì MessageBox và Popup hoàn toàn khác nhau:

- MessageBox luôn thể hiện tính đồng bộ (synchronous). Nghĩa là khi hộp thoại bật lên thì nó sẽ khóa tiểu trình  (thread) hiện tại cho đến khi nào hộp thoại đó tắt đi.  Với tính chất này mà MessageBox sẽ được sử dụng trong các trường hợp request – confirm

- Popup thể hiện tính không đồng bộ (asynchronous). Nghĩa là khi popup bật lên thì tiến trình của ứng dụng vẫn tiếp tục hoạt động.

Bạn phải chú ý rằng, nếu bạn muốn ẩn (hide) popup thì bạn phải gọi đến phương thức SetShowState(false) và Show()

Bỏ qua các lý thuyết trên, để dễ dàng hiểu về popup thì chúng ta cùng nhau thực hành một ví dụ cụ thể về popup như sau:

- Ứng dụng sẽ chứa một button: Open Popup – khi click vào nút nhấn này thì một popup sẽ được bật lên. Bên trên popup sẽ chứa một button: Close Popup – khi click vào nút nhấn này thì popup sẽ bị đóng lại.

Ví dụ:

Khi click vào nút nhấn:

Bạn tạo ra tập tin “PopupExampleForm.h” với nội dung như sau:

/*
 * PopupExampleForm.h
 *
 *  Created on: Jun 22, 2010
 *      Author: AWK
 */

#ifndef POPUPEXAMPLEFORM_H_
#define POPUPEXAMPLEFORM_H_

#include <FUi.h>

class PopupExampleForm :
    public Osp::Ui::Controls::Form,
    public Osp::Ui::IActionEventListener
{
public:
    PopupExampleForm(void);
    bool Initialize(void);
    void ShowPopup(void);
    void HidePopup(void);

protected:
    static const int ID_BUTTON_OPEN_POPUP 	= 101;
    static const int ID_BUTTON_CLOSE_POPUP 	= 102;

private:
    Osp::Ui::Controls::Popup* __pPopup;

public:
    virtual result OnInitializing(void);
    virtual result OnTerminating(void);
    virtual void OnActionPerformed(const Osp::Ui::Control& source, int actionId);
};

#endif /* POPUPEXAMPLEFORM_H_ */

Tiếp đến, bạn tạo tập tin “PopupExampleForm.cpp” với nội dung như sau:

/*
 * PopupExampleForm.cpp
 *
 *  Created on: Jun 22, 2010
 *      Author: AWK
 */

#include "PopupExampleForm.h"

using namespace Osp::Ui;
using namespace Osp::Ui::Controls;
using namespace Osp::Graphics;

PopupExampleForm::PopupExampleForm(void)
	:__pPopup(null)
{}

bool
PopupExampleForm::Initialize()
{
	result r = E_SUCCESS;
	r = Form::Construct(FORM_STYLE_NORMAL|FORM_STYLE_TITLE);
	SetName(L"PopupExampleForm");
	SetTitleText(L"Popup Example");
	return true;
}

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

    // Create a Popup
    __pPopup = new Popup();
    Dimension dim(300, 400);
    __pPopup->Construct(true, dim);
    __pPopup->SetTitleText(L"Popup Example");

    // Create a button to open the Popup.
    Button* pBtnOpen = new Button();
    pBtnOpen->Construct(Rectangle(125, 300, 250, 60), L"Open Popup");
    pBtnOpen->SetActionId(ID_BUTTON_OPEN_POPUP);
    pBtnOpen->AddActionEventListener(*this);
    AddControl(*pBtnOpen);

    // Create a button to close the Popup.
    Button* pBtnClose = new Button();
    pBtnClose->Construct(Rectangle(65, 210, 250, 60), L"Close Popup");
    pBtnClose->SetActionId(ID_BUTTON_CLOSE_POPUP);
    pBtnClose->AddActionEventListener(*this);
    __pPopup->AddControl(*pBtnClose);

    return r;
}

result
PopupExampleForm::OnTerminating(void)
{
    result r = E_SUCCESS;
    delete __pPopup;
    return r;
}

void
PopupExampleForm::ShowPopup(void)
{
    __pPopup->SetShowState(true);
    __pPopup->Show();
}

void
PopupExampleForm::HidePopup(void)
{
    __pPopup->SetShowState(false);
    Show();
}

void
PopupExampleForm::OnActionPerformed(const Osp::Ui::Control& source, int actionId)
{
    switch(actionId)
    {
    case ID_BUTTON_OPEN_POPUP:
        ShowPopup();
        break;
    case ID_BUTTON_CLOSE_POPUP:
        HidePopup();
        break;
    }
}

Giờ thì bạn có thể nhìn thấy được thành quả của mình trong những phút vừa qua rồi!

Chúc bạn thành công! hẹn gặp lại trong bài tiếp theo.