다음을 통해 공유

[Umbraco 강좌] 21. 매크로(Macro)에 파라미터 전달

  • 아티클

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 강좌는 지난 번 강좌에 이어지는 내용입니다.

사용자가 새롭게 매크로를 만들어서 Umbraco CMS에 등록 후 사용하는 방법에 대해서 설명을 하였습니다 이에 덧붙여 Umbraco에서 매크로에 추가적인 매개변수(파라미터)를 전달하는 방법에 대한 내용을 이번 시간에 다루고자 합니다.

따라하기

Step 1: 매크로 적용하기

1. [MacroTest] 템플릿의 하단에 [MyMacro] 매크로를 등록하였습니다. 이 때 주의할 점 중의 하나는 웹 폼 기반으로 만들어진 ASCX파일은 반드시 ASP.NET form 태그로 묶어져 있어야 합니다. 따라서 아래 그림의 상단과 하단에 form 태그로 묶어 준 점을 추가로 확인하기바랍니다.

062411_1552_21Macro1.png

2. [매크로 삽입] 페이지를 웹 브라우저로 출력했을 때의 모습입니다. 하단의 매크로가 정의된 영역이 보이고, 텍스트박스에 값을 입력한 후 버튼을 클릭하면 정상적으로 기능을 수행함을 알 수 있습니다.

062411_1552_21Macro2.png

Step 2: 매크로에 속성 추가하기

1. 매크로에서 사용할 파라미터를 전달하기 위해서는 매크로 소스로 이동해서 추가적인 속성(Property)을 추가해야 합니다. 아래 그림은 Visual Studio 2010에서 [MyMaro.ascx] 파일을 열고 [DefaultText] 속성을 추가한 후 페이지 처음 로드 시 레이블에 이 속성의 값이 출력되도록 한 것입니다.

062411_1552_21Macro3.png

2. [MyMacro] 웹 프로젝트를 다시 빌드한 후 [MyMacro.ascx] 파일과 DLL/PDB 파일을 모두 앞선 강좌에서 한 것처럼, 다시 Umbraco CMS쪽으로 덮어쓰기 해서 새 속성이 추가된 상태를 유지합니다.

Step 3: 매크로에 파라미터 전달

1. [MyMacro] 관리 페이지로 이동한 후 아래 그림의 [Browse properties] 버튼을 클릭합니다.

062411_1552_21Macro4.png

2. [MyMacro]에 등록된 속성(Property)가 노출됩니다. [DefaultText]란 이름으로 하나만 추가했기에 아래 그림과 같이 하나의 목록만 나타난 후 이를 체크한 후 [Save Properties] 버튼을 클릭합니다.

062411_1552_21Macro5.png

3. [Default Text] 속성이 추가됨을 확인 후 창을 닫습니다.

062411_1552_21Macro6.png

4. [MyMacro] 관리 페이지의 [Parameters] 탭을 클릭하면 아래와 같이 DefaultText 속성이 추가됨을 확인할 수 있습니다.

062411_1552_21Macro7.png

Step 4: 템플릿에 파라미터가 추가된 매크로 적용하기

1. [MacroTest] 템플릿 편집 페이지로 이동합니다. 메인 에디터에서 매크로가 등록될 지점에 마우스 캐럿을 올려두고, 매크로 삽입 아이콘을 클릭하여 [MyMacro] 매크로를 선택한 후 [OK] 버튼을 클릭합니다.

062411_1552_21Macro8.png

2. 아래 그림은 앞서 등록한 Default Text 속성이 매크로에서 추가로 값을 입력 받는 텍스트박스로 표현되는 모습입니다. 간단히 값을 입력한 후 [완료] 버튼을 클릭합니다. (만약, [완료] 버튼을 클릭하였는데 반응이 없으면 수작업으로 3번 순서를 진행하면 됩니다.);

062411_1552_21Macro9.png

3. 아래 그림은 DefaultText 속성이 추가된 매크로가 삽입된 모습입니다.

062411_1552_21Macro10.png

Step 5: 웹 브라우저에서 테스트

1. [매크로삽입] 페이지를 웹 브라우저로 실행합니다. 아래 그림과 같이 레이블 영역에 기본으로 제공한 텍스트 값이 출력됨을 알 수 있습니다.

062411_1552_21Macro11.png

2. 텍스트박스에 값을 입력 후 테스트해보면 이 역시 정상적으로 테스트가 됩니다.

062411_1552_21Macro12.png

마무리

만약, 한 개 이상의 파라미터를 웹 사용자 정의 컨트롤에 등록한 후에 사용해도 동일한 결과를 나타냅니다. 이처럼, Umbraco는 단순히 특정 읽기전용 매크로가 아닌 매개변수의 값을 전달해서 동적으로 그에 해당하는 결과값을 출력하도록 설정하는 유용한 기능을 제공합니다.

이 글을 읽는 독자가 개발자라면 이러한 매크로를 활용하여 기존 Umbraco CMS에서 사용할 수 있는 재 사용 가능한 모듈을 얼마든지 만들어 낼 수 있습니다.

끝.

관련글