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

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

शुरुआत और इंटरफ़ेस

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







ऐसा लग सकता है कि स्केचफ्लो आपको केवल सिल्वरलाइट या WPF- अनुप्रयोगों के प्रोटोटाइप विकसित करने की अनुमति देता है, लेकिन यह ऐसा नहीं है, और न ही यह सच है कि कागज पर केवल "पेपर" अनुप्रयोगों के प्रोटोटाइप बनाए जा सकते हैं।



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

बनाम



अन्यथा, यह सब आपकी कल्पना और आपके कार्यों पर निर्भर करता है। स्केचफ्लो के साथ, आपको एक कंटेनर मिलता है - एक इंटरैक्टिव प्रोटोटाइप प्लेयर। इस अर्थ में, कुछ भी किसी भी प्लेटफ़ॉर्म के लिए पारंपरिक अनुप्रयोगों, साइटों या मोबाइल अनुप्रयोगों के प्रोटोटाइप के विकास को नहीं रोकता है। आवश्यक रूप से, संदर्भ जोड़ने के लिए, एक उपयुक्त पृष्ठभूमि जोड़ना पर्याप्त है और, यदि आवश्यक हो, तो उपयुक्त नियंत्रण शैली (एक्सप्रेशन ब्लेंड Psd फ़ाइलों को आयात कर सकते हैं)। यही है, प्रश्न का उत्तर "क्या मैं इस चीज़ का उपयोग प्रोटोटाइप iPhone एप्लिकेशन बनाने के लिए कर सकता हूं?" सकारात्मक है। हालाँकि, यह बेहतर है, निश्चित रूप से, यदि आप विंडोज फोन 7 के लिए आवेदन करते हैं ;)







मैं सिल्वरलाइट कंटेनर पथ के साथ रहना होगा। आइए एक स्केचफ्लो परियोजना के लिए अभिव्यक्ति मिश्रण इंटरफ़ेस को देखें:







मेनू और टूलबार के अलावा, इंटरफ़ेस में 6 मुख्य ब्लॉक हैं:

1. कार्य क्षेत्र जहां मुख्य कार्रवाई होती है,
2. स्केच फ़्लो मानचित्र आपके एप्लिकेशन का एक मानचित्र है जिसमें दिखाया गया है कि स्क्रीन और घटक क्या हैं और वे कैसे जुड़े हैं।
3. प्रोजेक्ट्स - आपके प्रोजेक्ट का पेड़, एसेट्स - ब्लैंक, कंट्रोल्स, आदि जो प्रोटोटाइप में इस्तेमाल किए जा सकते हैं।
4. रिकॉर्डिंग एनिमेशन के लिए वर्तमान स्क्रीन, घटक या नियंत्रण + पैनल के तत्वों का पेड़।
5. स्केचफ्लो एनिमेशन प्रोटोटाइप के लिए एनिमेशन की सरलीकृत रिकॉर्डिंग के लिए एक विशेष पैनल है।
6. चयनित तत्वों के गुण - रंग, स्थिति, फ़ॉन्ट, आदि।

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







आगे बढ़ते हुए: मुख्य अवधारणाएं आगे हैं: नक्शा, स्क्रीन, घटक, संचार, और अंत में हम आयात के बारे में थोड़ी बात करेंगे।

स्केचफ़्लो नक्शा

स्केच फ़्लो मानचित्र आपकी स्क्रीन और घटकों का एक मानचित्र है, जिसमें दिखाया गया है कि वे कैसे संबंधित हैं। (गणितीय रूप से, यह एक निर्देशित ग्राफ़ है और कहीं-कहीं प्रोजेक्ट सर्विस फ़ाइलों में आप इसका विवरण xml-format में भी पा सकते हैं।)



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



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







उदाहरण के लिए, ऊपर दी गई तस्वीर में आप देख सकते हैं कि एक लॉगिन स्टार्ट स्क्रीन है, और कई मुख्य स्क्रीन हैं, जिनमें से प्रत्येक में मेनू कॉमपोनेंट घटक के रूप में एक मेनू है, जिसके माध्यम से आप किसी भी स्क्रीन का उपयोग कर सकते हैं। एक WindowComponent अंडरले को सभी स्क्रीन में डाला गया है, एक TweersComponent ट्वीट फीड और मुख्य स्क्रीन में UpdateComponent की स्थिति को अपडेट करने के लिए एक पैनल डाला गया है।



योजना अधिक जटिल हो सकती है:







या सरल:



।



अंततः, यह सब प्रोटोटाइप की जटिलता और उस स्तर पर निर्भर करता है जिस पर आप स्क्रीन विभाजन करते हैं, क्योंकि अलग-अलग राज्यों के बीच संक्रमण का हिस्सा चयनित राज्यों (राज्यों) के रूप में स्क्रीन के अंदर "वायर्ड" हो सकता है, जिसके बीच संक्रमण सेट किया जा सकता है, उदाहरण के लिए, व्यवहार (व्यवहार) का उपयोग करके।



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



कुछ सरल स्केच फ़्लो मानचित्र नियम:

1. प्रोटोटाइप में हमेशा एक स्टार्ट स्क्रीन होती है, जिसे एक हरे रंग के त्रिकोण द्वारा दर्शाया जाता है (ऊपर दी गई तस्वीरों में देखें)। संदर्भ मेनू के माध्यम से, आप स्टार्ट स्क्रीन को किसी भी स्क्रीन बना सकते हैं।
2. स्क्रीन आयतों द्वारा इंगित की जाती हैं; डिफ़ॉल्ट रूप से वे नीले (नेविगेशन) हैं।
3. घटक गोल आयतों द्वारा इंगित किए जाते हैं; डिफ़ॉल्ट रूप से वे हरे (घटक) होते हैं।
4. संक्रमण को ठोस रेखाओं द्वारा इंगित किया जाता है। रचना धराशायी लाइनों द्वारा इंगित की जाती है।

वैसे, आप अपने रंगों को मानचित्र के सभी तत्वों (स्क्रीन, घटक, लिंक) पर सेट कर सकते हैं - आपके पास आठ रंगों (रंग टैग) का एक पूल है जिसे आप मेनू प्रोजेक्ट इंक। शिफ्टफ्लो प्रोजेक्ट सेटिंग्स के माध्यम से परिभाषित कर सकते हैं ...







अगला, आप ड्रॉप-डाउन या संदर्भ मेनू के माध्यम से रंग निर्दिष्ट कर सकते हैं:







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







की तुलना करें:



और ।



चल रहा है: स्क्रीन और घटक।

स्क्रीन और घटक

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



तकनीकी रूप से, दोनों नियमित रूप से UserControls हैं।



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







स्कीम में जा सकते हैं



।



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



आप विभिन्न तरीकों से नई स्क्रीन और घटक बना सकते हैं:

1. स्केचफ़्लो मैप कंट्रोल पैनल में आवश्यक बटन हैं:
   
   
2. मानचित्र संदर्भ मेनू से समान विकल्प उपलब्ध हैं।
3. मानचित्र पर स्क्रीन और घटकों में एक ड्रॉप-डाउन मेनू है जिससे आप एक नई कनेक्टेड स्क्रीन या घटक को बाहर निकाल सकते हैं:
   
   
   
   
4. यदि आप कार्यक्षेत्र या ऑब्जेक्ट ट्री में एक या अधिक तत्वों का चयन करते हैं, तो आप उन्हें संदर्भ मेनू (घटक स्क्रीन में बनाएं ...) से नए घटकों में बदल सकते हैं।

मानचित्र पर प्रत्येक नई स्क्रीन या घटक के लिए, एक विंडो खुलती है जिसमें आप सामग्री को संपादित कर सकते हैं। डिफ़ॉल्ट रूप से स्क्रीन और घटकों के आकार को सेट करना न भूलें (शुरुआत देखें)।

लिंक और संक्रमण

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







इस स्थिति में, स्क्रीन C से, आप सीधे स्क्रीन X पर जा सकते हैं और सम्मिलित नेविगेशन घटक के माध्यम से स्क्रीन A, B, C पर जा सकते हैं (हां, औपचारिक रूप से यह पता चला है कि आप अपने आप को स्विच भी कर सकते हैं)।



प्रोटोटाइप प्लेयर (संकलन और लॉन्च - F5) में, लिंक का यह सेट सीधे उपलब्ध नेविगेशन विकल्पों (बदलाव) के लिए मैप करता है:







कृपया ध्यान दें कि मॉनिटर के लिए, रंग कार्ड पर रंगों से मेल खाते हैं। इस मामले में, ज़ाहिर है, खिलाड़ी में आप बस कार्ड खोल सकते हैं और सीधे किसी भी स्क्रीन या ब्याज के घटक पर जा सकते हैं।



मानचित्र पर नए लिंक कई तरीकों से दिखाई दे सकते हैं:

1. जब आप किसी मौजूदा स्क्रीन से एक नई स्क्रीन या घटक खींचते हैं, तो एक लिंक स्वचालित रूप से प्रकट होता है (ऊपर देखें)।
2. किसी घटक या स्क्रीन के ड्रॉप-डाउन मेनू से, आप विकल्प का चयन कर सकते हैं एक मौजूदा स्क्रीन कनेक्ट करें या घटक स्क्रीन डालें और लिंक को वांछित ऑब्जेक्ट पर खींचें।
3. आप बस माउस के साथ एक ऑब्जेक्ट का चयन कर सकते हैं और इसे दूसरे पर खींच सकते हैं - उनके बीच एक लिंक (नेविगेशन या रचना) स्वचालित रूप से बनाया जाएगा।

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



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







हम निम्नलिखित लेखों में से एक में व्यवहार पर अलग से विचार करेंगे।

आयात

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



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



आयात के मामले में, अभिव्यक्ति ब्लेंड + स्केचफ्लो आपको कई दिलचस्प सुविधाएँ प्रदान करता है, जिनमें से प्रत्येक में इसके पेशेवरों की सहमति है

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

एक उदाहरण के रूप में, एक प्रोटोटाइप इंटरैक्टिव बैनर बनाने पर वीडियो देखें।