xe 위젯 개발 강좌 (5) - counter 위젯을 사용하여 스킨 컬러셋 추가,사용하기

counter 위젯을 사용하여 확장변수 추가,사용하는 방법을 연구해보겠습니다.

먼저 위젯 스킨의 skin.xml 을 열어봅니다.

<?xml version="1.0" encoding="UTF-8"?>

<skin version="0.2">

    <title xml:lang="ko">언어 출력</title>

    <title xml:lang="jp">言語選択</title>

    <title xml:lang="zh-CN">多国语言切换</title>

    <title xml:lang="en">Display Language</title>

    <title xml:lang="vi">Hiển thị ngôn ngữ</title>

    <title xml:lang="zh-TW">語言選擇</title>

    <title xml:lang="tr">Dili Görüntüle</title>

    <description xml:lang="ko">스킨 기능이 없습니다</description>

    <description xml:lang="jp">スキン機能がありません。</description>

    <description xml:lang="zh-CN">不支持皮肤。</description>

    <description xml:lang="en">There are no skin functions</description>

    <description xml:lang="vi">Đây không phải chức năng của Skin</description>

    <description xml:lang="zh-TW">不支援面板。</description>

    <description xml:lang="tr">Dış görünüm özelliği yok.</description>

    <version>1.7</version>

    <date>2013-11-27</date>

    <link>http://xpressengine.com/</link>

    <author email_address="developers@xpressengine.com" link="http://xpressengine.com/">

        <name xml:lang="ko">NAVER</name>

        <name xml:lang="jp">NAVER</name>

        <name xml:lang="zh-CN">NAVER</name>

        <name xml:lang="en">NAVER</name>

        <name xml:lang="vi">NAVER</name>

        <name xml:lang="zh-TW">NAVER</name>

        <name xml:lang="tr">NAVER</name>

    </author>

    <colorset>

        <color name="layout">

            <title xml:lang="ko">레이아웃에 맞춤</title>

            <title xml:lang="jp">レイアウトに合わせる</title>

            <title xml:lang="zh-CN">随布局</title>

            <title xml:lang="en">Custom Layout</title>

            <title xml:lang="vi">Tùy chỉnh giao diện</title>

            <title xml:lang="zh-TW">隨版面</title>

            <title xml:lang="tr">Yerleşim Düzeni</title>

        </color>

        <color name="white">

            <title xml:lang="ko">하얀색(기본)</title>

            <title xml:lang="jp">白（デフォルト）</title>

            <title xml:lang="zh-CN">白色（默认）</title>

            <title xml:lang="en">White (default)</title>

            <title xml:lang="vi">White (Mặc định)</title>

            <title xml:lang="zh-TW">白色(預設)</title>

            <title xml:lang="tr">Beyaz (varsayılan)</title>

        </color>

        <color name="black">

            <title xml:lang="ko">검은색</title>

            <title xml:lang="jp">黒</title>

            <title xml:lang="en">Black</title>

            <title xml:lang="vi">Black</title>

            <title xml:lang="zh-CN">黑色</title>

            <title xml:lang="zh-TW">黑色</title>

            <title xml:lang="tr">Siyah</title>

        </color>

    </colorset>

</skin>

이렇게 구성되어 있고 여기서 굵은글씨로 되어 있는 부분이 확장변수에 나오는 부분입니다. 셀렉트박스로 3개(레이아웃에 맞춤,하얀색(기본),검은색)가 나옵니다.

사용자가 저 값을 선택했을때 어떻게 사용하는지 살펴봅니다.

먼저 language_select.class.php 파일을 살펴보면

<?php

class language_select extends WidgetHandler

{

function proc($args)

{

// Set a path of the template skin (values of skin, colorset settings)

$tpl_path = sprintf('%sskins/%s', $this->widget_path, $args->skin);

$tpl_file = 'language_select';

Context::set('colorset', $args->colorset);

// Compile a template

$oTemplate = &TemplateHandler::getInstance();

return $oTemplate->compile($tpl_path, $tpl_file);

}

}

/* End of file language_select.class.php */

/* Location: ./widgets/language_select/language_select.class.php */

굵은글씨로 된 $args->colorset 이부분처럼 사용하면 됩니다.

skin.xml에 선언된 <colorset> 이부분에 대한 사용자 선택값을 가지고 오게 됩니다.

그럼 이제 스킨파일인 language_select.html 파일에서 사용법을 살펴봅니다.

<!--%import("./js/language_select.js")-->

<!--@if($colorset == "black" || $colorset == "white")-->

    <!--%import("./css/widget.css")-->

<!--@end-->

<div class="widgetContainer<!--@if($colorset=="black")--> black<!--@end-->">

    <div class="widgetLanguage">

        <p><a href="#" class="cafeXeA language_selector">Language:{$lang_supported[$lang_type]}</a></p>

        <ul class="langList" style="right: 3px;">

            <!-- class="" | class="open" -->

            <!--@foreach($lang_supported as $key => $val)-->

            <!--@if($key != $lang_type)-->

            <li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li>

            <!--@end-->

            <!--@end-->

        </ul>

    </div>

</div>

language_select.class.php 파일에서 Context::set('colorset', $args->colorset); 이렇게 세팅해줬으니 html파일에서는 $colorset 이렇게 사용합니다.