Ç÷¡½Ã´Â À¥ ºê¶ó¿ìÀú¿¡¼ ¸ÖƼ¹Ìµð¾î¸¦ ÀÚÀ¯ÀÚÀç·Î Ç¥ÇöÇÏ°í »ç¿ëÀÚ¿¡°Ô Ä£¼÷Çϸ鼵µ Æí¸®ÇÑ ÀÎÅÍÆäÀ̽º¸¦ Á¦°øÇÑ´Ù. Ç÷º½º´Â Ç÷¡½Ã ±â¼úÀ» À¥¿¡ ±×´ë·Î Àû¿ëÇØ ±×·¡ÇÇÄÃÇϸ鼵µ À¯¿¬ÇÑ UIÀÇ Æ¯¼ºÀ» °¡Áö°í ÀÖÀ¸¸ç, ÇÁ·Î±×·¡¸ÓµéÀÌ ½±°Ô ¹è¿ï ¼ö Àִ ȹ±âÀûÀÎ °³¹ß ¾ð¾îÀÌ´Ù. ƯÈ÷ ÇÁ·Î±×·¡¹Ö ¾ð¾î Ãø¸é¿¡¼ ¿©·¯ ¸ð·Î ÀÚ¹Ù¿Í À¯»çÇѵ¥ À̸¦ Áß½ÉÀ¸·Î Ç÷º½º¿¡ ÇÑ¹ß ´Ù°¡°¡ º¸ÀÚ.
ÀÌ ±ÛÀº Ç÷º½º¸¦ óÀ½ Á¢Çϰųª ÀÚ¹Ù ±â¹ÝÀÇ À¥ °³¹ßÀÚ ¸ðµÎ¸¦ À§ÇØ Ç÷º½ºÀÇ ¿ø¸®¸¦ ÀÚ¹Ù ±â¼ú°ú ºñ±³ÇÏ¸é¼ ¼³¸íÇÏ°íÀÚ ÇÑ´Ù. ƯÈ÷ ´Ü¶ôÀÇ Á¦¸ñÀ» Ç÷º½ºÀÇ Æ¯¼º¿¡ ´ëÇØ ÇÔÃàÀûÀ¸·Î ±â¼úÇØ ±×°Í¸¸ ºÁµµ ¾î´À Á¤µµ °¨À» ÀâÀ» ¼ö ÀÖµµ·Ï ±¸¼ºÇß´Ù.
XML·Î ±â¼úµÇ´Â Ç÷¡½Ã À¥ ÄÄÆ÷³ÍÆ® °³¹ß ¹× ½ÇÇà ȯ°æ ¡®Ç÷º½º¡¯ Ç÷º½º´Â À¥¿¡¼ Ç÷¡½Ã ÇüÅ·Πº¸¿©Áø´Ù. ¿©·¯ºÐÀÌ Á÷Á¢ µ¥¸ð »çÀÌÆ®(www.macromedia.com/devnet/flex/example_apps.html)¸¦ ¹æ¹®ÇØ ±¸µ¿µÇ´Â ¸ð½ÀÀ» º¸ÀÚ. ȸéÀÇ ÇÏ´ÜÀ» º¸¸é ¼îÇθô µ¥¸ð(Flex Store), ºí·Î±× µ¥¸ð(Flex Blog Reader), ½ÇÇà µ¥¸ð(Flex File Explorer)°¡ ÀÖ´Ù. Ç÷º½ºÀÇ µ¥¸ð¸¦ ½ÇÇàÇϸé À¥ ºê¶ó¿ìÀú¿¡¼ ÀÛµ¿ÇÏ´Â Ç÷¡½Ã¿Í ¶È°°ÀÌ ÀÛµ¿ÇÑ´Ù.
|
<ȸé 1> Ç÷º½º ¾ÖÇø®ÄÉÀÌ¼Ç »ùÇÃ(CSS¸¦ Àû¿ëÇÑ Flex Store) | <ȸé 1>Àº Flex StoreÀÇ ½ÇÇà ȸéÀ¸·Î »óÇ°ÀÇ µå·¡±×¾Øµå·ÓÀÌ °¡´ÉÇϸç ÇϳªÀÇ È¸é¿¡¼ ÀÛµ¿ÇÑ´Ù. º¸Åë JSP·Î ȸéÀ» ¸¸µé °æ¿ì¿¡´Â iframeÀ» ½á¼ ¿©·¯ °³ÀÇ JSP °£¿¡ ÆĶó¹ÌÅ͸¦ ÁÖ°í¹Þ´Â º¹ÀâÇÑ ÄÚµùÀÌ µÇ±â ¶§¹®¿¡ ÀÌ·¯ÇÑ µå·¡±×¾Øµå·ÓÀº ²Þµµ ¸ø ²Ù´Â °Í°ú ºñ±³µÈ´Ù. ¶ÇÇÑ Ç÷º½º¿¡´Â CSS(Cascading Style Sheets)¸¦ Àû¿ëÇÔÀ¸·Î½á ´Ù¾çÇÑ Å¸ÀÔÀÇ È¸éÀ» º¸¿©ÁÙ ¼ö ÀÖ´Ù.
À¥ ¾ÖÇø®ÄÉÀ̼ÇÀÇ ÇѰ踦 ¶Ù¾î³ÑÀº Ç÷º½º ÀϹÝÀûÀ¸·Î °í°´ÀÌ ¿øÇÏ´Â ¾î¶² ȸéÀ» ¸¸µé±â À§ÇØ µðÀÚÀÎÀº ¹°·Ð HTML ÄÚµå, ½ºÅ¸ÀϽÃÆ®, ÀÚ¹Ù½ºÅ©¸³Æ®, JSP ÄÚµå µî ¾öû³ ÀÛ¾÷À» ÇØ¾ß ÇÏ´Â °æ¿ì°¡ ¸¹´Ù. ¿¹¸¦ µé¾î Æ®¸® ¸Þ´º¸¦ ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ ±¸ÇöÇϸé ÄÚµùÀÌ ¹«Ã´ º¹ÀâÇÏ´Ù. ÇÏÁö¸¸ Ç÷º½º·Î ±¸ÇöÇÑ °æ¿ì´Â ±×·¸Áö ¾ÊÀ½À» º¼ ¼ö ÀÖ´Ù. <¸®½ºÆ® 1>ó·³ XML ±¸Á¶ÀÇ Æ®¸® µ¥ÀÌÅ͸¸ Á¤ÀÇÇϸé <ȸé 2>ÀÇ Æ®¸® ¸Þ´º¸¦ ±¸ÇöÇÒ ¼ö ÀÖ´Ù.
|
<¸®½ºÆ® 1> Ç÷º½º·Î ±¸ÇöÇÑ Æ®¸® ¸Þ´º ¼Ò½ºÄÚµå | |
| |
<?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Script> function showData(data) { mx.controls.Alert.show(data, 'Message'); } </mx:Script> <mx:HBox horizontalGap="10"> <!mx:TreeÀÇ Á¤ÀÇ ½ÃÀÛ <mx:Tree height="200" width="300" change="showData(event.target.selectedItem.attributes.label)"> <mx:dataProvider> <mx:XML> <node label="Ç÷º½ºÀÇ ±¸¼º"> <!Æ®¸® ±¸Á¶ µ¥ÀÌÅÍ ½ÃÀÛ <node label="1. Ç÷º½º ¾ÖÇø®ÄÉÀÌ¼Ç ÇÁ·¹ÀÓ¿öÅ©"> <node label="1.1.MXML"/> <node label="1.2.Action Script"/> <node label="1.3.Flex Class Library"/> </node> <node label="2. Flex Runtime Service"> <node label="2.1.Compiler"/> </node> </node> <!Æ®¸® ±¸Á¶ µ¥ÀÌÅÍ ³¡ </mx:XML> </mx:dataProvider> </mx:Tree> <!mx:TreeÀÇ Á¤ÀÇ ³¡ </mx:HBox> </mx:Application>
| |
|
|
<ȸé 2> Ç÷º½º·Î ±¸ÇöÇÑ Æ®¸® ¸Þ´º | dzºÎÇÑ UI¿Í Ç÷¡½ÃÀÇ ÀåÁ¡ Á¦°ø Ç÷º½ºÀÇ ÀåÁ¡ Áß Çϳª´Â HTML ÄÚµå¿Í ½ºÅ¸ÀϽÃÆ®, ÀÚ¹Ù½ºÅ©¸³Æ® ÄÚµå µîÀ¸·Î Ç¥ÇöµÇ´Â UIÀÇ ÇѰ踦 ¶Ù¾î³Ñ¾î ´Ù¾çÇÑ UI¸¦ ÄÄÆ÷³ÍÆ®·Î Á¦°øÇÑ´Ù´Â Á¡ÀÌ´Ù. ƯÈ÷ °³¹ß °úÁ¤¿¡¼ ³ª¿Â ÄÄÆ÷³ÍÆ®µéÀº ȸé¿ë ÄÄÆ÷³ÍÆ®¿Í ºñÁî´Ï½º¿ë ÄÄÆ÷³ÍÆ®·Î ºÐ¸®ÇÒ ¼ö ÀÖ¾î ¸Å¿ì È¿À²ÀûÀÌ´Ù.
<ȸé 1>ó·³ ¼îÇθôÀ» ±¸ÇöÇÔ¿¡ ÀÖ¾î ±âÁ¸ÀÇ ¼¼¼Ç°ú ÆĶó¹ÌÅÍ Àü¼Û ¹æ½ÄÀ¸·Î ÆäÀÌÁö¸¦ À̵¿ÇÒ ÇÊ¿ä ¾øÀÌ ÇϳªÀÇ Ç÷º½º ȸ鿡¼ °ÅÀÇ ¸ðµç 󸮰¡ °¡´ÉÇÏ´Ù. ¶ÇÇÑ Ç÷º½º´Â ¼Ò½ºÄÚµå¿Í ÄÁÅÙÃ÷ÀÇ ³ëÃâÀ» ¸·À» ¼ö ÀÖ´Ù´Â ÀåÁ¡ÀÌ ÀÖ´Ù. Áï º¸±â ¸Þ´º¿¡¼ ¼Ò½ºº¸±â¸¦ ½ÃµµÇÏ´õ¶óµµ <html> ¼Ó¿¡ <object> ű׷ΠÇ÷º½º°¡ Ç÷¡½Ã·Î ÄÄÆÄÀÏµÈ À§Ä¡¹Û¿¡ º¼ ¼ö ¾ø´Ù.
XMLÀ» ºñ·ÔÇÑ Ç¥ÁØÈµÈ ±â¼ú »ç¿ë <¸®½ºÆ® 1>Àº Ç÷º½º·Î ±¸ÇöÇÑ Æ®¸® ¸Þ´º ¼Ò½ºÄÚµå·Î, Æ®¸®¸¦ ÆîÃļ ÇØ´ç ºÎºÐÀ» Ŭ¸¯ÇÒ ¶§ showData ÇÔ¼ö¸¦ È£ÃâÇØ ·¹ÀÌºí °ªÀ» alert âÀ¸·Î º¸¿©ÁÖ°í ÀÖ´Ù. ±× °á°ú´Â´Â <ȸé 2>¿Í °°´Ù. <¸®½ºÆ® 1>Àº ÀÚ¹Ù½ºÅ©¸³Æ®¿Í XML ¹®¹ýÀ» ¾Æ´Â °³¹ßÀÚ¶ó¸é ½±°Ô ¿Í ´êÀ¸¸®¶ó »ý°¢ÇÑ´Ù. ±× ÀÌÀ¯´Â Ç÷º½º¿¡¼ ±âº»ÀûÀÎ ÄÚµå´Â XML ¹®¹ýÀ» µû¸£´Â MXML ÆÄÀÏ Çü½ÄÀ¸·Î ÀúÀåµÇ°í, ¸¶¿ì½º Ŭ¸¯ µîÀÇ À̺¥Æ® 󸮴 ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¹®¹ý°ú À¯»çÇÑ ¾×¼Ç½ºÅ©¸³Æ® 2.0ÀÇ ±â¼úÀ» ¾²±â ¶§¹®ÀÌ´Ù. ±×·¡¼ ÇÊÀÚµµ Ç÷º½ºÀÇ Äڵ带 ÀÌÇØÇÏ°í ±¸ÇöÇÏ´Â µ¥ ±×¸® ¿À·¡ °É¸®Áö ¾Ê¾ÒÀ» »Ó ¾Æ´Ï¶ó ¾î¶² Äڵ峪 ÇÔ¼ö°¡ ÀÖÀ» °ÍÀÎÁö ¿¹ÃøÇÒ ¼ö ÀÖÀ» Á¤µµ¿´´Ù. ±×·¸´Ù¸é Ç÷º½º°¡ Áö¿øÇϴ ǥÁØÈµÈ ±â¼úÀº ¾î¶² °ÍÀÌ ÀÖ´ÂÁö »ìÆ캸ÀÚ.
¡ß J2EE : Ç÷º½º´Â ÀÚ¹Ù ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö¿¡¼ ÀÛµ¿µÇ¸ç, ³ªÁß¿¡´Â ´å³Ý Ç÷§Æû¿¡¼µµ ÀÛµ¿µÇµµ·Ï Áö¿øÇÒ °ÍÀÌ´Ù. ¡ß XML : XML ¹®¹ýÀ» µû¸£´Â MXML ÆÄÀÏ Çü½ÄÀ¸·Î Äڵ带 ÀúÀåÇÏ°í, 'mx'¶ó´Â XML ³×ÀÓ½ºÆäÀ̽º¸¦ »ç¿ëÇÑ´Ù. ¡ß DOM ·¹º§ 3 À̺¥Æ® ¸ðµ¨ : Ç÷º½ºÀÇ À̺¥Æ® ¸ðµ¨ÀÌ ¾²´Â °ÍÀ¸·Î DOM Æ®¸® ±¸Á¶¸¦ ÅëÇØ À̺¥Æ®¸¦ Àü´ÞÇÏ´Â ¹æ½ÄÀÌ´Ù. ¡ß ECMAScript/ÀÚ¹Ù½ºÅ©¸³Æ® : Ç÷º½º¿¡¼´Â ÀÌ¿Í À¯»çÇÑ ¾×¼Ç½ºÅ©¸³Æ®¸¦ Àû¿ëÇß´Ù. ¡ß À¥ ¼ºñ½º : Ç÷º½º ¾ÖÇø®ÄÉÀ̼ÇÀº HTTP Åë½Å»Ó ¾Æ´Ï¶ó XML Åë½Å ÇÁ·ÎÅäÄÝÀÎ SOAP ¸Þ½ÃÁö·Î µ¥ÀÌÅ͸¦ ¼Û¼ö½ÅÇÒ ¼ö ÀÖ´Ù. ¡ß CSS : MXML ½ºÅ¸ÀÏÀº À̸¦ ±âÃÊ·Î ÇÑ´Ù. ¡ß ÀÚ¹Ù °´Ã¼ Áö¿ø : MXML ű״ ÀÚ¹ÙºóÁ ºñ·ÔÇÑ ÀÏ¹Ý ÀÚ¹Ù °´Ã¼¸¦ »ç¿ëÇÒ ¼ö ÀÖ´Ù. ¡ß SWF : Ç÷º½º´Â °øÀÎµÈ Ç÷¡½Ã ÆÄÀÏ Æ÷¸ËÀÎ SWF ÆÄÀÏ·Î ÄÄÆÄÀϵȴÙ. ¡ß SVG(Scalable Vector Graphics) : Ç÷º½º´Â º¤ÅÍ Çü½ÄÀÇ ±×·¡ÇÈ Ç¥ÁØÀÎ SVG¸¦ µû¸¥´Ù.
ÀÚ¹Ù ±â¹Ý À¥ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß°ú À¯»ç Ç÷º½º¿¡¼ »ç¿ëÇÏ´Â °¢ ¿ä¼Ò(ÄÄÆ÷³ÍÆ®)µéÀº ³Î¸® ¾Ë·ÁÁø Ç¥ÁØ ±â¼úÀ» »ç¿ëÇϱ⠶§¹®¿¡ ÀÚ¹Ù¸¦ ÀÌ¿ëÇØ À¥À» °³¹ßÇغ» »ç¶÷À̶ó¸é ±× ±â´ÉÀÌ ¼·Î À¯»çÇÔÀ» ¾Ë ¼ö ÀÖ´Ù. <Ç¥ 1>¿¡ Ç÷º½º¿Í ÀÚ¹Ù ±â¹Ý À¥ °³¹ß½Ã À¯»çÇÏ°Ô ¾²ÀÌ´Â ±â¼úµéÀ» Á¤¸®Çß´Ù.
|
<Ç¥ 1> Ç÷º½º¿Í ÀÚ¹Ù ±â¹Ý À¥ °³¹ßÀÇ À¯»ç ¿ä¼Ò |
¡ß ¹®¹ý : Ç÷º½º¿¡¼´Â HTML ´ë½Å¿¡ XMLÀ» µû¸£´Â MXMLÀ» ¾´´Ù. ¶ÇÇÑ Ç÷º½º¿¡¼´Â ÆùÆ®³ª »ö»ó µîÀÇ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÏ´Â CSSó·³ Style, Font, Theme µîÀ» »ç¿ëÇÑ´Ù. Ŭ¶óÀ̾ðÆ®ÀÇ À̺¥Æ® 󸮸¦ À§ÇØ ÀÚ¹Ù½ºÅ©¸³Æ®¿Í À¯»çÇÑ ÄÚµù ½ºÅ¸ÀÏÀ» Áö´Ñ ¾×¼Ç½ºÅ©¸³Æ®¸¦ »ç¿ëÇÑ´Ù. ¡ß ÄÄÆ÷³ÍÆ® ¹× È¸é ±¸¼º : »ç¿ëÀÚ È¸éÀ» ±¸¼ºÇÏ´Â ÄÄÆ÷³ÍÆ®·Î´Â ÀÚ¹ÙÀÇ AWT³ª Swing°ú °°Àº ÄÁÆ®·Ñ°ú ÄÁÅ×À̳ʰ¡ ÀÖ´Ù. ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇØ È¸éÀ» ±¸¼ºÇϱâ À§ÇØ ÀÚ¹Ù¿¡¼´Â ÄÁÅ×ÀÌ³Ê ¹× ·¹À̾ƿô ¸Å´ÏÀú¸¦ »ç¿ëÇϴµ¥ Ç÷º½º¿¡¼´Â ÀÌ¿Í À¯»çÇÑ ÄÁÅ×À̳ʸ¦ »ç¿ëÇÑ´Ù. ¡ß »ç¿ëÀÚ Á¤ÀÇ ÄÄÆ÷³ÍÆ® : ÀÚ¹Ù¿¡¼´Â ÀÚ¹ÙºóÁ ÅÂ±× ¶óÀ̺귯¸®¸¦ »ç¿ëÇϴµ¥ ºñÇØ Ç÷º½º¿¡¼´Â SWC(Ç÷¡½Ã ÄÄÆ÷³ÍÆ®)³ª Ä¿½ºÅÒ ÄÄÆ÷³ÍÆ® ¹× JSP ű׶óÀ̺귯¸®¸¦ Á¤ÀÇÇØ »ç¿ëÇÒ ¼ö ÀÖ´Ù.
<Ç¥ 1>ó·³ À¯»çÇÑ ±â¼úÀÌ ¸¹À¸¹Ç·Î HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ®, ±×¸®°í AWTÀÇ ÄÄÆ÷³ÍÆ® ¹èÄ¡ ¹× ·¹À̾ƿô ¸Å´ÏÀúÀÇ °³³äÀ» ¾Ë¸é ´ëÃæ Ç÷º½ºÀÇ ÄÚµå´Â ÀÌÇØÇÒ ¼ö ÀÖÀ¸¸®¶ó »ý°¢µÈ´Ù. ±×¸®°í Ç÷º½º´Â µ¶¸³ÀûÀ¸·Î ±¸µ¿µÇ´Â ¼¹ö°¡ ¾Æ´Ï¶ó ÀÚ¹Ù ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö¿¡ ¹èÄ¡µÇ±â ¶§¹®¿¡ JSP¸¦ ºñ·ÔÇÑ ÀÚ¹Ù °´Ã¼, ½ºÆ®·µÃ÷ ÇÁ·¹ÀÓ¿öÅ©, À¥ ¼ºñ½º µî°úµµ ½±°Ô ¿¬µ¿ÇÒ ¼ö ÀÖ´Ù. ±×·¯¸é ¾î¶»°Ô Ç÷º½º¸¦ ¹èÄ¡ÇÏ´ÂÁö »ìÆ캸ÀÚ.
Ç÷º½º´Â ¼¹ö ÄÄÆ÷³ÍÆ® Ç÷º½º´Â µ¶¸³ÀûÀ¸·Î ½ÇÇàµÇ´Â ¼¹ö°¡ ¾Æ´Ï¶ó JRun, ÅèĹ µî WAS(Web Application Server)³ª JSP ÄÁÅ×À̳ʿ¡ ¹èÄ¡µÇ´Â ¼¹ö ÄÄÆ÷³ÍÆ®ÀÌ´Ù. µû¶ó¼ JSP ÄÁÅ×À̳ʰ¡ ¼³Ä¡µÇ¾î ÀÖÀ» °æ¿ì ¼Õ½±°Ô Ç÷º½º °³¹ß ȯ°æÀ» ±¸ÃàÇÒ ¼ö ÀÖ´Ù.
Ç÷º½º ÀνºÅç ÈÄ flex.war¸¦/WEB-INF ¹Ø¿¡ Ç®¾îÁÖ¸é ¾Öµå¿ÂµÈ´Ù Ç÷º½º ¼¹ö ȯ°æ ±¸ÃàÀº Á¦¸ñó·³ °£´ÜÇÏ´Ù. ÇöÀç´Â Ç÷º½º 1.0 ¼³Ä¡ ÆÄÀÏÀ» ±¸ÇÏ·Á¸é ¸ÅÅ©·Î¹Ìµð¾î ȨÆäÀÌÁö¿¡¼ ¼³Ä¡ CD¸¦ ÁÖ¹®ÇØ¾ß ÇÏÁö¸¸, ÇâÈÄ¿¡´Â ´Ù¿î·Îµå »çÀÌÆ®¿¡¼ ¹Ù·Î ´Ù¿î¹ÞÀ» ¼ö ÀÖÀ» °ÍÀ̶ó°í ÇÑ´Ù. ´ÙÀ½Àº ÅèĹ 5.0¿¡¼ server.xml ÆÄÀÏ¿¡ flex¿Í samples¶ó´Â ÄÁÅؽºÆ®¸¦ Ãß°¡Çϱâ À§ÇÑ ¼³Á¤ÀÌ´Ù.
<Context path="" docBase="ROOT" debug="0" reloadable="true"/> <Context path="/flex" docBase="ROOT/flex" debug="0" reloadable="true"/> <Context path="/samples" docBase="ROOT/samples" debug="0" reloadable="true"/>
|
<ȸé 3> Ç÷º½º ÄÄÆ÷³ÍÆ® ¼³Ä¡ µð·ºÅ丮 | CD¿¡ ÀÖ´Â ¼³Ä¡ ÆÄÀÏÀ» ÀνºÅçÇÏ¸é ¼³Ä¡ µð·ºÅ丮¿¡ flex.warÀÌ »ý±ä´Ù. flex.warÀÇ ¾ÐÃàÀ» Ç®¾î¼ »ý±â´Â WEB-INF ÀÌÇÏ µð·ºÅ丮ÀÇ ÆÄÀϵéÀ» <ȸé 3>ó·³ JSP ÄÁÅ×ÀÌ³Ê ·çÆ® µð·ºÅ丮ÀÇ WEB-INF µð·ºÅ丮¿¡ º¹»çÇϸé ÇöÀç ¼³Á¤ ±×´ë·Î Ç÷º½º¸¦ ±¸µ¿ÇÒ ¼ö ÀÖ´Ù. ¾ÕÀÇ Äڵ忡¼ samples ÄÁÅؽºÆ®ÀÇ °æ¿ì flex.war¸¦ º¹»çÇØÁ൵ µÇ³ª »ùÇà Äڵ尡 ¾øÀ¸¹Ç·Î flex.war¿Í °°ÀÌ »ý¼ºµÇ´Â samples.war ÆÄÀϵéÀ» µû·Î samples¶ó´Â µð·ºÅ丮¸¦ ¸¸µé¾î¼ ¾ÐÃàÀ» Ç®¾îÁØ´Ù. ÄÁÅؽºÆ®¿Í ÄÄÆ÷³ÍÆ® ¼³Á¤ÀÌ Á¦´ë·Î µÆÀ» °æ¿ì JSP ÄÁÅ×À̳ʸ¦ Àç°¡µ¿Çϸé ÅèĹ Äֿܼ¡¼ Ç÷º½º 1.0ÀÌ ¼³Á¤µÆ´Ù´Â ¸Þ½ÃÁö°¡ ³ª¿À¸ç, http://127.0.0.1:8080/samples/·Î Á¢¼ÓÇÏ¸é °¢Á¾ µ¥¸ð¸¦ º¼ ¼ö ÀÖ´Ù.
Ç÷º½º ¼¹ö´Â mxmlÀ» .swf ÆÄÀÏ·Î ÄÄÆÄÀÏÇØ ¼ºñ½ºÇÑ´Ù JSPÀÇ °æ¿ì ¼¹ö·Î JSP ÆäÀÌÁöÀÇ ¿äûÀÌ Ã³À½ µé¾î¿À¸é ¼ºí¸´À¸·Î ÄÄÆÄÀÏÇØ Ã³¸® °á°ú¸¦ ¸®ÅÏÇÑ´Ù. ±× ÈÄ¿¡´Â JSP ÆÄÀÏÀÇ º¯°æ ¿©ºÎ¸¦ üũÇØ º¯°æµÆÀ¸¸é JSP¸¦ ¼ºí¸´À¸·Î ÄÄÆÄÀÏÇØ ¸®ÅÏÇÏ°í, º¯°æµÈ ³»¿ëÀÌ ¾øÀ¸¸é ij½Ã µð·ºÅ丮ÀÇ ÄÄÆÄÀÏµÈ ¼ºí¸´À» ±×´ë·Î ¸®ÅÏÇÑ´Ù.
JSPÀÇ ¼ºñ½º ¹æ½Ä°ú ¸¶Âù°¡Áö·Î Ç÷º½ºµµ ³»ÀåµÈ ÄÄÆÄÀÏ·¯°¡ ÀÖÀ¸¸ç MXML ÆÄÀÏ¿¡ ´ëÇÑ ¿äûÀÌ µé¾î¿À¸é .swf·Î ÄÄÆÄÀÏÇÑ´Ù. ÀÌ´Â ¼Ò½ºÄڵ尡 ¹Ù²î±â Àü±îÁö ij½ÃµÇ¾î ¼ºñ½ºµÈ´Ù. ¹Ù²ã ¸»Çϸé MXML Çü½ÄÀ¸·Î ÇÊ¿äÇÑ Äڵ带 ÀÛ¼ºÇÏ°í, JSP ¹®¼ µð·ºÅ丮¿¡ ³Ö¾î µÎ¸é Ç÷¡½ÃÀÇ °á°ú ȸéÀ» º¼ ¼ö ÀÖ´Ù.
Ç÷º½º ÇÁ·¹Á¨Å×ÀÌ¼Ç ¼¹ö´Â Ç÷º½º °³¹ß°ú ½ÇÇà ¼ºñ½º¸¦ Á¦°øÇÑ´Ù ¾î¶»°Ô º¸¸é Ç÷º½º ÄÄÆÄÀÏ·¯ ½ÇÇà ÆÄÀÏÀ» ÀÌ¿ëÇØ mxmlÀ» swf ÆÄÀÏ·Î ÄÄÆÄÀÏÇØ À¥ ¼¹ö¿¡ ¿Ã·Á ¼ºñ½ºÇÏ¸é µÇÁö ¾ÊÀ»±î ÇÏ´Â »ý°¢À» ÇÏ´Â »ç¶÷µµ ÀÖÀ» °ÍÀÌ´Ù. ±×·¯³ª ±»ÀÌ Ç÷º½º¸¦ ÇÁ·¹Á¨Å×ÀÌ¼Ç ¼¹ö·Î Çؼ ¼ºñ½ºÇÏ´Â ÀÌÀ¯°¡ ÀÖ´Ù. ¹Ù·Î º¯°æµÉ ¶§¸¶´Ù ÀçÄÄÆÄÀÏÇØ¾ß ÇÏ´Â ºÒÆíÇÔÀÌ Àֱ⠶§¹®ÀÌ´Ù. ¿©±â¿¡ ºÐ»ê ȯ°æ¿¡¼ ºñÁî´Ï½º ·ÎÁ÷À» Á¦°øÇÏ´Â ÀÏ¹Ý ÀÚ¹Ù °´Ã¼»Ó¸¸ ¾Æ´Ï¶ó ÀÚ¹Ù, ´å³Ý µîÀÇ À¥ ¼ºñ½º °´Ã¼¿Í ¿¬µ¿ÇÏ´Â ¼ºñ½º¸¦ Á¦°øÇÑ´Ù´Â °Íµµ ÇÑ ¸òÀ» ÇÑ´Ù. ÇÑÆíÀ¸·Î´Â ÇÊÀÚ´Â ÀÚ¹Ù¿¡¼ PDF·Î Ãâ·ÂÇÏ´Â ÄÄÆ÷³ÍƮó·³ swf·Î ¸¸µé¾î ÁÖ´Â ÄÄÆ÷³ÍÆ®µµ ³ª¿ÀÁö ¾ÊÀ»±î ÇÏ´Â »ý°¢À» Çغ»´Ù.
Ç÷º ¾ÆÅ°ÅØó Ç÷º½º ¾ÆÅ°ÅØó´Â Ç÷º½º ÇÁ·¹Á¨Å×ÀÌ¼Ç ¼¹ö¸¦ Áß½ÉÀ¸·Î ÆľÇÇÏ¸é µÈ´Ù(<±×¸² 1>). Ç÷º½º ÇÁ·¹Á¨Å×ÀÌ¼Ç ¼¹ö´Â Å©°Ô °³¹ß ȯ°æ ºÎºÐ°ú ½ÇÇà ȯ°æ ºÎºÐÀ¸·Î ±¸¼ºµÇ¾î ÀÖ´Ù. °³¹ß ȯ°æÀº MXML, ¾×¼Ç½ºÅ©¸³Æ®, Ç÷º½º Ŭ·¡½º ¶óÀ̺귯¸®¸¦ Ç÷º½º ¾ÖÇø®ÄÉÀÌ¼Ç ÇÁ·¹ÀÓ¿öÅ©·Î ¹À» ¼ö ÀÖ´Ù. ·±Å¸ÀÓ ¼ºñ½º´Â swf ÄÄÆÄÀÏ ¹× ij½Ì µîÀÇ ½ÇÇà ¼ºñ½º¸¦ Á¦°øÇÑ´Ù.
|
<±×¸² 1> Ç÷º½º ¾ÆÅ°ÅØó | <±×¸² 1>ÀÇ ÇÏ´ÜÀ» º¸¸é Ç÷º½º ÇÁ·¹Á¨Å×ÀÌ¼Ç ¼¹ö°¡ WAS¿¡ ¾Öµå¿ÂµÇ´Â ¸ð½ÀÀ» Ç¥ÇöÇϱâ À§ÇØ J2EE¿Í ´å³ÝÀ», ¿ìÃø¿¡´Â ÅؽºÆ® ¿¡µðÅÍ¿Í À§ÁöÀ¨ ¹æ½ÄÀ» Áö¿øÇÏ´Â ¡®ºê·¡µð¡¯¶ó´Â Ç÷º½º Àü¿ë IDE¸¦ º¼ ¼ö ÀÖ´Ù. ºê·¡µð´Â ÇöÀç º£Å¸ 4 Å×½ºÆ® ÁßÀ̸ç, ¿ÜÇüÀº ¸¶Ä¡ µå¸²À§¹ö MX 2004¸¦ º¸´Â °Í°ú °°´Ù.
|
<ȸé 4> Ç÷º½ºÀÇ IDE ºê·¡µð | MXMLÀº Ç÷º½º ¾ÖÇø®ÄÉÀ̼ÇÀ» XML·Î ±â¼úÇÑ´Ù MXMLÀº XML ±â¹ÝÀ̹ǷΠÀÚ¹Ù °ü·Ã IDE´Â ¹°·Ð ¸Þ¸ðÀå°ú °°Àº ÅؽºÆ® ¿¡µðÅ͸¸ À־ ½±°Ô ÄÚµùÇÒ ¼ö ÀÖ´Ù. ¶ÇÇÑ Ç÷º½º Àü¿ë IDEÀÎ ºê·¡µð¿¡¼´Â À§ÁöÀ¨ ¹æ½ÄÀÇ ÄÚµùÀÌ °¡´ÉÇÏ´Ù. ºê·¡µð´Â Ç÷º½º ÇÁ·Î±×·¥ ÀÛ¼º½Ã ·¹À̾ƿô°ú UI, µ¥ÀÌÅÍ ¼ºñ½º µî ÇÁ·¹Á¨Å×ÀÌ¼Ç ºÎºÐÀ» Ç¥ÇöÇÏ´Â µ¥¿¡ »ç¿ëµÈ´Ù. MXMLÀº HTML¿¡ ºñÀ¯µÉ ¼ö Àִµ¥ ±× Ư¡Àº ´ÙÀ½°ú °°´Ù.
¡ß À¯»çÁ¡ : MXMLÀº HTMLÀÌ À¥¿¡¼ º¸À̴ ȸéÀ» ű׷ΠǥÇöÇÏ´Â ¸¶Å©¾÷ ¾ð¾îÀÎ °Íó·³ Ç÷º½º¿¡¼ ¾î¶² ÄÄÆ÷³ÍÆ®¸¦ ¾î¶»°Ô º¸À̵µ·Ï ÇÒ °ÍÀΰ¡¸¦ ±â¼úÇÏ´Â ¸¶Å©¾÷ ¾ð¾îÀÌ´Ù. ÀÌ°ÍÀº HTMLó·³ °¢ ÄÄÆ÷³ÍÆ®ÀÇ ¼Ó¼ºÀ» ÁöÁ¤ÇÔÀ¸·Î½á ȸéÀ» Ç¥ÇöÇÒ ¼ö ÀÖ´Ù. Ç÷º½º¿¡¼ »ç¿ëÇÏ´Â ºñÁÖ¾óÇÑ ÄÄÆ÷³ÍÆ®µéÀº <ȸé 5>ÀÇ ÄÁÆ®·Ñ°ú <ȸé 6>ÀÇ ÄÁÅ×À̳ʷΠ±¸¼ºµÇ¸ç, ÄÁÆ®·ÑÀº ÄÁÅ×À̳ʿ¡ ´ã°Ü¼ ¹èÄ¡µÈ´Ù´Â Á¡¿¡¼ ÀÚ¹ÙÀÇ AWT¿Í À¯»çÇÏ´Ù. ¡ß Â÷ÀÌÁ¡ : HTMLÀº ÁöÁ¤µÈ ű׸¸ °¡´ÉÇϳª MXMLÀº Ä¿½ºÅÒ ÄÄÆ÷³ÍÆ®µµ Ç¥ÇöÇÒ ¼ö ÀÖ´Ù. ¶ÇÇÑ HTMLÀº ºê¶ó¿ìÀú ȸ鿡 ³ªÅ¸³¯ °Í¸¸À» ±â¼úÇÏÁö¸¸ MXMLÀº Ãß°¡·Î µ¥ÀÌÅÍ¿Í ¿¬µ¿ÇÏ´Â ºÎºÐµµ ±â¼úÇÑ´Ù. ¡ß MXML ¹®¹ý : MXMLÀº XML ¹®¹ý¸¸ ¾Ë¸é ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖ´Ù. XML ¹®¹ýÀ» µû¸£¹Ç·Î ±¸Á¶ÀûÀÌ¸ç °¡µ¶¼ºÀÌ ³ô´Ù. ´ÙÀ½ÀÇ ÄÚµå´Â 'Hello Flex'¶ó´Â ¸Þ½ÃÁö¸¦ Label ÄÁÆ®·Ñ¿¡ Âï¾îÁÖ´Â °£´ÜÇÑ ÄÚµåÀÌ´Ù. 2° ÁÙÀº XMLÀÇ ½ÃÀÛÀ» ¾Ë¸®´Â ºÎºÐÀ̸ç ÀÎÄÚµù ¹æ½ÄÀ» ÁöÁ¤ÇÑ´Ù. ¸¸¾à¿¡ MXML ¾È¿¡ ÇѱÛÀÌ ÀÖ´Ù¸é <¸®½ºÆ® 3>ó·³ ÀÎÄÚµùÀ» 'euc-kr'·Î ÁöÁ¤ÇØ¾ß ÆÄ½Ì ¿¡·¯°¡ ¾È ³´Ù. 3° ÁÙÀÇ <mx:Application>Àº MXMLÀÇ ·çÆ® ű׷Π¿©±â¼ºÎÅÍ MXMLÀÌ ½ÃÀ۵Ǹç </mx:Application>À¸·Î ³¡³´Ù. ¶ÇÇÑ 'mx'¶ó´Â ³×ÀÓ½ºÆäÀ̽º »ç¿ëÀ» ³ªÅ¸³»°í ÀÖÀ¸¸ç, ÀÌ¿¡ ¸ðµç ű׿¡´Â 'mx'°¡ ºÙ´Â´Ù. 4° ÁÙÀº Label ÄÁÆ®·ÑÀ» ¾²°Ú´Ù´Â °ÍÀ̸ç, Label¿¡ ÅؽºÆ® ¼Ó¼ºÀº 'Hello Flex'·Î ÇÏ°í ÆùÆ® Å©±â´Â 20ÀÌ´Ù. ÀÌó·³ HTML¿¡¼ »ç¿ëÇß´ø ¿©·¯ °¡Áö ¼Ó¼ºÀº MXML ű×ÀÇ ÇÁ·ÎÆÛƼ·Î Á¦°øµÇ´Âµ¥, MXML ű׿¡´Â ÄÄÆ÷³ÍÆ® ¼Ó¼º, À̺¥Æ®, ½ºÅ¸ÀÏ, À̺¥Æ® ¹ÝÀÀ(behavior) µîÀ» ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. ÀÌ´Â ¾×¼Ç½ºÅ©¸³Æ®ÀÇ ÇÔ¼ö·Î½á Á¢±Ù°ú Á¦¾î°¡ °¡´ÉÇÏ´Ù.
// °£´ÜÇÑ Ç÷º½º ¿¹Á¦ <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Label text="Hello Flex" fontSize="20"/> </mx:Application>
// °£´ÜÇÑ Ç÷º½º ¿¹Á¦(ÇѱÛ) <?xml version="1.0" encoding="euc-kr"?> ¡¦Áß·«¡¦
¾×¼Ç½ºÅ©¸³Æ®´Â À̺¥Æ®, ¿¡·¯ ¹× µ¥ÀÌÅ͸¦ ó¸®ÇÏ´Â ½ºÅ©¸³Æ®ÀÌ´Ù Ç÷º½ºÀÇ UI´Â À̺¥Æ® Áß½ÉÀ¸·Î ÀÛµ¿ÇÑ´Ù. Ç÷º½º¿¡¼´Â »ç¿ëÀÚ°¡ ¹ß»ý½ÃÅ°´Â À̺¥Æ® À¯ÇüÀ» Á¤ÀÇÇÏ°í, ¾î¶»°Ô ¹ÝÀÀÇÒ °ÍÀΰ¡¸¦ ¾×¼Ç½ºÅ©¸³Æ®·Î ±â¼úÇÑ´Ù. ¾×¼Ç½ºÅ©¸³Æ®·Î½á À̺¥Æ®¸¦ ó¸®ÇÏ´Â ¹æ¹ýÀº ÀÚ¹Ù½ºÅ©¸³Æ®¿Í À¯»çÇÏ´Ù. ½ÇÇà Áß¿¡ ¹ß»ýÇÏ´Â ¿¡·¯³ª µ¥ÀÌÅÍ °ËÁõ ¿¡·¯¸¦ °¨ÁöÇØ »ç¿ëÀÚ¿¡°Ô ¸Þ½ÃÁö¸¦ Àü´ÞÇϸç, Ç÷º½º ÄÁÆ®·Ñ Áß¿¡¼ ¹è¿°ú °°Àº µ¥ÀÌÅÍ°¡ ÀÖ¾î¾ß ȸ鿡 º¸¿©Áö´Â °Íµé(¿¹ : ¸®½ºÆ®, ±×¸®µå, Æ®¸® ¸Þ´º µî)¿¡ ´Ù¾çÇÑ ¹æ¹ýÀ¸·Î ³»¿ÜºÎ µ¥ÀÌÅ͸¦ Á¦°øÇÑ´Ù.
¾×¼Ç½ºÅ©¸³Æ®´Â ¹®¹ý, ¿ëµµ µî¿¡¼ ÀÚ¹Ù½ºÅ©¸³Æ®¿Í À¯»çÇÏÁö¸¸ Â÷ÀÌÁ¡µµ ÀÖ´Ù. Çϳª´Â Document, Window, Anchor¿Í °°Àº ºê¶ó¿ìÀú °ü·Ã °´Ã¼¸¦ Áö¿øÇÏÁö ¾Ê´Â´Ù´Â °ÍÀÌ´Ù. ÀÌ´Â ÀÏ¹Ý À¥ ÆäÀÌÁö°¡ ÆäÀÌÁö(À©µµ¿ì) Áß½ÉÀ¸·Î ¿òÁ÷ÀÌ´Â °Í°ú´Â ´Þ¸® Ç÷º½º´Â ÇÑ ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ȸéÀ» ¸ðµÎ ó¸®Çϱ⠶§¹®ÀÌ´Ù. ±×¸®°í ÀÚ¹Ù½ºÅ©¸³Æ®´Â String °ªÀÇ ±æÀÌ°¡ ¡®0¡¯ÀÌ ¾Æ´Ï¸é true¸¦ ¸®ÅÏÇÏ°í, ¡®0¡¯À̸é false¸¦ ¸®ÅÏÇÏ´Â ¹Ý¸é ¾×¼Ç½ºÅ©¸³Æ®´Â StringÀ» number·Î º¯È¯ÇØ ¡®0¡¯À̸é false¸¦ ¸®ÅÏÇÏ°í, ¾Æ´Ï¸é true¸¦ ¸®ÅÏÇÑ´Ù.
Ç÷º½º Ŭ·¡½º ¶óÀ̺귯¸®´Â Ç÷º½º ÄÄÆ÷³ÍÆ®¸¦ Á¦°øÇÑ´Ù Ç÷º½º Ŭ·¡½º ¶óÀ̺귯¸®´Â ÄÁÆ®·Ñ°ú ÄÁÅ×À̳ʷΠ±¸¼ºµÇ¾î ÀÖ´Ù. ÄÁÆ®·ÑÀº »ç¿ëÀÚ ÀÛµ¿À» Çڵ鸵Çϰųª µ¥ÀÌÅ͸¦ º¸¿©ÁÖ´Â ÄÄÆ÷³ÍÆ®ÀÌ°í(<ȸé 5>), ÄÁÅ×À̳ʴ Ç÷¡½Ã Ç÷¹À̾ ±×¸®´Â ȸéÀ̳ª ÄÁÆ®·ÑÀ» ¹èÄ¡Çϱâ À§ÇÑ ÄÄÆ÷³ÍÆ®ÀÌ´Ù(<ȸé 6>). À̵éÀº Ç÷º½º ¾ÖÇø®ÄÉÀ̼ÇÀÇ °³¹ß ÆíÀǸ¦ À§ÇØ ´ÙÀ½°ú °°Àº Ư¼ºÀ» °¡Áø´Ù.
¡ß ¸ðµç ÄÄÆ÷³ÍÆ®µéÀº MXML API¸¦ ÅëÇØ ¼±¾ðÇÏ°í ±× ¼Ó¼º°ú À̺¥Æ®¸¦ Á¤ÀÇÇÒ ¼ö ÀÖ´Ù. ¡ß ¾×¼Ç½ºÅ©¸³Æ® API´Â ½ÇÇà½Ã¿¡ ÄÁÆ®·ÑÀÇ ¸Þ½îµå¿Í ¼Ó¼º, À̺¥Æ®¸¦ Á¦¾îÇÒ ¼ö ÀÖ´Ù. ¡ß ½ºÅ¸ÀÏ, ½ºÅ², ÆùÆ® µîÀ» ÀÌ¿ëÇØ »ç¿ëÀÚ Á¤ÀÇÀÇ ·è¾ØÇÊÀ» Àû¿ëÇÒ ¼ö ÀÖ´Ù.
·±Å¸ÀÓ ¼ºñ½º¿¡¼´Â °ü¸®ÀûÀÎ ¼¹ö ±â´ÉÀ» Á¦°øÇÑ´Ù Ç÷º½º ·±Å¸ÀÓ ¼ºñ½º¿¡¼´Â È÷½ºÅ丮 °ü¸®, ¿ø°Ý °´Ã¼ Á¢±Ù µî °ü¸®ÀûÀÎ ¼¹öÀÇ ±â´ÉÀ» Á¦°øÇÔÀ¸·Î½á º¸´Ù Æí¸®ÇÏ°Ô °³¹ßÇÒ ¼ö ÀÖ´Ù. ±×·¯³ª ÀÎÁõÀ̳ª ¼¼¼Ç °ü¸®Ã³·³ ÀÚ¹Ù ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö¿Í Áߺ¹µÇ´Â ±â´ÉÀº ÇØ´ç ¼¹öÀÇ ±â´ÉÀ» È°¿ëÇϵµ·Ï µÇ¾î ÀÖ´Ù. ÀÌ¿Ü¿¡µµ ÄÄÆÄÀÏ ¹× ij½Ì, Ç÷¡½Ã Ç÷¹ÀÌ¾î °¨Áö ¹× ¾÷µ¥ÀÌÆ® µîÀÇ ±â´ÉÀÌ Á¦°øµÈ´Ù.
ÇÑÆí Ç÷º½ºÀÇ ÄÚµå´Â ¾×¼Ç½ºÅ©¸³Æ® Ŭ·¡½º, MXML ÆÄÀÏ, SWF ÆÄÀÏ ¹× ¿ÜºÎ ÄÄÆ÷³ÍÆ® µîÀ¸·Î ±¸¼ºµÈ´Ù. À̵éÀÌ ÄÄÆÄÀÏµÈ °á°ú´Â SWF ÆÄÀÏ·Î Ç÷¡½Ã Ç÷¹À̾ ´Ù¿î·ÎµåµÇ¾î Ŭ¶óÀ̾ðÆ®¿¡¼ Ç÷¹À̵ȴÙ. ÇϳªÀÇ ÆÄÀÏ·Î ¸¸µé¾îÁö±â ¶§¹®¿¡ MXML ÆÄÀÏÀ̳ª ÀÎŬ·çµåµÈ ¾×¼Ç½ºÅ©¸³Æ® ÆÄÀÏ ¹Û¿¡¼ Ŭ·¡½º¸¦ Á¤ÀÇÇϰųª »ç¿ëÇÒ ¼ö ¾øÀ¸¸ç, ÀÓÆ÷Æ®µÈ ¾×¼Ç½ºÅ©¸³Æ® Ŭ·¡½º´Â ÃÖÁ¾ SWF ÆÄÀÏ¿¡ Ãß°¡µÈ´Ù.
Ç÷º½º °³¹ßÀÇ ±âº»Àº MXML°ú ¾×¼Ç½ºÅ©¸³Æ® TVÀÇ ¸ð CF ±¤°í¿¡¼ ¡®ºÏÄ¡±â, ¹ÚÄ¡±â¡¯¸¸À¸·Î ·¦À» ÇÒ ¼ö ÀÖ´Ù°í Çߴµ¥ Ç÷º½ºµµ MXML°ú ¾×¼Ç½ºÅ©¸³Æ®¸¦ ¾Ë¸é ±âº»±â´Â Å͵æÇÑ ¼ÀÀÌ´Ù. MXMLÀº Ç÷º½ºÀÇ XMLÀÇ È®ÀåÆÇÀ¸·Î ÀÎÅÍÆäÀ̽º¸¦ ±â¼úÇϸç, ¾×¼Ç½ºÅ©¸³Æ®´Â ÀÚ¹Ù½ºÅ©¸³Æ®Ã³·³ À̺¥Æ®¿Í µ¥ÀÌÅ͸¦ ó¸®ÇÑ´Ù°í º¸¸é µÈ´Ù. MXML°ú ¾×¼Ç½ºÅ©¸³Æ®´Â WEB-IN\flex µð·ºÅ丮 ¹Ø¿¡ À§Ä¡ÇÏ´Â Ç÷º½º Ŭ·¡½º ¶óÀ̺귯¸®ÀÇ °¢Á¾ ÄÄÆ÷³ÍÆ®µéÀ» »ç¿ëÇÑ´Ù. ÀÌ ¼¼ °¡Áö ¿ä¼ÒµéÀÌ ¸ð¿© Ç÷º½º ¾ÖÇø®ÄÉÀÌ¼Ç ÇÁ·¹ÀÓ¿öÅ©¸¦ ±¸¼ºÇÑ´Ù.
¾×¼Ç½ºÅ©¸³Æ®´Â MXML¿¡ µé¾î°¡´Â À̺¥Æ® ó¸® ½ºÅ©¸³Æ®ÀÌ´Ù ¾×¼Ç½ºÅ©¸³Æ®´Â ¹öÆ°À» ´©¸£°Å³ª ¸¶¿ì½º¸¦ Á¶ÀÛÇÏ´Â µîÀÇ ¿©·¯ °¡Áö À̺¥Æ® 󸮸¦ ±â¼úÇÏ´Â ½ºÅ©¸³Æ®ÀÌ´Ù. ¾×¼Ç½ºÅ©¸³Æ®¿¡¼ MXMLÀ» »ç¿ëÇÏ´Â ¹æ¹ýÀº HTML ű×ÀÇ ´Ù¾çÇÑ À§Ä¡¿¡¼ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ È°¿ëÇÏ´Â ¹æ¹ý°ú À¯»çÇÏ´Ù. °£´ÜÇÑ ¹öÆ° ÄÁÆ®·ÑÀ» ¿¹·Î ¾×¼Ç½ºÅ©¸³Æ®¸¦ »ç¿ëÇÏ´Â ¹æ¹ýµéÀ» »ìÆ캸°Ú´Ù.
ÄÁÆ®·ÑÀÇ À̺¥Æ® ¼Ó¼º¿¡¼ ½ºÅ©¸³Æ® ó¸®Çϱ⠴ÙÀ½ÀÇ ÄÚµå´Â ¹öÆ° ÄÁÆ®·ÑÀÇ click À̺¥Æ® ¼Ó¼º¿¡ Á÷Á¢ÀûÀ¸·Î ¡®Å¬¸¯¡¯À̶ó´Â ¸Þ½ÃÁö¸¦ alert âÀ¸·Î »Ñ¸®µµ·Ï ±â¼úÇÏ´Â ¿¹ÀÌ´Ù. À̶§ mx.controls.Alert.show ÇÔ¼ö´Â system_classes µð·ºÅ丮¿¡ ±âº»À¸·Î Á¦°øµÇ´Â ¾×¼Ç½ºÅ©¸³Æ® ÇÔ¼öÀÌ´Ù.
<?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Button label="´©¸£¼¼¿ä" click="mx.controls.Alert.show('Ŭ¸¯!', 'Message');"/> </mx:Application>
½ºÅ©¸³Æ® ű׿¡¼ ÇÔ¼ö·Î½á À̺¥Æ® ó¸®Çϱ⠴ÙÀ½ÀÇ ÄÚµå´Â ÀÚ¹Ù½ºÅ©¸³Æ®°¡ <script> ÅÂ±× ¾È¿¡ ÇÔ¼ö¸¦ ±â¼úÇϵí <mx:Script> ÅÂ±× ¾È¿¡ ¾×¼Ç½ºÅ©¸³Æ®ÀÇ ÇÔ¼ö¸¦ ±â¼úÇÑ ¿¹ÀÌ´Ù. Áï ¹öÆ° ÄÁÆ®·Ñ¿¡ click À̺¥Æ® ¹ß»ý½Ã myButtonClick ÇÔ¼ö¸¦ È£ÃâÇÏ°í À̸¦ <mx:Script> ÅÂ±× ¾È¿¡ ±â¼úÇÑ °ÍÀ» º¸¿©ÁØ´Ù.
<?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Script> function myButtonClick() { mx.controls.Alert.show('Ŭ¸¯!', 'Message'); } </mx:Script> <mx:Button label="´©¸£¼¼¿ä" click="myButtonClick()"/> </mx:Application>
À̺¥Æ® ó¸® ÇÔ¼ö¸¦ ¾×¼Ç½ºÅ©¸³Æ® ÆÄÀÏ·Î µû·Î Á¤ÀÇÇØ »ç¿ëÇϱ⠴ÙÀ½Àº ÀÚ¹Ù½ºÅ©¸³Æ®°¡ <script> ÅÂ±× ¾È¿¡ µé¾î°¡´Â ÄÚµåµéÀ» .js ÆÄÀÏ¿¡ ÆÄÀÏ·Î »©µíÀÌ ¾×¼Ç½ºÅ©¸³Æ®°¡ .as ÆÄÀÏ¿¡ Á¤ÀÇÇÑ ¿¹ÀÌ´Ù. ¿©±â¼ my_script.as ÆÄÀÏÀº °°Àº µð·ºÅ丮¿¡ À§Ä¡Çϸç, ´Ù¸¥ µð·ºÅ丮¿¡ Á¤ÀÇÇÒ °æ¿ì »ó´ë ¶Ç´Â Àý´ë °æ·Î·Î Ç¥½ÃÇÏ¸é µÈ´Ù.
* my_action.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Script source="my_script.as" /> <mx:Button label="´©¸£¼¼¿ä" click="myButtonClick()"/> </mx:Application>
* my_script.as function myButtonClick() { mx.controls.Alert.show('Ŭ¸¯!!', 'Message'); }
¾×¼Ç½ºÅ©¸³Æ®¿¡¼ ÀÎŬ·çµåÇϱ⠴ÙÀ½Àº include¸¦ ű׷Πó¸®ÇÏÁö ¾Ê°í ¾È¿¡ Á¤ÀÇÇÑ ¿¹ÀÌ´Ù. #include ±¸¹®Àº ·ÎÁ÷¿¡ µû¶ó ÇÊ¿äÇÑ À§Ä¡¿¡ µ¿ÀûÀ¸·Î ¿Ã ¼ö ÀÖ´Ù.
<?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Script> #include "my_script.as" </mx:Script> <mx:Button label="´©¸£¼¼¿ä" click="myButtonClick()"/> </mx:Application>
¾×¼Ç½ºÅ©¸³Æ®¿¡¼ ÄÄÆ÷³ÍÆ® »ç¿ë ¹æ¹ý ¾×¼Ç½ºÅ©¸³Æ®¿¡¼ ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÑ´Ù´Â °ÍÀº ÄÚµå Àç»ç¿ë¼º ¹× º¹ÀâÇÑ ·ÎÁ÷À» ĸ½¶ÈÇÒ ¼ö ÀÖ´Ù´Â Á¡¿¡¼ ¸Å¿ì À¯¿ëÇÏ´Ù. ÀÌ´Â JSP¿¡¼ ÀÚ¹ÙºóÁ ¾²´Â °Í°ú À¯»çÇÏ´Ù. JSP¿¡¼´Â ÀÚ¹ÙºóÁî Ŭ·¡½º¸¦ ¸ÕÀú ¸¸µç »óÅ¿¡¼ JSP ű׳ª ½ºÅ©¸³Æ®¿¡¼ ¾²´Â ¹Ý¸é, ¾×¼Ç½ºÅ©¸³Æ®¿¡¼´Â MXML ÀÚü·Î Á¤ÀÇÇØ ¾µ ¼ö ÀÖ´Ù.
MXMLÀ» ÀÌ¿ëÇÑ ÄÄÆ÷³ÍÆ® »ç¿ë <¸®½ºÆ® 2>¿¡´Â µÎ °³ÀÇ ÆÄÀÏÀÌ Àִµ¥, GusuButton1.mxmlÀº ÄÄÆ÷³ÍÆ®¸¦ Á¤ÀÇÇÑ ÆÄÀÏÀÌ´Ù. ¿©±â¼´Â ¹öÆ°ÀÇ ±Û¾¾¸¦ »¡°£»öÀ¸·Î Á¤ÀÇÇß°í, click À̺¥Æ®¸¦ dispatchEvent ÇÔ¼ö¸¦ ÅëÇØ µû·Î Á¤ÀÇÇß´Ù. ÀÌ ÆÄÀÏ¿¡ Á¤ÀÇµÈ ¹öÆ°À»Custom1.mxmlÀÇ ¡®xmlnl=*¡¯¿¡¼ GosuButton1À̶õ À̸§À¸·Î ã¾Æ¿À¸ç, click À̺¥Æ®°¡ ¹ß»ýÇÏ¸é ¸Þ½ÃÁö¸¦ Ãâ·ÂÇÏ°Ô µÈ´Ù.
|
<¸®½ºÆ® 2> MXMLÀ» ÀÌ¿ëÇÑ ÄÄÆ÷³ÍÆ® »ç¿ë ¿¹ | |
| |
Custom1.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"> <GosuButton1 click="mx.controls.Alert.show('GosuButton1À» ´©¸£¼Ì±º¿ä^_^')"/> </mx:Application>
GosuButton1.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:HBox xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Metadata> [Event("click")] >/mx:Metadata> <mx:Button label="GosuButton1" color="red" click="dispatchEvent({type:'click'})"/> </mx:HBox>
| |
| ¾×¼Ç½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇÑ ÄÄÆ÷³ÍÆ® »ç¿ë <¸®½ºÆ® 3>Àº GosuButton.as ÆÄÀÏ¿¡ ÄÄÆ÷³ÍÆ®¸¦ Á¤ÀÇÇßÀ¸¸ç, ¿©±â¼´Â Button Ŭ·¡½º¸¦ GosuButton2 Ŭ·¡½º·Î ÀçÁ¤ÀÇÇß´Ù. Ç÷º½ºÀÇ ¸ðµç ÄÄÆ÷³ÍÆ®µéÀº MoviClip, UIObject, UIComponent ¼øÀ¸·Î ±¸¼ºµÇ¾î ÀÖ´Ù. ±×·¡¼ ÄÄÆ÷³ÍÆ®µéÀº µ¿ÀÏÇÑ API¸¦ ÅëÇØ ¼Ó¼º¿¡ Á¢±ÙÇÒ ¼ö ÀÖ´Ù. <¸®½ºÆ® 3>¿¡¼´Â init ¸Þ½îµå¿¡ ¹öÆ°ÀÇ Ä÷¯ ¹× ·¹ÀÌºí ¼Ó¼ºÀ» ÁöÁ¤Çß´Ù. custom2.mxml¿¡¼´Â GosuButton2·Î Á¤ÀÇµÈ Å¬·¡½º¸¦ ¡®gosu¡¯¶ó´Â ³×ÀÓ½ºÆäÀ̽º¿¡¼ ã¾Æ¼ ű׷Π»ç¿ëÇß´Ù.
|
<¸®½ºÆ® 3> ¾×¼Ç½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇÑ ÄÄÆ÷³ÍÆ® »ç¿ë ¿¹ | |
| |
custom2.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:gosu="*" xmlns:mx="http://www.macromedia.com/2003/mxml" > <gosu:GosuButton2 click="mx.controls.Alert.show('GosuButton2¸¦ ´©¸£¼Ì±º¿ä^_^')" /> </mx:Application>
GosuButton.as class GosuButton2 extends mx.controls.Button { function GosuButton2() { } function init(Void):Void { setStyle("color", 0x6666CC); setLabel("GosuButton2"); super.init(); invalidate(); } }
| |
| SWC ÄÄÆ÷³ÍÆ® Ç÷¡½Ã MX 2004¸¦ ÀÌ¿ëÇØ ¶óÀ̺귯¸®¿¡ ÀÖ´Â ÄÄÆ÷³ÍÆ®¸¦ SWC ÆÄÀÏ·Î ÀͽºÆ÷Æ®ÇÑ °ÍÀº Ç÷º½º¿¡¼ ÄÄÆ÷³ÍÆ®·Î »ç¿ëÇÒ ¼ö ÀÖ´Ù. SWC ÆÄÀÏ¿¡´Â SWF ÆÄÀÏ, À̹ÌÁö, ¸ÞŸ µ¥ÀÌÅÍ µîÀÌ ÇϳªÀÇ ¾ÐÃà ÆÄÀÏ·Î ÀúÀåµÈ´Ù. ÄÚµå ¿¹Á¦´Â Áö¸é °ü°è»ó ¸ÅÅ©·Î¹Ìµð¾î ȨÆäÀÌÁö¸¦ ÂüÁ¶ÇÏ±æ ¹Ù¶õ´Ù.
¾×¼Ç½ºÅ©¸³Æ®¿¡¼ À̺¥Æ® ó¸® ¹æ¹ý ¾×¼Ç½ºÅ©¸³Æ®¿¡¼ À̺¥Æ®¸¦ ó¸®ÇÏ´Â ¹æ¹ýÀº Å©°Ô ¼¼ °¡Áö·Î ³ª´ ¼ö ÀÖ´Ù. ÀÖ´Â ±×´ë·Î À̺¥Æ® ¼Ó¼ºÀ» ó¸®ÇÏ´Â ¹æ¹ý, MXML ÆÄÀÏ¿¡ À̺¥Æ®¸¦ µû·Î Á¤ÀÇÇÏ´Â ¹æ¹ý, À̺¥Æ®¸¦ ½ºÅ©¸³Æ®¿¡¼ Á¤ÀÇÇØ À̺¥Æ® ¸®½º³Ê·Î µî·ÏÇÏ´Â °ÍÀÌ ±×°ÍÀÌ´Ù.
½Ã½ºÅÛ ÇÔ¼ö ±×´ë·Î »ç¿ëÇÏ´Â ¿¹ ´ÙÀ½Àº ÀϹÝÀûÀ¸·Î ½Ã½ºÅÛ¿¡ Á¤ÀÇµÈ À̺¥Æ®¸¦ ó¸®ÇÒ °æ¿ì ¾²´Â ¹æ¹ýÀÌ´Ù. ÀÌ ¿¹Á¦´Â click À̺¥Æ®¿¡ msg ÇÔ¼ö¸¦ Á¤ÀÇÇØ ¹öÆ°À» Ŭ¸¯ÇÒ ¶§ msg ÇÔ¼ö°¡ È£ÃâµÇ´Â °ÍÀ» º¸¿©ÁØ´Ù.
event1.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Script> function msg() { mx.controls.Alert.show('gosuButtonÀ» ´©¸£¼Ì±º¿ä^_^'); } </mx:Script> <mx:Button label="BASICÀ̺¥Æ®" id='gosuButton' click='msg();'/> </mx:Application>
»ç¿ëÀÚ Á¤ÀÇ À̺¥Æ® ó¸® ¿¹ ´ÙÀ½Àº GosuEventButton2.mxml ÆÄÀÏ¿¡ btn1Clicked¿Í btn2Clicked¶ó´Â À̺¥Æ®¸¦ µû·Î Á¤ÀÇÇß´Ù. Button1, 2¸¦ ±× ¾È¿¡ Á¤ÀÇÇÏ°í dispatchEvnet ÇÔ¼ö¿¡¼ µÎ À̺¥Æ®°¡ ¹ß»ýÇϵµ·Ï ÇßÀ¸¸ç, ÅÂ±× ¾È¿¡ ±× À̺¥Æ®¸¦ Á¤ÀÇÇß´Ù. ±×¸®°í event2.mxml ÆÄÀÏ¿¡¼´Â xmlns=¡°*¡±¿¡ GosuEventButton2 ÄÄÆ÷³ÍÆ®¸¦ ã¾Æ³»¾î MXML ű׷ΠÁ¤ÀÇÇÏ¸é¼ µÎ À̺¥Æ®¸¦ ó¸®Çß´Ù. ÀÌ·¸°Ô Çϸé ȸ鿡¼ µÎ °³ÀÇ ¹öÆ°À» º¼ ¼ö ÀÖ´Ù.
event2.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"> <GosuEventButton2 btn1Clicked="mx.controls.Alert.show('Button1À» ´©¸£¼Ì±º¿ä^_^')" btn2Clicked="mx.controls.Alert.show('Button2¸¦ ´©¸£¼Ì±º¿ä^_^')"/> </mx:Application>
GosuEventButton2.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:HBox xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Metadata> [Event("btn1Clicked")] [Event("btn2Clicked")] </mx:Metadata> <mx:Button label="¹öÆ°1" color="red" click="dispatchEvent({type:'btn1Clicked'})"/> <mx:Button label="¹öÆ°2" color="blue" click="dispatchEvent({type:'btn2Clicked'})"/> </mx:HBox>
À̺¥Æ® ¸®½º³Ê¿¡ »ç¿ëÀÚ À̺¥Æ®¸¦ µî·ÏÇÏ´Â ¿¹ ´ÙÀ½Àº ÀÚ¹Ù¿¡¼ AWTÀÇ °´Ã¼¿¡ À̺¥Æ®¸¦ ó¸®ÇÒ ¶§ ¸®½º³Ê¸¦ µî·ÏÇÏµí ¾×¼Ç½ºÅ©¸³Æ®¿¡¼ »ç¿ëÀÚ Á¤ÀÇ À̺¥Æ®¸¦ À̺¥Æ® ¸®½º³Ê µî·Ï ÇÔ¼ö¸¦ ÀÌ¿ëÇØ ÄÁÆ®·Ñ¿¡ µî·ÏÇÑ ¿¹ÀÌ´Ù. ¿©±â¼´Â ÅÂ±× ¾È¿¡ gosuEventListener °´Ã¼¸¦ ¸¸µé°í, Ç÷º½º°¡ Ãʱâ鵃 ¶§ addEventListener ÇÔ¼ö¸¦ ÀÌ¿ëÇØ gosuButtonÀ̶ó´Â ¾ÆÀ̵𸦠°¡Áø ¹öÆ°¿¡ ¸®½º³Ê¸¦ µî·ÏÇÑ´Ù.
event3.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="createListener()" > <mx:Script> var gosuEventListener = new Object(); function createListener() { gosuEventListener.click = function(event) { mx.controls.Alert.show('gosuButtonÀ» ´©¸£¼Ì±º¿ä^_^'); } } </mx:Script> <mx:Button label="À̺¥Æ® ¸®½º³Ê" id='gosuButton' initialize='gosuButton.addEventListener("click", gosuEventListener);'/> </mx:Application>
¾×¼Ç½ºÅ©¸³Æ®ÀÇ µ¥ÀÌÅÍ ¹ÙÀεù ¹æ¹ý Ç÷º½º¿¡¼´Â ´Ù¾çÇÑ ¹æ¹ýÀ¸·Î »ç¿ëÀÚ°¡ º¸°Ô µÉ ÄÁÆ®·Ñ¿¡ µ¥ÀÌÅ͸¦ ¹ÙÀεùÇÑ´Ù. Å©°Ô´Â ³»ºÎ µ¥ÀÌÅ͸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ý°ú ¿ÜºÎ µ¥ÀÌÅ͸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ýÀÌ ÀÖ´Ù. ³»ºÎ µ¥ÀÌÅÍ´Â MXML°ú ¾×¼Ç½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇØ µ¥ÀÌÅ͸¦ ÁöÁ¤ÇÏ´Â ¹æ¹ýÀÌ°í, ¿ÜºÎ µ¥ÀÌÅÍ´Â XMLÀ» ÀÌ¿ëÇϰųª ÀÚ¹Ù ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö¿ÍÀÇ Åë½ÅÀ¸·Î µ¥ÀÌÅ͸¦ ¹Þ´Â ¹æ¹ýÀÌ´Ù. <ȸé 8>Àº ¸®½ºÆ® ÄÁÆ®·Ñ¿¡ µ¥ÀÌÅ͸¦ ¾×¼Ç½ºÅ©¸³Æ®·Î ó¸®Çؼ º¸¿©Áִ ȸéÀ¸·Î, ´ÙÀ½¿¡¼ ¼³¸íÇÒ ³× °¡ÁöÀÇ ¹æ¹ýÀ¸·Î °¡´ÉÇÏ´Ù.
ÄÁÆ®·ÑÀÇ dataProvider ¼Ó¼º¿¡ ¹è¿ ÁöÁ¤ ¸®½ºÆ® ÄÁÆ®·ÑÀº dataProvider¿¡ ¹è¿À» ³Ñ°ÜÁÖ¸é <ȸé 8>°ú °°ÀÌ µ¥ÀÌÅ͸¦ º¸¿©ÁÖ°Ô µÇ¾î ÀÖ´Ù. <¸®½ºÆ® 4>´Â dataProvider ¼Ó¼º¿¡ Array¸¦ ½á¼ ÁöÁ¤ÇÏ´Â ¿¹ÀÌ´Ù.
|
<¸®½ºÆ® 4> ÄÁÆ®·ÑÀÇ dataProvider ¼Ó¼º¿¡ ¹è¿ ÁöÁ¤ | |
| |
data_list1.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:List id="source" > <mx:dataProvider> <mx:Array> <mx:Object label="Ç÷º½º" data="FLEX"/> <mx:Object label="MXML" data="MXML"/> <mx:Object label="¾×¼Ç½ºÅ©¸³Æ®" data="ACTIONSCRIPT"/> </mx:Array> </mx:dataProvider> </mx:List> </mx:Application>
| |
| ½ºÅ©¸³Æ® ű׿¡¼ dataProvider ¼Ó¼º¿¡ ¹è¿ ÁöÁ¤ <¸®½ºÆ® 5>´Â <¸®½ºÆ® 4>¿¡¼ <mx:Array>·Î ÁöÁ¤ÇÑ ¹è¿À» <mx:Script> ÅÂ±× ¾È¿¡ ¡®BOOK_ARRAY¡¯¶ó´Â ¹è¿ º¯¼ö·Î ¼±¾ðÇØ <mx:dataProvider> ű׿¡ ÁöÁ¤ÇÑ °ÍÀÌ´Ù. À̶§ ¹è¿ º¯¼öÀÓÀ» ¾Ë¸®±â À§ÇØ ¡®{ }¡¯ ¾È¿¡ º¯¼ö¸¦ ±âÀÔÇÑ´Ù.
|
<¸®½ºÆ® 5> dataProvider ¼Ó¼º¿¡ ¹è¿ ÁöÁ¤ | |
| |
data_list2.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Script> var BOOK_ARRARY:Array= [ {label:"Ç÷º½º", data:"FLEX"}, {label:"MXML", data:"MXML"}, {label:"¾×¼Ç½ºÅ©¸³Æ®", data:"ACTIONSCRIPT"}, ]; </mx:Script> <mx:List id="source" > <mx:dataProvider> {BOOK_ARRARY} </mx:dataProvider> </mx:List> </mx:Application>
| |
| Model ű׿¡ µ¥ÀÌÅÍ ¼Ò½º XML ÆÄÀÏ À§Ä¡ ÁöÁ¤ <¸®½ºÆ® 6>Àº XML ÆÄÀÏ¿¡ ¶ó´Â ·çÆ® ű׸¦ ÁöÁ¤ÇÏ°í, ¿¤¸®¸ÕÆ®¸¦ µ¥ÀÌÅÍ ¼Ò½º·Î ¸¸µç´Ù. ±×¸®°í data_list3.mxml¿¡¼´Â ű×ÀÇ source ¼Ó¼º¿¡ ÇØ´ç XML ÆÄÀÏÀÇ URLÀ» ±â¼úÇÏ°í, ű×ÀÇ ¾ÆÀ̵𠡮booksModel¡¯¿Í ¿¤¸®¸ÕÆ® À̸§À» List ÄÁÆ®·ÑÀÇ dataProvider ¼Ó¼º¿¡ ¡®{booksModel.book}¡¯¶ó´Â À̸§À¸·Î ÁöÁ¤ÇÑ´Ù.
|
<¸®½ºÆ® 6> µ¥ÀÌÅÍ ¼Ò½º XML ÆÄÀÏ À§Ä¡ ÁöÁ¤ | |
| |
data_list3.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Model id="booksl" source="books.xml"/> <mx:HBox> <mx:List id="source" dataProvider="{books.book}"/> </mx:HBox> </mx:Application>
books.xml <?xml version="1.0" encoding="euc-kr"?> <books> <book label="Ç÷º½º" data="FLEX"/> <book label="MXML" data="MXML"/> <book label="¾×¼Ç½ºÅ©¸³Æ®" data="ACTIONSCRIPT"/> </books>
| |
| Model ű׸¦ ÀÌ¿ëÇÑ ¹è¿ ¼Ó¼º ÁöÁ¤ <¸®½ºÆ® 7>Àº <¸®½ºÆ® 6>ÀÇ XML ¼Ò½º¸¦ ÅÂ±× ¾È¿¡ ¿¤¸®¸ÕÆ®¸¦ ³ª¿ÇÔÀ¸·Î½á model ű×ÀÇ ID¿Í ¿¤¸®¸ÕÆ® À̸§À» List ÄÁÆ®·ÑÀÇ dataProvider ¼Ó¼ºÀ¸·Î ÁöÁ¤ÇÑ´Ù. dataProvider ¼Ó¼ºÀº µû·Î ű׷ΠºÐ¸®µÇ¾î Àִµ¥, <¸®½ºÆ® 6>ó·³ ·Î ÁöÁ¤Çصµ ¶È°°ÀÌ ÀÛµ¿ÇÑ´Ù.
|
<¸®½ºÆ® 7> Model ű׸¦ ÀÌ¿ëÇÑ ¹è¿ ÁöÁ¤ | |
| |
data_list4.mxml <?xml version="1.0" encoding="euc-kr"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Model id="books"> <book label="Ç÷º½º" data="FLEX"/> <book label="MXML" data="MXML"/> <book label="¾×¼Ç½ºÅ©¸³Æ®" data="ACTIONSCRIPT"/> </mx:Model> <mx:List id="list1"> <mx:dataProvider>{books.book}</mx:dataProvider> </mx:List> </mx:Application>
| |
| Ç÷º½º´Â ÀÚ¹Ù ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö·ÎºÎÅÍ µ¿Àû µ¥ÀÌÅ͸¦ °¡Á®¿Ã ¼ö ÀÖ´Ù ÇÊÀÚ°¡ ÃÊâ±â¿¡ ¾ÖÇø´À» °³¹ßÇßÀ» ¶§ °í¹Î ÁßÀÇ Çϳª´Â ¾ÖÇø´¿¡¼ µ¿ÀûÀÎ µ¥ÀÌÅ͸¦ °¡Á®¿Í¼ º¸¿©ÁÖ´Â °ÍÀ̾ú´Ù. ±×¶§´Â ¾ÖÇø´¿¡¼ ¼ºí¸´À» È£ÃâÇÏ°í ¿©±â¼ ³ª¿À´Â ½ºÆ®¸²À» ¹Þ¾Æ¼ ¾ÖÇø´¿¡¼ º¸¿©ÁÖ´Â ¹æ¹ýÀ» ¾²°Å³ª, ¼¹ö¿Í ¼ÒÄÏÀ» ¿¬°áÇØ µ¥ÀÌÅ͸¦ ¹Þ¾Æ¼ »ç¿ëÇß´Ù. ÇÏÁö¸¸ Ç÷º½º¿¡¼´Â ¼¹ö¿Í ´Ù¾çÇÑ Åë½Å ¹æ¹ýÀ» Á¦°øÇÑ´Ù.
Ç÷º½º ¾ÖÇø®ÄÉÀ̼ÇÀÌ ÀÚ¹Ù ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö¿Í ¿¬µ¿µÇ´Â °³³äÀº Ŭ¶óÀ̾ðÆ®°¡ ¼¹ö¿¡ ¿äûÇϸé Result °´Ã¼·Î µ¥ÀÌÅ͸¦ ¹Þ´Â ¹æ½ÄÀÌ´Ù. ÀÌ°ÍÀº Åë½Å ÇÁ·ÎÅäÄÝ°ú ¼¹öÀÇ ¼ºñ½º ¹æ½Ä¿¡ µû¶ó HTTPService, WebService, RemoteObject·Î ³ª´¶´Ù. HTTPService´Â °¡Àå ÀϹÝÀûÀÎ ¿¹·Î HTTP ÇÁ·ÎÅäÄÝÀ» ÀÌ¿ëÇØ JSP¸¦ È£ÃâÇØ °á°ú¸¦ ¹Þ´Â °ÍÀ̸ç, WebService´Â SOAP ÇÁ·ÎÅäÄÝÀ» ÅëÇØ À¥ ¼ºñ½º¿Í Åë½ÅÇÏ´Â ¹æ½ÄÀÌ´Ù. RemoteObject´Â ÀÚ¹Ù¿¡¼ ¿ø°Ý °´Ã¼¸¦ SOAP ÇÁ·ÎÅäÄÝÀ̳ª AMF ÇÁ·ÎÅäÄÝÀ» ÀÌ¿ëÇØ Åë½ÅÇÏ´Â ¹æ½ÄÀÌ´Ù. À̶§ ÇØ´ç ¼ºñ½º¸¦ ãÀ» ¼ö ÀÖµµ·Ï /WEB-INF/flex/flex-config.xml ÆÄÀÏ¿¡ ÇØ´ç ¼ºñ½º¸¦ µî·ÏÇØ¾ß ÇÑ´Ù. ´ÙÀ½Àº employeeSrv¶ó´Â À̸§À¸·Î µî·ÏµÈ HTTPService¸¦ È£ÃâÇÏ´Â ¿¹ÀÌ´Ù.
<mx:HTTPService id="employeeSrv" url="employees.jsp"> <mx:request> <deptId>{dept.selectedItem.data}</deptId> </mx:request> </mx:HTTPService>
Ç÷º½º ȸéÀº ÄÁÆ®·Ñ°ú ÄÁÅ×À̳ʸ¦ ÀÌ¿ëÇØ ¸¸µé¾îÁø´Ù ÀÌÂë µÇ¸é Ç÷º½º¿¡ ´ëÇØ ¾î´À Á¤µµ °¨À» Àâ¾ÒÀ» °ÍÀ̸ç, À¢¸¸ÇÑ Ç÷º½º ¼Ò½ºÄڵ带 º¸´õ¶óµµ ÀÌÇØÇÏ´Â µ¥´Â ¹«¸®°¡ ¾øÀ¸¸®¶ó »ý°¢ÇÑ´Ù. ¿©±â¼ ¡®ºÏÄ¡±â ¹ÚÄ¡±â¡¯ ¾ê±â¸¦ Çѹø ´õ ÇÏ°Ú´Ù. Ç÷º½º ÄÚµùÀÌ MXML°ú ¾×¼Ç½ºÅ©¸³Æ® Áß½ÉÀ̶ó¸é, Ç÷º½º ȸéÀº ÄÁÆ®·Ñ ÄÄÆ÷³ÍÆ®¿Í ÄÁÅ×ÀÌ³Ê ÄÄÆ÷³ÍÆ® µÎ °¡ÁöÀÇ Á¶ÇÕÀ¸·Î ÀÌ·ïÁø´Ù. ÀÌ µÎ °¡Áö¸¦ Á¶ÇÕÇÏ´Â ¿ø¸®´Â ÄÁÅ×À̳ʸ¦ ¸ÕÀú ±ò¾ÆÁÖ°í ±× À§¿¡ »ç¿ëÀÚ°¡ ¾µ ÄÁÆ®·ÑÀ» ¹èÄ¡ÇÏ´Â Çü½ÄÀÌ´Ù.
ÄÁÆ®·Ñ ÄÁÆ®·ÑÀº Button, TextArea µî »ç¿ëÀÚ°¡ Á÷Á¢ÀûÀ¸·Î Á¶ÀÛÇÏ¸ç ¹ÝÀÀÇÏ´Â ÄÄÆ÷³ÍÆ®µéÀÌ´Ù. ÄÁÆ®·ÑÀº MXML API¸¦ ÅëÇØ ¼Ó¼º°ú À̺¥Æ®¸¦ Á¤ÀÇÇÏ°í ¾×¼Ç½ºÅ©¸³Æ®¿¡¼ Á¶ÀÛÀÌ °¡´ÉÇÏ´Ù. <ȸé 5>¸¦ º¸¸é ÄÁÆ®·ÑÀÇ ±â´É¿¡ ´ëÇØ ½±°Ô ÀÌÇØµÉ °ÍÀ̸ç, SWF³ª JPEG ÆÄÀÏÀ» º¸¿©ÁÖ´Â Loader³ª ÁøÇà »óŸ¦ º¸¿©ÁÖ´Â ProgressBar, ´Þ·ÂÀ¸·Î ³¯Â¥¸¦ ¼±ÅÃÇÏ°Ô ÇØÁÖ´Â DateChooser, DateField µîÀÌ ´«¿¡ ¶è´Ù.
ÄÁÅ×ÀÌ³Ê ÄÁÅ×À̳ʴ Ç÷¡½Ã Ç÷¹À̾ ±×¸®´Â »ç°¢ Ç¥¸éÀ» Á¤ÀÇÇÑ´Ù. ÄÁÅ×À̳ʴ ¸» ±×´ë·Î ÄÁÆ®·ÑÀ» ´ã´Â ÄÄÆ÷³ÍÆ®ÀÌ´Ù. ÄÁÆ®·ÑÀ» ´ã´Âµ¥ ÀÖ¾î ÄÁÅ×À̳ʴ ÄÁÆ®·Ñ Å©±â¿Í À§Ä¡¸¦ Á¤ÀÇÇÏ´Â layout ÄÁÅ×ÀÌ³Ê¿Í ÄÁÆ®·ÑÀÇ À̵¿°ú ³×ºñ°ÔÀ̼ÇÀ» Á¤ÀÇÇÏ´Â Navigator ÄÁÅ×À̳ʰ¡ ÀÖ´Ù. ƯÈ÷ Tab Navigator¿Í Accordion Navigator ÄÁÅ×À̳ʴ À¥ ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ¸ð¾ç°ú ȸéÀ» ±ò²ûÇÏ°Ô Á¤¸®ÇØ ÁØ´Ù.
Layout ÄÁÅ×À̳ʴ ÀÚ¹ÙÀÇ AWT¸¦ Çغ» »ç¶÷µéÀ̶ó¸é ¾î´À Á¤µµ Àͼ÷ÇÒ °ÍÀÌ´Ù. ³×¸ð³ »óÀÚ¿¡ ÄÁÆ®·ÑÀ» À§Ä¡ÇÏ°Ô ÇØÁÖ´Â Box, ¿©±â¿¡ ŸÀÌƲ ºÎºÐÀÌ Ãß°¡µÈ Panel, ÄÁÅ×ÀÌ³Ê ³»ÀÇ XY ÁÂÇ¥¸¦ ÁöÁ¤ÇØ ÄÁÆ®·ÑÀ» À§Ä¡½ÃÅ°´Â Canvas, HTML Å×À̺íÀÇ ¼¿¿¡ ÄÁÆ®·ÑÀ» Çϳª¾¿ À§Ä¡½ÃÅ°´Â Grid µîÀÌ ÀÖ´Ù.
Ç÷º½º ÄÄÆ÷³ÍÆ®´Â CSS¸¦ ÀÌ¿ëÇØ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÑ´Ù Ç÷º½º´Â HTML¿¡¼ ¾²´Â CSS °³³äÀ» ±×´ë·Î Àû¿ëÇß´Ù. ±×·¡¼ Ç÷º½º¿¡¼ ¾²´Â ÄÄÆ÷³ÍÆ®´Â HTMLó·³ ´Ù¾çÇÑ ¹æ½ÄÀ¸·Î ½ºÅ¸ÀÏÀ» Á¤ÀÇÇÒ ¼ö ÀÖ´Ù. ¿©±â¼´Â Button ÄÁÆ®·ÑÀÇ fontSize ¼Ó¼º ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÏ´Â ¹æ¹ýÀ» »ìÆ캸°Ú´Ù. ½ºÅ¸ÀÏ Àû¿ëÀº <ȸé 1>ÀÇ ¿¹¸¦ ÂüÁ¶ÇÏ±æ ¹Ù¶õ´Ù.
¡ß ÄÁÆ®·Ñ ¼Ó¼ºÀ¸·Î ½ºÅ¸ÀÏ ÁöÁ¤ <mx:Button id="myButton" fontSize="15" label="My Button"/> ¡ß Style ÅÂ±× ¼Ó¿¡ ½ºÅ¸ÀÏ Á¤ÀÇ <mx:Style> Button { fontSize: 15 } </mx:Style> ¡ß ¿ÜºÎ ½ºÅ¸ÀÏ ½ÃÆ® ÁöÁ¤ <mx:Style source="myStyle.css"/> ¡ß StyleManager Ŭ·¡½ºÀÇ ¹öÆ° ÆùÆ® Å©±â ¼Ó¼ºÀ» setStyle ¸Þ½îµå·Î ÁöÁ¤ StyleManager.styles.Button.fontSize = 15; StyleManager.styles.Button.setStyle("fontSize",15); ¡ß ¹öÆ° ¾ÆÀ̵ðÀÇ setStyle() ¸Þ½îµå È£ÃâÀ» ÀÌ¿ëÇÑ ½ºÅ¸ÀÏ ÁöÁ¤ myButton.setStyle("fontSize", 15);
Ç÷º½º ÄÄÆ÷³ÍÆ®´Â CSS ¹æ½Ä ¿Ü¿¡µµ Å׸¶³ª ½ºÅ²À» ÅëÇØ ½ºÅ¸ÀÏÀ» ¹Ù²Ü ¼ö ÀÖ´Ù. ½ºÅ²Àº ÄÄÆ÷³ÍÆ®ÀÇ ¼Ò½º ±×·¡ÇÈÀ̳ª ½Éº¼À» ¼öÁ¤ÇÔÀ¸·Î½á ÄÄÆ÷³ÍÆ®ÀÇ ¸ð½ÀÀ» ¹Ù²Ù°Ô µÇ´Âµ¥, Ç÷¡½ÃÀÇ ½Éº¼À» ÀÌ¿ëÇÏ´Â asset ½ºÅ²°ú »ç¿ëÀÚ Á¤ÀÇ ÄÄÆ÷³ÍÆ®¸¦ ÀÌ¿ëÇÏ´Â Progmatic ½ºÅ²ÀÌ ÀÖ´Ù. ±×¸®°í Å׸¶´Â ÄÄÆ÷³ÍÆ®ÀÇ ½ºÅ¸ÀÏ°ú ½ºÅ²À» ¸ð¾Æ¼ Çϳª·Î ±¸¼ºÇÑ °ÍÀ¸·Î µðÆúÆ®·Î ¡®Halo¡¯¶ó´Â Å׸¶°¡ Àû¿ëµÇ¾î ÀÖ´Ù.
Ç÷º½º¿ÍÀÇ Àο¬Àº °è¼Ó µÉ±î Áö±Ý±îÁö Ç÷º½º¿¡ ´ëÇØ °³·«ÀûÀÎ ³»¿ëÀ» »ìÆìºÃ´Ù. Ç÷º½ºÀÇ ´Ù¾çÇÑ Æ¯Â¡À» Á¾ÇÕÇØ º¸¸é ´ÙÀ½°ú °°Àº ÀåÁ¡µé·Î Á¤¸®ÇÒ ¼ö ÀÖ´Ù. ƯÈ÷ ÇÊÀÚ´Â ¼Ò½ºÄڵ尡 º¸ÀÌÁö ¾Ê¾Æ¼ ³²µé ¸ð¸£°Ô ¸¶À½²¯ ±â¹ßÇÑ ·ÎÁ÷À¸·Î °³¹ßÇÒ ¼ö ÀÖ´Ù´Â °ÍÀÌ ¸¾¿¡ µç´Ù.
[1] ´Ù¾çÇÑ À¯Àú ÀÎÅÍÆäÀ̽º¸¦ ÄÄÆ÷³ÍÆ®·Î Á¦°øÇÑ´Ù. [2] ÄÄÆ÷³ÍÆ® ±â¹ÝÀ¸·Î °³¹ßÇϹǷΠ»ý»ê¼ºÀÌ ³ô´Ù. [3] »ç¿ëÀÚ Á¤ÀÇ ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÔÀ¸·Î½á Àç»ç¿ë¼ºÀÌ ³ô´Ù. [4] XMLÀ» ºñ·ÔÇÑ Ç¥ÁØÈµÈ ±â¼úÀ» »ç¿ëÇÔÀ¸·Î½á ½±°Ô ¹è¿ö Àû¿ëÇÒ ¼ö ÀÖ´Ù. [5] Ŭ¶óÀ̾ðÆ®ÀÇ Ç÷¡½ÃÇ÷¹À̾¼ ÀÛµ¿µÇ¹Ç·Î ¼¹öÀÇ ºÎÇϸ¦ ÁÙ¿©ÁØ´Ù. [6] Ç÷¡½ÃÇ÷¹À̾î ȯ°æÀÌ ÀÖÀ¸¸é µ¿ÀÏÇÑ ÀÎÅÍÆäÀ̽º¸¦ Á¦°øÇÒ ¼ö ÀÖ´Ù. [7] ÃÆ®³ª ±×·¡ÇÁ µîÀÇ ºñÁî´Ï½º¸¦ À§ÇÑ ÄÄÆ÷³ÍÆ®°¡ Á¦°øµÈ´Ù. [8] ȸé°ú µ¥ÀÌÅÍ ·ÎÁ÷À» ¿Ïº®È÷ ºÐ¸®ÇÒ ¼ö ÀÖ´Ù. [9] ÀÚ¹Ù¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö¿Í ¿¬µ¿µÇ¹Ç·Î È®À强ÀÌ ¸Å¿ì ¶Ù¾î³ª´Ù. [10] Ç÷¡½Ã·Î ±¸µ¿µÇ¹Ç·Î ½ºÅ©¸³Æ® ¹× ÄÁÅÙÃ÷ ¼Ò½º Äڵ尡 ³ëÃâµÇÁö ¾Ê´Â´Ù.
ÁÖ¸ñÇØ¾ß ÇÒ °ÍÀº Ç÷º½º°¡ Ŭ¶óÀ̾ðÆ®ÀÇ PC, Áï Ç÷¡½Ã Ç÷¹À̾¼ ½ÇÇàµÈ´Ù´Â ÀåÁ¡ ¶§¹®¿¡ ´Ù¾çÇÑ Ç÷§Æû°ú µð¹ÙÀ̽º¿¡¼ ½ÇÇà °¡´ÉÇÏ´Ù´Â Á¡ÀÌ´Ù. ÀÌ´Â ÈÞ´ëÆùÀ̳ª PDA µî¿¡¼µµ Ç÷º½º ¾ÖÇø®ÄÉÀ̼ÇÀÌ µ¹¾Æ°¡´Â ³¯ÀÌ ¸ÖÁö ¾Ê¾ÒÀ½À» ÀǹÌÇÑ´Ù. ÇÊÀÚ´Â IT¿¡¼ »ó´çÈ÷ ¿À·¡°¥ ±â¼úÀ» ¿¹ÃøÇØ º¸¸é, MS À©µµ¿ì, ½ãÀÇ ÀÚ¹Ù, ¾îµµºñÀÇ PDF, W3CÀÇ XML µîÀ» µé ¼ö ÀÖ´Ù. ±×¸®°í À̹ø¿¡ ´Ù·é ¸ÅÅ©·Î¹Ìµð¾îÀÇ Ç÷º½º ±â¼úµµ ÀÎÅÍ³Ý ±â¼ú ¹ß´ÞÀÇ È帧¼±»ó¿¡¼ º¼ ¶§ ¾Æ¸¶ ±×·¯Çϸ®¶ó°í È®½ÅÇÑ´Ù. @ |