オープンソースプロジェクト XpressEngineとは? コンテンツの生産と発行を支援するCMSです。
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷
コンポーネント

Skin

by XEJapan posted Nov 22, 2015
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷

스킨

개요

모듈이나 위젯에서 컨텐츠를 생성하면 그 컨텐츠를 화면에 출력하기 위해 html 형식으로 변환해야 합니다. 스킨은 이렇게 데이터를 html로 변환하는 역할을 합니다. 모듈이나 위젯과 같은 컨트롤러가 생성한 컨텐츠를 지정된 스킨에게 전달하면 스킨은 전달받은 데이터를 html 템플릿에 적용한 다음 html를 반환합니다 또 필요한 css 파일이나 js 파일을 로드할 수도 있습니다.

목적

스킨을 사용하는 가장 큰 목적은 컨텐츠를 표현(뷰)하는 역할을 컨텐츠를 생성하는 기능(컨트롤러)과 분리하고, '컨텐츠의 표현'을 교체가 가능하도록 하기 위함입니다. 만약 동일한 컨텐츠를 다르게 표현하고 싶을 경우, 컨트롤러의 코드를 변경하지 않고 지정된 스킨을 교체하면 됩니다.

구성

스킨은 누구나 제작하여 XE에 추가할 수 있습니다. 플러그인을 만들고 스킨을 플러그인을 통해 XE에 등록하십시오. 스킨을 제작하려면 우선 \Xpressengine\Skin\AbstractSkin를 상속받는 스킨 클래스를 생성하고, 클래스에서 필요로 하는 메소드와 프로퍼티를 작성하십시오.

아래 코드는 게시판모듈을 타겟으로 하는 스킨을 정의한 예입니다.


class MyBoardSkin extends AbstractSkin
{
    protected static $id = 'module/board@board/skin/myplugin@boardskin';

    ...
}

각각의 스킨은 자신이 어떤 컨트롤러(모듈 또는 위젯)에서 사용될지에 정보, 즉 타겟에 대한 정보를 가지고 있습니다. 예를 들어 게시판 스킨은 게시판 모듈을 타겟으로 가집니다. 스킨은 타겟 정보를 자신의 아이디에 내포합니다. 위의 코드에서 아이디 중간에 'skin'을 기준으로 나누면 module/board@board와 myplugin@boardskin로 분리됩니다. 이때 앞부분인module/board@board가 스킨의 타겟이 됩니다.

module/board@board는 게시판 모듈의 아이디입니다.

아이디의 앞부분에 타겟의 아이디를 적은 다음, /skin/을 붙입니다. 그 뒷에는 이 스킨의 고유키를 붙입니다. 스킨을 제작할 때에는 스킨의 타겟이 될 모듈이나 위젯의 아이디가 무엇인지 먼저 알아야 합니다.

스킨에서 작성해야 할 주요 메소드는 아래와 같습니다.

  • setView(): 하나의 스킨은 여러개의 뷰를 가집니다. 예를 들어 게시판의 경우 글목록페이지(list), 글열람페이지(show), 글작성페이지(create)를 가집니다. 이 페이지들이 각각 하나의 뷰가 됩니다. 스킨은 타겟 컨트롤러에서 필요로 하는 뷰를 모두 제공해야 합니다. setView()메소드는 컨트롤러가 사용할 뷰를 지정할 때 사용하는 메소드입니다.
  • setData(): 컨트롤러에서 출력할 컨텐츠 데이터를 생성한 다음 이 메소드를 사용하여 스킨에게 전달합니다.
  • render(): 화면에 출력할 html을 반환하는 핵심적인 메소드입니다. setView()와 setData()를 통해 전달받은 뷰와 데이터 정보를 사용하여 html을 작성합니다.

연관 데이터베이스

스킨은 특정 컨트롤러에서 사용할 스킨의 정보와 스킨의 설정정보를 저장하는 기능을 제공합니다. 스킨 패키지는 이 정보를config 테이블에 저장합니다. 이 때 skins으로 시작하는 name을 사용합니다.

사용법

API 사용법


List of Articles
カテゴリ タイトル 日付 最終修正日
XE3 XpressEngine 매뉴얼 2015.11.22 2015.11.22
XE3紹介 XE3의 소개-배경 2015.11.22 2015.11.22
XE3紹介 XE3 소개 - 중요 개념 소개 2015.11.22 2015.11.22
Get Started インストールする 2015.11.22 2015.12.15
View要素 Presenter 2015.11.22 2015.11.22
View要素 FrontEnd 2015.11.22 2015.11.22
プラグイン 플러그인 2015.11.22 2015.11.22
プラグイン Plugin 2015.11.22 2015.11.22
プラグイン Register 2015.11.22 2015.11.22
コンポーネント 컴포넌트 2015.11.22 2015.11.22
コンポーネント Theme 2015.11.22 2015.11.22
コンポーネント Module 2015.11.22 2015.11.22
コンポーネント Skin 2015.11.22 2015.11.22
コンポーネント UIObject 2015.11.22 2015.11.22
コンポーネント Widget 2015.11.22 2015.11.22
パッケージ 패키지 2015.11.22 2015.11.22
パッケージ Captcha 2015.11.22 2015.11.22
パッケージ Category 2015.11.22 2015.11.22
パッケージ Comment 2015.11.22 2015.11.22
パッケージ Config 2015.11.22 2015.11.22
Board Pagination Prev 1 2 3 Next
/ 3