XE의 레이아웃 기능이 참 좋습니다... 레이아웃변경만 하면 사이트 전체 디자인이 싹 바뀌면서 완전 다른 사이트로 변신하니, 말입니다..
클릭 몇번으로 사이트의 전체 디자인과 분위기를 바꿀 수 있는 건 예전에는 상상도 못했습니다..
예전에는 원래 소스코드 변경을 통해서만 할 수 있는 일이 였지요..
이번에는 좋은 기능! 레이아웃이 어떻게 화면에 표시될 수 있는 지 알아볼겁니다.
레이아웃은 layout모듈에서 기능수행과 관리를 담당합니다.
하지만 레이아웃을 표시하는 건 layout모듈이 직접하는 게 아니라 Core에서 담당하고 있습니다.
즉, layout모듈은 Core와 따로 분리할 수 없다는 것을 의미하지요..
최종결과물을 생성하는 ./classes/display/HTMLDisplayHandler.php 파일을 보면 레이아웃이 어떤게 표시되는 지 알 수 있습니다.
function toDoc(&$oModule)
{
...
//모듈 템플릿파일 컴파일
$template_path = $oModule->getTemplatePath();
$tpl_file = $oModule->getTemplateFile();
$output = $oTemplate->compile($template_path, $tpl_file);
if(Context::getResponseMethod() == 'HTML')
{
//지정한 레이아웃이 있다면...
if(Context::get('layout') != 'none')
{
//레이아웃에 모듈결과물을 삽입하기 위해 'content'라는 변수에 모듈 결과물을 저장합니다.
//레이아웃에서 {$content}으로 모듈결과물을 삽입함
Context::set('content', $output, false);
//모듈에 지정된 레이아웃 경로설정
$layout_path = $oModule->getLayoutPath();
$layout_file = $oModule->getLayoutFile();
$edited_layout_file = $oModule->getEditedLayoutFile();
// get the layout information currently requested
$oLayoutModel = getModel('layout');
$layout_info = Context::get('layout_info');
$layout_srl = $layout_info->layout_srl;
if(!$layout_path)
{
$layout_path = './common/tpl';
}
if(!$layout_file)
{
$layout_file = 'default_layout';
}
//레이아웃파일 컴파일
$output = $oTemplate->compile($layout_path, $layout_file, $edited_layout_file);
}
}
return $output;
}
* 일부코드를 제거했습니다. (중요한 부분만 남겼습니다.)
* 알기쉽게 하기위해 주석을 달아두었습니다.
위 코드의 실행은 아래와 같습니다.
- 실행모듈의 템플릿파일을 컴파일합니다. ($output = $oTemplate->compile($template_path, $tpl_file);)
- 레이아웃이 있다면 레이아웃에 모듈결과물을 삽입하기 위해 'content'라는 변수에 모듈 결과물을 저장합니다. (Context::set('content', $output, false);)
- 레이아웃 경로설정을 하고, 레이아웃파일도 템플릿파일이기에 컴파일합니다.
위 실행으로 최종결과물이 완성된 건가요?
아닙니다. 지금까지 만든건 레이아웃에 모듈페이지를 붙여놓은 것뿐입니다..
아직 웹에서 보여줄 웹문서가 완성되지않았습니다.. <html></html> 태그가 없잖아요..
HTML태그(<html></html>)와 JS, CSS 호출태그,메타태그를 넣어야 완성이 됩니다..
그래서 마지막에 ./common/tpl/common_layout.html 공통레이아웃파일을 적용시켜 완성을 합니다.
*공통레이아웃파일은 웹문서로 완성시키기위한 레이아웃 파일입니다.
레이아웃의 구조
레이아웃은 ./layouts폴더에 저장합니다.
레이아웃에는 아래와 같은 파일및 폴더가 필수로 들어가야합니다.
- conf/info.xml : 레이아웃의 정보파일
- layout.html : 레이아웃 파일
- 레이아웃 파일은 일종의 템플릿 파일이므로 XE문법으로 작성합니다.
- 레이아웃 파일에서는 전체적인 디자인이 담기고, "{$content}"이라고 적은 부분에 모듈페이지(모듈결과물)가 표시됩니다.
- 레이아웃 파일이름은 "layout.html"이라고 XE Core에서 지정하고 있어서 임의로 변경하면 안됩니다.
- 필수폴더 말고 리소스파일이 담길 js,css,img등의 폴더가 있을 수 있습니다. (필요에 따라)