OutSystemsUIのAdaptiveフォルダには、Columnで始まるBlockがいくつかあります。
このBlock内に配置したコンテンツは、狭い画面では自動的に表示方法を調整してくれます。
その仕組みを調べてみました。
環境
Personal Environment(Version 11.0.606.0)
Service Studio(Version 11.6.21)
OutSystemsUI(Version 2.2.7)
Adaptive Pattern
OutSystemsのUIにおけるAdaptive Patternは、端末の種類(PC、タブレット、スマートフォン)に応じて表示方法を変えられるBlockです。
以下のように、Input Parameterに、タブレットのときの表示方法、スマートフォンのときの表示方法を指定します。
Static Entity BreakColumnsの値で設定します。
端末の判別
OutSystemsUIのClient Acction GetDeviceTypeで、"phone"/"tablet"/"desktop"のいずれかが帰ります。
この値は、bodyタグについたclassから取得しています。
このclassはどこで設定されているかというと、Silk UI(Version 10)のときの資料に記載がありました(下の参考リンク参照)。
ページ初期表示時点でJavaScriptが動いて端末の種類や画面幅を取得し、CookieやSessionに保持されるようです。サーバからHTMLページとしてレンダリングされるときに、取得した値から端末の種類をclassに書き込む仕組み。
実行イメージ
Column3 を使って、タブレットならBreakColumns.Middle、スマートフォンなら、BreakColumns.Allを設定します。Column3のそれぞれに、Containerをおいて、各Columnがどこで折り返されているかを確認します。
端末種別のシミュレーションには、Chromeの開発者ツールのdevice toolbarを使っています。
desktop(PCサイズ)
table(タブレットサイズ)
phone(スマートフォンサイズ)
動作の仕組み
Column3は、実行時に以下のタグとして出力されます。
<div data-container="" class="columns columns3 gutter-base tablet-break-middle phone-break-all ">
TableBehaviorに設定したEntities.BreakColumns.Middleがclass tablet-break-middleに、PhoneBehaviorに設定したEntities.BreakColumns.Allがclass phone-break-allとして出力されます。
OutSystemsUIが提供するCSSの設定で、このclassをつけたColumns Patter内の各列の幅等を指定して折返しを実現しています。
参考リンク
古い(バージョン10時のUI Framework Silk UI向け)ですが、
Columns Responsive Behavior