タブスライダー

  <tabslider>
    <tabelement>・・・</tabelement>
    <tabelement>・・・</tabelement>
    <tabelement>・・・</tabelement>
  </tabslider>

<tabslider>タグで、複数の<tabelement>タグを囲みます。<tabslider>は幅widthと高さheightの設定は必須です。これらの設定がないと画面に表示されません。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <tabslider width="150" height="200">
    <tabelement text="サンプル１"/>
    <tabelement text="サンプル２"/>
    <tabelement text="サンプル３"/>
  </tabslider>
</canvas>

タイトルに任意のオブジェクトを配置するには、placement=“header”を設定します。ついでにボーダーのサイズや色を任意のものに設定しています。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <tabslider width="200" height="160" bordersize="2" 
             spacing="2" bordercolor="0x3A75A3" mintabheight="20">
      <tabelement text="サンプル1" selected="true" text_x="20">
         <view bgcolor="0xDD9C1E" placement="header" 
               width="10" height="12" x="5" y="5"/>
         <view bgcolor="0xDD9C1E" x="10" y="10" width="50" height="50"/>
      </tabelement>
 
      <tabelement text="サンプル２" text_x="20">
         <view bgcolor="0x3A75A3" placement="header" 
               width="10" height="12" x="5" y="5"/>
         <view bgcolor="0x3A75A3" x="10" y="10" width="50" height="50"/> 
      </tabelement>
 
      <tabelement text="サンプル３" text_x="20">
         <view bgcolor="0x6BAC6B" placement="header" 
               width="10" height="12" x="5" y="5"/>
         <view bgcolor="0x6BAC6B" x="10" y="10" width="50" height="50"/> 
      </tabelement>
  </tabslider>
</canvas>

タブの開閉を、タブスライダーのタブのクリックではなく、他のコンポーネントあるいはイベントから実行できます。それには<tabslider>のselectNext()メソッド、selectPrev()メソッドを実行します。

サンプルではタブ内外のボタンクリック時にタブの開閉をしています。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <tabslider name="t" width="120" height="200">
    <tabelement text="サンプル１" selected="true">
      <button onclick="parent.parent.selectNext();">次へ</button>
    </tabelement>
    <tabelement text="サンプル２">
      <simplelayout axis="x" spacing="2"/>
      <button onclick="parent.parent.selectPrev();">前へ</button>
      <button onclick="parent.parent.selectNext();">次へ</button>
    </tabelement>
    <tabelement text="サンプル３">
      <button onclick="parent.parent.selectPrev();">前へ</button>
    </tabelement>
  </tabslider>
  <simplelayout axis="x" spacing="10"/>
  <button onclick="t.selectNext()">次へ</button>
  <button onclick="t.selectPrev()">前へ</button>
</canvas>

※http://forum.openlaszlo.org/showthread.php?t=9955から拾ってきたものです。

tabelementを固定的に設定するのではなく、データバインディングの機能を利用してデータセットから動的に生成しています。つまりタグの記述を変更しなくても、データの数に応じて自動的にタブが増減することになります。

サンプルではXMLデータを元にタブスライダーを完成させています。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <dataset name="ds" >
    <root>
      <node text1="サンプル1" text2="これはサンプル1です"/>
      <node text1="サンプル2" text2="これはサンプル2です"/>
      <node text1="サンプル3" text2="これはサンプル3です"/>
      <node text1="サンプル4" text2="これはサンプル4です"/>
      <node text1="サンプル5" text2="これはサンプル5です"/>
    </root>
  </dataset>
 
  <tabslider width="150" height="200" >
    <tabelement datapath="ds:/root/node" text="$path{'@text1'}" >
      <handler name="oninit" >
        <![CDATA[
          if (this['cloneManager'] && 
          this.clonenumber == this.cloneManager.clones.length-1) {
              this.cloneManager.clones[0].setAttribute("selected", true);
          }
        ]]>
      </handler>
      <text text="$path{'@text2'}" />
    </tabelement>
  </tabslider>  
</canvas>

理屈が難しいですが、<tabelement>のoninitイベントハンドラ内で何をしているかというと、<tabelement>の最後のcloneが生成された時点で、最初のclone(＝最初の<tabelement>）にselected=“true”を設定しています。

※http://forum.openlaszlo.org/showthread.php?t=8002からの拾い物です。

<tabelement>を継承した独自クラスを作り、選択時(onselected)のスタイルを変更するようにしてあります。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <greenstyle name="stylegreen" />
  <silverstyle name="stylesilver" isdefault="true" />
 
  <class name="mytabelement" extends="tabelement" >
    <handler name="onselected" >
      this.setAttribute( "style", selected ? stylegreen : stylesilver );
    </handler>
  </class>
 
  <tabslider width="200" height="200">
    <mytabelement text="サンプル１" />    
    <mytabelement text="サンプル２" />
    <mytabelement text="サンプル３" />   
  </tabslider>
 
</canvas>