फ्लैश + इंटेलीज आईडिया

सभी को नमस्कार। यदि आप फ्लैश-एप्लिकेशन के विकास के साथ सामना कर रहे हैं, तो सबसे अधिक संभावना है कि कोड लिखने के लिए फ्लैश आईडीई द्वारा प्रदान किए गए मानक उपकरण आपको बहुत उत्साह का कारण नहीं बनाते हैं। Flash / Flex विकास के लिए कई लोकप्रिय वातावरण हैं: FlashDevelop, FlashBuilder, FDT, अभी भी कुछ युगल हो सकते हैं। नेटवर्क होलीवर्स से भरा है, जिसके बारे में एक बेहतर है, लेकिन इस लेख में मैं इस तथ्य से आगे बढ़ूंगा कि आपको IntelliJ IDEA (या बस "आइडिया") पसंद है, लेकिन आप इसके बारे में पूरी तरह से अपरिचित हैं और यह नहीं जानते कि कौन सा पक्ष है उसके पास जाओ। ठीक है, चलो इसे एक साथ पता लगाने की कोशिश करो!


इस लेख में आपको क्या मिलेगा:

• संक्षिप्त विवरण: कहां से डाउनलोड करें, कैसे स्थापित करें, आईडीई को कॉन्फ़िगर करें
• प्रोजेक्ट कैसे बनाएं, आरंभ करें
• फ्लैश प्रोजेक्ट के साथ आईडीई लिंक कैसे करें
• कैसे संकलित करें, एक परियोजना चलाएं, पुस्तकालयों को कनेक्ट करें
• कुछ अच्छी छोटी चीजों का वर्णन जो मैं नियमित रूप से उपयोग करता हूं

इस लेख में आपको क्या नहीं मिलेगा:

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

ऐसा लगता है कि इसे यातायात के बारे में चेतावनी देने के लिए एक अच्छा रूप माना जाता है - कट के तहत, स्क्रीनशॉट का एक छोटा सा गुच्छा ~ 500kb होता है।

प्रस्तावना

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

डाउनलोड, स्थापना

इसलिए, हम साइट पर जाते हैं , हम देखते हैं कि दो संस्करण हैं: सामुदायिक संस्करण (मुक्त) और अंतिम (भुगतान किया गया; व्यक्तिगत लाइसेंस $ 249, वाणिज्यिक $ 599; 30 दिनों के लिए परीक्षण संस्करण)। मुफ्त संस्करण एक्शनस्क्रिप्ट का समर्थन नहीं करता है, इसलिए भुगतान किए गए एक को डाउनलोड करें - "डाउनलोड अंतिम" ( कीमतों और लाइसेंस के बारे में अधिक) पर क्लिक करें।


डाउनलोड किए गए exe के ahnik को चलाएं, "अगला-> अगला-> अगला ...", जो आपको चाहिए उसे चुनें, "इंस्टॉल करें" पर क्लिक करें। स्थापना में कुछ मिनट लगते हैं, यहां कोई समस्या नहीं होनी चाहिए। अंत में, "IntelliJ IDEA रन" के बगल में स्थित बॉक्स को चेक करें, "फिनिश" पर क्लिक करें।

परियोजना निर्माण

मान लीजिए कि आइडिया के साथ आपका यह पहला परिचय है, इसलिए हम इनकार के साथ पुरानी सेटिंग्स को आयात करने के प्रस्ताव पर प्रतिक्रिया देते हैं और ठीक पर क्लिक करते हैं। हम एक लाइसेंस कुंजी में ड्राइव करते हैं या "30 दिनों के लिए मुफ्त में मूल्यांकन करें" का चयन करें और "ओके" पर क्लिक करें। फिर, एक लाइसेंस समझौता, एक और "ओके"।

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


इसके बाद, हमें वेब / जावाईई प्लगइन्स चुनने की पेशकश की जाती है - यहां आप सभी चेकमार्क को सुरक्षित रूप से हटा सकते हैं, यह सभी निश्चित रूप से अच्छा है, लेकिन हमें इसकी आवश्यकता नहीं है:


इसके अलावा HTML / जावास्क्रिप्ट प्लगइन्स। यहां हम फ्लेक्स-प्लगइन देखते हैं जो हमें रुचता है, जो बदले में जावास्क्रिप्ट और सीएसएस से जुड़ा हुआ है। तो इन तीनों का चयन करें (और ढेर से पहले भी, मैंने HTML प्लगइन लिया):


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


एक "क्विकस्टार्ट" विंडो हमारे सामने दिखाई देती है, यहां "नया प्रोजेक्ट बनाएं" पर क्लिक करें (आप "फ़ाइल-> नई परियोजना" के माध्यम से एक प्रोजेक्ट भी बना सकते हैं), अगली विंडो में "स्क्रैच से प्रोजेक्ट बनाएं" चुनें:


अगली विंडो में, प्रोजेक्ट का नाम चुनें (उदाहरण के लिए, "हैलोहेयर"), वह फ़ोल्डर जहां इसे सहेजा जाएगा, "मॉड्यूल बनाएं" के सामने एक चेकमार्क लगाएं, "एक्शनस्क्रिप्ट / फ्लैश / फ्लेक्स मॉड्यूल" टाइप करें। सिद्धांत रूप में, आप पहले से ही "अगला" पर क्लिक कर सकते हैं, लेकिन मैं परियोजनाओं और मॉड्यूल के बारे में कुछ शब्द कहना चाहता हूं। एक परियोजना में कई मॉड्यूल हो सकते हैं और वे विभिन्न स्थानों में हो सकते हैं। इसके अलावा, प्रोजेक्ट फ़ाइल एक स्थान पर हो सकती है, मॉड्यूल फ़ाइल दूसरे में, और कोड जो मॉड्यूल तीसरे में देख रहा है। इस परियोजना की अपनी सामान्य सेटिंग्स हैं, इसके अतिरिक्त मॉड्यूल की अपनी भी है। मान लीजिए कि आप पहले से ही कुछ एप्लिकेशन पर काम कर रहे हैं और बनाए जा रहे मॉड्यूल में पहले से लिखे गए कोड को स्लिप करना चाहते हैं - यह सरल है। आज्ञा दें कि एक फ़ोल्डर C: \ Develop \ HelloHabr है, जिसमें / कला और / src उपपृष्ठ संलग्न हैं। फिर फ़ील्ड "कंटेंट रूट" में "C: \ Develop \ HelloHabr" लिखें, फ़ील्ड में "मॉड्यूल फ़ाइल स्थान", उदाहरण के लिए, "C: \ Develop \ HelloHabr" पर भी, "अगला" पर क्लिक करें:


अब हमें स्रोतों के लिए एक निर्देशिका बनाने की पेशकश की जाएगी - हम अपने एप्लिकेशन के कोड के साथ फ़ोल्डर निर्दिष्ट करेंगे (आपको "सामग्री रूट" के सापेक्ष पथ निर्दिष्ट करना होगा)। "स्रोत निर्देशिका बनाएं" चुनें और टेक्स्ट फ़ील्ड "src" में लिखें:


अब हमें FlexSDK के लिए पथ निर्दिष्ट करना होगा (आप इसे यहां डाउनलोड कर सकते हैं ), ऊपरी दाएं कोने में "..." बटन पर क्लिक करें, नई विंडो में "+" पर क्लिक करें और अनपेक्षित एसडीके के लिए पथ निर्दिष्ट करें:


ठीक है, हमने एसडीके को संकेत दिया, फिर "आउटपुट प्रकार" - "एप्लिकेशन (* .swf)" चुनें, "नमूना फ्लेक्स एप्लिकेशन बनाएं" और "एचटीएमएल आवरण बनाएं" को अनचेक करें। वह सब है! समाप्त क्लिक करें:

शुरुआत हो रही है

हुर्रे! फिर 2 तरीके हैं - आइडिया में कोड लिखने के लिए, लेकिन फिर भी फ्लैश में एप्लिकेशन को संकलित करें (कुछ के लिए यह जंगली लग सकता है, लेकिन कई ने इसे FlashDevelop के साथ किया, इसका कुछ अर्थ भी है ... शायद) या सभी यह जगह में पुस्तकालयों के माध्यम से ग्राफिक्स आयात करके (या सीधे संकलन लोड करते समय swfs लोड कर रहा है), और mxmlc संकलक के साथ संकलित करें। यदि पहला विकल्प आपके लिए दिलचस्प नहीं है, तो आप सीधे दूसरे पर जा सकते हैं, वे किसी भी तरह से जुड़े नहीं हैं। तो, क्रम में।

आइडिया से हम फ्लैश एप्लिकेशन के संकलन का कारण बनते हैं

मैंने खुद लंबे समय तक ऐसा नहीं किया है और जब मैंने लेख के इस भाग को लिखना शुरू किया, तो यह पता चला कि आइडिया के संस्करण 10 में पिछला रास्ता काम नहीं किया था। लेकिन एक समाधान है, यद्यपि थोड़ा उलझन में है। सामान्य तौर पर, निम्नलिखित जोड़तोड़ आपको प्रत्येक संकलन के साथ मैन्युअल रूप से "minimal_Idea-extension_Flash-press_Alt + Enter" की आवश्यकता से बचाएगा, और यह सब है। चाहे खेल मोमबत्ती के लायक हो आप पर निर्भर है।

मान लीजिए कि "HelloHabr.fla" हमारे / कला फ़ोल्डर में है। हम आइडिया में कोड को एडिट करना चाहते हैं, फिर “डू वेल” बटन पर क्लिक करें और उसके बाद फ्लैश को तैनात और संकलित करेंगे। योजना निम्नानुसार होगी: विचार एक .bat फ़ाइल लॉन्च करता है, यह .bat फ़ाइल सरलतम JSFL स्क्रिप्ट बनाता है और चलाता है, जो वास्तव में, परियोजना को संकलित करने में शामिल है। सबसे पहले आपको इस बैच फ़ाइल को डाउनलोड करने की आवश्यकता है - "फ्लैश आईडीई में प्रकाशित करें" विंडोज के लिए शेल स्क्रिप्ट । इस फ़ाइल की सामग्री, केवल मामले में:
echo document.testMovie(); > %TEMP%\PublishInIDE.jsfl
@cmd /c start %TEMP%\PublishInIDE.jsfl
पहले, आप "बैच स्क्रिप्ट समर्थन" प्लगइन स्थापित कर सकते हैं और डाउनलोड बैच फ़ाइल ( यहाँ अधिक जानकारी के लिए) के आधार पर एक संकलन विन्यास बना सकते हैं, लेकिन इस पद्धति ने अचानक काम करना बंद कर दिया (ऐसा प्रतीत होता है कि इसे फिर से काम करने के लिए "बैच स्क्रिप्ट समर्थन" प्लगइन के रचनाकारों को अपने परित्याग करने के लिए पूछने के लिए पर्याप्त है) ;) दिमाग की उपज)। मैं इस तरह के समाधान का प्रस्ताव करता हूं - एक सरल एएनटी स्क्रिप्ट बनाएं जो डाउनलोड की गई .bat फ़ाइल लॉन्च करता है। सबसे पहले, एक build.xml फ़ाइल बनाएँ जिसमें हम निम्नलिखित कोड चिपकाएँ:

<?xml version="1.0"?>
<project name="RunInIDE" default="hello-habr" basedir=".">
<target name="hello-habr">
<exec executable="cmd"><arg value="/c"/><arg value="PublishInIDE.bat"/></exec>
</target>
</project>

हमने यह प्रकाशित प्रकाशित INIDEIDE.bat के बगल में xml'ku रखा। अगला, आइडिया पर वापस, हमें जावाएसडीके को निर्दिष्ट करने की आवश्यकता है: बाईं ओर क्लास ट्री में प्रोजेक्ट के नाम से आरएमबी, बाईं ओर खुलने वाली विंडो में "ओपन मॉड्यूल सेटिंग्स" का चयन करें, "एसडीके" चुनें, "+" पर क्लिक करें, "जेएसडीके" का चयन करें, पथ निर्दिष्ट करें। JDK (यदि आपके पास यह नहीं है, तो आपको इसे डाउनलोड और इंस्टॉल करने की आवश्यकता है), "C: \ Program Files \ Java \ jdk1.6.0" जैसा कुछ।


इसके अलावा - दाईं ओर "एंट बिल्ड" बटन है, उस पर क्लिक करें, एक टैब दिखाई देगा, वहां "+" पर क्लिक करें, जो मेनू में दिखाई देता है, निर्मित बिल्ड.xml का पथ निर्दिष्ट करें। तब टैब "चींटी बिल्ड", फ़ील्ड "गुण" के अंदर आरएमबी:


खुलने वाली विंडो में, "निष्पादन" टैब का चयन करें, "JDK के तहत चलाएँ" सूची में, हमारे नए स्थापित JDK का चयन करें:


जांचें कि क्या फ्लैश खुला है (आपको उस परियोजना को खोलने की आवश्यकता है जिसे हम संकलित करना चाहते हैं)। और अंत में, पूरी तरह से (आवश्यक रूप से, यह महत्वपूर्ण है) हरे तीर पर क्लिक करें!


अरे हाँ! क्या यह काम करता है? वाह! अच्छा, खेल मोमबत्ती के लायक था? IMHO, लेकिन लेख के इस भाग के बिना विवरण अधूरा होगा ... ठीक है, अंत में, हमें काम के एक स्वस्थ तरीके पर आगे बढ़ना चाहिए।

HelloWorld का अर्थ है विचार

इसलिए, / src फ़ोल्डर में, सामग्री के साथ "Main.as" फ़ाइल बनाएँ:
package {

import flash.display.MovieClip;
import flash.text.TextField;

public class Main extends MovieClip {
public function Main() {
var tf:TextField = new TextField();
tf.text = "Hello Habr!";
addChild(tf);
}
}
}

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


अब हरे तीर (या "Shift + F10") और वॉइला पर क्लिक करें! HelloHabr!


परिणामी swf कहाँ प्राप्त करें? डिफ़ॉल्ट रूप से, यह किसी फ़ोल्डर में प्रोजेक्ट फ़ाइल की तरह निहित होता है ... \ IdeaProjects \ HelloHabr \ out \ production \ HelloHabr \ _Main.swf । इतना अजीब नाम क्यों? यह थोड़ा कम है, लेकिन अब हम यह पता लगाएंगे कि इस पथ को कैसे बदलना है। हमारे पास एक फ़ोल्डर है जिसमें डिफ़ॉल्ट रूप से सभी संकलित परियोजना मॉड्यूल रखे जाएंगे, आप इसे प्रोजेक्ट सेटिंग्स में बदल सकते हैं: "फाइल" -> "प्रोजेक्ट स्ट्रक्चर", "प्रोजेक्ट कंपाइलर आउटपुट":


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


अब हमें "रन" (हमने क्या किया है) और "बिल्ड" के बीच अंतर के बारे में बात करने की जरूरत है। रन अभी भी डिबगिंग की श्रेणी से कुछ है, जबकि हम विभिन्न कॉन्फ़िगरेशन के साथ खेल सकते हैं। उदाहरण के लिए, यदि हम लॉन्च कॉन्फ़िगरेशन सेटिंग्स में "मेक" को अनियंत्रित करते हैं, तो इस बात की कोई गारंटी नहीं होगी कि svfka के बंद होने के बाद इसे कहीं संरक्षित किया गया होगा (वैसे, विचार, इसके बारे में सावधानी से चिंतित होगा), और इसलिए हमारे पास हालांकि है "_Main.swf" होगा। विज्ञान में, हमें एक प्रोजेक्ट या मॉड्यूल का "मेक" करना होगा (जिसका अपना उन्नत कॉन्फ़िगरेशन है - जैसे "फ्लेक्स कम्पाइलर सेटिंग्स") - इसके लिए "ग्रीन एरो" (या सिर्फ "Ctrl + F9") के बाईं ओर एक अजीब-सा दिखने वाला बटन है। ), जब आप उस पर क्लिक करते हैं, तो आपको प्रवेश बिंदु (हमारा मुख्य वर्ग) निर्दिष्ट करना होगा। आवेदन के इस मुख्य वर्ग और आउटपुट पर प्राप्त swf के नाम को पिछली विंडो में क्रमशः फ़ील्ड "मेन क्लास" और "आउटपुट फ़ाइल नाम" में बदला जा सकता है। नतीजतन, "_Main.swf" के बजाय हमें एक फ़ोल्डर में एक सभ्य सभ्य "HelloHabr.swf" मिलता है जो हमारे लिए सुविधाजनक है।

कोई भी अलग उपयोगी, आवश्यक, सुविधाजनक, सुखद, दिलचस्प, आदि।

अंत में, मैं बस कई उपयोगी बन्स और पानी के नीचे के कोबलस्टोन को सूचीबद्ध कर सकता हूं जिन्हें मैं याद रख सकता हूं।

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


खैर, जब से यह आया है, मैं आपको बताता हूं कि ब्रेकपॉइंट कैसे सेट करें और डीबगर चलाएं। हमारे लिए ब्याज की रेखा के बाईं ओर, माउस क्लिक करें - ब्रेकपॉइंट तैयार है। डीबगर को "हरे तीर पर एक बग" (या "Shift + F9") पर क्लिक करके लॉन्च किया जाता है, जो "नियमित" हरे तीर के बगल में स्थित है। निशान "कंसोल" टैब में नीचे दिखाए गए हैं, और डीबगिंग को "डीबग" टैब में नियंत्रित किया जा सकता है (इंटरफ़ेस बहुत स्पष्ट और अनुकूल है):


2) आयात swc पुस्तकालयों। मान लें कि हम IPA "MyMir" - "mailru-call.swc" के साथ काम करने के लिए पुस्तकालय को जोड़ना चाहते हैं: बाईं ओर क्लास ट्री में प्रोजेक्ट के नाम से RMB, "ओपन मॉड्यूल सेटिंग्स", दाईं ओर "निर्भरताएँ" टैब खोलें, दाईं ओर "जोड़ें" बटन, "सिंगल-एंट्री मॉड्यूल लाइब्रेरी", इच्छित .swc- लाइब्रेरी के लिए पथ निर्दिष्ट करें। हो गया, अब इस पुस्तकालय के लिए कक्षाएं हमारे पास उपलब्ध हैं:


3) कोड के प्रारूपण को इस प्रकार बदलें: "फाइल" -> "सेटिंग", "कोड स्टाइल" फ़ील्ड खोलें। यदि आप यहां थोड़ा सा मोड़ते हैं, तो आप शायद कोई भी सेटिंग पा सकते हैं, जिसके बारे में आप सोच सकते हैं। उदाहरण के लिए, जब पैकेज की सामग्री को इंडेंट किया जाता है, तो मैं इसका उपयोग करता हूं, ऐसा करने के लिए, "जावास्क्रिप्ट / ईसीएमएस्क्रिप्ट / एक्शनस्क्रिप्ट" अनुभाग में "इंडेंट पैकेज स्टेटमेंट बच्चों" चेकबॉक्स की जांच करें:


4) और अंत में, मैं कुछ हॉटकीज़ (पूरी सूची यहाँ है ) सूचीबद्ध करूँगा, जिसके बिना मैं पहले से ही सहज महसूस कर रहा हूँ, कुछ आइडिया में संपादन नहीं:

• Ctrl + Space - अच्छा पुराना स्वतः पूर्ण
• Ctrl + Alt + L - कोड ऑटो-स्वरूपण
• Ctrl + Alt + O - आयात अनुकूलन
• Shift + F6 - रीफैक्टरिंग (शक्तिशाली चीज!)
• Alt + F7 - प्रोजेक्ट में प्रविष्टियों / संरचना के उपयोग की खोज करें
• Ctrl + F / Ctrl + Shift + F - एक दस्तावेज़ में खोजें / एक परियोजना में खोजें या एक फ़ोल्डर में

खैर, मुझे लगता है कि मैं इस पर ध्यान केंद्रित करूंगा, आप सभी को धन्यवाद!

PS मैंने बिना मांग के लेख के लिए कुछ चित्र लिए, मुझे आशा है कि कोई भी इस वजह से बहुत परेशान नहीं होगा ...