Glimmer DSL for SWT Table Cell Data-Binding of Background/Foreground/Font/Image
Tags: ruby, desktop, gui, dsl
Published: 2022-09-02 15:40:40

[Glimmer](https://github.com/AndyObtiva/glimmer) was the first software library to enable declarative bidirectional data-binding of a [table](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#table) to a simple Presenter/Model collection with a single line of code (without using a visual designer/GUI)!

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

([table items](https://help.eclipse.org/latest/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/widgets/TableItem.html) [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`)

![table](https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-swt/master/images/glimmer-contact-manager.png)

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](https://github.com/AndyObtiva/glimmer-dsl-swt/tree/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](https://github.com/AndyObtiva/glimmer-dsl-swt) software engineers.

In any case, the [Hello, Table! sample](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#hello-table) has been updated to reflect the new enhancements to [table](https://andymaleh.blogspot.com/table) data-binding by coloring booked baseball game table cells green with a white foreground and an italic font:

![table booked rows](https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-swt/master/images/glimmer-hello-table-game-booked-rows.png)

Here is the new and improved [Hello, Table!](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_SAMPLES.md#hello-table) code:

```ruby
# 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
```

In other news, [Glimmer DSL for SWT v4.24.3.1](https://github.com/AndyObtiva/glimmer-dsl-swt/tree/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](https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-swt/master/images/glimmer-hello-code-text-ruby.png)

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

![hello code text zoom in](https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-swt/master/images/glimmer-hello-code-text-zoom-in.png)

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

![hello code text zoom out](https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-swt/master/images/glimmer-hello-code-text-zoom-out.png)

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

![hello code text restore font height](https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-swt/master/images/glimmer-hello-code-text-ruby.png)

Hello, Code Text! Sample Code (Unchanged):

```ruby
# 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
```

[Glimmer](https://github.com/AndyObtiva/glimmer-dsl-swt) on!