VisualizerでTabPane Widgetを利用する方法

#目次
1. はじめに
2. 説明
3. まとめ
4. 参考

#はじめに
TabPane Widgetは複数のタブをクリックすることで切り替えて表示することができるウィジェットです。
プロパティの設定画面などで項目毎にタブを用意し、1つの画面でタブを切り替えることで情報を表示したい場合等に便利なウィジェットです。
この記事ではウィジェット：TabPaneの使い方をご紹介します。

こちらの記事でも軽く紹介しているので、よろしければご参照ください。
◆Widgetの説明 Part1
https://qiita.com/Kony_Team/items/c71850eca5710fe69d11#tabpane

#説明
今回作成する画面はこのようなイメージです。

| タブ1を開いた時 | タブ2を開いた時 |
| ------- | ------- |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2757d4fb-4202-d51d-261f-789a345eeb6f.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a697d7f2-8cc5-b239-b6c3-c2b4298f2c18.png)|

####**①ベースの作成**
まずはTabPaneを入れるためにFlexContainerを入れていきます。
この時にタイトルもつけていきます。

<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/479e83ab-360e-a2a4-dedf-87dd46aecae3.png">

####**②TabPaneを設置**
先ほど作成したFlexContainerの中にTabPaneを追加します。
TabPaneの中にウィジェット：Tabが1つ、自動で入ります。

<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/dfb34a34-8b5d-7c05-ba73-f0a52305a0b0.png">

####**③Tabを追加**
必要なタブを追加していきます。
先ほど追加したTabPaneをクリックした上で、下のDefault　LibraryからTabをドラッグします。
![スクリーンショット 2021-04-01 13.39.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8b81a6fb-842a-907a-35b5-e5bd861ba654.png)

このようになりました。
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4675f7b2-4f79-daaa-e4ee-609649cdff4c.png">

####**④TabPaneのProperiesの設定**
外観は従来のウィジェットと同じ設定方法となります。

スキンを編集します。
`TabPane` > `Properties` > `Skin` 

スキンの説明です。

| 項目 | 説明 |
| ----- | ----- |
| Active | アクティブタブ（開いているタブ）に適用されるスキン |
| Active Focus | アクティブタブ（開いているタブ）がフォーカスされている時に適用されるスキン|
| Inactive | インアクティブタブ（開いていないタブ）全てに適用されるスキン|
| Page | TabPaneのView TypeがPageになっている時にページインジケータとして適用されるスキン <br><img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/130d496b-19d9-6a04-0170-d78e76e4580d.png"><br>※下部箇所（紫部分）|

<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d3ec3c8f-30f9-323c-74c5-d591ba9a7f9a.png">
このような感じで今回はスキンを設定してみました。

Tab Paneそのものの設定を行います。
`TabPane` > `Properties` > `Tab Pane`

**Active Tabs** : アクティブタブ（開きたいタブ）を選択
**View Type** : Tab Paneで表示するViewタイプを指定
Platformにチェックを入れて、Valueのところ、Viewタイプを指定することができます。
<img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/991ff20a-67e1-084b-4683-e29014712c00.png">
それぞれどのように表示されるかは下をご参照ください。

| Tab | Collapsible | Page |
| ---- | ---- | ---- |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ac73674a-5b6b-f1ca-5dd0-9745b0ab2a61.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ab357eda-6b64-c75d-c831-96b6ddbdb41d.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0aea0cb0-b99a-e022-ff90-eb1724622e29.png)|

####**⑤TabのProperiesの設定**
外観を設定します。
`TabPane` > `Properties` > `Look`
IDを指定すると自動でタブのタイトルとして設定されますが、こちらは変更することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a7fd69ce-6bbb-ea52-67a2-34257cbf9657.png)

スキンは従来のウィジェットと同じ設定方法となります。

タブを設定します。
`TabPane` > `Properties` > `Tab`
**Image** : タブのタイトルに設定したいイメージを指定
**Tab Name** : タブのタイトル  
:warning:TabのIDを変更すると、ここも自動で変更になってしまうので、IDを変更した時は必要に応じてここも設定し直してください。

####**⑥確認**
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/zlw0jbg4Nv">pic.twitter.com/zlw0jbg4Nv</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1377102283494748166?ref_src=twsrc%5Etfw">March 31, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

タブをタップするたびに切り替わっているのが分かりますね！

####**⑦注意点**
TabPaneでは、TabPaneを指定すると子ウィジェットを取得することができず、
undefinedエラーが発生します。
例：`this.view.tabpaneのwidget名.子widget名`

TabPane配下のWidgetを指定したい場合は、
TabPaneの中にあるTabWidgetを指定するか、直接子ウィジェットを指定するようにしてください。
例：`this.view.tabのwidget名.子widget名`

試しにpreShowに以下のようにそれぞれタブに入っているwidgetを指定すると、
以下のように表示されます。

```
onPostShow : function(){
      alert("Tab:"+ this.view.tabInfo.flxInfo);
      alert("TabPane:"+ this.view.tbpDemo.flxInfo);
    }
```

・Tab以下のWidgetを指定した場合：
![スクリーンショット 2021-04-01 13.53.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ba186f71-ce58-5728-2938-335de3ca6448.png)

・TabPane以下のWidgetを指定した場合：
![スクリーンショット 2021-04-01 13.53.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ef6a3ea0-3421-637e-ecab-16d194d2fbcd.png)


TabPane以下のWidgetを指定した場合に、
undefinedエラーとなっており、子Widgetが取得できていないことがわかるかと思います。

#まとめ
今回は、ウィジェット：TabPaneの使い方について説明しました。
みなさんもぜひ活用してみてくださいね:wave:

#参考
TabPane Widget：
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/TabPane.htm

TabPane Properties:
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/TabPane_Properties.htm

Widgetの説明 Part1：
https://qiita.com/Kony_Team/items/c71850eca5710fe69d11#tabpane