पंख - मोबाइल और डेस्कटॉप अनुप्रयोगों के लिए स्टार-आधारित यूआई फ्रेमवर्क

इस पोस्ट को लिखने का कारण पंख यूआई फ्रेमवर्क के एक नए संस्करण की रिलीज था ।

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

पंख उपयोगकर्ता इंटरफ़ेस घटकों का एक पुस्तकालय है जो स्टर्लिंग फ्रेमवर्क के माध्यम से GPU त्वरण की सभी विशेषताओं का उपयोग करता है। लाइब्रेरी में मोबाइल और डेस्कटॉप एप्लिकेशन के लिए तेज़, हल्के और आसानी से एक्स्टेंसिबल UI नियंत्रण हैं।

पंख खुला स्रोत है और एक तरफ डेवलपर्स के समुदाय द्वारा समर्थित है और दूसरी तरफ एडोब है। इस तरह की सहजीवन उत्पाद विकास के लिए आदर्श स्थिति प्रदान करता है, "जब सबसे ऊपर हो सकता है और बॉटम चाहते हैं।" तकनीकी रूप से, यह रूपरेखा ठोस और सिद्ध स्टारलिंग नींव पर निर्भर करती है। जिसके बारे में आपको समग्र रूपरेखा और इस ढांचे की ताकत को समझने के लिए कुछ शब्द निश्चित रूप से कहने चाहिए।

Starling क्या है?

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

स्टार्लिंग फ्रेमवर्क को फ्लैश प्लेयर एपीआई को ध्यान में रखकर बनाया गया है, यह स्टेज 3 डी एपीआई से एक उत्कृष्ट स्तर प्रदान करता है, और साथ ही साथ एएस 3 डेवलपर से परिचित संरचनाओं का उपयोग करता है। यहां तक ​​कि शुरुआती AS3 डेवलपर के लिए भी प्रवेश का समय न्यूनतम है।



उपरोक्त संक्षेप में, हमें गेम लिखने के लिए, कम से कम संभव समय में, विभिन्न प्लेटफार्मों पर एक उत्कृष्ट, विचारशील उपकरण मिलता है और ताकि यह धीमा न हो। स्टारलिंग में खेल बहुत ही शानदार हैं, मुझे लगता है कि सभी ने रोवियो के पक्षियों को खेला।

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

पंख द्वारा स्टेज 3 डी यूआई

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

AS3 डेवलपर के लिए, ढांचे का उपयोग करने की शुरुआत त्वरित और दर्द रहित है। प्रोजेक्ट में लाइब्रेरी जोड़ें और कोड पर जाएं।

परिणाम मैं किसी तरह हैलो वर्ल्ड प्राप्त करना चाहता हूं:



मान लीजिए कि आप पहले से ही जानते हैं कि स्टार्लिंग का उपयोग और आरंभ कैसे करें, और तुरंत पंख पर जाएं। निम्नलिखित मुख्य वर्ग का एक उदाहरण है, जिसे हम Starling शीट के मूल प्रदर्शन के रूप में उपयोग करेंगे।

package feathers.examples.helloWorld { import feathers.controls.Button; import feathers.controls.Callout; import feathers.controls.Label; import feathers.themes.MetalWorksMobileTheme; import starling.display.Sprite; import starling.event.Event; public class Main extends Sprite { public function Main() { this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler ); } protected var button:Button; protected function addedToStageHandler( event:Event ):void { } } } 

इसके अलावा, अधिकांश कोड addedToStageHandler() हैंडलर में होंगे।
सबसे पहले, हम ADDED_TO_STAGE ईवेंट से सदस्यता समाप्त करेंगे और विषय इनिशियलाइज़ेशन जोड़ेंगे:

  protected function addedToStageHandler(event:Event):void { this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); new MetalWorksMobileTheme(); } 

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

अब बटन बटन जोड़ें:

 this.button = new Button(); this.button.label = "Click Me"; this.addChild( button ); 

और एक नल / क्लिक हैंडलर:

 this.button.addEventListener( Event.TRIGGERED, button_triggeredHandler ); 

ईवेंट हैंडलर पर क्लिक करें, कॉलआउट पॉपअप घटक की उपस्थिति जोड़ें:

 protected function button_triggeredHandler( event:Event ):void { const label:Label = new Label(); label.text = "Hi, I'm Feathers!\nHave a nice day."; Callout.show( label, this.button ); } 

यह ध्यान दिया जाना चाहिए कि पंखों में एक रीड्रा सत्यापन प्रणाली है, यह आपको केवल आवश्यक होने पर वस्तुओं को फिर से तैयार करने की अनुमति देता है। यदि हम किसी वस्तु पर कई गुण लगाते हैं, तो हम केवल एक बार ही वस्तु को पुनः प्राप्त करके बहुत से पैसे बचा सकते हैं।
इस मामले में, एक भी संपत्ति हमारे बटन पर लागू नहीं की गई थी; हम सत्यापन को बाध्य करेंगे:

 this.button.validate(); 

और हमारे बटन को केन्द्रित करें:

 this.button.x = (this.stage.stageWidth - this.button.width) / 2; this.button.y = (this.stage.stageHeight - this.button.height) / 2; 

जो हुआ वह यहाँ देखा जा सकता है ।

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