OutSystems UI 2.17.0の新機能を試す


# 環境情報
Personal Environment(Version 11.23.0 (Build 39357))
Service Studio(Version 11.54.25)
[OutSystems UI(Version 2.17.0)](https://www.outsystems.com/forge/component-versions/1385)

Forum上のアナウンスメント：[New OutSystems UI v2.17.0 with new components](https://www.outsystems.com/forums/discussion/91401/new-outsystems-ui-v2-17-0-with-new-components/)

# サンプル
[HousesoftSampleReactive](https://www.outsystems.com/forge/component-overview/7086/housesoftsamplereactive)のVersion 1.0.23、OutSystemsUIV2_17_0 Screenを参照

# 注意事項（Known Issues）
このバージョンにはKnown Issuesが2つあるので注意。以下に挙げた機能を現状使っているなら、2.18.0を待った方がいいかもしれない。回避策（Workaround）も提供されているので、検証の上で使う選択もあり得る。

- Dropdown SearchとDropdown Tags (ROU-4510)
- InputWithIcon (ROU-4540)

# OverflowMenu Pattern追加：デフォルト非表示、アイコンクリックで表示されるメニュー
## 使い方
OutSystemsUIにあるUI Flows/Navigation/OverflowMenuへの参照を追加する。
また、必須ではないが、今回の検証のために、ShapeとFloatingPosition Static Entityへの参照も追加しておく。

基本的な使い方：
1. OverflowMenuを画面上に配置（デフォルトではIconのみが表示されるので、Iconを表示したい場所に）
1. Menu Placeholder > nav HTML Elementの下にメニューを配置（下の例ではデフォルトのリンクから不要なものを2つ削除した状態）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/c64f060c-1f36-0d69-9b3a-083a541be01c.png)

これだけ。
動作例：アイコンをクリックすると、Menu Placeholder内のUIが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/21710003-7a06-8fd4-c245-fb038b0b8f39.png)

## Input Parameter（Menuの表示位置と枠の形を指定する）
OverflowMenuには2つのInput Parameterがある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/35296924-784c-42c4-e6ee-7050fd08b673.png)
### BalloonShape：アイコンクリック時に表示されるMenuの枠の形
OutSystemsUI/Shape Static EntityのIdentifierを指定する。
デフォルトはSoftRounded（Menuの四隅が少しだけ丸く欠ける）。

以下は、Roundedを指定した場合の例。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/bd8dc313-eca9-b610-3a21-0a66ec4cf5cc.png)

### BalloonPosition：アイコンクリック時に表示されるMenuの枠が、アイコンを起点にどの位置に表示されるか
OutSystemsUI/FloatingPosition Static EntityのIdentifierを指定する。
デフォルトはAuto。画面内のアイコンの位置を見て適当に表示位置を調整する設定。

以下は、BottomEndを指定した場合の例。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/975b959b-f432-17bc-0712-da628669eeba.png)

## OverflowMenuOpen/Close Action
名前通りOverflowMenuを指定して、Menuを表示させる、あるいは非表示にさせるAction。
Input ParameterとしてWidgetIdがあるので、OverflowMenuのIdプロパティを設定する（OverflowMenu PatternのNameプロパティを設定しておく必要がある）。

設定例：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/922d4df0-7c31-a7fd-d588-0cc67ffb0dbf.png)

なお、存在しないIdを指定すると、以下のように「OSUI-API-30004（OverflowMenuOpen Actionの場合）」か「OSUI-API-30005（Close Actionの場合）」がOutputParameterのErrorMessage.Codeに設定される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/4e891386-4c09-6571-d63f-77be763a01a4.png)

## OverflowMenuEnable/Disable Action
こちらはOverflowMenuを非アクティブ状態にしたり、それを戻すためのAction。
非活性にすると、以下のようにアイコンが灰色になるようだ。クリックしてもMenuは開かなくなる。またOverflowMenuOpen Actionでも開かなくなる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/cfce3c72-5b41-de2a-adc5-e021a1ca7bd2.png)

# Video Pattern変更：新しいアーキテクチャのVideoが追加され、既存の同名パターンはDEPRECATED_Videoへ
## 字幕機能の追加
Video PatternのInput ParameterにCaptionsが追加された。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/a1c9c8fc-6054-59d7-bf72-e8efab0582fa.png)

Captionsに適切な値を設定すると、動画上に字幕を表示できる。
- LanguageCode: 字幕の言語を示すコード("en"など）
- SourceFile: 試してみたところ、[Web Video Text Tracks Format (WebVTT)](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API)のフォーマットに従って開始から何秒の位置にどの文字列を表示するか、を指定すれば良さそう。日本語はUTF-8で保存しないと文字化けした
- Label: 実行時にプレーヤー右下のコントロール上に表示される、「今どの言語の字幕を表示しているか」を表す文字列

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/34378a31-ba2c-eca9-48f3-bb0ded092949.png)

Labelは字幕選択の時にも使われる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/df464d02-d45b-62f6-c7c8-620806cf05af.png)

簡単に動作確認するなら

1. モジュールのResourcesにWebVTT形式のファイルをImport (拡張子はtxtにしておくと、確実にダウンロードできる）
1. ImportしたファイルのDeploy Actionを「Deploy to TargetDirectory」に設定
1. VideoのCaptionsを展開し、Language="ja"、SourceFileはImportしたファイルのRuntime Pathの値をコピー、Label="日本語"のように設定する

以下は、WebVTTファイルの例（開始から1秒～4秒の間「テストキャプション1.」５秒～9秒の間は2行のテキストが字幕に表示される）
```
WEBVTT

00:01.000 --> 00:04.000
- テストキャプション1.

00:05.000 --> 00:09.000
- テストキャプション2.
- テストキャプション3.
```

## Eventが追加されている
### Initialized Event
文字通りVideo Patternが初期化されたときに動作する。
URLが初期指定されていないときも、画面ロード後ぐらいのタイミングで発生した。
なお、次のEvent StateChangedのUnstartedはInitializedより前に発生した。

### StateChanged Event
Videoの4つの状態が切り替わるごとに発生する。
- Unstarted: Initializeより前に発生する様子
- Playing: 再生中を示す
- Paused: 再生開始後、停止させると発生
- Ended: 最後まで再生すると発生

これらの状態は、OutSystems UI内のStatic Entity VideoStateで定義されている。このStatic EntityはPublicではないが、State (Identifier) のみのStatic Entityなので問題はなさそう。

## Actionが追加されている
### VideoGetState Action
StateChangedで渡ってくるのと同じ値を取得するAction。
現在の状態を返す。

### VideoJumpToTime Action
Input Parameterで時間を指定（Time型）し、その時間まで動画を移動させる。

## メモ：画面表示後にURLを設定する
どうも、Video Patternが表示された後にInput ParameterのURLの値を変えても、動画データを取得しに行ってくれないらしい。
JavaScript要素でvideoタグのオブジェクトを取得し、そのload関数を呼ぶと、URL先の動画を取得しに行ってくれる。以下の例では、JavaScript要素のInput Parameter VideoWidgetIdに、Screen上のVideo PatternのIdを渡すようにしている。Video PatternからとれるId属性はvideoタグを囲むdivタグに対応しているため、div内のvideoを取るロジックになっている。

``` js
let videoDiv = document.getElementById($parameters.VideoWidgetId);
if (videoDiv) videoDiv.querySelector("video").load();
```

# ShowPassword Action変更
ShowPasswordの新バージョンが追加され（以前のものはDEPRECATED_を付けたうえで残っている）、Input ParameterにWidgetIdが増えた。

つまり、以下のようにInput Type=PasswordのInputが2つあるとき、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/38f79591-9692-8835-37dd-33f277c644fa.png)

上のInputのIdをパラメータにしてShowPasswordを呼ぶと、対象のInputだけ入力した文字列がマスクされずに表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/aeb937a1-f2e7-246c-0ef1-ffee3f19c41f.png)

なお、同じActionをもう一度呼ぶと、再びマスクされる。

# その他
いくつかのPatternにAccessibility改善が入っている。Screen Readerで読み上げなくてよい要素を読み上げないようになった、とか。
OutSystems UIモジュール内で以下の背景を黄色にした言語がMultilingual Locales対応になった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/46d63d66-b423-d9be-a739-b401f520784f.png)