CMS매뉴얼 14.XML연동하기
2012-02-27 11:53:06

14. XML연동하기

(1)  공식 XML연동 갤러리 사용설명 - 2

예스탑 솔루션 홈페이지(http://www.yestop.co.kr)에서 [ XML연동 갤러리 사용설명 - 2]를 다운로드 한 후 visual.fla파일을 수정하고 솔루션을 적용하는 방법에 대해서 살펴보겠습니다.

EMB000011a03cb2 src

? 웹디모 공식 솔루션 홈페이지에서 [웹디모 공식 XML연동 갤러리 사용설명 - 2]를 다운로드 한 후 visual.fla파일을 열고 AS_VISUAL레이어의 액션스크립트 소스를 F9를 클릭하여 확인합니다.

EMB000011a03cb3 src

? 소스를 아래와 같이 변경합니다.

? AS_VISUAL레이어의 액션스크립트를 수정하면 다음과 같습니다.

_root.main_size= "517,220";//w, h, 메인사이즈

_root.auto_time = "3";

_root.list_pos= "525,10;//x, y 리스트 위치

위와 같이 AS_VISUAL레이어의 액션스크립트를 수정한 후 저장하고 Ctrl+Enter를 눌러 visual.swf파일을

생성합니다.

? [디자인관리》고급 디자인 관리》웹디자인 FTP]로 이동하여 swf들고 visual.swf파일을 업로드 합니다. 필자는 파일명칭을 visual0.swf로 변경하여 업로드 하였습니다.

? 아래 그림에서 빨강 테두리가 visual0.swf파일이 출력되어야 하는 부분입니다. 플래시 파일을 출력하기 위해 솔루션에서 XML파일을 생성해 보도록 하겠습니다.

EMB000011a03cb4 src

? [디자인관리》디자인 마법사 설정》맞춤 XML 파일생성]에서“맞춤형 XML 데이터관리“메뉴 사용여부에 사용함을 체크한 다음 저장합니다.

EMB000011a03cb5 src

? [디자인관리 》디자인 마법사 설정 》맞춤 XML 파일생성]의 메뉴 추가 버튼을 클릭합니다.

EMB000011a03cb6 src

? XML고유 코드에 visual0, 제목에 메인 비주얼 이미지, 이미지 파일첨부1 항목 명에 이미지 명, 설명에 이미지 파일첨부 라고 입력한 후 확인버튼을 클릭합니다.

EMB000011a03cb7 src

EMB000011a03cb8 src

? 데이터관리 버튼을 클릭해 이미지를 업로드 합니다.

XML 유형2 URL버튼을 클릭하여 URL주소를 복사합니다.

? [디자인관리 》고급 디자인 관리 》메인 화면 디자인]의 상단디자인에서 웹디모 기업의 상단디자인 소스를 드림위버로 붙여 넣고 삽입될 위치의 <td>~</td>에 플래시 소스를 삽입하고 위의 에서 복사된 URL주소를 삽입합니다.

아래는 웹디모 솔루션에 XML플래시를 삽입하는 소스입니다.

<script>

flash('플래시경로',가로사이즈,세로사이즈,'','','xml_path=XML경로');

</script>

 

아래는 웹디모 커뮤니티 메인에 불러올 XML소스를 수정한 HTML소스입니다.

<script>

flash("/img_up/shop_pds/ucomm01/design/swf/visual0.swf",517,220,"","","xml_path=/xml_center/my_xml2.php?xml_code=main");

</script>

EMB000011a03cb9 src

? [디자인관리》고급 디자인 관리》메인 화면 디자인]의 메인 중앙 디자인에 드림위버에서 수정된 소스를 입력한 후 적용합니다. 적용 후 [디자인관리》간편 디자인 관리》메인 화면 디자인]데이터 관리는 간편 디자인에“맞춤 XML 데이타 관리"에서 쉽게 관리할 수 있습니다.

EMB000011a03cba src

(2) 웹디모 공식 XML연동 게시판 xml파일 사용설명

웹디모 공식 솔루션 홈페이지(http://www.yestop.co.kr)에서 [XML플래시 오픈소스》가로스크롤되는 게시물 XML플래시 오픈소스]에서 가로스크롤링.zip 파일을 다운로드 받은 후 photo_gallery_flash8.fla 파일을 수정하고 솔루션에 적용하는 방법에 대해서 살펴보도록 하겠습니다.

아래의 그림에서 빨간 박스부분이 XML연동 게시판 이미지가 출력되는 곳입니다.

EMB000011a03cbb src

? [디자인관리》디자인 마법사 설정》기본 XML 파일생성]의 “게시판 XML파일관리“에서 XML파일 생성버튼을 클릭합니다.

EMB000011a03cbc src

EMB000011a03cbd src

? 고유 CODE설정을 입력합니다.

? 이미지를 불러올 게시판을 설정합니다.

? 나타낼 이미지의 사이즈를 입력합니다.

? 출력수를 10으로 입력하고, 출력방식에“속성형”을 선택합니다.

? 등록 버튼을 클릭하면 게시판 XML파일 관리에“photo”라는 고유코드가 생성됩니다.

EMB000011a03cbe src

?photo”의 “클립보드저장”버튼을 클릭합니다.

tip)클립보드저장은 복사(Ctrl+C)와 같은 개념입니다. 클립보드저장 후 붙여 넣기(Ctrl+V)하면 복사된 소스가 삽입됩니다.

? 웹디모 공식 솔루션 홈페이지(http://www.yestop.co.kr)에서 다운로드 받은 photo_gallery_flash8.fla 파일을 열고 수정 없이 Ctrl+Enter를 클릭하여 swf파일을 생성합니다.

EMB000011a03cbf src

? 생성된 photo_gallery_flash8.swf파일을 [디자인관리》고급 디자인 관리》웹디자인 FTP] swf폴더에 업로드 합니다. (필자는 photo_gallery_flash8.swf파일을 photo_gallery.swf로 변경해서 업로드 하였습니다.)

[디자인관리》고급디자인 관리》메인 화면 디자인》메인 중앙 디자인] HTML소스에서 “photo”게시물이 출력되는 위치의 <td>~</td>에 아래 소스를 입력합니다.

아래는 웹디모 솔루션에 XML플래시를 삽입하는 소스입니다.

<script>

flash("http://ucomm01.yestop.co.kr/img_up/shop_pds/ucomm01/design/swf/photo_gallery.swf",256,114,"","","xml_path=/xml_center/board.xml.php?xml_code=photo");

</script>

? 플래시가 구현되는지 확인하기 위해 홈페이지의 “photo”게시판에 이미지 게시물을 등록합니다.

EMB000011a03cc0 src

? 게시물 등록 후 메인 화면을 확인하면 아래와 같이 XML을 통해서 이미지가 나타납니다.

EMB000011a03cc1 src