👨🏾‍🚒 💋 🙇🏼 मोबाइल HTML5 अनुप्रयोगों के विकास में QtWebKit- विशेष 🤟🏻 😑 🐂

यह पोस्ट " स्मार्ट फोन फॉर स्मार्ट पोस्ट " प्रतियोगिता में भाग लेती है

परिचय

यह कोई रहस्य नहीं है कि HTML5 के आगमन के साथ, विकास फ़ोकस धीरे-धीरे वेब की ओर स्थानांतरित होने लगा। ये सरल वेब साइट और डायनेमिक एप्लिकेशन हैं, और यहां तक कि मोबाइल एप्लिकेशन भी हैं, जो पूरी तरह से HTML5 का उपयोग करके लिखे गए हैं। मंच और निष्पादन पर्यावरण से स्वतंत्र और मानकों के अनुपालन के लिए केवल निर्विवाद अनुपालन की आवश्यकता है। लेकिन फिर भी, कोई फर्क नहीं पड़ता कि नई एचटीएमएल मानकों द्वारा शुरू की गई प्रौद्योगिकियों का पूरा ढेर कितना अच्छा है, फिर भी कुछ कार्य ऐसे हैं जिनमें देशी विकास साधनों के उपयोग की आवश्यकता होती है।

इस तरह की समस्याएं, उदाहरण के लिए, सिस्टम जानकारी तक पहुँच प्राप्त कर रही हैं, सिस्टम में कुछ का प्रबंधन और परिवर्तन कर रही हैं। HTML5 से संपर्क, कैलेंडर, मोबाइल डिवाइस पर आयोजक और अन्य तक पहुंच। फिर से, यदि हमारा एप्लिकेशन कुछ गंभीर गणना करता है, तो उन्हें धीमी जेएस से तेज सी ++ में स्थानांतरित किया जा सकता है। इस लेख में मैं एक उदाहरण के रूप में QtWebKit मॉड्यूल का उपयोग करके एक वेब एप्लिकेशन और देशी कोड की बातचीत के लिए कई तकनीकों पर विचार करना चाहता हूं, जो उपयोगी हो सकता है।

सामग्री की तालिका

जावास्क्रिप्ट से C ++ मेथड को कॉल करना
C ++ विधियों से जावास्क्रिप्ट कोड को कॉल करना
एक वेब पेज में QWidget को एकीकृत करना

जावास्क्रिप्ट से C ++ मेथड को कॉल करना

सैद्धांतिक रूप से, इस मामले में, हमें HTML पृष्ठ पर एक नया JS ऑब्जेक्ट जोड़ना होगा, जिसके माध्यम से हम अपनी किसी एक कक्षा तक पहुँच बना सकते हैं। QtWebKit एक वेब पेज में ऐसी वस्तुओं को एम्बेड करने की क्षमता प्रदान करता है, लेकिन एक शर्त के साथ - जब हम अपने ब्राउज़र घटक में पेज को फिर से लोड करते हैं तो हर बार एक नई वस्तु को जोड़ना आवश्यक है। यही है, हर बार जब आप DOM ट्री और JS ऑब्जेक्ट्स के ट्री दोनों को क्लियर करते हैं।

व्यवहार में, हमें क्यूटी निर्माता, क्यूटी सिम्युलेटर प्रोफाइल में एक नया "क्यूटी मोबाइल एप्लिकेशन" बनाने की आवश्यकता है, बाकी आपके स्वाद के लिए है। फिर फार्म पर QWebView घटक को छोड़ें, .pro फ़ाइल में एक पंक्ति जोड़ें

QT += webkit

हेडर में mainwindow.h एक निजी और एक सार्वजनिक स्लॉट घोषित करें:

 private slots: void addJSObject(); public slots: void webViewQuitClicked ();

और mainwindow.cpp कार्यान्वयन फ़ाइल में, QWebFrame हेडर शामिल करें, निर्माता को थोड़ा बदलें और मेनविंडो.h में जोड़े गए स्लॉट के लिए कार्यान्वयन का वर्णन करें:

 ... #include <QWebFrame> #include <QMessageBox> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addJSObject())); } void MainWindow::addJSObject() { ui->webView->page()->mainFrame()->addToJavaScriptWindowObject(QString("mainWindow"), this); } void MainWindow::webViewQuitClicked () { qApp->quit(); } ...

अब, इस कोड से निपटते हैं:

निजी स्लॉट addJSObject () - प्रत्येक नए पेज को जोड़ने के लिए जिम्मेदार एक जेएस ऑब्जेक्ट जो वर्तमान फॉर्म को इंगित करता है। उसी समय, इसे हर बार वेब पेज को फिर से लोड करने के लिए कहा जाएगा। JavaScriptWindowObjectCleared () सिग्नल इसके लिए जिम्मेदार है। जैसा कि आप कोड से देख सकते हैं, वेब पेज पर हमारी वस्तु का नाम "mainWindow" होगा।
WebViewQuitClicked () सार्वजनिक स्लॉट बिल्कुल स्लॉट है जो वेब पेज पर स्थित हमारे जावास्क्रिप्ट कोड से हमें उपलब्ध होगा। स्वाभाविक रूप से, सादृश्य द्वारा, आप अन्य तरीकों को जोड़ सकते हैं, जिन्हें तब जेएस से कहा जाता है।

हम और आगे बढ़ें। अब हमें अपने वेब पेज से इस कोड को कॉल करने का प्रयास करने की आवश्यकता है। ऐसा करने के लिए, निम्न सामग्रियों के साथ एक HTML फ़ाइल बनाएँ:

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Application Example</title> <script> function quitApplication() { mainWindow.webViewQuitClicked (); } </script> </head> <body> <a href="#" onclick='quitApplication();'>Quit Application</a> </body> </html>

और हम एप्लिकेशन कंस्ट्रक्टर को थोड़ा संपादित करेंगे, अर्थात् इसमें एक पंक्ति जोड़ें:

 ui->webView->load("file:///"+QApplication::applicationDirPath() + "/../../html5caller/example.htm");

बेशक, आप इंटरनेट पर कहीं से पेज डाउनलोड कर सकते हैं।
हाँ, बुरा नहीं है। लेकिन क्या होगा अगर हम C ++ फ़ंक्शन के लिए कुछ पैरामीटर पास करना चाहते हैं? कुछ भी आसान नहीं है! हम बस सी + + कोड में वांछित मापदंडों के साथ एक नया सार्वजनिक स्लॉट का वर्णन करते हैं। उदाहरण के लिए - उपयोगकर्ता को एक संदेश प्रदर्शित करना:
mainwindow.h:

 public slots: void webViewQuitClicked (); void webViewShowMessageClicked (QString message, int number);

mainwindow.cpp:

 ... void MainWindow::webViewShowMessageClicked (QString message, int number) { QMessageBox::information(this, "From Web", message+QString::number(number)); } ...

और उदाहरण बदलें।

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Application Example</title> <script> function quitApplication() { mainWindow.webViewQuitClicked (); } function calculate(val1, val2) { result = eval(parseFloat(document.calc.val1.value)+parseFloat(document.calc.val2.value)) mainWindow.webViewShowMessageClicked ("Result: ", result); } </script> </head> <body> <a href="#" onclick='quitApplication();'>Quit Application</a> <FORM name="calc"> <input name="val1" type="text" value="3" size="4">+ <input name="val2" type="text" value="4" size="4"> <input type="button" value=" + " onclick="calculate(val1, val2)"> </FORM> </body> </html>

अब, हम न केवल एप्लिकेशन को बंद कर सकते हैं, बल्कि डेटा प्रकार के सामान्य नियंत्रण के साथ, इसके अलावा किसी भी पैरामीटर को पास कर सकते हैं। और यहाँ क्या हुआ:

खैर, आखिरी। इस विषय पर क्या जोड़ा जा सकता है। चलिए बताते हैं। हम कुछ डेटा C ++ को भेजते हैं, वहां उन्हें संसाधित किया जाता है और हम इसे वापस प्राप्त करना चाहते हैं। ऐसा करने के लिए, हम उदाहरण के लिए, हमारे स्लॉट में रिटर्न डेटा टाइप का वर्णन करते हैं:

 ... QString readResult(int val1, int val2) { ... return QString(); } ...

और जेएस कोड से, हम दूसरों की तरह इस पद्धति को कहते हैं, एकमात्र अंतर यह है कि हम उस चर को सेट करते हैं जहां हम रिटर्न को जोड़ना चाहते हैं:

 var lolo = mainWindow.readResult();

यही है ... आगे बढ़ो ...

C ++ विधियों से जावास्क्रिप्ट कोड को कॉल करना

हम लंबे समय तक इस पर निवास नहीं करेंगे। JS कोड को कॉल करने के लिए, हमें QWebFrame वर्ग के तरीकों का उपयोग करना चाहिए। यहाँ एक उदाहरण है: हमें पृष्ठ पर सभी चित्रों का url प्राप्त करने की आवश्यकता है:

 QVariant listOfImages = webView.page()->mainFrame()->evaluateJavaScript("document.getElementsByTagName(\"img\").length;"); double numberOfImages = listOfImages.toDouble(); for (double i = 0; i < numberOfImages; ++i) { srcOfImages = webView.page()->mainFrame()->evaluateJavaScript(QString("document.getElementsByTagName(\"img\")[%1].src;").arg(i)); imageUrl = srcOfImages.toString(); }

पहले हमें टाइप img के टैग्स की संख्या मिलती है, और फिर इस सूची से गुजरते हैं और हमें जिन URLs की आवश्यकता होती है उन्हें बाहर निकालते हैं जैसा कि आप उदाहरण से देख सकते हैं, हम पृष्ठ पर किसी भी ऑब्जेक्ट को आसानी से एक्सेस कर सकते हैं और तदनुसार, उस पर किसी भी तरीके को निष्पादित कर सकते हैं।

एक वेब पेज में QWidget को एकीकृत करना

यह दूसरा बड़ा विषय है जिसके बारे में मैं बात करना चाहूंगा। यह काफी मानक प्रक्रिया का सवाल नहीं होगा ... हम वास्तव में हमारे वेब पेज में हमारे आवेदन से कुछ विजेट शामिल करेंगे।

यह QWebPluginFactory वर्ग का उपयोग करके किया जा सकता है। चलिए शुरू करते हैं। सबसे पहले, Qt Creator में, बाईं ओर प्रोजेक्ट ट्री में, हम अपने प्रोजेक्ट पर राइट-क्लिक करते हैं। संपर्क मेनू से, "नया जोड़ें" -> C ++ वर्ग चुनें। वर्ग नाम MyWidgetFactory, आधार वर्ग QWebPluginFactory, प्रकार QObject, फिर पूरा करें। हमारे प्लगइन को पूरी तरह कार्यात्मक बनाने के लिए, हमें आधार वर्ग के दो तरीकों को फिर से परिभाषित करने की आवश्यकता है:

 QObject *create(const QString &mimeType, const QUrl &url, const QStringList &argumentNames, const QStringList &argumentValues) const; QList<QWebPluginFactory::Plugin> plugins() const;

पहला मांग वेब पेज पर विजेट्स बना रहा है। दूसरा व्यक्ति माइम प्रकारों का वर्णन करता है जो प्लगइन को जवाब देना होगा और जिसके लिए नए विजेट बनाना आवश्यक है। सामान्य तौर पर, शुरू में, मैंने कुछ साल पहले इसी तरह के दृष्टिकोण का इस्तेमाल किया था जब मैंने Vkontakte.ru के लिए एक दूत लिखा था। तब मुझे पेज में एक म्यूजिक प्लेयर विजेट को एम्बेड करने की आवश्यकता थी, ताकि उपयोगकर्ताओं के लिए संगीत साझा करना आसान हो। आप इसका पूरा कार्यान्वयन यहाँ देख सकते हैं। code.google.com/p/vimka/source/browse/#svn%2Ftrunk%2Fchats फ़ाइलों में vkmediafactory.h और vkmediafactory.cpp

अब हम कुछ सरल करेंगे। तो, आइए परिणामी कक्षा के टेम्पलेट को बदलकर शुरू करें।
mywidgetfactory.h:

 #ifndef MYWIDGETFACTORY_H #define MYWIDGETFACTORY_H #include <QWebPluginFactory> class MyWidgetFactory : public QWebPluginFactory { Q_OBJECT public: explicit MyWidgetFactory(QObject *parent = 0); QObject *create(const QString &mimeType, const QUrl &url, const QStringList &argumentNames, const QStringList &argumentValues) const; QList<QWebPluginFactory::Plugin> plugins() const; signals: public slots: }; #endif // MYWIDGETFACTORY_H

mywidgetfactory.cpp:

 #include "mywidgetfactory.h" #include <QTabWidget> #include <QPushButton> #include <QProgressBar> #include <QDebug> #include <QApplication> #include <QUrl> MyWidgetFactory::MyWidgetFactory(QObject *parent) : QWebPluginFactory(parent) { } QList<QWebPluginFactory::Plugin> MyWidgetFactory::plugins() const { QWebPluginFactory::MimeType mimeType; mimeType.name = "text/qtexample"; mimeType.description = "Comma-separated values"; mimeType.fileExtensions = QStringList() << "txt"; QWebPluginFactory::Plugin plugin; plugin.name = "PluginFactory Example"; plugin.description = "PluginFactory Example"; plugin.mimeTypes = QList<MimeType>() << mimeType; return QList<QWebPluginFactory::Plugin>() << plugin; } QObject *MyWidgetFactory::create(const QString &mimeType, const QUrl &url, const QStringList &argumentNames, const QStringList &argumentValues) const { qDebug() << mimeType << url << argumentNames << argumentValues; if (mimeType != "text/qtexample") return 0; QTabWidget *tab = new QTabWidget(); int max = argumentValues.last().split(",").first().toInt(); int val = argumentValues.last().split(",").last().toInt(); QProgressBar *progressBar = new QProgressBar(); tab->addTab(progressBar, "Progress"); progressBar->setMaximum(max); progressBar->setValue(val); QPushButton *pb = new QPushButton("Click me!"); tab->addTab(pb, "Button"); connect(pb, SIGNAL(clicked()),QApplication::instance(), SLOT(quit())); return tab; }

हमने क्या किया है? प्लगइन्स () फ़ंक्शन में, हमने माइम प्रकार का वर्णन किया है जिसका हम जवाब देना चाहते हैं। और फिर उन्होंने प्लग-इन का वर्णन किया, जो इस माइम प्रकार की उपस्थिति के लिए सभी लोड किए गए पृष्ठों की निगरानी करेगा और, जब यह पता चलता है, तो बनाएं () विधि को कॉल करें और फिर पेज में परिणामी विजेट को एम्बेड करें।

अगला, बनाने () विधि में, हम कंसोल को डेटा स्वीकार और आउटपुट करते हैं, जांचें कि क्या माइम प्रकार हमारे लिए उपयुक्त है (पाठ / qtexample) और यदि माइम प्रकार मेल खाते हैं तो एक गैर-रिक्त विजेट वापस करें। इसे थोड़ा और स्पष्ट करने के लिए, इस फ़ंक्शन द्वारा प्राप्त डेटा का कंसोल आउटपुट है:

 "text/qtexample" QUrl( "file:///D:/devel/html5caller/100,28" ) ("type", "data", "width", "height", "src") ("text/qtexample", "100,28", "300", "300", "100,28")

यह कारखाने के लिए है ...

अगला कदम हमारे आवेदन को अपने स्वयं के प्लगइन कारखाने की उपलब्धता के बारे में बताना है। ऐसा करने के लिए, पहले mainwondow.cpp फ़ाइल में दो नए हेडर जोड़ें:

 #include <QWebSettings> #include "mywidgetfactory.h"

और इस वर्ग के निर्माता को बदलें:

 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { QWebSettings::globalSettings()->setAttribute( QWebSettings::PluginsEnabled, true); ui->setupUi(this); connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addJSObject())); MyWidgetFactory *factory = new MyWidgetFactory(ui->webView); ui->webView->page()->setPluginFactory(factory); ui->webView->load("file:///"+QApplication::applicationDirPath() + "/../../html5caller/example.htm"); }

यहां, हम सबसे पहले वैश्विक QtWebKit सेटिंग्स में प्लग-इन सपोर्ट सक्षम करते हैं। फिर हमने अपनी फैक्ट्री क्लास की एक ऑब्जेक्ट बनाई और इसे अपने वेब व्यू से संबंधित हमारे क्यू वेजपेज ऑब्जेक्ट के लिए एक प्लगइन फैक्ट्री के रूप में सेट किया।

अंतिम, अंतिम स्पर्श अभी भी बना हुआ है - आपको किसी तरह हमारे प्लगइन को web-cnhfybxre में एम्बेड करना होगा / ऐसा करने के लिए, example.htm खोलें और हमारे फ़ॉर्म के विवरण के बाद इस तरह एक पंक्ति जोड़ें:

 <object type="text/qtexample" data="100,28" width="300" height="300"></object>

जैसा कि आप अनुमान लगा सकते हैं, यहां हम माइम प्रकार निर्दिष्ट करते हैं ताकि निर्मित प्लग-इन हमारे प्रति प्रतिक्रिया करें, भविष्य के विजेट के आयाम सेट करें और आरंभीकरण के लिए कुछ डेटा पास करें।

हमारे काम का परिणाम यह खिड़की होगी:

आप विजेट के चारों ओर प्रहार कर सकते हैं, टैब के बीच स्विच कर सकते हैं, और यदि आप दूसरे टैब पर बटन पर क्लिक करते हैं, तो एप्लिकेशन क्लिक और बंद की प्रक्रिया करेगा।

यह मूल रूप से वह सब है जो मैं इस समय के बारे में बात करना चाहता हूं। एप्लिकेशन स्रोत कोड को यहां ले जाया जा सकता है और उदाहरण के लिए उपयोग किया जा सकता है: code.google.com/p/html5cppmixer/downloads/list

मुझे आशा है कि किसी को मेरा अनुभव उपयोगी और उपयोगी लगेगा।

मोबाइल HTML5 अनुप्रयोगों के विकास में QtWebKit- विशेष

परिचय

सामग्री की तालिका

जावास्क्रिप्ट से C ++ मेथड को कॉल करना

C ++ विधियों से जावास्क्रिप्ट कोड को कॉल करना

एक वेब पेज में QWidget को एकीकृत करना

More articles: