JavaFX WebView (HTML / JS) - डेस्कटॉप एप्लिकेशन विकसित करने के लिए वेब प्रथाओं का उपयोग करें

हमारे आवेदन के लिए मूल UI फ्रेमवर्क को JavaFX चुना गया था। JavaFX ने बहुत अच्छा काम किया है। उसी लेख में, हम एक JavaFX घटक - WebView पर ध्यान केंद्रित करना चाहते थे।

हमारे एप्लिकेशन को विकसित करते समय - COLT इंटरफ़ेस - हमने उस दृष्टिकोण का उपयोग किया जो डेवलपर्स के बीच लोकप्रियता प्राप्त कर रहा है जब जावास्क्रिप्ट के HTML में कुछ यूआई घटक लागू होते हैं।

एचटीएमएल / जेएस-आधारित घटक एक नियमित जावा वर्ग, लेआउट के साथ एक नियमित जावाएफएक्स घटक है - एचबीएक्स या सिर्फ पेन, जिसमें वेबव्यू घटक का एक उदाहरण है।

JavaFX में webkit को तुरंत कैसे करें और HTML को कैसे लोड करें

WebView webView = new WebView(); WebEngine engine = webView.getEngine(); engine.load(this.getClass().getResource("html/webview.html").toExternalForm()) 

हमें अपने आवेदन में वेब तकनीक का उपयोग करने में क्या मिला।

टर्नकी समाधान के टन

jQuery, D3 हमारे लगभग सभी कार्यों को कवर करता है। हमें एक तैयार समाधान की आवश्यकता है - हम 5 मिनट में Google के माध्यम से ढूंढते हैं। यह बहुत अच्छा है कि संपूर्ण इंटरनेट इंटरफ़ेस तत्वों के एनालॉग के साथ क्षमता से भरा है। और सब कुछ पब्लिक डोमेन में है। आप विचार में झाँक सकते हैं और उसका क्रियान्वयन कर सकते हैं।

सस्ता

जावा में, हमने जेएस / एचटीएमएल में जो लागू किया है, उसे लिखना मुश्किल होगा।

उदाहरण के लिए, यह घटक पथ जोड़ने के लिए है। एक आधार के रूप में, हमने टैग के लिए इंजन लिया और अच्छी तरह से "इसे बंद कर दिया"। यह बहुत ही स्मार्ट और अच्छी बात है। "टैग" मोड में संपादित करने में सक्षम, और डबल-क्लिक करके यह अभी भी आपको पाठ के साथ काम करने की अनुमति देता है। क्लिपबोर्ड के साथ काम करें।



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

दूसरा उदाहरण लॉग-व्यू है।



पहले, हम ListView के आधार पर एक घटक बनाना चाहते थे। हमें स्किनिंग के साथ कोई विशेष समस्या नहीं हुई, लेकिन फिर भी, उपयोगकर्ताओं द्वारा वास्तविक उपयोग के लिए घटक अनुपयुक्त हो गया। उदाहरण के लिए, पाठ के रूप में लॉग का चयन करना असंभव था, एक बार में कई ब्लॉक, घटक के कार्यान्वयन ने काफी मात्रा में कोड में फैलने की धमकी दी। HTML घटक हल्का और एक्स्टेंसिबल है। यह ध्यान दिया जाना चाहिए कि JavaFX DOM को रेंडर करने के लिए GPU का उपयोग करता है, इसलिए यह घटक काफी उत्पादक है। हम लॉग, फिल्टर आदि द्वारा खोज कर घटक का विस्तार करने की योजना बना रहे हैं। हम जावास्क्रिप्ट / सीएसएस का उपयोग करके यह सब लागू करने की योजना बनाते हैं।

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

हमने अपने लिए निम्न योजना विकसित की है - हम इसे JavaFX घटकों के माध्यम से करने की कोशिश कर रहे हैं, और यदि हम "एक दीवार में चलते हैं" या कार्यान्वयन अनावश्यक रूप से जटिल है, तो हम HTML में लिखते हैं। इस दृष्टिकोण ने हमारे विकास को बहुत तेज किया है।

क्रॉस platfomennost

JavaFX में वेबव्यू इंजन एक वेबकिट है। किसी भी प्लेटफ़ॉर्म पर समान काम करता है। हमने व्यावहारिक रूप से क्रॉस-प्लेटफॉर्म पर समय नहीं बिताया।

जावास्क्रिप्ट पुल

जावा-जावास्क्रिप्ट का एक गुच्छा, उनके बीच एक पुल आपको HTML से जावा वर्ग के तरीकों से कॉल करने की अनुमति देता है, साथ ही जावा से जावास्क्रिप्ट कोड भी कहता है। जावा कोड का एक सरल उदाहरण:

 private void clear() { JSObject windowObject = (JSObject)webView.getEngine().executeScript("window"); windowObject.call("test", new ArrayList(1, 2, 3)); } 

और यह जावास्क्रिप्ट कोड जो डेटा लेता है और ArrayList जावा विधियों को कॉल करता है -

 function test(list){ console.log("list.size() - " + list.size();//3 console.log("list.get(0) - " + list;//1 } 

उदाहरण, निश्चित रूप से, पूरी तरह से वास्तविक नहीं है, सिंथेटिक्स, लेकिन यह स्पष्ट है कि तरीकों को बुलाया जाता है और डेटा प्राप्त होता है।

Html लोड करते समय, आप सीधे विंडो ऑब्जेक्ट में एप्लिकेशन के लिए एक लिंक जोड़ सकते हैं।

 JSObject windowObject = (JSObject) webView.engine.executeScript("window"); windowObject.setMember("app", this); 

और जावा कोड को जावास्क्रिप्ट कोड से कॉल करें -

 app.addData($("my-input").val()); 

अधिक सही (सुरक्षित) दृष्टिकोण जावा वातावरण में एक विशेष वस्तु बनाना है जो एक्सेस को प्रतिबंधित करता है और जावास्क्रिप्ट को एप्लिकेशन में केवल "अनुमत" विधियों को कॉल करने की अनुमति देता है।

 windowObject.setMember("app", new JSBridge(){ public myMethod(){ MyApp.this.myMethod(); } }); 

जेएस "अलर्ट" के माध्यम से एक बंडल का एक और उदाहरण। हमें "लोड" html को पकड़ने की आवश्यकता है - पूर्ण आवेदन आरंभीकरण। अन्य सभी तरीके इतने विश्वसनीय नहीं थे। हमने क्या किया है?

जावास्क्रिप्ट के माध्यम से जावास्क्रिप्ट में हमेशा की तरह:

 $(function(){ alert("command:ready"); }); 

जावा में, हमने webview.engine के लिए "onAlert" हैंडलर जोड़ा है और अब हम यह सुनिश्चित करने के लिए जानते हैं कि HTML लोड और आरंभीकृत है।

 engine.onAlert = new EventHandler<WebEvent<String>>() { @Override void handle(WebEvent<String> event) { if("command:ready".equals(event.getData())){ //TODO: initialize } } } 

कोड का पुन: उपयोग

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

जावाएफएक्स में HTML / JS के साथ काम करते समय हमें किन कठिनाइयों का सामना करना पड़ा?

पहला वाला। दस्तावेज़ लोडिंग जीवन चक्र। पेज पूरी तरह से लोड होने के बाद ही जेएस में तरीकों को बुलाया जा सकता है, प्रलेखन एक तरीका सुझाता है - जावा में ट्रैक करने के लिए पेज राज्य परिवर्तन की घटना। यह दृष्टिकोण काफी छोटा था। जैसा कि मैंने पहले उल्लेख किया था, HTML पक्ष पर "लोड" घटना के बंडल और जावा की तरफ "अलर्ट" के अवरोधन ने इस समस्या को हल किया।

दूसरी समस्या जो हमारे खून को पी जाती है, एक ही समय में वेबव्यू के साथ विभिन्न घटकों में कई जावास्क्रिप्ट कार्यों के लिए कॉल के साथ glitches है। इसके अलावा, इस तरह की बग काफी हाल ही में सामने आई और यह अनुकूलन के समान है जो कि JavaFX में वेबकिट इंजन में जोड़ा गया था। किसी भी मामले में, आप स्क्रैच से शाब्दिक रूप से जावास्क्रिप्ट में अनंत पुनरावृत्ति के बारे में एक त्रुटि प्राप्त कर सकते हैं। यह समस्या काफी आसानी से हल हो गई है - हम Platform.runLater () का उपयोग करके जावा से जावास्क्रिप्ट कॉल लपेटते हैं।

तीसरी समस्या। डिबग और लॉगिंग।
काम के पहले चरण में, जब प्रोटोटाइप होता है और आप केवल HTML / JS के साथ काम करते हैं, तो आप इसे बस ब्राउज़र में टेस्ट कर सकते हैं। जावा के साथ एकीकरण के चरण में, आपका कोड बस सही वातावरण के बिना काम करना बंद कर देता है। और आप तेजी से जावा अनुप्रयोग का निर्माण शुरू कर रहे हैं ताकि जावास्क्रिप्ट में कार्यक्षमता का परीक्षण किया जा सके। और जावा अनुप्रयोगों का निर्माण और इसके लॉन्च की प्रतीक्षा के कुछ सेकंड हैं। इतने लंबे भार से बचने और समय बर्बाद न करने के लिए हमने किन तकनीकों का उपयोग किया?

सरल और स्पष्ट दो - कुंजी संयोजन का उपयोग करके पृष्ठ का "पुनः लोड करें" जोड़ें। HTML / CSS / JS को सही किया - F5 दबाया - WebView सामग्री पुनः लोड की गई:

 $(document).keydown(function (e) { if(e.keyCode == 116 /*F5*/){ location.reload(); } }); 

लेकिन एक त्वरित "ताज़ा" के अलावा हमें लॉग देखने की आवश्यकता होगी।
फायरबग लाइट को जोड़ने के लिए एक काफी सरल उपाय था -

 <script type='text/JavaScript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> 

और हां, जैसे ही हमारे आवेदन ने "सांस ली" और HTML / JS के लिए लाइवकोडिंग अर्जित की, हमने COLT को विकसित करने के लिए COLT का उपयोग करना शुरू कर दिया। फिलहाल, हमारे एप्लिकेशन की कार्यक्षमता अधिकांश मामलों को कवर करती है - हमें अब फायरबग लाइट की आवश्यकता नहीं है। लॉग, लाइव अपडेट, रिमोट टेस्टिंग, लाइव कोडिंग। लाइवकोडिंग, हमारी राय में, डिबग की जगह ले सकता है, लेकिन उपयोगकर्ता पूछते हैं, और हम "ब्रेकपॉइंट्स के साथ वास्तविक डिबग" भी स्क्रू करेंगे।

कैसे जुड़ें? बस अपने HTML दस्तावेज़ में निम्न कोड जोड़ें

 var url = "http://<address>:<port>/webview.html"; if (location.href != url) { location.href = url } 

जहाँ url वह पता है जिस पर COLT परिवर्तित पृष्ठ को लॉन्च करता है। उसे जानना आसान है। हम COLT प्रोजेक्ट बनाते हैं, हमारे पेज के लिंक को इंगित करते हैं - "मुख्य दस्तावेज़" और सत्र शुरू करें - "हरी बिजली" पर क्लिक करें।



पेज एक ब्राउज़र में खुलेगा। इसे पेज पर कॉपी करें और हमारे जेएस कोड में पेस्ट करें। ब्राउज़र विंडो बंद करें। अब JavaFX एप्लिकेशन को चलाएं। हम पृष्ठ की सामग्री, जावास्क्रिप्ट को बदलने की कोशिश कर रहे हैं, और लाइवकोडिंग जावाएफ़एक्स एप्लिकेशन में सीधे काम करेगा।

नए संस्करण में, सेटिंग्स में, "उन्नत" ब्लॉक में, हमने इस स्निपेट के साथ एक विशेष टेक्स्ट फ़ील्ड जोड़ा। प्रोजेक्ट शुरू किए बिना, आप इस कोड को सीधे COLT सेटिंग्स से कॉपी कर सकते हैं।



लॉग COLT विंडो में दिखाई देंगे। ताकि अगली बार कॉल्ट ब्राउज़र को न खोले, लेकिन आपके एप्लिकेशन को लॉन्च करने पर, आप ब्राउज़र को लॉन्च करने के लिए नहीं बल्कि कंसोल से लॉन्च करना चुन सकते हैं। हमारे प्रोजेक्ट में, हमने बस हमारे रन-कॉन्फ़िगरेशन IDEA के आउटपुट से टेक्स्ट को कॉपी किया और इस कॉल को COLT कंसोल लंचर में जोड़ा।





अब, जब आप "हरी भौं" पर क्लिक करते हैं, तो जावा एप्लिकेशन विंडो लॉन्च की जाएगी।

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

कोड परिवर्तन घटना में हैंडलर फ़ंक्शन को जोड़ना अच्छा अभ्यास था।

 //@code-update function live(){ console.log("live update"); } 

@ कोड-अपडेट एनोटेशन हमारे एएसटी ट्रांसफ़ॉर्म द्वारा इंटरसेप्ट किया जाता है और एक श्रोता को कोड अपडेट इवेंट में जोड़ा जाता है।

ऐसे हैंडलर के साथ काम करने का एक विशिष्ट मामला कोड में कार्यों को कॉल करना है (जो कि हम आमतौर पर फायरबग कंसोल को लिखते हैं)। जब एप्लिकेशन पहले से चल रहा हो तो आप मान बदल सकते हैं या फ़ंक्शन को कॉल कर सकते हैं। कोड जोड़ा गया, सहेजा गया - कोड निष्पादित है।
इसके अलावा, यह "ट्रेस" करने के लिए सुविधाजनक है, डेटा प्रदर्शित करें जिसका मूल्य आपको "रनटाइम" में जानना होगा, बिना कोड को रोकें - आप बस उन्हें कंसोल पर प्रदर्शित कर सकते हैं।

ग्रूवी

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

योजनाओं

हमने अपने डेस्कटॉप एप्लिकेशन के विकास में जिस दृष्टिकोण का उपयोग किया, हमने मोबाइल विकास के लिए आवेदन करना शुरू कर दिया। हम PhoneGap + COLT का उपयोग करते हैं और मामला व्यावहारिक रूप से JavaFX + HTML + COLT से अलग नहीं है।

हमने PhoneGap को चुना, न कि किसी अन्य प्लेटफॉर्म को, क्योंकि डेस्कटॉप प्रोजेक्ट में पहले से तैयार बहुत सारी चीजें पहले ही जमा हो चुकी थीं, और उन्हें फिर से किसी अन्य प्लेटफॉर्म पर फिर से लिखना अव्यावहारिक लगने लगा। यदि हमारे एप्लिकेशन को PhoneGap को छोड़ने की आवश्यकता है, तो हम एप्लिकेशन के भाग को "मूल" पर फिर से लिखेंगे, लेकिन हम HTML / JS में लिखी गई सभी कार्यक्षमता को नहीं खोएंगे। वे बस अलग तरह से शुरू करेंगे।

Codeorchestra.com परियोजना स्थल