Tag Archives: 플렉스

FlexBuildPath.png

SWC 컴포넌트의 활용 (SWFLoader 의 대안으로서-)

플래시를 모태로 개발된(혹은 그렇다고 알려진) 플렉스지만, 이 녀석 결정적으로 타임라인을 베이스로 하고 있지 않다. 타임라인이 플래시의 화려함을 만들어내는 기초인데, 그 타임라인을 빼버림으로써 불필요한 동적 로드를 최소화하고 상하위 클래스/인터페이스의 일관성을 갖추게 된 것. ‘Animation Tool’ 에서 ‘Development Tool’ 로의 한 단계 진화인 건 분명한데. 그 덕분에 플렉스에선 플래시처럼 자유도 높은 애니메이션을 구현하기가 무진장 까다로운 일이 되었다. 정형화된 컨트롤 컴포넌트를 이리저리 작당하는거야 뭐 잘들 만들어놨으니 쓰는데 문제가 없지만, 조금만 예뻐보이려 애쓰는 순간 사방팔방에서 태클이 걸려오는거다. 망할.

지금 SealTale 개발 과정에는 모듈화 된 SWF 조각들을 다량으로 로드해야 하는 일이 포함되어 있다. 이 역시 그냥 액션스크립트 모듈이라면 플렉스 컴포넌트로 제작해 사용하면 오죽 좋겠냐만 디자이너와의 협업을 해야하는 상황. 디자이너에게 타임라인은 반드시 무조건 기필코 필요한 필수요소 아닌가. 결국 애니메이션 소요를 플렉스 대신 플래시 기반 (정확히는 타임라인 기반) 으로 만들어내고 이를 플렉스가 제어하는 형태로 기획된 것이다.

여기서 발생한 문제 하나.
플렉스 기본 컨트롤 컴포넌트로 제공하는 SWFLoader- 이거 정말 못쓸 물건이다.
로딩 속도도 마음에 안 들고, Scale 조정에도 지정된 컨텐트 사이즈를 벗어나 홀로 삽질하는 경우가 다반사. 하지만 그 모두를 다 참고 인내하며 해달라는거 다 해주고 어거지로 돌렸더니, 이거, 뭐야. 이거 포커싱이 안된다? 고로, 마우스 이벤트를 죄다 씹어버린다. 망할-.- 자신에게 들어오는 포커스를 전부 로드된 SWF 로 넘겨버리는 과도한 친절함으로 인해 발생한 문제. 따라서 플렉스에 마우스 이벤트가 일어났음을 알리려면 로드된 SWF 의 소스코드에서 LocalConnection 으로 플렉스와 대화하는 수밖에 없는데 이것도 참 못 쓸 물건이다. 사소한 변수 전달 하나에도 코드 소요가 장난 아니고. 한마디로 뭐 이따위로 만들어놨나 싶음.
(레퍼런스에는 정말 친절하게도 SWFLoader 는 애니메이션 로드용이므로 복잡한 사용을 위해서는 커스텀 컴포넌트를 추천합니다- 라고 써놨다. 그래놓고는 커스텀 컴포넌트 사용에 관한 일체 언급이 없다. 제길-.-)

그래서 레퍼런스를 이잡듯이 뒤지고, 네이버 플코카페(http://cafe.naver.com/flexcomponent) 를 손가락에 땀나게 돌아다니며, 이와 더불어 캐삽질을 반복한 끝에, 끝에, 결국 방법을 찾아냈다. (으하, 장하다, 나 이거 찾고 울 뻔 했음. 진짜)

바로 플래시를 플렉스에서 사용 가능한 형태의 SWC 컴포넌트로 만들고, 이를 RSL(Runtime Shared Library) 로 로드하는 방법.

1. 플래시 -> SWC 컴포넌트
 - 위에도 썼다시피 ‘플렉스에서 사용 가능한 형태의’ SWC 컴포넌트로 변환해야 한다. 플래시 Publish Setting 메뉴에 들어있는 Export SWC 옵션에 체크하는거로는 플렉스에서 코빼기도 볼 수 없다.

1053236637.mxp

바로 요 녀석이 기특하게도 그런 막중한 임무를 수행해주는 Extension 파일. CS3 가 설치되어 있다면 mxp 라는 해괴망측한 확장자를 더블클릭만으로 실행할 수가 있다. 실행하고 동의 버튼만 누르면 설치는 대강 다 알아서 함. 그리고 설치해도 뭐 딱히 변화된건 아무것도 없다. 플래시를 들어가면 Commands 메뉴에 Make Flex Components 라는 서브메뉴가 있음을 확인하면 설치 다 된 것임.

사용자 삽입 이미지

사실 이런 메뉴 있는지도 몰랐음;

이 녀석은 꼭 무비클립 단위로만 만들어지게 되어 있으므로, 분산된 모든 코드들을 정리해 하나의 무비클립으로 만들 필요가 있다. 나 역시도 액션스크립트2.0 코더들의 지독한 습관으로 Level0 Action 레이어 1 프레임에 코딩하고 있었던 터라 전부 들어내 하나의 무비클립에 담았다. 그리고 그 무비클립을 Linkage 속성에 들어가 클래스 이름을 지어주고 요 위 그림의 Make Flex Component 를 클릭한다. Trace Window 에 [ Component "Action" is ready to be used in Flex. ] 이 뜨면 완료. 혹시 다른 에러메세지가 떴다면 다른 무엇보다 자신의 코드를 보길 바람. 이 작업은 한번만 해주면 된다. 그 다음은 퍼블리시만 반복해도 플렉스와 대화하는데 문제 없음.

사용자 삽입 이미지

Export SWC

그 다음은 Publish Setting 에 들어가 Export SWC 에 체크하고 Publish-

사용자 삽입 이미지

Properties


다음은 플렉스에서 프로젝트의 Properties – Flex Build Path – Library Path – Add SWC
그리고 Link Type 을 RSL 로 지정해주면 끝난다.
얘도 한번만 하면 된다. RSL 코드가 수정되어도 빌드 한번이면 알아서 인식.

사용자 삽입 이미지

ContentAssist 에 뜨는 Flash 의 변수/함수들-


이쯤되면 나름 감동적임-
LocalConnection 같은 귀찮은 작업 도무지 필요 없다. 플래시에서 코드 수정 후 퍼블리시 한방, 빌드 한방이면 알아서 촤르륵 떠주는 센스.

http://222.111.166.187/favoriteTest/CategoryNavigation.html

아직 작업중이긴 한데, 필요한 부분은 거의 다 완성됐다.
Flex HttpService 로 받은 E4X 포맷의 XMLList 가 바인딩 되었고, 플렉스에서 dispatchEvent 때려도 잘 동작함.
이제 현재 릴리즈용 코드인 TaleMain 과 결합만 하면 실질적으로 이 부분은 마무리 된다.
진정한 SwfLoader 의 대안 도구로서 활용하려면 플래시의 Loader 클래스를 활용해 커스텀 컴포넌트를 따로 하나 제작해야 할 듯 한데 그건 내일 이 시간에-

음, 역시 모르면 고생이고. 알면 재밌다.

[minsangK.com] 메뉴 초안 (플렉스-태터툴즈DB 연동)

FRDB 프로젝트가 어느 정도 완성 궤도에 올랐다.
프로젝트의 관점으로 보든, 과제의 관점으로 보든 어느 쪽으로도 아직 할일은 많이 남았지만,
처음 계획했던 많은 것들이 이제 거의 대부분 완성된 틀을 보이기 시작한 것이다.

그 녀석 때문에 오래도록 미뤄두었던 MinsangK 블로그 제작에 다시 손을 대기 시작했다.
너무 오래도록 방치하다보니 어떤 파일이 어디 쳐박혀 있는지도 몰라 한참을 뒤져야했고, 한참 열을 올리고 제작하던 당시에 생각했던 아이디어들과 컨셉들이 통째로 리셋된 기분. 그래서 그냥 경쾌한 마음으로 블로그 제작의 요체가 되는 부분들을 공부하기 시작했다.

그 첫째로 시도하는 것은, 바로 [플렉스와 태터툴즈DB의 연동]

이전 포스트들에서 밝혔다시피 MinsangK.com 블로그의 가장 큰 특징은-
[ 블로그의 장점을 모두 흡수한 형태의 기본 틀을 유지하면서 개인 홈페이지의 정형화되지 않은 장점들을 가지고 있다 ] 는 것이다.
이를 위해서 플래시와 블로그DB 의 연동은 가장 중요한 포인트가 된다. 기존에 이와 같은 페이지들이 다수 존재하지 않았기 때문에 방식의 측면에서 여러가지를 고민하게 되었는데,

1. 태터툴즈 스킨을 수정해 치환자를 플래시에 인수로 전달하는 방법 (GET Method)
2. 1번과 유사하나 플래시에 전달하는 방법에 있어 자바스크립트를 이용하는 방법
3. 직접 태터툴즈DB에 접속하는 서버사이드 스크립트를 따로 작성하고 이를 플래시와 연결하는 방법 (LoadVars)
4. 3번과 유사하나 서버사이드 스크립트에서는 XML 을 출력하도록 작성하고, 플래시 내장 컴포넌트(XMLConnector) 사용하는 방법
5. 4번과 유사하나 플래시 내장컴포넌트 대신 플렉스로 페이지를 작성하여 DataProvider 를 활용하는 방법

일단 이 다섯가지.
이 1번부터 5번까지의 번호는 내가 고려하게 된 시기의 순서와 같고, 또 보다 고급스러운 프로그래밍 기법(RIA 에 기반한) 의 진화과정과도 일치한다. 다시 말하면 5번의 방법이 가장 세련되고 진화된 형태의 방식이라는 얘기다. 올블로그와 관련 까페를 둘러보니 역시 일선에서도 5번의 방법이 최근들어 가장 많이 사용되고 있단다. 나 역시도 이 다섯가지 모두를 테스트 형태로 적용해보았는데 여러가지 측면에서 장점이 많다. 역시 사람은 뭘 좀 알아야 고생을 덜하는 거다.

그 방법을 다시 한번 요약하면 이렇다.

1. 서버사이드스크립트(나의 경우는 PHP)로 DB 접속, 관련 내용 쿼리, XML 형태로 출력
(http://minsangk.com/_/xmlTest/categoryList.php)

2. 플렉스에서는 XMLListCollection 으로 로드

(Language : xml)
<mx:XML id=“tt_entries” source=http://minsangk.com/_/xmlTest/categoryList.php” xmlns=”“/>
<mx:XMLListCollection id=”xmlListColl_Categories” source=”{tt_entries.categoryList}“/>

3. 로드한 XMLListCollection 을 내장 컨트롤 DataProvider 연결

(Language : xml)
<mx:HorizontalList id=“hList_tt” dataProvider=“{xmlListColl_Categories}” labelField=“@name” />

4. 생성된 SWF 파일을 디자인된 페이지에 임베디드

[#M_categoryList.php (열기)|categoryList.php (닫기)|

(Language : php)
  1. <?PHP
  2. echo "<?xml version='1.0' encoding='euc-kr'?>\n";
  3. include "dbInfo.php";
  4. echo "<root>\n";
  5. // 카테고리 리스트 쿼리 -> $tt_CategoryList
  6. $query = "SELECT * FROM tt_Categories";
  7. $result = mysql_query($query, $db_connect);
  8. $tt_CategoryList;
  9. while ($row = mysql_fetch_array($result) )
  10. {
  11. $categoryID = $row[id];
  12. $tt_CategoryList[$categoryID] = $row[name];
  13. }
  14. for ($i=1; $i<=sizeof($tt_CategoryList)-2; $i++)
  15. {
  16. // 카테고리 노드 출력 ( @id, @name )
  17. echo ” <categoryList id=’$i’ name=’$tt_CategoryList[$i]‘>\n;
  18. $query = “SELECT * FROM tt_Entries WHERE category=’$i’ ORDER BY id DESC”;
  19. $result = mysql_query($query, $db_connect);
  20. while ($row = mysql_fetch_array($result) )
  21. {
  22. // 비공개 글은 출력하지 않음
  23. if ($row[visibility]==0) {
  24. continue;
  25. }
  26. // 보호글은 [비밀글] 머릿말을 붙여 출력
  27. $secret = ($row[visibility]==1) ? “[비밀글] “ : “”;
  28. // 태터툴즈에서 받아온 Unix Timestamp 를 Date 포맷으로 변경
  29. $convertedDate = date(“Y/m/d”,$row[created]);
  30. // 엔트리 노드 출력 ( @id, @name, @date )
  31. // 제목에 댓글 갯수를 출력
  32. echo ” <entry id=’”.$row[id].“‘ name=’”.$secret.$row[title].” (“.$row[comments].“)’ date=’”.$convertedDate.“‘/>\n;
  33. }
  34. echo ” </categoryList>\n;
  35. }
  36. echo “</root>”;
  37. //
  38. // DB Close
  39. mysql_close($db_connect);
  40. ?>

_M#]
[#M_TT_XML_test2.mxml (열기)|TT_XML_test2.mxml (닫기)|

(Language : xml)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  3. <mx:Script>
  4. <![CDATA[
  5. private function openPost(event:Event):void
  6. {
  7. var link:URLRequest =new URLRequest( "http://minsangk.com/"+event.currentTarget.selectedItem.@id);
  8. navigateToURL(link,"_blank");
  9. }
  10. ]]>
  11. </mx:Script>
  12. <mx:Style source=“test.css”/>
  13. <mx:XML id=“tt_entries” source=“http://minsangk.com/_/xmlTest/categoryList.php” xmlns=“”/>
  14. <mx:XMLListCollection id=“xmlListColl_Categories” source=“{tt_entries.categoryList}”/>
  15. <mx:HorizontalList id=“hList_tt” width=“720″ dataProvider=“{xmlListColl_Categories}” labelField=“@name” height=“25″ horizontalScrollPolicy=“off” useHandCursor=“true” verticalScrollPolicy=“off” verticalAlign=“middle” columnWidth=“90″ backgroundColor=“#ffffff”/>
  16. <mx:DataGrid width=“720″ height=“305″ dataProvider=“{hList_tt.selectedItem.children()}” labelField=“@name” showHeaders=“false” rowHeight=“30″ verticalAlign=“middle” backgroundColor=“#ffffff” itemClick=“openPost(event)”>
  17. <mx:columns>
  18. <mx:DataGridColumn dataField=“@name” headerText=“제목”/>
  19. <mx:DataGridColumn dataField=“@date” headerText=“등록일” width=“80″/>
  20. </mx:columns>
  21. </mx:DataGrid>
  22. </mx:Application>

_M#]
정말 간단하고 깔끔하지 아니한가?
플렉스와 PHP 전체 코드 다 합쳐봐야 100라인도 안된다.
말이 100라인이지 실질적으로 내가 두드린 코드만 따지면 그 양은 훨씬 적다고 보면 된다.
(그런데 이 간단한 코드 작성하려고 3시간동안 두드렸다, 으흐- 역시 모르면 고생-)

이러한 과정을 통해 작성된 녀석이 요 아래 두개다.

가장 기본적인 형태
– 로드한 XML 을 XMLListCollection 에 할당하여 왼쪽은 Tree 컨트롤, 오른쪽은 List 컨트롤에 DataProvider 연결했다.
– 플렉스에서는 따로 제작된 웹폰트가 아니라 기존의 TTF(트루타입폰트) 를 URL 로 연결하는게 가능하다. 미치도록 깔끔한 폰트 하나만으로도 제작한 보람을 느끼게 하는 녀석-

[Flash] http://minsangk.com/_/xmlTest/TT_xml_test1.swf

MinsangK.com 블로그에 적용될 레이아웃-
– 위에는 HorizontalList 컨트롤, 아래는 DataGrid 컨트롤 에 DataProvider 연결
– HorizontalList 의 기본 속성인 Icon 을 이용하면 리스트 아이템 자리에 화려한 이미지를 대체하는 것이 가능하다.

[Flash] http://minsangk.com/_/xmlTest/TT_xml_test2.swf

이제 여기에 기존 디자인에 어울리는 CSS 를 입히고 사용자의 입력에 반응하는 이벤트 함수를 정의해주면 실질적으로 블로그에 적용이 가능한 상태라고 보면 된다. 거기에 더해 구상한 디자인에 소요될 수많은 이미지들과 그 이미지들이 유기적으로 미려하게 동작할 Effect 모션을 추가할 예정.

확실히 페이지를 디자인하는 일에 비해 UI 를 구성하고 기능을 추가하는 일에 더 많은 노력과 시간이 소요된다.
디자인이야 이리저리 해보고 하면 답이 나오지만, (물론 내 만족치가 낮아서겠지만-)
코딩은 이리저리 아무리 해봐도 답이 안 나오는 때가 더 많다.
그런 노력보다는 레퍼런스를 한 자라도 더 읽어보고 다른 사람들이 두드려놓은 코드들을 폭넓게 읽어보고 내 것으로 만드는 일이 더 중요하다.

피곤하지만,
즐겁구나.