DevExtreme: विजुअल स्टूडियो में एक क्रॉस-प्लेटफ़ॉर्म एचटीएमएल 5 व्यावसायिक अनुप्रयोग बनाएं

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

यह DevExtreme के बारे में है, विजुअल स्टूडियो 2010 और बाद के लिए टूलकिट।

DevExtreme में शामिल हैं:

1. PhoneJS के ऊपर उल्लेख किया गया।
2. चार्टजेज डेटा को देखने के लिए जावास्क्रिप्ट लाइब्रेरी।
3. विज़ुअल स्टूडियो के लिए प्रोजेक्ट टेम्पलेट।
4. एक क्रॉस-प्लेटफ़ॉर्म अनुप्रयोग बनाने के लिए एक विज़ार्ड।
5. विज़ुअल डिज़ाइनर विजुअल स्टूडियो में एकीकृत।
6. एक ब्राउज़र में एक एप्लिकेशन डिबगिंग के लिए एक मोबाइल डिवाइस का एक सिम्युलेटर।
7. QR कोड द्वारा डिवाइस पर त्वरित लॉन्च के लिए साधन
8. देशी कंटेनरों में पैकेजिंग अनुप्रयोगों के लिए उपकरण।

एक व्यावसायिक अनुप्रयोग आमतौर पर डेटाबेस प्लस व्यावसायिक तर्क के आसपास का इंटरफ़ेस है। कई वेब फ्रेमवर्क (रूबी ऑन रेल्स, Django, Yii, ASP.NET MVC और अन्य) में मौजूदा डेटा के आधार पर एप्लिकेशन फ्रेमवर्क को तुरंत बनाने के लिए मचान टूल शामिल हैं।

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

आइए प्रसंस्करण कार्यों के लिए एक सरल प्रणाली बनाने के उदाहरण का उपयोग करते हुए उनके काम को देखें।

एक OData सेवा बनाना

अच्छे अनुप्रयोगों में एक दृश्यपटल और एक बैकएंड होता है। बैकेंड तेजी से एक पतली सर्वर (उदाहरण के लिए, एक आरईएसटी सेवा) के रूप में बनाया जा रहा है। OData प्रोटोकॉल .NET डेवलपर्स के बीच लोकप्रिय है, इसलिए हमारा विज़ार्ड OData सेवा द्वारा लौटाए गए मेटा डेटा के आधार पर कोड उत्पन्न कर सकता है।

सामान्य तौर पर, किसी विज़ार्ड के माध्यम से एप्लिकेशन जेनरेट करते समय, आप किसी भी रेडीमेड OData सेवा का उपयोग CORS या JSONP सपोर्ट के साथ कर सकते हैं। हमारे उदाहरण में, हम DevExtreme 13.1 WCF OData सेवा परियोजना टेम्पलेट का उपयोग करके अपनी सेवा बनाएंगे , जो कि Entity Framework मॉडल (हमने CORS और JSONP के लिए समर्थन को जोड़ा है, साथ ही ImageStepProvider पर थोड़ी बेहतर मानक सेवा है)।

इसलिए, एक नया प्रोजेक्ट बनाएं। इसे कॉल करें, उदाहरण के लिए, CRM.DataService। समाधान के नाम के लिए, हम केवल CRM निर्दिष्ट करते हैं।



"डेटाबेस से उत्पन्न" चुनें।



"नया कनेक्शन" पर क्लिक करें।



उदाहरण के लिए, जाने-माने नॉर्थविंड को लें।

हम उन तालिकाओं का चयन करते हैं जिनकी हमें आवश्यकता है: श्रेणियाँ, ग्राहक, कर्मचारी, ऑर्डर विवरण, आदेश, जहाज, आपूर्तिकर्ता।



हो गया। आप पहले से ही ब्राउज़र में हमारी सेवा खोल सकते हैं (संदर्भ मेनू में ब्राउज़र में देखें) और सुनिश्चित करें कि सब कुछ ठीक काम करता है:



हम एप्लिकेशन की पीढ़ी के लिए आगे बढ़ते हैं।

अनुप्रयोग निर्माण

अब जब हमारे पास डेटा के साथ तैयार सेवा है, तो हमें DevExtreme 13.1 मल्टी-चैनल एप्लिकेशन टेम्पलेट का उपयोग करके एक नई परियोजना को जोड़ने की आवश्यकता है। फ़ाइल करें > जोड़ें > नई परियोजना ।



हम उन आवश्यक प्लेटफार्मों का चयन करते हैं जिन पर हमारे आवेदन को काम करना चाहिए। हम सब नोट करते हैं।

अगला, हम पूर्वनिर्धारित लेआउट में से एक को इंगित करते हैं। इसे SlideOut होने दें।



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

"डिस्कवर" पर क्लिक करके कनेक्शन की जांच करें। अब आप मॉडल और दृश्य उत्पन्न करने के लिए आवश्यक तालिकाओं का चयन कर सकते हैं।



कृपया ध्यान दें कि "व्यू जनरेट करें" कॉलम में, हमने केवल तीन एंटिटीज़ को चिह्नित किया है जिन्हें हम UI में उपयोग करना चाहते हैं। बाकी केवल डेटा के साथ काम करने के लिए आवश्यक है।

"दृश्य पीढ़ी विकल्प" अनुभाग में स्विच आपको विचारों के अलगाव की डिग्री का चयन करने की अनुमति देता है। हम सभी प्लेटफार्मों के लिए साझा दृश्य फ़ाइलों का उपयोग करने के लिए "साझा प्लेटफ़ॉर्म-स्वतंत्र प्रोजेक्ट में उत्पन्न विचार जोड़ें" को इंगित करेंगे, जिससे कोड दोहराव से बचा जा सके।

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

पीढ़ी पूरा करने के लिए समाप्त पर क्लिक करें।

परिणामस्वरूप, हमें निम्नलिखित परियोजनाएँ मिलती हैं:

• CRM.Mobile
• CRM.Desktop
• CRM.Shared
• CRM.Win8
• CRM.Win8Phone

उनके पास एक समान फ़ोल्डर और फ़ाइल संरचना है, आइए इसे थोड़ा और विस्तार से देखें:

• डेटा - केवल साझा परियोजना में मौजूद है, इसमें संस्थाओं (उत्पाद, श्रेणी, आदि) के लिए अवलोकन मॉडल शामिल हैं।
• js - पुस्तकालयों से फ़ाइलें (jQuery, नॉकआउट, PhoneJS, आदि),
• सीएसएस - मंच के अनुसार आवेदन को रंग देने के लिए निर्मित थीम शैली,
• लेआउट - पूर्वनिर्धारित लेआउट का एक सेट,
• दृश्य - एप्लिकेशन स्क्रीन (प्रत्येक स्क्रीन पर एक मार्कअप फ़ाइल और एक कोड फ़ाइल)

मूल में अनुक्रमणिका फ़ाइलें और कॉन्फ़िगरेशन फ़ाइलें हैं।

चलो CRM.Mobile प्रोजेक्ट शुरू करें और F5 दबाएं!

ब्राउज़र शुरू होता है और सिम्युलेटर में एप्लिकेशन खुलता है। इसमें, आप उत्पादों, आपूर्तिकर्ताओं और आदेशों के बारे में जानकारी देख और संपादित कर सकते हैं।



मैं विजुअल एलिमेंट्स (विगेट्स) पर थोड़ा ध्यान देना चाहूंगा जो कि परिणामी एप्लिकेशन में उपयोग किए जाते हैं।

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

इनपुट फ़ील्ड को निम्न विजेट द्वारा दर्शाया गया है:

• dxTextBox - पाठ डेटा के लिए,
• dxNumberBox - संख्याओं के लिए,
• dxSwitch - तार्किक मानों को बदलने के लिए (सही, गलत)
• dxLookup - सूची में से एक विकल्प के साथ डेटा प्रविष्टि।

विगेट्स की पूरी सूची प्रलेखन में पाई जा सकती है।

डिबगिंग

किसी विशिष्ट प्लेटफ़ॉर्म पर एप्लिकेशन के संचालन की जांच करने के लिए, सिम्युलेटर के साथ पृष्ठ के बाईं ओर एक पैनल प्रदान किया जाता है, जिसमें आप एप्लिकेशन थीम और सिम्युलेटर की त्वचा को बदल सकते हैं, उदाहरण के लिए, iOS7 पर या टिज़ेन पर दिन-प्रतिदिन की अपेक्षा। एंड्रॉइड और विंडोज फोन 8 के लिए थीम भी उपलब्ध हैं।

विषय स्विचिंग पैनल के तहत, क्लाउड प्रॉक्सी सर्वर के माध्यम से मोबाइल डिवाइस पर एप्लिकेशन को डीबग करने के लिए एक क्यूआर कोड होता है, जो डेवलपर की मशीन तक "भेदी" पहुंच बनाता है।

QR कोड में एक विशेष URL होता है जिसे डिवाइस के ब्राउज़र में या कूरियर एप्लिकेशन में उपलब्ध किया जा सकता है (जो iTunes और Google Play पर उपलब्ध है)। कूरियर के माध्यम से लॉन्च करना कार्यात्मक रूप से एक देशी पैकेज बनाने और फिर इसे स्मार्टफोन / टैबलेट पर स्थापित करने के समान है, लेकिन यह समय बचाता है।

अन्य प्लेटफ़ॉर्म के लिए एप्लिकेशन संबंधित प्रोजेक्ट्स में स्थित हैं और बस के रूप में लॉन्च किए गए हैं: CRM.Desktop ने एक ब्राउज़र लॉन्च किया है। CRM.Win8 ने विंडोज स्टोर एप्लिकेशन को पूर्ण स्क्रीन या एमुलेटर में लॉन्च किया है, और CRM.Win8Phone विंडोज फोन एमुलेटर में उपलब्ध है (बशर्ते कि आपके पास SDK स्थापित है)।



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

रूप में सुधार

नेविगेशन बार

आपकी आंख को पकड़ने वाली पहली चीज नेविगेशन पैनल में आइटम "ऑर्डर" और "शिपर्स" के लिए आइकन की कमी है। यह इस तथ्य से समझाया गया है कि मानक सेट में "ऑर्डर" और "शिपर्स" नाम के साथ कोई आइकन नहीं हैं (डेमो एप्लिकेशन किचन सिंक में एक पूरी सूची पाई जा सकती है)।

आदेशों के लिए, छवि "मनी", और आपूर्तिकर्ताओं के लिए उपयोग करना काफी संभव है - "कार"। navigation सरणी में crm.config.js फ़ाइल में CRM.Mobile परियोजना में ऐसा करने के लिए, आपको संबंधित ऑब्जेक्ट के लिए icon फ़ील्ड को बदलना होगा। आप iconSrc संपत्ति के माध्यम से अपनी खुद की तस्वीर सेट कर सकते हैं।

GitHub पर अलग देखें।

आदेश सूची

सभी आदेशों को निम्नलिखित श्रेणियों में बांटा जा सकता है:

• नए आदेश (नए) - आदेश जिनके लिए डिलीवरी की तारीख (शिप्डडेट) और प्रबंधक (कर्मचारी) इंगित नहीं किए गए हैं;
• प्रसंस्करण में आदेश (प्रगति में) - आदेश जिसके लिए डिलीवरी की तारीख निर्दिष्ट नहीं है, लेकिन प्रबंधक निर्दिष्ट है;
• भेज दिया आदेश - आदेश जिसके लिए एक डिलीवरी की तारीख का संकेत दिया गया है।

इन तीन समूहों को देखने के लिए dxTabs विजेट अच्छी तरह से अनुकूल है। इसे मार्कअप में जोड़ें। CRM.Saring प्रोजेक्ट से दृश्य / ऑर्डर / ऑर्डर। Xview फ़ाइल खोलने के लिए डबल-क्लिक करें, एक दृश्य संपादक खुल जाएगा।

सुनिश्चित करें कि वह सही प्रोजेक्ट और सही विषय पर सेट है:



टूलबॉक्स में हमें dxTabs विजेट मिलता है और इसे व्यू लेआउट पर खींचें।



गुणों में हम विजेट विकल्प बदलते हैं:

items: tabs ,
selectedIndex: selectedTabIndex
itemClickAction: handleTabClick



कोड आर्डर.जेएस के साथ फाइल में, हम समूहों में विभाजन के आदेशों के तर्क को लागू करते हैं। पूरा देखें

उत्पाद सूची

उत्पादों की सूची में अब केवल नाम हैं। उदाहरण के लिए, कीमतों को जोड़ना तर्कसंगत है, उदाहरण के लिए, $ 9.99 के प्रारूप में। ऐसा करने के लिए, दृश्य / उत्पाद / products.dxview में, मार्कअप बदलें :

 <div class="list-item" data-bind="text: Globalize.format(UnitPrice(), 'c')"></div> 

आपूर्तिकर्ता सूची

इस स्क्रीन पर, अधिक जानकारी के लिए, आप आपूर्तिकर्ताओं के संपर्क विवरण निर्दिष्ट कर सकते हैं।

नॉर्थविंड में प्रत्येक विक्रेता के लिए एक फोन नंबर है। हम इसका उपयोग करेंगे। संपर्क संख्या को shippers.dxview दृश्य में जोड़ें:

 <div class="list-item" data-bind="text: Phone"></div> 

आदेश की विस्तृत प्रस्तुति

यहां, ऑर्डर के बारे में सामान्य जानकारी के अलावा, ऑर्डर में शामिल उत्पादों को प्रदर्शित करना सुविधाजनक होगा। ऐसा करने के लिए, कोड ऑर्डर-details.js के साथ फ़ाइल के लिए ऑर्डर उत्पादों के लिए डेटा स्रोत जोड़ें:

 orderDetailsSource: { store: CRM.db.Order_Details, filter: ["OrderID", Number(params.id)], expand: "Product", paginate: false, map: function(item) { return new CRM.Order_DetailsViewModel(item); } }, 

उत्पादों की सूची के दृश्य प्रतिनिधित्व के लिए हम dxList विजेट का उपयोग करेंगे। यह दृश्य डिजाइनर या मैन्युअल रूप से उपयोग करके किया जा सकता है। परिणामस्वरूप, निम्न मार्कअप प्राप्त किया जाना चाहिए:

 <h2 class="dx-detail-item-label">Order items</h2> <div class="dx-fieldset order-details"> <div data-bind="dxList: { dataSource: orderDetailsSource, scrollingEnabled: false }" style="background: none;"> <div data-bind="dxAction: '#ProductDetails/{Product.ProductID}'" data-options="dxTemplate : { name: 'item' }"> <div data-bind="text: Product.ProductName"></div> <div> Quantity: <span data-bind="text: Quantity"></span> </div> <div> Total price: <span data-bind="text: TotalPriceFormatted"></span> </div> </div> </div> </div> 

पूरा देखें

दूसरी बात यह है कि Employee क्षेत्र में सूचना का प्रदर्शन है। कर्मचारी के नाम को इंगित करना अधिक सही होगा, न कि उसकी स्थिति (जनरेटर का अनुमानी असफल रूप से शीर्षक क्षेत्र का चयन)। इसे ठीक करने के लिए, Employee फ़ील्ड में आदेश-विवरण। Xview दृश्य में, data-bind="text: order.Employee.Title" को data-bind="text: order.Employee.LastName" . data-bind="text: order.Employee.LastName" ।

आदेश संपादन दृश्य - आदेश-edit.dxview और कोड ऑर्डर-एड .js के साथ फ़ाइल में समान परिवर्तन करना भी आवश्यक है। Employee फ़ील्ड के आदेश-विवरण। Xview में, LastName को displayExpr रूप में निर्दिष्ट किया जाना चाहिए, और employeesSource सोर्स ऑब्जेक्ट के आदेश-edit.js में, LastName का select फ़ील्ड में select ।

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

एक देशी पैकेज बनाएँ

DevExtreme का उपयोग करके एक मोबाइल एप्लिकेशन विकसित करने की अंतिम राग देशी पैकेज की असेंबली और डिवाइस पर इसकी स्थापना है।

DevExtreme आपको निम्नलिखित प्लेटफार्मों के लिए पैकेज बनाने की अनुमति देता है:

• आईओएस
• एंड्रॉयड
• विंडोज फोन 8
• Tizen
• फोनगैप बिल्ड

आइए एंड्रॉइड प्लेटफॉर्म के लिए हमारे ऐप को पैक करें। ऐसा करने के लिए, प्रोजेक्ट "CRM.Mobile" पर आपको राइट-क्लिक करना होगा और दिखाई देने वाले मेनू में "बिल्ड मूल पैकेज ..." का चयन करना होगा। उसके बाद, एक संवाद खुल जाएगा, जिसकी मदद से हम मूल पैकेज एकत्र करेंगे।

Android चुनें:



इसके बाद, आप Android के लिए मौजूदा डेवलपर प्रमाणपत्र का उपयोग कर सकते हैं, या एक नया जनरेट कर सकते हैं। एक नया प्रमाणपत्र बनाने के लिए, विजुअल स्टूडियो को व्यवस्थापक अधिकारों के साथ चलना चाहिए।



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



अगला, आप अन्य प्लेटफार्मों के लिए बनाने के लिए "अन्य पैकेज बनाएँ" या IDE पर लौटने के लिए "समाप्त करें" पर क्लिक कर सकते हैं।

परिणाम

हमने दिखाया कि DevExtreme का उपयोग करके विजुअल स्टूडियो में क्रॉस-प्लेटफ़ॉर्म एप्लिकेशन को जल्दी से कैसे बनाया जाए। IDE के लॉन्च से लेकर इंस्टॉलेशन पैकेजों की असेंबली तक, एप्लीकेशन स्टोर्स में डाउनलोड करने के लिए तैयार, हमने 15 मिनट से ज्यादा नहीं बिताए!

परिणामी समाधान ( GitHub पर उपलब्ध) में डेस्कटॉप कंप्यूटरों के लिए डेटा और व्यावहारिक परियोजना कंकालों की पहुंच के लिए एक REST सेवा और कई मोबाइल डिवाइस शामिल हैं - iPhone से Microsoft सरफेस तक।

"ओवरबोर्ड" ने बहुत सारी दिलचस्प चीजें छोड़ दीं , उदाहरण के लिए, हमने चार्टजेएस आरेखों के लिए दृश्य डिजाइनर के बारे में बिल्कुल भी बात नहीं की। हम निम्नलिखित लेखों में इसे ठीक करने की उम्मीद करते हैं, लेकिन अब हम एक बार फिर आधिकारिक DevExtreme पेज और DevExtreme Learning Center के लिंक प्रदान करेंगे ।