Контекстно-залежна допомога для веб-сторінки в 2

Written on 19 Грудня 2008 . Posted in ASP.NET

На додаток до цих двох недоліків система контекстно-залежної допомоги може бути не настільки практичною для нас, розробників сторінки. Весь скрипт та елементи

У цій статті ми побачимо, як можна покращити елементарну контекстно-залежну допомогу, позбавивши її перелічених вище недоліків і створивши клас ASP.NET 2.0 з методами для того, щоб програмно додати вікно допомоги та необхідні скрипти для заданої області. Читайте далі, щоб дізнатися більше про це!

Здійснюємо затримку перед відкриттям та закриттям вікна допомоги

При наведенні покажчика на елемент інтерфейсу користувача, що володіє підказкою, на веб-сторінці або програмі Windows підказка з'являється не відразу, а через деякий час. Система контекстно-залежної допомоги в деяких випадках миттєво показує вікно допомоги після того, як покажчик був лише наведений на область. Ця швидкість може завдавати незручності користувачеві, якщо він переміщає покажчик по всьому екрану. Навіть якщо користувачу не було жодної необхідності бачити цю підказку, переміщення вказівника по екрану може спричинити появу вікна допомоги. У той же час ці вікна миттєво зникають у випадку, якщо користувач вийде за межі області, ну а миготіння вікна саме по собі може бути дуже дратівливим.

Щоб виправити це, ми можемо запровадити деяку затримку до того, як відобразимо вікно. Тобто, коли користувач наведе покажчик на область, що викликає вікно допомоги, замість моментально відобразити вікно, ми почекаємо півсекунди (або скільки ви забажаєте) і потім покажемо вікно допомоги. Якщо за ті півсекунди покажчик встиг опинитися за межами області,ми не відобразимо вікно допомоги.

Щоб досягти цього ефекту, я розділив csi_showHelpFloatWindow - який відображає певне вікно допомоги - на дві функції:

  • csi_showHelpFloatWindow - приймає той же набір параметрів, що і у вихідному варіанті, а також ще один параметр - waitDurationInMilliseconds. Параметр waitDurationInMilliseconds вказує кількість мілісекунд затримки. Ця функція викликає csi_showHelpFloatWindowInternal за допомогою функції setTimeout.
  • csi_showHelpFloatWindowInternal - виконує всю роботу з відображення вікна допомоги.

На додаток нам необхідна змінна прапора, яка вказує на те, чи потрібно відмінити відкриття вікна чи ні. Наприклад, якщо користувач наведе покажчик на область допомоги, то викликається csi_showHelpFloatWindow, і функція setTimeout вказує, що функція csi_showHelpFloatWindowInternal буде викликана після 500 мілісекунд, наприклад (півсекунди). Якщо користувач переміщає вказівник за межі області до того, як мине цей час, ми не відобразимо вікно. Тим не менш, функція csi_showHelpFloatWindowInternal все ж буде викликана - немає ніякого способу скасувати її, ґрунтуючись на рухах курсору.

Коли користувач наводить вказівник на область допомоги, нам необхідно встановити прапорець (csi_cancelOpenArray[windowID]) у true. Це досягається шляхом оновлення функції csi_hideHelpFloatWindow (яка, якщо ви пам'ятаєте, викликається з події наобсязі області допомоги).

  • csi_hideHelpFloatWindow - приймає додатковий вхідний параметр waitDurationInMilliseconds, який вказує кількість мілісекунд паузи між виходом з області вікна та закриттям самого вікна. Ця функція викликає csi_hideHelpFloatWindowInternal за допомогою функції setTimeout.
  • csi_hideHelpFloatWindowInternal - виконує всю роботу приховування вікна допомоги.

Додаємо програмно контекстно-залежну допомогу

Існує кілька завдань клієнтської сторони, які нам необхідно виконати для того, щоб зв'язати вікно допомоги з конкретною областю, включаючи:

Для того, щоб реалізувати це, я створив клас, названий ContextSensitiveHelp, який містить методи щодо контекстно-залежної допомоги. ContextSensitiveHelp успадковується від класу System.Web.UI.Page. Щоб використовувати ці методи на ASP.NET-сторінці, налаштуйте клас code-behind своєї ASP.NET-сторінки таким чином, щоб вона успадковувалася від ContextSensitiveHelp, а не від System.Web.UI.Page.

Клас ContextSensitiveHelp містить єдиний метод, доступний з рівня сторінки - AddContextSensitiveHelp, який неодноразово перевантажений. Ви повинні передати цей метод як мінімум:

  • елементу управління, який служить як область допомоги (наприклад, елемент Label або Image),
  • windowID (довільний рядок використовується для визначення вікна допомоги, яке буде відкрите або закрите), та
  • вказівнику ресурсу (URL) веб-сторінки допомоги, яка буде відображена у вікні допомоги

Наприклад, щоб зв'язати вікно допомоги з елементом управління Label, названим WelcomeLabel, ви можете додати наступний рядок коду в обробник події Page_Load:

Щоб випробувати клас ContextSensitiveHelp у дії, завантажте програму доступну в кінці цієї статті.