xe 위젯 개발 강좌 (5) - 위젯 확장변수를 이용한 bxslider xe 위젯 만들기

xe 위젯 확장변수를 만들어 이미지 url을 입력받은 다음 그 값을 xe bxslider 위젯의 슬라이딩 될 이미지로 사용한다.

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

<widget version="0.2">

    <title xml:lang="ko">bxslider 위젯</title>

    <title xml:lang="jp">デフォルト接続カウンター</title>

    <title xml:lang="en">Counter Widget</title>

    <title xml:lang="es">Widget de Contador Básico</title>

    <title xml:lang="zh-CN">计数器</title>

    <title xml:lang="ru">Базовый виджет счетчика</title>

    <title xml:lang="zh-TW">計數器</title>

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

    <title xml:lang="tr">Sayaç</title>

    <description xml:lang="ko">

        bxslider 위젯

    </description>    

    <version>0.1</version>

    <date>2017-05-19</date>

    <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="en">NAVER</name>

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

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

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

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

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

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

    </author>

<extra_vars>

        <group>

            <var id="img1" type="text">

                <name xml:lang="ko">이미지 URL1</name>

                <name xml:lang="en">image url 1</name>                

            </var>

<var id="img2" type="text">

                <name xml:lang="ko">이미지 URL2</name>

                <name xml:lang="en">image url 2</name>

            </var>

<var id="img3" type="text">

                <name xml:lang="ko">이미지 URL3</name>

                <name xml:lang="en">image url 3</name>

            </var>            

        </group>

<group>

            <var id="img1" type="text">

                <name xml:lang="ko">이미지 URL1</name>

                <name xml:lang="en">image url 1</name>                

            </var>

<var id="img2" type="text">

                <name xml:lang="ko">이미지 URL2</name>

                <name xml:lang="en">image url 2</name>

            </var>

<var id="img3" type="text">

                <name xml:lang="ko">이미지 URL3</name>

                <name xml:lang="en">image url 3</name>

            </var>            

        </group>

</extra_vars>

</widget>

이렇게 info.xml에 <extra_vars>~</extra_vars> 부분을 추가한다. 그럼 이미지 3개를 입력 받을 수 있는 텍스트 필드가 나타나게 된다.

그런 다음 bxslider.class.php 에서 $args->img1 해주면 입력값을 사용하는 것이다. 즉, info.xml에 설정한 <var id="img1" type="text"> 이부분을 bxslider.class.php 파일에서 $args->img1 이라고 하면 입력한 값을 사용할 수 있다.

<?php

class bxslider extends WidgetHandler

{

function proc($args)

{

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

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

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

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

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

// Specify a template file

$tpl_file = 'bxslider';

// Compile a template

$oTemplate = &TemplateHandler::getInstance();

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

}

}

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

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

bxslider.html 파일에서 입력값을 사용해야 하니 bxslider.class.php 파일에서 Context::set('img1',$args->img1); 처럼 세팅해 줍니다. 그럼 bxslider.html 파일에서는 {$img1} 처럼 사용이 가능 합니다. 즉, 굵은 글씨 이름이 같게 해주면 됩니다.

<!-- jQuery library (served from Google) -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- bxSlider Javascript file -->

<script src="js/jquery.bxslider.min.js"></script>

<!-- bxSlider CSS file -->

<!--<link href="lib/jquery.bxslider.css" rel="stylesheet" />-->

<load target="lib/jquery.bxslider.css" />

<ul class="bxslider">

  <li><img src="{$img1}" title="Funky roots"/></li>

  <li><img src="{$img2}" title="Funky roots1"/></li>

  <li><img src="{$img3}" title="Funky roots2"/></li>

</ul>

<script>

$('.bxslider').bxSlider({

  mode: 'fade',

  captions: true,

  auto: true,

  pause: 2000

});

</script>