glimmer-dsl-libui 0.4.3 → 0.4.7

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.3
+# [<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.7
 ## 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.3'
+gem 'glimmer-dsl-libui', '~> 0.4.7'
 ```
 
 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)
@@ -877,7 +896,7 @@ Given that it is very new and is not a [libui](https://github.com/andlabs/libui)
 - Including an `image` inside an `area` `on_draw` listener improves performance due to not retaining pixel/line data in memory.
 - Supplying `width` and `height` (2nd and 3rd arguments) greatly improves performance when shrinking image.
 
-Currently, it is recommended to use `image` with very small `width` and `height` values only.
+Currently, it is recommended to use `image` with very small `width` and `height` values only (e.g. 24x24).
 
 Setting a [`transform` `matrix`](#area-transform-matrix) is supported under `image` just like it is under `path` and `text` inside `area`.
 
@@ -1033,6 +1052,8 @@ window('Basic Image', 96, 96) {
 
 One final note is that in Linux, table images grow and shrink with the image size unlike on the Mac where table row heights are constant regardless of image sizes. As such, you may be able to repurpose a table with a single image column and a single row as an image control with more native libui rendering if you are only targeting Linux with your app.
 
+![linux table image](images/glimmer-dsl-libui-linux-basic-table-image.png)
+
 Check out [examples/basic_image.rb](#basic-image) (all versions) for examples of using `image` Glimmer custom control.
 
 #### Colors
@@ -1352,11 +1373,28 @@ See examples of the `observe` keyword at [Color The Circles](#color-the-circles)
 
 [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) supports both bidirectional (two-way) data-binding and unidirectional (one-way) data-binding.
 
+Data-binding enables writing very expressive, terse, and declarative code to synchronize View properties with Model attributes without writing many lines or pages of imperative code doing the same thing, increasing productivity immensely.
+
+Data-binding automatically takes advantage of the [Observer Pattern](#observer-pattern) behind the scenes and is very well suited to declaring View property data sources piecemeal. On the other hand, explicit use of the [Observer Pattern](#observer-pattern) is sometimes more suitable when needing to make multiple View updates upon a single Model attribute change.
+
+Data-binding supports utilizing the [MVP (Model View Presenter)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) flavor of [MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) by observing both the View and a Presenter for changes and updating the opposite side upon encountering them. This enables writing more decoupled cleaner code that keeps View code and Model code disentangled and highly maintainable. For example, check out the Snake game presenters for [Grid](/examples/snake/presenter/grid.rb) and [Cell](/examples/snake/presenter/cell.rb), which act as proxies for the actual Snake game models [Snake](/examples/snake/model/snake.rb) and [Apple](/examples/snake/model/apple.rb), mediating synchronization of data between them and the [Snake View GUI](/examples/snake.rb).
+
+![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
+- `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`
+- `search_entry`: `text`
+- `slider`: `value`
+- `spinbox`: `value`
+- `time_picker`: `time`
 
 Example of bidirectional data-binding:
 
@@ -1372,11 +1410,11 @@ Another example of bidirectional data-binding with an option:
 
 ```ruby
 entry {
-  text <=> [self, :entry_text, after_write: ->(text) {puts text}]
+  text <=> [self, :entered_text, after_write: ->(text) {puts text}]
 }
 ```
 
-That is data-binding `entry_text` attribute on `self` to `entry` `text` property and printing text after write to the model.
+That is data-binding `entered_text` attribute on `self` to `entry` `text` property and printing text after write to the model.
 
 [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) supports unidirectional (one-way) data-binding of any control/shape/attributed-string property via the `<=` operator (indicating data is moving from the right side, which is the Model, to the left side, which is the GUI View object).
 
@@ -1400,19 +1438,16 @@ window {
 
 That is data-binding the `window` `title` property to the `score` attribute of a `@game`, but converting on read from the Model to a `String`.
 
-The data-binding API:
-- Bidirectional (two-way) data-binding to a Model attribute accessor: `view_property <=> [model, attribute, *read_or_write_options]`
-- Unidirectional (one-way) data-binding to a Model attribute reader: `view_property <= [model, attribute, *read_only_options]`
+To summarize the data-binding API:
+- `view_property <=> [model, attribute, *read_or_write_options]`: Bidirectional (two-way) data-binding to Model attribute accessor
+- `view_property <= [model, attribute, *read_only_options]`: Unidirectional (one-way) data-binding to Model attribute reader
 
 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-binding enables writing very expressive, terse, and declarative code to synchronize View properties with Model attributes without writing many lines or pages of imperative code doing the same thing.
-
-Data-binding automatically takes advantage of the [Observer Pattern](#observer-pattern) behind the scenes and is very well suited to declaring View property data sources piecemeal. On the other hand, explicit use of the [Observer Pattern](#observer-pattern) is sometimes more suitable when needing to make multiple View updates upon a single Model attribute change.
-
-Data-binding supports utilizing the [MVP (Model View Presenter)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) flavor of [MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) by observing both the View and a Presenter for changes and updating the opposite side upon encountering them. This enables writing more decoupled cleaner code that keeps View code and Model code disentangled and highly maintainable. For example, check out the Snake game presenters for [Grid](/examples/snake/presenter/grid.rb) and [Cell](/examples/snake/presenter/cell.rb), which act as proxies for the actual Snake game models [Snake](/examples/snake/model/snake.rb) and [Apple](/examples/snake/model/apple.rb), mediating synchronization of data between them and the [Snake View GUI](/examples/snake.rb).
-
-![MVP](https://www.researchgate.net/profile/Gilles-Perrouin/publication/320249584/figure/fig8/AS:668260987068418@1536337243385/Model-view-presenter-architecture.png)
+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.
@@ -1421,6 +1456,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)). 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.
 
@@ -1432,9 +1468,11 @@ 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 [Basic Entry](#basic-entry), [Form](#form), [Form Table](#form-table), [Login](#login), [Method-Based Custom Keyword](#method-based-custom-keyword), [Snake](#snake) and [Tic Tac Toe](#tic_tac_toe) examples.
+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.
 
 ### API Gotchas
 
@@ -1850,7 +1888,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.
 
@@ -1877,17 +1915,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 }
@@ -1901,12 +1945,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
@@ -1942,17 +1994,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 {
@@ -1970,7 +2052,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
             }
@@ -1982,9 +2064,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...'
@@ -1994,14 +2082,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
@@ -2415,7 +2503,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'
@@ -2456,18 +2570,44 @@ 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'
 
-include Glimmer
+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
 
-window('color button', 240) {
-  color_button { |cb|
-    color :blue
-    
-    on_changed do
+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'
+
+include Glimmer
+
+window('color button', 240) {
+  color_button { |cb|
+    color :blue
+    
+    on_changed do
       rgba = cb.color
       p rgba
     end
@@ -2538,7 +2678,35 @@ 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'
+
+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'
@@ -5748,7 +5916,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'
@@ -5850,7 +6107,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'
@@ -5942,7 +6294,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
       }
     }
@@ -6640,7 +6992,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
@@ -6654,9 +7120,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
@@ -6712,11 +7179,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
       }
@@ -6724,31 +7192,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
     }
@@ -6892,7 +7356,7 @@ end
 Login.new.launch
 ```
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (with [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -6962,7 +7426,7 @@ end
 Login.new.launch
 ```
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 4 (with [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -7426,7 +7890,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 { |c|
+          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 { |c|
+          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'
@@ -8137,7 +8775,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'
@@ -8310,7 +9081,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
 
@@ -8342,6 +9113,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)