表組みは、4D View Pro ドキュメントに不可欠な要素です。そのため、4D のリリースを通じて、多くの表組み関連の機能を提供してきました。4D v19 R8 では、ドキュメントの一部として表の見た目がフィットするように、スタイル関連の新機能が追加されました。
新しい VP Set table theme コマンドを使えば、規定の表テーマをプログラミングで適用することができます。もし、これらの規定テーマがニーズに合わない場合は、独自のテーマを定義して表組みに適用できます。
SpreadJS には 60以上のテーマが定義されています:
- “dark1” から “dark11”
- “light1” から “light21”
- “medium1” から “medium28”
- “professional1” から “professional24”
これらのテーマでテーブルを作成するには、VP CREATE TABLE コマンドで指定します:
$parameter:=New object
$parameter.theme:="dark10"
VP CREATE TABLE(VP Cells("ViewProArea"; 2; 1; 3; 1); "myTable"; "people"; $parameter)
同様に、既存の表組みのテーマを変更するには、VP SET TABLE THEME で指定します:
$parameter:=cs.ViewPro.TableThemeOptions
$parameter.theme:="medium2"
VP SET TABLE THEME("ViewProArea"; "myTable"; $parameter)
リボンインターフェースからも、dark (濃色)、light (淡色)、medium (中間) テーマを設定してテストすることができます:
カスタマイズされたテーマを作成する
定義済みテーマがニーズに合わない場合、テーマを自分で作成することができます。列、行、ヘッダー、フッターにそれぞれスタイルを定義することができます。
たとえば、このような交互の列表示をしたい場合:
次の手順が必要です:
- .bandColumns (列の交互のスタイル) を true に設定します:
$param:=cs.ViewPro.TableTheme.new()
$param.bandColumns:=True
$param.bandRows:=False
- ヘッダーのスタイルを作成します:
$styleHeader:=cs.ViewPro.TableStyle.new()
$styleHeader.backColor:="rgb(255,228,92)"
$styleHeader.foreColor:="rgb(3,4,94)"
$param.theme:=cs.ViewPro.TableThemeOptions.new()
$param.theme.headerRowStyle:=$styleHeader
- 交互の列スタイルを作成します:
$styleColumn1:=cs.ViewPro.TableStyle.new()
$styleColumn1.backColor:="#0077B6"
$styleColumn1.foreColor:="#03045E"
$param.theme.firstColumnStripStyle:=$styleColumn1
$styleColumn2:=cs.ViewPro.TableStyle.new()
$styleColumn2.backColor:="#CAF0F8"
$styleColumn2.foreColor:="#03045E"
$param.theme.secondColumnStripStyle:=$styleColumn2
- VP SET TABLE NAME で、新しいテーマを適用します:
VP SET TABLE THEME("ViewProArea"; "myTable"; $param)これで完了です!
この機能については、上記の HDI とドキュメントを参照してください。