Visualizer Ver9.5でアップデートされた機能を実装してみた

# 目次
1. はじめに
1. アップデート情報
1. 最後に

# はじめに
2022年5月にVisualizerのVer9.5がリリースされました。

>New Features and Enhancements in V9 Service Pack 5 (2022.05)
In this release, the following features have been introduced to provide an enhanced Quantum Visualizer experience.

https://docs.kony.com/konylibrary/visualizer/viz_rel_notes/Content/V9SP5.htm


Widgetやコンポーネント、自動化の機能強化が追加されており、
一部機能を実際に触ってみたので、
今回は追加された機能の概要と実装方法についてご紹介していきたいと思います！


# アップデート情報

## [Android]textCopyableプロパティが利用可能に

テキストをコピー可能/不可能にする`textCopyable`プロパティは、
これまで、Desktop Web,Mobile Webのみでしたが、
本VerでAndroidも利用可能となりました。

|コピー可能にした場合（True）|コピー不可能にした場合（False）|
|--|--|
|![ezgif-1-b7a6667a6b.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d14aafc6-70f6-a766-df64-ee79bb146ddb.gif)|![ezgif-1-e769f4c92a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bcb1d54e-4fb2-937c-8d97-bafa7ebc5668.gif)|


**実装方法**

コピーを可能にしたい、
TextBoxまたはTextArea Widgetで以下のように入力すると実装が可能です。

```Controller.js
this.view.txt1.textCopyable = false; //コピー不可にしたい場合
this.view.txt1.textCopyable = true; //コピー可能にしたい場合
```

**利用可能なプラットフォーム**
- Android
- Desktop Web
- Mobile Web

## [Android]影の設定が可能に

これまで、FlexContainerなどで、Shadowの色やオフセットを指定しても、
Androidの場合は、影が適用されませんでしたが、
Ver9.5からAndroidでも影が正常に表示されるようになりました。

|9.5以前|9.5以降|
|--|--|
|![前and.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2efa7826-4aaf-9fa4-ebfe-c849bb57d4b7.png)|![後and.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f2db7f82-a5f6-5ffc-4ec5-5c6d3aace35f.png)|


**実装方法**
影をつけたいWidgetを選択した状態で、
右メニューのPROPERTIES->Skinタブ->Shadowの項目で設定が可能です。

影の色は、Colorで設定、
影のオフセットは、DistX（横軸）、DistY（縦軸）で設定が可能です。

↓に設定イメージを添付しましたので、気になる方はご確認ください:eyes:
![191396890-523f75fc-be49-45ee-9967-0f72158ddf8c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/796987b8-a76e-ebd1-e35b-bcb5059b49b0.png)


**利用可能なプラットフォーム**

shadowColor/shadowOffset/shadowRadius  
- Android
- iOS
- Desktop Web (Not available on Desktop Web Legacy SDK)

## [iOS,Android]TextBox Widgetでの特殊文字のコピーと貼り付け
TextBox　Widgetで、「textInputMode」を「Numeric（数字）」に設定した場合、
特殊文字「-（ハイフン）」をコピーアンドペーストできるようになりました。

|iOS|Android|
|--|--|
|![iosはいふん.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e38a6b16-1faa-3764-e2d3-1be4bc0d4d14.gif)|![androidハイフン.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2684ee53-156c-18b7-ff37-50f0a4609c04.gif)|

**実装方法**
[公式ドキュメント](https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/TextBox_Properties.htm#PasteSpecialCharacter)に記載の通り、
iOSとAndroidで、Input ModeとkeyBoardStyleの組み合わせを設定する必要があります。

①対象WidgetのInput Modeを「Numeric」に変更
![191410721-b3680b6b-17e0-431a-8e18-a0a2b9ef29bd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2f96a985-246a-b154-283e-95e12ae7120d.png)


②ControllerでkeyBoardStyleを指定
iOSとAndroidそれぞれで、keyBoardStyleのプロパティを指定します。

```Controller.js
 //#ifdef android
 this.view.txt1.keyBoardStyle = constants.TEXTBOX_KEY_BOARD_STYLE_PHONE_PAD;
 //#endif
 //#ifdef iphone
 this.view.txt1.keyBoardStyle = constants.TEXTBOX_KEY_BOARD_STYLE_DEFAULT;
 //#endif
```

この機能のおかげで、ハイフンの入力がある電話番号の入力欄などで
数字のみを許可しつつ特殊文字のペーストができるため入力が楽になりますね:relaxed:

**利用可能なプラットフォーム**
下記をご参照ください。  
[TextBox Properties/keyBoardStyle Property](https://docs.kony.com/konylibrary/visualizer/viz_rel_notes/Content/V9SP5.htm#SpecialCharacter)

## [iOS]カレンダーWidgetでcalendarStyleのプロパティが利用可能に

iOSで、表示するカレンダーのスタイルを定義する
「calendarStyle」プロパティを選べるようになりました。

「calendarStyle」では、
以下のスタイルをサポートしています。

- CALENDAR_STYLE_AUTOMATIC (Default)
- CALENDAR_STYLE_INLINE
- CALENDAR_STYLE_COMPACT
- CALENDAR_STYLE_WHEEL

各プロパティを設定して確認した結果が以下になります。
どんな表示になるかチェックしたい方は、見てみてください:eyes:
![ezgif-1-3a9edca25d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8ebda0ba-c072-cbbd-a76c-413744e855b7.gif)


**実装方法**

Controllerで対象Widgetに対して、
viewTypeに`CALENDAR_VIEW_TYPE_NATIVE`を指定し、
calendarStyleに、ご希望のスタイルを指定してください。

<font color = red> ※viewType を CALENDAR_VIEW_TYPE_NATIVE に指定しないと、
各スタイルが反映されないためご注意ください。</font>
```Controller.js
    //CALENDAR_STYLE_AUTOMATIC  (Default)
    this.view.caldefault.viewType = constants.CALENDAR_VIEW_TYPE_NATIVE;
    this.view.caldefault.calendarStyle = constants.CALENDAR_STYLE_WHEEL;
    //CALENDAR_STYLE_INLINE
    this.view.calinline.viewType = constants.CALENDAR_VIEW_TYPE_NATIVE;
    this.view.calinline.calendarStyle = constants.CALENDAR_STYLE_INLINE;
    //CALENDAR_STYLE_COMPACT
    this.view.calcompact.viewType = constants.CALENDAR_VIEW_TYPE_NATIVE;
    this.view.calcompact.calendarStyle = constants.CALENDAR_STYLE_COMPACT;
    //CALENDAR_STYLE_WHEEL
    this.view.calwheel.viewType = constants.CALENDAR_VIEW_TYPE_NATIVE;
    this.view.calwheel.calendarStyle = constants.CALENDAR_STYLE_WHEEL;
```

**利用可能なプラットフォーム**
Not available in the IDE
iOS

これにより様々なカレンダー表示が可能になり、
ユーザーにとっても使いやすいUIが作れそうですね:relaxed:

# 最後に
今回は、Ver9.5で新しく追加された機能についてご紹介しました！

紹介したものはほんの一部です。
もっと情報を知りたい方は参考リンクに公式ドキュメントを添付しましたので、
チェックしてみてくださいね:thumbsup_tone1:


# 参考
https://docs.kony.com/konylibrary/visualizer/viz_rel_notes/Content/V9SP5.htm