एक उदाहरण के रूप में D3.js का उपयोग करते हुए Qt में हाइब्रिड अनुप्रयोग

डी 3 डेटा विज़ुअलाइज़ेशन के लिए एक शक्तिशाली जावास्क्रिप्ट लाइब्रेरी है । मेरी राय में, यह एक वेब डेवलपर के लिए एक स्वर्ग है, जो कि Qt प्रोग्रामर के लिए दुर्गम है। लेकिन क्यूटी ढांचे का लचीलापन आपको क्यूटी वेब ब्रिज तंत्र का उपयोग करके वेब-फ्रंटेंड को एक मोटे ग्राहक में एकीकृत करने की अनुमति देता है। ऐसे एप्लिकेशन को हाइब्रिड ( Qt Hybrid Apps ) कहा जाता है।

जावास्क्रिप्ट प्रोग्रामर के लिए, अच्छी खबर यह है कि उनके समाधान आसानी से डेस्कटॉप अनुप्रयोगों में एकीकृत किए जा सकते हैं, जो संभावित रूप से विकसित पुस्तकालयों के उपयोगकर्ताओं के लक्षित दर्शकों को बढ़ा सकते हैं (किसी भी स्थिति में, यह क्यूटी अनुप्रयोगों की दुनिया के लिए सही है)।

नीचे दिए गए स्क्रीनशॉट में डिपेंडेंसी व्हील विजेट (सर्कल ऑफ डिपेंडेंसी) को दिखाया गया है, जिसे D3.js और डेटा का उपयोग करके प्रस्तुत किया गया है और Qt का उपयोग करके प्रदर्शन को नियंत्रित किया जाता है। जब पॉइंटर संबंधित चाप के ऊपर स्थित होता है, तो उसके रिश्ते "हाइलाइट" होते हैं, और बाकी अर्ध-अंक बन जाते हैं। इस विजेट का उपयोग विभिन्न प्रकार की निर्भरता (उदाहरण के लिए, पुस्तकालयों) की कल्पना करने के लिए किया जा सकता है।

मूल जेएस समाधान के विपरीत, चार्ट गतिशील रूप से विजेट को फिट करने के लिए आकार देता है, और डेटा क्यूटी पक्ष पर सेट किया जाता है, और जेएसएन फ़ाइल लोड करके नहीं।

लेख क्यूटी-प्रोग्रामर पर अधिक केंद्रित है, लेकिन जेएस प्रोग्रामर के लिए भी दिलचस्प हो सकता है।

हाइब्रिड अनुप्रयोगों का विचार

हाइब्रिड अनुप्रयोगों के विचार के लिए शुरुआती बिंदु मूल अनुप्रयोगों में निहित कई सीमाएँ हैं:

• सिस्टम के ग्राहक भागों के कार्यान्वयन और रखरखाव के लिए अतिरिक्त लागत;
• एक अद्वितीय उपयोगकर्ता इंटरफ़ेस लिखना कभी-कभी एक गैर-तुच्छ कार्य होता है;
• मौजूदा वेब अनुप्रयोगों के एपीआई का पुन: उपयोग करने में असमर्थता।

हाइब्रिड अनुप्रयोग इन समस्याओं को हल करते हैं:

• वेब अनुप्रयोगों के रूप में परिनियोजन किया जाता है;
• जटिल इंटरफेस वेब-प्रौद्योगिकियों (एचटीएमएल, सीएसएस, एसवीजी, कैनवस) का उपयोग करके बनाए जाते हैं;
• मौजूदा वेब एप्लिकेशन का पुन: उपयोग किया गया एपीआई।

हाइब्रिड एप्लिकेशन आर्किटेक्चर मानता है कि

• Qt-application एक ब्राउज़र के रूप में कार्य करता है;
• उपयोगकर्ता इंटरैक्शन और एप्लिकेशन लॉजिक को जावास्क्रिप्ट में प्रोग्राम किया गया है;
• अतिरिक्त कार्यक्षमता अनुप्रयोग के Qt भाग में C ++ में कार्यान्वित की जाती है।

इस प्रकार, हाइब्रिड एप्लिकेशन पतले क्लाइंट के विचार को लागू करते हैं।
Qt में हाइब्रिड एप्लिकेशन का एक उदाहरण WebKit इमेज एनालाइज़र है ।

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

परियोजना की संरचना

प्रोजेक्ट फ़ाइलों की सामान्य संरचना चित्र में दिखाई गई है:



आधार निर्देशिका में शामिल हैं:

• d3viewer.h और d3viewer.cpp - बेस व्यू क्लास डी 3 व्यूअर की परिभाषा और कार्यान्वयन, QWidget से विरासत में मिला और QWebView के साथ इंटरकैपिंग इंटरैक्शन।
• d3webpage.h और d3webpage.cpp - D3WebPage की परिभाषा और कार्यान्वयन - QWebPage के वंशज ( QWebPage में त्रुटि संदेशों और डिबगिंग सूचना के उत्पादन का समर्थन करने के लिए :: jpgScriptConsoleMessage )।

चार्ट / पाई निर्देशिका में:

• dependencywheelwidget.h और dependencywheelwidget.cpp - आधार दृश्य वर्ग की परिभाषा और कार्यान्वयन QWidget से विरासत में मिला और QWebView के साथ सहभागिता को सम्मिलित करता है ।

संसाधन निर्देशिका को दो में विभाजित किया गया है: js और html। Html में वह पेज होता है जो विजेट में लोड किया जाएगा और जिसमें Qt के साथ सभी इंटरैक्शन कोड हैं, js में डिपेंडेंसीवैल के लिए आवश्यक js फाइलें हैं: काम करने के लिए d3.min.js डी 3 और d3.dk के लिए सामान्य है, जो उदाहरण के लिए विशिष्ट है। जे एस।

वर्ग आरेख

VisualParadigm टूल का उपयोग करके लेख की मात्रा को कम करने के लिए, एक सरल आरेख बनाया गया था: इसमें उन विशेषताओं और विधियों को छोड़ दिया गया जो सीधे वर्णित तकनीक से संबंधित नहीं हैं। कार्यान्वयन का विवरण स्रोतों में पाया जा सकता है, एक लिंक जो लेख के अंत में है।

Qt <-> JS इंटरेक्शन

हाइब्रिड अनुप्रयोगों में, जावास्क्रिप्ट में एक विशेष वस्तु को लागू किया जाता है, जिसकी विधि कॉल Qt पक्ष पर संसाधित की जाती है:

void D3Viewer::addContextObject(const QString &name, QObject *object) { frame()->addToJavaScriptWindowObject( name, object ); //frame() - QWebFrame } 

इस विधि को पृष्ठ लोड होने से पहले निर्माणकर्ता में D3Viewer द्वारा व्युत्पन्न वर्गों में कहा जाता है:

 addContextObject("api", this); 

इसके अलावा, जेएस के साथ Qt की बातचीत चार तंत्रों के माध्यम से संभव है:

1. वस्तु के गुणों तक पहुँचने से।
   ऐसा करने के लिए, आपको उस ऑब्जेक्ट में गुण को परिभाषित करना चाहिए, जो JS में संदर्भ ऑब्जेक्ट है ("एपीआई"):
   
   

    public: Q_PROPERTY(float padding READ padding WRITE setPadding) public slots: float padding(); //getter void setPadding(const float padding); //setter 

   
   उसके बाद, आप इन संपत्तियों को JS से एक्सेस कर सकते हैं:
   
   

     var chart = d3.chart.dependencyWheel() .width(api.width) .height(api.height) .margin(api.margin) .padding(api.padding); 

   
   
2. जेएस में क्यूटी संकेतों को संसाधित करके, जेएस में इसके लिए आपको संबंधित फ़ंक्शन-हैंडलर को सिग्नल से कनेक्ट करना होगा।
   
   

    api.update.connect(redraw); 

   
   
3. जेएस में क्यूटी स्लॉट्स को कॉल करके, उदाहरण के लिए, जब एक तत्व पर क्लिक करते हैं:
   
   

     g.append("svg:path") .style("fill", fill) .style("stroke", fill) .attr("d", arc) .on("mouseover", fade(0.1)) .on("mouseout", fade(1)) .on('click', function (d) { api.itemClicked(packageNames[d.index]) } ); //   

   
   
4. जेएस में अन्य क्यूटी तरीकों को कॉल करके, इसके लिए विधि घोषणा को Q_INVOKABLE मैक्रो से पहले होना चाहिए।
   
   

    Q_INVOKABLE void thisMethodIsInvokableInJavaScript(); 

   
   
5. जेएस कोड का प्रत्यक्ष निष्पादन।
   
   

    void D3Viewer::evaluateScript(const QString &script) { frame()->evaluateJavaScript(script); } 

उदाहरण में, विधियों 4 और 5 का उपयोग नहीं किया जाता है।

एक हाइब्रिड एप्लिकेशन में जावास्क्रिप्ट डिबगिंग

जेएस एप्लिकेशन को डिबग करने के लिए (साथ ही डोम देखें, नेटवर्क गतिविधि, लोड किए गए संसाधन, आदि देखें), निम्नलिखित संपत्ति को डी 3 व्यूअर कंस्ट्रक्टर में सेट किया जाना चाहिए:

 #ifdef QT_DEBUG //           page()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true); #endif 

फिर, रनटाइम पर, संदर्भ मेनू आइटम "निरीक्षण" संदर्भ मेनू में उपलब्ध होगा (QWebView पर राइट-क्लिक करें)।



किस विंडो को चुनकर वेब-इंस्पेक्टर-ए प्रदर्शित किया जाता है।



इस विंडो में, स्क्रिप्ट टैब पर, आप डीबगिंग को सक्षम कर सकते हैं।



ब्रेकपॉइंट की स्थापना बाईं तरफ संबंधित लाइन संख्या पर क्लिक करके की जाती है।
PS Qt 4.8.6 में, मैंने ब्रेकपॉइंट को बाधित करने का प्रबंधन नहीं किया। 5.3.0 में, सब कुछ ठीक से काम करता है।

कमियों

किसी भी समाधान के अपने फायदे और नुकसान हैं। और इस मामले में, D3.js को "प्रीटीनेस" के लिए इसकी कीमत चुकानी होगी।

• अतिरिक्त उपरि (मुख्य रूप से स्मृति)।
  इस तथ्य के अलावा कि QWebView एक वेबकिट को "खींचता" है, एक नया "हाइब्रिड" विजेट बनाता है, हम एक नहीं बल्कि भारी वजन वाले QWebView ऑब्जेक्ट को फिर से बनाते हैं। यह इतना सच नहीं है अगर पूरे यूआई को एक QWebView में लोड किया गया है (जैसा कि हाइब्रिड अनुप्रयोगों के मूल विचार में सुझाव दिया गया है)।
  
• जेएस को संशोधित करने के बाद वेब पर पुन: उपयोग करने में असमर्थता का जोखिम। Qt की जरूरतों के लिए, आप जावास्क्रिप्ट कोड को संशोधित कर सकते हैं ताकि यह वेब अनुप्रयोग में अनुपयोगी हो जाए। इसलिए, एपीआई क्यूटी ऑब्जेक्ट को एक ही स्थान पर सभी कॉलों को अलग करना वांछनीय है - उदाहरण के लिए, html फ़ाइल के स्क्रिप्ट अनुभाग में, जो इस मामले में वेब और क्यूटी अनुप्रयोगों के लिए अलग होगा और कनेक्टेड फ़ाइलों में जेएस कोड समान होगा।
• Qt 4.8.6 में WebKit बग
  डी 3 में, पेड़ों की संरचनाओं को सक्रिय रूप से उपयोग किया जाता है, जिसका वर्णन JSON फ़ाइलों में है। Qt पक्ष पर, वही JSON ऑब्जेक्ट QVariantMap / QVariantList के संयोजन के माध्यम से बनता है जिसके परिणामस्वरूप QVariant होता है। इस तथ्य के बावजूद कि ऐसी वस्तुओं की संरचना समान है, क्यूटी 4.8.6 में अभी भी मतभेद हैं, क्योंकि इस तरह की वस्तु को सीधे नहीं माना जाता है और आपको जेएस की ओर से मेमोरी में JSON ऑब्जेक्ट को बार-बार "रीक्रिएट" करना है। क्यूटी 5.3.0 में, इस तरह के बैसाखी का उपयोग नहीं किया जा सकता है - सब कुछ सीधे काम करता है।
  
  

   function recreateJsonObject(obj) { var jsonObj = {}; for(key in obj) { jsonObj[key] = obj[key]; var dependencies = []; for (var i = 0 ; i < obj[key].length ; i++ ) { dependencies.push(obj[key][i]); } jsonObj[key] = dependencies; } return jsonObj; } 

  
  
  यहां तक ​​कि क्यूटी 4.8.6 में, विजेट के 15-20 सेकंड के आकार के बाद, एप्लिकेशन सामान्य रूप से काम करना बंद कर देता है और जेएस फॉल्स में त्रुटि संदेशों का एक ढेर निकलता है। क्यूटी 5.3.0 में, सब कुछ ठीक से काम करता है, जो फिर से बताता है कि समस्या वेबकीट के कार्यान्वयन में निहित है (हालांकि मुझे गलत समझा जा सकता है)। हालांकि, जेएस की ओर से मेमोरी को आवंटित करने और मुक्त करने के मुद्दे प्रासंगिक बने हुए हैं।
  

स्रोत कोड

उदाहरण के लिए स्रोत कोड यहां उपलब्ध है ।
एक उदाहरण Qt 4.8.6 और 5.3.0 के तहत बनाया और चलाया गया था।