Glimmer DSL for SWT Table Cell Data-Binding of Background/Foreground/Font/Image

Glimmer was the first software library to enable declarative bidirectional data-binding of a table to a simple Presenter/Model collection with a single line of code (without using a visual designer/GUI)!

items <=> [@presenter, :contacts, column_properties: [:first_name, :last_name, :email]]

(table items [rows] are bidirectionally data-bound to the `:contacts` attribute on `@presenter` [every contact represents a row], with the columns mapped to `Contact` model properties: `first_name`, `last_name`, and `email`)

Well, I am happy to announce that the same single line of code that data-binds a table does even more now as of the latest release made yesterday! In Glimmer DSL for SWT v4.24.3.0, that line of code also data-binds the following additional table cell properties without any change to the view code: 

• Table cell background color
• Table cell foreground color
• Table cell font
• Table cell image

Data-bound table row models (or presenters) can now optionally supply this data by implementing methods that match the names of the column properties by convention, but with one of the following suffixes: 

• `_background`
• `_foreground`
• `_font`
• `_image` 

For example, for the `first_name` property, the model can additionally implement `first_name_background`, which returns an RGB array (e.g. [24, 148, 240]) in order to set the color of the first_name cell for each model's table row to the specified RGB color. In the same way, `first_name_foreground`, `first_name_font`, and `first_name_image` can optionally be implemented too to specify their extra styling properties if needed. Of course, it would be better to implement presenters that wrap around models to provide these extra details for a cleaner separation of concerns, but I leave that to the discretion of Glimmer DSL for SWT software engineers.

In any case, the Hello, Table! sample has been updated to reflect the new enhancements to table data-binding by coloring booked baseball game table cells green with a white foreground and an italic font:

Here is the new and improved Hello, Table! code:

	# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#hello-table
	require 'glimmer-dsl-swt'
	class HelloTable
	class BaseballGame
	class << self
	attr_accessor :selected_game
	def all_playoff_games
	@all_playoff_games ||= {
	'NLDS' => [
	new(Time.new(2037, 10, 6, 12, 0), 'Chicago Cubs', 'Milwaukee Brewers', 'Free Bobblehead'),
	new(Time.new(2037, 10, 7, 12, 0), 'Chicago Cubs', 'Milwaukee Brewers'),
	new(Time.new(2037, 10, 8, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs'),
	new(Time.new(2037, 10, 9, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs'),
	new(Time.new(2037, 10, 10, 12, 0), 'Milwaukee Brewers', 'Chicago Cubs', 'Free Umbrella'),
	new(Time.new(2037, 10, 6, 18, 0), 'Cincinnati Reds', 'St Louis Cardinals', 'Free Bobblehead'),
	new(Time.new(2037, 10, 7, 18, 0), 'Cincinnati Reds', 'St Louis Cardinals'),
	new(Time.new(2037, 10, 8, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds'),
	new(Time.new(2037, 10, 9, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds'),
	new(Time.new(2037, 10, 10, 18, 0), 'St Louis Cardinals', 'Cincinnati Reds', 'Free Umbrella'),
	],
	'ALDS' => [
	new(Time.new(2037, 10, 6, 12, 0), 'New York Yankees', 'Boston Red Sox', 'Free Bobblehead'),
	new(Time.new(2037, 10, 7, 12, 0), 'New York Yankees', 'Boston Red Sox'),
	new(Time.new(2037, 10, 8, 12, 0), 'Boston Red Sox', 'New York Yankees'),
	new(Time.new(2037, 10, 9, 12, 0), 'Boston Red Sox', 'New York Yankees'),
	new(Time.new(2037, 10, 10, 12, 0), 'Boston Red Sox', 'New York Yankees', 'Free Umbrella'),
	new(Time.new(2037, 10, 6, 18, 0), 'Houston Astros', 'Cleveland Indians', 'Free Bobblehead'),
	new(Time.new(2037, 10, 7, 18, 0), 'Houston Astros', 'Cleveland Indians'),
	new(Time.new(2037, 10, 8, 18, 0), 'Cleveland Indians', 'Houston Astros'),
	new(Time.new(2037, 10, 9, 18, 0), 'Cleveland Indians', 'Houston Astros'),
	new(Time.new(2037, 10, 10, 18, 0), 'Cleveland Indians', 'Houston Astros', 'Free Umbrella'),
	],
	'NLCS' => [
	new(Time.new(2037, 10, 12, 12, 0), 'Chicago Cubs', 'Cincinnati Reds', 'Free Towel'),
	new(Time.new(2037, 10, 13, 12, 0), 'Chicago Cubs', 'Cincinnati Reds'),
	new(Time.new(2037, 10, 14, 12, 0), 'Cincinnati Reds', 'Chicago Cubs'),
	new(Time.new(2037, 10, 15, 18, 0), 'Cincinnati Reds', 'Chicago Cubs'),
	new(Time.new(2037, 10, 16, 18, 0), 'Cincinnati Reds', 'Chicago Cubs'),
	new(Time.new(2037, 10, 17, 18, 0), 'Chicago Cubs', 'Cincinnati Reds'),
	new(Time.new(2037, 10, 18, 12, 0), 'Chicago Cubs', 'Cincinnati Reds', 'Free Poncho'),
	],
	'ALCS' => [
	new(Time.new(2037, 10, 12, 12, 0), 'Houston Astros', 'Boston Red Sox', 'Free Towel'),
	new(Time.new(2037, 10, 13, 12, 0), 'Houston Astros', 'Boston Red Sox'),
	new(Time.new(2037, 10, 14, 12, 0), 'Boston Red Sox', 'Houston Astros'),
	new(Time.new(2037, 10, 15, 18, 0), 'Boston Red Sox', 'Houston Astros'),
	new(Time.new(2037, 10, 16, 18, 0), 'Boston Red Sox', 'Houston Astros'),
	new(Time.new(2037, 10, 17, 18, 0), 'Houston Astros', 'Boston Red Sox'),
	new(Time.new(2037, 10, 18, 12, 0), 'Houston Astros', 'Boston Red Sox', 'Free Poncho'),
	],
	'World Series' => [
	new(Time.new(2037, 10, 20, 18, 0), 'Chicago Cubs', 'Boston Red Sox', 'Free Baseball Cap'),
	new(Time.new(2037, 10, 21, 18, 0), 'Chicago Cubs', 'Boston Red Sox'),
	new(Time.new(2037, 10, 22, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
	new(Time.new(2037, 10, 23, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
	new(Time.new(2037, 10, 24, 18, 0), 'Boston Red Sox', 'Chicago Cubs'),
	new(Time.new(2037, 10, 25, 18, 0), 'Chicago Cubs', 'Boston Red Sox'),
	new(Time.new(2037, 10, 26, 18, 0), 'Chicago Cubs', 'Boston Red Sox', 'Free World Series Polo'),
	]
	}
	end
	def playoff_type
	@playoff_type ||= 'World Series'
	end
	def playoff_type=(new_playoff_type)
	@playoff_type = new_playoff_type
	self.schedule=(all_playoff_games[@playoff_type])
	self.selected_game = schedule.first unless selected_game.nil?
	end
	def playoff_type_options
	all_playoff_games.keys
	end
	def schedule
	@schedule ||= all_playoff_games[playoff_type]
	end
	def schedule=(new_schedule)
	@schedule = new_schedule
	end
	end
	include Glimmer
	include Glimmer::DataBinding::ObservableModel
	TEAM_BALLPARKS = {
	'Boston Red Sox' => 'Fenway Park',
	'Chicago Cubs' => 'Wrigley Field',
	'Cincinnati Reds' => 'Great American Ball Park',
	'Cleveland Indians' => 'Progressive Field',
	'Houston Astros' => 'Minute Maid Park',
	'Milwaukee Brewers' => 'Miller Park',
	'New York Yankees' => 'Yankee Stadium',
	'St Louis Cardinals' => 'Busch Stadium',
	}
	ATTRIBUTES = [:game_date, :game_time, :home_team, :away_team, :ballpark, :promotion]
	ATTRIBUTES_BACKGROUND = ATTRIBUTES.map {|attribute| "#{attribute}_background"}
	ATTRIBUTES_FOREGROUND = ATTRIBUTES.map {|attribute| "#{attribute}_foreground"}
	ATTRIBUTES_FONT = ATTRIBUTES.map {|attribute| "#{attribute}_font"}
	ATTRIBUTES_IMAGE = ATTRIBUTES.map {|attribute| "#{attribute}_image"}
	attr_accessor *([:booked, :date_time] + ATTRIBUTES + ATTRIBUTES_BACKGROUND + ATTRIBUTES_FOREGROUND + ATTRIBUTES_FONT + ATTRIBUTES_IMAGE)
	alias booked? booked
	def initialize(date_time, home_team, away_team, promotion = 'N/A')
	self.date_time = date_time
	self.home_team = home_team
	self.away_team = away_team
	self.promotion = promotion
	self.ballpark_image = [File.expand_path('hello_table/baseball_park.png', __dir__), width: 20, height: 20]
	self.booked = false
	observe(self, :date_time) do |new_value|
	notify_observers(:game_time)
	end
	end
	def home_team=(home_team_value)
	if home_team_value != away_team
	@home_team = home_team_value
	self.ballpark = TEAM_BALLPARKS[@home_team]
	end
	end
	def away_team=(away_team_value)
	if away_team_value != home_team
	@away_team = away_team_value
	end
	end
	def date
	Date.new(date_time.year, date_time.month, date_time.day)
	end
	def time
	Time.new(0, 1, 1, date_time.hour, date_time.min, date_time.sec, '+00:00')
	end
	def game_date
	date_time.strftime("%m/%d/%Y")
	end
	def game_time
	date_time.strftime("%I:%M %p")
	end
	def home_team_options
	TEAM_BALLPARKS.keys
	end
	def away_team_options
	TEAM_BALLPARKS.keys
	end
	def ballpark_options
	[TEAM_BALLPARKS[@home_team], TEAM_BALLPARKS[@away_team]]
	end
	def to_s
	"#{home_team} vs #{away_team} at #{ballpark} on #{game_date} #{game_time}"
	end
	def book!
	self.booked = true
	self.background = :dark_green
	self.foreground = :white
	self.font = {style: :italic}
	"Thank you for booking #{to_s}"
	end
	# Sets background for all attributes
	def background=(color)
	self.game_date_background = color
	self.game_time_background = color
	self.home_team_background = color
	self.away_team_background = color
	self.ballpark_background = color
	self.promotion_background = color
	end
	# Sets foreground for all attributes
	def foreground=(color)
	self.game_date_foreground = color
	self.game_time_foreground = color
	self.home_team_foreground = color
	self.away_team_foreground = color
	self.ballpark_foreground = color
	self.promotion_foreground = color
	end
	# Sets font for all attributes
	def font=(font_properties)
	self.game_date_font = font_properties
	self.game_time_font = font_properties
	self.home_team_font = font_properties
	self.away_team_font = font_properties
	self.ballpark_font = font_properties
	self.promotion_font = font_properties
	end
	end
	include Glimmer::UI::CustomShell
	before_body do
	Display.app_name = 'Hello, Table!'
	end
	body {
	shell {
	grid_layout
	text 'Hello, Table!'
	background_image File.expand_path('hello_table/baseball_park.png', __dir__)
	image File.expand_path('hello_table/baseball_park.png', __dir__)
	label {
	layout_data :center, :center, true, false
	text 'BASEBALL PLAYOFF SCHEDULE'
	background :transparent if OS.windows?
	foreground rgb(94, 107, 103)
	font name: 'Optima', height: 38, style: :bold
	}
	combo(:read_only) {
	layout_data :center, :center, true, false
	selection <=> [BaseballGame, :playoff_type]
	font height: 14
	}
	table(:editable) { |table_proxy|
	layout_data :fill, :fill, true, true
	table_column {
	text 'Game Date'
	width 150
	sort_property :date # ensure sorting by real date value (not `game_date` string specified in items below)
	editor :date_drop_down, property: :date_time
	}
	table_column {
	text 'Game Time'
	width 150
	sort_property :time # ensure sorting by real time value (not `game_time` string specified in items below)
	editor :time, property: :date_time
	}
	table_column {
	text 'Ballpark'
	width 180
	editor :none
	}
	table_column {
	text 'Home Team'
	width 150
	editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
	}
	table_column {
	text 'Away Team'
	width 150
	editor :combo, :read_only # read_only is simply an SWT style passed to combo widget
	}
	table_column {
	text 'Promotion'
	width 150
	# default text editor is used here
	}
	# This is a contextual pop up menu that shows up when right-clicking table rows
	menu {
	menu_item {
	text 'Book'
	on_widget_selected do
	book_selected_game
	end
	}
	}
	# Data-bind table items (rows) to a model collection (BaseballGame.schedule),
	# mapping columns in declaration order to row model properties (attributes)
	# By convention, every column property can be accompanied by extra properties
	# with the following suffixes: `_background`, `_foreground`, `_font`, and `_image`
	# For example, for `game_date`, model could also implement these related properties:
	# `game_date_background`, `game_date_foreground`, `game_date_font`, `game_date_image`
	# That is done in order to let the table widget set extra properties if needed.
	items <=> [BaseballGame, :schedule, column_properties: [:game_date, :game_time, :ballpark, :home_team, :away_team, :promotion]]
	# Data-bind table selection
	selection <=> [BaseballGame, :selected_game]
	# Default initial sort property
	sort_property :date
	# Sort by these additional properties after handling sort by the column the user clicked
	additional_sort_properties :date, :time, :home_team, :away_team, :ballpark, :promotion
	on_key_pressed do |key_event|
	book_selected_game if key_event.keyCode == swt(:cr)
	end
	}
	button {
	text 'Book Selected Game'
	layout_data :center, :center, true, false
	font height: 14
	enabled <= [BaseballGame, 'selected_game.booked', on_read: ->(value) { value == false }]
	on_widget_selected do
	book_selected_game
	end
	}
	}
	}
	def book_selected_game
	return if BaseballGame.selected_game.booked?
	message_box {
	text 'Baseball Game Booked!'
	message BaseballGame.selected_game.book!
	}.open
	end
	end
	HelloTable.launch

view raw glimmer-dsl-swt-4-24-3-0-hello-table.rb hosted with ❤ by GitHub

In other news, Glimmer DSL for SWT v4.24.3.1 ships with `code_text` default behavior support for:

• Zoom In: Bump font height up by 1 via keyboard shortcut: CMD+= on Mac and CTRL+= on Windows/Linux
• Zoom Out: Bump font height up by 1 via keyboard shortcut: CMD+- on Mac and CTRL+- on Windows/Linux
• Restore Original Font Height: Restore font height to original value before performing any zoom ins or outs via keyboard shortcut: CMD+0 on Mac and CTRL+0 on Windows/Linux

Original Hello, Code Text

Hello, Code Text with Zoom In 5 Times (via CMD+= Mac Shortcut)

Hello, Code Text with Zoom Out 5 Times (via CMD+- Mac Shortcut)

Hello, Code Text with Restore Original Font Height (via CMD+0 Mac Shortcut)

Hello, Code Text! Sample Code (Unchanged):

	# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#hello-code-text
	require 'glimmer-dsl-swt'
	class HelloCodeText
	include Glimmer::UI::CustomShell
	attr_accessor :ruby_code, :js_code, :html_code
	before_body do
	self.ruby_code = <<~RUBY
	greeting = 'Hello, World!'
	include Glimmer
	shell {
	text 'Glimmer'
	label {
	text greeting
	font height: 30, style: :bold
	}
	}.open
	RUBY
	self.js_code = <<~JS
	function greet(greeting) {
	alert(greeting);
	}
	var greetingString = 'Hello, World!';
	greet(greetingString);
	var moreGreetings = ['Howdy!', 'Aloha!', 'Hey!']
	for(var greeting of moreGreetings) {
	greet(greeting)
	}
	JS
	self.html_code = <<~HTML
	<html>
	<body>
	<section class="accordion">
	<form method="post" id="name">
	<label for="name">
	Name
	</label>
	<input name="name" type="text" />
	<input type="submit" />
	</form>
	</section>
	</body>
	</html>
	HTML
	end
	body {
	shell {
	minimum_size 640, 480
	text 'Hello, Code Text!'
	tab_folder {
	tab_item {
	fill_layout
	text 'Ruby (glimmer theme)'
	# Note: code_text theme is currently ignored in dark mode
	code_text(language: 'ruby', theme: 'glimmer', lines: true) { # theme is currently ignored in dark mode
	text <=> [self, :ruby_code]
	}
	}
	tab_item {
	fill_layout
	text 'JavaScript (pastie theme)'
	# Note: code_text theme is currently ignored in dark mode
	code_text(:multi, :h_scroll, :v_scroll, language: 'javascript', theme: 'pastie', lines: {width: 2}) {
	root {
	grid_layout(2, false) {
	margin_width 2
	}
	background Display.system_dark_theme? ? :black : :white
	}
	line_numbers {
	background Display.system_dark_theme? ? :black : :white
	}
	text <=> [self, :js_code]
	}
	}
	tab_item {
	fill_layout
	text 'HTML (github theme)'
	# Note: code_text theme is currently ignored in dark mode
	code_text(language: 'html', theme: 'github') { # default is lines: false
	text <=> [self, :html_code]
	}
	}
	}
	}
	}
	end
	HelloCodeText.launch

view raw glimmer-dsl-swt-hello-code-text.rb hosted with ❤ by GitHub

Glimmer on!