Пример "Fancy Browser"
Файлы:
Пример "Fancy Browser" показывает, как использовать jQuery с QtWebKit для создания веб-браузера со специальными эффектами и управлением содержимым.
Приложение применяет QWebFrame::evaluateJavaScript для выполнения JavaScript-кода jQuery. QMainWindow с QWebView в качестве центрального образует браузер.
Определение класса MainWindow
Класс MainWindow унаследован от QMainWindow. Реализует несколько слотов для выполнения действий в приложении и веб-содержимом.
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow();
protected slots:
void adjustLocation();
void changeLocation();
void adjustTitle();
void setProgress(int p);
void finishLoading(bool);
void highlightAllLinks();
void rotateImages(bool invert);
void removeGifImages();
void removeInlineFrames();
void removeObjectElements();
void removeEmbeddedElements();
private:
QString jQuery;
QWebView *view;
QLineEdit *locationEdit;
QAction *rotateAction;
int progress;
Также объявляется QString, который содержит jQuery, QWebView, который отображает веб-содержимое, и QLineEdit, который действует как панель адреса.
Реализация класса MainWindow
Начинаем реализовывать конструкцию.
MainWindow::MainWindow()
{
progress = 0;
QFile file;
file.setFileName(":/jquery.min.js");
file.open(QIODevice::ReadOnly);
jQuery = file.readAll();
file.close();
В первой части конструктора устанавливается значение progress равной 0. Это значение будет использовано позже в коде для визуализации загрузки веб-страницы.
Далее, используя QFile и читая содержимое файла, загружается библиотека jQuery. Библиотека jQuery - библиотека JavaScript, которая предоставляет различные функции для манипулирования HTML.
view = new QWebView(this);
view->load(QUrl("http:
connect(view, SIGNAL(loadFinished(bool)), SLOT(adjustLocation()));
connect(view, SIGNAL(titleChanged(QString)), SLOT(adjustTitle()));
connect(view, SIGNAL(loadProgress(int)), SLOT(setProgress(int)));
connect(view, SIGNAL(loadFinished(bool)), SLOT(finishLoading(bool)));
locationEdit = new QLineEdit(this);
locationEdit->setSizePolicy(QSizePolicy::Expanding, locationEdit->sizePolicy().verticalPolicy());
connect(locationEdit, SIGNAL(returnPressed()), SLOT(changeLocation()));
QToolBar *toolBar = addToolBar(tr("Navigation"));
toolBar->addAction(view->pageAction(QWebPage::Back));
toolBar->addAction(view->pageAction(QWebPage::Forward));
toolBar->addAction(view->pageAction(QWebPage::Reload));
toolBar->addAction(view->pageAction(QWebPage::Stop));
toolBar->addWidget(locationEdit);
Во второй части создаётся QWebView, а слоты соединяются с сигналами представлений. Кроме того, мы создаём QLineEdit в качестве панели адреса. Затем устанавливаем горизонтальную QSizePolicy для заполнения всей доступной области браузера. Добавляем QLineEdit в QToolbar вместе с действиями навигации из QWebView::pageAction.
QMenu *effectMenu = menuBar()->addMenu(tr("&Effect"));
effectMenu->addAction("Highlight all links", this, SLOT(highlightAllLinks()));
rotateAction = new QAction(this);
rotateAction->setIcon(style()->standardIcon(QStyle::SP_FileDialogDetailedView));
rotateAction->setCheckable(true);
rotateAction->setText(tr("Turn images upside down"));
connect(rotateAction, SIGNAL(toggled(bool)), this, SLOT(rotateImages(bool)));
effectMenu->addAction(rotateAction);
QMenu *toolsMenu = menuBar()->addMenu(tr("&Tools"));
toolsMenu->addAction(tr("Remove GIF images"), this, SLOT(removeGifImages()));
toolsMenu->addAction(tr("Remove all inline frames"), this, SLOT(removeInlineFrames()));
toolsMenu->addAction(tr("Remove all object elements"), this, SLOT(removeObjectElements()));
toolsMenu->addAction(tr("Remove all embedded elements"), this, SLOT(removeEmbeddedElements()));
setCentralWidget(view);
setUnifiedTitleAndToolBarOnMac(true);
}
В третьей и последней части конструктора реализуем два меню QMenu и устанавливаем для них набор действий. Последняя строка устанавливает QWebView в качестве центрального виджета в QMainWindow.
void MainWindow::adjustLocation()
{
locationEdit->setText(view->url().toString());
}
void MainWindow::changeLocation()
{
QUrl url = QUrl(locationEdit->text());
view->load(url);
view->setFocus();
}
После загрузки страницы adjustLocation() обновляет панель адреса; adjustLocation() переключается сигналом loadFinished() в значение QWebView. В changeLocation() создаём объект QUrl, а затем его для загрузки страницы в QWebView. Когда завершается загрузка новой веб-страницы, adjustLocation() будет запущен ещё раз для обновления панели адреса.
void MainWindow::adjustTitle()
{
if (progress <= 0 || progress >= 100)
setWindowTitle(view->title());
else
setWindowTitle(QString("%1 (%2%)").arg(view->title()).arg(progress));
}
void MainWindow::setProgress(int p)
{
progress = p;
adjustTitle();
}
adjustTitle() устанавливает заголовок окна b отображает прогресс загрузки. Этот слот переключается сигналом titleChanged() в QWebView.
void MainWindow::finishLoading(bool)
{
progress = 100;
adjustTitle();
view->page()->mainFrame()->evaluateJavaScript(jQuery);
rotateImages(rotateAction->isChecked());
}
После загрузки веб-страницы finishLoading() переключается сигналом loadFinished() в QWebView. Затем finishLoading() обновляет прогресс в панели заголовка и вызывает evaluateJavaScript() для выполнения библиотеки jQuery. Этим выполняется JavaScript в текущей веб-странице. Это означает, что JavaScript можно просматривать как часть содержимого, загруженного в QWebView, и который поэтому нужно загружать каждый раз при загрузке страницы. После загрузки библиотеки jQuery можно начать выполнять в браузере разные функции jQuery.
Затем явно вызывается функция rotateImages(), чтобы убедиться в том, что изображения только что загруженной страницы имеет отношение к состоянию действия переключения.
void MainWindow::highlightAllLinks()
{
QString code = "$('a').each( function () { $(this).css('background-color', 'yellow') } )";
view->page()->mainFrame()->evaluateJavaScript(code);
}
Первая функция на основе jQuery, highlightAllLinks(), спроектирована для подсветки всех ссылок на текущей веб-странице. Код JavaScript ищет веб-элементы с именем a, который является тегом для гиперссылки. Для каждого такого элемента цвет фона устанавливается в жёлтый используя CSS.
void MainWindow::rotateImages(bool invert)
{
QString code;
if (invert)
code = "$('img').each( function () { $(this).css('-webkit-transition', '-webkit-transform 2s'); $(this).css('-webkit-transform', 'rotate(180deg)') } )";
else
code = "$('img').each( function () { $(this).css('-webkit-transition', '-webkit-transform 2s'); $(this).css('-webkit-transform', 'rotate(0deg)') } )";
view->page()->mainFrame()->evaluateJavaScript(code);
}
Функция rotateImages() вращает изображения на текущей веб-странице. Webkit поддерживает преобразования CSS, а этот JavaScript код ищет все элементы img и вращает изображения на 180 градусов по часовой стрелке, а затем против.
void MainWindow::removeGifImages()
{
QString code = "$('[src*=gif]').remove()";
view->page()->mainFrame()->evaluateJavaScript(code);
}
void MainWindow::removeInlineFrames()
{
QString code = "$('iframe').remove()";
view->page()->mainFrame()->evaluateJavaScript(code);
}
void MainWindow::removeObjectElements()
{
QString code = "$('object').remove()";
view->page()->mainFrame()->evaluateJavaScript(code);
}
void MainWindow::removeEmbeddedElements()
{
QString code = "$('embed').remove()";
view->page()->mainFrame()->evaluateJavaScript(code);
}
Остальные четыре метода удаляют различные элементы из текущей веб-страницы. removeGifImages() удаляет все изображения Gif на странице, разыскав атрибут src всех элементов на веб-странице. Любой элемент с файлом gif в качестве источника удаляется. removeInlineFrames() удаляет все iframe или встроенные (inline) элементы. removeObjectElements() удаляет все элементы object, а removeEmbeddedElements() удаляет любые элементы, например, встроенные в страницу с использованием тега embed подключаемые модули.
Авторские права © 2010 Nokia Corporation и/или её дочерние компании |
Торговые марки |
Qt 4.6.4 |
|