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

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷
View要素

FrontEnd

by XEJapan posted Nov 22, 2015
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

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

Frontend

개요

브라우저에서 어떤 페이지를 요청하면 XpressEngine은 보통 모듈 스킨, 테마, 그리고 스킨과 테마에서 사용한 위젯이나 UI오브젝트에서 생성한 html을 조합하여 하나의 html 문서를 만듭니다. 그리고 이 html 문서에는 여러가지 css와 js파일이 로드되고 meta 태그 같은 태그들이 html에 추가됩니다. Frontend 패키지는 이렇게 하나의 html 문서를 출력할 때 필요한 다양한 태그를 추가해주고 관리하는 역할을 합니다.

목적

화면에 출력될 html을 생성하는 과정에서 다양한 컴포넌트가 관여를 하는데, Frontend 패키지는 이 과정에서의 발생하는 여러가지 문제를 처리해줍니다.

Frontend 패키지는 아래와 같은 역할을 제공합니다.

  • html문서의 타이틀을 지정한다.
  • body 태그에 특정 class를 추가한다.
  • js파일을 html 특정영역(head 또는 body의 상,하단)에 로드한다
  • css파일을 html에 로드한다.
  • 이미 다른 컴포넌트에서 로드된 js, css파일을 언로드(unload) 한다.
  • meta 태그를 html에 로드한다.
  • custom 태그(자유로운 형식의 text)를 html에 추가한다.
  • form validation을 위한 rule을 지정한다.(브라우저에서 script를 통해 실행되는 validation)
  • script에서 사용할 언어팩을 로드한다.

위의 역할을 수행할 때 Frontend 패키지는 여러곳에서 로드된 js파일이나 css파일의 중복을 처리해줍니다. 또, js파일이나 css파일은 로드되는 순서도 매우 중요합니다. Frontend 패키지는 파일이 로드되는 순서를 지정하는 기능도 제공합니다.

사용법

Frontend 패키지의 기본적인 사용법입니다. 자세한 사용법은 API를 참조하십시오. API 사용법

// 브라우저 타이틀 지정
Frontend::title('브라우저 타이틀입니다');

// body에 'profile' class지정
Frontend::bodyClass('profile');
// xe.js파일을 body의 하단에 로드함.
Frontend::js('assets/common/js/xe.js')->appendTo('body')->load();

// 로드된 xe.js파일을 언로드함.
Frontend::js('assets/common/js/xe.js')->unload();
// xe.css파일을 로드함. 반드시 bootstrap.css가 로드된 다음에 로드되도록 우선순위를 지정
Frontend::js('assets/common/css/xe.css')->appendTo('body')->before('assets/vendor/bootstrap.css')->load();


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