Добавление подсказок к Web-страницам

Добавление подсказок к Web-страницам

Демонстрационный проект WebButton

Как и в приложениях, подсказки на Web-страницах могут быть очень полезны. Подсказки могут быть использованы в двух очевидных случаях: для картинок и элементов ActiveX. Я написал пример элемента "кнопка", чтобы продемонстрировать, как просто добавлять подсказки к элементам ActiveX. На рис.3 показаны и элемент ActiveX – кнопка с улыбающейся рожицей, и картинка – небольшое "художество" прямо под кнопкой.

Рис.3. Подсказки на Web-странице

Добавить подсказку к картинке проще простого, потому что эта функциональность встроена в язык HTML (см. рис.4). Эта строка:

<img src="Image.gif" height=48 width=48 alt="Image ToolTip" >

задает имя и размер картинки. Подстрока "Image ToolTip" и есть текст подсказки, которая появляется при подведении курсора мыши к картинке. Также возможно задать для картинки несколько "активных зон" (HotSpots) и определить несколько подсказок, но это выходит за рамки статьи. Я только хочу показать, насколько просто добавлять подсказки на языке HTML.

Рис.4. HTML-код для подсказки

<OBJECT ID="WebButton1" WIDTH=31 HEIGHT=28 CLASSID="CLSID:381C5023-2FDA-11D0-8BC1-444553540000">

 <PARAM NAME="_Version" VALUE="65536">

 <PARAM NAME="_ExtentX" VALUE="786">

 <PARAM NAME="_ExtentY" VALUE="731">

 <PARAM NAME="_StockProps" VALUE="0">

 <PARAM NAME="ToolTipText" VALUE="WebButton ToolTip Test">

 </OBJECT>

</P>

<br><img src="Image.gif" height=48 width=48 alt="Image ToolTip" >

<SCRIPT LANGUAGE="VBScript">

 <!-–

 Sub WebButton1_Click()

  MsgBox "WebButton was clicked"

 end sub

-->

</SCRIPT>

Элемент ActiveX представляет собой кнопку с подсказкой. Для чего мне возиться с созданием кнопки, когда можно добавить на Web-страницу трехмерную картинку, которая будет выглядеть как кнопка? На это есть две причины. Во-первых, кнопка выглядит реалистичнее – она нажимается и отжимается по щелчку пользователя, как и положено настоящей кнопке. Во-вторых, я хотел показать добавление подсказок к элементам ActiveX, а кнопка – это простейший элемент, который я мог использовать в демонстрационных целях.

Для генерации кода я использовал AppWizard. Я установил флажок "Activate when visible" и отключил все остальные флажки. В опции "Which window class, if any, should this control subclass?" я выбрал BUTTON. AppWizard генерирует массу дополнительного кода, не относящегося к данной статье. В основном, я остановлюсь на коде, добавленном мной в класс CWebButtonCtrl (см. рис.5). Давайте для начала взглянем на пару переменных класса. CWebButtonCtrl::m_bToolTipEnabled устанавливается в TRUE, если подсказки разрешены. В CWebButtonCtrl::m_strToolTipText хранится текст подсказки. Я добавил обе переменные через ClassWizard и они представляют OLE-свойства, автоматические обновляемые библиотекой MFC при их изменении.

Рис.5. CWebButtonCtrl

// WebButtonCtl.cpp : Implementation of the CWebButtonCtrl OLE control class.

/////////////////////////////////////////////////////////////////////////////

// CWebButtonCtrl::RelayToolTipEvent – Pass mouse messages to ToolTip

void CWebButtonCtrl::RelayToolTipEvent(const MSG* pMsg) {

 MSG MsgCopy;

 ::memcpy(&MsgCopy, pMsg, sizeof(MSG));

 FilterToolTipMessage(&MsgCopy);

}

int CWebButtonCtrl::OnToolHitTest(CPoint point, TOOLINFO* pTI) const {

 if (m_bToolTipEnabled && pTI != NULL && pTI->cbSize >= sizeof(TOOLINFO)) {

  // setup the TOOLINFO structure

  pTI->hwnd = m_hWnd;

  pTI->uId = 0;

  pTI->uFlags = 0;

  GetClientRect(&(pTI->rect));

  pTI->lpszText = LPSTR_TEXTCALLBACK;

 }

 return (m_bToolTipEnabled ? 1 : –1);

}

/////////////////////////////////////////////////////////////////////////////

// CWebButtonCtrl message handlers

int CWebButtonCtrl::OnCreate(LPCREATESTRUCT lpCreateStruct) {

 if (COleControl::OnCreate(lpCreateStruct) == –1) {

  return –1;

 }

 if (m_Bitmap.LoadBitmap(IDB_WEBBUTTON)) {

   SendMessage(BM_SETIMAGE, IMAGE_BITMAP, (LPARAM)m_Bitmap.GetSafeHandle());

 } else {

  TRACE("Unable to load bitmap for button.");

 }

 EnableToolTips(TRUE);

 return 0;

}

void CWebButtonCtrl::OnMouseMove(UINT nFlags, CPoint point) {

 RelayToolTipEvent(GetCurrentMessage());

 COleControl::OnMouseMove(nFlags, point);

}

void CWebButtonCtrl::OnLButtonDown(UINT nFlags, CPoint point) {

 RelayToolTipEvent(GetCurrentMessage());

 COleControl::OnLButtonDown(nFlags, point);

}

void CWebButtonCtrl::OnLButtonUp(UINT nFlags, CPoint point) {

 RelayToolTipEvent(GetCurrentMessage());

 COleControl::OnLButtonUp(nFlags, point);

}

BOOL CWebButtonCtrl::OnToolNeedText(UINT id, NMHDR * pNMHDR, LRESULT * pResult) {

TOOLTIPTEXT *pTTT = (TOOLTIPTEXT *)pNMHDR;

 ::strcpy(pTTT->szText, m_strToolTipText);

 return TRUE;

}

/////////////////////////////////////////////////////////////////////////////

// Property changed handlers

void CWebButtonCtrl::OnToolTipEnabledChanged() {

 SetModifiedFlag();

}

void CWebButtonCtrl::OnToolTipTextChanged() {

 SetModifiedFlag();

}

CWebButtonCtrl::PreCreateWindow манипулирует передаваемой ему структурой CREATESTRUCT. Я задал для кнопки стиль пользовательской отрисовки (owner-draw) – BS_OWNERDRAW – для того, чтобы не рисовалась рамка фокуса (focus rect) при активизации кнопки. В противном случае, рамка была бы все время видна. Как побочный эффект задания такого стиля приходится переопределять функцию CWebButtonCtrl::OnOcmDrawItem для рисования кнопки. CWebButtonCtrl::OnCreate загружает и устанавливает картинку для кнопки посылкой сообщения BM_SETIMAGE. Она также вызывает CWebButton::EnableToolTips, чтобы задействовать поддержку подсказок классом CWnd.

Функции CWebButtonCtrl::OnMouseMove, CWebButtonCtrl::OnLButtonDown, и CWebButtonCtrl::OnLButtonUp делают одно и то же – они все вызывают CWnd::RelayToolTipEvent. Метод CWebButtonCtrl::RelayToolTipEvent делает неконстантную копию переданного ему сообщения и вызывает CWnd::FilterToolTipMessage. Копия сообщения делается из-за того, что CWnd::FilterToolTipMessage требует неконстантного указателя на сообщение. Я мог бы, конечно, привести указатель к неконстантному, но это небезопасно, потому что в этом случае CWnd::FilterToolTipMessage могла бы изменить исходное сообщение. Обычно CWnd автоматически вызывает CWnd::FilterToolTipMessage в функции CWnd::PreTranslateMessage. Однако, в элементе ActiveX сообщения мыши никогда не попадают в CWnd::PreTranslateMessage, она вызывается только как результат клавиатурного ввода (CWnd::PreTranslateMessage в основном используется для работы с клавиатурными акселераторами). В обычном MFC-приложении CWnd::PreTranslateMessage вызывается в результате работы функции CWinThread::PumpMessage.

CWebButtonCtrl::OnToolHitTest вызывается функцией CWnd::FilterToolTipMessage, и я переопределил ее реализацию по умолчанию, чтобы заполнить передаваемую ей структуру TOOLINFO. Заполнение структуры происходит только в том случае, если для элемента разрешены подсказки. Подсказка (элемент ToolTip) будет показана на экране только при заполненных полях структуры TOOLINFO. Остальные проверки на NULL и размер структуры – избыточные проверки входных параметров на корректность. После заполнения структуры TOOLINFO функция устанавливает поле rect равным размеру клиентской части кнопки. Другими словами, вся кнопка задается как один инструмент. Полю lpszText присваивается значение LPSTR_CALLBACK, в результате чего элемент ToolTip посылает уведомление TTN_NEEDTEXT, чтобы получить текст подсказки. CWebButtonCtrl::OnToolNeedText обрабатывает это уведомление от элемента ToolTip, копируя строку из m_strToolTipText в поле szText переданной структуры TOOLTIPTEXT.

Как вы видите, эта реализации элемента управления ActiveX основывается на поддержке подсказок классом CWnd. Статья Q141871 базы знаний описывает еще один метод добавления подсказок к элементам ActiveX путем создания объекта класса CToolTipCtrl и вызовом его функций AddTool и UpdateTipText. Версия элемента ActiveX, использующего эту технику, прилагается вместе с исходным кодом (см. статью Q165577). В этом примере размер кода для обоих подходов практически одинаков. Так как далее используется второй вариант реализации подсказок, здесь я хочу полнее раскрыть детали поддержки подсказок классом CWnd.

Хочу предупредить вас об ограниченности моей реализации. Во-первых, проблемы появятся при изменении размеров элемента ActiveX. Размер инструмента не изменится. Эта проблема немного надумана, потому что вы вряд ли будете изменять размеры кнопки после загрузки Web-страницы. Во-вторых, реальному элементу ActiveX понадобится подписать код для создания сертификата аутентификации, иначе любой посетитель этой Web-страницы увидит окно с предупреждением. Наш демонстрационный элемент ActiveX неподписан. В третьих, в кнопку жестко зашита одна картинка. Настоящий элемент ActiveX должен уметь динамически менять картинки на кнопке.

Для добавления ActiveX-элемента на страницу я использовал ActiveX Control Pad, который доступен для бесплатного скачивания по адресу http://www.microsoft.com/workshop/author/cpad/cpad.htm. На рисунке 4 показан сгенерированный этой утилитой HTML-код. В этом коде определяются значения OBJECT ID, WIDTH, HEIGHT, и CLASSID. Также у элемента ActiveX имеется список параметров, или свойств. Параметр ToolTipText (имеющий значение "WebButton ToolTip Test") задает текст подсказки для нашей кнопки. Строка

<SCRIPT LANGUAGE="VBScript">

является началом короткой процедуры на языке VBScript, которую я написал для обработки нажатия на кнопку. При щелчке на кнопке появляется информационное окно с сообщением "WebButton was clicked".