Встраивание возможностей броузера в приложение

Реализация возможностей перехода через акселераторы

Акселераторы (горячие клавиши) применяются для быстрого доступа к командам меню при нажатии комбинации назначенных клавиш. Мы для наших пунктов меню "Назад" и "Вперед" зарезервировали комбинации клавиш " Ctrl + B " и " Ctrl + F ". Реализуем эти комбинации. Наша задача - закрепить за выбранными комбинациями те же самые идентификаторы ID_NAVIGATE_BACK и ID_NAVIGATE_NEXT, которые мы назначали для соответствующих пунктов меню Navigate.

• Раскройте узел акселераторов Accelerator в дереве ресурсов панели Resource View и щелкните дважды по ресурсу IDR_MAINFRAME

  

  
  

  Откроется на редактирование таблица акселераторов. Мы видим, что каждый акселератор состоит из идентификатора ID и закрепленной за ним комбинации клавиш.

• Щелкните правой кнопкой мыши в любом месте таблицы акселераторов и в появившемся контекстном меню выполните команду New Accelerator

  

  
  

  Выбрав этот пункт, мы тем самым добавили новую строку в конец таблицы, где можно ввести параметры акселератора. Но в конце таблицы итак имеется пустая строка, готовая для заполнения, поэтому контекстное меню добавления можно и не вызывать.
• Введите значение ID_NAVIGATE_BACK в поле ID добавленной новой строки (или выберите из раскрывающегося в поле списка, поскольку раньше мы их вводили для пунктов меню), в качестве модификатора ( Modifier ) оставьте Ctrl, а в качестве клавиши ( Key ) введите латинскую B

• В следующую пустую строку в поле ID введите значение ID_NAVIGATE_NEXT (или выберите из раскрывающегося в поле списка), в качестве модификатора ( Modifier ) оставьте Ctrl, а в качестве клавиши ( Key ) введите F

  Теперь таблица акселераторов после внесенных изменений должна выглядеть так

  

  
  

• Вернитесь в редактор меню и проверьте, остались ли у идентификаторов пунктов те же значения ID_NAVIGATE_BACK и ID_NAVIGATE_NEXT. Если нет, то в раскрывающемся списке панели свойств Properties восстановите их вновь

  

  
  

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

Реализация возможностей перехода через кнопки панели управления

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

• Во вкладке Resource View вызовите на редактирование диалоговый ресурс панели управления
• Поместите на нее правее поля ввода адреса две кнопки Button из вкладки Toolbox

• Сделайте ширину кнопок примерно равной высоте ( Width=16, Height=15 )

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

  

  
  
• Настройте свойства кнопок в соответствии с таблицей

  Значения свойств кнопок перехода
  Кнопка	Свойство	Значение
  Левая	ID	ID_BUTTON_BACK
  	Caption	BACK
  	Prompt	Назад на предыдущую Web-страницу\nНазад
  	Owner Draw	True
  Правая	ID	ID_BUTTON_NEXT
  	Caption	NEXT
  	Prompt	Вперед на следующую Web-страницу\nВперед
  	Owner Draw	True

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

  Теперь нужно создать обработчики для кнопок. Кнопки находятся в классе CMainFrame и будут подавать сообщения BN_CLICKED при щелчках по ним. Принимать же и обрабатывать сообщения нужно в классе CWebBrowseView. Это точно такая же ситуация, как при создании пунктов меню, которые сами тоже находятся во фреймовом окне CMainFrame, а посылаемые ими команды перехватываются и обрабатываются в окне представления, поддерживаемого классом CWebBrowseView.
• Выполните правый щелчок мышью на левой кнопке панели управления и в появившемся контекстном меню выполните команду Add Event Handler...
  

  
  
• Настройте мастер добавления обработчиков, выделив в качестве целевого класс CWebBrowseView
  

  
  
• Нажмите кнопку Add and Edit и мастер создаст заготовку обработчика, которую заполните так

  Обработчик щелчка на левой кнопке ID_BUTTON_BACK
  void CWebBrowseView::OnBnClickedButtonBack()
  {
    // TODO: Add your control notification handler code here
    // Идти к предыдущей странице
    GoBack();
  }
• Повторите такие же шаги для создания заготовки обработчика щелчка на правой кнопке панели управления. Заготовку заполните следующим кодом

  Обработчик щелчка на правой кнопке ID_BUTTON_NEXT
  void CWebBrowseView::OnBnClickedButtonNext()
  {
    // TODO: Add your control notification handler code here
    // Перейти на следующую страницу вперед
    GoForward();
  }

  Перед тем как построить приложение после введенных кнопок, привяжитесь покрепче к стулу, на котором сидите.

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

  Исчезновение кнопок с панели управления произошло потому, что мы установили для них свойство Owner Draw в значение True. Тем самым мы определили, что кнопки должен рисовать их владелец ( Owner ), а о самом коде рисования внутри владельца мы пока не позаботились. Владельцем (родителем) кнопок, в данном случае, является панель управления m_wndDlgBar как экземпляр класса CDialogBar, объявленная в файле MainFrm.h.
• Измените свойство Owner Draw на значение False и снова постройте приложение

Кнопки появились и ведут себя как и положено, обеспечивая переходы броузера, но невмещающиеся внутри них надписи портят всю картину

Заменим традиционные текстовые надписи внутри кнопок на содержательные рисунки. Для этого нужно подготовить нужные картинки в формате Bitmap, добавить в них немного соли, густо поперчить и подавать горячими. Студент Жук - разрешаю Вам передохнуть, а остальные и примкнувший к ним Панасюк - продолжайте. До Силиконовой долины или Редмонда осталось совсем немного (почти как до психушки).

Присоединяемые к кнопкам картинки будут состоять из стрелок и должны быть одинакового размера. Иначе в разных состояниях они начнут скакать по экрану. Одна картинка будет изображать стрелку влево, другая - стрелку вправо. Мы установили для левой кнопки свойство Caption в значение BACK, а для правой - NEXT. В дальнейшем мы воспользуемся этими именами для привязки изображений.

Каждая картинка будет состоять из двух экземпляров, представлющих изображение кнопки для двух состояний:

1. кнопка нажата - Down (экземпляры BACKD и NEXTD )
2. кнопка отпущена - Up (экземпляры BACKU и NEXTU )

(Можно еще: кнопка получила фокус ввода - Focus (экземпляры BACKF и NEXTF кнопка не получила фокус ввода - экземпляры BACKX и NEXTX )

Картинки в файл ресурсов можно добавить готовыми ( Import ), а можно нарисовать средствами встроенного в оболочку графического редактора ( New ). В любом случае размер картинок должен примерно соответствовать размеру кнопок. Ранее мы определили размеры кнопок примерно такими ( Width=16, Height=15 ). Значит и картинки нужно выполнить такого же размера. Хотя при загрузке картинок в кнопки их размеры автоматически подстроятся под размеры картинок. Но нам важно, чтобы кнопки не вышли по размерам за пределы панели управления. Итак, создаем картинки для кнопок.

• Щелкните правой кнопкой мыши в любом месте панели Resource View и выполните в появившемся контекстном меню команду Add Resource
• Установите категорию ресурса Bitmap и щелкните по кнопке New (можете поискать готовый bmp-файл, щелкнув по кнопке Import )
  

  
  
• В открывшемся графическом редакторе щелкните правой кнопкой мыши рядом с полем рисования и через панель Properties установите свойства заготовки как показано на рисунке
  

  
  
• Сохраните ресурс, щелкнув по вкладке правой кнопкой мыши
  

  
  
• Нарисуйте стрелку влево, при этом для рисования активно используйте панель инструментов Image Editor
  

  
  

Панель Colors обеспечивает настройку инструментов рисования как цветовую пару с текущим значением для левой (передний цвет пары) и правой (задний цвет пары) кнопок мыши. Цветовая пара текущего цвета выбирается в панели Colors щелчками по образцам соответствующими кнопками мыши. Количество доступных цветовых образцов устанавливается в панели Properties. Дополнительные возможности графического редактора заложены в меню Image оболочки.

Сам графический редактор представлен двумя фреймами. В правом фрейме масштаб поля рисования можно менять через инструмент "Увеличительное стекло"

В левом фрейме рисунок представлен в натуральную величину.

• Вновь сохраните готовый рисунок стрелки влево в файле ресурсов. Убедитесь, что в проект добавился соответствующий ресурс

  Сейчас создадим рисунок для стрелки вправо, используя уже созданное изображение стрелки влево.
• Закройте окно графического редактора, войдите в панель Resource View и вызовите для ресурса IDB_BITMAP_BACK контекстное меню
  

  
  
• Выполните команду Copy, затем Paste для ресурса и сразу же (без сохранения проекта) измените свойства копии как показано на рисунке
  

  
  
• Сохраните проект и убедитесь, что в панели Solution Explorer появился файл ArrowRight.bmp

• Вызовите на редактирование ресурс IDB_BITMAP_NEXT и выполните для него две команды поворота, чтобы развернуть стрелку в противоположную сторону

  

  
  

  Должен получиться такой результат

  

  
  
• В панели Resource View выделите сразу два ресурса картинок и и создайте для них копии. Измените свойства каждой копии как показано на рисунке
• Сохраните проект и убедитесь, что у нас теперь есть по две картинки для каждой кнопки
  

  
  
• Вызовите на редактирование две последних картинки с идентификаторами IDB_BITMAP_BACK_INV и IDB_BITMAP_NEXT_INV и для каждой из них выполните команду инверсии цвета через меню Image оболочки
  

  
  
• Теперь переназначьте каждой картинке значение свойства ID как показано в таблице

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

Новые значения свойства ID для картинок кнопок
Старый ID	Bitmap	Новый ID	Назначение
IDB_BITMAP_BACK		" BACKU "	Картинка для левой кнопки в отпущенном состоянии. Свойству Caption самой левой кнопки мы ранее присвоили значение BACK
IDB_BITMAP_BACK_INV		" BACKD "	Картинка для левой кнопки в нажатом состоянии. Свойству Caption самой левой кнопки мы ранее присвоили значение BACK
IDB_BITMAP_NEXT		" NEXTU "	Картинка для правой кнопки в отпущенном состоянии. Свойству Caption самой правой кнопки мы ранее присвоили значение NEXT
IDB_BITMAP_NEXT_INV		" NEXTD "	Картинка для правой кнопки в нажатом состоянии. Свойству Caption самой правой кнопки мы ранее присвоили значение NEXT

Иными словами, если на кнопке текст BACK, то мы для нее создаем два растра с идентификаторами " BACKU " и " BACKD " - соответственно для отжатого и нажатого состояния. Для другой кнопки - то же самое. Этот прием обеспечит нормальную работу картинок на кнопках. Теперь панель ресурсов должна выглядеть так

Теперь осталось немного для завершения работы с кнопками: создать два экземпляра класса CBitmapButton и обеспечить с их помощью динамическую загрузку изображений в кнопки и управление ими.

• Откройте через панель Solution Explorer файл MainFrm.h с описанием класса фреймового окна и внесите в конец класса следующий код

  Объявление поддерживающих объектов в файле MainFrm.h
  class CMainFrame : public CFrameWnd
  {
    
  protected: // create from serialization only
    CMainFrame();
    DECLARE_DYNCREATE(CMainFrame)
    
  // Attributes
  public:
    
  // Operations
  public:
    
  // Overrides
  public:
    virtual BOOL PreCreateWindow(CREATESTRUCT& cs);
    
  // Implementation
  public:
    virtual ~CMainFrame();
  #ifdef _DEBUG
    virtual void AssertValid() const;
    virtual void Dump(CDumpContext& dc) const;
  #endif
    
  protected:  // control bar embedded members
    CStatusBar  m_wndStatusBar;
    CToolBar    m_wndToolBar;
    CReBar      m_wndReBar;
    CDialogBar      m_wndDlgBar;
    
  // Generated message map functions
  protected:
    afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
    DECLARE_MESSAGE_MAP()
  public:
    // Функция передачи адреса URL
    void OnNewAddress(void);
    // Заполнение поля адреса текущим значением URL
    void SetAddress(LPCTSTR lpszURL);
  private:
    CBitmapButton m_Back, m_Next;
  };
• Откройте файл MainFrm.cpp, найдите в нем функцию OnCreate() и вставьте в конце код загрузки ресурсов в кнопки

  Код загрузки картинок в кнопки
  int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
  {
  .....................................................
    // TODO: Remove this if you don't want tool tips
    m_wndToolBar.SetBarStyle(m_wndToolBar.GetBarStyle() |
      CBRS_TOOLTIPS | CBRS_FLYBY);
    
    m_Back.AutoLoad(ID_BUTTON_BACK, &m_wndDlgBar);
    m_Next.AutoLoad(ID_BUTTON_NEXT, &m_wndDlgBar);
    
    return 0;
  }
• Не забудьте установить свойство Owner Draw кнопок в значение True
• Постройте проект и убедитесь, что изображения кнопок меняются, сами кнопки функционируют правильно и посылают сообщения классу CWebBrowseView, а обработчики для кнопок в файле WebBrowseView.cpp мы построили ранее

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