अलविदा HTML, हाय क्यूएमएल

मैं HTML का उपयोग किए बिना एक वेब एप्लिकेशन कैसे बना सकता हूं? इसके लिए हमें चाहिए: जावा में एक नया ब्राउज़र, क्यूएमएल और बैक-एंड।

थोड़ा सा इतिहास

HTML को CERN के वैज्ञानिकों द्वारा वैज्ञानिक लेखों को साझा करने के तरीके के रूप में बनाया गया था। फिर यह नेटवर्क पर जानकारी पोस्ट करने के लिए एक सुविधाजनक तरीका बन गया। यह स्पष्ट हो गया कि हाइपरलिंक्स की कार्यक्षमता पर्याप्त नहीं थी, और फिर घटकों, रूपों, सीएसएस को जोड़ा जाने लगा। लेकिन यह पर्याप्त नहीं था, हमें गतिशीलता की आवश्यकता थी, जावास्क्रिप्ट जोड़ा। लेकिन इस सब पर यह विकसित करने के लिए बहुत सुविधाजनक नहीं है, इसलिए भविष्य के जेएस के ढांचे में दिखाई दिया। वे HTML की खामियों को ठीक करने की कोशिश कर रहे हैं। लेकिन मुझे लगता है कि लक्षणों के मुकाबले इस बीमारी का इलाज करना बेहतर है। QML इसमें हमारी मदद करेगा।

चलो समाधान के लिए नीचे उतरो

मैं तुरंत ध्यान देना चाहता हूं कि यह समाधान उत्पादन-तैयार नहीं है। यह "हैलो वर्ल्ड!" एक एप्लिकेशन जो दिखाता है कि इन उपकरणों का उपयोग करके क्या हासिल किया जा सकता है।

ब्राउज़र

चूंकि हमें HTML पार्सिंग की आवश्यकता नहीं है, इसलिए हम Qt5, QML और C ++ में अपना स्वयं का ब्राउज़र लिखेंगे। हमारे ब्राउज़र को बैक-एंड एप्लिकेशन के साथ बातचीत करनी चाहिए और स्क्रीन पर जानकारी प्रदर्शित करनी चाहिए।

ब्राउज़र वर्कफ़्लो:

• एड्रेस बार में, संसाधन का URL टाइप करें और एंटर दबाएँ
• HTTP अनुरोध का उपयोग करके हार्ड ड्राइव पर qml फ़ाइल लोड करें
• HTTP अनुरोध का उपयोग करके, qml फ़ाइल के लिए डेटा लोड करें
• लोडर का उपयोग करके qml फ़ाइल प्रदर्शित करें

TabComponent.qml

 ... TextInput { onAccepted: { var result = siteLoader.loadSite(addressIpt.text) if (result === LoadResultType.SUCCESS) { var props = siteLoader.loadProperties(addressIpt.text) var qmlPath = siteLoader.getMainQmlPath(addressIpt.text) pageLoader.setSource(qmlPath, props) } else { ... } } } ... Loader { id: pageLoader } 

यहाँ siteLoader C ++ वर्ग का एक उदाहरण है जिसे qml में आयात किया जाता है। यह ब्राउज़र लॉजिक को लागू करता है।

TextInput ब्राउज़र में एड्रेस बार का एक घटक है। जब आप एंटर दबाते enter , तो onAccepted विधि को onAccepted और साइट लोडिंग लॉजिक निष्पादित किया जाता है।

QML में नेटवर्क पर फ़ाइल प्रदर्शित करने की क्षमता है, लेकिन मुझे नहीं लगता कि यह एक अच्छा तरीका है। भविष्य में, आप संस्करण को स्क्रू कर सकते हैं, और यदि संस्करण मेल खाते हैं तो फ़ाइल को डाउनलोड न करें, लेकिन जो है उसका उपयोग करें।

वह पूरा ब्राउज़र है। चलो बैक-एंड और UI पर चलते हैं।

बैक-एंड और यूआई

बैक-एंड और UI सीधे हमारे वेब एप्लिकेशन हैं। क्यूएमएल में हम यूआई भाग लिखेंगे, और बैक-एंड spring boot में लिखा जाएगा, क्योंकि मैं जावा प्रोग्रामर हूं। पहली चीज जो हमें चाहिए वह है हमारे इंटरफ़ेस के विवरण के साथ एक qml फ़ाइल।

main.qml

 import QtQuick 2.0 Rectangle { color: "lightgray" property alias textValue: helloText.text Text { id: helloText anchors.horizontalCenter: parent.horizontalCenter font.pointSize: 24 } } 

यहाँ सब कुछ बहुत सरल है।

 property alias textValue: helloText.text 

text संपत्ति को खींचने के लिए इस पंक्ति की आवश्यकता है ताकि आप इसे Loader में डाल सकें।
अब दो समापन बिंदु जोड़ें:

 @RestController public class HelloController { @GetMapping( value = "/main.qml", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE) public byte[] mainQml() throws IOException { ClassPathResource resource = new ClassPathResource("main.qml"); return IOUtils.toByteArray(resource.getInputStream()); } @GetMapping( value = "/getProperties", produces = MediaType.APPLICATION_JSON_VALUE) public Object getProperties() { return "{\"textValue\": \"Hello World!\"}"; } } 

पहला अंत-बिंदु qml-file लौटाएगा, और दूसरा - आवश्यक डेटा। क्लासपैथ में फाइल स्टोर करना सबसे अच्छा उपाय नहीं है। इसके अलावा, QML अनुप्रयोगों में कई qml और js फाइलें हो सकती हैं। लेकिन हमने इसे सादगी के लिए किया।

नतीजतन, हम प्राप्त करते हैं:

पेशेवरों और विपक्ष

आइए अब इस दृष्टिकोण के पेशेवरों और विपक्षों को देखें

आकर्षण आते हैं

• क्लाइंट यूआई कोड अपेक्षाकृत सरल है। उदाहरण के लिए, हमें समान ऊंचाई के 2 कॉलम बनाने के लिए किसी भी CSS हैक्स का उपयोग करने की आवश्यकता नहीं है।
• ग्राफिक डिजाइनर क्यूटी क्रिएटर में यूआई विकास किया जा सकता है
• संभवतः एप्लिकेशन गति HTML से बहुत अधिक होगी
• डेस्कटॉप यूआई घटकों का उपयोग करना

विपक्ष

• दूसरा ब्राउज़र हे RLY? जब तक सुरक्षा समस्या हल नहीं हो जाती, तब तक कोई भी कोड को मुख्यधारा के ब्राउज़रों में शामिल नहीं करेगा, और कोई भी "अलग प्रकार की साइटों" के लिए दूसरा ब्राउज़र स्थापित नहीं करेगा।
• सुरक्षा। अब वह बस अनुपस्थित है। आप एक पृष्ठ बना सकते हैं जो हार्ड ड्राइव को प्रारूपित करता है।
• उत्पादन समाधान के लिए, आपको सौ प्रश्नों को हल करने की आवश्यकता है: मानक, सत्र, डेटा कैशिंग, सुरक्षा, आदि।
• सब कुछ अपनी प्रारंभिक अवस्था में है
• यूआई घटकों की एक लाइब्रेरी की कमी, वेब एप्लिकेशन बनाने के लिए तेज

अब तक, प्लसस की तुलना में बहुत अधिक मिन्यूज़ हैं। खैर, यह समझ में आता है, यह सिर्फ एक प्रोटोटाइप है, जो कुछ दिनों में मेरे घुटनों पर लिखा गया था। लेकिन सभी समस्याएं हल हो जाती हैं, कम से कम मुझे गंभीर ब्लॉकर्स नहीं दिखाई देते हैं।

फिर यह लेख, आप क्यों पूछते हैं।

मुझे इंटरनेट पर कुछ भी समान नहीं मिला, शायद मैं बुरी तरह से देख रहा था, और ऐसा ही कुछ पहले से मौजूद है। या किसी को इसकी जरूरत ही नहीं है। किसी भी मामले में, मैं आपसे प्रतिक्रिया सुनना चाहता हूं, और उनसे यह समझने के लिए कि क्या यह व्यवसाय करने के लायक है।

साधन

• ड्रेको वेब ब्राउज़र
• जावा हैलो ऐप

PS मैं यह नोट करना चाहता हूं कि यह विधि QmlWeb से मूलभूत रूप से भिन्न है । QmlWeb , HTML + JS कोड qml फ़ाइल से QmlWeb है और ब्राउज़र में प्रस्तुत किया जाता है।