소개

이번 강좌는 지난 시간에 이어서 간단한 갤러리를 만드는데, 출력 모양을 결정 지을 부분에 대해서 XSLT를 사용하여 UI를 꾸며보도록 하겠습니다.

 

절차

1. [Gallery] 페이지를 클릭하면 아래 그림과 같이 2개의 이미지가 업로드 된 상태입니다. 이 2개의 이미지를 웹 브라우저로 실행했을 때 웹 페이지로 보여질 수 있도록 꾸며 보겠습니다.

062511_0840_23Gall1.png

 

2. [Developer] 섹션-[XSLT 파일]에 마우스 오른쪽 버튼을 클릭하여 [생성] 메뉴를 클릭하여 XSLT 생성 창을 띄웁니다.

062511_0840_23Gall2.png

 

3. XLST 생성 창에서 [lstPhotos]란 이름으로 XSLT를 만드는 데 처음부터 만드는 것이 아닌 Umbraco에서 미리 정의된 XSLT 템플릿 중에서 [List Sub Pages From Current Page] 항목을 선택한 후 [생성] 버튼을 클릭하여 XSLT 파일을 생성합니다.

062511_0840_23Gall3.png

 

4. [lstPhotos.xslt] 파일이 생성된 모습입니다. 현재는 따로 소스를 건드릴 필요가 없으므로 그대로 두고 저장합니다.

062511_0840_23Gall4.png

 

5. [백오피스]-[Settings]-[템플릿]-[Gallery]를 선택한 후 아래 그림과 같이 매크로가 출력될 영역을 지정한 후 앞서 만든 [lstPhotos] 매크로를 템플릿에 등록합니다.

062511_0840_23Gall5.png

아래 코드는 위에서의 편집기 내의 코드를 예시로 보여줍니다.

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">

    <umbraco:Macro Alias="LstPhotos" runat="server"></umbraco:Macro>

</asp:Content>

 

6. [Gallery] 콘텐트 페이지를 웹 브라우저로 실행하면, 위에서 지정한 XSLT 형태대로 UI가 출력됩니다. 아래 그림에서 단순한 텍스트가 아닌 이미지로 보여주고자 한다면 다음 단계로 계속 진행하면 됩니다.

062511_0840_23Gall6.png062511_0840_23Gall6.png

 

7. 앞서 생성한 [lstPhotos.xslt] 파일을 열고 아래 그림과 같이 Yellow 박스 부분을 수정한 후 XSLT 파일을 저장합니다.

062511_0840_23Gall7.png

아래 코드는 위의 편집기의 수정된 내용을 예시로 보여줍니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>

<xsl:stylesheet 

    version="1.0" 

    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 

    xmlns:msxml="urn:schemas-microsoft-com:xslt" 

    xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 

    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- The fun starts here -->         

<div class="pikachoose">
 
<ul id="pikame" >

<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">

    <li>         

        <a href="{umbraco.library:NiceUrl("@id)}">

            <img src="{uploadPhoto}" alt="{@nodeName}" width="500" height="250" />

        </a>

        <span><xsl:value-of select="@nodeName"/></span>

    </li>

</xsl:for-each>

</ul>       

 

</div>       

</xsl:template>       

</xsl:stylesheet>

 

8. 다시 [Gallyer] 페이지를 웹 브라우저로 실행하면 아래 그림처럼 이미지와 텍스트가 함께 리스트로 출력됨을 확인할 수 있습니다.

062511_0840_23Gall8.png

 

 

마무리

Umbraco CMS의 강점 중 하나는 XML과 XSLT를 사용하여 웹 페이지를 보여주는 부분에 있습니다. 따로 ASP.NET 웹 사용자 정의 컨트롤을 알지 못하더라도 업계 표준인 XML 코드를 사용하여 손쉽게 웹 페이지를 꾸밀 수가 있기 때문입니다.

다음 시간은 위 갤러리를 단순히 리스트로 출력하는 게 아닌 jQuery 플러그인을 사용하여 슬라이드쇼로 표현할 수 있도록 기능을 업그레이드 하도록 하겠습니다.

 

끝.




관련글



관련 동영상 참고 자료

  1. Umbraco 개발 환경 구축
  2. Umbraco 설치
  3. 사용자 모드와 관리자 모드(백오피스)
  4. 새로운 페이지(Page) 만들기
  5. 한글 언어팩(Languages) 적용하기
  6. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
  7. 미디어 파일 관리
  8. 사용자(User) 관리
  9. 스타일 추가 및 변경
  10. 템플릿(Templates)과 마스터페이지(MasterPages)
  11. Umbraco 페이지 필드(태그(Tags))
  12. 문서 타입(Document Types)
  13. 문서 타입(Document Types)에 속성 추가
  14. 부모 문서 타입(Document Types) 사용하기
  15. 문서 타입(Document Types) 내보내기 및 가져오기
  16. 문서 타입(Document Types) 자식 노드 허용
  17. 기본 매크로(Macros) 사용하기
  18. 새로운 매크로(Macro) 만들기
  19. 매크로(Macro)에 파라미터 전달
  20. 사진 갤러리(Gallery) 만들기 1
  21. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기
  22. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용
  23. 회원(Members) 관리
  24. 사전(Dictionaries)
  25. 패키지(Packages)
  26. HTML 레벨의 스킨 파일 적용 1
  27. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴
  28. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵
  29. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀
  30. 배포 : Umbraco CMS를 원격 서버에서 실행




profile

박용준(redplus at redplus.net)
.NET 개발/강의 프리랜서, MVP, MCT
데브렉(http://www.devlec.com) 전임 강사
닷넷코리아(http://www.dotnetkorea.com) 사이트 운영