glimmer-dsl-libui 0.4.4 → 0.4.8

data/README.md

@@ -1,9 +1,9 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.4.4
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.4.8
 ## Prerequisite-Free Ruby Desktop Development GUI Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-libui.svg)](http://badge.fury.io/rb/glimmer-dsl-libui)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [LibUI](https://github.com/kojix2/LibUI) is a prerequisite-free Ruby desktop development GUI library. No need to pre-install any prerequisites. Just install the gem and have platform-independent native GUI that just works!
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [LibUI](https://github.com/kojix2/LibUI) is a prerequisite-free Ruby desktop development GUI (Graphical User Interface) library. No need to pre-install any prerequisites. Just install the [gem](https://rubygems.org/gems/glimmer-dsl-libui) and have platform-independent native GUI that just works!
 
 Mac | Windows | Linux
 ----|---------|------
@@ -373,7 +373,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.4.4'
+gem 'glimmer-dsl-libui', '~> 0.4.8'
 ```
 
 Add `require 'glimmer-dsl-libui'` at the top, and then `include Glimmer` into the top-level main object for testing or into an actual class for serious usage.
@@ -460,7 +460,7 @@ Keyword(Args) | Properties | Listeners
 `checkbox_text_column(name as String)` | `editable` (Boolean), `editable_checkbox` (Boolean), `editable_text` (Boolean) | None
 `checkbox_text_color_column(name as String)` | `editable` (Boolean), `editable_checkbox` (Boolean), `editable_text` (Boolean) | None
 `check_menu_item(text as String)` | `checked` (Boolean) | `on_clicked`
-`combobox` | `items` (`Array` of `String`), `selected` (`Integer`) | `on_selected`
+`combobox` | `items` (`Array` of `String`), `selected` (`Integer`), `selected_item` (`String`) | `on_selected`
 `color_button` | `color` (Array of `red` as `Float`, `green` as `Float`, `blue` as `Float`, `alpha` as `Float`), `red` as `Float`, `green` as `Float`, `blue` as `Float`, `alpha` as `Float` | `on_changed`
 `date_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`, `mday` as `Integer`, `mon` as `Integer`, `year` as `Integer`, `wday` as `Integer`, `yday` as `Integer`, `dst` as Boolean) | `on_changed`
 `date_time_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`, `mday` as `Integer`, `mon` as `Integer`, `year` as `Integer`, `wday` as `Integer`, `yday` as `Integer`, `dst` as Boolean) | `on_changed`
@@ -620,93 +620,112 @@ Example (you may copy/paste in [`girb`](#girb-glimmer-irb)):
 ```ruby
 require 'glimmer-dsl-libui'
 
-include Glimmer
-
-data = [
-  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
-  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
-  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
-  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
-  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
-]
-
-window('Contacts', 600, 600) { |w|
-  margined true
+class FormTable
+  include Glimmer
   
-  vertical_box {
-    form {
-      stretchy false
-      
-      @name_entry = entry {
-        label 'Name'
-      }
-      @email_entry = entry {
-        label 'Email'
-      }
-      @phone_entry = entry {
-        label 'Phone'
-      }
-      @city_entry = entry {
-        label 'City'
-      }
-      @state_entry = entry {
-        label 'State'
-      }
-    }
-    
-    button('Save Contact') {
-      stretchy false
-      
-      on_clicked do
-        new_row = [@name_entry.text, @email_entry.text, @phone_entry.text, @city_entry.text, @state_entry.text]
-        if new_row.include?('')
-          msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
-        else
-          data << new_row # automatically inserts a row into the table due to implicit data-binding
-          @unfiltered_data = data.dup
-          @name_entry.text = ''
-          @email_entry.text = ''
-          @phone_entry.text = ''
-          @city_entry.text = ''
-          @state_entry.text = ''
-        end
-      end
-    }
-    
-    search_entry { |se|
-      stretchy false
+  attr_accessor :name, :email, :phone, :city, :state, :filter_value
+  
+  def initialize
+    @data = [
+      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
+      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
+      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
+      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
+      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 600) { |w|
+      margined true
       
-      on_changed do
-        filter_value = se.text
-        @unfiltered_data ||= data.dup
-        # Unfilter first to remove any previous filters
-        data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
-        # Now, apply filter if entered
-        unless filter_value.empty?
-          data.filter! do |row_data| # affects table indirectly through implicit data-binding
-            row_data.any? do |cell|
-              cell.to_s.downcase.include?(filter_value.downcase)
+      vertical_box {
+        form {
+          stretchy false
+          
+          entry {
+            label 'Name'
+            text <=> [self, :name]
+          }
+          
+          entry {
+            label 'Email'
+            text <=> [self, :email]
+          }
+          
+          entry {
+            label 'Phone'
+            text <=> [self, :phone]
+          }
+          
+          entry {
+            label 'City'
+            text <=> [self, :city]
+          }
+          
+          entry {
+            label 'State'
+            text <=> [self, :state]
+          }
+        }
+        
+        button('Save Contact') {
+          stretchy false
+          
+          on_clicked do
+            new_row = [name, email, phone, city, state]
+            if new_row.include?('')
+              msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
+            else
+              @data << new_row # automatically inserts a row into the table due to implicit data-binding
+              @unfiltered_data = @data.dup
+              self.name = '' # automatically clears name entry through explicit data-binding
+              self.email = ''
+              self.phone = ''
+              self.city = ''
+              self.state = ''
             end
           end
-        end
-      end
-    }
+        }
+        
+        search_entry {
+          stretchy false
+          text <=> [self, :filter_value, # bidirectional data-binding of text to self.filter_value with after_write option
+            after_write: ->(filter_value) { # execute after write to self.filter_value
+              @unfiltered_data ||= @data.dup
+              # Unfilter first to remove any previous filters
+              @data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
+              # Now, apply filter if entered
+              unless filter_value.empty?
+                @data.filter! do |row_data| # affects table indirectly through implicit data-binding
+                  row_data.any? do |cell|
+                    cell.to_s.downcase.include?(filter_value.downcase)
+                  end
+                end
+              end
+            }
+          ]
+        }
+        
+        table {
+          text_column('Name')
+          text_column('Email')
+          text_column('Phone')
+          text_column('City')
+          text_column('State')
     
-    table {
-      text_column('Name')
-      text_column('Email')
-      text_column('Phone')
-      text_column('City')
-      text_column('State')
+          cell_rows @data # implicit data-binding
+          
+          on_changed do |row, type, row_data|
+            puts "Row #{row} #{type}: #{row_data}"
+          end
+        }
+      }
+    }.show
+  end
+end
 
-      cell_rows data # implicit data-binding
-      
-      on_changed do |row, type, row_data|
-        puts "Row #{row} #{type}: #{row_data}"
-      end
-    }
-  }
-}.show
+FormTable.new.launch
 ```
 
 ![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png)
@@ -1363,10 +1382,23 @@ Data-binding supports utilizing the [MVP (Model View Presenter)](https://en.wiki
 ![MVP](https://www.researchgate.net/profile/Gilles-Perrouin/publication/320249584/figure/fig8/AS:668260987068418@1536337243385/Model-view-presenter-architecture.png)
 
 [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) supports bidirectional (two-way) data-binding of the following controls/properties via the `<=>` operator (indicating data is moving in both directions between View and Model):
-- `entry` `text` property
-- `multiline_entry` `text` property
-- `non_wrapping_multiline_entry` `text` property
-- `search_entry` `text` property
+- `checkbox`: `checked`
+- `check_menu_item`: `checked`
+- `color_button`: `color`
+- `combobox`: `selected`, `selected_item`
+- `date_picker`: `time`
+- `date_time_picker`: `time`
+- `editable_combobox`: `text`
+- `entry`: `text`
+- `font_button`: `font`
+- `multiline_entry`: `text`
+- `non_wrapping_multiline_entry`: `text`
+- `radio_buttons`: `selected`
+- `radio_menu_item`: `checked`
+- `search_entry`: `text`
+- `slider`: `value`
+- `spinbox`: `value`
+- `time_picker`: `time`
 
 Example of bidirectional data-binding:
 
@@ -1416,6 +1448,11 @@ To summarize the data-binding API:
 
 This is also known as the [Glimmer Shine](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#shine) syntax for data-binding, a [Glimmer](https://github.com/AndyObtiva/glimmer)-only unique innovation that takes advantage of [Ruby](https://www.ruby-lang.org/en/)'s highly expressive syntax and malleable DSL support.
 
+Data-bound model attribute can be:
+- **Direct:** `Symbol` representing attribute reader/writer (e.g. `[person, :name`])
+- **Nested:** `String` representing nested attribute path (e.g. `[company, 'address.street']`). That results in "nested data-binding"
+- **Indexed:** `String` containing array attribute index (e.g. `[customer, 'addresses[0].street']`). That results in "indexed data-binding"
+
 Data-binding options include:
 - `before_read {|value| ...}`: performs an operation before reading data from Model to update the View.
 - `on_read {|value| ...}`: converts value read from Model to update the View.
@@ -1423,7 +1460,7 @@ Data-binding options include:
 - `before_write {|value| ...}`: performs an operation before writing data to Model from View.
 - `on_write {|value| ...}`: converts value read from View to update the Model.
 - `after_write {|converted_value| ...}`: performs an operation after writing to Model from View.
-- `computed_by attribute` or `computed_by [attribute1, attribute2, ...]`: indicates model attribute is computed from specified attribute(s), thus updated when they are updated (see in [Login example version 2](/examples/login2.rb))
+- `computed_by attribute` or `computed_by [attribute1, attribute2, ...]`: indicates model attribute is computed from specified attribute(s), thus updated when they are updated (see in [Login example version 2](/examples/login2.rb)). That is known as "computed data-binding".
 
 Note that with both `on_read` and `on_write` converters, you could pass a `Symbol` representing the name of a method on the value object to invoke.
 
@@ -1435,7 +1472,9 @@ entry {
 }
 ```
 
-Gotcha: never data-bind a control property to an attribute on the same view object with the same exact name (e.g. binding `entry` `text` property to `self` `text` attribute) as it would conflict with it. Instead, data-bind view property to an attribute with a different name on the view object or with the same name, but on a presenter or model object (e.g. data-bind `entry` `text` to `self` `legal_text` attribute or to `contract` model `text` attribute)
+Data-binding gotchas:
+- Never data-bind a control property to an attribute on the same view object with the same exact name (e.g. binding `entry` `text` property to `self` `text` attribute) as it would conflict with it. Instead, data-bind view property to an attribute with a different name on the view object or with the same name, but on a presenter or model object (e.g. data-bind `entry` `text` to `self` `legal_text` attribute or to `contract` model `text` attribute)
+- Data-binding a property utilizes the control's listener associated with the property (e.g. `on_changed` for `entry` `text`), so you cannot hook into the listener directly anymore as that would negate data-binding. Instead, you can add an `after_write: ->(val) {}` option to perform something on trigger of the control listener instead.
 
 Learn more from data-binding usage in [Login](#login) (4 data-binding versions), [Basic Entry](#basic-entry), [Form](#form), [Form Table](#form-table), [Method-Based Custom Keyword](#method-based-custom-keyword), [Snake](#snake) and [Tic Tac Toe](#tic_tac_toe) examples.
 
@@ -1853,7 +1892,7 @@ Example:
 
 ## Examples
 
-The following examples include reimplementions of the examples in the [LibUI](https://github.com/kojix2/LibUI) project utilizing the [Glimmer GUI DSL](#glimmer-gui-dsl-concepts) as well as brand new examples.
+The following examples include reimplementions of the examples in the [LibUI](https://github.com/kojix2/LibUI) project utilizing the [Glimmer GUI DSL](#glimmer-gui-dsl-concepts) (with and without [data-binding](#data-binding)) as well as brand new examples.
 
 To browse all examples, simply launch the [Meta-Example](examples/meta_example.rb), which lists all examples and displays each example's code when selected. It also enables code editing to facilitate experimentation and learning.
 
@@ -1880,17 +1919,23 @@ New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version
 ```ruby
 require 'glimmer-dsl-libui'
 require 'facets'
+require 'fileutils'
 
 class MetaExample
   include Glimmer
   
+  ADDITIONAL_BASIC_EXAMPLES = ['Color Button', 'Font Button', 'Form', 'Date Time Picker', 'Simple Notepad']
+  
+  attr_accessor :code_text
+  
   def initialize
-    @selected_example_index = 0
+    @selected_example_index = examples_with_versions.index(basic_examples_with_versions.first)
+    @code_text = File.read(file_path_for(selected_example))
   end
   
   def examples
     if @examples.nil?
-      example_files = Dir.glob(File.join(File.expand_path('.', __dir__), '**', '*.rb'))
+      example_files = Dir.glob(File.join(File.expand_path('.', __dir__), '*.rb'))
       example_file_names = example_files.map { |f| File.basename(f, '.rb') }
       example_file_names = example_file_names.reject { |f| f == 'meta_example' || f.match(/\d$/) }
       @examples = example_file_names.map { |f| f.underscore.titlecase }
@@ -1904,12 +1949,20 @@ class MetaExample
     end
   end
   
+  def basic_examples_with_versions
+    examples_with_versions.select {|example| example.start_with?('Basic') || ADDITIONAL_BASIC_EXAMPLES.include?(example) }
+  end
+  
+  def advanced_examples_with_versions
+    examples_with_versions - basic_examples_with_versions
+  end
+  
   def file_path_for(example)
     File.join(File.expand_path('.', __dir__), "#{example.underscore}.rb")
   end
   
   def version_count_for(example)
-    Dir.glob(File.join(File.expand_path('.', __dir__), "#{example.underscore}*.rb")).select {|file| file.match(/\d\.rb$/)}.count + 1
+    Dir.glob(File.join(File.expand_path('.', __dir__), "#{example.underscore}*.rb")).select {|file| file.match(/#{example.underscore}\d\.rb$/)}.count + 1
   end
   
   def glimmer_dsl_libui_file
@@ -1945,17 +1998,47 @@ class MetaExample
         vertical_box {
           stretchy false
           
-          @example_radio_buttons = radio_buttons {
+          tab {
             stretchy false
-            items examples_with_versions
-            selected @selected_example_index
             
-            on_selected do
-              @selected_example_index = @example_radio_buttons.selected
-              example = selected_example
-              @code_entry.text = File.read(file_path_for(example))
-              @version_spinbox.value = 1
-            end
+            tab_item('Basic') {
+              vertical_box {
+                @basic_example_radio_buttons = radio_buttons {
+                  stretchy false
+                  items basic_examples_with_versions
+                  selected basic_examples_with_versions.index(examples_with_versions[@selected_example_index])
+                  
+                  on_selected do
+                    @selected_example_index = examples_with_versions.index(basic_examples_with_versions[@basic_example_radio_buttons.selected])
+                    example = selected_example
+                    self.code_text = File.read(file_path_for(example))
+                    @version_spinbox.value = 1
+                  end
+                }
+                
+                label # filler
+                label # filler
+              }
+            }
+            
+            tab_item('Advanced') {
+              vertical_box {
+                @advanced_example_radio_buttons = radio_buttons {
+                  stretchy false
+                  items advanced_examples_with_versions
+                  
+                  on_selected do
+                    @selected_example_index = examples_with_versions.index(advanced_examples_with_versions[@advanced_example_radio_buttons.selected])
+                    example = selected_example
+                    self.code_text = File.read(file_path_for(example))
+                    @version_spinbox.value = 1
+                  end
+                }
+                
+                label # filler
+                label # filler
+              }
+            }
           }
           
           horizontal_box {
@@ -1973,7 +2056,7 @@ class MetaExample
                 else
                   version_number = @version_spinbox.value == 1 ? '' : @version_spinbox.value
                   example = "#{selected_example}#{version_number}"
-                  @code_entry.text = File.read(file_path_for(example))
+                  self.code_text = File.read(file_path_for(example))
                 end
               end
             }
@@ -1985,9 +2068,15 @@ class MetaExample
             button('Launch') {
               on_clicked do
                 begin
-                  meta_example_file = File.join(Dir.home, '.meta_example.rb')
-                  File.write(meta_example_file, @code_entry.text)
-                  run_example(meta_example_file)
+                  parent_dir = File.join(Dir.home, '.glimmer-dsl-libui', 'examples')
+                  FileUtils.mkdir_p(parent_dir)
+                  example_file = File.join(parent_dir, "#{selected_example.underscore}.rb")
+                  File.write(example_file, code_text)
+                  example_supporting_directory = File.expand_path(selected_example.underscore, __dir__)
+                  FileUtils.cp_r(example_supporting_directory, parent_dir) if Dir.exist?(example_supporting_directory)
+                  FileUtils.cp_r(File.expand_path('../icons', __dir__), File.dirname(parent_dir))
+                  FileUtils.cp_r(File.expand_path('../sounds', __dir__), File.dirname(parent_dir))
+                  run_example(example_file)
                 rescue => e
                   puts e.full_message
                   puts 'Unable to write code changes! Running original example...'
@@ -1997,14 +2086,14 @@ class MetaExample
             }
             button('Reset') {
               on_clicked do
-                @code_entry.text = File.read(file_path_for(selected_example))
+                self.code_text = File.read(file_path_for(selected_example))
               end
             }
           }
         }
         
         @code_entry = non_wrapping_multiline_entry {
-          text File.read(file_path_for(selected_example))
+          text <=> [self, :code_text]
         }
       }
     }.show
@@ -2418,7 +2507,33 @@ UI.quit
 
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class FontButton
+  include Glimmer
+  
+  attr_accessor :font_descriptor
+  
+  def launch
+    window('hello world', 300, 200) {
+      font_button {
+        font <=> [self, :font_descriptor, after_write: -> { p font_descriptor }]
+      }
+      
+      on_closing do
+        puts 'Bye Bye'
+      end
+    }.show
+  end
+end
+
+FontButton.new.launch
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -2459,7 +2574,33 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-color-button.png](images/glimmer-dsl-libui-mac-color-button.png) ![glimmer-dsl-libui-mac-color-button-selection.png](images/glimmer-dsl-libui-mac-color-button-selection.png) | ![glimmer-dsl-libui-windows-color-button.png](images/glimmer-dsl-libui-windows-color-button.png) ![glimmer-dsl-libui-windows-color-button-selection.png](images/glimmer-dsl-libui-windows-color-button-selection.png) | ![glimmer-dsl-libui-linux-color-button.png](images/glimmer-dsl-libui-linux-color-button.png) ![glimmer-dsl-libui-linux-color-button-selection.png](images/glimmer-dsl-libui-linux-color-button-selection.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class ColorButton
+  include Glimmer
+  
+  attr_accessor :selected_color
+  
+  def initialize
+    @selected_color = :blue
+  end
+  
+  def launch
+    window('color button', 240) {
+      color_button {
+        color <=> [self, :selected_color, after_write: ->(color) {p color}]
+      }
+    }.show
+  end
+end
+
+ColorButton.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -2541,20 +2682,48 @@ UI.main
 UI.quit
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
 
-include Glimmer
-
-window('Date Time Pickers', 300, 200) {
-  vertical_box {
-    date_time_picker { |dtp|
-      on_changed do
-        time = dtp.time
-        p time
-      end
+class DateTimePicker
+  include Glimmer
+  
+  attr_accessor :picked_time
+  
+  def launch
+    window('Date Time Pickers', 300, 200) {
+      vertical_box {
+        date_time_picker {
+          time <=> [self, :picked_time, after_write: ->(time) { p time }]
+        }
+      }
+      
+      on_closing do
+        puts 'Bye Bye'
+      end
+    }.show
+  end
+end
+
+DateTimePicker.new.launch
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Date Time Pickers', 300, 200) {
+  vertical_box {
+    date_time_picker { |dtp|
+      on_changed do
+        time = dtp.time
+        p time
+      end
     }
   }
   
@@ -4878,7 +5047,8 @@ class ButtonCounter
   def launch
     window('Hello, Button!') {
       button {
-        text <= [self, :count, on_read: ->(count) {"Count: #{count}"}] # data-bind button text to self count, converting to string on read.
+        # data-bind button text to self count, converting to string on read.
+        text <= [self, :count, on_read: ->(count) {"Count: #{count}"}]
         
         on_clicked do
           self.count += 1
@@ -5751,7 +5921,96 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-dynamic-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-dynamic-area-updated.png) | ![glimmer-dsl-libui-windows-dynamic-area.png](images/glimmer-dsl-libui-windows-dynamic-area.png) ![glimmer-dsl-libui-windows-dynamic-area-updated.png](images/glimmer-dsl-libui-windows-dynamic-area-updated.png) | ![glimmer-dsl-libui-linux-dynamic-area.png](images/glimmer-dsl-libui-linux-dynamic-area.png) ![glimmer-dsl-libui-linux-dynamic-area-updated.png](images/glimmer-dsl-libui-linux-dynamic-area-updated.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class DynamicArea
+  include Glimmer
+  
+  attr_accessor :rectangle_x, :rectangle_y, :rectangle_width, :rectangle_height, :rectangle_red, :rectangle_green, :rectangle_blue, :rectangle_alpha
+  
+  def initialize
+    @rectangle_x = 25
+    @rectangle_y = 25
+    @rectangle_width = 150
+    @rectangle_height = 150
+    @rectangle_red = 102
+    @rectangle_green = 102
+    @rectangle_blue = 204
+    @rectangle_alpha = 100
+  end
+  
+  def launch
+    window('Dynamic Area', 240, 600) {
+      margined true
+      
+      vertical_box {
+        label('Rectangle Properties') {
+          stretchy false
+        }
+        
+        form {
+          stretchy false
+          
+          spinbox(0, 1000) {
+            label 'x'
+            value <=> [self, :rectangle_x, after_write: -> {@area.queue_redraw_all}]
+          }
+          
+          spinbox(0, 1000) {
+            label 'y'
+            value <=> [self, :rectangle_y, after_write: -> {@area.queue_redraw_all}]
+          }
+          
+          spinbox(0, 1000) {
+            label 'width'
+            value <=> [self, :rectangle_width, after_write: -> {@area.queue_redraw_all}]
+          }
+          
+          spinbox(0, 1000) {
+            label 'height'
+            value <=> [self, :rectangle_height, after_write: -> {@area.queue_redraw_all}]
+          }
+          
+          spinbox(0, 255) {
+            label 'red'
+            value <=> [self, :rectangle_red, after_write: -> {@area.queue_redraw_all}]
+          }
+          
+          spinbox(0, 255) {
+            label 'green'
+            value <=> [self, :rectangle_green, after_write: -> {@area.queue_redraw_all}]
+          }
+          
+          spinbox(0, 255) {
+            label 'blue'
+            value <=> [self, :rectangle_blue, after_write: -> {@area.queue_redraw_all}]
+          }
+          
+          spinbox(0, 100) {
+            label 'alpha'
+            value <=> [self, :rectangle_alpha, after_write: -> {@area.queue_redraw_all}]
+          }
+        }
+        
+        @area = area {
+          on_draw do |area_draw_params|
+            rectangle(rectangle_x, rectangle_y, rectangle_width, rectangle_height) { # a dynamic path is added semi-declaratively inside on_draw block
+              fill r: rectangle_red, g: rectangle_green, b: rectangle_blue, a: rectangle_alpha / 100.0
+            }
+          end
+        }
+      }
+    }.show
+  end
+end
+
+DynamicArea.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -5853,7 +6112,102 @@ window('Dynamic Area', 240, 600) {
 }.show
 ```
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (declarative stable `path` approach):
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (declarative stable `path` approach with [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class DynamicArea
+  include Glimmer
+  
+  attr_accessor :rectangle_x, :rectangle_y, :rectangle_width, :rectangle_height, :rectangle_red, :rectangle_green, :rectangle_blue, :rectangle_alpha
+  
+  def initialize
+    @rectangle_x = 25
+    @rectangle_y = 25
+    @rectangle_width = 150
+    @rectangle_height = 150
+    @rectangle_red = 102
+    @rectangle_green = 102
+    @rectangle_blue = 204
+    @rectangle_alpha = 100
+  end
+  
+  def rectangle_fill
+    { r: rectangle_red, g: rectangle_green, b: rectangle_blue, a: rectangle_alpha / 100.0 }
+  end
+  
+  def launch
+    window('Dynamic Area', 240, 600) {
+      margined true
+      
+      vertical_box {
+        label('Rectangle Properties') {
+          stretchy false
+        }
+        
+        form {
+          stretchy false
+          
+          @x_spinbox = spinbox(0, 1000) {
+            label 'x'
+            value <=> [self, :rectangle_x]
+          }
+          
+          @y_spinbox = spinbox(0, 1000) {
+            label 'y'
+            value <=> [self, :rectangle_y]
+          }
+          
+          @width_spinbox = spinbox(0, 1000) {
+            label 'width'
+            value <=> [self, :rectangle_width]
+          }
+          
+          @height_spinbox = spinbox(0, 1000) {
+            label 'height'
+            value <=> [self, :rectangle_height]
+          }
+          
+          @red_spinbox = spinbox(0, 255) {
+            label 'red'
+            value <=> [self, :rectangle_red]
+          }
+          
+          @green_spinbox = spinbox(0, 255) {
+            label 'green'
+            value <=> [self, :rectangle_green]
+          }
+          
+          @blue_spinbox = spinbox(0, 255) {
+            label 'blue'
+            value <=> [self, :rectangle_blue]
+          }
+          
+          @alpha_spinbox = spinbox(0, 100) {
+            label 'alpha'
+            value <=> [self, :rectangle_alpha]
+          }
+        }
+        
+        area {
+          @rectangle = rectangle { # stable implicit path shape
+            x      <= [self, :rectangle_x]
+            y      <= [self, :rectangle_y]
+            width  <= [self, :rectangle_width]
+            height <= [self, :rectangle_height]
+            fill   <= [self, :rectangle_fill, computed_by: [:rectangle_red, :rectangle_green, :rectangle_blue, :rectangle_alpha]]
+          }
+        }
+      }
+    }.show
+  end
+end
+
+DynamicArea.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 4 (declarative stable `path` approach without [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -5945,7 +6299,7 @@ window('Dynamic Area', 240, 600) {
     }
     
     area {
-      @rectangle = rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value) { # stable path
+      @rectangle = rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value) { # stable implicit path shape
         fill r: @red_spinbox.value, g: @green_spinbox.value, b: @blue_spinbox.value, a: @alpha_spinbox.value / 100.0
       }
     }
@@ -6643,7 +6997,121 @@ UI.main
 UI.quit
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+
+```ruby
+# https://github.com/jamescook/libui-ruby/blob/master/example/histogram.rb
+
+require 'glimmer-dsl-libui'
+
+class Histogram
+  include Glimmer
+  
+  X_OFF_LEFT   = 20
+  Y_OFF_TOP    = 20
+  X_OFF_RIGHT  = 20
+  Y_OFF_BOTTOM = 20
+  POINT_RADIUS = 5
+  COLOR_BLUE   = Glimmer::LibUI.interpret_color(0x1E90FF)
+  
+  attr_accessor :datapoints, :histogram_color
+  
+  def initialize
+    @datapoints   = 10.times.map {Random.new.rand(90)}
+    @histogram_color        = COLOR_BLUE
+  end
+  
+  def graph_size(area_width, area_height)
+    graph_width = area_width - X_OFF_LEFT - X_OFF_RIGHT
+    graph_height = area_height - Y_OFF_TOP - Y_OFF_BOTTOM
+    [graph_width, graph_height]
+  end
+  
+  def point_locations(width, height)
+    xincr = width / 9.0 # 10 - 1 to make the last point be at the end
+    yincr = height / 100.0
+  
+    @datapoints.each_with_index.map do |value, i|
+      val = 100 - value
+      [xincr * i, yincr * val]
+    end
+  end
+  
+  # method-based custom control representing a graph path
+  def graph_path(width, height, should_extend, &block)
+    locations = point_locations(width, height).flatten
+    path {
+      if should_extend
+        polygon(locations + [width, height, 0, height])
+      else
+        polyline(locations)
+      end
+      
+      # apply a transform to the coordinate space for this path so (0, 0) is the top-left corner of the graph
+      transform {
+        translate X_OFF_LEFT, Y_OFF_TOP
+      }
+      
+      block.call
+    }
+  end
+  
+  def launch
+    window('histogram example', 640, 480) {
+      margined true
+      
+      horizontal_box {
+        vertical_box {
+          stretchy false
+          
+          10.times do |i|
+            spinbox(0, 100) { |sb|
+              stretchy false
+              value <=> [self, "datapoints[#{i}]", after_write: -> { @area.queue_redraw_all }]
+            }
+          end
+          
+          color_button { |cb|
+            stretchy false
+            color <=> [self, :histogram_color, after_write: -> { @area.queue_redraw_all }]
+          }
+        }
+        
+        @area = area {
+          on_draw do |area_draw_params|
+            rectangle(0, 0, area_draw_params[:area_width], area_draw_params[:area_height]) {
+              fill 0xFFFFFF
+            }
+            
+            graph_width, graph_height = *graph_size(area_draw_params[:area_width], area_draw_params[:area_height])
+          
+            figure(X_OFF_LEFT, Y_OFF_TOP) {
+              line(X_OFF_LEFT, Y_OFF_TOP + graph_height)
+              line(X_OFF_LEFT + graph_width, Y_OFF_TOP + graph_height)
+              
+              stroke 0x000000, thickness: 2, miter_limit: 10
+            }
+          
+            # now create the fill for the graph below the graph line
+            graph_path(graph_width, graph_height, true) {
+              fill @histogram_color.merge(a: 0.5)
+            }
+            
+            # now draw the histogram line
+            graph_path(graph_width, graph_height, false) {
+              stroke @histogram_color.merge(thickness: 2, miter_limit: 10)
+            }
+          end
+        }
+      }
+    }.show
+  end
+end
+
+Histogram.new.launch
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
 
 ```ruby
 # https://github.com/jamescook/libui-ruby/blob/master/example/histogram.rb
@@ -6657,9 +7125,10 @@ Y_OFF_TOP    = 20
 X_OFF_RIGHT  = 20
 Y_OFF_BOTTOM = 20
 POINT_RADIUS = 5
-COLOR_BLUE   = 0x1E90FF
+COLOR_BLUE   = Glimmer::LibUI.interpret_color(0x1E90FF)
 
 @datapoints   = 10.times.map {Random.new.rand(90)}
+@color        = COLOR_BLUE
 
 def graph_size(area_width, area_height)
   graph_width = area_width - X_OFF_LEFT - X_OFF_RIGHT
@@ -6715,11 +7184,12 @@ window('histogram example', 640, 480) {
         }
       end
       
-      @color_button = color_button {
+      color_button { |cb|
         stretchy false
         color COLOR_BLUE
         
         on_changed do
+          @color = cb.color
           @area.queue_redraw_all
         end
       }
@@ -6727,31 +7197,27 @@ window('histogram example', 640, 480) {
     
     @area = area {
       on_draw do |area_draw_params|
-        path {
-          rectangle(0, 0, area_draw_params[:area_width], area_draw_params[:area_height])
-          
+        rectangle(0, 0, area_draw_params[:area_width], area_draw_params[:area_height]) {
           fill 0xFFFFFF
         }
         
         graph_width, graph_height = *graph_size(area_draw_params[:area_width], area_draw_params[:area_height])
       
-        path {
-          figure(X_OFF_LEFT, Y_OFF_TOP) {
-            line(X_OFF_LEFT, Y_OFF_TOP + graph_height)
-            line(X_OFF_LEFT + graph_width, Y_OFF_TOP + graph_height)
-          }
+        figure(X_OFF_LEFT, Y_OFF_TOP) {
+          line(X_OFF_LEFT, Y_OFF_TOP + graph_height)
+          line(X_OFF_LEFT + graph_width, Y_OFF_TOP + graph_height)
           
           stroke 0x000000, thickness: 2, miter_limit: 10
         }
       
         # now create the fill for the graph below the graph line
         graph_path(graph_width, graph_height, true) {
-          fill @color_button.color.merge(a: 0.5)
+          fill @color.merge(a: 0.5)
         }
         
         # now draw the histogram line
         graph_path(graph_width, graph_height, false) {
-          stroke @color_button.color.merge(thickness: 2, miter_limit: 10)
+          stroke @color.merge(thickness: 2, miter_limit: 10)
         }
       end
     }
@@ -7429,7 +7895,181 @@ end
 TinyMidiPlayer.new
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+
+```ruby
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+class TinyMidiPlayer
+  include Glimmer
+  
+  VERSION = '0.0.1'
+  
+  attr_accessor :selected_file
+
+  def initialize
+    @pid = nil
+    @music_directory = File.expand_path('../sounds', __dir__)
+    @midi_files      = Dir.glob(File.join(@music_directory, '**/*.mid'))
+                          .sort_by { |path| File.basename(path) }
+    at_exit { stop_midi }
+    create_gui
+  end
+
+  def stop_midi
+    if @pid
+      Process.kill(:SIGKILL, @pid) if @th.alive?
+      @pid = nil
+    end
+  end
+
+  def play_midi
+    stop_midi
+    if @pid.nil? && @selected_file
+      begin
+        @pid = spawn "timidity #{@selected_file}"
+        @th = Process.detach @pid
+      rescue Errno::ENOENT
+        warn 'Timidty++ not found. Please install Timidity++.'
+        warn 'https://sourceforge.net/projects/timidity/'
+      end
+    end
+  end
+
+  def show_version
+    msg_box('Tiny Midi Player',
+              "Written in Ruby\n" \
+                "https://github.com/kojix2/libui\n" \
+                "Version #{VERSION}")
+  end
+
+  def create_gui
+    menu('Help') {
+      menu_item('Version') {
+        on_clicked do
+          show_version
+        end
+      }
+    }
+    window('Tiny Midi Player', 200, 50) {
+      horizontal_box {
+        vertical_box {
+          stretchy false
+          
+          button('▶') {
+            on_clicked do
+              play_midi
+            end
+          }
+          button('■') {
+            on_clicked do
+              stop_midi
+            end
+          }
+        }
+
+        combobox {
+          items @midi_files.map { |path| File.basename(path) }
+          # data-bind selected item (String) to self.selected_file with on-read/on-write converters and after_write operation
+          selected_item <=> [self, :selected_file, on_read: ->(f) {File.basename(f.to_s)}, on_write: ->(f) {File.join(@music_directory, f)}, after_write: -> { play_midi if @th&.alive? }]
+        }
+      }
+    }.show
+  end
+end
+
+TinyMidiPlayer.new
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (with [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class TinyMidiPlayer
+  include Glimmer
+  
+  VERSION = '0.0.1'
+  
+  attr_accessor :selected_file
+
+  def initialize
+    @pid = nil
+    @music_directory = File.expand_path('../sounds', __dir__)
+    @midi_files      = Dir.glob(File.join(@music_directory, '**/*.mid'))
+                          .sort_by { |path| File.basename(path) }
+    at_exit { stop_midi }
+    create_gui
+  end
+
+  def stop_midi
+    if @pid
+      Process.kill(:SIGKILL, @pid) if @th.alive?
+      @pid = nil
+    end
+  end
+
+  def play_midi
+    stop_midi
+    if @pid.nil? && @selected_file
+      begin
+        @pid = spawn "timidity #{@selected_file}"
+        @th = Process.detach @pid
+      rescue Errno::ENOENT
+        warn 'Timidty++ not found. Please install Timidity++.'
+        warn 'https://sourceforge.net/projects/timidity/'
+      end
+    end
+  end
+
+  def show_version
+    msg_box('Tiny Midi Player',
+              "Written in Ruby\n" \
+                "https://github.com/kojix2/libui\n" \
+                "Version #{VERSION}")
+  end
+
+  def create_gui
+    menu('Help') {
+      menu_item('Version') {
+        on_clicked do
+          show_version
+        end
+      }
+    }
+    window('Tiny Midi Player', 200, 50) {
+      horizontal_box {
+        vertical_box {
+          stretchy false
+          
+          button('▶') {
+            on_clicked do
+              play_midi
+            end
+          }
+          button('■') {
+            on_clicked do
+              stop_midi
+            end
+          }
+        }
+
+        combobox {
+          items @midi_files.map { |path| File.basename(path) }
+          # data-bind selected index (Integer) to self.selected_file with on-read/on-write converters and after_write operation
+          selected <=> [self, :selected_file, on_read: ->(f) {@midi_files.index(f)}, on_write: ->(i) {@midi_files[i]}, after_write: -> { play_midi if @th&.alive? }]
+        }
+      }
+    }.show
+  end
+end
+
+TinyMidiPlayer.new
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (without [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -7757,22 +8397,23 @@ class Tetris
     menu('Game') {
       @pause_menu_item = check_menu_item('Pause') {
         enabled false
-        
-        on_clicked do
-          @game.paused = @pause_menu_item.checked?
-        end
+        checked <=> [@game, :paused]
       }
+      
       menu_item('Restart') {
         on_clicked do
           @game.restart!
         end
       }
+      
       separator_menu_item
+      
       menu_item('Exit') {
         on_clicked do
           exit(0)
         end
       }
+      
       quit_menu_item if OS.mac?
     }
     
@@ -7782,6 +8423,7 @@ class Tetris
           show_high_scores
         end
       }
+      
       menu_item('Clear High Scores') {
         on_clicked {
           @game.clear_high_scores!
@@ -7790,22 +8432,16 @@ class Tetris
     }
 
     menu('Options') {
-      radio_menu_item('Instant Down on Up Arrow') {
-        on_clicked do
-          @game.instant_down_on_up = true
-        end
+      radio_menu_item('Instant Down on Up Arrow') { |r|
+        checked <=> [@game, :instant_down_on_up]
       }
-      radio_menu_item('Rotate Right on Up Arrow') {
-        on_clicked do
-          @game.rotate_right_on_up = true
-        end
+      
+      radio_menu_item('Rotate Right on Up Arrow') { |r|
+        checked <=> [@game, :rotate_right_on_up]
       }
-      radio_menu_item('Rotate Left on Up Arrow') {
-        checked true
-
-        on_clicked do
-          @game.rotate_left_on_up = true
-        end
+      
+      radio_menu_item('Rotate Left on Up Arrow') { |r|
+        checked <=> [@game, :rotate_left_on_up]
       }
     }
 
@@ -7817,6 +8453,7 @@ class Tetris
           end
         }
       end
+      
       menu_item('About') {
         on_clicked do
           show_about_dialog
@@ -8140,7 +8777,140 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-timer.png](images/glimmer-dsl-libui-mac-timer.png) ![glimmer-dsl-libui-mac-timer-in-progress.png](images/glimmer-dsl-libui-mac-timer-in-progress.png) | ![glimmer-dsl-libui-windows-timer.png](images/glimmer-dsl-libui-windows-timer.png) ![glimmer-dsl-libui-windows-timer-in-progress.png](images/glimmer-dsl-libui-windows-timer-in-progress.png) | ![glimmer-dsl-libui-linux-timer.png](images/glimmer-dsl-libui-linux-timer.png) ![glimmer-dsl-libui-linux-timer-in-progress.png](images/glimmer-dsl-libui-linux-timer-in-progress.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class Timer
+  include Glimmer
+  
+  SECOND_MAX = 59
+  MINUTE_MAX = 59
+  HOUR_MAX = 23
+  
+  attr_accessor :hour, :min, :sec, :started, :played
+  
+  def initialize
+    @pid = nil
+    @alarm_file = File.expand_path('../sounds/AlanWalker-Faded.mid', __dir__)
+    @hour = @min = @sec = 0
+    at_exit { stop_alarm }
+    setup_timer
+    create_gui
+  end
+
+  def stop_alarm
+    if @pid
+      Process.kill(:SIGKILL, @pid) if @th.alive?
+      @pid = nil
+    end
+  end
+
+  def play_alarm
+    stop_alarm
+    if @pid.nil?
+      begin
+        @pid = spawn "timidity -G 0.0-10.0 #{@alarm_file}"
+        @th = Process.detach @pid
+      rescue Errno::ENOENT
+        warn 'Timidty++ not found. Please install Timidity++.'
+        warn 'https://sourceforge.net/projects/timidity/'
+      end
+    end
+  end
+
+  def setup_timer
+    unless @setup_timer
+      Glimmer::LibUI.timer(1) do
+        if @started
+          seconds = @sec
+          minutes = @min
+          hours = @hour
+          if seconds > 0
+            self.sec = seconds -= 1
+          end
+          if seconds == 0
+            if minutes > 0
+              self.min = minutes -= 1
+              self.sec = seconds = SECOND_MAX
+            end
+            if minutes == 0
+              if hours > 0
+                self.hour = hours -= 1
+                self.min = minutes = MINUTE_MAX
+                self.sec = seconds = SECOND_MAX
+              end
+              if hours == 0 && minutes == 0 && seconds == 0
+                self.started = false
+                unless @played
+                  play_alarm
+                  msg_box('Alarm', 'Countdown Is Finished!')
+                  self.played = true
+                end
+              end
+            end
+          end
+        end
+      end
+      @setup_timer = true
+    end
+  end
+
+  def create_gui
+    window('Timer') {
+      margined true
+      
+      group('Countdown') {
+        vertical_box {
+          horizontal_box {
+            spinbox(0, HOUR_MAX) {
+              stretchy false
+              value <=> [self, :hour]
+            }
+            label(':') {
+              stretchy false
+            }
+            spinbox(0, MINUTE_MAX) {
+              stretchy false
+              value <=> [self, :min]
+            }
+            label(':') {
+              stretchy false
+            }
+            spinbox(0, SECOND_MAX) {
+              stretchy false
+              value <=> [self, :sec]
+            }
+          }
+          horizontal_box {
+            button('Start') {
+              enabled <= [self, :started, on_read: :!]
+              
+              on_clicked do
+                self.started = true
+                self.played = false
+              end
+            }
+            
+            button('Stop') {
+              enabled <= [self, :started]
+              
+              on_clicked do
+                self.started = false
+              end
+            }
+          }
+        }
+      }
+    }.show
+  end
+end
+
+Timer.new
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -8313,7 +9083,7 @@ https://github.com/iraamaro/i3off-gtk-ruby
 
 ### Issues
 
-If you encounter [issues](https://github.com/AndyObtiva/glimmer-dsl-libui/issues) that are not reported, discover missing features that are not mentioned in [TODO.md](TODO.md), or think up better ways to use [libui](https://github.com/andlabs/libui) than what is possible with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui), you may submit an [issue](https://github.com/AndyObtiva/glimmer-dsl-libui/issues/new) or [pull request](https://github.com/AndyObtiva/glimmer-dsl-libui/compare) on [GitHub](https://github.com).
+If you encounter [issues](https://github.com/AndyObtiva/glimmer-dsl-libui/issues) that are not reported, discover missing features that are not mentioned in [TODO.md](TODO.md), or think up better ways to use [libui](https://github.com/andlabs/libui) than what is possible with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui), you may submit an [issue](https://github.com/AndyObtiva/glimmer-dsl-libui/issues/new) or [pull request](https://github.com/AndyObtiva/glimmer-dsl-libui/compare) on [GitHub](https://github.com). In the meantime, you may try older gem versions of [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) till you find one that works until issues are resolved.
 
 ### Chat
 
@@ -8345,6 +9115,8 @@ These features have been planned or suggested. You might see them in a future ve
     is fine, but please isolate to its own commit so I can cherry-pick
     around it.
 
+Note that the latest development sometimes takes place in [development](https://github.com/AndyObtiva/glimmer-dsl-libui/tree/development) branch (which is deleted once merged back to [master](https://github.com/AndyObtiva/glimmer-dsl-libui)).
+
 ## Contributors
 
 * [Andy Maleh](https://github.com/AndyObtiva) (Founder)