GWT वेबसाइट लिखना: भाग 1

शुभ दोपहर महिलाओं और सज्जनों

जीडब्ल्यूटी (Google वेब टूलकिट) के विषय पर एचडब्ल्यूटी पर बहुत सारे लेख नहीं हैं, और अधिकांश भाग के लिए उन्हें कुंजी में लिखा गया है "किस तरह का मजाक है, पता नहीं कैसे, कुछ भी समझ में नहीं आता है।" इसके अलावा, जैसा कि मेरे अनुभव से पता चलता है, अधिकांश GWT प्रोग्रामरों ने कुछ भी नहीं सुना है, और जिन्होंने सुना है उन्हें लगता है कि वह "हैलो वर्ल्ड" से अधिक सक्षम नहीं है। मैं आपको यह दिखाने की कोशिश करूंगा कि इस अद्भुत ढांचे की मदद से आप उन चीजों को कर सकते हैं जो ज्यादातर जावास्क्रिप्ट प्रोग्रामर बस नहीं कर सकते।

एक छोटे से पाचन शुरू करने से पहले, जैसा कि सवाल "क्यों?" निश्चित रूप से ध्वनि होगा। मैंने यह साइट GWT पर लिखी है, क्योंकि मेरे पास कोई विकल्प नहीं था। मैं एचटीएमएल, सीएसएस, पीएचपी और जावास्क्रिप्ट से परिचित था (बहुत) वास्तव में (ज्यादातर जावा प्रोग्रामर की तरह), लेकिन एक विचार और इच्छा थी। लेकिन क्योंकि मेरे पास जो था उसका मैंने इस्तेमाल किया और यह पता चला कि यह बहुत बुरा नहीं था।

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



तो, हमने शुरुआत की

हम श्रोताओं को तत्वों पर लटकाते हैं

इसलिए, किसी भी GWT एप्लिकेशन में कम से कम एक HTML पृष्ठ और javascripts का एक गुच्छा होता है। आइए इस पृष्ठ को देखें। जैसा कि अनुमान लगाना मुश्किल नहीं है, सभी सबसे दिलचस्प चीजें "सामग्री" दिवा में होंगी। पूरे हेडर और फुटर को कट्टर बना दिया जाता है, अर्थात सांख्यिकीय रूप से, और अनिवार्य रूप से GWT के साथ कुछ भी नहीं करना है (जावास्क्रिप्ट बंद करें और समझें कि मेरा क्या मतलब है)। लेकिन बटन पर क्लिक GWT द्वारा नियंत्रित किया जाता है। यह कैसे किया जाता है? प्रत्येक div (बटन) के लिए एक श्रोता लटका दिया जाता है:

final Element element = DOM.getElementById("homeSite"); DOM.sinkEvents(element, Event.ONCLICK); DOM.setEventListener(element, new EventListener() { public void onBrowserEvent(Event event) { if (DOM.eventGetType(event) == Event.ONCLICK) { //   } } }); 

यह सब इतना आसान है। मुझे लगता है कि इस कोड में सब कुछ स्पष्ट है, यह केवल लाइन के अपवाद के साथ हो सकता है:

 DOM.sinkEvents(element, Event.ONCLICK); 

इस लाइन की आवश्यकता है क्योंकि ब्राउज़र को बताता है कि अब से यह तत्व एक क्लिक के लिए उत्तरदायी है। यदि आप इस पंक्ति को बाहर फेंकते हैं, तो श्रोता को घटना के बारे में संकेत प्राप्त नहीं होगा, और आपके तर्क, तदनुसार, संसाधित नहीं किए जाएंगे। आपको बस इस तिपहिया को जानने की जरूरत है, तथ्य की बात के रूप में, हर जगह और हमेशा।

एक स्थिर HTML फ़ाइल डाउनलोड करें।

लेकिन मक्खी पर सभी सामग्री उत्पन्न नहीं होती है। उदाहरण के लिए, केंद्रीय पृष्ठ स्थिर HTML है। वह कैसे है? फायरबग आपको इसकी पुष्टि करेगा। यह आपको दिखाएगा कि startRu.html केंद्रीय पृष्ठ पर लोड किया गया है (या startDE.html यदि ब्राउज़र कहता है कि इसकी मूल भाषा जर्मन है)। यह कैसे किया जाता है?

 RequestBuilder requestBuilder = new RequestBuilder(RequestBuilder.GET, GWT.getHostPageBaseURL() + "start/start" + language.getAbkurzung() + ".html"); try { requestBuilder.sendRequest(null, new RequestCallback() { public void onResponseReceived(Request request, Response response) { if (response.getStatusCode() != 200) { Window.alert(language.getrror() + "!"); } else { HTML startHTML = new HTML(response.getText()); RootPanel.get(„content“).getElement().setInnerHTML(""); RootPanel.get(„content“).add(startHTML); } } public void onError(Request request, Throwable exception) { Window.alert(language.getError() + "!"); } }); } catch (RequestException ex) { Window.alert(language.getError() + "!"); } } 

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

पृष्ठों के बीच जाओ

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

 oldWidget.removeFromParent(); RootPanel.get(„content“).add(newWidget); 

उसी सिद्धांत से, सभी पॉप-अप दिखाई देते हैं।

मुझे लगता है कि यह एक शुरुआत के लिए पर्याप्त है।

इस पृष्ठ पर बहुत सारी दिलचस्प चीजें हैं, उदाहरण के लिए, साइट को स्थापित भाषा याद आती है, आगे और पीछे बटन काम करते हैं, साइट को गतिशील रूप से रूसी से जर्मन और इसके विपरीत अनुवाद किया जाता है (अनुवाद, जब पृष्ठ देखने से पहले साइट लोड होती है), एक बार लोड किए गए पृष्ठ कैश्ड है (देखें कि क्या यह उदाहरण के लिए पुनः लोड किया गया है startRu.html?)। जब आप "खरीदे गए" उत्पादों की तालिका में छोटे उत्पाद आइकन को इंगित करते हैं, तो आपको एक छोटा फोकस दिखाई देगा। एक तिपहिया, लेकिन अच्छा है। सुंदर टूलटिप्स जो पंजीकरण के दौरान त्रुटियों को दिखाते हैं। क्लाइंट पर फ़ील्ड की जाँच करना। फ़ील्ड जो केवल संख्या और बहुत कुछ स्वीकार करते हैं। एक उत्पाद "खरीदने" की कोशिश करें, एक लिंक प्राप्त करें और देखें कि क्या होता है। और आपको आश्चर्य है कि यह कैसे होता है?

और यह सब उस व्यक्ति द्वारा किया गया था, जिसके पास काम (अध्ययन / पत्नी / बच्चों) से खाली समय में व्यावहारिक रूप से HTML, सीएसएस और जावास्क्रिप्ट के बारे में कोई विचार नहीं था (और नहीं था) और यहां तक ​​कि दोस्तों के साथ बीयर पीने का भी समय था!

सवाल पूछें कि क्या आप रुचि रखते हैं कि यह या यह सुविधा कैसे लागू की जाती है।

इस सेवा को बढ़ावा देने के लिए मैंने किस तरह से प्रयास किया, इसकी कहानी भी बहुत दिलचस्प है।

और अब मैं आपको इस विषय का सही उद्देश्य बताऊंगा। मैं इस परियोजना के लिए लोगों / निवेशकों / भागीदारों की तलाश कर रहा हूं। किसी भी विचार, इच्छाओं, रचनात्मक आलोचना का स्वागत है।