-
- いいね！2
GrapeCity謹製の高級グリッドコンポーネント・Wijmo FlexGrid / MultiRowについて、酔いどれ気分で思いの丈をつらつら呟いてみる
発端は、せっかくの多機能コンポーネントにも関わらず、アプリへの組み込みが残念な実装をたまたま見つけてしまい、なんとか手当てが必要だと思ったから。
たーせる
@tercel_s
#Wijmoの#FlexGridを組み込んだ際の実装が甘く、操作感がいまいちだ。 Grid全体のサイズがビューポートよりも大きく、スクロールが表示されているケースにおいて、TabキーやEnterキーでセル内のフォーカス移動をしてもスクロールが追従しない問題に悩まされている。
2019-04-10 22:50:36
たーせる
@tercel_s
これ、前任者がろくにAPIを調べもせず、てきとうに実装した結果起きた悲劇だと思う(´･ω･`) とにかくUIの手触りが悪いのだ。決して#Wijmo自体のせいではなく、それを組み込んだプログラマがきちんとモノを調べない人だったのだろう……とコードを見ていて感じた。
2019-04-10 23:21:38
たーせる
@tercel_s
昨日の問題は、FlexGrid#scrollIntoView() で速攻解決した。 やはり行き詰まったらきちんと寝て起きるに限る。
2019-04-11 23:09:15マウスレス操作について、大いに語る
たーせる
@tercel_s
決してGrapeCity社のサンプルをディスってるわけではなく、きっかけは弊社内で#FlexGridを組み込んだ箇所のコードレビューをした際に「残念だなー」と思ったから。 仮にもアプリとして売り物にするコードをサンプルからコピペ実装しただけで、顧客要件に合わせてチューニングもしないのはダメだね。 twitter.com/tercel_s/statu…
2019-04-12 22:31:53
たーせる
@tercel_s
アプリで「酔いどれ気分でGrapeCity謹製のWijmoを語る」をトゥギャりました。 togetter.com/li/1337089
2019-04-12 01:04:01顧客から「キーボードだけでグリッドの入力操作を行えるようにしてほしい」という要望は意外と多い。 こうした要望にきちんと応えるには、かなり入念なチューニング作業が必要である。
たーせる
@tercel_s
[#FlexGrid] Tabキーでグリッド外にフォーカスを遷移する方法 - これ実はバグってるよ。 dev.grapecity.co.jp/support/kb/det…
2019-04-11 23:23:12
たーせる
@tercel_s
たとえばFlexGrid#selectionMode に Row を設定し、さらに FlexGrid#keyActionTab を MoveDown にした上で、上記のコードを適用したとする。 すると、「下から2行目」でTabを押したときに、「最下行にフォーカスが移った直後にグリッド外のコンポーネントにフォーカスが移る」現象が発生する。
2019-04-11 23:23:13
たーせる
@tercel_s
これは、FlexGrid#keyActionTabが内部的に引き起こすFlexGrid#selectionChangedイベントと、手組みしたkeydownイベントリスナーが競合するせいだ。 順番的にはselectionChangedが勝つ。というか、selectionChangedが動いたときにはkeydownを動かしたくない。
2019-04-11 23:23:13
たーせる
@tercel_s
このような場合の対策としては、selectionChangedの冒頭で、gridに対するkeydownをremoveEventListener()で外し、selectionChangedを抜ける直前に再度addEventListener()すればよい。
2019-04-11 23:23:14itemFormatterを用いたセルの外観設定について、語る
GrapeCityのデモページにはitemFormatterの利用例が豊富に掲載されているが、安易な選択には注意が必要。 その実装で本当に顧客要件を満たせますか？
たーせる
@tercel_s
[#FlexGrid] セルにラジオボタンを表示する方法 - これも惜しい。FlexGrid#itemFormatterやformatItem()を用いて入力コンポーネントを配置すると、セル上に配置されたコンポーネントにフォーカスを奪われることがある。 dev.grapecity.co.jp/support/kb/det…
2019-04-11 23:28:54
ちょっと色気を出して、カスタマイズした入力コンポーネントをセルに配置した瞬間に、“マウスレス操作実現”のハードルは劇的に上がってしまう。
たーせる
@tercel_s
セル上の入力コンポーネントにフォーカスを奪われると、それまでキーボードのTabやEnterや矢印キーでセル移動できていたのに、いきなり特定のコンポーネント上で立ち往生してしまう。 キーボードメインで操作する顧客要件がある場合、これを対象せずに放置するとかなり満足度が下がるぞ。
2019-04-11 23:34:23
たーせる
@tercel_s
#FlexGrid×#Angularネタ。 itemFormatterで設定できる外観は、ピュアなHTMLタグのみ。Angularのコンポーネントを直接配置するのはNG。 また、なにかのイベントを紐付けようとするときも嵌る。 たとえばグリッドをホストしているコンポーネントクラスのメソッドは直接呼べない。
2019-04-11 23:48:07カスタムエディタについて、語る
かなりマニアックなソリューションだが、セル内でどうしてもテキスト入力コンポーネントを利用したい場合はカスタムエディタを使うべき。
たーせる
@tercel_s
[#FlexGrid] カスタムエディタ - セルにテキスト入力コンポーネントを配置するためのベストプラクティスはコレだと思っている。 コンボボックスやオートコンプリートの類もこれ一択。 demo.grapecity.com/wijmo/5/Sample…
2019-04-11 23:53:12