Какие управляющие элементы могут содержаться в диалоговых окнах

Диалоговое окно (англ. dialog box) в графическом пользовательском интерфейсе — специальный элемент интерфейса, окно, предназначенное для вывода информации и (или) получения ответа от пользователя. Получил своё название потому, что осуществляет двустороннее взаимодействие компьютер-пользователь («диалог»): сообщая пользователю что-то и ожидая от него ответа.

Диалоговые окна подразделяются на модальные и немодальные, в зависимости от того, блокируют ли они возможность взаимодействия пользователя с приложением (или системой в целом) до тех пор, пока не получат от него ответ.

Простейшим типом диалогового окна является окно сообщения (англ. message box, англ. alert box), которое выводит сообщение и требует от пользователя подтвердить, что сообщение прочитано. Для этого обычно необходимо нажать кнопку OK. Окно сообщения предназначено для информирования пользователя о завершении выполнявшегося действия, вывода сообщения об ошибке и тому подобных случаев, не требующих от пользователя какого-либо выбора.

Несмотря на то, что использование окна сообщения является часто применяемым шаблоном проектирования, оно критикуется экспертами по юзабилити как неэффективное решение для поставленной задачи (защита от ошибочных действий пользователя)[1], вдобавок, при наличии лучших альтернатив[2].

Кнопки[править | править код]

В диалоговых окнах многих программ присутствуют кнопки OK и Отмена (Cancel), нажимая первую из которых, пользователь выражает своё согласие с тем, что в этот момент отображает диалоговое окно, и тем самым закрывает его, приводя в действие сделанные в нём изменения, а вторая — закрывает окно без применения. Существуют варианты с единственной кнопкой ОК — в информирующих окнах, не подразумевающих каких-либо изменений, и с кнопками ОК, Применить (Apply) и Закрыть (Close), в окнах, результаты изменений в которых пользователь, по мнению автора программы, может оценить, не закрывая окна, и в случае неудовлетворительного результата продолжить внесение изменений.

Также хорошим тоном считается обеспечить в диалоговых окнах справочную систему — обычно это реализуется либо в виде кнопки Справка (Help), открывающей страницу документации, описывающую работу в этом диалоговом окне, либо (в Windows) с помощью кнопки со знаком вопрос в заголовке окна, нажав на которую, пользователь переключает мышь в режим одноразовой контекстной подсказки: нажатие мышью в этом режиме на элемент диалогового окна вызывает отображение описания этого элемента.

Немодальные диалоговые окна[править | править код]

Немодальные (англ. modeless) диалоговые окна используются в случаях, когда выводимая в окне информация не является существенной для дальнейшей работы системы. Поэтому окно может оставаться открытым, в то время как работа пользователя с системой продолжается. Разновидностью немодального окна является панель инструментов или окно-«палитра», если она отсоединена или может быть отсоединена от главного окна приложения, так как элементы управления, расположенные на ней, могут использоваться параллельно с работой приложения. Впрочем, такие окна редко называют «диалоговыми».

В общем случае, правила хорошего программного дизайна предлагают использовать именно этот тип диалоговых окон, так как он не принуждает пользователя к определённой (возможно, не очевидной для него) последовательности действий. Примером может быть диалоговое окно для изменения каких-либо свойств текущего документа, например, цвета фона или текста. Пользователь может вводить текст, не обращая внимания на его цвет. Но в любой момент может изменить цвет, используя диалоговое окно. (Приведённый пример не обязательно является лучшим решением. Такую же функциональность может обеспечить и панель инструментов, расположенная в главном окне.)

Модальные на уровне приложения[править | править код]

Модальным называется окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет. Диалоговые окна преимущественно реализованы модальными.

Например, модальными являются диалоговые окна настроек приложения — так как проще реализовать режим, когда все сделанные изменения настроек применяются или отменяются одномоментно, и с момента, когда пользователь решил изменить настройки приложения и открыл диалог настроек, и до момента, когда он новые настройки вводит в силу или отказывается от них, приложение ожидает решения пользователя.

Отображение окон в модальном режиме практикуется и в других случаях, когда приложению для продолжения начатой работы требуется дополнительная информация, либо просто подтверждение от пользователя на согласие выполнить запрошенную последовательность действий, если она потенциально опасна.

Специалисты по юзабилити считают модальные окна запросов подтверждений плохими дизайнерскими решениями, так как они могут приводить пользователя к, так называемым, «ошибкам режима программы». Опасные действия должны иметь возможность отмены везде, где это возможно, а модальные окна запросов подтверждений, пугающие пользователя своим неожиданным появлением, через некоторое время пропускаются им автоматически (так как он привык к ним) и, поэтому, не защищают от опасных действий[3].

Модальные на уровне окна[править | править код]

Для смягчения недостатков модальных диалоговых окон (блокирование доступа к приложению, или, даже, к системе в целом) была предложена концепция модальности на уровне окна (или документа). Такой тип диалогового окна введён, например, в Mac OS X, где он называется «диалоговое модальное окно для документа» (англ. document modal sheet).

При появлении диалогового окна подобного типа работа с остальными окнами приложения не блокируется. Поскольку окно диалога не перекрывает родительское окно, а прикрепляется к нему, остаётся возможность изменять размеры и положение и самого родительского окна. При этом, естественно, содержимое родительского окна остаётся недоступным до закрытия модального диалогового окна.

Примечания[править | править код]

Ссылки[править | править код]

• Руководство по диалоговым элементам управления — MSDN
• Dialogs — OS X Human Interface Guidelines

   
На этом шаге мы рассмотрим создание и использование управляющих элементов.

// Буфер обмена диалогового окна.
struct
{
char edit[81];
BOOL radio1;
BOOL radio2;
BOOL radio3;
TScrollBarData scrollerData;
BOOL check1;
BOOL check2;
BOOL check3;
TListBoxData listBoxData;
TComboBoxData comboBoxData;
} transBuf;

// Класс приложения.
class TApp: public TApplication
{
public:
TApp():TApplication() {}
void InitMainWindow();
};

// Класс главного окна.
class TWndw : public TFrameWindow
{
public:
TWndw (TWindow *parent, const char far *title);
protected:
void Paint(TDC&, BOOL, TRect&);
void CmDialog();

DECLARE_RESPONSE_TABLE(TWndw);
};

DEFINE_RESPONSE_TABLE1 (TWndw, TFrameWindow)
EV_COMMAND (CM_DIALOG, CmDialog),
END_RESPONSE_TABLE;

// Класс диалогового окна.
class TDlg : public TDialog
{
public:
TDlg(TWindow *parent, TResId resId);
};

// TWndw::TWndw()
// Это конструктор главного окна.
TWndw::TWndw(TWindow *parent, const char far *title):
TFrameWindow (parent, title)
{
// Определить расположение и размеры окна.
Attr.X = 20;
Attr.Y = 20;
Attr.W = 500;
Attr.H = 300;
// Добавить меню к окну.
AssignMenu(MENU_1);
// Инициализировать буфер обмена.
strcpy(transBuf.edit, «Default»);
transBuf.radio1 = TRUE;
transBuf.radio2 = FALSE;
transBuf.radio3 = FALSE;
transBuf.check1 = TRUE;
transBuf.check2 = FALSE;
transBuf.check3 = FALSE;
transBuf.scrollerData.HighValue = 100;
transBuf.scrollerData.LowValue = 0;
transBuf.scrollerData.Position = 50;
transBuf.listBoxData.AddString(«ListString1», TRUE) ;
transBuf.listBoxData.AddString(«Liststring2»);
transBuf.listBoxData.AddString(«ListString3»);
transBuf.listBoxData.AddString(«ListString4»);
transBuf.listBoxData.AddString(«ListString5»);
transBuf.listBoxData.AddString(«ListString6»);
transBuf.comboBoxData.AddString(«ComboString1», TRUE);
transBuf.comboBoxData.AddString(«ComboString2»);
transBuf.comboBoxData.AddString(«ComboString3»);
transBuf.comboBoxData.AddString(«ComboString4»);
transBuf.comboBoxData.AddString(«ComboString5»);
transBuf.comboBoxData.AddString(«ComboString6»);
}

// TWndw::CmDialog()
// Эта функция реагирует на команду Test Dialog из
// меню Dialog, отображая и управляя диалоговым окном.
void TWndw::CmDialog()
{
// Создать диалоговое окно.
TDialog *dialog = new TDlg(this, DIALOG_1);
// Отобразить диалоговое окно.
int result = dialog->Execute();
// Проверить, вышел ли пользователь из
// диалогового окна по кнопке OK и
// отобразить новые данные диалогового окна, если это так.
if (result == IDOK) Invalidate();
}

// TWndw::Paint()
// Эта функция, которая реагирует на сообщение
// WM_PAINT, вызывается каждый раз, когда
// окно должно быть пперерисовано.
void TWndw::Paint(TDC &paintDC, BOOL, TRect&)
{
TEXTMETRIC textMetrics;
int num;
char s[40];
// Получить текущие параметры текста.
paintDC.GetTextMetrics(textMetrics);
// Установить выравнивание вправо выводимого текста.
paintDC.SetTextAlign(TA_RIGHT);
// Определить размер самой длинной метки.
TSize size = paintDC.GetTextExtent(«EDIT CONTROL:», 13);
// Напечатать все метки в рабочей области окна.
paintDC.TextOut(size.cx + 12, textMetrics.tmHeight, «EDIT CONTROL:»);
paintDC.TextOut(size.cx + 12, textMetrics.tmHeight*2, «RADIO BUTTON:»);
paintDC.TextOut(size.cx + 12, textMetrics.tmHeight*3, «SCROLL BAR:»);
paintDC.TextOut(size.cx + 12, textMetrics.tmHeight*4, «CHECK BOX 1:»);
paintDC.TextOut(size.cx + 12, textMetrics.tmHeight*5, «CHECK BOX 2:»);
paintDC.TextOut(size.cx + 12, textMetrics.tmHeight*6, «CHECK BOX 3:»);
paintDC.TextOut(size.cx + 12, textMetrics.tmHeight*7, «LIST BOX:»);
paintDC.TextOut(size.cx + 12, textMetrics.tmHeight*8, «COMBO BOX;»);
// Установить выравнивание влево выводимого текста.
paintDC.SetTextAlign(TA_LEFT);
// Установить цвет текста.
paintDC.SetTextColor(TColor::LtBlue);
// Напечатать данные диалогового окна в
// соответствующих позициях, основываясь на
// длине самой длинной метки и высоте текущего шрифта.
paintDC.TextOut(size.cx + 20, textMetrics.tmHeight, transBuf.edit);
if (transBuf.radio1) num = 1;
else if (transBuf.radio2) num = 2;
else num = 3;
wsprintf(s, «Radio button #%d chosen», num);
paintDC.TextOut(size.cx + 20, textMetrics.tmHeight*2, s);
wsprintf(s, «%d», transBuf.scrollerData.Position);
paintDC.TextOut(size.cx + 20, textMetrics.tmHeight*3, s);
if (transBuf.check1) strcpy (s, «Chosen»);
else strcpy(s, «Not chosen»);
paintDC.TextOut(size.cx + 20, textMetrics.tmHeight*4, s);
if (transBuf.check2) strcpy(s, «Chosen»);
else strcpy(s, «Not chosen»);
paintDC.TextOut(size.cx + 20, textMetrics.tmHeight*5, s);
if (transBuf.check3) strcpy(s, «Chosen»);
else strcpy(s, «Not chosen»);
paintDC.TextOut(size.cx + 20, textMetrics.tmHeight*6, s);
transBuf.listBoxData.GetSelString(s, sizeof(s));
paintDC.TextOut(size.cx + 20, textMetrics.tmHeight*7, s);
transBuf.comboBoxData.GetSelString(s, sizeof(s));
paintDC.TextOut(size.cx + 20, textMetrics.tmHeight*8, s);
}

//**************************************
// Реализация класса TDlg.
//**************************************
// TDlg::TDlg()
// Это конструктор диалогового окна.
TDlg::TDlg(TWindow *parent, TResId resId): TDialog (parent, resId)
{
// Построить OWL-объекты для управляющих элементов
// в диалоговом окне. Механизм передачи работает
// правильно, если управляющие элементы OWL строятся
// в таком же порядке, в каком они появляются
// в структуре буфера обмена transBuf.
new TEdit (this, ID_EDIT, sizeof(transBuf.edit));
new TRadioButton (this, ID_RADIO1, 0);
new TRadioButton (this, ID_RADIO2, 0);
new TRadioButton (this, ID_RADIO3, 0);
new TScrollBar (this, ID_SCROLLER);
new TCheckBox (this, ID_CHECK1);
new TCheckBox (this, ID_CHECK2);
new TCheckBox (this, ID_CHECK3);
new TListBox (this, ID_LISTBOX);
new TComboBox (this, ID_COMBOBOX, 20);
// Установить адрес буфера обмена.
TransferBuffer = &transBuf;
}

void TApp::InitMainWindow()
{
TFrameWindow *wndw = new TWndw (0,»Управляющие элементы»);
SetMainWindow(wndw);
}

int OwlMain(int,char *[])
{
return TApp().Run();
}

#include <owlwindow.rh>

#define MENU_1 100
#define DIALOG_1 200
#define CM_DIALOG 201
#define ID_EDIT 101
#define ID_RADIO1 102
#define ID_RADIO2 103
#define ID_RADIO3 104
#define ID_SCROLLER 105
#define ID_CHECK1 106
#define ID_CHECK2 107
#define ID_CHECK3 108
#define ID_LISTBOX 109
#define ID_COMBOBOX 110

#ifdef RC_INVOKED

MENU_1 MENU
{
POPUP «&File»
{
MENUITEM «E&xit», CM_EXIT
}
POPUP «&Dialog»
{
MENUITEM «&Test Dialog…», CM_DIALOG
}
}

DIALOG_1 DIALOG 9, 17, 296, 135
STYLE WS_POPUP | WS_VISIBLE | WS_CLIPSIBLINGS |
WS_CAPTION | WS_SYSMENU | WS_THICKFRAME
CAPTION «Control Dialog»
{
EDITTEXT ID_EDIT, 14, 18, 51, 12,
ES_AUTOHSCROLL | WS_BORDER | WS_TABSTOP
CONTROL «R1», ID_RADIO1, «BUTTON», BS_AUTORADIOBUTTON |
WS_TABSTOP, 91, 19, 20, 10
CONTROL «R2», ID_RADIO2, «BUTTON», BS_AUTORADIOBUTTON |
WS_TABSTOP, 115, 19, 20, 10
CONTROL «R3», ID_RADIO3, «BUTTON», BS_AUTORADIOBUTTON |
WS_TABSTOP, 141, 19, 20, 10
SCROLLBAR ID_SCROLLER, 184, 20, 101, 12, SBS_HORZ
CHECKBOX «Check1», ID_CHECK1, 20, 53, 35, 12,
BS_AUTOCHECKBOX | WS_TABSTOP
CHECKBOX «Check2», ID_CHECK2, 20, 65, 36, 12,
BS_AUTOCHECKBOX | WS_TABSTOP
CHECKBOX «Check3», ID_CHECK3, 20, 77, 37, 12,
BS_AUTOCHECKBOX | WS_TABSTOP
LISTBOX ID_LISTBOX, 85, 53, 84, 37, LBS_NOTIFY |
LBS_DISABLENOSCROLL | WS_BORDER | WS_VSCROLL
COMBOBOX ID_COMBOBOX, 184, 53, 86, 49,
CBS_DROPDOWNLIST | WS_VSCROLL | WS_TABSTOP
PUSHBUTTON «OK», 1, 172, 108, 50, 14
PUSHBUTTON «Cancel», 2, 233, 108, 50, 14
LTEXT «Edit:», -1, 16, 6, 16, 8, NOT WS_GROUP
GROUPBOX «Radio Buttons», -1, 87, 6, 80, 26,
BS_GROUPBOX | WS_GROUP
LTEXT «Scroll Bar», -1, 186, 7, 42, 10
GROUPBOX «Check Boxes», -1, 14, 37, 54, 62, BS_GROUPBOX
LTEXT «List Box», -1, 86, 39, 36, 10
LTEXT «Combo Box», -1, 185, 40, 48, 10
}

#endif