👩🏻‍💻 🎮 🧑🏻‍🤝‍🧑🏻 अभिव्यक्ति ब्लेंड + स्केचफ्लो में प्रोटोटाइप। भाग 3. नियंत्रण के साथ काम करना 🙌🏽 😌 🧑🏾‍🤝‍🧑🏻

हम स्केचफ्लो का उपयोग करके प्रोटोटाइप से निपटना जारी रखते हैं। पिछली श्रृंखला में:

आज हम नियंत्रण के साथ काम करने पर विचार करेंगे, और आदिम से शुरू करेंगे।

पुरातन

सबसे पहले, इस तथ्य के अलावा कि आप तैयार चित्रों को आयात कर सकते हैं, आप सीधे लेआउट ब्लेंड में लेआउट लेआउट के लिए कुछ आदिम आकर्षित कर सकते हैं (आयतों, रेखाओं और अंडाकार के अलावा, इसमें वक्र, तारांकन, तीर, त्रिकोण, कॉलआउट और कुछ अन्य हैं) पुरातन):

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

समान विकल्प, साथ ही ग्रिड सेल का आकार, मेनू टूल ⇒ विकल्प ⇒ आर्टबोर्ड के माध्यम से कॉन्फ़िगर किया जा सकता है

इसके अतिरिक्त, आपके निपटान में गाइड हैं (ग्रिड लेआउट के लिए), जिसका उपयोग वस्तुओं को व्यवस्थित करने के लिए भी किया जा सकता है:

कुल मिलाकर, बहुत जल्दी आप सामान्य मार्कअप (रचना) की पहचान कर सकते हैं। वैसे, गाइड दिलचस्प हैं कि वस्तुओं को उनसे जोड़ा जा सकता है, क्रमशः, गाइड की स्थिति को बदलकर आप रचना को बदल सकते हैं:

हम वास्तविक नियंत्रणों की ओर बढ़ते हैं;)

नियंत्रण

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

तकनीकी रूप से, आपके द्वारा उपयोग किए जाने वाले सभी नियंत्रण केवल नियंत्रण की तस्वीरें नहीं हैं, बल्कि काफी कार्यात्मक वस्तुएं हैं: बटन दबाए जाते हैं, चेकबॉक्स चिपकाए जाते हैं, सूची आइटम का चयन किया जाता है।

आप एसेट्स पैनल के माध्यम से दो तरह से तैयार नियंत्रण तक पहुँच सकते हैं:

निश्चित टैब (यदि यह नहीं है, तो आप इसे विंडो मेनू के माध्यम से जोड़ सकते हैं)
ड्रॉप डाउन पैनल

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

स्क्रीन पर नियंत्रण जोड़ने के लिए, बस इसे कार्यस्थान पर खींचें या एसेट्स में वांछित नियंत्रण का चयन करें और इसे कार्यक्षेत्र में "ड्रा" करें। नियंत्रणों का एक उदाहरण नीचे दिया गया है (ये सभी उपलब्ध तैयार नियंत्रण नहीं हैं!):

इस संग्रह से आप आसानी से कुछ उपयोगी एकत्र कर सकते हैं, उदाहरण के लिए, लॉगिन फ़ॉर्म:

शैलियाँ और स्केच शैलियाँ

डिफ़ॉल्ट रूप से, सभी नियंत्रणों में एक मानक सिल्वरलाइट शैली होती है (जैसा कि ऊपर की तस्वीरों में है), हालांकि, स्केचफ्लो परियोजनाओं के लिए एक विशेष स्केच (तैयार शैली) भी उपलब्ध है।

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

स्केच नियंत्रण में " -Sketch " प्रत्यय है। स्केचिंग स्टाइल को संदर्भ मेनू एडिट टेम्प्लेट (या एडिट स्टाइल) ⇒ रिसोर्स लागू करें के माध्यम से कई सामान्य नियंत्रणों पर भी लागू किया जा सकता है। उदाहरण के लिए, ऊपर स्केच फॉर्म इस तरह दिखाई देगा:

स्केचिंग शैली प्राइमेटीज़ के लिए भी उपलब्ध है (आस्ति नियंत्रण पुस्तकालय में आकृतियाँ ⇒ स्केचशैप देखें)। स्केचफ्लो के साथ मिलकर विशेष बक्सटन स्केच फोंट वितरित किए जाते हैं, जिसमें सिरिलिक वाले भी शामिल हैं।

लेआउट (मॉक-अप)

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

स्केचफ्लो पर किसी भी परियोजना में मॉकअप जोड़ने के लिए, आपको स्टार्टअप पर उपयुक्त पुस्तकालय को जोड़ने की आवश्यकता है। यह परिणाम प्राप्त करने के लिए शायद केवल मुश्किल काम है :)

आपको Microsoft.Expression.Prototyping.MockupsSL.dll लाइब्रेरी और संबंधित डिज़ाइन फ़ोल्डर की आवश्यकता है । वे यहां उदाहरण के लिए, उदाहरण के साथ फ़ोल्डर में पाए जा सकते हैं

C: \ Program Files \ Microsoft अभिव्यक्ति \ Blend 4 \ Samples \ en \ MockupDemonministration.zip \ MockupDemoneem \ Lbooks \ Silverlight \ Debug या, यदि उदाहरण अलग-अलग अनपैक किए गए हों, तो दस्तावेज़ \ Expression \ Blend 4 \ Samples \ MockupDemon निष्पादन \ _ MockupDemon निष्पादन \ _ से कुछ अलग। \ पुस्तकालयों \ Silverlight \ Debug (और इसी तरह WPF के लिए - आपको .NetFramework के लिए एक संस्करण की आवश्यकता है)।

फिर उन्हें यहां रखा जाना चाहिए: C: \ Program Files \ Microsoft अभिव्यक्ति \ Blend 4 \ Lbooks \ Silverlight \ v4.0_

उसके बाद, एसेट्स कंट्रोल लाइब्रेरी में, मॉकअप आपके लिए उपलब्ध होगा (संबंधित वस्तुएं " मॉकअप " के साथ समाप्त होती हैं), उनके पास हरे रंग के आइकन हैं:

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

कस्टम नियंत्रण (उपयोगकर्ता नियंत्रण)

तैयार नियंत्रणों के अलावा, आप पुन: उपयोग के लिए अपना स्वयं का निर्माण भी कर सकते हैं। ऐसा करने के लिए, बस ऑब्जेक्ट्स के एक समूह का चयन करें और संदर्भ मेनू से उपयोगकर्ता नियंत्रण में क्लिक करें ... या बस प्रोजेक्ट में एक नया उपयोगकर्ता नियंत्रण जोड़ें।

उदाहरण के लिए, आप एक विशेष नियंत्रण जोड़ना चाहते हैं, जो चित्र के लिए जगह का प्रतीक है:

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

अब इसे आसानी से इस्तेमाल किया जा सकता है:

इसी तरह, आप खोज फ़ॉर्म के लिए अपना नियंत्रण बना सकते हैं।

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

इंटरफ़ेस तत्व

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

अगला, आप आवश्यक घटकों को अलग-अलग नियंत्रणों में सॉर्ट कर सकते हैं, या कॉपी-पेस्ट का उपयोग कर सकते हैं:

अगली श्रृंखला में, हम सूचियों को देखेंगे और नमूना डेटा के साथ काम करेंगे। इस बीच, प्रोटोटाइप पर अपने विचारों का परीक्षण करें और स्केचफ्लो में प्रोटोटाइप प्रतियोगिता में भाग लें।

अभिव्यक्ति ब्लेंड + स्केचफ्लो में प्रोटोटाइप। भाग 3. नियंत्रण के साथ काम करना