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

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

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

UIObject

by XEJapan posted Nov 22, 2015
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

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

UIObject

개요

UIObject는 말그대로 UI를 표현하는 개체입니다. 우리는 보통 웹페이지를 제작할 때 동일한 html을 반복해서 작성합니다. 예를 들어 폼 입력페이지를 작성한다면, 텍스트 인풋(< input type="text" >)과 같이 동일한 폼요소를 반복해서 사용합니다. UI오브젝트는 이런 반복되는 html의 작성을 줄여줍니다. 자주 사용되는 html을 미리 작성해놓고 UI오브젝트로 등록해 놓은 다음, 반복해서 여러번 호출하십시오.

목적

앞서 설명한 바와 같이 반복되는 html의 작성을 쉽게 작성할 수 있도록 도와줍니다. 또, UI오브젝트를 제공하는 플러그인을 배포한다면 다른 개발자들과 공유할 수도 있습니다. 특히 '미리보기가 지원되는 이미지 업로드 UI' 같이 html 뿐만 아니라 css, js 파일까지 로드해야 하는 복잡한 UI를 반복해서 사용한다면 더욱 효과적으로 개발을 할 수 있습니다.

구성

UI오브젝트를 제작하기 위해서는 \Xpressengine\UIObject\AbstractUIObject를 상속받는 클래스를 작성한 다음, 플러그인을 통해 XpressEngine에 등록해야 합니다. 클래스의 주요 메소드는 render()입니다. 이 메소드는 UI오브젝트의 결과물인 html을 생성하여 출력합니다.

UI오브젝트를 사용할 때에는 uio() 헬퍼함수를 사용하면 됩니다. 아래 코드와 같이 출력하려는 UI오브젝트를 첫번째 파라메터에 넣고, 출력에 필요한 데이터를 두번째 파라메터에 array로 넣습니다.

$html = uio('formImage', 
    [  'name' => 'logo', 
       'label' => '로고 (280x100)', 
       'image' => array_get($config,'logoPath'), 
       'width' => 280, 
       'height' => 100 
     ]
 );

각각의 UI오브젝트는 모두 고유의 아이디를 가집니다. uio 헬퍼를 사용할 때에는 이 고유한 아이디를 첫번째 파라메터에 지정해야 합니다. 만약 자주쓰는 UI오브젝트라면 alias를 지정할 수 있습니다. config/xe.php 파일에서 uiobject.aliases 목록에 alias명과 함께 고유 아이디를 지정하면 됩니다. 만약 코어에서 지정된 alias에 다른 UI오브젝트를 적용하면, 코어에서 사용되는 UI오브젝트를 교체할 수 있습니다.


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