Extending Dreamweaver - Adobe Inc. · Sorenson™ Spark™ 비디오 압축 및 압축 해제 ......

© 2007 Adobe Systems Incorporated. All rights reserved.

Windows® 및 Macintosh용 Adobe Dreamweaver® 확장본 설명서가 최종 사용자 사용권 계약서가 포함된 소프트웨어와 함께 배포되는 경우, 본 설명서 및 설명된 소프트웨어는 사용권 하에서 제공되며 해당 사용권 약관에 따라서만 사용하거나 복제할 수 있습니다. 사용권이 허락하는 경우 외에는 이 설명서의 어떠한 부분도 Adobe Systems Incorporated의 사전 서면 승인 없이는 어떠한 형식이나 수단(전자적, 기계적, 기록 또는 다른 방법)으로도 복제되거나, 검색 시스템에 저장 또는 전송될 수 없습니다. 이 설명서가 최종 사용자 사용권 계약서가 포함된 소프트웨어와 함께 배포되지 않는 경우에도 설명서 내용은 저작권법의 보호를 받습니다. 이 설명서의 내용은 통지 없이 변경될 수 있으며, 오직 정보 제공의 목적으로만 제공되므로, 이 내용을 Adobe Systems Incorporated측의 공약으로 해석해서는 안 됩니다. Adobe Systems Incorporated는 이 설명서에 포함된 정보 내용 중 나타날 수 있는 오류나 부정확한 정보에 대해 어떠한 책임도 지지 않습니다. 설명서의 아트웍이나 이미지 등은 저작권에 의해 보호되며 사용자의 프로젝트에 사용할 수 없습니다. 아트웍이나 이미지를 무단으로 통합 사용하여 새 작품을 만드는 행위는 저작권 소유자의 권리를 침해할 수 있습니다. 필요한 승인을 저작권 소유자로부터 받으시기 바랍니다.샘플 템플릿에 사용된 회사 이름 참조는 데모용으로만 사용되었으며 실제 회사를 지칭하는 것이 아닙니다.Adobe, Adobe 로고, ActionScript, ColdFusion, Dreamweaver, HomeSite, Fireworks 및 Flash는 미국 및/또는 기타 국가에서 Adobe Systems Incorporated의 등록 상표 또는 상표입니다. Mac OS 및 Macintosh는 미국 및 기타 국가에서 등록된 Apple Inc.의 상표입니다. ActiveX, Microsoft 및 Windows는 미국 및/또는 기타 국가에서 Microsoft Corporation의 등록 상표 또는 상표입니다. Java는 미국 및 기타 국가에서 Sun Microsystems, Inc.의 상표 또는 등록 상표입니다. 기타 모든 상표는 해당 소유자의 재산입니다.이 제품에는 Apache Software Foundation(http://www.apache.org/)에서 개발한 소프트웨어가 포함되어 있습니다. Graphics Interchange Format © 의 저작권은 CompuServe Incorporated에 있습니다. GIF(sm)는 CompuServe Incorporated의 서비스 상표입니다. MPEG Layer-3 오디오 압축 기술은 Fraunhofer IIS 및 Thomson Multimedia로부터 사용을 허가받았습니다(http://www.mp3licensing.com). 소프트웨어에 실시간 또는 라이브 브로드캐스트용 MP3 압축 오디오를 사용할 수 없습니다. 실시간 또는 라이브 브로드캐스트용 MP3 디코더가 필요한 경우에는 이 MP3 기술 라이센스를 취득해야 합니다. 음성 압축 및 압축 해제 기술은 Nellymoser, Inc.(www.nellymoser.com)로부터 사용을 허가받았습니다. Flash CS3 비디오는 On2 TrueMotion 비디오 기술로 제공됩니다. © 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com. 이 제품에는 OpenSymphony Group (http://www.opensymphony.com/)에서 개발한 소프트웨어가 포함되어 있습니다. Sorenson™ Spark™ 비디오 압축 및 압축 해제 기술은 Sorenson Media, Inc.로부터 사용을 허가받았습니다. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA. 미국 정부 최종 사용자 고지 사항. 본 소프트웨어 및 설명서는 48 C.F.R. §2.101에 정의된 바대로 “상용 품목” 이며, “상용 컴퓨터 소프트웨어” 및 “상용 컴퓨터 소프트웨어 설명서”(48 C.F.R. §12.212 또는 48 C.F.R. §227.7202에서 사용된 용어)로 구성되어 있습니다. 48 C.F.R. §12.212 또는 48 C.F.R. §§227.7202-1에서 227.7202-4에 따라서, 상용 컴퓨터 소프트웨어 및 상용 컴퓨터 소프트웨어 설명서는 미국 정부 최종 사용자에게 (a) 상용 품목으로만 사용 허가되며 (b) 규정된 약관을 따르는 모든 다른 최종 사용자에게 허용되는 권리만이 허용됩니다. 공표되지 않은 권리는 미국 저작권법 하에 제한됩니다. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. 미국 정부 최종 사용자에 대해 Adobe는 해당하는 경우 미 대통령 시행령 11246의 수정안, Vietnam Era Veterans Readjustment Assistance Act(1974)의 402호(38 USC 4212), 장애인보호법(1973) 503호 수정안, 41 CFR 60-1부에서 60-60, 60-250부 및 60-741부의 규정 등을 준수하는 데 동의합니다. 상기 조항에 포함된 차별 철폐 조치 조항 및 규정이 관련 조항으로 포함됩니다.

http://www.apache.org/

http://www.mp3licensing.com

http://www.on2.com

http://www.opensymphony.com/

http://www.apache.org/)%EC%97%90%EC%84%9C

http://www.opensymphony.com/)%EC%97%90%EC%84%9C

iii

목차

1장: 소개

배경 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

Extension 설치 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

Extension 만들기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

Extension 개발자를 위한 추가 리소스 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

Dreamweaver의 새로운 기능 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

이 설명서에서 사용된 규칙 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2장: Dreamweaver 사용자 정의

Dreamweaver를 사용자 정의하는 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

다중 사용자 환경에서 Dreamweaver 사용자 정의 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

FTP 매핑 변경 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Dreamweaver의 확장 가능한 문서 유형 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

키보드 단축키 매핑 변경 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3장: 코드 뷰 사용자 정의

코드 힌트 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

코드 색상 표시 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

코드 유효성 검사 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

기본 HTML 서식 변경 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

4장: Dreamweaver 확장

Dreamweaver Extension의 유형 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Configuration 폴더 및 Extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

확장 API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Extension 지역화 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Extension 관리자 작업 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

5장: Extension용 사용자 인터페이스

Extension 사용자 인터페이스 디자인 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Dreamweaver HTML 렌더링 컨트롤 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Extension에 사용자 정의 UI 컨트롤 사용 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Dreamweaver에 Flash 내용 추가 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

6장: Dreamweaver 문서 객체 모델

문서 DOM의 구별 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Dreamweaver DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

7장: 삽입 막대 객체

객체 파일이 동작하는 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

삽입 막대 정의 파일 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

삽입 막대 수정 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

간단한 객체 삽입 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

객체 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

iv

8장: 브라우저 호환성 확인 문제 API

검색 작업 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

문제 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

문제 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

9장: 명령

명령의 작동 방식 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

명령 메뉴에 명령 추가 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

간단한 명령 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

명령 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

10장: 메뉴 및 메뉴 명령

menus.xml 파일 정보 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

메뉴 및 메뉴 명령 변경 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

메뉴 명령 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

간단한 메뉴 명령 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

동적 메뉴 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

메뉴 명령 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

11장: 툴바

툴바 동작 방식 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

간단한 툴바 명령 파일 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

툴바 정의 파일 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

툴바 항목 태그 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

항목 태그 속성 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

툴바 명령 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

12장: 보고서

사이트 보고서 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

독립적 보고서 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

보고서 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

13장: 태그 라이브러리 및 편집기

태그 라이브러리 파일 형식 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

태그 선택기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

간단한 새 태그 편집기 만들기 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

태그 편집기 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

14장: 속성 관리자

속성 관리자 파일 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

속성 관리자 파일 작동 방식 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

간단한 속성 관리자 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

속성 관리자 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

15장: 부동 패널

부동 패널 파일의 작동 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

간단한 부동 패널 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

부동 패널 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

v

16장: 비헤이비어

비헤이비어의 작동 방식 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

간단한 비헤이비어 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

비헤이비어 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

17장: 서버 비헤이비어

Dreamweaver 구조 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

간단한 서버 비헤이비어 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

서버 비헤이비어 API 함수가 호출되는 방식 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

서버 비헤이비어 API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

서버 비헤이비어 구현 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

EDML 파일 편집하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

EDML 그룹 파일 태그 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

참여자 EDML 파일 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

서버 비헤이비어 기술 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

18장: 데이터 소스

데이터 소스 작동 방식 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

간단한 데이터 소스 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

데이터 소스 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

19장: 서버 서식

데이터 서식 지정 작동 방식 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

데이터 서식 지정 함수가 호출되는 경우 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

서버 서식 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

20장: 구성 요소

구성 요소 기본 사항 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

구성 요소 패널 확장하기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

구성 요소 패널을 사용자 정의하는 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

구성 요소 패널 파일 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

구성 요소 패널 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

21장: 서버 모델

서버 모델 사용자 정의가 동작하는 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

서버 모델 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

22장: 데이터 변환기

데이터 변환기 작업 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

사용할 변환기 종류 확인 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283

변환된 속성을 태그에 추가 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283

변환된 속성 관리 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

변환된 태그 또는 코드 블록 잠그기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

잠긴 내용에 대한 속성 관리자 만들기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

사용하는 변환기에서 버그 찾기 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

간단한 속성 변환기 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

간단한 블록/태그 변환기 예제 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

데이터 변환기 API 함수 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

vi

23장: C 레벨 확장성

C 함수가 동작하도록 통합하는 방법 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

C 레벨 확장성 및 JavaScript 인터프리터 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300

데이터 유형 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

C 레벨 API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

파일 액세스 및 다중 사용자 구성 API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

JavaScript에서 C 함수 호출 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

24장: Shared 폴더

Shared 폴더 내용 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315

Shared 폴더 사용 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

색인 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

1

1장: 소개

이 설명서는 사용자가 Dreamweaver의 Extension을 작성할 수 있도록 Adobe® Dreamweaver® CS3의 기본 구조 및 응용 프로그램 프로그래밍 인터페이스(API)에 대하여 설명합니다. 그리고 각 Extension 유형의 작동 방식에 대한 정보를 제공해 줍니다. 즉, Dreamweaver 기능을 구성하는 다양한 객체, 메뉴, 부동 패널, 서버 비헤이비어 등을 구현하기 위하여 Dreamweaver 에서 호출하는 API 함수에 대해 설명하고 각 Extension 유형의 간단한 예제를 보여 줍니다. 또한 다양한 HTML 및 XML 파일에서 태그를 편집하여 메뉴 항목이나 문서 형식 등을 추가함으로써 Dreamweaver를 사용자 정의하는 방법에 대해서도 설명합니다.

객체, 메뉴, 부동 패널 및 기타 다른 기능을 Dreamweaver에 추가하려면 특별한 유형의 extension에 필요한 함수를 작성해야 합니다. 이 설명서는 Dreamweaver가 이러한 함수에 전달하는 인수와 이 함수가 반환하는 값에 대해 설명합니다.

Dreamweaver Extension에서 다양한 지원 작업을 수행하는 데 사용할 수 있는 유틸리티 및 범용 JavaScript™ API에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오. 데이터베이스를 사용하는 Extension을 만드는 경우에는 Dreamweaver 사용 설명서에서 데이터베이스 연결 만들기에 대한 항목을 참조하십시오.

배경

대부분의 Dreamweaver Extension은 HTML 및 JavaScript로 작성됩니다. 이 설명서는 Dreamweaver, HTML, XML 및 JavaScript 프로그래밍에 익숙한 독자를 대상으로 합니다. C Extension을 구현하고 있는 개발자의 경우에는 C DLL(동적 링크 라이브러리)을 만들고 사용하는 방법에 대해 알고 있어야 합니다. 웹 응용 프로그램 작성을 위한 Extension을 작성하려면 하나 이상의 플랫폼에서 ASP(Active Server Pages), ASP.net, PHP: Hypertext Preprocessor(PHP), Adobe® ColdFusion® 또는 JSP(Java Server Pages) 등 서버측 스크립팅을 능숙하게 수행할 수 있어야 합니다.

Extension 설치Extension 작성 절차에 익숙해지기 위해, Adobe Exchange 웹 사이트(http://www.adobe.com/go/exchange_kr)에서 Extension 및 리소스를 탐색할 수도 있습니다. 기존 Extension을 설치하면 사용자 자신의 Extension을 처리하는 데 필요한 몇 가지 도구를 얻을 수 있습니다.

Extension을 설치하려면:1 Adobe 다운로드 웹 사이트(http://www.adobe.com/go/downloads_kr)에서 Adobe® Extension Manager를 다운로드하여 설치합니다.

2 Adobe Exchange 웹 사이트(http://www.adobe.com/go/exchange_kr)에 로그온합니다.

3 사용 가능한 Extension 중에서 원하는 것을 선택한 다음 Download 링크를 클릭하여 Extension 패키지를 다운로드합니다.

4 Extension 패키지를 Dreamweaver가 설치된 폴더의 Dreamweaver/Downloaded Extensions 폴더에 저장합니다.

5 Extension Manager에서 [파일] > [Extension 설치]를 선택합니다. Dreamweaver에서 [명령] >[Extension관리]를 선택하여 Extension Manager를 실행합니다.

Extension Manager는 Downloaded Extension 폴더에 있는 Extension을 Dreamweaver에 설치합니다.

일부 Extension의 경우에는 Extension을 사용하기 전에 Dreamweaver를 다시 시작해야 합니다. Extension을 설치할 때 Dreamweaver가 실행 중이면 응용 프로그램을 종료했다가 다시 시작하라는 메시지가 표시됩니다.

설치 작업 후에 Extension에 대한 기본 정보를 보려면 Dreamweaver에서 [명령] > [Extension 관리]를 선택하여 Extension Manager로 이동합니다.

http://www.adobe.com/exchange

http://www.adobe.com/downloads

http://www.adobe.com/exchange

http://www.adobe.com/go/exchange_kr)%EC%97%90%EC%84%9C

http://www.adobe.com/go/downloads_kr)%EC%97%90%EC%84%9C

http://www.adobe.com/go/exchange_kr)%EC%97%90

ADOBE DREAMWEAVER 9.0Dreamweaver 확장

2

Extension 만들기Dreamweaver Extension을 만들기 전에, Adobe Exchange 웹 사이트(http://www.adobe.com/go/exchange_kr)에서 만들고자 하는 extension이 이미 존재하는지 여부를 확인하십시오. 요구 사항에 맞는 Extension이 없으면 다음 단계에 따라 Extension을 만듭니다.

• 만들려는 Extension 유형을 결정합니다. Extension 유형에 대한 자세한 내용은 60페이지의 “Dreamweaver Extension의 유형”을 참조하십시오.

• 만들려는 Extension 유형에 대한 설명서를 검토합니다. 해당 Extension 유형을 만드는 데 익숙해지려면 해당 항목에서 간단한 Extension 예제를 만들어보는 것이 좋습니다.

• 수정하거나 만들 파일을 결정합니다.

• 가능한 경우, Extension에 대한 UI(사용자 인터페이스)를 계획합니다.

• 필요한 파일을 만들고 적절한 폴더에 저장합니다.

• Dreamweaver를 다시 시작하여 새로운 Extension을 인식하도록 합니다.

• Extension을 테스트합니다.

• 다른 사람들과 공유할 수 있도록 Extension을 패키지화합니다. 자세한 내용은 66페이지의 “Extension 관리자 작업”을 참조하십시오.

Extension 개발자를 위한 추가 리소스다른 개발자와 Extension 작성에 관한 의견을 나누려면 Dreamweaver Extensibility 뉴스 그룹에 가입해야 합니다. 이 Adobe 웹 사이트에서 이 뉴스 그룹에 액세스할 수도 있습니다(www.adobe.com/support/dreamweaver/extend/form/).

Dreamweaver의 새로운 기능Dreamweaver CS3에는 다음과 같이 확장 가능한 기능과 인터페이스가 새로 추가되었습니다. 이러한 각 기능에는 새로운 관련 함수가 있으며, 그 목록은 Dreamweaver API 참조에서 찾아볼 수 있습니다.

• Bridge 응용 프로그램과의 통신

• 모바일 장치 에뮬레이션

• Spry XML 데이터 세트 생성

• Spry 위젯 편집 및 삽입

• 브라우저 호환성 확인

유틸리티 API와 JavaScript API에 추가된 새로운 함수에 대한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

설명서 리소스 센터Adobe의 설명서로 Dreamweaver 기술을 향상시키십시오. http://www.adobe.com/support/documentation/buy_books.html에서 전문가가 작성한 최신 내용을 확인할 수 있습니다.

사용되지 않는 함수Dreamweaver CS3에서는 몇 가지 함수가 사용되지 않습니다. 유틸리티 및 JavaScript API에서 제거된 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

http://www.adobe.com/exchange/

http://adobe.com/support/dreamweaver/extend/form/

http://www.adobe.com/support/documentation/buy_books.html

http://www.adobe.com/go/exchange_kr)%EC%97%90%EC%84%9C


3

이 설명서에서 사용된 규칙이 설명서에는 다음과 같은 인쇄 규칙이 사용되었습니다.

• 코드 글꼴은 클래스 이름, 메서드 이름, 함수 이름, 형식 이름, 스크립트, SQL 문, HTML 및 XML 태그와 속성 모두의 이름을 포함한 API 문자와 코드를 나타냅니다.

• 기울임체 코드 글꼴은 코드에서 대체 가능한 항목을 나타냅니다.

• 연속 기호(¬)는 긴 코드 행이 둘 이상의 행으로 분리되었음을 나타냅니다. 이 설명서에서는 여백 제한으로 인해 원래는 연속되어야 하는 코드 행이 나뉘어져 표시됩니다. 코드 행을 복사할 경우에는 연속 기호를 제거한 후 하나의 행으로 입력하십시오.

• 함수의 인수가 중괄호({ })로 묶여 있으면 해당 인수가 선택적이라는 것을 나타냅니다.

• 이름에 접두어 dreamweaver. (예: dreamweaver.funcname)가 들어가는 함수는 코드 작성 시 dw.funcname으로 줄여서 사용할 수 있습니다. 이 설명서에서는 함수를 정의할 때나 색인에서 완전한 dreamweaver. 접두어를 사용합니다. 그러나, 대다수 예제에는 보다 짧은 dw. 접두어가 사용됩니다.

이 설명서에는 다음과 같은 명명 규칙이 사용됩니다.

• 개발자 Extension 제작을 담당하는 개발자

• 사용자 Dreamweaver를 사용하는 사람

• 방문자 사용자가 만든 웹 페이지를 보는 사람

4

2장: Dreamweaver 사용자 정의

Adobe Dreamweaver CS3 Extension을 만들고 사용하는 것 외에도 다양한 방법으로 Dreamweaver를 사용자 정의할 수 있습니다. 이렇게 하면 더욱 익숙하고 편안한 환경에서 효율적으로 작업할 수 있습니다.

Dreamweaver를 사용자 정의하는 방법Dreamweaver를 사용자 정의하는 방법은 다양합니다. 이 중 일부는 Dreamweaver 사용 설명서에 설명되어 있습니다. 이 설명서에 설명된 방법으로 작업 영역을 사용자 정의할 수 있습니다. 또한 Dreamweaver 대화 상자의 설정을 바꿀 수 있습니다. [환경 설정] 패널([편집] > [환경 설정] 또는 Mac OS X의 경우 [Dreamweaver] > [환경 설정])을 사용하여 액세스 가능성, 코드 색상 표시, 글꼴, 강조 표시, 브라우저에서 미리 보기 등과 같은 다양한 영역에서 환경을 설정할 수 있습니다. 키보드 단축키 편집기([편집]> [키보드 단축키])를 사용하거나 구성 파일을 편집하여 키보드 단축키를 변경할 수도 있습니다.

다음 목록은 구성 파일을 편집하여 Dreamweaver를 사용자 정의할 수 있는 몇 가지 방법을 나타낸 것입니다.

• [삽입] 막대의 객체를 재배열하거나 새 탭을 만들어 객체를 재구성하거나 새 객체를 추가합니다. 91페이지의 “삽입 막대 수정”을 참조하십시오.

• 메뉴 항목의 이름을 바꾸거나, 메뉴에 새 명령을 추가하거나, 기존 명령을 메뉴에서 제거합니다. 118페이지의 “메뉴 및 메뉴 명령”을 참조하십시오.

• 타사 태그(ASP 및 JSP 태그 등)를 [문서] 윈도우의 [디자인] 뷰에 표시하는 방법을 바꿉니다. 6페이지의 “타사 태그 해석 사용자 정의”를 참조하십시오.

• 영어 이외 언어의 키보드인 경우 키보드 단축키 매핑을 변경합니다. 24페이지의 “키보드 단축키 매핑 변경”을 참조하십시오.

또한 다음 작업을 수행하여 자신의 필요에 맞게 Dreamweaver를 사용자 정의할 수도 있습니다.

• 4페이지의 “기본 문서 사용자 정의”

• 5페이지의 “페이지 디자인 사용자 정의”

• 5페이지의 “대화 상자의 모양 사용자 정의”

• 5페이지의 “기본 파일 유형 바꾸기”

• 6페이지의 “타사 태그 해석 사용자 정의”

• 19페이지의 “작업 영역 레이아웃 사용자 정의”

• 23페이지의 “코딩 툴바 사용자 정의”

기본 문서 사용자 정의DocumentTypes/NewDocuments 폴더에는 Dreamweaver를 사용하여 만들 수 있는 각 유형의 기본 문서(빈 문서)가 들어 있습니다. [파일] > [새 파일]을 선택하고 [기본 페이지], [동적 페이지] 또는 [기타] 범주에서 특정 항목을 선택하여 빈 문서를 새로 만들면, 이 폴더에 있는 적절한 기본 문서를 기반으로 새 문서가 만들어집니다. 지정된 형식의 기본 문서에 표시되는 내용을 바꾸려면 이 폴더에 있는 해당 문서를 편집하십시오.

참고: 작성 중인 사이트의 모든 페이지에 저작권 정보와 같은 공통 요소를 포함시키거나 공통 레이아웃을 적용하는 경우, 기본 문서를 바꾸는 것보다 템플릿과 라이브러리 항목을 사용하는 것이 더 좋습니다. 템플릿 및 라이브러리 항목에 대한 자세한 내용은 Dreamweaver 사용 설명서를 참조하십시오.


5

페이지 디자인 사용자 정의Dreamweaver는 미리 디자인된 CSS(cascading style sheet), 프레임세트 및 페이지 디자인을 다양하게 제공합니다. [파일] > [새로 만들기]를 선택하여 이 디자인을 기반으로 페이지를 만들 수 있습니다.

사용 가능한 디자인을 사용자 정의하려면 BuiltIn/css, BuiltIn/framesets, BuiltIn/Templates 및 BuiltIn/TemplatesAccessible 폴더의 파일을 편집하십시오.

참고: 페이지 디자인 및 페이지 디자인(액세스 가능성) 범주에 있는 디자인은 Dreamweaver 템플릿 파일입니다. 템플릿에 대한 자세한 내용은 Dreamweaver 사용 설명서를 참조하십시오.

또한 BuiltIn 폴더의 하위 폴더에 페이지 디자인 파일을 추가하여 사용자 정의 페이지 디자인을 작성할 수도 있습니다. [새 문서] 대화 상자에 나타나는 파일에 설명을 표시하려면 페이지 디자인 파일에 해당하는 디자인 노트 파일을 해당 _notes 폴더에 만드십시오.

대화 상자의 모양 사용자 정의객체, 명령 및 비헤이비어에 대한 대화 상자 레이아웃은 HTML 형식으로 지정되며 Dreamweaver 응용 프로그램 폴더의 Configuration 폴더에 HTML 파일로 저장되어 있습니다. Dreamweaver에서 양식을 편집하는 것처럼 이 파일을 편집할 수 있습니다. 자세한 내용은 Dreamweaver 사용 설명서를 참조하십시오.

참고: 다중 사용자 운영 체제에서는 Dreamweaver 구성 파일이 아니라 사용자 Configuration 폴더에 있는 구성 파일 사본을 편집해야 합니다. 자세한 내용은 63페이지의 “다중 사용자 Configuration 폴더”를 참조하십시오.

대화 상자의 모양을 변경하려면:1 Dreamweaver에서 [편집] > [환경 설정]을 선택한 다음 [코드 다시 작성] 범주를 선택합니다.

2 [붙여넣기시 양식 항목의 이름 변경] 옵션의 선택을 해제합니다.

이 옵션을 선택하지 않으면 양식의 항목을 복사하고 붙여넣을 때 원래 이름을 확실하게 유지할 수 있습니다.

3 [확인]을 클릭하여 [환경 설정] 대화 상자를 닫습니다.

4 하드 디스크의 Configuration/Objects, Configuration/Commands 또는 Configuration/Behaviors 폴더에서 적절한 HTM 파일을 찾습니다.

5 Configuration 폴더 이외의 다른 위치에 파일을 복사합니다.

6 이 사본을 Dreamweaver에서 열고 양식을 편집한 후 저장합니다.

7 Dreamweaver를 종료합니다.

8 변경된 파일을 원래의 Configuration 폴더에 다시 복사합니다. 이 경우, 원본 파일의 백업 사본을 만들어 두는 것이 좋습니다. 이렇게 하면 나중에 필요할 때 다시 복원할 수 있습니다.

9 Dreamweaver 다시 시작하여 변경된 내용을 확인합니다.

대화 상자의 동작 방법은 변경할 수 없으며 모양만 변경해야 합니다. 대화 상자에 포함되는 양식 요소의 유형과 이름은 계속 동일하게 유지되어야 Dreamweaver가 대화 상자에서 얻는 정보를 원래와 동일한 방법으로 계속 사용할 수 있습니다.

예를 들어, 주석 객체는 대화 상자에서 텍스트 영역에서 텍스트 입력 정보를 얻고 간단한 JavaScript 함수를 사용하여 텍스트를 HTML 주석으로 바꾸어 문서에 삽입합니다. 이 대화 상자를 표현하는 양식은 Configuration/Objects/Invisibles 폴더의 Comment.htm 파일에 있습니다. 이 파일을 열어 텍스트 영역의 크기 및 기타 속성을 바꿀 수 있지만 textarea 태그 전체를 삭제하거나 name 속성의 값을 변경하면 주석 객체가 올바로 동작하지 않습니다.

기본 파일 유형 바꾸기기본적으로 Dreamweaver는 인식하는 모든 파일 유형을 [파일] > [열기] 대화 상자에 표시합니다. 이 대화 상자의 팝업 메뉴를 사용하여 특정 유형의 파일만 표시되도록 할 수 있습니다. 대부분의 작업에서 특정 파일 유형(예: ASP 파일)만 주로 사용하는 경우에는 기본 표시를 바꿀 수 있습니다. Dreamweaver Extensions.txt 파일의 첫 번째 행에 지정된 파일 유형이 기본 유형으로 설정됩니다.

참고: [파일] > [열기] 대화 상자에 Dreamweaver가 열 수 없는 파일을 포함하여 모든 파일 유형이 나타나도록 하려면 [모든 파일(*.*)]을 선택해야 합니다. 이것은 Dreamweaver가 열 수 있는 파일만 표시하는 [모든 문서]를 선택하는 것과 다릅니다.


6

Dreamweaver [파일] > [열기]에서 기본 파일 유형을 바꾸려면:1 Configuration 폴더에 Extensions.txt 파일의 백업 사본을 만듭니다.

2 Dreamweaver나 텍스트 편집기에서 Extensions.txt를 엽니다.

3 새 기본값에 해당하는 행이 파일의 첫 번째 행에 오도록 해당 행을 잘라내어 파일의 처음에 붙여넣습니다.

4 파일을 저장합니다.

5 Dreamweaver를 다시 시작합니다.

새 기본 값을 확인하려면 [파일] > [열기]를 선택하고 파일 유형의 팝업 메뉴를 확인합니다.

[파일] > [열기] 대화 상자의 메뉴에 새 파일 유형을 추가하려면:1 Configuration 폴더에 Extensions.txt 파일의 백업 사본을 만듭니다.


3 각 새로운 파일 유형에 대한 행을 추가합니다.

a 새 파일 유형의 파일 이름 확장명을 콤마로 구분하여 대문자로 입력합니다.

b 콜론을 추가한 후 [파일] > [열기] 대화 상자에 나타나는 파일 유형에 대한 팝업 메뉴에 표시될 설명을 간단히 입력합니다.

예를 들어, JPEG 파일에 대해 JPG,JPEG,JFIF:JPEG Image Files라고 입력합니다.



변경된 내용을 확인하려면 [파일] > [열기]를 선택하고 파일 유형의 팝업 메뉴를 클릭합니다.

타사 태그 해석 사용자 정의ASP, ColdFusion, JSP 및 PHP와 같은 서버측 기술은 HTML 파일에 HTML이 아닌 특수한 코드를 사용합니다. 서버는 이 코드를 기반으로 HTML 내용을 만들어 제공합니다. Dreamweaver는 HTML이 아닌 태그를 만나면 HTML이 아닌 태그를 읽고 표시하는 방법이 정의된 타사 태그 파일의 정보와 비교합니다.

예를 들어, ASP 파일은 일반 HTML 외에도 서버가 해석할 ASP 코드를 포함합니다. ASP 코드는 HTML 태그와 유사하지만, <%로 시작하고 %>로 끝나는 한 쌍의 구분 기호로 표시됩니다. Dreamweaver Configuration/ThirdPartyTags 폴더에는 ASP 코드와 같은 다양한 타사 코드의 형식을 기술하고 코드를 표시하는 방법을 정의한 Tags.xml이라는 이름의 파일이 포함되어 있습니다. ASP 코드가 Tags.xml에 지정된 방식 때문에 Dreamweaver는 구분 기호 사이에 있는 내용을 해석하지 않습니다. 대신, [디자인] 뷰에 ASP 코드임을 나타내는 아이콘을 표시합니다. 사용자 고유 태그 데이터베이스 파일에 Dreamweaver가 태그를 읽고 표시하는 방법을 정의할 수 있습니다. Dreamweaver에게 새로운 태그를 표시하는 방법을 알리려면 각 태그 세트에 대해 새로운 태그 데이터베이스 파일을 만듭니다.

참고: 이 단원에서는 Dreamweaver가 사용자 정의 태그를 표시하도록 정의하는 방법에 대해 설명합니다. 그러나 사용자 정의 태그의 내용이나 속성을 편집할 수 있도록 하는 방법에 대해서는 설명하지 않습니다. 속성 관리자를 만들어 사용자 정의 태그의 속성을 검사하고 변경하는 것에 대한 자세한 내용은 181페이지의 “속성 관리자”를 참조하십시오.

각 태그 데이터베이스 파일은 하나 이상의 사용자 정의 태그에 대해 이름, 유형, 컨텐트 모델, 렌더링 체계 및 아이콘을 정의합니다. 만들 수 있는 태그 데이터베이스 파일의 수에는 제한이 없지만 이 파일이 Configuration/ThirdPartyTags 폴더에 있어야 Dreamweaver가 읽고 처리할 수 있습니다. 태그 데이터베이스 파일의 확장명은 .xml입니다.

프리랜서 개발자처럼 서로 관련되지 않은 여러 사이트를 동시에 작업하고 있다면 특정 사이트에 대한 모든 태그 규칙을 한 파일에 저장할 수 있습니다. 그런 다음 이 태그 데이터베이스 파일에 사용자 정의 아이콘을 포함시키고 속성 관리자를 사이트 관리자에게 전달하기만 하면 됩니다.

태그 규칙은 tagspec이라는 XML 태그로 정의합니다. 예를 들어, 다음 코드는 happy라는 이름의 태그 규칙을 기술합니다.<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model=

"marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>


7

tagspec을 사용하여 다음 두 종류의 태그를 정의할 수 있습니다.

• 일반 HTML 스타일 태그

happy 태그 예제는 일반 HTML 스타일 태그입니다. 이 태그는 열기 <happy> 태그로 시작하여 닫기 </happy> 태그로 끝나며, 열기 태그와 닫기 태그 사이에는 데이터가 포함되어 있습니다.

• 문자열 구분 태그

문자열 구분 태그는 시작 문자열과 종료 문자열로 구성되며, 태그 사이에 내용이 없고 닫기 태그가 없다는 점에서 빈 HTML 태그(예: img)와 비슷합니다. happy 태그가 문자열 구분 태그였다면 태그 규칙에 start_string과 end_string 속성이 포함되었을 것입니다. ASP 태그는 문자열 구분 태그입니다. 이 태그는 문자열 <%로 시작하고 문자열 %>로 종료되며 닫기 태그가 없습니다.

다음은 tagspec 태그에 사용할 수 있는 속성과 올바른 값에 대해 설명합니다. 별표(*)로 표시되는 속성은 문자열 구분 태그에 대해 무시됩니다. 선택적 속성은 속성 목록에서 중괄호({})로 표시됩니다. 중괄호로 표시되지 않은 모든 속성은 필수 속성입니다.

<tagspec>

설명타사 태그에 대한 정보를 제공합니다.

속성tag_name, {tag_type}, {render_contents}, {content_model}, {start_string}, {end_string},

{detect_in_attribute}, {parse_attributes}, icon, icon_width, icon_height, {equivalent_tag},

{is_visual}, {server_model}

• tag_name은 사용자 정의 태그의 이름입니다. 문자열 구분 태그의 경우, tag_name은 지정된 속성 관리자를 태그에 사용할 수 있는지 여부를 결정하는 데에만 사용됩니다. [속성 관리자]의 첫 번째 행에 이 태그 이름이 포함되어 있고 양쪽에 별표가 표시되어 있다면 이 유형의 태그에 속성 관리자를 사용할 수 있습니다. 예를 들어, ASP 코드에 대한 태그 이름이 ASP라면 ASP 코드를 검사할 수 있는 속성 관리자는 첫 번째 행에 *ASP*를 포함해야 합니다. 속성 관리자 API에 대한 자세한 내용은 181페이지의 “속성 관리자”를 참조하십시오.

• tag_type은 태그가 비어 있는지(예: img 태그) 또는 열기 태그와 닫기 태그 사이에 어떤 값을 포함하는지(예: code 태그) 여부를 결정합니다. 이 속성은 일반(문자열 구분 태그 아님) 태그에 필요합니다. 문자열 구분 태그는 항상 비어 있기 때문에 문자열 구분 태그에 대해서는 이 속성이 무시됩니다. 유효한 값은 "empty"와 "nonempty"입니다.

• render_contents는 태그의 내용을 [디자인] 뷰에 표시할 것인지 아니면 지정된 아이콘을 대신 표시할 것인지 여부를 지정합니다. 이 속성은 비어 있지 않은 태그에 필요하므로 비어 있는 태그에 대해서는 무시됩니다. 비어 있는 태그에는 내용이 없습니다. 이 속성은 속성 외부에 나타나는 태그에만 적용됩니다. 다른 태그의 속성 값 내부에 나타나는 태그에 대한 내용은 표시되지 않습니다. 유효한 값은 "true"와 "false"입니다.

• content_model은 태그에 포함될 수 있는 내용의 종류와 태그가 나타날 수 있는 HTML 파일 내의 위치를 지정합니다. 유효한 값은 "block_model", "head_model", "marker_model" 및 "script_model"입니다.

• block_model은 태그가 div 및 p와 같은 블록 수준 요소를 포함할 수 있으며 body 섹션이나 div, layer 또는 td와 같은 다른 본문 내용 태그 내부에서만 표시될 수 있음을 지정합니다.

• head_model은 태그에 텍스트 내용이 포함될 수 있으며 head 섹션에만 나타날 수 있도록 지정합니다.

• marker_model은 태그가 유효한 모든 HTML 코드를 포함할 수 있으며 HTML 파일의 모든 위치에 나타날 수 있음을 지정합니다. Dreamweaver의 HTML 유효성 검사기는 marker_model로 지정된 태그를 무시합니다. 그러나 유효성 검사기는 이러한 태그의 내용은 무시하지 않습니다. 따라서 이 태그 자체는 어디에나 나타날 수 있지만 태그의 위치에 따라 태그의 내용은 잘못된 HTML로 평가될 수 있습니다. 예를 들어, 일반 텍스트는 문서의 head 섹션에서 유효한 head 요소의 외부에 나타나지 않기 때문에 일반 텍스트를 포함하는 marker_model 태그를 head 섹션에 지정할 수 없습니다. 일반 텍스트를 포함하는 사용자 정의 태그를 head 섹션에 두려면 태그의 컨텐트 모델을 marker_model 대신 head_model로 지정하십시오. marker_model은 p 또는 div와 같은 블록 수준 요소 내(예: 단락 내)에 인라인으로 표시되어야 하는 태그에 사용합니다. 태그 자체가 고유의 단락으로 표시되어 태그의 앞과 뒤 행에서 줄이 바뀌어야 한다면 이 모델을 사용하지 않아야 합니다.


8

• script_model은 문서의 열기 및 닫기 HTML 태그 사이의 어디에나 존재할 수 있습니다. Dreamweaver가 이 모델의 태그를 만나면 태그 내용을 모두 무시합니다. 이 태그는 Dreamweaver가 해석할 수 없는 마크업(예: 특정 ColdFusion 태그)에 사용됩니다.

• start_string은 문자열 구분 태그의 시작을 나타내는 구문 문자열을 지정합니다. 문자열 구분 태그는 주석이 표시될 수 있는 곳이라면 문서의 어느 위치에도 나타날 수 있습니다. Dreamweaver는 start_string과 end_string 사이의 태그를 파싱하거나 항목 또는 URL을 디코딩하지 않습니다. end_string이 지정되어 있으면 이 속성은 필수 속성입니다.

• end_string은 문자열 구분 태그의 끝을 나타내는 구분 문자열을 지정합니다. start_string이 지정되어 있으면 이 속성은 필수 속성입니다.

• detect_in_attribute는 속성 이름 또는 값 내부에 문자열이 나타나는 경우에도 start_string과 end_string 사이 또는 두 문자열이 지정되지 않은 경우, 열기 태그와 닫기 태그의 사이의 모든 내용을 무시할 것인지 여부를 지정합니다. 문자열 구분 태그에 대해서는 이 속성을 "true"로 설정하는 것이 일반적입니다. 기본값은 "false"입니다. 예를 들어, ASP 태그는 속성 값 내부에 나타나기도 하고 인용 부호(")를 포함하기도 합니다. ASP 태그 규칙은 detect_in_attribute="true"로 지정되어 있기 때문에 Dreamweaver는 내부 인용 부호가 속성 값 내부에 나타날 때 이 인용 부호를 비롯한 ASP 태그를 무시합니다.

• parse_attributes는 태그의 속성을 파싱할 것인지 여부를 지정합니다. 이 속성이 "true"(기본값)로 설정되어 있으면 Dreamweaver는 속성을 파싱하고, "false"로 설정되어 있으면 인용 부호 외부에 나타나는 다음 닫기 꺾쇠 괄호까지의 모든 내용을 무시합니다. 예를 들어, cfif(<cfif a is 1>처럼 Dreamweaver가 속성 이름/값 쌍으로 파싱할 수 없는) 태그에 대해서는 이 속성을 "false"로 설정해야 합니다.

• icon은 태그와 연관된 아이콘 파일의 경로 및 파일 이름을 지정합니다. 이 속성은 비어 있는 태그와 [문서] 윈도우의 [디자인] 뷰에 내용이 표시되지 않는 비어 있지 않은 태그에 필요합니다.

• icon_width는 아이콘의 폭을 픽셀 단위로 지정합니다.

• icon_height는 아이콘의 높이를 픽셀 단위로 지정합니다.

• equivalent_tag는 특정 ColdFusion 양식 관련 태그에 해당하는 간단한 HTML 태그를 지정하며, 다른 태그와 함께 사용되지 않습니다.

• is_visual은 태그가 페이지에 직접적인 시각 효과를 주는지 여부를 나타냅니다. 예를 들어, ColdFusion 태그 cfgraph는 is_visual에 대한 값을 지정하지 않습니다. 따라서 기본값은 "true"로 설정됩니다. ColdFusion 태그 cfset의 경우 is_visual이 "false"로 설정되어 있습니다. 서버 마크업 태그에 대한 가시성은 [환경 설정] 대화 상자의 [보이지 않는 요소] 범주에 의해 조절됩니다. 가시적 서버 마크업 태그에 대한 가시성은 비가시적 서버 마크업 태그에 대한 가시성으로부터 독립적으로 설정될 수 있습니다.

• server_model은 지정될 경우 지정된 서버 모델에 속한 페이지에만 tagspec 태그가 적용된다는 것을 나타냅니다. server_model이 지정되지 않으면 tagspec 태그가 모든 페이지에 적용됩니다. 예를 들어, ASP와 JSP 태그의 구분 문자열은 동일하지만 JSP에 대한 tagspec 태그는 "JSP" server_model을 지정하기 때문에 Dreamweaver가 JSP 페이지에서 적절한 구분 문자가 포함된 코드를 만나면 JSP 아이콘을 표시합니다. JSP가 아닌 페이지에서 이러한 코드를 만나면 ASP 아이콘을 표시합니다.

내용없음(빈 태그)

컨테이너없음

예제<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model=

"marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>


9

디자인 뷰에 사용자 정의 태그를 표시하는 방법[문서] 윈도우의 [디자인] 뷰에 사용자 정의 태그가 표시되는 방법은 tagspec 태그의 tag_type 및 render_contents 속성 값에 따라 달라집니다. tag_type의 값이 "empty"이면 icon 속성에 지정된 아이콘이 표시됩니다. tag_type의 값이 "nonempty"이지만 render_contents의 값이 "false"이면 마치 비어 있는 태그인 것처럼 아이콘이 표시됩니다. 다음 예제는 앞에서 정의한 happy 태그의 인스턴스가 HTML에 어떻게 나타나는지 보여줍니다.<p>This is a paragraph that includes an instance of the <code>happy</code>

tag (<happy>Joe</happy>).</p>

태그 규칙에 render_contents가 "false"로 설정되어 있기 때문에, happy 태그의 내용(Joe)이 표시되지 않습니다. 대신 시작 태그, 종료 태그 및 태그 내용이 단일 아이콘으로 나타납니다.

render_contents 값이 "true"인 비어 있지 않은 태그의 경우에는 [디자인] 뷰에 아이콘이 나타나지 않습니다. 대신, 열기 및 닫기 태그 사이의 내용(예: <mytag>This is the content between the opening and closing tags</mytag>의 태그 사이의 텍스트)이 표시됩니다. [보기] > [시각 도구] > [보이지 않는 요소]가 활성화되어 있는 경우, [강조 표시] 환경 설정에 지정된 타사 태그 색상으로 내용이 강조 표시됩니다. 강조 표시는 태그 데이터베이스 파일에 정의된 태그에만 적용됩니다.

타사 태그의 강조 표시 색상을 바꾸려면:1 [편집] > [환경 설정]을 선택하고 [강조 표시] 범주를 선택합니다.

2 [타사 태그] 색상 상자를 클릭하여 색상 선택기를 표시합니다.

3 색상을 선택하고 [확인]을 클릭하여 [환경 설정] 대화 상자를 닫습니다. 색상 선택에 대한 자세한 내용은 Dreamweaver 사용 설명서를 참조하십시오.

타사 태그 다시 작성 금지Dreamweaver는 특정 종류의 HTML 코드 오류를 수정합니다. 자세한 내용은 Dreamweaver 사용 설명서를 참조하십시오. 기본적으로 Dreamweaver는 .asp(ASP), .cfm(ColdFusion), .jsp(JSP) 및 .php(PHP)를 포함하여 특정 파일 확장명을 가진 파일에서 HTML을 변경하지 못하도록 합니다. 이렇게 설정한 이유는 Dreamweaver가 HTML이 아닌 태그에 포함된 코드를 실수로 수정하지 않도록 하기 위해서 입니다. Dreamweaver의 기본적인 재작성 처리 방법을 변경하면 HTML 파일을 열 때 HTML을 다시 작성할 수 있습니다. 또한 Dreamweaver가 다시 작성하지 않는 유형의 목록에 다른 파일 유형을 추가할 수 있습니다.

Dreamweaver는 [속성 관리자]에 특정 특수 문자가 입력되면 이 문자를 수치 값으로 교체하여 인코딩합니다. 플랫폼과 브라우저에 따라 올바로 표시되도록 가장 근사한 문자로 인코딩하기 때문에 Dreamweaver가 이 인코딩 작업을 수행하도록 하는 것이 가장 좋습니다. 그러나 이러한 인코딩은 타사 태그와 충돌할 수 있기 때문에 타사 태그를 포함한 파일을 처리할 때에는 Dreamweaver의 인코딩 방법을 바꾸어야 하는 경우도 있습니다.

Dreamweaver가 더 많은 종류의 파일에서 HTML을 다시 작성하도록 하려면:1 [편집] > [환경 설정]을 선택하고 [코드 다시 작성] 범주를 선택합니다.

2 다음 옵션 중 하나를 선택합니다.

• 잘못 중첩되거나 닫히지 않은 태그 수정

• 불필요한 닫기 태그 제거

3 다음 중 한 가지를 수행합니다.

• [코드 재작성 안함: 다음 확장명이 있는 파일] 옵션에 있는 확장명 목록에서 확장명을 하나 이상 제거

• [코드 재작성 안함: 다음 확장명이 있는 파일] 옵션 선택 해제. 이 옵션을 해제하면 Dreamweaver가 모든 유형의 파일에 HTML을 다시 작성할 수 있습니다.


10

Dreamweaver가 다시 작성하지 못하는 파일 유형을 추가하려면:1 [편집] > [환경 설정]을 선택하고 [코드 다시 작성] 범주를 선택합니다.

2 다음 옵션 중 하나를 선택합니다.

• 잘못 중첩되거나 닫히지 않은 태그 수정

• 불필요한 닫기 태그 제거

3 [코드 재작성 안함: 다음 확장명이 있는 파일] 옵션이 선택되어 있는지 확인하고 텍스트 필드의 목록에 새 파일 확장명을 추가합니다.

새 파일 유형이 [파일] > [열기] 대화 상자의 파일 유형 팝업 메뉴에 나타나지 않으면 Configuration/Extensions.txt 파일에 해당 확장명을 추가해야 합니다. 자세한 내용은 5페이지의 “기본 파일 유형 바꾸기”를 참조하십시오.

Dreamweaver 인코딩 옵션을 해제하려면:1 [편집] > [환경 설정]을 선택하고 [코드 다시 작성] 범주를 선택합니다.

2 [특수 문자] 옵션 중 하나 또는 두 옵션의 선택을 해제합니다.

기타 [코드 다시 작성] 환경 설정에 대한 자세한 내용은 Dreamweaver사용 설명서를 참조하십시오.

다중 사용자 환경에서 Dreamweaver 사용자 정의Microsoft® Windows® 2000, Windows XP 또는 Mac OS® X와 같은 다중 사용자 운영 체제에서도 Dreamweaver를 사용자 정의할 수 있습니다. Dreamweaver는 각 사용자의 사용자 정의 구성이 다른 사용자의 구성의 영향을 받지 않도록 보호합니다. 이 목적을 달성하기 위하여 Dreamweaver는 Dreamweaver가 인식할 수 있는 다중 사용자 운영 체제에서 최초로 실행될 때 다양한 구성 파일을 사용자의 Configuration 폴더에 복사합니다. 대화 상자와 패널을 이용하여 Dreamweaver를 사용자 정의할 때 Dreamweaver 구성 파일이 수정되는 대신, 사용자의 구성 파일이 수정됩니다. 다중 사용자 환경에서 구성 파일을 편집하여 Dreamweaver를 사용자 정의하려면 Dreamweaver Configuration 폴더의 파일이 아니라 해당 사용자 구성 파일을 편집해야 합니다. 전체 사용자에게 적용되도록 변경하려면 Dreamweaver 구성 파일을 편집하면 됩니다. 그러나 동일한 사용자 구성 파일을 가진 사용자에게는 변경된 사항이 적용되지 않습니다. 일반적으로, 전체 사용자에게 적용되도록 변경하려면 Extension을 만들어 Extension Manager를 통하여 설치하도록 하는 것이 가장 좋은 방법입니다.

참고: 이전 운영 체제(Windows 98, Windows ME 및 Mac OS 9.x)에서는 운영 체제가 다중 사용자를 지원하도록 구성되어 있어도 모든 사용자가 한 세트의 Dreamweaver 구성 파일을 공유합니다.

사용자의 Configuration 폴더 위치는 사용자의 플랫폼에 따라 다릅니다.

Windows 2000과 Windows XP 플랫폼의 경우 다음 위치에 있습니다.

하드 디스크:\Documents and Settings\사용자 이름\Application Data\Adobe\Dreamweaver 9\Configuration

참고: Windows XP에서는 이 폴더가 숨겨진 폴더 내에 있을 수도 있습니다.

Mac OS X 플랫폼의 경우 다음 위치에 있습니다.

하드 디스크:Users/사용자 이름/Library/Application Support/Adobe/Dreamweaver 9/Configuration

참고: 다중 사용자 운영 체제의 모든 사용자가 사용할 수 있는 Extension을 설치하려면 Administrator(Windows) 또는 root(Mac OS X)로 로그인해야 합니다.

Dreamweaver는 처음 실행될 때 일부 구성 파일만 사용자 Configuration 폴더에 복사합니다. 복사할 파일은 Configuration 폴더의 version.xml 파일에 지정되어 있습니다. Dreamweaver 내에서 Dreamweaver를 사용자 정의할 때(예를 들어, [코드 단편] 패널에서 미리 디자인된 코드 단편을 수정할 때), Dreamweaver는 관련 파일을 사용자 Configuration 폴더로 복사합니다. 사용자 Configuration 폴더의 파일 버전은 항상 Dreamweaver Configuration 폴더의 버전보다 높습니다. Dreamweaver가 사용자 Configuration 폴더로 복사하지 않은 구성 파일을 사용자 정의하려면, 먼저 해당 파일을 Dreamweaver Configuration 폴더에서 사용자 Configuration 폴더 내의 해당 위치로 복사합니다. 그런 다음 사용자 Configuration 폴더의 사본을 편집합니다.

11

다중 사용자 환경에서 구성 파일 삭제다중 사용자 운영 체제에서 작업할 때 [코드 단편] 패널에서 미리 디자인된 코드 단편을 삭제하는 것과 같이 Dreamweaver에서 구성 파일 삭제와 관련된 작업을 수행하는 경우, Dreamweaver는 사용자 Configuration 폴더에 mm_deleted_files.xml이라는 파일을 만듭니다. 그런 다음 mm_deleted_files.xml에 나열된 파일에 대해서는 해당 파일이 존재하지 않는 것처럼 동작합니다.

구성 파일을 비활성화하려면:1 Dreamweaver를 종료합니다.

2 텍스트 편집기를 사용하여 사용자 Configuration 폴더에 있는 mm_deleted_files.xml 파일을 편집합니다. 해당 파일에 item 태그를 추가하고 비활성화할 구성 파일의 경로(Dreamweaver Configuration 폴더에 대한 상대 경로)를 지정합니다.

참고: Dreamweaver 내에서 mm_deleted_files.xml을 편집하지 마십시오.

3 mm_deleted_files.xml을 저장하고 닫습니다.


mm_deleted_files.xml 태그 구문mm_deleted_files.xml 파일에는 Dreamweaver가 무시할 구성 파일을 지정하는 구조적 항목 목록이 들어 있습니다. 이 항목들은 XML 태그로 지정되며 텍스트 편집기로 편집할 수 있습니다.

다음 단원은 mm_deleted_files.xml 태그 구문에 대해 설명합니다. 선택적 속성은 속성 목록에서 중괄호({})로 표시됩니다. 중괄호로 표시되지 않은 모든 속성은 필수 속성입니다.

<deleteditems>

설명Dreamweaver가 삭제된 것으로 간주해야 하는 항목 목록을 보유한 컨테이너 태그

속성없음

내용이 태그에는 item 태그가 하나 이상 포함되어야 합니다.

컨테이너없음

예제<deleteditems>



</deleteditems>

<item>

설명Dreamweaver가 무시해야 할 구성 파일을 지정합니다.

속성name

name attribute는 Configuration 폴더에 대한 상대적 구성 파일 경로를 지정합니다. Windows에서는 백슬래시(\)를 사용하여 경로를 구분하지만 Macintosh® 에서는 콜론(:)을 사용합니다.


12

컨테이너이 태그는 deleteditems 태그에 포함되어야 합니다.

예제<item name="snippets\headers\5columnwith4links.csn" />

다중 사용자 환경에서 Dreamweaver 재설치 및 설치 제거Dreamweaver를 설치한 후 나중에 다시 설치하거나 최신 버전으로 업그레이드하는 경우, Dreamweaver는 자동으로 기존 사용자 구성 파일의 백업 사본을 만들어 계속 사용자 정의 구성 파일을 사용할 수 있도록 합니다. 다중 사용자 시스템에서 Dreamweaver를 제거하면 각 사용자 Configuration 폴더도 삭제됩니다. 관리자 권한을 가진 사용자만 다중 사용자 시스템에서 Dreamweaver를 제거할 수 있습니다.

FTP 매핑 변경FTPExtensionMap.txt 파일(Windows)과 FTPExtensionMapMac.txt 파일(Macintosh)은 파일 이름 확장명을 FTP 전송 모드(ASCII 또는 BINARY)에 매핑합니다.

이 두 파일의 각 행에는 GIF과 같은 파일 이름 확장명과 ASCII 또는 BINARY라는 단어 중 하나가 지정되어, 해당 확장명을 가진 파일을 전송할 때 두 FTP 전송 모드 중에서 어떤 모드를 사용해야 하는지 지정합니다. Macintosh의 경우 각 행에는 작성자 코드(예: DmWr)와 파일 유형(예: TEXT)도 포함되어 있습니다. Macintosh에서 지정된 파일 이름 확장명을 가진 파일을 다운로드하면 지정된 작성자와 파일 유형이 해당 파일에 할당됩니다.

전송할 파일에 파일 이름 확장명이 없으면 BINARY 전송 모드가 사용됩니다.

참고: Dreamweaver에서는 파일을 Macbinary 모드로 전송할 수 없습니다. 파일을 Macbinary 모드로 전송하려면 다른 FTP 클라이언트를 사용해야 합니다.

다음 예제는 Macintosh 파일에서 .html 확장명을 가진 파일은 ASCII 모드로 전송되어야 한다는 것을 나타내는 행을 보여 줍니다.HTML DmWr TEXT ASCII

FTPExtensionMap.txt 파일과 FTPExtensionMapMac.txt 파일(Macintosh)에서 특정 행의 모든 요소는 탭으로 분리됩니다. 확장명과 전송 모드는 대문자로 나타냅니다.

기본 설정을 바꾸려면 텍스트 편집기에서 이 파일을 편집합니다.

새 파일 이름 확장명에 대한 정보를 추가하려면:1 텍스트 편집기에서 확장명 맵 파일을 편집합니다.

2 빈 행에서 파일 이름 확장명(대문자)을 입력하고 Tab 키를 누릅니다.

3 Macintosh에서는 작성자 코드를 추가하고 Tab 키를 누른 다음 파일 유형을 입력하고 다시 한 번 Tab 키를 누릅니다.

4 ASCII 또는 BINARY를 입력하여 FTP 전송 모드를 설정합니다.



13

Dreamweaver의 확장 가능한 문서 유형XML은 복잡한 문서 및 데이터 구조를 정의하는 데 유용합니다. Dreamweaver는 몇 가지 XML 스키마를 사용하여 서버 비헤이비어, 태그 및 태그 라이브러리, 구성 요소, 문서 유형, 참조 정보 등에 대한 정보를 구성합니다.

Dreamweaver에서 Extension을 만들어 사용할 때는 XML 파일을 만들거나 기존 XML 파일을 수정하여 Extension에서 사용하는 데이터를 관리해야 하는 경우가 많이 있습니다. 대부분의 경우, Configuration 폴더 내의 적절한 하위 폴더에서 기존 파일을 복사하여 템플릿으로 사용할 수 있습니다.

문서 유형 정의 파일확장 가능한 문서 유형의 핵심 구성 요소는 문서 유형 정의 파일입니다. 정의 파일은 여러 개가 있을 수 있으며 모든 정의 파일은 Configuration/DocumentTypes 폴더에 저장됩니다. 각 정의 파일에는 적어도 하나의 문서 유형에 대한 정보가 들어 있습니다. 각 문서 유형에 대해 서버 모델, 색상 코딩 스타일, 설명 등과 같은 필수 정보가 기술됩니다.

참고: Dreamweaver 문서 유형 정의 파일과 XML DTD(문서 유형 정의)를 혼동하지 마십시오. Dreamweaver의 문서 유형 정의 파일에는 여러 개의 documenttype 요소가 포함되어 있으며 각 요소는 문서 유형과 연관된 태그 및 속성의 미리 정의된 모음을 정의합니다. Dreamweaver는 시작할 때 문서 유형 정의 파일을 파싱하고, 정의된 모든 문서 유형에 대한 정보가 포함된 데이터베이스를 메모리에 만듭니다.

Dreamweaver는 초기 문서 유형 정의 파일을 제공합니다. MMDocumentTypes.xml이라는 이름의 이 파일에는 Adobe에서 제공하는 문서 유형 정의가 들어 있습니다.

문서 유형 서버 모델 내부 유형 파일 확장명 이전 서버 모델

ASP.NET C# ASP.NET-Csharp Dynamic aspx, ascx

ASP.NET VB ASP.NET-VB Dynamic aspx, ascx

ASP JavaScript ASP-JS Dynamic asp

ASP VBScript ASP-VB Dynamic asp

ColdFusion ColdFusion Dynamic cfm, cfml UltraDev 4 ColdFusion

ColdFusion 구성 요소 Dynamic cfc

JSP JSP Dynamic jsp

PHP PHP Dynamic php, php3

라이브러리 항목 DWExtension lbi

ASP.NET C# 템플릿 DWTemplate axcs.dwt

ASP.NET VB 템플릿 DWTemplate axvb.dwt

ASP JavaScript 템플릿 DWTemplate aspjs.dwt

ASP VBScript 템플릿 DWTemplate aspvb.dwt

ColdFusion 템플릿 DWTemplate cfm.dwt

HTML 템플릿 DWTemplate dwt

JSP 템플릿 DWTemplate jsp.dwt

PHP 템플릿 DWTemplate php.dwt

HTML HTML htm, html

ActionScript Text as

CSharp Text cs

CSS Text css

Java Text java

JavaScript Text js


14

새 문서 유형을 만들어야 하는 경우, Adobe에서 제공하는 문서 정의 파일(MMDocumentTypes.xml)에 항목을 추가하거나 Configuration/DocumentTypes 폴더에 사용자의 정의 파일을 추가할 수 있습니다.

참고: NewDocuments 하위 폴더는 Configuration/DocumentTypes 폴더에 있습니다. 이 하위 폴더에는 각 문서 유형에 대한 기본 페이지(템플릿)가 포함되어 있습니다.

문서 유형 정의 파일의 구조다음 예제는 일반적인 문서 유형 정의 파일의 구조를 보여 줍니다.<?xml version="1.0" encoding="utf-8"?>

<documenttypes xmlns:MMString="http://www.Macromedia.com/schemes/data/string/">

<documenttype

id="dt-ASP-JS"

servermodel="ASP-JS"

internaltype="Dynamic"

winfileextension="asp,htm, html"

macfileextension=asp, html"

previewfile="default_aspjs_preview.htm"

file="default_aspjs.htm"

priorversionservermodel="UD4-ASP-JS" >

<title>

<loadString id="mmdocumenttypes_0title" />

</title>

<description>

<loadString id="mmdocumenttypes_0descr" />

</description>

</documenttype>

...

</documenttypes>

참고: 문서 유형에 대한 색상 코딩은 Configuration/CodeColoring 폴더에 있는 XML 파일에 지정되어 있습니다.

앞의 예제에서 loadString 요소는 Dreamweaver가 ASP-JS 유형 문서의 제목 및 설명에 사용해야 하는 지역화 문자열을 지정합니다. 지역화 문자열에 대한 자세한 내용은 18페이지의 “지역화 문자열”을 참조하십시오.

VB Text vb

VBScript Text vbs

Text Text txt

EDML XML edml

TLD XML tld

VTML XML vtm, vtml

WML XML wml

XML XML xml

문서 유형 서버 모델 내부 유형 파일 확장명 이전 서버 모델

http://www.Macromedia.com/schemes/data/string/


15

다음 표에서는 문서 유형 정의 파일 내에서 사용할 수 있는 태그 및 속성에 대해 설명합니다.

요소 유형 필수 설명

태그 속성

documenttype

(root)

예 부모 노드

id 예 모든 문서 유형 정의 파일에서 고유한 식별자입니다.

servermodel 아니오 연관된 서버 모델을 지정합니다. 이 경우, 대소문자가 구분됩니다. 기본적으로 다음 값을 사용할 수 있습니다.

ASP.NET C#ASP.NET VBASP VBScriptASP JavaScriptColdFusionJSPPHP MySQL

getServerModelDisplayName() 함수를 호출하면 이 이름이 반환됩니다. 서버 모델 구현 파일은 Configuration/ServerModels 폴더에 있습니다.

Extension 개발자는 이 목록을 확장하여 새로운 서버 모델을 만들 수 있습니다.

internaltype 예 Dreamweaver의 파일 처리 방법에 대한 광범위한 분류입니다. internaltype은 [디자인] 뷰가 해당 문서에 대해 활성화되고 Dreamweaver 템플릿 또는 Extension과 같은 특수한 경우를 처리하는지 여부를 나타냅니다.

유효한 값은 다음과 같습니다.DynamicDWExtension(특별한 표시 영역이 있음)DWTemplate(특별한 표시 영역이 있음)HTMLHTML4 Text([코드] 뷰만 해당)XHTML1 XML([코드] 뷰만 해당)

모든 서버 모델 관련 문서 유형은 Dynamic에 매핑해야 하며 HTML은 HTML에 매핑해야 합니다. 스크립트 파일(예: CSS, JS, VB 및 CS)은 Text에 매핑해야 합니다.

internaltype이 DWTemplate인 경우에는 dynamicid도 지정해야 합니다. 이 경우, dynamicid를 생략하면 [새 문서] 대화 상자가 작성하는 새로운 빈 템플릿은 [서버 비헤이비어] 또는 [바인딩] 패널이 인식하는 문서 유형이 되지 않습니다. 이 템플릿의 인스턴스는 단지 HTML 템플릿에 불과합니다.

dynamicid 아니오 동적 문서 유형의 고유 식별자에 대한 참조입니다. 이 속성은 internaltype이 DWTemplate인 경우에만 의미가 있습니다. 이 속성을 사용하여 동적 템플릿을 동적 문서 유형과 연관시킬 수 있습니다.

winfileextension 예 Windows에서 문서 유형과 연관된 파일 확장명입니다. 여러 개의 파일 확장명은 콤마로 구분된 목록을 사용하여 지정하십시오. 이 목록의 첫 번째 확장명이 documenttype 문서가 저장될 때 Dreamweaver에 사용되는 확장명입니다.

두 개의 비서버 모델 연관 문서 유형에 동일한 파일 확장명이 있으면 Dreamweaver에서는 첫 번째 문서 유형을 해당 확장명의 문서 유형으로 인식합니다.

macfileextension 예 Macintosh에서 문서 유형과 연관된 파일 확장명입니다. 여러 개의 파일 확장명은 콤마로 구분된 목록을 사용하여 지정하십시오. 이 목록의 첫 번째 확장명이 documenttype 문서가 저장될 때 Dreamweaver에 사용되는 확장명입니다.

두 개의 비서버 모델 연관 문서 유형에 동일한 파일 확장명이 있으면 Dreamweaver에서는 첫 번째 문서 유형을 해당 확장명의 문서 유형으로 인식합니다.


16

참고: 사용자가 새 문서를 저장하면 Dreamweaver는 문서 유형(winfileextension 및 macfileextension)과 연관된 현재 플랫폼에 대한 확장명 목록을 검사합니다. 그런 다음 이 목록의 첫 번째 문자열을 기본 파일 확장명으로 사용합니다. 이 기본 파일 확장명을 변경하려면 콤마로 구분된 목록에서 새 기본값이 먼저 나열되도록 확장명 순서를 변경해야 합니다.

Dreamweaver는 시작할 때 모든 문서 유형 정의 파일을 읽고 유효한 문서 유형 목록을 만듭니다. Dreamweaver에서는 존재하지 않는 서버 모델이 있는 정의 파일 내의 모든 항목을 비서버 모델 문서 유형으로 처리합니다. 잘못된 내용이나 고유하지 않은 ID가 있는 항목은 무시합니다.

Dreamweaver는 Configuration/DocumentTypes 폴더를 검색하는 동안 문서 유형 정의 파일이 발견되지 않거나 정의 파일 중 손상된 파일이 발견되면 오류 메시지를 표시하고 종료합니다.

동적 템플릿동적 문서 유형을 기반으로 하는 템플릿을 만들 수 있으며, 이러한 템플릿을 동적 템플릿이라고 합니다. 동적 템플릿을 정의할 때는 다음 두 요소가 반드시 필요합니다.

• 새 문서 유형에 대한 internaltype 속성의 값은 DWTemplate이어야 합니다.

• dynamicid 속성은 반드시 설정해야 하며 그 값은 기존의 동적 문서 유형 식별자에 대한 참조여야 합니다.

다음 예제는 동적 문서 유형을 정의합니다.<documenttype

id="PHP_MySQL"

servermodel="PHP MySQL"

internaltype="Dynamic"

winfileextension="php,php3"

macfileextension="php,php3"

file="Default.php">

<title>PHP</title>

<description><![CDATA[PHP document]]></description>

</documenttype>

previewfile 아니오 [새 문서] 대화 상자의 [미리 보기] 영역에 표시되는 파일입니다.

file 예 새 documenttype 문서에 대한 템플릿 내용이 포함된, DocumentTypes/NewDocuments 폴더에 있는 파일입니다.

priorversionservermodel 아니오 이 문서의 서버 모델에 Dreamweaver UltraDev 4에 해당하는 항목이 있으면 이전 버전의 서버 모델 이름을 지정합니다.

UltraDev 4 ColdFusion은 유효한 이전 서버 모델입니다.

title

(하위 태그)

예 [새 문서] 대화 상자의 빈 문서 아래에 범주 항목으로 나타나는 문자열입니다. 정의 파일에 이 문자열을 직접 포함시키거나 지역화를 위해 간접적으로 가리킬 수 있습니다. 이 문자열의 지역화에 대한 자세한 내용은 18페이지의 “지역화 문자열”을 참조하십시오.

서식을 지정할 수 없으므로 HTML 태그는 지정할 수 없습니다.

description

(하위 태그)

아니오 문서 유형을 설명하는 문자열입니다. 정의 파일에 이 문자열을 직접 포함시키거나 지역화를 위해 간접적으로 가리킬 수 있습니다. 이 문자열의 지역화에 대한 자세한 내용은 18페이지의 “지역화 문자열”을 참조하십시오.

서식을 지정할 수 있으므로 HTML 태그를 지정할 수 있습니다.

요소 유형 필수 설명

태그 속성


17

이제 이 동적 문서 유형 PHP_MySQL을 기반으로 하는 다음의 동적 템플릿을 정의할 수 있습니다.<documenttype

id="DWTemplate_PHP"

internaltype="DWTemplate"

dynamicid="PHP_MySQL"

winfileextension="php.dwt"

macfileextension="php.dwt"

file="Default.php.dwt">

<title>PHP Template</title>

<description><![CDATA[Dreamweaver PHP Template document]]></description>

</documenttype>

Dreamweaver 사용자가 DWTemplate_PHP 유형의 빈 템플릿을 새로 만들면 해당 파일에 PHP 서버 비헤이비어를 만들 수 있게 됩니다. 또한 사용자가 새 템플릿의 인스턴스를 만들 때는 이 인스턴스에서 PHP 서버 비헤이비어를 만들 수 있습니다.

앞의 예제에서, 사용자가 템플릿을 저장하면 Dreamweaver는 자동으로 .php.dwt 확장명을 파일에 추가합니다. 사용자가 템플릿 인스턴스를 저장하면 Dreamweaver에서는 .php 확장명을 파일에 추가합니다.

문서 확장명과 파일 유형기본적으로 Dreamweaver는 인식하는 모든 파일 유형을 [파일] > [열기] 대화 상자에 표시합니다. 새 문서 유형을 만든 후 Extension 개발자는 해당 Extensions.txt 파일을 업데이트해야 합니다. 다중 사용자를 지원하는 Windows XP, Windows 2000 또는 Mac OS X 등의 시스템의 사용자는 각자의 Configuration 폴더에 별도의 Extensions.txt 파일을 가집니다. Dreamweaver는 이 Extensions.txt 파일을 찾고 파싱하기 때문에 이 파일을 업데이트해야 합니다.


Windows 2000과 Windows XP 플랫폼의 경우 다음 위치에 있습니다.

하드 디스크:\Documents and Settings\사용자 이름\Application Data\Adobe\Dreamweaver 9\Configuration


Mac OS X 플랫폼의 경우 다음 위치에 있습니다.

하드 디스크:Users/사용자 이름/Library/Application Support/Adobe/Dreamweaver 9/Configuration

사용자의 Configuration 폴더에서 Extensions.txt를 찾을 수 없는 경우, Dreamweaver는 Dreamweaver Configuration 폴더에서 이 파일을 찾습니다.

참고: 다중 사용자 플랫폼에서 Dreamweaver는 Dreamweaver Configuration 폴더가 아니라 사용자의 Configuration 폴더에 있는 Extensions.txt의 사본을 해석하므로 사용자의 Configuration 폴더 대신, Dreamweaver Configuration 폴더에 있는 Extensions.txt의 사본을 편집하면 Dreamweaver가 변경 사항을 인식하지 못하게 됩니다.

새 문서 확장명을 작성하려면 기존 문서 유형에 새 확장명을 추가하거나 새 문서 유형을 만듭니다.

기존 문서 유형에 새 확장명을 추가하려면:1 MMDocumentTypes.xml을 편집합니다.

2 기존 문서 유형의 winfileextension 및 macfileextension 속성에 새 확장명을 추가합니다.


18

새 문서 유형을 추가하려면:1 Configuration 폴더에 Extensions.txt 파일의 백업 사본을 만듭니다.


3 각 새로운 파일 유형에 대한 행을 추가합니다. 새 파일 유형이 가질 수 있는 파일 이름 확장명을 대문자로 입력하고 콤마로 구분한 다음 콜론을 추가한 후 [파일] > [열기] 대화 상자에 나타나는 파일 유형에 대한 팝업 메뉴에 표시될 설명을 간단히 입력합니다.

예를 들어, JPEG 파일에 대해 JPG,JPEG,JFIF:JPEG Image Files라고 입력합니다.

4 이 Extensions.txt 파일을 저장합니다.



Dreamweaver의 기본 [파일] > [열기] 파일 유형을 변경하려면:1 Configuration 폴더에 Extensions.txt 파일의 백업 사본을 만듭니다.


3 새 기본값에 해당하는 행이 파일의 첫 번째 행에 오도록 해당 행을 잘라내어 파일의 처음에 붙여넣습니다.

4 이 Extensions.txt 파일을 저장합니다.



지역화 문자열문서 유형 정의 파일 내에서 <title> 및 <description> 하위 태그는 문서 유형의 표시 제목 및 설명을 지정합니다. 이 두 하위 태그에서 하위 태그에 대한 지역화 문자열을 지정하기 위한 자리 표시자로 MMString:loadstring 지시문을 사용할 수 있습니다. 이 과정은 사용자가 문자열 식별자를 자리 표시자로 사용하여 페이지에서 사용할 특정 문자열을 지정하는 서버측 스크립팅과 유사합니다. 자리 표시자에는 특정 태그를 사용하거나 값을 바꿀 수 있는 태그 속성을 지정할 수 있습니다.

지역화 문자열을 제공하려면:1 문서 유형 정의 파일의 맨 처음에 다음 명령문을 입력합니다.

<?xml version="1.0" encoding="utf-8"?>

2 <documenttypes> 태그에서 MMString 네임스페이스를 선언합니다.<documenttypes

xmlns:MMString="http://www.Macromedia.com/schemes/data/string/">

3 문서 유형 정의 파일에서 지역화 문자열을 지정할 부분에 MMString:loadstring 지시문을 사용하여 지역화 문자열에 대한 자리 표시자를 정의합니다. 이 자리 표시자는 다음 두 가지 방법 중 하나를 사용하여 지정할 수 있습니다.

<description>

<loadstring>myJSPDocType/Description</loadstring>

</description>

또는

<description>

<loadstring id="myJSPDocType/Description" />

</description>

이 두 예제에서 myJSPDocType/Description은 지역화 문자열의 자리 표시자 역할을 하는 고유한 문자열 식별자입니다. 지역화 문자열은 다음 단계에서 정의합니다.



19

4 Configuration/Strings 폴더에서 지역화된 문자열을 정의하는 새 XML을 만들거나 기존 파일을 편집합니다. 예를 들어, 다음 코드는 Configuration/Strings/strings.xml 파일에 있을 때 myJSPDocType/Description 문자열을 정의합니다.

<strings>

...

<string id="myJSPDocType/Description"

value=

"<![CDATA[JavaServer Page with <em>special</em> features]]>"

/>

...

</strings>

참고: 앞의 예제에서 myJSPDocType/Description과 같은 문자열 식별자는 응용 프로그램 내에서 고유해야 합니다. Dreamweaver 는 시작할 때 Configuration/Strings 폴더 내의 모든 XML 파일을 파싱하고 이러한 고유 문자열을 로드합니다.

문서 유형 정의 파일의 규칙Dreamweaver에서는 한 서버 모델과 연관된 여러 문서 유형이 파일 확장명을 공유할 수 있습니다. 예를 들어, ASP-JS와 ASP-VB가 .asp를 해당 파일 확장명으로 사용할 수 있습니다. 우선 순위를 갖는 서버 모델에 대한 자세한 내용은 276페이지의 “canRecognizeDocument()”를 참조하십시오.

Dreamweaver에서 한 서버 모델과 연관되지 않은 문서 유형은 파일 확장명을 공유할 수 없습니다.

한 유형은 서버 모델과 연관되어 있고 다른 유형은 그렇지 않은 경우 두 문서 유형에서 하나의 파일 확장명을 사용하면 서버 모델과 연관되지 않은 문서 유형이 우선 순위를 갖습니다. 예를 들어, 서버 모델과 연관되지 않은 SAM이라는 문서 유형이 있고 이 문서 유형의 파일 확장명이 .sam인 경우 ASP-JS 문서 유형에 이 파일 확장명을 추가한다고 가정합니다. Dreamweaver 사용자가 확장명이 .sam인 파일을 열면 Dreamweaver는 이 파일에 ASP-JS가 아니라 SAM 문서 유형을 지정합니다.

Dreamweaver에서 문서 열기사용자가 문서 파일을 열면 Dreamweaver는 일련의 단계를 수행하여 파일 확장명을 기준으로 문서 유형을 식별합니다.

고유한 문서 유형을 찾으면 Dreamweaver에서는 해당 유형을 사용하여 사용자가 여는 문서의 연관된 서버 모델(있는 경우)을 로드합니다. 사용자가 Dreamweaver UltraDev 4 서버 비헤이비어를 사용하기로 선택하면 Dreamweaver는 해당하는 UltraDev 4 서버 모델을 로드합니다.

파일 확장명이 둘 이상의 문서 유형에 매핑되면 Dreamweaver에서는 다음 작업을 수행합니다.

• 문서 유형 목록에 정적 문서 유형이 있으면 해당 문서 유형이 우선 순위를 갖습니다.

• 모든 문서 유형이 동적이면 Dreamweaver는 문서 유형과 연관된 서버 모델의 알파벳순 목록을 만든 다음 각 서버 모델에서 canRecognizeDocument() 함수를 호출합니다. 자세한 내용은 276페이지의 “canRecognizeDocument()”를 참조하십시오. 그런 다음 반환값을 수집하여 가장 큰 양의 정수 값을 반환한 서버 모델을 확인합니다. 가장 큰 정수를 반환하는 서버 모델의 문서 유형은 Dreamweaver가 열려는 문서에 할당하는 문서 유형이 됩니다. 그러나 둘 이상의 서버 모델이 동일한 정수를 반환하는 경우 Dreamweaver에서는 해당 서버 모델의 알파벳순 목록을 검색한 후 목록의 첫 번째 문서 유형을 선택하여 사용합니다. 예를 들어, ASP-JS와 ASP-VB가 .asp 문서를 사용하고 이들 각각의 canRecognizeDocument() 함수가 같은 값을 반환하는 경우, Dreamweaver는 해당 문서를 ASP-JS에 할당합니다. 알파벳순으로는 ASP-JS가 먼저 표시되기 때문입니다.

Dreamweaver가 파일 확장명을 문서 유형에 매핑할 수 없는 경우에는 문서가 텍스트 파일로 열립니다.

작업 영역 레이아웃 사용자 정의Dreamweaver에서는 작업 영역 레이아웃을 사용자 정의할 수 있는데, 패널의 위치와 크기, 축소/확장된 상태, 응용 프로그램 윈도우의 위치와 크기, 문서 윈도우의 위치와 크기 등을 비롯한 기타 속성과 지정된 레이아웃으로 표시될 패널 등을 사용자 정의할 수 있습니다.

작업 영역 레이아웃은 Configuration/Workspace 레이아웃 폴더에 저장된 XML 파일에 지정되어 있습니다. 다음 단원에서는 XML 태그 구문에 대해 설명합니다. 선택적 속성은 속성 목록에서 중괄호({})로 표시됩니다. 중괄호로 표시되지 않은 모든 속성은 필수 속성입니다.

20

<panelset>

설명패널 세트에 대한 설명이 시작되는 부분을 나타내는 가장 바깥쪽에 있는 태그입니다.

속성없음

내용이 태그에는 application, document 또는 panelset 태그가 한 개 이상 포함될 수 있습니다.

컨테이너없음

예제<panelset>



</panelset>

<application>

설명응용 프로그램 윈도우의 초기 위치와 크기를 지정합니다.

속성rect, maximize

• rect는 응용 프로그램 윈도우의 위치와 크기를 지정합니다. 이 문자열은 “왼쪽 위쪽 오른쪽 아래” 형식의 정수로 지정됩니다.

• maximize는 부울 값으로서, 시작할 때 응용 프로그램 윈도우가 최대화되면 true를 반환하고 그렇지 않으면 false를 반환합니다. 기본값은 true입니다.

내용없음

컨테이너이 태그는 panelset 태그에 포함되어야 합니다.

예제<panelset>

<application rect="0 0 1000 1200" maximize="false">

</application>

</panelset>

<document>

설명[문서] 윈도우의 초기 위치와 크기를 지정합니다.

속성rect, maximize

• rect는 [문서] 윈도우의 위치와 크기를 지정합니다. 이 문자열은 “왼쪽 위쪽 오른쪽 아래” 형식의 정수로 지정됩니다. maximize 값이 true일 경우 rect 값은 무시됩니다.

• maximize는 부울 값으로서, 시작할 때 [문서] 윈도우가 최대화되면 true를 반환하고 그렇지 않으면 false를 반환합니다. 기본값은 true입니다.

내용없음

21


예제<panelset>

<document rect="100 257 1043 1200" maximize="false">

</document>

</panelset>

<panelframe>

설명전체 패널 그룹에 대해 기술합니다.

속성x, y, {width, height}, dock, collapse

• x는 패널 그룹의 왼쪽 위치를 지정하며, 화면에 상대적인 정수나 값을 값으로 사용할 수 있습니다. 화면에 표시되지 않는 정수 값일 경우 패널 그룹은 화면에 표시할 수 있는 가장 가까운 화면 위치에 표시됩니다. 상대 값은 “왼쪽” 이나 “오른쪽” 이 될 수 있는데, 이 값은 패널 그룹의 모서리를 가상 화면의 모서리와 맞춘다는 것을 나타냅니다.

• y는 패널 그룹의 위쪽 위치를 지정하며, 화면에 상대적인 정수나 값을 값으로 사용할 수 있습니다. 화면에 표시되지 않는 정수 값일 경우 패널 그룹은 화면에 표시할 수 있는 가장 가까운 화면 위치에 표시됩니다. 상대 값은 “위쪽” 이나 “아래쪽” 이 될 수 있는데, 이 값은 패널 그룹의 모서리를 가상 화면의 모서리와 맞춘다는 것을 나타냅니다.

• width는 픽셀 단위의 패널 그룹 폭을 나타내며, 선택 속성입니다. width를 지정하지 않으면 내장된 패널 그룹 기본값이 사용됩니다.

• height는 픽셀 단위의 패널 그룹 높이를 나타내며, 선택 속성입니다. height를 지정하지 않으면 내장된 패널 그룹 기본값이 사용됩니다.

• dock는 패널 그룹이 결합될 응용 프로그램 프레임의 모서리를 지정하는 문자열 값입니다. Macintosh에서는 패널 그룹을 결합할 수 없기 때문에 이 속성이 무시됩니다.

• collapse는 부울 값으로서 true는 패널 그룹이 축소됨을, false는 패널 그룹이 확장됨을 나타냅니다. Macintosh에서는 부동 패널아 사용되기 때문에 이 속성이 무시됩니다.

내용이 태그에는 panelcontainer 태그가 한 개 이상 포함되어야 합니다.


예제<panelset>

<panelframe rect="196 453 661 987" visible="true" dock="floating">



</panelframe>

</panelset>

22

<panelcontainer>

설명전체 패널 그룹에 대해 기술합니다.

속성expanded, title,{ height,} activepanel, visible, maximize, maxRestorePanel, maxRestoreIndex,

maxRect, tabsinheader

• expanded는 부울 값으로서, 패널이 확장되면 true를 반환하고 그렇지 않으면 false를 반환합니다.

• title은 패널 제목을 지정하는 문자열입니다.

• height는 패널 높이를 픽셀 단위로 지정하는 정수로서, 선택 속성입니다. height를 지정하지 않으면 각 패널에 대해 내장된 기본값이 사용됩니다.

참고: 폭은 부모로부터 상속됩니다.

• activepanel은 프론트 패널의 ID를 나타내는 숫자입니다.

• visible은 부울 값으로서, 패널이 보이면 true를 반환하고 그렇지 않으면 false를 반환합니다.

• maximize는 부울 값으로서, 패널이 처음 나타날 때 최대화되면 true를 반환하고 그렇지 않으면 false를 반환합니다.

• maxRestorePanel은 복원할 패널의 ID를 나타내는 숫자입니다.

• maxRect는 최대화된 패널의 위치와 크기를 나타내는 문자열입니다. 이 문자열은 “왼쪽 위쪽 오른쪽 아래” 형식의 정수로 지정됩니다.

• tabsinheader는 부울 값으로서, 탭이 머리글 막대의 아래쪽이 아닌 머리글에 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

내용이 태그에는 panel 태그가 한 개 이상 포함되어야 합니다.

컨테이너이 태그는 panelframe 태그에 포함되어야 합니다.

예제<panelset>


<panelcontainer title="Color" height="250" visible="true" expanded="true"

activepanel="20">



</panelcontainer>

</panelframe>

</panelset>

<panel>

설명패널 컨테이너에 나타날 패널을 지정합니다.

속성id, visibleTab

• id는 패널 ID를 나타내는 숫자입니다. 다음 표는 값 목록입니다.

소프트웨어 ID 패널

Adobe® Flash® 1 속성

2 액션

3 정렬


23

• visibleTab은 부울 값으로서, 탭과 패널이 보이면 true를 반환하고 그렇지 않으면 false를 반환합니다.

내용없음

컨테이너이 태그는 panelcontainer 태그에 포함되어야 합니다.

예제<panelset>


<panelcontainer title="Color" height="250" visible="true" expanded="true"

activepanel="20">

<panel id="20"></panel>

</panelcontainer>

</panelframe>

</panelset>

코딩 툴바 사용자 정의[코딩] 툴바에는 처음에 15개의 버튼이 표시되는데, 이는 사용할 수 있는 버튼 중 일부입니다. 툴바에 표시되는 버튼을 변경하여 [코딩] 툴바를 사용자 정의하거나 Configuration/Toolbars/Toolbars.xml 파일을 편집하여 순서를 사용자 정의할 수 있습니다. 또한 Extension Manager를 통해 툴바에 고유한 버튼을 삽입할 수도 있습니다.

4 비헤이비어

5 구성 요소

6 구성 요소 관리자

7 색상 혼합기

8 색상 견본

9 작업 내역

10 정보

11 라이브러리

12 무비 탐색기

13 출력

14 속성

15 프로젝트

16 변형

17 장면

18 문자열

19 디버거

101-110 라이브러리

Dreamweaver 1 속성

Flex Builder 1 속성

소프트웨어 ID 패널

24

버튼 순서를 변경하려면:1 Configuration/Toolbars/toolbars.xml 파일을 엽니다.

2 다음 주석을 검색하여 [코드] 뷰 툴바 섹션을 찾습니다.

3 버튼이 툴바에 원하는 순서로 표시되도록 버튼 태그를 복사하여 붙여넣습니다.


버튼을 제거하려면:1 Configuration/Toolbars/toolbars.xml 파일을 엽니다.

2 다음 주석을 검색하여 [코딩] 툴바 섹션을 찾습니다.

3 제거할 버튼을 주석으로 처리합니다.

다음은 툴바에 표시되지 않도록 주석으로 처리된 버튼을 보여 주는 예입니다.


툴바에 표시되지 않는 버튼을 다시 나타나게 하려면 XML 파일에서 버튼 주위의 주석을 제거합니다.

키보드 단축키 매핑 변경Dreamweaver에는 Dreamweaver 기능에 대한 다양한 키보드 단축키가 있습니다. 기본 키보드 단축키는 menus.xml 파일에 나열되고 미국 키보드용으로 작성되어 있습니다. Dreamweaver에 제공된 단축키 수로 인해 다국어 키보드 매핑에는 영숫자가 아닌 특정 단축키(a-z 또는 0-9 이외의 문자)가 필요합니다. 이를 위하여 Dreamweaver에서는 다국어 키보드용으로 키보드 단축키 매핑을 정의하는 여러 개의 xml 파일이 함께 제공됩니다. 이 파일은 Configuration\Menus\Adaptive Sets 폴더에 있습니다. 컴퓨터에 연결된 다국어 키보드를 감지하면 Dreamweaver에서 자동으로 해당 키보드의 매핑 파일로 키보드 단축키를 재설정합니다. 키보드 레이아웃에 사용 가능한 적절한 파일이 없는 경우 Dreamweaver에서 해당 키보드 레이아웃에서 작동하지 않는 모든 단축키를 제거합니다.

키보드 단축키 매핑 파일의 이름은 각 키보드 레이아웃이 나타내는 언어에 대한 두 글자 코드를 사용하여 지정되었습니다. 예를 들어, 독일어 키보드 레이아웃용 파일은 de.xml입니다. 같은 언어이지만 국가별로 다른 키보드 레이아웃을 사용하는 경우에는, 언어 코드 두 글자 뒤에 대시(“-”)와 국가 코드 두 글자를 붙여 매핑 파일의 이름을 지정합니다. 예를 들어, fr-ca.xml은 캐나다 프랑스어 키보드 레이아웃의 파일 이름입니다. 두 글자로 된 언어 코드는 ISO 639 (http://en.wikipedia.org/wiki/ List_of_ISO_639_codes)에, 국가 코드는 ISO 3166 (http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)에 정의되어 있습니다.

http://en.wikipedia.org/wiki/

http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)%EC%97%90


25

컴퓨터에서 활성 키보드 언어 설정이 변경되면 Dreamweaver에서 키보드의 국가와 언어에 맞는 키보드 단축키 매핑 파일이 있는지 확인합니다. Dreamweaver는 먼저 국가에 맞는 매핑 파일이 있는지 확인한 다음, 파일이 없으면 해당 언어에 대한 파일을 확인합니다. 예를 들어, 컴퓨터에 캐나다 프랑스어 키보드를 연결한 경우 Dreamweaver는 먼저 캐나다 프랑스어 키보드 레이아웃용 fr-ca.xml 파일이 있는지 찾아보고, 파일이 없으면 fr.xml을 찾습니다. 다음 표에서는 Dreamweaver에서 제공되는 매핑 파일 목록을 보여줍니다.

Dreamweaver에서 제공되는 것 이외의 키보드 레이아웃을 사용하는 경우, 사용하는 특정 키보드용 매핑 파일을 만들어 Configuration\Menus\Adaptive Sets 폴더에 저장할 수 있습니다.

키보드 매핑 파일을 만들려면:1 키보드 매핑 파일 중 하나의 사본을 Configuration\Menus\Adaptive Sets 폴더 안에 만든 후, 사용하는 키보드 레이아웃에 해당하는 언어 이름(두 글자)을 사용하여 파일의 이름을 지정하고 확장명 .xml을 붙입니다.

기존 파일의 사본을 만들 때는 사용하는 키보드 레이아웃과 유사한 키보드 매핑 파일을 복사해야 합니다. 예를 들어, 스웨덴어 키보드용 키보드 매핑 파일을 만드는 경우, 스웨덴 키보드 레이아웃이 독일어 키보드 레이아웃과 비슷하므로 de.xml 파일을 복사할 수 있습니다.

2 새로 만든 키보드 매핑 파일을 Configuration\Menus\Adaptive Sets를 제외한 다른 폴더로 옮깁니다.

3 이 키보드 매핑 파일을 Dreamweaver에서 엽니다.

4 사용하는 키보드 레이아웃에 맞게 단축키 태그를 제거하거나 추가합니다.

미국용 키보드 단축키 세트와 사용하는 언어용 단축키 세트를 비교하면 수정할 키보드 단축키 태그를 결정하는 데 도움이 됩니다. 다음 절차에서는 서로 다른 키보드 레이아웃의 단축키 비교에 대해 설명합니다.

5 키보드 단축키를 변경한 후 파일을 저장하고 이 파일을 다시 Configuration\Menus\Adaptive Sets 폴더에 넣습니다.

파일 이름 Windows 플랫폼 Macintosh 플랫폼

ca.xml 카탈로니아어 카탈로니아어 스페인어

de.xml 독일어(독일, 오스트리아) 오스트리아, 독일어

de-ch.xml 독일어(스위스) 스위스 독일어

es.xml 스페인어(국제 정렬)스페인어(전통 정렬)

스페인어 - ISO

fr.xml 프랑스어(프랑스) 프랑스어

fr-ca.xml 프랑스어(캐나다) 캐나다 프랑스어 - CSA

fr-ch.xml 프랑스어(스위스) 스위스 프랑스어

it.xml 이탈리아어(이탈리아)이탈리아어(스위스)

이탈리아어 - Pro

it-mac.xml N/A 이탈리아어

ja.xml 일본어 일본어

nl-be.xml 네덜란드(벨기에) 프랑스어(벨기에)

벨기에어

zh-cn.xml 중국어(중국) 중국어(싱가포르)

중국어 간체


26

수정할 키보드 단축키 태그를 결정하려면:1 사용자 컴퓨터의 활성 키보드 언어 설정을 사용자 언어로 전환합니다(미리 설정되지 않은 경우). (컴퓨터 운영 체제를 통해 설정할 수 있습니다. 예를 들어 Windows의 경우 [제어판]에서 언어를 선택할 수 있습니다.)

2 [편집] > [키보드 단축키]를 선택하여 Dreamweaver [키보드 단축키 편집기]를 실행합니다.

3 편집기 대화 상자의 오른쪽 위에 있는 세 번째 이미지 버튼을 클릭합니다. 이 버튼 위로 포인터를 가져가면 “설정을 HTML로 내보내기” 라는 도구 설명이 나타납니다.

[HTML 파일로 저장] 대화 상자에 현재 키보드 레이아웃에 대한 키보드 단축키 요약 파일 이름을 입력하라는 메시지가 나타납니다.

4 이 요약 파일을 저장한 다음 [키보드 단축키 편집기] 대화 상자를 닫습니다.

5 사용자 컴퓨터의 운영 체제 전체에 대해 미국용 키보드로 키보드 레이아웃을 전환합니다.

6 [편집] > [키보드 단축키]를 선택하여 Dreamweaver [키보드 단축키 편집기]를 실행합니다.

7 편집기 대화 상자의 오른쪽 위에 있는 세 번째 이미지 버튼을 클릭하여 설정을 HTML 파일로 내보냅니다.

8 이 요약 파일을 저장한 다음 [키보드 단축키 편집기] 대화 상자를 닫습니다.

9 두 개의 키보드 단축키 요약 파일을 인쇄하여 비교하면 사용하는 언어 키보드 레이아웃에 맞게 Dreamweaver가 제거한 모든 단축키를 알 수 있습니다. 이러한 단축키에는 키보드 레이아웃에서만 사용 가능한 키로 새로운 단축키를 재할당해야 합니다.

두 파일을 비교하여 얻은 정보를 이용하여, 다시 지정할 각 단축키에 대해 단축키 태그를 추가하거나 제거하여 키보드 레이아웃 매핑 파일을 업데이트할 수 있습니다.

키보드 레이아웃 매핑 XML 파일다음 예에서는 프랑스어 키보드 매핑 파일(fr.xml)의 포맷을 보여줍니다.<shortcutset language="French">

<shortcut key="Cmd+[" newkey="Cmd+ù"/>

<shortcut key="Cmd+]" newkey="Cmd+)"/>

<shortcut platform="win" key="Cmd+Shift+>" newkey="Cmd+Opt+Shift+,"/>

<shortcut platform="mac" key="Cmd+Shift+>" newkey="Cmd+<"/>

<shortcut platform="win" key="Cmd+Shift+<" newkey="Cmd+Shift+,"/>

<shortcut key="Cmd+'" newkey="Cmd+Shift+=" />

...

</shortcutset>

키보드 레이아웃 XML 파일의 구문은 다음과 같습니다.<shortcutset language="language_name">

<shortcut key="key_combination" newkey="key_combination"/>

<shortcut platform="op_system" key="key_combination" newkey="key_combination"/>

</shortcutset>

여기서

• language_name은 키보드의 언어입니다(예: 프랑스어, 스페인어, 독일어).

• key_combination은 키보드 단축키입니다(예: Cmd+[, Cmd+Shift+>, Ctrl+$).

• key는 변경할 키보드 단축키를 지정합니다.

• newkey는 key를 대체할 키보드 단축키를 지정합니다.

• platform=op_system은 단축키가 적용되는 시스템입니다. win이나 mac 중 하나를 지정합니다. 플랫폼이 지정되지 않은 경우에는 단축키가 두 플랫폼 모두에 적용됩니다.

27

3장: 코드 뷰 사용자 정의

Adobe Dreamweaver CS3에서는 코드를 신속하게 입력하고 코드의 가독성과 정확성을 높이는 데 도움이 되는 두 가지 기능을 [코드] 뷰에서 제공합니다. 이 두 기능은 코드 힌트와 코드 색상 표시입니다. 또한, Dreamweaver에는 코드가 지정된 대상 브라우저에 맞는지 확인하고 기본 HTML 형식을 바꿀 수 있는 기능이 있습니다.

이 기능을 사용자 정의하려면 코드 힌트와 코드 색상 표시 기능이 구현되어 있는 XML 파일을 수정하면 됩니다. CodeHints.xml 또는 SpryCodeHints.xml 파일에 항목을 추가하여 [코드 힌트] 메뉴에 항목을 추가할 수 있습니다. 코드 색상 스타일 파일인 Colors.xml을 수정하여 색상 체계를 수정하거나 CodeColoring.xml과 같은 코드 색상 표시 구문 파일 중 하나를 수정하여 새 체계를 추가할 수 있습니다. 대상 브라우저에 대해 CSS(Cascading Style Sheet) 프로파일을 수정하여 Dreamweaver가 CSS 속성 및 값을 검사하는 방법을 바꿀 수도 있습니다. 또한, [환경 설정] 대화 상자에서 Dreamweaver의 기본 HTML 형식을 바꿀 수 있습니다. 다음 단원에서는 이러한 기능을 사용자 정의하는 방법에 대해 설명합니다.

코드 힌트코드 힌트는 [코드] 뷰에 특정 문자 패턴이 입력될 때 Dreamweaver에서 여는 메뉴입니다. 코드 힌트는 현재 입력하고 있는 문자열을 완성할 수 있는 문자열 목록을 제공하여 입력 시간을 단축할 수 있도록 합니다. 입력하려는 문자열이 메뉴에 나타나면 해당 메뉴로 스크롤하고 Enter 또는 Return 키를 눌러 입력을 마칩니다. 예를 들어, <를 입력하면 팝업 메뉴에 태그 이름 목록이 나타납니다. 나머지 태그 이름을 모두 입력하지 않고 메뉴에서 해당 태그를 선택하면 텍스트에 삽입할 수 있습니다. Dreamweaver에서는 Spry 프레임워크에 대한 코드 힌트도 제공합니다.

Dreamweaver는 Configuration/CodeHints 폴더의 CodeHints.xml 파일 및 기타 xml 파일에서 [코드 힌트] 메뉴를 로드합니다. 이 항목에 설명된 XML 스키마 형식을 사용하여 XML 파일에서 [코드 힌트] 메뉴를 정의하고 이를 Configuration/ CodeHints 폴더에 저장하여 Dreamweaver에 추가할 수 있습니다.

Dreamweaver에 코드 힌트 파일의 내용이 로드된 후에는 JavaScript를 통해 새로운 [코드 힌트] 메뉴를 동적으로 추가할 수도 있습니다. 예를 들어, JavaScript 코드는 [바인딩] 패널의 세션 변수 목록을 채웁니다. 같은 코드로 [코드 힌트] 메뉴를 추가하여 사용자가 [코드] 뷰에서 "Session."을 입력하면 세션 변수의 메뉴가 표시되게 할 수 있습니다. JavaScript를 사용하여 [코드 힌트] 메뉴를 추가하거나 수정하는 방법에 대한 자세한 내용은 Dreamweaver API 참조 설명서에서 “Code 함수”

를 참조하십시오.

일부 [코드 힌트] 메뉴는 Dreamweaver에서 XML 파일이나 JavaScript API를 통해 표현할 수 없습니다. CodeHints.xml 파일, SpryCodeHints.xml 파일 및 JavaScript API 모두 코드 힌트 엔진의 유용한 하위 집합을 표시하지만 일부 Dreamweaver 기능에 액세스할 수 없습니다. 예를 들어, JavaScript에는 색상 선택기를 열기 위한 후크가 없기 때문에 Dreamweaver에서 JavaScript를 사용하여 [속성값] 메뉴를 표현할 수 없습니다. 이 경우 텍스트를 입력할 수 있는 텍스트 항목에 대한 메뉴만 열립니다.

참고: 텍스트를 삽입하면 삽입 포인터는 삽입된 문자열 뒤에 옵니다.

CodeHints.xml 파일CodeHints.xml 파일에는 다음 항목이 포함됩니다.

• 모든 메뉴 그룹의 목록

[환경 설정] 대화 상자에서 [코드 힌트] 범주를 선택하면 Dreamweaver는 메뉴 그룹의 목록을 표시합니다. [편집] > [환경 설정]을 선택하여 [환경 설정] 대화 상자를 열 수 있습니다. Dreamweaver MX에서 제공되는 메뉴 그룹 또는 코드 힌트 메뉴 유형에는 태그 이름, 속성 이름, 속성값, 함수 인수, 객체 메서드 및 변수, HTML 엔터티 등이 있습니다.

• 각 메뉴 그룹에 대한 설명

목록에서 메뉴 그룹을 선택하면 [코드 힌트] 범주에 대한 설명이 [환경 설정] 대화 상자에 나타납니다. 선택한 항목에 대한 설명은 메뉴 그룹 목록 아래에 나타납니다.


28

• 코드 힌트 메뉴메뉴는 [코드 힌트] 메뉴가 표시되도록 하는 패턴과 명령 목록으로 구성됩니다. 예를 들어, & 같은 패턴은 &, >, < 등의 메뉴를 표시할 수 있습니다.

다음 예제는 CodeHints.xml 파일의 형식을 보여 줍니다(굵게 표시된 태그는 27페이지의 “CodeHints.xml 파일”에서 설명).<codehints>

<menugroup name="HTML Entities" enabled="true" id="CodeHints_HTML_Entities"><description>

<![CDATA[ When you type a '&', a drop-down menu shows

a list of HTML entities. The list of HTML entities

is stored in Configuration/CodeHints.xml. ]]>

</description>

<menu pattern="&">

<menuitem value="&" texticon="&"/>

<menuitem value="<" icon="lessThan.gif"/>

</menu>

</menugroup>

<menugroup name="Tag Names" enabled="true" id="CodeHints_Tag_Names"><description>

<![CDATA[ When you type '<', a drop-down menu shows

all possible tag names.0You can edit the list of tag

names using the

<a href="javascript:dw.popupTagLibraryEditor()"> Tag Library

Editor </a>]]>

</description>

</menugroup>

<menugroup name="Function Arguments" enabled="true"

id="CodeHints_Function_Arguments"><description>

...

</description>

<function pattern="ArraySort(array, sort_type, sort_order)"doctypes="CFML"/>

<function pattern="Response.addCookie(Cookie cookie)"

doctypes="JSP"/>

</menugroup>

</codehints>

JavaScript 코드 힌트Dreamweaver는 Spry 프레임워크에 대한 코드 힌트를 지원합니다. Spry 코드 힌트 파일(SpryCodeHints.xml)의 기본 형식은 CodeHints.xml과 동일하고 method 등의 새로운 특정 키워드를 사용하며 클래스 목록 멤버를 클래스와 연결하는 새로운 classpattern 속성(예: Spry.Data.XMLDataSet)이 있습니다. 각 클래스에 대한 클래스 멤버 목록은 메뉴 내에 중첩되어 있습니다(메서드, 속성, 이벤트).

<method> 태그 및 해당 속성은 function 태그 및 해당 속성과 유사하지만 부모 menu 태그에는 연결에 필요한 classpattern 속성이 있어야 합니다. 또한 속성에 대해서는 property 태그가, 이벤트에 대해서는 event 태그가 있으며 해당 아이콘이 [코드 힌트] 팝업 메뉴에 표시됩니다. 매개 변수 힌트를 지원하는 parammenu 및 parammenuitem 태그도 있습니다.


29

다음 예제는 Spry CodeHints.xml 파일의 형식을 보여 줍니다. 굵게 표시된 태그는 27페이지의 “CodeHints.xml 파일”에 설명되어 있습니다.<function pattern="XMLDataSet(xmlsource, xpath, {options})"

caseSensitive="true" /> <menu classpattern="Spry.Data.XMLDataSet">

<property pattern="url" icon="shared/mm/images/hintMisc.gif" /><property pattern="xpath" icon="shared/mm/images/hintMisc.gif" />

...

... <method pattern="getData()" icon="shared/mm/images/hintMisc.gif" /><method pattern="getData()" icon="shared/mm/images/hintMisc.gif" /><method pattern="loadData()" icon="shared/mm/images/hintMisc.gif" /><method pattern="getCurrentRow()" icon= ".../hintMisc.gif" />

<method pattern="setCurrentRow(rowID)" icon= ".../hintMisc.gif" /> <method pattern="setCurrentRowNumber(rowNumber)" icon= ".../hintMisc.gif" /> <method pattern="getRowNumber(rowObj)" icon= ".../hintMisc.gif" /> <method pattern="setColumnType(columnName, columnType)" icon= ".../hintMisc.gif" />

<parammenu pattern='"' name="columnName" index="0" type="spryDataReferences">

</parammenu> <parammenu pattern='"' name="columnType" index="1" type="enumerated">

<parammenuitem label="integer" value="integer" icon=".../hintMisc.gif"/> <parammenuitem label="image" value="image" icon=".../hintMisc.gif"/><parammenuitem label="date" value="date" icon=".../hintMisc.gif"/><parammenuitem label="string" value="string" icon=".../hintMisc.gif"/>

</parammenu> </method> <method pattern="getColumnType(columnName)" icon= ".../hintMisc.gif" /> <method pattern="distinct()" icon= ".../hintMisc.gif" /> <method pattern="getSortColumn()" icon= ".../hintMisc.gif" /> <method pattern="sort()" icon= ".../hintMisc.gif" />

... ... <event pattern="onCurrentRowChanged" icon= ".../hintMisc.gif" /> <event pattern="onDataChanged" icon= ".../hintMisc.gif" /> ... ...

</menu> <function pattern="Accordion(element,{options})" caseSensitive="true" /><menu classpattern="Spry.Widget.Accordion">

<method pattern="openNextPanel()" icon= ".../hintMisc.gif" /> <method pattern="openPreviousPanel()" icon= ".../hintMisc.gif" />

<method pattern="openFirstPanel()" icon= ".../hintMisc.gif" /> ... ...

</menu> </function> <function pattern="XMLDataSet(xmlsource, xpath, {options})" caseSensitive="true">

<parammenu pattern='{,' name="options" index="2" type="optionArray"allowwhitespaceprefix="true">

<parammenuitem label="sortOnLoad" value="sortOnLoad:"icon="shared/mm/images/hintMisc.gif" datatype="string"/>

<optionparammenu pattern="sortOrderOnLoad" label="sortOrderOnLoad"value="sortOrderOnLoad:" icon="shared/mm/images/hintMisc.gif"

type="enumerated" datatype="string"> <optionparammenuitem label="ascending" value="ascending"

icon="shared/mm/images/hintMisc.gif"/> <optionparammenuitem label="descending" value="descending"

icon="shared/mm/images/hintMisc.gif"/> </optionparammenu>

</parammenu> </function>


30

클래스 선언다음과 같은 형식으로 변수와 클래스를 연결하여 클래스를 선언합니다.

<variablename>[space][= operator][new keyword][space]<classname>

예를 들면 다음과 같습니다.var dsFoo = new Spry.Data.XMLDataSet("products.xml", "products/product");

var fooAccordion = new Spry.Widget.Accordion("accordionDivId");

클래스 이름 Spry.XML.DataSet의 경우에는 ColorCoding.xml 파일에서 다시 선언해야 합니다. 그러면 색상 표시 상태 엔진에서 이 이름이 클래스의 인스턴스임을 인식하고, 선언의 왼쪽에 정의된 변수 이름을 사용하며, 페이지에 대한 해당 클래스 유형과 함께 변수 목록에 저장합니다(예: 위의 예제에서 변수 fooAccordion과 클래스 유형 Spry.Widget.Accordion).

CodeColoring.xml에서 클래스 이름을 다시 선언하는 구문은 다음과 같습니다.<classlibrary name="Spry Keywords" id="CodeColor_JavascriptSpry">

<class>Spry.Data.XMLDataSet</class>

<class>Spry.Widget.Accordion</class>

</classlibrary>

여기서

• classlibrary는 클래스를 색상 ID "CodeColor_JavascriptSpry"로 그룹화하는 새 태그입니다.

class는 사용 가능한 개별 클래스를 클래스 라이브러리에 나열하는 데 사용됩니다. 클래스 목록에는 다른 spry 패키지(예: Debug, Data, Util, Widget, Effect)에 있는 기타 spry 클래스뿐 아니라 기타 Ajax(비동기 JavaScript 및 XML) 도구 키트나 JavaScript 라이브러리도 포함될 수 있습니다.

Crosstag 속성 코드 힌트Dreamweaver에서는 Spry 속성 이름 및 값에 대한 코드 힌트를 제공합니다. 이러한 속성은 여러 태그에 걸쳐 일반적이기 때문에 각 tag.vtm 파일을 열고 Spry 속성 목록을 추가하는 대신 Dreamweaver에는 Configuration/TagLibraries 디렉토리의 Spry.vtm이라는 단일 VTM 파일에 적용할 수 있는 속성 그룹(예: spry:region, spry:repeat) 및 태그 그룹에 대한 새로운 xml 형식이 있습니다.

Spry 속성 그룹화 형식다음 코드는 .vtm 파일의 형식을 보여 줍니다. 이 형식을 사용하면 특정 태그에 적용할 속성을 지정할 수 있습니다.

참고: Spry 속성 그룹화 형식을 Spry 프레임워크 외부에도 사용할 수 있습니다.

<crosstag_attributes>

<attributegroup id="group_id_1" name="group_name_1">

<attrib name = "fooAttr1">

<attrib name = "barAttr1">

...

<taggroup>

<tag name = "fooTag1">

<tag name = "barTag1">

...

</taggroup>

</attribgroup>

<attributegroup id="group_id_2" name="group_name_2">

<attrib name = "fooAttr2">

<attrib name = "barAttr2">

...

<taggroup>

<tag name = "fooTag2">

<tag name = "barTag2">

...

</taggroup>

</attribgroup>

</crosstag_attributes>


31

여기서

• attributegroup은 다음 태그 그룹의 속성을 나열합니다.

• taggroup은 위 속성을 적용할 태그를 나열합니다.

예제<crosstag_attributes>

<attribgroup id="spryRegionAttrs" name="Spry1.2">

<attrib name="spry:region" type="spryDataSet" allowmultiplevalues="yes"/>

<attrib name="spry:detailregion" type="spryDataSet" allowmultiplevalues="yes"/>

<attrib name="spry:content"/>

<attrib name="spry:if"/>

<attrib name="spry:choose">

<attrib name="spry:when"/>

<attrib name="spry:default"/>

<attrib name="spry:state" type="Enumerated">

<attriboption value="read" caption="read"/>

<attriboption value="loading" caption="loading"/>

<attriboption value="failed" caption="failed"/>

</attrib>

<taggroup>

<tag name="div"/>

<tag name="span"/>

...

</taggroup>

</attribgroup>

<attribgroup id="spryBehaviorAttrs" name="Spry1.2">

<attrib name="spry:hover" type="cssStyle"/>

<attrib name="spry:select" type="cssStyle"/>

<attrib name="spry:odd" type="cssStyle"/>

<attrib name="spry:even" type="cssStyle"/>

<taggroup>

<tag name="a"/>

<tag name="abbr"/>

<tag name="acronym"/>

...

</taggroup>

</attribgroup>

</crosstag_attributes>

코드 힌트 태그코드 힌트 XML 파일은 [코드 힌트] 메뉴를 정의하는 다음 태그를 사용합니다. 이러한 태그를 사용하면 [코드 힌트] 메뉴를 추가로 정의할 수 있습니다.

<codehints>

설명codehints 태그는 CodeHints.xml 및 SpryCodeHints.xml 파일의 루트입니다.

속성없음

내용하나 이상의 menugroup 태그입니다.

컨테이너없음


32

예제<codehints>

<menugroup>

설명각 menugroup 태그는 메뉴의 한 종류에 해당합니다. [환경 설정] 대화 상자에서 [코드 힌트] 범주를 선택하면 Dreamweaver에 정의된 메뉴 종류를 볼 수 있습니다. [편집] 메뉴에서 [환경 설정]을 선택하여 [환경 설정] 대화 상자를 표시합니다.

새 메뉴 그룹을 만들거나 기존 그룹에 추가할 수 있습니다. 메뉴 그룹은 사용자가 [환경 설정] 대화 상자를 사용하여 활성화하거나 비활성화할 수 있는 메뉴의 논리적 모음입니다.

속성name, enabled, id

• name 속성은 [환경 설정] 대화 상자의 [코드 힌트] 범주에 있는 메뉴 그룹 목록에 나타나는 지역화된 이름입니다.

• enabled 속성은 메뉴 그룹이 현재 체크되어 있거나 활성화되어 있는지 여부를 나타냅니다. 활성화된 메뉴 그룹은 [환경 설정] 대화 상자의 [코드 힌트] 범주에 있는 메뉴 그룹 옆에 체크 표시가 나타납니다. 메뉴 그룹을 활성화하려면 true 값을 지정하고 비활성화하려면 false 값을 지정합니다.

• id 속성은 메뉴 그룹을 나타내는 지역화되지 않은 식별자입니다.

내용description, menu 및 function 태그입니다.

컨테이너codehints 태그입니다.

예제<menugroup name="Session Variables" enabled="true" id="Session_Code_Hints">

<description>

설명description 태그에는 [환경 설정] 대화 상자에서 메뉴 그룹을 선택할 때 Dreamweaver에 표시되는 텍스트가 포함됩니다. 설명 텍스트는 메뉴 그룹의 목록 아래에 표시됩니다. 경우에 따라 설명 텍스트에는 a 태그만 포함되기도 합니다. 여기서 href 속성은 사용자가 링크를 클릭하면 Dreamweaver에서 실행되는 JavaScript URL이어야 합니다. 특수 문자나 잘못된 문자를 포함시켜 Dreamweaver에서 텍스트로 처리되도록 하려면 XML CDATA 구조를 사용합니다.

속성없음

내용설명 텍스트입니다.

컨테이너menugroup 태그입니다.

예제<description>

<![CDATA[ 태그 및 속성을 추가 또는 제거하려면 다음을 사용 <a href="javascript:dw.tagLibrary.showTagLibraryEditor()">Tag Library Editor</a>.]]>

</description>


33

<menu>

설명단일 팝업 메뉴를 설명합니다. 사용자가 pattern 속성에 있는 문자열의 마지막 문자를 입력할 때마다 Dreamweaver에 메뉴가 표시됩니다. 예를 들어, Session 변수의 내용을 보여 주는 메뉴에는 "Session."과 동일한 pattern 속성이 있을 수 있습니다.

속성pattern, doctypes, casesensitive, classpattern

• pattern 속성은 Dreamweaver에 [코드 힌트] 메뉴가 표시되도록 하는 입력 문자의 패턴을 지정합니다. 패턴의 첫 글자가 문자, 숫자 또는 밑줄이면 Dreamweaver는 문서에서 패턴의 앞에 오는 글자가 문자, 숫자 또는 밑줄이 아닌 경우에만 메뉴를 표시합니다. 예를 들어, 패턴이 "Session."인 경우 사용자가 "my_Session."을 입력하면 Dreamweaver에 메뉴가 표시되지 않습니다.

• doctypes 속성은 지정된 형식의 문서에 대해서만 메뉴가 활성화되도록 지정합니다. 이 속성을 사용하면 ASP-JavaScript (ASP-JS), JSP(Java Server Pages), Adobe ColdFusion 등의 함수 이름 목록을 다르게 지정할 수 있습니다. doctypes 속성은 문서 형식 ID의 목록을 콤마로 구분하여 지정할 수 있습니다. Dreamweaver 문서 형식 목록에 대해서는 Dreamweaver Configuration/Documenttypes/MMDocumentTypes.xml 파일을 참조하십시오.

• casesensitive 속성은 패턴에서 대소문자를 구분할지 여부를 지정합니다. casesensitive 속성에는 true, false 또는 doctypes 속성에 지정하는 콤마로 구분된 목록의 하위 집합을 지정할 수 있습니다. 문서 형식의 목록을 사용하면 패턴이 일부 문서 형식에 대해서만 대소문자를 구분하도록 지정할 수 있습니다. 이 속성을 생략하는 경우 기본값은 false입니다. casesensitive 속성의 값이 true인 경우 사용자가 입력한 텍스트가 pattern 속성에 지정된 패턴과 정확하게 일치할 때에만 [코드 힌트] 메뉴가 표시됩니다. casesensitive 속성의 값이 false인 경우 패턴이 소문자이고 텍스트는 대문자인 경우에도 메뉴가 표시됩니다.

• classpattern 속성은 클래스 멤버 목록과 클래스를 연결합니다.

내용menuitem 태그입니다.


예제<menu pattern="CGI." doctypes="ColdFusion">

<menuitem>

설명[코드 힌트] 팝업 메뉴의 항목에 텍스트를 지정합니다. menuitem 태그는 사용자가 항목을 선택할 때 텍스트에 삽입할 값도 지정합니다.

속성label, value, {icon}, {texticon}

• label 속성은 Dreamweaver의 팝업 메뉴에 표시되는 문자열입니다.

• value 속성은 사용자가 명령을 선택할 때 문서에 삽입되는 문자열입니다. 사용자가 메뉴에서 항목을 선택하고 Enter나 Return 키를 누르면 Dreamweaver는 메뉴가 표시된 이후 사용자가 입력한 모든 텍스트를 교체합니다. 메뉴가 나타나기 전에 사용자가 패턴 일치 문자를 입력하였으므로 Dreamweaver는 이 문자를 다시 삽입하지 않습니다. 예를 들어, 앰퍼샌드(&) 문자에 대한 HTML 엔터티인 &amp를 삽입하려는 경우 다음과 같이 menu와 menuitem 태그를 정의할 수 있습니다.

<menu pattern="&">

<menuitem label="&" value="amp;" texticon="&"/>

앰퍼샌드(&) 문자는 메뉴가 표시되기 전에 사용자가 입력했기 때문에 value 속성에 포함되지 않습니다.

• icon 속성은 Dreamweaver가 메뉴 텍스트 왼쪽에 아이콘으로 표시할 이미지 파일에 대한 경로를 지정합니다. 이 속성은 선택 사항입니다. 위치는 Configuration 폴더에 대해 상대적인 URL로 표현됩니다.

• texticon 속성은 이미지 파일 대신 아이콘에 나타날 텍스트 문자열을 지정합니다. 이 속성은 선택 사항입니다. 이 속성은 [HTML 엔터티] 메뉴에 사용됩니다.


34

내용없음

컨테이너menu 태그입니다.

예제<menuitem label="CONTENT_TYPE" value=""CONTENT_TYPE")

" icon="shared/mm/images/hintMisc.gif" />

<function>

설명CodeHints.xml 파일에서 사용됩니다. [코드 힌트] 팝업 메뉴의 함수 인수와 객체 메서드를 지정하는 menu 태그를 교체합니다. [코드] 뷰에 함수 또는 메서드 이름이 입력되면 Dreamweaver는 함수 원형에 대한 메뉴를 표시하고 현재 인수를 굵게 나타냅니다. 콤마가 입력될 때마다 메뉴가 업데이트되어 다음 인수가 굵게 표시됩니다. 예를 들어, ColdFusion 문서에서 함수 이름 ArrayAppend를 입력하면 [코드 힌트] 메뉴는 ArrayAppend(array, value)처럼 표시됩니다. array 다음에 콤마를 입력하면 메뉴는 ArrayAppend(array, value)처럼 업데이트됩니다.

객체 메서드의 경우 객체 이름을 입력하면 해당 객체에 정의된 메서드에 대한 메뉴가 표시됩니다.

인식되는 함수는 Configuration/CodeHints 폴더의 XML 파일에 저장됩니다.

속성pattern, doctypes, casesensitive

• pattern 속성은 함수의 이름과 그 인수 목록을 지정합니다. 메서드의 경우 pattern 속성은 객체의 이름, 메서드의 이름 및 메서드의 인수를 나타냅니다. 함수 이름의 경우 [코드 힌트] 메뉴는 사용자가 functionname(을 입력할 때 표시됩니다. 메뉴에는 함수의 인수 목록이 나타납니다. 객체 메서드의 경우 [코드 힌트] 메뉴는 사용자가 마침표를 포함하여 objectname을 입력할 때 표시됩니다. 이 메뉴에는 객체에 지정된 메서드가 나타납니다. 그런 다음, [코드 힌트] 메뉴는 함수의 경우와 같은 방법으로 해당 메서드에 대한 인수 목록을 엽니다.

• doctypes 속성은 지정된 형식의 문서에 대해서만 메뉴가 활성화되도록 지정합니다. 이 속성을 사용하면 ASP-JavaScript (ASP-JS), JSP(Java Server Pages), Adobe ColdFusion 등의 함수 이름 목록을 다르게 지정할 수 있습니다. doctypes 속성은 문서 형식 ID의 목록을 콤마로 구분하여 지정할 수 있습니다. Dreamweaver 문서 형식 목록은 Dreamweaver Configuration/Documenttypes/MMDocumentTypes.xml 파일을 참조하십시오.

• casesensitive 속성은 패턴에서 대소문자를 구분할지 여부를 지정합니다. casesensitive 속성에는 true, false 또는 doctypes 속성에 지정하는 콤마로 구분된 목록의 하위 집합을 지정할 수 있습니다. 문서 형식의 목록을 사용하면 패턴이 일부 문서 형식에 대해서만 대소문자를 구분하도록 지정할 수 있습니다. 이 속성을 생략하는 경우 기본값은 false입니다. casesensitive 속성의 값이 true인 경우 사용자가 입력한 텍스트가 pattern 속성에 지정된 패턴과 정확하게 일치할 때에만 [코드 힌트] 메뉴가 표시됩니다. casesensitive 속성의 값이 false인 경우 패턴이 소문자이고 텍스트는 대문자인 경우에도 메뉴가 표시됩니다.

내용없음


예제// 함수 예제<function pattern="CreateDate(year, month, day)" DOCTYPES="ColdFusion" />

// 객체 메서드 예제<function pattern="application.getAttribute(String name)" DOCTYPES="JSP" />


35

<method>

설명Spry 프레임워크에 사용합니다. [코드 힌트] 팝업 메뉴의 메서드를 지정하는 menu 태그를 교체합니다. [코드] 뷰에 메서드 이름을 입력하면 Dreamweaver는 메서드 원형 메뉴를 열어 해당 메서드의 매개 변수 목록을 표시하고 입력되는 매개 변수 순서를 추적합니다. 매개 변수가 없는 메서드의 경우 괄호 “()” 문자를 추가하여 해당 메서드 호출을 닫습니다.

현재 인수가 굵게 표시됩니다. 콤마가 입력될 때마다 메뉴가 업데이트되어 다음 인수가 굵게 표시됩니다. 객체 메서드의 경우 객체 이름을 입력하면 해당 객체에 정의된 메서드에 대한 메뉴가 표시됩니다.

속성pattern, icon

• pattern 속성은 메서드의 이름과 그 인수 목록을 지정합니다. pattern 속성은 객체의 이름, 메서드의 이름 및 메서드의 인수를 나타냅니다. 메뉴는 해당 메서드의 인수 목록을 표시합니다. 사용자가 마침표를 포함하여 objectname을 입력하면 [코드 힌트] 메뉴가 표시됩니다. 이 메뉴에는 객체에 지정된 메서드가 나타납니다. 그런 다음, [코드 힌트] 메뉴는 함수의 경우와 같은 방법으로 해당 메서드에 대한 인수 목록을 엽니다.

• icon 속성은 사용할 아이콘을 지정합니다.

내용없음


<parammenu>

설명모든 객체(JavaScript)에 사용되어 메서드 또는 함수에 사용되는 매개 변수의 매개 변수 힌트를 지정합니다.

속성pattern, name, index, type

• pattern 속성은 [코드 힌트] 메뉴를 트리거하는 문자를 지정합니다. 이 인수는 필수입니다.

• name 속성은 매개 변수 이름을 지정합니다. 이 인수는 필수입니다.

• index 속성은 힌트 대상 매개 변수의 인덱스 번호(0부터 시작)를 지정합니다. 이 인수는 필수입니다.

• type 속성은 데이터 유형을 지정합니다. 다음과 같은 데이터 유형을 지원합니다.

• enumerated(기본값): 표시할 중첩된 <optionparammenuitem> 목록을 나타냅니다.

• spryDataReferences: Spry 데이터 세트 열 목록을 나타냅니다.

• cssStyle: 해당 페이지에 사용할 수 있는 CSS 클래스 목록을 나타냅니다.

• cssId: 해당 페이지에 사용할 수 있는 CSS 선택기 ID 규칙 목록을 나타냅니다.

• optionArray: 표시할 중첩된 <optionparammenu> 및 <parammenuitem> 목록을 나타냅니다(옵션 배열 매개 변수 유형 지원에 사용됨).

내용없음

컨테이너method 또는 function 태그입니다.


36

<parammenuitem>


속성label, value, icon, datatype

• label 속성은 표시할 이름을 지정합니다. 이 인수는 필수입니다.

• value 속성은 해당 항목이 [코드 힌트] 메뉴에 선택되어 있을 때 드롭할 값을 지정합니다. 이 인수는 필수입니다.

• icon 속성은 [코드 힌트] 메뉴에 사용할 아이콘을 지정합니다. 이 인수는 필수입니다.

• datatype 속성을 사용하면 [코드 힌트] 메뉴에서 값을 선택할 때 추가되는 닫는 인용 부호를 나타내는 string을 지정할 수 있습니다. 이 인수는 선택 사항입니다.

내용없음

컨테이너parammenu 태그입니다.

<optionparammenu>

설명모든 객체(JavaScript)에 사용되어 메서드 또는 함수에 사용되는 인수의 옵션 배열 힌트를 지정합니다. 옵션 배열은 option:value 형식의 하위 인수를 가질 수 있는 인수입니다. 대부분의 Spry 객체는 옵션 배열 인수를 사용하여 사용자가 객체의 동작(예: data set, widget, 또는 effect)를 구성할 수 있도록 합니다. 옵션 배열은 일반적으로 {option1: value1, option2: value2, option3: value3, ...}으로 나타납니다.

속성pattern, label, value, icon, type

• pattern 속성은 [코드 힌트] 메뉴를 트리거하는 문자를 지정합니다. 이 인수는 필수입니다.

• label 속성은 매개 변수 이름을 지정합니다. 이 인수는 필수입니다.

• value 속성은 사용자가 코드 힌트를 선택할 때 삽입할 매개 변수 값을 지정합니다. 이 인수는 필수입니다.

• icon 속성은 사용할 아이콘을 지정합니다. 이 인수는 필수입니다.

• type 속성은 데이터 유형을 지정합니다. 다음과 같은 데이터 유형을 지원합니다.

• enumerated(기본값): 표시할 중첩된 optionparammenuitem 목록을 나타냅니다.

• spryDataReferences: Spry 데이터 세트 열 목록을 나타냅니다.

• cssStyle: 해당 페이지에 사용할 수 있는 CSS 클래스 목록을 나타냅니다.

• cssId: 해당 페이지에 사용할 수 있는 CSS 선택기 ID 규칙 목록을 나타냅니다.

내용없음

컨테이너유형이 optionArray인 parammenu 태그입니다.


37

<optionparammenuitem>


속성label, value, icon, datatype

• label 속성은 표시할 이름을 지정합니다. 이 인수는 필수입니다.

• value 속성은 해당 항목이 [코드 힌트] 메뉴에 선택되어 있을 때 드롭할 값을 지정합니다. 이 인수는 필수입니다.

• icon 속성은 [코드 힌트] 메뉴에 사용할 아이콘을 지정합니다. 이 인수는 필수입니다.

• datatype 속성을 사용하면 [코드 힌트] 메뉴에서 값을 선택할 때 추가되는 닫는 인용 부호를 나타내는 string을 지정할 수 있습니다. 이 인수는 선택 사항입니다.

내용없음

컨테이너<optionparammenu> 태그입니다.

<property>

설명이 태그는 객체의 속성/필드를 설명하고 다음과 같은 표준 속성을 가집니다.

속성label, value, icon

• label 속성은 Dreamweaver의 팝업 메뉴에 표시되는 문자열입니다.

• value 속성은 사용자가 명령을 선택할 때 문서에 삽입되는 문자열입니다. 사용자가 메뉴에서 항목을 선택하고 Enter나 Return 키를 누르면 Dreamweaver는 메뉴가 표시된 이후 사용자가 입력한 모든 텍스트를 교체합니다. 메뉴가 나타나기 전에 사용자가 패턴 일치 문자를 입력하였으므로 Dreamweaver는 이 문자를 다시 삽입하지 않습니다.

• icon 속성은 Dreamweaver가 메뉴 텍스트 왼쪽에 아이콘으로 표시할 이미지 파일에 대한 경로를 지정합니다. 이 속성은 선택 사항입니다. 위치는 Configuration 폴더에 대해 상대적인 URL로 표현됩니다.

내용없음


코드 색상 표시Dreamweaver에서는 [코드] 뷰에 나타나는 코드 색상 표시 체계를 사용자 정의하거나 확장하여 특정 체계에 키워드를 새로 추가하거나 새로운 문서 유형에 대해 코드 색상 표시 체계를 추가할 수 있습니다. 예를 들어, 클라이언트측 스크립트에 사용되는 JavaScript 함수를 개발하는 경우 이 함수 이름을 키워드 섹션에 추가하여 [환경 설정] 대화 상자에 지정된 색상으로 표시되도록 할 수 있습니다. 마찬가지 방법으로, 응용 프로그램 서버에 사용할 새로운 프로그래밍 언어를 개발하고 Dreamweaver 사용자들이 페이지를 개발할 때 활용할 수 있도록 새 문서 형식을 배포하는 경우, 문서 형식에 대한 코드 색상 표시 체계를 추가할 수 있습니다.

Dreamweaver에는 사용자가 직접 편집할 수 있는 코드 색상 표시 XML 파일을 다시 로드할 수 있는 JavaScript 함수 dreamweaver.reloadCodeColoring()이 있습니다. 이 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

코드 색상 표시 체계를 업데이트하거나 새로운 체계를 추가하려면 코드 색상 표시 정의 파일을 수정해야 합니다.


38

코드 색상 표시 파일Dreamweaver에서는 코드 색상 표시 스타일과 체계를 Configuration/CodeColoring 폴더에 저장되는 XML 파일에 정의합니다. 코드 색상 스타일 파일은 구문 정의에 정의된 필드에 대한 스타일을 정의합니다. 이 파일의 루트 노드는 <codeColors>입니다. 코드 색상 표시 체계 파일은 코드 색상 표시 구문을 정의하고 <codeColoring>이라는 루트 노드를 가집니다.

Dreamweaver에서 제공하는 코드 색상 표시 스타일 파일은 Colors.xml이고, 코드 색상 표시 구문 파일은 CodeColoring.xml, ASP JavaScript.xml, ASP VBScript.xml, ASP.NET CSharp.xml 및 ASP.NET VB.xml입니다.

다음은 코드 색상 표시 스타일 파일의 태그 계층 구조를 설명하기 위해 Colors.xml 파일의 내용 중 일부를 발췌한 것입니다.

색상은 RGB(Red-Green-Blue) 16진수 값으로 지정됩니다. 예를 들어, 앞의 XML 코드에서 text="009999" 문은 ID "CodeColor_JavascriptNative"에 파랑-녹색(암녹색) 색상을 지정합니다.

다음은 코드 색상 표시 체계 파일의 태그 계층 구조와 코드 색상 스타일 파일과 코드 색상 체계 파일 사이의 관계를 설명하기 위해 CodeColoring.xml 파일의 내용 중 일부를 발췌한 것입니다.


39

Colors.xml 파일의 syntaxColor 및 tagColor 태그는 id 문자열 값에 색상과 스타일 값을 지정해야 한다는 점에 주의해야 합니다. id 값은 CodeColoring.xml 파일에 사용되어 스타일을 scheme 태그에 지정합니다. 예를 들어, CodeColoring.xml 발췌에서 defaultTag 태그의 id는 "CodeColor_HTMLComment"입니다. Colors.xml 파일에서 id 값 "CodeColor_HTMLComment"는 text=에 회색을 나타내는 "#999999"가 지정되어 있습니다.

Dreamweaver에는 기본값, HTML, JavaScript, ASP_JavaScript, ASP_VBScript, JSP 및 ColdFusion 등의 색상 표시 체계가 있습니다. Default 체계에는 값이 "Text"인 id가 있습니다. Dreamweaver는 코드 색상 표시 체계가 정의되어 있지 않는 문서 형식에 대해 Default 체계를 사용합니다.

코드 색상 표시 파일에는 아래에 설명된 다음 태그가 포함됩니다.

scheme, blockEnd, blockStart, brackets, charStart, charEnd, charEsc, commentStart, commentEnd,

cssImport/, cssMedia/, cssProperty/, cssSelector/, cssValue/, defaultAttribute, defaultTag,

defaultText/, endOfLineComment, entity/, functionKeyword, idChar1, idCharRest, ignoreCase,

ignoreMMTParams, ignoreTags, isLocked, keyword, keywords, numbers/, operators, regexp,

sampleText, searchPattern, stringStart, stringEnd, stringEsc, tagGroup

<scheme>

설명scheme 태그는 코드 텍스트 블록에 대한 코드 색상을 지정합니다. 한 파일에 여러 색상 표시 체계를 정의하여 서로 다른 스크립트나 태그 언어에 대해 서로 다른 색상을 지정할 수 있습니다. 각 체계에는 우선 순위가 있어 서로 체계가 다른 텍스트 블록을 중첩시킬 수 있습니다.

속성name, id, priority, doctypes

• name="scheme_name" 체계 이름을 지정하는 문자열입니다. 체계 이름은 [코드 색상 표시 체계 편집] 대화 상자에 나타납니다. 이때, HTML Comment와 같이 체계 이름과 필드 이름이 결합되어 표시됩니다. 이름을 지정하지 않으면 [코드 색상 표시 체계 편집] 대화 상자에 체계에 대한 필드가 표시되지 않습니다. [코드 색상 표시 체계 편집] 대화 상자에 대한 자세한 내용은 53페이지의 “체계 편집”을 참조하십시오.

• id="id_string" 필수입니다. 현재 구문 항목에 색상과 스타일을 대응시키는 식별 문자열입니다.

• priority="string" “1” 부터 “99” 까지의 값입니다. 가장 높은 우선 순위는 “1” 입니다. 체계의 처리 순서를 지정합니다. 더 높은 우선 순위를 가진 블록 내부에 존재하는 블록은 무시됩니다. 우선 순위가 같거나 낮은 블록 내부에 존재하는 블록은 우선적으로 처리됩니다. 우선 순위를 지정하지 않으면 기본값은 “50” 입니다.

• doctypes="doc_list" 선택 사항입니다. 현재 코드 색상 표시 체계를 지정할 문서 종류 목록을 콤마로 구분하여 지정합니다. 이 값은 동일한 Extension을 사용하지만 시작 블록과 끝 블록이 다른 경우에 충돌을 해결하는 데 필요합니다.

내용blockEnd, blockStart, brackets, charStart, charEnd, charEsc, commentStart, commentEnd,

cssProperty/, cssSelector/, cssValue/, defaultAttribute, defaultText/, endOfLineComment,

entity/, functionKeyword, idChar1, idCharRest, ignoreCase, ignoreMMTParam, ignoreTags,

keywords, numbers/, operators, regexp, sampleText, searchPattern, stringStart, stringEnd,

stringEsc, urlProtocol, urlProtocols

컨테이너codeColoring 태그입니다.

예제<scheme name="Text" id="Text" doctypes="Text" priority="1">

40

<blockEnd>

설명선택 사항입니다. 현재 체계에 대한 텍스트 블록의 끝을 구분하는 텍스트 값입니다. blockEnd 및 blockStart 태그는 반드시 쌍을 이루어야 하며 두 태그의 조합이 고유해야 합니다. 태그의 값들은 대소문자가 구분되지 않습니다. blockEnd 값은 한 문자도 가능합니다. 이 태그는 여러 번 나타날 수 있습니다. blockEnd 문자열에 대한 자세한 내용은 51페이지의 “와일드카드 문자”를 참조하십시오.

속성없음

예제<blockEnd><![CDATA[--->]]></blockEnd>

<blockStart>

설명선택 사항입니다. 현재 색상 체계를 다른 색상 체계에 포함시킬 수 있는 경우에만 지정합니다. blockStart 및 blockEnd 태그는 반드시 쌍을 이루어야 하며 두 태그의 조합이 고유해야 합니다. 태그의 값들은 대소문자가 구분되지 않습니다. blockStart 값의 길이는 두 문자 이상이어야 합니다. 이 태그는 여러 번 나타날 수 있습니다. blockStart 문자열에 대한 자세한 내용은 51페이지의 “와일드카드 문자”를 참조하십시오. blockStart scheme 속성에 대한 자세한 내용은 49페이지의 “scheme 블록 구분 문자 색상 표시”를 참조하십시오.

속성canNest, doctypes, id, name, scheme

• canNest scheme 자체가 중첩될 수 있는지 여부를 지정합니다. 이 태그의 값은 Yes 또는 No 중 하나입니다. 기본값은 No입니다.

• doctypes="doc_type1, doc_type2,..." 필수입니다. 이 코드 색상 표시 체계를 중첩시킬 수 있는 문서 형식 목록을 콤마로 구분하여 지정합니다. 문서 형식은 Dreamweaver의 Configuration/Document Types/MMDocumentTypes.xml 파일에 정의됩니다.

• id="id_string" scheme="customText"인 경우 필수입니다. 현재 구문 항목에 색상과 스타일을 대응시키는 식별 문자열입니다.

• name="display_name" scheme="customText"인 경우 [코드 색상 표시 체계 편집] 대화 상자에 나타나는 문자열입니다.

• scheme 필수입니다. blockStart와 blockEnd 문자열의 색상 표시 방법을 정의합니다. scheme 속성에 사용할 수 있는 값에 대한 자세한 내용은 49페이지의 “scheme 블록 구분 문자 색상 표시”를 참조하십시오.

예제<blockStart doctypes="ColdFusion,CFC" scheme="innerText" canNest="Yes"><![CDATA[<!---]]>

</blockStart>

<brackets>

설명괄호를 나타내는 문자 목록입니다.

속성name, id

• name="bracket_name" 괄호 목록에 이름을 지정하는 문자열입니다.


예제<brackets name="Bracket" id="CodeColor_JavaBracket"><![CDATA[{[()]}]]>

</brackets>


41

<charStart>

설명문자의 시작을 구분하는 텍스트 문자열을 포함합니다. charStart와 charEnd 태그를 쌍으로 지정해야 합니다. charStart ... charEnd 쌍은 여러 번 나타날 수 있습니다.

속성없음

예제<charStart><![CDATA[']]></charStart>

<charEnd>

설명문자의 끝을 구분하는 텍스트 문자열을 포함합니다. charStart와 charEnd 태그를 쌍으로 지정해야 합니다. charStart ... charEnd 쌍은 여러 번 나타날 수 있습니다.

속성없음

예제<charEnd><![CDATA[']]></charEnd>

<charEsc>

설명이스케이프 문자를 나타내는 텍스트 문자열을 포함합니다. charEsc 태그는 여러 번 나타날 수 있습니다.

속성없음

예제<charEsc><![CDATA[\]]></charEsc>

<commentStart>

설명주석 블록의 시작을 구분하는 텍스트 문자열입니다. commentStart와 commentEnd 태그를 쌍으로 지정해야 합니다. commentStart.../commentEnd 쌍은 여러 번 나타날 수 있습니다.

속성없음

예제<commentStart><![CDATA[<%--]]></commentStart>

<commentEnd>

설명주석 블록의 끝을 구분하는 텍스트 문자열입니다. commentStart와 commentEnd 태그를 쌍으로 지정해야 합니다. commentStart.../ commentEnd 쌍은 여러 번 나타날 수 있습니다.

속성없음

예제<commentEnd><![CDATA[--%>]]></commentEnd>


42

<cssImport/>

설명CSS의 style 요소의 @import 함수에 대한 코드 색상 표시 규칙을 나타내는 빈 태그입니다.

속성name, id

• name="cssImport_name" CSS @import 함수에 이름을 지정하는 문자열입니다.


예제<cssImport name="@import" id="CodeColor_CSSImport" />

<cssMedia/>

설명CSS의 style 요소의 @media 함수에 대한 코드 색상 표시 규칙을 나타내는 빈 태그입니다.

속성name, id

• name="cssMedia_name" CSS @media 함수에 이름을 지정하는 문자열입니다.


예제<cssMedia name="@media" id="CodeColor_CSSMedia" />

<cssProperty/>

설명CSS 규칙을 나타내고 코드 색상 표시 속성을 저장하는 빈 태그입니다.

속성name, id

• name="cssProperty_name" CSS 속성에 이름을 지정하는 문자열입니다.


코드 색상 환경 설정CSS 속성

예제<cssProperty name="Property" id="CodeColor_CSSProperty" />

<cssSelector/>


속성name, id

• name="cssSelector_name" CSS 선택기에 이름을 지정하는 문자열입니다.


예제<cssSelector name="Selector" id="CodeColor_CSSSelector" />


43

<cssValue/>


속성name, id

• name="cssValue_name" CSS 값에 이름을 지정하는 문자열입니다.


예제<cssValue name="Value" id="CodeColor_CSSValue" />

<defaultAttribute>

설명선택 사항입니다. 이 태그는 ignoreTags="No"인 태그 기반 구분에만 적용됩니다. 이 태그가 존재하면 이 태그에 지정된 스타일에 따라 모든 태그 속성에 색상이 표시됩니다. 이 태그가 생략되면 속성은 태그와 같은 색상으로 표시됩니다.

속성name

• 기본 속성에 이름을 지정하는 문자열입니다.

예제<defaultAttribute name="Attribute"/>

<defaultTag>

설명이 태그는 특정 체계의 태그에 대해 기본 색상과 스타일을 지정하는데 사용됩니다.

속성name, id

• name="display_name" Dreamweaver의 코드 색상 편집기에 표시되는 문자열입니다.


예제<defaultTag name="Other Tags" id="CodeColor_HTMLTag" />

<defaultText/>

설명선택 사항입니다. 이 태그가 존재하면 이 태그에 지정된 스타일에 따라 아무 태그에도 정의되지 않은 모든 텍스트에 색상이 표시됩니다. 이 태그가 생략되면 텍스트는 검정색으로 표시됩니다.

속성name, id

• name="cssSelector_name" CSS 선택기에 이름을 지정하는 문자열입니다.


예제<defaultText name="Text" id="CodeColor_TextText" />


44

<endOfLineComment>

설명현재 행의 끝까지 연속되는 주석의 시작을 구분하는 텍스트 문자열입니다. endOfLineComment.../endOfLineComment 태그는 여러 번 나타날 수 있습니다.

속성없음

예제<endOfLineComment><![CDATA[//]]></endOfLineComment>

<entity/>

설명HTML 특수 문자를 인식해야 한다는 것을 나타내며 색상 표시 속성을 저장하는 빈 태그입니다.

속성name, id

• name="entity_name" 엔터티에 이름을 지정하는 문자열입니다.


예제<entity name="Special Characters" id="CodeColor_HTMLEntity" />

<functionKeyword>

설명함수를 정의하는 키워드를 나타냅니다. Dreamweaver는 이 키워드를 사용하여 코드를 탐색합니다. functionKeyword 태그는 여러 번 나타날 수 있습니다.

속성name, id

• name="functionKeyword_name" functionKeyword 블록에 이름을 지정하는 문자열입니다.


예제<functionKeyword name="Function Keyword"

id="CodeColor_JavascriptFunction">function</functionKeyword>

<idChar1>

설명Dreamweaver가 식별자에서 첫 번째 문자로 인식할 수 있는 문자들의 목록입니다.

속성name, id

• name="idChar1_name" 식별자 문자 목록에 이름을 지정하는 문자열입니다.


예제<idChar1>_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</idChar1>

45

<idCharRest>

설명식별자에서 나머지 문자열로 인식되는 문자들의 목록입니다. idChar1이 지정되지 않으면 이 목록에서 식별자의 모든 문자를 검사합니다.

속성name, id

• name="idCharRest_name" stringStart 블록에 이름을 지정하는 문자열입니다.


예제<idCharRest name="Identifier" id="CodeColor_JavascriptIdentifier">

_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</idCharRest>

<ignoreCase>

설명키워드와 토큰을 비교할 때 대소문자를 무시할 것인지 여부를 지정합니다. 이 태그의 값은 Yes 또는 No 중 하나입니다. 기본값은 Yes입니다.

속성없음

예제<ignoreCase>Yes</ignoreCase>

<ignoreMMTParams>

설명MMTInstance:Param, <!-- InstanceParam 또는 <!-- #InstanceParam 태그에 특별히 색상을 표시해야 할지 여부를 지정합니다. 이 태그의 값은 Yes 또는 No 중 하나입니다. 기본값은 Yes입니다. 이 태그는 템플릿을 사용하는 페이지에 적절한 색상을 표시합니다.

속성없음

예제<ignoreMMTParams>No</ignoreMMTParams>

<ignoreTags>

설명마크업 태그를 무시해야 할지 여부를 지정합니다. 이 태그의 값은 Yes 또는 No 중 하나입니다. 기본값은 Yes입니다. 구문이 < 및 >로 구분되는 태그 마크업 언어에 사용되는 경우에는 No로 설정합니다. 구문이 프로그래밍 언어에 사용되는 경우에는 Yes로 설정합니다.

속성없음

예제<ignoreTags>No</ignoreTags>


46

<isLocked>

설명이 체계에서 일치하는 텍스트를 [코드] 뷰에서 편집할 수 있는지 여부를 지정합니다. 이 태그의 값은 Yes 또는 No 중 하나입니다. 기본값은 No입니다.

속성없음

예제<isLocked>Yes</isLocked>

<keyword>

설명키워드를 정의하는 텍스트 문자열입니다. keyword 태그는 여러 번 나타날 수 있습니다. 키워드는 어떠한 문자로도 시작할 수 있지만 그 이후의 문자는 a-z, A-Z, 0-9, _, $ 또는 @만 가능합니다.

keyword 태그가 포함되면 코드 색상이 지정됩니다.

속성없음

예제<keyword>.getdate</keyword>

<keywords>

설명범주 속성에 지정된 유형의 키워드의 목록입니다. keywords 태그는 여러 번 나타날 수 있습니다.

속성name, id

• name="keywords_name" 키워드 목록에 이름을 지정하는 문자열입니다.


내용<keyword></keyword>

예제<keywords name="Reserved Keywords" id="CodeColor_JavascriptReserved">

<keyword>break</keyword>

<keyword>case</keyword>

</keywords>

<numbers/>

설명인식되어야 하는 문자를 지정하고 색상 속성을 저장하는 빈 태그입니다.

속성name, id

• name="number_name" numbers 태그에 이름을 지정하는 문자열입니다. • id="id_string" 필수입니다. 현재 구문 항목에 색상과 스타일을 대응시키는 식별 문자열입니다.

예제<numbers name="Number" id="CodeColor_CFScriptNumber" />


47

<operators>

설명연산자로 인식되는 문자들의 목록입니다.

속성name, id

• name="operator_name" 연산자 문자의 목록에 이름을 지정하는 문자열입니다. • id="id_string" 필수입니다. 현재 구문 항목에 색상과 스타일을 대응시키는 식별 문자열입니다.

예제<operators name="Operator" id="CodeColor_JavaOperator"><![CDATA[+-

*/%<>!?:=&|^~]]></operators>

<regexp>

설명searchPattern 태그의 목록을 지정합니다.

속성name, id, delimiter, escape

• name="stringStart_name" 검색 패턴 문자열 목록에 이름을 지정하는 문자열입니다. • id="id_string" 필수입니다. 현재 구문 항목에 색상과 스타일을 대응시키는 식별 문자열입니다. • delimiter 일반 표현식을 시작하고 끝내는 문자 또는 문자열입니다.• escape 특수 문자로 처리할 것을 알리는 문자 또는 문자열입니다. 이스케이프 문자 또는 문자열이라고 합니다.

내용<searchPattern></searchPattern>

예제<regexp name="RegExp" id="CodeColor_JavascriptRegexp" delimiter="/" escape="\\">

<searchPattern><![CDATA[(\s*/\e*\\/]]></searchPattern>

<searchPattern><![CDATA[=\s*/\e*\\/]]></searchPattern>

</regexp>

<sampleText>

설명[코드 색상 표시 체계 편집] 대화 상자의 [미리 보기] 윈도우에 나타나는 대표 텍스트입니다. [코드 색상 표시 체계 편집] 대화 상자에 대한 자세한 내용은 53페이지의 “체계 편집”을 참조하십시오.

속성doctypes

• doctypes="doc_type1, doc_type2,..." 현재 샘플 텍스트가 표시될 문서 형식을 지정합니다.

예제<sampleText doctypes="JavaScript"><![CDATA[/* JavaScript */

function displayWords(arrayWords) {

for (i=0; i < arrayWords.length(); i++) {

// 인라인 주석alert("Word " + i + " is " + arrayWords[i]);

}

}

var tokens = new Array("Hello", "world");

displayWords(tokens);

]]></sampleText>


48

<searchPattern>

설명지원되는 와일드카드 문자를 사용하여 정규 검색 패턴을 정의하는 문자열입니다. searchPattern 태그는 여러 번 나타날 수 있습니다.

속성없음

컨테이너regexp 태그입니다.

예제<searchPattern><![CDATA[(\s*/\e*\\/]]></searchPattern>

<stringStart>

설명이 태그들은 문자열의 시작을 구분하는 텍스트 문자열을 포함합니다. stringStart와 stringEnd 태그는 쌍으로 지정해야 합니다. stringStart ... stringEnd 쌍은 여러 번 나타날 수 있습니다.

속성name, id, wrap

• name="stringStart_name" stringStart 블록에 이름을 지정하는 문자열입니다.


• wrap="true" 또는 "false". 다음 행으로 줄이 바뀌는 텍스트 문자열을 인식하여 코드 색상을 표시할지 여부를 정의합니다. 기본값은 "true"입니다.

예제<stringStart name="Attribute Value" id="CodeColor_HTMLString"><![CDATA["]]></stringStart>

<stringEnd>

설명코드 문자열의 끝을 구분하는 텍스트 문자열입니다. stringStart와 stringEnd 태그는 쌍으로 지정해야 합니다. stringStart ... stringEnd 쌍은 여러 번 나타날 수 있습니다.

속성없음

예제<stringEnd><![CDATA["]]></stringEnd>

<stringEsc>

설명문자열 이스케이프 문자를 구분하는 텍스트 문자열입니다. stringEsc 태그는 여러 번 나타날 수 있습니다.

속성없음

예제<stringEsc><![CDATA[\]]></stringEsc>

49

<tagGroup>

설명이 태그는 하나 이상의 태그를 그룹화하여 동일한 색상 및 스타일을 지정할 수 있도록 합니다.

속성id, name, taglibrary, tags


• name="display_name" Dreamweaver의 코드 색상 편집기에 표시되는 문자열입니다.

• taglibrary="tag_library_id" 현재 태그 그룹이 속한 태그 라이브러리의 식별자입니다.

• tags="tag_list" 태그 그룹을 구성하는 태그 또는 콤마로 구분된 태그 목록입니다.

예제<tagGroup name="HTML Table Tags" id="CodeColor_HTMLTable" taglibrary="DWTagLibrary_html"

tags="table,tbody,td,tfoot,th,thead,tr,vspec,colw,hspec" />

scheme 블록 구분 문자 색상 표시blockStart scheme 속성은 블록 열기 및 닫기 또는 블록 구분 문자의 색상 표시를 제어합니다. blockStart 속성에 다음과 같은 값을 사용할 수 있습니다.

참고: blockStart.scheme 속성과 scheme 태그를 혼동하지 않도록 하십시오.

innerText

이 값은 블록 텍스트 내부에서 해당 체계의 기본 텍스트와 동일하게 블록 텍스트에 색상을 표시하도록 지정합니다.

Template 체계에 이 체계의 효과를 나타내는 예제가 제공되어 있습니다. Template 체계는 편집할 수 없음을 나타내기 위하여 읽기 전용 코드 블록을 회색으로 표시합니다. 블록 구분 문자는  및  문자열이며 이들도 편집할 수 없기 때문에 회색으로 표시됩니다.

샘플 코드

<p><b><font size="+2">header</font></b></p>



<p>Here's some editable text </p>

<p> </p>



예제<blockStart doctypes="ASP-JS,ASP-VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion,CFC, HTML,

JSP,LibraryItem,PHP_MySQL" scheme="innerText"><![CDATA[<!--\s*#BeginTemplate]]>

</blockStart>

customText

이 값은 사용자 정의 색상을 사용하여 블록 구분 문자에 색상을 표시하도록 지정합니다.

샘플 코드PHP 스크립트의 블록에 사용되는 구분 문자는 빨간색으로 표시되며 customText 값의 효과를 보여줍니다.<?php

if ($loginMsg <> "")

echo $loginMsg;

?>


50

예제<blockStart name="Block Delimiter" id="CodeColor_JavaBlock" doctypes="JSP"

scheme="customText"><![CDATA[<%]]></blockStart>

outerTag

outerTag 값은 blockStart와 blockEnd 태그가 쌍을 이루며, 이들이 사용되는 체계에서 해당 태그들을 일반 태그와 마찬가지로 간주하고 색상을 표시할 것을 지정합니다.

<script> 및 </script> 문자열이 blockStart 및 blockEnd 태그에 해당하는 JavaScript 체계를 생각해 보면 이 값의 역할을 이해할 수 있습니다. 이 체계는 태그를 인식하지 않는 JavaScript 코드 블록과 일치하므로 구분 문자를 포함하는 체계에 의해 구분 문자를 표시해야 합니다.

샘플 코드<script language="JavaScript">

// 주석if (true)

window.alert("Hello, World");

</script>

예제<blockStart doctypes="PHP_MySQL" scheme="outerTag">

<![CDATA[<script\s+language="php">]]></blockStart>

innerTag

이 값은 태그 색상 표시가 구분 문자 내부의 체계에 의해 이루어지는 점을 제외하면 outerTag 값과 동일합니다. 이 값은 현재 html 태그에 사용되고 있습니다.

nameTag

이 값은 blockStart 문자열은 열기 태그이고 blockEnd 문자열은 닫기 태그이며 이러한 구분 문자는 체계의 태그 설정에 따라 색상이 지정된다는 것을 지정합니다.

이 형식의 체계는 cfoutput 태그와 같이 다른 태그 내에 포함될 수 있는 태그를 표시합니다.

샘플 코드<input type="text" name="zip"

<cfif newRecord IS "no">

<cfoutput query="employee"> Value="#zip#" </cfoutput>

</cfif>

>

예제<blockStart doctypes="ColdFusion,CFC" scheme="nameTag">

<![CDATA[<cfoutput\n]]></blockStart>

nameTagScript

이 값은 nameTag 체계와 동일합니다. 그러나, 속성 name=value 쌍과 달리 할당 문이나 표현식과 같은 스크립트가 내용이 됩니다.

이 형식의 체계는 ColdFusion cfset, cfif 및 cfifelse 태그와 같이 태그 자체 내부에 스크립트를 포함하는 독특한 형식의 태그를 표시하며 다른 태그 내부에 포함될 수 있습니다.

샘플 코드자세한 내용은 50페이지의 “nameTag”의 샘플 텍스트를 참조하십시오.


51

예제<blockStart doctypes="ColdFusion,CFC"

scheme="nameTagScript"><![CDATA[<cfset\n]]></blockStart>

체계 처리Dreamweaver에는 CSS 모드, Script 모드 및 Tags 모드의 세 가지 기본 코드 색상 표시 모드가 있습니다.

각 모드에서, Dreamweaver는 특정 필드에 대해서만 코드 색상 표시를 적용합니다. 다음 도표는 각 모드에서 코드 색상 표시에 영향을 받는 필드를 나타낸 것입니다.

체계 정의 과정을 보다 유연하게 만들기 위해 Dreamweaver에서는 와일드카드 및 이스케이프 문자를 지정할 수 있도록 합니다.

와일드카드 문자다음 목록은 Dreamweaver에서 지원하는 와일드카드 문자와 문자를 지정하기 위한 문자열, 그리고 사용 방법에 대해 설명한 것입니다.

필드 CSS Tags Script

defaultText X X

defaultTag X

defaultAttribute X

comment X X X

string X X X

cssProperty X

cssSelector X

cssValue X

character X X

function keyword X

identifier X

number X X

operator X

brackets X X

keywords X X

와일드카드 이스케이프 문자열

설명

와일드카드 \* 이 와일드카드 다음의 문자가 발견될 때까지 모든 문자를 건너뜁니다. 예를 들어, <MMTInstance:Editable name="\*">이라고 지정하면 name 속성이 지정된 이 유형의 모든 태그를 나타냅니다.

이스케이프 문자와 함께 사용되는 와일드카드

\e*x 여기에서 x는 이스케이프 문자입니다.

이스케이프 문자를 지정할 수 있다는 것을 제외하면 와일드카드와 동일합니다. 이스케이프 문자 다음에 나오는 문자는 모두 무시되므로 와일드카드 처리를 종료시키는 기준과 일치하지 않아도 와일드카드 다음에 나오는 문자가 해당 문자열에 나타나도록 할 수 있습니다.

예를 들어, /\e*\\/는 슬래시(/)로 시작하고 끝나는 JavaScript 일반 표현식을 인식하고 백슬래시(\)가 앞에 나오는 슬래시를 포함할 수 있습니다. 백슬래시는 코드 색상 표시 이스케이프 문자이기 때문에 코드 색상 표시 XML에 백슬래시를 지정할 때에는 앞에 백슬래시를 추가해야 합니다.

52

이스케이프 문자다음 목록은 Dreamweaver에서 지원하는 이스케이프 문자와 문자를 지정하기 위한 문자열, 그리고 사용 방법에 대해 설명한 것입니다.

최대 문자열 길이데이터 문자열에 허용되는 최대 길이는 100자입니다. 예를 들어, 다음 blockEnd 태그에는 와일드카드 문자가 포함되어 있습니다.<blockEnd><![CDATA[]]></blockEnd>

선택적 공백 문자 와일드카드 문자열(\s*)이 단일 공백 문자(Dreamweaver에서 자동으로 생성됨)라고 가정하면 와일드카드 문자열(\*)의 길이를 합쳐 데이터 문자열의 이름에 사용된 길이는 26자가 됩니다.

이 경우, 편집 가능한 영역 이름은 최대 길이인 100문자에서 26을 뺀 74문자가 남습니다.

체계 우선 순위Dreamweaver는 다음과 같은 알고리즘을 사용하여 [코드] 뷰의 텍스트 구문에 색상을 표시합니다.

1 Dreamweaver는 현재 파일의 문서 형식에 따라 초기 구문 체계를 결정합니다. 파일 문서 형식은 scheme.documentType 속성에 맞춰집니다. 일치하는 형식을 찾을 수 없는 경우, scheme.documentType = "Text"로 지정된 체계를 사용합니다.

2 체계에 blockStart...blockEnd 쌍이 지정되어 있으면 이 체계를 중첩할 수 있습니다. blockStart.doctypes 속성 중 하나에 나열된 현재 파일 확장명을 가진 중첩 가능한 모든 체계는 현재 파일에 대해 사용 가능하게 되며 나머지 체계는 사용 불가능해집니다.

참고: 모든 blockStart/blockEnd 조합은 고유해야 합니다.

scheme.priority가 외부에 지정된 체계와 같거나 큰 체계는 외부 체계 내에 중첩될 수 있습니다. 외부 체계와 우선 순위가 같은 체계는 외부 체계의 본문 상태에만 중첩시킬 수 있습니다. 예를 들어, <script>...</script> 블록은 <html>...</html> 블록 내에만 중첩될 수 있습니다. 이때, 이 태그들은 특정 태그, 속성, 문자열, 주석 등의 내부에 존재하면 안 됩니다.

선택적 공백 문자 \s* 0개 이상의 공백 문자나 개행 문자를 나타냅니다.

예를 들어, <!--\s*#include는 ASP의 include 지시문을 나타냅니다. 이 지시문은 #include 토큰 앞의 공백 문자를 무시하기 때문에 공백 문자의 존재 유무에 관계없이 유효한 표현이 됩니다.

공백 문자 와일드카드는 공백 문자와 개행 문자의 모든 조합을 나타냅니다.

필수 공백 문자 \s+ 1개 이상의 공백 문자나 개행 문자를 나타냅니다.

예를 들어, <!--#include\s+virtual은 #include와 virtual 사이에 임의의 공백 문자 조합이 있는 ASP include 지시문을 나타냅니다. 공백 문자는 이 두 토큰 사이에 반드시 존재해야 합니다. 그러나 유효한 공백 문자라면 개수와 조합에 관계없습니다.

공백 문자 와일드카드는 공백 문자와 개행 문자의 모든 조합을 나타냅니다.

이스케이프 문자 이스케이프 문자열

설명

백슬래시 \\ 백슬래시 문자(\)는 코드 색상 표시 이스케이프 문자이므로 코드 색상 표시 규칙에 지정되려면 이스케이프 문자로 처리되어야 합니다.

공백 문자 \s 이 이스케이프 문자는 개행 이스케이프 문자와 일치하는 공백 문자를 제외한 표시되지 않는 모든 문자(예: 공백 및 탭 문자)를 나타냅니다.

선택적 공백 문자와 필수 공백 문자는 공백 문자와 개행 문자 모두에 적용됩니다.

개행 문자 \n 이 이스케이프 문자는 개행 또는 줄 바꿈 문자를 나타냅니다.

와일드카드 이스케이프 문자열

설명


53

외부 체계보다 우선 순위가 높은 체계는 외부 체계 내의 거의 모든 곳에서 중첩될 수 있습니다. 예를 들어, <%...%> 블록은 <html>...</html> 블록의 본문 상태에 중첩되는 것은 물론이고 태그, 속성, 문자열, 주석 등의 내부에 중첩될 수 있습니다.

최대 중첩 레벨은 4입니다.

3 blockStart 문자열이 일치하는 경우, Dreamweaver는 가장 길게 일치하는 문자열을 사용합니다.

4 현재 체계에 대해 blockEnd 문자열에 도달하면 blockStart 문자열이 발견된 장소의 상태를 반환합니다. 예를 들어, <%...%> 블록이 HTML 문자열 내에서 발견되면 HTML 문자열 색상으로 간주하고 이 블록에 색상을 표시합니다.

체계 편집코드 색상 표시 파일을 편집하거나 다음 그림에 나타낸 것처럼 Dreamweaver [환경 설정] 대화 상자에서 [코드 색상 표시] 범주를 선택하여 코드 색상 표시에 대한 스타일을 편집할 수 있습니다.

stringStart와 같이 한 번 이상 지정할 수 있는 필드에는 첫 번째 태그에만 색상과 스타일을 설정합니다. 여러 태그에 걸쳐 색상과 스타일을 분리하여 설정한 후 나중에 [환경 설정] 대화 상자에서 이 색상이나 스타일을 편집하면 데이터를 잃게 됩니다.

참고: 수정하기 전에 모든 XML 파일의 백업 사본을 만들어 두는 것이 좋습니다. [환경 설정] 대화 상자를 사용하여 색상과 스타일 설정을 편집하기 전에 수동으로 변경하는 모든 설정을 확인해야 합니다. [환경 설정] 대화 상자를 사용하여 잘못된 XML 파일을 편집하면 데이터를 잃게 됩니다.


54

[환경 설정] 대화 상자에서 [코드 색상 표시] 범주를 사용해 특정 체계에 대한 스타일을 편집하려면, [문서 형식]을 두 번 클릭하거나 [코드 색상 표시 체계 편집] 버튼을 클릭하여 [색상 표시 체계 편집] 대화 상자를 엽니다.

특정 요소에 대한 스타일을 편집하려면 [스타일] 목록에서 해당 요소를 선택합니다. [스타일] 목록에 표시된 항목에는 편집될 체계에 대한 필드와 현재 체계 내에서 블록으로 나타날 체계가 포함되어 있습니다. 예를 들어, HTML 체계를 편집하는 경우 CSS에 대한 필드와 JavaScript 블록도 목록에 표시됩니다.

특정 체계에 대하여 나열된 필드 목록은 해당 XML 파일에 정의된 필드에 해당합니다. scheme.name 속성의 값은 [스타일] 창에 나열되는 각 필드보다 먼저 나타납니다. 이름이 없는 필드는 목록에 표시되지 않습니다.

특정 요소에 대한 스타일 또는 형식에는 코드 색상 표시 외에도 굵게, 기울임, 밑줄 및 배경 색상이 포함됩니다. [스타일] 목록에서 한 항목을 선택한 후 이러한 스타일 특성을 바꿀 수 있습니다.

[미리 보기] 영역에는 현재 설정 값을 사용하여 표현될 샘플 텍스트의 모양이 표시됩니다. 샘플 텍스트는 해당 체계의 sampleText에서 가져온 것입니다.

[미리 보기] 영역에서 요소를 선택하면 [스타일] 목록의 선택 항목이 바뀝니다.

특정 체계의 요소에 대한 설정을 변경하면 Dreamweaver는 이 값을 코드 색상 표시 파일에 저장하고 원래 설정을 덮어 씁니다. [확인]을 클릭하면 변경된 모든 코드 색상 표시 설정이 자동으로 다시 로드됩니다.

코드 색상 표시 예제다음 코드 색상 표시 예제는 CSS 문서와 JavaScript 문서에 대한 코드 색상 표시 체계를 보여줍니다. JavaScript 예제의 키워드 목록은 예제를 짧게 만들기 위해 약자로 나타내었습니다.

CSS 코드 색상 표시<scheme name="CSS" id="CSS" doctypes="CSS" priority="50">

<ignoreCase>Yes</ignoreCase>

<ignoreTags>Yes</ignoreTags>

<blockStart doctypes="ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion,

CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL" scheme="outerTag">

<![CDATA[<style>]]></blockStart>

<blockEnd><![CDATA[</style>]]></blockEnd>



<![CDATA[<style\s+\*>]]></blockStart>

<blockEnd><![CDATA[</style>]]></blockEnd>

<commentStart name="Comment" id="CodeColor_CSSComment"><![CDATA[ /*]]></commentStart>

<commentEnd><![CDATA[*/]]></commentEnd>

55

<endOfLineComment><![CDATA[]]></endOfLineComment>

<stringStart name="String" id="CodeColor_CSSString"><![CDATA["]]></stringStart>

<stringEnd><![CDATA["]]></stringEnd>

<stringStart><![CDATA[']]></stringStart>

<stringEnd><![CDATA[']]></stringEnd>

<stringEsc><![CDATA[\]]></stringEsc>

<cssSelector name="Selector" id="CodeColor_CSSSelector" />

<cssProperty name="Property" id="CodeColor_CSSProperty" />

<cssValue name="Value" id="CodeColor_CSSValue" />

<sampleText doctypes="CSS"><![CDATA[/* Comment */

H2, .head2{

font-family : 'Sans-Serif';

font-weight : bold;

color : #339999;

}]]>

</sampleText>

</scheme>

CSS 샘플 텍스트CSS 체계에 대한 다음 샘플 텍스트는 CSS 코드 색상 표시 체계를 보여줍니다./* Comment */

H2, .head2{

font-family : 'Sans-Serif';

font-weight : bold;

color : #339999;

}

다음 예제는 Colors.xml 파일에서 일부를 발췌하였으며 코드 색상 표시 체계에 지정되어 샘플 텍스트를 표시한 색상 및 스타일 값을 보여줍니다.<syntaxColor id="CodeColor_CSSSelector" text="#FF00FF" />

<syntaxColor id="CodeColor_CSSProperty" text="#000099" />

<syntaxColor id="CodeColor_CSSValue" text="#0000FF" />

JavaScript 코드 색상 표시<scheme name="JavaScript" id="JavaScript" doctypes="JavaScript" priority="50">

<ignoreCase>No</ignoreCase>

<ignoreTags>Yes</ignoreTags>



<![CDATA[<script>]]></blockStart>

<blockEnd><![CDATA[</script>]]></blockEnd>



<![CDATA[<script\s+\*>]]></blockStart>

<blockEnd><![CDATA[</script>]]></blockEnd>

<commentStart name="Comment" id="CodeColor_JavascriptComment">

<![CDATA[/*]]></commentStart>

<commentEnd><![CDATA[*/]]></commentEnd>

<endOfLineComment><![CDATA[//]]></endOfLineComment>

<endOfLineComment><![CDATA[]]></endOfLineComment>

<stringStart name="String" id="CodeColor_JavascriptString">

<![CDATA["]]></stringStart>

<stringEnd><![CDATA["]]></stringEnd>

<stringStart><![CDATA[']]></stringStart>


56

<stringEnd><![CDATA[']]></stringEnd>

<stringEsc><![CDATA[\]]></stringEsc>

<brackets name="Bracket" id="CodeColor_JavascriptBracket">

<![CDATA[{[()]}]]></brackets>

<operators name="Operator" id="CodeColor_JavascriptOperator">

<![CDATA[+-*/%<>!?:=&|^]]></operators>

<numbers name="Number" id="CodeColor_JavascriptNumber" />

<regexp name="RegExp" id="CodeColor_JavascriptRegexp" delimiter="/" escape="\\">

<searchPattern><![CDATA[(\s*/\e*\\/]]></searchPattern>

<searchPattern><![CDATA[=\s*/\e*\\/]]></searchPattern>

</regexp>

<idChar1>_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</idChar1>

<idCharRest name="Identifier" id="CodeColor_JavascriptIdentifier">

_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</idCharRest>

<functionKeyword name="Function Keyword" id="CodeColor_JavascriptFunction">

function</functionKeyword>

<keywords name="Reserved Keywords" id="CodeColor_JavascriptReserved">

<keyword>break</keyword>

...

</keywords>

<keywords name="Native Keywords" id="CodeColor_JavascriptNative">

<keyword>abs</keyword>

...

</keywords>

<keywords id="CodeColor_JavascriptNumber">

<keyword>Infinity</keyword>

<keyword>Nan</keyword>

</keywords>

<keywords name="Client Keywords" id="CodeColor_JavascriptClient">

<keyword>alert</keyword>

...

</keywords>

<sampleText><![CDATA[/* JavaScript */




}

}



]]></sampleText>

</scheme>

JavaScript 샘플 텍스트아래에 나타낸 JavaScript 체계에 대한 샘플 텍스트는 JavaScript 코드 색상 표시 체계를 보여줍니다./* JavaScript */




}

}




57

다음 예제는 Colors.xml 파일에서 일부를 발췌하였으며 코드 색상 표시 체계에 지정되어 샘플 텍스트를 표시한 색상 및 스타일 값을 보여줍니다.<syntaxColor id="CodeColor_JavascriptComment" text="#999999" italic="true" />

<syntaxColor id="CodeColor_JavascriptFunction" text="#000000" bold="true" />

<syntaxColor id="CodeColor_JavascriptBracket" text="#000099" bold="true" />

<syntaxColor id="CodeColor_JavascriptNumber" text="#FF0000" />

<syntaxColor id="CodeColor_JavascriptClient" text="#990099" />

<syntaxColor id="CodeColor_JavascriptNative" text="#009999" />

코드 유효성 검사[코드] 뷰에 문서가 열릴 때, Dreamweaver는 사용자가 선택한 대상 브라우저에 사용할 수 없는 태그, 속성, CSS 속성 또는 CSS 값이 문서에 사용되고 있는지 자동으로 검사한 다음 오류가 있는 경우에는 빨간색의 물결 모양 밑줄로 표시합니다.

Dreamweaver에서는 새로운 브라우저 호환성 확인 기능이 있어 브라우저 렌더링 문제를 일으키는 HTML과 CSS 조합을 찾을 수도 있습니다.

Dreamweaver는 Dreamweaver Configuration 폴더의 Browser Profile 폴더에 브라우저 프로파일을 저장합니다. 각 브라우저 프로파일은 해당 브라우저를 나타내는 이름이 지정된 텍스트 파일에 정의됩니다. 예를 들어, Internet Explorer 6.0에 대한 브라우저 프로파일은 Internet_Explorer_6.0.txt입니다. Dreamweaver는 대상 브라우저가 CSS를 지원하는지 검사하기 위하여 해당 브라우저에 대한 CSS 프로파일 정보를 XML 파일에 저장합니다. 이 XML 파일의 이름은 브라우저 프로파일 이름을 사용하지만 _CSS.xml이라는 접미어가 붙습니다. 예를 들어, Internet Explorer 6.0에 대한 CSS 프로파일은 Internet_Explorer_6.0_CSS.xml입니다. 원치 않는 오류가 보고되면 CSS 프로파일 파일을 변경해야 합니다.

CSS 프로파일 파일은 css-support, property 및 value의 세 가지 XML 태그로 구성됩니다. 다음 단원에서 이 세 태그에 대해 설명합니다.

<css-support>

설명이 태그는 특정 브라우저가 지원하는 property 및 value 태그 세트에 대한 루트 노드입니다.

속성없음

내용property 및 value 태그입니다.

컨테이너없음

예제<css-support>

...

</css-support>


58

<property>

설명브라우저 프로파일에 대해 지원되는 CSS 속성을 정의합니다.

속성name, names, supportlevel, message

• name="property_name" 지원할 속성의 이름입니다.• names="property_name, property_name, ..." 콤마로 구분한 지원할 속성 이름의 목록입니다.

names 속성은 일종의 약어입니다. 예를 들어, 다음 names 속성은 그 다음에 나오는 name 속성을 정의하는 간편한 방법입니다.<property names="foo,bar">

<value type="named" name="top"/>

<value type="named" name="bottom"/>

</property>

<property name="foo">



</property>

<property name="bar">



</property>

• supportlevel="error", "warning", "info" 또는 "supported" 속성의 지원 레벨을 지정합니다. 이 속성이 지정되지 않으면 "supported"로 간주됩니다. "supported" 이외의 지원 레벨을 지정하고 message 속성을 생략하면 기본 메시지인 “CSS property name property_name은 지원되지 않습니다.”

• message="message_string" message 속성은 문서에서 해당 속성이 발견될 때 표시되는 메시지 문자열을 정의합니다. 메시지 문자열은 속성값에 사용할 수 있는 값이나 사용 방법 등을 정의합니다.

내용value

컨테이너css-support

예제<property name="background-color" supportLevel="supported">

<value>

설명현재 속성에 지원되는 값의 목록을 정의합니다.

속성type, name, names, supportlevel, message

• type="any", "named", "units", "color", "string" 또는 "function" 값의 유형을 지정합니다. "named", "units" 또는 "color"를 지정하면 name이나 names 속성 중 하나는 반드시 값 ID를 지정하여 이 항목과 일치시켜야 합니다. "units" 값은 수치 값에 해당하며 names 속성에 지정된 단위 값 중 하나가 뒤따라야 합니다.

• name="value_name" CSS 값 식별자입니다. 하이픈(-) 이외의 다른 공백 문자나 구두점은 사용할 수 없습니다. 부모 속성 노드에서 이름이 지정된 CSS 속성에 유효한 값 중 하나의 이름입니다. 이 속성은 특정 값이나 단위 지정자를 나타낼 수 있습니다.

• names="name1, name2, ..." 콤마로 구분된 값 ID의 목록을 지정합니다.• supportlevel="error", "warning", "info" 또는 "supported" 브라우저의 지원 레벨을 지정합니다. 이 속성이 지정되지 않으면 "supported"로 간주됩니다.

• message="message_string" message 속성은 문서에서 해당 속성이 발견될 때 표시되는 메시지 문자열을 정의합니다. message 속성이 생략되면 “value_name은 지원되지 않습니다.”


59

내용없음

컨테이너property

예제<property name="margin">

<value type="units" name="ex" supportlevel="warning"

message="The implementation of ex units is buggy in Safari 1.0."/>

<value type="units" names="%,em,px,in,cm,mm,pt,pc”/>

<value type="named" name="auto"/>

<value type="named" name="inherit"/>

</property>

기본 HTML 서식 변경일반적인 코드 포맷 지정 환경 설정을 바꾸려면 [환경 설정] 대화 상자의 [코드 포맷] 범주를 사용합니다. 특정 태그 및 속성의 서식을 바꾸려면 [태그 라이브러리 편집기]([편집] > [태그 라이브러리])를 사용합니다. 자세한 내용은 [Dreamweaver 도움말] 메뉴에서 Dreamweaver 사용 설명서를 참조하십시오.

Tag Libraries 구성 폴더에서 태그에 대응하는 VTM 파일을 편집하여 태그의 서식을 수정할 수도 있지만 Dreamweaver를 이용하는 것이 더 쉽습니다.

VTM 파일을 추가하거나 제거하면 TagLibraries.vtm 파일을 편집해야 합니다. TagLibraries.vtm에 나열되지 않은 VTM 파일은 모두 무시됩니다.

참고: 이 파일은 Dreamweaver가 아닌 텍스트 편집기에서 편집해야 합니다.

60

4장: Dreamweaver 확장

일반적으로 Adobe Dreamweaver CS3 Extension을 만들어 다음과 같은 유형의 작업을 수행합니다.

• HTML, CFML 또는 JavaScript 삽입, 텍스트나 이미지 속성 변경, 또는 표 정렬과 같은 현재 문서에 대한 변경 작업을 자동화합니다.

• 응용 프로그램과 상호 작용하여 자동으로 윈도우 또는 문서를 열거나 닫고 키보드 단축키를 변경하는 등의 작업을 수행합니다.

• Dreamweaver 사용자가 데이터베이스와 연동된 동적 페이지를 만들 수 있도록 데이터베이스 소스에 연결합니다.

• 현재 문서에 서버 코드 블록을 삽입하고 관리합니다.

일반적으로 자주 사용되는 반복적인 작업을 처리하기 위한 용도로 Extension을 만드는 경우도 있습니다. 또는 특수한 상황에 필요한 Extension을 만들어야 하는 경우도 있습니다. 어느 경우이든 Dreamweaver에서는 기능을 추가하거나 사용자 정의하는 데 사용할 수 있는 방대한 도구를 제공합니다.

Dreamweaver Extension을 만들려면 2페이지의 “Extension 만들기”에 설명된 단계를 따라야 합니다.

Extension을 만들 수 있는 Dreamweaver 기능은 다음과 같습니다.

• HTML 파서(렌더러라고도 함) - 양식 필드, 절대 위치 요소, 이미지 및 기타 HTML 요소를 사용하여 Extension용 사용자 인터페이스(UI)를 디자인할 수 있도록 합니다. Dreamweaver에는 자체 HTML 파서가 포함되어 있습니다.

• 폴더 트리 - Dreamweaver 요소 및 Extension을 구현하고 구성하는 파일을 조직적으로 저장합니다.

• 일련의 응용 프로그램 프로그래밍 인터페이스(API) - JavaScript를 통하여 Dreamweaver 기능을 사용할 수 있도록 합니다.

• JavaScript 인터프리터 - Extension 파일에서 JavaScript 코드를 실행합니다. Dreamweaver는 Netscape JavaScript 버전 1.5 인터프리터를 사용합니다. 이 버전의 인터프리터와 이전 버전 간의 차이점에 대한 자세한 내용은 64페이지의 “Extension에서 Dreamweaver의 JavaScript 처리 방법”을 참조하십시오.

Dreamweaver Extension의 유형다음 목록에서는 이 설명서에 언급된 Dreamweaver Extension의 유형에 대해 설명합니다.

삽입 막대 객체 Extension은 [삽입] 막대를 변경합니다. 일반적으로 객체는 문서에 코드를 삽입하는 과정을 자동화하는 데 사용됩니다. 사용자 입력을 받아들이는 양식과 입력을 처리하는 JavaScript를 포함할 수도 있습니다. 객체 파일은 Configuration/ Objects 폴더에 저장됩니다.

명령 Extension은 사용자 입력 여부에 상관없이 특정 작업을 거의 모두 수행할 수 있습니다. 일반적으로 명령 파일은 [명령] 메뉴에서 호출하지만 다른 Extension에서 호출할 수도 있습니다. 명령 파일은 Configuration/Commands 폴더에 저장됩니다.

메뉴 명령 Extension은 명령 API를 확장하여 메뉴에서 명령을 호출하는 것과 관련된 작업을 수행합니다. 메뉴 명령 API는 동적 하위 메뉴도 작성할 수 있도록 합니다.

툴바 Extension은 기존 툴바에 요소를 추가하거나 새로운 툴바를 Dreamweaver UI에 만들 수 있습니다. 새로운 툴바는 기본 툴바 아래에 표시됩니다. 툴바 파일은 Configuration/Toolbars 폴더에 저장됩니다.

보고서 Extension은 사용자 정의 사이트 보고서를 추가하거나 Dreamweaver와 함께 제공된 기존 보고서를 수정할 수 있습니다. 결과 윈도우 API를 사용하여 독립된 보고서를 만들 수도 있습니다.

태그 라이브러리 및 편집기 Extension은 관련 태그 라이브러리 파일 작업을 수행합니다. 태그 라이브러리 및 편집기 Extension은 기존 태그 대화 상자의 속성을 수정하고, 새 태그 대화 상자를 만들고, 태그 라이브러리에 태그를 추가할 수 있습니다. 태그 라이브러리 및 편집기 Extension 파일은 Configuration/TagLibraries 폴더에 저장됩니다.


61

속성 관리자 Extension은 속성 관리자 패널에 나타납니다. Dreamweaver에 있는 대부분의 관리자는 핵심 제품 코드의 일부로서 수정할 수 없지만, 사용자 정의 속성 관리자 파일은 Dreamweaver의 내장 속성 관리자 인터페이스에 우선하여 사용되거나 사용자 정의 태그를 관리하기 위한 새 관리자를 만들 수 있습니다. 관리자는 Configuration/Inspectors 폴더에 저장됩니다.

부동 패널 Extension은 부동 패널을 Dreamweaver UI에 추가합니다. 부동 패널은 선택 영역, 문서 또는 작업 상태에 따라 다르게 동작합니다. 또한 부동 패널은 유용한 정보를 표시합니다. 부동 패널 파일은 Configuration/Floaters 폴더에 저장됩니다.

비헤이비어 Extension은 사용자가 문서에 JavaScript 코드를 추가할 수 있도록 합니다. JavaScript 코드는 문서가 브라우저에 표시될 때 이벤트에 대한 응답으로 특정 작업을 수행합니다. 비헤이비어 Extension은 Dreamweaver [비헤이비어] 패널의 플러스(+) 메뉴에 나타납니다. 비헤이비어 파일은 Configuration/Behaviors/Actions 폴더에 저장됩니다.

서버 비헤이비어 Extension은 문서에 서버측 코드 블록(ASP, JSP 또는 ColdFusion)을 추가합니다. 서버측 코드는 문서가 브라우저에 표시될 때 서버에 대한 작업을 수행합니다. 서버 비헤이비어는 Dreamweaver [서버 비헤이비어] 패널의 플러스(+) 메뉴에 나타납니다. 서버 비헤이비어 파일은 Configuration/Server Behaviors 폴더에 저장됩니다.

데이터 소스 Extension은 데이터베이스에 저장된 동적 데이터에 연결할 수 있도록 합니다. 데이터 소스 Extension은 [바인딩] 패널의 플러스(+) 메뉴에 나타납니다. 데이터 소스 파일은 Configuration/Data Sources 폴더에 저장됩니다.

서버 포맷 Extension은 동적 데이터의 포맷을 정의할 수 있도록 합니다.

구성 요소 Extension은 [구성 요소] 패널에 새로운 유형의 구성 요소를 추가할 수 있도록 합니다. 구성 요소는 웹 서비스, JavaBeans 및 ColdFusion 구성 요소(CFC) 등과 같이 최근 유행하는 캡슐화 방법에 대해 설명하기 위하여 Dreamweaver가 사용하는 용어입니다.

서버 모델 Extension은 새 서버 모델 지원을 추가할 수 있도록 합니다. Dreamweaver에서는 가장 일반적인 서버 모델(ASP, JSP, ColdFusion, PHP 및 ASP.NET)을 지원합니다. 서버 모델 Extension은 사용자 정의 서버 솔루션, 서로 다른 언어 또는 사용자 정의 서버의 경우에만 필요합니다. 서버 모델 파일은 Configuration/ServerModels 폴더에 저장됩니다.

데이터 변환기 Extension은 [문서] 윈도우의 [디자인] 뷰에 나타난 HTML이 아닌 코드를 HTML로 변환합니다. 또한 이 Extension은 HTML이 아닌 코드를 Dreamweaver가 파싱하지 않도록 이러한 코드를 잠급니다. 변환기 파일은 Configuration/Translators 폴더에 저장됩니다.

기타 Dreamweaver 확장 방법또한 다음과 같은 Dreamweaver 요소의 기능을 필요에 맞게 확장할 수 있습니다.

문서 유형 Dreamweaver가 다양한 서버 모델을 처리하는 방법에 대해 정의합니다. 서버 모델의 문서 유형에 대한 정보는 Configuration/DocumentTypes 폴더에 저장됩니다. 자세한 내용은 13페이지의 “Dreamweaver의 확장 가능한 문서 유형”을 참조하십시오.

코드 단편 Dreamweaver의 Configuration/Snippets 폴더에 코드 단편(CSN) 파일로 저장되어 [코드 단편] 패널에서 이용할 수 있는 재사용 가능한 코드 블록입니다. 별도로 코드 단편 파일을 만들어 Snippets 폴더에 설치해 사용할 수도 있습니다.

코드 힌트 입력하려는 문자열을 완성하는 문자열 목록을 표시하여 간단히 입력을 완성할 수 있도록 해주는 메뉴입니다. 메뉴에 있는 문자열 중 하나가 입력하려는 문자열과 일치하는 경우, 해당 항목을 선택하면 현재 입력하고 있는 문자열 위치에 삽입할 수 있습니다. 코드 힌트 메뉴는 Configuration/CodeHints 폴더의 codehints.xml 파일에 정의됩니다. 이 파일에 새로 정의한 태그나 함수에 대한 코드 힌트를 추가할 수도 있습니다.

메뉴 Configuration/Menus 폴더의 menus.xml 파일에 정의되어 있습니다. 사용자 Extension에 대하여 menu 태그를 menus.xml 파일에 추가하여 새로운 Dreamweaver 메뉴를 추가할 수 있습니다. 자세한 내용은 118페이지의 “메뉴 및 메뉴 명령”을 참조하십시오.


62

Configuration 폴더 및 ExtensionDreamweaver Configuration 폴더에 저장된 폴더 및 파일에는 Dreamweaver와 함께 제공되는 Extension이 들어 있습니다. 사용자가 Extension을 작성할 때는 올바른 폴더에 파일을 저장해야만 Dreamweaver에서 해당 파일을 인식할 수 있습니다. 예를 들어, 속성 관리자 Extension을 만들 경우 파일을 Configuration/Inspectors 폴더에 저장합니다. Adobe Exchange 웹 사이트(www.adobe.com/go/exchange_kr)에서 Extension을 다운로드하여 설치하는 경우에는 Extension 관리자가 자동으로 Extension 파일을 올바른 폴더에 저장합니다.

Dreamweaver Configuration 폴더의 파일을 예제로 사용할 수도 있지만 이 파일들은 대부분 Adobe Exchange 웹 사이트에서 이용할 수 있는 Extension보다 복잡합니다. Configuration 폴더 내에 있는 각 하위 폴더의 내용에 대한 자세한 내용은 Configuration_ReadMe.htm 파일을 참조하십시오.

Configuration/Shared 폴더는 특정 Extension 유형에 대응되지 않습니다. 이 폴더는 하나 이상의 Extension에 의해 사용되는 유틸리티 함수, 클래스 및 이미지를 모아둔 곳입니다. Configuration/Shared/Common 폴더의 파일은 다양한 Extension에 유용하도록 설계되어 있습니다. 이 파일들은 JavaScript 기술 예제 및 유틸리티로 활용할 수 있습니다. 특정 객체에 대한 유효한 문서 객체 모델(DOM) 참조를 만들거나, 현재 선택 항목이 특정 태그 내에 있는지 여부를 테스트하거나, 문자열 내의 특수 문자를 이스케이프 처리하는 것과 같은 특정 작업을 수행하는 함수는 먼저 이 폴더에서 찾습니다. 공통 파일을 만든다면 다음 그림에 나타낸 것과 같이 Configuration/Shared/Common 폴더에 별도의 하위 폴더를 작성하고 공통 파일을 이 폴더에 저장해야 합니다.

Configuration/Shared/Common/Scripts 폴더 구조

Shared 폴더에 대한 자세한 내용은 315페이지의 “Shared 폴더”를 참조하십시오.

http://www.adobe.com/go/exchange


63

다중 사용자 Configuration 폴더Windows XP, Windows 2000 및 Macintosh OS X와 같은 다중 사용자 운영 체제의 경우, Dreamweaver는 Dreamweaver Configuration 폴더 외에 각 사용자에 대해 별도의 Configuration 폴더를 만듭니다. Dreamweaver 또는 JavaScript Extension이 Configuration 폴더에 기록할 때마다 Dreamweaver는 자동으로 이 폴더 대신 사용자 Configuration 폴더에 기록합니다. 이러한 방법으로 각 Dreamweaver 사용자는 다른 사용자의 구성 설정을 방해하지 않고 각자의 구성을 사용할 수 있게 됩니다. 자세한 내용은 10페이지의 “다중 사용자 환경에서 Dreamweaver 사용자 정의” 및 Dreamweaver API 참조 설명서의“파일 액세스 및 다중 사용자 구성 API ” 를 참조하십시오.

시작 또는 종료 시 스크립트 실행명령 파일을 Configuration/Startup 폴더에 넣으면 해당 명령이 Dreamweaver가 시작될 때 실행됩니다. 시작 명령은 menus.xml 파일, ThirdPartyTags 폴더의 파일, 그리고 다른 명령, 객체, 비헤이비어, 관리자, 부동 패널 또는 변환기보다 먼저 로드됩니다. 따라서, 시작 명령을 사용하여 menus.xml 파일이나 기타 Extension 파일을 수정할 수 있습니다. 또한, 경고를 표시하거나 사용자에게 정보를 요구하거나 dreamweaver.runCommand() 함수를 호출할 수 있습니다. 그러나 Startup 폴더 내에서 유효한 DOM(Document Object Model)이 필요한 명령을 호출할 수는 없습니다. Dreamweaver DOM에 대한 자세한 내용은 78페이지의 “Dreamweaver 문서 객체 모델”을 참조하십시오.

마찬가지로, Configuration/Shutdown 폴더에 명령 파일을 넣으면 해당 명령은 Dreamweaver가 종료될 때 실행됩니다. 종료 명령에서는 dreamweaver.runCommand()를 호출하거나 경고를 표시하거나 사용자에게 정보를 요구할 수 있지만 종료 프로세스를 중단할 수는 없습니다.

명령에 대한 자세한 내용은 110페이지의 “명령”을 참조하십시오. dreamweaver.runCommand() 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

Extension 새로 고침Dreamweaver에서 작업하는 동안 Extension을 변경하면 해당 Extension을 새로 고쳐 Dreamweaver에서 변경 사항을 인식할 수 있도록 합니다.

Extension을 새로 고치려면1 삽입 막대의 제목 표시줄에서 [범주] 메뉴를 Ctrl 키를 누른 채 클릭(Windows)하거나 Option 키를 누른 채 클릭(Macintosh)합니다.

2 [Extensions 새로 고침]을 선택합니다.

참고: 다중 사용자 운영 체제에서는 마스터 구성 파일을 편집하는 대신, 사용자의 Configuration 폴더에 있는 구성 파일 사본을 편집해야 합니다. 자세한 내용은 62페이지의 “Configuration 폴더 및 Extension”을 참조하십시오.


64

확장 APIDreamweaver는 Extension API의 함수를 호출하여 각 유형의 Extension을 구현합니다. 이 함수의 본문은 각 Extension 유형에 기술된 대로 작성되어야 하며 Dreamweaver가 예측하는 반환값을 지정해야 합니다.

C 프로그래밍 언어를 직접 사용하는 개발자는 동적 연결 라이브러리(DLL)를 작성할 수 있는 C확장 API를 사용할 수 있습니다. 이 API에서 제공하는 기능은 C 언어로 제작된 DLL을 JavaScript로 둘러싸므로 Extension이 Dreamweaver에서 문제 없이 작동할 수 있게 합니다.

확장 API의 설명서에는 각 함수의 기능, Dreamweaver의 호출 시기 및 Dreamweaver가 예측하는 반환값에 대하여 설명되어 있습니다.

유틸리티 API 및 JavaScript API에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오. 이 API는 Extension에서 특정 작업을 수행하는 데 사용할 수 있는 함수를 제공합니다.

Extension에서 Dreamweaver의 JavaScript 처리 방법Dreamweaver는 시작할 때 Configuration/extension_type 폴더를 검사합니다. 이 폴더에 Extension 파일이 있으면 Dreamweaver는 다음 단계에 따라 JavaScript를 처리합니다.

• SCRIPT 태그의 시작과 종료 사이의 모든 내용을 컴파일합니다.

• 함수 선언부에 해당하지 않는 SCRIPT 태그 내의 모든 코드를 실행합니다.

참고: 일부 Extension은 초기화에 전역 변수를 필요로 하기 때문에 시작할 때 반드시 이 과정을 거쳐야 합니다.

Dreamweaver는 SCRIPT 태그의 SRC 속성에 지정된 모든 외부 JavaScript 파일에 대하여 다음과 같은 동작을 수행합니다.

• 파일 내용을 읽습니다.

• 코드를 컴파일합니다.

• 프로시저를 실행합니다.

참고: 처리 중인 Extension 파일의 특정 JavaScript 코드에 문자열 "</SCRIPT>"가 포함되어 있으면 JavaScript인터프리터는 이 문자열을 종료 script 태그로 읽어 종결되지 않은 문자열 리터럴 오류를 보고합니다.이 문제를 해결하려면 문자열을 여러 조각으로 분리한 후 "<' + '/SCRIPT>"와 같이 결합합니다.

Dreamweaver는 사용자가 명령 및 비헤이비어 액션 Extension 유형에 대한 메뉴에서 명령이나 액션을 선택할 때 onLoad 이벤트 핸들러(BODY 태그에 나타난 경우)의 코드를 실행합니다.

문서 본문에 객체 Extension에 대한 양식이 포함되어 있으면 BODY 태그의 onLoad 이벤트 핸들러에 있는 코드를 실행합니다.

Dreamweaver는 다음 Extension에서 BODY 태그에 있는 onLoad 핸들러를 무시합니다.

• 데이터 변환기

• 속성 관리자

• 부동 패널

모든 Extension에서 Dreamweaver는 첨부된 양식 필드와 사용자가 상호 작용할 때 다른 이벤트 핸들러의 코드(예: onBlur="alert('This is a required field.')")를 실행합니다.

Dreamweaver에서는 링크 내에서 이벤트 핸들러를 사용할 수 있습니다. 링크의 이벤트 핸들러는 다음 예제에 있는 구문을 사용해야 합니다.<a href="#" onMouseDown=alert('hi')>link text</a>

항상 play로 설정되는 플러그인은 Extension의 BODY에서 지원됩니다. document.write() 문, Java 애플릿 및 Microsoft ActiveX 컨트롤은 Extension에서 지원되지 않습니다.

65

도움말 표시displayHelp() 함수는 여러 확장 API에 포함되어 있으며 Extension에 포함될 때 다음과 같은 두 가지 작업을 수행합니다.

• 인터페이스에 [도움말] 버튼을 추가합니다.

• 사용자가 [도움말] 버튼을 클릭할 때 displayHelp()를 호출합니다.

도움말을 표시하기 위해서는 displayHelp() 함수의 본문을 작성해야 합니다. displayHelp() 함수의 코드를 작성하는 방법에 따라 Extension에서 도움말이 표시되는 방법이 달라집니다. dreamweaver.browseDocument() 함수를 호출하여 브라우저에 파일을 열 수도 있고 경고 상자의 다른 절대 위치 요소에 메시지를 표시하는 것과 같은 독특한 방법으로 도움말을 표시할 수도 있습니다.

다음 예제는 displayHelp() 함수에서 dreamweaver.browseDocument()를 호출하여 도움말을 표시합니다.// 다음 displayHelp() 인스턴스는 Extension 사용 방법을

// 보여 주는 파일을 브라우저에서 엽니다.function displayHelp(){

var myHelpFile = dw.getConfigurationPath() + "ExtensionsHelp/myExtHelp.htm";

dw.browseDocument(myHelpFile);

}

Extension 지역화다음 기술을 사용하면 보다 쉽게 Extension을 특정 국가의 언어로 번역할 수 있습니다.

• Extension을 HTML과 JavaScript 파일로 분리합니다. HTML 파일은 복제하여 지역화할 수 있으나 JavaScript 파일은 지역화할 수 없습니다.

• 표시 문자열을 JavaScript 파일에 정의하지 않습니다. 경고 상자나 UI 코드가 있는지 검사합니다. 지역화가 가능한 문자열을 Dreamweaver Configuration/Strings 폴더에 별도의 XML 파일로 추출합니다.

• 필수 이벤트 핸들러 외에는 JavaScript 코드를 HTML 코드에 작성하지 않습니다. 이렇게 하면 HTML 파일을 복제하고 다른 언어로 변환한 후에 변환할 때마다 버그를 수정하지 않아도 됩니다.

XML 문자열 파일모든 문자열을 Dreamweaver Configuration/Strings 폴더의 XML 파일에 저장합니다. 이렇게 하면 연관된 Extension 파일을 여러 개 설치하는 경우, 단일 XML 파일에서 모든 문자열을 공유할 수 있습니다. 또한, C++와 JavaScript Extension에서 동일한 문자열을 참조할 수도 있습니다.

myExtensionStrings.xml이라는 파일을 만든다고 가정할 때, 다음 예제는 이 파일의 형식을 나타낸 것입니다.<strings>



<string id="featureX/subProblemY" value="There was a with X when you did Y. Try not to

do Y!"/>

<string id="featureX/subProblemZ" value="There was another problem with X, regarding Z.

Don't ever do Z!"/>

</strings>


66

이제, JavaScript 파일은 다음 예제와 같이 dw.loadString() 함수를 호출하여 이 변환 가능한 문자열을 참조할 수 있습니다.function initializeUI()

{

...

if (problemYhasOccured)

{

alert(dw.loadString("featureX/subProblemY");

}

}

문자열 식별자에 슬래시(/) 문자를 사용할 수 있지만 공백 문자는 사용할 수 없습니다. 슬래시를 사용하여 적절한 계층 구조를 만들 수 있으며 모든 문자열을 단일 XML 파일에 포함시킬 수 있습니다.

참고: Configuration/Strings 폴더에서 cc로 시작하는 파일은 Contribute 파일입니다. 예를 들어, ccSiteStrings.xml은 Contribute 파일입니다.

포함된 값이 있는 지역화 가능한 문자열일부 표시 문자열은 포함된 값을 가지고 있습니다. errMsg() 함수를 사용하여 이 문자열을 표시할 수 있습니다. errMsg() 함수는 Configuration/Shared/MM/Scripts/CMN 폴더의 string.js 파일에 정의되어 있습니다. 이 함수는 C 언어의 printf() 함수와 비슷합니다. 자리 표시자인 퍼센트 기호(%)와 s를 사용하여 문자열 내에서 변수 값이 나타날 위치를 나타낸 다음, 문자열과 변수 이름을 errMsg()의 인수로 전달합니다. 예를 들면 다음과 같습니다.<string id="featureX/fileNotFoundInFolder" value="File %s could not be found in folder %s."/>

다음 예제는 문자열에 포함된 변수와 함께 문자열을 alert() 함수에 전달하는 방법을 보여줍니다.if (fileMissing)

{

alert( errMsg(dw.loadString("featureX/fileNotFoundInFolder"),fileName,

folderName) );

}

Extension 관리자 작업다른 사용자를 위한 Extension을 만들려면 [도움말] > [Extension을 만드는 방법] 범주에 있는 Adobe Exchange 웹 사이트(www.adobe.com/go/exchange_kr)의 지침에 따라 패키지화해야 합니다. Extension Manager에서 Extension을 작성하고 테스트한 다음, [파일] > [Extension 패키지]를 선택합니다. Extension 패키지를 만든 다음, [파일] > [Extension 전송]을 선택하여 Extension Manager에서 Exchange로 전송할 수 있습니다.

Adobe Extension Manager는 Dreamweaver와 함께 제공됩니다. Extension Manager의 사용 방법에 대해서는 해당 도움말 파일 및 Adobe Exchange 웹 사이트에 자세히 설명되어 있습니다.

http://www.adobe.com/go/exchange/

67

5장: Extension용 사용자 인터페이스

대부분의 Extension은 사용자로부터 UI(사용자 인터페이스)를 통해 정보를 받도록 구성되어 있습니다. 예를 들어, marquee 태그에 대한 속성 관리자 Extension을 만들 경우 사용자가 방향 및 높이와 같은 속성을 지정할 수 있는 방법을 만들어야 합니다. 작성한 Extension을 제출하여 Adobe 인증을 받을 계획이라면 Adobe Exchange 웹 사이트(www.adobe.com/go/exchange_kr)의 Extension 관리자 파일에서 이용할 수 있는 지침에 따라야 합니다. 이 지침은 사용자의 창의성을 제약하기 위해 만든 것이 아니라 인증된 Extension이 Adobe Dreamweaver CS3 사용자 인터페이스(UI) 내에서 효과적으로 작동하고 Extension UI의 디자인으로 인해 Extension 기능이 저하되지 않도록 하기 위한 것입니다.

Extension 사용자 인터페이스 디자인일반적으로 Extension을 만드는 목적은 사용자가 빈번하게 만나는 작업을 수행하기 위한 것입니다. Extension을 만들어 반복적인 작업을 자동화할 수 있습니다. 작업의 일부 단계를 변경하거나 Extension이 처리하는 코드의 특정 속성을 변경할 수 있습니다. 이러한 변수 값에 대하여 사용자 입력을 받기 위해 UI를 만듭니다.

예를 들어, 웹 카탈로그를 업데이트하기 위한 Extension을 만들 수 있습니다. 사용자는 이미지 소스, 항목 설명, 가격 등에 대한 값을 주기적으로 변경해야 합니다. 이러한 값은 변경되지만 웹 사이트에 표시하기 위해 이러한 값을 가져와 정보 서식을 지정하는 절차는 동일하게 유지됩니다. 간단한 Extension을 사용하면 이미지 소스, 항목 설명, 가격 등에 대해 새로 업데이트된 값은 사용자가 직접 입력하도록 하고 서식 지정만 자동화할 수 있습니다. 보다 강력해진 Extension은 이러한 값을 데이터베이스에서 주기적으로 검색할 수 있습니다.

처리 중인 Extension UI는 사용자가 입력하는 정보를 수신하기 위한 것입니다. 이 정보는 Extension에서 수행하는 반복 작업의 다양한 측면을 처리합니다. Dreamweaver에서는 Extension UI 컨트롤을 만들기 위한 기본 구성 블록으로 HTML 및 JavaScript 양식의 요소를 지원하며 자체 HTML 렌더러를 사용하여 UI를 표시합니다. 따라서 Extension UI는 텍스트 설명과 양식 입력 필드에 해당하는 두 개의 열로 구성된 테이블이 포함된 HTML 파일처럼 간단합니다.

Extension을 디자인할 때에는 필수적인 변수와 이러한 변수를 가장 잘 처리할 수 있는 양식 요소를 결정해야 합니다.

Extension UI를 디자인할 때는 다음의 기본 지침을 고려하는 것이 좋습니다.

• Extension의 이름을 지정하려면 HTML 파일의 title 태그에서 이름을 지정합니다. Dreamweaver는 이 이름을 Extension 제목 막대에 표시합니다.

• 텍스트 레이블은 UI의 왼쪽에 오른쪽 정렬로 표시하고 텍스트 상자는 UI의 오른쪽에 왼쪽 정렬로 표시합니다. 이 정렬 방법을 사용하면 사용자가 텍스트 상자의 처음 부분을 쉽게 찾을 수 있습니다. 텍스트 상자 다음에는 설명이나 측정 단위와 같은 짧은 텍스트를 표시할 수 있습니다.

• 체크 상자와 라디오 버튼의 레이블은 UI의 오른쪽에 왼쪽 정렬로 표시합니다.

• 코드를 읽기 쉽도록 하기 위해 텍스트 상자의 이름은 해당 텍스트 상자의 기능을 이해하기 쉽도록 지정합니다. Dreamweaver를 사용하여 Extension UI를 만드는 경우, [속성 관리자]나 [퀵 태그 편집기]를 사용하여 필드에 이름을 지정할 수 있습니다.

일반적으로, UI를 만든 다음에는 Extension 코드를 테스트하여 코드가 다음의 UI 관련 작업을 올바르게 수행하는지 확인합니다.

• 텍스트 상자에서 값 가져오기

• 텍스트 상자의 기본값 설정 또는 선택 항목에서 값 가져오기

• 사용자 문서에 변경 사항 적용

http://www.adobe.com/go/exchange


68

Dreamweaver HTML 렌더링 컨트롤Dreamweaver 4 이전 버전(Dreamweaver 4까지)에서는 Microsoft Internet Explorer와 Netscape Navigator에서보다 더 많은 공간이 양식 컨트롤 주위에 렌더링되었습니다. Dreamweaver는 자체 HTML 렌더링 엔진을 사용하여 Extension UI를 표시하므로 Extension UI의 양식 컨트롤 주위에 여분의 공간이 나타납니다.

Dreamweaver 이후 버전에서는 양식 컨트롤 렌더링을 개선하여 더욱 브라우저에 가깝게 표현하고 있습니다. 개선된 렌더링 기능을 활용하려면 다음 예제와 같이 세 가지 새로운 DOCTYPE 문 중 하나를 Extension 파일에 사용해야 합니다.<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">

<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//floater">

<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//pi">

대부분의 경우 DOCTYPE 문은 문서의 첫 번째 행에서 사용해야 합니다. 그러나, 이전 버전에서 파일의 첫 번째 행에 있어야 했던 Extension 관련 지시문(속성 관리자 파일의 맨 위에 있는 주석이나 명령의 MENU-LOCATION=NONE 지시문 등)과 충돌하지 않도록 하기 위해 이제는 DOCTYPE 문 및 지시문이 html 열기 태그 앞에만 있으면 어떤 순서로 나타나도 상관이 없습니다.

새로운 DOCTYPE 문을 사용하면 내장 대화 상자 및 패널에 보다 잘 맞는 Extension UI를 만들 수 있을 뿐만 아니라, Dreamweaver의 [디자인] 뷰에서 Extension을 볼 때 사용자에게 표시되는 모양을 확인할 수도 있습니다.

Configuration/Commands 폴더의 CFLoginWizard.htm, TeamAdminDlgDates.html 및 TeamAdminDlgDays.html 파일에서 대화 상자가 사용된 부분에서 이 세 가지 예제를 볼 수 있습니다.

다음 예제는 양식 컨트롤 렌더링을 개선한 DOCTYPE 문이 없는 기본 속성 관리자와, DOCTYPE 문이 있는 기본 속성 관리자를 각각 나타냅니다.

DOCTYPE 문을 사용하지 않을 경우 [디자인] 뷰에 표시되는 기본 속성 관리자

DOCTYPE 문을 사용하고 새 렌더링에 맞게 일부 사항을 조정한 후 [디자인] 뷰에 표시되는 기본 속성 관리자


69

Extension에 사용자 정의 UI 컨트롤 사용 Dreamweaver에서는 표준 HTML 양식 요소 외에 사용자 정의 컨트롤도 지원하므로 다음 목록에서 설명하는 것과 같이 유연하며 전문적인 모양을 갖춘 인터페이스를 만들 수 있습니다.

• 편집 가능한 선택 목록(콤보 상자라고도 함) - 선택 목록의 기능과 텍스트 상자의 기능을 결합할 수 있습니다.

• 데이터베이스 컨트롤 - 데이터 계층 구조 및 필드를 쉽게 표시할 수 있습니다.

• 트리 컨트롤 - 정보를 확장/축소가 가능한 노드로 구성합니다.

• 색상 버튼 컨트롤 - Extension에 색상 선택기 인터페이스를 추가할 수 있습니다.

편집 가능한 선택 목록Extension UI에는 select 태그를 사용하여 정의한 팝업 목록이 포함되어 있는 경우가 많습니다. Dreamweaver에서는 select 태그에 editable="true"를 추가하여 Extension의 팝업 목록을 편집 가능하게 만들 수 있습니다. 기본값을 설정하려면 editText 속성을 설정하고 선택 목록에 표시할 값을 설정합니다.

다음 예제는 편집 가능한 선택 목록의 설정 방법을 보여 줍니다.<select name="travelOptions" style="width:250px" editable="true" editText="other

(please specify)">

<option value="plane">plane</option>

<option value="car">car</option>

<option value="bus">bus</option>

</select>

Extension에 선택 목록을 사용할 때에는 편집 가능한 속성이 있는지 확인하고 그 속성의 값을 확인해야 합니다. 값이 없으면 선택 목록이 편집 가능하지 않음을 나타내는 기본값 false가 반환됩니다.

일반적인 편집 불가능한 선택 목록과 마찬가지로 편집 가능한 선택 목록에도 selectedIndex 속성이 있습니다(79페이지의 “Dreamweaver DOM의 객체, 속성 및 메서드” 참조). 이 속성은 텍스트 상자가 선택된 경우 -1을 반환합니다.

편집 가능한 활성 텍스트 상자의 값을 Extension으로 읽어 들이려면 editText 속성의 값을 읽습니다. editText 속성은 사용자가 편집 가능한 텍스트 상자에 입력한 문자열을 반환합니다. editText 속성의 값은 텍스트가 입력되지 않으면 빈 문자열이 되고 editText에 아무 값도 지정되지 않습니다.

Dreamweaver는 편집 가능한 팝업 목록을 제어하기 위해 select 태그에 대해 다음과 같은 사용자 정의 속성을 추가합니다.

참고: 편집 가능한 선택 목록은 Dreamweaver에서 사용할 수 있습니다.

다음 예제에서는 일반적인 JavaScript 함수를 사용하여 편집 가능한 선택 목록이 포함된 명령 Extension을 만듭니다.

속성 이름 설명 허용되는 값

editable 팝업 목록에 편집 가능 텍스트 영역이 포함되도록 선언합니다. 부울 값(true 또는 false)

editText 편집 가능한 텍스트 영역 내의 텍스트를 포함하거나 설정합니다. 임의의 문자열


70

예제를 만들려면:1 텍스트 편집기에 빈 파일을 새로 만듭니다.

2 다음 코드를 입력합니다.<html>

<head>

<title>Editable Dropdown Test</title>

<script language="javascript">

function getAlert()

{

var i=document.myForm.mySelect.selectedIndex;

if (i>=0)

{

alert("Selected index: " + i + "\n" + "Selected text " +

document.myForm.mySelect.options[i].text);

}

else

{

alert("Nothing is selected" + "\n" + "or you entered a value");

}

}

function commandButtons()

{

return new Array("OK", "getAlert()", "Cancel", "window.close()");

}

</script>

</head>

<body>

<div name="test">

<form name="myForm">

<table>

<tr>

<td colspan="2">

<h4>Select your favorite</h4>

</td>

</tr>

<tr>

<td>Sport:</td>

<td>

<select name="mySelect" editable="true" style="width:150px"

editText="Editable Text">

<option> Baseball</option>

<option> Football </option>

<option> Soccer </option>

</select>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

3 이 파일을 Dreamweaver의 Configuration/Commands 폴더에 EditableSelectTest.htm이라는 이름으로 저장합니다.


71

예제를 테스트하려면:1 Dreamweaver를 다시 시작합니다.

2 [명령] > [EditableSelectTest]를 선택합니다.

목록에서 값을 선택하면 경고 메시지가 나타나 해당 값의 인덱스와 텍스트를 표시합니다. 값을 입력하면 선택된 항목이 없다는 경고 메시지가 나타납니다.

데이터베이스 컨트롤Dreamweaver를 사용하면 HTML select 태그를 확장하여 데이터베이스 트리 컨트롤을 만들 수 있습니다. 또한 변수 표 컨트롤을 추가할 수도 있습니다. 데이터베이스 트리 컨트롤은 데이터베이스 스키마를 표시하고 변수 표 컨트롤은 표 형태의 정보를 표시합니다.

다음 그림은 데이터베이스 컨트롤과 변수 표 컨트롤을 사용하는 고급 [레코드세트] 대화 상자를 보여 줍니다.


72

데이터베이스 트리 컨트롤 추가데이터베이스 컨트롤에는 다음 속성이 있습니다.

select 태그 안에 있는 option 태그는 무시됩니다.

대화 상자에 데이터베이스 트리 컨트롤을 추가하려면 다음 샘플 코드에서 인용된 변수를 적절히 변경하여 사용하면 됩니다.<select name="DBTree" style="width:400px;height:110px" ¬

type="mmdatabasetree" connection="connectionName" noexpandbuttons showHeaders></select>

선택한 데이터를 검색하고 트리에 표시하려면 connection 속성을 변경하면 됩니다. 새 태그의 JavaScript 래퍼 객체로 DBTreeControl 속성을 사용할 수 있습니다. 보다 구체적인 예제는 Configuration/Shared/Common/Scripts 폴더의 DBTreeControlClass.js 파일을 참조하십시오.

변수 표 컨트롤 추가변수 표 컨트롤에는 다음 속성이 있습니다.

다음 예제에서는 대화 상자에 간단한 변수 표 컨트롤을 추가합니다.<select name="ParamList" style="width:515px;" ¬

type="mmparameterlist columns"="Name,SQL Data ¬

Type,Direction,Default Value,Run-time Value" size=6></select>

다음 예제에서는 폭이 500픽셀이며 서로 다른 폭의 열이 다섯 개 포함된 변수 표 컨트롤을 만듭니다.<select

name="ParamList"

style="width:500px;"

type="mmparameterlist"

columns="Name,SQL Data Type,Direction, Default Value,Run-time Value"

columnWidth="100,25,11,"

size=6>

이 예제에서는 폭이 182픽셀인 빈 열을 두 개 만듭니다. 지정된 열은 총 136입니다. 변수 표 컨트롤의 전체 폭은 500입니다. 처음 세 열이 놓인 이후의 남은 공간은 364입니다. 따라서 남아 있는 두 열은 364를 2로 나눈 182가 됩니다.

이 변수 표 컨트롤에는 변수 표 컨트롤의 데이터를 액세스하고 조작할 때 사용해야 하는 JavaScript 래퍼 객체도 있습니다. Configuration/Shared/MM/Scripts/Class 폴더의 GridControlClass.js 파일에서 이 컨트롤의 구현을 볼 수 있습니다.

속성 이름 설명

name 트리 컨트롤의 이름

control.style 폭 및 높이(픽셀 단위)

type 컨트롤 유형

connection [연결 관리자]에서 정의한 데이터베이스 연결의 이름. 이 속성이 비어 있으면 해당 컨트롤이 비어 있게 됩니다.

noexpandbuttons 이 속성을 지정하면 트리 컨트롤에 확장 플러스(+) 또는 축소 마이너스(-) 표시기나 연관된 삼각형 화살표(Macintosh)가 표시되지 않습니다. 이 속성은 여러 개의 열로 구성된 목록 컨트롤을 그리는 데 유용합니다.

showheaders 이 속성을 지정하면 트리 컨트롤의 맨 위에 각 열의 이름을 나타내는 머리글이 표시됩니다.


name 변수 표 컨트롤의 이름

style 컨트롤의 폭(픽셀 단위)

type 컨트롤 유형

columns 각 열에는 이름이 있어야 하며 각 이름은 컴마로 구분해야 합니다.

columnWidth 각 열의 폭. 각 폭은 컴마로 구분해야 합니다. 열의 폭을 지정하지 않으면 모든 열의 폭은 동일합니다.


73

트리 컨트롤 추가트리 컨트롤은 데이터를 계층 구조로 표시하며 사용자는 트리의 노드를 확장하거나 축소할 수 있습니다. MM:TREECONTROL 태그를 사용하면 어떠한 유형의 정보에 대해서도 트리 컨트롤을 만들 수 있습니다. 이 컨트롤은 72페이지의 “데이터베이스 트리 컨트롤 추가”에서 설명한 데이터베이스 트리 컨트롤과 달리 데이터베이스와 연결할 필요가 없습니다. Dreamweaver 키보드 단축키 편집기는 다음 그림에 나타낸 것처럼 트리 컨트롤을 사용합니다.

트리 컨트롤 만들기MM:TREECONTROL 태그는 트리 컨트롤을 만들며, 하나 이상의 추가 태그를 사용하여 다음 목록에서 설명하는 것과 같은 구조를 추가할 수 있습니다.

• MM:TREECOLUMN은 트리 컨트롤의 열을 정의하는 빈 선택적 태그입니다.

• MM:TREENODE는 트리의 노드를 정의하는 선택적 태그입니다. 이 태그는 다른 MM:TREENODE 태그만 포함할 수 있는 비어 있지 않은 태그입니다.

MM:TREECONTROL 태그는 다음과 같은 속성을 가집니다.


name 트리 컨트롤의 이름

size 선택 사항입니다. 컨트롤에 표시되는 행의 수를 나타내며 기본값은 5행입니다.

theControl 선택 사항입니다. theControl 속성에 있는 노드의 수가 size 속성의 값보다 크면 스크롤 막대가 표시됩니다.

multiple 선택 사항입니다. 복수 선택을 허용하며, 기본값은 단일 선택입니다.

style 선택 사항입니다. 트리 컨트롤의 높이 및 폭에 대한 스타일 정의입니다. 이 속성이 지정되면 size 속성보다 우선합니다.

noheaders 선택 사항입니다. 열 머리글이 표시되지 않도록 지정합니다.


74

MM:TREECOLUMN 태그는 다음 속성을 가집니다.

보다 쉽게 읽을 수 있도록, TREECOLUMN 태그는 다음 예제와 같이 MM:TREECONTROL 태그 바로 다음에 옵니다.<MM:TREECONTROL name="tree1">

<MM:TREECOLUMN name="Column1" width="100" state="visible">

<MM:TREECOLUMN name="Column2" width="80" state="visible">

...

</MM:TREECONTROL>

다음 표에서는 MM:TREENODE 속성에 대해 설명합니다.

예를 들어, 다음 트리 컨트롤은 모든 노드가 확장됩니다.<mm:treecontrol name="test" style="height:300px;width:300px">

<mm:treenode value="rootnode1" state="expanded">

<mm:treenode value="node1" state="expanded"></mm:treenode>


</mm:treenode>

<mm:treenode value="rootnode2"0state="expanded">



</mm:treenode>

</mm:treecontrol>


name 열의 이름

value 열 머리글에 나타나는 문자열

width 열의 픽셀 단위 폭(백분율은 지원되지 않음)으로서, 기본값은 100입니다.

align 선택 사항입니다. 열에 표시되는 텍스트의 정렬 방식(왼쪽, 오른쪽 또는 가운데)을 지정합니다. 기본값은 왼쪽입니다.

state 열의 표시/숨김 여부를 지정합니다.


name 노드의 이름

value 지정된 노드의 내용이 포함됩니다. 열이 둘 이상인 경우에는 각 열의 문자열을 파이프 문자로 구분하여 지정합니다. 빈 열을 지정하려면 파이프 문자(|) 앞에 공백 문자를 하나 입력합니다.

state 문자열 "expanded" 또는 "collapsed"를 사용하여 노드가 확장되는지 또는 축소되는지를 지정합니다.

selected 트리에 MULTIPLE 속성이 있으면, 둘 이상의 트리 노드에 이 속성을 설정하여 여러 개의 노드를 선택할 수 있습니다.

icon 선택 사항입니다. 사용할 내장 아이콘의 인덱스는 0부터 시작합니다.

0 = 아이콘 없음; 1 = Dreamweaver 문서 아이콘; 2 = 다중 문서 아이콘


75

트리 컨트롤을 사용한 내용 조작트리 컨트롤과 트리 컨트롤 내의 노드는 HTML 태그로 구현되고, Dreamweaver에 의해 파싱되어 문서 트리에 저장됩니다. 이러한 태그는 다른 문서 노드와 동일한 방법으로 조작할 수 있습니다. DOM 함수 및 메서드에 대한 자세한 내용은 78페이지의 “Dreamweaver 문서 객체 모델”을 참조하십시오.

노드 추가 기존 트리 컨트롤에 프로그램을 통하여 노드를 추가하려면 MM:TREECONTROL 태그나 기존 MM:TREENODE 태그 중 하나의 innerHTML 속성을 설정합니다. 트리 노드의 inner HTML 속성을 설정하면 중첩 노드가 만들어집니다.

다음 예제에서는 트리의 최상위 수준에 노드를 추가합니다.var tree = document.myTreeControl;

//최상위 노드를 트리의 맨 아래에 추가tree.innerHTML = tree.innerHTML + ‘<mm:treenode name="node3" value="node3">’;

자식 노드 추가 현재 선택되어 있는 노드에 자식 노드를 추가하려면 선택된 노드의 innerHTML 속성을 설정합니다.

다음 예제에서는 현재 선택한 노드에 자식 노드를 추가합니다.var tree = document.myTreeControl;

var selNode = tree.selectedNodes[0];

//노드를 선택 해제하여 새 노드를 선택할 수 있도록 함selnode.removeAttribute("selected");

//선택된 노드의 자식 노드 맨 위에 새 노드 추가selNode.innerHTML = '<mm:treenode name="item10" value="New item11" expanded selected>' + ¬

selNode.innerHTML;

노드 삭제 문서 구조에서 현재 선택한 노드를 삭제하려면 innerHTML 또는 outerHTML 속성을 사용합니다.

다음 예제에서는 선택한 노드 전체와 해당 노드의 모든 자식 노드를 삭제합니다.var tree = document.myTreeControl;

var selNode = tree.selectedNodes[0];

selNode.outerHTML = "";

Extension용 색상 버튼 컨트롤Dreamweaver에서는 텍스트, 체크 상자 및 버튼과 같은 표준 입력 유형 외에 Extension의 추가 입력 유형인 mmcolorbutton을 지원합니다.

코드에 <input type="mmcolorbutton">이라고 입력하면 UI에 색상 선택기가 나타납니다. 입력 태그에 값 속성을 설정하여 색상 선택기의 기본값을 설정할 수 있습니다. 값을 설정하지 않으면 색상 선택기는 기본적으로 회색으로 표시되며, 입력 객체의 값 속성은 빈 문자열을 반환합니다.

다음 예제에서는 유효한 mmcolorbutton 태그를 보여 줍니다. <input type="mmcolorbutton" name="colorbutton" value="#FF0000">

<input type="mmcolorbutton" name="colorbutton" value="teal">

색상 버튼에는 색상이 변경될 때 발생하는 하나의 이벤트 onChange가 있습니다.

텍스트 상자와 색상 선택기를 동기화할 수도 있습니다. 다음 예제에서는 텍스트 상자의 색상과 색상 선택기의 색상을 동기화하는 텍스트 상자를 만듭니다.<input type = "mmcolorbutton" name="fgcolorPicker"

onChange="document.fgcolorText.value=this.value">

<input type = "test" name="fgcolorText" onBlur="document.fgColorPicker.value=this.value">

이 예제에서, 사용자가 텍스트 상자의 값을 변경한 다음, 탭으로 이동하거나 다른 위치를 클릭하면 색상 선택기가 업데이트되어 텍스트 상자에서 지정한 색상을 표시합니다. 사용자가 색상 선택기를 사용하여 새 색상을 선택하면 텍스트 상자가 업데이트되어 해당 색상의 16진수 값을 표시합니다.


76

Dreamweaver에 Flash 내용 추가Flash 내용(SWF 파일)은 Dreamweaver 인터페이스에 객체나 명령의 일부로 표시될 수 있습니다. 이 Flash 지원 기능은 Flash 양식, 애니메이션, ActionScript 또는 기타 Flash 내용을 사용하는 Extension을 구축하는 경우에 특히 유용합니다.

기본적으로, Dreamweaver 객체와 명령의 기능을 활용하여 대화 상자를 표시합니다. form 태그와 object 태그를 사용하여 Flash 내용을 Dreamweaver 대화 상자에 포함시킬 수 있습니다. 객체를 만드는 자세한 방법은 85페이지의 “삽입 막대 객체”를 참조하십시오. 명령에 대한 자세한 내용을 보려면 110페이지의 “명령”을 참조하십시오.

간단한 Flash 대화 상자 예제이 예제에서는 사용자가 [명령] 메뉴에서 해당 명령을 클릭하면 myFlash,swf 파일을 표시하는 새로운 명령을 만듭니다. 이 예제를 연습하기 전에 명령을 만드는 자세한 방법을 보려면 110페이지의 “명령”을 참조하십시오.

참고: 이 예제는 Dreamweaver 응용 프로그램 설치 폴더의 Configuration/Commands 폴더에 myFlash.swf라는 SWF 파일이 이미 존재하고 있다고 가정합니다. 다른 SWF 파일로 이 예제를 테스트하고 싶으면 해당 SWF 파일을 응용 프로그램의 Commands 폴더에 저장하고 코드에서 myFlash.swf를 이 SWF의 파일 이름으로 대체하면 됩니다.

Dreamweaver에서 새 기본 HTML 파일을 엽니다. 이 파일이 사용자의 명령 정의 파일이 될 것입니다. 열기 및 닫기 title 태그 사이에 My Flash Movie라고 입력합니다. 그러면 페이지의 head 섹션에 다음과 같이 표시됩니다.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My Flash Movie</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

이제, 이 파일을 My Flash Movie.htm이라는 이름으로 응용 프로그램의 Configuration/Commands 폴더에 저장합니다. 아직 파일을 닫지는 마십시오. 이 시점에서 파일을 저장하는 것은 Flash 내용에 상대 경로를 지정하기 위해서 입니다. 그렇지 않으면 Dreamweaver는 절대 경로를 사용합니다.

HTML 문서로 돌아가 열기 및 닫기 body 태그 사이에 열기 및 닫기 form 태그를 추가합니다. 그런 다음, form 태그 내에서 [삽입] > [미디어] > [Flash] 메뉴 옵션을 사용하여 Flash 내용을 이 명령 정의 파일에 추가합니다. 대화 상자가 나타나면 Commands 폴더에 있는 SWF 파일을 선택하고 확인을 클릭합니다. 이제 이 명령 정의 파일은 아래 예제처럼 보이게 됩니다. 물론, width와 height 속성은 지정한 SWF 파일의 속성에 따라 달라집니다.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My Flash Movie</title>


</head>

<body>

<body>

<form>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http:

//download.Macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"

width="200" height="100">

<param name="movie" value="myFlash.swf">

<param name="quality" value="high">

<embed src="myFlash.swf" quality="high" pluginspage="http://www.Macromedia.com/go/

getflashplayer" type="application/x-shockwave-flash" width="200" height="100"></embed>

</object>

</form>

</body>

</html>

http://www.Macromedia.com/go/


77

파일을 다시 저장합니다. Dreamweaver를 종료하고 다시 시작합니다. [명령] > [My Flash Movie] 메뉴 옵션을 선택하면 아래 그림에 나타낸 것처럼 Flash 내용이 Dreamweaver 대화 상자에 나타납니다.

이 예제는 Dreamweaver의 Flash 내용 지원 기능을 구현하는 간단한 방법을 보여준 것입니다. 객체와 명령을 익숙하게 만들 수 있고 보다 정교한 양식을 설계할 수 있게 되면 Flash 내용을 Dreamweaver Extension에 통합하여 더욱 동적인 사용자 인터페이스를 만들 수 있습니다. Flash 내용을 표시하는 대화 상자에 버튼을 추가하는 commandButtons() 함수를 작성하는 방법에 대한 자세한 내용은 110페이지의 “명령”을 참조하십시오.

78

6장: Dreamweaver 문서 객체 모델

Adobe Dreamweaver CS3에서 DOM(Document Object Model)은 Extension 개발자에게 있어서 매우 중요한 구조입니다. DOM을 사용하면 사용자의 문서 및 Extension 파일에 있는 요소를 액세스하고 조작할 수 있습니다.

DOM은 마크업 언어를 사용하여 만드는 문서의 구조를 정의합니다. 태그와 속성(attribute)을 객체와 속성(property)으로 표현하는 DOM을 사용하면 프로그래밍 언어로 문서와 그 구성 요소를 액세스하고 조작할 수 있습니다.

HTML 문서의 구조는 문서 트리로 볼 수 있습니다. 루트는 HTML 태그이며 두 개의 가장 큰 줄기는 HEAD 태그와 BODY 태그입니다. HEAD 태그의 가지는 TITLE, STYLE, SCRIPT, ISINDEX, BASE, META, LINK 태그 등이 있습니다. BODY 태그의 가지는 머리글(H1, H2 등), 블록 수준 요소(P, DIV, FORM 등), 인라인 요소(BR, IMG 등) 및 기타 요소 유형이 있습니다. 이러한 가지의 잎에는 WIDTH, HEIGHT, ALT 등과 같은 속성이 있습니다.

DOM에서 트리 구조는 부모 노드와 자식 노드의 계층 구조로 유지되고 표시됩니다. 루트 노드에는 부모 노드가 없으며 최하위 노드에는 자식 노드가 없습니다. HTML 구조의 각 수준에서 HTML 요소는 JavaScript에 노드로 공개될 수 있습니다. 이 구조를 사용하여 문서나 문서 내의 요소에 액세스할 수 있습니다.

JavaScript에서는 문서 내의 모든 객체를 이름이나 인덱스로 참조할 수 있습니다. 예를 들어“myButton” 이라는 이름이나 id를 가진 [전송] 버튼이 문서 내 첫 번째 양식의 두 번째 요소인 경우, 이 버튼에 대해 다음 두 가지 참조가 모두 유효합니다.

• 이름으로 참조하는 경우 - document.myForm.myButton

• 인덱스로 참조하는 경우 - document.forms[0].elements[1]

한 그룹의 라디오 버튼 등과 같이 동일한 이름을 가진 여러 객체는 하나의 배열로 축소됩니다. 인덱스를 0부터 시작하여 증가시키면 배열의 특정 객체에 액세스할 수 있습니다. 예를 들어, 양식 “myForm” 에 있는 “myRadioGroup” 이라는 이름의 첫 번째 라디오 버튼은 document.myForm.myRadioGroup[0]으로 참조할 수 있습니다.

문서 DOM의 구별 방법사용자 문서의 DOM과 Extension의 DOM을 구별하는 것은 매우 중요합니다. 이 항목의 내용은 두 유형의 Dreamweaver 문서 모두에 적용되지만 각 DOM의 참조 방식은 서로 다릅니다.

브라우저에서 JavaScript를 사용할 수 있다면 Extension 파일에 있는 객체를 참조하는 것과 같은 방법으로 document를 입력하여 활성 문서에 있는 객체를 참조할 수 있습니다. 예를 들면 document.forms[0]를 입력합니다. Dreamweaver에서 document는 Extension 파일을 참조하고 document.forms[0]는 Extension UI의 첫 번째 양식을 참조합니다. 그러나 사용자 문서의 객체를 참조하려면 dw.getDocumentDOM(), dw.createDocument() 또는 사용자 문서 객체를 반환하는 다른 함수를 호출해야 합니다.

예를 들어, 활성 문서의 첫 번째 이미지를 참조하려면 dw.getDocumentDOM().images[0]를 사용합니다. 또한, 다음 예제에서처럼 변수에 문서 객체를 저장하고 나중에 참조할 때 이 변수를 사용할 수도 있습니다.

var dom = dw.getDocumentDOM(); //현재 문서의 DOM을 가져옵니다.var firstImg = dom.images[0];

firstImg.src = "myImages.gif";

이러한 유형의 표기법은 Configuration 폴더의 모든 파일, 특히 명령 파일에 공통적입니다. dw.getDocumentDOM() 메서드에 대한 자세한 내용은 Dreamweaver API 참조 설명서에서 dreamweaver.getDocumentDOM() 함수를 참조하십시오.


79

Dreamweaver DOMDreamweaver DOM에는 W3C(World Wide Web Consortium) DOM 레벨 1의 객체, 속성 및 메서드 하위 집합이 포함되어 있습니다. 이러한 객체, 속성 및 메서드는 Microsoft Internet Explorer 4.0 DOM의 일부 속성과 결합됩니다.

Dreamweaver DOM의 객체, 속성 및 메서드다음 표에서는 Dreamweaver DOM에서 지원하는 객체, 속성, 메서드 및 이벤트를 보여 줍니다. 일부 속성은 특정 객체의 속성으로 액세스될 때 읽기 전용 속성을 갖습니다. 불릿(•)은 목록 컨텍스트에 사용될 때 읽기 전용인 속성을 나타냅니다.

객체 속성 메서드 이벤트

window navigator •document •innerWidth •innerHeight •screenX •screenY •

alert()confirm()escape()unescape()close()setTimeout()clearTimeout()setInterval()clearInterval()resizeTo()

onResize

navigator platform • 없음 없음

document forms •(form 객체 배열)images •(image 객체의 배열)layers •(LAYER, ILAYER의 배열 및 절대 위치의 요소)

이름으로 호출하는 child 객체 •nodeType •parentNode •childNodes •previousSibling •nextSibling •documentElement •body •URL •parentWindow •

getElementsByTagName()getElementsByAttributeName()getElementById()hasChildNodes()

onLoad

모든 태그 및 요소 객체

nodeType •parentNode •childNodes •tagName •previousSibling •nextSibling •이름으로 호출되는 속성innerHTMLouterHTML

getAttribute()setAttribute()removeAttribute()getElementsByTagName()getElementsByAttributeName()hasChildNodes()

form 모든 태그에 사용 가능한 속성 외에 다음 속성 포함:

tags:elements •( button, checkbox, password, radio, reset, select, submit, text, file, hidden, image 및 textarea 객체의 배열)

mmcolorbutton

이름으로 호출하는 child 객체 •

모든 태그에 사용 가능한 메서드만 없음


80

layer 모든 태그에 사용 가능한 속성 외에 다음 속성 포함:visibilitylefttopwidthheightzIndex


image 모든 태그에 사용 가능한 속성 외에 다음 속성 포함:src

모든 태그에 사용 가능한 메서드만 onMouseOveronMouseOutonMouseDownonMouseUp

buttonresetsubmit

모든 태그에 사용 가능한 속성 외에 다음 속성 포함:form •

모든 태그에 사용 가능한 메서드 외에 다음 메서드 포함:blur()focus()

onClick

checkboxradio

모든 태그에 사용 가능한 속성 외에 다음 속성 포함:checkedform •

모든 태그에 사용 가능한 메서드 외에 다음 메서드 포함:blur()focus()

onClick

password텍스트filehiddenimage(필드)textarea

모든 태그에 사용 가능한 속성 외에 다음 속성 포함:form •value

모든 태그에 사용 가능한 메서드 외에 다음 메서드 포함:blur()focus()select()

onBluronFocus

select 모든 태그에 사용 가능한 속성 외에 다음 속성 포함:form •options •(옵션 객체의 배열)selectedIndex

모든 태그에 사용 가능한 메서드 외에 다음 메서드 포함:blur()(Windows 전용)focus()(Windows 전용)

onBlur (Windows 전용)onChangeonFocus (Windows 전용)

option 모든 태그에 사용 가능한 속성 외에 다음 속성 포함:text


mmcolorbutton 모든 태그에 사용 가능한 속성 외에 다음 속성 포함:namevalue

없음 onChange

arraybooleandatefunctionmathnumberobjectstringregexp

Netscape Navigator 4.0과 일치 Netscape Navigator 4.0과 일치 없음

text nodeType •parentNode •childNodes •previousSibling •nextSibling •data

hasChildNodes() 없음

comment nodeType •parentNode •childNodes •previousSibling •nextSibling •data

hasChildNodes() 없음

NodeList length • item() 없음

NamedNodeMap length • item() 없음

객체 속성 메서드 이벤트


81

document 객체의 속성 및 메서드다음 표에서는 Dreamweaver에서 지원되는 document 객체의 속성과 메서드를 자세히 설명합니다. 불릿(•)은 읽기 전용 속성을 표시합니다.

속성 또는 메서드 반환값

nodeType • Node.DOCUMENT_NODE

parentNode • null

parentWindow • 문서의 부모 윈도우에 해당하는 JavaScript 객체. 이 속성은 Microsoft Internet Explorer 4.0 DOM에 정의되어 있지만 DOM 레벨 1이나 2의 일부는 아닙니다.

childNodes • document 객체의 바로 밑에 있는 하위 객체가 모두 포함되는 NodeList. 일반적으로 문서에는 HTML 객체라는 하나의 자식이 있습니다.

previousSibling • null

nextSibling • null

documentElement • HTML 태그에 해당하는 JavaScript 객체. 이 속성은 document.childNodes의 값을 가져오고 NodeList에서 HTML 태그를 추출하는 대표 속성입니다.

body • BODY 태그에 해당하는 JavaScript 객체. 이 속성은 document.documentElement.childNodes를 호출하고 NodeList에서 BODY 태그를 추출하는 대표 속성입니다. 프레임세트 문서의 경우, 이 속성은 가장 바깥쪽에 있는 프레임세트의 노드를 반환합니다.

URL • 문서에 대한 file://URL을 반환하거나, 파일이 저장되지 않은 경우에는 빈 문자열을 반환합니다.

getElementsByTagName(tagName) tagName 유형의 태그(예: IMG, DIV 등)를 단계별로 실행하는 데 사용할 수 있는 NodeList.

tagName 인수가 "LAYER " 이면 이 함수는 모든 "LAYER" 및 "ILAYER" 태그와 절대 위치를 가지는 요소를 반환합니다.

tagName 인수가 "INPUT" 이면 모든 양식 요소를 반환합니다. 하나 이상의 tagName 객체에 하나의 name 속성이 지정된 경우에는 이름이 HTML 4.01 사양에서 요구하는 문자로 시작해야 합니다. 그렇지 않으면 이 함수가 반환하는 배열의 길이가 올바르지 않게 됩니다.

getElementsById(Id) 지정된 id를 가진 요소 노드를 가져옵니다. 여기서 id는 가져올 요소의 ID가 포함된 문자열입니다.

var dom = dw.getDocumentDOM(); var contObj = dom.getElementById('content');alert("The element with the id 'content' is a " + contObj.tagName);

getElementsByAttributeName(attrName) attrName 속성을 가진 요소(예: 속성 "for"를 가진 모든 요소)를 단계별로 실행하는 데 사용할 수 있는 NodeList. DOM 레벨 1이나 2의 일부가 아닙니다.

getElementById(id) 지정된 ID를 가진 HTML 요소

hasChildNodes() true


82

HTML의 속성 및 메서드 다음 표에서는 Dreamweaver에서 사용하는 HTML 요소의 속성 및 메서드와 각 반환값 또는 설명을 보여줍니다. 불릿(•)은 읽기 전용 속성을 표시합니다.


nodeType • Node.ELEMENT_NODE

parentNode • 부모 태그. 이 태그가 HTML 태그이면 document 객체가 반환됩니다.

childNodes • 태그의 모든 직계 자식이 포함된 NodeList

previousSibling • 이 값 직전의 형제 노드. 예를 들어, HTML 문서의 경우 body 요소의 previousSibling은 head 요소입니다.

nextSibling • 이 값 다음의 형제 노드. 예를 들어, HTML 문서의 경우 head 요소의 nextSibling은 body 요소입니다. head 섹션의 모든 script, style, meta 태그는 head 요소의 자식 노드입니다.

tagName • 요소에 대한 HTML tagName(예: IMG, A, DIV). 이 값은 항상 대문자로 반환됩니다.

attrName 지정된 태그 속성의 값이 포함된 문자열. attrName 속성이 JavaScript 언어의 예약어(예: class)이면 tag.attrName을 사용할 수 없습니다. 이러한 경우 getAttribute()와 setAttribute()를 사용합니다.

innerHTML 열기 태그와 닫기 태그 사이에 포함된 소스 코드. 예를 들어, <p><b>Hello</b>라는 코드의 경우, World!</p>, p.innerHTML은 <b>Hello</b>, World!를 반환합니다. 이 속성을 쓰면 문서의 새 구조에 맞게 DOM 트리가 즉시 업데이트됩니다. 이 속성은 Microsoft Internet Explorer 4.0 DOM에 정의되어 있지만 DOM 레벨 1이나 2의 일부는 아닙니다.

outerHTML 이 태그의 소스 코드(태그 포함). 앞의 예제 코드의 경우, p.outerHTML은 <p><b>Hello</b>, World!</p>를 반환합니다. 이 속성을 쓰면 문서의 새 구조에 맞게 DOM 트리가 즉시 업데이트됩니다. 이 속성은 Microsoft Internet Explorer 4.0 DOM에 정의되어 있지만 DOM 레벨 1이나 2의 일부는 아닙니다.

getAttribute(attrName) 속성을 명시적으로 지정하면 지정된 속성의 값을 반환하고, 그렇지 않으면, null을 반환합니다.

getTranslatedAttribute(attrName) 지정된 속성의 변환된 값을 반환하거나, 속성의 값이 변환되지 않는 경우 getAttribute()가 반환하는 것과 동일한 값을 반환합니다. 이 속성은 DOM 레벨 1에 포함되지 않지만 속성 변환을 지원하기 위해 Dreamweaver 3에 추가되었습니다.

setAttribute(attrName, attrValue) 값을 반환하지는 않고, 지정된 속성을 지정된 값에 설정합니다(예: img.setAttribute("src", "image/roses.gif").

removeAttribute(attrName) 값을 반환하지는 않고, 이 태그에 대한 HTML에서 지정된 속성과 해당 값을 제거합니다.

getElementsByTagName(tagName) tagName 유형의 자식 태그(예: IMG, DIV 등)를 단계별로 실행하는 데 사용할 수 있는 NodeList.

tagName 인수가 "layer" 이면 모든 LAYER 및 ILAYER 태그와 절대 위치를 가지는 요소를 반환합니다.

tagName 인수가 "input" 이면 함수는 모든 양식 요소를 반환합니다. 하나 이상의 tagName 객체에 하나의 name 속성이 지정된 경우에는 이름이 HTML 4.01 사양에서 요구하는 문자로 시작해야 합니다. 그렇지 않으면 이 함수가 반환하는 배열의 길이가 올바르지 않게 됩니다.

getElementsByAttributeName(attrName) attrName 속성을 가진 요소(예: 속성 "for"를 가진 모든 요소)를 단계별로 실행하는 데 사용할 수 있는 NodeList. DOM 레벨 1이나 2의 일부가 아닙니다.

hasChildNodes() 태그에 자식이 있는지 여부를 나타내는 부울 값

hasTranslatedAttributes() 태그에 변환된 속성이 있는지 여부를 나타내는 부울 값. 이 속성은 DOM 레벨 1에 포함되지 않지만 속성 변환을 지원하기 위해 Dreamweaver 3에 추가되었습니다.

83

text 객체의 속성 및 메서드HTML 문서에서 각각의 인접한 텍스트 블록(예: P 태그 내의 텍스트)은 JavaScript객체로 표현됩니다. text 객체에는 자식이 없습니다. 다음 표에서는 Dreamweaver에서 사용하는 DOM 레벨 1의 text 객체에 대한 속성 및 메서드를 자세히 설명합니다. 불릿(•)은 읽기 전용 속성을 표시합니다.

comment 객체의 속성 및 메서드각 JavaScript 객체는 각 HTML 주석을 나타냅니다. 다음 표에서는 Dreamweaver에서 사용하는 DOM 레벨 1의 comment 객체에 대한 속성 및 메서드를 자세히 설명합니다. 불릿(•)은 읽기 전용 속성을 표시합니다.

dreamweaver 및 site 객체Dreamweaver에서는 DOM을 통하여 액세스할 수 있는 표준 객체를 실행하고 두 개의 사용자 정의 객체(dreamweaver 및 site)를 추가합니다. 이 사용자 정의 객체는 API와 Extension에서 폭넓게 사용됩니다. dreamweaver 및 site 객체의 메서드에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

dreamweaver 객체의 속성dreamweaver 객체에는 다음과 같은 두 개의 읽기 전용 속성이 있습니다.

• appName 속성은 "Dreamweaver"라는 값을 가지고 있습니다.

• appVersion 속성은 "versionNumber.releaseNumber.buildNumber[languageCode](플랫폼)" 형식의 값을 가지고 있습니다.

예를 들어, Dreamweaver CS3의 스웨덴어 Windows 버전에 대한 appVersion 속성의 값은 "8.0.XXXX [se] (Win32)"가 되고, 영어 Macintosh 버전에 대한 값은 "8.0.XXXX [en] (MacPPC)"가 됩니다.

참고: [도움말] > [정보] 메뉴 항목을 선택하면 버전 및 빌드 번호를 확인할 수 있습니다.

appName과 appVersion 속성은 Dreamweaver 3에서 구현되었으며 이전 버전의 Dreamweaver에서는 사용할 수 없습니다.


nodeType • Node.TEXT_NODE

parentNode • 부모 태그

child Nodes • 빈 NodeList

previousSibling • 이 값 직전의 형제 노드. 예를 들어, <p>blah<br />blah</p> 코드의 경우, <p> 태그에는 세 개의 자식 노드(텍스트 노드, 요소 노드, 텍스트 노드)가 있습니다. 세 번째 자식에서 previousSibling은 <br /> 태그이고, 첫 번째 자식에서 previousSibling은 null입니다.

nextSibling • 이 값 다음의 형제 노드. 예를 들어, <p>blah<br />blah</p> 코드의 경우, <p> 태그 첫 번째 자식의 nextSibling은 br / 태그이고 세 번째 자식의 nextSibling은 null입니다.

data 실제 텍스트 문자열. 텍스트의 항목은 단일 문자로 표시됩니다. 예를 들어, 텍스트 Joseph & I는 Joseph & I로 반환됩니다.

hasChildNodes() false


nodeType • Node.COMMENT_NODE

parentNode • 부모 태그

childNodes • 빈 NodeList 배열

previousSibling • 이 값 직전의 형제 노드.

nextSibling • 이 값 다음의 형제 노드.

data comment 표시 기호 사이의 텍스트 문자열()

hasChildNodes() false


84

Dreamweaver의 버전을 확인하려면 다음 예제와 같이 appVersion이 존재하는지 확인한 다음 버전 번호를 확인합니다.if (dreamweaver.appVersion && dreamweaver.appVersion.indexOf('3.01') != -1){¬

// 코드 실행}

dreamweaver 객체에는 사용자의 운영 체제 언어를 알아내는 데 사용할 수 있는 systemScript라는 속성이 있습니다. 지역화된 운영 체제를 위해 Extension 코드에 특별한 경우를 포함시켜야 하는 경우 다음 예제에서처럼 이 속성을 사용합니다.if (dreamweaver,systemScript && (dreamweaver.systemScript.indexOf('ja')!=-1){¬

SpecialCase

}

systemScript 속성은 지역화된 각 운영 체제에 대해 다음 값을 반환합니다.

모든 유럽 언어의 운영 체제는 'en'을 반환합니다.

site 객체site 객체에는 속성이 없습니다. site 객체의 메서드에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

언어 값

일본어 ja

한국어 ko

중국어 번체 zh_tw

중국어 간체 zh_cn

85

7장: 삽입 막대 객체

Adobe Dreamweaver CS3에서 객체는 특정 문자열로 된 코드를 사용자의 문서에 삽입합니다. 객체는 일반적으로 삽입 막대, [삽입] 메뉴 또는 둘 모두에 위치합니다. 그러므로 사용자는 아이콘이나 메뉴 옵션을 클릭하여 이미지, 절대 위치(AP) 요소 및 테이블과 같은 내용을 추가할 수 있습니다. 삽입 막대에 항목을 추가하면 다른 사용자의 반복 작업이 자동적으로 수행되도록 하거나 사용자가 특정 속성을 설정할 수 있는 대화 상자를 작성할 수 있습니다.

객체는 Dreamweaver 응용 프로그램 폴더 내의 Configuration/Objects 폴더에 위치합니다. Objects 하위 폴더는 삽입 막대에서의 객체 위치에 따라 그룹화되어 있으며 이 객체 파일을 열어 현재 객체의 구조를 확인할 수 있습니다. 예를 들어, Configuration/Objects/Common/Hyperlink.htm 파일을 열면 삽입 막대에 있는 하이퍼텍스트 링크 객체 버튼에 해당하는 코드를 확인할 수 있습니다.

다음 표에서는 객체를 만드는 데 사용하는 파일에 대해 설명합니다.

객체 파일이 동작하는 방법 객체는 다음과 같은 구성 요소를 가지고 있습니다.

• 문서에 삽입되는 내용을 정의하는 HTML 파일

객체 파일의 head 섹션에는 body 섹션에서의 양식 입력을 처리하고 사용자의 문서에 추가되는 내용을 제어하는 JavaScript 함수가 포함되어 있습니다. 또는 객체 파일의 head 섹션이 그러한 역할을 하는 외부 JavaScript 파일을 참조합니다. 객체 파일의 body에는 객체의 매개 변수(예: 테이블에 삽입할 행과 열의 수)를 허용하고 사용자가 속성을 입력할 수 있도록 대화 상자를 활성화하는 HTML 양식이 포함될 수 있습니다.

참고: 가장 간단한 객체에는 삽입할 HTML만 포함되며 body 및 head 태그는 포함되지 않습니다. 자세한 내용은 Adobe 기술 지원 센터에서 “Dreamweaver 사용자 정의” 를 참조하십시오.

• 삽입 막대에 나타나는 18 x 18픽셀 이미지

• insertbar.xml 파일에 추가 insertbar.xml 파일은 객체가 삽입 막대에 나타나는 위치를 정의합니다.

삽입 막대에 있는 아이콘을 클릭하거나 [삽입] 메뉴에서 항목을 선택하여 객체를 선택할 때 다음과 같은 이벤트가 발생합니다.

1 Dreamweaver는 canInsertObject() 함수를 호출하여 대화 상자를 나타낼지 여부를 결정합니다.

객체 파일에 form 태그가 있는지 검색됩니다. 특정 양식이 존재하고 [일반] 환경 설정 대화 상자에서 [객체 삽입시 대화 상자 보기] 옵션을 선택하면, windowDimensions() 함수가 정의되어 있는 경우 Dreamweaver는 이 함수를 호출하여 해당 양식을 표시할 대화 상자의 크기를 결정합니다. 객체 파일에 양식이 없으면 Dreamweaver에서는 대화 상자를 표시하지 않고 2단계를 건너뜁니다.

2 1단계에서 Dreamweaver에 대화 상자가 표시된 경우, 사용자는 이 대화 상자의 텍스트 필드에 표의 행 및 열 수와 같은 객체에 대한 매개 변수를 입력하고 [확인]을 클릭합니다.

경로 파일 설명

Configuration/Objects/객체 유형/ 객체 이름.htm 문서에 삽입할 대상을 지정합니다.

Configuration/Objects/객체 유형/ 객체 이름.js 실행할 함수가 들어 있습니다.

Configuration/Objects/객체 유형/ 객체 이름.gif 삽입 막대에 나타나는 이미지가 들어 있습니다.

Configuration/Objects insertbar.xml 삽입 막대에 나타나는 객체 및 이러한 객체의 순서를 지정합니다.


86

3 Dreamweaver는 objectTag() 함수를 호출하여 문서에서 현재 선택 영역 뒤에 반환값을 삽입합니다. 현재 선택 영역을 대체하지는 않습니다.

4 Dreamweaver는 objectTag() 함수를 검색하지 못하면 insertObject() 함수를 찾아서 대신 호출합니다.

삽입 막대 정의 파일Configuration/Objects/insertbar.xml 파일은 삽입 막대 속성을 정의합니다. 이 XML 파일에는 각 객체에 대한 정의가 객체 표시 순서대로 포함되어 있습니다.

사용자가 처음 Dreamweaver를 시작하면 삽입 막대가 문서에서 수평으로 나타납니다. 이후에는 삽입 막대의 표시/숨김 여부 및 위치가 레지스트리에 저장됩니다.

Insertbar.xml 태그 계층 구조다음 예제에서는 insertbar.xml 파일에 있는 중첩된 태그의 서식 및 계층 구조를 보여 줍니다.<?xml version="1.0" ?>

<!DOCTYPE insertbarset SYSTEM "-//Macromedia//DWExtension insertbar 5.0">

<insertbar xmlns:MMString="http://www.Macromedia.com/schemes/data/string/">

<category id="DW_Insertbar_Common" MMString:name="insertbar/categorycommon" folder="Common"><button id="DW_Hyperlink" image="Common\Hyperlink.png"MMString:name="insertbar/hyperlink" file="Common\Hyperlink.htm" />

<button id="DW_Email" image="Common\E-Mail Link.png"MMString:name="insertbar/email" file="Common\E-Mail Link.htm" />

<separator />

<menubutton id="DW_Images" MMString:name="insertbar/images"image="Common\Image.png">

<button id="DW_Image" image="Common\Image.png"MMString:name="insertbar/image" file="Common\Image.htm" />

...

</menubutton>

<separator />

<button id="DW_TagChooser" MMString:name="insertbar/tagChooser"image="Common\Tag Chooser.gif" command="dw.showTagChooser()"

codeOnly="TRUE"/>

</category>

...

</insertbar>

참고: insertbar 및 category 태그는 </insertbar> 및 </category> 닫기 태그를 사용하여 내용의 끝을 표시하지만 태그 버튼, 체크 버튼 및 분리 기호에는 연관된 닫기 태그가 없습니다. 대신, 버튼, 체크 버튼 및 분리 기호는 닫기 괄호 앞에 슬래시(/)를 사용하여 속성 및 내용의 끝을 표시합니다.

삽입 막대 정의 태그insertbar.xml 파일에는 다음 태그 및 속성이 포함되어 있습니다.

<insertbar>

설명이 태그는 삽입 막대 정의 파일의 내용을 알려 주며 그 내용의 끝에는 </insertbar> 닫기 태그가 사용됩니다.

속성없음



87

예제<insertbar>

<category id="DW_Insertbar_Common" folder="Common"><button id="DW_Hyperlink" image="Common\Hyperlink.gif" file="Common\Hyperlink.htm"/>0

...

</insertbar>

<category>

설명이 태그는 삽입 막대에 범주(예: 일반, 양식, HTML)를 정의합니다. </category> 닫기 태그는 범주 내용의 끝을 지정합니다.

참고: 기본적으로, 삽입 막대의 구조는 사용 범주(예: 일반, 양식, HTML)를 기반으로 만들어 집니다 Dreamweaver의 이전 버전에서 삽입 막대의 구조는 탭을 기반으로 했습니다. 사용자들은 범주나 탭을 기반으로 삽입 막대 객체의 구조를 만드는 방법에 대해 자신만의 고유한 환경 설정을 만들 수 있습니다. 사용자가 탭 구조를 선택하면 범주 태그는 각 탭을 정의합니다.

속성id, folder, {showif}

예제<category id="DW_Insertbar_Common" folder="Common">

<button id="DW_Hyperlink" image="Common\Hyperlink.gif" file="Common\Hyperlink.htm"/>

</category>

<menubutton>

설명이 태그는 삽입 막대의 팝업 메뉴를 정의합니다.

속성id, image, {showIf}, {name}, {folder}

예제<menubutton

id="DW_ImageMenu"name="Images"

image="Common\imagemenu.gif"

folder="Images">

<button id="DW_Image"image="Common\Image.gif"

enabled=""

showIf=""

file="Common\Image.htm" />

</menubutton>


88

<button />

설명이 태그는 command 또는 file 속성이 지정하는 코드를 실행하기 위해 사용자가 클릭하는 삽입 막대의 버튼을 정의합니다.

속성id, image, name, {canDrag}, {showIf}, {enabled}, {command}, {file}, {tag}, {codeOnly}

예제<button id="DW_Object"image="Common\Object.gif"

name=”Object”

enabled="true"

showIf=""

file="Common\Obect.htm"

/>

<checkbutton />

설명checkbutton은 체크 표시되거나 체크 표시되지 않은 상태를 가지는 버튼입니다. checkbutton을 클릭하면 checkbutton은 눌려진 상태로 나타나며 강조 표시됩니다. checkbutton이 체크 표시되지 않으면 편평하게 나타납니다. Dreamweaver는 Mouse-over, Pressed, Mouse-over-while-pressed 및 Disabled-while-pressed 상태를 가집니다. 명령의 경우 해당 체크 버튼을 클릭하면 상태가 바뀌어야 합니다.

속성id, image, {disabledImage}, {showif}, {enabled}, {command}, {file}, {tag}, {name}, {codeOnly}

예제<checkbutton id="DW_StandardView"name = "Standard View"

image="Tools\Standard View.gif"

checked="_View_Standard"command="dw.getDocumentDOM().setShowLayoutView(false)"/>

<separator />

설명이 태그는 삽입 막대에 수직 선을 표시합니다.

속성{showIf}

예제<separator showIf="_VIEW_CODE"/>

삽입 막대 정의 태그 속성삽입 막대 태그의 속성에는 다음과 같은 의미가 있습니다.

id="unique id"

설명id 속성은 삽입 막대에 나타나는 버튼의 식별자입니다. 이 id 속성은 파일 내의 요소에 대해 고유해야 합니다.

예제id="DW_Anchor"


89

image="image_path"

설명이 속성은 Dreamweaver Configuration 폴더에 대하여 삽입 막대에 나타나는 아이콘 파일의 상대적인 경로를 지정합니다. 이 아이콘은 Dreamweaver에서 렌더링할 수 있는 포맷이지만 대개는 18 x 18 픽셀 크기의 GIF 또는 JPEG 포맷입니다.

예제image="Common/table.gif"

canDrag="Boolean"

설명이 속성은 사용자가 객체를 문서에 삽입하기 위해 해당 아이콘을 코드 또는 작업 영역으로 드래그할 수 있는지 여부를 지정합니다. 이 속성이 생략되어 있으면 기본값은 true가 됩니다.

예제canDrag="false"

showIf="enabler"

설명이 속성은 지정된 Dreamweaver 활성자가 true 값인 경우에만 이 버튼이 삽입 막대에 나타나야 한다는 것을 지정합니다. showIf를 지정하지 않으면 버튼은 항상 표시됩니다. 사용 가능한 활성자에는 _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML(모든 버전의 Adobe ColdFusion용), _SERVERMODEL_CFML_UD4(UltraDev 버전 4 ColdFusion 전용), _SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES, 및 _VIEW_STANDARD가 있습니다.

여러 개의 활성자를 지정하려면 각 활성자 사이에 AND를 의미하는 콤마를 사용하십시오. NOT을 지정하려면 느낌표(!)를 사용하십시오.

예제버튼은 ASP 페이지의 코드 뷰에 나타나도록 하려면 활성자를 다음과 같이 지정하십시오.showIf="_VIEW_CODE, _SERVERMODEL_ASP"

enabled="enabler"

설명이 속성은 DW_enabler 값이 true인 경우, 사용자가 해당 항목을 사용할 수 있도록 지정합니다. enabled 함수를 지정하지 않으면 항목은 기본적으로 항상 활성화됩니다. 사용 가능한 활성자에는 _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML(모든 버전의 ColdFusion용), _SERVERMODEL_CFML_UD4(UltraDev 버전 4 ColdFusion 전용), _SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES 및 _VIEW_STANDARD가 있습니다.


예제버튼을 [코드] 뷰에서만 사용할 수 있게 하려면 다음을 지정하십시오.enabled="_VIEW_CODE"

그러면 다른 뷰에서 해당 버튼이 희미하게 표시됩니다.


90

checked="enabler"

설명checkbutton 태그를 사용하는 경우, checked 속성은 필수입니다.

항목은 DW_enabler 값이 true인 경우에 체크 표시됩니다. 사용 가능한 활성자에는 _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML(모든 버전의 ColdFusion용), _SERVERMODEL_CFML_UD4(UltraDev 버전 4 ColdFusion 전용), _SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES, 및 _VIEW_STANDARD가 있습니다.


예제checked="_View_Layout"

command="API_function"

설명삽입할 코드가 포함된 HTML 파일을 참조하는 대신, 이 태그를 사용하여 버튼을 클릭할 때 Dreamweaver에서 수행할 명령을 지정합니다.

예제command="dw.showTagChooser()"

file="file_path"

설명file 속성은 Dreamweaver Configuration 폴더에 대한 객체 파일의 상대적인 경로를 지정합니다. Dreamweaver는 name 속성이 지정되지 않은 경우, 객체 파일의 제목으로부터 객체 아이콘에 대한 도구 설명을 유도합니다.

예제file="Templates/Editable.htm"

tag="editor"

설명이 속성은 태그 편집기를 호출하도록 Dreamweaver에 알려 줍니다. [코드] 뷰에서 tag 속성이 정의되어 있을 때 사용자가 객체를 클릭하면 Dreamweaver는 [태그] 대화 상자를 호출합니다. [코드] 뷰에서 tag 및 command 속성을 지정하면 Dreamweaver는 태그 편집기를 호출합니다. [디자인] 뷰에서 codeOnly="TRUE"이고 file 속성을 지정하지 않으면 Dreamweaver MX는 [코드 및 디자인] 뷰를 호출하고 코드에 포커스를 두고 태그 편집기를 호출합니다.

예제tag = "form"

name="tooltip_text"

설명name 속성은 마우스 포인터가 객체 위에 있을 때 나타나는 도구 설명을 지정합니다. 객체 파일만 지정하고 name 속성은 지정하지 않으면 Dreamweaver에서는 객체 파일의 이름을 도구 설명에 사용합니다.

참고: 이 이름 속성이 제공되지 않으면 삽입 막대 UI의 [즐겨찾기] 범주에서 객체 그룹을 만드는 것이 불가능합니다.

일부 삽입 막대 객체는 접두어가 MMString인 name 속성 형태를 사용합니다. MMString은 지역화된 문자열을 표시합니다. 이 문자열 값에 대해서는 65페이지의 “Extension 지역화”에서 설명합니다.

예제name = "cfoutput"


91

삽입 막대 수정한 범주에서 다른 범주로 객체를 이동하고, 범주의 이름을 다시 지정하고, 패널에서 객체를 완전히 제거할 수 있습니다. 삽입 막대에 변경 사항이 나타나도록 하려면 Dreamweaver를 다시 시작하거나 Extension을 새로 고쳐야 합니다. Extension을 새로 고치는 방법에 대한 자세한 내용은 63페이지의 “Extension 새로 고침”을 참조하십시오.

삽입 막대의 한 범주에서 다른 범주로 또는 특정 범주 내의 새 위치로 객체를 이동하거나 복사하려면:1 insertbar.xml의 백업 사본을 insertbar.backup.xml과 같은 이름으로 저장합니다.

2 원본 insertbar.xml 파일을 엽니다.

3 이동하거나 복사할 객체를 나타내는 button 태그를 검색합니다. 예를 들어, 이미지 객체를 [일반] 범주 내의 현재 위치로부터 이동하려면 "DW_Image"라는 id 속성을 가진 button 태그를 검색합니다.

4 전체 button 태그를 잘라내거나 복사합니다.

5 해당 객체를 이동하거나 복사할 범주를 나타내는 category 태그를 검색합니다.

6 해당 객체가 나타나도록 할 범주에서 적절한 위치를 검색합니다.

7 복사한 button 태그를 붙여넣습니다.

8 insertbar.xml 파일을 저장합니다.

9 Extension을 새로 고칩니다.

삽입 막대에서 특정 객체를 제거하려면:1 insertbar.xml의 백업 사본을 insertbar.backup.xml과 같은 이름으로 저장합니다.


3 제거할 객체를 나타내는 button 태그를 검색합니다.

4 전체 button 태그를 삭제합니다.


6 사용하는 디스크에서, 해당 객체의 HTML, GIF 및 JavaScript 파일을 현재 폴더로부터 insertbar.xml 파일에 나타나지 않은 폴더로 갖다 놓습니다. 예를 들어, Configuration/Objects 폴더에 Unused라는 이름의 새 폴더를 만들고 객체의 파일을 이 폴더로 이동시킵니다. 객체를 확실히 제거해야 하면 해당 객체 파일을 완전히 삭제할 수 있습니다. 하지만, 그 객체를 나중에 다시 복원할 경우를 감안하여 파일의 백업 사본을 만들어 두는 것이 좋습니다.


삽입 막대에 있는 범주의 순서를 변경하려면:1 insertbar.xml의 백업 사본을 insertbar.backup.xml과 같은 이름으로 저장합니다.


3 이동할 범주에 해당하는 category 태그를 검색하고 그 태그에 포함된 모든 태그를 포함하여 해당 태그를 선택합니다.

4 태그를 잘라 냅니다.

5 태그를 새 위치로 붙여넣습니다. 다른 category 태그 내에 존재하지 않는 위치로 태그를 붙여넣어야 합니다.




92

새 범주를 작성하려면:1 insertbar.xml의 백업 사본을 “insertbar.backup.xml” 과 같은 이름으로 저장합니다.


3 새 범주 태그를 작성하고 작성한 범주 및 이 범주에 나타날 일련의 객체를 저장할 기본 폴더를 지정합니다.

4 insertbar.xml에 사용된 태그의 구문에 대한 자세한 내용은 86페이지의 “삽입 막대 정의 태그”를 참조하십시오.



삽입 막대에 객체 추가삽입 막대에 객체를 추가할 수 있습니다. 삽입 막대에 변경 사항이 나타나도록 하려면 Dreamweaver를 다시 시작하거나 Extension을 새로 고쳐야 합니다. Extension을 새로 고치는 방법에 대한 자세한 내용은 63페이지의 “Extension 새로 고침”을 참조하십시오.

삽입 막대에 새 객체를 추가하려면:1 HTML 또는 JavaScript(선택 사항)를 사용하여 사용자의 문서에 사용할 특정 문자열로 된 코드를 정의합니다.

2 그런 다음, Dreamweaver 인터페이스의 버튼에 사용할 이미지(18 x 18픽셀)를 확인하거나 작성합니다.

더 큰 이미지를 만든 경우에는 Dreamweaver에서 이미지 크기를 18 x 18픽셀로 조절합니다. 객체의 이미지를 작성하지 않으면 물음표(?)를 가진 기본 객체 아이콘이 삽입 막대에 나타납니다.

3 Configuration/Objects 폴더에 새 파일을 추가합니다.

4 insertbar.xml 파일을 편집하여 새 파일의 위치를 확인하고 버튼의 모양에 대한 일부 속성을 설정합니다(86페이지의 “삽입 막대 정의 파일” 참조).

5 Dreamweaver를 다시 시작하거나 Extension을 새로 고칩니다.

새 객체가 삽입 막대의 지정된 위치에 나타납니다.

참고: 객체 파일을 별도의 폴더에 저장할 수도 있지만 중요한 것은 각 파일 이름이 고유해야 한다는 점입니다. 예를 들어, dom.insertObject() 함수는 Objects 폴더의 하위 폴더에 상관없이 Objects 폴더 내의 모든 곳에서 파일을 찾습니다. dom.insertObject() 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오. Button.htm이라는 파일이 Forms 폴더에 존재하고 Button.htm이라는 다른 객체 파일이 MyObjects 폴더에 있으면 Dreamweaver는 이 두 파일을 구별할 수 없습니다. Button.htm의 두 인스턴스가 존재하면 dom.insertObject()는 Button이라는 두 객체를 표시합니다. 이때, 사용자는 두 객체 사이의 차이점을 알지 못할 수도 있습니다.

[삽입] 메뉴에 객체 추가하기[삽입] 메뉴 또는 기타 메뉴에 특정 객체의 위치를 추가하거나 제어하려면 menus.xml 파일을 수정합니다. 이 파일은 Dreamweaver의 전체 메뉴 구조를 제어합니다. menus.xml 파일 수정에 대한 자세한 내용은 118페이지의 “메뉴 및 메뉴 명령”을 참조하십시오.

다른 Dreamweaver 사용자에게 Extension을 배포하려면 66페이지의 “Extension 관리자 작업”을 참조하여 Extension 패키지화에 대해 살펴보십시오.


93

간단한 객체 삽입 예제이 예제는 사용자가 버튼을 클릭하면 선택된 텍스트를 관통하는 줄(취소선)을 추가하는 객체를 삽입 막대에 추가합니다. 이 객체는 사용자가 문서에 주석을 추가하려는 경우에 유용하게 사용할 수 있습니다.

이 예제는 텍스트 조작 작업을 수행하므로 삽입 막대의 HTML 범주에 있는 텍스트 팝업 메뉴에서 일부 객체를 검색하는 작업을 모델로 참고할 수 있습니다. 예를 들어, Bold, Emphasis 및 Heading 객체 파일에서 유사한 기능을 찾아 보십시오. Dreamweaver는 이 파일 내의 선택된 텍스트 주변에서 태그 줄바꿈 작업을 수행합니다.

취소선 삽입 객체를 만들려면 다음 단계를 수행합니다.

• 93페이지의 “HTML 파일 만들기”

• 93페이지의 “JavaScript 함수 추가”

• 95페이지의 “이미지 만들기”

• 95페이지의 “insertbar.xml 파일 편집”

• 96페이지의 “대화 상자 추가”

• 98페이지의 “삽입 막대 팝업 메뉴 만들기”

HTML 파일 만들기열기 및 닫기 title 태그 사이에 객체 제목이 지정됩니다. 스크립팅 언어를 JavaScript로 지정합니다.

HTML 파일을 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음 코드를 추가합니다.<html>

<head>

<title>Strikethrough</title>


</script>

</head>

<body>

</body>

</html>

3 파일을 Strikethrough.htm으로 Configuration/Objects/Text 폴더에 저장합니다.

JavaScript 함수 추가이 예제에서 JavaScript 함수는 비헤이비어를 정의하고 취소선 객체의 코드를 삽입합니다. 파일의 head 섹션에 모든 API 함수를 배치해야 합니다. Configuration/Objects/Text/Em.htm과 같은 기존 객체 파일은 유사한 패턴을 가진 함수 및 주석을 따릅니다.

객체 정의 파일이 사용하는 첫 번째 함수는 isDOMRequired()이며, 이 함수는 작업을 계속 진행하기 전에 [디자인] 뷰를 기존 [코드] 뷰와 동기화해야 하는지 여부를 알려 줍니다. 위첨자 객체는 코드 뷰 내에서 기타 여러 객체와 함께 사용될 수 있으므로 동기화를 강행하지 않아도 됩니다.


94

isDOMRequired() 함수를 추가하려면:1 Strikethrough.htm 파일의 head 섹션에서 열기 및 닫기 script 태그 사이에 다음 함수를 추가합니다.<script language="javascript">

function isDOMRequired() {

// false를 반환하여 이 객체가 [코드] 뷰에서 사용 가능함을 나타냅니다.return false;

}

</script>


다음으로, 다음 함수에 objectTag() 또는 insertObject() 함수를 사용할지 여부를 결정합니다. 취소선은 선택된 텍스트 주위에서 s 태그를 줄바꿈하는 단순한 작업을 수행합니다. 그러므로 취소선은 insertObject() 함수 사용을 위한 기준을 만족시키지 않습니다(102페이지의 “insertObject()” 참조).

objectTag() 함수 내에서 dw.getFocus()를 사용하여 [코드] 뷰가 현재 뷰가 될지 여부를 결정합니다. 코드 뷰에 입력 포커스가 있으면 이 함수는 선택된 텍스트 주위에서 적절한(대문자 또는 소문자) 태그를 줄바꿈해야 합니다. [디자인] 뷰에 입력 포커스가 있으면 이 함수는 dom.applyCharacterMarkup()을 사용하여 선택된 텍스트에 서식을 지정할 수 있습니다. 이 함수는 지원되는 태그에 대해서만 작동합니다(Dreamweaver API 참조 설명서의 dom.applyCharacterMarkup() 참조). 다른 태그나 작업에는 다른 API 함수를 사용해야 합니다. Dreamweaver는 서식을 적용한 후, 메시지나 대화 상자를 표시하지 않고 삽입점(커서)을 문서에 돌려줍니다. 다음 절차에서는 objectTag() 함수가 읽는 방법을 보여 줍니다.

objectTag() 함수를 추가하려면:1 Strikethrough.htm 파일의 head 섹션에서 isDOMRequired() 함수 뒤에 다음 함수를 추가합니다.function objectTag() {

// 사용자가 [코드] 뷰에 있는지 확인합니다.var dom = dw.getDocumentDOM();

if (dw.getFocus() == 'textView' || dw.getFocus(true) == 'html'){

var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "") ==

'TRUE');

// 선택 항목 주위의 태그를 수동으로 둘러쌉니다.if (upCaseTag){

dom.source.wrapSelection('<S>','</S>');

}else{

dom.source.wrapSelection('<s>','</s>');

}

// 사용자가 [코드] 뷰에 있지 않은 경우 [디자인] 뷰에서 서식을 적용합니다.}else if (dw.getFocus() == 'document'){

dom.applyCharacterMarkup("s");

}

// 반환만 수행하고 다른 동작은 하지 않습니다.return;

}

2 파일을 Strikethrough.htm으로 Configuration/Objects/Text 폴더에 저장합니다.

HTML 파일의 head 섹션에 JavaScript 함수를 추가하는 대신 별도의 JavaScript파일을 만들 수 있습니다. 이러한 구조는 객체에 여러 함수 또는 다른 객체에 의해 공유될 수 있는 함수가 포함된 경우에 매우 유용합니다.


95

HTML 객체 정의 파일과 지원 JavaScript 함수를 구별하려면:1 비어 있는 새 파일을 만듭니다.

2 모든 JavaScript 함수를 파일에 붙여넣습니다.

3 Strikethrough.htm에서 함수들을 제거하고 해당 스크립트 태그의 src 속성에 JavaScript 파일 이름을 다음 예제와 같이 추가합니다.<html>

<head>

<title>Strikethrough</title>

<script language="javascript" src="Strikethrough.js">

</script>

</head>

<body>

</body>

</html>

4 Strikethrough.htm 파일을 저장합니다.

5 JavaScript 함수를 Strikethrough.js로 포함하고 있는 파일을 Configuration/Objects/Text 폴더에 저장합니다.

이미지 만들기

삽입 막대에 대한 이미지를 만들려면:1 다음 그림과 같이 GIF 이미지(18 x 18픽셀)를 만듭니다.

2 파일을 Strikethrough.gif로 Configuration/Objects/Text 폴더에 저장합니다.

insertbar.xml 파일 편집그런 다음, Dreamweaver에서 이 두 항목을 삽입 막대 인터페이스와 연관시킬 수 있도록 insertbar.xml 파일을 편집해야 합니다.

참고: insertbar.xml 파일을 편집하기 전에 원본 파일을 insertbar.xml.bak으로 복사하여 백업을 만들어 두는 것이 좋습니다.

insertbar.xml 파일 내의 코드는 삽입 막대에 있는 기존의 모든 객체를 식별합니다.

• XML 파일의 각 category 태그는 인터페이스의 한 범주를 작성합니다.

• 각 menubutton 태그는 삽입 막대에 위치할 팝업 메뉴를 작성합니다.

• XML 파일의 각 button 태그는 삽입 막대에 아이콘을 배치하여 적절한 HTML 파일이나 함수와 연결합니다.

삽입 막대에 새 객체를 추가하려면:1 inserbar.xml 파일의 시작 부분 근처에서 다음 행을 찾습니다.<category id="DW_Insertbar_Common" MMString:name="insertbar/category/common" folder="Common">

이 행은 삽입 막대에 있는 [일반] 범주의 시작 부분을 지정합니다.

2 이 범주 태그 뒤에서 새 행을 시작한 다음, button 태그를 삽입하고 취소선 객체의 id, image 및 file 속성을 이 태그에 지정합니다.

ID는 표준 명명 규칙을 준수하는 버튼의 고유한 이름(이 객체의 경우 DW_Text_Strikethrough 사용)이어야 합니다. image 및 file 속성은 다음과 같이 지원하는 파일의 위치를 Dreamweaver에 알려줍니다.<button id="DW_Text_Strikethrough" image="Text\Strikethrough.gif"

file="Text\Strikethrough.htm"/>


96


4 Extension을 새로 고칩니다(63페이지의 “Extension 새로 고침” 참조).

새 객체는 다음 그림과 같이 삽입 막대의 [일반] 범주 처음에 나타납니다.

대화 상자 추가특정 양식을 객체에 추가하여 Dreamweaver에서 지정된 코드를 삽입하기 전에 사용자가 매개 변수를 입력하도록 할 수 있습니다. 예를 들어, 하이퍼링크 객체는 text, link, target, category index, title 및 access key 값을 사용자로부터 요청합니다. 이 예제에서는 이전 예제의 취소선 객체에 특정 양식을 추가합니다. 이 양식은 텍스트 색상을 빨강으로 바꾸고 취소선 태그를 추가하는 옵션을 사용자에게 제공하는 대화 상자를 엽니다.

이 예제에서는 Strikethrough.js라는 별도의 JavaScript 파일을 이미 작성해 두었다고 가정합니다

우선, Strikethrough.js에서 사용자가 텍스트 색상을 변경하도록 선택한 경우 이 양식이 호출하는 함수를 추가합니다. 이 함수는 취소선 객체의 objectTag() 함수와 유사하지만 선택적 함수입니다.

함수를 만들려면:1 Strikethrough.js의 objectTag() 함수 뒤에 다음 코드를 입력하여 fontColorRed()라는 함수를 만듭니다.function fontColorRed(){

var dom = dw.getDocumentDOM();


var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "")

== 'TRUE');

// 선택 항목 주위의 태그를 수동으로 둘러쌉니다. if (upCaseTag){

dom.source.wrapSelection('<FONT COLOR="#FF0000">','</FONT>');

}else{

dom.source.wrapSelection('<font color="#FF0000">','</font>');

}

}else if (dw.getFocus() == 'document'){

dom.applyFontMarkup("color", "#FF0000");

}


}

참고: dom.applyCharacterMarkup()이 글꼴 색상 변경을 지원하지 않으므로 글꼴 색상 변경을 위해 적절한 API 함수를 찾아야 합니다. 자세한 내용은 Dreamweaver API 참조 설명서의 dom.applyFontMarkup()을 참조하십시오.

2 파일을 Strikethrough.js로 저장합니다.

그런 다음, Strikethrough.htm 파일에 이 양식을 추가합니다. 이 예제의 양식은 사용자가 클릭할 때 fontColorRed() 함수를 호출하는 간단한 체크 상자입니다. form 태그를 사용하여 양식을 정의하고 레이아웃 제어를 위한 표 태그를 정의합니다. 그렇지 않으면, 대화 상자가 단어 줄바꿈이나 크기 조절을 부자연스럽게 할 수도 있습니다.

양식을 추가하려면:1 body 태그 뒤에 다음 코드를 추가합니다.<form>

<table border="0" height="100" width="100">

<tr valign="baseline">

<td align="left" nowrap>

<input type="checkbox" name="red" onClick=fontColorRed()>Red text</input>

</td>

</tr>

</table>

</form>


97

2 파일을 Strikethrough.htm으로 저장합니다.

3 Extension을 새로 고칩니다(63페이지의 “Extension 새로 고침” 참조).

이 대화 상자를 테스트하려면:1 [붉은색 텍스트] 체크 상자를 선택합니다.

2 [확인] 버튼을 클릭하면 다음과 같이 objectTag() 함수가 실행되어 취소선이 추가됩니다.


98

삽입 막대 팝업 메뉴 만들기Dreamweaver의 삽입 막대는 다음 그림에서와 같이 객체에 대한 새로운 구조를 소개하고, 객체를 소규모의 그룹으로 구성하도록 도와주는 팝업 메뉴를 지원합니다.

다음 예제에서는 삽입 막대에 Editorial이라는 새 범주를 만들고 해당 범주에 팝업 메뉴를 추가합니다. 이 팝업 메뉴는 이미 만든 취소선 객체를 포함하게 되며, 작성할 Blue Text 객체와 함께 취소선 객체의 그룹을 만듭니다. 삽입 막대의 [Editorial] 범주에 속한 객체는 사용자가 파일에 주석을 만든 다음, 제거하고 싶은 내용에는 취소선을 긋거나 새로운 내용은 파랑으로 색상을 지정할 수 있도록 합니다.

파일을 구성하려면:1 Dreamweaver 설치 폴더에 새 Configuration/Objects/Editorial 폴더를 만듭니다.

2 Editorial 폴더에 만들어 둔 취소선 객체 예제의 파일(Strikethrough.htm, Strikethrough.js 및 Strikethrough.gif)을 복사합니다.

Blue Text 객체를 만들려면:1 새 HTML 파일을 만듭니다.

2 다음 코드를 추가합니다.<html>

<head>

<title>Blue Text</title>


//--------------- API 함수---------------

function isDOMRequired() {

// false를 반환하여 이 객체가 [코드] 뷰에서 사용 가능함을 나타냅니다.return false;

}

function objectTag() {

// 선택 항목 주위의 태그를 수동으로 둘러쌉니다.var dom = dw.getDocumentDOM();


var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "") ==

'TRUE');

// 선택 항목 주위의 태그를 수동으로 둘러쌉니다. if (upCaseTag){

dom.source.wrapSelection('<FONT COLOR="#0000FF">','</FONT>');

}else{

dom.source.wrapSelection('<font color="#0000FF">','</font>');

}

}else if (dw.getFocus() == 'document'){

dom.applyFontMarkup("color", "#0000FF");

}


99


}

</script>

</head>

<body>

</body>

</html>

3 이 파일을 AddBlue.htm이라는 이름으로 Editorial 폴더에 저장합니다.

이제 Blue Text 객체에 대한 이미지를 만들 수 있습니다.

이미지를 만들려면:1 다음 그림과 같은 GIF 파일(18 x 18픽셀)을 만듭니다.

2 이 이미지를 AddBlue.gif라는 이름으로 Editorial 폴더에 저장합니다.

그런 다음, insertbar.xml 파일을 편집합니다. 이 파일은 삽입 막대의 해당 위치에 객체를 저장합니다. category 태그 내에서 다양한 menubutton 태그 및 해당 속성을 살펴보십시오. 이 menubutton 태그는 HTML 범주에 속한 각 팝업 메뉴를 정의합니다. menubutton 태그 내에서 각 button 태그는 팝업 메뉴의 항목을 정의합니다.

insertbar.xml을 편집하려면:1 파일의 시작 부분 근처에서 다음 코드 줄을 찾으십시오.<insertbar xmlns:MMString="http://www.Macromedia.com/schemes/data/string/">

insertbar 태그는 삽입 막대 내용의 시작 부분을 정의합니다.

2 그 줄 뒤에, 다음 예제에서와 같이 작성할 Editorial 범주에 대한 새 category 태그를 추가하여 고유한 ID, 이름 및 폴더 속성을 지정한 다음, 닫기 category 태그를 추가합니다.<category id="DW_Insertbar_Editorial" name="Editorial" folder="Editorial"></category>

3 Extension을 새로 고칩니다. Extension을 새로 고치는 방법에 대한 자세한 내용은 63페이지의 “Extension 새로 고침”을 참조하십시오.

[Editorial] 범주가 삽입 막대에 나타납니다.



100

4 열기 및 닫기 category 태그 사이에 menubutton 태그와 고유 ID를 포함한 다음 속성을 사용하여 팝업 메뉴를 추가합니다. <menubutton id="DW_Insertbar_Markup" name="markup" image="Editorial\Strikethrough.gif" folder="Editorial">

속성에 대한 자세한 내용은 88페이지의 “삽입 막대 정의 태그 속성”을 참조하십시오.

5 button 태그를 사용하여 새 팝업 메뉴의 객체를 추가합니다.<button id="DW_Editorial_Strikethrough" image="Editorial\Strikethrough.gif" file="Editorial\Strikethrough.htm"/>

6 취소선 객체 버튼 태그 뒤에 다음과 같이 하이퍼텍스트 객체를 추가합니다.<button id="DW_Blue_Text" image="Editorial\AddBlue.gif name="Blue Text" file="Editorial\AddBlue.htm"/>

참고: 버튼 태그에는 별도의 닫기 태그가 없으므로 "/>"로 끝납니다.

7 </menubutton> 닫기 태그를 사용하여 팝업 메뉴를 종료할 수 있습니다.

다음 코드에서는 팝업 메뉴 및 두 객체가 포함된 전체 범주를 보여 줍니다.<category id="DW_Insertbar_Editorial" name="Editorial" folder="Editorial">

<menubutton id="DW_Insertbar_Markup" name="markup"image="Editorial\Strikethrough.gif" folder="Editorial">

<button id="DW_Editorial_Strikethrough"image="Editorial\Strikethrough.gif" file="Editorial\Strikethrough.htm"/>

<button id="DW_Blue_Text" image="Editorial\AddBlue.gif" name="Blue Text"file="Editorial\AddBlue.htm"/>

</menubutton>

</category>

새 팝업 메뉴를 테스트하려면:1 Extension을 새로 고칩니다. Extension을 새로 고치는 방법에 대한 자세한 내용은 63페이지의 “Extension 새로 고침”을 참조하십시오.

2 [Editorial] 메뉴를 클릭합니다.

다음 팝업 메뉴가 나타납니다.

객체 API 함수이 단원에서는 객체 API의 함수에 대해 설명합니다. insertObject() 또는 objectTag() 함수 중 하나를 정의해야 합니다. 이 함수에 대한 자세한 내용은 102페이지의 “insertObject()”를 참조하십시오. 나머지 함수는 선택 사항입니다.

canInsertObject()

지원 버전Dreamweaver MX

설명이 함수는 [객체] 대화 상자를 표시할지 여부를 결정합니다.

인수없음


101

반환값부울 값을 반환합니다.

예제다음 코드는 사용자가 선택된 객체를 문서에 삽입하도록 하기 전에 문서에 특별한 문자열이 있다는 것을 확인하도록 Dreamweaver에 알려줍니다.function canInsertObject(){

var docStr = dw.getDocumentDOM().documentElement.outerHTML;

var patt = /hava/;

var found = ( docStr.search(patt) != -1 );

var insertionIsValid = true;

if (!found){

insertionIsValid = false;

alert("the document must contain a 'hava' string to use this object.");}

return insertionIsValid;}

displayHelp()

설명이 함수를 정의하면 [매개 변수] 대화 상자의 [확인] 및 [취소] 버튼 아래에 [도움말] 버튼이 표시됩니다. 사용자가 [도움말] 버튼을 클릭하면 이 함수가 호출됩니다.

인수없음

반환값없음

예제다음 예제에서는 브라우저에 myObjectHelp.htm 파일을 엽니다. 이 파일은 Extension을 사용하는 방법을 설명합니다.function displayHelp(){

var myHelpFile = dw.getConfigurationPath() +

'/ExtensionsHelp/myObjectHelp.htm';


}

isDOMRequired()

설명이 함수는 객체가 유효한 DOM이 동작하도록 요청할지 여부를 결정합니다. 이 함수가 true를 반환하는 경우나 함수가 정의되어 있지 않은 경우, Dreamweaver에서는 명령에 유효한 DOM이 필요하다고 가정하고 명령을 실행하기 전에 문서의 [코드] 뷰와 [디자인] 뷰를 동기화합니다. 동기화하면 [코드] 뷰의 모든 편집 사항이 [디자인] 뷰에 업데이트됩니다.

인수없음

반환값명령을 사용하여 유효한 DOM이 동작하도록 요청하면 Dreamweaver에 true 값이 반환되고 그렇지 않으면 false가 반환됩니다.


102

insertObject()


설명이 함수는 objectTag() 함수가 정의되어 있지 않은 경우 요청되며, 사용자가 [확인]을 클릭할 때 호출됩니다. 이 함수는 사용자 문서에 코드를 삽입하고 대화 상자를 닫거나 오류 메시지를 표시하고 대화 상자를 열어 둡니다. 이 함수는 objectTag() 대신, 객체에 사용하는 대체 함수로 동작합니다. 이 함수는 사용자가 현재 삽입점에 텍스트를 삽입한다고 가정하지 않으며 사용자가 [확인]을 클릭할 때 데이터의 유효성을 검사할 수 있도록 합니다. 다음과 같은 경우가 하나라도 발생하면 insertObject()를 사용해야 합니다.

• 코드를 둘 이상의 위치에 삽입해야 하는 경우

• 삽입점 이외의 위치에 코드를 삽입해야 하는 경우

• 코드를 삽입하기 전에 입력 내용의 유효성을 검사해야 합니다.

위와 같은 경우가 아니면 objectTag() 함수를 사용합니다.

인수없음

반환값오류 메시지가 포함된 문자열이나 빈 문자열을 반환합니다. 빈 문자열이 반환되면 사용자가 [확인]을 클릭할 때 [객체] 대화 상자가 닫힙니다. 문자열이 비어 있지 않으면 Dreamweaver에서 오류 메시지를 표시하며 대화 상자는 그대로 있습니다.

활성자canInsertObject()

예제다음 예제에서는 코드를 삽입하기 전에 입력 내용의 유효성을 검사해야 하므로 insertObject() 함수를 사용합니다.function insertObject() {

var theForm = document.forms[0];

var nameVal = theForm.firstField.value;

var passwordVal = theForm.secondField.value;

var errMsg = "",

var isValid = true;

// 완전하고 유효한 필드 값인지 확인합니다. if (nameVal == "" || passwordVal == "") {

errMsg = "Complete all values or click Cancel."

} else if (nameVal.length < 4 || passwordVal.length < 6) {

errMsg = "Your name must be at least four characters, and your password at least

six";

}

if (!errMsg) {

// 여기서 문서를 조작합니다. 연습해 보십시오.}

return errMsg;

}


103

objectTag()

설명objectTag()와 insertObject() 함수는 동시에 사용할 수 없으며, 두 함수 모두가 문서 내에 정의되어 있는 경우에는 objectTag() 함수가 사용됩니다. 자세한 내용은 102페이지의 “insertObject()”를 참조하십시오.

이 함수는 사용자의 문서에 코드 문자열을 삽입합니다. Dreamweaver MX에서는 빈 문자열 또는 null 값("return;" 이라고도 함)이 반환되면 Dreamweaver에서 아무 작업도 수행하지 않게 됩니다.

참고: 일반적으로, return 문 앞에 수동으로 편집 작업이 이루어지므로 이 경우에 아무 작업도 수행하지 않는 것과 Dreamweaver에서 [취소]를 클릭하는 것은 서로 다릅니다.

Dreamweaver 4에서 포커스가 [코드] 뷰에 있고 선택 영역이 삽입점이 아니라 특정 범위이면, 이 범위는 objectTag() 함수가 반환하는 문자열로 대체됩니다. objectTag() 함수가 빈 문자열을 반환하거나 아무 것도 반환하지 않은 경우에도 이것은 true입니다. objectTag() 함수는 이미 수동으로 문서를 편집했으므로 빈 문자열이나 null 값을 반환합니다. 그렇지 않으면, 이중 인용 부호(“ ”)로 선택 영역이 대체되어 편집된 내용이 삭제되는 경우가 있습니다.

인수없음

반환값Dreamweaver는 사용자의 문서에 삽입할 문자열을 예측합니다.

예제다음 objectTag() 함수의 예제에서는 특정 ActiveX 컨트롤과 플러그인의 OBJECT/EMBED 조합을 삽입합니다.function objectTag() {

return '\n' +

'<OBJECT CLASSID="clsid:166F1OOB-3A9R-11FB-8075444553540000" \n'¬

+ 'CODEBASE="http://www.mysite.com/product/cabs/¬

myproduct.cab#version=1,0,0,0" \n' + 'NAME="MyProductName"> \n' ¬

+ '<PARAM NAME="SRC" VALUE=""> \n' + '<EMBED SRC="" HEIGHT="" ¬

WIDTH="" NAME="MyProductName"> \n' + '</OBJECT>'

}

windowDimensions()

설명이 함수는 [옵션] 대화 상자에 특정 치수를 설정합니다. 이 함수를 정의하지 않으면 윈도우 치수가 자동으로 계산됩니다.

참고: [옵션] 대화 상자의 크기를 640 x 480픽셀보다 크게 만들지 않는 이상, 이 함수를 정의하지 마십시오.

인수platform

• platform 인수의 값은 사용자의 플랫폼에 따라 "macintosh" 또는 "windows"입니다.

반환값Dreamweaver는 "widthInPixels,heightInPixels" 형식의 문자열을 예측합니다.

반환된 치수에는 [확인] 및 [취소] 버튼의 영역이 포함되지 않기 때문에 전체 대화 상자의 크기보다 작습니다. 반환된 치수에 옵션이 모두 들어가지 않으면 스크롤 막대가 나타납니다.

http://www.mysite.com/product/cabs/�


104

예제다음 windowDimensions() 함수의 예제에서는 [매개 변수] 대화 상자의 크기를 648 x 520픽셀(Windows) 또는 660 x 580픽셀(Macintosh)로 설정합니다.function windowDimensions(platform){

var retval = ""

if (platform = = "windows"){

retval = "648, 520";

}else{

retval = "660, 580";

}

return retval;

}

105

8장: 브라우저 호환성 확인 문제 API

Adobe Dreamweaver CS3의 브라우저 호환성 확인(BCC) 기능을 사용하면 브라우저 렌더링 버그를 일으키는 HTML과 CSS의 조합을 찾아 여러 브라우저에서 제대로 작동하는(모양과 기능 모든 면에서) 페이지 레이아웃을 만들 수 있습니다. 이 기능은 JavaScript를 사용하여 사용자의 문서에서 문제를 유발하는 HTML과 CSS의 조합을 검색합니다. JavaScript 코드는 문제 검색 파일이라고 불리는 HTML 파일에 저장되며, 이러한 파일은 Configuration/BrowserProfiles/Issues/ 폴더에 저장해야 제대로 작동됩니다.

검색 작업 방법사용자가 브라우저 호환성 확인을 처음 실행하거나 [대상 브라우저] 대화 상자에서 [확인]을 클릭할 때마다 Dreamweaver에서 다음 이벤트가 발생합니다.

1 Configuration/BrowserProfiles/ 폴더에서 선택된 브라우저에 대한 프로파일을 읽습니다.

2 Dreamweaver는 Configuration/BrowserProfiles/Issues/ 폴더의 각 문제 파일에서 getIssueID() 함수를 호출하여 각 문제의 고유 ID를 가져옵니다.

3 각 문제에 대해 getAffectedBrowserDisplayNames() 함수(정의되어 있는 경우)를 호출합니다.

4 각 문제에 대해 getAffectedBrowserProfiles() 함수를 호출하여 해당 문제가 현재 선택된 하나 이상의 브라우저에 영향을 미치는지 여부를 확인합니다.

5 문제가 감지된 경우 각 문제에 대해 getIssueName() 함수를 호출하여 [결과] 패널에 표시할 이름을 결정합니다.

6 문제가 감지된 경우 각 문제에 대해 getIssueDescription 함수를 호출하여, 사용자가 [코드] 뷰에서 해당 문제 위로 마우스를 가져갈 때 [결과] 패널의 오른쪽 및 도구 설명에 표시할 텍스트를 결정합니다.

위 절차의 6단계 이후에는 [BCC 설정] 대화 상자에서 선택한 각 브라우저 및 각 후속 브라우저 호환성 확인에 대해 다음 이벤트가 발생합니다.

이벤트 순서1 현재 문서에 적용되는 스타일이 인라인인지, 헤드인지, 외부 스타일 시트인지 파싱합니다. 선택된 브라우저가 이 스타일을 읽습니다.

2 영향을 받는 브라우저에 적용되는 findIssue() 함수를 각 문제 파일에서 호출합니다.

문제 예제다음 예제는 Configuration/BrowserProfiles/Issues/ 폴더에 있는 ColAndColgroupCapturedByCaption.htm 및 ColAndColgroupCapturedByCaption.js 파일입니다.

ColAndColgroupCapturedByCaption.htm <!DOCTYPE HTML SYSTEM "-//

//DWExtension layout-engine 5.0//dialog">

<html>

<head>

<title>Caption 태그에 의한 Col 및 Colgroup 태그 무시</title>

<script src="../../Shared/Common/Scripts/dwscripts.js"></script>

<script src="issue_utils.js"></script>

<script src="ColAndColgroupCapturedByCaption.js"></script>

<script>


106

//--------------- LOCALIZEABLE GLOBALS------------------

var ISSUE_NAME = "Col 및 Colgroup/Caption 충돌";

var ISSUE_DESC = "HTML 4.01 태그 규칙에 따라 여는 table 태그 바로 뒤에 caption 태그가 오면 해당 표의 col 및 colgroup 태그에 적용되는 모든 스타일이 무시됩니다.";

//--------------- END LOCALIZEABLE---------------

</script>

</head>

<body>

</body>

</html>

ColAndColgroupCapturedByCaption.js function findIssue(){ var DOM = dw.getDocumentDOM(); var issueNodes = new Array();

if (DOM){

// 먼저 문서에 caption 태그가 있는지 확인합니다. var captions = DOM.getElementsByTagName('caption');

// 아래 for loop에 필요한 여러 변수를

// 선언합니다. var currCap = null, props = null, parentTable = null; var colgroups = null, cols = null, allcol = null; var property = "", definedStyles = new Array();

// 이제 모든 caption을 루프합니다(있는 경우). for (var i=0; i < captions.length; i++){ currCap = captions[i]; parentTable = currCap.parentNode;

// 해당 caption은 유효한 지점(즉, 표의 첫 번째 자식)에

// 있는 경우에만 문제가 됩니다. if (currCap == parentTable.childNodes[0]){

// 해당 caption과 동일한 표에 있는 모든

// colgroup 및 col 태그를 찾습니다. colgroups = parentTable.getElementsByTagName('colgroup'); cols = parentTable.getElementsByTagName('col'); allcol = colgroups.concat(cols);

for (var x=0; x < allcol.length; x++){

// 표에서 스타일이 colgroup 또는 col // 태그로 선언된 경우 문제 노드가 있는 것입니다. // 더 이상 확인하지 마십시오. props = window.getDeclaredStyle(allcol[x]); property = ""; definedStyles.length = 0; for (property in props) { definedStyles.push(property); } if (definedStyles.length > 0){ issueNodes.push(currCap); break; } } } } }


107

return issueNodes;}function getAffectedBrowserDisplayNames(){ return new Array("Safari 2.0");}function getAffectedBrowserProfiles(){ return new Array("Safari 2.0");}function getIssueID(){ return "COL_AND_COLGROUP_CAPTURED_BY_CAPTION";}function getIssueName(){ return ISSUE_NAME;}function getIssueDescription(){ return ISSUE_DESC;}function getConfidenceLevel(){ //DETCON 4 return issueUtils.CONFIDENCE_HIGH;}

문제 API 함수문제 API에서 getAffectedBrowserDisplayNames()를 제외한 모든 함수가 필요합니다. 모든 확장 API를 사용하여 각 함수의 본문을 작성하고 적절한 값을 Dreamweaver에 반환해야 합니다. 브라우저 호환성 확인 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서에서 “페이지 내용” 항목을 참조하십시오.

findIssue()

지원 버전Dreamweaver CS3

설명문서를 검색하여 특정 브라우저 렌더링 문제를 야기하는 CSS와 HTML 조합을 찾습니다.

인수없음

반환값문제가 있는 또는 문제를 표현하는 요소 노드의 배열. Dreamweaver는 사용자가 여러 브라우저 호환성 문제 사이를 이동할 때 이 노드를 선택합니다.

예제다음 findIssue() 함수는 float: left나 float: right가 적용된 <button> 태그의 배열을 반환합니다.function findIssue(){

var DOM = dw.getDocumentDOM();var issueNodes = new Array();var buttons = DOM.getElementsByTagName('button');var props = null;for (var i=0; i < buttons.length; i++){

props = window.getDeclaredStyle(buttons[i]);if (props.cssFloat == "left" || props.cssFloat == "right"){

issueNodes.push(buttons[i]);}

}return issueNodes;

}


108

getAffectedBrowserProfiles()


설명Dreamweaver에 문제와 관련된 브라우저 목록을 제공합니다.

인수없음

반환값브라우저 이름의 배열로, 각 브라우저 이름은 유효 브라우저 프로파일의 첫 번째 행과 정확히 일치해야 합니다(Configuration/BrowserProfiles 폴더의 TXT 파일 참조).

예제function getAffectedBrowsers(){

return new Array("Microsoft Internet Explorer 5.0",

"Microsoft Internet Explorer 5.5",

"Microsoft Internet Explorer 6.0");

}

getAffectedBrowserDisplayNames()


설명Dreamweaver에 해당 문제와 관련된, 사용자 화면에 표시되는 브라우저 이름 목록을 제공합니다. 이 함수는 선택 사항이므로 제공되지 않는 경우에는 getAffectedBrowserProfiles()에서 제공되는 프로파일 이름이 대신 사용됩니다.

인수없음

반환값브라우저 이름의 배열. 이 배열은 getAffectedBrowserProfiles()에서 반환되는 배열과 병렬이어야 합니다.

예제function getAffectedBrowsers(){

return new Array("IE/Win 5.0",

"IE/Win 5.5",

"IE/Win 6.0");

}

getIssueID()


설명Dreamweaver에 문제에 대한 고유 ID를 제공합니다.

인수없음

반환값고유한 문제 식별자가 포함된 문자열.


109

예제function getIssueID() {

return "EXPANDING_BOX_PROBLEM";

}

getIssueName()


설명Dreamweaver에 문제의 이름 또는 문제에 대한 간단한 설명을 제공합니다.

인수없음

반환값문제의 이름 또는 문제에 대한 간단한 설명이 포함된 문자열.

예제function getIssueName(){

return "The Expanding Box Problem";

}

getIssueDescription()


설명Dreamweaver에 문제에 대한 상세한 설명을 제공합니다.

인수없음

반환값문제의 이름 또는 문제에 대한 간단한 설명이 포함된 문자열.

예제function getIssueDescription(){

return "Fixed-dimension boxes will incorrectly expand to fit their content

instead of clipping content at the specified width or height.";

}

110

9장: 명령

Adobe Dreamweaver CS3에서 제공하는 명령을 사용하면 사용자의 현재 문서, 열려 있는 다른 문서 또는 로컬 드라이브에 저장된 HTML 문서에 거의 모든 종류의 편집 작업을 수행할 수 있습니다. 명령을 사용하면 HTML 태그와 속성, 주석 및 텍스트를 삽입, 제거 또는 다시 정렬할 수 있습니다.

명령은 HTML 파일입니다. 명령 파일의 BODY 부분은 해당 명령의 옵션(예: 테이블 정렬 방식 및 기준 열)을 수용하는 HTML 양식이 포함될 수 있습니다. 명령 파일의 HEAD 부분에는 BODY 부분에서 입력된 양식을 처리하고 사용자 문서에 대한 편집 작업을 제어하는 JavaScript 함수가 포함됩니다.

다음 표는 명령을 만들 때 사용하는 파일을 보여 줍니다.

명령의 작동 방식사용자가 명령이 포함된 메뉴를 클릭하면 다음과 같은 이벤트가 발생합니다.

1 Dreamweaver는 canAcceptCommand() 함수를 호출하여 해당 메뉴 항목이 비활성화될지 여부를 결정합니다. canAcceptCommand() 함수가 false 값을 반환하면 해당 명령은 메뉴에서 희미하게 표시되며 절차가 중단됩니다. canAcceptCommand() 함수가 true 값을 반환하면 절차가 계속됩니다.

2 사용자가 메뉴에서 명령을 선택합니다.

3 Dreamweaver는 receiveArguments() 함수가 정의되어 있는 경우 선택된 명령 파일에서 이 함수를 호출하여 해당 명령이 해당 메뉴 항목이나 dreamweaver.runCommand() 함수로부터 전달되는 인수를 처리하도록 합니다. dreamweaver. runCommand() 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

4 commandButtons() 함수가 정의된 경우, Dreamweaver는 이 함수를 호출하여 [옵션] 대화 상자의 오른쪽에 나타날 버튼과 사용자가 이 버튼을 클릭할 때 실행될 코드를 확인합니다.

5 Dreamweaver는 명령 파일에서 FORM 태그를 검색합니다. 양식이 존재하면 Dreamweaver는 windowDimensions() 함수를 호출하여 파일의 BODY 요소가 포함된 [옵션] 대화 상자의 크기를 조절합니다. windowDimensions() 함수가 정의되어 있지 않으면 Dreamweaver는 자동으로 이 대화 상자의 크기를 결정합니다.

6 명령 파일의 BODY 태그에 onLoad 핸들러가 포함되어 있으면 Dreamweaver는 대화 상자의 표시 여부에 상관없이 이 핸들러를 실행합니다. 대화 상자가 나타나지 않으면, 나머지 단계가 수행되지 않습니다.

7 사용자가 이 명령에 대한 옵션을 선택합니다. 사용자가 필드를 선택하면 Dreamweaver는 이 필드와 관련된 이벤트 핸들러를 실행합니다.

8 사용자가 commandButtons() 함수에 의해 정의된 버튼 중 하나를 클릭합니다.

9 Dreamweaver가 관련된 코드를 실행합니다. 대화 상자는 명령에 있는 스크립트 중 하나가 window.close() 함수를 호출할 때까지 계속 표시됩니다.

명령 메뉴에 명령 추가Dreamweaver는 Configuration/Commands 폴더 내에 있는 파일을 [명령] 메뉴 아래에 자동으로 추가합니다. 명령이 [명령] 메뉴에 나타나지 않도록 하려면 다음 주석을 파일의 첫 행에 삽입합니다.

이 행이 존재하면 Dreamweaver는 해당 파일에 대한 메뉴 항목을 작성하지 않으며 dw.runCommand()를 호출하여 명령을 실행해야 합니다.


Configuration/Commands/ 명령 이름.htm 사용자 인터페이스를 지정합니다.

Configuration/Commands/ 명령 이름.js 실행할 함수가 들어 있습니다.

111

간단한 명령 예제이 간단한 Extension은 [명령] 메뉴에 항목을 추가하고 문서에 있는 선택된 텍스트를 대문자나 소문자로 변환합니다. 이 메뉴 항목을 클릭하면 세 개의 버튼으로 구성된 인터페이스가 활성화됩니다. 이 인터페이스는 사용자의 선택 사항을 전송할 수 있도록 해줍니다.

다음 단계를 따라 이 Extension을 만듭니다.

• 111페이지의 “UI 만들기”

• 112페이지의 “JavaScript 코드 작성하기”

• 115페이지의 “Extension 테스트”

이 예제에서는 Commands 폴더에 두 개의 파일, 즉 UI가 포함된 Change Case.htm과 JavaScript 코드가 포함된 Change Case.js를 만듭니다. 원한다면, Change Case.htm 파일 하나만 만들고 HEAD 섹션에 JavaScript 코드를 삽입할 수도 있습니다.

UI 만들기UI는 사용자가 대문자 또는 소문자를 선택하도록 해주는 두 개의 라디오 버튼이 포함된 양식입니다.

사용자 인터페이스를 만들려면:1 비어 있는 새 파일을 만듭니다.

2 파일에 다음 코드를 추가하여 양식을 만듭니다.<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"><HTML><HEAD><Title>Make Uppercase or Lowercase</Title><SCRIPT SRC="Change Selection Case.js"></SCRIPT>

</HEAD><BODY><form name="uorl">

<table border="0"><tr>

<td valign="top" nowrap> <p> <label> <input type="radio" name="RadioGroup1" value="uppercase" checked>Uppercase</label><br><label> <input type="radio" name="RadioGroup1" value="lowercase">Lowercase</label>

</p></td></tr>

</table></form></BODY></HTML>

3 이 파일을 Configuration/Commands 폴더에 Change Case.htm이라는 이름으로 저장합니다.

Title 태그의 내용인 Make Uppercase or Lowercase는 해당 대화 상자의 위쪽 막대에 나타납니다. 양식 내에서, 두 개의 셀이 포함된 표는 관련 요소의 레이아웃을 제어합니다. 이 표의 셀에는 두 개의 라디오 버튼인 [대문자] 및 [소문자]가 있습니다. [대문자] 옵션은 checked 속성이 있으므로 기본 선택 사항이 됩니다. 이 속성은 사용자가 두 버튼 중 하나를 선택하거나 명령을 취소하도록 합니다.


112

이 양식은 다음 그림과 같습니다.

commandBUttons() 함수는 사용자가 선택 사항을 전송하거나 동작을 취소하도록 하는 [확인] 및 [취소] 버튼을 제공합니다. 자세한 내용은 116페이지의 “commandButtons()”을 참조하십시오.

JavaScript 코드 작성하기다음 예제는 Dreamweaver가 호출하는 두 개의 Extension API 함수인 canAcceptCommand() 및 commandButtons(), 사용자가 정의하는 함수이며 commandButtons() 함수로부터 호출되는 changeCase()로 구성되어 있습니다.이 예제에서는 다음 작업을 수행하는 JavaScript를 작성합니다.• 112페이지의 “명령을 활성화할지 희미하게 표시할지 여부 결정”• 113페이지의 “확인 및 취소 버튼에 함수 링크”• 114페이지의 “사용자가 대문자 또는 소문자 지정”

명령을 활성화할지 희미하게 표시할지 여부 결정명령을 만들기 위한 첫 번째 작업은 항목이 활성화될 때와 희미하게 표시될 때를 결정하는 것입니다. 사용자가 [명령] 메뉴를 클릭하면 Dreamweaver는 각 메뉴 항목에 대해 canAcceptCommand() 함수를 호출하여 각 항목이 활성화되도록 할지 여부를 결정합니다. canAcceptCommand()가 값 true를 반환하면 Dreamweaver는 해당 메뉴 항목 텍스트를 활성화된 상태로 표시합니다. canAcceptCommand()가 값 false를 반환하면 Dreamweaver는 해당 메뉴 항목을 희미하게 표시합니다. 이 예제에서 해당 메뉴 항목은 사용자가 문서에서 텍스트를 선택하면 활성화됩니다.

명령을 활성화할지 희미하게 표시할지 여부를 결정하려면:1 비어 있는 새 파일을 만듭니다.2 다음 코드를 추가합니다.function canAcceptCommand(){

var theDOM = dw.getDocumentDOM(); // 현재 문서의 DOM을 가져옵니다.var theSel = theDOM.getSelection(); // 선택 영역의 시작과 끝을 가져옵니다.var theSelNode = theDOM.getSelectedNode(); // 선택된 노드를 가져옵니다.var theChildren = theSelNode.childNodes; // 선택된 노드의 자식을 가져옵니다.return (theSel[0] != theSel[1] && (theSelNode.nodeType == Node.TEXT_NODE¬

|| theSelNode.hasChildNodes() && (theChildren[0].nodeType == ¬

Node.TEXT_NODE)));}

3 이 파일을 Configuration/Commands 폴더에 Change Case.js라는 이름으로 저장합니다.

canAcceptCommand() 함수의 첫 번째 행은 사용자 문서에서 DOM을 조회하고 문서 객체에 대해 getSelection() 함수를 호출하여 선택된 텍스트를 조회합니다. 다음으로, 이 함수는 다음 예제에서처럼 선택된 텍스트가 포함된 노드와 이 노드의 자식 노드를 한꺼번에 나란히 조회합니다. 그런 다음 마지막 행은 선택 항목이나 선택 항목의 첫 번째 자식이 텍스트인지 확인하고 그 결과를 true 또는 false로 반환합니다.

return 문(theSel[0] != theSel[1])의 첫 번째 부분은 사용자가 문서에서 선택한 부분이 있는지 확인합니다. 변수 theSel은 문서 내 선택 대상의 시작 및 끝 오프셋을 가지는 2슬롯 배열입니다. 두 값이 동일하지 않으면 내용이 선택된 것입니다. 두 슬롯의 값이 동일하면 삽입 포인터만 존재하고 내용은 선택되지 않은 것입니다.


113

return 문(&& (theSelNode.nodeType == Node.TEXT_NODE)의 다음 부분은 선택된 노드 유형이 텍스트인지 여부를 확인합니다. 만약 텍스트이면 canAcceptCommand() 함수는 값 true를 반환합니다. 노드 유형이 텍스트가 아니면 해당 노드가 자식(|| theSelNode.hasChildNodes())인지와 첫 번째 자식 노드의 유형이 텍스트(&& (theChildren[0].nodeType == Node.TEXT_NODE)))인지 여부를 계속해서 확인합니다. 두 조건이 모두 true이면 canAcceptCommand()는 true를 반환하고 Dreamweaver는 다음 그림에서와 같이 [명령] 메뉴의 아래쪽에 있는 해당 메뉴 항목을 활성화시킵니다.

그렇지 않으면, canAcceptCommand()는 false를 반환하고 Dreamweaver는 다음 그림에서와 같이 해당 항목을 희미하게 표시합니다.

확인 및 취소 버튼에 함수 링크사용자가 [확인]이나 [취소]를 클릭하면 Extension은 해당 액션을 수행해야 합니다. 해당 액션은 버튼을 클릭할 때 수행될 JavaScript 함수를 지정하여 결정합니다.

함수에 확인 및 취소 버튼을 링크하려면:1 Configuration/Commands 폴더에서 Change Case.js 파일을 엽니다.

2 파일 끝에 다음 코드를 추가합니다.function commandButtons() {

return new Array("OK", "changeCase()", "Cancel", "window.close()");}


commandButtons() 함수는 Dreamweaver에서 [확인] 및 [취소] 버튼이 제공되도록 하고 사용자가 이 버튼을 클릭할 때 수행될 동작을 Dreamweaver에 알려 줍니다. commandButtons() 함수는 사용자가 [확인]을 클릭하면 changeCase()를 호출하고 사용자가 [취소]를 클릭하면 window.close()를 호출하라고 Dreamweaver에 알려 줍니다.


114

사용자가 대문자 또는 소문자 지정사용자가 특정 메뉴 항목을 클릭하면 Extension은 사용자가 대문자나 소문자를 선택하도록 하는 메커니즘을 필요로 합니다. UI는 사용자가 이와 같이 선택할 수 있도록 두 개의 라디오 버튼을 정의하여 이 메커니즘을 구현합니다.

사용자가 대문자 또는 소문자를 지정하려면:1 Change Case.js 파일을 엽니다.

2 파일 끝에 다음 코드를 추가합니다.function changeCase() {

var uorl;

// 사용자가 대문자와 소문자 중 어느 것을 요청했는지 확인합니다.if (document.forms[0].elements[0].checked)

uorl = 'u';else

uorl = 'l';

// DOM을 가져옵니다.var theDOM = dw.getDocumentDOM();

// HTML 태그의 outerHTML(문서의

// 전체 내용)을 가져옵니다.var theDocEl = theDOM.documentElement;var theWholeDoc = theDocEl.outerHTML;

// 선택 영역이 포함된 노드를 가져옵니다.var theSelNode = theDOM.getSelectedNode();

// 선택된 노드의 자식을 가져옵니다.var theChildren = theSelNode.childNodes;var i = 0;if (theSelNode.hasChildNodes()){

while (i < theChildren.length){if (theChildren[i].nodeType == Node.TEXT_NODE){

var selText = theChildren[i].data;var theSel = theDOM.nodeToOffsets(theChildren[0]);break;

}++i;

}}else {

// 선택 영역의 오프셋을 가져옵니다.var theSel = theDOM.getSelection();

// 선택 영역을 추출합니다.var selText = theWholeDoc.substring(theSel[0],theSel[1]);

}if (uorl == 'u'){

theDocEl.outerHTML = theWholeDoc.substring(0,theSel[0]) + selText.toUpperCase() + theWholeDoc.substring(theSel[1]);

}else {

theDocEl.outerHTML = theWholeDoc.substring(0,theSel[0]) + selText.toLowerCase() + theWholeDoc.substring(theSel[1]);

}

// 선택 영역을 시작 당시의 위치로 되돌려 설정합니다.theDOM.setSelection(theSel[0],theSel[1]);window.close(); // close extension UI

}


115

3 이 파일을 Configuration/Commands 폴더에 Change Case.js라는 이름으로 저장합니다.

changeCase() 함수는 사용자가 [확인]을 클릭할 때 commandButtons() 함수에 의해 호출되는 사용자 정의 함수입니다. 이 함수는 선택된 텍스트를 대문자나 소문자로 변경합니다. UI는 라디오 버튼을 사용하므로 해당 코드는 선택 사항에 따라 달라집니다. 또한 사용자가 어느 항목도 선택하지 않을 것이라는 가능성은 테스트하지 않아도 됩니다.

changeCase() 함수는 먼저 속성 document.forms[0].elements[0].checked를 테스트합니다. document.forms[0]. elements[0] 속성은 현재 문서 객체의 첫 번째 양식의 첫 번째 요소인 해당 Extension에 대한 UI를 참조합니다. checked 속성은 해당 요소가 선택되어 있으면(활성 상태) true를 반환하고, 그렇지 않으면 false를 반환합니다. 인터페이스에서 elements[0]는 첫 번째 라디오 버튼인 [대문자] 버튼을 참조합니다. 사용자가 [확인]을 클릭하는 경우, 두 라디오 버튼 중의 하나는 항상 선택되어 있으므로 해당 코드는 선택 사항이 대문자가 아니면 반드시 소문자가 된다고 가정합니다. 이 함수는 uorl 변수를 u 또는 l로 설정하여 사용자의 응답을 저장합니다.

함수의 나머지 코드는 선택된 텍스트를 조회하고 이 텍스트를 지정된 격, 즉 대문자나 소문자로 변환하고 문서의 해당 위치에 이 텍스트를 다시 복사해 넣습니다.

선택된 텍스트를 사용자의 문서에서 조회하기 위해 이 함수는 DOM을 가져옵니다. 그런 다음 문서의 루트 요소(html 태그)를 가져옵니다. 끝으로 전체 문서를 theWholeDoc 변수에 추출합니다.

다음으로, changeCase()는 getSelectedNode()를 호출하여 선택된 텍스트가 포함된 노드를 조회합니다. 또한 이 함수는 선택 사항이 <b>text</b>와 같은 텍스트가 포함된 태그인 경우, 자식 노드(theSelNode.childNodes)를 조회합니다.

자식 노드(hasChildNodes()는 true 값을 반환)가 있으면 해당 명령이 자식 노드에서 반복되어 텍스트 노드를 찾습니다. 텍스트 노드가 검색되면 텍스트(theChildren[i].data)는 selText에 저장되고 텍스트 노드의 오프셋은 theSel에 저장됩니다.

자식 노드가 없으면 명령은 getSelection()을 호출하여 theSel에 선택 사항의 시작 및 끝 오프셋을 저장합니다. 그런 다음, 두 오프셋 사이의 문자열을 추출하여 selText에 저장합니다.

이 함수는 사용자가 대문자를 선택했는지 여부를 확인하기 위해 uorl 변수를 확인합니다. 사용자가 대문자를 선택했으면 함수가 해당 HTML 코드를 문서의 섹션에 다시 작성합니다. 먼저, 문서의 시작 부분부터 선택 항목의 시작 부분까지 작성한 다음, 선택된 텍스트를 대문자로 변환합니다(selText.toUppercase()). 끝으로, 선택된 텍스트의 끝 부분부터 문서의 끝 부분까지 작성합니다.

사용자가 소문자를 선택한 경우에도 이 함수는 selText.toLowerCase()를 호출하여 선택된 텍스트를 소문자로 변환한다는 점을 제외하고는 동일한 작업을 수행합니다.

마지막으로, changeCase()는 선택 영역을 다시 설정하고 window.close()를 호출하여 해당 UI를 닫습니다.

Extension 테스트파일을 Commands 폴더에 저장한 후 Extension을 테스트할 수 있습니다.

Extension을 테스트하려면:1 Dreamweaver를 다시 시작하거나 Extension을 새로 고칩니다. Extension을 새로 고치는 방법에 대한 자세한 내용은 63페이지의 “Extension 새로 고침”을 참조하십시오.

[대/소문자 바꾸기] 항목이 이제 [명령] 메뉴에 나타납니다.

2 문서에 몇 개의 텍스트를 입력합니다.

3 텍스트를 선택합니다.

참고: 사용자가 문서의 텍스트를 선택할 때까지 [대/소문자 바꾸기]는 흐리게 표시됩니다.

4 [명령] 메뉴에서 [대/소문자 바꾸기]를 선택합니다.

텍스트의 대/소문자가 바뀝니다.


116

명령 API 함수명령 API의 사용자 정의 함수는 필요하지 않습니다.

canAcceptCommand()

설명이 함수는 현재 선택 영역에 해당 명령이 적절한지 여부를 결정합니다.

참고: 적어도 한 번 이상 false가 반환된 경우에만 canAcceptCommand()를 정의하십시오. 이 함수가 정의되어 있지 않으면 명령이 적절한 것으로 간주됩니다. 이와 같이 간주되면 시간이 절약되고 성능이 향상됩니다.

인수없음

반환값해당 명령이 허용되면 Dreamweaver는 true 값을 반환합니다. 값이 false이면 Dreamweaver는 메뉴에서 해당 명령을 희미하게 표시합니다.

예제canAcceptCommand() 함수의 다음 예제에서는 선택 대상이 표인 경우에만 해당 명령을 사용할 수 있도록 합니다.function canAcceptCommand(){

var retval=false;var selObj=dw.getDocumentDOM.getSelectedNode();return (selObj.nodeType == Node.ELEMENT_NODE && ¬

selObj.tagName=="TABLE");{retval=true;

}return retval;}

commandButtons()

설명이 함수는 [옵션] 대화 상자의 오른쪽에 나타나는 버튼을 정의하고 이 버튼을 클릭할 때 수행되는 비헤이비어를 정의합니다. 이 함수가 정의되어 있지 않으면 버튼이 나타나지 않고 명령 파일의 BODY 섹션이 확장되어 전체 대화 상자를 채웁니다.

인수없음

반환값Dreamweaver는 짝수 개의 요소가 포함된 배열을 반환합니다. 첫 번째 요소는 맨 위 버튼의 레이블이 포함된 문자열입니다. 두 번째 요소는 맨 위 버튼을 클릭할 때 발생하는 비헤이비어를 정의하는 JavaScript 코드의 문자열입니다. 나머지 요소도 동일한 방법으로 추가 버튼을 정의합니다.

예제commandButtons()의 다음 인스턴스는 [확인], [취소] 및 [도움말]의 세 가지 버튼을 정의합니다.function commandButtons(){

return new Array("OK" , "doCommand()" , "Cancel" , ¬

"window.close()" , "Help" , "showHelp()");}


117

isDOMRequired()

설명이 함수는 유효한 DOM이 작동하도록 하는 명령이 필요한지 여부를 결정합니다. 이 함수가 true 값을 반환하거나 이 함수가 정의되어 있지 않으면 Dreamweaver는 유효한 DOM이 명령에 필요하다고 간주하고 실행 전에 문서의 디자인 뷰와 코드 뷰를 동기화합니다. 동기화하면 [코드] 뷰의 모든 편집 내용이 [디자인] 뷰에 업데이트됩니다.

인수없음

반환값명령 작동을 위해 유효한 DOM이 필요한 경우 Dreamweaver는 true를 반환하고, 그렇지 않으면 false를 반환합니다.

receiveArguments()

설명이 함수는 메뉴 항목이나 dw.runCommand() 함수에서 전달되는 인수를 처리합니다.

인수{arg1}, {arg2},...{argN}

• menuitem 태그에 arguments 속성이 정의되어 있으면 해당 속성의 값이 receiveArguments() 함수에 하나 이상의 인수로 전달됩니다. 인수는 dw.runCommand() 함수에 의해 명령에 전달될 수도 있습니다.

반환값없음

windowDimensions()

설명이 함수는 [매개 변수] 대화 상자의 구체적 치수를 설정합니다. 이 함수를 정의하지 않으면 윈도우 치수가 자동으로 계산됩니다.


인수platform

• platform 인수의 값은 사용자의 플랫폼에 따라 "macintosh" 또는 "windows"입니다.

반환값Dreamweaver는 "widthInPixels,heightInPixels" 형식의 문자열을 반환합니다.


예제windowDimensions() 함수의 다음 예제에서는 [매개 변수] 대화 상자의 크기를 648 x 520픽셀로 설정합니다.function windowDimensions(){

return "648,520";}

118

10장: 메뉴 및 메뉴 명령

Adobe Dreamweaver CS3은 Dreamweaver Configuration/Menus 폴더의 menus.xml 파일에 정의된 구조를 이용하여 자신의 모든 메뉴를 작성합니다. menus.xml 파일을 편집하여 메뉴 명령을 재배열하고 이름을 변경하고 제거할 수 있습니다. 또한 메뉴 명령에 사용할 키보드 단축키를 추가하거나 변경하고 제거할 수 있습니다. 대부분의 경우 Keyboard Shortcut Editor를 사용하면 이 작업을 더욱 쉽게 수행할 수 있습니다(Dreamweaver 도움말 참조). Dreamweaver 메뉴를 변경하면 다음에 Dreamweaver를 시작하거나 Extension을 새로 고칠 때 변경 사항이 적용됩니다.

다중 사용자 운영 체제에서는, Dreamweaver 내의 변경 사항으로 인해 menus.xml이 변경되면(예: 키보드 단축키 편집기를 사용하여 키보드 단축키 변경), 다른 사용자의 Configuration 폴더에 새 menus.xml 파일이 만들어집니다. 다중 사용자 운영 체제에서 menus.xml을 사용자 정의하려면 다른 사용자의 Configuration 폴더에서 파일 사본을 편집하거나 또는 다른 사용자의 Configuration 폴더에 새 버전이 아직 작성되지 않았으면 마스터 menus.xml 파일을 다른 사용자의 Configuration 폴더로 복사하십시오. 자세한 내용은 63페이지의 “다중 사용자 Configuration 폴더”를 참조하십시오.

XML 편집기에서 menus.xml을 열면 menus.xml 파일에서의 앰퍼샌드(&) 사용에 대한 오류 메시지가 나타날 수 있습니다. 따라서 텍스트 편집기에서 menus.xml을 편집하는 것이 가장 좋습니다. Dreamweaver에서는 menus.xml을 편집하지 마십시오. XML에 대한 기본 정보는 Dreamweaver 도움말을 참조하십시오.

참고: 현재의 menus.xml 파일 또는 기타 Dreamweaver의 구성 파일을 수정하기 전에 해당 파일의 백업 사본을 만들어 두는 것이 좋습니다. 메뉴 구성 파일을 편집하는 동안 실수한 경우, 이전 메뉴 세트로 복귀하려면 menus.xml 파일을 교체해야만 합니다. 미리 백업해 놓지 못한 경우에는 Configuration 폴더에 기본 menus.xml 파일의 백업인 menus.bak라는 파일이 포함됩니다. 기본 메뉴 세트로 복귀하려면 menus.xml을 menus.bak의 사본으로 바꾸십시오.

menus.xml 파일 정보menus.xml 파일에는 메뉴 막대, 메뉴 명령, 분리 기호, 단축키 목록 및 키보드 단축키에 대한 구조화된 목록이 포함되어 있습니다. 이 항목들은 텍스트 편집기에서 편집 가능한 XML 태그를 사용하여 표시됩니다.

참고: 메뉴를 변경할 때 주의하십시오. Dreamweaver는 XML 구문 오류가 포함된 메뉴나 메뉴 명령을 무시합니다.

열기 및 닫기 menubar 태그가 사용된 메뉴 막대는 별도의 한 메뉴 또는 일련의 메뉴입니다. 이러한 메뉴 막대에는 기본 메뉴 막대, Macintosh가 아니라 Windows에서만 나타나는 [사이트] 윈도우 메뉴 막대 및 각 컨텍스트 메뉴에 대한 메뉴 막대가 있습니다. 각 메뉴 막대에는 메뉴가 하나 이상 포함되어 있으며 메뉴는 메뉴 태그 안에 들어 있습니다. 각 메뉴에는 메뉴 명령이 하나 이상 포함되어 있으며 각 항목은 menuitem 태그 및 속성에 의해 표시됩니다. 또한 한 메뉴에는 분리 기호 태그에 의해 표시되는 분리 기호 및 하위 메뉴가 여러 개 포함될 수도 있습니다.

Dreamweaver는 메뉴 명령과 연관된 키보드 단축키뿐만 아니라, 대체 단축키 및 특정 컨텍스트에서만 사용 가능한 단축키를 포함하여 다양한 기타 키보드 단축키를 제공합니다. 예를 들어, Control+Y(Windows) 또는 Command+Y(Macintosh)는 재실행에 대한 단축키이고 Control+Shift+Z 또는 Command+Shift+Z는 재실행에 대한 대체 단축키입니다. 이러한 대체 단축키 및 메뉴 명령의 태그 안에 표시할 수 없는 기타 단축키는 menus.xml 파일의 단축키 목록에 정의됩니다. shortcutlist 태그에 의해 표시되는 각 단축키 목록에는 단축키가 하나 이상 포함되며 각 단축키는 단축키 태그에 의해 표시됩니다.

다음 단원에서는 menus.xml 태그의 구문에 대해 설명합니다. 선택적 속성은 속성 목록에서 중괄호({})로 둘러싸여 있지만 필수 속성은 중괄호로 둘러싸여 있지 않습니다.

119

<menubar>

설명Dreamweaver 메뉴 구조에 포함된 메뉴 막대에 대한 정보를 제공합니다.

속성name, {app}, id, {platform}

• name 해당 메뉴 막대의 이름입니다. name은 필수 속성이지만 값 “ ” 을 지정할 수 있습니다.

• app 해당 메뉴 막대가 사용 가능한 응용 프로그램의 이름입니다. 이 속성은 현재 사용되지 않습니다.

• id 해당 메뉴 막대의 메뉴 ID입니다. menus.xml 파일에 있는 각 메뉴 ID는 고유해야 합니다.

• platform 해당 메뉴 막대가 지정된 플랫폼에서만 나타난다는 것을 알려 줍니다. 유효한 값은 "win" 및 "mac"입니다.

내용이 태그에는 menu 태그가 한 개 이상 포함될 수 있습니다.

컨테이너없음

예제기본([문서] 윈도우) 메뉴 막대는 다음 menubar 태그를 사용합니다.<menubar name="Main Window" id="DWMainWindow">



</menubar>

<메뉴>

설명Dreamweaver 메뉴 구조에 나타나는 메뉴 또는 하위 메뉴에 대한 정보를 제공합니다.

속성name, {app}, id, {platform}, {showIf}

• name 해당 메뉴의 이름으로 메뉴 막대에 나타납니다. Windows에서 해당 메뉴의 선택 키(니모닉)를 설정하려면 액세스 문자 앞에 밑줄(_)을 사용합니다. Macintosh에서는 밑줄이 자동으로 제거됩니다.

• app 해당 메뉴를 사용할 수 있는 응용 프로그램의 이름입니다. 이 속성은 현재 사용되지 않습니다.

• id 해당 메뉴의 메뉴 ID입니다. 파일의 모든 ID는 고유해야 합니다.

• platform 해당 메뉴가 지정된 플랫폼에서만 나타난다는 것을 알려줍니다. 유효한 값은 "win" 및 "mac"입니다.

• showIf 지정된 Dreamweaver 활성자의 값이 true인 경우에만 해당 메뉴가 나타나도록 지정합니다. 사용 가능한 활성자에는 _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML(Adobe ColdFusion의 모든 버전), _SERVERMODEL_CFML_UD4(ColdFusion의 UltraDev 버전 4용), _SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES 및 _VIEW_STANDARD가 있습니다. 각 활성자 사이에 AND를 의미하는 콤마를 사용하여 여러 개의 활성자를 지정할 수 있습니다. NOT과 "!"를 함께 지정할 수도 있습니다. 예를 들어, 해당 메뉴가 ASP 페이지의 [코드] 뷰에만 나타나도록 하려면 속성을 showIf="_VIEW_CODE, _SERVERMODEL_ASP"로 지정하십시오.

내용이 태그에는 menuitem 태그가 하나 이상 포함될 수 있으며 separator 태그도 하나 이상 포함될 수 있습니다. 또한, 이 태그에는 하위 메뉴 작성에 사용하는 다른 menu 태그 및 표준 HTML 주석 태그도 포함될 수 있습니다.

컨테이너이 태그는 menubar 태그에 포함되어야 합니다.

120

예제<menu name="_File" id="DWMenu_File">



</menu>

<menuitem>

설명Dreamweaver 메뉴에 사용할 메뉴 명령을 정의합니다.

속성name, id, {app}, {key}, {platform}, {enabled}, {arguments}, {command}, {file}, {checked},

{dynamic}, {isdomrequired}, {showIf}

• name 해당 메뉴에 나타나는 메뉴 명령 이름입니다. 밑줄은 밑줄 다음의 문자가 해당 명령의 선택 키(니모닉)라는 것을 알려줍니다. 이 선택 키는 Windows 전용입니다.

• id 메뉴 항목을 식별하는 데 사용됩니다. 이 ID는 전체 메뉴 구조에서 고유해야 합니다. menus.xml에 새 메뉴 명령을 추가하려면 소속한 회사 이름이나 다른 고유한 문자열을 각 메뉴 명령 ID의 접두사로 사용하여 고유성을 유지하십시오.

• app 해당 메뉴 명령이 사용 가능한 응용 프로그램의 이름입니다. 이 속성은 현재 사용되지 않습니다.

• key 해당 명령에 대한 키보드 단축키입니다(있는 경우). 다음 문자열을 사용하여 수정자 키를 지정합니다.

• Cmd는 Ctrl 키(Windows) 또는 Command 키(Macintosh)를 지정합니다.

• Alt 및 Opt는 Alt 키(Windows) 또는 Option 키(Macintosh)와 같은 의미로 사용됩니다.

• Shift는 두 플랫폼에서 모두 Shift 키를 지정합니다.

• Ctrl은 두 플랫폼에서 모두 Ctrl 키를 지정합니다.

• 플러스(+) 기호는 지정된 단축키가 수정자를 두 개 이상 사용하는 경우 수정자 키를 구분합니다. 예를 들어, key 속성의 Cmd+Opt+5는 사용자가 Control+Alt+5(Windows) 또는 Command+Option+5(Macintosh)를 누를 때 해당 메뉴 명령이 실행된다는 것을 의미합니다.

• 이름에 의해 지정된 특별한 키에는 F1에서 F12, PgDn, PgUp, Home, End, Ins, Del, Tab, Esc, BkSp 및 Space가 있습니다. 이 특별한 키에 수정자 키를 적용할 수 있습니다.

• platform 해당 메뉴 항목이 나타나는 플랫폼을 알려줍니다. 유효한 값은 Windows를 의미하는 "win" 또는 Macintosh를 의미하는 "mac"입니다. platform 속성을 지정하지 않으면 해당 메뉴 명령이 두 플랫폼에 모두 나타납니다. 특정 메뉴 명령이 두 플랫폼에서 서로 다르게 동작하도록 하려면 두 메뉴 명령의 이름은 같게 하고 ID는 다르게 하십시오(예: platform="win"과 platform="mac").

• enabled 해당 메뉴 명령이 현재 활성 상태인지 여부를 결정하는 JavaScript 코드(보통 JavaScript 함수 호출)를 제공합니다. 함수가 false를 반환하면 해당 메뉴 명령이 희미하게 표시됩니다. 기본값은 "true"입니다. 하지만 값이 "true"인 경우에도 항상 명확하게 값을 지정하는 것이 좋습니다.

• arguments Dreamweaver가 file 속성에 지정된 JavaScript 파일의 코드에 전달할 인수를 제공합니다. 이 속성은 특정 속성의 값을 구분하는 데 사용되는 이중 인용 부호(") 내에서 인수를 단일 인용 부호(')로 둘러 쌉니다.

• command 메뉴에서 이 항목이 선택될 때 실행되는 JavaScript 표현식을 지정합니다. 복잡한 JavaScript 코드의 경우, file 속성에 지정된 JavaScript 파일을 대신 사용합니다. 각 메뉴 명령에 대해 file이나 command를 지정해야 합니다.

• file 해당 메뉴 명령을 제어하는 JavaScript가 포함된 HTML 파일의 이름입니다. Configuration 폴더에 대한 파일의 상대적인 경로를 지정합니다. 예를 들어, [도움말] > [환영합니다] 메뉴 명령은 file="Commands/Welcome.htm"을 지정합니다. file 속성은 command, enabled 및 checked 속성을 무시합니다. 각 메뉴 명령에 대해 file이나 command를 지정해야 합니다. [작업 내역] 패널을 사용한 명령 작성에 대한 자세한 내용은 Dreamweaver 도움말을 참조하십시오. JavaScript 명령 작성에 대한 자세한 내용은 110페이지의 “명령”을 참조하십시오.

• checked 메뉴에서 해당 메뉴 명령 옆에 체크 표시가 나타날지 여부를 알려주는 JavaScript 표현식입니다. 표현식이 true로 평가되면 해당 메뉴 명령 옆에 체크 표시가 나타납니다.


121

• dynamic 이 속성이 존재하면 메뉴 명령이 동적으로 HTML 파일에 의해 결정된다는 것을 알려줍니다. 이 HTML 파일에는 해당 메뉴 명령의 텍스트 및 상태를 설정하는 JavaScript 코드가 포함되어 있습니다. 태그를 dynamic으로 지정하려면 file 속성을 지정해야 합니다.

• isdomrequired 해당 메뉴 명령의 코드를 실행하기 전에 [디자인] 뷰와 [코드] 뷰를 동기화할지 여부를 알려줍니다. 유효한 값은 "true"(기본값) 및 "false"입니다. 이 속성을 "false"로 설정하면 해당 메뉴 명령에 의해 작성된 파일의 변경 사항이 Dreamweaver DOM을 사용하지 않는다는 것을 의미합니다. DOM에 대한 자세한 내용은 78페이지의 “Dreamweaver 문서 객체 모델”을 참조하십시오.

• showIf 지정된 Dreamweaver 활성자가 true 값을 가진 경우에만 해당 메뉴 항목이 나타나도록 지정합니다. 사용 가능한 활성자에는 _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML (ColdFusion의 모든 버전), _SERVERMODEL_CFML_UD4(ColdFusion의 UltraDev 버전 4에만 해당), _SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES 및 _VIEW_STANDARD가 있습니다. 각 활성자 사이에 AND를 의미하는 콤마를 사용하여 여러 개의 활성자를 지정할 수 있습니다. NOT과 "!"

를 함께 지정할 수도 있습니다. 예를 들어, 해당 메뉴 명령이 [코드] 뷰에는 나타나지만 ColdFusion 페이지에는 나타나지 않도록 하려면 이 속성을 showIf="_VIEW_CODE, !_SERVERMODEL_CFML"로 지정하십시오.


컨테이너이 태그는 menu 태그에 포함되어야 합니다.

예제<menuitem name="_New" key="Cmd+N" enabled="true" command="dw.createDocument()"

id="DWMenu_File_New" />

<separator>

설명분리 기호가 메뉴에서 해당 위치에 나타난다는 것을 알려줍니다.

속성{app}

app 분리 기호가 나타나는 응용 프로그램의 이름입니다. 이 속성은 현재 사용되지 않습니다.



예제<separator />

<shortcutlist>

설명menus.xml 파일의 단축키 목록을 지정합니다.

속성{app}, id, {platform}

• app 단축키 목록이 사용 가능한 응용 프로그램의 이름입니다. 이 속성은 현재 사용되지 않습니다.

• id 단축키 목록의 ID입니다. 이 속성 값은 Dreamweaver에서 해당 단축키가 연관되는 메뉴 막대나 컨텍스트 메뉴의 메뉴 ID와 일치해야 합니다. 유효한 값은 "DWMainWindow", "DWMainSite", "DWTimelineContext" 및 "DWHTMLContext"입니다.

• platform 단축키 목록이 지정된 플랫폼에서만 나타난다는 것을 알려줍니다. 유효한 값은 "win" 및 "mac"입니다.

122

내용이 태그에는 shortcut 태그가 한 개 이상 포함될 수 있습니다. 또한 이 태그에는 HTML 주석 태그와 동일한 구문을 사용하는 주석 태그가 한 개 이상 포함될 수 있습니다.

컨테이너없음

예제<shortcutlist id="DWMainWindow">



</shortcutlist>

<shortcut>

설명menus.xml 파일의 키보드 단축키를 지정합니다.

속성key, {app}, {platform}, {file}, {arguments}, {command}, id, {name}

• key 키보드 단축키를 활성화하는 키 조합입니다. 구문에 대한 자세한 내용은 120페이지의 “<menuitem>”을 참조하십시오.

• app 단축키가 사용 가능한 응용 프로그램의 이름입니다. 이 속성은 현재 사용되지 않습니다.

• platform 단축키가 지정된 플랫폼에서만 동작하도록 지정합니다. 유효한 값은 "win" 및 "mac"입니다. 이 속성을 지정하지 않으면 이 단축키가 두 플랫폼에서 모두 작동합니다.

• file 키보드 단축키를 사용할 때 Dreamweaver에서 실행하는 JavaScript 코드가 포함된 파일의 경로입니다. file 속성은 command 속성을 무시합니다. 각 단축키에 대해 file이나 command를 지정해야 합니다.

• arguments Dreamweaver가 file 속성에 지정된 JavaScript 파일의 코드에 전달할 인수를 제공합니다. 특정 속성의 값을 구분하는 데 사용되는 이중 인용 부호(") 내에서 인수를 단일 인용 부호(')로 둘러 쌉니다.

• command 키보드 단축키를 사용할 때 Dreamweaver에서 실행하는 JavaScript 코드입니다. 각 단축키에 대해 file이나 command를 지정합니다.

• id 단축키에 대한 고유한 식별자입니다.

• name 키보드 단축키에 의해 실행되는 명령의 이름을 메뉴 명령 이름의 스타일로 나타낸 것입니다. 예를 들어, F12 단축키에 대한 name 속성은 "기본 브라우저에서 미리 보기"입니다.


컨테이너이 태그는 shortcutlist 태그에 포함되어야 합니다.

예제<shortcut key="Cmd+Shift+Z" file="Menus/MM/Edit_Clipboard.htm"

arguments="’redo’" id="DWShortcuts_Edit_Redo" />

<tool>

설명한 개의 도구를 나타냅니다. menus.xml 파일에 도구에 대한 모든 단축키가 하위 태그로 포함됩니다.

속성{name}, id

• name 도구 이름의 지역화된 버전입니다.

• id 단축키가 적용되는 도구를 식별하는 내부 도구 식별자입니다.

123

내용이 태그에는 activate, override 또는 action 태그가 한 개 이상 포함될 수 있습니다.


예제<tool name="Hand tool" id="com.Macromedia.dreamweaver.tools.hand">



</tool>

<action>

설명도구가 활성화된 상태에서 키 조합을 눌렀을 때 실행되는 키 조합과 JavaScript가 포함되어 있습니다.

속성{name}, key, command, id

• name 액션의 지역화된 버전입니다.

• key 액션을 실행하는 데 사용되는 키 조합입니다. 구문에 대한 자세한 내용은 120페이지의 “<menuitem>”을 참조하십시오.

• command 실행될 JavaScript 명령문입니다. 이 속성은 122페이지의 “<shortcut>”의 command 속성과 형식이 동일합니다.

• id 액션을 참조하는 데 사용되는 고유 ID입니다.


컨테이너이 태그는 tool 태그에 포함되어야 합니다.

예제<action name="Set magnification to 50%" key="5" command="dw.activeViewScale = 0.50" id =

"DWTools_Zoom_50" />

<activate>

설명도구를 활성화하는 키 조합이 포함되어 있습니다.

속성{name}, key, id


• key 도구를 활성화하는 데 사용되는 키 조합입니다. 구문에 대한 자세한 내용은 120페이지의 “<menuitem>”을 참조하십시오.




예제<activate name="Switch to Hand tool" key="H" id="DWTools_Hand_Active1" />


124

<override>

설명도구를 일시적으로 활성화하는 키 조합이 포함되어 있습니다. 다른 모달 도구를 사용하고 있는 경우에 이 키를 계속 누르고 있으면 이 도구로 전환할 수 있습니다.

속성{name}, key, id


• key 도구를 빠르게 활성화하는 데 사용되는 키 조합입니다. 구문에 대한 자세한 내용은 120페이지의 “<menuitem>”을 참조하십시오.




예제<override name="Quick switch to Hand tool" key="Space" id="DWTools_Hand_Override" />

메뉴 및 메뉴 명령 변경menus.xml 파일을 편집하면 특정 메뉴 내에서 또는 한 메뉴에서 다른 메뉴로 메뉴 명령을 이동시킬 수 있고, 메뉴에 분리 기호를 추가하거나 메뉴에서 분리 기호를 제거할 수 있으며, 특정 메뉴 막대 내에서 또는 한 메뉴 막대에서 다른 메뉴 막대로 메뉴를 이동시킬 수 있습니다.

다른 메뉴에 대한 절차와 동일한 절차를 사용하여 컨텍스트 메뉴의 내부나 외부로 항목을 이동시킬 수 있습니다.

자세한 내용은 118페이지의 “menus.xml 파일 정보”를 참조하십시오.

메뉴 명령을 이동하려면:1 Dreamweaver를 종료합니다.

2 menus.xml 파일의 백업 사본을 만듭니다.

3 BBEdit, Adobe® HomeSite® 또는 Wordpad와 같은 텍스트 편집기에서 menus.xml을 엽니다. menus.xml을 Dreamweaver에서 열지 마십시오.

4 시작 부분에 있는 <menuitem에서 끝 부분에 있는 />까지 전체 menuitem 태그를 잘라냅니다.

5 메뉴 명령의 새 위치에 삽입 포인터를 위치시킵니다. 이때 삽입 포인터는 menu 태그와 해당하는 /menu 태그 사이에 두어야 합니다.

6 메뉴를 새 위치에 붙여넣습니다.

메뉴 명령을 이동하는 동안 하위 메뉴를 만들려면:1 메뉴 내(menu 태그와 해당하는 /menu 태그 사이)에 삽입 포인터를 위치시킵니다.

2 새 menu 태그 및 /menu 태그 쌍을 해당 메뉴 내에 삽입합니다.

3 새 메뉴 명령을 새 하위 메뉴에 추가합니다.


125

두 메뉴 명령 사이에 분리 기호를 삽입하려면:• 두 menuitem 태그 사이에 separator/ 태그를 위치시킵니다.

기존 분리 기호를 제거하려면:• 해당하는 separator/ 행을 삭제합니다.

메뉴를 이동하려면:1 Dreamweaver를 종료합니다.


3 BBEdit, HomeSite 또는 Wordpad와 같은 텍스트 편집기에서 menus.xml을 엽니다. 이 파일을 Dreamweaver에서 열지 마십시오.

4 열기 menu 태그에서 닫기 /menu 태그까지의 전체 메뉴 및 해당 내용을 잘라 냅니다.

5 메뉴의 새 위치에 삽입 포인터를 위치시킵니다. 이때 삽입 포인터는 menubar 태그와 해당하는 /menubar 태그 사이에 두어야 합니다.

6 메뉴를 새 위치로 붙여넣습니다.

메뉴 명령 이름 또는 메뉴 이름 변경하기menus.xml 파일을 편집하여 메뉴 명령 이름이나 메뉴 이름을 쉽게 변경할 수 있습니다.

메뉴 명령 이름이나 메뉴 이름을 변경하려면:1 Dreamweaver를 종료합니다.


3 HomeSite, BBEdit 또는 Wordpad와 같은 텍스트 편집기에서 menus.xml을 엽니다. 이 파일을 Dreamweaver에서 열지 마십시오.

4 메뉴 명령을 변경하려면 적절한 menuitem 태그를 찾은 다음, 해당하는 name 속성의 값을 변경합니다. 메뉴를 변경하려면 적절한 menu 태그를 찾은 다음, 해당하는 name 속성의 값을 변경합니다. 두 경우 모두, id 속성을 변경하면 안 됩니다.

5 menus.xml을 저장하고 닫은 후 Dreamweaver를 다시 시작하여 변경 사항을 살펴 보십시오.

키보드 단축키 변경기본 키보드 단축키가 사용하기 불편하면 기존 단축키를 변경하거나 제거할 수도 있고 새 단축키를 추가할 수도 있습니다. 이 작업을 수행하는 가장 쉬운 방법은 Keyboard Shortcut Editor를 사용하는 것입니다. 자세한 내용은 Dreamweaver 도움말을 참조하십시오. 또는 menus.xml에서 키보드 단축키를 직접 수정할 수도 있습니다. 하지만, menus.xml에 직접 단축키를 입력하게 되면 Keyboard Shortcut Editor를 사용하는 경우보다 실수할 확률이 더 높습니다.

키보드 단축키를 변경하려면:1 Dreamweaver를 종료합니다.


3 BBEdit, HomeSite 또는 Wordpad와 같은 텍스트 편집기에서 menus.xml을 엽니다. 이 파일을 Dreamweaver에서 열지 마십시오.

4 Keyboard Shortcut Matrix(Dreamweaver 기술 지원 센터(http://www.adobe.com/go/dreamweaver_support_kr)에서 사용 가능)에서 현재 사용되지 않거나 다시 지정하려는 단축키를 검색합니다.

특정 키보드 단축키를 다시 지정하려면 키보드 매트릭스의 인쇄본에서 다시 지정할 키보드 단축키를 변경하고 나중에 참조합니다.

5 특정 키보드 단축키를 다시 지정하려면 해당 단축키가 지정된 메뉴 명령을 검색한 다음, 해당 메뉴 명령에서 key="shortcut" 속성을 제거합니다.

http://www.adobe.com/go/dreamweaver_support


126

6 해당 메뉴 명령에서 키보드 단축키를 새로 지정하거나 다시 지정합니다.

7 해당 메뉴 명령에 이미 키보드 단축키가 있으면 단축키가 있는 행에서 키 속성을 찾습니다. 해당 메뉴 항목에 단축키가 없으면 menuitem 태그 내에서 속성 사이에 key=""를 추가합니다.

8 key 속성의 이중 인용 부호(") 사이에 새 키보드 단축키를 입력합니다.

키 조합에 있는 키 사이에 플러스(+) 기호를 사용합니다. 수정자에 대한 자세한 내용은 120페이지의 “<menuitem>”에서 menuitem 태그에 대한 설명을 참조하십시오.

해당 키보드 단축키가 현재 다른 곳에서 사용되고 있어서 그것을 막지 못했으면 이 단축키는 menus.xml에서 이 단축키를 사용하는 첫 번째 메뉴 명령에만 적용됩니다.

참고: Windows 전용 메뉴 명령 및 Macintosh 전용 메뉴 명령에 대해서도 동일한 키보드 단축키를 사용할 수 있습니다.

9 Keyboard Shortcut Matrix에서 적절한 위치에 새 단축키를 작성합니다.

팝업 메뉴 및 컨텍스트 메뉴 수정Dreamweaver는 다수의 패널과 대화 상자를 통해 다양한 팝업 메뉴 및 컨텍스트 메뉴를 제공합니다. 일부 컨텍스트 메뉴는 menus.xml 파일에 정의되어 있고 일부 컨텍스트 메뉴는 다른 XML 파일에 정의되어 있습니다. 메뉴에서 직접 항목을 추가, 제거 또는 수정할 수 있습니다. 하지만, 대부분의 경우 Extension을 작성하여 항목을 변경하는 것이 더 좋습니다.

Dreamweaver의 다음과 같은 팝업 메뉴 및 컨텍스트 메뉴는 XML 파일에 지정되어 있으며 menus.xml의 태그와 동일한 태그를 사용합니다.

• [바인딩] 패널의 플러스(+) 팝업 메뉴에 있는 데이터 소스는 DataSources 폴더의 하위 폴더에 있는 DataSources.xml 파일에 지정되어 있습니다.

• [서버 비헤이비어] 패널의 플러스(+) 팝업 메뉴에 있는 서버 비헤이비어는 ServerBehaviors 폴더의 하위 폴더에 있는 ServerBehaviors.xml 파일에 지정되어 있습니다.

• [서식 목록 편집] 대화 상자의 플러스(+) 팝업 메뉴에 있는 서버 서식은 ServerFormats 폴더의 하위 폴더에 있는 ServerFormats.xml파일에 지정되어 있습니다.

• [바인딩] 패널의 바인딩에 대한 서식 팝업 메뉴에 있는 항목은 ServerFormats 폴더의 하위 폴더에 있는 Formats.xml 파일에 지정되어 있습니다. [서식 추가] 대화 상자를 사용하면 Dreamweaver에서 이 메뉴에 항목을 추가할 수 있습니다.

• [태그 라이브러리 편집기] 대화 상자 메뉴 명령은 TagLibraries/TagImporters/TagImporters.xml파일에 지정되어 있습니다.

• 서버 비헤이비어 구성 관리자의 일부인 생성 비헤이비어 대화 상자에 있는 매개 변수에 대한 메뉴 명령은 Shared/Controls/ String Menu/Controls.xml에 지정되어 있습니다.

• ColdFusion 구성 요소와 연관된 컨텍스트 메뉴에 대한 항목은 Components/ColdFusion/CFCs/CFCsMenus.xml에 지정되어 있습니다.

• ColdFusion 데이터 소스와 연관된 컨텍스트 메뉴에 대한 항목은 Components/ColdFusion/DataSources/ DataSourcesMenus.xml에 지정되어 있습니다.

• JavaBeans와 연관된 컨텍스트 메뉴에 대한 항목은 Components/Jsp/JavaBeans/JavaBeanMenus.xml에 지정되어 있습니다.

• 다양한 서버 구성 요소와 연관된 컨텍스트 메뉴에 대한 항목은 Components 폴더의 하위 폴더에 있는 XML 파일에 지정되어 있습니다.


127

메뉴 명령메뉴 명령을 사용하면 더욱 유연하고 동적인 메뉴를 만들 수 있습니다. 일반 명령처럼 메뉴 명령을 사용하면 현재 문서, 열려 있는 다른 문서 또는 로컬 드라이브의 모든 HTML 문서에서 거의 모든 종류의 편집 작업을 수행할 수 있습니다. 메뉴 명령 API는 일반 명령 API를 확장하여 메뉴 시스템의 명령 및 호출과 관련된 몇 가지 작업을 수행합니다.

메뉴 명령은 menus.xml 파일에 있는 menuitem 태그의 file 속성에서 참조하는 HTML 파일입니다. 메뉴 명령 파일의 BODY에는 명령의 옵션(예: 표 정렬 방법 및 기준 열)을 사용하는 HTML 양식이 포함될 수 있습니다. 메뉴 명령 파일의 HEAD 섹션에는 BODY 섹션의 양식 입력을 처리하고 사용자 문서에 대한 편집을 제어하는 JavaScript 함수가 포함되어 있습니다.

메뉴 명령은 Dreamweaver 응용 프로그램 폴더 내의 Configuration/Menus 폴더에 저장됩니다.

다음 표에서는 메뉴 명령을 만들 때 사용하는 파일에 대해 설명합니다.

참고: Dreamweaver에 사용자 정의 메뉴 명령을 추가할 때는 Menus 폴더의 최상위 수준에 추가하거나 하위 폴더를 만드십시오. MM 폴더는 Dreamweaver와 함께 제공되는 메뉴 명령에 사용하도록 예약되어 있습니다.

명령 메뉴 수정menus.xml 파일을 편집하지 않고 [명령] 메뉴에 특정 종류의 명령을 추가하거나 명령 이름을 변경할 수 있습니다. menus.xml에 대한 자세한 내용은 124페이지의 “메뉴 및 메뉴 명령 변경”을 참조하십시오.

참고: 명령 이라는 용어는 Dreamweaver에서 두 가지 의미를 가지고 있습니다. 엄밀하게 말하면, 명령이란 특별한 종류의 Extension입니다. 하지만 명령이 Dreamweaver 메뉴에 속하는 한 항목이라는 것을 의미하는 경우, 그 항목이 하는 일이나 항목의 구현 방법에 상관 없이 메뉴 항목이라는 용어와 상호 교환되어 사용됩니다

[명령] 메뉴에 자동으로 위치하는 새 명령을 만들려면 [작업 내역] 패널을 사용합니다. 또는, Extension Manager를 사용하여 명령을 포함한 새 Extension을 설치할 수도 있습니다. 자세한 내용은 Dreamweaver 도움말을 참조하십시오.

[명령] 메뉴에 있는 항목들의 순서를 다시 정렬하거나 메뉴 사이에서 항목을 이동시키려면 menus.xml 파일을 편집해야 합니다.

이전에 만들어둔 명령의 이름을 변경하려면:1 [명령] > [명령 목록 편집]을 선택합니다.

이름을 변경할 수 있는 모든 명령이 나열되어 있는 대화 상자가 나타납니다. 기본 [명령] 메뉴에 있는 명령은 이 목록에 나타나지 않으므로 이 방법으로 편집할 수 없습니다.

2 이름을 변경할 명령을 선택합니다.

3 새 이름을 입력합니다.

4 [닫기]를 클릭합니다.

[명령] 메뉴에서 해당 명령의 이름이 변경됩니다.


Configuration/Menus/ menus.xml 메뉴 막대, 메뉴 명령, 분리 기호, 단축키 목록 및 키보드 단축키에 대한 구조화된 목록이 포함되어 있습니다. 새 메뉴와 메뉴 명령을 추가하려면 이 파일을 수정하십시오.

Configuration/Menus/ commandname.htm 메뉴 명령에 필요한 함수가 들어 있습니다.


128

이전에 만들어둔 명령을 삭제하려면:1 [명령] > [명령 목록 편집]을 선택합니다.

삭제할 수 있는 모든 명령이 나열되어 있는 대화 상자가 나타납니다. 기본 [명령] 메뉴에 있는 명령은 이 목록에 나타나지 않으며 이 방법으로 삭제할 수 없습니다.

2 삭제할 명령을 선택합니다.

3 [삭제]를 클릭한 다음, 해당 명령을 정말 삭제할 것인지 확인합니다.

해당 명령이 삭제됩니다. 이 경우, 해당 명령의 코드가 포함된 파일도 삭제됩니다. 특정 명령을 삭제하면 메뉴에서 해당 메뉴 명령만 단순히 제거하는 것이 아니라 해당 메뉴 명령에 대한 코드도 함께 삭제됩니다. 그러므로, 이 방법을 사용하기 전에 명령을 정말 삭제할 것인지 반드시 확인하십시오. 해당 명령의 코드가 포함된 파일은 삭제하지 않고 명령 메뉴에서 해당 명령만 제거하려면 Configuration/Commands에서 해당 파일을 검색한 후 이 파일을 다른 폴더로 이동하면 됩니다.

4 [닫기]를 클릭합니다.

메뉴 명령 작동 방식사용자가 메뉴 명령을 포함하는 메뉴 항목이 있는 메뉴를 클릭하면 다음과 같은 이벤트가 발생합니다.

1 메뉴의 menuitem 태그에 dynamic 속성이 포함된 경우, Dreamweaver는 관련된 메뉴 명령 파일에서 getDynamicContent() 함수를 호출하여 메뉴를 채웁니다.

2 Dreamweaver는 메뉴에서 참조하는 각 메뉴 명령 파일에서 canAcceptCommand() 함수를 호출하여 명령이 선택 영역에 적합한지 확인합니다.

• canAcceptCommand() 함수가 false 값을 반환하면 해당 메뉴 항목이 희미하게 표시됩니다.

• canAcceptCommand() 함수가 true 값을 반환하거나 정의되어 있지 않으면 Dreamweaver는 isCommandChecked() 함수를 호출하여 해당 메뉴 항목 옆에 체크 표시를 표시할지 여부를 결정합니다. isCommandChecked() 함수가 정의되어 있지 않으면 체크 표시가 나타나지 않습니다.

3 Dreamweaver는 setMenuText() 함수를 호출하여 메뉴에 표시할 텍스트를 결정합니다.

setMenuText() 함수가 정의되어 있지 않으면 Dreamweaver는 menuitem 태그에 지정되어 있는 텍스트를 사용합니다.

4 사용자가 메뉴에서 항목을 선택합니다.

5 receiveArguments() 함수가 정의된 경우, Dreamweaver는 선택된 메뉴 명령 파일에서 이 함수를 호출하여 해당 명령이 메뉴 항목으로부터 전달된 인수를 처리하도록 합니다.

참고: 동적 메뉴 항목인 경우에는 메뉴 항목의 ID가 유일한 인수로 전달됩니다.

6 commandButtons() 함수가 정의된 경우, Dreamweaver는 이 함수를 호출하여 [옵션] 대화 상자의 오른쪽에 나타날 버튼과 사용자가 이 버튼을 클릭할 때 실행될 코드를 확인합니다.

7 Dreamweaver는 메뉴 명령 파일에서 form 태그를 검색합니다.

특정 양식이 존재하는 경우, Dreamweaver는 windowDimensions() 함수를 호출하여 파일의 BODY 요소가 포함된 [옵션] 대화 상자의 크기를 결정합니다.

windowDimensions() 함수가 정의되어 있지 않으면 Dreamweaver는 자동으로 이 대화 상자의 크기를 결정합니다.

8 메뉴 명령 파일의 BODY 태그에 onLoad 핸들러가 있으면 Dreamweaver는 대화 상자가 나타나는지 여부에 관계 없이 관련 코드를 실행합니다. 대화 상자가 나타나지 않으면, 나머지 단계가 수행되지 않습니다.

9 사용자가 대화 상자에서 옵션을 선택합니다. 사용자가 필드를 선택하면 Dreamweaver는 이 필드와 관련된 이벤트 핸들러를 실행합니다.

10 사용자가 commandButtons() 함수에 의해 정의된 버튼 중 하나를 클릭합니다.

11 Dreamweaver는 클릭한 버튼과 연관된 코드를 실행합니다.

12 메뉴 명령 파일의 스크립트 중 하나가 window.close() 함수를 호출할 때까지 대화 상자가 표시됩니다.


129

간단한 메뉴 명령 예제이 간단한 메뉴 명령 예제에서는 [실행 취소] 및 [재실행] 메뉴 명령이 동작하는 방법을 보여 줍니다. [실행 취소] 메뉴 명령은 사용자의 편집 작업 결과를 되돌립니다. [재실행] 항목은 [실행 취소] 작업을 되돌리고 사용자의 마지막 편집 작업 결과를 복원합니다.

이 예제를 구현하려면 다음 단계를 수행합니다.

• 129페이지의 “Creating the menu commands”

• 129페이지의 “JavaScript 코드 작성”

• 131페이지의 “메뉴 폴더에 명령 파일 놓기”

Creating the menu commands[실행 취소] 및 [재실행] 메뉴 항목이 포함된 MyMenu라는 메뉴를 만들려면 다음 HTML 메뉴 태그를 menus.xml 파일의 끝에 추가합니다.<menu name="MyMenu" id="MyMenu_Edit">

<menuitem name="MyUndo" key="Cmd+Z" file="Menus/MyMenu.htm" arguments="'undo'"

id="MyMenu_Edit_Undo" />

<menuitem name="MyRedo" key="Cmd+Y" file="Menus/MyMenu.htm" arguments="'redo'"

id="MyMenu_Edit_Redo" />

</menu>

key 속성은 사용자가 메뉴 항목을 호출하기 위해 입력할 수 있는 키보드 단축키를 정의합니다. file 속성은 메뉴 항목이 호출될 때 실행되는 명령 파일의 이름을 지정합니다. arguments 속성의 값은 receiveArguments() 함수 호출 시 Dreamweaver에서 전달하는 인수를 정의합니다.

다음 그림은 이 메뉴 항목을 보여 줍니다.

JavaScript 코드 작성사용자가 MyMenu 메뉴에서 [실행 취소] 또는 [재실행]을 선택하면 MyMenu.htm 명령 파일이 호출됩니다. 이 명령 파일은 menuitem 태그의 file 속성에 의해 지정됩니다. Dreamweaver Configuration/Menus 폴더에서 MyMenu.htm 명령 파일을 작성하고 세 개의 메뉴 명령 API 함수, 즉 canAcceptCommand(), receiveArguments(), 및 setMenuText()를 추가하여 [실행 취소] 및 [재실행] 메뉴 항목과 연관된 논리를 구현합니다. 다음 단원에서는 이 함수들에 대해 설명합니다.

canAcceptCommand()

Dreamweaver는 MyMenu 메뉴에 있는 각 메뉴 항목에 대해 canAcceptCommand() 함수를 호출하여 각 메뉴 항목이 활성화될지 비활성화될지 여부를 결정합니다. MyMenu.htm 파일에서 canAcceptCommand() 함수는 arguments[0]의 값을 확인하여 [재실행] 메뉴 항목을 처리할지 또는 [실행 취소] 메뉴 항목을 처리할지 결정합니다. 이 인수가 "undo"이면 canAcceptCommand() 함수는 활성자 함수 dw.canUndo()를 호출하여 반환된 값을 반환합니다. 이때 반환된 값은 true 또는 false입니다. 이와 같이, 인수가 "redo"이면 canAcceptCommand() 함수는 활성자 함수 dw.canRedo()를 호출하고 그 값을 Dreamweaver에 반환합니다. If the canAcceptCommand() 함수가 false를 반환하면 이 함수를 호출한 메뉴 항목이 Dreamweaver에서 희미하게 표시됩니다. 다음 예제에서는 canAcceptCommand() 함수에 대한 코드를 보여 줍니다.function canAcceptCommand()

{

var selarray;

if (arguments.length != 1) return false;

var bResult = false;

var whatToDo = arguments[0];


130

if (whatToDo == "undo")

{

bResult = dw.canUndo();

}

else if (whatToDo == "redo")

{

bResult = dw.canRedo();

}

return bResult;

}

receiveArguments()

Dreamweaver는 menuitem 태그에 대해 정의된 인수를 처리하기 위해 receiveArguments() 함수를 호출합니다. [실행 취소] 및 [재실행] 메뉴 항목의 경우, receiveArguments() 함수는 dw.undo() 함수 또는 dw.redo() 함수를 호출합니다. 이때 호출하는 함수는 인수의 값에 따라 다릅니다. 즉, arguments[0]이 "undo"이면 dw.undo() 함수를 호출하고 arguments[0]이 "redo"이면 dw.redo() 함수를 호출합니다. dw.undo() 함수는 이전 단계에서 사용자가 문서 윈도우, 대화 상자 또는 포커스를 가진 패널에서 수행한 작업을 실행 취소합니다. dw.redo() 함수는 수행되지 못했던 마지막 작업을 다시 수행합니다.

다음 예제 코드에서 receiveArguments() 함수의 동작을 보십시오.function receiveArguments()

{

if (arguments.length != 1) return;



{

dw.undo();

}


{

dw.redo();

}

}

이 명령에서 receiveArguments() 함수는 인수를 처리하고 명령을 실행합니다. 더 복잡한 메뉴 명령은 다른 함수를 호출하여 명령을 실행할 수 있습니다. 예를 들어, 다음 코드에서는 첫 번째 인수가 "foo"인지 확인하고, 그런 경우 doOperationX() 함수를 호출하여 이 함수에 두 번째 인수를 전달합니다. 첫 번째 인수가 "bar"이면 doOperationY() 함수를 호출하여 이 함수에 두 번째 인수를 전달합니다. doOperationX() 또는 doOperationY() 함수는 이 명령의 실행을 담당합니다.function receiveArguments(){

if (arguments.length != 2) return;


if (whatToDo == "foo"){

doOperationX(arguments[1]);

}else if (whatToDo == "bar"){

doOperationX(arguments[1]);

}

}


131

setMenuText()

Dreamweaver는 setMenuText() 함수를 호출하여 메뉴 항목에 나타날 텍스트를 결정합니다. setMenuText() 함수를 정의하지 않으면 menuitem 태그의 name 속성에 지정해 둔 텍스트가 사용됩니다.

setMenuText() 함수는 Dreamweaver에서 전달하는 인수, 즉 arguments[0]의 값을 확인합니다. 이 인수의 값이 "undo"이면 dw.getUndoText() 함수가 호출되고 인수의 값이 "redo"이면 dw.getRedoText() 함수가 호출됩니다. dw.getUndoText() 함수는 실행 취소될 작업을 지정하는 텍스트를 반환합니다. 예를 들어, 사용자가 재실행 작업을 여러 개 실행하면 dw.getUndoText()는 “Undo Edit Source” 라는 메뉴 텍스트를 반환합니다. 이와 같은 방법으로 dw.getRedoText() 함수도 실행될 작업을 지정하는 텍스트를 반환합니다. 사용자가 실행 취소 작업을 여러 개 실행하면 dw.RedoText() 함수는 “Redo Edit Source” 라는 메뉴 텍스트를 반환합니다.

다음 예제 코드에서 setMenuText() 함수의 동작을 보십시오.function setMenuText()

{

if (arguments.length != 1) return "";



return dw.getUndoText();


return dw.getRedoText();

else return "";

}

메뉴 폴더에 명령 파일 놓기메뉴의 [실행 취소] 및 [재실행] 메뉴 항목을 구현하려면 Dreamweaver Configuration/Menus 폴더나 작성된 하위 폴더에 MyMenu.htm 명령 파일을 저장해야 합니다. 이 MyMenu.htm 명령 파일의 위치는 menuitem 태그에 지정해 둔 위치와 일치해야 합니다. Dreamweaver에서 이 파일을 액세스하려면 Dreamweaver를 다시 시작하거나 Extension을 새로 고치십시오. Extension을 새로 고치는 방법에 대한 자세한 내용은 63페이지의 “Extension 새로 고침”을 참조하십시오.

메뉴 명령을 실행하려면 해당 메뉴 항목이 활성화되어 있을 때 이 항목을 선택합니다. Dreamweaver는 128페이지의 “메뉴 명령 작동 방식”에 설명된 것처럼 명령 파일에 있는 함수를 호출합니다.

동적 메뉴 예제이 예제는 사용 가능한 브라우저 목록을 표시하는 Dreamweaver의 [브라우저에서 미리 보기] 하위 메뉴를 구현합니다. 또한 이 예제는 사용자에 의해 지정된 브라우저의 [사이트] 패널에서 현재 파일이나 선택된 파일을 엽니다. 이 동적 메뉴를 구현하려면 다음 단계를 수행합니다.

• 131페이지의 “동적 메뉴 항목 만들기”


동적 메뉴 항목 만들기menus.xml 파일에 있는 다음 메뉴 태그는 [파일] 메뉴의 [브라우저에서 미리 보기] 하위 메뉴를 정의합니다.<menu name="_Preview in Browser" id="DWMenu_File_PIB">

<menuitem dynamic name="No Browsers Selected"

file="Menus/MM/PIB_Dynamic.htm" arguments="'No Browsers'"

id="DWMenu_File_PIB_Default" />

<separator />

<menuitem name="_Edit Browser List..." enabled="true"

command="dw.editBrowserList()" id="DWMenu_File_PIB_EditBrowserList" />

</menu>


132

첫 번째 menuitem 태그는 기본 메뉴 항목인 [선택된 브라우저 없음]을 정의합니다. [환경 설정] 대화 상자의 [브라우저에서 미리 보기] 항목에 사용할 브라우저를 지정하지 않은 경우 이 기본 메뉴 항목이 하위 메뉴에 나타납니다. Microsoft Internet Explorer 브라우저를 지정한 경우에는 하위 메뉴가 다음 그림과 같이 나타납니다.

첫 번째 메뉴 항목의 name 속성은 명령 파일 PIB_Dynamic.htm을 지정합니다. 이 파일에는 다음과 같은 행이 포함되어 있습니다.<SCRIPT LANGUAGE="javascript" SRC="PIB_Dynamic.js"></SCRIPT>

script 태그에는 PIB_Dynamic.js 파일의 JavaScript 코드가 포함되어 있습니다. 이 PIB_Dynamic.js 파일은 [브라우저에서 미리 보기] 하위 메뉴와 상호 작용하는 JavaScript 코드를 제공합니다. PIB_Dynamic.htm 파일에 이 코드를 직접 저장할 수도 있습니다. 하지만, 이 코드를 별도의 파일에 저장해 두면 한 코드를 여러 명령에 포함시킬 수 있습니다.

JavaScript 코드 작성첫 번째 menuitem 태그에 dynamic 속성이 포함되어 있으므로 다음과 같이 PIB_Dynamic.js 파일의 getDynamicContent() 함수를 호출합니다.function getDynamicContent(itemID)

{

var browsers = null;

var PIB = null;

var i;

var j=0;

browsers = new Array();

PIB = dw.getBrowserList();

for (i=0; i<PIB.length; i=i+2)

{

browsers[j] = new String(PIB[i]);

if (dw.getPrimaryBrowser() == PIB[i+1])

browsers[j] += "\tF12";

else if (dw.getSecondaryBrowser() == PIB[i+1])

browsers[j] += "\tCmd+F12";

browsers[j] += ";id='"+escQuotes(PIB[i])+"'";

if (itemID == "DWPopup_PIB_Default")

browsers[j] = MENU_strPreviewIn + browsers[j];

j = j+1;

}

return browsers;

}

getDynamicContent() 함수는 dw.getBrowserList() 함수를 호출하여 Dreamweaver [환경 설정] 대화 상자의 [브라우저에서 미리 보기] 섹션에 지정되어 있는 브라우저 이름의 배열을 얻습니다. 이 배열에는 각 브라우저의 이름 및 실행 가능한 파일에 대한 경로가 포함되어 있습니다. 다음으로, 배열 (i=0; i<PIB.length; i=i+2)의 각 항목에 대해 getDynamicContents() 함수는 해당 브라우저의 이름(PIB[i])을 browsers(browsers[j] = new String(PIB[i]);)라는 두 번째 배열로 이동시킵니다. 해당 브라우저가 기본 또는 보조 브라우저로 지정되어 있으면 getDynamicContent() 함수는 키보드 단축키를 호출하는 키보드 단축키의 이름을 추가합니다. 그런 다음, 이 함수는 ";id="라는 문자열과 작은따옴표로 표시한 브라우저 이름(예: ;id=’iexplore’)을 나란히 추가합니다. itemID 인수가 "DWPopup_PIB_Default"이면 이 함수는 배열 항목의 앞에 Preview in이라는 문자열을 접두어로 사용합니다. getDynamicContent() 함수는 [환경 설정] 대화 상자에 있는 각 브라우저에 대한 항목을 만든 후, 배열 browsers를 Dreamweaver에 반환합니다. 브라우저를 선택하지 않으면 이 함수는 null을 반환하고 해당 메뉴에는 [선택된 브라우저 없음]이 표시됩니다.


133

canAcceptCommand()

그런 다음 Dreamweaver는 file 속성을 가진 명령 파일을 참조하는 각 menuitem 태그에 대해 canAcceptCommand() 함수를 호출합니다. canAcceptCommand() 함수가 false를 반환하면 해당 메뉴 항목은 희미하게 표시됩니다. canAcceptCommand() 함수가 true를 반환하면 Dreamweaver에서 해당 메뉴 항목이 활성화됩니다. 이 함수가 true를 반환하거나 정의되어 있지 않으면 해당 메뉴 항목 옆에 체크 표시가 나타나도록 할지 여부를 결정하기 위해 isCommandChecked() 함수가 호출됩니다. isCommandChecked() 함수가 정의되어 있지 않으면 체크 표시가 나타나지 않습니다.function canAcceptCommand()

{

var PIB = dw.getBrowserList();

if (arguments[0] == 'primary' || arguments[0] == 'secondary')

return havePreviewTarget();

return havePreviewTarget() && (PIB.length > 0);

}

PIB_Dynamic.js 파일에 있는 canAcceptCommand() 함수는 [환경 설정] 대화 상자에서 작성해 둔 브라우저 목록을 다시 조회합니다. 그런 다음, 첫 번째 인수(arguments[0])가 기본 또는 보조인지 확인합니다. 첫 번째 인수가 기본이거나 보조이면 havePreviewTarget() 함수에서 반환된 값을 반환합니다. 첫 번째 인수가 기본 또는 보조가 아니면 havePreviewTarget() 함수 호출을 테스트하고 브라우저가 지정되었는지 테스트합니다(PIB.length > 0). 두 테스트 모두 true이면 함수는 true를 반환합니다. 두 테스트 중 하나 또는 모두 false이면 이 함수는 false를 반환합니다.

havePreviewTarget()

havePreviewTarget() 함수는 해당 브라우저에 표시할 유효한 대상이 Dreamweaver에 있는 경우 true를 반환하는 사용자 정의 함수입니다. 유효한 대상은 [사이트] 패널에 있는 문서 또는 선택된 파일 그룹입니다. 다음 예제에서 havePreviewTarget() 함수의 동작을 보십시오.function havePreviewTarget()

{

var bHavePreviewTarget = false;

if (dw.getFocus(true) == 'site')

{

if (site.getFocus() == 'remote')

{

bHavePreviewTarget = site.getRemoteSelection().length > 0 &&

site.canBrowseDocument();

}

else if (site.getFocus() != 'none')

{

var selFiles = site.getSelection();

if (selFiles.length > 0)

{

var i;

bHavePreviewTarget = true;

for (i = 0; i < selFiles.length; i++)

{

var selFile = selFiles[i];

// For server connections, the files will

// already be remote URLs.

if (selFile.indexOf("://") == (-1))

{

var urlPrefix = "file:///";


134

var strTemp = selFile.substr(urlPrefix.length);

if (selFile.indexOf(urlPrefix) == -1)

bHavePreviewTarget = false;

else if (strTemp.indexOf("/") == -1)


else if (!DWfile.exists(selFile))


else if (DWfile.getAttributes(selFile).indexOf("D") != -1)


}

else

{


}

}

}

}

}

else if (dw.getFocus() == 'document' ||

dw.getFocus() == 'textView' || dw.getFocus("true") == 'html' )

{

var dom = dw.getDocumentDOM('document');

if (dom != null)

{

var parseMode = dom.getParseMode();

if (parseMode == 'html' || parseMode == 'xml')


}

}

return bHavePreviewTarget;

}

havePreviewTarget() 함수는 값 bHavePreviewTarget을 false로 설정하며 이 값은 기본 반환값이 됩니다. 이 함수는 응용 프로그램의 어떤 부분이 현재 입력 포커스를 가지고 있는지 확인하기 위해 dw.getFocus() 함수를 호출하여 두 가지의 기본 테스트를 수행합니다. 첫 번째 테스트에서는 [사이트] 패널에 포커스가 있는지 확인합니다(if (dw.getFocus(true) == ‘site’)). [사이트] 패널에 포커스가 없으면 두 번째 테스트에서는 문서(dw.getFocus() == ‘document’), [텍스트] 뷰(dw.getFocus() == ‘textView’) 또는 코드 관리자(dw.getFocus(“true”) == ‘html’)가 포커스를 가지고 있는지 확인합니다. 두 테스트 모두 true가 아니면 반환값은 false입니다.

[사이트] 패널에 포커스가 있으면 이 함수는 뷰 설정이 [원격] 뷰인지 확인합니다. 만약 뷰 설정이 [원격] 뷰이면 이 함수는 원격 파일(site.getRemoteSelection().length > 0)이 있는 경우 bHavePreviewTarget을 true로 설정합니다. 이 원격 파일은 브라우저에서 열 수 있습니다(site.canBrowseDocument()). 뷰 설정이 [원격] 뷰가 아니고 [없음]도 아니면 이 함수는 file:/// URL의 형식으로 선택된 파일 목록을 가져 옵니다(var selFiles = site.getSelection();).

선택된 목록의 각 항목에 대해 이 함수는 "://"라는 문자열이 존재하는지 테스트합니다. 이 문자열이 검색되지 않으면 코드는 해당 목록 항목에 대해 일련의 테스트를 수행합니다. 항목의 형식이file:/// URL(if (selFile.indexOf(urlPrefix) == -1))이 아니라면 반환 값을 false로 설정합니다. file:/// 접두어 뒤의 나머지 문자열에 슬래시(/)가 포함되어 있지 않으면(if (strTemp.indexOf(“/”) == -1)) 이 함수는 반환값을 false로 설정합니다. 해당 파일이 존재하지 않으면(else if (!DWfile.exists(selFile))) 이 함수는 반환값을 false로 설정합니다. 마지막으로, 이 함수는 지정된 파일이 폴더인지 확인합니다(else if (DWfile.getAttributes(selFile).indexOf(“D”) != -1)). selfile이 폴더이면 이 함수는 false를 반환합니다. 그렇지 않으면, 즉 대상이 파일이면 이 함수는 bHavePreviewTarget를 true로 설정합니다.

문서, [텍스트] 뷰 또는 코드 관리자가 입력 포커스를 가지고 있으면(else if (dw.getFocus() == 'document' || dw.getFocus() == ‘textView’ || dw.getFocus(“true”) == ‘html’ )) 이 함수는 DOM을 가져와서 이 문서가 HTML인지 또는 XML 문서인지 확인합니다. 만약 문서가 HTML이거나 XML 문서이면 이 함수는 bHavePreviewTarget를 true로 설정합니다. 마지막으로, 이 함수는 bHavePreviewTarget에 저장된 값을 반환합니다.

%ED%98%95%EC%8B%9D%EC%9D%B4file:///URL(if


135

receiveArguments()

Dreamweaver에서는 명령이 메뉴 항목으로부터 전달되는 인수를 처리하도록 하기 위해 receiveArguments() 함수를 호출합니다. [브라우저에서 미리 보기] 메뉴의 경우, receiveArguments() 함수는 사용자가 선택하는 브라우저를 호출합니다. 다음 예제에서 receiveArguments() 함수의 동작을 보십시오.function receiveArguments()

{

var whichBrowser = arguments[0];

var theBrowser = null;

var i=0;

var browserList = null;

var result = false;

if (havePreviewTarget())

{

// 단축키에서 호출된 경우 확인할 코드if (whichBrowser == 'primary' || whichBrowser == 'secondary')

{

// 선택된 브라우저 경로를 가져옵니다.if (whichBrowser == 'primary')

{

theBrowser = dw.getPrimaryBrowser();

}

else if (whichBrowser == 'secondary')

{

theBrowser = dw.getSecondaryBrowser();

}

// 경로를 메뉴에 나타나는 해당 브라우저 이름과

// 일치시킵니다.browserList = dw.getBrowserList();

while(i < browserList.length)

{

if (browserList[i+1] == theBrowser)

theBrowser = browserList[i];

i+=2;

}

}

else

theBrowser = whichBrowser;

// 올바른 브라우저가 선택된 경우에만 브라우저를 실행합니다.if (theBrowser != "file:///" && typeof(theBrowser) != "undefined" &&

theBrowser.length > 0)

{

if (dw.getFocus(true) == 'site')

{

// browseDocument()는 배열을 가질 수 없으므로 선택한 첫 번째

// 항목만 가져옵니다.//dw.browseDocument(site.getSelection()[0],theBrowser);

site.browseDocument(theBrowser);

}

else

dw.browseDocument(dw.getDocumentPath('document'),theBrowser);

}

else

{

// 그렇지 않은 경우, F12 또는 Ctrl+F12를 누른 채로 사용자가 기본 브라우저나

// 보조 브라우저 중 하나를 지정하도록 요청합니다.if (whichBrowser == 'primary')

{


136

result = window.confirm(MSG_NoPrimaryBrowserDefined);

}

else if (whichBrowser == 'secondary')

{

result = window.confirm(MSG_NoSecondaryBrowserDefined);

}

// 사용자가 [확인]을 클릭하면 브라우저 패널과 함께 [환경 설정] 대화 상자가 나타납니다.if (result)

dw.showPreferencesDialog('browsers');

}

}

}

먼저, 이 함수는 변수 whichBrowser를 Dreamweaver에서 전달하는 값, 즉 arguments[0]로 설정합니다. 다른 기본값을 설정하는 것뿐만 아니라, 이 함수는 result를 기본값인 false로 설정합니다.

변수가 초기화된 후 receiveArguments() 함수는 사용자 정의된 함수 havePreviewTarget()을 호출하고 그 결과를 테스트합니다. 이 테스트의 결과가 true이면 이 함수는 사용자가 기본 또는 보조 브라우저를 선택했는지 확인합니다. 사용자가 기본 또는 보조 브라우저를 선택해 두었으면, 이 함수는 브라우저를 시작하는 실행 파일의 경로로 변수 theBrowser를 설정합니다(dw.getPrimaryBrowser() 또는 dw.getSecondaryBrowser()). 그런 다음, 이 함수는 dw.getBrowsersList()에서 반환된 브라우저 목록을 점검하는 루프를 수행합니다. 목록에 있는 특정 브라우저의 경로가 기본 또는 보조 브라우저의 경로와 일치하면 이 함수는 변수 theBrowser를 browserList의 일치하는 값으로 설정합니다. 이 값에는 브라우저의 이름 및 브라우저를 시작하는 실행 파일의 경로가 포함되어 있습니다. havePreviewTarget()이 false를 반환하면 이 함수는 변수 theBrowser를 변수 whichBrowser의 값으로 설정합니다.

그런 다음 receiveArguments() 함수는 theBrowser 변수를 테스트하여 이 변수가 특정 경로로 시작하지 않는지, 이 변수가 "undefined"가 아닌지, 변수 길이가 0보다 큰지 등을 확인합니다. 이러한 조건이 모두 충족되는 경우와 [사이트] 패널에 포커스가 있는 경우, receiveArguments() 함수가 site.browseDocument() 함수를 호출하여 [사이트] 패널에서 선택한 파일을 사용하여 선택한 브라우저를 호출합니다. [사이트] 패널에 포커스가 없으면 receiveArguments() 함수는 dw.browseDocument() 함수를 호출하여 현재 문서의 경로 및 theBrowser 변수의 값을 전달합니다. 이 변수는 해당 문서가 열릴 브라우저의 이름을 지정합니다.

사용자가 단축키(F12 또는 Ctrl+F12)를 눌렀지만 기본 또는 보조 브라우저가 지정되지 않았으면 사용자에게 이를 묻는 대화 상자가 나타납니다. 사용자가 [확인]을 클릭하면 이 함수는 browsers 인수와 함께 dw.showPreferencesDialog() 함수를 호출하여 사용자가 브라우저를 지정할 수 있도록 해줍니다.

메뉴 명령 API 함수메뉴 명령 API의 사용자 정의 함수는 선택 사항입니다.

canAcceptCommand()

설명메뉴 항목이 활성화될지 또는 희미하게 표시될지 결정합니다.

인수{arg1}, {arg2},...{argN}}

동적 메뉴 항목인 경우, getDynamicContents() 함수가 지정하는 고유한 ID가 유일한 인수가 됩니다. 동적 메뉴 항목이 아닌 경우, arguments 속성이 menuitem 태그에 정의되어 있으면 이 속성의 값이 canAcceptCommand(), 138페이지의 “isCommandChecked()”, 138페이지의 “receiveArguments()” 및 139페이지의 “setMenuText()” 함수에 하나 이상의 인수로 전달됩니다. arguments 속성은 동일한 메뉴 명령을 호출하는 두 메뉴 항목을 구분하는 데 유용하게 사용할 수 있습니다.

참고: 동적 메뉴 항목의 경우, arguments 인수는 무시됩니다.

반환값Dreamweaver에 부울 값이 반환되며, 항목이 활성화되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.


137

commandButtons()

설명[옵션] 대화 상자의 오른쪽에 나타나는 버튼 및 이 버튼을 클릭할 때 버튼의 비헤이비어를 정의합니다. 이 함수가 정의되어 있지 않으면 버튼이 나타나지 않고 메뉴 명령 파일의 BODY 섹션이 확장되어 전체 대화 상자를 채웁니다.

인수없음

반환값짝수의 요소가 포함된 배열이 반환됩니다. 첫 번째 요소는 맨 위 버튼의 레이블이 포함된 문자열입니다. 두 번째 요소는 맨 위 버튼을 클릭할 때 발생하는 비헤이비어를 정의하는 JavaScript 코드의 문자열입니다. 나머지 요소는 같은 방법으로 추가 버튼을 정의합니다.

예제다음 commandButtons() 함수의 예제에서는 [확인], [취소] 및 [도움말] 버튼을 정의합니다.function commandButtons(){


"window.close()" , "Help" , "showHelp()");

}

getDynamicContent()

설명메뉴의 동적 부분에 대한 내용을 가져옵니다.

인수menuID

menuID 인수는 해당 항목과 연관된 menuitem 태그에 있는 id 속성의 값입니다.

반환값Dreamweaver는 메뉴 항목의 이름과 항목의 고유 ID을 포함하는 문자열이 세미콜론으로 구분되어 있는 문자열 배열을 반환합니다. 함수가 null을 반환하면 메뉴는 변경되지 않습니다.

예제다음 getDynamicContent() 함수의 예제에서는 네 메뉴 항목, 즉 My Menu Item 1, My Menu Item 2, My Menu Item 3 및 My Menu Item 4의 배열을 반환합니다.function getDynamicContent(){

var stringArray= new Array();

var i=0;

var numItems = 4;

for (i=0; i<numItems;i++)

stringArray[i] = new String("My Menu Item " + i + ";¬

id=’My-MenuItem" + i + "’");

return stringArray;

}


138

isCommandChecked()

설명메뉴 항목 옆에 체크 표시를 나타낼지 여부를 결정합니다.


동적 메뉴 항목인 경우, getDynamicContents() 함수가 지정하는 고유한 ID가 유일한 인수가 됩니다. 동적 메뉴 항목이 아닌 경우, arguments 속성이 menuitem 태그에 정의되어 있으면 이 속성의 값이 isCommandChecked(), 136페이지의 “canAcceptCommand()”, 138페이지의 “receiveArguments()” 및 139페이지의 “setMenuText()” 함수에 하나 이상의 인수로 전달됩니다. arguments 속성은 동일한 메뉴 명령을 호출하는 두 메뉴 항목을 구분하는 데 유용하게 사용할 수 있습니다.


반환값Dreamweaver에 부울 값이 반환되며, 체크 표시가 해당 메뉴 항목 옆에 나타나면 true를 반환하고 그렇지 않으면 false를 반환합니다.

예제function isCommandChecked()

{

var bChecked = false;

var cssStyle = arguments[0];

if (dw.getDocumentDOM() == null)

return false;

if (cssStyle == "(None)")

{

return dw.cssStylePalette.getSelectedStyle() == '';

}

else

{

return dw.cssStylePalette.getSelectedStyle() == cssStyle;

}

return bChecked;

}

receiveArguments()

설명메뉴 항목이나 dw.runCommand() 함수로부터 전달된 인수를 처리합니다. 동적 메뉴 항목인 경우에는 동적 메뉴 항목 ID를 처리합니다.


동적 메뉴 항목인 경우, getDynamicContents() 함수가 지정하는 고유한 ID가 유일한 인수가 됩니다. 동적 메뉴 항목이 아닌 경우, arguments 속성이 menuitem 태그에 정의되어 있으면 이 속성의 값이 receiveArguments(), 136페이지의 “canAcceptCommand()”, 138페이지의 “isCommandChecked()” 및 139페이지의 “setMenuText()” 함수에 하나 이상의 인수로 전달됩니다. arguments 속성은 동일한 메뉴 명령을 호출하는 두 메뉴 항목을 구분하는 데 유용하게 사용할 수 있습니다.


반환값없음


139

예제function receiveArguments()

{

var styleName = arguments[0];

if (styleName == "(None)")

dw.getDocumentDOM('document').applyCSSStyle('','');

else

dw.getDocumentDOM('document').applyCSSStyle('',styleName);

}

setMenuText()

설명메뉴에 나타낼 텍스트를 지정합니다.

참고: 137페이지의 “getDynamicContent()”를 사용하는 경우에는 이 함수를 사용하지 마십시오.


arguments 속성이 menuitem 태그에 정의되어 있으면 이 속성의 값이 setMenuText(), 136페이지의 “canAcceptCommand()”, 138페이지의 “isCommandChecked()” 및 138페이지의 “receiveArguments()” 함수에 하나 이상의 인수로 전달됩니다. arguments 속성은 동일한 메뉴 명령을 호출하는 두 메뉴 항목을 구분하는 데 유용하게 사용할 수 있습니다.

반환값메뉴에 나타낼 문자열입니다.

예제function setMenuText()

{

if (arguments.length != 1) return "";



return dw.getUndoText();


return dw.getRedoText();

else return "";

}

windowDimensions()


참고: 대화 상자의 크기를 640 x 480 픽셀보다 크게 하려는 경우에만 이 함수를 정의하십시오.

인수platform

platform 인수의 값은 사용자의 플랫폼에 따라 "macintosh" 또는 "windows"입니다.




140

예제다음 windowDimensions() 예제에서는 [매개 변수] 대화 상자의 크기를 648 x 520픽셀로 설정합니다.function windowDimensions(){

return "648,520";

}

141

11장: 툴바

Adobe Dreamweaver CS3 툴바를 만들려면 툴바를 정의하는 파일을 만들고 이 파일을 Configuration/Toolbars 폴더에 저장하면 됩니다. 툴바 파일에서 몇 가지 사용자 정의 XML 태그를 사용하여 체크 버튼, 라디오 버튼, 텍스트 상자, 팝업 메뉴 등의 항목을 정의할 수 있습니다. 툴바 항목에 속성 및 명령을 할당하면 툴바 표시 방식 및 동작 방식을 지정할 수 있고, 다른 툴바 파일을 포함할 수 있으며, 다른 툴바에 정의된 툴바 항목을 참조할 수 있습니다.

다음 표에서는 툴바를 만들 때 사용하는 파일을 보여 줍니다.

툴바 동작 방식툴바는 주 Dreamweaver Configuration 폴더의 Toolbars 폴더에 저장된 XML 및 이미지 파일을 사용하여 정의됩니다. 기본 Dreamweaver 툴바는 Configuration/Toolbars 폴더의 toolbars.xml 파일에 저장되어 있습니다. Dreamweaver가 시작될 때 Toolbars 폴더에 있는 툴바 파일이 모두 로드됩니다. 새 툴바를 추가하려면 기본 toolbars.xml 파일을 수정하는 대신, 추가할 파일을 Toolbars 폴더에 복사하면 됩니다.

툴바 XML 파일은 하나 이상의 툴바와 해당 툴바 항목을 정의합니다. 툴바는 버튼, 텍스트 상자, 팝업 메뉴 등과 같은 항목의 목록입니다. 툴바의 각 항목은 사용자가 툴바에서 액세스할 수 있는 각 컨트롤을 나타냅니다.

누름 버튼 및 팝업 메뉴와 같은 일부 종류의 툴바 컨트롤에는 컨트롤과 관련된 아이콘 이미지가 있습니다. 아이콘 이미지는 Toolbars 폴더의 images 폴더에 저장됩니다. 이미지는 Dreamweaver가 렌더링할 수 있는 모든 형식이 가능하지만 보통 GIF 또는 JPEG 파일 형식을 갖습니다. Adobe에서 작성한 툴바의 이미지는 Toolbars/images/MM 폴더에 저장됩니다.

메뉴의 경우와 마찬가지로 개별 툴바 항목의 기능을 항목 속성 또는 명령 파일을 통해 지정할 수 있습니다. Adobe에서 작성한 툴바 명령 파일은 Toolbars/MM 폴더에 저장됩니다.

툴바 API는 메뉴 명령 API와 호환되므로, 툴바 컨트롤은 메뉴 명령 파일을 다시 사용할 수 있습니다.

메뉴와 달리 툴바 항목을 이 항목을 사용하는 툴바와 독립적으로 정의할 수 있습니다. 이러한 유연성이 제공되므로 itemref 태그를 사용하여 툴바 항목을 여러 툴바에서 사용할 수 있습니다.

Dreamweaver가 처음 툴바를 로드할 때 툴바의 표시 여부와 위치는 툴바 정의에 의해 설정됩니다. 그런 다음, 툴바의 화면 표시 여부 및 위치가 레지스트리(Windows) 또는 Dreamweaver 환경 설정 파일(Macintosh)에 저장되고 여기에서 복원됩니다.

툴바 동작 방식Windows의 경우, Dreamweaver MX 툴바는 일반적으로 표준 Windows 툴바와 동일하게 동작합니다. Dreamweaver MX 툴바의 특성은 다음과 같습니다.

• 툴바를 드래그 앤 드롭하여 툴바를 결합하거나, 결합을 해제하거나, 다른 툴바와의 상대 위치를 변경할 수 있습니다.

• 툴바를 프레임 윈도우의 위 또는 아래에 가로로 결합할 수 있습니다.

단일 부모 프레임 내에서, 모든 Dreamweaver 문서 윈도우를 결합하는 Dreamweaver 작업 영역에서 작업 영역 프레임이나 문서 윈도우에 결합할 툴바를 지정할 수 있습니다.


Configuration/Toolbars/ toolbars.xml 이 파일을 편집하여 툴바의 내용을 변경합니다.

Configuration/Toolbars/ newtoolbar.xml 이 파일을 만들어 새 툴바를 만듭니다.

Configuration/Toolbars/ imagefile.gif 툴바 컨트롤에 대한 아이콘 이미지입니다.

Configuration/Commands/ MyCommand.htm 툴바 항목과 연관된 명령 파일입니다.


142

Dreamweaver 작업 영역 프레임에 결합하는 툴바의 경우, 각 툴바마다 인스턴스가 하나씩 존재합니다. 이 경우, 툴바는 맨 앞에 있는 문서에 대해 작동합니다. Dreamweaver 작업 영역에서 위, 아래 또는 [삽입] 툴바의 왼쪽이나 오른쪽에 툴바를 결합할 수 있습니다. Dreamweaver 작업 영역 프레임에 첨부된 툴바는 문서 윈도우가 없으면 자동으로 비활성화되지 않습니다. 열린 문서가 없을 때 활성화 여부는 툴바 항목에서 결정합니다.

툴바가 문서 윈도우에 결합된 채로 있으면 각 윈도우의 인스턴스는 하나만 존재하게 됩니다. 한 문서 윈도우에 완벽하게 첨부된 툴바는 자신이 속한 윈도우가 맨 앞에 있는 문서가 아니면 자신을 비활성화시킵니다. 또한 자신이 속한 윈도우가 맨 앞에 나타날 때 자신의 업데이트 핸들러를 모두 다시 실행합니다.

문서 윈도우와 Dreamweaver 작업 영역 프레임 사이에서는 툴바를 드래그 앤 드롭할 수 없습니다.

• 툴바의 크기는 고정적입니다. 즉, 툴바는 해당 컨테이너의 크기가 줄어들거나 다른 툴바가 옆에 놓여도 크기가 줄어들지 않습니다.

• [보기] > [툴바] 메뉴에서 툴바를 표시하거나 숨길 수 있습니다.

• 툴바는 겹쳐 놓을 수 없습니다.

• 툴바를 드래그하는 동안에는 툴바의 윤곽선만 나타납니다.

Macintosh의 경우, 툴바는 항상 문서 윈도우에 첨부됩니다. 툴바를 메뉴에 표시하거나 메뉴로부터 숨길 수는 있지만 드래그 앤 드롭하거나, 다시 정렬하거나, 결합을 해제할 수는 없습니다.

툴바 명령의 작동 방식Dreamweaver가 툴바를 가져올 때 다음 이벤트가 발생합니다.

1 Dreamweaver는 각 툴바 컨트롤 항목마다 file 속성이 존재하는지 여부를 확인합니다.

2 file 속성이 존재하는 경우, Dreamweaver는 canAcceptCommand() 함수를 호출하여 문서의 현재 컨텍스트에서 해당 컨트롤을 활성화할 것인지 여부를 결정합니다.

예를 들어, Dreamweaver 툴바의 [문서 제목] 텍스트 상자의 경우, canAcceptCommand() 함수는 현재 DOM이 있는지 및 현재 문서가 HTML 파일인지 여부를 확인합니다. 이 두 조건이 모두 true인 경우, 함수는 true를 반환하고 Dreamweaver는 툴바에서 해당 텍스트 상자를 활성화합니다.

3 file 속성이 존재하는 경우, Dreamweaver는 속성 checked, command, DOMRequired, enabled, script, showif, update 및 value를 무시합니다(지정되어 있는 경우).

4 file 속성이 존재하지 않는 경우, Dreamweaver는 툴바 컨트롤 항목에 대해 설정된 checked, command, DomRequired 등의 속성을 처리합니다.

특정 항목 태그 속성에 대한 자세한 내용은 152페이지의 “항목 태그 속성”을 참조하십시오.

5 Dreamweaver는 update 속성에 의해 지정된 업데이트 주기마다 getCurrentValue() 함수를 호출하여 해당 컨트롤에 대해 표시할 값을 결정합니다.

6 사용자가 툴바에서 항목을 선택합니다.

7 Dreamweaver는 receiveArguments() 함수를 호출하여 툴바 항목의 arguments 속성이 지정하는 인수를 처리합니다.

툴바 명령 API에 있는 특정 함수의 목적에 대한 자세한 내용은 156페이지의 “툴바 명령 API 함수”를 참조하십시오.

간단한 툴바 명령 파일이 간단한 예제에서는 Dreamweaver [문서] 툴바에 나타난 [제목] 텍스트 상자 항목을 구현합니다. 이 텍스트 상자 항목은 사용자가 현재 Dreamweaver 문서의 이름을 입력할 수 있도록 합니다. 다음 단계를 따라 이 툴바 예제를 구현합니다.

• 143페이지의 “텍스트 상자 만들기”



143

텍스트 상자 만들기Dreamweaver에 툴바를 추가하려면 Dreamweaver Configuration 폴더 내의 Toolbars 폴더에 툴바 정의가 포함된 XML 파일을 배치합니다.

다음 그림은 [제목] 텍스트 상자를 보여 줍니다.

다음 editcontrol 툴바 항목은 [제목]이라는 텍스트 상자를 정의합니다:

<EDITCONTROL ID="DW_SetTitle"label="Title: "

tooltip="Document Title"

width="150"

file="Toolbars/MM/EditTitle.htm"/>

tooltip 속성은 사용자가 해당 텍스트 상자 위에 마우스 포인터를 올려 놓으면 도구 설명 상자에 제목이 표시되도록 합니다. width 속성은 해당 필드의 크기를 픽셀 단위로 지정합니다. file 속성은 해당 텍스트 상자에서 동작하는 JavaScript 함수가 EditTitle.htm 파일에 포함되도록 지정합니다. Dreamweaver [문서] 툴바의 전체 정의를 보려면 toolbars.xml 파일에서 기본 툴바(id="DW_Toolbar_Main")를 참조하십시오.

JavaScript 코드 작성사용자가 텍스트 상자와 상호 작용할 때 Dreamweaver는 Toolbars/MM 폴더의 EditTitle.htm 명령 파일을 호출합니다. 이 파일에는 [제목] 텍스트 상자에서 동작하는 세 개의 JavaScript 함수가 포함되어 있습니다. 이러한 함수에는 canAcceptCommand(), receiveArguments() 및 getCurrentValue()가 있습니다.

canAcceptCommand(): 툴바 항목 활성화canAcceptCommand() 함수는 현재 문서 객체 모델(DOM)이 있는지와 문서가 HTML로 파싱되는지 여부를 확인하는 한 줄의 코드로 구성되어 있습니다. 이 함수는 그러한 테스트의 결과를 반환합니다. 조건이 true이면 Dreamweaver는 툴바에서 텍스트 상자 항목을 활성화합니다. 함수가 false를 반환하면 Dreamweaver는 해당 항목을 비활성화합니다.

해당 함수는 다음과 같습니다.function canAcceptCommand()

{

return (dw.getDocumentDOM() != null && dw.getDocumentDOM().getParseMode() == 'html');

}

receiveArguments(): 제목 설정사용자가 [제목] 텍스트 상자에 값을 입력하고 Enter 키를 누르거나 해당 컨트롤에서 다른 곳으로 포커스를 옮기면 다음 예제에서와 같이 Dreamweaver는 receiveArguments() 함수를 호출합니다.

해당 함수는 다음과 같습니다.function receiveArguments(newTitle)

{


if (dom)

dom.setTitle(newTitle);

}

Dreamweaver는 receiveArguments() 함수에 newTitle을 전달합니다. 이 값은 사용자가 입력하는 값입니다. receiveArguments() 함수는 먼저 현재 DOM이 존재하는지 확인합니다. 현재 DOM이 존재하면 receiveArguments() 함수는 newTitle을 dom. setTitle() 함수에 전달하여 새 문서를 설정합니다.

144

getCurrentValue(): 제목 가져오기onEdit 이벤트 핸들러의 기본 업데이트 빈도에 따라 업데이트 주기가 발생할 때마다 Dreamweaver는 getCurrentValue() 함수를 호출하여 해당 컨트롤에 표시할 값을 결정합니다. [제목] 텍스트 편집 컨트롤에 update 속성이 없으므로 onEdit 핸들러의 기본 업데이트 빈도가 업데이트 빈도를 결정합니다.

[제목] 텍스트 상자에 대해 다음 getCurrentValue() 함수는 현재 제목을 얻고 반환하는 JavaScript 응용 프로그램 프로그래밍 인터페이스(API) 함수 dom.getTitle()을 호출합니다.

해당 함수는 다음과 같습니다.function getCurrentValue()

{

var title = "";


if (dom)

title = dom.getTitle();

return title;

}

사용자가 문서의 제목을 입력할 때까지 getTitle() 함수는 무제 문서라는 텍스트를 반환하며 텍스트 상자에 이 텍스트가 나타납니다. 사용자가 특정 제목을 입력하고 나면 getTitle() 함수는 그 값을 반환하고 Dreamweaver는 그 값을 새 문서 제목으로 표시합니다.

[제목] 텍스트 상자의 JavaScript 함수가 포함된 전체 HTML 파일을 보려면 Toolbars/MM 폴더의 EditTitle.htm 파일을 참조하십시오.

MM 폴더는 Adobe 파일용으로 예약되어 있습니다. Toolbars 폴더에 다른 폴더를 하나 만들고 이 폴더에 JavaScript 코드를 위치시킵니다.

툴바 정의 파일툴바는 라디오 버튼, 체크 버튼, 편집 상자 및 기타 툴바 항목의 목록입니다. 이 항목들은 separator 태그에 의해 구분될 수 있으며 이 기능은 선택 사항입니다. 각 툴바 항목은 특정 항목에 대한 참조가 될 수 있습니다. 예를 들어, itemref 태그를 사용하는 항목, separator 태그를 사용하는 분리 기호, 체크 상자나 편집 상자의 전체 툴바 항목 정의에 대한 참조가 될 수 있습니다. 이에 대한 자세한 내용은 148페이지의 “툴바 항목 태그”를 참조하십시오.

각 툴바 정의 파일은 다음 선언으로 시작합니다.<?xml version="1.0" encoding="optional_encoding"?><!DOCTYPE toolbarset SYSTEM "-//Macromedia//DWExtension toolbar 5.0">

해당 인코딩이 생략된 경우, Dreamweaver는 해당 운영 체제의 기본 인코딩을 사용합니다.

위의 선언 뒤 파일에서는 toolbar, itemref, separator, include, itemtype 등의 태그가 포함된 하나의 toolbarset 태그가 사용됩니다. 여기서 itemtype은 button, checkbutton, radiobutton, menubutton, dropdown, combobox, editcontrol 또는 colorpicker입니다. 다음 예제는 toolbars.xml 파일에서 일부 발췌한 것으로 툴바 파일에서의 태그 구조를 보여 줍니다. This 이 예제는 다음 단원에서 설명할 툴바 항목 속성 대신, 타원 (...) 를 사용합니다.<?xml version="1.0"?>

<!DOCTYPE toolbarset SYSTEM "-//Macromedia//DWExtension toolbar 5.0">

<toolbarset>



<toolbar id="DW_Toolbar_Main" label="Document">

<radiobutton id="DW_CodeView" .../>

<radiobutton id="DW_SplitView" .../>

<radiobutton id="DW_DesignView" .../>

<separator/>

<checkbutton id="DW_LiveDebug" .../>

<checkbutton id="DW_LiveDataView" .../>

<separator/>


145

<editcontrol id="DW_SetTitle" .../>

<menubutton id="DW_FileTransfer" .../>

<menubutton id="DW_Preview" .../>

<separator/>

<button id="DW_DocRefresh" .../>

<button id="DW_Reference" .../>

<menubutton id="DW_CodeNav" .../>

<menubutton id="DW_ViewOptions" .../>

</toolbar>

</toolbarset>

다음 단원에서는 각 툴바 태그에 대해 설명합니다.

<toolbar>

설명툴바를 정의합니다. Dreamweaver는 항목과 분리 기호를 왼쪽에서 오른쪽으로 지정된 순서대로 표시하고 자동으로 배치합니다. 툴바 파일은 항목 사이의 간격을 지정하지 않지만 특정 항목의 폭은 지정할 수 있습니다.

속성id, label, {container}, {initiallyVisible}, {initialPosition}, {relativeTo}

• id="unique_id" Required. 식별자 문자열은 특정 파일 내에서 또는 해당 파일에 포함된 모든 파일에서 고유해야 합니다. 툴바를 조작하는 JavaScript API 함수는 ID를 통해 툴바를 참조합니다. JavaScript API 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오. 동일한 파일에 포함된 두 툴바가 동일한 ID를 가진 경우 Dreamweaver에서 오류 메시지를 표시합니다.

• label="string" 필수입니다. 이 레이블 속성은 해당 레이블을 지정합니다. 해당 레이블은 문자로 된 문자열이며 Dreamweaver가 사용자에게 표시해 줍니다. 레이블은 [보기] > [툴바] 메뉴에 나타나며 툴바가 이동할 때는 툴바의 제목 막대에 나타납니다.

• container="mainframe" 또는 "document" "mainframe"이 기본값입니다. Windows의 Dreamweaver 작업 영역에서 툴바가 결합될 위치를 지정합니다. 이 속성이 "mainframe"으로 설정되어 있으면 툴바는 바깥쪽 작업 영역 프레임에 나타나며 맨 앞의 문서에서 동작합니다. 이 속성이 "document"로 설정되어 있으면 툴바는 각 문서 윈도우에 나타납니다. Macintosh에서는 모든 툴바가 각 문서 윈도우에 나타납니다.

• initiallyVisible="true" 또는 "false". 이 태그는 Dreamweaver가 Toolbars 폴더에서 처음으로 툴바를 로드할 때 툴바가 화면에 표시될지 여부를 지정합니다. 처음 로드한 후부터는 사용자가 화면 표시 여부를 제어합니다. Dreamweaver는 종료될 때 종료 당시의 상태를 시스템 레지스트리(Windows) 또는 Dreamweaver 환경 설정 파일(Macintosh)에 저장합니다. 그리고 다시 시작할 때 레지스트리 또는 환경 설정 파일에서 그 설정값을 복원합니다. dom.getToolbarVisibility() 및 dom.setToolbarVisibility() 함수를 사용하여 툴바 화면 표시 여부를 조작할 수 있습니다. 이에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오. initiallyVisible 속성을 설정하지 않으면 기본값은 true입니다.

• initialPosition="top", "below" 또는 "floating". Dreamweaver가 처음으로 툴바를 로드할 때 툴바의 처음 위치를 다른 툴바에 대한 상대 위치로 지정합니다. intialPosition의 사용 가능한 값은 다음 목록에 설명되어 있습니다.

• top 이 값이 기본 위치가 되므로 해당 툴바가 문서 윈도우의 위쪽에 나타납니다. 여러 툴바가 지정된 윈도우 유형으로 top을 지정하면 툴바는 Dreamweaver가 로드하는 순서대로 표시됩니다. 툴바가 서로 다른 파일에 존재하는 경우에는 임의의 순서대로 표시됩니다.

• below 툴바는 relativeTo 속성에 의해 지정되는 툴바 바로 아래에 있는 행의 시작 부분에 나타납니다. relativeTo 툴바를 찾을 수 없으면 Dreamweaver는 오류를 보고합니다. 여러 툴바가 한 툴바에 대해 상대적인 below를 지정하면 툴바는 Dreamweaver가 로드하는 순서대로 표시됩니다. 툴바가 서로 다른 파일에 존재하는 경우에는 임의의 순서로 표시됩니다.

• floating 툴바가 처음에는 윈도우에 결합되지 않고 문서 위로 이동합니다. Dreamweaver는 다른 부동 툴바에서 오프셋되도록 툴바를 자동 배치합니다. Macintosh에서 floating은 top과 같은 방식으로 처리됩니다.

initiallyVisible 속성과 마찬가지로, initialPosition 속성도 Dreamweaver가 처음으로 툴바를 로드할 때에만 적용됩니다. 그런 다음, 툴바의 위치가 레지스트리 또는 Dreamweaver MX 환경 설정 파일에 저장됩니다. dom.setToolbarPosition() 함수를 사용하여 툴바의 위치를 다시 설정할 수 있습니다. dom.setToolbarPosition() 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.


146

initialPosition을 지정하지 않으면 툴바는 Dreamweaver가 로드하는 순서대로 표시됩니다.

• relativeTo="toolbar_id" 이 속성은 initialPosition 속성이 below를 지정한 경우에는 필수입니다. 그 외의 경우에는 무시됩니다. 이 툴바가 배치될 지점 위에 있는 툴바의 ID를 지정합니다.

내용toolbar 태그에는 button, combobox, dropdown 등과 같은 개별 항목 정의뿐만 아니라, include, itemref 및 separator 태그도 포함되어 있습니다. 사용자가 지정할 수 있는 항목 정의에 대한 설명은 148페이지의 “툴바 항목 태그”를 참조하십시오.

컨테이너toolbarset 태그

예제<toolbar id="MyDWedit_toolbar" label="Edit">

<include/>

설명현재 파일 로드를 계속하기 전에 지정된 파일에서 툴바 항목을 로드합니다. 포함 파일에 정의되어 있는 툴바 항목을 현재 파일에서 참조할 수 있습니다. 특정 파일이 다른 파일을 재귀적으로 포함하려는 경우 Dreamweaver는 오류 메시지를 표시하고 재귀적인 포함을 무시합니다. 포함 파일의 툴바 항목을 현재 파일의 참조로 사용할 수는 있지만 포함 파일의 모든 toolbar 태그를 건너뜁니다.

속성• 포함할 툴바 XML 파일의 file 경로이며 Toolbars 폴더에 대한 상대 경로입니다.

내용없음

컨테이너toolbar 태그 또는 toolbarset 태그.

예제<include file="mine/editbar.xml"/>

<itemtype/>

설명한 개의 툴바 항목을 정의합니다. 툴바 항목에는 버튼, 라디오 버튼, 체크 버튼, 콤보 상자, 팝업 메뉴 등이 포함됩니다. 정의할 수 있는 툴바 항목 종류의 목록은 148페이지의 “툴바 항목 태그”를 참조하십시오.

속성속성은 사용자가 정의하는 항목에 따라 달라집니다. 툴바 항목에 지정할 수 있는 속성의 전체 목록은 152페이지의 “항목 태그 속성”을 참조하십시오.

내용없음


예제<button id="strikeout_button" .../>


147

<itemref/>

설명이전 툴바의 내부 또는 모든 툴바의 외부 중 하나에 정의되었던 툴바 항목을 참조하여 현재 툴바에 포함시킵니다.

속성id, {showIf}

• id="id_reference" 필수입니다. 이전에 정의되었거나 파일에 포함된 항목의 ID여야 합니다. Dreamweaver는 전방 참조를 허용하지 않습니다. 특정 툴바 항목 태그가 정의되지 않은 ID를 참조하면 Dreamweaver는 오류를 보고하고 이 참조를 무시합니다.

• showIf="script" 지정된 스크립트가 true 값을 반환하는 경우에만 이 항목이 툴바에 나타나도록 지정합니다. 예를 들어, showIf를 사용하면 지정된 응용 프로그램에서만 특정 버튼을 표시하거나 ColdFusion, ASP 또는 JSP 등과 같은 서버측 언어로 페이지가 작성된 경우에만 표시할 수 있습니다. showIf를 지정하지 않으면 항목이 항상 표시됩니다. Dreamweaver는 항목의 활성자가 실행될 때마다, 즉 update 속성의 값에 따라 이 속성을 확인합니다. 이 속성은 신중하게 사용해야 합니다. 이 속성은 항목을 정의할 때 또는 툴바에서 항목을 참조할 때 사용할 수 있습니다. 정의 및 참조에 모두 showIf 속성을 지정하면 Dreamweaver는 두 조건이 모두 true인 경우에만 항목을 표시합니다. showIf 속성은 명령 파일의 showIf() 함수와 동일한 기능을 수행합니다.

내용없음


예제<itemref id="strikeout_button">

<separator/>

설명툴바의 현재 위치에 구분 기호를 삽입합니다.

속성{showIf}

• showif 속성은 지정된 스크립트가 true를 반환하는 경우에만 분리 기호가 툴바에 나타나도록 지정합니다. 예를 들어, showIf를 사용하면 지정된 응용 프로그램에서만 분리 기호를 표시하거나 페이지가 특정 문서 형식인 경우에만 분리 기호를 표시할 수 있습니다. showIf 속성이 지정되어 있지 않으면 분리 기호가 항상 표시됩니다.

내용없음

컨테이너toolbar 태그

예제<separator/>


148

툴바 항목 태그각종 툴바 항목은 자신만의 고유한 태그와 일련의 필수 및 선택 속성을 가집니다. toolbar 항목은 툴바 내부 또는 외부에서 정의할 수 있습니다. 일반적으로, 툴바 외부에서 툴바 항목을 정의하고 itemref 태그를 사용하여 툴바 내부에서 해당 항목을 참조하는 것이 좋습니다.

툴바에서 다음과 같은 종류의 항목을 정의할 수 있습니다.

<button>

설명이 누름 버튼을 클릭하면 특정 명령이 실행됩니다. Dreamweaver 툴바의 [참조] 버튼과 동일한 모양이며 수행하는 동작도 동일합니다.

속성id, image, tooltip, command, {showIf}, {disabledImage}, {overImage}, {label}, {file},

{domRequired}, {enabled}, {update}, {arguments}

각 속성에 대한 설명은 152페이지의 “항목 태그 속성”을 참조하십시오.

내용없음


예제<BUTTON ID="DW_DocRefresh"

image="Toolbars/images/MM/refresh.gif"

disabledImage="Toolbars/images/MM/refresh_dis.gif"tooltip="Refresh Design View (F5)"

enabled="((dw.getDocumentDOM() != null) && (dw.getDocumentDOM().getView() != 'browse')

&& (!dw.getDocumentDOM().isDesignViewUpdated()))"

command="dw.getDocumentDOM().synchronizeDocument()"

update="onViewChange,onCodeViewSyncChange"/>

<checkbutton>

설명체크 버튼은 체크 표시된 상태 또는 체크 표시되지 않은 상태를 가지는 버튼입니다. 이 버튼을 클릭하면 특정 명령이 실행됩니다. 체크된 경우 오목하게 표시되며 강조 표시됩니다. 체크되지 않은 경우 편평하게 표시됩니다. Dreamweaver는 체크 버튼에 대해 마우스를 위에 놓았을 때, 누를 때, 누른 채 마우스를 위에 놓았을 때, 누른 채 비활성화 등의 상태를 구현합니다. checked 속성 또는 isCommandChecked() 함수에 의해 지정된 핸들러는 체크 버튼이 클릭될 때 버튼의 상태가 전환되도록 해야 합니다.

속성id, {showIf}, image, {disabledImage}, {overImage}, tooltip, {label}, {file}, {domRequired},

{enabled}, checked, {update}, command, {arguments}


내용없음



149

예제<CHECKBUTTON ID="DW_LiveDebug"

image="Toolbars/images/MM/debugview.gif"

disabledImage="Toolbars/images/MM/globe_dis.gif"tooltip="Live Debug"

enabled="dw.canLiveDebug()"

checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'browse'"

command="dw.toggleLiveDebug()"

showIf="dw.canLiveDebug()"

update="onViewChange"/>

<radiobutton>

설명라디오 버튼은 선택이 취소되었을 때 볼록 버튼으로 표시된다는 점만 빼면 체크 버튼과 동일합니다. Dreamweaver는 라디오 버튼에 대해 마우스를 위에 놓았을 때, 누를 때, 누른 채 마우스를 위에 놓았을 때, 누른 채 비활성화 등의 상태를 구현합니다. Dreamweaver에서는 두 개 이상의 라디오 버튼을 선택할 수도 있습니다. checked 속성 또는 isCommandChecked() 함수가 지정하는 핸들러는 라디오 버튼의 체크 표시된 상태와 체크 표시되지 않은 상태가 서로 일관성있게 동작하는지 확인해야 합니다.

라디오 버튼은 Dreamweaver 문서 툴바의 [코드] 뷰, [디자인] 뷰 및 [코드 및 디자인] 뷰 버튼과 동일하게 동작합니다.

속성id, image, tooltip, checked, command, {showIf}, {disabledImage}, {overImage}, {label}, {file},

{domRequired}, {enabled}, {update}, {arguments}


내용없음


예제<RADIOBUTTON ID="DW_CodeView"

image="Toolbars/images/MM/codeView.gif"

disabledImage="Toolbars/images/MM/codeView_dis.gif"tooltip="Show Code View"

domRequired="false"

enabled="dw.getDocumentDOM() != null"

checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'code'"

command="dw.getDocumentDOM().setView('code')"


<menubutton>

설명메뉴 버튼은 menuid 속성에 의해 지정된 컨텍스트 메뉴를 호출하는 버튼입니다. Dreamweaver는 메뉴 버튼에 대해 마우스를 위에 놓았을 때 및 누를 때의 상태를 구현합니다. Dreamweaver는 메뉴 항목이 버튼에 첨부되었음을 알려 주는 아래쪽 방향 화살표인 메뉴 화살표를 그리지 않으므로 사용하는 아이콘에 이 메뉴 화살표를 포함시켜 두어야 합니다. Dreamweaver 문서 툴바의 [파일 관리] 및 [코드 내비게이션] 버튼은 메뉴 버튼의 예입니다.

속성id, image, tooltip, menuID, domRequired, enabled, {showIf}, {disabledImage}, {overImage},

{label}, {file}, {update}



150

내용없음


예제<MENUBUTTON ID="DW_CodeNav"

image="Toolbars/images/MM/codenav.gif"

disabledImage="Toolbars/images/MM/codenav_dis.gif"tooltip="Code Navigation"

enabled="dw.getFocus() == 'textView' || dw.getFocus() == 'html'"

menuID="DWCodeNavPopup"


<dropdown>

설명드롭다운 메뉴(또는 팝업 메뉴)는 항목을 선택하면 특정 명령이 실행되는 편집 불가능한 메뉴입니다. 이 메뉴는 첨부된 JavaScript 함수를 기반으로 하여 자신을 업데이트합니다. 이 메뉴는 속성 관리자의 크기가 작지 않고 표준 크기라는 점만 제외하면, 텍스트 속성 관리자의 [포맷] 컨트롤과 동일한 모양을 가지고 있으며 동일하게 동작합니다.

속성id, tooltip, file, enabled, checked, value, command, {showIf}, {label}, {width}, {domRequired},

{update}, {arguments}


내용없음


예제<dropdown id="Font_Example"

width="115"

tooltip="Font"

domRequired="false"

file="Toolbars/mine/fontExample.htm"

update="onSelChange"/>

<combobox>

설명콤보 상자는 사용자가 항목을 선택하거나 텍스트 상자에서 편집하고 포커스를 전환할 때 명령을 실행하는 팝업 메뉴로서 편집 가능합니다. 이 메뉴는 속성 관리자의 크기가 작지 않고 표준 크기라는 점만 제외하면, 텍스트 속성 관리자의 [글꼴] 컨트롤과 동일한 모양을 가지고 있으며 동일하게 동작합니다.

속성id, file, tooltip, enabled, value, command, {showiI}, {label}, {width}, {domRequired},



내용없음


151


예제<COMBOBOX ID="Address_URL"

width="300"

tooltip="Address"

label="Address: "

file="Toolbars/MM/AddressURL.htm"

update="onBrowserPageBusyChange"/>

<editcontrol>

설명편집 컨트롤 상자는 사용자가 이 상자에서 텍스트를 변경하고 포커스를 전환할 때 명령을 실행하는 텍스트 편집 상자입니다.

속성id, tooltip, file, value, command, {showIf}, {label}, {width}, {domRequired}, {enabled},



내용없음


예제<EDITCONTROL ID="DW_SetTitle"

label="Title: "

tooltip="Document Title"

width="150"

file="Toolbars/MM/EditTitle.htm"/>

<colorpicker>

설명색상 선택기는 사용자가 새 색상을 선택할 때 특정 명령을 실행하는 연관된 텍스트 상자를 가지지 않는 색상 패널입니다. 이 패널은 Dreamweaver 속성 관리자의 색상 선택기와 동일한 모양이며 수행하는 동작도 동일합니다. 다른 아이콘을 지정하여 기본 아이콘을 대체할 수 있습니다.

속성id, tooltip, value, command, {showIf}, {image}, {disabledImage}, {overImage}, {label},

{colorRect}, {file}, {domRequired}, {enabled}, {update}, {arguments}


내용없음



152

예제<colorpicker id="Color_Example"

image="Toolbars/images/colorpickerIcon.gif"

disabledImage="Toolbars/images/colorpickerIconD.gif"

colorRect="0 12 16 16"

tooltip="Text Color"

domRequired="false"

file="Toolbars/mine/colorExample.htm"

update="onSelChange"/>

항목 태그 속성툴바 항목 태그의 속성의 의미는 다음과 같습니다.

id="unique_id"필수입니다. id 속성은 툴바 항목 식별자입니다. id 속성은 현재 파일과 현재 파일에 포함된 모든 파일에서 고유해야 합니다. itemref 태그는 id 항목을 사용하여 항목을 참조하고 이를 툴바에 포함시킵니다.

예제<button id="DW_DocRerefresh" ... >

showIf="script"선택 사항입니다. 이 속성은 스크립트가 true 값을 반환하는 경우에만 해당 항목이 툴바에 나타나도록 지정합니다. 예를 들어, showIf를 사용하면 페이지가 ColdFusion, ASP 및 JSP 등과 같은 서버측 언어로 작성된 경우에만 특정 버튼을 표시할 수 있습니다. showIf를 지정하지 않으면 항목이 항상 표시됩니다.

showIf 속성은 항목의 활성자가 실행될 때마다, 즉 update 속성의 값에 따라 확인됩니다. showIf 속성은 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋습니다.

showIf 속성은 항목을 정의할 때와 itemref 태그에서 항목을 참조할 때 지정할 수 있습니다. 정의 및 참조에 모두 showIf 속성을 지정하면 두 조건이 모두 true인 경우에만 항목이 표시됩니다. showIf 속성은 툴바 명령 파일의 showIf() 함수와 동일합니다. showIf 속성 및 showif() 함수를 모두 지정하면 함수가 속성을 무시합니다.

예제showIf="dw.canLiveDebug()"

image="image_path"이 속성은 버튼, 체크 버튼, 라디오 버튼, 메뉴 버튼 및 콤보 버튼에는 필수입니다. image 속성은 색상 선택기에는 선택 사항이지만 다른 종류의 항목에는 무시됩니다. image 속성은 버튼에 표시되는 아이콘 파일의 경로를 Configuration 폴더에 대해 상대적으로 지정합니다. 아이콘은 Dreamweaver가 렌더링할 수 있는 모든 형식이 가능하지만 보통 GIF 또는 JPEG 파일 형식을 갖습니다.

색상 선택기에 아이콘이 지정된 경우 아이콘이 색상 선택기를 완전히 대체합니다. colorRect 속성이 함께 설정된 경우에는 지정된 사각형 안에서 현재 색상이 아이콘의 위에 나타납니다.

예제image="Toolbars/images/MM/codenav.gif"


153

disabledImage="image_path"선택 사항입니다. Dreamweaver는 버튼, 체크 버튼, 라디오 버튼, 메뉴 버튼, 색상 선택기 및 콤보 버튼 이외의 항목에 대해서는 disabledImage 속성을 무시합니다. 이 속성은 버튼이 비활성화될 경우 Dreamweaver가 표시하는 아이콘 파일의 경로를 Configuration 폴더에 대해 상대적으로 지정합니다. disabledImage 속성을 지정하지 않으면 Dreamweaver는 버튼이 비활성화되어 있을 때 image 속성에 지정된 이미지를 표시합니다.

예제disabledImage="Toolbars/images/MM/codenav_dis.gif"

overImage="image_path"선택 사항입니다. Dreamweaver는 버튼, 체크 버튼, 라디오 버튼, 메뉴 버튼, 색상 선택기 및 콤보 버튼 이외의 항목에 대해서는 overImage 속성을 무시합니다. 이 속성은 사용자가 마우스를 버튼 위로 이동할 경우 Dreamweaver가 표시하는 아이콘 파일의 경로를 Configuration 폴더에 대해 상대적으로 지정합니다. overImage 속성을 지정하지 않으면 사용자가 마우스를 버튼 위로 이동할 때 버튼이 변경되지 않으며 Dreamweaver가 버튼 주위에 그리는 원 모양만 표시됩니다.

예제overImage="Toolbars/images/MM/codenav_ovr.gif"

tooltip="tooltip string"필수입니다. 이 속성은 마우스 포인터가 툴바 항목을 가리킬 때 나타나는 텍스트 또는 도구 설명을 지정합니다.

예제tooltip="Code Navigation"

label="label string"선택 사항입니다. 이 속성은 해당 항목 옆에 표시되는 레이블을 지정합니다. Dreamweaver는 레이블에 콜론을 자동으로 추가하지 않습니다. 버튼이 아닌 항목에 대한 레이블은 해당 항목의 왼쪽에 항상 위치합니다. Dreamweaver는 버튼, 체크 버튼, 라디오 버튼, 메뉴 버튼 및 콤보 버튼의 레이블을 버튼 내부 및 해당 아이콘의 오른쪽에 위치시킵니다.

예제label="Title: "

width="number"선택 사항입니다. 이 속성은 해당 항목의 폭을 픽셀 단위로 지정하여 텍스트 상자, 팝업 메뉴 및 콤보 상자 항목에만 적용합니다. width 속성을 지정하지 않으면 Dreamweaver는 적당한 기본 폭을 사용합니다.

예제width="150"

menuID="menu_id"연관된 명령 파일에 getMenuID() 함수를 지정한 경우만 제외하면, 이 속성은 메뉴 버튼 및 콤보 버튼에 필수적입니다. Dreamweaver는 다른 종류의 항목에 대한 menuID 속성을 무시합니다. 이 속성은 사용자가 버튼, 메뉴 버튼 또는 콤보 버튼을 클릭할 때 표시되는 컨텍스트 메뉴가 포함된 메뉴 막대의 ID를 지정합니다. ID는 menus.xml에 있는 menubar 태그의 ID 속성에서 가져옵니다.

예제menuID="DWCodeNavPopup"


154

colorRect="left top right bottom"이 속성은 이미지 속성을 가지는 색상 선택기에 대한 선택 사항입니다. 다른 종류의 항목 및 이미지를 지정하지 않은 색상 선택기의 경우, colorRect 속성이 무시됩니다. colorRect 속성을 지정하면 Dreamweaver는 색상 선택기에서 현재 선택된 색상을 아이콘의 왼쪽 또는 위쪽에 대해 상대적인 위치에 표시합니다. colorRect 속성을 지정하지 않으면 Dreamweaver는 이미지에 현재 색상을 표시하지 않습니다.

예제colorRect="0 12 16 16"

file="command_file_path"팝업 메뉴와 콤보 상자의 경우 필수입니다. 다른 종류의 항목의 경우, file 속성은 선택 사항입니다. file 속성은 항목을 채우고, 업데이트하고, 실행하는 JavaScript 함수가 포함된 명령 파일의 경로를 Configuration 폴더에 대해 상대적으로 지정합니다. file 속성은 enabled, checked, value, update, domRequired, menuID, showIf 및 command 속성을 무시합니다. 일반적으로 file 속성을 사용하여 명령 파일을 지정하면 Dreamweaver는 태그에 지정된 모든 상응하는 속성을 무시합니다. 명령 파일에 대한 자세한 내용은 156페이지의 “툴바 명령 API 함수”를 참조하십시오.

예제file="Toolbars/MM/EditTitle.htm"

domRequired="true" or "false"선택 사항입니다. 메뉴의 경우와 마찬가지로, domRequired 속성은 Dreamweaver가 관련 명령을 실행하기 전에 [디자인] 뷰와 [코드] 뷰를 동기화할지 여부를 지정합니다. 이 속성을 지정하지 않으면 기본값은 true입니다. 이 속성은 툴바 명령 파일의 isDOMRequired() 함수와 동일한 기능을 수행합니다.

예제domRequired="false"

enabled="script"선택 사항입니다. 메뉴의 경우와 마찬가지로 이 스크립트는 항목의 활성화 여부를 나타내는 값을 반환합니다. 이 속성을 지정하지 않을 경우 해당 항목은 기본적으로 활성화됩니다. enabled 속성은 툴바 명령 파일의 canAcceptCommand() 함수와 동일한 기능을 수행합니다.

예제enabled="dw.getFocus() =='textView' || dw.getFocus() == 'html'"

checked="script"이 속성은 체크 버튼 및 라디오 버튼에 필수입니다. Dreamweaver는 다른 종류의 항목에 대한 checked 속성을 무시합니다. 메뉴의 경우와 마찬가지로 이 스크립트는 항목의 체크 여부를 나타내는 값을 반환합니다. checked 속성은 툴바 명령 파일의 isCommandChecked()와 동일한 기능을 수행합니다. 이 속성을 지정하지 않을 경우 해당 라디오 버튼은 기본적으로 체크되지 않습니다.

예제checked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'code'"


155

value="script"이 속성은 팝업 메뉴, 콤보 상자, 텍스트 상자 및 색상 선택기에는 필수입니다. Dreamweaver는 다른 종류의 항목에 대한 value 속성을 무시합니다.

팝업 메뉴와 콤보 상자에 표시할 값을 결정하기 위해 Dreamweaver는 먼저 메뉴의 각 항목에 대해 isCommandchecked()를 호출합니다. isCommandchecked() 함수가 여러 항목에 true 값을 반환하면 Dreamweaver는 첫 번째 항목에 대해 이 값을 표시합니다. 어떤 항목도 true 값을 반환하지 않거나 isCommandChecked() 함수가 정의되어 있지 않으면 Dreamweaver는 getCurrentValue() 함수를 호출하거나 value 속성이 지정하는 스크립트를 실행합니다. 컨트롤이 콤보 상자인 경우 Dreamweaver는 반환된 값을 표시합니다. 컨트롤이 팝업 메뉴인 경우 Dreamweaver는 반환된 값을 일시적으로 목록에 추가한 다음 이 목록을 표시합니다.

다른 모든 경우에는 표시할 현재 값을 스크립트에서 반환합니다. 팝업 메뉴 또는 콤보 상자의 경우 이 값은 메뉴 목록에 있는 값 중 하나여야 합니다. 콤보 상자 및 텍스트 상자의 경우 이 값은 스크립트가 반환하는 임의의 문자열이 될 수 있습니다. 색상 선택기의 경우 이 값은 유효한 색상이어야 하지만 Dreamweaver에서 다른 값을 반환할 수도 있습니다.

value 속성은 툴바 명령 파일의 getCurrentValue() 함수와 동일한 기능을 수행합니다.

update="update_frequency_list"선택 사항입니다. 이 속성은 enabled, checked, showif 및 value 핸들러가 해당 항목의 화면 표시 상태를 업데이트하도록 실행되는 빈도를 지정합니다. update 속성은 툴바 명령 파일의 getUpdateFrequency() 함수와 동일한 기능을 수행합니다.

툴바 항목은 메뉴 항목과는 달리 항상 표시되므로 업데이트 빈도를 지정해야 합니다. 이러한 이유로, 가능한 가장 낮은 빈도를 선택하여 enabled, checked 및 value 핸들러에 비해 자신의 핸들러가 가능하면 단순하도록 지정하는 것이 좋습니다.

다음 표에는 update_frequency_list에 사용 가능한 핸들러가 낮은 빈도에서 높은 빈도순으로 나열되어 있습니다. update 속성을 지정하지 않으면 업데이트 빈도의 기본값은 onEdit 빈도가 됩니다. 업데이트 빈도를 여러 개 지정하려면 컴마로 구분하면 됩니다. 핸들러는 다음의 지정된 이벤트에서 실행됩니다.

• onServerModelChange는 현재 페이지의 서버 모델이 변경될 때 실행됩니다.

• onCodeViewSyncChange는 [코드] 뷰가 [디자인] 뷰와 동기화되거나 동기화되지 않을 때 실행됩니다.

• onViewChange는 사용자가 [코드] 뷰와 [디자인] 뷰 사이에 포커스를 전환하거나 [코드] 뷰, [디자인] 뷰 또는 [코드 및 디자인] 뷰를 전환할 때마다 실행됩니다.

• onEdit는 [디자인] 뷰에서 문서를 편집할 때마다 실행됩니다. [코드] 뷰에서 변경할 때는 이 이벤트가 트리거되지 않습니다.

• onSelChange는 [디자인] 뷰에서 선택 사항을 변경할 때마다 실행됩니다. [코드] 뷰에서 변경할 때는 이 이벤트가 트리거되지 않습니다.

• onEveryIdle은 응용 프로그램이 다른 작업을 수행하지 않고 대기하고 있을 때 정기적으로 실행됩니다. 이 작업을 수행하려면 enabler/checked/showif/value 핸들러가 자주 실행되므로 시간이 걸릴 수 있습니다. 그러므로 이 핸들러는 특정 시간에 자신의 활성 상태를 변경할 필요가 있는 버튼에 대해서만 사용되어야 하며 핸들러에서 이 이벤트를 빠르게 처리할 수 있어야 합니다.

참고: 이 모든 경우에 Dreamweaver는 실제로 지정된 이벤트가 발생한 후 응용 프로그램이 정지 상태일 때 핸들러를 실행합니다. 이 핸들러는 편집 또는 선택 사항이 변경될 때마다 실행되는 것이 아니라, 편집 또는 선택 사항 변경이 여러 번 발생한 뒤 “얼마 후에” 실행됩니다. 핸들러는 사용자가 툴바 항목을 클릭할 때 반드시 실행됩니다.

예제update="onViewChange"


156

command="script"이 속성은 메뉴 버튼을 제외한 모든 항목에 필수입니다. Dreamweaver는 메뉴 버튼의 command 속성을 무시합니다. 사용자가 다음 중 한 가지 작업을 수행할 때 실행할 JavaScript 함수를 지정합니다.

• 버튼 클릭

• 팝업 메뉴 또는 콤보 상자에서 항목 선택

• 텍스트 상자 또는 콤보 상자에서 Tab 키를 누르거나, Return 키를 누르거나, 다른 부분을 클릭

• 색상 선택기에서 색상 선택

command 속성은 툴바 명령 파일의 receiveArguments() 함수와 동일한 기능을 수행합니다.

예제command="dw.toggleLiveDebug()"

arguments="argument_list" 선택 사항입니다. 이 속성은 툴바 명령 파일의 receiveArguments() 함수에 전달할 인수 목록을 콤마로 구분하여 지정합니다. arguments 속성을 지정하지 않으면 Dreamweaver는 툴바 항목의 ID를 전달합니다. 또한 팝업 메뉴, 콤보 상자, 텍스트 상자 및 색상 선택기는 자신의 현재 값을 arguments 속성에 의해 지정된 모든 인수보다 우선하여 첫 번째 인수로 전달하며, 인수가 지정되지 않은 경우에는 항목 ID보다도 우선하여 전달합니다.

예제[실행 취소] 및 [재실행] 버튼이 포함된 툴바에서 각 버튼은 다음 예제에서와 같이 메뉴 명령 파일인 Edit_Clipboard.htm을 호출하고 액션을 지정하는 인수를 전달합니다.<button id="DW_Undo" image="Toolbars/images/MM/undo.gif"

disabledImage="Toolbars/images/MM/undo_dis.gif" tooltip="Undo"

file="Menus/MM/Edit_Clipboard.htm" arguments="'undo'"

update="onEveryIdle"/>

<button id="DW_Redo" image="Toolbars/images/MM/redo.gif"

disabledImage="Toolbars/images/MM/redo_dis.gif" tooltip="Redo"

file="Menus/MM/Edit_Clipboard.htm" arguments="'redo'"

update="onEveryIdle"/>

툴바 명령 API 함수속성에 스크립트를 지정할 때, 대부분의 경우에는 명령 파일의 JavaScript 함수를 통해서도 속성을 구현할 수 있습니다. 이 액션은 텍스트 상자의 명령 핸들러처럼 함수가 인수를 필요로 하는 경우에 유용합니다. 또한 팝업 메뉴와 콤보 상자의 경우에는 이 방법을 필수적으로 사용해야 합니다.

툴바 항목의 명령 파일 API는 메뉴 명령 파일 API의 확장이므로 메뉴 명령 파일을 툴바 명령 파일처럼 바로 다시 사용할 수 있으며, 툴바에만 포함되어 있는 일부 추가 함수도 사용할 수 있습니다.

canAcceptCommand()



157

설명툴바 항목의 활성화 여부를 판별합니다. 활성 상태가 기본 상태이므로 false를 반환하는 경우가 한 번 이상인 경우에만 이 함수를 정의합니다.

인수팝업 메뉴, 콤보 상자, 텍스트 상자 및 색상 선택기의 경우 첫 번째 인수는 컨트롤 내의 현재 값입니다. getDynamicContent() 함수는 개별 ID를 팝업 메뉴 내의 항목에 선택적으로 첨부할 수 있습니다. 팝업 메뉴 내의 선택된 항목에 첨부된 ID가 있으면 Dreamweaver는 값 대신 해당 ID를 canAcceptCommand()에 전달합니다. 콤보 상자의 경우 텍스트 상자의 현재 내용이 팝업 메뉴의 항목과 일치하지 않으면 Dreamweaver는 텍스트 상자의 내용을 전달합니다. Dreamweaver는 이 내용을 팝업 메뉴와 대/소문자를 구분하지 않고 비교하여 텍스트 상자의 내용이 목록의 항목과 일치하는지 여부를 판별합니다.

toolbars.xml 파일에 있는 이 툴바 항목에 대해 arguments 속성을 지정하면 해당 인수가 그 다음에 전달됩니다. arguments 속성을 지정하지 않으면 Dreamweaver는 항목의 ID를 전달합니다.


예제function canAcceptCommand()

{

return (dw.getDocumentDOM() != null);

}

getCurrentValue()


설명항목에 표시할 현재 값을 반환합니다. Dreamweaver는 팝업 메뉴, 콤보 상자, 텍스트 상자 및 색상 선택기에 대해 getCurrentValue()를 호출합니다. 팝업 메뉴의 경우 현재 값은 메뉴 내의 항목 중 하나여야 합니다. 값이 팝업 메뉴에 없으면 Dreamweaver는 첫 번째 항목을 선택합니다. 콤보 상자 및 텍스트 상자의 경우 이 값은 함수가 반환하는 임의의 문자열이 될 수 있습니다. 색상 선택기의 경우 값은 유효한 색상이어야 하지만 Dreamweaver에서 다른 값을 반환할 수도 있습니다. 이 함수는 value 속성과 동일한 기능을 수행합니다.

인수없음

반환값표시할 현재 값을 포함하는 문자열. 색상 선택기의 경우, 문자열에는 선택된 색상이 RGB 형태로 포함됩니다. 예를 들어, 흰색은 “#FFFFFF” 입니다.

예제function getCurrentValue()

{

var title = "";


if (dom)

title = dom.getTitle();

return title;

}


158

getDynamicContent()


설명이 함수는 팝업 메뉴와 콤보 상자에는 필수입니다. 메뉴의 경우와 마찬가지로 이 함수는 팝업 메뉴 항목으로 사용할 문자열 배열을 반환합니다. 각 문자열은 ";id=id"로 끝낼 수 있으며 이것은 선택 사항입니다. ID가 지정된 경우, Dreamweaver는 메뉴에 나타날 실제 문자열 대신, 해당 ID를 receiveArguments() 함수에 반환합니다.

메뉴의 항목 목록이 고정된 경우에도 이 함수를 사용해야 하므로 getDynamicContent()라는 이름은 잘못된 이름입니다. 예를 들어 Configuration/Menus/MM 폴더의 Text_Size.htm 파일은 동적 메뉴가 아니며, 일련의 정적 메뉴 항목 중 한 항목으로부터 호출되도록 디자인되었습니다. 그러나 사용 가능한 글꼴 크기 목록을 반환하는 getDynamicContent() 함수를 추가하면 툴바 팝업 메뉴에 동일한 명령 파일을 사용할 수 있습니다. 툴바 항목은 반환된 배열의 문자열에서 밑줄을 무시하므로 메뉴 명령 파일을 다시 사용할 수 있습니다. 메뉴 명령 파일에서 메뉴 항목이 동적으로 표시되어 있지 않으므로 Dreamweaver는 getDynamicContent() 함수를 무시합니다.

인수없음

반환값메뉴 항목에 사용될 문자열 배열

예제function getDynamicContent()

{

var items = new Array;

var filename = dw.getConfigurationPath() + "/Toolbars/MM/AddressList.xml";

var location = MMNotes.localURLToFilePath(filename);

if (DWfile.exists(location))

{

var addressData = DWfile.read(location);

var addressDOM = dw.getDocumentDOM(dw.getConfigurationPath() +

'/Shared/MM/Cache/empty.htm');

addressDOM.documentElement.outerHTML = addressData;

var addressNodes = addressDOM.getElementsByTagName("url");

if (addressNodes.length)

{

for (var i=0; i < addressNodes.length ; i++ )

{

items[i] = addressNodes[i].address + ";id='" +

addressNodes[i].address + "'";

}

}

}

return items;

getMenuID()


설명메뉴 버튼에 대해서만 유효합니다. Dreamweaver는 getMenuID() 함수를 호출하여 사용자가 이 버튼을 클릭할 때 나타나는 메뉴의 ID를 얻습니다.


159

인수없음

반환값Dreamweaver는 menus.xml에 정의된 메뉴 ID가 포함된 문자열을 예측합니다.

예제function getMenuID()

{


var menuID = '';

if (dom)

{

var view = dom.getView();

var focus = dw.getFocus();

if (view == 'design')

{

menuID = 'DWDesignOnlyOptionsPopup';

}

else if (view == 'split')

{

if (focus == 'textView')

{

menuID = 'DWSplitCodeOptionsPopup';

}

else

{

menuID = 'DWSplitDesignOptionsPopup';

}

}

else if (view == 'code')

{

menuID = 'DWCodeOnlyOptionsPopup';

}

else

{

menuID = 'DWBrowseOptionsPopup';

}

}

return menuID;

}

getUpdateFrequency()


설명항목의 화면 표시 상태를 업데이트하기 위해 enabled, checked, showIf 및 value 속성에 대한 핸들러를 실행하는 빈도를 지정합니다.

툴바 항목은 메뉴와는 달리 항상 표시되므로 업데이트 빈도를 지정해야 합니다. 이러한 이유로, 되도록이면 가장 낮은 빈도를 항상 선택하여 enabled, checked 및 value 핸들러를 가능하면 단순하게 지정해야 합니다.

이 함수는 툴바 항목의 update 속성과 동일한 기능을 수행합니다.

인수없음


160

반환값콤마로 구분된 업데이트 핸들러 목록을 포함하는 문자열. 사용 가능한 업데이트 핸들러의 전체 목록은 155페이지의 “update="update_frequency_list"”를 참조하십시오.

예제function getUpdateFrequency()

{

return onSelChange”;

}

isCommandChecked()


설명항목의 선택 여부를 지정하는 값을 반환합니다. 버튼의 경우 체크된 상태는 버튼이 올라오거나 눌러진 것으로 나타남을 의미합니다. isCommandChecked() 함수는 툴바 항목 태그의 checked 속성과 동일한 기능을 수행합니다.

인수팝업 메뉴, 콤보 상자, 텍스트 상자 및 색상 선택기의 경우 첫 번째 인수는 컨트롤 내의 현재 값입니다. getDynamicContent() 함수는 개별 ID를 팝업 메뉴 내의 항목에 선택적으로 첨부할 수 있습니다. 메뉴의 선택된 항목에 ID가 첨부되었으면 Dreamweaver는 isCommandChecked() 함수에 값 대신, 이 ID를 전달합니다. 콤보 상자의 경우 텍스트 상자의 현재 내용이 팝업 메뉴의 항목과 일치하지 않으면 Dreamweaver는 텍스트 상자의 내용을 전달합니다. 텍스트 상자가 일치하는지 여부를 확인하기 위해 Dreamweaver는 메뉴와 대/소문자 구분 없이 비교합니다.

arguments 속성을 지정하면 해당 인수가 그 다음에 전달됩니다. arguments 속성을 지정하지 않으면 Dreamweaver는 항목의 ID를 전달합니다.


예제다음 예제에서는 단락 서식 및 CSS 스타일 팝업 메뉴에 항목이 있는 경우, 선택되어야 할 항목을 결정합니다.function isCommandChecked()

{

var bChecked = false;

var style = arguments[0];

var textFormat = dw.getDocumentDOM().getTextFormat();

if (dw.getDocumentDOM() == null)

bChecked = false;

if (style == "(None)")

bChecked = (dw.cssStylePalette.getSelectedStyle() == '' || textFormat ==

"" || textFormat == "P" || textFormat == "PRE");

else if (style == "Heading 1")

bChecked =0(textFormat == "h1");












161

else

bChecked = (dw.cssStylePalette.getSelectedStyle() == style);

return bChecked;

}

isDOMRequired()


설명툴바 명령이 유효한 DOM을 필요로 하는지 여부를 지정합니다. 이 함수가 true를 반환하거나 함수가 정의되어 있지 않으면 Dreamweaver는 명령이 유효한 DOM이 필요로 한다고 가정하여 관련 명령을 실행하기 전에 문서의 [코드] 뷰와 [디자인] 뷰를 동기화합니다. 이 함수는 툴바 항목 태그의 domRequired 속성과 동일한 기능을 수행합니다.

인수없음


예제function isDOMRequired()

{

return false;

}

receiveArguments()


설명툴바 항목에서 전달된 모든 인수를 처리합니다. receiveArguments() 함수는 툴바 항목 태그의 command 속성과 동일한 기능을 수행합니다.

인수팝업 메뉴, 콤보 상자, 텍스트 상자 및 색상 선택기의 경우 첫 번째 인수는 컨트롤 내의 현재 값입니다. getDynamicContent() 함수는 개별 ID를 팝업 메뉴 내의 항목에 선택적으로 첨부할 수 있습니다. 팝업 메뉴의 선택된 항목에 ID가 첨부되었으면 Dreamweaver는 receiveArguments() 함수에 값 대신, 이 ID를 전달합니다. 콤보 상자의 경우 텍스트 상자의 현재 내용이 팝업 메뉴의 항목과 일치하지 않으면 Dreamweaver는 텍스트 상자의 내용을 전달합니다. 텍스트 상자가 일치하는지 여부를 판별하기 위해 Dreamweaver는 메뉴와 대/소문자 구분 없이 비교합니다.

arguments 속성을 지정하면 해당 인수가 그 다음에 전달됩니다. arguments 속성을 지정하지 않으면 Dreamweaver는 항목의 ID를 전달합니다.

반환값없음

예제function receiveArguments(newTitle)

{


if (dom)

dom.setTitle(newTitle);

}


162

showIf()


설명함수가 true를 반환하는 경우에만 툴바에 항목이 나타나도록 지정합니다. 예를 들어, showIf() 함수를 사용하면 페이지에 특정 서버 모델이 있는 경우에만 특정 버튼이 나타나도록 할 수 있습니다. showif()가 정의되어 있지 않으면 항목이 항상 나타납니다. showIf() 함수는 툴바 항목 태그의 showIf 속성과 동일한 기능을 수행합니다.

해당 항목의 활성자가 실행될 때마다, 즉 getUpdateFrequency() 함수가 반환하는 값에 따라 showIf() 함수가 호출됩니다.

인수없음


예제function showif()

{

var retval = false;


if(dom)

{

var view = dom.getView();

if(view == ‘design’)

{

retval = true;

}

}

return retval;

}

163

12장: 보고서

Adobe Dreamweaver CS3에서는 사이트 보고서와 독립적 보고서라는 두 가지 유형의 보고서를 지원합니다.

사이트 보고서보고서 API를 사용하여 사용자 정의 사이트 보고서를 만들거나 Dreamweaver와 함께 제공되는 미리 작성된 보고서 세트를 수정할 수 있습니다. 사이트 보고서에 액세스하는 유일한 방법은 [보고서] 대화 상자를 사용하는 것입니다.

사이트 보고서는 Dreamweaver Configuration/Reports 폴더에 있습니다. Reports 폴더에는 보고서 범주를 나타내는 하위 폴더가 있습니다. 각 보고서는 한 범주에만 속할 수 있습니다. 범주 이름은 31자를 초과할 수 없습니다. 각 하위 폴더에는 _foldername.txt라는 파일이 포함될 수 있습니다. 이 파일이 있으면 Dreamweaver에서는 이 파일의 내용을 범주 이름으로 사용합니다. _foldername.txt 파일이 없으면 Dreamweaver에서는 해당 폴더 이름을 범주 이름으로 사용합니다.

사용자가 [보고서] 대화 상자에서 여러 개의 사이트 보고서를 선택하면 Dreamweaver에서는 모든 결과를 [결과] 패널의 [사이트 보고서] 탭 아래의 결과 윈도우에 표시하며 사용자가 다음에 사이트 보고서를 실행할 때 이 결과를 대체합니다.

다음 표에는 사이트 보고서를 만들 때 사용하는 파일에 대해 설명합니다.

사이트 보고서의 작동 방식1 보고서는 [사이트] > [보고서] 명령을 통해 액세스할 수 있습니다. 이 명령을 선택하면 선택한 대상에 대해 실행할 보고서를 선택할 수 있는 대화 상자가 표시됩니다.

2 [검색 대상:] 팝업 메뉴를 사용하여 선택한 보고서를 실행할 파일을 선택합니다. 이 메뉴에는 [현재 문서], [현재 로컬 사이트 전체], [사이트에서 파일 선택] 및 [폴더] 명령이 있습니다. [폴더] 명령을 선택하면 [탐색] 버튼과 텍스트 필드가 나타나므로 폴더를 선택할 수 있습니다.

3 [설정] 버튼을 클릭하고 매개 변수의 값을 입력하여 매개 변수가 있는 보고서를 사용자 정의할 수 있습니다. 사용자가 보고서 매개 변수를 직접 설정하려면 보고서에는 [설정] 대화 상자가 있어야만 합니다. 이 대화 상자는 선택적이며, 모든 보고서에서 보고서 매개 변수를 설정할 필요는 없습니다. 보고서에 [설정] 대화 상자가 없는 경우 목록에서 보고서를 선택하면 [설정] 버튼이 흐리게 표시됩니다.

4 보고서를 선택하고 설정을 지정한 다음 [실행] 버튼을 클릭합니다.

참고: 보고서에 preventFileActivity 핸들러가 있으면 Dreamweaver에서 사용자는 해당 보고서가 실행되는 동안에 다른 파일 작업을 수행할 수 없습니다.

이 시점에서 Dreamweaver는 [결과] 패널의 [사이트 보고서] 탭에 있는 모든 항목을 제거합니다. Dreamweaver는 보고 프로세스를 시작하기 전에 각 보고서에서 beginReporting() 함수를 호출합니다. 이 함수에서 보고서가 false 값을 반환하면 해당 보고서는 보고서 실행에서 제외됩니다.

5 각 파일이 processFile() 함수를 사용하여 [보고서] 대화 상자에서 선택한 각 보고서에 전달됩니다. 보고서에서 결과 목록에 이 파일에 대한 정보를 포함해야 하는 경우에는 dw.resultsPalette.siteReports.addResultItem() 함수를 호출해야 합니다. 이 과정은 사용자의 선택 영역과 관련된 파일이 모두 처리되거나 사용자가 윈도우 아래쪽에 있는 [중단] 버튼을 클릭할 때까지 계속됩니다. Dreamweaver에서는 처리 중인 각 파일의 이름과 처리해야 할 파일의 수를 표시합니다.

6 모든 파일이 처리되고, 보고 프로세스가 완료된 후에는 Dreamweaver가 각 보고서에서 endReporting() 함수를 호출합니다.


Configuration/Reports/{type/} 보고서 이름.js 보고서의 내용을 생성하는 함수가 들어 있습니다.

Configuration/Reports/{type/} 보고서 이름.htm 해당 JavaScript 파일을 호출합니다. 필요하면 보고서에 대한 [설정] 대화 상자의 UI(사용자 인터페이스)를 정의합니다.

Configuration/Reports/ Reports.js 보고서 생성에 사용되는 일반 함수를 제공합니다.


164

간단한 사이트 보고서 예제이 간단한 Extension 예제에서는 특정 파일, 전체 사이트, 선택한 파일 또는 폴더에서 참조되는 모든 이미지를 나열하며 [사이트 결과]탭 아래의 [결과] 윈도우에 보고서를 표시합니다.


• 164페이지의 “보고서 정의 만들기”


이 예제에서는 HTML 보고서 폴더에 두 개의 파일, 즉 보고서 정의가 포함된 List images.htm과 이 보고서에 고유한 JavaScript 코드가 포함된 List Images.js를 만듭니다. 그 밖에도, Dreamweaver에 포함된 Reports.js 파일을 참조합니다.

보고서 정의 만들기보고서 정의에서는 [보고서] 대화 상자에 나타나는 보고서 이름을 지정하고 필요한 모든 JavaScript 파일을 호출하며, 필요하면 [설정] 대화 상자의 UI를 정의합니다.

보고서 정의를 만들려면:1 Configuration/Reports/HTML Reports/List images.htm 파일을 만듭니다.

2 다음 내용을 추가하여 HTML 페이지의 제목에 있는 [보고서] 대화 상자에 나타날 보고서 이름을 지정합니다.<html>

<head>

<title>List Images</title>

3 파일의 끝 부분에 script 태그를 추가하고 src 속성에 Reports.js 파일을 지정합니다.<script src="../Reports.js"></script>

4 파일의 끝 부분에 다른 script 태그를 추가하고 src 속성에 다음에 만들게 될 List Images.js 파일을 지정합니다.<html>

<head>

<title>List Images</title>

<script src="../Reports.js"></script>

<script src="List Images.js"></script>

5 head 태그를 닫고 열기 및 닫기 body 태그를 포함하고 html 태그를 닫습니다.</head>

<body>

</body>

</html>

6 파일을 Configuration/Reports/HTML Reports 폴더에 List Images.js라는 이름으로 저장합니다.

JavaScript 코드 작성Dreamweaver에는 Reports.js 파일이 들어 있습니다. Reports.js에 있는 함수는 무엇이든 호출할 수 있지만, 사용자 정의 사이트 보고서에 고유한 모든 함수가 포함된 JavaScript 파일도 만들어야 합니다.

JavaScript 파일을 만들려면:1 다음 내용이 들어 있는 Configuration/Reports/HTML Reports/List Images.js 파일을 만듭니다.// 함수: configureSettings

// 설명: 기본값을 초기화하고 로드하는 데 사용되는

// 기본값입니다. UI를 초기화하지 않습니다.//

function configureSettings() {

return false;

}

// 함수: processFile

// 설명: 파일을 처리하는 동안 호출되는 보고서 명령 API입니다.//


165

function processFile (fileURL) {

if (!isHTMLType(fileURL)) //파일이 HTML 파일이 아닌 경우

return; //건너뜁니다.

var curDOM = dw.getDocumentDOM(fileURL); // DOM에 대한 변수

var tagList = curDOM.getElementsByTagName('img'); // img 태그에 대한 변수

var imgfilename; // img 태그에 지정된 파일 이름에 대한 변수

for (var i=0; i < tagList.length; i++) { // img 태그 목록에 해당됨

imgfilename = tagList[i].getAttribute('src'); // 이미지 파일 이름 가져오기

if (imgfilename != null) { // 파일 이름이 지정된 경우

// 해당되는 아이콘과 HTML 파일 이름,

// 이미지 파일 이름과 행 번호 인쇄

reportItem(REP_ITEM_CUSTOM, fileURL, imgfilename,

curDOM.nodeToSourceViewOffsets(tagList[i])); }

}

}

2 파일을 Configuration/Reports/HTML Reports폴더에 List Images.js라는 이름으로 저장합니다.

독립적 보고서결과 윈도우 API를 사용하여 독립적 보고서를 만들 수 있습니다. 독립적 보고서는 보고서 API 대신 결과 윈도우 API를 직접 사용하는 일반 명령입니다. 독립적 보고서는 다른 명령과 마찬가지로 메뉴 또는 다른 명령을 통해 액세스할 수 있습니다.

독립적 보고서는 Dreamweaver Configuration/Commands 폴더에 있습니다. 독립적 보고서에 대한 사용자 정의 명령은 [명령] 메뉴에 나타납니다.

Dreamweaver에서는 사용자가 독립적 보고서를 실행할 때마다 새 결과 윈도우를 만듭니다.

독립적 보고서 작동 방식1 사용자 정의 명령은 보고서를 생성하기 위해 만드는 명령으로서, dw.createResultsWindow() 함수를 호출하고 반환된 결과 객체를 윈도우 변수에 저장하여 새 결과 윈도우를 엽니다. 이 프로세스의 나머지 함수는 이 객체의 메서드로 호출해야 합니다.

2 사용자 정의 명령은 setTitle()과 SetColumnWidths() 함수를 결과 윈도우 객체의 메서드로 호출하여 결과 윈도우의 제목 및 서식을 초기화합니다.

3 이 명령은 addItem() 함수를 호출하여 즉시 결과 윈도우에 항목을 추가하기 시작할 수도 있고, setFileList()와 startProcessing() 함수를 결과 윈도우 객체의 메서드로 호출하여 파일 목록의 반복 처리를 시작할 수도 있습니다.

4 이 명령이 resWin.startProcessing()을 호출하면 Dreamweaver는 목록에 있는 각 파일 URL에 대해 processFile() 함수를 호출합니다. 독립형 명령에는 processFile() 함수를 정의합니다. 이 함수는 파일 URL을 유일한 인수로 받습니다. Dreamweaver가 일부 다른 명령에서 processFile() 함수를 호출하도록 하려면 결과 윈도우 객체의 setCallbackCommands() 함수를 사용합니다.

5 addItem() 함수를 호출하려면 processFile() 함수가 독립형 명령에 의해 작성된 결과 윈도우에 액세스해야 합니다. processFile() 함수는 결과 윈도우 객체의 stopProcessing() 함수를 호출하여 파일 목록의 처리를 중단할 수도 있습니다.


Configuration/Commands 명령 이름.htm 사용자가 명령을 선택할 때 나타나는 대화 상자에 대한 UI를 정의하며, 보고서 생성에 필요한 작업을 수행하는 JavaScript 코드나 JavaScript 파일에 대한 참조가 들어 있습니다.

Configuration/Commands 명령 이름.js 결과 윈도우를 생성하며 이 윈도우 안에 보고서를 넣습니다.


166

간단한 독립적 보고서 예제간단한 독립적 보고서 Extension은 특정 파일에서 참조되는 모든 이미지의 목록을 포함하고 있으며 결과 윈도우에 보고서를 표시합니다.


1 166페이지의 “대화 상자 UI 만들기”

2 166페이지의 “JavaScript 코드 작성하기”

이 예제에서는 Configuration/Commands 폴더에 두 개의 파일, 즉 사용자 정의 명령을 선택할 때 나타나는 대화 상자의 UI를 정의하는 List images.htm 파일과, 이 보고서에 고유한 JavaScript 코드가 들어 있는 Listimages.js 파일을 만듭니다.

대화 상자 UI 만들기HTML 파일의 body 섹션은 사용자 정의 명령을 선택할 때 나타나는 대화 상자의 내용을 지정하고 필요한 모든 JavaScript 파일을 호출합니다.

HTML 파일을 만들려면:1 Configuration/Commands/Listimages.htm 파일을 만듭니다.

2 Listimages.htm 파일에 다음 내용을 입력합니다.<html>

<head>

<title>Standalone report example</title>

<script src=”Listimages.js”>

</script>

</head>

<body>

<div name="test">

<form name="myForm">

<table>

<tr>

<td>Click OK to display the standalone report.</td>

</tr>

</table>

</form>

</div>

</body>

3 이 파일을 Configuration/Commands 폴더에 Listimages.htm이라는 이름으로 저장합니다.

JavaScript 코드 작성하기이번에는 독립적 보고서에 고유한 모든 함수가 포함된 JavaScript 파일을 만듭니다.

JavaScript 파일을 만들려면:1 Configuration/Commands 폴더에 다음 코드가 들어 있는 Listimages.js 파일을 만듭니다.function stdaloneresultwin()

{

var curDOM = dw.getDocumentDOM("document");

var tagList = curDOM.getElementsByTagName('img');

var imgfilename;

var iOffset = 0;

var iLineNumber = 0;

var resWin = dw.createResultsWindow("Images in File", ["Line", "Image"]);

for (var i=0; i < tagList.length; i++)

{

// 소스 파일의 이름을 가져옵니다.


167

imgfilename = tagList[i].getAttribute('src');

// 문자 오프셋을 파일의 시작 부분에서

// img 태그의 시작 부분으로 가져옵니다.iOffset = curDOM.nodeToOffsets(curDOM.images[i]);

// 오프셋에 기초하여 파일에서 어느 행에

// imag 태그가 있는지 알아냅니다.iLineNumber = curDOM.getLineFromOffset(iOffset[0]);

// src 속성에서 파일 이름을 지정하는 한,if (imgfilename != null)

{ // 행 번호와 이미지 경로를 표시합니다.resWin.addItem(resWin, "0", "Images in Current File", null, ¬

null, null, [iLineNumber, imgfilename]);

}

}

return;

}

// 대화 상자에 버튼을 추가합니다.function commandButtons()

{

return new Array("OK", "stdaloneresultwin()", "Cancel", "window.close()");

}

2 파일을 Configuration/Commands 폴더에 Listimages.js라는 이름으로 저장합니다.

보고서 API 함수보고서 API에 필요한 유일한 함수는 processFile() 함수입니다. 다른 모든 함수는 선택 사항입니다.

processFile()

지원 버전Dreamweaver 4

설명이 함수는 처리할 파일이 있을 때 호출됩니다. 보고 명령은 파일을 수정하지 않고 처리해야 하며, dw.ResultsPalette. SiteReports() 함수, addResultItem() 함수 또는 resWin.addItem() 함수를 사용하여 파일에 대한 정보를 반환해야 합니다. 처리가 끝나면 Dreamweaver는 각 파일의 DOM을 자동으로 해제합니다.

인수strFilePath

strFilePath 인수는 처리할 파일의 전체 경로와 파일 이름입니다.

반환값없음


168

beginReporting()


설명이 함수는 보고가 실행되기 전에 보고 과정이 시작될 때 호출됩니다. 보고 명령이 이 함수에서 false를 반환하면 해당 보고 명령은 보고서 실행에서 제외됩니다.

인수target

target 인수는 보고 세션의 대상을 나타내는 문자열입니다. 사용할 수 있는 값은 "CurrentDoc", "CurrentSite", "CurrentSiteSelection"(사이트의 선택된 파일에 사용) 또는 "Folder:+ 사용자가 선택한 폴더의 경로"(예: "Folder:c:temp")입니다.

반환값Dreamweaver에 부울 값이 반환되며, 보고 실행에 성공했으면 true가 target이 보고 실행으로부터 제외되었으면 false가 반환됩니다.

endReporting()


설명이 함수는 보고 과정이 끝날 때 호출됩니다.

인수없음

반환값없음

commandButtons()


설명[옵션] 대화 상자의 오른쪽에 표시할 버튼과 이 버튼을 클릭할 때 발생하는 비헤이비어를 정의합니다. 이 함수가 정의되어 있지 않으면 버튼이 나타나지 않으며 보고서 파일의 body 섹션이 확장되어 대화 상자 전체를 채웁니다.

인수없음

반환값짝수의 요소가 포함된 배열이 반환됩니다. 첫 번째 요소는 맨 위 버튼의 레이블이 포함된 문자열입니다. 두 번째 요소는 맨 위 버튼을 클릭할 때 발생하는 비헤이비어를 정의하는 JavaScript 코드의 문자열입니다. 나머지 요소는 동일한 방법으로 추가 버튼을 정의합니다.

예제commandButtons() 함수의 다음 인스턴스는 [확인], [취소] 및 [도움말] 버튼을 정의합니다.function commandButtons(){


"window.close()" , "Help" , "showHelp()");

}


169

configureSettings()


설명이 보고서가 선택될 때 [보고서] 대화 상자의 [보고서 설정] 버튼을 활성화할지 여부를 결정합니다.

인수없음

반환값Dreamweaver에 부울 값이 반환되며, [보고서 설정] 버튼이 활성화되어야 하는 경우 true, 그렇지 않으면 false가 반환됩니다.

windowDimensions()




인수platform

platform 인수의 값은 사용자의 플랫폼에 따라 "macintosh" 또는 "windows"입니다.



예제windowDimensions() 함수의 다음 인스턴스는 [매개 변수] 대화 상자의 크기를 648 x 520픽셀로 설정합니다.function windowDimensions(){

return "648,520";

}

170

13장: 태그 라이브러리 및 편집기

Adobe Dreamweaver CS3 사용자는 태그 편집기를 사용하여 새 태그를 삽입하고 기존 태그를 편집하며 태그에 관한 참조 정보에 액세스할 수 있습니다. Dreamweaver에는 HTML, ASP.NET, CFML, JRun, JSP 등의 언어를 사용할 수 있는 편집기가 함께 제공됩니다. Dreamweaver에서 제공하는 태그 편집기를 사용자 정의할 수 있으며 새로운 태그 편집기를 만들 수 있습니다. 또한 태그 라이브러리에 새 태그를 추가할 수도 있습니다.

태그 선택기는 태그 라이브러리에 저장된 정보를 사용하여 Dreamweaver 사용자가 사용 가능한 태그를 확인할 수 있도록 하고 그러한 태그를 선택하여 활성 문서에서 사용할 수 있도록 해줍니다.

Dreamweaver는 모든 태그 속성을 포함한 각 태그의 정보를 Configuration/TagLibraries 폴더의 하위 폴더 집합에 저장합니다. 태그 편집기 및 태그 선택기에서는 태그를 조작 및 편집할 때 이 폴더에 저장된 정보를 사용합니다. 사용자 정의 태그 편집기를 만들기 전에 태그 라이브러리 구조에 대해 알고 있는 것이 좋습니다.

다음 표는 태그 라이브러리를 만들 때 사용하는 파일을 보여 줍니다.


Configuration/TagLibraries/ TagLibraries.vtm 설치된 태그를 모두 나열합니다.

Configuration/TagLibraries/언어/ 태그.vtm 태그 속성, 태그에 닫기 태그가 있는지 여부 및 형식 규칙 등과 같은 태그 정보가 포함되어 있습니다.

Configuration/TagLibraries/언어/ 태그 이미지 파일.gif 속성 관리자에 표시할 선택적 파일입니다.


171

태그 라이브러리 파일 형식태그 라이브러리는 설치된 태그를 모두 보여 주는 단일 루트 파일인 TagLibraries.vtm 파일과 태그 라이브러리에 있는 각 태그에 대한 .vtm(VTML) 파일로 구성됩니다. TagLibraries.vtm 파일은 내용을 담고 있는 표의 역할을 하며 각 태그의 VTML 파일에 대한 포인터를 가집니다. 다음 그림은 Dreamweaver가 마크업 언어를 사용하여 VTML 파일을 구성하는 방법을 보여 줍니다.

Adobe의 Macromedia HomeSite 사용자는 VTML 파일 구조를 파악할 수는 있지만, Dreamweaver는 HomeSite와 동일한 방법으로 VTML 파일을 사용하지 않습니다. 가장 중요한 차이점은 Dreamweaver에는 Extension 사용자 인터페이스(UI)를 표시하는 고유의 HTML 렌더러가 있으므로 GUI 렌더링 프로세스에 Dreamweaver VTML 파일이 사용되지 않는다는 점입니다.

다음 예제에서는 TagLibraries.vtm 파일의 구조를 보여 줍니다.<taglibraries><taglibrary name="Name of tag library" doctypes="HTML,ASP-JS,ASP-VB" tagchooser="relative

path to TagChooser.xml file" id="DWTagLibrary_html"><tagref name="tag name" file="relative path to tag .vtm file"/>

</taglibrary>

<taglibrary name="CFML Tags" doctypes="ColdFusion" servermodel="Cold Fusion"tagchooser="cfml/TagChooser.xml" id="DWTagLibrary_cfml"><tagref name="cfabort" file="cfml/cfabort.vtm"/>

</taglibrary>

<taglibrary name="ASP.NET Tags" doctypes="ASP.NET_CSharp,ASP.NET_VB" servermodel="ASPNet"prefix="<asp:" tagchooser="ASPNet/TagChooser.xml" id="DWTagLibrary_aspnet"><tagref name="dataset" file="aspnet/dataset.vtm" prefix="<mm:dataset"/>

</taglibrary> </taglibraries>

taglibrary 태그는 하나 이상의 태그를 태그 라이브러리로 그룹화합니다. 태그를 가져오거나 새로운 태그 집합을 만들 때 이러한 태그를 태그 라이브러리로 그룹화할 수 있습니다. 일반적으로, taglibrary 그룹은 JSP(JavaServer Page) TLD 파일, XML DTD(문서 형식 정의) 파일, ASP.NET 네임스페이스 또는 일부 다른 논리 그룹에 정의되어 있는 일련의 태그에 해당됩니다.


172

다음 표에는 taglibrary 속성이 나열되어 있습니다.

다음 표에서는 tagref 속성에 대해 설명합니다.

tagref.prefix 속성은 taglibrary.prefix를 무시할 수 있으므로 두 속성 간의 관계에 혼란이 일어날 수 있습니다. 다음 표에서는 taglibrary.prefix 속성과 tagref.prefix 속성 간의 관계에 대해 설명합니다.

태그를 정의하기 위해 Dreamweaver는 VTML 파일 형식의 수정된 버전을 사용합니다. 다음 예제에서는 Dreamweaver MX가 개별 태그를 정의하기 위해 사용해야 하는 모든 요소를 보여 줍니다.<tag name="input" bind="value" casesensitive="no" endtag="no">

<tagformat indentcontents="yes" formatcontents="yes" nlbeforetag nlbeforecontents=0

nlaftercontents=0 nlaftertag=1 />

<tagdialog file = "input.HTM"/>

<attributes>

<attrib name="name"/>

<attrib name="wrap" type="Enumerated">

<attriboption value="off"/>

<attriboption value="soft"/>

속성 설명 필수/선택 사항

taglibary.name 이 속성은 UI의 태그 라이브러리를 참조하는 데 사용됩니다. 필수

taglibrary.doctypes 이 라이브러리가 활성화되어 있는 문서 유형을 나타냅니다. 라이브러리가 활성화되어 있으면 [코드 힌트] 메뉴에 라이브러리 태그가 나타납니다. 이름이 충돌할 수 있으므로 모든 태그 라이브러리가 동시에 활성화될 수는 없습니다. 예를 들어, HTML 파일과 WML 파일은 함께 사용되지 않습니다.

필수

taglibrary.prefix 이 속성이 지정되어 있으면 태그 라이브러리 내의 태그는 taglibrary. prefix + tagref.name 형식을 가집니다. 예를 들어, taglibrary. prefix가 "<jrun:"이고 tagref.name이 "if"이면 해당 태그의 형식은 "<jrun:if"입니다. 특정 태그에서는 이 형식이 무시되기도 합니다.

선택 사항

taglibrary.servermodel 태그 라이브러리의 태그가 응용 프로그램 서버에서 실행되는 경우, servermodel은 태그의 서버 모델을 확인합니다. 해당 태그가 서버측 태그가 아니라 클라이언트측 태그이면 servermodel 속성은 생략됩니다. 또한 servermodel 속성은 대상 브라우저 확인에 사용됩니다.

선택 사항

taglibrary.id 파일에 있는 다른 태그 라이브러리의 taglibrary.ID 속성과는 다른 문자열일 수 있습니다. Extension 관리자는 ID 속성을 사용하므로 MXP 파일은 새 taglibrary 및 tags 파일을 TagLibraries.vtm 파일에 삽입할 수 있습니다.

선택 사항

taglibrary.tagchooser 이 태그 라이브러리와 관련된 TagChooser.xml 파일에 대한 상대적인 파일 경로입니다.

선택 사항


tagref.name 이 속성은 UI의 태그를 참조하는 데 사용됩니다. 필수

tagref.prefix 태그가 [코드] 뷰에 나타나는 방식을 지정합니다. tagref.prefix를 사용하면 현재 태그의 접두어가 판별됩니다. 이 속성이 정의되면 taglibrary.prefix 속성에 대해 지정된 값이 무시됩니다.

선택 사항

tagref.file 태그에 대한 VTML 파일을 참조합니다. 선택 사항

taglibrary.prefix 정의 여부 tagref.prefix 정의 여부 생성되는 태그 접두어

아니오 아니오 '<' + tagref.name

예 아니오 taglibrary.prefix + tagref.name

아니오 예 tagref.prefix

예 예 tagref.prefix


173

<attriboption value="hard"/>

/attrib>

<attrib name="onFocus" casesensitive="yes"/>

<event name="onFocus"/>

</attributes>

</tag>

다음 표에서는 태그를 정의하는 속성에 대해 설명합니다.

참고: Dreamweaver MX보다 이전 버전의 Dreamweaver에서는 태그 정보가 Configuration/TagAttributeList.txt 파일에 저장됩니다.


tag.bind [데이터 바인딩] 패널에서 사용됩니다. 이 형식의 태그를 선택하면 bind 속성은 데이터 바인딩에 대한 기본 속성을 나타냅니다.

선택 사항

tag.casesensitive 태그 이름이 대/소문자를 구분할지 여부를 지정합니다. 태그가 대소문자를 구분하면 이 태그는 태그 라이브러리가 지정하는 예를 정확히 사용하여 사용자의 문서에 삽입됩니다. 태그가 대/소문자를 구분하지 않으면 [환경 설정] 대화 상자의 [코드 서식] 탭에 지정된 기본 대/소문자를 사용하는 태그가 삽입됩니다. casesensitive 속성이 생략되면 태그가 대/소문자를 구분하지 않는 것으로 간주됩니다.

선택 사항

tag.endtag 이 속성은 태그가 열기 및 닫기 태그를 모두 가지고 있는지 여부를 지정합니다. 예를 들어, input 태그는 닫기 태그를 가지고 있지 않으므로 일치하는 /input 태그가 없습니다. 닫기 태그가 선택 사항인 경우에는 ENDTAG 속성을 Yes로 설정해야 합니다. xml을 지정하여 빈 태그에 XML 구문을 적용합니다( 예: <tag name="foo" endtag="xml" tagtype="empty"> inserts <foo/>).

선택 사항

tagformat 태그의 서식 규칙을 지정합니다. Dreamweaver MX보다 이전 버전의 Dreamweaver에서는 이러한 규칙이 SourceFormat.txt에 저장되었습니다.

선택 사항

tagformat.indentcontents 이 태그의 내용을 들여쓸지 여부를 지정합니다. 선택 사항

tagformat.formatcontents 이 태그의 내용을 파싱할지 여부를 지정합니다. 이 속성은 태그 내용이 HTML 이외의 형식인 SCRIPT 및 STYLE 등과 같은 태그에 대해 No로 설정됩니다.

선택 사항

tagformat.nlbeforetag 이 태그 앞에 개행 문자를 입력할지 여부를 지정합니다. 값 0은 아니오를, 값 1은 예를 나타냅니다.

선택 사항

tagformat.nlbeforecontents 이 태그의 내용 앞에 삽입할 개행 문자의 개수입니다. 선택 사항

tagformat.nlaftercontents 이 태그의 내용 뒤에 삽입할 개행 문자의 개수입니다. 선택 사항

tagformat.nlaftertag 이 태그 뒤에 개행 문자를 입력할지 여부를 지정합니다. 값 0은 아니오를, 값 1은 예를 나타냅니다.

선택 사항

attrib.name 소스 코드에 표시되는 속성의 이름입니다. 필수

attrib.type 이 속성이 생략되면 attrib.type은 "text"입니다. 다음 값을 사용할 수 있습니다.TEXT—사용자 정의 텍스트 내용 ENUMERATED—열거된 값 목록 COLOR—색상 값(이름 또는 16진수 값) FONT—글꼴 이름 또는 글꼴군 STYLE—CSS 스타일 속성 CSSSTYLE—CSS 클래스 이름CSSID—CSS 클래스 IDFILEPATH—전체 파일 경로 DIRECTORY—폴더 경로 FILENAME—파일 이름에만 해당 RELATIVEPATH—상대적 경로 FLAG—값을 포함하지 않는 ON/OFF 속성

선택 사항

attrib.casesensitive 속성 이름이 대/소문자를 구분할지 여부를 지정합니다. CASESENSITIVE 속성이 없으면 속성 이름은 대/소문자를 구분하지 않습니다.

선택 사항


174

태그 선택기태그 선택기는 자주 사용하는 태그에 쉽게 액세스할 수 있도록 태그를 기능별 그룹으로 나누어 볼 수 있도록 해줍니다. 태그 선택기에 태그 또는 일련의 태그를 추가하려면 추가할 태그를 태그 라이브러리에 추가해야 합니다. [태그 라이브러리 편집기] 대화 상자를 사용하거나 MXP 파일로 패키지화된 Dreamweaver Extension을 설치하여 이 작업을 수행할 수 있습니다.

TagChooser.xml 파일TagChooser.xml 파일은 태그 선택기에 나타나는 태그 그룹을 구성하기 위한 메타데이터를 제공합니다. Dreamweaver에서 제공하는 각 태그는 기능 그룹에 저장되며 태그 선택기에서 사용할 수 있습니다. TagChooser.xml 파일을 편집하여 새 태그를 그룹화하고 기존 태그를 다시 그룹화할 수 있습니다. 하위 범주를 만들어서 태그를 사용자에 맞도록 구성하는 방식을 사용자 정의하여 가장 중요한 태그에 손쉽게 액세스할 수 있습니다.

TagLibraries.vtm 파일은 TagChooser.xml 파일을 가리키는 taglibrary.tagchooser 속성의 사용을 지원합니다. 기존 TagChooser.xml 파일을 변경하거나 새 파일을 만드는 경우, taglibrary.tagchooser 속성은 태그 선택기가 제 기능을 충분히 발휘할 수 있도록 올바른 위치를 가리켜야 합니다.

taglibrary.tagchooser 속성이 없으면 태그 선택기는 TagLibraries.vtm 파일에 있는 트리 구조를 표시합니다.

TagChooser.xml 파일은 Configuration/TagLibraries/TagLibraryName 폴더에 저장됩니다. 다음 예제에서는 TagChooser.xml 파일의 구조를 보여 줍니다.<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>

<tclibrary name="라이브러리 노드 이름" desc='통합 참조

설명' reference="Language[,Topic[,Subtopic]]">

<category name="범주 노드 이름" desc='통합 참조

설명' reference="Language[,Topic[,Subtopic]]" id="고유 id">

<category name="하위 범주 노드 이름" ICON="상대적 경로"

desc='통합 참조 설명' reference="Language,Topic[,Subtopic]"

id="고유 id">

<element name="목록 항목 이름" value='시각적 대화 상자 편집기에

전달할 값' desc='통합 참조 설명'

reference="Language[,Topic[,Subtopic]]" id="고유 id"/>

... 목록 뷰에 요소가 더 표시됨 ...

</category>

... 하위 범주 더 포함됨 ...

</category>

... 범주 더 포함됨 ...

</tclibrary>

다음 표에서는 TagChooser.xml 파일에서 사용할 수 있는 태그에 대해 설명합니다.

태그 설명 필수/선택 사항

tclibrary 이 태그는 태그 라이브러리의 태그 선택기 구조를 캡슐화하는 가장 바깥쪽 태그입니다.

필수

tclibrary.name 트리 보기 노드에 나타나는 값입니다. 필수

tclibrary.desc [태그 선택기] 대화 상자의 [태그 정보] 섹션에 나타나는 HTML 문자열 값입니다. desc 속성이 없으면 [태그 정보]에 대한 정보는 [참조] 패널에서 가져옵니다. tclibrary.reference와 상호 교환할 수 있습니다.

선택 사항desc와 reference는 함께 사용할 수 없습니다.

tclibrary.reference [태그 선택기] 대화 상자의 [태그 정보] 섹션에 표시할 언어, 항목 및 하위 항목을 설명하는 값입니다. tclibrary.desc와 상호 교환할 수 있습니다.



175

category 태그는 다음 표에 나타나 있는 것처럼 tclibrary 노드 아래에 있는 모든 노드를 트리 뷰에 표시합니다.

다음 표에서는 삽입할 태그를 나타내는 element 태그의 속성이 나열되어 있습니다.

간단한 새 태그 편집기 만들기 예제이 단원의 예제에서는 날씨 데이터베이스에서 현재 온도를 추출하기 위해 작성된 가상의 ColdFusion 태그인 cfweather를 사용하여 새 태그 편집기를 만드는 데 필요한 단계를 설명합니다.

cfweather 태그의 속성에 대해 다음 표에서 설명합니다.

다음 단계를 따라 새 태그 편집기를 만듭니다.

• 176페이지의 “태그 라이브러리에 태그 등록”

• 176페이지의 “태그 정의(VTML) 파일 만들기”

• 177페이지의 “태그 편집기 UI 만들기”

• 178페이지의 “태그 선택기에 태그 추가”

태그 설명 필수/선택 사항

category.name 트리 보기 노드에 나타나는 값입니다. 필수

category.desc [태그 선택기] 대화 상자의 [태그 정보] 섹션에 나타나는 HTML 문자열 값입니다. desc 속성과 reference 속성을 모두 지정하지 않으면 [태그 정보] 섹션에 아무 것도 나타나지 않습니다.


category.reference [태그 정보] 섹션에 표시할 언어, 항목 및 하위 항목을 설명하는 값입니다. 선택 사항. desc와 reference는 함께 사용할 수 없습니다.

category.icon GIF 아이콘에 대한 상대 경로 값입니다. 선택 사항

category.id 이 파일에 있는 다른 범주의 category.id 속성과는 다른 문자열입니다. 필수


element.name 목록 보기 항목으로 나타나는 값입니다. 필수

element.value 화면에 표시되는 대화 상자에 전달되는 코드나 매개 변수에 직접 배치되는 값입니다.

필수

element.desc HTML 문자열 값이며 통합된 [참조] 패널에 나타납니다. 이 속성을 지정하지 않으면 reference 속성은 통합된 [참조] 패널에 참조 내용을 표시합니다.


element.reference 콤마로 구분된 세 개의 문자열로, 각각 언어, 항목 및 하위 항목에 대해 설명합니다. 이 정보는 [참조] 패널에 나타납니다. 첫 번째 문자열은 필수입니다. 두 번째 문자열은 element 태그에만 필수이고 category 및 tclibrary 태그에는 선택 사항입니다. 세 번째 문자열은 선택 사항입니다.


element.id 이 파일에 있는 다른 요소의 element.id 속성과는 다른 문자열입니다. 선택 사항

속성 설명

zip 다섯 자리 숫자로 구성된 우편 번호

tempaturescale 온도 조절(섭씨 또는 화씨)


176

태그 라이브러리에 태그 등록Dreamweaver가 새 태그를 인식하도록 하려면 Configuration/TagLibraries 폴더에 있는 TagLibraries.vtm 파일에서 이 태그를 식별해야 합니다. 그러나 사용자가 다중 사용자 플랫폼(예: Windows XP, Windows 2000, Windows NT 또는 Mac OS X)에 있으면 사용자는 다른 사용자의 Configuration 폴더에 TagLibraries.vtm을 하나 더 가지게 됩니다. 이 파일은 Dreamweaver가 검색하고 파싱하는 인스턴스이므로 업데이트되어야 합니다.


Windows 2000과 Windows XP 플랫폼의 경우 Configuration 폴더의 위치는 다음과 같습니다.<드라이브>:\Documents and Settings\<사용자 이름>\Application Data\Adobe\¬Dreamweaver 9\Configuration


Mac OS X 플랫폼의 경우 Configuration 폴더의 위치는 다음과 같습니다.<드라이브>:Users:<사용자 이름>:Library:Application Support:Adobe:¬Dreamweaver 9:Configuration

Dreamweaver가 사용자의 Configuration 폴더에서 TagLibraries.vtm 파일을 찾을 수 없으면 Dreamweaver Configuration 폴더에서 그 파일을 찾습니다.

참고: 다중 사용자 플랫폼에서 Dreamweaver Configuration 폴더에는 있지만 사용자의 Configuration 폴더에는 없는 TagLibraries.vtm의 복사본을 편집하는 경우, Dreamweaver는 Dreamweaver Configuration 폴더가 아니라 사용자의 Configuration 폴더에 있는 TagLibraries.vtm의 복사본을 파싱하므로 변경 내용을 알 수 없습니다.

cfweather 태그는 ColdFusion 태그이므로 cfweather 태그를 등록하는 데 사용할 수 있는 적절한 태그 라이브러리 그룹이 이미 존재합니다.

태그를 등록하려면:1 TagLibraries.vtm 파일을 텍스트 편집기에서 엽니다.2 기존 태그 라이브러리를 스크롤하여 CFML 태그 taglibrary 그룹을 찾습니다. 3 다음 예제에 나타나 있는 것처럼 새 태그 참조 요소를 추가합니다.<tagref name="cfweather" file="cfml/cfweather.vtm"/>

4 파일을 저장합니다.이 태그는 이제 태그 라이브러리에 등록되었으며 cfweather.vtm 태그 정의 파일에 대한 파일 포인터를 가집니다.

태그 정의(VTML) 파일 만들기사용자가 태그 선택기 또는 태그 편집기를 사용하여 등록된 태그를 선택하면 Dreamweaver는 태그 정의에 해당하는 VTML 파일을 찾습니다.

태그 정의 파일을 만들려면:1 텍스트 편집기에서 다음 내용을 포함하는 파일을 만듭니다.<TAG NAME="cfweather" endtag="no">

<TAGFORMAT NLBEFORETAG="1" NLAFTERTAG="1"/><TAGDIALOG FILE="cfweather.htm"/>

<ATTRIBUTES><ATTRIB NAME="zip" TYPE="TEXT"/><ATTRIB NAME="tempaturescale" TYPE="ENUMERATED">

<ATTRIBOPTION VALUE="Celsius"/><ATTRIBOPTION VALUE="Fahrenheit"/>

</ATTRIB></ATTRIBUTES>

</TAG>

2 Configuration/Taglibraries/CFML 폴더에 cfweather.vtm 파일을 저장합니다. Dreamweaver에서 태그 정의 파일을 사용하면 cfweather 태그에 대해 코드 힌트, 코드 완료 및 태그 서식 지정 기능을 수행할 수 있습니다.


177

태그 편집기 UI 만들기

cfweather 태그 편집기 사용자 인터페이스를 만들려면1 cfweather.htm 파일을 Configuration/Taglibraries/CFML 폴더에 저장합니다.<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">

<html>

<head>

<title>CFWEATHER</title>

<script src="../../Shared/Common/Scripts/dwscripts.js"></script>

<script src="../../Shared/Common/Scripts/ListControlClass.js"></script>

<script src="../../Shared/Common/Scripts/tagDialogsCmn.js"></script>

<script>

/************************* 전역 변수 **************************/

var TEMPATURESCALELIST; // tempaurelist 컨트롤(initializeUI()에서 초기화됨)

var theUIObjects; // 일반 API 함수에서 사용하는 UI 객체 배열

/****************************************************************/

// 정의된 inspectTag() API 함수(모든 태그 편집기에 필요함)function inspectTag(tagNodeObj)

{

// tagDialogCmns.js에 정의된 inspectTagCommon의 일반 라이브러리

// 버전으로 호출(tagDialogCmns.js 포함 여부 확인)

// 이 함수에 대한 자세한 내용은 tagDialogCmn.js에서

// inspectTagCommon에 대한 주석을 참조하십시오.tagDialog.inspectTagCommon(tagNodeObj, theUIObjects);

}

function applyTag(tagNodeObj)

{

// tagDialogCmns.js에 정의된 applyTagCommon의 일반 라이브러리

// 버전으로 호출(tagDialogCmns.js 포함 여부 확인)

// 이 함수에 대한 자세한 내용은 tagDialogCmn.js에서

// applyTagCommon에 대한 주석을 참조하십시오.tagDialog.applyTagCommon(tagNodeObj, theUIObjects);

}

function initializeUI()

{

// 값에 대한 두 개의 배열 정의 및 목록 컨트롤에 캡션 표시var theTempatureScaleCap = new Array("celsius","fahrenheit");

var theTempatureScaleVal = new Array("celsius","fahrenheit");

// 새 목록 컨트롤 인스턴스화TEMPATURESCALELIST = new ListControl("thetempaturescale");

// UI 객체에 tempaturescalelist 드롭다운 목록 컨트롤 추가theUIObjects0= new Array(TEMPATURESCALELIST);

// tagDialogCmn.js에 정의된 일반 populateDropDownList 함수를 호출하여

// tempaturescale 목록 컨트롤 채우기tagDialog.populateDropDownList(TEMPATURESCALELIST, theTempatureScaleCap,

theTempatureScaleVal, 1);

}

</script>

</head>

<body onLoad="initializeUI()">

<div name="General">

<table border="0" cellspacing="4">


178

<tr>

<td valign="baseline" align="right" nowrap="nowrap">Zip Code: </td>

<td nowrap="nowrap">

<input type="text" id="attr:cfargument:zip" name="thezip" attname="zip"

style="width:100px"0/>

</td>

</tr>

<tr>

<td valign="baseline" align="right" nowrap="nowrap">Type: </td>

<td nowrap="nowrap">

<select name="thetempaturescale" id="attr:cfargument:tempaturescale"

attname="tempaturescale" editable="false" style="width:200px">

</select>

</td>

</tr>

</table>

</div>

</body>

</html>

2 다음 단계를 수행하여 태그 편집기가 작업 중인지 확인합니다.aDreamweaver 시작 b[코드] 뷰에 cfweather를 입력합니다.c태그를 마우스 오른쪽 버튼으로 클릭합니다.d[컨텍스트] 메뉴에서 [태그 편집] cfweather를 선택합니다. 태그 편집기가 실행되면 성공적으로 만들어진 것입니다.

태그 선택기에 태그 추가

태그 선택기에 cfweather 태그를 추가하려면:1 다음 예제에서와 같이 cfweather 태그와 동일한 기능을 수행하는 [타사 태그]라는 새 범주를 추가하여 Configuration/ Taglibraries/CFML 폴더의 TagChooser.xml 파일을 수정합니다. <category name="Third Party Tags" icon="icons/Elements.gif" reference='CFML'>

<element name="cfweather" value='cfweather zip="" temperaturescale="fahrenheit">' />

</category>

참고: 다중 사용자 플랫폼에서 tagchooser.xml 파일은 사용자의 Configuration 폴더에도 존재합니다. 다중 사용자 플랫폼에 대한 자세한 내용은 176페이지의 “태그 라이브러리에 태그 등록”에 있는 설명을 참조하십시오.

2 다음 단계를 수행하여 태그 선택기에 현재 cfweather 태그가 나타나는지 확인합니다.

a [삽입] > [태그]를 선택합니다.

b CFML 태그 그룹을 확장합니다.

c 태그 선택기 아래쪽에 나타나 있는 [타사 태그] 그룹을 선택합니다. cfweather 태그가 오른쪽의 목록 상자에 나타납니다.

d cfweather를 선택하고 [삽입] 버튼을 클릭합니다.

태그 편집기가 나타납니다.


179

태그 편집기 API 함수새 태그 편집기를 만들려면 inspectTag(), validateTag() 및 applyTag() 함수를 구현해야 합니다. 구현 예제를 보려면 177페이지의 “태그 편집기 UI 만들기”를 참조하십시오.

inspectTag()


설명이 함수는 태그 편집기가 처음 나타날 때 호출됩니다. 이 함수는 사용자가 편집하고 있는 태그를 인수로 받으며 이 태그는 dom 객체로 표현됩니다. 이 함수는 편집하고 있는 태그에서 속성 값을 추출하며 이 값을 사용하여 태그 편집기에서 양식 요소를 초기화합니다.

인수tag

• tag 인수는 편집된 태그의 DOM 노드입니다.

반환값없음

예제사용자가 다음 태그를 편집한다고 가정해 보십시오.<crfweather zip = "94065"/>

편집기에 zip 속성을 편집하기 위한 텍스트 필드가 포함되어 있으면 함수는 사용자가 빈 필드가 아니라 텍스트 필드의 실제 우편 번호를 볼 수 있도록 양식 요소를 초기화해야 합니다.

다음 코드는 초기화를 수행합니다.function inspectTag(tag)

{

document.forms[0].zip.value = tag.zip

}

validateTag()


설명사용자가 트리 컨트롤에서 임의의 노드를 클릭하거나 [확인]을 클릭하면 이 함수는 현재 표시된 HTML 양식 요소에 입력 유효성 검사를 수행합니다.

인수없음

반환값부울 값이 반환되며, HTML 양식 요소에 대한 입력이 올바르면 true를 반환하고 그렇지 않으면 false를 반환합니다.

예제사용자가 표를 만들 때 표의 행 수에 음의 정수가 입력됩니다. 그러면 validateTag() 함수는 잘못된 입력을 감지하고 경고 메시지를 표시한 다음 false 값을 반환합니다.


180

applyTag()


설명사용자가 [확인]을 클릭하면 Dreamweaver는 validateTag() 함수를 호출합니다. validateTag() 함수가 true 값을 반환하면 Dreamweaver는 이 함수를 호출하고 현재 편집 중인 태그를 나타내는 dom 객체를 전달합니다. 이 함수는 해당 양식 요소의 값을 읽어 dom 객체에 씁니다.

인수tag

• tag 인수는 편집 중인 태그의 DOM 노드입니다.

반환값없음

예제다음 코드에서도 cfweather 예제가 계속 사용됩니다. 사용자가 우편 번호를 94065에서 53402로 변경한 경우, 새 우편 번호가 사용되도록 사용자의 문서를 업데이트하려면 dom 객체도 업데이트되어야 합니다.function applyTag(tag)

{

tag.zip = document.forms[0].zip.value

}

181

14장: 속성 관리자

속성 관리자는 Adobe Dreamweaver CS3 인터페이스에서 가장 익숙한 부동 패널일 것입니다. 선택한 요소의 내부 및 외부 편집기를 실행할 뿐만 아니라 선택 대상의 이름, 크기, 모양 및 기타 속성을 정의하고, 검토하며, 변경하는 데 필수적인 패널입니다.

Dreamweaver에서는 속성 관리자에 대한 여러 가지 내장 인터페이스를 제공하므로 다양한 표준 HTML 태그의 속성을 설정하는 데 사용할 수 있습니다. 이러한 내장 관리자는 핵심적인 Dreamweaver 코드의 일부이므로 내장 관리자에 대한 해당 속성 관리자 파일은 Configuration 폴더에서 찾을 수 없습니다. 그러나 사용자 정의 속성 관리자 파일은 이러한 내장 인터페이스를 무시하도록 하거나 새 인터페이스를 만들어 사용자 정의 태그를 관리하도록 해줍니다. 사용자 정의 속성 관리자 파일은 Dreamweaver 응용 프로그램 폴더 내 Configuration/Inspectors 폴더에 있습니다.

다음 표는 속성 관리자를 만들 때 사용하는 파일을 보여줍니다.

속성 관리자 파일속성 관리자 HTML 파일에는 다음 예제에서와 같이 열기 HTML 태그 바로 앞에 주석(및 doctype 주석)이 있어야 합니다.

<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine5.0//pi">

이 주석에는 다음 요소가 포함되어 있습니다.• serverModel 요소는 지정된 서버 모델이 활성 상태일 때만 이 속성 관리자가 로드되도록 지정합니다.• tagNameOrKeyword 요소는 관리할 태그이거나 *COMMENT*(주석), *LOCKED*(잠긴 영역), *ASP*(ASP 태그) 키워드 중 하나입니다.

• 1to10 요소는 속성 관리자 파일의 우선 순위입니다. 1은 선택 영역을 관리할 수 있는 관리자가 없는 경우에만 이 관리자가 사용된다는 의미이고, 10은 선택 영역을 관리할 수 있는 다른 모든 관리자보다 이 관리자가 우선적으로 사용된다는 의미입니다.

• exactOrWithin 요소는 선택 영역이 태그 내에 있을 수 있는지(within) 또는 태그를 정확히 포함해야 하는지(exact) 여부를 나타냅니다.

• hline 요소(선택 사항)는 확장 모드에서 관리자의 상단과 하단 사이에 회색의 수평선이 표시된다는 것을 나타냅니다. • vline 요소(선택 사항)는 태그 이름 필드와 관리자의 나머지 속성 사이에 회색의 수직선이 표시된다는 것을 나타냅니다.• serverModel 요소(선택 사항)는 속성 관리자의 서버 모델을 나타냅니다. 속성 관리자의 서버 모델이 문서의 서버 모델과 다르면 Dreamweaver는 현재 선택 영역의 속성을 표시하기 위해 속성 관리자를 사용하지 않습니다. 예를 들어, 문서의 서버 모델이 Adobe ColdFusion인데 속성 관리자의 서버 모델은 ASP일 경우 문서의 선택 영역에 대해 해당 속성 관리자가 사용되지 않습니다.

다음은 happy 태그를 관리하도록 디자인된 관리자에게 적합한 주석입니다.

경우에 따라, 다음 예제에 표시된 대로 태그 주석 바로 앞에 다음 행을 삽입하여, 사용하는 Extension이 이전 버전의 렌더링 엔진이 아니라 Dreamweaver Extension 렌더링만 사용하도록 지정할 수 있습니다.

속성 관리자 파일의 body 섹션에는 HTML 양식이 있습니다. Dreamweaver는 그러나 대화 상자에 양식 내용을 표시하는 대신 이 양식을 이용하여 속성 관리자의 입력 영역 및 레이아웃을 정의합니다.속성 관리자 파일의 head 섹션에는 JavaScript 함수나 JavaScript 파일에 대한 참조가 있습니다.


Configuration/Inspectors/ 속성 관리자 이름.htm 속성 관리자의 사용자 인터페이스(UI)를 정의합니다.

Configuration/Inspectors/ 속성 관리자 이름.js 속성 관리자에 필요한 함수가 들어 있습니다.

Configuration/Inspectors/ 태그 이미지 파일.gif 속성 관리자에 표시할 선택적 파일입니다.

182

속성 관리자 파일 작동 방식Dreamweaver는 시작할 때 Configuration/Inspectors 폴더에 있는 HTM 및 HTML 파일의 첫 번째 행을 읽어 속성 관리자의 유형, 우선 순위 및 선택 유형을 정의하는 주석 문자열을 검색합니다. 이러한 주석이 첫째 줄에 없는 파일은 무시됩니다.

사용자가 Dreamweaver에서 어떤 대상을 선택하거나 삽입 포인터를 다른 위치로 이동하면 다음과 같은 이벤트가 발생합니다.

1 Dreamweaver는 선택 유형이 within인 관리자를 검색합니다.

2 within 관리자가 있는 경우 Dreamweaver는 현재 선택한 태그에서 문서 트리를 검색하여 선택 영역 주위의 태그에 대한 관리자가 있는지 확인합니다. within 관리자가 없는 경우 Dreamweaver는 선택 유형이 exact인 관리자를 검색합니다.

3 관리자가 하나 이상 포함된 첫 번째 태그의 경우, Dreamweaver는 각 관리자의 canInspectSelection() 함수를 호출합니다. 이 함수가 false를 반환하면 Dreamweaver는 해당 관리자가 선택 영역을 관리하지 않는 것으로 간주합니다.

4 canInspectSelection() 함수를 호출한 후 잠재적인 관리자가 두 개 이상 남아 있으면 Dreamweaver는 남아 있는 관리자를 우선 순위에 따라 정렬합니다.

5 우선 순위가 같은 잠재적인 관리자가 둘 이상 있으면 Dreamweaver는 이름의 알파벳순으로 관리자를 선택합니다.

6 선택한 관리자는 속성 관리자 부동 패널에 나타납니다. 속성 관리자 파일에 displayHelp() 함수가 정의되어 있으면 작은 물음표(?) 아이콘이 관리자의 오른쪽 위에 나타납니다.

7 Dreamweaver는 inspectSelection() 함수를 호출하여 현재 선택 영역에 대한 정보를 수집하고 관리자 필드를 채웁니다.

8 속성 관리자 인터페이스에서 필드에 이벤트 핸들러가 첨부된 경우 사용자가 여기에 도달하면 해당 핸들러가 실행됩니다. 예를 들어, setAttribute() 함수를 호출하여 사용자가 입력한 값에 속성을 설정하는 onBlur 이벤트가 있을 수 있습니다.

간단한 속성 관리자 예제다음 속성 관리자는 Microsoft Internet Explorer에서만 사용할 수 있는 marquee 태그를 관리합니다. 이 예에서는 속성 관리자에서 direction 속성의 값을 설정합니다. marquee 태그의 다른 속성 값을 설정하려면 이 예를 모델로 사용하십시오.


• 182페이지의 “사용자 인터페이스 만들기”


• 184페이지의 “이미지 만들기”

• 185페이지의 “속성 관리자 테스트”

사용자 인터페이스 만들기속성 관리자에 표시되는, 양식이 포함된 HTML 파일을 만듭니다.

사용자 인터페이스를 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음과 같이 속성 관리자를 식별하는 주석을 파일의 첫 번째 행으로 추가합니다.

3 문서 제목과 만들려는 JavaScript 파일을 지정하려면 주석 뒤에 다음을 추가합니다.<HTML>

<HEAD>

<TITLE>Marquee Inspector</TITLE>

<SCRIPT src="marquee.js"></SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

183

4 속성 관리자에 나타나는 내용을 지정하려면 열기 및 닫기 body 태그 사이에 다음을 추가합니다.

<SPAN ID="image" STYLE="position:absolute; width:23px; height:17px; ¬

z-index:16; left: 3px; top: 2px">

<IMG SRC="marquee.png" WIDTH="36" HEIGHT="36" NAME="marqueeImage">

</SPAN>

<SPAN ID="label" STYLE="position:absolute; width:23px; height:17px; ¬

z-index:16; left: 44px; top: 5px">Marquee</SPAN>



<SPAN ID="topLayer" STYLE="position:absolute; z-index:1; left: 125px; ¬

top: 3px; width: 431px; height: 32px">

<FORM NAME="topLayerForm">

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">

<TR>

<TD VALIGN="baseline" ALIGN="right">Direction:</TD>

<TD VALIGN="baseline" ALIGN="right">

<SELECT NAME="marqDirection" STYLE="width:86"

onChange="setMarqueeTag()">

<OPTION VALUE="left">Left</OPTION>

<OPTION VALUE="right">Right</OPTION>

</SELECT>

</TR>

</TABLE>

</FORM>

</SPAN>

5 이 파일을 Configuration/Inspectors 폴더에 marquee.htm으로 저장합니다.

JavaScript 코드 작성선택 영역을 관리하고 속성 관리자에서 적합한 값을 입력할 수 있으려면 JavaScript 함수를 추가해야 합니다.

JavaScript 코드를 작성하려면:1 비어 있는 새 파일을 만듭니다.

2 선택 영역에 marquee 태그가 포함되어 있을 때마다 속성 관리자가 나타나도록 지정하려면 다음 함수를 추가합니다.function canInspectSelection(){

return true;

}

3 텍스트 필드에 나타나는 direction 속성의 값을 새로 고치려면 파일 끝에 다음 함수를 추가합니다.function inspectSelection(){

// 현재 문서의 DOM을 가져옵니다.var theDOM = dw.getDocumentDOM();

// 선택된 노드를 가져옵니다. var theObj = theDOM.getSelectedNode();

// MARQUEE 태그의 DIRECTION 속성 값을 가져옵니다. var theDirection = theObj.getAttribute('direction');

// DIRECTION 속성에 대한 변수를 -1로 초기화합니다.

// 속성의 값에 해당하는 메뉴 인덱스를 저장하는 데

// 사용됩니다.// var typeIndex = -1;

var directionIndex = -1;


184

// DIRECTION 속성이 있는 경우,if (theDirection){

// DIRECTION 값이 "left"인 경우, typeIndex를 0으로 설정합니다.if (theDirection.toLowerCase() == "left"){

directionIndex = 0;

// DIRECTION 값이 "right"인 경우, typeIndex를 1로 설정합니다.}else if (theDirection.toLowerCase() == "right"){

directionIndex = 1;

}

}

// DIRECTION 속성의 값이 "left" 또는

// "right"인 경우 인터페이스의 팝업 메뉴에서

// 해당 옵션을 선택합니다.if (directionIndex != -1){

document.topLayer.document.topLayerForm.marqDirection.selectedIndex =¬

directionIndex;

}

}

4 현재 선택 영역을 가져온 다음, 속성 관리자의 텍스트 상자에 direction 속성값이 표시되도록 하려면 파일 끝에 다음 함수를 추가합니다.function setMarqueeTag(){

// 현재 문서의 DOM을 가져옵니다.var theDOM = dw.getDocumentDOM();

// 선택된 노드를 가져옵니다.var theObj = theDOM.getSelectedNode();

// 인터페이스의 팝업 메뉴에서 선택된 옵션의 인덱스를

// 가져옵니다.var directionIndex = ¬

document.topLayer.document.topLayerForm.marqDirection.selectedIndex;

// 인터페이스의 팝업 메뉴에서 선택된 옵션의 값을

// 가져옵니다.var theDirection = ¬

document.topLayer.document.topLayerForm.marqDirection.¬

options[directionIndex].value;

// direction 속성의 값을 theDirection으로 설정합니다.theObj.setAttribute('direction',theDirection);

}

5 이 파일을 Configuration/Inspectors 폴더에 marquee.js로 저장합니다.

이미지 만들기선택적으로 속성 관리자에 나타날 이미지를 만들 수 있습니다.

이미지를 만들려면:1 폭과 높이가 각각 36픽셀인 이미지를 만듭니다.

2 이 이미지를 Configuration/Inspectors 폴더에 marquee.gif로 저장합니다.

일반적으로 속성 관리자 이미지는 Dreamweaver에서 지원하는 형식으로 저장할 수 있습니다.


185

속성 관리자 테스트끝으로 속성 관리자를 테스트할 수 있습니다.

속성 관리자를 테스트하려면:1 Dreamweaver를 다시 시작합니다.

2 새 HTML 페이지를 만들거나 기존 HTML 페이지를 엽니다.

3 페이지의 body 섹션에 다음을 추가합니다.<MARQUEE></MARQUEE>

4 방금 추가한 텍스트를 강조 표시합니다.

marquee 태그에 대해 만든 속성 관리자가 나타납니다.

5 속성 관리자에서 direction 속성의 값을 입력합니다.

페이지의 태그가 direction 속성과 속성 관리자에서 입력한 값을 포함하도록 변경됩니다.

속성 관리자 API 함수두 개의 속성 관리자 API 함수(canInspectSelection()과 inspectSelection())는 필수입니다.

canInspectSelection()

설명속성 관리자가 현재 선택 영역에 적합한지 판별합니다.

인수없음

참고: 현재 선택 영역을 JavaScript 객체로 가져오려면 dom.getSelectedNode()를 사용합니다. dom.getSelectedNode()에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

반환값부울 값이 반환되며, 관리자가 현재 선택 영역을 관리할 수 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

예제선택 영역에 CLASSID 속성이 포함되어 있고 이 속성의 값이 "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"(Adobe Flash Player의 클래스 ID)이면 canInspectSelection() 함수의 다음 인스턴스는 true를 반환합니다.function canInspectSelection(){3

var theDOM = dw.getDocumentDOM();

var theObj = theDOM.getSelectedNode();

return (theObj.nodeType == Node.ELEMENT_NODE && ¬ theObj.hasAttribute("classid") && ¬

theObj.getAttribute("classid").toLowerCase()== ¬

"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000");

}


186

displayHelp()

설명이 함수가 정의된 경우에는 물음표(?) 아이콘이 속성 관리자의 오른쪽 위에 나타납니다. 사용자가 아이콘을 클릭하면 이 함수가 호출됩니다.

인수없음

반환값없음

예제displayHelp() 함수의 다음 예제는 브라우저 윈도우에서 파일을 엽니다. 이 파일은 속성 관리자의 필드에 대해 설명합니다.function displayHelp(){

dw.browseDocument(‘http://www.hooha.com/dw/inspectors/inspHelp.html’);

}

inspectSelection()

설명현재 선택 영역의 속성을 기반으로 입력 필드의 내용을 새로 고칩니다.

인수maxOrMin

• 속성 관리자가 확장된 상태인지 축소된 상태인지에 따라 maxOrMin 인수는 max 또는 min이 됩니다.

반환값없음

예제inspectSelection() 함수의 다음 예제는 content 속성의 값을 가져온 다음 이 값을 사용하여 keywords라는 양식 필드를 채웁니다.function inspectSelection(){

var dom = dreamweaver.getDocumentDOM();

var theObj = dom.getSelectedNode();

document.forms[0].keywords.value = theObj.getAttribute("content");

}

http://www.hooha.com/dw/inspectors/inspHelp.html%E2%80%99%00%00

187

15장: 부동 패널

속성 관리자의 크기 및 레이아웃 제한 없이도 모든 종류의 부동 패널이나 관리자를 만들 수 있습니다.

현재 선택 항목에 대한 속성을 설정하기 위해서는 사용자 정의 속성 관리자를 가장 먼저 선택해야 하지만, 사용자 정의 부동 패널을 사용하면 보다 넓은 공간 및 융통성을 확보할 수 있어 전체 문서 또는 여러 선택 항목에 대한 정보를 표시할 수 있습니다.

사용자 정의 부동 패널 파일은 Adobe Dreamweaver CS3 응용 프로그램 폴더 내의 Configuration/Floaters 폴더에 있는 HTML 파일입니다. 부동 패널 파일의 body에는 HTML 양식이 포함됩니다. 양식 요소에 첨부된 이벤트 핸들러는 현재 문서에 대한 임의 편집을 수행하는 JavaScript 코드를 호출할 수 있습니다.

Dreamweaver는 [윈도우] 메뉴에서 액세스할 수 있는 여러 개의 내장 부동 패널을 가집니다. 이러한 내장 패널은 Dreamweaver의 핵심 코드이기 때문에 Configuration/Floaters 폴더에는 해당 부동 패널 파일이 들어 있지 않습니다.

사용자 정의 패널을 만들어 [윈도우] 메뉴에 추가할 수 있습니다. 메뉴 시스템에 항목을 추가하는 작업에 대한 자세한 내용은 118페이지의 “메뉴 및 메뉴 명령”을 참조하십시오.

다음 표는 부동 패널을 만들 때 사용하는 파일을 보여 줍니다.

부동 패널 파일의 작동사용자 정의 부동 패널은 Dreamweaver에 내장된 부동 패널과 같은 방식으로 이동하거나, 크기를 조절하거나, 탭을 지정할 수 있습니다. 사용자 정의 부동 패널은 다음 방식에 있어서 내장 부동 패널과 다릅니다.

• 사용자 정의 부동 패널은 기본적으로 회색으로 표시됩니다. bgcolor 속성을 body 태그에 설정하는 것은 아무 효과가 없습니다.

• 모든 사용자 정의 부동 패널은 부동 패널 환경 설정의 [기타 모든 이동 팔레트] 설정에 따라 항상 [문서] 윈도우의 맨 위에 배치되거나, 비활성 상태인 경우에는 문서 윈도우 뒤에 배치됩니다.

부동 패널 파일은 다른 확장 파일과는 약간 다릅니다. Dreamweaver는 다른 확장 파일과는 달리, Dreamweaver를 마지막으로 종료할 때 부동 패널이 표시된 경우에만 시작할 때 부동 패널 파일을 메모리에 로드합니다. Dreamweaver 종료 시 부동 패널이 보이지 않는 경우, 이 패널을 정의하는 파일이 함수 dreamweaver.getFloaterVisibility(), dreamweaver. setFloaterVisibility() 또는 dreamweaver.toggleFloater() 중 하나에서 참조될 때에만 로드되는 것입니다. 이 함수에 대한 자세한 내용은 Dreamweaver API 참조 설명서를 참조하십시오.

Configuration 폴더에 있는 파일 중 하나가 dw.getFloaterVisibility(floaterName), dw.setFloaterVisibility (floaterName) 또는 dw.toggleFloater(floaterName) 함수를 호출하면 다음 이벤트가 발생합니다.

1 floaterName이 예약된 부동 패널 이름 중 하나가 아니면 Dreamweaver는 Configuration/Floaters폴더에서 floaterName.htm이라는 파일을 검색합니다. 예약된 부동 패널 이름의 전체 목록을 보려면 Dreamweaver API 참조 설명서에서 dreamweaver. getFloaterVisibility() 함수를 참조하십시오. floaterName.htm이 검색되지 않으면 Dreamweaver는 floaterName.html을 검색합니다. 파일이 없으면 아무 작업도 수행되지 않습니다.

2 부동 패널 파일이 처음으로 로드되는 중이면 initialPosition() 함수가 정의되어 있는 경우 이 함수가 호출되어 화면에서 부동 패널의 기본 위치를 결정합니다. 또한 initialTabs() 함수가 정의되어 있으면 이 함수가 호출되어 부동 패널의 기본 탭 그룹화를 결정합니다.

3 부동 패널이 숨겨져 있는 동안, 변경이 발생했을 것이라는 가정에 따라 selectionChanged() 및 documentEdited() 함수가 호출됩니다.


Configuration/Floaters/ 패널 이름.htm 부동 패널의 제목 막대에 표시되는 텍스트를 지정하고, 부동 패널을 정의하며, 필요한 JavaScript 함수를 포함하고 있습니다.

Configuration/Menus/ menus.xml 메뉴에 명령을 추가합니다.


188

4 부동 패널이 표시된 경우에는 다음 액션이 발생합니다.

• 선택 항목이 변경되면 selectionChanged() 함수가 정의된 경우 이 함수가 호출됩니다.

• 사용자가 문서를 변경하면 documentEdited() 함수가 정의된 경우 이 함수가 호출됩니다.

• 부동 패널 인터페이스의 필드에 연결된 이벤트 핸들러는 사용자가 액션을 취할 때 실행됩니다. 예를 들어, dw.getDocumentDOM().body.innerHTML=''을 실행하는 onClick 이벤트 핸들러가 포함된 버튼은 사용자가 이 버튼을 클릭할 때 문서에서 열기 및 닫기 BODY 태그 사이에 있는 모든 내용을 제거합니다.

부동 패널은 body 태그에서 onShow()와 onHide()라는 두 가지 특수 이벤트를 지원합니다.

5 사용자가 Dreamweaver를 종료하면 부동 패널의 현재 가시성, 위치 및 탭 그룹이 저장됩니다. 다음에 Dreamweaver를 시작하면 마지막으로 종료할 때 표시되었던 부동 패널의 부동 패널 파일을 로드하여 마지막 위치 및 탭 그룹에 부동 패널을 표시합니다.

간단한 부동 패널 예제이 예제에서는 스크립트 편집기 Extension을 만듭니다. 스크립트 편집기 Extension은 [디자인] 뷰에서 선택된 스크립트 표시기에 밑줄을 긋는 JavaScript 코드를 표시할 부동 패널을 만듭니다. 스크립트 편집기는 scriptlayer라는 부동 패널에 정의되어 있는 HTML 양식의 textarea 요소에 JavaScript 코드를 표시합니다 . 부동 패널에서 선택된 코드를 변경하면 해당 Extension은 변경 사항을 저장하기 위해 updateScript() 함수를 호출합니다. 스크립트 편집기를 호출할 때 스크립트 표시기를 선택하지 않으면 해당 Extension은 blanklayer라는 부동 패널에 (선택된 스크립트가 없습니다.)라고 표시합니다.


• 188페이지의 “부동 패널 만들기”


• 191페이지의 “메뉴 항목 만들기”

부동 패널 만들기이 Extension에 대한 HTML 파일의 시작 부분에는 표준 문서 머리글 정보가 포함되어 있으며 부동 패널의 제목 표시줄에 Script Editor라는 단어를 표시하는 title 태그가 포함되어 있습니다.

HTML 파일 헤더를 만들려면:1 비어 있는 새 문서를 만듭니다.

2 다음을 입력합니다.<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Script Editor

</title>

<script language="JavaScript">

이 Extension은 두 개의 부동 패널을 정의합니다. 하나는 사용자가 스크립트 표시기를 선택하지 않은 경우 (선택된 스크립트가 없습니다.)라고 표시하는 패널이고 다른 하나는 선택된 스크립트 표시기에 밑줄을 긋는 JavaScript 코드를 표시하는 패널입니다. 다음 코드는 이들 두 가지 부동 패널 또는 blanklayer 및 scriptlayer라는 이름의 절대 위치(AP)의 요소를 정의합니다.


189

두 개의 부동 패널을 만들려면:1 다음 코드를 HTML 파일의 헤더 뒤에 추가합니다.<body>

<div id="blanklayer" style="position:absolute; width:422px; ¬

height:181px; z-index:1; left: 8px; top: 11px; ¬

visibility: hidden">

<center>

<br>

<br>

<br>

<br>

<br>

(선택된 스크립트 없음)</center>

</div>

<div id="scriptlayer" style="position:absolute; width:422px; ¬

height:181px; z-index:1; left: 8px; top: 11px; ¬

visibility: visible">

<form name="theForm">

<textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬

onBlur="updateScript()"></textarea>

</form>

</div>

</body>

</html>

2 이 파일을 Configuration/Floaters폴더에 scriptEditor.htm이라는 이름으로 저장합니다.

두 div 태그는 style 속성을 사용하여 부동 패널의 위치(absolute), 크기(width:422px 및 height:181px), 기본 가시성 설정(visible) 등을 지정합니다. blanklayer 패널은 center 속성 및 일련의 분리(br) 태그를 사용하여 패널의 가운데에 텍스트를 위치시킵니다. scriptlayer 패널은 textarea를 가진 양식을 하나 만들어서 선택된 JavaScript 코드를 표시합니다. textarea 태그는 선택된 코드가 변경되었음을 알려주는 onBlur 이벤트가 발생할 때 updateScript() 함수가 호출되어 변경된 텍스트를 해당 문서에 다시 작성하도록 지정합니다.

JavaScript 코드 작성스크립트 편집기에 대한 JavaScript 코드는 Dreamweaver가 호출하는 부동 패널 함수인 selectionchanged()와 사용자가 정의하는 함수인 updateScript()로 구성되어 있습니다.

selectionChanged(): 스크립트 표시기의 선택 여부 결정selectionChanged() 함수는 스크립트 표시기가 [디자인] 뷰에서 선택되었는지 여부를 결정합니다. 문서의 BODY 부분에 JavaScript 루틴이 있으며 환경 설정 대화 상자의 보이지 않는 요소 섹션에 스크립트가 선택되어 있으면 디자인 뷰에 스크립트 표시기가 나타납니다. 다음 그림은 스크립트 표시기 아이콘을 보여 줍니다.


190

selectionChanged() 함수는 먼저 dw.getDocumentDOM() 함수를 호출하여 사용자의 문서에 사용할 DOM(Document Object Model)을 가져옵니다. 그런 다음, getSelectedNode() 함수를 호출하여 해당 문서에 대해 선택된 노드가 첫 번째는 요소이고, 두 번째는 SCRIPT 태그인지 확인합니다. 만일 두 조건 모두 true이면selectionChanged() 함수는 scripteditor 부동 패널을 표시하고 기본 JavaScript 코드와 함께 로드합니다. 또한 blanklayer 부동 패널의 visibility 속성 값을 hidden으로 설정합니다. 다음 그림은 선택된 JavaScript 코드와 함께 scriptlayer 부동 패널을 보여 줍니다.

선택된 노드가 요소가 아니거나 SCRIPT 태그가 아니면 selectionChanged() 함수는 blanklayer 부동 패널이 화면에 표시되도록 하고 scriptlayer 패널을 숨깁니다. blanklayer 부동 패널은 다음 그림과 같이 (선택된 스크립트가 없습니다.)라는 텍스트를 표시합니다.

selectionChanged() 함수를 추가하려면:1 Configuration/Floaters 폴더에서 scriptEditor.htm 파일을 엽니다.

2 파일의 헤더 부분에 다음 코드를 입력합니다.function selectionChanged(){

/* 선택된 노드를 가져옵니다. */var theDOM = dw.getDocumentDOM();

var theNode = theDOM.getSelectedNode();

/* 노드가 스크립트 표시기인지 여부를 확인합니다. */if (theNode.nodeType == Node.ELEMENT_NODE && ¬theNode.tagName == "SCRIPT"){

document.layers['scriptlayer'].visibility = 'visible';

document.layers['scriptlayer'].document.theForm.¬

scriptCode.value = theNode.innerHTML;

document.layers['blanklayer'].visibility = 'hidden';


191

}else{

document.layers['scriptlayer'].visibility = 'hidden';

document.layers['blanklayer'].visibility = 'visible';

}

}


updateScript(): 변경 사항 다시 작성updateScript() 함수는 scriptlayer 패널의 textarea에서 onBlur 이벤트가 발생할 때 선택된 스크립트를 다시 작성합니다. textarea 양식 요소에는 JavaScript 코드가 포함되어 있으며 textarea가 입력 포커스를 잃을 때 onBlur 이벤트가 발생합니다.

updateScript() 함수를 추가하려면:1 Configuration/Floaters 폴더에서 scriptEditor.htm 파일을 엽니다.

2 파일의 헤더 부분에 다음 코드를 입력합니다./* 사용자가 텍스트 영역에서 변경한 내용으로

문서를 업데이트합니다. */

function updateScript(){

var theDOM = dw.getDocumentDOM();


theNode.innerHTML = document.layers['scriptlayer'].document.¬

theForm.scriptCode.value;

}

</script>

</head>


메뉴 항목 만들기Configuration/Floaters 폴더에 스크립트 편집기 코드를 저장하는 것만으로 충분하지 않습니다. dw.setFloaterVisibility ('scriptEditor',true) 함수 또는 dw.toggleFloater('scriptEditor') 함수를 호출하여 부동 패널을 로드하여 화면에 표시되도록 해야 합니다. 스크립트 편집기를 가장 확실하게 호출해 올 수 있는 위치는 menus.xml 파일에 정의되어 있는 Window 메뉴입니다. 다음 그림과 같이 스크립트 편집기 Extension에 대한 항목을 [윈도우] 메뉴에 만드는 menuitem 태그를 만들어야 합니다.

[디자인] 뷰에서 현재 문서의 스크립트 표시기를 하나 선택하고 스크립트 편집기 메뉴 항목을 선택하면 스크립트 편집기 부동 패널이 호출되고 스크립트 표시기에 밑줄을 긋는 JavaScript 코드가 표시됩니다. 스크립트 표시기가 선택되지 않은 경우, 메뉴 항목을 선택하면 (선택된 스크립트가 없습니다.)라는 텍스트가 포함된 blanklayer 패널이 표시됩니다.


192

메뉴 항목을 추가하려면:1 Configuration/Menus 폴더에서 menus.xml 파일을 엽니다.

2 <menuitem name="Tile _Vertically"로 시작하는 태그를 찾은 다음 이 태그를 닫는 /> 뒤의 삽입 지점을 찾습니다.

3 행을 바꿔 다음을 입력합니다.<menuitem name="Script Editor" enabled="true" ¬

command="dw.toggleFloater('scriptEditor')"¬

checked="dw.getFloaterVisibility('scriptEditor')" />


부동 패널 API 함수부동 패널 API의 사용자 정의 함수는 모두 선택적입니다.

이 단원에 설명된 일부 함수는 Windows 운영 체제에서만 동작합니다. 이 정보는 함수 설명 부분에서 알 수 있습니다.

displayHelp()

설명이 함수를 정의하면 대화 상자의 [확인] 및 [취소] 버튼 아래에 [도움말] 버튼이 나타납니다. 사용자가 [도움말] 버튼을 클릭하면 이 함수가 호출됩니다.

인수없음

반환값없음

예제// displayHelp()의 다음 인스턴스는

// Extension 사용법을 설명하는

// 파일을 브라우저에서 엽니다.function displayHelp(){


'/ExtensionsHelp/superDuperHelp.htm';


}

documentEdited()

설명이 함수는 부동 패널이 표시되고 현재 편집 작업이 완료되면 호출됩니다. 즉, 이 함수가 호출되기 전에 여러 번 편집해야 할 수도 있습니다. 이 함수는 부동 패널이 문서의 편집 내용을 추적해야 하는 경우에만 정의해야 합니다.

참고: documentEdited() 함수가 있으면 성능에 영향을 주므로 꼭 필요한 경우에만 이 함수를 정의하십시오.

인수없음

반환값없음


193

예제documentEdited() 함수에 대한 다음 예제에서는 문서에서 AP 요소를 검색하여 문서에 포함된 AP 요소의 수를 표시하는 텍스트 필드를 업데이트합니다.function documentEdited(){

/* 문서에 있는 모든 AP 요소의 목록을 만듭니다. */var theDOM = dw.getDocumentDOM();

var layersInDoc = theDOM.getElementsByTagName("layer");

var layerCount = layersInDoc.length;

/* numOfLayers 필드를 새 layercount로 업데이트합니다. */document.theForm.numOfLayers.value = layerCount;

}

getDockingSide()


설명부동 패널을 결합할 수 있는 위치를 지정합니다. 이 함수는 "left", "right", "top" 및 "bottom" 등 몇 가지 단어가 조합된 문자열을 반환합니다. 문자열에 레이블이 있는 경우에는 부동 패널을 해당 면에 결합할 수 있습니다. 해당 함수가 없으면 면에 부동 패널을 결합할 수 없습니다.

특정 패널이 Dreamweaver 작업 영역의 특정 면에서 서로 서로 결합되는 것을 막으려면 이 함수를 사용합니다.

인수없음

반환값Dreamweaver는 "left", "right", "top" 및 "bottom"등의 단어가 포함된 문자열 또는 Dreamweaver가 부동 패널을 결합할 수 있는 위치를 지정하는 단어 조합이 포함된 문자열을 예측합니다.

예제getDockingSide()

{

return dock_side = “left top”;}

initialPosition()

설명부동 패널이 처음 호출될 때의 초기 위치를 결정합니다. 이 함수를 정의하지 않은 경우 기본 위치는 화면의 가운데입니다.

인수platform

• platform 인수는 사용자의 플랫폼에 따라 "Mac" 또는 "Win" 값 중 하나를 가집니다.

반환값Dreamweaver는 "leftPosInPixels,topPosInPixels" 형식의 문자열을 예측합니다.


194

예제initialPosition()에 대한 다음 예제에서는 부동 패널이 처음으로 나타날 때 Windows에서는 화면 왼쪽에서 420픽셀, 위쪽에서 20픽셀의 위치에 나타나도록 지정하고 Macintosh에서는 화면 왼쪽에서 390픽셀, 위쪽에서 20픽셀의 위치에 나타나도록 지정합니다.function initialPosition(platform){

var initPos = "420,20";

if (platform == "macintosh"){

initPos = "390,20";

}

return initPos;

}

initialTabs()

설명이 부동 패널이 처음으로 나타날 때 함께 탭으로 표시될 다른 부동 패널을 결정합니다. 목록에 있는 부동 패널이 이전에 나타났으면 그 패널은 탭 그룹에 포함되지 않습니다. 두 사용자 정의 부동 패널이 함께 탭으로 표시되도록 하려면 각 패널이 initialTabs() 함수를 사용하여 다른 패널을 참조해야 합니다.

인수없음

반환값Dreamweaver는 "floaterName1,floaterName2,...floaterNameN" 형식의 문자열을 예측합니다.

예제initialTabs()에 대한 다음 예제에서는 부동 패널이 처음으로 나타날 때 scriptEditor 부동 패널과 함께 탭으로 표시되도록 지정합니다.function initialTabs(){

return "scriptEditor";

}

isATarget()

지원 버전Dreamweaver MX(Windows 전용)

설명이 패널에 다른 패널을 결합할 수 있는지 여부를 지정합니다. isATarget() 함수가 지정되어 있지 않으면 Dreamweaver는 이 패널에 다른 패널이 결합되지 못하도록 합니다. Dreamweaver는 사용자가 이 패널을 다른 패널과 결합하려고 할 때 이 함수를 호출합니다.

인수없음

반환값Dreamweaver에 부울 값이 반환되며, 다른 부동 패널이 이 패널에 결합할 수 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

예제IsATarget()

{

return true;

}


195

isAvailableInCodeView()

설명[코드] 뷰가 선택될 때 부동 패널이 활성화될지 여부를 결정합니다. 이 함수를 정의하지 않으면 [코드]뷰에서 부동 패널이 비활성화됩니다.

인수없음

반환값Dreamweaver에 부울 값이 반환되며, 부동 패널이 [코드] 뷰에 활성화되어 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

isResizable()


설명사용자가 부동 패널의 크기를 조정할 수 있는지 여부를 판별합니다. 이 함수가 정의되어 있지 않거나 이 함수가 true를 반환하면 사용자는 부동 패널의 크기를 조절할 수 있습니다. 만약 이 함수가 false를 반환하면 사용자는 부동 패널의 크기를 조절할 수 없습니다.

인수없음

반환값부울 값이 반환되며, 사용자가 부동 패널의 크기를 조절할 수 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

예제다음 예제에서는 사용자가 부동 패널의 크기를 조절할 수 없도록 합니다.function isResizable()

{

return false;

}

selectionChanged()

설명부동 패널이 표시되거나 선택 항목이 변경되는 경우, 즉 포커스가 새 문서로 전환되거나 삽입 포인터가 현재 문서의 새 위치로 이동되는 경우에 호출됩니다. 이 함수는 부동 패널이 선택 항목을 추적해야 하는 경우에만 정의해야 합니다.

참고: selectionChanged() 함수가 있으면 성능에 영향을 주므로 꼭 필요한 경우에만 이 함수를 정의합니다.

인수없음

반환값없음


196

예제selectionChanged()에 대한 다음 예제에서는 선택 항목이 스크립트 표시자인지 여부에 따라 부동 패널의 다양한 레이어를 보여 줍니다. 선택 항목이 스크립트 표시자이면 Dreamweaver는 scriptlayer AP 요소를 화면에 표시하고, 그렇지 않으면 blanklayer AP 요소를 표시합니다.function selectionChanged(){

/* 선택된 노드를 가져옵니다. */var theDOM = dw.getDocumentDOM();


/* 노드가 스크립트 표시기인지 여부를 확인합니다. */if (theNode.nodeType == Node.ELEMENT_NODE && ¬theNode.tagName == "SCRIPT"){

document.layers['blanklayer'].visibility = 'hidden';

document.layers['scriptlayer'].visibility = 'visible';}

else {

document.layers['scriptlayer'].visibility = 'hidden';

document.layers['blanklayer'].visibility = 'visible';

}

}

성능

사용자 정의 부동 패널에서 selectionChanged() 또는 documentEdited() 함수를 선언하면 Dreamweaver의 성능에 좋지 않은 영향을 줄 수 있습니다. 예를 들어, Dreamweaver가 아주 짧은 시간 동안 다음 작업을 기다리며 대기하고 있을 때, 사용자가 키보드의 키를 누르거나 마우스를 클릭한 후 documentEdited() 및 selectionChanged() 함수가 호출된다고 가정해 보십시오. 가능할 때마다 대형 문서(100K 이상의 HTML)를 사용하여 다양한 시나리오를 통해 부동 패널을 테스트하여 성능에 어떠한 영향이 있는지 테스트해야 합니다.

성능 저하를 막으려면 setTimeout() 함수를 사용하십시오. 브라우저에서와 같이 setTimeout() 함수는 두 개의 인수를 취합니다. 즉, 호출할 JavaScript와 밀리초 단위의 호출 전 대기 시간이 필요합니다.

setTimeout() 메서드를 사용하면 처리 과정에 일시 정지 기능을 포함시킬 수 있습니다. 이러한 일시 정지 기능을 사용하면 사용자가 응용 프로그램과 계속해서 상호 작용할 수 있습니다. 스크립트 진행 중에는 화면이 정지되어 사용자가 편집 작업을 더 이상 수행할 수 없게 되므로 이러한 일시 정지를 명시적으로 포함시켜야 합니다. 일시 정지를 사용하면 또한 인터페이스 또는 부동 패널의 업데이트가 방지됩니다.

다음은 문서에 있는 모든 AP 요소에 대한 정보를 표시하는 부동 패널 예제 중 일부입니다. 이 예제에서는 setTimeout() 메서드를 사용하여 각 AP 요소를 처리한 후 0.5초 동안 일시정지합니다.

/* 편집 작업을 진행할지 여부를 지정하는 플래그를 만들어서 false로 설정합니다.*/document.running = false;

/* 이 함수는 문서를 편집할 때 호출됩니다. */function documentEdited(){

/* 처리될 모든 AP 요소의 목록을 만듭니다. */var dom = dw.getDocumentDOM();

document.layers = dom.getElementsByTagName("layer");

document.numLayers = document.layers.length;

document.numProcessed = 0;

/* processLayer()를 호출할 타이머를 설정합니다. 이전 편집

* 내용의 처리를 마치지 못한 경우에는 타이머가 이미

* 설정되어 있습니다. */if (document.running = false){

setTimeout("processLayer()", 500);

}

/* 처리 플래그를 true로 설정합니다. */document.running = true;

}


197

/* 하나의 AP 요소 처리*/function processLayer(){

/* 처리되지 않은 다음 AP 요소에 대한 정보를 표시합니다.

displayLayer()는 "magic.0*/"을 수행하기 위해

작성할 함수입니다.*/ displayLayer(document.layers[document.numProcessed]);

/* 수행할 작업이 좀더 있다면 다음 레이어를 처리할 수 있도록

* 제한 시간을 설정합니다. 마치면 document.running 플래그를

* false로 설정합니다. */document.numProcessed = document.numProcessed + 1;

if (document.numProcessed < document.numLayers){

setTimeout("processLayer()", 500);

}else{

document.running = false;

}

}

198

16장: 비헤이비어

비헤이비어를 사용하면 일반 사용자도 대화형 HTML 페이지를 만들 수 있습니다. 웹 디자이너는 비헤이비어를 통해 HTML 양식을 채워 페이지 요소에 액션을 쉽게 할당할 수 있습니다.

비헤이비어라는 용어는 이벤트(예: onClick, onLoad 또는 onSubmit)와 액션(예: 플러그인 확인, URL로 이동, 이미지 교체)의 조합이라고 생각할 수 있습니다. 어떤 HTML 요소에 어떤 이벤트를 사용할 수 있는지는 브라우저에서 결정합니다. Adobe Dreamweaver CS3 응용 프로그램 폴더의 Configuration/Behaviors/Events 폴더에 각 브라우저에서 지원하는 이벤트 목록이 포함된 파일이 저장되어 있습니다.

액션은 제어할 수 있는 비헤이비어의 일부이므로 비헤이비어를 작성하면 실제로 액션 파일을 작성하는 것과 같습니다. 액션은 HTML 파일입니다. 일반적으로, 액션 파일의 BODY 부분에는 액션의 매개 변수(예를 들어, 표시하거나 숨길 절대 배치된 요소를 알려주는 매개 변수)를 사용하는 HTML 양식이 포함됩니다. 액션 파일의 HEAD 부분에는 BODY 내용의 양식 입력을 처리하고 사용자의 문서에 삽입된 함수, 인수 및 이벤트 핸들러를 제어하는 JavaScript 함수가 포함됩니다.

일반 사용자와 함수를 공유하거나 동일한 JavaScript 함수를 매개 변수만 변경하여 반복적으로 삽입하려는 경우에는 비헤이비어 액션을 작성해야 합니다.

참고: 비헤이비어를 사용하여 VBScript 함수를 직접 삽입할 수는 없습니다. 그러나 applyBehavior() 함수의 DOM(Document Object Model)을 편집하여 VBScript 함수를 간접적으로 추가할 수는 있습니다.

다음 표에서는 비헤이비어 액션을 만드는 데 사용하는 파일을 보여 줍니다.

참고: 웹 응용 프로그램 기능을 제공하는 서버 비헤이비어에 대한 자세한 내용은 210페이지의 “서버 비헤이비어”를 참조하십시오.

비헤이비어의 작동 방식사용자가 Dreamweaver 문서에서 HTML 요소를 선택하고 [비헤이비어] 패널의 플러스(+) 버튼을 클릭하면 다음과 같은 이벤트가 발생합니다.

1 Dreamweaver는 각 액션 파일에서 canAcceptBehavior() 함수를 호출하여 이 액션이 문서나 선택한 요소에 적합한지 확인합니다.

이 함수의 반환값이 false이면 Dreamweaver는 [액션] 팝업 메뉴에서 해당 액션을 희미하게 표시합니다. 예를 들어, 사용자의 문서에 SWF 파일이 없으면 [Shockwave 제어] 액션은 희미하게 표시됩니다. 반환값이 이벤트 목록인 경우 Dreamweaver는 현재 선택한 HTML 요소 및 대상 브라우저에 유효한 이벤트와 이 목록의 각 이벤트를 서로 비교하여 일치하는 것을 찾습니다. Dreamweaver는 canAcceptBehavior() 함수에서 일치하는 이벤트를 [이벤트] 팝업 메뉴 목록의 맨 위에 표시합니다. 일치하는 이벤트가 없으면 HTML 요소에 대한 기본 이벤트(이벤트 파일에서 별표[*]로 표시됨)가 맨 위 항목으로 표시됩니다. 메뉴의 나머지 이벤트는 이벤트 파일에서 수집됩니다.

2 사용자가 [액션] 팝업 메뉴에서 액션을 선택합니다.

3 Dreamweaver는 windowDimensions() 함수를 호출하여 [매개 변수] 대화 상자의 크기를 결정합니다. windowDimensions() 함수가 정의되어 있지 않으면 크기가 자동으로 결정됩니다.

대화 상자는 항상 나타나며 BODY 요소의 내용에 관계없이 오른쪽 가장자리에 [확인] 및 [취소] 버튼이 나타납니다.

4 Dreamweaver는 액션 파일의 BODY 요소가 포함된 대화 상자를 표시합니다. 액션 파일의 BODY 태그에 onLoad 핸들러가 포함되어 있는 경우 Dreamweaver는 이를 실행합니다.


Configuration/Behaviors/Actions/ behavior action.htm 파일의 BODY에는 액션의 매개 변수에 대한 HTML 양식이 들어 있습니다. 파일의 HEAD에는 JavaScript 함수가 들어 있습니다.


199

5 사용자가 액션의 매개 변수를 채웁니다. 사용자가 양식 필드에서 작업을 수행하면 Dreamweaver는 해당 필드와 연관된 이벤트 핸들러를 실행합니다.

6 사용자가 [확인]을 클릭합니다.

7 Dreamweaver는 선택한 액션 파일에서 behaviorFunction() 및 applyBehavior() 함수를 호출합니다. 이 함수는 사용자의 문서에 삽입된 문자열을 반환합니다.

8 사용자가 나중에 [액션] 열에서 이 액션을 두 번 클릭하면 Dreamweaver는 [매개 변수] 대화 상자를 다시 열고 onLoad 핸들러를 실행합니다. 그런 다음, Dreamweaver는 선택한 액션 파일에서 inspectBehavior() 함수를 호출하여 사용자가 이전에 입력한 데이터로 필드를 채웁니다.

사용자의 파일에 여러 함수 삽입액션을 통해 여러 개의 함수, 즉 기본 비헤이비어 함수와 여러 개의 보조 함수를 HEAD 부분에 삽입할 수 있습니다. 각 액션 파일의 함수 정의가 완전히 같은 경우, 두 개 이상의 비헤이비어가 보조 함수를 공유할 수도 있습니다. 공유 함수가 동일하다는 것을 확인할 수 있는 한 가지 방법은 각 보조 함수를 외부 JavaScript 파일에 저장하고 <SCRIPT SRC="externalFile.js">를 사용하여 이 파일을 적절한 액션 파일에 삽입하는 것입니다.

사용자가 비헤이비어를 삭제하면 Dreamweaver는 이 비헤이비어와 연관되지만 사용되지 않은 보조 함수를 제거합니다. 다른 비헤이비어가 보조 함수를 사용하고 있는 경우에는 삭제되지 않습니다. 보조 함수를 삭제하는 알고리즘은 특별히 주의해야 하므로 Dreamweaver는 사용되지 않은 함수를 사용자 문서에 그대로 남겨 두기도 합니다.

액션에 반환값이 필요한 경우 수행할 작업경우에 따라, 이벤트 핸들러에 반환값(예: onMouseOver="window.status='This is a link'; return true")이 반드시 있어야 할 때도 있습니다. 그러나 Dreamweaver가 이벤트 핸들러에 "return behaviorName(args)" 액션을 삽입하면 목록의 뒷부분에 있는 비헤이비어는 건너뜁니다.

이 제한을 피하려면 behaviorFunction() 함수가 반환하는 문자열 내에서 원하는 반환값에 document.MM_returnValue 변수를 설정합니다. 이와 같이 설정하면 Dreamweaver는 이벤트 핸들러의 액션 목록 끝에 return document.MM_returnValue를 삽입합니다. MM_returnValue 변수 사용에 대한 예제를 보려면 Dreamweaver 응용 프로그램 폴더 내의 Configuration/ Behaviors/Actions 폴더에서 Validate Form.js 파일을 참조하십시오.

간단한 비헤이비어 예제비헤이비어 작동 방식 및 비헤이비어를 만드는 방법을 이해하려는 경우 예제를 보면 도움이 됩니다. Dreamweaver 응용 프로그램 폴더의 Configuration/Behaviors/Actions폴더에 들어 있는 예제는 대부분 상당히 복잡합니다. 이 예제는 더 간단하므로 비헤이비어를 만드는 방법을 쉽게 익힐 수 있습니다. 그러므로 간단한 액션 파일인 Call JavaScript.htm 및 모든 JavaScript 함수가 포함되어 있는 Call JavaScript.js를 사용하십시오.

비헤이비어를 만들려면 다음 단계를 수행합니다.

• 200페이지의 “비헤이비어 Extension 만들기”

• 202페이지의 “탐색할 HTML 파일 만들기”

• 203페이지의 “비헤이비어 테스트”


200

비헤이비어 Extension 만들기다음 코드는 비교적 간단한 예제입니다. 브라우저 이름을 확인하여 Netscape Navigator인 경우에는 특정 페이지로 이동하고, Microsoft Internet Explorer인 경우에는 다른 페이지로 이동합니다. 이 코드를 확장하여 Opera와 WebTV 같은 다른 브라우저도 확인할 수 있고 URL로 이동하는 것 외의 다른 동작을 수행하도록 수정할 수도 있습니다.

비헤이비어 Extension을 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음 내용을 파일에 추가합니다.<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">

<html>

<head>

<title>behavior "Check Browser Brand"</title>

<meta http-equiv="Content-Type" content="text/html">


// 사용자 문서의 HEAD 부분에

// 삽입할 함수function checkBrowserBrand(netscapeURL,explorerURL) {

if (navigator.appName == "Netscape") {

if (netscapeURL) location.href = netscapeURL;

}else if (navigator.appName == "Microsoft Internet Explorer") {

if (explorerURL) location.href = explorerURL;

}

}

//******************* API **********************

function canAcceptBehavior(){

return true;

}

// 사용자 문서의 헤드에 삽입할 함수의

// 이름을 반환합니다.function behaviorFunction(){

return "checkBrowserBrand";

}

// 이벤트 핸들러로 삽입할 함수 호출을

// 생성합니다.function applyBehavior() {

var nsURL = escape(document.theForm.nsURL.value);

var ieURL = escape(document.theForm.ieURL.value);

if (nsURL && ieURL) {

return "checkBrowserBrand(\'" + nsURL + "\',\'" + ieURL + "\')";

}else{

return "Please enter URLs in both fields."

}

}

// 이벤트 핸들러의 함수 호출에서 인수를

// 추출하고 매개 변수 양식을

// 다시 채웁니다.function inspectBehavior(fnCall){

var argArray = getTokens(fnCall, "()',");

var nsURL = unescape(argArray[1]);

var ieURL = unescape(argArray[2]);

document.theForm.nsURL.value = nsURL;

document.theForm.ieURL.value = ieURL;

}


201

//***************** LOCAL FUNCTIONS ******************

// 포인터를 첫 번째 텍스트 필드에 두고

// 필드에 내용이 있는 경우 선택합니다.function initializeUI(){

document.theForm.nsURL.focus();

document.theForm.nsURL.select();

}

// 사용자가 Navigator 및 IE URL을 탐색하도록

// 합니다.function browseForURLs(whichButton){

var theURL = dreamweaver.browseForFileURL();

if (whichButton == "nsURL"){

document.theForm.nsURL.value = theURL;

}else{

document.theForm.ieURL.value = theURL;

}

}

//*************** END OF JAVASCRIPT *****************

</script>

</head>

<body>

<form method="post" action="" name="theForm">

<table border="0" cellpadding="8">

<tr>

<td nowrap="nowrap"> Go to this URL if the browser is ¬

Netscape Navigator:<br>

<input type="text" name="nsURL" size="50" value="">

<input type="button" name="nsBrowse" value="Browse..." ¬

onClick="browseForURLs('nsURL')"></td>

</tr>

<tr>

<td nowrap="nowrap"> Go to this URL is the browser is ¬

Microsoft Internet Explorer:<br>

<input type="text" name="ieURL" size="50" value="">

<input type="button" name="ieBrowse" value="Browse..." ¬

onClick="browseForURLs('ieURL')"></td>

</tr>

</table>

</form>

</body>

</html>

3 파일을 Configuration/Behaviors/Actions/BrowserDependentURL.htm으로 저장합니다.


202

탐색할 HTML 파일 만들기이번에는 탐색할 HTML 파일, 즉, 브라우저가 Internet Explorer인 경우와 Netscape Navigator인 경우에 탐색할 각 파일을 만듭니다.

탐색할 HTML 파일을 만들려면:1 다음 내용이 포함된 새 파일을 만듭니다.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>


<title>Internet Explorer Only</title>

</head>

<body>

This is the page to go to if you are using Internet Explorer.

</body>

</html>

2 이 파일을 사용자 컴퓨터의 사이트에 iecontent.htm이라는 이름으로 저장합니다.

3 다음 내용이 포함된 다른 새 파일을 만듭니다.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<html>

<head>


<title>Netscape Navigator content</title>

</head>

<body>

This is the page to go to if you are using Netscape Navigator.

</body>

</html>

4 이 파일을 iecontent.htm 파일과 동일한 폴더에 netscapecontent.htm이라는 이름으로 저장합니다.


6 다음 내용이 포함된 새 HTML 파일을 만듭니다.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<html>

<head>


<title>Which browser</title>

</head>

<body>

</body>

</html>

7 이 파일을 iecontent.htm 파일과 동일한 폴더에 whichbrowser.htm이라는 이름으로 저장합니다.

8 [비헤이비어] 패널의 플러스(+) 버튼을 클릭하고 [브라우저 확인] 밴드 비헤이비어를 선택합니다.

9 브라우저가 Netscape Navigator 텍스트 상자이면 [URL로 이동] 옵션 옆에 있는 [탐색] 버튼을 클릭하고 netscapecontent.htm 파일을 선택합니다.

10 브라우저가 Internet Explorer 텍스트 상자이면 [URL로 이동] 옵션 옆에 있는 [탐색] 버튼을 클릭하고 iecontent.htm 파일을 선택합니다.

http://www.w3.org/TR/html4/loose.dtd



203

11 [확인]을 클릭합니다.

Dreamweaver는 지정된 JavaScript를 whichbrowser.htm 파일에 추가하므로 파일은 다음과 같이 나타납니다.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<html>

<head>


<title>Which browser</title>

<script language="JavaScript" type="text/JavaScript">



</script>

</head>

<body onLoad="checkBrowserBrand('netscaptecontent.htm','iecontent.htm')">

</body>

</html>

비헤이비어 테스트이제 비헤이비어를 테스트할 수 있습니다.

비헤이비어를 테스트하려면:❖ 브라우저에서 whichbrowser.htm 파일을 엽니다.

현재 사용하는 브라우저에 따라 iecontent.htm 또는 netscapecontent.htm 파일이 열립니다.

비헤이비어 API 함수두 개의 비헤이비어 API 함수(applyBehavior() 및 behaviorFunction())는 필수이고 나머지는 선택 사항입니다.

applyBehavior()

설명이 함수는 사용자의 문서에 behaviorFunction() 함수가 삽입하는 함수를 호출하는 이벤트 핸들러를 삽입합니다. applyBehavior() 함수는 사용자 문서에서 기타 편집 작업을 수행할 수는 있지만, 비헤이비어가 적용될 객체나 액션을 받는 객체를 삭제해서는 안 됩니다.

applyBehavior() 함수를 작성할 때에는 사용자 문서의 편집 방식을 결정해야 합니다. 예를 들어, 문서 BODY 부분의 스크립트 태그 안에 몇 가지 코드를 삽입할 수 있습니다. 표준 DOM 편집 API를 사용하여 실행합니다.

인수uniqueName

인수는 사용자 문서에 있는 모든 비헤이비어의 모든 인스턴스에서 고유한 식별자입니다. 이 인수의 서식은 functionNameInteger입니다. 여기에서 functionName은 behaviorFunction()이 삽입하는 함수의 이름입니다. 이 인수는 사용자 문서에 태그를 삽입하고 이 태그의 NAME 속성에 고유한 값을 지정하는 경우 유용하게 사용할 수 있습니다.


204

반환값일반적으로 사용자로부터 매개 변수를 받아들인 후 사용자 문서에 삽입할 함수 호출을 포함하는 문자열을 반환합니다. applyBehavior() 함수에서 사용자가 잘못 입력한 것으로 판단하면, 이 함수는 함수 호출 대신 오류 문자열을 반환할 수 있습니다. 문자열이 비어 있으면(return "";) Dreamweaver는 오류를 보고하지 않습니다. 문자열이 비어 있지 않고 함수 호출이 아니면 Dreamweaver에서는 이 비헤이비어에 잘못된 입력이 제공:되었다는 내용의 대화 상자와 함께 applyBehavior()에서 반환된 문자열을 표시합니다. 반환값이 null(return;)이면 Dreamweaver는 오류가 발생한 사실은 표시하지만 구체적인 정보는 제공하지 않습니다.

참고: JavaScript 인터프리터가 보고하는 오류를 방지하려면 반환된 문자열 내의 인용 부호("") 앞에 백슬래시(\)가 있어야 합니다.

예제applyBehavior() 함수의 다음 예제는 MM_openBrWindow() 함수에 대한 호출을 반환하고 사용자 지정 매개 변수(예: 윈도우의 높이 및 폭, 윈도우에 스크롤 막대, 툴바, 위치 막대 및 기타 기능의 존재 여부, 윈도우에서 열려야 할 URL 등)를 전달합니다.function applyBehavior() {

var i,theURL,theName,arrayIndex = 0;

var argArray = new Array(); //배열을 사용하여 올바른 개수의

콤마를(공백 없이) 만듭니다.var checkBoxNames = new Array("toolbar","location",¬

"status","menubar","scrollbars","resizable");

for (i=0; i<checkBoxNames.length; i++) {

theCheckBox = eval("document.theForm." + checkBoxNames[i]);

if (theCheckBox.checked) argArray[arrayIndex++] = (checkBoxNames[i] + "=yes");

}

if (document.theForm.width.value)

argArray[arrayIndex++] = ("width=" + document.theForm.width.value);

if (document.theForm.height.value)

argArray[arrayIndex++] = ("height=" + document.theForm.height.value);

theURL = escape(document.theForm.URL.value);

theName = document.theForm.winName.value;

return "MM_openBrWindow('"+theURL+"','"+theName+"','"+argArray.join()+"')";}

behaviorFunction()

설명이 함수는 다음 태그로 둘러 싸인 함수가 존재하지 않으면 이러한 함수를 사용자 문서의 HEAD 섹션에 한 개 이상 삽입합니다.<SCRIPT LANGUAGE="JavaScript"></SCRIPT>

인수없음

반환값JavaScript 함수를 포함하는 문자열이나 사용자 문서에 삽입할 함수의 이름을 포함하는 문자열을 반환합니다. 이 값은 매번 정확하게 일치해야 하며 사용자의 입력에 따라 달라지지 않습니다. 문서의 요소에 액션이 적용되는 횟수에 관계 없이 함수는 한 번만 삽입됩니다.

참고: JavaScript 인터프리터가 보고하는 오류를 방지하려면 반환된 문자열 내의 인용 부호("") 앞에 백슬래시(\) 이스케이프 문자가 있어야 합니다.


205

예제behaviorFunction() 함수의 다음 인스턴스는 MM_popupMsg() 함수를 반환합니다.function behaviorFunction(){

return ""+

"function MM_popupMsg(theMsg) { //v1.0\n"+"alert(theMsg);\n"+

"}";

}

다음 예제는 앞의 behaviorFunction() 선언과 동일하며 Dreamweaver와 함께 제공되는 모든 비헤이비어에서 behaviorFunction() 함수를 선언하는 데 사용되는 메서드입니다.function MM_popupMsg(theMsg){ //v1.0

alert(theMsg);

}

function behaviorFunction(){

return "MM_popupMsg";}

canAcceptBehavior()

설명이 함수는 선택한 HTML 요소에 액션을 사용할 수 있는지 여부를 확인하고 액션을 트리거할 기본 이벤트를 지정합니다. 또한 사용자 문서에 SWF 파일과 같은 특정 객체가 있는지 확인하여 이러한 객체가 나타나지 않은 경우에는 액션을 허용하지 않을 수도 있습니다.

인수HTMLElement

인수는 선택한 HTML 요소입니다.

반환값다음 값 중 하나를 반환합니다.

• 액션이 허용되지만 선호하는 이벤트가 없으면 true 값을 반환합니다.

• 이 액션에 대해 우선 순위가 지정된 이벤트 목록을 우선 순위를 기준으로 내림차순으로 반환합니다. 우선 순위 이벤트를 지정하면 이벤트 파일에서 별표[*]로 표시되는 선택한 객체에 대한 기본 이벤트가 무시됩니다. 자세한 내용은 198페이지의 “비헤이비어의 작동 방식”의 1단계를 참조하십시오.

• 액션이 허용되지 않으면 false 값을 반환합니다.

canAcceptBehavior() 함수가 false 값을 반환하면 해당 액션이 [비헤이비어] 패널의 [액션] 팝업 메뉴에서 희미하게 표시됩니다.

예제이름이 지정된 이미지가 문서에 있으면 canAcceptBehavior() 함수의 다음 인스턴스는 해당 비헤이비어에 대해 선호하는 이벤트 목록을 반환합니다.function canAcceptBehavior(){

var theDOM = dreamweaver.getDocumentDOM();

// 문서 내 모든 이미지의 배열을 가져옵니다.var allImages = theDOM.getElementsByTagName('IMG');

if (allImages.length > 0){

return "onMouseOver, onClick, onMouseDown";

}else{

return false;

}

}


206

displayHelp()

설명이 함수가 정의되면 [매개 변수] 대화 상자의 [확인] 및 [취소] 버튼 아래에 [도움말] 버튼이 나타납니다. 사용자가 [도움말] 버튼을 클릭하면 이 함수가 호출됩니다.

인수없음

반환값없음







}

deleteBehavior()

설명이 함수는 applyBehavior() 함수가 수행하는 편집 작업의 실행을 취소합니다.

참고: 사용자가 [비헤이비어] 패널에서 비헤이비어를 삭제하면 Dreamweaver는 비헤이비어와 연관된 이벤트 핸들러와 함수 선언을 자동으로 삭제합니다. applyBehavior() 함수가 사용자 문서를 추가로 편집(예: 태그 삽입)하는 경우에만 deleteBehavior() 함수를 정의해야 합니다.

인수applyBehaviorString

이 인수는 applyBehavior() 함수가 반환하는 문자열입니다.

반환값없음

identifyBehaviorArguments()

설명이 함수는 사용자가 문서를 다른 위치에 저장하는 경우, 비헤이비어의 URL을 업데이트할 수 있고 참조된 파일을 사이트 맵에 표시하여 서버에 업로드하고 다운로드하기 위한 종속 파일로 간주할 수 있도록 내비게이션 링크, 종속 파일, URL, Netscape 4.0 스타일 참조 또는 객체 이름으로 비헤이비어 함수 호출의 인수를 식별합니다.

인수theFunctionCall



207

반환값함수 호출의 인수 유형들이 콤마로 구분되어 들어 있는 문자열을 반환합니다. 목록의 길이는 함수 호출의 인수 수와 같아야 합니다. 인수 유형은 다음 중 하나여야 합니다.

• nav 인수 유형은 이 인수가 내비게이션 URL이므로 사이트 맵에 표시되어야 한다는 것을 지정합니다.

• dep 인수 유형은 이 인수가 종속 파일 URL이므로 이 비헤이비어를 포함하는 문서가 서버에서 다운로드되거나 업로드될 때 다른 모든 종속 파일과 함께 포함되어야 한다는 것을 지정합니다.

• URL 인수 유형은 이 인수가 내비게이션 URL이자 종속 URL이거나 알 수 없는 유형의 URL로, 사이트 맵에 표시되어야 하며, 서버에서 다운로드되거나 업로드될 때 종속 파일로 간주되어야 한다는 것을 지정합니다.

• NS4.0ref 인수 유형은 이 인수가 Netscape Navigator 4.0 스타일 객체 참조라는 것을 지정합니다.

• IE4.0ref 인수 유형은 이 인수가 Internet Explorer DOM 4.0 스타일 객체 참조라는 것을 지정합니다.

• objName 인수 유형은 객체의 NAME 속성에 지정된 대로 이 인수가 단순 객체 이름이라는 것을 지정합니다. 이 유형은 Dreamweaver 3에서 추가되었습니다.

• other 인수 유형은 이 인수가 위의 유형 중 어느 것에도 속하지 않는다는 것을 지정합니다.

예제identifyBehaviorArguments() 함수에 대한 간단한 다음 예제는 브라우저 윈도우 열기 비헤이비어 액션에 대해 작동합니다. 이 액션은 항상 세 가지 인수(열려는 URL, 새 윈도우의 이름, 윈도우 속성 목록)가 포함된 함수를 반환합니다.function identifyBehaviorArguments(fnCallStr) {

return "URL,other,other";

}

인수의 개수가 유동적인 비헤이비어 함수(예: 레이어 보기/숨김)에는 더 복잡한 버전의 identifyBehaviorArguments() 함수가 필요합니다. identifyBehaviorArguments() 함수의 이 예제 버전에는 최소 개수의 인수가 포함되어 있으며 추가 인수는 항상 최소 개수의 배수만큼 작성됩니다. 즉,최소 인수의 개수가 4개인 함수는 4, 8 또는 12개의 인수를 가질 수 있지만 10개를 가질 수는 없습니다.function identifyBehaviorArguments(fnCallStr) {

var listOfArgTypes;

var itemArray = dreamweaver.getTokens(fnCallStr, '(),');

// getTokens()에 의해 반환된 항목 배열에는 함수 이름이

// 포함되므로 해당 배열의 *인수* 개수는 배열 길이에서 1을 뺀

// 값이 됩니다. 이 값을 4로 나누어

// 인수 그룹의 개수를 구합니다.var numArgGroups = ((itemArray.length - 1)/4);

// 각 인수 그룹에 대해for (i=0; i < numArgGroups; i++){

// 기존 인수 유형 목록에

// 콤마와 "NS4.0ref,IE4.0ref,other,dep"

// (이 가상 비헤이비어 함수에는 Netscape 객체 참조, IE 객체 참조, 종속 URL, "show"나 "hide" 등의 속성 값 등

// 최소 4개의 인수가 있기 때문)를 추가합니다.

// 인수 유형 목록이 없는 경우에는

// "NS4.0ref,IE4.0ref,other,dep"만을

// 추가합니다.var listOfArgTypes += ((listOfArgTypes)?",":"") + ¬

"NS4.0ref,IE4.0ref,other,dep";

}

}


208

inspectBehavior()

설명이 함수는 이전에 사용자 문서에 적용된 비헤이비어의 함수 호출을 관리하고 이에 따라 [매개 변수] 대화 상자에서 옵션의 값을 설정합니다. inspectBehavior() 함수가 정의되어 있지 않으면 기본 옵션 값이 나타납니다.

참고: inspectBehavior() 함수의 동작은 applyBehaviorString 인수가 전달하는 정보에 따라서만 달라져야 합니다.dreamweaver. getDocumentDOM() 등을 통해 이 함수 내에서 사용자의 문서에 대한 기타 정보를 얻으려고 하지 마십시오.

인수applyBehaviorString


참고: HTML 요소에 'onClick="someBehavior(); return document.MM_returnValue;"'와 비슷한 코드가 포함되어 있고 비헤이비어 메뉴에서 새 비헤이비어를 추가하면, Dreamweaver는 새 비헤이비어 UI가 나타나는 즉시 inspectBehavior()를 호출하고 빈 문자열을 매개 변수로 전달합니다. 그러면 다음 예제와 같이 applyBehaviorString 매개 변수를 확인하십시오.

function inspectBehavior(enteredStr){

if(enteredStr){

//여기서 동작을 수행함}

}

반환값없음

예제Display Status Message.htm 파일에서 가져 온 inspectBehavior() 함수의 다음 인스턴스는 비헤이비어가 처음 적용되었을 때 사용자가 선택했던 메시지로 [매개 변수] 대화 상자의 [메시지] 필드를 채웁니다. function inspectBehavior(msgStr){

var startStr = msgStr.indexOf("'") + 1;

var endStr = msgStr.lastIndexOf("'");

if (startStr > 0 && endStr > startStr) {

document.theForm.message.value = ¬

unescQuotes(msgStr.substring(startStr,endStr));

}

}

참고: unescQuotes() 함수에 대한 자세한 내용은 Configuration/Shared/Common/Scripts/CMN폴더의 dwscripts.js 파일을 참조하십시오.


209

windowDimensions()


참고: 640 x 480 픽셀보다 큰 [매개 변수] 대화 상자를 원할 경우에만 이 함수를 정의하십시오.

인수platform

이 인수의 값은 사용자의 플랫폼에 따라 "macintosh" 또는 "windows"입니다.

반환값Dreamweaver는 "widthInPixels,heightInPixels" 형식의 문자열을 반환합니다.


예제windowDimensions()의 다음 인스턴스는 [매개 변수] 대화 상자의 크기를 648 x 520픽셀로 설정합니다.function windowDimensions(){

return "648,520";

}

210

17장: 서버 비헤이비어

Adobe Dreamweaver CS3은 사용자의 기준에 따라 레코드를 필터링하고, 레코드를 페이징하고, 결과 목록을 세부 정보 페이지에 링크하고, 결과 집합에 레코드를 삽입하는 등과 같은 서버측 작업을 수행하기 위해 문서에 서버 비헤이비어를 추가할 때 사용할 수 있는 인터페이스를 제공합니다. Dreamweaver 사용자가 동일한 런타임 코드를 문서에 반복해서 삽입할 경우, 자주 사용되는 이러한 코드 블록들로 문서 업데이트를 자동화하는 새 Extension을 만들 수 있습니다. 사용자 정의 서버 비헤이비어를 구현하는 서버 비헤이비어 구성 관리자 인터페이스를 사용하는 작업에 대한 자세한 내용은 Dreamweaver 시작하기에서 “사용자 정의 서버 비헤이비어 추가 ” 를 참조하십시오. 지원 서버 비헤이비어 파일을 사용한 작업 및 설정된 서버 비헤이비어와 상호 작용하는 함수 사용에 대한 자세한 내용은 이 장을 참조하십시오. 개별 함수에 대한 정보는 Dreamweaver API 참조 설명서에서 “서버 비헤이비어 함수” 및 “Extension 데이터 관리자 함수” 를 참조하십시오. Dreamweaver에서는 ASP.Net/C#, ASP.Net/VisualBasic, ASP/JavaScript, ASP/VBScript, ColdFusion, JSP, PHP/MySQL 등의 서버 모델에 대한 런타임 코드를 추가하는 서버 비헤이비어 Extension을 지원합니다.

이 장에서 사용되는 용어는 다음과 같습니다.

서버 비헤이비어 Extension 서버 비헤이비어 Extension은 서버측 코드와 Dreamweaver 사이의 인터페이스입니다. 서버 비헤이비어 Extension은 JavaScript와 HTML 그리고 특별히 Extension 데이터용으로 만들어진 Extension Data Markup Language(EDML)로 구성되어 있습니다. 이러한 파일의 예제는 서버 모델에 따라 정렬되어 Configuration/ServerBehaviors 폴더의 설치 디렉토리에 저장됩니다. Extension 스크립트를 작성할 때에는 dwscripts.applySB() 함수를 사용하여 Dreamweaver가 EDML 파일을 읽고, Extension 구성 요소를 검색하고, 적당한 코드 블록을 사용자 문서에 추가하도록 지시합니다.

서버 비헤이비어 인스턴스 Dreamweaver가 사용자의 문서에 코드 블록을 추가하면 삽입된 코드가 서버 비헤이비어의 인스턴스를 구성합니다. 사용자는 대부분의 서버 비헤이비어를 한 번 이상 적용할 수 있기 때문에 결과적으로 여러 서버 비헤이비어 인스턴스가 만들어집니다. 각 서버 비헤이비어 인스턴스는 Dreamweaver 인터페이스의 [서버 비헤이비어] 패널에 나열됩니다.

런타임 코드 런타임 코드는 서버 비헤이비어가 적용될 때 문서에 추가되는 일련의 코드 블록입니다. 이 코드 블록에는 보통 <% ... %> 태그에 둘러싸인 ASP 스크립트와 같은 일부 서버측 코드가 포함됩니다.

참여자 서버 비헤이비어 Extension은 코드 블록을 사용자의 문서에 삽입합니다. 코드 블록은 서버측 태그, HTML 태그 또는 웹 페이지에 서버측 기능성을 추가하는 속성 등 연속된 단일 스크립트 블록입니다. EDML 파일은 각 코드 블록을 참여자로 정의합니다. 지정된 서버 비헤이비어의 모든 참여자는 하나의 참여자 그룹을 구성합니다.

참고: 참여자, 참여자 그룹 및 Dreamweaver EDML 파일의 구조에 대한 자세한 내용은 211페이지의 “Extension Data Markup Language(EDML)”를 참조하십시오.

Dreamweaver 구조서버 비헤이비어 구성 관리자를 사용하여 Dreamweaver 고유의 Extension을 만들면 Dreamweaver 문서에 서버 비헤이비어 코드 삽입을 지원하는 여러 파일(EDML 및 HTML 스크립트 파일)이 만들어집니다. 일부 비헤이비어는 추가 기능의 수행을 위해 JavaScript 파일을 참조하기도 합니다. 이 구조는 API의 구현을 단순화하고 Dreamweaver의 배포 방식과 런타임 코드를 분리하기도 합니다. 여기에서는 이 파일을 수정하는 방법에 대해 설명합니다.

서버 비헤이비어 폴더 및 파일각 서버 비헤이비어의 UI(사용자 인터페이스)는 Configuration/ServerBehaviors/ServerModelName 폴더에 위치합니다. 여기서 ServerModelName에 사용되는 서버 형식은 ASP.NET_Csharp, ASP.NET_VB(Visual Basic), ASP_Js(JavaScript), ASP_Vbs(VBScript), ColdFusion, JSP, PHP_MySQL 또는 Shared(크로스 서버 모델 구현) 중의 하나입니다.


211

Extension Data Markup Language(EDML)서버 비헤이비어 구성 관리자를 사용할 때 생성되는 두 가지 EDML 파일은 서버 비헤이비어 구성 관리자에 제공하는 이름에 대응되는 그룹 EDML 파일과 참여자 EDML 파일입니다. 그룹 파일은 코드 블록을 나타내는 관련 참여자를 정의하고, 그룹은 개별 서버 비헤이비어를 만들기 위해 결합되는 참여자를 정의합니다.

그룹 파일그룹 파일은 참여자 목록을 포함하고 있으며 참여자 파일은 모든 서버 모델 고유의 코드 데이터를 가지고 있습니다. 참여자 파일은 하나 이상의 Extension에서 사용할 수 있으므로 여러 그룹 파일이 동일한 참여자 파일을 참조할 수 있습니다.

다음 예제는 서버 비헤이비어 그룹 EDML 파일의 고급 뷰입니다. 요소 및 속성의 전체 목록은 221페이지의 “EDML 그룹 파일 태그”를 참조하십시오.<group serverBehavior="Go To Detail Page.htm" dataSource="Recordset.htm">

<groupParticipants selectParticipant="goToDetailPage_attr">

<groupParticipant name="moveTo_declareParam"0partType="member"/>

<groupParticipant name="moveTo_keepParams"0partType="member"/>

<groupParticipant name="goToDetailPage_attr" partType="identifier" />

</groupParticipants>

</group>

groupParticipants 블록 태그에서 각 groupParticipant 태그는 사용할 코드 블록이 포함된 EDML 참여자 파일을 나타냅니다. name 속성의 값은 참여자 파일 이름에서 확장명 .edml을 뺀 것입니다(예: moveTo_declareParam).

참여자 파일참여자는 서버 태그, HTML 태그, 속성 등 페이지의 단일 코드 블록을 나타냅니다. 참여자 파일은 Dreamweaver 문서 제작자가 사용하게 될 그룹 파일에 나열되어야 합니다. 서버 그룹 파일은 단일한 참여자 파일을 사용할 수 있습니다.

예를 들어, moveTo_declareParam.edml 파일에는 다음 코드가 포함됩니다.<participant>

<quickSearch><![CDATA[MM_paramName]]></quickSearch>

<insertText location="aboveHTML+80">

<![CDATA[

<% var MM_paramName = ""; %>

]]>

</insertText>

<searchPatterns whereToSearch="directive">

<searchPattern><![CDATA[/var\s*MM_paramName/]]></searchPattern>

</searchPatterns>

</participant>

Dreamweaver가 서버 비헤이비어를 문서에 추가할 때는 코드를 삽입할 위치, 코드의 형태, Dreamweaver 제작자 또는 데이터가 런타임에 교체한 매개 변수를 비롯한 자세한 정보가 필요합니다. 각 참여자 EDML 파일에는 각 코드 블록에 대한 이런 세부 정보가 기술되어 있습니다. 특히, 참여자 파일은 다음 데이터를 설명합니다.

• 고유한 인스턴스를 위치시킬 코드 및 장소는 다음 예제에서와 같이 insertText 태그 매개 변수에 의해 정의됩니다.<insertText location="aboveHTML+80">

• 이미 페이지에 존재하는 인스턴스를 인식하는 방법은 다음 예제와 같이 searchPatterns 태그에 의해 정의됩니다.<searchPatterns whereToSearch="directive">

<searchPattern><![CDATA[/var\s*MM_paramName/]]></searchPattern>

</searchPatterns>

searchPatterns 블록 태그에서 각 searchPattern 태그에는 런타임 코드 인스턴스를 찾아 특정 매개 변수를 추출하는 패턴이 들어 있습니다. 자세한 내용은 241페이지의 “서버 비헤이비어 기술”을 참조하십시오.


212

스크립트 파일각 서버 비헤이비어에는 서버 비헤이비어 코드와 Dreamweaver 인터페이스의 통합을 관리하는 스크립트에 대한 링크와 함수를 포함하는 HTML 파일도 있습니다. 이 파일에서 편집에 사용할 수 있는 함수에 대해서는 218페이지의 “서버 비헤이비어 구현 함수”에서 설명합니다.

간단한 서버 비헤이비어 예제이 예제에서는 Dreamweaver가 생성하는 파일 및 이 파일의 처리 방법을 볼 수 있도록 새 서버 비헤이비어를 만드는 과정을 보여 줍니다. 서버 비헤이비어 구성 관리자 인터페이스 사용에 대한 자세한 내용은 Dreamweaver 시작하기에서 “사용자 정의 서버 비헤이비어 추가 ” 를 참조하십시오. 이 예제는 ASP 서버로부터 “Hello World” 를 표시합니다. Hello World 비헤이비어는 참여자를 하나만 가지고 있으며(단일 ASP 태그) 수정하거나 페이지에 다른 어떤 것도 추가하지 않습니다.

비헤이비어를 만들려면 다음 단계를 수행합니다.

• 212페이지의 “동적 페이지 문서 만들기”

• 212페이지의 “새 서버 비헤이비어 정의”

• 212페이지의 “삽입할 코드 정의”

동적 페이지 문서 만들기먼저, 새 ASP 문서를 만듭니다.

새 동적 페이지 문서를 만들려면1 Dreamweaver에서 [파일] > [새 파일] 메뉴 옵션을 선택합니다.

2 [새 문서] 대화 상자의 [범주:]에서 [동적 페이지]를 선택하고 [동적 페이지:]에서 [ASP JavaScript]를 선택합니다.

3 [만들기]를 클릭합니다.

새 서버 비헤이비어 정의다음에는 새 서버 비헤이비어를 정의합니다.

서버 비헤이비어 구성 관리자를 사용하여 새 서버 비헤이비어를 정의합니다.참고: [서버 비헤이비어] 패널이 열리지 않거나 표시되지 않는 경우에는 [윈도우] > [서버 비헤이비어] 메뉴 옵션을 선택합니다.

1 [서버 비헤이비어] 패널에서 플러스(+) 버튼을 선택하고 [새 서버 비헤이비어] 메뉴 옵션을 선택합니다.

2 [새 서버 비헤이비어 만들기] 대화 상자의 [문서 유형:]에서 [ASP JavaScript]를 선택하고 [이름:]에서 [Hello World]를 선택합니다. “기존 서버 비헤이비어 복사” 체크 상자는 선택하지 않습니다.


삽입할 코드 정의마지막으로, 삽입할 코드를 정의합니다.

삽입할 코드를 정의하려면:1 [삽입할 코드 블록]의 플러스(+) 버튼을 선택합니다.

2 [새 코드 블록 생성] 대화 상자에 Hello_World_block1을 입력합니다. 이 정보는 자동으로 입력될 수도 있습니다.


4 [코드 블록] 텍스트 필드에 <% Response.Write("Hello World") %>를 입력합니다.

5 문서에서의 코드 위치를 사용자가 제어할 수 있도록 [코드 삽입] 팝업 메뉴에서 [선택 영역에 상대적]을 선택합니다.

6 [상대적 위치] 팝업 메뉴에서 [선택 영역 다음]을 선택합니다.


213


[서버 비헤이비어] 패널을 보면 플러스(+) 메뉴의 팝업 목록에 새 서버 비헤이비어가 있습니다. 또한 Dreamweaver 파일의 설치 폴더에서 Configuration/ServerBehaviors/ASP_Js 폴더에는 이제 다음 세 파일이 포함됩니다.

• 그룹 파일: Hello World.edml

• 참여자 파일: Hello World_block1.edml

• 스크립트 파일: Hello World.htm

참고: 다중 사용자 구성에서 작업하는 경우, 이 파일은 Application Data 폴더에 나타납니다.

서버 비헤이비어 API 함수가 호출되는 방식서버 비헤이비어 API 함수는 다음 시나리오에서 호출됩니다.

• 문서가 열리고 다시 참여자가 편집될 때 findServerBehaviors() 함수가 호출됩니다. 사용자의 문서에서 서버 비헤이비어의 인스턴스를 찾습니다. 검색된 인스턴스마다 findServerBehaviors()는 JavaScript 객체를 만들고 JavaScript 속성을 사용하여 이 객체에 대한 상태 정보를 첨부합니다.

• JacaScript 객체가 구현되었으면, Dreamweaver는 findServerBehaviors() 함수가 모두 호출된 후에 사용자의 문서에서 검색된 각 비헤이비어 인스턴스에 대해 analyzeServerBehavior() 함수를 호출합니다.

findServerBehaviors() 함수는 비헤이비어 객체를 만들 때 대개 네 가지 속성, 즉 incomplete, participants, selectedNode 및 title을 설정합니다. 그러나 다른 모든 서버 비헤이비어가 해당 인스턴스를 찾을 때까지 일부 속성을 설정하는 것을 보류하는 것이 좋을 때도 있습니다. 예를 들어, [다음 레코드로 이동] 비헤이비어에는 링크 객체와 레코드세트 객체라는 두 참여자가 있습니다. 이 경우, 레코드세트는 해당 인스턴스를 모두 찾기 때문에 findServerBehaviors() 함수에서 레코드세트 객체를 찾는 것보다는 레코드세트 비헤이비어의 findServerBehaviors() 함수가 실행될 때까지 기다리는 것이 좋습니다.

[다음 레코드로 이동] 비헤이비어의 analyzeServerBehavior() 함수가 호출되면 문서의 서버 비헤이비어 객체가 모두 포함된 배열을 얻게 됩니다. 함수는 이 배열에서 자신의 레코드세트 객체를 찾을 수 있습니다.

분석하는 동안 사용자 문서의 태그 하나가 둘 이상의 비헤이비어에 의해 해당 비헤이비어의 인스턴스로 식별되는 경우도 있습니다. 예를 들어, [동적 속성] 비헤이비어에 대한 findServerBehaviors() 함수는 사용자 문서의 input 태그와 연관된 [동적 속성] 비헤이비어의 인스턴스를 찾아낼 수 있습니다. 동시에, [동적 텍스트 필드] 비헤이비어에 대한 findServerBehaviors() 함수는 동일한 input 태그를 통해 [동적 텍스트 필드] 비헤이비어의 인스턴스를 찾아낼 수 있습니다. 결과적으로 [서버 비헤이비어] 패널에는 [동적 속성] 블록과 [동적 텍스트 필드]가 표시됩니다. 이 문제를 해결하려면 analyzeServerBehavior() 함수는 중복된 서버 비헤이비어 중 하나를 제외하고 모두 삭제해야 합니다.

특정 서버 비헤이비어를 삭제하기 위해 analyzeServerBehavior() 함수는 서버 비헤이비어의 deleted 속성을 true로 설정할 수 있습니다. Dreamweaver가 analyzeServerBehavior() 함수 호출을 종료한 후에도 deleted 속성이 계속 true이면 이 비헤이비어는 목록에서 삭제됩니다.

• 사용자가 [서버 비헤이비어] 패널에서 플러스(+) 버튼을 클릭하면 팝업 메뉴가 나타납니다.

메뉴의 내용을 결정하기 위해 Dreamweaver는 먼저 비헤이비어와 같은 폴더에서 ServerBehaviors.xml 파일을 찾습니다. ServerBehaviors.xml은 해당 메뉴에 나타나야 하는 HTML 파일을 참조합니다.

참조된 HTML 파일에 제목 태그가 있으면 해당 제목 태그 내용이 메뉴에 나타납니다. 예를 들어, ServerBehaviors/ASP_Js/ GetRecords.htm 파일에 <title>Get More Records</title> 태그가 있으면 Get More Records라는 텍스트가 메뉴에 나타납니다.

파일에 title 태그가 없으면 파일 이름이 메뉴에 나타납니다. 예를 들어, GetRecords.htm에 제목 태그가 없으면 GetRecords라는 텍스트가 메뉴에 나타납니다.

ServerBehaviors.xml 파일이 없거나 폴더에 ServerBehaviors.xml에서 언급되지 않은 HTML 파일이 하나 이상 있으면 Dreamweaver는 각 파일의 제목 태그를 확인하고 해당 제목 태그나 파일 이름을 사용하여 메뉴를 채웁니다.

ServerBehaviors 폴더의 파일을 메뉴에 표시하지 않으려면 다음 명령문을 HTML 파일의 첫 번째 행에 추가합니다.

214



• 사용자가 메뉴에서 한 항목을 선택하면 canApplyServerBehavior() 함수가 호출됩니다. 이 함수가 true를 반환하면 대화 상자가 나타납니다. 사용자가 [확인]을 클릭하면 applyServerBehavior() 함수가 호출됩니다.

• 사용자가 기존 서버 비헤이비어를 두 번 클릭하여 편집하면 Dreamweaver는 해당 대화 상자를 표시하고 body 태그에 onLoad 핸들러가 있으면 이 핸들러를 실행한 다음 inspectServerBehavior() 함수를 호출합니다. inspectServerBehavior() 함수는 양식 요소를 현재 인수 값으로 채웁니다. 사용자가 [확인]을 클릭하면 Dreamweaver는 applyServerBehavior() 함수를 다시 호출합니다.

• 사용자가 마이너스(-) 버튼을 클릭하면 deleteServerBehavior() 함수가 호출됩니다. 이deleteServerBehavior() 함

수는 문서에서 비헤이비어를 제거합니다.

• 사용자가 특정 서버 비헤이비어를 선택하고 [잘라내기] 또는 [복사] 명령을 사용하면 Dreamweaver는 선택한 서버 비헤이비어를 나타내는 객체를 copyServerBehavior() 함수로 전달합니다. copyServerBehavior() 함수는 나중에 서버 비헤이비어 객체를 붙여넣을 때 필요한 기타 속성을 해당 서버 비헤이비어 객체에 추가합니다.

copyServerBehavior() 함수가 반환한 후, Dreamweaver는 서버 비헤이비어 객체를 클립보드에 넣을 수 있는 형태로 변환합니다. Dreamweaver는 객체를 변환할 때 객체를 참조하는 모든 속성을 삭제합니다. 숫자, 부울 값 또는 문자열이 아닌 해당 객체의 모든 속성을 잃게 됩니다.

사용자가 [붙여넣기] 명령을 사용하면 Dreamweaver는 클립보드의 내용을 언패킹하여 새 서버 비헤이비어 객체를 생성합니다. 새 객체는 객체를 참조하는 속성이 없는 것을 제외하고는 원래 객체와 똑같습니다. Dreamweaver는 pasteServerBehavior() 함수에 새 서버 비헤이비어 객체를 전달합니다. pasteServerBehavior() 함수는 이 비헤이비어를 사용자의 문서에 추가합니다. pasteServerBehavior() 함수가 반환된 후, Dreamweaver는 findServerBehaviors() 함수를 호출하여 사용자 문서에 있는 모든 서버 비헤이비어가 포함된 새 목록을 얻습니다.

사용자는 한 문서의 비헤이비어를 복사하여 다른 문서에 붙여넣을 수 있습니다. copyServerBehavior() 및 pasteServerBehavior() 함수는 지정된 비헤이비어 객체의 속성에 따라 정보를 교환합니다.

서버 비헤이비어 API다음 API 함수로 서버 비헤이비어를 관리할 수 있습니다.

analyzeServerBehavior()

지원 버전Dreamweaver UltraDev 1

설명서버 비헤이비어가 incomplete 및 deleted 속성을 설정할 수 있도록 합니다.

해당 페이지의 모든 서버 비헤이비어에 대해 findServerBehaviors() 함수가 호출된 후, 사용자 문서에 포함된 모든 비헤이비어의 배열이 나타납니다. 이 배열의 각 JavaScript 객체에 대해 analyzeServerBehavior() 함수가 호출됩니다. 예를 들어, [동적 텍스트] 비헤이비어의 경우 Dreamweaver는 DynamicText.htm 또는 DynamicText.js에서 analyzeServerBehavior() 함수를 호출합니다.

analyzeServerBehavior() 함수의 용도 중 하나는 비헤이비어 객체에 incomplete, participants, selectedNode 및 title과 같은 속성을 설정하는 것입니다. findServerBehaviors()가 사용자의 문서에서 전체 서버 비헤이비어 목록을 생성한 후에 이 작업을 수행하는 것이 더 쉬울 때도 있습니다.

analyzeServerBehavior() 함수의 다른 용도는 사용자의 문서에서 두 개 이상의 비헤이비어가 동일한 태그를 참조할 때 알리는 것입니다. 이 경우, deleted 속성은 배열에서 한 비헤이비어를 제외한 모든 비헤이비어를 제거합니다.

Recordset1, DynamicText1 및 DynamicText2 서버 비헤이비어가 페이지에 존재한다고 가정해 보십시오. 이 중 두 개 DynamicText 서버 비헤이비어 모두에 대해 Recordset1이 해당 페이지에 있어야 합니다. findServerBehaviors() 함수에 의해 서버 비헤이비어가 검색된 후, Dreamweaver는 이 세 서버 비헤이비어에 대해 analyzeServerBehavior() 함수를 호출합니다. DynamicText1에 대해 analyzeServerBehavior()가 호출되면 이 함수는 Recordset1에 속한 비헤이비어를


215

찾기 위해 페이지에 있는 모든 서버 비헤이비어의 배열을 검색합니다. Recordset1에 속하는 서버 비헤이비어 객체를 찾을 수 없으면 incomplete 속성이 true로 설정되고 [서버 비헤이비어] 패널에 느낌표가 나타나도록 하여 문제가 있음을 사용자에게 알립니다. 마찬가지로, DynamicText2에 대해 analyzeServerBehavior()가 호출되면 함수는 Recordset1에 속하는 객체를 찾습니다. Recordset1은 다른 서버 비헤이비어에 종속되어 있지 않기 때문에 이 예제에서 analyzeServerBehavior() 함수를 정의할 필요는 없습니다.

인수serverBehavior, [serverBehaviorArray]

• serverBehavior 인수는 분석할 비헤이비어를 나타내는 JavaScript 객체입니다.

• [serverBehaviorArray] 인수는 특정 페이지에서 발견된 모든 서버 비헤이비어를 나타내는 JavaScript 객체의 배열입니다.

반환값없음

applyServerBehavior()


설명대화 상자의 양식 요소에서 값을 읽어 해당 비헤이비어를 사용자의 문서에 추가합니다. 사용자가 [서버 비헤이비어] 대화 상자에서 [확인]을 클릭하면 이 함수가 호출됩니다. 이 함수가 성공적으로 반환하면 [서버 비헤이비어] 대화 상자가 닫힙니다. 이 함수가 실패하면 [서버 비헤이비어] 대화 상자를 닫지 않은 채 오류 메시지가 표시됩니다. 이 함수는 사용자의 문서를 편집할 수 있습니다.

자세한 내용은 219페이지의 “dwscripts.applySB()”를 참조하십시오.

인수serverBehavior

serverBehavior JavaScript 객체는 해당 서버 비헤이비어를 나타납니다. 그 이유는 기존 서버 비헤이비어를 수정할 필요가 있기 때문입니다. 이것이 새 비헤이비어이면 인수는 null이 됩니다.

반환값이 함수가 성공하면 Dreamweaver는 빈 문자열을 반환하고 이 함수가 실패하면 오류 메시지를 반환합니다.

canApplyServerBehavior()


설명비헤이비어가 적용될 수 있는지 여부를 판별합니다. Dreamweaver는 [서버 비헤이비어] 대화 상자가 나타나기 전에 이 함수를 호출합니다. 이 함수가 true를 반환하면 [서버 비헤이비어] 대화 상자가 나타납니다. 이 함수가 false를 반환하면 [서버 비헤이비어] 대화 상자도 나타나지 않고 서버 비헤이비어를 추가하려는 시도도 중단됩니다.


serverBehavior JavaScript 객체는 해당 비헤이비어를 나타냅니다. 그 이유는 기존 비헤이비어를 수정할 필요가 있기 때문입니다. 이것이 새 비헤이비어이면 인수는 null이 됩니다.

반환값부울 값이 반환되며, 비헤이비어가 적용되면 true를 반환하고 그렇지 않으면 false를 반환합니다.


216

copyServerBehavior()


설명copyServerBehavior() 함수 구현은 선택 사항입니다. 사용자는 지정된 서버 비헤이비어의 인스턴스를 복사할 수 있습니다. 다음 예제에서는 레코드세트에 대해 이 함수가 구현되어 있습니다. 사용자가 [서버 비헤이비어] 패널이나 [바인딩] 패널에서 레코드세트를 선택한 경우 [복사] 명령을 사용하면 비헤이비어가 클립보드에 복사되고 [잘라내기] 명령을 사용하면 비헤이비어가 잘려 클립보드에 놓입니다. 이 함수를 구현하지 않은 서버 비헤이비어의 경우 [복사]와 [잘라내기] 명령은 아무 것도 하지 않습니다. 자세한 내용은 213페이지의 “서버 비헤이비어 API 함수가 호출되는 방식”을 참조하십시오.

copyServerBehavior() 함수는 문자열로 변환될 수 있는 비헤이비어 객체 속성에 따라 pasteServerBehavior() 함수를 사용하여 정보를 교환합니다. 클립보드에는 순수 텍스트만 보관되므로 문서의 participant 노드를 분석하여 결과 텍스트를 보조 속성에 저장해야 합니다.

참고: 또한 pasteServerBehavior() 함수도 구현되어야 사용자가 Dreamweaver 문서에 비헤이비어를 붙여넣을 수 있습니다.


• serverBehavior JavaScript 객체는 해당 비헤이비어를 나타냅니다.

반환값부울 값이 반환되며, 비헤이비어가 클립보드에 성공적으로 복사되면 true를 반환하고 그렇지 않으면 false를 반환합니다.

deleteServerBehavior()


설명사용자의 문서에서 비헤이비어를 제거합니다. 사용자가 [서버 비헤이비어] 패널에서 마이너스(-) 버튼을 클릭하면 이 함수가 호출됩니다. 이 함수는 사용자의 문서를 편집할 수 있습니다.

자세한 내용은 219페이지의 “dwscripts.deleteSB()”를 참조하십시오.


• serverBehavior JavaScript 객체는 해당 비헤이비어를 나타냅니다.

반환값없음

displayHelp()

설명이 함수를 정의하면 대화 상자의 [확인]과 [취소] 버튼 아래에 [도움말] 버튼이 나타납니다. 사용자가 [도움말] 버튼을 클릭하면 이 함수가 호출됩니다.

인수없음

반환값없음


217







}

findServerBehaviors()


설명해당 인스턴스를 찾기 위해 사용자의 문서를 검색합니다. 검색된 각 인스턴스에 대해 findServerBehaviors()는 JavaScript 객체를 만들고 이 객체의 JavaScript 속성으로 상태 정보를 첨부합니다.

필수 속성 네 가지는 incomplete, participants, title 및 selectedNode입니다. 필요에 따라 추가 속성을 설정할 수 있습니다.

자세한 내용은 Dreamweaver API 참조 설명서에서 218페이지의 “dwscripts.findSBs()” 및 dreamweaver.getParticipants()를 참조하십시오.

인수없음

반환값Dreamweaver는 JavaScript 객체의 배열을 반환합니다. 이 배열의 길이는 해당 페이지에서 검색되는 비헤이비어 인스턴스의 수와 같습니다.

inspectServerBehavior()


설명지정된 비헤이비어 객체에 따라 서버 비헤이비어 대화 상자의 설정을 확인합니다. 사용자가 [서버 비헤이비어] 대화 상자를 열 때 Dreamweaver는 inspectServerBehavior() 함수를 호출합니다. 사용자가 기존 비헤이비어를 편집할 때만 이 함수가 호출됩니다.


serverBehavior 인수는 비헤이비어를 나타내는 JavaScript 객체입니다. 이 객체는 findServerBehaviors()가 반환하는 객체와 동일합니다.

반환값없음


218

pasteServerBehavior()


설명이 함수가 구현되면 사용자는 pasteServerBehavior() 함수를 사용하여 지정된 서버 비헤이비어의 인스턴스를 붙여넣습니다. 사용자가 서버 비헤이비어를 붙여넣으면 Dreamweaver는 클립보드의 내용을 구성하고 새 비헤이비어 객체를 생성합니다. 새 객체는 포인터 속성이 부족한 것을 제외하고는 원래 객체와 같습니다. Dreamweaver는 새 서버 비헤이비어 객체를 pasteServerBehavior() 함수에 전달합니다. pasteServerBehavior() 함수는 비헤이비어 객체의 속성에 따라 사용자의 문서에 추가할 내용을 결정합니다. 그런 다음, pasteServerBehavior() 함수는 해당 비헤이비어를 사용자의 문서에 추가합니다. pasteServerBehavior()가 반환한 후 Dreamweaver는 findServerBehaviors() 함수를 호출하여 사용자 문서에 있는 모든 서버 비헤이비어가 포함된 새 목록을 얻습니다.

pasteServerBehavior() 함수 구현은 선택 사항입니다. 자세한 내용은 213페이지의 “서버 비헤이비어 API 함수가 호출되는 방식”을 참조하십시오.

참고: 이 함수를 구현하면 copyServerBehavior() 함수도 구현해야 합니다.

인수behavior

behavior JavaScript 객체는 해당 비헤이비어를 나타냅니다.

반환값부울 값이 반환되며, 클립보드로부터 해당 비헤이비어를 붙여넣는 데 성공하면 true를 반환하고 그렇지 않으면 false를 반환합니다.

서버 비헤이비어 구현 함수이 함수는 HTML 스크립트 파일에서 또는 HTML 스크립트 파일 목록의 지정된 JavaScript 파일에서 추가하거나 편집할 수 있습니다.

dwscripts.findSBs()

지원 버전Dreamweaver MX. Dreamweaver의 이전 버전에 사용되던 findSBs() 함수가 이 함수로 대체되었습니다.

설명현재 페이지에서 서버 비헤이비어의 모든 인스턴스와 모든 참여자를 찾습니다. 제목, 유형, 참여자 배열, 무게 배열, 형식 배열, selectedNode 값 및 불완전한 플래그를 설정합니다. 이 함수는 레코드세트, 이름 및 열 이름 등과 같은 사용자 정의 가능한 속성의 배열을 저장하는 매개 변수 객체도 만듭니다. findServerBehaviors() 함수에서 이 배열을 반환할 수 있습니다.

인수serverBehaviorTitle

serverBehaviorTitle 인수는 EDML 제목에 아무 제목도 지정되지 않았을 때 사용되는 제목 문자열 선택 사항입니다. 이 기능은 지역화 작업에 유용합니다.

반환값Dreamweaver는 필수 속성이 정의되는 JavaScript 객체의 배열을 반환합니다. 서버 비헤이비어의 인스턴스가 페이지에 나타나지 않을 때는 빈 문자열을 반환합니다.


219

예제다음 예제에서는 현재 사용자 문서에서 특정 서버 비헤이비어의 모든 인스턴스를 찾습니다.function findServerBehaviors() {

allMySBs = dwscripts.findSBs();

return allMySBs;

}

dwscripts.applySB()

지원 버전Dreamweaver MX. Dreamweaver의 이전 버전에 있는 applySB() 함수가 이 함수로 대체되었습니다.

설명서버 비헤이비어의 런타임 코드를 삽입하거나 업데이트합니다. sbObj 인수에 null 값이 있으면 새 런타임 코드가 삽입됩니다. 그렇지 않으면 sbObj 객체가 알려 주는 기존 런타임 코드로 업데이트됩니다. 사용자 설정은 JavaScript 객체에 속성으로 설정되고 paramObj로 전달되어야 합니다. 이 설정은 EDML 삽입 텍스트에 @@paramName@@으로 선언된 모든 인수와 일치해야 합니다.

인수paramObj, sbObj

• paramObj 인수는 사용자 매개 변수를 포함하는 객체입니다.

• sbObj는 기존 서버 비헤이비어를 업데이트할 경우, 이전 서버 비헤이비어 객체가 됩니다. 그렇지 않으면 null이 됩니다.

반환값부울 값이 반환되며, 서버 비헤이비어를 사용자의 문서에 추가하는 데 성공했으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

예제다음 예제에서는 paramObj 객체를 사용자의 입력으로 채우고 dwscripts.applySB() 함수를 호출하여 입력 내용 및 서버 비헤이비어 sbObj를 전달합니다.function applyServerBehaviors(sbObj) {

// 여기서 모든 UI 값을 얻습니다.paramObj = new Object();

paramObj.rs= rsName.value;

paramObj.col = colName.value;

paramObj.url = urlPath.value;

paramObj.form__tag = formObj;

dwscripts.applySB(paramObj, sbObj);

}

dwscripts.deleteSB()

지원 버전Dreamweaver MX. Dreamweaver의 이전 버전에 있는 deleteSB()가 이 함수로 대체되었습니다.

설명sbObj 서버 비헤이비어 인스턴스의 모든 참여자를 삭제합니다. EDML 파일이 delete 태그로 특별한 삭제 지침을 지정하지 않으면 참여자 전체가 삭제됩니다. 둘 이상의 서버 비헤이비어 인스턴스(참조 수 > 1)에 속하는 참여자는 삭제되지 않습니다.

인수sbObj

• sbObj는 사용자의 문서에서 제거할 서버 비헤이비어 객체의 인스턴스입니다.

반환값없음


220

예제다음 예제에서는 EDML 파일의 delete 태그로 보호되는 참여자를 제외한 sbObj 서버 비헤이비어의 모든 참여자를 삭제합니다. function deleteServerBehavior(sbObj) {

dwscripts.deleteSB(sbObj);

}

EDML 파일 편집하기파일을 편집할 때는 Dreamweaver 코딩 규칙을 따라야 합니다. 한 요소가 다른 요소에 종속되는 경우가 있으므로 주의해야 합니다. 예를 들어, 삽입한 태그를 업데이트할 때는 검색 패턴도 업데이트해야 할 경우가 있습니다.

참고: EDML 파일은 Dreamweaver MX의 새 기능입니다. 레거시 서버 비헤이비어로 작업하는 경우에는 Dreamweaver 확장 설명서의 이전 버전을 참조하십시오.

일반 표현식일반 표현식을 사용할 경우에는 JavaScript 1.5에 구현된 것을 따라야 합니다. 또한 서버 비헤이비어 EDML 파일에 언제 사용하는 것이 적합한지 알아야 합니다. 예를 들어, 일반 표현식은 quickSearch 값에서는 사용될 수 없습니다. 하지만 데이터 검색 및 추출 작업을 위해 searchPattern 태그의 내용에는 사용됩니다.

일반 표현식은 특별한 의미가 할당된 문자(메타 문자)를 사용하여 미리 정의된 규칙에 따라 텍스트를 나타내고 분할하고 처리하여 텍스트 문자열을 설명합니다. 일반 표현식은 패턴을 나타내는 표준 방법을 제공하기 때문에 강력한 파싱 및 처리 도구입니다.

JavaScript 1.5에 대한 참조서에는 일반 표현식을 다루는 부분이 있습니다. 이 절에서는 Dreamweaver 서버 비헤이비어 EDML 파일이 런타임 코드에서 인수를 찾아 해당 값을 추출하기 위해 정규식을 사용하는 방식을 알아봅니다. 사용자가 서버 비헤이비어를 편집할 때마다 이전의 인수 값은 런타임 코드의 인스턴스에서 추출되어야 합니다. 추출 과정에 일반 표현식을 사용할 수 있습니다.

다음 표에 설명된 대로 서버 비헤이비어 EDML 파일에 유용한 일부 메타 문자와 메타 시퀀스(특수 문자 그룹화)를 이해해야 합니다.

EDML 태그 <searchPatterns whereToSearch="directive">는 런타임 코드가 검색될 필요가 있다고 선언합니다. 각 <searchPattern>...</searchPattern> 하위 태그는 식별해야 할 패턴을 런타임 코드에 정의합니다. Redirect If Empty 예제에 대해 두 가지 패턴이 있습니다.

다음 예제에서는 <% if (@@rs@@.EOF) Response.Redirect("@@new__url@@"); %>로부터 인수 값을 추출하기 위해 문자열 rs 및 new__url을 식별하는 일반 표현식을 작성합니다.<searchPattern paramNames="rs,new__url">

/if d ((\w+)\.EOF\) Response\.Redirect$"([^\r\n]*)"$/i

</searchPattern>

이 과정에서 사용자의 문서를 검색하여 일치하는 것이 있으면 인수 값을 추출합니다. 첫 번째 괄호 하위 표현식(\w+)은 rs에 대한 값을 추출합니다. 두 번째 하위 표현식([^\r\n]*)은 new_url에 대한 값을 추출합니다.

참고: 문자 시퀀스 “[^\r\n]*” 은 Macintosh 및 Windows에서 줄 바꿈을 제외한 모든 문자에 대응됩니다.

일반 표현식 설명

\ 이스케이프 특수 문자. 예를 들어, \.는 메타 문자를 다시 리터럴 마침표로 되돌립니다. \/는 정방향 슬래시를 해당 리터럴이 의미하는 것으로 되돌립니다. \)는 괄호를 해당 리터럴이 의미하는 것으로 되돌립니다.

/ ... /i 대소문자 구분 없이 메타 시퀀스를 찾습니다

( ...) 메타 시퀀스 안에 하위 표현식을 만들어 괄호로 묶어 표시합니다.

\s* 공백을 찾습니다.


221

EDML 구조에 대한 참고 항목서버 비헤이비어 그룹에는 고유한 파일 이름을 사용해야 합니다. 연관된 참여자 파일을 한 그룹 파일만 사용하는 경우, 그 참여자 파일 이름을 해당 그룹 이름과 일치시킵니다. 이 규칙을 사용할 경우, 서버 비헤이비어 그룹 파일 updateRecord.edml은 참여자 파일 updateRecord_init.edml과 함께 동작합니다. 참여자 파일이 서버 비헤이비어 그룹에서 공유될 가능성이 있으면 이 파일에 대해 설명하는 고유한 이름을 지정합니다.

참고: EDML 이름 공간은 폴더 구조에 상관 없이 공유되므로 반드시 고유한 파일 이름을 사용해야 합니다. 파일 이름은 Macintosh 제한 사항에 따라 확장명 .edml을 포함하여 31자를 넘어서는 안됩니다.

서버 비헤이비어의 런타임 코드는 EDML 파일 안에 있습니다. EDML 파서는 런타임 코드와 EDML 마크업을 혼동해서는 안되므로, 런타임 코드 앞뒤에 CDATA를 첨부해야 합니다. CDATA 태그는 문자 데이터를 나타내며 EDML 마크업이 아닌 텍스트는 무엇이든 가능합니다. CDATA 태그를 사용할 때 EDML 파서는 이 태그 안의 내용을 마크업으로 해석하는 대신, 일반 텍스트 블록으로 인식합니다. CDATA 표시된 블록은 <![CDATA[로 시작하고 ]]>로 끝납니다.

Hello, World 텍스트를 삽입할 때는 다음 예제와 같이 EDML을 지정하는 것이 간단합니다.<insertText>Hello, World</insertText>

그러나 <img src='foo.gif'>와 같은 태그가 포함된 내용을 삽입할 때는 EDML 파서를 혼동할 수 있습니다. 그 경우, 다음 예제에서와 같이 CDATA 구성에 내용을 포함시킵니다.<insertText><![CDATA[<img src='foo.gif'>]]></insertText>

ASP 런타임 코드는 다음 예제와 같이 CDATA 태그로 묶여 있습니다.<![CDATA[

<% if (@@rs@@.EOF) Response.Redirect("@@new__url@@"); %>

]]

CDATA 태그 때문에 태그 내의 다른 내용과 함께 ASP 태그 <%= %>는 처리되지 않습니다. 대신, EDM(Extension Data Manager)은 다음 예제에 표시된 대로 해석되지 않은 텍스트를 받습니다.<% if (Recordset1.EOF) Response.Redirect("http://www.Adobe.com"); %>

다음 EDML 정의에서 CDATA 태그가 표시될 적절한 위치가 예제에 표시됩니다.

EDML 그룹 파일 태그이러한 태그와 속성은 EDML 그룹 파일 내에서 유효합니다.

<group>

설명이 태그에는 참여자 그룹에 대한 모든 세부 사항이 포함됩니다.

부모없음

유형블록 태그

필수예

http://www.Adobe.com


222

<group> 속성다음 항목은 해당 그룹 태그의 유효한 속성입니다.

버전

설명이 속성은 현재의 서버 비헤이비어를 처리하는 Dreamweaver 서버 비헤이비어가 대상으로 하는 Dreamweaver 버전을 정의합니다. Dreamweaver CS3의 버전 번호는 9입니다. 버전이 지정되어 있지 않으면 Dreamweaver는 버전 7을 기본값으로 사용합니다. Dreamweaver 버전 9.0의 경우, 서버 비헤이비어 구성 관리가 만드는 모든 그룹 및 참여자는 버전 속성을 7.0으로 설정합니다. 이 속성의 그룹 버전은 현재 아무 영향을 주지 않습니다.

부모group

유형속성

필수아니오

serverBehavior

설명serverBehavior 속성은 그룹을 사용할 수 있는 서버 비헤이비어를 지정합니다. 그룹의 참여자인 quickSearch 문자열이 문서에서 검색되면 serverBehavior 속성에 표시된 서버 비헤이비어는 Dreamweaver가 findServerBehaviors()를 호출하도록 합니다.

경우에 따라, 여러 그룹이 단일 서버 비헤이비어와 연결되어 있으면 해당 서버 비헤이비어는 사용할 특정 그룹을 결정해야 합니다.

부모group

유형속성

필수아니오

값이 값은 다음 예제에서와 같이 Configuration/ServerBehaviors폴더에 있는 서버 비헤이비어 HTML 파일의 정확한 이름이며, 경로는 표시되지 않습니다.<group serverBehavior="redirectIfEmpty.htm">

dataSource

설명이 고급 기능은 Dreamweaver에 추가될 수 있는 새 데이터 소스를 지원합니다.

서버 비헤이비어의 여러 버전은 사용하는 데이터 소스에 따라 달라질 수 있습니다. 예를 들어, 반복 영역 서버 비헤이비어는 표준 Recordset.htm 데이터 소스에 맞게 디자인되었습니다. Dreamweaver가 COM 객체와 같은 새 데이터 소스 유형을 지원하도록 확장되었으면 반복 영역의 다른 구현을 사용하여 그룹 파일에 dataSource="COM.htm"을 설정할 수 있습니다. 그런 다음, 새 데이터 소스가 선택되면 반복 영역 서버 비헤이비어는 반복 영역의 새 구현을 적용합니다.

부모group


223

유형속성

필수아니오

값다음 예제에 표시된 대로 Configuration/DataSources 폴더에 있는 데이터 소스 파일의 정확한 이름입니다.<group serverBehavior="Repeat Region.htm" dataSource="myCOMdataSource.htm">

이 그룹은 COM 데이터 소스를 사용하는 경우에 사용할 반복 영역 서버 비헤이비어의 새 구현을 정의합니다. applyServerBehaviors()에서 다음 예제에서와 같이 매개 변수 객체에 MM_dataSource 속성을 설정하여 이 그룹이 적용되도록 지정할 수 있습니다.function applyServerBehavior(ssRec) {

var paramObj = new Object();

paramObj.rs = getComObjectName();

paramObj.MM_dataSource = "myCOMdataSource.htm";


}

subType

설명이 고급 기능은 서버 비헤이비어의 여러 구현을 지원합니다.

서버 비헤이비어의 여러 버전은 사용자의 선택에 따라 달라질 수 있습니다. 서버 비헤이비어가 적용되어 있지만 여러 그룹 파일이 관련된 경우에는 subType 값에 전달하여 정확한 그룹 파일을 선택할 수 있습니다. 이 경우, 해당 subType 값을 가진 그룹이 적용됩니다.

부모group

유형속성

필수아니오

값이 값은 다음 예제에서와 같이 적용할 그룹을 결정하는 고유한 문자열입니다.<group serverBehavior="myServerBehavior.htm" subType="longVersion">

이 그룹 속성은 myServerBehavior 하위 유형의 긴 버전을 정의합니다. 또한 subType="shortVersion" 속성을 가진 버전도 만들어집니다. applyServerBehaviors()에서 다음 예제에서와 같이 매개 변수 객체에 MM_subType 속성을 설정하여 적용되어야 할 그룹을 나타낼 수 있습니다.function applyServerBehavior(ssRec) {


if (longVersionChecked) {

paramObj.MM_subType = "longVersion";

}else{

paramObj.MM_subType = "shortVersion";

}


}


224

<title>

설명이 문자열은 현재 문서에서 검색된 각 서버 비헤이비어 인스턴스에 대해 [서버 비헤이비어] 패널에 표시되는 문자열입니다.

부모group

유형블록 태그

필수아니오

값이 값은 다음 예제에서와 같이 각 인스턴스를 고유하게 하는 인수 이름을 포함할 수 있는 일반 텍스트 문자열입니다.<title>Redirect If Empty (@@recordsetName@@)</title>

<groupParticipants>

설명이 태그에는 groupParticipant 선언의 배열이 포함됩니다.

부모group

유형블록 태그

필수예

<groupParticipants> 속성다음 항목은 groupParticipants 태그의 유효한 속성입니다.

selectParticipant

설명[서버 비헤이비어] 패널에서 인스턴스를 선택한 경우 문서에서 선택되어 강조 표시될 참여자를 지정합니다. 이 패널에 나열되는 서버 비헤이비어 인스턴스는 선택된 참여자에 의해 순서가 정해지므로 참여자가 표시되지 않은 경우에도 selectParticipant 속성을 설정합니다.

부모groupParticipants

유형속성

필수아니오

값participantName 값은 다음 예제에서와 같이 하나의 그룹 참여자로 표시된 단일 참여자 파일의 정확한 이름이며, 확장명 .edml은 표시되지 않습니다. 자세한 내용은 225페이지의 “name”을 참조하십시오. <groupParticipants selectParticipant="redirectIfEmpty_link">


225

<groupParticipant>

설명이 태그는 해당 그룹 내에 단일 참여자가 포함된다는 것을 나타냅니다.

부모groupParticipants

유형태그

필수예. 적어도 하나는 필요합니다.

<groupParticipant> 속성다음 항목은 groupParticipant 태그의 유효한 속성입니다.

name

설명이 속성은 특정 참여자가 해당 그룹에 포함되도록 명명합니다. groupParticipant 태그에 있는 name 속성은 참여자의 파일 이름과 동일해야 하며 파일 확장명 .edml은 표시되지 않습니다.

부모groupParticipant

유형속성

필수예

값이 값은 다음 예제에서와 같이 임의의 참여자 파일의 정확한 이름이며, 확장명 .edml는 표시되지 않습니다.<groupParticipant name="redirectIfEmpty_init">

이 예제는 redirectIfEmpty_init.edml 파일을 참조합니다.

partType

설명이 속성은 참여자의 유형을 나타냅니다.

부모groupParticipant

유형속성

필수아니오


226

값identifier, member, option, multiple, data

• identifier 값은 전체 그룹을 식별하는 참여자입니다. 이 참여자가 문서에서 검색된 경우에는 다른 그룹 참여자의 존재 여부에 상관 없이 해당 그룹이 존재하는 것으로 간주됩니다. partType 속성이 지정되어 있지 않으면 이것이 기본값입니다.

• member 값은 특정 그룹의 정규 멤버입니다. 이것만 단독으로 검색되면 그룹을 나타내지 않습니다. 그룹에 없으면 해당 그룹은 불완전한 것으로 간주됩니다.

• option 값은 해당 참여자가 선택 사항이라는 것을 알려 줍니다. 이것이 없는 경우에도 그룹은 완전한 것으로 간주되며 [서버 비헤이비어] 패널에 불완전 플래그가 설정되지 않습니다.

• multiple은 참여자가 선택 사항이며 해당 사본 여러 개가 서버 비헤이비어와 연결될 수 있다는 것을 나타냅니다. 이 참여자 고유의 인수는 값이 다를 수 있기 때문에 참여자들을 그룹화할 때 사용되지 않습니다.

• data 값은 프로그래머가 추가 그룹 데이터를 위한 저장소로 사용하는 비표준 참여자입니다. 다른 모든 경우에 무시됩니다.

참여자 EDML 파일이러한 태그와 속성은 EDML 참여자 파일에서 유효합니다.

<participant>

설명이 태그에는 단일 참여자의 모든 세부 사항이 포함됩니다.

부모없음

유형블록 태그

필수예

<participant> 속성다음 항목은 해당 참여자 태그의 유효한 속성입니다.

버전

설명이 속성은 현재의 서버 비헤이비어를 처리하는 Dreamweaver 서버 비헤이비어가 대상으로 하는 Dreamweaver 버전을 정의합니다. Dreamweaver CS3의 버전 번호는 9입니다. 버전이 지정되어 있지 않으면 Dreamweaver는 버전 7을 기본값으로 사용합니다. Dreamweaver 버전 0.0의 경우, 서버 비헤이비어 구성 관리가 만드는 모든 그룹 및 참여자는 버전 속성을 7.0으로 설정합니다.

참고: 참여자 버전 속성과 그룹 버전 속성이 다른 경우, 참여자 버전 속성은 그룹 버전 속성을 무시합니다. 그러나 참여자가 버전을 지정하지 않은 경우, 참여자 파일은 그룹 버전 속성을 사용합니다.

참여자 파일의 경우, 이 속성에 따라 코드 블록 병합이 일어날지 결정됩니다. 이 속성이 없거나 4 이전의 버전으로 설정된 참여자의 경우 삽입된 코드 블록이 페이지의 다른 코드 블록과 병합되지 않습니다. 5 이상 버전으로 설정된 참여자의 경우, 페이지의 다른 코드 블록과 병합될 수도 있습니다. HTML 태그 위와 아래에 있는 참여자의 경우에만 코드 블록 병합이 이루어진다는 점에 주의하십시오.


227

부모participant

유형속성

필수아니오

<quickSearch>

설명이 태그는 성능 이유에 사용되는 단순한 검색 문자열입니다. 이 경우 일반 표현식은 사용할 수 없습니다. 문자열이 현재 문서에 있으면 특정 인스턴스를 찾기 위해 나머지 검색 패턴이 호출됩니다. 항상 검색 패턴을 사용하기 위해 이 문자열을 비워둘 수 있습니다.

부모participant

유형블록 태그

필수아니오

값searchString 값은 참여자가 존재하는 경우 페이지에 있는 리터럴 문자열입니다. 성능을 최대화하기 위해서는 이 문자열이 가능한 고유성을 유지하는 것이 좋지만 반드시 고유해야 하는 것은 아닙니다. 다음 예제에 표시된 대로 대/소문자는 구분되지 않지만 사용자가 변경할 수 있는 불필요한 공백은 주의해야 합니다.<quickSearch>Response.Redirect</quickSearch>

quickSearch 태그가 비어 있으면 일치하는 것으로 간주되며, 더 정확한 검색에서는 searchPattern 태그에 정의된 일반 표현식을 사용합니다. 이것은 간단한 문자열로는 신뢰할만한 검색 패턴을 표현할 수 없고 일반 표현식이 필요한 경우 유용합니다.

<insertText>

설명문서에 삽입할 항목과 위치에 대한 정보를 제공합니다. 이 태그에는 삽입할 텍스트가 포함됩니다. 사용자 정의된 일부 텍스트는 @@parameterName@@ 형식으로 나타내야 합니다.

translator-only 참여자 같은 경우에는 이 태그가 필요하지 않을 수도 있습니다.

부모implementation

유형블록 태그

필수아니오


228

값이 값은 문서에 삽입할 텍스트입니다. 텍스트의 부분들을 사용자 정의해야 할 경우 나중에 매개 변수로 전달할 수 있습니다. 인수를 포함시킬 때에는 두 개의 at 기호(@@)를 사용해야 합니다. 이 텍스트는 EDML 구조와 충돌할 수 있기 때문에 다음 예제에서와 같이 CDATA 구성을 사용해야 합니다.<insertText location="aboveHTML">

<![CDATA[<%= @@recordset@@).cursorType %>]]>

</insertText>

텍스트가 삽입되면 @@recordset@@ 인수는 사용자가 제공하는 레코드세트 이름으로 바뀝니다. 조건 및 반복 코드 블록에 대한 자세한 내용은 Dreamweaver 시작하기에서 "사용자 정의 서버 비헤이비어 추가"를 참조하십시오.

<insertText> 속성다음 항목은 insertText 태그의 유효한 속성입니다.

위치

설명이 속성은 참여자 텍스트가 삽입될지 여부를 지정합니다. 삽입 위치는 searchPatterns 태그의 whereToSearch 속성과 관련되어 있으므로 두 가지 모두 신중하게 설정해야 합니다. 자세한 내용은 230페이지의 “whereToSearch”를 참조하십시오.

부모insertText

유형속성

필수예

값aboveHTML[+weight], belowHTML[+weight], beforeSelection, replaceSelection, wrapSelection, afterSelection, beforeNode, replaceNode, afterNode, firstChildOfNode, lastChildOfNode, nodeAttribute[+attribute]

• aboveHTML[+weight] 값은 텍스트를 HTML 태그(서버 코드에만 사용 가능) 위에 삽입합니다. 가중치는 1부터 99 사이의 정수일 수 있으며 다른 여러 참여자들 사이에 상대적인 순서를 유지하기 위해 사용됩니다. 규칙에 따라, 레코드세트의 가중치는 50이므로 참여자가 레코드세트 변수를 참조하면 60과 같은 더 큰 가중치가 필요하므로 다음 예제에서와 같이 레코드세트 아래에 코드가 삽입됩니다.

<insert location="aboveHTML+60">

가중치가 제공되지 않으면 내부적으로 100의 가중치가 지정되며, 이것은 다음 예제와 같이 특히 가중치가 적용된 모든 참여자 아래에 추가됩니다.<insert location="aboveHTML">

• belowHTML[+weight] 값은 참여자가 닫기 /HTML 태그 아래에 추가된다는 점만 제외하면 aboveHTML 값과 유사합니다.

• beforeSelection 값은 현재 선택 영역 또는 삽입 포인터 앞에 텍스트를 삽입합니다. 선택한 것이 없으면 BODY 태그의 끝에 텍스트를 삽입합니다.

• replaceSelection 값은 현재 선택 영역을 이 텍스트로 대체합니다. 선택한 것이 없으면 BODY 태그의 끝에 텍스트를 삽입합니다.

• wrapSelection 값은 현재 선택 영역에 포함된 태그의 짝을 맞추고 선택 영역 앞에 블록 태그를 삽입하고 해당 선택 영역 뒤에 적절한 닫기 태그를 추가합니다.

• afterSelection 값은 현재 선택 영역 또는 삽입 포인터 뒤에 텍스트를 삽입합니다. 선택한 것이 없으면 BODY 태그의 끝에 텍스트를 삽입합니다.


229

• beforeNode 값은 DOM의 특정 위치인 노드의 앞에 텍스트를 삽입합니다. 삽입 작업을 위해 dwscripts.applySB()와 같은 함수가 호출되면 노드 포인터는 paramObj 매개 변수로 전달되어야 합니다. 사용자가 정의할 수 있는 이 매개 변수의 이름은 nodeParamName 속성을 사용하여 지정해야 합니다. 자세한 내용은 229페이지의 “nodeParamName”을 참조하십시오.

요약하면, 해당 위치에 node라는 단어가 있으면 반드시 nodeParamName 태그를 선언해야 합니다.

• replaceNode 값은 특정 노드를 이 텍스트로 대체합니다.

• afterNode 값은 특정 노드 뒤에 이 텍스트를 삽입합니다.

• firstChildOfNode 값은 텍스트를 블록 태그의 첫 번째 자식으로 삽입합니다. 예를 들어, FORM 태그의 시작 부분에 무언가를 삽입하려고 할 때 사용합니다.

• lastChildOfNode는 텍스트를 블록 태그의 마지막 자식으로 삽입합니다. 예를 들어 FORM 태그 끝 부분에 코드를 삽입하는 것은 숨겨진 양식 필드를 추가할 때 유용합니다.

• nodeAttribute[+attribute]는 태그 노드의 속성을 설정합니다. 이 속성이 존재하지 않으면 이 값은 해당 속성을 만듭니다.

예를 들어, <insert location="nodeAttribute+ACTION" nodeParamName="form">을 사용하여 양식의 ACTION 속성을 설정합니다. 이렇게 하면 사용자의 FORM 태그는 <form>에서 <form action="myText">로 변경됩니다.

속성을 지정하지 않으면 nodeAttribute 위치는 해당 텍스트가 열기 태그에 직접 추가되도록 합니다. 예를 들어, insert location="nodeAttribute"를 사용하여 태그에 선택적 속성을 추가합니다. 이것은 <input type="checkbox">에

서 <input type="checkbox" <%if(foo)Reponse.Write("CHECKED")%>>로 사용자의 INPUT 태그를 변경하는 데 사용될 수 있습니다.

참고: location= “nodeAttribute” 속성 값의 경우, 마지막 검색 패턴은 해당 속성이 시작하고 끝나는 위치를 결정합니다. 마지막 패턴이 명령문 전체를 찾는지 확인합니다.

nodeParamName

설명이 속성은 노드 상대적 삽입 위치에만 사용됩니다. 이 속성은 삽입 시점에 노드를 전달하는 매개 변수의 이름을 알려 줍니다.

부모insertText

유형속성

필수이 속성은 삽입 위치에 node라는 단어가 있는 경우에만 필요합니다.

값tagtype_Tag 값은 매개 변수 객체와 함께 dwscripts.applySB() 함수에 전달되는 노드 매개 변수의 사용자 지정 이름입니다. 예를 들어, 양식에 텍스트를 삽입할 때 form_tag 매개 변수를 사용할 수 있습니다. 서버 비헤이비어 applyServerBehavior() 함수에서 다음 예제에서와 같이 form_tag 매개 변수를 사용하여 업데이트할 정확한 양식을 표시할 수 있습니다.function applyServerBehavior(ssRec) {


paramObj.rs = getRecordsetName();

paramObj.form_tag = getFormNode();


}

다음 예제와 같이 EDML 파일에 form_tag 노드 매개 변수를 표시할 수 있습니다.<insertText location="lastChildOfNode" nodeParamName="form_tag">

<![CDATA[<input type="hidden" name="MY_DATA">]]>

</insertText>

텍스트는 lastChildOfNode 값으로 삽입되고 특정 노드는 해당 매개 변수 객체의 form_tag 속성을 사용하여 전달됩니다.

230

<searchPatterns>

설명이 태그는 문서에서 참여자 텍스트를 찾는 것에 대한 정보를 제공합니다. 이 태그에는 참여자를 검색할 때 사용되는 패턴 목록이 포함되어 있습니다. 여러 검색 패턴이 정의되어 있는 경우, isOptional 플래그를 사용하여 선택적이라고 표시되어 있지만 않으면, 검색 중인 텍스트에서 해당 패턴을 모두 찾을 수 있습니다. 검색 패턴은 논리 AND 관계를 가지고 있습니다.


유형블록 태그

필수아니오

<searchPatterns> 속성다음 항목은 searchPatterns 태그의 유효한 속성입니다.

whereToSearch

설명이 속성은 참여자 텍스트를 검색할 위치를 지정합니다. 이 속성은 삽입 위치와 연관이 있으므로 각 속성을 신중하게 설정해야 합니다. 자세한 내용은 228페이지의 “위치” 를 참조하십시오.

부모searchPatterns

유형속성

필수예

값directive, tag+tagName, tag+*, comment, text

• directive 값은 모든 서버 지시문(서버 전용 태그)을 검색합니다. ASP 및 JSP의 경우에는 모든 <% ... %> 스크립트 블록을 검색한다는 의미입니다.

참고: 태그 속성은 지시문에 포함되어 있는 경우에도 검색되지 않습니다.

• tag+tagName 값은 다음 예제와 같이 지정된 태그의 내용을 검색합니다.<searchPatterns whereToSearch="tag+FORM">

이 예제는 양식 태그만 검색합니다. 기본적으로, 전체 outerHTML 노드가 검색됩니다. INPUT 태그의 경우, 슬래시(/) 뒤에 유형을 지정합니다. 다음 예제에서 전송 버튼을 모두 검색하려면 다음 코드를 사용합니다.<searchPatterns whereToSearch="tag+INPUT/SUBMIT">.

• tag+* 값은 다음 예제와 같이 임의의 태그 내용을 검색합니다.<searchPatterns whereToSearch="tag+*">

이 예제는 모든 태그를 검색합니다.

• comment 값은 HTML 주석 <! ... >에서만 검색합니다.<searchPatterns whereToSearch="comment">

이 예제는 과 같은 태그를 검색합니다.


231

• text 값은 다음 예제에서와 같이 순수한 텍스트 섹션에서만 검색합니다.<searchPatterns whereToSearch="text">

<searchPattern>XYZ</searchPattern>

</searchPatterns>

이 예제에서는 XYZ 텍스트가 포함된 텍스트 노드를 찾습니다.

<searchPattern>

설명이 태그는 참여자 텍스트를 식별하고 이 텍스트에서 매개 변수 값을 추출하는 패턴입니다. 각 매개 변수 하위 표현식은 괄호()에 포함시켜야 합니다

참여자 텍스트를 식별하기 위해 사용하는 매개 변수가 없는 패턴, 매개 변수가 하나인 패턴, 매개 변수가 여러 개인 패턴을 사용할 수 있습니다. 선택적이지 않은 모든 패턴을 찾고, 각 매개 변수는 이름이 지정되고 정확히 한 번만 있어야 합니다.

searchPattern 태그 사용에 대한 자세한 내용은 241페이지의 “서버 비헤이비어 찾기”를 참조하십시오.

부모searchPatterns

유형블록 태그

필수예

값searchString, /regularExpression/, <empty>

• searchString 값은 대소문자가 구분되는 간단한 검색 문자열로, 매개 변수를 추출할 수는 없습니다.

• /regularExpression/ 값은 일반 표현식 검색 패턴입니다.

• <empty> 값은 패턴이 지정되지 않은 경우에 사용됩니다. 항상 일치하는 것으로 간주되며 값 전체가 첫 번째 매개 변수에 지정됩니다.

예를 들어, 참여자 텍스트인 <%= RS1.Field.Items("author_id") %>를 식별하기 위해 간단한 패턴을 정의하고 그 뒤에 두 개의 매개 변수 값도 추출하는 정확한 패턴까지 정의할 수 있습니다.<searchPattern>Field.Items</searchPattern>

<searchPattern paramNames="rs,col">

<![CDATA[

/<%=\s*(\w+)\.Field\.Items$"(\w+)"$/

]]>

</searchPattern>

이 예제는 해당 패턴과 정확하게 일치하며 첫 번째 하위 표현식(\w+)의 값을 매개 변수 rs에 지정하고 두 번째 하위 표현식(\w+)의 값을 매개 변수 col에 지정합니다.

참고: 일반 표현식은 슬래시(/)로 시작하고 끝내야 합니다. 그렇지 않으면 표현식이 리터럴 문자열 검색으로 사용됩니다. /pattern/i처럼 정규식 뒤에 정규식 수정자 i를 지정하여 대/소문자 구분 여부를 지정할 수 있습니다. 예를 들어, VBScript에서는 대/소문자가 구분되지 않으므로 /pattern/i를 사용해야 합니다. JavaScript에서는 대/소문자가 구분되므로 /pattern/을 사용해야 합니다.

매개 변수에 제한된 검색 위치의 내용 전체를 지정하려고 할 때도 있습니다. 그런 경우에는 다음 예제에 표시된 대로 패턴을 제공하지 않습니다.<searchPatterns whereToSearch="tag+OPTION">

<searchPattern>MY_OPTION_NAME</searchPattern>

<searchPattern paramNames="optionLabel" limitSearch="innerOnly">

</searchPattern>

</searchPatterns>

이 예제에서는 OPTION 태그의 전체 innerHTML 내용에 optionLabel 매개 변수를 설정합니다.


232

<searchPattern> 속성다음 항목은 searchPattern 태그의 유효한 속성입니다.

paramNames

설명이 속성은 컴마로 구분되는 매개 변수 이름 목록이며 이 속성의 값은 추출되는 중입니다. 이 매개 변수는 하위 표현식의 순서대로 지정됩니다. 단일 매개 변수를 지정할 수도 있고 컴마로 구분된 목록을 사용하여 여러 매개 변수를 지정할 수도 있습니다. 괄호로 묶는 다른 표현식이 사용되지만 매개 변수를 나타내지 않으면 추가 컴마를 [매개 변수 이름] 목록에서 자리 표시자로 사용할 수 있습니다.

매개 변수 이름은 삽입 텍스트에 지정된 이름 및 업데이트 매개 변수와 일치해야 합니다.

부모searchPattern

유형속성

필수예

값paramName1, paramName2, ...

각 매개 변수 이름은 삽입 텍스트에 사용된 매개 변수의 이름과 똑같아야 합니다. 예를 들어, 삽입 텍스트에 @@p1@@가 있으면 이 이름을 사용하여 한 개의 매개 변수를 정의해야 합니다.<searchPattern paramNames="p1">patterns</searchPattern>

단일 패턴을 사용하여 매개 변수를 여러 개 추출하려면 패턴에 나타나는 하위 표현식의 순서대로 콤마로 구분된 매개 변수 이름 목록을 사용합니다. 다음 예제는 사용자의 검색 패턴을 표시한다고 가정합니다.<searchPattern paramName="p1,,p2">/(\w+)_(BIG|SMALL)_(\w+)/</searchPattern>

추출할 매개 변수가 두 개(그 사이에 텍스트가 포함됨) 있습니다. <%= a_BIG_b %>에서 검색 패턴의 첫 번째 하위 표현식은 a에 대응되므로 p1="a"입니다. 두 번째 하위 표현식은 무시됩니다. paramName 값에서 ,, 에 주의하십시오. 세 번째 하위 표현식은 b에 대응되므로 p2="b"입니다.

limitSearch

설명이 속성은 검색을 whereToSearch 태그의 일부분으로 제한합니다.

부모searchPattern

유형속성

필수아니오


233

값all, attribute+attribName, tagOnly, innerOnly

• all 값(기본값)은 whereToSearch 속성에 지정된 전체 태그를 검색합니다.

• attribute+attribName 값은 다음 예제에서와 같이 지정된 속성의 값에서만 검색합니다.<searchPatterns whereToSearch="tag+FORM">

<searchPattern limitSearch="attribute+ACTION">/MY_PATTERN/

</searchPattern></searchPatterns>

이 예제에서는 FORM 태그의 ACTION 속성 값만 검색된다는 것을 알려줍니다. 해당 속성이 정의되어 있지 않으면 이 태그가 무시됩니다.

• tagOnly 값은 바깥쪽 태그만 검색하며 innerHTML 태그는 무시합니다. 이 값은 whereToSearch가 태그인 경우에만 유효합니다.

• innerOnly 값은 innerHTML 태그만 검색하고 바깥쪽 태그는 무시합니다. 이 값은 whereToSearch가 태그인 경우에만 유효합니다.

isOptional

설명이 속성은 해당 참여자를 찾는 작업에 검색 패턴이 필요하지 않다는 것을 알려 주는 플래그입니다. 이것은 중요하지 않은 추출 매개 변수를 가질 수도 있는 복잡한 참여자에게 유용합니다. 참여자를 확실하게 구별하는 일부 패턴을 만들 수도 있고 중요하지 않은 매개 변수를 추출하는 선택적 패턴들도 사용할 수 있습니다.

부모searchPattern

유형속성

필수아니오

값true, false

• 이 값은 searchPattern이 해당 참여자를 식별하는 데 필요하지 않으면 true입니다.

• 이 값은 searchPattern 태그가 필요하면 false(기본값)입니다.

예를 들어, 다음과 같은 간단한 레코드세트 문자열을 생각해 볼 수 있습니다.<%var Recordset1 = Server.CreateObject("ADODB.Recordset");Recordset1.ActiveConnection = "dsn=andescoffee;";Recordset1.Source = "SELECT * FROM PressReleases";Recordset1.CursorType = 3;Recordset1.Open();%>

이 검색 패턴은 참여자를 식별하고 여러 매개 변수를 추출합니다. 그러나 cursorType과 같은 매개 변수가 없는 경우에는 이 패턴이 레코드세트로 인식됩니다. cursor 매개 변수는 선택 사항입니다. EDML에서 검색 패턴은 다음 예제와 유사합니다.<searchPattern paramNames="rs">/var (\w+) = Server.CreateObject/</searchPattern><searchPattern paramNames="src">/ActiveConnection = "([^\r\n]*)"/</searchPattern><searchPattern paramNames="conn">/Source = "([^\r\n]*)"/</searchPattern><searchPattern paramNames="cursor" isOptional="true">/CursorType = (\d+)/</searchPattern>

레코드세트를 식별하기 위해서는 처음의 세 패턴이 필요합니다. 마지막 매개 변수를 찾을 수 없어도 레코드세트를 식별할 수 있습니다.


234

<updatePatterns>

설명이 선택적인 고급 기능을 사용하면 참여자를 정확하게 업데이트할 수 있습니다. 이 태그가 없으면 참여자는 매번 참여자 텍스트 전체를 바꿔 자동으로 업데이트됩니다. updatePatterns 태그를 지정하는 경우, 참여자 내에서 각 매개 변수를 찾아서 대체하는 특정 패턴이 이 태그에 포함되어 있어야 합니다.

이 태그는 사용자가 참여자 텍스트를 편집할 때 효과적입니다. 이는 해당 태그를 사용한 경우 텍스트에서 변경해야 할 부분만 정확히 업데이트하기 때문입니다.


유형블록 태그

필수아니오

<updatePattern>

설명이 태그는 특정 유형을 가진 일반 표현식으로, 참여자 텍스트를 정확하게 업데이트할 수 있도록 해줍니다. 양식 @@paramName@@의 삽입 텍스트에 선언된 모든 고유한 매개 변수에는 업데이트 패턴 정의가 적어도 하나 이상 있어야 합니다.

부모updatePatterns

유형블록 태그

필수예(updatePatterns 태그를 선언하는 경우에는 하나 이상 필요)

값이 값은 양식 /(pre-pattern)parameter-pattern(post-pattern)/에서 괄호 안에 포함된 두 개의 하위 표현식 사이에서 매개 변수를 찾는 일반 표현식입니다. 삽입 텍스트에서 각각의 고유한 @@paramName@@에 대해 업데이트 패턴을 적어도 하나 이상 정의해야 합니다. 다음 예제에서는 삽입 텍스트가 어떻게 표시되는지 보여 줍니다.<insertText location="afterSelection">

<![CDATA[<%= @@rs@@.Field.Items("@@col@@") %>]]>

</insertText>

페이지에 있는 삽입 텍스트의 특별한 인스턴스는 다음 예제와 같습니다.<%= RS1.Field.Items("author_id") %>

두 매개 변수인 rs 및 col이 있습니다. 페이지에 텍스트를 삽입한 후에 이 텍스트를 업데이트하려면 다음과 같은 두 개의 업데이트 패턴 정의가 필요합니다.<updatePattern paramName="rs" >

/(\b)\w+(\.Field\.Items)/

</updatePattern>

<updatePattern paramName="col">

/(\bItems$")\w+("$)/

</updatePattern>

다른 특수 일반 표현식 문자 외에 리터럴 괄호도 앞에 백슬래시(\)를 붙여야 합니다. \w+로 정의된 가운데 표현식은 매개 변수 rs 및 col에 각각 전달된 최신 값으로 업데이트됩니다. RS1 및 author_id 값은 새 값으로 정확하게 업데이트될 수 있습니다.

동일한 패턴이 여러 번 나오는 경우, /pattern/g와 같이 닫기 슬래시 뒤에 일반 표현식 전역 플래그 g를 사용하여 동시에 업데이트할 수 있습니다.


235

참여자 텍스트가 길고 복잡하다면 다음 예제에 표시된 대로 단일 매개 변수를 업데이트하기 위해 패턴이 여러 개 필요합니다.<% ...

Recordset1.CursorType = 0;

Recordset1.CursorLocation = 2;

Recordset1.LockType = 3;

%>

세 위치에서 모두 레코드세트 이름을 업데이트하려면 다음 예제와 같이 단일 매개 변수에 대한 업데이트 패턴이 세 개 필요합니다.<updatePattern paramName="rs">

/(\b)\w+(\.CursorType)/

</updatePattern>

<updatePattern paramName="rs">

/(\b)\w+(\.CursorLocation)/

</updatePattern>

<updatePattern paramName="rs">

/(\b)\w+(\.LockType)/

</updatePattern>

이제 레코드세트의 새 값에 전달할 수 있으며 세 위치에서 정확하게 업데이트됩니다.

<updatePattern> 속성다음 항목은 updatePattern 태그의 유효한 속성입니다.

paramName

설명이 속성은 참여자를 업데이트하기 위해 사용되는 값을 갖는 매개 변수의 이름을 나타냅니다.이 매개 변수는 삽입 텍스트에 지정된 매개 변수 및 검색 매개 변수와 일치해야 합니다.

부모updatePattern

유형속성

필수예

값이 값은 삽입 텍스트에서 사용되는 매개 변수의 정확한 이름입니다. 다음 예제에서, 삽입 텍스트에 @@rs@@ 값이 있으면 해당 이름을 가진 매개 변수가 있어야 합니다.<updatePattern paramName="rs">pattern</updatePattern>

<delete>

설명이 태그는 참여자를 삭제하는 방법을 제어할 수 있도록 해주는 선택적인 고급 기능입니다. 이 태그가 없으면 제거하는 것으로 참여자가 완전히 삭제되지만 참조하는 서버 비헤이비어가 없을 때만 가능합니다. delete 태그를 지정하면 절대로 삭제되지 않게 하거나 일부만 삭제되도록 지정할 수 있습니다.


유형태그


236

필수아니오

<delete> 속성다음 항목은 delete 태그의 유효한 속성입니다.

deleteType

설명이 속성은 수행할 삭제 유형을 알려 주는 데 사용됩니다. 참여자가 지시문, 태그 또는 속성이냐 여부에 따라 다른 의미를 갖습니다. 기본적으로, 참여자 전체가 삭제됩니다.

부모delete

유형속성

필수아니오

값all, none, tagOnly, innerOnly, attribute+attribName, attribute+*

• all(기본값)은 전체 지시문이나 태그를 삭제합니다. 속성의 경우, 정의 전체를 삭제합니다.

• none 값은 결코 자동으로 삭제되지 않습니다.

• tagOnly 값은 바깥쪽 태그만 제거하고 innerHTML 태그의 내용은 그대로 둡니다. 속성의 경우, 블록 태그이면 바깥쪽 태그도 제거합니다. 지시문에는 의미가 없습니다.

• 태그에 적용될 때 innerOnly 값은 내용(innerHTML 태그)만 제거합니다. 속성의 경우 값만 제거합니다. 지시문에는 의미가 없습니다.

• 태그에 적용될 때 attribute+attribName 값은 지정된 속성만 제거합니다. 지시문과 속성에는 의미가 없습니다.

• attribute+* 값은 태그에 대한 모든 속성을 제거합니다. 지시문 및 속성에는 의미가 없습니다.

서버 비헤이비어가 선택된 텍스트를 링크로 변환하면 다음 예제에서와 같이 바깥쪽 태그만 제거하여 해당 링크를 제거합니다.<delete deleteType="tagOnly"/>

이 예제에서는 링크 참여자를 <A HREF="...">HELLO</A>에서 HELLO로 변경합니다.

<translator>

설명이 태그는 참여자가 다르게 렌더링되고 사용자 정의 속성 관리자를 가질 수 있도록 참여자를 변환하기 위한 정보를 제공합니다.


유형블록 태그

필수아니오


237

<searchPatterns>

설명이 태그는 Dreamweaver가 지정된 인스턴스를 문서에서 찾을 수 있도록 합니다. 여러 검색 패턴이 정의되어 있는 경우, isOptional 플래그를 사용하여 선택적이라고 표시되어 있지만 않으면, 검색 중인 텍스트에서 해당 패턴을 모두 찾을 수 있습니다. 검색 패턴은 논리 AND 관계를 가지고 있습니다.

부모translator

유형블록 태그

필수예

<translations>

설명이 태그에는 변환 지침 목록이 포함되어 있습니다. 목록에 있는 각 지침은 해당 참여자를 찾을 위치 및 해당 참여자로 사용 가능한 작업을 알려 줍니다.

부모translator

유형블록 태그

필수아니오

<translation>

설명이 태그에는 참여자의 위치, 수행할 변환 유형 및 참여자 텍스트를 대체하는 내용이 포함된 단일 변환 지침이 포함되어 있습니다.

부모translations

유형블록 태그

필수아니오

<translation> 속성다음 항목은 translation 태그의 유효한 속성입니다.

whereToSearch

설명이 속성은 해당 텍스트를 찾을 위치를 지정합니다. 이때, 이 위치는 삽입 위치와 연관되어 있으므로 각 위치를 신중하게 설정해야 합니다. 자세한 내용은 228페이지의 “위치” 를 참조하십시오.

부모translation


238

유형속성

필수예

limitSearch

설명이 속성은 검색을 whereToSearch 태그의 일부분으로 제한합니다.

부모translation

유형속성

필수아니오

translationType

설명이 속성은 수행할 변환 유형을 알려 줍니다. 이 유형은 미리 설정되어 있고 변환에 해당되는 기능성을 제공합니다. 예를 들어, dynamic data를 지정하면, 변환된 모든 데이터는 Dreamweaver 동적 데이터와 동일하게 동작해야 합니다. 즉, 변환된 데이터는 [디자인] 뷰에서 동적 데이터 자리 표시자와 동일하게 표시되어야 하며(동적 배경색을 가진 중괄호({}) 표기) [서버 비헤이비어] 패널에 나타나야 합니다.

부모translation

유형속성

필수예

값dynamic data, dynamic image, dynamic source, tabbed region start, tabbed region end, custom

• 다음 예제에서 dynamic data 값은 변환된 지시문이 Dreamweaver 동적 데이터처럼 표시되고 동작한다는 것을 나타냅니다.

<translation whereToSearch="tag+IMAGE"

limitSearch="attribute+SRC"

translationType="dynamic data">

• 다음 예제에서 dynamic image 값은 변환된 속성이 Dreamweaver동적 이미지처럼 표시되고 작동한다는 것을 나타냅니다.<translation whereToSearch="IMAGE+SRC"

translationType="dynamic image">

• 다음 예제에서 dynamic source 값은 변환된 지시문이 Dreamweaver 동적 소스처럼 작동한다는 것을 나타냅니다.<translation whereToSearch="directive"

translationType="dynamic source">

• 다음 예제에서 tabbed region start 값은 변환된 <CFLOOP> 태그가 탭 외곽선의 시작 부분을 정의한다는 것을 나타냅니다.

<translation whereToSearch="CFLOOP"

translationType="tabbed region start">


239

• 다음 예제에서 tabbed region end 값은 변환된 </CFLOOP> 태그가 탭 외곽선의 끝 부분을 정의한다는 것을 나타냅니다.<translation whereToSearch="CFLOOP"

translationType="tabbed region end">

• custom 값은 변환 작업에 내부 Dreamweaver 기능이 전혀 추가되지 않는 기본적인 경우입니다. 다음 예제에 표시된 대로 사용자 정의 [속성 관리자]에 대해 삽입할 태그를 지정할 때 사용되기도 합니다.

<translation whereToSearch="directive"

translationType="custom">

<openTag>

설명이 태그는 변환 섹션의 시작에 삽입될 수 있는 선택적인 태그입니다. 이 태그를 사용하면 사용자 정의 속성 관리자와 같은 특정 Extension이 변환을 찾을 수 있습니다.

부모translation

유형블록 태그

필수아니오

값tagName 값은 유효한 태그 이름입니다. 이 경우 알려진 태그 유형과 충돌하지 않도록 고유한 이름을 지정해야 합니다. 예를 들어, <openTag>MM_DYNAMIC_CONTENT</openTag>를 지정하면 동적 데이터는 MM_DYNAMIC_CONTENT 태그로 변환됩니다.

<attributes>

설명이 태그에는 변환된 태그에 추가될 속성 목록이 포함되어 있습니다. 이때 변환된 태그는 openTag 태그에 의해 지정됩니다. 만약 openTag 태그가 정의되어 있지 않고 searchPattern 태그가 tag를 지정하면, 이 태그에는 검색된 태그에 추가할 변환된 속성 목록이 포함됩니다.

부모translation

유형블록 태그

필수아니오

<속성>

설명이 태그는 변환된 태그에 추가할 단일 속성 또는 변환된 속성을 지정합니다.

부모속성

유형블록 태그


240

필수예. 적어도 하나는 필요합니다.

값attributeName="attributeValue" 사양은 값에 속성을 설정합니다. 대개, 다음 예제에 표시된 대로 속성 이름은 고정되어 있으며, 값에는 매개 변수 패턴으로 추출된 몇 가지 매개 변수 참조가 들어 있습니다.<attribute>SOURCE="@@rs@@"</attribute>

<attribute>BINDING="@@col@@"</attribute>

또는

<attribute>

mmTranslatedValueDynValue="VALUE={@@rs@@.@@col@@}"

</attribute>

<display>

설명이 태그는 선택적 표시 문자열으로, 변환 작업 시 삽입되어야 합니다.

부모translation

유형블록 태그

필수아니오

값displayString 값은 텍스트 및 HTML로 구성된 문자열입니다. 매개 변수 패턴으로 추출되는 매개 변수 참조를 포함할 수 있습니다. 예를 들어, <display>{@@rs@@.@@col@@}</display>로 인해 변환은 {myRecordset.myCol}로 렌더링됩니다.

<closeTag>

설명이 태그는 변환된 섹션의 끝에 삽입되는 선택적인 태그입니다. 이 태그를 사용하면 사용자 정의 속성 관리자와 같은 특정 Extension이 변환을 찾을 수 있습니다.

부모translation

유형블록 태그

필수아니오

값tagName 값은 유효한 태그 이름입니다. 이 값은 변환 openTag 태그와 일치해야 합니다.

예제값 <closeTag>MM_DYNAMIC_CONTENT</closeTag>를 지정하면 동적 데이터는 </MM_DYNAMIC_CONTENT> 태그를 사용하여 끝내도록 변환됩니다.


241

서버 비헤이비어 기술이 단원에서는 서버 비헤이비어를 만들고 편집하는 일반 및 고급 기술에 대해 다룹니다. 대부분의 제안 사항은 EDML 파일의 특정 설정과 관련되어 있습니다.

서버 비헤이비어 찾기검색 패턴 작성 서버 비헤이비어를 업데이트하거나 삭제하기 위해서는 Dreamweaver가 문서에서 각 인스턴스를 찾을 수 있는 방법을 제공해야 합니다. 그렇게 하려면 quickSearch 태그와 searchPatterns 태그에 포함된 searchPattern 태그(하나 이상)가 필요합니다.

quickSearch 태그는 일반 표현식이 아니라 문자열이어야 합니다. 이때 이 문자열은 서버 비헤이비어가 페이지에 존재할 수도 있다는 것을 나타냅니다. 대/소문자는 구분되지 않습니다. 이 태그는 짧고 고유해야 하며 사용자가 변경할 수 있는 공백 및 기타 섹션은 사용하지 말아야 합니다. 다음 예제에서는 간단한 ASP JavaScript 태그로 구성된 참여자를 볼 수 있습니다.<% if (Recordset1.EOF) Response.Redirect("some_url_here") %>

다음 예제에서 quickSearch 문자열은 해당 태그를 검색합니다. <quickSearch>Response.Redirect</quickSearch>

quickSearch 패턴은 서버 비헤이비어 인스턴스를 찾는 과정의 시작이며 성능 향상을 위한 것입니다. 이 문자열이 해당 문서에 있고 참여자가 서버 비헤이비어를 식별하면(그룹 파일인 경우에는 partType="identifier"), 관련된 서버 비헤이비어 파일이 로드되고 findServerBehaviors()가 호출됩니다. 참여자에 검색하거나 디버깅할만한 문자열이 없으면 다음 예제에서와 같이 quickSearch 문자열을 공백으로 둘 수 있습니다.<quickSearch></quickSearch>

이 예제에서 서버 비헤이비어는 항상 로드되고 문서를 검색할 수 있습니다.

다음으로, searchPattern 태그는 quickSearch 태그보다 문서를 더 정확하게 검색하고 참여자 코드에서 매개 변수 값을 추출합니다. 검색 패턴은 특정 패턴이 포함된 일련의 searchPattern 태그를 사용하여 검색할 위치를 지정합니다. 이때 whereToSearch 속성이 사용됩니다. 이러한 패턴은 간단한 문자열이나 일반 표현식을 사용할 수 있습니다. 앞의 예제 코드는 ASP 지시문이므로 whereToSearch="directive" 사양과 정규식은 다음 예제에 표시된 대로 지시문을 식별하고 매개 변수를 추출합니다. <quickSearch>Response.Write</quickSearch>


<searchPattern paramNames="rs,new__url">

/if\s*$(\w+)\.EOF$\s*Response\.Redirect$"([^\r\n]*)"$/i

</searchPattern>

</searchPatterns>

검색 문자열은 앞뒤에 슬래시(/)가 있는 일반 표현식으로 정의되며 대/소문자를 구분하지 않는다는 의미의 i가 그 뒤에 붙습니다. 일반 표현식에서 괄호()와 마침표(.) 같은 특수 문자는 앞에 백슬래시(\)를 붙여야 합니다. 두 매개 변수 rs와 new_url은 괄호 안의 하위 표현식을 사용하여 문자열로부터 추출됩니다. 이때 매개 변수는 괄호 안에 포함되어야 합니다. 이 예제에서 (\w+) 및 ([^\r\n]*)은 매개 변수를 나타냅니다. 이 값은 보통 $1과 $2로 반환되는 정규식 값에 대응됩니다.

선택적 검색 패턴. 일부 매개 변수가 검색되지 않은 경우에도 참여자를 식별해야 하는 경우가 있습니다. 전화 번호 같은 일부 선택적 정보를 담은 참여자가 있을 수 있습니다. 그러한 예제에서 다음 ASP 코드를 사용할 수 있습니다.<% //주소 블록

LNAME = "joe";

FNAME = "smith";

PHONE = "123-4567";

%>

다음과 같은 검색 패턴을 사용할 수 있습니다.<quickSearch>address</quickSearch>


<searchPattern paramNames="lname">/LNAME\s*=\s*"([^\r\n]*)"/i</searchPattern>

<searchPattern paramNames="fname">/FNAME\s*=\s*"([^\r\n]*)"/i</searchPattern>

<searchPattern paramNames="phone">/PHONE\s*=\s*"([^\r\n]*)"/i</searchPattern>

</searchPatterns>


242

앞의 예제에서 전화 번호는 지정해야 합니다. 그러나 다음 예제와 같이 isOptional 속성을 추가하여 전화 번호를 선택 사항으로 만들 수 있습니다.<quickSearch>address</quickSearch>


<searchPattern paramNames="lname">/LNAME\s*=\s*"([^\r\n]*)"/i</searchPattern>

<searchPattern paramNames="fname">/FNAME\s*=\s*"([^\r\n]*)"/i</searchPattern>

<searchPattern paramNames="phone" isOptional="true">/PHONE\s*=\s*"([^\r\n]*)"/i¬

</searchPattern>

</searchPatterns>

이제 전화 번호를 찾을 수 없어도 해당 참여자는 인식됩니다.

참여자가 일치하는 정도 서버 비헤이비어에 참여자가 둘 이상 있으면 이 참여자는 사용자의 문서에서 식별되어야 하고 일치되어야 합니다. 사용자가 문서에 서버 비헤이비어의 여러 인스턴스를 적용하면 그에 따라 참여자의 각 그룹이 일치해야 합니다. 참여자가 정확하게 일치하는지 확인하려면 매개 변수를 변경하거나 추가하고 고유하게 식별되도록 참여자를 구성해야 합니다.

일치하려면 몇 가지 규칙이 필요합니다. 참여자는 이름이 같은 매개 변수의 값이 모두 같을 경우 일치됩니다. html 태그의 위와 아래에는 일련의 지정된 매개 변수 값을 가진 참여자의 한 인스턴스만 나타날 수 있습니다. html.../html 태그 내에서 참여자는 삽입에 사용되는 선택 영역 또는 공통 노드에 대한 상대적인 위치에 따라 일치되기도 합니다.

매개 변수가 없는 참여자는 그룹 파일이 있는 서버 비헤이비어를 사용하는 다음 예제에서와 같이 자동으로 일치됩니다.<group serverBehavior="test.htm">

<title>Test</title>

<groupParticipants>

<groupParticipant name="test_p1" partType="identifier" />

<groupParticipant name="test_p2" partType="identifier" />

</groupParticipants>

</group>

다음 예제에서는 html 태그 위에 간단한 참여자 둘을 삽입합니다. <% //test_p1 %>

<% //test_p2 %>

<html>

이 참여자가 검색되어 일치된 다음, [서버 비헤이비어] 패널에 Test가 한 번 나타납니다. 서버 비헤이비어를 다시 추가할 경우 참여자가 이미 있기 때문에 아무 것도 추가되지 않습니다.

참여자에 고유한 매개 변수가 있으면 html 태그의 위에 여러 인스턴스가 삽입될 수 있습니다. 예를 들어, 참여자에 이름 매개 변수를 추가하여 사용자는 [서버 비헤이비어 테스트] 대화 상자에 고유한 이름을 입력할 수 있습니다. 사용자가 aaa라는 이름을 입력하면 다음과 같은 참여자가 삽입됩니다.<% //test_p1 name="aaa" %>

<% //test_p2 name="aaa" %>

<html>

이 서버 비헤이비어를 bbb와 같은 다른 이름으로 다시 추가하면 문서는 다음 예제와 같이 나타납니다.<% //test_p1 name="aaa" %>

<% //test_p2 name="aaa" %>

<% //test_p1 name="bbb" %>

<% //test_p2 name="bbb" %>

<html>

[서버 비헤이비어] 패널에 Test의 인스턴스 두 개가 나열되어 있습니다. 사용자가 페이지에 세 번째 인스턴스를 추가하고 이름을 aaa로 지정하려고 하면 해당 이름이 이미 있기 때문에 아무 것도 추가되지 않습니다.

html 태그 내에서는 일치 작업을 할 때 위치 정보가 사용될 수도 있습니다. 다음 예제에는 참여자가 두 개 있는데, 하나는 선택 영역 앞에 추가되고 또 하나는 선택 영역 다음에 추가됩니다.<% if (expression) { //mySBName %>


243

Random HTML selection here:

<% } //end mySBName %>

이 두 참여자는 매개 변수가 없으므로 함께 그룹화됩니다. 그러나 다음 예제에서처럼, HTML의 다른 위치에 이 서버 비헤이비어의 다른 인스턴스를 추가할 수 있습니다.<% if (expression) { //mySBName %>

Random HTML selection here:


More HTML here:

<% if (expression) { //mySBName %>

Another HTML selection here:


이제 HTML에 허용되는 각 참여자의 동일한 인스턴스가 두 개 있습니다. 이 두 개의 인스턴스는 문서에서 발생하는 순서에 따라 일치됩니다.

다음 예제에서는 이러한 일치상의 문제점과 이 문제를 방지하는 방법을 보여 줍니다. 일부 동적 데이터의 세금을 계산하고 선택 영역에 결과를 표시하는 참여자를 만들 수 있습니다. <% total = Recordset1.Fields.Item("itemPrice").Value * 1.0825 %>

<html>

<body>

The total (with taxes) is $<%=total%>

</body>

</html>

두 참여자는 공통 매개 변수가 없기 때문에 일치합니다. 그러나, 이 서버 비헤이비어의 두 번째 인스턴스를 추가할 경우 다음 코드가 있어야 합니다.<% total = Recordset1.Fields.Item("itemPrice").Value * 1.0825 %>

<% total = Recordset1.Fields.Item("salePrice").Value * 1.0825 %>

<html>

<body>

The total0(with taxes) is $<%=total%>

Sale price (with taxes) is $<%=total%>

</body>

</html>

한 매개 변수에만 total이라는 이름이 지정되어 있으므로 이 서버 비헤이비어는 더 이상 제대로 작동하지 않습니다. 이 문제를 해결하기 위해 고유 값을 가진 매개 변수가 있는지 확인하고 참여자들에 대응하여 사용할 수 있습니다. 다음 예제에서 열 이름을 사용하여 total 변수 이름을 고유하게 만들 수 있습니다. <% itemPrice_total = Recordset1.Fields.Item("itemPrice").Value * 1.0825 %>

<% salePrice_total = Recordset1.Fields.Item("salePrice").Value * 1.0825 %>

<html>

<body>

The total0(with taxes) is $<%=itemPrice_total%>

Sale price (with taxes) is $<%=salePrice_total%>

</body>

</html>

이제 검색 패턴은 참여자를 고유하게 식별하고 대응시킵니다.


244

검색 패턴 분석Dreamweaver는 참여자 searchPatterns 기능을 사용하여 다음 액션을 지원합니다.

• 파일 전송 의존성

• 포함 파일에 대한 것처럼 모든 파일 참조에 대한 파일 경로 업데이트

Dreamweaver는 서버 모델을 만들 때 모든 참여자를 검색하여 특별한 paramNames 속성을 찾아 패턴 목록을 구성합니다. URL을 찾아 파일 종속을 확인하고 경로명을 수정하기 위해 Dreamweaver는 paramNames 속성 중 하나가 _url로 끝나는 각 searchPattern 태그를 사용합니다. 단일한 searchPattern 태그에 URL을 여러 개 지정할 수 있습니다.

_includeUrl로 끝나는 paramNames 속성 값이 포함된 각 변환기 searchPattern 태그의 경우, Dreamweaver는 searchPattern 태그를 사용하여 페이지에 포함 파일 명령문을 변환합니다. 모든 URL 참조가 변환되지는 않기 때문에 Dreamweaver 는 다른 접미어 문자열을 사용하여 포함 파일 URL을 식별합니다. 또한, 단일 URL만 포함 파일로 변환될 수 있습니다.

searchPatterns 태그를 확인할 때 Dreamweaver는 다음 알고리즘을 사용합니다.

1 searchPatterns 태그에서 whereToSearch 속성을 찾습니다.

2 속성 값이 tag+로 시작하면 나머지 문자열은 태그 이름으로 간주됩니다. 태그 이름에는 공백을 사용할 수 없습니다.

3 searchPattern 태그에서 limitSearch 속성을 찾습니다.

4 속성 값이 attribute+로 시작하면 나머지 문자열은 속성 이름으로 간주됩니다. 속성 이름에는 공백을 사용할 수 없습니다.

이 네 단계가 성공적으로 수행되었으면 Dreamweaver는 특정 태그/속성 조합을 가정합니다. 그렇지 않으면, Dreamweaver는 _url 접미어 및 정의된 일반 표현식이 포함된 paramName 속성을 사용하여 searchPattern 태그 검색을 시작합니다. 일반 표현식에 대한 자세한 내용은 220페이지의 “일반 표현식”을 참조하십시오.

다음 searchPatterns 태그의 예제에는 검색 패턴이 없습니다. 태그(cfinclude)를 속성(template)과 결합하여 종속 파일 확인 및 경로 수정 등과 같은 작업을 위해 URL을 분리하기 때문입니다.<searchPatterns whereToSearch="tag+cfinclude">

<searchPattern paramNames="include_url" limitSearch="attribute+template" />

</searchPatterns>

Dreamweaver는 JavaScript 레이어에서 항상 일반 텍스트로 변환되므로 태그/속성 조합(앞 예제 참조)은 변환에 적용되지 않습니다. 파일 종속 확인 및 경로 수정 등과 같은 작업은 C 레이어에서 수행됩니다. C 레이어에서 Dreamweaver는 내부적으로 문서를 지시문(일반 텍스트)와 효율적인 트리 구조로 파싱된 태그로 분할합니다.

서버 비헤이비어 업데이트바꾸기 업데이트 기본적으로, 참여자 EDML 파일에는 <updatePatterns> 태그가 없으며 참여자의 인스턴스는 문서에서 전체적으로 대체되어 업데이트됩니다. 사용자가 기존 서버 비헤이비어를 편집하고 [확인]을 클릭하면 값이 변경된 매개 변수를 포함한 참여자가 제거되고 같은 위치에 새 값으로 다시 삽입됩니다.

사용자가 문서에서 참여자 코드를 사용자 정의하면 참여자는 검색 패턴이 이전 코드를 찾을 경우 인식되지 못할 수도 있습니다. 더 단순화된 검색 패턴으로 사용자는 문서에서 참여자 코드를 사용자 정의할 수 있습니다. 그러나 서버 비헤이비어 인스턴스를 업데이트하면 참여자가 바뀔 수 있어서 사용자 정의 편집 내용을 잃게 됩니다.

정밀 업데이트 경우에 따라, 문서에 삽입된 참여자 코드는 사용자가 원하는 대로 정의하도록 허용하는 것이 더 좋을 수도 있습니다. 이와 같이 하려면 EDML 파일에서 검색 패턴을 제한하고 업데이트 패턴을 제공합니다. 참여자가 페이지에 추가된 후 서버 비헤이비어는 이 참여자의 특정 부분만 업데이트합니다. 다음 예제는 두 매개 변수를 가진 간단한 참여자를 보여 줍니다.<% if (Recordset1.EOF) Response.Redirect("some_url_here") %>

이 예제는 다음 검색 패턴을 사용할 수 있습니다.<quickSearch>Response.Write</quickSearch>


<searchPattern paramNames="rs,new__url">

/if\s*$(\w+)\.EOF$\s*Response\.Redirect$"([^\r\n]*)"$/i

</searchPattern>

</searchPatterns>


245

사용자는 다음 예제와 같이 이 코드의 특정 인스턴스에 다른 테스트를 추가할 수 있습니다.<% if (Recordset1.EOF || x > 2) Response.Redirect("some_url_here") %>

검색 패턴은 EOF 매개 변수 뒤에서 괄호를 검색하기 때문에 실패합니다. 검색 패턴의 범위를 더욱 확장하려면 다음 예제에서와 같이 검색 패턴을 분할하여 짧게 만드십시오.<quickSearch>Response.Write</quickSearch>


<searchPattern paramNames="rs">/(\w+)\.EOF/</searchPattern>

<searchPattern paramNames="new__url">

/if\s*$[^\r\n]*$\s*Response\.Redirect\("([^\r\n]*)"/i

</searchPattern>

</searchPatterns>

단순화된 이 검색 패턴은 매우 유연하므로 사용자가 이 패턴을 코드에 추가할 수 있습니다. 그러나 서버 비헤이비어가 URL을 변경한 경우 사용자가 [확인]을 클릭하면 참여자가 바뀌고 사용자 정의 내용을 잃게 됩니다. 더 정확하게 업데이트하려면 각 매개 변수를 업데이트하기 위한 패턴이 들어 있는 updatePatterns 태그를 추가합니다.<updatePatterns>

<updatePattern paramNames="rs">/(\b)\w+(\.EOF)/\</updatePattern>

<updatePattern paramNames="new__url">

/(Response\.Redirect\(")[^\r\n]*(")/i

</updatePattern>

</updatePatterns>

업데이트 패턴에서 괄호는 순서가 바뀌어 매개 변수 앞과 뒤의 텍스트를 둘러쌉니다. 검색 패턴인 경우에는 textBeforeParam (param)textAfterParam 매개 변수를 사용합니다. 업데이트 패턴인 경우에는 (textBeforeParam)param(textAfterParam) 매개 변수를 사용합니다. 괄호로 묶인 두 개 하위 표현식 사이의 모든 텍스트는 매개 변수의 새 값으로 바뀝니다.

서버 비헤이비어 삭제기본 삭제 및 종속 수 사용자는 마이너스(-) 버튼을 클릭하거나 [삭제]를 눌러 [서버 비헤이비어] 패널에서 선택한 인스턴스를 삭제할 수 있습니다. 다른 서버 비헤이비어가 공유 중인 것을 제외한 모든 참여자가 제거됩니다. 특히, 하나 이상의 서버 비헤이비어가 같은 노드에 대한 참여자 포인터를 갖고 있으면 노드는 삭제되지 않습니다.

기본적으로, 참여자는 태그 전체를 제거하여 삭제됩니다. 삽입 위치가 "wrapSelection"이면 바깥쪽 태그만 제거됩니다. 속성의 경우 속성 선언 전체가 제거됩니다. 다음 예제에서는 form 태그의 ACTION 속성에 있는 속성 참여자를 보여 줍니다.<form action="<% my_participant %>">

속성이 삭제된 후 form만 남게 됩니다.

삭제 플래그를 사용하여 참여자 삭제 제한 경우에 따라, 참여자가 삭제되는 방식을 제한해야 할 때도 있습니다. EDML 파일에 삭제 태그를 추가하면 됩니다. 다음 예제는 링크의 href 속성인 참여자를 보여 줍니다. <a href="<%=MY_URL%>">Link Text</a>

이 속성 참여자가 삭제되고 나면 <a>Link Text</a> 태그만 남게 됩니다. 이 태그는 Dreamweaver에서 더 이상 링크로 나타나지 않습니다. 참여자 EDML 파일에 다음 태그를 추가하여 속성 값만 삭제하는 것이 더 좋은 경우도 있습니다.<delete deleteType="innerOnly"/>

다른 방법은 <delete deleteType="tagOnly"/>를 입력하여 해당 속성을 삭제할 때 전체 태그를 제거하는 것입니다. 그렇게 되면, Link Text 텍스트만 남게 됩니다.


246

Share-In-Memory JavaScript 파일과 충돌 방지여러 HTML 파일이 특정 JavaScript 파일을 참조하면 Dreamweaver는 HTML 파일이 같은 JavaScript 소스를 공유할 수 있는 특정 위치로 JavaScript를 로드합니다. 이러한 파일에는 다음과 같은 코드가 있습니다.//SHARE-IN-MEMORY=true

JavaScript 파일에 SHARE-IN-MEMORY 지시문이 있고 SRC 속성을 가진 SCRIPT 태그를 사용하여 HTML 파일이 해당 지시문을 참조하면, Dreamweaver는 코드가 모든 HTML 파일에 묵시적으로 포함되는 메모리 위치로 JavaScript를 로드합니다.

참고: 이 중심 위치로 로드된 JavaScript 파일들이 메모리를 공유하기 때문에 해당 파일은 어느 선언도 복제할 수 없습니다. share-in-memory 파일이 변수 또는 함수를 정의하고 다른 임의의 JavaScript 파일이 같은 변수 또는 함수를 정의하면 이름이 충돌합니다. 새 JavaScript 파일을 작성할 때는 이 파일들과 이름 지정 규칙을 알아야 합니다.

247

18장: 데이터 소스

Adobe Dreamweaver CS3의 데이터 소스 API 함수는 데이터 소스를 추가할 수 있도록 해줍니다. 이 데이터 소스는 [바인딩] 패널의 플러스(+) 메뉴에 나타납니다. 관련 정보를 보려면 Dreamweaver API 참조 설명서에서 dreamweaver.dbi. getDataSources() 함수를 참조하십시오.

데이터 소스 파일은 Configuration/DataSources/ServerModelName 폴더에 저장됩니다. Dreamweaver는 현재 ASP.NET/C#, ASP.NET/VisualBasic, ASP/JavaScript, ASP/VBScript, Adobe ColdFusion, JSP 및 PHP/MySQL 등의 서버 모델을 지원합니다. 각 서버 모델의 하위 폴더에는 해당 서버 모델의 데이터 소스와 연관된 HTML 및 EDML 파일이 있습니다.

다음 표는 데이터 소스를 만들 때 사용하는 파일을 보여 줍니다.

데이터 소스 작동 방식 Dreamweaver 사용자는 [바인딩] 패널을 사용하여 동적 데이터를 추가할 수 있습니다. 플러스(+) 메뉴에 나타나는 동적 데이터 객체는 페이지에 대해 지정된 서버 모델을 기반으로 합니다. 예를 들어, 사용자는 ASP 응용 프로그램용 레코드세트, 명령, 요청 변수, 세션 변수, 응용 프로그램 변수 등을 삽입할 수 있습니다.

다음 단계는 동적 데이터 추가에 관련된 과정을 설명합니다.

1 사용자가 [바인딩] 패널에서 플러스(+) 메뉴를 클릭하면 팝업 메뉴가 나타납니다.

먼저 Dreamweaver는 메뉴의 내용을 확인하기 위해 데이터 소스와 동일한 폴더에서 DataSources.xml 파일(예: Configuration/ DataSources/ASP_Js/DataSources.xml)을 찾습니다. DataSources.xml 파일은 팝업 메뉴의 내용을 설명합니다. 이 파일에는 팝업 메뉴에 표시될 HTML 파일에 대한 참조가 들어 있습니다.

Dreamweaver는 참조된 각 HTML 파일에서 title 태그를 찾습니다. 파일에 title 태그가 있는 경우에는 title 태그의 내용이 메뉴에 나타나고, 없는 경우에는 파일 이름이 메뉴에 사용됩니다.

Dreamweaver가 DataSources.xml 파일을 다 읽은 후 또는 해당 파일이 없는 경우, Dreamweaver는 폴더의 나머지 부분을 검색하여 메뉴에 나타나야 하는 다른 항목들을 찾습니다. Dreamweaver는 아직 메뉴에 없는 파일을 주 폴더에서 찾으면 해당 파일을 메뉴에 추가합니다. 하위 폴더에 아직 메뉴에 없는 파일이 있으면 Dreamweaver는 하위 메뉴를 만들고 해당 파일을 하위 메뉴에 추가합니다.

2 사용자가 플러스(+) 메뉴에서 항목을 선택하면 Dreamweaver는 addDynamicSource() 함수를 호출하여 데이터 소스의 코드를 사용자의 문서에 추가합니다.


Configuration/DataSources/ServerModelName 데이터 소스 이름.htm 데이터 소스 이름과 지원하는 JavaScript 파일을 찾는 위치를 지정합니다.

Configuration/DataSources/ServerModelName 데이터 소스 이름.edml 데이터 소스 값을 나타내기 위해 문서에 삽입되는 코드를 정의합니다.

Configuration/DataSources/ServerModelName 데이터 소스 이름.js 필요한 코드를 문서에 추가, 삽입 및 삭제하는 JavaScript 함수가 포함되어 있습니다.


248

3 Dreamweaver는 해당 서버 모델 폴더에서 각 파일을 살펴보고 각 파일에서 findDynamicSources() 함수를 호출합니다. 반환된 배열의 각 값에 대해, Dreamweaver는 동일한 파일에서 generateDynamicSourceBindings() 함수를 호출하여 사용자의 문서에 대한 각 데이터 소스의 모든 필드가 포함된 새 목록을 가져옵니다. 해당 필드는 사용자에게 [동적 데이터] 또는 [동적 텍스트] 대화 상자 또는 [바인딩] 패널에서 트리 컨트롤로 표시됩니다. ASP 문서의 데이터 소스 트리는 다음 예제처럼 표시될 수 있습니다.Recordset (Recordset1)

ColumnOneInRecordset

ColumnTwoInRecordset

Recordset (Recordset2)

ColumnOfRecordset

Request

NameOfRequestVariable

NameOfAnotherRequestVariable

Session

NameOfSessionVariable

4 사용자가 [바인딩] 패널에서 데이터 소스 이름을 두 번 클릭하여 데이터 소스를 편집하면 Dreamweaver는 editDynamicSource()를 호출하여 트리에서 사용자의 편집 내용을 처리합니다.

5 사용자가 마이너스(-) 버튼을 클릭하면 Dreamweaver는 트리에서 현재 노드 선택 대상을 가져와서 deleteDynamicSource() 함수에 전달합니다. 이 함수는 addDynamicSource() 함수에 의해 이전에 추가되었던 코드를 삭제합니다. 현재 선택 대상을 삭제할 수 없으면 오류 메시지가 반환됩니다. deleteDynamicSource() 함수가 반환된 후, Dreamweaver는 findDynamicSources() 및 generateDynamicSourceBindings() 함수를 호출하여 데이터 소스 트리를 새로 고칩니다.

6 사용자가 데이터 소스를 선택하고 [동적 데이터] 또는 [동적 텍스트] 대화 상자에서 [확인]을 클릭하거나 [바인딩] 패널에서 [삽입] 또는 [바인딩]을 클릭하면 Dreamweaver는 generateDynamicDataRef()를 호출합니다. 반환값은 문서의 현재 삽입 포인터가 있는 위치에 삽입됩니다.

7 사용자가 [동적 데이터] 또는 [동적 텍스트] 대화 상자를 열어 기존 동적 데이터 객체를 편집하면 데이터 소스 트리의 선택 대상은 동적 데이터 객체로 초기화되어야 합니다. 트리 컨트롤을 초기화하기 위해 Dreamweaver는 해당 서버 모델 폴더(예: Configuration/DataSources/ASP_Js 폴더)의 각 파일을 살펴보고 각 파일에서 inspectDynamicDataRef()의 구현을 호출합니다.

Dreamweaver는 inspectDynamicDataRef() 함수를 호출하여 동적 데이터 객체를 사용자 문서의 코드에서 트리의 항목으로 다시 변환합니다. 이 과정은 generateDynamicDataRef() 함수가 호출될 때의 상황과 정반대입니다. inspectDynamicDataRef() 함수가 두 요소가 포함된 배열을 반환하면 Dreamweaver에서는 시각적인 신호와 함께 트리 내의 항목 중 어떤 항목이 현재 선택 대상으로 바인딩될지 보여 줍니다.

8 사용자가 선택 대상을 변경할 때마다 Dreamweaver는 inspectDynamicDataRef() 함수를 호출하여 새로 선택한 대상이 동적 텍스트인지 또는 동적 속성을 가진 태그인지 여부를 판별합니다. 동적 텍스트인 경우, Dreamweaver는 [바인딩] 패널에 현재 선택한 객체의 바인딩을 표시합니다.

9 [동적 데이터], [동적 텍스트] 대화 상자 또는 [바인딩] 패널을 사용하면, 사용자가 이미 페이지에 추가한 동적 텍스트 객체 또는 동적 속성의 데이터 형식을 변경할 수 있습니다. 데이터 형식이 변경되면 Dreamweaver는 generateDynamicDataRef() 함수를 호출하여 사용자의 문서에 삽입할 문자열을 가져옵니다. 그런 다음, 가져온 문자열을 formatDynamicDataRef() 함수에 전달합니다. 자세한 내용은 263페이지의 “formatDynamicDataRef()”를 참조하십시오. formatDynamicDataRef() 함수가 반환하는 문자열은 사용자의 문서에 삽입됩니다.


249

간단한 데이터 소스 예제이 Extension은 Adobe ColdFusion 문서에 대한 [바인딩] 패널에 사용자 정의 데이터 소스를 추가합니다. 사용자들은 새 데이터 소스에서 원하는 변수를 지정할 수 있습니다.

이 예제에서는 MyDatasource.js JavaScript 파일, MyDatasource_DataRef.edml 파일 및 MyDatasource Variable 명령 파일이 포함된 MyDatasource라는 데이터 소스를 만들어 사용자가 특정 변수의 이름을 입력할 수 있는 대화 상자를 구현합니다. MyDatasource 예제는 Cookie Variable 데이터 소스 및 URL Variable 데이터 소스의 구현을 기반으로 합니다. 이러한 데이터 소스의 파일은 Configuration/DataSources/ColdFusion폴더에 있습니다.

다음 단계를 따라 이 데이터 소스를 만듭니다.

• 249페이지의 “데이터 소스 정의 파일 만들기”

• 250페이지의 “EDML 파일 만들기”

• 250페이지의 “데이터 소스 API 함수를 구현하는 JavaScript 파일 만들기”

• 253페이지의 “사용자 입력을 위해 지원하는 명령 파일 만들기”

• 254페이지의 “새 데이터 소스 테스트”

데이터 소스 정의 파일 만들기데이터 소스 정의 파일은 데이터 소스가 [바인딩] 패널의 플러스(+) 메뉴에 나타날 때 데이터 소스의 이름 정보를 Dreamweaver에 제공합니다. 또한 데이터 소스 구현을 위해 지원하는 JavaScript 파일이 있는 위치를 알려 줍니다.

사용자가 [바인딩] 패널의 플러스(+) 메뉴를 클릭하면 Dreamweaver는 DataSources 폴더에서 현재 서버 모델을 검색하고 이 폴더의 HTML(HTM) 파일에 정의된 사용 가능한 모든 데이터 소스를 수집합니다. 그러므로 사용자가 사용할 수 있는 새 데이터 소스를 만들려면 데이터 소스 정의 파일을 만들어야 합니다. 이 데이터 소스 정의 파일은 TITLE 태그를 사용하여 해당 데이터 소스의 이름을 제공하고, SCRIPT 태그를 사용하여 지원하는 모든 JavaScript 파일의 위치를 제공합니다.

또한 이 데이터 소스를 구현하려면 여러 개의 지원 파일이 필요합니다. 일반적으로, 이러한 지원 파일의 함수를 사용할 필요가 없는 경우도 있습니다. 하지만, 이 예제에서와 같이 이 지원 파일이 필요한 경우도 있습니다. 예를 들어, dwscriptsServer.js 파일에는 이 데이터 소스의 구현 시 사용되는 dwscripts.stripCFOutputTags() 함수가 포함되어 있습니다. 또한 DataSourceClass.js 파일을 사용하면 DataSource 클래스의 인스턴스를 만들어 findDynamicSources() 함수의 반환값으로 사용할 수 있습니다.

데이터 소스 정의 파일을 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음을 입력합니다.<HTML>

<HEAD>

<TITLE>MyDatasource</TITLE>

<SCRIPT SRC="../../Shared/Common/Scripts/dwscripts.js"></SCRIPT>

<SCRIPT SRC="../../Shared/Common/Scripts/dwscriptsServer.js"></SCRIPT>

<SCRIPT SRC="../../Shared/Common/Scripts/DataSourceClass.js"></SCRIPT>

<SCRIPT SRC="MyDatasource.js"></SCRIPT>

</HEAD>

<body></body>

</HTML>

3 이 파일을 Configuration/DataSources/ColdFusion 폴더에 MyDatasource.htm이라는 이름으로 저장합니다.


250

EDML 파일 만들기EDML 파일은 데이터 소스 값을 나타내기 위해 문서에 삽입되는 코드를 정의합니다. EDML 파일에 대한 자세한 내용은 210페이지의 “서버 비헤이비어”를 참조하십시오. 사용자가 데이터 소스에서 문서로 특정 값을 추가할 때 Dreamweaver는 런타임에 실제 값으로 변환하는 코드를 삽입합니다. 참여 EDML 파일은 해당 문서의 코드를 정의합니다. 자세한 내용은 226페이지의 “참여자 EDML 파일”을 참조하십시오.

MyDatasource Variable의 경우, Dreamweaver에서 ColdFusion 코드 <cfoutput>#MyXML.variable#</cfoutput>를 variable 값이 데이터 소스에서 사용자가 원하는 값과 일치하는 곳에 삽입하는 것이 좋습니다.

EDML 파일을 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음을 입력합니다.<participant>

<quickSearch><![CDATA[#]]></quickSearch>

<insertText location="replaceSelection"><![CDATA[<cfoutput>#MyDatasource.

@@bindingName@@#</cfoutput>]]></insertText>

<searchPatterns whereToSearch="tag+cfoutput">

<searchPattern paramNames="sourceName,bindingName"><![CDATA[/#(?:\s*\w+\s*\()?

(MyDatasource)\.(\w+)\b[^#]*#/i]]></searchPattern>

</searchPatterns>

</participant>

3 이 파일을 Configuration/DataSources/ColdFusion 폴더에 MyDatasource_DataRef.edml이라는 이름으로 저장합니다.

데이터 소스 API 함수를 구현하는 JavaScript 파일 만들기데이터 소스의 이름, 지원하는 스크립트 파일의 이름 및 작업 중인 Dreamweaver 문서의 코드를 정의한 후, 필요한 코드를 문서에 추가, 삽입 및 삭제하는 기능을 사용자에게 제공하는 JavaScript 함수를 Dreamweaver에서 지정해야 합니다.

Cookie Variable 데이터 소스의 생성을 기반으로, 다음 예제에서와 같이 MyXML 데이터 소스를 구현할 수 있습니다. addDynamicSource() 함수에서 사용되는 MyDatasource_Variable 명령은 253페이지의 “사용자 입력을 위해 지원하는 명령 파일 만들기”에 정의되어 있습니다.

JavaScript 파일을 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음을 입력합니다.//************** 전역 변수 *****************var MyDatasource_FILENAME = "REQ_D.gif";var DATASOURCELEAF_FILENAME = "DSL_D.gif";

//****************** API **********************

function addDynamicSource()

{

MM.retVal = "";

MM.MyDatasourceContents = "";

dw.popupCommand("MyDatasource_Variable");if (MM.retVal == "OK")

{

var theResponse = MM.MyDatasourceContents;

if (theResponse.length)

{

var siteURL = dw.getSiteRoot();

if (siteURL.length)

{

dwscripts.addListValueToNote(siteURL, "MyDatasource", theResponse);

}

else


251

{

alert(MM.MSG_DefineSite);}

}

else

{

alert(MM.MSG_DefineMyDatasource);}

}

}

function findDynamicSources()

{

var retList = new Array();

var siteURL = dw.getSiteRoot()

if (siteURL.length)

{

var bindingsArray = dwscripts.getListValuesFromNote(siteURL, "MyDatasource");

if (bindingsArray.length > 0)

{

// 여기서 DataSourceClass.js 파일에 정의된 DataSource 클래스 인스턴스를

// 만들어 반환값을 저장합니다.

retList.push(new DataSource("MyDatasource",

MyDatasource_FILENAME, false,

"MyDatasource.htm"))

}

}

return retList;

}

function generateDynamicSourceBindings(sourceName)

{

var retVal = new Array();


// 지역화된 객체 이름...if (sourceName != "MyDatasource")

{

sourceName = "MyDatasource";

}

if (siteURL.length)

{

var bindingsArray = dwscripts.getListValuesFromNote(siteURL, sourceName);

retVal = getDataSourceBindingList(bindingsArray,

DATASOURCELEAF_FILENAME, true,

"MyDatasource.htm");

}

return retVal;

}


252

function generateDynamicDataRef(sourceName, bindingName, dropObject)

{


paramObj.bindingName = bindingName;

var retStr = extPart.getInsertString("", "MyDatasource_DataRef", paramObj);

// CFOUTPUT 태그 내에 삽입하거나 ColdFusion 태그의 속성에

// 바인딩하려는 경우 cfoutput 태그를 제거해야 하므로 dwscriptsServer.js의

// dwscripts.canStripCfOutputTags() 함수를 사용합니다.

if (dwscripts.canStripCfOutputTags(dropObject, true))

{

retStr = dwscripts.stripCFOutputTags(retStr, true);

}

return retStr;

}

function inspectDynamicDataRef(expression)

{

var retArray = new Array();

if(expression.length)

{

var params = extPart.findInString("MyDatasource_DataRef", expression);if (params)

{

retArray[0] = params.sourceName;

retArray[1] = params.bindingName;

}

}

return retArray;

}

function deleteDynamicSource(sourceName, bindingName)

{


if (siteURL.length)

{

//지역화된 객체 이름if (sourceName != "MyDatasource")

{

sourceName = "MyDatasource";

}

dwscripts.deleteListValueFromNote(siteURL, sourceName, bindingName);

}

}

3 이 파일을 Configuration/DataSources/ColdFusion 폴더에 MyDatasource.htm이라는 이름으로 저장합니다.


253

사용자 입력을 위해 지원하는 명령 파일 만들기addDynamicSource() 함수에는 dw.popupCommand("MyDatasrouce_Variable") 명령이 포함되어 있습니다. 이 명령을 실행하면 사용자가 특정 변수 이름을 입력할 수 있는 대화 상자가 열립니다. 하지만 MyDatasource Variable에 사용할 대화 상자도 만들어야 합니다.

사용자에게 대화 상자를 제공하려면 새로운 명령 파일을 만들어야 합니다. 새로운 명령 파일에는 HTML 형식의 명령 정의 파일 및 JavaScript 형식의 명령 구현 파일이 있습니다. 명령 파일에 대한 자세한 내용은 110페이지의 “명령의 작동 방식”을 참조하십시오.

이 명령 정의 파일은 지원하는 구현 JavaScript 파일의 위치 및 사용자가 참조하는 대화 상자의 양식에 대한 정보를 Dreamweaver에 제공합니다. 지원하는 JavaScript 파일에 따라 대화 상자 버튼과 대화 상자에서 사용자 입력을 지정하는 방법이 결정됩니다.

명령 정의 파일을 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음을 입력합니다.<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">

<html>

<head>

<title>MyDatasource Variable</title>

<script src="MyDatasource_Variable.js"></script><SCRIPT SRC="../Shared/MM/Scripts/CMN/displayHelp.js"></SCRIPT>

<SCRIPT SRC="../Shared/MM/Scripts/CMN/string.js"></SCRIPT>

<link href="../fields.css" rel="stylesheet" type="text/css">

</head>

<body>

<form>

<div ALIGN="center">

<table border="0" cellpadding="2" cellspacing="4">

<tr>

<td align="right" valign="baseline" nowrap>Name:</td>

<td valign="baseline" nowrap>

<input name="theName" type="text" class="medTField">

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

3 이 파일을 Configuration/Commands 폴더에 MyDatasource_Variable.htm이라는 이름으로 저장합니다.

참고: MyDatasource_Variable.js 파일은 다음 절차에서 만들 구현 파일입니다.

지원하는 JavaScript 파일을 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음을 입력합니다.//******************* API **********************

function commandButtons(){

return new Array(MM.BTN_OK,"okClicked()",MM.BTN_Cancel,"window.close()");}

//***************** LOCAL FUNCTIONS ******************

function okClicked(){

var nameObj = document.forms[0].theName;


254

if (nameObj.value) {

if (IsValidVarName(nameObj.value)) {

MM.MyDatasourceContents = nameObj.value;

MM.retVal = "OK";

window.close();

} else {

alert(nameObj.value + " " + MM.MSG_InvalidParamName);}

} else {

alert(MM.MSG_NoName);}

}

3 이 파일을 Configuration/Commands 폴더에 MyDatasource_Variable.js라는 이름으로 저장합니다.

새 데이터 소스 테스트이제, Dreamweaver를 열거나 이미 열려 있는 경우 다시 시작하여 ColdFusion 파일을 열거나 새 파일을 만들 수 있습니다.

새 데이터 소스를 테스트하려면:1 문서에 마우스 포인터를 두고 [바인딩] 패널에서 플러스(+) 메뉴를 클릭하여 사용 가능한 데이터 소스를 확인합니다. MyDatasource는 목록의 맨 아래에 나타납니다.

2 MyDatasource 데이터 소스 옵션을 클릭하면 만들어 둔 MyDatasource Variable 대화 상자가 나타납니다.


255

3 대화 상자에 특정 값을 입력하고 [확인]을 클릭합니다.

[바인딩] 패널에는 다음과 같이 해당 데이터 소스 이름 아래에 대화 상자의 변수가 포함된 트리 내에 데이터 소스가 표시됩니다.

4 변수를 문서로 드래그하면 Dreamweaver는 다음과 같이 EDML 파일로부터 해당 코드를 삽입합니다.

데이터 소스 API 함수데이터 소스 API의 함수는 데이터 소스를 검색, 추가, 편집 및 삭제할 수 있도록 해주고, 동적 데이터 객체를 생성하거나 관리합니다.

addDynamicSource()


설명이 함수는 동적 데이터 소스를 추가합니다. 각 데이터 소스 파일에서 이 함수가 한 번씩 구현되므로, 데이터 소스가 플러스(+) 메뉴에서 선택될 때 addDynamicSource() 함수의 해당 구현이 호출됩니다.

예를 들어, 레코드세트 또는 명령의 경우, 새 서버 비헤이비어를 문서에 삽입하는 dw.serverBehaviorInspector. popupServerBehavior() 가 호출됩니다. 요청, 세션 및 응용 프로그램 변수의 경우 Dreamweaver는 HTML/JavaScript 대화 상자를 표시하여 변수의 이름을 수집합니다. 이 비헤이비어는 나중에 사용할 수 있도록 변수 이름을 저장합니다.

addDynamicSource() 함수가 반환된 후, Dreamweaver는 데이터 소스 트리의 내용을 지우고 findDynamicSources() 및 generateDynamicSourceBindings() 함수를 호출하여 데이터 소스 트리를 다시 채웁니다.

반환값없음


256

deleteDynamicSource()


설명이 함수는 사용자가 트리에서 데이터 소스를 선택하고 마이너스(-) 버튼을 클릭할 때 호출됩니다.

예를 들어, Dreamweaver에서 선택 대상이 레코드세트이거나 명령이면 deleteDynamicSource() 함수는 dw.serverBehaviorInspector.deleteServerBehavior() 함수를 호출합니다. 요청, 세션 또는 응용 프로그램 변수가 선택된 경우 함수는 해당 변수가 삭제되었다는 것을 기억하고 더 이상 표시하지 않습니다. deleteDynamicSource() 함수가 반환된 후, Dreamweaver는 데이터 소스 트리의 내용을 지우고 findDynamicSources() 및 generateDynamicSourceBindings() 함수를 호출하여 사용자의 문서에 대한 모든 데이터 소스가 포함된 새 목록을 가져옵니다.

인수sourceName, bindingName

• sourceName 인수는 자식 노드가 연관된 최상위 노드의 이름입니다.

• bindingName 인수는 자식 노드의 이름입니다.

반환값없음

displayHelp()

설명이 함수를 정의하면 대화 상자의 [확인]과 [취소] 버튼 아래에 [도움말] 버튼이 나타납니다. 사용자가 [도움말] 버튼을 클릭하면 이 함수가 호출됩니다.

인수없음

반환값없음







}


257

editDynamicSource()


설명이 함수는 사용자가 [바인딩] 패널에서 데이터 소스 이름을 두 번 클릭하여 데이터 소스를 편집할 때 호출됩니다. 이 함수를 구현하여 사용자 편집 작업을 트리에서 처리할 수 있습니다. 그렇지 않으면 데이터 소스에 일치하는 서버 비헤이비어가 자동으로 호출됩니다. Extension 개발자는 이 함수를 사용하여 서버 비헤이비어의 기본 구현을 무시하고 사용자 정의 핸들러를 제공할 수 있습니다.


• sourceName 인수는 자식 노드가 연관된 최상위 노드의 이름입니다.

• bindingName 인수는 자식 노드의 이름입니다.

반환값Dreamweaver에 부울 값이 반환되며, 함수가 편집을 처리했으면 true가 반환되고 그렇지 않으면 false가 반환됩니다.

findDynamicSources()


설명이 함수는 [동적 데이터] 또는 [동적 텍스트] 대화 상자 또는 [바인딩] 패널에 나타나는 데이터 소스 트리의 최상위 노드를 반환합니다. 각 데이터 소스 파일에는 findDynamicSources() 함수의 구현이 있습니다. 트리를 새로 고칠 때 Dreamweaver는 DataSources 폴더에서 모든 파일을 읽고 각 파일에서 findDynamicSources() 함수를 호출합니다.

반환값Dreamweaver는 각 객체에 속성을 최대 다섯 개까지 포함시킬 수 있는 JavaScript 객체의 배열을 예측합니다. 이 속성에 대해서는 다음 목록에서 설명합니다.

• title 속성은 각 부모 노드 아이콘의 오른쪽에 나타나는 레이블 문자열입니다. title 속성은 항상 필수입니다.

• imageFile 속성은 [동적 데이터] 또는 [동적 텍스트] 대화 상자 또는 [바인딩] 패널의 트리 컨트롤에서 부모 노드를 나타내는 아이콘(GIF 이미지)이 들어 있는 파일의 경로입니다. 이 속성은 필수입니다.

• allowDelete 속성은 선택 사항입니다. 이 속성이 false로 설정되면 사용자가 [바인딩] 패널에서 이 노드를 클릭할 때 마이너스(-) 버튼이 비활성화됩니다. 이 속성이 true로 설정되면 마이너스(-) 버튼이 활성화됩니다. 이 속성이 정의되어 있지 않으면 기본값은 true입니다.

• dataSource 속성은 findDynamicSources() 함수가 정의되어 있는 파일의 간단한 이름입니다. 예를 들어, Configuration/ DataSources/ASP_Js 폴더의 Session.htm 파일에서 findDynamicSources() 함수는 dataSource 속성을 session.htm으로 설정합니다. 이 속성은 필수입니다.

• name 속성은 데이터 소스와 연관된 서버 비헤이비어가 있는 경우, 이 서버 비헤이비어의 이름이 됩니다. 레코드세트 같은 일부 데이터 소스는 서버 비헤이비어와 연관되어 있습니다. 레코드세트를 만들고 rsAuthors라는 이름을 지정하는 경우, name 속성은 rsAuthors와 동일해야 합니다. name 속성은 항상 정의되지만 세션 변수와 같은 데이터 소스와 연관된 서버 비헤이비어가 없는 경우에는 빈 문자열("")이 될 수도 있습니다.

참고: 이러한 속성을 정의하는 JavaScript 클래스는 DataSourceClass.js 파일에 존재합니다. 이 파일은 Configuration/Shared/ Common/Scripts폴더에 저장되어 있습니다.


258

generateDynamicDataRef()


설명이 함수는 자식 노드의 동적 데이터 객체를 생성합니다.


• sourceName 인수는 자식 노드와 연관된 최상위 노드의 이름입니다.

• bindingName 인수는 동적 데이터 객체를 생성하려는 자식 노드의 이름입니다.

반환값문자열이 반환되며, 이 문자열은 사용자의 문서에 삽입되기 전에 서식 지정을 위해 formatDynamicDataRef() 함수로 전달될 수 있습니다.

generateDynamicSourceBindings()


설명이 함수는 최상위 노드의 자식을 반환합니다.

인수sourceName

• sourceName 인수는 반환하려는 자식 노드의 최상위 노드 이름입니다.

반환값Dreamweaver는 각 객체에 속성을 최대 네 개까지 포함시킬 수 있는 JavaScript 객체의 배열을 예측합니다. 이 속성에 대해서는 다음 목록에서 설명합니다.

• title 속성은 각 부모 노드 아이콘의 오른쪽에 나타나는 레이블 문자열입니다. 이 속성은 필수입니다.

• allowDelete 속성은 선택 사항입니다. 이 속성이 false로 설정되면 사용자가 [바인딩] 패널에서 이 노드를 클릭할 때 마이너스(-) 버튼이 비활성화됩니다. 이 속성이 true로 설정되면 마이너스(-) 버튼이 활성화됩니다. 이 속성이 정의되어 있지 않으면 기본값은 true입니다.

• dataSource 속성은 findDynamicSources() 함수가 정의되어 있는 파일의 간단한 이름입니다. 예를 들어, Configuration/ DataSources/ASP_Js 폴더의 Session.htm 파일에서 findDynamicSources() 함수는 dataSource 속성을 session.htm으로 설정합니다. 이 속성은 필수입니다.

• name 속성은 데이터 소스와 연관된 서버 비헤이비어가 있는 경우, 이 서버 비헤이비어의 이름이 됩니다. 이것은 필수 속성입니다. 레코드세트 같은 일부 데이터 소스는 서버 비헤이비어와 연관되어 있습니다. 레코드세트를 만들고 rsAuthors라는 이름을 지정하는 경우, name 속성은 rsAuthors와 동일해야 합니다. 세션 변수 같은 데이터 소스에는 해당 서버 비헤이비어가 없습니다. 이 경우, 이름 속성은 빈 문자열("")이어야 합니다.

참고: 이러한 속성을 정의하는 JavaScript 클래스는 DataSourceClass.js 파일에 존재합니다. 이 파일은 Configuration/Shared/ Common/Scripts폴더에 저장되어 있습니다.


259

inspectDynamicDataRef()


설명이 함수는 동적 데이터 객체의 데이터 소스 트리에서 해당 노드를 판별합니다. inspectDynamicDataRef() 함수는 Dreamweaver에서 전달하는 문자열을 사용하여 이를 generateDynamicDataRef() 함수가 트리의 각 노드에 대해 반환하는 문자열과 비교합니다. 일치하는 것이 없으면 inspectDynamicDataRef() 함수는 전달 받은 문자열과 일치하는 트리의 노드를 표시합니다. 이 함수는 두 개의 요소로 구성된 배열을 사용하여 노드를 표시합니다. 첫 번째 요소는 부모 노드의 부모 이름이고 두 번째 요소는 자식 노드의 이름입니다. 일치하는 것이 없으면 inspectDynamicDataRef() 함수는 빈 배열을 반환합니다.

inspectDynamicDataRef() 함수는 각 구현 시 이 함수의 객체 형식과 일치하는 항목만 검색합니다. 예를 들어, inspectDynamicDataRef() 함수의 레코드세트 구현은 전달 받은 문자열이 트리의 레코드세트 노드와 일치하는 경우에만 일치하는 항목을 검색합니다 .

인수string

• string 인수는 동적 데이터 객체입니다.

반환값Dreamweaver는 일치하는 노드에 대해 두 개의 요소(부모 이름과 자식 이름)로 된 배열을 예측합니다. 일치하는 것이 없으면 null을 반환합니다.

260

19장: 서버 서식

247페이지의 “데이터 소스”에서는 Adobe Dreamweaver CS3이 적절한 위치에 서버 표현식을 추가하여 사용자의 문서에 동적 데이터를 삽입하는 방법에 대해 설명합니다. 방문자가 웹 서버에서 문서를 요청하면 해당 서버 표현식은 데이터베이스의 값, 요청 변수의 내용 또는 기타 동적인 값으로 변환됩니다. Dreamweaver 서버 서식은 이러한 동적인 값이 방문자에게 제공되는 방법의 서식을 지정하도록 해 줍니다.

이 항목에서는 247페이지의 “데이터 소스”에서 설명한 함수에 의해 반환되는 동적 데이터의 서식을 지정하는 API에 대해 설명합니다. 이 두 항목에 설명된 함수는 함께 사용되어 동적 데이터의 서식을 지정합니다. 사용자가 동적 데이터의 서식을 선택하면 Dreamweaver는 데이터 소스 함수 generateDynamicDataRef()를 호출하여 사용자의 문서에 삽입할 문자열을 가져옵니다(258페이지의 “generateDynamicDataRef()” 참조). 사용자의 문서에 이 문자열을 삽입하기 전에 Dreamweaver는 이 항목에서 설명한 formatDynamicDataRef() 함수에 이 문자열을 전달합니다. formatDynamicDataRef() 함수가 반환하는 문자열은 서식이 지정된 동적 데이터이며 이 데이터는 마지막에 사용자 문서에 삽입됩니다.

Dreamweaver 사용자는 내장된 서식을 사용하여 데이터에 서식을 지정하거나 내장된 서식 유형을 기반으로 새 서식을 만들거나 사용자 정의 서식 유형을 기반으로 새 서식을 만들 수 있습니다.

사용자는 여러 가지 방법으로 동적 데이터의 서식을 지정할 수 있습니다. [동적 데이터], [동적 텍스트] 대화 상자 또는 [바인딩] 패널의 [서식] 메뉴를 사용하면 HTML 문서에 데이터를 삽입하기 전에 데이터의 서식을 지정할 수 있습니다. 서식을 직접 만들려면 [서식] 메뉴에서 [서식 목록 편집] 명령을 선택하거나 플러스(+) 메뉴에서 서식 유형을 선택하면 됩니다. 플러스(+) 메뉴에는 서식 유형 목록이 포함되어 있습니다. 서식 유형은 [통화], [날짜/시간] 또는 [대/소문자] 같은 기본 서식 범주입니다. 서식 유형은 서식의 범주에 대한 일반적인 매개 변수를 모두 모아서 제공하므로 간단하게 새 서식을 만들 수 있습니다.

한 예제로 새 통화 서식을 만들어 봅니다. 기본적으로 모든 통화 서식 지정 작업은 숫자를 문자열로 변환, 콤마 및 소수점 삽입, 달러($) 기호 같은 통화 기호 삽입 등으로 구성됩니다. 통화 서식 데이터 형식은 일반적인 매개 변수를 모두 제공하며 사용자는 각 매개 변수의 값을 지정할 수 있습니다.

데이터 서식 지정 작동 방식모든 서식 파일은 Configuration/ServerFormats/currentServerModel 폴더에 있습니다. 각 하위 폴더에는 XML 파일 하나와 HTML 파일 여러 개가 포함되어 있습니다.

Formats.xml 파일은 [서식] 메뉴에 있는 모든 선택 사항에 대해 설명합니다. Dreamweaver는 [서식 목록 편집] 및 [없음] 옵션을 자동으로 추가합니다.

또한 이 폴더에는 현재 설치된 각 서식 유형에 대한 HTML 파일이 하나씩 포함됩니다. 현재 설치된 서식 유형에는 AlphaCase, Currency, DateTime, Math, Number, Percent, Simple 및 Trim이 있습니다.

Formats.xml 파일Formats.xml 파일에는 [서식] 메뉴의 각 항목에 대한 format 태그가 하나씩 있습니다. 각 format 태그에는 다음과 같은 필수 속성이 들어 있습니다.

• file=fileName 속성은 "Currency"와 같은 서식 유형에 대한 HTML 파일입니다.

• title=string 속성은 "Currency - default"처럼 [서식] 메뉴에 나타나는 문자열입니다.

• expression=regexp 속성은 이 서식을 사용하는 동적 데이터 객체에 상응하는 일반 표현식입니다. 이 표현식은 동적 데이터 객체에 현재 적용될 서식을 결정합니다. 예를 들어, "Currency - default" 서식의 표현식은 "<%\s*=\s*FormatCurrency\

(.*, -1, -2, -2, -2\)\s*%>|<%\s*=\s*DoCurrency$.*, -1, -2, -2, -2$\s*%>"입니다. expression 속성의 값은 파일의 모든 format 태그에서 고유해야 합니다. 즉, 이 서식의 인스턴스만 해당 표현식과 일치하도록 속성 값이 구체적이어야 합니다.

• visibility=[hidden | visible] 속성은 값이 [서식] 메뉴에 표시되는지 여부를 나타냅니다. visibility 속성의 값이 hidden이면 해당 서식이 [서식] 메뉴에 나타나지 않습니다.

261

이름이 지정된 임의의 속성이 format 태그에 추가로 포함될 수도 있습니다.

일부 데이터 서식 지정 함수는 JavaScript 객체인 format 인수를 필요로 합니다. 이 객체는 Formats.xml 파일의 format 태그에 해당하는 노드입니다. 이 객체는 해당하는 format 태그의 각 속성에 대한 JavaScript 속성을 가지고 있습니다.

다음 예제에서는 "Currency - default" 문자열의 format 태그를 보여 줍니다.<format file="Currency" title="Currency - default" ¬

expression="<%\s*=\s*FormatCurrency$.*, -1, -2, -2, -2$\s*%>|¬

<%\s*=\s*DoCurrency$.*, -1, -2, -2, -2$\s*%>"

NumDigitsAfterDecimal=-1 IncludeLeadingDigit=-2 ¬

UseParensForNegativeNumbers=-2 GroupDigits=-2/>

이 서식의 서식 유형은 Currency이며, 문자열 "Currency - default"가 [서식] 메뉴에 나타납니다. 표현식 <%\s*=\s*FormatCurrency$.*, -1, -2, -2, -2$\s*%>|<%\s*=\s*DoCurrency$.*, -1, -2, -2, -2$\s*%>는 사용자 문서에서 이 서식이 적용된 경우를 찾습니다.

NumDigitsAfterDecimal, IncludeLeadingDigit, UseParensForNegativeNumbers 및 GroupDigits 매개 변수는 Currency 서식 유형에 사용되며 필수는 아닙니다. 이 매개 변수는 Currency 서식 유형에 대한 [매개 변수] 대화 상자에 나타납니다. [매개 변수] 대화 상자는 사용자가 [서식 목록 편집] 대화 상자의 플러스(+) 메뉴에서 Currency 서식 유형을 선택할 때 나타납니다. 이러한 매개 변수에 사용하도록 지정된 값은 새 서식을 정의합니다.

서식 목록 편집 플러스(+) 메뉴ServerFormats 폴더의 파일이 [서식 목록 편집] 대화 상자의 플러스(+) 메뉴에 나타나지 않도록 하려면 HTML 파일의 첫 번째 행에 다음 명령문을 추가합니다.

메뉴의 내용을 결정하기 위해 Dreamweaver는 먼저 데이터 서식이 포함된 폴더와 동일한 폴더(예: Configuration/ServerFormats/ ASP/)에서 ServerFormats.xml 파일을 검색합니다. ServerFormats.xml 파일은 [서식 목록 편집] 대화 상자의 플러스(+) 메뉴에 포함된 내용에 대해 설명합니다. 이 파일에는 메뉴에 나열되는 HTML 파일에 대한 참조가 들어 있습니다.

Dreamweaver는 참조된 각 HTML 파일에서 title 태그를 찾습니다. 파일에 title 태그가 있는 경우에는 title 태그의 내용이 메뉴에 나타나고, 없는 경우에는 파일 이름이 메뉴에 사용됩니다.

Dreamweaver가 DataSources.xml 파일을 다 검색한 후나 해당 파일이 없는 경우, Dreamweaver는 폴더의 나머지 부분에서 메뉴에 나타나는 다른 항목들을 찾습니다. Dreamweaver가 메뉴에 없는 파일을 기본 폴더에서 찾으면 이 파일을 추가합니다. 아직 메뉴에 없는 파일이 하위 폴더에 포함되어 있으면 Dreamweaver는 하위 메뉴를 만들어 해당 파일을 추가합니다.

데이터 서식 지정 함수가 호출되는 경우데이터 서식 함수는 다음과 같은 시나리오에서 호출됩니다.

• [동적 데이터 ]또는 [동적 텍스트 ]대화 상자에서 사용자는 데이터 소스 트리에서 특정 노드를 선택하고 [서식] 메뉴에서 특정 서식을 선택합니다. 사용자가 서식을 선택하면 Dreamweaver는 generateDynamicDataRef() 함수를 호출하여 generateDynamicDataRef() 함수에서 formatDynamicDataRef() 함수로 그 반환값을 전달합니다. formatDynamicDataRef() 함수에서 반환된 값은 대화 상자의 [코드] 설정에 나타납니다. 사용자가 [확인]을 클릭하면 코드의 문자열이 사용자 문서에 삽입됩니다. 다음으로, Dreamweaver는 applyFormat() 함수를 호출하여 함수 선언을 삽입합니다. 자세한 내용은 258페이지의 “generateDynamicDataRef()”를 참조하십시오. 사용자가 [데이터 결합] 패널에서 작업하는 경우에도 유사한 프로세스가 수행됩니다.

• 사용자가 서식을 변경하거나 동적 데이터 항목을 삭제하면 deleteFormat() 함수가 호출됩니다. deleteFormat() 함수는 지원 스크립트를 문서에서 제거합니다.

• 사용자가 [서식 목록 편집 ]대화 상자의 플러스(+) 버튼을 클릭하면 Dreamweaver는 지정된 서버 모델에 대한 모든 서식 유형이 포함된 메뉴를 표시합니다. 각 서식 유형은 Configuration/ServerFormats/currentServerModel 폴더의 파일에 대응합니다.


262

사용자가 플러스(+) 메뉴에서 사용자 지정 매개 변수가 필요한 서식을 선택하면 Dreamweaver는 body 태그에서 onload 핸들러를 실행하고 [매개 변수] 대화 상자를 표시하여 해당 서식 유형의 매개 변수를 보여 줍니다. 이 대화 상자에서 사용자가 해당 서식에 사용할 매개 변수를 선택하고 [확인]을 클릭하면 Dreamweaver는 applyFormatDefinition() 함수를 호출합니다.

선택된 서식이 [매개 변수] 대화 상자를 표시할 필요가 없으면 Dreamweaver는 사용자가 플러스(+) 메뉴에서 서식 유형을 선택할 때 applyFormatDefinition() 함수를 호출합니다.나중에 사용자가 [서식 목록 편집] 대화 상자에서 서식을 선택하고 [편집] 버튼을 클릭하여 서식을 편집하면 Dreamweaver는 [매개 변수] 대화 상자를 표시하기 전에 inspectFormatDefinition()을 호출합니다. 따라서 양식 컨트롤은 올바른 값으로 초기화됩니다.

• 나중에 사용자가 [서식 목록 편집] 대화 상자에서 서식을 선택하고 [편집] 버튼을 클릭하여 서식을 편집하면 Dreamweaver는 [매개 변수] 대화 상자를 표시하기 전에 inspectFormatDefinition() 함수를 호출합니다. 따라서 양식 컨트롤은 올바른 값으로 초기화됩니다.

서버 서식 API 함수서버 서식 API는 다음과 같은 데이터 서식 함수로 구성되어 있습니다.

applyFormat()


설명이 함수는 서식 함수 선언을 추가하여 사용자의 문서를 편집할 수 있습니다. 사용자가 [동적 데이터] 또는 [동적 텍스트] 대화 상자의 [서식] 텍스트 필드나 [바인딩] 패널에서 서식을 선택하면 Dreamweaver는 사용자 문서에서 두 가지 사항을 변경합니다. 사용자 문서에 적절한 서식 함수가 아직 없는 경우에는 HTML 태그 앞에 해당 함수를 추가하고 동적 데이터 객체를 변경하여 적절한 서식 함수를 호출합니다.

Dreamweaver는 데이터 서식 파일에서 applyFormat() JavaScript 함수를 호출하여 함수 선언을 추가하고, formatDynamicDataRef() 함수를 호출하여 동적 데이터 객체를 변경합니다.

applyFormat() 함수는 사용자 문서의 맨 위에 함수 선언을 추가할 때 DOM을 사용해야 합니다. 예를 들어, 사용자가 [Currency] - [Default]를 선택하면 이 함수는 Currency 함수 선언을 추가합니다.

인수format

• format 인수는 적용할 서식을 설명하는 JavaScript 객체입니다. JavaScript 객체는 Formats.xml 파일의 format 태그에 해당하는 노드입니다. 이 객체는 해당하는 format 태그의 각 속성에 대한 JavaScript 속성을 가지고 있습니다.

반환값없음

applyFormatDefinition()


설명이 함수는 [서식 편집 ]대화 상자에서 작성된 서식에 대한 변경 사항을 반영합니다.

사용자는 [서식 목록 편집] 대화 상자를 사용하여 서식을 만들거나 편집 또는 삭제할 수 있습니다. 이 함수는 서식에 대한 수정 작업을 적용하기 위해 호출됩니다. 또한 객체에 이름이 지정된 임의의 다른 속성을 설정할 수도 있습니다. 각 속성은 Formats.xml 파일에 있는 format 태그의 속성으로 저장됩니다.


263

인수format

• format 인수는 JavaScript format 객체에 해당합니다. 이 함수는 JavaScript 객체의 expression 속성이 서식에 대한 일반 표현식이 되도록 설정해야 합니다. 또한 이 함수는 객체의 이름이 지정된 임의의 다른 속성을 설정할 수도 있습니다. 각 속성은 format 태그의 속성으로 저장됩니다.

반환값함수가 성공적으로 완료되면 서식 객체를 반환합니다. 오류가 발생한 경우 함수는 오류 문자열을 반환합니다. 빈 문자열을 반환하는 경우에는 양식이 닫히지만 새로운 서식이 만들어지지는 않습니다. 즉, [취소] 작업과 같습니다.

deleteFormat()


설명사용자 문서 맨 위에서 서식 함수 선언을 제거합니다.

사용자가 [동적 데이터] 또는 [동적 텍스트] 대화 상자나 [바인딩] 패널에서 동적 데이터 객체의 서식을 변경하거나 서식이 지정된 동적 데이터 객체를 삭제하면 Dreamweaver는 deleteFormat() 함수를 호출하여 문서의 맨 위에서 함수 선언을 제거하고 동적 데이터 객체에서 함수 호출을 제거합니다.

현재 문서의 맨 위에서 함수 선언을 제거하려면 deleteFormat() 함수와 DOM을 함께 사용합니다.

인수format

format 인수는 제거할 서식을 설명하는 JavaScript 객체입니다. JavaScript 객체는 Formats.xml 파일의 format 태그에 해당하는 노드입니다.

반환값없음

formatDynamicDataRef()


설명동적 데이터 객체에 서식 함수 호출을 추가합니다. 사용자가 [동적 데이터] 또는 [동적 텍스트] 대화 상자의 [서식] 텍스트 상자나 [바인딩] 패널에서 서식을 선택하면 Dreamweaver는 사용자 문서에서 두 가지 사항을 변경합니다. 사용자 문서에 적절한 서식 함수가 아직 없는 경우에는 HTML 태그 앞에 해당 함수를 추가하고 동적 데이터 객체를 변경하여 적절한 서식 함수를 호출합니다.

Dreamweaver는 데이터 서식 파일에서 applyFormat() JavaScript 함수를 호출하여 함수 선언을 추가하고, formatDynamicDataRef() 함수를 호출하여 동적 데이터 객체를 변경합니다.

formatDynamicDataRef() 함수는 사용자가 [동적 데이터] 또는 [동적 텍스트] 대화 상자의 [서식] 텍스트 상자 또는 [바인딩] 패널에서 특정 서식을 선택할 때 호출됩니다. 사용자 문서를 편집할 수는 없습니다.

인수dynamicDataObject, format

• dynamicDataObject 인수는 동적 데이터 객체를 포함하는 문자열입니다.

• format 인수는 적용할 서식을 설명하는 JavaScript 객체입니다. JavaScript 객체는 Formats.xml 파일의 format 태그에 해당하는 노드입니다. 이 객체는 해당하는 format 태그의 각 속성에 대한 JavaScript 속성을 가지고 있습니다.


264

반환값동적 데이터 객체의 새 값을 반환합니다.

오류가 발생하는 경우 특정 조건에서 함수는 경고 메시지를 표시합니다. 함수가 빈 문자열을 반환하면 [서식] 텍스트 필드는 None으로 설정됩니다.

inspectFormatDefinition()


설명사용자가 [서식 목록 편집] 대화 상자에서 서식을 편집할 때 양식 컨트롤이 초기화됩니다.

인수format

format 인수는 적용할 서식을 설명하는 JavaScript 객체입니다. JavaScript 객체는 Formats.xml 파일의 format 태그에 해당하는 노드입니다. 이 객체는 해당하는 format 태그의 각 속성에 대한 JavaScript 속성을 가지고 있습니다.

반환값없음

265

20장: 구성 요소

Adobe Dreamweaver CS3은 가장 일반적인 유형의 여러 구성 요소 작성을 지원합니다. 또한 [구성 요소] 패널에 나타나는 구성 요소의 유형을 확장할 수도 있습니다.

구성 요소 기본 사항프로그래머들은 자신의 작업을 캡슐화하기 위해 다양한 전략을 사용합니다. 캡슐화란 가상 블랙 박스에 존재하는 엔터티를 만드는 것입니다. 캡슐화를 사용하기 위해 작동 방식을 알 필요는 없습니다. 단지 작업 수행에 필요한 정보와 작업이 완료된 후 나타날 정보를 알기만 하면 됩니다. 예를 들어, 한 프로그래머가 사원 데이터베이스로부터 정보를 얻는 프로그램을 만들 경우, 다른 프로그램을 비롯한 어떤 프로그램이든지 이 프로그램을 사용하여 사원 데이터베이스를 쿼리할 수 있습니다. 따라서 이 프로그램은 재사용이 가능합니다.

캡슐화를 사용하는 잘 짜여진 프로그램은 보다 쉽게 유지 관리, 향상 및 재사용할 수 있습니다. 사용하는 기술에 따라 캡슐화를 구현하는 방법도 다양합니다. 이러한 전략에 대해 설명하기 위해 함수, 모듈 등과 같은 이름이 사용됩니다. Dreamweaver에서는 구성 요소라는 용어를 사용하여 더욱 대중적이고 현대적인 캡슐화 전략에 대해 살펴봅니다. 이 전략에는 웹 서비스, JavaBeans 및 ColdFusion 구성 요소(CFC) 등이 포함됩니다. 그러므로 사용자가 Dreamweaver에서 웹 응용 프로그램을 구축할 때 [구성 요소] 패널을 이용하면 웹 서비스, JavaBeans 및 CFC를 사용할 수 있습니다.

웹 서비스, JavaBeans 또는 CFC와 같은 최신 기술이 제공하는 구성 요소를 살펴보면 이 사실을 확인할 수 있습니다. 대개 구성 요소를 구성하고 있는 파일에는 구성 요소에 대한 정보가 포함되어 있는데, 이 정보를 게시하거나 공유하는 구성 요소의 능력을 인트로스펙션이라고 합니다. 다시 말해, Dreamweaver와 같은 프로그램은 Dreamweaver에서 노출되는 함수, 즉, 다른 프로그램으로부터 호출될 수 있는 함수 목록에 대한 구성 요소를 요청할 수 있습니다. 이것은 사용되는 기술에 따라 구성 요소는 자신에 대한 다른 정보를 드러낼 수 있는 것을 의미합니다. 예를 들어, 웹 서비스는 새 데이터 형식을 설명할 수 있습니다.

구성 요소 패널 확장하기Dreamweaver의 현재 [구성 요소] 패널에 없는 구성 요소 전략을 개발했거나 사용하는 경우, [구성 요소] 패널의 논리를 확장하여 새로운 종류의 구성 요소를 이 패널에서 처리할 수 있습니다.

Dreamweaver의 [구성 요소] 패널에 새로운 종류의 구성 요소를 추가하려면, 사용자의 환경에서 사용 가능한 구성 요소가 존재하는 위치를 찾은 다음, 각 구성 요소로부터 설명을 요청하거나 설명이 ASCII 파일을 사용하여 작성된 경우 해당 설명을 파싱해야 합니다.

구성 요소 위치 및 구성 요소 세부 사항을 검색하는 방법은 기술에 따라 다양합니다. 또한 이 방법은 ASP.NET, JSP/J2EE, ColdFusion 등과 같은 서버 모델을 기반으로 합니다. 그러므로 [구성 요소] 패널을 확장하기 위해 작성하는 JavaScript는 추가할 구성 요소 기술에 따라 다릅니다. 여기에서 설명된 함수를 사용하면 [구성 요소] 패널에 나타나는 정보를 얻을 수 있습니다. 하지만 구성 요소의 위치를 검색하고, 구성 요소의 내부 구조를 쿼리하고, Dreamweaver에서 사용 가능한 구성 요소 필드, 메서드 및 속성을 만드는 데 필요한 대다수의 논리를 작성해야 합니다.

마지막으로, ASP.NET, JSP/J2EE 또는 ColdFusion과 같은 서버 모델은 전부는 아니지만 일부 구성 요소 유형을 지원합니다. 예를 들어, ASP.NET는 웹 서비스를 지원하지만 JavaBeans를 지원하지는 않습니다. Adobe ColdFusion도 웹 서비스와 CFC를 지원합니다. [구성 요소] 패널에 새로운 구성 요소 유형을 추가하면 추가된 구성 요소는 서버 모델 전용이 되어야 합니다. 예를 들어, Dreamweaver 사용자가 ColdFusion 사이트에서 작업 중인 경우 [구성 요소] 패널의 팝업 메뉴에는 웹 서비스 및 CF 구성 요소만 나타나야 합니다.

이 장에서는 이러한 확장에 필요한 파일에 대해 설명합니다. 경우에 따라서는 특정 구성 요소 관련 함수를 호출하는 일부 JavaScript 코드를 작성해야 할 수도 있습니다.


266

구성 요소 패널을 사용자 정의하는 방법Dreamweaver [구성 요소] 패널에서 구성 요소를 로드하여 작업할 수 있습니다. 이 패널에는 사용 가능한 각 서버 모델에 호환되는 모든 구성 요소 유형이 나열되어 있습니다. 예를 들어, JavaBeans는 JavaServer Page(JSP)에서만 동작할 수 있으므로 JavaBeans 구성 요소는 [구성 요소] 패널 내의 JSP 서버 모델에만 나타납니다. 이와 같이, CFC는 ColdFusion 페이지에서만 동작할 수 있으므로 CFC 구성 요소는 [구성 요소] 패널 내의 ColdFusion 서버 모델에만 나타납니다.

확장성이 있어서 패널에 새 구성 요소 유형을 추가할 수 있습니다. [구성 요소] 패널에 새 구성 요소 유형을 추가할 때 일반적인 몇 개의 단계를 따라야 합니다.

1 해당 서버 모델의 사용 가능한 구성 요소 유형 목록에 구성 요소를 추가합니다.

2 단계가 구현되는 Extension에 따라 [구성 요소] 패널이나 대화 상자에 나타나는 구성 요소를 설정하는 지침을 번호가 매겨진 단계(설정 단계라고 함)로 추가합니다. 사용자가 완료한 단계 옆에 체크 표시가 나타나는지 확인합니다.

3 사용자의 컴퓨터나 현재 사이트에만 존재하는 구성 요소 유형의 구성 요소를 나열합니다.

4 사용자가 [구성 요소] 패널에서 플러스(+) 버튼을 클릭하면 새 구성 요소가 만들어집니다.

사용자가 기존 구성 요소를 편집하고 구성 요소를 삭제하도록 할 수도 있습니다.

구성 요소 패널 파일Configuration/Components 폴더에는 구현된 각 서버 모델의 하위 폴더가 있습니다. 구성 요소 파일은 Configuration/ Components/server-model/ComponentType 폴더에 저장됩니다. 다른 서버 모델 및 지원하는 서버 Extension을 추가할 수 있습니다. 자세한 내용은 276페이지의 “서버 모델” 및 210페이지의 “서버 비헤이비어”를 참조하십시오.

[구성 요소] 패널에서 동작할 수 있는 사용자 정의 구성 요소를 만들려면:1 지원하는 JavaScript 및 이미지 파일의 위치를 알려주는 HTML 파일을 만듭니다.

2 JavaScript를 작성하여 구성 요소를 활성화합니다.

3 기존의 GIF 이미지 파일을 만들거나 식별하여 [구성 요소] 패널에 해당 구성 요소를 나타냅니다.

구성 요소 유형을 트리 컨트롤 뷰에 표시하려면 연관된 옵션 파일을 만들고 트리 컨트롤을 채워야 합니다.

구성 요소 유형을 개별 웹 페이지, 일련의 웹 페이지 또는 사이트 전체 수준에서 동작하도록 설정할 수 있습니다. JavaScript 코드에는 세션 간에 저장되고 새로운 세션이 시작될 때 다시 로드되도록 구성 요소를 보존하기 위한 논리가 들어 있어야 합니다.

다음 예제에서는 구성 요소 클래스 및 그 위치를 정의하는 JavaBeansList.xml 파일의 데이터 항목을 보여 줍니다. 이 파일은 나중에 다중 사용자 구성 폴더에 저장됩니다.<javabeans>

<javabean classname="TestCollection.MusicCollection"

classlocation="d:\music\music.jar"></javabean>

</javabeans>

JavaBeans에는 다중 사용자 구성 폴더에 자신을 저장시키는 논리가 포함되어 있으므로, 사용자가 다음에 응용 프로그램을 시작할 때 해당 구성 요소는 저장된 데이터 파일로부터 자신을 다시 로드합니다.


267

서비스 구성 요소 추가

Dreamweaver MX를 사용하여 새로운 LDAP(Lightweight Directory Access Protocol) 서비스를 추가하려면:1 Configuration/Components/Common/WebServices 폴더에 있는 파일과 같은 기존 구성 요소 유형 파일을 모델로 사용하면,모든 필수 파일 및 원하는 선택적 파일이 만들어지므로 Dreamweaver의 구성 요소 패널에 새 구성 요소 유형을 다음 표에서와 같이 표시할 수 있습니다.

참고: 각 파일 및 해당 구성 요소를 쉽게 식별할 수 있도록 한 구성 요소에 해당하는 파일에는 모두 같은 접두어를 사용하는 것이 좋습니다.

2 새 서버 구성 요소를 구현하는 JavaScript 코드를 작성합니다.

Extension 파일(HTM)은 SCRIPT 태그에 JavaScript 코드의 위치를 정의합니다. 이 JavaScript 파일은 Extension 파일과 같은 폴더 또는 여러 개의 서버 모델에 적용되는 코드를 저장할 Common 폴더에 있는 Shared 폴더에 저장될 수 있습니다.

예를 들어, Configuration/Components/Common/WebServices 폴더의 WebServices.htm 파일에는 다음과 같은 행이 포함되어 있습니다.<SCRIPT SRC="../../Common/WebServices/WebServicesCommon.js"></SCRIPT>

사용 가능한 구성 요소 API 함수에 대한 자세한 내용은 268페이지의 “구성 요소 패널 API 함수”를 참조하십시오.

새 서비스를 추가하는 경우에는 Extension을 만들 때 정보를 쉽게 사용할 수 있도록 [구성 요소] 패널을 사용하여 메타 정보를 찾는 것이 좋습니다. Dreamweaver는 추가된 구성 요소를 찾아 구성 요소 트리에 노드를 표시할 수 있습니다. [구성 요소] 패널은 [코드] 뷰를 통해 드래그 앤드 드롭 및 키보드 지원 기능을 제공합니다.

트리 컨트롤 채우기[구성 요소] 패널 트리 컨트롤이 [구성 요소] 패널 내의 적절한 위치에 나타나도록 ComponentRec 속성을 사용하여 이 컨트롤을 채웁니다. 트리 컨트롤의 모든 노드는 다음과 같은 속성을 가지고 있어야 합니다.

파일 이름 설명 필수/선택 사항

*.htm 기타 지원 JavaScript 및 GIF파일을 식별하는 Extension 파일 필수

*.js 구성 요소 API 콜백을 구현하는 Extension 파일 필수

*.gif 구성 요소 팝업 메뉴에 나타나는 이미지 필수

*Menus.xml 구성 요소 패널 구조를 구성하는 메타데이터 저장소. 일반 WebServices 구성 요소는 이 파일을 사용하지 않지만 WebServicesMenus.xml 파일을 응용 프로그램 폴더인 Components/ColdFusion/ WebServices에서 한 예제로 참조할 수 있습니다.

선택 사항

*.gif 툴바 이미지. 다음 예제에 표시된 대로 활성화하거나 비활성화할 수 있습니다.ToolBarImageUp.gifToolBarImageDown.gifToolBarImageDisabled.gif

또는, 트리 노드 이미지

선택 사항

속성 이름 설명 필수/선택 사항

name 트리 노드 항목의 이름 필수

image 트리 노드 항목의 아이콘. 아이콘이 지정되지 않으면 기본 아이콘이 사용됩니다.

선택 사항

hasChildren 트리 컨트롤에서 플러스(+) 및 마이너스(-) 버튼을 클릭하면 자식을 로드합니다. 이를 통해 미리 채워지지 않은 트리로 작업할 수 있습니다.

필수

toolTipText 트리 노드 항목의 도구 설명 텍스트 선택 사항

isCodeViewDraggable 항목을 [코드] 뷰에 드래그하여 드롭할 수 있는지 판별합니다. 선택 사항

isDesignViewDraggable 항목을 [디자인] 뷰에 드래그하여 드롭할 수 있는지 판별합니다. 선택 사항


268

예를 들어, 다음 WebServicesClass 노드는 웹 메서드를 자신의 자식으로 가집니다.this.name = "TrafficLocatorWebService";

this.image = "Components/Common/WebServices/WebServices.gif";

this.hasChildren = true;

this.toolTipText = "TrafficLocatorWebService";

this.isCodeViewDraggable = true;

// 다음은 [구성 요소] 트리 위에 나타나는 버튼의

// 활성화/비활성화를 허용합니다.this.allowDelete = true;

this.isDesignViewDraggable = false;

구성 요소 패널 API 함수이 단원에서는 [구성 요소] 패널을 채우는 API 함수에 대해 설명합니다.

getComponentChildren()


설명이 함수는 실제 부모 ComponentRec 객체에 대한 자식 ComponentRec 객체의 목록을 반환합니다. 루트 수준의 트리 항목을 로드하려면 이 함수는 영구 저장소에서 메타데이터를 읽어야 합니다.

인수{parentComponentRec}

parentComponentRec 인수는 부모의 componentRec 객체입니다. 이 인수가 생략되어 있으면 Dreamweaver는 루트 노드에 대한 ComponentRec 객체의 목록을 반환합니다.

반환값ComponentRec 객체의 배열을 반환합니다.

예제자세한 내용은 Configuration/Components/Common/WebServices 폴더의 WebServices.js 파일에서 function getComponentChildren(componentRec)을 참조하십시오.

getContextMenuId()


설명구성 요소 유형의 Context Menu ID를 반환합니다. 모든 구성 요소 유형에는 컨텍스트 메뉴가 연관되어 있을 수 있습니다. Context Menu 팝업 메뉴는 ComponentNameMenus.xml 파일에 정의되어 있으며, 이 메뉴는 menu.xml 파일과 동일한 방법으로 동작합니다. 메뉴 문자열은 정적이거나 동적입니다. 단축키가 지원됩니다.

인수없음

반환값Context Menu ID를 정의하는 문자열을 반환합니다.


269

예제다음 예제에서는 ASP.NET/C# 서버 모델과 연관된 웹 서비스에 사용할 [구성 요소] 패널의 메뉴 옵션을 설정하고 이 메뉴의 단축키를 정의합니다.function getContextMenuId()

{

return "DWWebServicesContext";

}

여기서 DWWebServicesContext는 다음과 같이 Configuration/Components/ASP.NET_CSharp/WebServices/ WebServicesMenus.xml의 파일에 정의되어 있습니다.<shortcutlist id="DWWebServicesContext">

<shortcut key="Del" domRequired="false"

enabled="(dw.serverComponentsPalette.getSelectedNode() != null &&

(dw.serverComponentsPalette.getSelectedNode().objectType=='Root'))"

command="clickedDelete();" id="DWShortcuts_ServerComponent_Delete" />

</shortcutlist>

<menubar name="" id="DWWebServicesContext">

<menu name="Server Component Popup" id="DWContext_WebServices">

<menuitem name="Edit Web Service" domRequired="false"

enabled="dw.serverComponentsPalette.getSelectedNode() != null &&

(dw.serverComponentsPalette.getSelectedNode().objectType=='Root') &&

dw.serverComponentsPalette.getSelectedNode().wsRec != null &&

dw.serverComponentsPalette.getSelectedNode().wsRec.ProxyGeneratorName != null"

command="editWebService()" id="DWContext_WebServices_EditWebService" />

...

</menubar>

getCodeViewDropCode()


설명이 함수는 [구성 요소] 패널에서 [코드] 뷰로 드래그하여 드롭한 코드 또는 [구성 요소] 패널에서 잘라내거나 복사하거나 붙여넣은 코드를 얻습니다.

인수componentRec

• componentRec 인수는 객체입니다.

반환값해당 구성 요소의 코드가 포함된 문자열을 반환합니다.

예제다음 예제에서는 일반 웹 서비스의 코드를 식별합니다.function getCodeViewDropCode(componentRec)

{

var codeToDrop="";

if (componentRec)

{

if (componentRec.objectType=="Class")

{

codeToDrop = dw.getExtDataValue("webservices_constructor","insertText");

codeToDrop = codeToDrop.replace(RegExp("@@Id@@","g"),componentRec.name);

codeToDrop = codeToDrop.replace(RegExp("@@Class@@","g"),componentRec.name);

}


270

else if (componentRec.objectType=="Method")

{

codeToDrop = componentRec.dropCode;

}

if(componentRec.dropCode)

{

codeToDrop = componentRec.dropCode;

}

else

{

codeToDrop = componentRec.name;

}

}

return codeToDrop;

}

getSetupSteps()


설명Dreamweaver는 setupStepsCompleted()가 0 또는 양의 정수를 반환하는 경우, 이 함수를 호출합니다. 이 함수는 모달 대화 상자를 사용하는 Extension과 서버 구성 요소를 사용하는 Extension을 사용하여 구현될 수 있는 서버측 설정 지침을 제어합니다.

이 함수는 Dreamweaver에서 Extension 유형에 따라 [설정 단계] 대화 상자 또는 [구성 요소] 패널에 표시될 문자열의 배열을 반환합니다.

인수없음

반환값n+1 문자열 배열을 반환합니다. 여기서 n은 다음 목록의 설명처럼 단계 번호입니다.

• 설정 단계 목록 위에 나타나는 제목입니다.

• 단계마다 텍스트 지침이 있으며 이 텍스트 지침에는 li 태그 내에서 유효한 HTML 마크업이 포함될 수 있습니다.

다음 양식을 사용하여 단계 목록에 링크(a 태그)를 포함할 수 있습니다.<a href="#" onMouseDown="handler">Blue Underlined Text</a>

"handler" 값은 다음 문자열 중 하나이거나 "dw.browseDocument('http://www.adobe.com')"와 같은 JavaScript 표현식으로 대체될 수 있습니다.

• "Event:SetCurSite" 핸들러는 현재 사이트를 설정할 대화 상자를 엽니다.

• "Event:CreateSite" 핸들러는 새 사이트를 만들 대화 상자를 엽니다.

• "Event:SetDocType" 핸들러는 사용자 문서의 문서 형식을 변경할 대화 상자를 엽니다.

• "Event:CreateConnection" 핸들러는 새 데이터베이스 연결을 만들 대화 상자를 엽니다.

• "Event:SetRDSPassword" 핸들러는 RDS(Remote Development Service) 사용자 이름과 암호(ColdFusion만 해당)를 설정할 대화 상자를 엽니다.

• "Event:CreateCFDataSource" 핸들러는 브라우저에서 ColdFusion 관리자를 엽니다.

http://www.adobe.com')%22%EC%99%80


271

예제다음 예제에서는 ColdFusion 구성 요소에 대해 네 단계를 설정하고, 사용자가 RDS 사용자 이름 및 암호를 입력할 수 있도록 네 번째 단계에 하이퍼텍스트 링크를 제공합니다.function getSetupSteps()

{

var doSDK = false;

dom = dw.getDocumentDOM();

if (dom && dom.serverModel)

{

var aServerModelName = dom.serverModel.getDisplayName();

}

else

{

var aServerModelName = site.getServerDisplayNameForSite();

}

if (aServerModelName.length)

{

if(aServerModelName != "ColdFusion")

{

if(needsSDKInstalled != null)

{

doSDK = needsSDKInstalled();

}

}

}

var someSteps = new Array();

someSteps.push(MM.MSG_WebService_InstructionsTitle);

someSteps.push(MM.MSG_Dynamic_InstructionsStep1);

someSteps.push(MM.MSG_Dynamic_InstructionsStep2);

if(doSDK == true)

{

someSteps.push(MM.MSG_WebService_InstructionsStep3);

}

someSteps.push(MM.MSG_WebService_InstructionsStep4);

return someSteps;

}

setupStepsCompleted()


설명Dreamweaver에서 이 함수는 [구성 요소] 탭이 나타나기 전에 호출됩니다. 그런 다음 setupStepsCompleted() 함수가 0 또는 양의 정수를 반환하는 경우 Dreamweaver는 getSetupSteps() 함수를 호출합니다.

인수없음

반환값다음 목록에서 알 수 있듯이, 사용자가 완료한 설치 단계의 번호를 나타내는 정수를 반환합니다.

• 0 또는 이미 완료된 단계의 번호를 나타내는 양의 정수 입니다.

• 값 -1은 필요한 모든 단계가 완료되었음을 나타내므로 지침 목록이 나타나지 않습니다.


272

handleDesignViewDrop()


설명사용자가 임의의 표 또는 뷰를 [데이터베이스] 패널로부터 드래그하거나 [구성 요소] 패널로부터 [디자인] 뷰로 구성 요소를 드래그할 때 드롭 작업을 처리합니다.

인수componentRec

• componentRec 인수는 다음 속성이 포함된 객체입니다.

• name 속성은 트리 노드 항목의 이름입니다.

• image 속성은 해당 트리 노드 항목에 대한 선택적 아이콘입니다. 이 속성이 생략된 경우, 기본 아이콘이 사용됩니다.

• hasChildren 속성은 트리 노드 항목의 확장 가능 여부를 나타내는 부울 값입니다. true인 경우 Dreamweaver MX에서 해당 트리 노드 항목에 플러스(+) 및 마이너스(-) 버튼이 표시되고, false인 경우에는 항목을 확장할 수 없습니다.

• toolTipText 속성은 해당 트리 노드 항목에 대한 선택적 도구 설명 텍스트입니다.

• isCodeViewDraggable 속성은 해당 트리 노드 항목이 [코드] 뷰로 드래그되어 드롭될지 여부를 알려 주는 부울 값입니다.

• isDesignViewDraggable 속성은 해당 트리 노드 항목이 [디자인] 뷰로 드래그되어 드롭될지 여부를 알려 주는 부울 값입니다.

반환값드롭 작업이 성공적으로 완료되었는지 여부를 알려 주는 부울 값을 반환합니다. 성공하면 true를 반환하고 그렇지 않으면 false를 반환합니다.

예제다음 예제에서는 구성 요소가 표인지 또는 뷰인지 결정한 다음, 적절한 bHandled 값을 반환합니다.function handleDesignViewDrop(componentRec)

{

var bHandled = false;

if (componentRec)

{

if ((componentRec.objectType == "Table")||

(componentRec.objectType == "View"))

{

alert("popup Recordset Server Behavior");

bHandled = true;

}

}

return bHandled;

}


273

handleDoubleClick()


설명사용자가 트리의 노드를 두 번 클릭하면 이벤트 핸들러가 호출되어 편집할 수 있게 됩니다. 이 함수는 선택 사항입니다. 이 함수는 false 값을 반환할 수 있습니다. 이것은 이벤트 핸들러가 정의되어 있지 않다는 뜻입니다. 이러한 경우, 해당 트리 노드를 두 번 클릭하면 기본 비헤이비어가 실행되어 해당 트리 노드를 확장하거나 축소합니다.

인수componentRec

• componentRec 인수는 다음 속성이 포함된 객체입니다.

• name 속성은 해당 트리 노드 항목의 이름입니다.

• image 속성은 해당 트리 노드 항목에 대한 선택적 아이콘입니다. 이 아이콘이 생략되어 있으면 기본 아이콘이 사용됩니다.

• hasChildren 속성은 트리 노드 항목의 확장 가능 여부를 나타내는 부울 값입니다. true인 경우 Dreamweaver에서 해당 트리 노드 항목에 플러스(+) 및 마이너스(-) 버튼이 표시되고, false인 경우에는 항목을 확장할 수 없습니다.

• toolTipText 속성은 해당 트리 노드 항목에 대한 선택적 도구 설명 텍스트입니다.

• isCodeViewDraggable 속성은 해당 트리 노드 항목이 [코드] 뷰로 드래그되어 드롭될지 여부를 알려 주는 부울 값입니다.

• isDesignViewDraggable 속성은 해당 트리 노드 항목이 [디자인] 뷰로 드래그되어 드롭될지 여부를 알려 주는 부울 값입니다.

반환값없음

예제다음 예제에서 Extension은 해당 트리 노드 항목에 대한 두 번 클릭을 처리할 기회를 가지고 있습니다. false가 반환되면 기본 비헤이비어는 노드를 확장하거나 축소합니다.function handleDoubleClick(componentRec)

{

var selectedObj = dw.serverComponentsPalette.getSelectedNode();

if(dwscripts.IS_WIN)

{

if (selectedObj && selectedObj.wsRec && selectedObj.wsRec[ProxyGeneratorNamePropName])

{

if (selectedObj.objectType == "Root")

{

editWebService();

return true;

}

else if (selectedObj.objectType == "MissingProxyGen")

{

displayMissingProxyGenMessage(componentRec);

editWebService();

return true;

}

}

}

return false;

}


274

toolbarControls()


설명모든 구성 요소 유형은 왼쪽에서 오른쪽 방향으로 툴바 아이콘을 나타내는 toolBarButtonRec 객체 목록을 반환합니다. 각 toolBarButtonRec 객체에는 다음 속성이 포함되어 있습니다.

인수없음

반환값왼쪽에서 오른쪽으로 나타나는 툴바 버튼의 배열을 반환합니다.

예제다음 예제에서는 툴바 버튼에 속성을 지정합니다.function toolbarControls()

{

var toolBarBtnArray = new Array();

dom = dw.getDocumentDOM();

var plusButton = new ToolbarControlRec();

var aServerModelName = null;

if (dom && dom.serverModel)

{

aServerModelName = dom.serverModel.getDisplayName();

}

else

{

//사이트에서 잠재적인 서버 모델을 찾음aServerModelName = site.getServerDisplayNameForSite();

}

if (aServerModelName.length)

{

if(aServerModelName == "ColdFusion")

{

plusButton.image = PLUS_BUTTON_UP;

plusButton.pressedImage = PLUS_BUTTON_DOWN;

plusButton.disabledImage = PLUS_BUTTON_UP;


image 이미지 파일의 경로

disabledImage 선택 사항이며, 비활성화된 이미지가 툴바 버튼을 찾는 경로입니다.

pressedImage 선택 사항이며, 누른 이미지가 툴바 버튼을 찾는 경로입니다.

toolTipText 툴바 버튼의 도구 설명

toolStyle 왼쪽/오른쪽

enabled 부울 값(true 또는 false)을 반환하는 JavaScript 코드입니다. 다음 조건을 만족할 경우 활성자가 호출됩니다.

• - dreamweaver.serverComponents.refresh() 함수가 호출되는 경우

• - 트리의 선택 영역이 변경되는 경우

• - 서버 모델이 변경되는 경우

command 실행할 JavaScript 코드. 명령 핸들러는 dreamweaver.serverComponents.refresh() 함수를 사용하여 새로 고침을 수행할 수 있습니다.

menuId 버튼이 클릭될 때 해당 팝업 메뉴 버튼에 대한 고유한 메뉴 ID입니다. 현재 이 ID가 있으면 명령 핸들러를 무시합니다. 즉, 이 버튼은 명령과 연관된 버튼이거나 명령과 연관된 팝업 메뉴를 가지고 있는 버튼입니다. 하지만, 동시에 두 역할을 다 하지는 못합니다.


275

plusButton.toolStyle = "left";

plusButton.toolTipText = MM.MSG_WebServicesAddToolTipText;

plusButton.enabled = "dwscripts.IS_WIN";

plusButton.command = "invokeWebService()";

}

else

{

plusButton.image = PLUSDROPBUTTONUP;

plusButton.pressedImage = PLUSDROPBUTTONDOWN;

plusButton.disabledImage = PLUSDROPBUTTONUP;

plusButton.toolStyle = "left";

plusButton.toolTipText = MM.MSG_WebServicesAddToolTipText;

plusButton.enabled = "dwscripts.IS_WIN";

plusButton.menuId = "DWWebServicesChoosersContext";

}

toolBarBtnArray.push(plusButton);

var minusButton = new ToolbarControlRec();

minusButton.image = MINUSBUTTONUP;

minusButton.pressedImage = MINUSBUTTONDOWN;

minusButton.disabledImage = MINUSBUTTONDISABLED;

minusButton.toolStyle = "left";

minusButton.toolTipText = MM.MSG_WebServicesDeleteToolTipText;

minusButton.command = "clickedDelete()";

minusButton.enabled = "(dw.serverComponentsPalette.getSelectedNode() != null &&

dw.serverComponentsPalette.getSelectedNode() &&

((dw.serverComponentsPalette.getSelectedNode().objectType=='Root') ||

(dw.serverComponentsPalette.getSelectedNode().objectType == 'Error') ||

(dw.serverComponentsPalette.getSelectedNode().objectType ==

'MissingProxyGen')))";

toolBarBtnArray.push(minusButton);

if(aServerModelName != null && aServerModelName.indexOf(".NET") >= 0)

{

var deployWServiceButton = new ToolbarControlRec();

deployWServiceButton.image = DEPLOYSUPPORTBUTTONUP;

deployWServiceButton.pressedImage = DEPLOYSUPPORTBUTTONDOWN;

deployWServiceButton.disabledImage = DEPLOYSUPPORTBUTTONUP;

deployWServiceButton.toolStyle = "right";

deployWServiceButton.toolTipText = MM.MSG_WebServicesDeployToolTipText;

deployWServiceButton.command = "site.showTestingServerBinDeployDialog()";

deployWServiceButton.enabled = true;

toolBarBtnArray.push(deployWServiceButton);

}

//Windows의 경우에만 프록시 재구성 버튼 추가.

//버그 45552:if(navigator.platform.charAt(0) !="M")

{

var proxyButton = new ToolbarControlRec();

proxyButton.image = PROXYBUTTONUP;

proxyButton.pressedImage = PROXYBUTTONDOWN;

proxyButton.disabledImage = PROXYBUTTONDISABLED;

proxyButton.toolStyle = "right";

proxyButton.toolTipText = MM.MSG_WebServicesRegenToolTipText;

proxyButton.command = "reGenerateProxy()";

proxyButton.enabled = "enableRegenerateProxyButton()";

toolBarBtnArray.push(proxyButton);

}

}

return toolBarBtnArray;

}

276

21장: 서버 모델

서버 모델은 서버에서 스크립트를 실행하는 기술입니다. 사용자는 새로운 사이트를 정의할 때 사이트 수준 또는 개별 문서 수준에서 사용할 서버 모델을 지정할 수 있습니다. 이 서버 모델은 사용자가 문서에 추가하는 동적 요소를 처리합니다.

서버 모델 구성 파일은 Configuration/ServerModels 폴더에 저장됩니다. 이 폴더 내에서 각 서버 모델은 자신에게 필요한 일련의 함수를 구현하는 자신만의 고유한 HTML 파일을 가집니다.

서버 모델 사용자 정의가 동작하는 방법서버 모델 API에서 사용할 수 있는 함수를 사용하여 서버 모델의 일부 기능을 사용자 정의할 수 있습니다.

Adobe Dreamweaver CS3은 Dreamweaver를 처음 시작하는 새 사용자에게 서버 모델을 지정하라는 메시지를 표시합니다. 사용자가 서버 모델을 지정하지 않은 경우에는 필요한 단계를 완료하라는 메시지를 표시하는 동적 대화 상자를 만들 수 있습니다. 사용자가 서버 객체를 삽입하려고 할 때 이 대화 상자가 나타납니다. 이 대화 상자 작성에 대한 자세한 내용은 270페이지의 “getSetupSteps()” 및 271페이지의 “setupStepsCompleted()” 함수를 참조하십시오.

특별한 서버 모델을 만들어야 하는 경우도 있습니다. Adobe는 Dreamweaver와 함께 제공되는 서버 모델을 편집하는 대신, 새 서버 모델을 만들 것을 권장합니다. 사용하는 서버 모델에서 지원되는 새 문서 유형을 만드는 방법에 대한 자세한 내용은 13페이지의 “Dreamweaver의 확장 가능한 문서 유형”을 참조하십시오.

새 서버 모델을 만들 때 사용하는 서버 모델 파일에 canRecognizeDocument() 함수의 구현을 포함시켜야 합니다. 이 함수는 특정 파일 확장명을 사용하는 서버 모델이 많은 경우, 해당 파일 확장명을 처리하기 위해 서버 모델에 제공하는 우선 순위 레벨을 Dreamweaver에 알려 줍니다.

서버 모델 API 함수이 단원에서는 Dreamweaver의 서버 모델을 구성하는 함수에 대해 설명합니다.

canRecognizeDocument()


설명문서를 열 때 두 개 이상의 서버 모델이 특정 파일 확장명을 사용하면 Dreamweaver는 이 확장명과 연결된 각 서버 모델에 대해 이 함수를 호출하여 이 문서가 어떤 서버 모델의 문서인지 식별하도록 합니다. 하나 이상의 서버 모델이 같은 파일 확장명을 사용할 경우 가장 큰 정수를 반환하는 서버 모델에 우선 순위가 부여됩니다.

참고: Dreamweaver에 정의된 모든 서버 모델은 1의 값을 반환하므로 타사 서버 모델이 이 파일 확장명에 대한 연결을 무시할 수 있습니다.

인수dom

dom 인수는 dreamweaver.getDocumentDOM() 함수에 의해 반환되는 Adobe 문서 객체입니다.

반환값Dreamweaver는 파일 확장명에 대해 서버 모델에 지정된 우선 순위를 나타내는 정수를 반환합니다. 이 함수는 서버 모델이 파일 확장명을 사용하지 않으면 -1을 반환하고 그렇지 않으면 0보다 큰 값을 반환합니다.


277

예제다음 예제에서 사용자가 현재 서버 모델에 대한 JavaScript 문서를 열면 샘플 코드는 값 2를 반환합니다. 이 값은 현재 서버 모델이 Dreamweaver 기본 서버 모델보다 우선하도록 지정합니다. var retVal = -1;

var langRE = /@\s*language\s*=\s*(\"|\')?javascript(\"|\')?/i;

// 문자열 language="javascript"를 찾습니다.var oHTML = dom.documentElement.outerHTML;

if (oHTML.search(langRE) > -1)

retVal = 2;

return retVal;

getFileExtensions()

지원 버전Dreamweaver UltraDev 1. Dreamweaver MX에서 사용되지 않음

설명서버 모델이 작업할 수 있는 문서 파일 확장명을 반환합니다. 예를 들어, ASP 서버 모델은 .asp 및 .htm 파일 확장명을 지원합니다. 이 함수는 문자열 배열을 반환하고, Dreamweaver는 이 문자열을 사용하여 [사이트 정의] 대화 상자의 [App Server] 범주에 있는 [Default Page Extension] 목록을 채웁니다.

참고: [Default Page Extension] 목록은 Dreamweaver 4 이하 버전 버전에만 있습니다. Dreamweaver MX 이상 버전의 경우, [사이트 정의] 대화 상자에 파일 확장명 설정이 나열되지 않습니다. 대신, Dreamweaver는 Extensions.txt 파일을 읽고 mmDocumentTypes.xml 파일에서 documenttype 요소를 파싱합니다. 이 두 파일 및 documenttype 요소에 대한 자세한 내용은 13페이지의 “Dreamweaver의 확장 가능한 문서 유형”을 참조하십시오.

인수없음

반환값허용된 파일 확장명을 나타내는 문자열 배열을 반환합니다.

getLanguageSignatures()


설명이 함수는 스크립팅 언어가 사용하는 메서드 및 배열 서명을 설명하는 객체를 반환합니다. getLanguageSignatures() 함수는 다음 요소에 대해 특정 언어 전용 매핑에 일반 서명 매핑을 매핑하는 데 도움을 줍니다.

• 함수

• 생성자

• 드롭 코드(반환값)

• 배열

• 예외

• 원시 데이터 형식에 대한 데이터 형식 매핑

getLanguageSignatures() 함수는 이러한 서명 선언의 맵을 반환합니다. Extension 개발자는 이 맵을 사용하여 사용자가 드래그 앤 드롭할 때 페이지에 해당되는 서버 모델에 따라 Dreamweaver가 페이지에 드롭하는 특정 언어 전용 코드 블록을 생성할 수 있습니다. Web Services 메서드가 그 예입니다.

이 함수를 작성하는 방법의 예는 JSP 및 ASP.Net 서버 모델의 HTML 구현 파일을 참조하십시오. 서버 모델 구현 파일은 Configuration/ServerModels 폴더에 있습니다.


278

인수없음

반환값스크립팅 언어 서명을 정의하는 객체를 반환합니다. 이 객체는 일반 서명을 특정 언어 서명에 매핑합니다.

getServerExtension()

지원 버전Dreamweaver UltraDev 4, Dreamweaver MX에서 사용되지 않음

설명이 함수는 현재 서버 모델을 사용하는 파일의 기본 파일 확장명을 반환합니다. serverModel 객체는 현재 선택된 사용자 문서가 없는 경우, 현재 선택된 사이트의 서버 모델로 설정됩니다.

인수없음

반환값지원되는 파일 확장명을 나타내는 문자열을 반환합니다.

getServerInfo()


설명이 함수는 JavaScript 코드 내에서 액세스 가능한 JavaScript 객체를 반환합니다. dom.serverModel.getServerInfo() JavaScript 함수를 호출하여 이 객체를 조회할 수 있습니다. 또한 serverName, serverLanguage 및 serverVersion은 다음과 같은 JavaScript함수를 통해 액세스할 수 있는 특별한 속성입니다.dom.serverModel.getServerName()

dom.serverModel.getServerLanguage()

dom.serverModel.getServerVersion()

인수없음

반환값서버 모델의 속성이 들어 있는 객체를 반환합니다.

예제var obj = new Object();

obj.serverName = "ASP";

obj.serverLanguage = "JavaScript";

obj.serverVersion = "2.0";

...

return obj;

279

getServerLanguages()


설명이 함수는 특정 서버 모델에서 지원되는 스크립팅 언어를 문자열 배열로 반환합니다. Dreamweaver는 이 문자열을 사용하여 [사이트 정의] 대화 상자의 [App Server] 범주에 있는 [Default Scripting Language] 목록을 채웁니다.

참고: [Default Scripting Language] 목록은 Dreamweaver 4 이하 버전에만 있습니다. Dreamweaver MX 이상 버전의 경우, 지원되는 스크립팅 언어가 [사이트 정의] 대화 상자에 표시되지도 않고 Dreamweaver가 getServerLanguages() 함수를 사용하지도 않습니다. Dreamweaver에서 각 서버 모델은 서버 언어를 하나만 가지고 있기 때문에 Dreamweaver는 이 함수를 사용하지 않습니다.

Dreamweaver의 이전 버전에서는 서버 모델이 여러 스크립팅 언어를 지원했었습니다. 예를 들어, ASP 서버 모델은 JavaScript와 VBScript를 지원합니다.

ServerFormats 폴더의 파일을 특정 스크립팅 언어에만 적용하려면 다음 명령문을 HTML 파일의 맨 위에 추가해야 합니다.

이 예제에서 XXX는 스크립팅 언어를 나타냅니다. 이 명령문으로 인해 서버 비헤이비어는 현재 선택된 스크립팅 언어가 XXX인 경우에만 [서버 비헤이비어] 패널의 플러스(+) 메뉴에 나타납니다.

인수없음

반환값지원되는 스크립팅 언어를 나타내는 문자열 배열을 반환합니다.

getServerModelExtDataNameUD4()


설명이 함수는 Configurations/ExtensionData 폴더에 있는 UltraDev 4 Extension 데이터 파일을 액세스할 때 Dreamweaver가 사용하는 서버 모델 구현 이름을 반환합니다.

인수없음

반환값Dreamweaver는 "ASP/JavaScript" 등과 같은 문자열을 반환합니다.

getServerModelDelimiters()


설명이 함수는 응용 프로그램 서버가 사용하는 스크립트 구분 기호를 반환하고 각 구분 기호가 코드 블록 병합에 참여할 수 있는지 여부를 알려 줍니다. dom.serverModel.getDelimiters() 함수를 호출하여 JavaScript에서 이 반환값을 액세스할 수 있습니다.

인수없음


280

반환값각 객체에 다음 세 가지 속성이 들어 있는 객체 배열을 반환합니다.

• startPattern 속성은 열기 스크립트 구분 기호(예: <%)에 해당하는 일반 표현식입니다.

• endPattern 속성은 닫기 스크립트 구분 기호(예: %>)와 해당하는 일반 표현식입니다.

• participateInMerge 속성은 목록의 구분 기호로 둘러싸인 내용이 블록 병합에 참여하는지 여부를 지정하는 부울 값입니다. 이 경우, 참여할 수 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

getServerModelDisplayName()


설명이 함수는 사용자 인터페이스에 나타날 이 서버 모델의 이름을 반환합니다. dom.serverModel.getDisplayName() 함수를 호출하여 JavaScript에서 이 값을 액세스할 수 있습니다.

인수없음

반환값Dreamweaver는 "ASP JavaScript" 등과 같은 문자열을 반환합니다.

getServerModelFolderName()


설명이 함수는 Configuration 폴더 내에서 이 서버 모델에 사용할 폴더 이름을 반환합니다. dom.serverModel.getFolderName() 함수를 호출하여 JavaScript에서 이 값을 액세스할 수 있습니다.

인수없음

반환값Dreamweaver는 "ASP_JS" 등과 같은 문자열을 반환합니다.

getServerSupportsCharset()


설명이 함수는 현재 서버가 지정된 문자 세트를 지원하면 true를 반환합니다. JavaScript에서는 dom.serverModel. getServerSupportsCharset() 함수를 호출하여 서버 모델이 특정 문자 집합을 지원하는지 여부를 판별할 수 있습니다.

인수metaCharSetString

metaCharSetString 인수는 문서의 "charset=" 속성의 값이 들어 있는 문자열입니다.

반환값부울 값을 반환합니다.


281

getVersionArray()


설명이 함수는 서버 기술과 버전 번호의 매핑을 조회합니다. 이 함수는 dom.serverModel.getServerVersion() 함수에 의해 호출됩니다.

인수없음

반환값다음 예제처럼, 각 버전 이름과 버전 값이 들어 있는 버전 객체 배열을 반환합니다.

• ASP 2.0

• ADODB 2.1

282

22장: 데이터 변환기

데이터 변환기를 사용하면 특정 마크업, 즉 서버측 포함 파일, JavaScript 조건문 및 PHP3, JSP, CFML, ASP 등과 같은 기타 코드를 Adobe Dreamweaver CS3에서 읽고 표시할 수 있는 코드로 변환할 수 있습니다. Dreamweaver에서는 코드 블록이나 태그 전체뿐만 아니라 태그 내의 속성도 변환할 수 있습니다. 모든 데이터 변환기, 블록/태그나 속성은 HTML 파일입니다.

변환된 태그나 코드 블록은 잠긴 영역 안에 넣어서 원래 마크업을 보존해야 합니다. 변환된 속성은 잠금을 요청하지 않으므로 속성 내에 포함된 태그를 관리하기가 쉽습니다.

특히 전체 태그나 코드 블록의 경우, 데이터 변환 작업을 수행할 때 JavaScript로 수행할 수 없거나 C를 사용하여 더욱 효율적으로 수행할 수 있는 복잡한 작업이 포함될 수 있습니다. C나 C++에 익숙하다면 299페이지의 “C 레벨 확장성”을 참조하십시오.

다음 표에서는 데이터 변환기를 만들 때 사용하는 파일을 보여 줍니다.

데이터 변환기 작업 방법Dreamweaver는 태그 전체를 변환하든지 또는 속성만 변환하든지 관계없이 모든 변환기 파일을 같은 방식으로 처리합니다. Dreamweaver는 시작할 때 Configuration/Translator 폴더의 파일을 모두 읽고 getTranslatorInfo() 함수를 호출하여 변환기에 대한 정보를 얻습니다. Dreamweaver는 getTranslatorInfo() 함수가 존재하지 않는 파일이나 이 함수가 정의되지 않도록 하는 오류를 포함하는 파일을 무시합니다.

참고: JavaScript 오류가 발생하여 변환기를 실행하지 못하는 경우가 발생하지 않게 하기 위해 변환기를 모두 불러온 후에만 변환기 파일의 오류가 보고됩니다. 변환기 디버깅에 대한 자세한 내용은 287페이지의 “사용하는 변환기에서 버그 찾기”를 참조하십시오.

Dreamweaver는 또한 사용자가 새 내용이나 변환이 필요한 기존 내용을 변경할 때마다 해당하는 모든 변환기 파일([변환] 환경 설정에 지정되어 있음)에서 translateMarkup() 함수를 호출합니다. Dreamweaver는 사용자가 다음 작업 중 하나를 수행할 때 translateMarkup() 함수를 호출합니다.

• Dreamweaver에서 파일을 엽니다.

• [HTML] 패널 또는 [코드] 뷰에서 변경 작업을 수행한 다음 [디자인] 뷰로 다시 전환합니다.

• 현재 문서에서 객체의 속성을 변경합니다.

• 객체를 삽입합니다(삽입 막대 또는 [삽입] 메뉴 사용).

• 현재 문서를 다른 응용 프로그램에서 변경한 다음 새로 고칩니다.

• 템플릿을 문서에 적용합니다.

• [문서] 윈도우로 또는 해당 윈도우 내에서 내용을 붙여넣거나 드래그합니다.

• 종속 파일에 변경 사항을 저장합니다.

• 태그 객체의 innerHTML이나 outerHTML 속성 또는 주석 객체의 data 속성을 설정하는 명령, 비헤이비어, 서버 비헤이비어, 속성 관리자 및 기타 Extension을 호출합니다.

• [파일] > [변환] > [3.0 브라우저 호환]을 선택합니다.

• [수정] > [변환] > [표를 AP div로 변환]을 선택합니다.

• [수정] > [변환] > [AP div를 표로 변환]을 선택합니다.

• 퀵 태그 편집기에서 태그나 속성을 변경하고 Tab 키 또는 Enter 키를 누릅니다.


Configuration/ThirdPartyTags/ 언어.xml 마크업 언어 태그에 대한 정보가 포함되어 있습니다.

Configuration/ThirdPartyTags/ 언어.gif 언어 태그에 대한 아이콘입니다.

Configuration/Translators/ 언어.htm 데이터 변환기에 대한 JavaScript 함수가 포함되어 있습니다.


283

사용할 변환기 종류 확인모든 변환기에는 getTranslatorInfo() 및 translateMarkup() 함수가 포함되어 있어야 하며 모든 변환기는 Configuration/Translators 폴더에 위치해야 합니다. 그러나 변환기는 다음 목록에 설명된 것처럼 사용자의 문서에 삽입되는 코드 종류 및 코드 관리 방법에 따라 다릅니다.

• 속성값을 판별하거나 표준 HTML 태그에 속성을 조건부로 추가하는 서버 마크업을 변환하려면 속성 변환기를 작성합니다. 변환된 속성이 포함된 표준 HTML 태그는 Dreamweaver에 내장된 속성 관리자로 관리할 수 있습니다. 사용자 정의 속성 관리자를 작성할 필요가 없습니다. 자세한 내용은 283페이지의 “변환된 속성을 태그에 추가”를 참조하십시오.

• 서버측 포함(SSI)과 같은 전체 태그 또는 코드 블록(예: JavaScript, ColdFusion, PHP 또는 기타 스크립팅)을 변환하려면 블록/태그 변환기를 만들어야 합니다. 블록/태그 변환기에 의해 생성되는 코드는 Dreamweaver에 내장된 속성 관리자로 관리할 수 없습니다. 사용자가 원본 코드의 속성을 변경할 수 있도록 하려면 변환된 내용에 대한 사용자 정의 속성 관리자를 작성해야 합니다. 자세한 내용은 284페이지의 “변환된 태그 또는 코드 블록 잠그기”를 참조하십시오.

변환된 속성을 태그에 추가속성 변환 여부는 서버 마크업을 무시하는 Dreamweaver 파서에 따라 결정됩니다. 기본적으로, Dreamweaver는 일반적인 서버 마크업(예: ASP, CFML, PHP 등)을 무시합니다. 열기 및 닫기 표시 기호가 서로 다른 서버 마크업을 사용하고 있으면 타사 태그 데이터베이스를 수정해야 변환기가 제대로 작동합니다. 타사 태그 데이터베이스 수정에 대한 자세한 내용은 Dreamweaver사용 설명서에서 “Dreamweaver 사용자 정의” 를 참조하십시오.

Dreamweaver에서 원본 서버 마크업을 보존하면 변환기는 [문서] 윈도우에서 볼 수 있는 유효한 속성값을 생성합니다. 사용자 화면 표시에 영향을 주지 않는 속성에 대해서만 서버 마크업을 사용하는 경우 변환기가 필요하지 않습니다.

변환기는 서버 마크업이 포함된 태그에 mmTranslatedValue라는 특정 속성을 추가하여 [문서] 윈도우의 화면 표시에 영향을 주는 속성값을 만듭니다. mmTranslatedValue 속성과 이 속성값은 [HTML] 패널 또는 [코드] 뷰에 표시되지 않으며 문서와 함께 저장되지도 않습니다.

mmTranslatedValue 속성은 태그 내에서 고유해야 합니다. 변환기가 한 태그에서 속성을 두 개 이상 변환해야 한다고 판단되면 변환기에 mmTranslatedValue 속성 뒤에 숫자를 덧붙이는(예: mmTranslatedValue1, mmTranslatedValue2 등) 루틴을 추가해야 합니다.

다음mmTranslatedValue 속성의 값은 유효한 속성-값 쌍이 적어도 하나 이상 포함된 URL 인코딩 문자열이어야 합니다. 즉, mmTranslatedValue="src=%22open.jpg%22"는 src="<? if (dayType == weekday) then open.jpg else closed.jpg" ?> 및 <? if (dayType == weekday) then src="open.jpg" else src="closed.jpg" ?> 모두에 사용할 수 있는 유효한 변환입니다. mmTranslatedValue="%22open.jpg%22"는 속성이 아니라 값만 포함되어 있으므로 두 경우 모두에 대해 유효하지 변환입니다.

동시에 둘 이상의 속성 변환mmTranslatedValue 속성에는 유효한 속성-값 쌍이 두 개 이상 포함될 수 있습니다. 다음의 미변환 코드를 참조하십시오.<img <? if (dayType==weekday) then src="open.jpg" width="320" height="100" else

src="closed.jpg" width="100" height="320" ?> alt="We're open 24 hours a day from

12:01am Monday until 11:59pm Friday">

다음은 변환된 마크업의 모습을 나타내는 예제입니다.<img <? if (dayType==weekday) then src="open.jpg" width="320" height="100" else

src="closed.jpg" width="100" height="320" ?>

mmTranslatedValue="src=%22open.jpg%22 width=%22320%22 height=%22100%22"

alt="We're open 24 hours a day from 12:01am Monday until 11:59pm Friday">

mmTranslatedValue 속성의 속성-값 쌍 사이의 공백은 인코딩되지 않습니다. Dreamweaver는 변환된 값을 렌더링할 때 이 공백을 찾으므로 mmTranslatedValue의 각 속성-값 쌍을 별도로 인코딩해 두고 나중에 합쳐 완전한 mmTranslatedValue 속성을 구성해야 합니다. 이 과정의 예제를 보려면 288페이지의 “간단한 속성 변환기 예제”를 참조하십시오.


284

변환된 속성 관리서버 마크업이 속성을 하나 지정하고 이 속성이 속성 관리자에 표시되면 Dreamweaver는 속성 관리자에 다음 그림에서와 같이 서버 마크업을 표시합니다.

마크업에는 변환기가 연결되어 있는지 여부가 나타납니다. 변환기는 속성 관리자에 나타나는 서버 마크업을 사용자가 편집할 때마다 실행됩니다.

서버 마크업이 태그의 속성을 둘 이상 조절하는 경우 서버 마크업은 속성 관리자에 나타나지 않습니다. 그러나 번개 모양의 아이콘은 선택한 요소에 대한 변환된 마크업이 존재함을 보여 줍니다.

참고: 텍스트나 표 셀, 행 또는 열을 선택하면 번개 모양의 아이콘이 나타나지 않습니다. 사용자가 패널에서 서버 마크업을 편집하고 해당 마크업 유형을 처리할 변환기가 존재하면 변환이 계속됩니다.

속성 관리자의 텍스트 상자는 편집 가능합니다. 이 경우, 사용자가 서버 마크업이 제어할 수 있는 속성의 값을 입력하면 속성이 중복될 수 있습니다. 특정 속성에 변환된 값과 일반 값 모두 설정되면 [문서] 윈도우에 변환된 값이 표시됩니다. 변환기가 중복된 속성을 찾아 제거할지 여부를 결정해야 합니다.

변환된 태그 또는 코드 블록 잠그기대부분의 경우, 변환기가 마크업을 변경하여 Dreamweaver에 변경된 마크업이 표시되도록 합니다. 하지만 저장하는 대상은 변경 내용이 아니라 원래의 마크업입니다. 그러한 경우, Dreamweaver는 변환된 내용을 감싸고 원본 코드를 참조할 위치에 특별한 XML 태그를 제공합니다.

이런 XML 태그를 사용하면 원본 속성의 내용이 [코드] 뷰에 복제됩니다. 파일을 저장하면 변환되지 않은 원본 마크업이 파일에 기록됩니다. [코드] 뷰에는 변환되지 않은 내용이 표시됩니다.

XML 태그의 구문은 다음 예제와 같습니다.<MM:BeginLock translatorClass="translatorClass" ¬

type="tagNameOrType" depFiles="dependentFilesList" ¬

orig="encodedOriginalMarkup">

Translated content

<MM:EndLock>

이 예제의 값이 의미하는 것은 다음과 같습니다.

• translatorClass 값은 변환기에 대한 고유 식별자입니다. 즉, 이 값은 getTranslatorInfo() 함수가 반환하는 배열의 첫 번째 문자열입니다.

• tagNameOrType 값은 잠금에 포함되어 있는 마크업 형식 또는 마크업에 연결된 태그 이름을 식별하는 문자열입니다. 문자열에는 영숫자, 하이픈(-) 또는 밑줄(_) 문자만 포함될 수 있습니다. 사용자 정의 속성 관리자의 canInspectSelection() 함수에서 이 값을 확인하여 속성 관리자가 내용에 적합한 것인지 판별할 수 있습니다. 자세한 내용은 285페이지의 “잠긴 내용에 대한 속성 관리자 만들기”를 참조하십시오. 잠긴 내용은 Dreamweaver에 내장된 속성 관리자에서 관리할 수 없습니다. 예를 들어, type="IMG"를 지정해도 [이미지] 패널은 나타나지 않습니다.

285

• dependentFilesList 값은 잠긴 마크업이 의존하는 파일 목록이 콤마로 구분되어 들어 있는 문자열입니다. 파일은 사용자 문서에 상대적인 URL로 참조됩니다. 사용자가 dependentFilesList의 파일 중 하나를 업데이트하면 Dreamweaver가 목록이 포함된 문서의 내용을 자동으로 다시 변환합니다.

• encodedOriginalMarkup 값은 URL 인코딩의 일부를 사용(" 대신 %22, < 대신 %3C, > 대신 %3E, % 대신 %25 사용)하여 인코딩된 미변환 원본 마크업이 포함된 문자열입니다. 문자열을 URL 인코딩하는 가장 빠른 방법은 escape() 메서드를 사용하는 것입니다. 예를 들어, myString 값이 '<img src="foo.gif">'이면 escape(myString)은 %3Cimg%20src=%22foo.gif%22%3E를 반환합니다.

다음 예제에서는 서버측 포함 의 변환에서 생성될 수 있는 코드의 잠긴 부분을 보여 줍니다.<MM:BeginLock translatorClass="MM_SSI" type="ssi" ¬

depFiles="C:\sites\webdev\footer.html" orig="%3C!--#include ¬

virtual=%22/footer.html%22%20--%3E">



<CENTER>

<HR SIZE=1 NOSHADE WIDTH=100%>

<BR>

[<A TARGET="_top" HREF="/">home</A>]

[<A TARGET="_top" HREF="/products/">products</A>]

[<A TARGET="_top" HREF="/services/">services</A>]

[<A TARGET="_top" HREF="/support/">support</A>]

[<A TARGET="_top" HREF="/company/">about us</A>]

[<A TARGET="_top" HREF="/help/">help</A>]

</CENTER>



<MM:EndLock>

script 태그 내에서 코드를 잠그는 변환기를 만들면 변환기에 문제가 발생할 수 있습니다. 예를 들어, 다음과 같은 코드가 있다고 가정합니다.<script language="javascript">



</script>

그런 다음 bean:message 받침 태그에 대한 변환기를 만들면 MM:BeginLock 섹션 내에 MM:BeginLock 섹션을 만드는 것이기 때문에 변환기가 실패합니다. 해결 방법은 <%= My_lookup.lookup("show.message") %> 등의 정규 JSP 태그를 사용하는 bean:message 태그 주위에 JSP 래퍼를 만드는 것입니다. 이렇게 하면 변환기가 이 코드를 건너뛰어 변환에 성공합니다.

잠긴 내용에 대한 속성 관리자 만들기변환기를 만든 후에는 사용자가 해당 속성(예: 포함시킬 파일이나 조건문의 조건 중 하나)을 변경할 수 있도록 하는 내용이 구현된 속성 관리자를 만들어야 합니다. 변환된 내용의 관리는 다음과 같은 몇 가지 경우에만 필요합니다.

• 변환된 내용의 속성을 변경하려고 하며 이런 변경 사항이 변환되지 않은 내용에 반영되어야 할 경우입니다.

• 잠금 태그 및 잠금 태그 내의 태그는 DOM의 노드이므로 DOM(문서 객체 모델)에는 변환된 내용이 포함되어 있지만, documentElement 객체, dreamweaver.getSelection() 및 dreamweaver.nodeToOffsets() 함수의 outerHTML 속성은 변환되지 않은 소스에 적용됩니다.

• 관리 대상 태그는 변환 전과 후에 다릅니다.

286

HAPPY 태그에 대한 속성 관리자에는 다음 코드와 비슷한 주석이 있을 수 있습니다.

그러나 변환된 HAPPY 태그에 대한 속성 관리자의 주석은 다음 코드와 비슷합니다.

변환되지 않은 HAPPY 속성 관리자에 대한 canInspectSelection() 함수는 간단합니다. selection 유형이 exact이므로 이 함수는 더 이상 분석하지 않고 true 값을 반환합니다. 변환된 HAPPY 속성 관리자의 경우, 이 함수는 복잡합니다. 키워드 *LOCKED*는 선택이 잠긴 영역 내에 있을 때에는 속성 관리자가 적절하다고 나타냅니다. 하지만 문서에 잠긴 영역이 여러 개 있을 수 있기 때문에 속성 관리자가 이 잠긴 영역과 일치하는지 판별하기 위해 확인 작업을 더 수행해야 합니다.

또 다른 문제는 변환된 내용 관리의 고유한 문제입니다. dom.getSelection() 함수를 호출할 때 기본적으로 반환되는 값은 변환되지 않은 소스로의 오프셋입니다. 잠긴 영역만 선택되도록 선택 영역을 적절히 확장하려면 다음 메서드를 사용합니다.var currentDOM = dw.getDocumentDOM();

var offsets = currentDOM.getSelection();

var theSelection = currentDOM.offsetsToNode(offsets[0],offsets[0]+1);

offsets[0]+1을 두 번째 인수로 사용하면 오프셋을 노드로 변환할 때 열기 잠금 태그에서 벗어나지 않을 수 있습니다. offsets[1]을 두 번째 인수로 사용하면 잠금 상태가 아닌 노드를 선택하는 위험을 감수해야 합니다.

nodeType 값이 node.ELEMENT_NODE라는 것을 확인한 후 선택을 하고 나면, 다음 예제에서처럼 type 속성을 검사하여 잠긴 영역이 이 속성 관리자와 일치하는지 확인할 수 있습니다.if (theSelection.nodeType == node.ELEMENT_NODE && ¬

theSelection.getAttribute('type') == 'happy'){

return true;

}else{

return false

}

변환된 태그의 속성 관리자에 있는 텍스트 상자를 채우려면 orig 속성의 값을 파싱해야 합니다. 예를 들어, 변환되지 않은 코드가 <HAPPY TIME="22">이고 속성 관리자에 [시간] 텍스트 상자가 있으면 orig 문자열에서 TIME 속성의 값을 추출해야 합니다.function inspectSelection() {

var currentDOM = dw.getDocumentDOM();

var currSelection = currentDOM.getSelection();

var theObj = currentDOM.offsetsToNode(curSelection[0],curSelection[0]+1);

if (theObj.nodeType != Node.ELEMENT_NODE) {

return;

}

// 인코딩된 문자를 원래 값으로 다시 변환하려면

// unescape() 메서드를 사용합니다.var origAtt = unescape(theObj.getAttribute("ORIG"));

// 처리를 위해 문자열을 소문자로 변환합니다.var origAttLC = origAtt.toLowerCase();

var timeStart = origAttLC.indexOf('time="');

var timeEnd = origAttLC.indexOf('"',timeStart+6);

var timeValue = origAtt.substring(timeStart+6,timeEnd);

document.layers['timelayer'].document.timeForm.timefield.value = timeValue;

}

변환된 태그의 속성 관리자의 텍스트 상자를 채우기 위해 orig 속성을 파싱했으면. 다음 단계는 사용자가 임의의 텍스트 상자 값을 변경할 경우 orig 속성값을 설정하는 것입니다. 잠긴 영역이 변경할 수 없도록 제한되어 있을 수 있습니다. 원본 마크업을 변경하고 다시 변환하면 이 문제를 피할 수 있습니다.

287

변환된 서버측 포함(Configuration/Inspectors 폴더의 ssi_translated.js 파일)에 대한 속성 관리자는 setComment() 함수에서 이러한 기술을 보여 줍니다. orig 속성을 다시 작성하는 대신, 속성 관리자는 새 서버측 포함 주석을 구성합니다. 그런 다음, 그 주석을 문서에 삽입하고 문서의 내용을 다시 작성하여 기존의 내용을 대체합니다. 이렇게 하여 새 orig 속성이 생성됩니다. 다음은 이 방법을 요약한 코드입니다.

// 새로운 include 주석을 결합합니다. radioStr와 URL은

// 코드의 앞부분에서 정의된 변수입니다.newInc = "";

// 문서의 내용을 가져옵니다.var entireDocObj = dreamweaver.getDocumentDOM();

var docSrc = entireDocObj.documentElement.outerHTML;

// beforeSelStr 변수에는 처음부터 SSI 주석까지의 모든 것을 저장하고

// afterSelStr 변수에는 SSI 주석 이후의 모든 것을 저장합니다.var beforeSelStr = docSrc.substring(0, curSelection[0] );

var afterSelStr= docSrc.substring(curSelection[1]);

// 문서의 새 내용을 결합합니다.docSrc = beforeSelStr + newInc + afterSelStr;

// HTML 태그의 outerHTML(documentElement 객체로 나타냄)을

// 새 내용으로 설정하고,

// 선택 영역을 SSI 주석 앞뒤의

// 잠긴 영역으로 다시 설정합니다.entireDocObj.documentElement.outerHTML = docSrc;

entireDocObj.setSelection(curSelection[0], curSelection[0]+1);

사용하는 변환기에서 버그 찾기translateMarkup() 함수에 특정 유형의 오류가 포함되어 있더라도 변환기는 제대로 로드됩니다. 그러나 이 함수를 호출하면 오류 메시지 없이 호출되지 않습니다. 반응 없이 실패하면 Dreamweaver가 불안정을 방지할 수는 있지만 여러 줄의 코드에서 사소한 구문 오류 하나를 찾아야 하는 등의 개발 작업을 할 때는 문제가 될 수 있습니다.

변환기의 실행이 실패로 끝날 때 효과적인 디버그 방법은 다음 단계와 같이 변환기를 명령어로 전환하는 것입니다.

1 변환기 파일의 내용 전체를 새 문서에 복사하고 Dreamweaver 응용 프로그램 폴더 내의 Configuration/Commands 폴더에 저장합니다.

2 문서 위쪽에 있는 SCRIPT 태그 사이에 다음 함수를 추가합니다.function commandButtons(){

return new Array( "OK","translateMarkup(dreamweaver.¬

getDocumentPath('document'), dreamweaver.getSiteRoot(), ¬

dreamweaver.getDocumentDOM().documentElement.outerHTML); ¬

window.close()", "Cancel", "window.close()");

}

3 다음 예제에서와 같이 translateMarkup() 함수의 끝에서 return whateverTheReturnValueIs 행을 주석 처리하고 이 행을 dreamweaver.getDocumentDOM().documentElement.outerHTML = whateverTheReturnValueIs로 대체합니다.

// theCode 반환;dreamweaver.getDocumentDOM().documentElement.outerHTML = theCode;

}

/* end of translateMarkup() */


288

4 문서의 body에 다음과 같이 텍스트 상자가 없는 양식을 추가합니다.<body>

<form>

Hello.

</form>

</body>

5 Dreamweaver를 다시 시작하고 [명령] 메뉴에서 변환기 명령을 선택합니다. [확인]을 클릭하면 translateMarkup() 함수가 호출되어 변환을 시뮬레이션합니다.

오류 메시지가 나타나지 않는데도 변환이 계속 실패할 경우 코드에 논리 오류가 있을 수 있습니다.

6 해당 분기가 맞는지 확인하고 다른 지점의 속성과 변수 값을 확인할 수 있도록 translateMarkup() 함수 내의 특정 위치에 alert() 명령문을 추가합니다. 예를 들면, 다음과 같습니다.for (var i=0; i< foo.length; i++){

alert("we're at the top of foo.length array, and the value of i is " + i);

/* rest of loop */

}

7 alert() 명령문을 추가한 후, [명령] 메뉴에서 사용할 명령을 선택하고 [취소]를 클릭한 다음 다시 해당 명령을 선택합니다. 이렇게 하면 명령 파일이 다시 로드되고 변경 사항이 통합됩니다.

간단한 속성 변환기 예제예제를 살펴보면 속성 변환에 대한 이해를 높이는 데 도움이 됩니다. 다음 변환기는 ASP 또는 PHP와 다소 유사한 구문인 Pound Conditional(Poco) 마크업입니다.

다음 단계를 따라 속성 변환기를 만듭니다.

• 288페이지의 “tagspec 태그 만들기”

• 289페이지의 “아이콘 만들기”

• 289페이지의 “속성 변환기 만들기”

tagspec 태그 만들기이 변환기가 제대로 작동하기 위한 첫 번째 단계는 Poco 마크업의 tagspec를 만드는 것입니다. 이렇게 하면 Dreamweaver가 변환되지 않은 Poco 명령문을 파싱하지 못하게 됩니다.

tagspec 태그를 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음을 입력합니다.<tagspec tag_name="poco" start_string="<#" end_string="#>" ¬

detect_in_attribute="true" icon="poco.gif" icon_width="17" ¬

icon_height="15"></tagspec>

3 이 파일을 Configuration/ThirdPartyTags 폴더에 poco.xml로 저장합니다.

tagspec 태그 작성 예제는 Configuration/ThirdPartyTags 폴더에서 Tags.xml 파일을 참조하십시오.


289

아이콘 만들기다음으로 Poco 태그에 대한 아이콘을 만듭니다.

아이콘을 만들려면:1 18 x 18 픽셀의 Poco 태그 아이콘에 대한 이미지 파일을 만듭니다.

2 이 파일을 Configuration/ThirdPartyTags 폴더에 poco.gif로 저장합니다.

속성 변환기 만들기속성 변환기에 필요한 함수를 포함하는 HTML 파일을 만듭니다.

HTML 파일을 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음을 입력합니다.<html>

<head>

<title>Conditional Translator</title>

<meta http-equiv="Content-Type" content="text/html; charset=">


/*************************************************************

* 이 변환기에서는 다음 명령문 구문을 처리합니다. * * <# if (condition) then foo else bar #> *

* <# if (condition) then att="foo" else att="bar" #> *

* <# if (condition) then att1="foo" att2="jinkies" *

* att3="jeepers" else att1="bar" att2="zoinks" #> *

* *

* else 절이 없는 명령문은 처리되지 않습니다. * *************************************************************/

var count = 1;

function translateMarkup(docNameStr, siteRootStr, inStr){

var count = 1;

// 고유한 mmTranslatedValues를 확인하기 위한 카운터var outStr = inStr;

// 조작할 문자열var spacer = "";

// 인코딩된 속성 사이의 공백을 관리하는 문자열

var start = inStr.indexOf('<# if'); // Pound Conditional 코드의 첫 번째 인스턴스

// 선언되었지만 초기화되지는 않음 //var attAndValue;

// 속성이 조건문의 일부인지

// 나타내는 부울var trueStart;

// true일 경우의 시작var falseStart;

// false일 경우의 시작var trueValue;

// true일 경우에 표시할 HTMLvar attName;

// 조건에 따라 설정되는

// 속성의 이름.var equalSign;

// <#을 기준으로 바로 왼쪽으로 등호 기호가

// 있는 경우 해당 위치


290

var transAtt;

// 변환된 전체 속성var transValue;

// URL 인코딩되어야 하는 값var back3FromStart;

// 시작 위치 이전의 세 문자

// <# 왼쪽에 있는 등호를 찾는 데 사용됨var tokens;

// true일 경우에 설정되는 모든 속성의 배열var end;

// 현재 조건문의 끝.

// 변환되지 않은 <# 조건이

// 없을 때까지

while (start != -1){

back3FromStart = start-3;

end = outStr.indexOf(' #>',start);

equalSign = outStr.indexOf('="<# if',back3FromStart);

attAndValue = (equalSign != -1)?false:true;

trueStart = outStr.indexOf('then', start);

falseStart = outStr.indexOf(' else', start);

trueValue = outStr.substring(trueStart+5, falseStart);

tokens = dreamweaver.getTokens(trueValue,' ');

// attAndValue 값이 false이면, 등호 표시에서

// 첫 번째 공백으로 되돌아가 변환 대상 속성을

// 알아냅니다. 공백과 등호 표시 사이의

// 하위 문자열은 속성입니다.if (!attAndValue){

for (var i=equalSign; i > 0; i--){

if (outStr.charAt(i) == " "){

attName = outStr.substring(i+1,equalSign);

break;

}

}

transValue = attName + '="' + trueValue + '"';

transAtt = ' mmTranslatedValue' + count + '="' + ¬

escape(transValue) + '"';

outStr = outStr.substring(0,end+4) + transAtt + ¬

outStr.substring(end+4);

// attAndValue 값이 true이고, tokens 값이 1보다

// 크면, trueValue 값은 하나가 아니라

// 일련의 속성/값 쌍입니다. 이 경우 각 속성/값

// 쌍을 따로 인코딩하였다가 다시 더하여

// 변환 값을 만들어야 합니다.}else if (tokens.length > 1){

transAtt = ' mmTranslatedValue' + count + '="'

for (var j=0; j < tokens.length; j++){

tokens[j] = escape(tokens[j]);

if (j>0){

spacer=" ";

}

transAtt += spacer + tokens[j];

}

transAtt += '"';


outStr.substring(end+3)

// attAndValue 값이 true이고 tokens 값이 1보다

// 크지 않으면, trueValue는 단일 속성/값 쌍입니다.


291

// 가장 단순한 경우이며

// trueValue만 인코딩하면 됩니다.}else{

transValue = trueValue;

transAtt = ' mmTranslatedValue' + count + '="' + ¬

escape(transValue) + '"';


outStr.substring(end+3);

}

// 카운터의 값을 증가시켜

// mmTranslatedValue의 다음 인스턴스 이름이 고유한 이름이 되게 하고

// 코드에서 다음 <# 조건을 찾습니다.count++;

start = outStr.indexOf('<# if',end);

}

// 변환된 문자열을 반환합니다.return outStr

}

function getTranslatorInfo(){

returnArray = new Array(7);

returnArray[0] = "Pound_Conditional"; // translatorClass

returnArray[1] = "Pound Conditional Translator"; // 제목

returnArray[2] = "2"; // 확장명 수

returnArray[3] = "html"; // 첫 번째 확장명

returnArray[4] = "htm"; // 두 번째 확장명

returnArray[5] = "1"; // 표현식 수

returnArray[6] = "<#"; // 첫 번째 표현식returnArray[7] = "byString"; //

returnArray[8] = "50"; //

return returnArray

}

</script>

</head>

<body>

</body>

</html>

3 이 파일을 Configuration/Translators 폴더에 Poco.htm으로 저장합니다.

간단한 블록/태그 변환기 예제변환에 대해 이해하려면 완전히 JavaScript로 작성된 변환기를 살펴 보십시오. 이 변환기는 C 라이브러리에 구애받지 않고 모든 기능이 동작합니다. 다음 예제의 변환기는 C로 작성하면 더욱 효율적으로 작성할 수 있습니다. 하지만 JavaScript로 작성하면 더욱 간단하게 작성할 수 있으므로 변환기의 작동 방식을 설명하기에 적합합니다.

대부분의 변환기처럼 이 변환기는 서버 비헤이비어를 모방하도록 설계되었습니다. 요일, 시간 및 사용자의 플랫폼에 따라 KENT 태그가 엔지니어의 다른 사진으로 바뀌도록 웹 서버를 구성하였다고 가정합니다. 변환기는 로컬에서만 이와 동일한 작업을 합니다.


292

블록/태그 변환기를 만들려면:1 비어 있는 새 파일을 만듭니다.

2 다음 코드를 입력합니다.<html>

<head>

<title>Kent 태그 변환기</title><meta http-equiv="Content-Type" content="text/html; charset=">


/**********************************************************

* getTraslatorInfo() 함수에 의해 *

* 클래스와 이름 *

* 변환 대상 마크업이 포함된 문서 형식 *

* 변환 대상 마크업이 포함된 문서가 *

* 일치하는 일반 표현식(변환기가 * * 모든 * * 파일, 파일 없음, 지정한 * * 확장명에 일치하는 파일 또는 지정한 *

* 표현식에 일치하는 파일에 대해 실행될지 여부)에 대한 정보가 제공됩니다. * **********************************************************/

function getTranslatorInfo(){

//슬롯이 6개인 새 배열을 만듭니다.returnArray = new Array(6);

returnArray[0] = "DREAMWEAVER_TEAM"; // translatorClass

returnArray[1] = "Kent Tags"; // 제목

returnArray[2] = "0"; // 확장명 수

returnArray[3] = "1"; // 표현식 수

returnArray[4] = "<kent"; // 표현식

returnArray[5] = "byExpression"; // 파일에 "<kent"가 포함된 경우 실행return returnArray;

}

/**************************************************************************

* translateMarkup() 함수에 의해 실제 변환이 수행됩니다. *

* 이 변환기에서 translateMarkup() 함수는 *

* C 라이브러리를 사용하지 않고 모두 JavaScript로 작성되는데 * * 이는 매우 비효율적입니다. 그렇지만 간단한 예제이고 *

* 배우기에 적합하다는 장점이 있습니다. ****************************************************************************/

function translateMarkup(docNameStr, siteRootStr, inStr){

var outStr = ""; // 변환 후 반환되는 문자열

var start = inStr.indexOf('<kent>'); // 문서 내에서 KENT 태그의

// 첫 번째 위치

var replCode = replaceKentTag(); // replaceKentTag() 함수를 호출하여

// KENT를 대체할 코드를 가져옵니다.

var outStr = ""; // 변환 후 반환되는 문자열

//문서에 내용이 없으면 변환 작업을 종료합니다.if ( inStr.length <= 0 ){

return "";

}

// KENT 태그의 inStr에서의 위치와 동일한 시작이

// -1이 아니면, 즉 문서에 또 다른

// KENT 태그가 있는 한while (start != -1){

// KENT 태그의 시작까지 모두 복사합니다.

// 변환기에서는 변환 대상 마크업 이외의 어떤 것도


293

// 절대 변경되지 않아야 하기 때문에 이는 매우 중요합니다. outStr = inStr.substring(0, start);

// KENT 태그를, 특수 잠금 태그에 둘러쌓인 변환된 HTML로

// 바꿉니다. 바꾸기 작업에 대한 자세한 내용은

// replaceKentTag() 함수의 주석을 참조하십시오.

outStr = outStr + replCode;

// KENT 태그 뒤의 모든 것을 복사합니다. outStr = outStr + inStr.substring(start+6);

// 다음 연습을 위해 방금 생성한 문자열을

// 전체 문서에서 사용합니다. 가장 비효율적인 부분입니다. inStr = outStr;

start = inStr.indexOf('<kent>');

}

// 문서에 KENT 태그가 더 이상 없으면, outStr을 반환합니다.return outStr;

}

/**************************************************************

* replaceKentTag() 함수는 *

* KENT 태그를 대체할 HTML과 HTML을 둘러싸는 특수 잠금 태그를 *

* 결합합니다. getImage() 함수를 호출하여 *

* IMG 태그의 SRC를 식별합니다. ***************************************************************/

function replaceKentTag(){

// 표시할 이미지var image = getImage();

// 로컬 디스크 상의 이미지 위치var depFiles = dreamweaver.getSiteRoot() + image;

// 잠금 태그 사이에 삽입할 IMG 태그 var imgTag = '<IMG SRC="/' + image + '" WIDTH="320" HEIGHT="240" ALT="Kent">\n';

// 열기 잠금 태그의 첫 번째 부분. 태그의 나머지 부분은 하부에

결합됩니다.var start = '<MM:BeginLock translatorClass="DREAMWEAVER_TEAM" type="kent"';

// 닫기 잠금 태그var end = '<MM:EndLock>';

//잠금 태그와 대체 HTML을 결합합니다.var replCode = start + ' depFiles="' + depFiles + '"';

replCode = replCode + ' orig="%3Ckent%3E">\n';

replCode = replCode + imgTag;

replCode = replCode + end;

return replCode;

}

/******************************************************************

* getImage() 함수에 의해 요일, 시간 및 사용자의 플랫폼에 따라 * * 표시 대상 이미지가 *

* 결정됩니다. 요일 및 시간은 UTC * * 시간(그리니치 표준시)에서 8시간을 뺀 *

* 태평양 표준시(PST)를 기준으로 산출합니다. 이 루틴에서는 일광 절약 시간은 * * 고려되지 않습니다. *******************************************************************/


294

function getImage(){

var today = new Date(); // 오늘 날짜와 시간

var day = today.getUTCDay(); // GMT 시간대의 요일

// 0=일요일, 1=월요일 등

var hour = today.getUTCHours(); // 24시간 체계를

// 기준으로 한 GMT 시간대의 시간

var SFhour = hour - 8; // 24시간 체계를

// 기준으로 한 샌프란시스코의 시간

var platform = navigator.platform; // 사용자의 플랫폼. 모든 Windows 컴퓨터는

// Dreamweaver에서 "Win32"로,

// 모든 Mac 시스템은 "MacPPC"로 구별됩니다.

var imageRef; // 반환할 이미지 참조

// SFhour 값이 음수이면, 두 가지를 조정해야 합니다.

// 먼저, GMT에서는 이미 다음 날의 이른 시간이므로

// 해당 날 계산에서 1을 뺍니다. 둘째, 24에 SFhour를 더하여

// 24시간 체계의 유효 시간을 부여합니다. if (SFhour < 0){

day = day - 1;

// 1일을 빼고 계산하면 음수가 되고 토요일이므로,

// 카운터 값을 6으로 설정합니다. if (day < 0){

day = 6;

}

SFhour = SFhour + 24;

}

// 이제는 주중 또는 주말 여부, 시간, Kent 근무일 여부,

// 사용 플랫폼 등에 따라 표시되는 사진을

// 결정할 차례입니다.

//일요일이 아니고if (day != 0){

//오전 10시와 정오 사이이면, if (SFhour >= 10 && SFhour <= 12){

imageRef = "images/kent_tiredAndIrritated.jpg";

//또는 오후 1시에서 3시 사이이면, }else if (SFhour >= 13 && SFhour <= 15){

imageRef ="images/kent_hungry.jpg";

//또는 오후 4시에서 5시 사이이면 }else if (SFhour >= 16 && SFhour <= 17){

//사용자가 Mac을 사용하면 Mac에서 작업하는 Kent의 사진이 표시됩니다.if (platform == "MacPPC"){

imageRef = "images/kent_gettingStartedOnMac.jpg";

//사용자가 Windows를 사용하면 Windows에서 작업하는 Kent 사진이 표시됩니다.}else{

imageRef = "images/kent_gettingStartedOnWin.jpg";

}

//또는 오후 6시 이후, 자정 전이면 }else if (SFhour >= 18){

//토요일이면 if (day == 6){

imageRef = "images/kent_dancing.jpg";

//토요일이 아니면, 사용자 플랫폼을 확인합니다.}else if (platform == "MacPPC"){

imageRef = "images/kent_hardAtWorkOnMac.jpg";

}else{

imageRef = "images/kent_hardAtWorkOnWin.jpg";


295

}

}else{

imageRef = "images/kent_sleeping.jpg";

}

//자정 이후이고 오전 10시 전, 또는 일요일이면}else{

imageRef = "images/kent_sleeping.jpg";

}

return imageRef;

}

</script>

</head>

<body>

</body>

</html>

3 이 파일을 Configuration/Translators 폴더에 kent.htm으로 저장합니다.

데이터 변환기 API 함수이 단원에서는 Dreamweaver의 변환기를 정의하는 데 사용되는 함수에 대해 설명합니다.

getTranslatorInfo()

설명이 함수는 변환기 및 변환기가 영향을 주는 파일에 대한 정보를 제공합니다.

인수없음

반환값문자열 배열. 배열의 요소는 다음 순서로 나타나야 합니다.

1 translatorClass 문자열은 변환기를 고유하게 식별합니다. 이 문자열은 문자로 시작하고 영숫자, 하이픈(-) 및 밑줄(_)만 포함할 수 있습니다.

2 title 문자열은 변환기를 40자 이하로 설명합니다.

3 nExtensions 문자열은 파일 확장명의 수를 지정합니다. nExtensions 값이 0이면 변환기는 어떤 파일에 대해서도 실행될 수 없습니다. nExtensions 값이 0이면 nRegExps의 값은 배열의 다음 요소입니다.

4 extension 문자열은 이 변환기를 사용하여 동작하는 파일 확장명(예: "htm" 또는 "SHTML")을 지정합니다. 이 문자열은 대소문자를 구분하지 않으며 선행 마침표를 포함하고 있지 않습니다. 배열에는 nExtensions에서 지정한 것과 동일한 수의 Extension 요소가 들어 있어야 합니다.

5 nRegExps 문자열은 일반 표현식의 수를 지정합니다. nRegExps 값이 0이면 runDefault는 배열의 다음 요소입니다.

6 regExps 문자열은 확인할 수 있는 일반 표현식을 지정합니다. 배열에는 nRegExps에서 지정한 것과 동일한 수의 regExps 요소가 들어 있어야 하며, 변환기에서 파일에 대한 작업을 수행하기 전에 regExps 요소가 문서 소스 코드와 적어도 하나 이상 일치해야 합니다.

296

7 runDefault 문자열은 이 변환기가 실행되는 시간을 지정합니다. 다음 목록에는 가능한 문자열 값이 나열되어 있습니다.

참고: runDefault를 "byExtension"으로 설정하고 확장명을 지정(4단계 참조)하지 않으면 "allFiles" 설정과 동일한 효과가 나타납니다. runDefault를"byExpression"으로 설정하고 표현식을 지정(6단계 참조)하지 않으면 "noFiles" 설정과 동일한 효과가 나타납니다.

8 priority 문자열은 이 변환기를 실행할 기본 우선 순위를 지정합니다. 우선 순위는 0과 100 사이의 수입니다. 우선 순위를 지정하지 않으면 기본 우선 순위는 100이 됩니다. 가장 높은 우선 순위는 0이고 가장 낮은 우선 순위는 100입니다. 문서에 여러 변환기가 적용될 때 이 설정에 따라 변환기의 적용 순서가 조절됩니다. 가장 높은 우선 순위가 가장 먼저 적용됩니다. 여러 변환기의 우선 순위가 같은 경우, translatorClass에 의해 알파벳순으로 적용됩니다.

예제getTranslatorInfo() 함수의 다음 인스턴스는 서버측 포함 파일의 변환기에 대한 정보를 제공합니다.function getTranslatorInfo(){

var transArray = new Array(11);

transArray[0] = "SSI";

transArray[1] = "Server-Side Includes";

transArray[2] = "4";

transArray[3] = "htm";

transArray[4] = "stm";

transArray[5] = "html";

transArray[6] = "shtml";


transArray[8] = "<!--#include file";

transArray[9] = "<!--#include virtual";

transArray[10] = "byExtension";


return transArray;

}

translateDOM()


설명Dreamweaver는 두 번의 변환 과정을 수행합니다. 첫 번째 과정에서는 모든 변환기를 검색하여 translateMarkup() 함수를 호출합니다. 해당 함수를 호출한 후, 두 번째 과정에서는 translateDOM() 함수를 호출합니다. 전달되는 dom이 변환 대상 dom입니다. 두 번째 과정 동안에는 변환된 속성에 대한 편집만 허용됩니다.

인수dom, sourceStr

• dom 인수입니다.

• sourceStr 인수는 translateMarkup에 전달되는 동일한 문자열로, 참조용으로 제공됩니다. 모든 변환은 sourceStr 인수가 아닌 dom 인수에 대해 수행해야 합니다.

문자열 정의

"allFiles" 변환기가 항상 실행하도록 설정합니다.

"noFiles" 변환기가 전혀 실행되지 않도록 설정합니다.

"byExtension" 파일 확장명이 Extension에 지정되어 있는 파일에 대해 변환기가 실행되도록 설정합니다.

"byExpression" 지정된 일반 표현식 중 하나와 일치하는 항목이 문서에 있으면 변환기가 실행되도록 설정합니다.

"bystring" 지정한 문자열 중 하나와 일치하는 항목이 문서에 있으면 변환기가 실행되도록 설정합니다.


297

반환값없음

예제translateDOM( dom, sourceStr ); //반환되는 값이 없습니다.

translateDOM() 함수의 다음 인스턴스는 문서에서 div1 ID를 가진 태그를 숨깁니다. function translateDOM(dom, sourceStr){

var div1 = dom.getAttributeById("div1");

if (div1){

div1.style.display = "none";

}

}

translateMarkup()

설명이 함수는 변환을 수행합니다.

인수docName, siteRoot, docContent

• docName 인수는 변환될 문서의 file:// URL이 포함된 문자열입니다.

• siteRoot 인수는 변환될 문서가 포함된 사이트의 루트에 대한 file:// URL이 포함된 문자열입니다. 문서가 사이트 밖에 있는 경우 이 문자열은 비어 있을 수도 있습니다.

• docContent 인수는 문서 내용이 포함된 문자열입니다.

반환값변환된 문서가 포함된 문자열 또는 변환된 내용이 없으면 빈 문자열

예제translateMarkup()의 다음 인스턴스는 C 함수 translateASP()를 호출합니다. 이 함수는 DLL(Windows) 또는 ASPTrans라는 코드 라이브러리(Macintosh)에 들어 있습니다.function translateMarkup(docName, siteRoot, docContent){

var translatedString = "";

if (docContent.length > 0){

translatedString = ASPTrans.translateASP(docName, siteRoot, ¬

docContent);

}

return translatedString;

}

모든 JavaScript 예제는 288페이지의 “간단한 속성 변환기 예제” 또는 291페이지의 “간단한 블록/태그 변환기 예제”를 참조하십시오.


298

liveDataTranslateMarkup()


설명이 함수는 사용자가 라이브 데이터 윈도우를 사용하고 있을 때 문서를 변환합니다. 사용자가 [보기] > [라이브 데이터] 명령을 선택하거나 [새로 고침] 버튼을 클릭하면 Dreamweaver는 translateMarkup() 함수 대신, liveDataTranslateMarkup() 함수를 호출합니다.

인수docName, siteRoot, docContent

• docName 인수는 변환될 문서의 file:// URL이 포함된 문자열입니다.

• siteRoot 인수는 변환될 문서가 포함된 사이트의 루트에 대한 file:// URL이 포함된 문자열입니다. 문서가 사이트 밖에 있는 경우 이 문자열은 비어 있을 수도 있습니다.

• docContent 인수는 문서 내용이 포함된 문자열입니다.

반환값변환된 문서가 포함된 문자열 또는 변환된 내용이 없으면 빈 문자열

예제liveDataTranslateMarkup()의 다음 인스턴스는 C 함수 translateASP()를 호출합니다. 이 함수는 DLL(Windows) 또는 ASPTrans라는 코드 라이브러리(Macintosh)에 들어 있습니다.function liveDataTranslateMarkup(docName, siteRoot, docContent){

var translatedString = "";

if (docContent.length > 0){

translatedString = ASPTrans.translateASP(docName, siteRoot, docContent);

}

return translatedString;

}

299

23장: C 레벨 확장성

C 레벨 확장성 메커니즘을 활용하면 JavaScript와 사용자 정의 C 코드를 결합하여 Adobe Dreamweaver CS3 확장 파일을 구현할 수 있습니다. C로 함수를 정의하고 이 함수를 동적 링크 라이브러리(DLL)나 공유 라이브러리로 만들어 Dreamweaver 응용 프로그램 폴더의 Configuration/JSExtensions 폴더에 저장한 다음, Dreamweaver JavaScript 인터프리터를 사용하여 JavaScript에서 호출합니다.

예를 들어, 사용자 지정 파일의 내용을 현재 문서에 삽입하는 Dreamweaver 객체를 정의해야 하는 경우가 있습니다. 클라이언트측 JavaScript는 파일 입출력(I/O)을 지원하지 않기 때문에 C 언어로 함수를 작성하여 이 기능을 제공해야 합니다.

C 함수가 동작하도록 통합하는 방법다음과 같은 HTML 및 JavaScript를 사용하여 간단한 Insert Text from File 객체를 만들 수 있습니다. objectTag() 함수는 myLibrary 라이브러리에 저장되어 있는 readContentsOfFile() C 함수를 호출합니다.<HTML>

<HEAD>

<SCRIPT>

function objectTag() {

fileName = document.forms[0].myFile.value;

return myLibrary.readContentsOfFile(fileName);

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

삽입할 파일의 이름을 입력합니다.<INPUT TYPE="file" NAME="myFile">

</FORM>

</BODY>

</HTML>

readContentsOfFile() 함수는 사용자로부터 인수 목록을 받아 filename 인수를 구하여 파일의 내용을 읽고 그 내용을 반환합니다. readContentsOfFile() 함수에 나타나는 JavaScript 데이터 구조 및 함수에 대한 자세한 내용은 300페이지의 “C 레벨 확장성 및 JavaScript 인터프리터”를 참조하십시오.JSBool

readContentsOfFile(JSContext *cx, JSObject *obj, unsigned int ¬

argc, jsval *argv, jsval *rval)

{

char *fileName, *fileContents;

JSBool success;

unsigned int length;

/* 정확히 하나의 인수에 호출자가 전달되는지 확인합니다. 그렇지 않을 경우

* 인터프리터에 스크립트 실행 취소를 지시합니다.*/if (argc != 1){

JS_ReportError(cx, "Wrong number of arguments", 0);

return JS_FALSE;

}

/* 인수를 문자열로 변환 */fileName = JS_ValueToString(cx, argv[0], &length);

if (fileName == NULL){

JS_ReportError(cx, "The argument must be a string", 0);


300

return JS_FALSE;

}

/* 문자열(파일 이름)을 사용하여 파일을 열고 읽습니다. */fileContents = exerciseLeftToTheReader(fileName);

/* 파일 내용을 rval에 저장합니다. 이것은 호출자에게 전달되는

* 반환값입니다. */success = JS_StringToValue(cx, fileContents, 0, *rval);

free(fileContents);

/* true가 반환되면 스크립트가 계속 수행되고 false가 반환되면 스크립트가 중단됩니다. */return success;

}

readContentsOfFile() 함수가 제대로 실행되어 JavaScript 오류가 발생하지 않도록 하려면 라이브러리에 MM_Init() 함수를 포함시켜 JavaScript 인터프리터를 이용해 함수를 등록해야 합니다. Dreamweaver는 시작할 때 라이브러리를 로드하면서 MM_Init() 함수를 호출하여 다음 세 가지 정보를 가져옵니다.

• 함수의 JavaScript 이름

• 함수에 대한 포인터

• 함수에 필요한 인수의 수

다음 예제는 myLibrary 라이브러리에 대한 MM_Init() 함수가 어떻게 나타나는지 보여줍니다.void

MM_Init()

{

JS_DefineFunction("readContentsOfFile", readContentsOfFile, 1);

}

라이브러리에는 반드시 다음 매크로의 인스턴스가 정확히 한 개가 들어 있어야 합니다.

/* MM_STATE는 Dreamweaver와 상호 작용하는 데

* 필요한 몇 가지 정의로 확장되는 매크로입니다. 이 매크로는

* 라이브러리에 딱 한 번만 정의되어야 합니다. */MM_STATE

참고: 이 라이브러리는 C 또는 C++ 중 하나로 구현될 수 있지만 MM_Init() 함수와 MM_STATE 매크로를 포함하는 파일은 C로 구현되어야 합니다. C++ 컴파일러는 함수 이름을 다르게 처리하기 때문에 Dreamweaver가 MM_Init() 함수를 찾을 수 없게 됩니다.

C 레벨 확장성 및 JavaScript 인터프리터라이브러리의 C 코드는 다음과 같이 서로 다른 시점에서 Dreamweaver JavaScript 인터프리터와 상호 작용해야 합니다.

• 시작 시 라이브러리의 함수 등록

• 함수가 호출될 때 JavaScript가 C로 전달하는 인수 파싱

• 함수에 의해 반환되기 전 반환값 패키지화

이러한 작업을 위해 인터프리터는 여러 데이터 유형을 정의하고 API를 노출합니다. 이 단원에서 다루는 데이터 유형 및 함수에 대한 정의는 mm_jsapi.h 파일에 들어 있습니다. 라이브러리가 올바로 동작하도록 하려면 라이브러리의 각 파일의 맨 위에 다음 행과 같이 mm_jsapi.h 파일을 포함시켜야 합니다.#include "mm_jsapi.h"

mm_jsapi.h 파일을 포함시키면 MM_Environment 구조를 정의하는 mm_jsapi_environment.h도 포함됩니다.


301

데이터 유형JavaScript 인터프리터는 다음 데이터 유형을 정의합니다.

typedef struct JSContext JSContext이 불투명 데이터 유형에 대한 포인터가 C 레벨 함수에 전달됩니다. API의 일부 함수는 이 포인터를 인수 중 하나로 받습니다.

typedef struct JSObject JSObject이 불투명 데이터 유형에 대한 포인터가 C 레벨 함수에 전달됩니다. 이 데이터 유형은 객체를 나타냅니다. 이 객체는 배열 객체이거나 기타 다른 객체 유형일 수 있습니다.

typedef struct jsval jsval부동 소수점 수, 문자열, 객체 등에 대한 포인터 또는 정수를 포함할 수 있는 불투명한 데이터 구조입니다. API에 있는 일부 함수는 JSVal 구조의 내용을 읽어 함수 인수의 값을 읽을 수 있으며, 일부 함수는 JSVal 구조를 작성하여 함수의 반환값을 기록하는 데 사용될 수 있습니다.

typedef enum { JS_FALSE = 0, JS_TRUE = 1 } JSBool부울 값을 저장하는 단순 데이터 유형입니다.

C 레벨 APIC 레벨 확장성 API는 다음과 같은 함수들로 구성됩니다.

typedef JSBool (*JSNative)(JSContext *cx, JSObject *obj, unsigned int argc, jsval *argv, jsval *rval)

설명이 함수 서명은 다음과 같은 상황에서 JavaScript 함수의 C 레벨 구현을 나타냅니다.

• cx 포인터는 불투명 JSContext 구조체에 대한 포인터로, JavaScript API의 일부 함수에 전달되어야 합니다. 이 변수에는 인터프리터의 실행 컨텍스트가 저장됩니다.

• obj 포인터는 스크립트가 해당 컨텍스트를 실행하는 객체에 대한 포인터입니다. 스크립트 실행 동안 키워드 this는 이 객체를 나타냅니다.

• argc 정수는 함수에 전달되는 인수의 개수입니다.

• argv 포인터는 JSVal 구조 배열에 대한 포인터입니다. 배열은 argc개의 요소를 가집니다.

• rval 포인터는 단일 JSVal 구조에 대한 포인터입니다. 이 함수의 반환값은 *rval에 기록되어야 합니다.

이 함수는 성공하면 JS_TRUE를 반환하고 그렇지 않으면 JS_FALSE를 반환합니다. 함수가 JS_FALSE를 반환하면 현재 스크립트의 실행이 중단되고 오류 메시지가 나타납니다.


302

JSBool JS_DefineFunction()

설명이 함수는 Dreamweaver에서 JavaScript 인터프리터를 통하여 C 레벨 함수를 등록합니다. JS_DefineFunction() 함수를 통하여 call 인수에 지정한 C 레벨 함수를 등록하면 name 인수에 지정된 이름으로 함수를 참조하여 JavaScript 스크립트에서 호출할 수 있습니다. name 인수에서는 대소문자를 구분합니다.

일반적으로 이 함수는 Dreamweaver 시작 시 호출되는 MM_Init() 함수에서 호출됩니다.

인수char *name, JSNative call, unsigned int nargs

• name 인수는 JavaScript에 노출될 때의 함수 이름입니다.

• call 인수는 C 레벨 함수에 대한 포인터입니다. 함수는 readContentsOfFile과 같은 인수를 받아야 하며 성공 또는 실패를 가리키는 JSBool을 반환해야 합니다.

• nargs 인수는 함수에서 받아야 하는 인수의 수입니다.

반환값부울 값을 반환하며, 성공하면 JS_TRUE를 반환하고 실패하면 JS_FALSE를 반환합니다.

char *JS_ValueToString()

설명이 함수는 JSVal 구조에서 함수 인수를 추출하고 문자열로 변환할 수 있으면 문자열로 변환한 다음, 변환된 값을 호출자에게 다시 전달합니다.

참고: 반환된 버퍼 포인터는 수정하지 말아야 하며 수정하면 JavaScript 인터프리터의 데이터 구조체가 손상될 수 있습니다. 문자열을 변경하려면 문자를 다른 버퍼에 복사하고 새로운 JavaScript 문자열을 만들어야 합니다.

인수JSContext *cx, jsval v, unsigned int *pLength

• cx 인수는 JavaScript 함수에 전달되는 불투명 JSContext 포인터입니다.

• v 인수는 문자열을 추출할 JSVal구조입니다.

• pLength 인수는 부호 없는 정수에 대한 포인터입니다. 이 함수는 *plength를 바이트 단위의 문자열 길이와 같게 설정합니다.

반환값성공하면 null 종료 문자열을 가리키는 포인터를 반환하고 실패하면 null 값을 반환합니다. 호출 루틴은 종료 시 이 문자열을 해제하지 말아야 합니다.

JSBool JS_ValueToInteger()

설명이 함수는 JSVal 구조에서 함수 인수를 추출하고 정수로 변환할 수 있으면 정수로 변환한 다음, 변환된 값을 호출자에게 다시 전달합니다.

인수JSContext *cx, jsval v, long *lp


• v 인수는 문자열을 추출할 JSVal구조입니다.

• lp 인수는 4바이트 정수에 대한 포인터입니다. 이 함수는 변환된 값을 *lp에 저장합니다.



303

JSBool JS_ValueToDouble()

설명이 함수는 JSVal 구조에서 함수 인수를 추출하고 가능하면 Double로 변환한 다음, 변환된 값을 호출자에게 다시 전달합니다.

인수JSContext *cx, jsval v, double *dp


• v 인수는 Double을 추출할 JSVal구조입니다.

• dp 인수는 8바이트 double 형식의 값에 대한 포인터입니다. 이 함수는 변환된 값을 *dp에 저장합니다.


JSBool JS_ValueToBoolean()

설명이 함수는 JSVal 구조에서 함수 인수를 추출하고 부울 값으로 변환할 수 있으면 부울 값으로 변환한 다음, 변환된 값을 호출자에 다시 전달합니다.

인수JSContext *cx, jsval v, JSBool *bp


• v 인수는 부울 값을 추출할 JSVal 구조입니다.

• bp 인수는 JSBool 부울 값에 대한 포인터입니다. 이 함수는 변환된 값을 *bp에 저장합니다.


JSBool JS_ValueToObject()

설명이 함수는 JSVal 구조에서 함수 인수를 추출하고 객체로 변환할 수 있으면 객체로 변환한 다음, 변환된 값을 호출자에게 다시 전달합니다. 객체가 배열이면 JS_GetArrayLength()와 JS_GetElement()를 사용하여 내용을 읽습니다.

인수JSContext *cx, jsval v, JSObject **op


• v 인수는 객체를 추출할 JSVal구조입니다.

• op 인수는 JSObject 포인터에 대한 포인터입니다. 이 함수는 변환된 값을 *op에 저장합니다.



304

JSBool JS_StringToValue()

설명이 함수는 문자열 반환값을 JSVal 구조에 저장합니다. 새 JavaScript 문자열 객체를 할당합니다.

인수JSContext *cx, char *bytes, size_t sz, jsval *vp


• bytes 인수는 JSVal 구조에 저장될 문자열입니다. 문자열 데이터가 복사되므로 더 이상 필요가 없으면 호출자는 해당 문자열을 해제합니다. 문자열 크기가 지정되지 않은 경우(sz 인수 참조) 문자열은 null-종료 문자열이어야 합니다.

• sz 인수는 바이트 단위의 문자열 크기를 나타냅니다. sz 값이 0이면 null-종료 문자열의 길이가 자동으로 계산됩니다.

• vp 인수는 문자열의 내용이 복사될 JSVal 구조에 대한 포인터입니다.


JSBool JS_DoubleToValue()

설명이 함수는 부동 소수점 실수 반환값을 JSVal 구조에 저장합니다.

인수JSContext *cx, double dv, jsval *vp


• dv 인수는 8바이트 부동 소수점 실수입니다.

• vp 인수는 Double의 내용이 복사될 JSVal 구조체에 대한 포인터입니다.


JSVal JS_BooleanToValue()

설명이 함수는 부울 반환값을 JSVal 구조에 저장합니다.

인수JSBool bv

• bv 인수는 부울 값으로서, 성공하면 JS_TRUE를 반환하고 실패하면 JS_FALSE를 반환합니다.

반환값함수에 인수로 전달한 부울 값이 포함된 JSVal 구조입니다.

JSVal JS_IntegerToValue()

설명이 함수는 긴 정수 값을 JSVal 구조로 변환합니다.

인수lv

lv 인수는 JSVal 구조로 변환할 긴 정수 값입니다.

반환값함수에 인수로 전달한 정수 값이 포함된 JSVal 구조입니다.


305

JSVal JS_ObjectToValue()

설명이 함수는 객체 반환값을 JSVal에 저장합니다. JS_ NewArrayObject()를 사용하여 배열 객체를 만들고 JS_SetElement()를 사용하여 객체의 내용을 정의합니다.

인수JSObject *obj

obj 인수는 JSVal 구조로 변환할 JSObject 객체에 대한 포인터입니다.

반환값함수에 인수로 전달한 객체가 들어 있는 JSVal 구조입니다.

char *JS_ObjectType()

설명특정 객체 참조에 대해 JS_ObjectType() 함수는 객체의 클래스 이름을 반환합니다. 예를 들어, DOM 객체일 경우 이 함수는 "Document"를 반환합니다. 객체가 문서의 노드일 경우에는 이 함수는 "Element"를 반환합니다. 배열 객체일 경우 이 함수는 "Array"를 반환합니다.

참고: 반환된 버퍼 포인터는 수정하지 말아야 하며 수정하면 JavaScript 인터프리터의 데이터 구조체가 손상될 수 있습니다.

인수JSObject *obj

일반적으로 이 인수는 JS_ValueToObject() 함수를 사용하여 전달되어 변환됩니다.

반환값Null 종료 문자열에 대한 포인터를 반환합니다. 호출자는 종료 시 이 문자열을 해제하지 말아야 합니다.

JSObject *JS_NewArrayObject()

설명이 함수는 JSVals의 배열을 포함하는 새 객체를 작성합니다.

인수JSContext *cx, unsigned int length, jsval *v


• length 인수는 배열에 들어갈 수 있는 요소의 수입니다.

• v 인수는 배열에 저장될 jsvals에 대한 선택적 포인터입니다. 000반환값이 null이 아니면 v는 length 요소가 포함된 배열입니다. 반환값이 null이면 배열 객체의 초기 내용이 정의되지 않습니다. 이 내용은 JS_SetElement() 함수를 사용하여 설정할 수 있습니다.

반환값새 배열 객체에 대한 포인터를 반환합니다. 또는 실패할 경우 null을 반환합니다.


306

long JS_GetArrayLength()

설명배열 객체 포인터의 경우 배열의 요소 수를 얻습니다.

인수JSContext *cx, JSObject *obj


• obj 인수는 배열 객체에 대한 포인터입니다.

반환값배열 요소의 수를 반환합니다. 실패한 경우에는 -1을 반환합니다.

JSBool JS_GetElement()

설명이 함수는 배열 객체의 단일 요소를 얻습니다.

인수JSContext *cx, JSObject *obj, unsigned int index, jsval *v



• index 인수는 배열에 대한 정수 인덱스입니다. 첫 번째 요소는 인덱스 0이고 마지막 요소는 인덱스(length - 1)입니다.

• v 인수는 배열 내 JSVal 구조의 내용이 복사될 jsval에 대한 포인터입니다.


JSBool JS_SetElement()

설명이 함수는 배열 객체의 단일 요소를 작성합니다.

인수JSContext *cx, JSObject *obj, unsigned int index, jsval *v



• index 인수는 배열에 대한 정수 인덱스입니다. 첫 번째 요소는 인덱스 0이고 마지막 요소는 인덱스(length - 1)입니다.

• v 인수는 배열의 JSVal로 내용이 복사될 JSVal 구조에 대한 포인터입니다.



307

JSBool JS_ExecuteScript()

설명이 함수는 JavaScript 문자열을 컴파일하고 실행합니다. 스크립트에서 반환값이 생성되면 *rval에 반환됩니다.

인수JSContext *cx, JSObject *obj, char *script, unsigned int sz, JSVal *rval


• obj 인수는 스크립트가 해당 컨텍스트를 실행하는 객체에 대한 포인터입니다. 스크립트 실행 동안 키워드 this는 이 객체를 나타냅니다. 일반적으로 이 인수는 JavaScript 함수에 전달되는 JSObject 포인터가 됩니다.

• script 인수는 JavaScript 코드가 포함된 문자열입니다. 문자열 크기가 지정되지 않은 경우(sz 인수 참조) 문자열은 null 종료 문자열이어야 합니다.

• sz 인수는 바이트 단위의 문자열 크기를 나타냅니다. sz 값이 0이면 null 종료 문자열의 길이가 자동으로 계산됩니다.

• rval 인수는 단일 JSVal 구조에 대한 포인터입니다. 이 함수의 반환값은 *rval에 저장됩니다.


JSBool JS_ReportError()

설명이 함수는 스크립트 오류가 발생한 원인을 보고합니다. 스크립트 오류에 대해 JS_FALSE를 반환하기 전에 이 함수를 호출하여 사용자에게 스크립트가 실패한 이유(예: “wrong number of arguments”)에 대한 정보를 제공합니다.

인수JSContext *cx, char *error, size_t sz


• error 인수는 오류 메시지가 포함된 문자열입니다. 문자열이 복사되므로 더 이상 필요 없으면 호출자가 해당 문자열을 해제해야 합니다. 문자열 크기가 지정되지 않은 경우(sz 인수 참조) 문자열은 null 종료 문자열이어야 합니다.

• sz 인수는 바이트 단위의 문자열 크기를 나타냅니다. sz 값이 0이면 null 종료 문자열의 길이가 자동으로 계산됩니다.


파일 액세스 및 다중 사용자 구성 APIC 레벨 확장성을 통해 파일 시스템에 액세스하려면 파일 액세스 및 다중 사용자 구성 API를 사용하는 것이 좋습니다. 이 함수는 구성 파일 이외의 파일을 사용할 때는 지정된 파일이나 폴더에 액세스합니다.

Dreamweaver는 Windows XP, Windows 2000 및 Mac OS X 운영 체제에서 다중 사용자 구성을 지원합니다.

Dreamweaver는 일반적으로 Windows의 C:\Program Folders와 같은 제한된 폴더에 설치됩니다. 따라서 Administrator 권한이 있는 사용자만 Dreamweaver Configuration 폴더를 변경할 수 있습니다. 다중 사용자 운영 체제에서 각 사용자별 구성을 만들고 관리할 수 있도록 Dreamweaver는 각 사용자별로 별도의 Configuration 폴더를 만듭니다. Dreamweaver나 JavaScript Extension이 Dreamweaver Configuration 폴더에 어떤 내용을 기록할 때마다 자동으로 이 폴더 대신 사용자 Configuration 폴더에 기록됩니다. 이러한 처리 과정을 통해 각 사용자는 다른 사용자가 정의한 구성을 방해하지 않고 Dreamweaver 구성 설정을 사용자 정의할 수 있습니다.

Dreamweaver에서는 사용자가 읽기 및 쓰기 권한을 갖고 있는 위치에 해당 사용자의 구성 폴더가 만들어집니다. 사용자의 Configuration 폴더 위치는 사용자의 플랫폼에 따라 다릅니다.


308

Windows 2000과 Windows XP 플랫폼의 경우 Configuration 폴더의 위치는 다음과 같습니다.<드라이브>:\Documents and Settings\<사용자 이름>\Application Data\Adobe\Dreamweaver 9\Configuration


Mac OS X 플랫폼의 경우 Configuration 폴더의 위치는 다음과 같습니다.<드라이브>:Users:<username>:Library:Application Support:Adobe:Dreamweaver 9:Configuration

JavaScript Extension에서는 파일을 열고 Configuration 폴더에 기록하는 경우가 많습니다. JavaScript Extension은 DWFile이나 MMNotes를 사용하거나 dreamweaver.getDocumentDOM() 함수에 URL을 전달하여 파일 시스템에 액세스할 수 있습니다. Extension이 Configuration 폴더의 파일 시스템에 액세스할 때 일반적으로 dw.getConfigurationPath() 함수를 사용하여 파일 이름을 추가하거나 열려 있는 문서의 dom.URL 속성에 액세스하여 경로를 얻고 파일 이름을 추가합니다. 또한 Extension은 dom.URL에 액세스하고 파일 이름을 제거하여 경로를 얻을 수도 있습니다. 문서가 사용자 Configuration 폴더에 있는 경우에도 dw.getConfigurationPath() 함수와 dom.URL 속성은 항상 Dreamweaver Configuration 폴더의 URL을 반환합니다.

JavaScript Extension에서 Dreamweaver Configuration 폴더의 파일을 열 때마다 Dreamweaver는 파일 액세스를 가로채어 사용자 Configuration 폴더가 있는지 먼저 확인합니다. JavaScript Extension이 DWFile 또는 MMNotes 파일을 통해 Dreamweaver Configuration 폴더에 있는 디스크에 데이터를 저장하는 경우, Dreamweaver는 모든 호출을 가로채어 사용자 Configuration 폴더로 리디렉션합니다.

예를 들어, Windows 2000 또는 Windows XP에서 사용자가 file:///C|/Program Files/Adobe/Adobe Dreamweaver CS3/ Configuration/Objects/Common/Table.htm을 요구하는 경우, Dreamweaver는 C:\Documents and Settings\ username\ adobe\Dreamweaver 9\Configuration\Objects\Common 폴더에서 Table.htm 파일을 찾아 이 파일이 존재하면 이 파일을 대신 사용합니다.

C 레벨 Extension 또는 공유 라이브러리는 파일 액세스 및 다중 사용자 구성 API를 사용하여 구성 폴더에 대한 읽기 및 쓰기 작업을 해야 합니다. 파일 액세스 및 다중 사용자 구성 API를 사용하면 Dreamweaver에서 사용자 구성 폴더에 대한 읽기 및 쓰기를 할 수 있으며 액세스 권한이 없어 파일 처리 작업이 실패하는 것을 방지할 수 있습니다. C 레벨 Extension에서 DWFile, MMNotes 또는 DOM 조작을 사용하여 JavaScript로 만든 구성 폴더에 있는 파일에 액세스할 경우, 이런 파일이 사용자 Configuration 폴더에 있을 수 있기 때문에 반드시 파일 액세스 및 다중 사용자 구성 API를 사용해야 합니다.

참고: 대부분의 JavaScript Extensions는 변경 없이 사용자 Configuration 폴더에 쓰기 작업을 할 수 있습니다. 파일 액세스 및 다중 사용자 구성 API 함수를 사용하려면 Configuration 폴더에 쓰기 작업을 수행하는 C 공유 라이브러리만 업데이트하면 됩니다.

Dreamweaver Configuration 폴더에서 파일을 삭제하면 Configuration 폴더의 파일이 사용자 인터페이스에 나타나지 않아야 한다는 것을 알려 주는 항목이 마스크 파일에 추가됩니다. 마스크 처리된 파일 또는 폴더는 실제로는 존재하더라도 Dreamweaver에는 존재하지 않는 것으로 표시됩니다.

예를 들어, [코드 단편] 패널에 쓰레기통 아이콘을 사용해 javascript라는 코드 단편 폴더와 onepixelborder.csn이라는 파일을 삭제하는 경우, Dreamweaver는 사용자 Configuration 폴더에 mm_deleted_files.xml이라는 파일을 만듭니다. 이 파일의 내용은 다음 예제와 유사합니다.<?xml version = "1.0" encoding="utf-8" ?>

<deleteditems>

<item name="snippets/javascript/" />

<item name="snippets/html/onepixelborder.csn" />

</deleteditems>

Dreamweaver가 [코드 단편] 패널을 표시할 때는 Configuration/Snippets/javascript 폴더와 Configuration/Snippets/ html/onepixelborder.csn 파일을 제외하고 사용자의 Configuration/Snippets 폴더와 Dreamweaver Configuration/Snippets 폴더에 있는 모든 파일을 읽어 [코드 단편] 패널 목록에 해당 파일의 목록을 추가합니다.

C 레벨 Extension이 file:///c|Program Files/Adobe /Adobe Dreamweaver CS3/Configuration/Snippets/ javascript/ onepixelborder.csn URL에 대해 MM_ConfigFileExists() 함수를 호출하면 false 값이 반환됩니다. 이와 같이, JavaScript Extension에서 dw.getDocumentDom("file:///c|Program Files/Adobe/Adobe Dreamweaver CS3/Configuration/Snippets/javascript/onepixelborder.csn")을 호출하면 null 값이 반환됩니다.

mm_deleted_files.xml 파일을 수정하여 객체, 새 대화 상자의 휴지통에 들어 있는 내용 등이 Dreamweaver의 사용자 인터페이스에 표시되지 않도록 할 수 있습니다. MM_DeleteConfigfile() 함수를 호출하여 mm_deleted_files.xml 파일에 파일 경로를 추가할 수 있습니다.


309

JS_Object MM_GetConfigFolderList()


설명이 함수는 파일, 폴더 또는 지정한 폴더의 파일 및 폴더 목록을 얻습니다. 구성 폴더를 지정하면 이 함수는 사용자 Configuration 폴더와 Dreamweaver Configuration폴더에 있는 폴더 목록을 얻습니다. 이 목록은 mm_deleted_files.xml에 의해 필터링됩니다.

인수char *fileURL, char *constraints

• char *fileUrl 인수는 내용 목록을 얻으려는 폴더의 이름을 나타내는 문자열에 대한 포인터입니다. 이 문자열은 file:// URL 형식을 가져야 합니다. 파일 URL 문자열에 유효한 와일드카드 문자인 별표(*)와 물음표(?)를 사용할 수 있습니다. 하나 이상의 임의의 문자를 대신하려면 별표(*)를 사용하고 임의의 문자 하나를 대신하려면 물음표(?)를 사용합니다.

• char *contstraints 인수는 파일 또는 디렉토리이거나 null 값이 될 수 있습니다. null이 지정되면 MM_GetConfigFolderList() 함수는 파일과 폴더를 반환합니다.

반환값JSObject는 mm_deleted_files.xml 파일에 따라 필터링을 하여 사용자 Configuration 폴더 또는 Dreamweaver Configuration 폴더에 있는 파일이나 폴더 목록이 포함된 배열을 반환합니다.

예제JSObject *jsobj_array;

jsobj_array = MM_GetConfigFolderList("file:///¬

c|/Program Files/Adobe/Adobe Dreamweaver CS3/Configuration", "directories" );

JSBool MM_ConfigFileExists()


설명이 함수는 지정된 파일이 존재하는지 확인합니다. 파일이 구성 폴더에 존재하면 사용자 Configuration 폴더나 Dreamweaver Configuration 폴더에서 해당 파일을 찾습니다. 이 함수는 또한 파일 이름이 mm_deleted_files.xml 파일에 나열되어 있는지도 확인합니다. 이 파일에 이름이 들어 있으면 이 함수는 false 값을 반환합니다.

인수char *fileUrl

char *fileUrl 인수는 원하는 파일의 이름을 나타내는 문자열에 대한 포인터로, file:// URL의 형식으로 제공됩니다.


예제char *dwConfig = “file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/

Configuration/Extensions.txt”;

int fileno = 0;

if(MM_ConfigFileExists(dwConfig))

{

fileno = MM_OpenConfigFile(dwConfig, “read”);

}


310

int MM_OpenConfigFile()


설명이 함수는 파일을 열고 운영 체제 파일 핸들을 반환합니다. 시스템 파일 함수의 호출에 운영 체제 파일 핸들을 사용할 수 있습니다. 시스템 _close 함수를 호출하여 파일 핸들을 닫아야 합니다.

파일이 구성 파일인 경우, 사용자 Configuration 폴더 또는 Dreamweaver Configuration 폴더 중 어디에 있는지 찾습니다. 쓰기 작업을 위해 이 구성 파일을 열면 파일이 Dreamweaver Configuration 폴더에 있더라도 함수에서는 사용자 Configuration 폴더에 파일을 만듭니다.

참고: 파일에 쓰기 전에 파일을 읽으려면 "read" 모드로 파일을 엽니다. 파일에 쓰려고 할 때는 read 핸들을 닫고 "write" 또는 "append" 모드에서 파일을 다시 엽니다.

인수char *fileURL, char *mode

• char *fileURL 인수는 열려고 하는 파일의 이름을 나타내는 문자열에 대한 포인터로, file:// URL의 형식으로 제공됩니다. 이 인수가 Dreamweaver Configuration 폴더 내의 경로를 지정하면 MM_OpenConfigFile() 함수는 경로를 해석한 다음, 파일을 엽니다.

• char *mode 인수는 파일을 여는 방법을 지정하는 문자열에 대한 포인터입니다. null, "read", "write" 또는 "append" 모드를 지정할 수 있습니다. "write"를 지정하였지만 파일이 존재하지 않으면 MM_OpenconfigFile() 함수는 파일을 생성합니다. "write"를 지정하면 MM_OpenConfigFile() 함수는 파일을 배타적 공유로 엽니다. "read"를 지정하면 MM_OpenConfigFile() 함수는 파일을 비배타적 공유로 엽니다.

"write" 모드로 파일을 열면 새 데이터를 기록하기 전에 파일의 기존 데이터가 잘립니다. "append" 모드로 파일을 열면 새 데이터가 파일 끝에 추가됩니다.

반환값이 파일에 대한 운영 체제 핸들을 나타내는 정수. 파일을 찾을 수 없거나 파일이 존재하지 않으면 -1을 반환합니다.

예제char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/

Configuration/Extensions.txt";

int = fileno;

if(MM_ConfigFileExists(dwConfig))

{

fileno = MM_OpenConfigFile(dwConfig, "read");

}

JSBool MM_GetConfigFileAttributes()


설명이 함수는 파일을 찾고 파일의 속성을 반환합니다. 값이 필요하지 않으면 fileURL을 제외한 모든 인수를 null로 설정할 수 있습니다.

인수char *fileURL, unsigned long *attrs, unsigned long *filesize,

unsigned long *modtime, unsigned long *createtime

• char *fileURL 인수는 속성을 얻으려는 파일의 이름을 나타내는 문자열에 대한 포인터입니다. 이 인수는 file:// URL 형식으로 지정되어야 합니다. fileURL이 Dreamweaver Configuration 폴더 내의 경로를 지정하면 MM_GetConfigFileAttributes() 함수는 경로를 해석한 다음, 파일을 엽니다.


311

• unsigned long *attrs 인수는 반환된 속성 비트가 포함된 정수의 주소입니다. 사용할 수 있는 속성은 311페이지의 “JSBool MM_SetConfigFileAttributes()”를 참조하십시오.

• unsigned long *filesize 인수는 함수에서 파일 크기가 바이트 단위로 반환되는 정수의 주소입니다.

• unsigned long *modtime 인수는 함수에서 파일의 최종 수정 시간이 반환되는 정수의 주소입니다. 시간은 운영 체제 시간 값에 따라 지정됩니다. 운영 체제 시간 값에 대한 자세한 내용은 Dreamweaver API 참조 설명서에서 DWfile.getModificationDate()를 참조하십시오.

• unsigned long *createtime 인수는 함수에서 파일의 작성 시간이 반환되는 정수의 주소입니다. 시간은 운영 체제 시간 값에 따라 지정됩니다. 운영 체제 시간 값에 대한 자세한 내용은 Dreamweaver API 참조 설명서에서 DWfile.getCreationDate()를 참조하십시오.

반환값부울 값을 반환하며, 성공하면 JS_TRUE를 반환하고 실패하면 JS_FALSE를 반환합니다. 파일이 없거나 속성을 얻을 때 오류가 발생하면 JS_FALSE가 반환됩니다.

예제char dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/


unsigned long attrs;

unsigned long filesize;

unsigned long modtime;

unsigned long createtime;

MM_GetConfigAttributes(dwConfig, &attrs, &filesize, &modtime, &createtime);

JSBool MM_SetConfigFileAttributes()


설명이 함수는 속성이 현재 속성과 다를 때 파일에 대해 지정하는 속성을 설정합니다.

지정한 파일 URL이 Dreamweaver Configuration 폴더에 있으면 이 함수는 속성을 설정하기 전에 먼저 파일을 사용자 Configuration 폴더에 복사합니다. 속성이 현재 파일 속성과 동일하면 파일이 복사되지 않습니다.

인수char *fileURL, unsigned long attrs

• char *fileURL 인수는 속성을 설정하려는 파일의 이름을 나타내는 문자열에 대한 포인터로, file:// URL의 형식으로 제공됩니다.

• unsigned long attrs 인수는 파일에 대해 설정할 속성 비트를 지정합니다. 다음 상수에 논리 OR를 사용하여 속성을 설정할 수 있습니다.

MM_FILEATTR_NORMAL

MM_FILEATTR_RDONLY

MM_FILEATTR_HIDDEN

MM_FILEATTR_SYSTEM

MM_FILEATTR_SUBDIR

반환값부울 값을 반환하며, 성공하면 JS_TRUE를 반환하고 실패하면 JS_FALSE를 반환합니다. 파일이 없거나 삭제된 것으로 표시되어 있으면 JS_FALSE를 반환합니다.


312

예제char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/


unsigned long attrs;

attrs = (MM_FILEATTR_NORMAL | MM_FILEATTR_RDONLY);

int fileno = 0;

if(MM_SetConfigFileAttrs(dwConfig, attrs))

{

fileno = MM_OpenConfigFile(dwConfig);

}

JSBool MM_CreateConfigFolder()


설명이 함수는 지정된 장소에 폴더를 만듭니다.

fileURL 인수가 Dreamweaver Configuration 폴더 내의 폴더를 지정하면 이 함수는 사용자 Configuration 폴더 내에 해당 폴더를 만듭니다. fileURL이 Dreamweaver Configuration 폴더 내의 폴더를 지정하지 않으면, 이 함수는 경로의 상위 폴더를 포함하여(없는 경우) 지정된 폴더를 만듭니다.

인수char *fileURL

• char *fileURL 인수는 만들려는 구성 폴더의 이름을 나타내는 file:// URL 문자열에 대한 포인터입니다.


예제char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3


MM_CreateConfigFolder(dwConfig);

JSBool MM_RemoveConfigFolder()


설명이 함수는 폴더와 폴더의 파일 및 하위 폴더를 제거합니다. Dreamweaver Configuration 폴더의 하위 폴더인 경우에는 mm_deleted_files.xml 파일에 폴더 삭제 표시를 기록합니다.

인수char *fileURL

• char *fileURL 인수는 제거할 폴더의 이름을 나타내는 문자열에 대한 포인터로, file:// URL의 형식으로 제공됩니다.


예제char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3

/Configuration/Objects";

MM_RemoveConfigFolder(dwConfig);


313

JSBool MM_DeleteConfigFile()


설명이 함수는 파일이 존재하면 해당 파일을 삭제합니다. 파일이 Dreamweaver Configuration 폴더에 존재하면 mm_deleted_files.xml 파일에 파일 삭제 표시를 기록합니다.

fileURL 인수가 Dreamweaver Configuration 폴더 내의 폴더를 지정하지 않으면, 이 함수는 지정된 파일을 삭제합니다.

인수char *fileURL

• char *fileURL 인수는 제거할 구성 폴더의 이름을 나타내는 문자열에 대한 포인터로, file:// URL의 형식으로 제공됩니다.


예제char dwConfig = "file:///c:|Program Files/Adobe/Adobe Dreamweaver CS3

/Configuration/Objects/insertbar.xml";

MM_DeleteConfigFile(dwConfig);

JavaScript에서 C 함수 호출Dreamweaver에서 C 레벨 확장성의 작동 방식과 특정 데이터 유형 및 함수에 대한 의존성을 이해한 다음에는 라이브러리 작성 및 함수 호출 방법을 익히는 것이 좋습니다.

다음 예제에는 Dreamweaver 응용 프로그램 폴더/Tutorial_assets/Extending에 있는 다음 다섯 개의 파일이 필요합니다. 이 파일들은 Macintosh와 Windows에 모두 포함되어 있습니다.

• mm_jsapi.h 헤더 파일: 300페이지의 “C 레벨 확장성 및 JavaScript 인터프리터”에 설명된 데이터 유형과 함수에 대한 정의가 포함되어 있습니다.

• mm_jsapi_environment.h 파일: MM_Environment.h 구조체를 정의합니다.

• MMInfo.h 파일: 디자인 노트 API에 액세스합니다.

• Sample.c 예제 파일: computeSum() 함수가 정의되어 있습니다.

• Sample.mak 파일: Microsoft Visual C++를 사용하여 Sample.c 소스 파일을 DLL로 만듭니다. Sample.mcp는 Metrowerks CodeWarrior를 사용하여 Mach-O 번들을 빌드하는 파일이고, Sample.xcode는 Apple Xcode에 해당하는 파일입니다. 다른 도구를 사용할 경우 makefile을 만들 수 있습니다.

VS.Net 2003을 사용하여 Windows에서 DLL을 빌드하려면:1 [파일] > [열기]를 선택한 다음 [파일 형식]을 [모든 파일(*.*)]로 설정하여 Sample.mak를 엽니다. VS.Net 2003에서는 MAK 파일을 바로 열 수 없습니다. 그러면 프로젝트를 새 형식으로 변환할지 묻는 메시지가 표시됩니다.

2 [빌드] > [솔루션 다시 빌드]를 선택합니다.

빌드 작업이 완료되면 Sample.dll이라는 파일이 Sample.mak가 포함된 폴더 또는 하위 폴더 중 하나에 나타납니다.

Microsoft Visual C++를 사용하여 Windows에서 DLL을 빌드하려면:1 Microsoft Visual C++에서 [File] > [Open Workspace]를 선택하고 Sample.mak를 선택합니다.

2 [Build] > [Rebuild All]을 선택합니다.

빌드 작업이 완료되면 Sample.dll이라는 파일이 Sample.mak가 포함된 폴더 또는 하위 폴더 중 하나에 나타납니다.


314

Metrowerks CodeWarrior 9 이상을 사용하여 Macintosh에서 공유 라이브러리를 빌드하려면:1 Sample.mcp를 엽니다.

2 프로젝트를 빌드([Project] > [Make])하여 Mach-O 번들을 생성합니다.

빌드 작업이 완료되면 Sample.bundle이라는 파일이 Sample.mcp가 포함된 폴더에 나타납니다.

참고: 생성된 Mach-O 번들은 Dreamweaver 8 이상에서만 사용할 수 있습니다. 그 이전 버전의 Dreamweaver는 이 번들을 인식하지 못합니다.

Apple Xcode 1.5 이상을 사용하여 Macintosh에서 공유 라이브러리를 빌드하려면:1 Sample.xcode를 엽니다.

2 프로젝트를 빌드([Build] > [Build])하여 Mach-O 번들을 생성합니다.

빌드 작업이 완료되면 Sample.bundle이라는 파일이 Sample.xcode 파일 옆에 있는 build 폴더에 나타납니다.

참고: 생성된 Mach-O 번들은 Dreamweaver 8 이상에서만 사용할 수 있습니다. 그 이전 버전의 Dreamweaver는 이 번들을 인식하지 못합니다.

Insert Horizontal Rule 객체에서 computeSum() 함수를 호출하려면:1 Dreamweaver 응용 프로그램 폴더 안의 Configuration 폴더에 JSExtensions라는 폴더를 만듭니다.

2 Sample.dll(Windows) 또는 Sample.bundle(Macintosh)을 JSExtensions 폴더에 복사합니다.

3 텍스트 편집기에 Configuration/Objects/Common 폴더에 있는 HR.htm 파일을 엽니다.

4 다음 예제와 같이 alert(Sample.computeSum(2,2)); 행을 objectTag() 함수에 추가합니다.function objectTag() {

// 삽입할 html 태그를 반환합니다.alert(Sample.computeSum(2,2));

return "<HR>";

}

5 파일을 저장하고 Dreamweaver를 다시 시작합니다.

computeSum() 함수를 실행하려면 [삽입] > [HTML] > [수평선]을 선택합니다.

2 더하기 2의 계산 결과인 숫자 4가 표시된 대화 상자가 나타납니다.

315

24장: Shared 폴더

Shared 폴더는 다른 모든 Extension에서 공통적으로 사용하는 유틸리티 함수, 클래스 및 이미지를 모아 놓은 중앙 저장소입니다. 모든 Extension은 Shared 폴더의 하위 폴더에 있는 파일을 참조할 수 있으며 Adobe Dreamweaver CS3에서 제공하는 유틸리티에 사용자 정의 공용 유틸리티를 추가할 수 있습니다. Windows XP, Windows 2000 및 Mac OS X 사용자를 위해 설치된 다중 사용자 Configuration 폴더에도 개별 사용자 정의에 사용할 수 있는 Shared 폴더가 포함되어 있습니다. 예를 들어, Adobe Exchange에서 Extension을 설치할 때 새 Extension이 Dreamweaver 응용 프로그램의 Configuration/Shared 폴더가 아니라 사용자의 Configuration/Shared 폴더에 내용을 추가하는 것을 확인할 수 있습니다. 다중 사용자 컴퓨터의 Dreamweaver Configuration 폴더에 대한 자세한 내용은 63페이지의 “다중 사용자 Configuration 폴더”를 참조하십시오.

Shared 폴더 내용Shared 폴더에는 사용자의 폴더 시스템 탐색, 트리 컨트롤 삽입, 편집 가능한 격자 작성 및 기타 기능에 대한 함수를 비롯한 다양한 Extension에 의해 공유되는 파일이 포함된 하위 폴더가 있습니다.

참고: Shared 폴더에 있는 JavaScript 파일은 코드 내에 주석을 포함하고 있습니다. 이 주석을 통하여 JavaScript 파일에 포함된 함수에 대해 자세히 알 수 있습니다.

Shared 폴더에서 JavaScript 파일을 찾는 것뿐만 아니라, JavaScript 파일이 포함된 HTML 파일을 Configuration 폴더에서 찾아보면 JavaScript 파일이 어떻게 사용되는지 알 수 있습니다.

일반적으로, Common 및 MM 폴더에 있는 함수 및 리소스를 사용하거나 새 Extension에 사용하기 위해 Common 폴더에 리소스를 추가합니다. Shared/Common/Scripts 폴더에서 항상 유틸리티 및 함수를 먼저 검색하는 것이 좋습니다. 이러한 함수 및 유틸리티는 가장 최근에 작성된 것이며 Shared 폴더에 대한 외형적인 인터페이스를 구성합니다. Shared 폴더가 아닌 다른 폴더의 파일은 오래전에 만들어진 것일 수도 있으므로 다른 폴더의 파일은 사용하지 않는 것이 좋습니다.

특히, Shared 폴더에는 다음과 같은 유용한 폴더가 들어 있습니다.

Common 폴더Common 폴더에는 타사의 Extension에 사용할 수 있는 공유 스크립트 및 클래스가 들어 있습니다.

파일 설명

CodeBehindMgr.js 이 파일에는 코드 숨김 문서를 작성하는 데 사용하는 함수가 들어 있습니다. 코드 숨김 문서는 사용자 인터페이스(UI) 논리에 사용하는 코드와 UI 디자인에 사용하는 코드를 분리하는 별도의 페이지를 만들 수 있도록 해줍니다. 이 파일에 정의된 JSCodeBehindMgr의 메서드는 새 코드 숨김 문서를 만들고 문서 디자인을 위한 링크를 관리할 수 있습니다.

ColumnValueNodeClass.js 이 파일에는 데이터베이스 열을 값에 대응시키는 함수가 들어 있습니다. 이 파일에 정의된 ColumnValueNode의 메서드는 데이터베이스 열의 다양한 값과 속성을 얻고 설정할 수 있도록 해줍니다. Dreamweaver는 편집 작업 객체(레코드 객체 삽입 및 업데이트)를 적용하고 관리하는 경우와 SQLStatement 클래스로 작업하는 경우에 이 저장 클래스를 사용합니다.

CompilerClass.js 이 파일에는 CompilerASPNetCSharp 및 CompilerASPNVBNet 에 의해 사용되는 기본 클래스에 대한 함수가 들어 있으며, 다른 컴파일러를 지원하도록 확장될 수도 있습니다.

DataSourceClass.js 이 파일에는 257페이지의 “findDynamicSources()”의 반환 구조를 정의하는 함수가 들어 있습니다.

DBTreeControlClass.js 이 파일에는 데이터베이스 트리 컨트롤을 만드는 함수가 들어 있습니다. 이 클래스는 데이터베이스 트리 컨트롤을 만들고 이 트리 컨트롤과 상호 작용하는 데 사용됩니다. 고급 레코드세트 서버 비헤이비어에 있는 컨트롤과 같은 데이터베이스 트리 컨트롤을 만들려면 HTML 파일에 type="mmdatabasetree"로 지정된 특별한 <select> 목록을 만듭니다. <select> 목록 이름을 클래스 생성자에 전달하여 해당 HTML 컨트롤에 CBTreeControl 클래스를 첨부합니다. 그런 다음, DBTreeControl 함수를 사용하여 해당 컨트롤을 조작합니다.

dotNetUtils.js 이 파일에는 객체 속성 관리자를 사용한 작업 및 변환되는 ASP .NET 양식 컨트롤에 대한 서버 비헤이비어를 사용하는 작업에 이용되는 함수가 들어 있습니다.


316

dwscripts.js 모든 Dreamweaver Extension에 유용한 함수가 들어 있는 기본 파일로, 이 파일에는 문자열, 파일, 디자인 노트 등을 사용하는 작업에 필요한 함수가 들어 있습니다.

dwscriptsExtData.js 이 파일은 dwscripts.js 파일의 Extension입니다. 이 파일은 서버 비헤이비어, 특히 서버 비헤이비어 EDML 파일을 사용하는 작업에 이용됩니다. 이 파일은 Dreamweaver가 서버 비헤이비어를 구현할 때 광범위하게 사용됩니다.

dwscriptsServer.js 이 파일은 dwscripts.js 파일의 Extension입니다. 이 파일에는 서버 모델에만 제한적으로 사용되는 함수가 들어 있습니다. 이러한 함수 중 다수는 서버 비헤이비어를 사용하여 작업할 때 사용됩니다.

GridControlClass.js 이 클래스는 편집 가능한 격자를 만들고 조작하는 데 사용됩니다. HTML에 특별한 선택 목록을 추가하고 이 목록에 이 클래스를 JavaScript 형식으로 첨부하여 격자를 조작합니다.

ImageButtonClass.js 이 클래스를 사용하면 버튼의 Pressed/Mouse-over-while-pressed/Mouse-over/Disabled-while-pressed 보기를 더욱 쉽게 조절할 수 있습니다.

ListControlClass.js 이 클래스에는 목록 컨트롤이라고 알려져 있는 <select> 태그>를 관리하는 함수가 들어 있습니다. 이 파일에 있는 ListControl 객체의 메서드는 SELECT 컨트롤의 값을 얻고 설정하고 변경합니다.

PageSettingsASPNet.js 이 파일에는 ASP .NET문서의 속성을 설정하는 함수가 들어 있습니다.

RadioGroupClass.js 이 클래스에는 라디오 버튼 그룹을 정의하고 관리하는 함수가 들어 있습니다. 이 파일에 있는 RadioGroup 객체의 메서드는 라디오 버튼 그룹의 값과 비헤이비어를 설정하고 얻습니다. HTML에서 이 클래스를 라디오 버튼에 첨부하여 버튼의 비헤이비어를 제어합니다.

SBDatabaseCallClass.js ServerBehavior 클래스의 하위 클래스입니다. 예를 들어, 이 클래스는 데이터베이스 호출을 작성하거나, 저장 프로시저를 호출하거나, SQL을 사용하여 레코드세트를 반환하는 작업 등과 같은 용도로만 제한적으로 사용되는 기능을 제공합니다. 이 클래스는 추상적인 기본 클래스입니다. 즉, 이 클래스는 단독으로 작성되거나 사용될 수 없습니다. 이 클래스를 사용하려면 SBDatabaseCall()의 하위 클래스를 만들어 자리 표시자 함수를 구현해야 합니다. Dreamweaver는 이 클래스를 사용하여 자신의 레코드세트 및 저장 프로시저 서버 비헤이비어를 구현합니다.

ServerBehaviorClass.js 이 클래스에는 서버 비헤이비어에 대한 정보를 Dreamweaver에 알려 주는 함수가 들어 있습니다. 사용자 고유의 서버 비헤이비어를 구현하는 작업의 일부분으로 이 클래스의 하위 클래스를 만들 수 있습니다.

ServerSettingsASPNet.js 이 클래스에는 ASP .NET서버의 속성을 저장하는 함수가 들어 있습니다.

SQLStatementClass.js 이 클래스에는 SELECT, INSERT, UPDATE, DELETE 및 저장 프로시저 명령문과 같은 SQL 문을 만들고 편집할 수 있는 함수가 들어 있습니다.

tagDialogsCmn.js 이 파일에는 사용자 정의 태그 대화 상자를 개발하도록 도와 주는 함수가 들어 있습니다. 이 파일에 정의된 tagDialog 객체의 메서드는 특정 태그의 속성 및 값을 수정합니다.

TagEditClass.js 이 클래스에는 현재 페이지의 DOM을 변경하지 않고 태그를 편집하는 함수가 들어 있습니다. 이 파일에 정의된 TagEdit 객체의 메서드는 태그의 값, 속성 및 자식을 얻고 설정합니다.

TreeControlClass.js 이 클래스에는 Dreamweaver 내에서 트리 컨트롤을 관리하는 함수가 들어 있습니다. 이 파일에 정의된 TreeControl 객체의 메서드는 트리의 값을 가져오고, 설정 및 정렬합니다. HTML에서 이 클래스를 특수한 MM:TREECONTROL 태그에 첨부하여 트리 컨트롤 기능을 관리할 수 있습니다.

XMLPropSheetClass.js 이 클래스에는 XML 속성 시트의 위치와 값을 관리하는 함수가 들어 있습니다.

파일 설명


317

MM 폴더MM 폴더에는 공유 스크립트, 이미지 및 Dreamweaver와 함께 제공되는 Extension에 사용되는 클래스가 들어 있습니다. 이 클래스에는 내비게이션 막대 구성, 미리 로드 호출 지정 및 단축키 정의에 사용하는 스크립트가 포함되어 있습니다.

Scripts 하위 폴더Scripts 하위 폴더에는 다음 유틸리티 함수가 포함되어 있습니다.

Scripts 폴더에는 두 개의 하위 폴더인 Class와 CMN이 포함되어 있습니다.

파일 설명

CFCutilities.js 이 파일에는 Adobe ColdFusion 구성 요소와 관련된 여러 유틸리티 함수가 들어 있습니다. 이 함수들은 지정된 노드의 열기 태그 내부에서부터 속성을 파싱하고, CFC 트리를 파싱하고, 현재 URL DOM을 얻고, CFC DOM을 가져오며 기타 여러 작업을 수행합니다.

event.js 이 파일에는 이벤트를 등록하고, menus.xml 파일로부터 많은 이벤트를 알려 주고, 이벤트 알림 장치를 menus.xml 파일에 추가하는 함수가 포함되어 있습니다.

FlashObjects.js 이 파일에는 색상 선택기를 업데이트하고, 16진수 색상을 확인하고, 절대 링크를 확인하고, 파일 이름에 Extension을 추가하고, 오류 메시지를 생성하고, Flash 속성을 설정하고, Flash 객체의 링크를 확인하는 작업 및 기타 여러 작업을 수행하는 함수가 포함되어 있습니다.

insertFireworksHTML.js 이 파일에는 Adobe Fireworks CS3 HTML 코드를 Dreamweaver 문서에 삽입하는 함수가 들어 있습니다. 함수는 현재 문서가 Fireworks 문서인지 확인하고, Fireworks HTML을 삽입 포인터에 삽입하며, Fireworks 스타일 블록을 Dreamweaver에 업데이트하는 등의 기능을 수행합니다. 또한 이 함수에는 관련 유틸리티 함수도 포함되어 있습니다.

jumpMenuUI.js 이 파일에는 점프 메뉴 객체 및 점프 메뉴 비헤이비어와 함께 사용할 함수가 들어 있습니다. 이 함수들은 메뉴 옵션을 채우고, 옵션 레이블을 만들고, 옵션을 추가하고, 옵션을 삭제하는 작업 및 기타 여러 작업을 수행합니다.

keyCodes.js 이 파일에는 키보드 키 코드의 배열이 들어 있습니다.

navBar.js 이 파일에는 내비게이션 막대 및 내비게이션 막대 요소를 사용하는 작업에 사용할 수 있는 클래스 및 함수가 포함되어 있습니다. 또한 이 파일에는 내비게이션 막대 요소를 추가하고, 제거하고, 조작하는 함수도 포함되어 있습니다.

NBInit.js 이 파일에는 내비게이션 막대 이미지 비헤이비어와 관련된 함수가 포함되어 있습니다.

pageEncodings.js 이 파일은 다양한 언어 코드를 정의합니다.

preload.js 이 파일에는 BODY/onLoad MM_preloadImages 핸들러에 대한 미리 로드된 이미지 호출을 추가하고 삭제하는 함수가 포함되어 있습니다.

RecordsetDialogClass.js 이 클래스에는 레코드세트 서버 비헤이비어 UI를 표시하는 정적 클래스 및 함수가 들어 있습니다. 이 함수들은 표시할 인터페이스를 단순하게 할지 정교하게 할지 결정합니다. 또한 여러 UI를 구현할 때 공유될 기능을 저장하고 UI 사이에서 무리없이 사용되도록 중재합니다.

sbUtils.js 이 파일에는 Adobe 서버 비헤이비어에서 사용하는 공유 함수가 들어 있습니다. Configuration/Shared/ Common/Scripts 폴더의 dwscripts 클래스에는 더 많은 범용 유틸리티가 들어 있습니다.

setText.js 이 파일에는 표현식 문자열을 이스케이프 처리하거나 이스케이프 처리를 해제하거나 표현식 문자열을 추출하는 함수가 포함되어 있습니다.

sortTable.js 이 파일에는 배열을 정렬하고, 마우스 포인터를 손모양 아이콘이나 포인터로 설정하고, 브라우저의 형식과 버전을 확인하는 작업뿐만 아니라, 테이블을 초기화하고 정렬하는 함수가 포함되어 있습니다.


318

Class 폴더Class 폴더에는 다음 유틸리티 함수가 포함되어 있습니다.

CMN 폴더CMN 폴더에는 다음 유틸리티 함수가 포함되어 있습니다.

파일 설명

classCheckbox.js 이 파일은 HTML Extension에서 체크 상자 컨트롤을 조작하는 것을 도와 줍니다.

FileClass.js 이 파일에는 파일 시스템의 특정 파일을 나타내는 클래스가 들어 있습니다. 경로는 플랫폼간 호환을 위해 URL 형식으로 표시됩니다. 포함된 메서드에는 toString(), getName(), getSimpleName(), getExtension(), getPath(), setPath(), isAbsolute(), getAbsolutePath(), getParent(), getAbsoluteParent(), exists(), getAttributes(), canRead(), canWrite(), isFile(), isFolder(), listFolder(), createFolder(), getContents(), setContents(), copyTo() 및 remove()가 있습니다.

GridClass.js 이 파일에는 MM:TREECONTROL을 관리하는 클래스가 들어 있습니다.

GridControlClass.js Common 폴더에 있는 GridControlClass의 구버전으로, GridControlClass.js 파일은 Shared/Common/Scripts 폴더에 있습니다.

ImageButtonClass.js Common 폴더에 있는 ImageButtonClass의 구버전으로, ImageButtonClass.js 파일은 Shared/Common/Scripts 폴더에 있습니다.

ListControlClass.js Common 폴더에 있는 ListControlClass의 구버전으로, ListControlClass.js 파일은 Shared/Common/Scripts 폴더에 있습니다.

NameValuePairClass.js 이 파일은 이름/값 쌍의 목록을 만들고 관리합니다. 이름에는 모든 문자가 포함될 수 있습니다. 값은 비어 있을 수 있지만 값 삭제와 동일한 의미를 가지는 null로 설정될 수 없습니다.

PageControlClass.js 이 파일은 TabControl 클래스와 함께 사용될 페이지 클래스의 예입니다. TabControlClass.js 설명을 참조하십시오.

PreferencesClass.js 이 파일에는 명령에 대한 모든 환경 설정 정보가 포함되어 있는 객체 및 메서드가 들어 있습니다.

RadioGroupClass.js Common 폴더에 있는 RadioGroupClass의 구버전으로, RadioGroupClass.js 파일은 Shared/Common/Scripts 폴더에 있습니다.

TabControlClass.js 이 파일은 다중 탭 뷰를 가진 Extension인 page.lastUnload()를 작성하는 것을 도와 줍니다.

파일 설명

dateID.js 이 파일에는 두 함수 createDateID()와 decipherDateID()가 포함되어 있습니다. 세 가지 문자열 "dayFormat", "dateFormat" 및 "timeFormat"이 제공되면 createDateID()는 이 문자열로 ID를 만듭니다. 날짜 배열이 제공되면 decipherDateID()는 dayFormat, dateFormat 및 timeFormat의 세 항목을 가진 배열을 반환합니다.

displayHelp.js 이 파일에는 지정된 [도움말] 문서를 표시하는 함수가 하나 들어 있습니다.

docInfo.js 이 파일에는 사용자의 문서에 대한 정보를 제공하는 함수가 들어 있습니다. 이 함수가 수행하는 작업에는 지정된 브라우저 유형 및 태그에 대한 객체 참조의 배열 반환, 지정된 태그 이름의 모든 인스턴스 반환 및 현재 선택을 둘러싸는 태그 검색 등이 있습니다.

DOM.js 이 파일에는 Dreamweaver DOM을 사용하는 작업에 필요한 일반 보조 함수가 포함되어 있습니다. 활성 문서의 루트 노드를 구하는 함수, 지정된 이름의 태그를 찾는 함수, 특정 시작 노드로부터 노드 목록을 만드는 함수, 지정된 태그가 다른 태그에 포함되어 있는지 여부를 확인하는 함수, 비헤이비어 함수에 다양한 작업을 수행하는 함수 등과 같은 여러 함수가 포함되어 있습니다.

enableControl.js 이 파일에는 SetEnabled()라는 하나의 함수가 포함되어 있습니다. 이 함수는 수신되는 인수에 따라 특정 컨트롤을 사용 가능하게 하거나 사용 불가능하게 합니다. 이미 사용가능한 상태의 컨트롤을 사용가능하도록 지정하거나 이미 사용 불가능한 컨트롤을 사용 불가능하게 지정해도 됩니다.

errmsg.js 이 파일에는 대화 상자에 나타나는 로그 페이지의 배열에 추적 출력을 누적하는 데 사용되는 로그 작성 함수가 포함되어 있습니다.

file.js 이 파일에는 파일 작업과 관련된 함수가 포함되어 있습니다. 이 함수들을 사용하면 로컬 파일 이름을 찾아보고, 상대 경로를 파일 URL 경로로 변환하며, 현재 문서의 파일 이름을 반환하고, 지정된 문서가 현재 사이트에 저장되었는지 확인하여 문서의 상대 경로를 반환하며, 지정된 파일이 현재 열려 있는지 확인하는 작업을 수행할 수 있습니다.


319

기타 폴더다음 목록은 Shared 폴더에서 알아두면 유용한 다른 폴더에 대해 설명합니다.

• Controls

Controls 폴더에는 서버 비헤이비어를 만드는 데 사용되는 요소가 포함되어 있습니다. 이러한 컨트롤은 텍스트 및 레코드세트 메뉴의 인터페이스를 포함합니다.

참고: 이러한 컨트롤은 Dreamweaver 서버 비헤이비어 구성 관리자 및 여러 Dreamweaver 서버 비헤이비어에 의해 사용되지만 일부는 Extension에서 컨트롤을 관리하는 데에도 유용합니다.

• Fireworks

Fireworks 폴더에는 Fireworks를 통합하는 데 필요한 지원 파일이 들어 있습니다.

• UltraDev

Dreamweaver에 이 파일이 존재하는 기본적인 이유는 하위 호환성 때문입니다. 새 Extension에 사용하면 안됩니다. 대신, 이 폴더에 있는 대다수 함수가 들어 있는 Dreamweaver Configuration/Shared/Common 폴더를 사용해야 합니다. 315페이지의 “Common 폴더”를 참조하십시오.

form.js 이 파일에는 현재 문서 또는 AP 요소에 양식이 없는 경우, 지정된 텍스트 문자열 주위에 양식을 추가하는 함수가 들어 있습니다. 여기에는 객체가 AP 요소인지 확인하고 삽입 포인터가 양식 내부에 있는지 확인하는 함수도 포함되어 있습니다.

handler.js 이 파일에는 이벤트 핸들러에 사용하는 함수를 가져오고, 이벤트 핸들러에 함수를 추가하거나 이벤트 핸들러에서 함수를 삭제하는 함수가 들어 있습니다.

helper.js 이 파일에는 인코딩을 교체하고, 인용 부호(")의 이스케이프 처리를 해제하고, 노드가 선택 영역 범위 내에 존재하는지 검사하고, 객체 이름이 중복되는지 확인하는 유용한 함수가 많이 포함되어 있습니다.

insertion.js 이 파일에는 insertIntoDocument() 함수가 포함되어 있습니다. 이 함수는 현재 삽입 포인터 위치에서 텍스트 문자열을 문서에 삽입합니다. 또한 두 개의 지원 함수인 getHigherBlockTag() 및 arrContains()도 포함되어 있습니다. getHigherBlockTag() 함수는 blockTags 배열에 정의되어 있는 다음으로 가장 높은 blockTag를 구하며 arrContains() 함수는 배열에서 지정된 항목을 찾습니다.

localText.js 이 파일에는 예약된 변수가 포함되어 있습니다. 이 변수들은 범용으로 사용할 수 없습니다. 범용 변수로 사용하려면 이 파일 대신, Startup/mminit.htm을 사용하거나 Dreamweaver Configuration/Strings/*.xml 파일에 있는 문자열을 사용합니다.

menuItem.js 이 파일에는 메뉴 항목 목록에 값을 추가하거나 제거하는 함수가 들어 있습니다.

niceName.js 이 파일에는 객체 참조 배열을 보다 단순한 이름 배열로 변환하는 함수가 포함되어 있습니다.

quickString.js 이 파일에는 매번 메모리 할당 작업을 수행하지 않고 더 작은 문자열을 수집하는 함수가 포함되어 있습니다.

string.js 이 파일에는 텍스트 문자열을 조작하고 파싱하는 데 사용되는 일련의 함수가 포함되어 있습니다. 이러한 함수에는 extractArgs(), escQuotes(), unescQuotes(), quoteMeta(), errMsg(), badChars(), getParam(), quote(), stripSpaces(), StripChars(), AllInRange(), reformat(), trim(), createDisplayString(), entityNameEncode(), entityNameDecode(), stripAccelerator() 및 SprintF()가 있습니다.

TemplateUtils.js 이 파일에는 Dreamweaver 템플릿에 사용되는 유틸리티 함수가 들어 있습니다. 편집 가능한 영역을 문서에 삽입, 반복되는 영역을 문서에 삽입, 지정된 편집 가능 영역을 문서에서 검색하는 함수 등이 포함되어 있습니다.

UI.js 이 파일에는 UI를 제어하는 일반 함수가 포함되어 있습니다. 이 함수들은 현재 문서에서 특정 객체를 찾고, 지역화된 문자열로 선택 목록 옵션을 로드하고, 선택된 옵션에 대한 속성 값을 반환하고, 경고에 사용하도록 텍스트 메시지를 줄바꿈합니다.

파일 설명


320

Shared 폴더 사용유용한 Extension 코드가 필요하면 먼저 Dreamweaver의 Configuration/Shared/Common 폴더를 살펴보십시오. 이 폴더에는 가장 최근에 공통으로 사용되는 기능이 포함되어 있습니다.

Shared 폴더의 자원을 이용하여 Extension의 고유한 기능을 만들 수 있습니다. 객체, 명령 또는 기타 Extension은 Shared 폴더에 있는 JavaScript 파일 중 하나를 script 태그의 소스 파일로 지정한 다음, 파일의 본문에 있는 함수나 또 다른 JavaScript 파일에 포함된 함수를 사용할 수 있습니다. 객체와 명령은 여러 개의 JavaScript 파일을 함께 연결할 수 있으며 이러한 JavaScript 파일은 Shared 폴더 자원을 이용할 수 있습니다.

예를 들어, 응용 프로그램 폴더 Configuration/Objects/Common에서 Hypertext 객체 파일(Hyperlink.htm)을 엽니다.이 파일의 head 태그에 다음과 같은 행이 포함되어 있는 것을 볼 수 있습니다.<script language="javascript" src="../../Shared/Common/Scripts/ListControlClass.js"></script>

<script language="javascript" src="Hyperlink.js"></script>

또한 관련된 Hyperlink.js 파일을 열면 다음과 같은 행을 볼 수 있습니다.LIST_LINKS = new ListControl('linkPath');

및

LIST_TARGETS = new ListControl('linkTarget');

new listControl을 선언하여 Hyperlink.js는 두 개의 새로운 ListControl 객체를 정의합니다. 그런 다음, Hyperlink.htm 파일의 코드는 다음과 같이 두 객체를 양식의 SELECT 컨트롤에 첨부합니다.<td align="left"> <input name="linkText" type="text" class="basicTextField" value="">

및

<td align="left" nowrap><select name="linkPath" class="basicTextField" editable="true">

이제, Hyperlink.js 스크립트는 LIST_LINKS 또는 LIST_TARGETS 객체에 대한 메서드를 호출하거나 속성을 얻을 수 있으므로 양식의 SELECT 컨트롤과 상호 작용할 수 있습니다.

321

색인

A

action 태그 123

activate 태그 123

addDynamicSource() 255

alert() 79

analyzeServerBehavior() 214

API, 유형

C 레벨 확장성 301

객체 100

결과 윈도우 165

구성 요소 패널 268

데이터 변환기 282

데이터 서식 지정 260

데이터 소스 255

메뉴 명령 136

명령 116

문제 107

보고서 167

부동 패널 192

비헤이비어 203

서버 모델 276

서버 비헤이비어 214

서버 서식 262

속성 관리자 185

태그 편집기 179

툴바 명령 156

applyBehavior() 203

applyFormat() 262

applyFormatDefinition() 262

applySB() 219

applyServerBehavior() 215

applyTag() 180

appName 속성 83

appVersion 속성 83

arguments 속성 156

array 객체 79

attributes 속성 82

attributes 태그 239

B

beginReporting() 168

behaviorFunction() 204

blockEnd 태그, 코드 색상 표시 40

blockStart 속성

customText 값 49

innerTag 값 50

innerText 값 49

nameTag 값 50

nameTagScript 값 50

outerTag 값 50

설명 49

blockStart 태그, 코드 색상 표시 40

blur() 79

body 속성 81

Boolean 객체 79

brackets 태그, 코드 색상 표시 40

button 객체 79

button 태그 88, 148

C

C 레벨 확장성 API 함수

JS_BooleanToValue() 304

JS_DefineFunction() 302

JS_DoubleToValue() 304

JS_ExecuteScript() 307

JS_GetArrayLength() 306

JS_GetElement() 306

JS_IntegerToValue() 304

JS_NewArrayObject() 305

JS_ObjectToValue() 305

JS_ObjectType() 305

JS_ReportError() 307

JS_SetElement() 306

JS_StringToValue() 304

JS_ValueToBoolean() 303

JS_ValueToDouble() 303

JS_ValueToInteger() 302

JS_ValueToObject() 303

JS_ValueToString() 302

JSNative 301

MM_ConfigFileExists() 309

MM_GetConfigFileAttributes() 310

MM_GetConfigFolderList() 309

MM_OpenConfigFile() 310

C 레벨 확장성, 변환기 282, 300

C 함수

JavaScript에서 호출 313

mm_jsapi.h 파일 300

C 확장성 API 함수

MM_CreateConfigFolder() 312

MM_DeleteConfigFile() 313

MM_RemoveConfigFolder() 312

MM_SetConfigFileAttributes() 311

canAcceptBehavior() 205

canAcceptCommand() 133, 136, 143, 156

canApplyServerBehavior() 215

canDrag 속성 89

canInsertObject() 100

canRecognizeDocument() 276

category 태그 87

charEnd 태그, 코드 색상 표시 41

charEsc 태그, 코드 색상 표시 41

charStart 태그, 코드 색상 표시 41

checkbox 객체 79

checkbutton 태그 88, 148

checked 속성 90, 154

childNodes 속성

comment 객체 83

document 객체 81

tag 객체 82

text 객체 83

clearInterval() 79

clearTimeout() 79

close() 79

closeTag 태그 240

CodeHints.xml 파일

설명 27

포함 내용 27, 28

colorpicker 태그 151

colorRect 속성 154

Colors.xml 파일 38

combobox 태그 150

command 속성 90, 156

commandButtons() 116, 137, 168

comment 객체 83

commentEnd 태그, 코드 색상 표시 41

commentStart 태그, 코드 색상 표시 41

Configuration 폴더 및 Extension 62

configureSettings() 169

confirm() 79

copyServerBehavior() 216

색인 322

cssImport 태그, 코드 색상 표시 42

cssMedia 태그, 코드 색상 표시 42

cssProperty 태그, 코드 색상 표시 42

cssSelector 태그, 코드 색상 표시 42

css-support 태그, 코드 유효성 검사 57

cssValue 태그, 코드 색상 표시 43

customText 값, blockStart 49

D

data 속성

comment 객체 83

text 객체 83

date 객체 79

defaultAttribute 태그, 코드 색상 표시 43

defaultTag 태그, 코드 색상 표시 43

defaultText 태그, 코드 색상 표시 43

delete 태그 235

deleteBehavior() 206

deleteditems 태그 11

deleteDynamicSource() 256

deleteFormat() 263

deleteSB() 219

deleteServerBehavior() 216

deleteType 속성 236

description 태그 32

disabledImage 속성 153

display 태그 240

displayHelp()

객체 API에서 101

객체 파일 101

데이터 소스 API에서 256

부동 패널 API 192

비헤이비어 API 206

서버 비헤이비어 API에서 216

속성 관리자 API 186

DOCTYPE 문 68

document 객체

DOM 레벨 1 속성 및 메서드 81

Netscape DOM 속성 및 메서드 79

document 노드 81

documentEdited() 192

documentElement 속성 81

DOM. 문서 객체 모델 참조

domRequired 속성 154

Dreamweaver DOM 79

dreamweaver 객체 83, 84

dropdown 태그 150

dwscripts 함수

applySB() 219

deleteSB() 219

findSBs() 218

E

editcontrol 태그 151

editDynamicSource() 257

EDML 파일

EDML 구조 221

그룹 파일 태그 221

일반 표현식 사용 220

정보 210, 211

편집 220

EDML 파일 태그

attributes 239

closeTag 240

delete 235

deleteType 속성 236

display 240

group 221, 222

groupParticipant 225

groupParticipants 224

insertText 227, 228

isOptional 속성 233

limitSearch 속성 232, 238

location 속성 228

name 속성 225

nodeParamName 속성 229

openTag 239

paramName 속성 235

paramNames 속성 232

participant 226

partType 속성 225

quickSearch 227

searchPatterns 230, 237

selectParticipant 속성 224

subType 속성 223

title 224

translation 237

translations 237

translationType 속성 238

translator 236

updatePattern 234, 235

updatePatterns 234

version 속성 226

whereToSearch 속성 237

EDML 파일의 일반 표현식 220

element 노드 82

enabled 속성 89, 154

endOfLineComment 태그,코드 색상 표시 44

endReporting() 168

entity 태그, 코드 색상 표시 44

escape() 79

Extension

Dreamweaver 60

Dreamweaver의 JavaScript 처리 방법 64

Shared 폴더 내용 315

가능한 기능 60

도움말 표시 65

새로 고침 63

색상 버튼 컨트롤 75

설치 1

지역화 65

Extension Data Markup Language(EDML) 211

Extension Manager

작업 66

지침 67

Extension 사용자 인터페이스 67

Extension 새로 고치기 63

Extension 새로 고침 63

Extension 설치 1

Extension, 새로 고침 63

Extensions.txt 파일 17

F

file(필드) 객체 79

findDynamicSources() 257

findIssue() 107

findSBs() 218

findServerBehaviors() 217

Flash SWF 파일, Dreamweaver에 표시 76

focus() 79

form 객체 79

formatDynamicDataRef() 263

Formats.xml 파일 260

FTP 매핑, 변경 12

function 객체 79

function 태그 34

functionKeyword 태그, 코드 색상 표시 44

색인 323

G

generateDynamicDataRef() 258

generateDynamicSourceBindings() 258

getAffectedBrowserDisplayNames() 108

getAffectedBrowserProfiles() 108

getAttribute() 82

getCodeViewDropCode() 269

getComponentChildren() 268

getContextMenuId() 268

getCurrentValue() 144, 157

getDockingSide() 193

getDynamicContent() 137, 158

getElementsByAttributeName 속성 81, 82

getElementsByTagName()

document 객체 81

tag 객체 82

getFileExtensions() 277

getIssueID() 108

getIssueName() 109

getLanguageSignatures() 277

getMenuID() 158

getServerExtension() 278

getServerInfo() 278

getServerLanguages() 279

getServerModelDelimiters() 279

getServerModelDisplayName() 280

getServerModelExtDataNameUD4()279

getServerModelFolderName() 280

getServerSupportsCharset() 280

getSetupSteps() 270

getTranslatedAttribute() 82

getTranslatorInfo() 295

getUpdateFrequency() 159

getVersionArray() 281

groupParticipant 태그 225

groupParticipants 태그 224

H

handleDesignViewDrop() 272

handleDoubleClick() 273

hasChildNodes()

comment 객체 83

document 객체 81

tag 객체 82

text 객체 83

hasTranslatedAttributes() 82

havePreviewTarget() 133

hidden(필드) 객체 79

hline 181

HTML

기본 서식, 변경 59

내부/외부 속성 82

I

id 속성 88, 152

idChar1 태그, 코드 색상 표시 44

idCharRest 태그, 코드 색상 표시 45

identifyBehaviorArguments() 206

ignoreCase 태그, 코드 색상 표시 45

ignoreMMTParams 태그, 코드 색상 표시 45

ignoreTags 태그, 코드 색상 표시 45

image 객체 79

image 속성 89, 152

include/ 태그 146

initialPosition() 193

initialTabs() 194

innerHTML 속성 82

innerTag 값, blockStart 50

innerText 값, blockStart 49

insertbar 태그 86

insertbar.xml 파일 85, 92

insertObject() 102

insertText 태그 227, 228

inspectBehavior() 208

inspectDynamicDataRef() 259

inspectFormatDefinition() 264

inspectServerBehavior() 217

inspectTag() 179

isATarget() 194

isAvailableInCodeView() 195

isCommandChecked() 138, 160

isdomrequired 속성 121

isDOMRequired() 101, 117, 161

isLocked 태그, 코드 색상 표시 46

isOptional 속성 233

isResizable() 195

item 태그 11

item() 79

itemref/ 태그 147

itemtype/ 태그 146

J

JavaScript

URL 64

외부 파일 64

컨트롤 69

JavaScript 인터프리터

C 레벨 확장성 300

데이터 유형 301

javascript 코드 힌트 28

JS_BooleanToValue() 304

JS_DefineFunction() 302

JS_DoubleToValue() 304

JS_ExecuteScript() 307

JS_GetArrayLength() 306

JS_GetElement() 306

JS_IntegerToValue() 304

JS_NewArrayObject() 305

JS_ObjectToValue() 305

JS_ObjectType() 305

JS_ReportError() 307

JS_SetElement() 306

JS_StringToValue() 304

JS_ValueToBoolean() 303

JS_ValueToDouble() 303

JS_ValueToInteger() 302

JS_ValueToObject() 303

JS_ValueToString() 302

JSBool 부울 값 301

JSContext 데이터 유형 301

JSNative 301

JSObject 데이터 유형 301

jsval 301

K

keyword 태그, 코드 색상 표시 46

keywords 태그, 코드 색상 표시 46

L

label 속성 153

layer 객체 79

limitSearch 속성 232, 238

liveDataTranslateMarkup() 298

location 속성 228

*LOCKED* 키워드 285

색인 324

M

match 객체 79

menu 태그 33, 119

menu_ID 속성 153

menubar 태그 119

menubutton 태그 87, 149

menugroup 태그 32

menuitem 태그 33, 120

menus.xml 파일

action 태그 123

activate 태그 123

menu 태그 119

menubar 태그 119

menuitem 태그 120

override 태그 124

separator 태그 121

shortcutlist 태그 121

tool 태그 122

단축키 태그 122

변경 124

정보 118

method 태그 35

MM:TREECOLUMN 태그 73

MM:TREENODE 태그 73

MM_ConfigFileExists() 309

MM_CreateConfigFolder() 312

MM_DeleteConfigFile() 313

mm_deleted_files.xml 파일

deleteditems 태그 11

item 태그 11

정보 11

태그 구문 11

MM_GetConfigFileAttributes() 310

MM_GetConfigFolderList() 309

mm_jsapi.h 파일

샘플 313

포함 300

MM_OpenConfigFile() 310

MM_RemoveConfigFolder() 312

MM_returnValue 199

MM_SetConfigFileAttributes() 311

MMDocumentTypes.xml 파일 13

N

name 속성 90, 225

nameTag 값, blockStart 50

nameTagScript 값, blockStart 50

navigator 객체 79

nextSibling 속성 79, 81, 82, 83

Node.COMMENT_NODE 79

Node.DOCUMENT_NODE 79

Node.ELEMENT_NODE 79

Node.TEXT_NODE 79

nodelist 객체 79

nodeParamName 속성 229

nodeType 속성

comment 객체 83

document 객체 81

tag 객체 82

text 객체 83

number 객체 79

numbers 태그, 코드 색상 표시 46

O

object 객체 79

objectTag() 103

onBlur 이벤트 79

onChange 이벤트 79

onClick 이벤트 79

onFocus 이벤트 79

onLoad 이벤트 79

onMouseOver 이벤트 79

onResize 이벤트 79

openTag 속성 239

operators 태그, 코드 색상 표시 47

option 객체 79

optionparammenu 태그 36

outerHTML 속성 82

outerTag 값, blockStart 50

overImage 속성 153

override 태그 124

P

panelset 태그 20

parammenu 태그 35

paramName 속성 235

paramNames 속성 232

parentNode 속성

comment 객체 83

document 객체 81

tag 객체 82

text 객체 83

parentWindow 속성 81

participant 태그 226

partType 속성 225

password(필드) 객체 79

pasteServerBehavior() 218

previousSibling 속성 79, 81, 82, 83

processFile() 167

property 태그

정보 37

코드 유효성 검사 58

Q

quickSearch 태그 227, 241

R

radio 객체 79

radiobutton 태그 149

receiveArguments() 117, 135, 138, 143, 161

regexp 객체 79

regexp 태그, 코드 색상 표시 47

removeAttribute() 82

reset 객체 79

resizeTo() 79

S

sampleText 태그, 코드 색상 표시 47

scheme 블록 구분 문자 색상 표시 49

scheme 태그, 코드 색상 표시 39

searchPattern 태그, 코드 색상 표시 48

searchPatterns 태그 230, 237

select 객체 79

select() 79

selectionChanged() 189, 195

selectParticipant 속성 224

separator 태그 88, 121, 147

setAttribute() 82

setInterval() 79

setMenuText() 139

setTimeout() 79, 196

setupStepsCompleted() 271

Shared 폴더

Common 폴더 내용 315

기타 폴더 319

내용 315

Share-in-memory 246

shortcutlist 태그 121

showIf 속성 89, 152

showIf() 162

Shutdown 폴더 63

site 객체, 속성 83

Spry 프레임워크, 코드 힌트 27

색인 325

Startup 폴더 63

string 객체 79

stringEnd 태그, 코드 색상 표시 48

stringEsc 태그, 코드 색상 표시 48

stringStart 태그, 코드 색상 표시 48

submit 객체 79

subType 속성 223

systemScript 속성 84

T

tag 객체 82

tagGroup 태그, 코드 색상 표시 49

tagName 속성 82

tagspec 태그 7

text 객체 83

text 노드 83

text(필드) 객체 79

textarea 객체 79

title 태그 224

tool 태그 122

toolbar 태그 145

toolbarControls() 274

toolbars.xml 파일 141, 144

tooltip 속성 153

translateDOM() 296

translateMarkup() 297

translation 태그 237

translations 태그 237

translationType 속성 238

translator 태그 236

TREECOLUMN 태그 73

TREENODE 태그 73

U

unescape() 79

update 속성 155

updatePattern 태그 234, 235

updatePatterns 태그 234

updateScript() 191

URL 속성 81

V

validateTag() 179

value 속성 155

value 태그, 코드 유효성 검사 58

VBScript 198

version 속성 226

vline 181

W

W3C 79

whereToSearch 속성 237

width 속성 153

window 객체 79

window.close() 79

windowDimensions()

객체 API에서 103

메뉴 명령 139

명령 API에서 117

보고서 API에서 169

비헤이비어 액션 209

X

XML

구조 221

트리 뷰 79

XML 태그

codehints 31

툴바 145

XML 파일

CodeHints.xml 27

Formats.xml 260

insertbar.xml 92

menus.xml 118

MMDocumentTypes.xml 13

SpryCodeHints.xml 28

toolbars.xml 141

문자열 65

정보 79

ㄱ

객체

Flash SWF 파일 추가 76

구성 요소 85

만들기 85

삽입 막대에 추가 92

파일 작동 방식 92

객체 API 함수

canInsertObject() 100

displayHelp() 101

insertObject() 102

isDOMRequired() 101

objectTag() 103

windowDimensions() 103

검색 패턴 분석 244

결과 윈도우 API 165

관리자 Extension, 정보 61

구성 요소 Extension, 정보 61

구성 요소 패널

트리 조절 267

파일 266

확장 265

구성 요소 패널 API 함수

getCodeViewDropCode() 269

getComponentChildren() 268

getContextMenuId() 268

getSetupSteps() 270

handleDesignViewDrop() 272

handleDoubleClick() 273

setupStepsCompleted() 271

toolbarControls() 274

규칙, 이 설명서 3

그룹 파일

서버 비헤이비어 211

그룹 파일 태그 221

기본 문서, 사용자 정의 4

기본 파일 유형 바꾸기 5

ㄴ

노드

DOM 트리 구조 78

정보 79

트리 컨트롤 79

노드 상수 79

ㄷ

다중 사용자 구성

구성 파일 삭제 11

사용자 정의 10

재설치 및 설치 제거 12

폴더 63, 307

다중 사용자 구성에서 설치 제거 12

다중 사용자 플랫폼, Configuration 폴더 17, 307

단축키 태그 122

대상 브라우저, 코드 유효성 검사 57

대화 상자 모양 5

대화 상자, 모양 사용자 정의 5

데이터 변환기

디버깅 287

사용자 경험 282

속성 283

종류 283

태그 또는 코드 블록 284

색인 326

데이터 변환기 API 함수

getTranslatorInfo() 295

liveDataTranslateMarkup() 298

translateDOM() 296

translateMarkup() 297

데이터 변환기 Extension, 정보 61

데이터 서식 지정

정보 260

함수 호출 261

데이터 소스 247

데이터 소스 API 함수

addDynamicSource() 255

deleteDynamicSource() 256

displayHelp() 256

editDynamicSource() 257

findDynamicSources() 257

generateDynamicDataRef() 258

generateDynamicSourceBindings()258

inspectDynamicDataRef() 259

정보 247

데이터 소스 Extension

ColdFusion 문서 249

정보 61

데이터베이스 컨트롤 71, 72

도움말 표시 65

독립적 보고서 165

동적 데이터 대화 상자 247

동적 메뉴


샘플 코드 131

동적 텍스트 대화 상자 247

동적 템플릿 16

ㅁ

매핑 파일, 키보드 단축키 24

메뉴

명령 127

변경 4, 124

정보 61

팝업 및 컨텍스트 수정 126

메뉴 명령

Extension, 정보 60


샘플 코드 129

정보 127

메뉴 명령 API 함수

canAcceptCommand() 136

commandButtons() 137

getDynamicContent() 137

isCommandChecked() 138

receiveArguments() 138

setMenuText() 139


메뉴 폴더, 명령 파일 놓기 131

명령

Flash SWF 파일 추가 76

메뉴 명령 118

메뉴에 추가 110


샘플 코드 111

툴바 142

명령 API 함수



isDOMRequired() 117



명령 Extension, 정보 60

명령 메뉴, 수정 127

문서 객체 모델

DOM 레벨 1 사양 79

Dreamweaver 79

정보 78

트리 구조 78

문서 열기 19

문서 유형

Extension 17

동적 템플릿 16

열기, 프로시저 19

정보 61

정의 파일 13, 14

정의 파일, 규칙 19

정의 파일의 태그 15

지역화 14, 18

확장 가능 13

문서 확장명 17

문서, 열기 19

문자열 파일 65

문자열, 지역화 가능 66

문제 API 107

ㅂ

바인딩 관리자 247

변수 표 컨트롤 72

변환기

디버깅 287

블록/태그 284

속성 283

변환된 속성

multiple 283

개별적 283

관리 284

태그에서 찾기 82

변환된 태그, 관리 285

보고서

독립적 165

사이트 163

보고서 API 함수

beginReporting() 168


configureSettings() 169

endReporting() 168

processfile() 167


독립적 보고서 165

보고서 Extension, 정보 60

보조 함수, 비헤이비어 199

부동 패널



성능 문제 196

예제 188

부동 패널 API 함수

displayHelp() 192

documentEdited() 192

getDockingSide() 193

initialPosition() 193

initialTabs() 194

isATarget() 194

isAvailableInCodeView() 195

isResizable() 195

selectionChanged() 189, 195

브라우저 프로파일

css-support 태그 57

property 태그 58

value 태그 58

색인 327

브라우저 호환성 검색 105

브라우저 호환성 확인 문제 API 105

브라우저 호환성, 검색 105

블록 태그 211

블록/태그 변환기

디버깅 287

샘플 코드 291

정보 283

비헤이비어

API 203

보조 함수 199


샘플 코드 199

여러 함수 삽입 199

필수 함수 203

비헤이비어 API 함수

applyBehavior() 203

behaviorFunction() 204

canAcceptBehavior() 205

deleteBehavior() 206

displayHelp() 206

identifyBehaviorArguments() 206

inspectBehavior() 208


비헤이비어 Extension, 정보 61

ㅅ

사용자 정의

Dreamweaver 1

구성 요소 패널 266

구성 파일 편집 4

기본 문서 4

다중 사용자 환경 10

대화 상자 모양 5

메뉴 4

삽입 막대 4

작업 영역 레이아웃 19

타사 태그 4

타사 태그 해석 6

페이지 디자인 5

사용자 정의 JavaScript 컨트롤 69

사이트 보고서

워크플로 163

정보 163

삽입 막대

객체 추가 92

객체 파일 85

수정 4

정의 파일 86

삽입 막대 객체


순서 재지정 91

예제 93

색상 버튼 컨트롤 75

서버 모델


정보 276

서버 모델 API 함수

canRecognizeDocument() 276

getFileExtensions() 277

getLanguageSignatures() 277

getServerExtension() 278

getServerInfo() 278

getServerLanguages() 279

getServerModelDelimiters() 279

getServerModelDisplayName() 280

getServerModelExtDataNameUD4() 279

getServerModelFolderName() 280

getServerSupportsCharset() 280

getVersionArray() 281

정보 276

서버 비헤이비어

dwscripts 함수 218

Extension 210


개요 210

검색 패턴 분석 244

그룹 파일 211

기술 241

런타임 코드 210

삭제 245

업데이트 244

예제 212

인스턴스 210

참여자 210

참여자 파일 211

찾기 241

서버 비헤이비어 API 함수

analyzeServerBehavior() 214

applyServerBehavior() 215

canApplyServerBehavior() 215

copyServerBehavior() 216

deleteServerBehavior() 216

displayHelp() 216

findServerBehaviors() 217

inspectServerBehavior() 217

pasteServerBehavior() 218

서버 서식 API 함수

applyFormat() 262

applyFormatDefinition() 262

deleteFormat() 263

formatDynamicDataRef() 263

inspectFormatDefinition() 264

서비스 구성 요소, 추가 267

서식 260

서식 목록 편집 플러스(+) 팝업 메뉴 261

선택, 정확히 대 내부 181

속성

arguments 156

checked 90, 154

colorRect 154

command 90, 156

disabledImage 153

domRequired 154

enabled 89, 154

file 90

id 88, 152

image 89, 152

label 153

menu_ID 153

overImage 153

showIf) 152

tooltip 153

update 155

value 155

width 153

툴바 항목 태그 152

파일 154

속성 관리자

*LOCKED* 키워드 285

개요 181

번개 모양의 아이콘 284

변환된 속성 284


사용자 정의 181

샘플 코드 182

잠긴 내용에 대한 285

파일 구조 181

파일 맨 위의 주석 181

속성 관리자 API 함수

canInspectSelection() 185

displayHelp() 186

inspectSelection() 186

색인 328

속성 변환기

디버깅 287

만들기 283

샘플 코드 288

정보 283

스크립트 편집기 Extension

JavaScript 코드 189

부동 패널 188

스크립트 표시기 아이콘 195

시작 명령 63

ㅇ

액션 파일 198

언어 정보 83

예제

간단한 툴바 142

독립적 보고서 Extension 166

동적 메뉴 131

명령 메뉴의 Extension 111

문제 105

부동 패널 188

비헤이비어 Extension 199

사이트 보고서 164

속성 변환기 288

태그 편집기 175

외부 JavaScript 파일 64

운영 체제, 사용자 84

이벤트

Extension 파일 79

비헤이비어에서의 역할 198

이벤트 핸들러

Extension 파일 64

값 반환 199

비헤이비어 대화 상자 198

인수

menuitem 태그에서 전달 128


ㅈ

작업 영역

레이아웃, 사용자 정의 19

정보 141

잠긴 내용, 관리 285

재설치, 다중 사용자 구성 12

정의 파일, 문서 유형 13

종료 명령 63

지역화 65

지역화 문자열 14

ㅊ

참여자 파일 211

참여자, 서버 비헤이비어 210

체계 처리

와일드카드 문자 51

우선 순위 52

이스케이프 문자 52

최대 문자열 길이 52

코드 색상 표시 51

ㅋ

코드 단편 Extension, 정보 61

코드 색상 표시

blockEnd 태그 40

blockStart 태그 40

brackets 태그 40

charEnd 태그 41

charEsc 태그 41

charStart 태그 41

commentEnd 태그 41

commentStart 태그 41

CSS 샘플 텍스트 55

cssImport 태그 42

cssMedia 태그 42

cssProperty 태그 42

cssSelector 태그 42

cssValue 태그 43

defaultAttribute 태그 43

defaultTag 태그 43

defaultText 태그 43

endOfLineComment 태그 44

entity 태그 44

functionKeyword 태그 44

idChar1 태그 44

idCharRest 태그 45

ignoreCase 태그 45

ignoreMMTParams 태그 45

ignoreTags 태그 45

isLocked 태그 46

JavaScript 55

keyword 태그 46

keywords 태그 46

numbers 태그 46

operators 태그 47

regexp 태그 47

sampleText 태그 47

scheme 태그 39

searchPattern 태그 48

stringEnd 태그 48

stringEsc 태그 48

stringStart 태그 48

tagGroup 태그 49

스타일, Colors.xml 파일 38

예제 54

정보 37

체계 처리 51

체계 편집 53

파일 38

코드 유효성 검사 57

코드 힌트

codehints 태그 31

description 태그 32

function 태그 34

javascript 28

menu 태그 33

menugroup 태그 32

menuitem 태그 33

method 태그 35

optionparammenu 태그 36

parammenu 태그 35

property 태그 37

정보 27, 61

클래스 선언 30

키보드 단축키

매핑 파일 24

변경 125

ㅌ

타사 태그

tagspec 7

강조 표시 색상 바꾸기 9

다시 작성 금지 9

표시 방법 변경 4

해석 사용자 정의 6

태그 대화 상자 Extension, 정보 60

태그 라이브러리 171

태그 선택기 174

태그 속성 90

태그 편집기

만들기 175, 179

예제 175

태그 편집기 API 함수

applyTag() 180

inspectTag() 179

validateTag() 179

색인 329

툴바

button 태그 148

checkbutton 태그 148

colorpicker 태그 151

combobox 태그 150

dropdown 태그 150

editcontrol 태그 151

include/ 태그 146

itemref/ 태그 147

itemtype/ 태그 146

menubutton 태그 149

radiobutton 태그 149

separator 태그 147

toolbar 태그 145

toolbars.xml 파일 141

간단한 명령 파일 142

결합 142

만들기 141

명령 API 156

명령 비헤이비어 142

비헤이비어 141

컨트롤 141

태그 속성 145, 152

파일 정의 144

항목 태그 148

툴바 Extension, 정보 60

툴바 결합 142

툴바 명령 API 함수


getCurrentValue() 157

getDynamicContent() 158

getMenuID() 158

getUpdateFrequency() 159

isCommandChecked() 160

isDOMRequired() 161


showIf() 162

트리 뷰, XML 79

트리 컨트롤

내용 조작 75

만들기 73

정보 71

추가 72

트리 컨트롤 내용 조작 75

ㅍ

파일

CodeHints.xml 27

insertbar.xml 92

menus.xml 118

mm_deleted_files.xml 11

MMDocumentTypes.xml 13

SpryCodeHints.xml 28

toolbars.xml 141

XML 79

문자열 XML 65

파일 속성 90, 154

파일 유형, 기본 바꾸기 5

패널 Extension, 정보 61

페이지 디자인 5

편집

메뉴 항목 124

체계, 코드 색상 표시 53

포함된 값, 지역화 가능 문자열 66

ㅎ

함수, 사용되지 않음 2

항목 태그, 툴바 148

호환성 확인, 브라우저 105

확장 API, 유형 60

확장 가능한 문서 유형 13

Extending Dreamweaver - Adobe Inc. · Sorenson™ Spark™ 비디오 압축 및 압축 해제 ......

Documents

Transcript of Extending Dreamweaver - Adobe Inc. · Sorenson™ Spark™ 비디오 압축 및 압축 해제 ......