qt开发webkit

昨天遇到一个兄台,说要qt写界面

有时界面会变动很大

我的建议是用 qtwebkit

具体是什么样的呢,也不知道那个兄台能不能看到这博客

把以前项目中的内容,简化成例子

 

为这个项目做的模拟器


qt开发webkit_第1张图片

发上来,朋友们看看

 

mkdir qwebkit


 

cd qwebkit

 

QtDesigner 


qt开发webkit_第2张图片

 建立form.ui 到qwebkit


qt开发webkit_第3张图片


 控件名   webView  


 

控件名 lineEdit

拖动调整大小


qt开发webkit_第4张图片
 

qt开发webkit_第5张图片

 

保存

 

Qt Creator 建立qwebkit.qrc

 

也可以

vi qwebkit.qrc 

 

 

Qwebkit.qrc代码   收藏代码
  1. <!DOCTYPE RCC><RCC version="1.0">  
  2.  <qresource>  
  3.      <file>test.htm</file>  
  4.  </qresource>  
  5. </RCC>   
 

 

vi test.htm

 

Test.htm代码   收藏代码
  1. <html>  
  2. <style type="text/css">  
  3. .boxshadow1 {  
  4.     -moz-box-shadow: 0 2px 10px 1px rgba(255000.2);  
  5.     -webkit-box-shadow: 0 2px 10px 1px rgba(255000.2);  
  6.     box-shadow: 0 2px 10px 1px rgba(255000.2);  
  7.     background: -webkit-gradient(linear, 0 200 100%, from(#EEF), to(#BBB));  
  8.     border-radius: 15px 5px 25px 0px;  
  9.     position:absolute;   
  10.     top:10px; left:50px;   
  11.     height:76px;   
  12.     width:150px;   
  13.     font-size:30px;  
  14.     border-top-width: 1px;  
  15.     border-right-width: 1px;  
  16.     border-bottom-width: 1px;  
  17.     border-left-width: 1px;  
  18.     border-top-style: solid;  
  19.     border-right-style: solid;  
  20.     border-bottom-style: solid;  
  21.     border-left-style: solid;  
  22.     border-top-color: #EEE;  
  23.     border-right-color: #333;  
  24.     border-bottom-color: #333;  
  25.     border-left-color: #EEE;  
  26. }  
  27. </style>  
  28. <body>  
  29. <div width="100px" height="50px" class="boxshadow1" >  
  30. <span>html 5</span></div>  
  31. <br><br><br><br><br>  
  32. <form onsubmit="qtwebkit.submit()">  
  33.   
  34.             <input type="text" id="username">  
  35.             <input type="submit" value="Submit">  
  36. </form>  
  37. </body>  
  38. </html>  
 

vi qtwebkit.h

 

 

Qtwebkit.h代码   收藏代码
  1. #ifndef QWEBKIT_H  
  2. #define QWEBKIT_H  
  3.   
  4. #include <QtGui/QWidget>  
  5. #include <QWebFrame>  
  6. #include <QWebElement>  
  7. #include <QMainWindow>  
  8. #include <QtGui>  
  9. #include "ui_form.h"  
  10.   
  11. class webkit_test : public QWidget  
  12. {  
  13.     Q_OBJECT  
  14.   
  15. public:  
  16.     webkit_test(QWidget *parent = 0, Qt::WFlags flags = 0)  
  17.     {  
  18.     ui.setupUi(this);  
  19.     ui.webView->setUrl(QUrl("qrc:/test.htm"));  
  20.     connect(ui.webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),  
  21.             this, SLOT(JavaScriptWindowObject()));  
  22.     }  
  23.     ~webkit_test()  
  24.     {  
  25.     exit(0);  
  26.     }  
  27.   
  28. public slots:  
  29.     void submit()  
  30.     {  
  31.     QWebFrame *frame = ui.webView->page()->mainFrame();  
  32.   
  33.     QWebElement firstName = frame->findFirstElement("#username");  
  34.   
  35.     ui.lineEdit->setText(firstName.evaluateJavaScript("this.value").toString());  
  36.   
  37.     }  
  38.     void JavaScriptWindowObject()  
  39.     {  
  40.      ui.webView->page()->mainFrame()->addToJavaScriptWindowObject("qtwebkit", this);  
  41.     }  
  42. private:  
  43.     Ui::Form ui;  
  44. };  
  45.   
  46.   
  47.   
  48.   
  49.   
  50.   
  51.   
  52.   
  53.   
  54. class MainWindow : public QMainWindow  
  55. {  
  56.     Q_OBJECT  
  57.   
  58. public:  
  59.     MainWindow()  
  60.     {  
  61.     webkitWidget = new webkit_test(this);  
  62.     setCentralWidget(webkitWidget);  
  63.     }  
  64.   
  65. private:  
  66.     webkit_test *webkitWidget;  
  67.   
  68. };  
  69.   
  70.   
  71. #endif  
 

vi main.cpp

 

 

Main.cpp代码   收藏代码
  1. #include <QtGui/QApplication>  
  2. #include "qtwebkit.h"  
  3.   
  4. int main(int argc, char *argv[])  
  5. {  
  6.     Q_INIT_RESOURCE(qwebkit);  
  7.     QApplication app(argc, argv);  
  8.     MainWindow mainWindow;  
  9.     mainWindow.setWindowTitle("Test qtwebkit");  
  10.     mainWindow.resize(800,600);  
  11.     mainWindow.show();  
  12.     return app.exec();  
  13. }  
 

 

export PATH=/usr/local/qt4.6/bin:$PATH

qmake --version

     QMake version 2.01a

     Using Qt version 4.6.3 in /usr/local/qt4.6//lib

 

qmake -project

vi qwebkit.pro 

在最开始加入

QT          +=  webkit network

 

改 TARGET =qtwebkit

 

再执行

qmake

make

运行结果

qt开发webkit_第6张图片
 

你可能感兴趣的:(qt开发webkit)