4D View Pro: 表組みのスタイルをカスタマイズ

表組みは、4D View Pro ドキュメントに不可欠な要素です。そのため、4D のリリースを通じて、多くの表組み関連の機能を提供してきました。4D v19 R8 では、ドキュメントの一部として表の見た目がフィットするように、スタイル関連の新機能が追加されました。

新しい VP Set table theme コマンドを使えば、規定の表テーマをプログラミングで適用することができます。もし、これらの規定テーマがニーズに合わない場合は、独自のテーマを定義して表組みに適用できます。

HDI: 4D View Pro: 表組みとテーマ

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 とドキュメントを参照してください。